@charset "UTF-8";
#main #header { background: url(../images/main_header.jpg) no-repeat; }

#main #header .titlebox { margin: 8rem 0 17.5rem 4rem; }

#main #contents { padding: 5rem 0 0rem; }

#main .section1 { padding: 0 4rem; }

#main .sec1 { margin-bottom: 5rem; }

#main .sec1_1 .textWrap { width: calc(100% - 24rem); float: left; word-break: keep-all; }

#main .sec1_1 .textWrap .cont { color: #3b3b3b; margin-bottom: 2rem; line-height: 2.8rem; }

#main .sec1_1 .photoWrap { width: 24rem; float: left; margin-top: -4rem; padding-left: 4rem; }

#main .sec1_1 .photoWrap > img { margin: 0 auto 1rem; display: block; -webkit-box-shadow: 0rem 0.2rem 1rem rgba(0, 0, 0, 0.1); box-shadow: 0rem 0.2rem 1rem rgba(0, 0, 0, 0.1); }

#main .sec1_1 .photoWrap .name { text-align: right; }

#main .sec1_1 .photoWrap .name span { vertical-align: bottom; margin-right: .5rem; }

#main .sec1_1 .textWrap2 { display: none; }

#main .sec1_1:after { content: ''; display: block; clear: both; }

#main .sec1_2 .imgbox { float: left; width: 40rem; }


#main .sec1_2 .textbox { padding: 5rem 0 3rem 1rem; background: url(../images/blur_bg.png) no-repeat; width: calc(100% - 40rem); float: left; margin-top: -6rem; }
#main .sec1_2 .textbox .type1{font-family: 'Gmarket Sans'; font-weight:500; font-size:1.75rem; text-align:center;   letter-spacing: -0.08rem; }
#main .sec1_2 .textbox .type1 .title{font-weight:700; }
#main .sec1_2 .textbox .music { background: url(../images/music_bg.png) no-repeat;    background-position: center top; padding-top: 6rem; text-align:center; margin-bottom:3rem}
#main .sec1_2 .textbox .box{background-color: #1eb6db; padding:1.5rem 2rem;   border-radius: 1rem;  text-align: center;  color: #fff;/* font-family: 'Gmarket Sans';  */font-size:1.55rem;font-weight:500}
#main .sec1_2 .textbox .box span{color:#fff600; font-weight:700;}

#main .sec1_2 .textbox .t1 { color: #6b6a6a;     line-height: 3rem;}

#main .sec1_2 .textbox a { background-color: #838793; color: #fff; font-size: 1.4rem; display: inline-block; padding: .6rem 1rem; vertical-align: middle; float: right; margin-top: 6rem;}

#main .sec1_2:after { content: ''; display: block; clear: both; }

#main .sec1_3 .news1 { margin-bottom: 3rem; }

#main .sec1_3 .news1 li { float: left; width: 50%; padding-right: 1.2rem; }

#main .sec1_3 .news1 li:nth-child(2) { padding-left: 1.2rem; padding-right: 0; }

#main .sec1_3 .news1 li img { margin-bottom: 1.5rem; }

#main .sec1_3 .news1 li .text { padding-left: 1.5rem; border-left: 1px solid #cacfde; }

#main .sec1_3 .news1 li .text .ti { height: 5rem; line-height: 2.5rem; font-size: 2rem; font-family: "Nanum Square"; color: #000; font-weight: 600; margin-bottom: .5rem; word-break: keep-all; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

#main .sec1_3 .news1 li .text .desc { color: #6b6a6a; height: 5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

#main .sec1_3 .news1 li:hover .text .ti { text-decoration: underline; }

#main .sec1_3 .news1:after { content: ''; display: block; clear: both; }

#main .sec1_3 .news2 { margin-bottom: 7rem; }

#main .sec1_3 .news2 li .ti { position: relative; }

#main .sec1_3 .news2 li .ti a { color: #0a0a0a; background-color: #f0f1f2; font-size: 1.8rem; font-family: "Nanum Square"; font-weight: 700; padding: 1rem 3rem 1rem 2rem; display: block; margin-top: 1rem; }

#main .sec1_3 .news2 li .ti:after { content: ''; width: 2rem; height: 2rem; font-size: 2rem; font-family: "xeicon"; color: #bcadad; position: absolute; right: 1.5rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: center; line-height: 2rem; }

#main .sec1_3 .news2 li:hover .ti a { text-decoration: underline; }

#main .sec1_3 .news2 li:hover .ti:after { color: #00aeef; }

#main .more { font-size: 1.4rem; border: 1px solid #7f7f7f; color: #3b3b3b; height: 2.8rem; line-height: 2.6rem; padding: 0 2rem; display: inline-block; font-weight: 500; }

#main .more:hover { background-color: #3b3b3b; border: 1px solid #3b3b3b; color: #fff; -webkit-transition: all .3s; transition: all .3s; }



#main .section2 {background: url(../images/focus_bg.jpg) no-repeat;padding: 9rem 0 0rem;}

#main .section2 .section2Box {padding: 0 4rem 6rem;background-color: #d4f2f8;}

#main .section2 .section2Box .h2box { background: none; }

#main .section2 .section2Box .h2box h2.ti1.type2 { background: none; }

#main .section2 .focusText { width: calc(100% - 38.6rem); float: left;   padding: 0rem 1.3rem;  /* word-break: keep-all; */ }

#main .section2 .focusText{ padding-left: 1.5rem;}
#main .section2 .focusText .ti { color: #3173cd; font-size: 2.4rem; font-family: "Nanum Square"; font-weight: 900; margin-bottom: 0.5rem; }
#main .section2 .focusText .desc { color: #6b6a6a;  font-size: 1.6rem; margin-bottom: 2rem; }

#main .section2 .object { width: 33.6rem; float: right; margin-top: -3rem; }
/* #main .section2 .object { width: 38.6rem; float: left; margin-top: -6rem; } */

#main .section2 .section2Box .linklist{clear: both}
#main .section2 .section2Box .linklist::after { content: ''; display: block; clear: both; }
#main .section2 .section2Box .linklist li {width:50%; float:left}
#main .section2 .section2Box .linklist li a {width:100%; display: inline-block; padding: 0 1rem}
#main .section2 .section2Box .linklist li a img{width:12.5rem; float:left}
#main .section2 .section2Box .linklist li a .textbox{width:calc(100% - 12.5rem); float:left;min-height: 14.5rem; padding-left: 1.2rem;}
#main .section2 .section2Box .linklist li a .textbox .title{color:#3173cd; font-size:2rem; font-weight: 500;/*  font-family: "Nanum Square"; */ letter-spacing: -0.1rem; word-spacing: -0.2rem; word-break: keep-all; line-height: 2.5rem;margin: .5rem 0 1.4rem;height: 5rem;}
#main .section2 .section2Box .linklist li a .textbox .info{color:#6b6a6a}
#main .section2 .section2Box .linklist li a .more{clear:both; margin-top:2rem; padding: 0 3.6rem;}
#main .section2 .section2Box .linklist li a:hover .textbox .title{text-decoration: underline;}

#main .section2::after { content: ''; display: block; clear: both; }



#main .section3 { background: #37c7d4; padding: 5rem 0 2rem;  }

#main .section3 .section3Box { padding: 0 4rem; }
#main .section3 .section3Box:after { content: ''; display: block; clear: both; }

#main .section3 .section3Box .h2box { background: none; }

#main .section3 .section3Box .h2box h2.ti1.type2 { background: none; color: #fff; }

#main .section3 .section3Box .h2box h2.ti1.type2 span { font-family: sans-serif; font-weight: 700; }

#main .section3 .section3Box .textbox { border: 1px solid rgba(8, 127, 138, 0.75); border-top-left-radius: 3rem; border-bottom-right-radius: 3rem; background-color: rgba(8, 127, 138, 0.75); width: 32.5rem; padding: 5.5rem 0rem 5rem; color: #fff; font-family: "Noto Sans KR"; font-size: 2rem; text-align: center; font-weight: 400; -webkit-transition: all .2s; transition: all .2s; float: left;} 

#main .section3 .section3Box .textbox a { display: inline-block; width: 100%; }
#main .section3 .section3Box .textbox .title { color: #fcff00; font-weight: 500; font-size: 4.5rem; margin: .75rem 0 1.8rem; }
#main .section3 .section3Box .textbox .title2 { color: #ffffff; font-weight: 700; font-size: 2.5rem; margin: .75rem 0 1.8rem;  line-height: 5.5rem; }
#main .section3 .section3Box .textbox:hover { background-color: #087f8a; border-radius: 0; border-top-right-radius: 3rem; border-bottom-left-radius: 3rem; -webkit-transition: all .2s; transition: all .2s; }
#main .section3 .section3Box .textbox2{float: left; width:calc(100% - 35rem - 9%);; color: #fff; font-size: 1.5rem; line-height: 2rem; text-align: center; text-shadow: 1px 1px 0 rgba(0,0,0,.3);  margin: -6rem 0 0 9% ;}
#main .section3 .section3Box .textbox2 span{text-align: right; width: 100%;display: inline-block;}

#main .section3 .section3Box .imgbox{width:calc(100% - 32.5rem); padding-left:3rem; float:left; margin-top: -10rem;}


/* 2020-09-18 손글씨 */
.nanum-pen{ font-family: 'Nanum Pen Script'; font-size: 2.8rem; line-height: 2.8rem }
.nanum-pen2{ font-family: 'Nanum Pen Script'; font-size: 3.0rem; color:#00558b !important; line-height: 4.2rem !important; }

@media (max-width: 900px) { 
    
    #main .sec1_2 .imgbox{width:100%}
    #main .sec1_2 .imgbox a{display:inline-block; width:100%; text-align:center}
    #main .sec1_2 .textbox{width:100%; margin-top:0; background-position: center top;text-align:center}
    #main .section2 .focusText { width: calc(100% - 30rem); padding: 0; }
    #main .section2 .object { width: 30rem;margin-top: -4rem; } 
    #main .section2 .section2Box .linklist li{width:100%; margin-bottom:3rem}
}

@media (max-width: 820px) {   
  #main .section2 { padding: 8rem 0 0rem;background-position: right top; background-size: cover; }

  #main .section2 .focusText{padding: 0 0 0 1rem;}
  #main .section2 .focusText .desc{padding-right: 27rem;}
  #main .section2 .newdeal{width: 43rem;}
  #main .section2 .object { width: 26rem;margin-top: 0; } 

@media (max-width: 768px) { #main #header { background-position: center bottom; }
  #main .section1 { padding: 0 2rem; }
  #main .section1 .textWrap { width: calc(100% - 16rem); }
  #main .section1 .textWrap span { display: none; }
  #main .section1 .photoWrap { width: 16rem; padding-left: 2rem; margin-top: 0; }
  #main .section1 .textWrap2 { display: block; width: 100% !important; }
  #main .sec1 { margin-bottom: 3rem; }
  #main .sec1_2 .imgbox { width: 100%; text-align: center; }
  #main .sec1_2 .textbox { width: 100%; padding: 5rem 0 1rem; margin-top: 0;  }
  #main .sec1_3 .news1 { margin-bottom: 1rem; }
  #main .sec1_3 .news1 li { width: 100%; padding: 0 0 2rem !important; }
  #main .sec1_3 .news1 li a { width: 100%; }
  #main .sec1_3 .news1 li img { margin: 0 auto 1.5rem; display: block; }
  #main .sec1_3 .news1 li .text .ti { height: auto; }
  #main .sec1_3 .news2 { margin-bottom: 5rem; }
  
  #main .section2 .section2Box { padding: 0 1rem 0 3rem; }
  #main .section2 .focusText { width: calc(100% - 22rem); }
  #main .section2 .focusText p { font-size: 2rem; }
  #main .section2 .object { width: 22rem;  }

  #main .section3 {padding: 4.5rem 0 4rem; background-size: cover;}
  #main .section3 .section3Box { padding: 0 3rem; }
  #main .section3 .section3Box .textbox2{float: none; width: 100%; margin: 2rem auto 0; display: inline-block;}
  #main .section3 .section3Box .textbox2 span{text-align: center;}
    #main .section3 .section3Box .imgbox{margin-top:0}
  #footer { padding: 3rem 2rem; } 

    /*2020-12-23*/
  .y2020_end_wrap .contbox{padding: 12rem 4rem 17rem;}
  .y2020_end_wrap .contbox .txtbox{padding: 4rem 4rem; font-size: 1.8rem;}
  .y2020_end_wrap .contbox .txtbox p .mdn{display: none;}
  .y2020_end_wrap .contbox2::before{bottom: 10rem;width: 28rem;height: 29rem; }
  .y2020_end_wrap .contbox2 img{padding-right: 0;}
}

@media (max-width: 640px) { 
  /*#main .section2 .section2Box .linklist{padding-right: 0;}*/
    #main .section3 .section3Box .textbox { width: 100%; } 
    #main .section3 .section3Box .imgbox{width:100%; padding:3rem 0 1rem}
	#main .section2 .section2Box .linklist li a .textbox .title{  margin: 0 auto 3rem;}
}
@media (max-width: 500px) { 
   #main #header .titlebox { margin: 7rem 0 10rem 3rem; }
  #main .section1 .textWrap { width: calc(100% - 12rem); }
  #main .section1 .photoWrap { width: 12rem; padding-left: 1rem; }
  #main .section1 .photoWrap .name img { width: 7rem; }
#main .section2 { position: relative; }
  #main .section2 .focusText { width: 100%;  }
  #main .section2 .object { width: 25rem; margin: 0 auto 2rem;  display: block;  float: initial; }
  	#main .section2 .section2Box .linklist li a .textbox .title{  margin: 0 auto 3rem;}

    .wr_info{position: relative;}
  .photo{width: 8rem; position: absolute;left: 50%; transform: translateX(-50%);top: 10rem;}
  .title_wrap{width: 100%; text-align: center;}
  .title_wrap .write{margin-top: 15rem;}

  .waterdrop{position: relative;}
  .waterdrop .drop{width: 7rem; position: absolute;}
  .waterdrop .drop img{margin: 0 !important;}
  .waterdrop .txt{width: 100%; padding: 3rem 0 2rem;}
  .waterdrop .txt .title{padding-left: 9rem;}

  /*2020-12-23*/
  .y2020_end_wrap .contbox{padding: 5rem 2rem 8rem;}
  .y2020_end_wrap .contbox .txtbox{padding: 3rem 2rem; font-size: 1.5rem;}
  .y2020_end_wrap .contbox2::before{width: 26rem; height: 25rem;}

}