@charset "UTF-8";

#header .titlebox { display: inline-block; padding: 0 3.15rem .8rem; margin: 3rem 0 3.5rem 4rem; background: url(../images/titlebox_bg.png) no-repeat; background-position: 0 .8rem; background-size: contain; text-align: center; }

#header .titlebox .vol { font-family: "Noto Sans KR", "Nanum Square"; font-size: 1.7rem; font-weight: 700; color: #fff;letter-spacing: -0.15rem; }

#header .titlebox .vol span { position: relative; padding-left: 1.5rem; color: #fff; }

#header .titlebox .vol span:before { position: absolute; top: 1.2rem; left: .5rem; width: 4px; height: 4px; border-radius: 50%; background-color: #fff; content: ''; }

#header .sns { position: absolute; top: 1rem; right: 12.5rem; }

#header .sns li { width: 2.6rem; height: 2.6rem; margin: 0 .2rem; border-radius: 50%; background-color: rgba(0, 0, 0, 0.8); color: #fff; line-height: 2.3rem; text-align: center; float: left; }

#header .sns li a { display: inline-block; width: 100%; }

#header .sns li a i { font-size: 1.4rem; }



#header .sns2 {position: absolute;top: 1rem;right: 2rem;}

#header .sns2 li { width: 9.6rem; height: 2.6rem; margin: 0 .6rem; border-radius: 14px; background-color: rgba(0, 0, 0, 0.8); color: #fff; line-height: 2.3rem; text-align: center; float: left; }

#header .sns2 li span { font-size: 1.2rem;  }

#header .sns2 li a { display: inline-block; width: 100%; }

#header .sns2 li a i { font-size: 1.4rem; }



#header .menu { background-color: rgba(18, 50, 156, 0.8); }

#header .menu li { position: relative; width: 25%; height: 5.8rem; font-family: "Noto Sans KR"; font-weight: 500; color: #fff; line-height: 5.8rem; text-align: center; float: left; }

#header .menu li span { font-family: sans-serif; font-weight: 400; line-height: 5.4rem; }

#header .menu li a { display: inline-block; width: 100%; font-size: 1.7rem; }

#header .menu li a:hover { text-decoration: underline; }

#header .menu li a.active { color: #00e4ff; }

#header .menu li:after { position: absolute; top: 2rem; right: 0; width: 1px; height: 1.8rem; background-color: rgba(255, 255, 255, 0.5); content: ''; }

#header .menu li:last-child:after { display: none; }

#header .menu:after { display: block; content: ''; clear: both; }

#contents { padding: 5rem 4rem 7rem; border-left: 1px solid #e6e6e6; border-right: 1px solid #e6e6e6; }

#contents .h2box { margin-bottom: 2rem; background: url(../images/h2bg.png) no-repeat; background-position: right 3.7rem; }

#contents .h2box h2.ti1 { display: inline-block; position: relative; padding: 1rem 5rem 1rem 0; background-color: #fff; font-family:  "Noto Sans KR", "Nanum Square"; font-size: 3rem; font-weight: 900; color: #2f2f2f; }

#contents .h2box h2.ti1  span { font-family: sans-serif; font-weight: 700; }

#contents .h2box h2.ti1:before { position: absolute; top: 0; left: 0; width: 2.3rem; height: .6rem; border-radius: 2rem; background-color: rgba(76, 190, 244, 0.9); content: ''; }

#contents .h2box h2.ti1:after { position: absolute; top: 0; left: 1.7rem; width: 2.3rem; height: .6rem; border-radius: 2rem; background-color: rgba(102, 244, 245, 0.8); content: ''; }

#contents .h2box h2.ti1.type2 { padding: 1rem 5rem 1rem 1.5rem; }

#contents .h2box h2.ti1.type2:after { left: 0; width: .6rem; height: 2.3rem; }

#contents h3.ti1 { position: relative; padding: 1rem 0 0; margin-bottom: 1.5rem; background-color: #fff; font-family:  "Noto Sans KR", "Nanum Square"; font-size: 2.8rem; font-weight: 900; color: #19389a;     letter-spacing: -0.15rem;}

#contents h3.ti1:before { position: absolute; top: 0; left: 0; width: 4.5rem; height: 1px; background-color: #828282; content: ''; }

#contents h3.ti2 { max-width: 32.5rem; padding: 0 2rem 0 2rem; margin-bottom: 2rem; border-radius: 2rem; background-image: -webkit-gradient(linear, left top, right top, from(#48b7e5), to(#78d85d)); background-image: linear-gradient(to right, #48b7e5, #78d85d); font-family: "Nanum Square"; font-size: 2.1rem; font-weight: 900; color: #fff; line-height: 3.5rem; }

#contents p.t1 { margin: .5rem 0 1rem;   word-break: break-all; color: #3b3b3b;  letter-spacing: -0.07rem; line-height: 2.8rem;  text-align: justify;}
#contents p.t2 {  margin: 5rem 0 1rem;  word-break: keep-all; font-size: 2.3rem;font-weight: 500; color: #3b3b3b; color: #00558b !important;letter-spacing: -0.25rem; line-height: 4.0rem;}
#contents p.t1 strong { font-size: 2.5rem; color: #3173cd; line-height: 3rem; text-align: right; float: right;/*  word-break: keep-all;  */}
#contents p.t2 strong { font-size: 2.5rem; color: #3173cd; line-height: 2.5rem; /* word-break: keep-all; */ }
#contents p.t3 { word-break: break-all; /* margin: .5rem 0 1rem;  */ font-size: 2.3rem; color: #3b3b3b;line-height: 3.5rem; text-align: justify; }
#contents p.t4 { margin: 14.5rem 0rem 0 1rem; word-break: break-all; font-size: 2.1rem; font-weight: 400; color: #3b3b3b; letter-spacing: -0.07rem;line-height: 3.3rem;  text-align: justify; }
#contents p.t5 { word-break: break-all; /* margin: .5rem 0 1rem;  */ font-size: 2.5rem; color: #3b3b3b; letter-spacing: -0.15rem; text-align: justify; }
#contents p.t6 { word-break: break-all; font-size: 2rem; font-weight: 500; color: #3b3b3b;  letter-spacing: -0.15rem;line-height: 3rem; text-align: justify;}
#contents p.t7 { word-break: break-all; font-size: 2.5rem;font-weight: 600; /* margin: .5rem 0 1rem;  */ color: #3b3b3b; letter-spacing: -0.18rem; text-align: justify; }

#contents p.t8 { padding-left: 20px; border-left: 3px solid #141414; word-break: break-all; font-size: 2.5rem;  font-weight: 600; color: #3b3b3b;  letter-spacing: -1.5px;line-height: 3.5rem;  text-align: justify;}

#contents p.t1  a { margin: .5rem 0 1rem;   word-break: break-all;color: #898989; letter-spacing: -0.07rem; line-height: 2.8rem;  text-align: justify;}


#contents span.fss { font-family: sans-serif; }

#contents .pbox1 { padding: 1rem 1.5rem; margin: .5rem 0; border: 1px solid #d5d9da; border-radius: 2px; background-color: #f6f6f6; font-size: 1.6rem; color: #3b3b3b; }
#contents .pbox1 a { font-size: 1.5rem; color: #898989; word-break: break-all;}
#contents .pbox2 { padding: 2rem 2rem; margin: .5rem 0; border: 1px solid #d5d9da; border-radius: 2px; background-color: #f6f6f6; font-size: 1.6rem; color: #3b3b3b;line-height: 2.5rem; }
#contents .pbox3 { padding: 1rem 1.5rem; margin: .5rem 0; border: 1px solid #d5d9da; border-radius: 2px; background-color: #f6f6f6; font-size: 1.6rem; color: #000; }
#contents .pbox3  li span { display: table-cell;min-width: 8.5rem; font-size: 1.8rem;font-weight: 500; letter-spacing: -0.05em;}
#contents .pbox3  li span::before { margin-right: 4px;content: "·";}
#contents .pbox3  li p{ display: table-cell;min-width: 8.5rem; font-size: 1.8rem; letter-spacing: -0.05em;word-break: keep-all;}


#contents .img100 { margin: 3rem 0; }
#contents .img101 { margin: 3rem 0 0 0; }

#contents .bullistbox { padding: 2rem 2rem; margin-bottom: 2rem; border: 1px solid #87cae4; border-radius: .2rem; background-color: #ecf7fb; }

#contents .bullistbox li { position: relative; padding: .2rem 0 .2rem 1rem;word-break: keep-all; font-family: "Nanum Square"; font-size: 1.8rem; font-weight: 400; color: #000; }

#contents .bullistbox li:before { position: absolute; top: 1.2rem; left: 0; width: .5rem; height: .5rem; border-radius: 50%; background-color: #00aeef; content: ''; }

.storyWrap .story_tab { margin: 4rem 0 4rem 0; text-align: center; }

.storyWrap .story_tab ul { text-align: center; }

.storyWrap .story_tab ul li { display: inline-block; margin: 0 .3rem; }

.storyWrap .story_tab ul li a { display: inline-block; min-width: 18rem; width: 100%; height: 4rem; padding: 0 2rem; border-radius: 2rem; background-color: #bbb; font-size: 1.7rem; font-weight: 700; color: #fff; line-height: 4rem; }

.storyWrap .story_tab ul li a.on { position: relative; background-color: #00aeef; }

.storyWrap .story_tab ul li a.on:after { position: absolute; bottom: -1rem; left: 50%; -webkit-transform: rotate(45deg) translateX(-50%); transform: rotate(45deg) translateX(-50%); width: 1rem; height: 1rem; background: #fff; content: ''; }

.storyWrap .story_tab ul li a:hover { background-color: #00aeef; -webkit-transition: all .3s; transition: all .3s; }

.storyWrap .storyTwrap { padding-top: 2rem;  }

.storyWrap .storyTwrap .storyOwrap1 { background: url(../images/greeting_bg.png) no-repeat; background-position: right top; }

.storyWrap .storyTwrap .storyOwrap1 .textWrap { width: calc(100% - 20rem); padding: 8rem 4rem 0rem 0; word-break: keep-all; float: left; }

.storyWrap .storyTwrap .storyOwrap1 .textWrap .title { position: relative; }

.storyWrap .storyTwrap .storyOwrap1 .textWrap .title:before { position: absolute; top: -.6rem; left: 0; width: 2px; max-height: 80%; height: 8rem; background-color: #e1e1e1; content: ''; }

.storyWrap .storyTwrap .storyOwrap1 .textWrap .title img { padding: 0 0 3.5rem 2rem; }

.storyWrap .storyTwrap .storyOwrap1 .textWrap .cont { line-height: 2.8rem; }

.storyWrap .storyTwrap .storyOwrap1 .photoWrap { width: 20rem; padding-top: 5rem; float: left; }

.storyWrap .storyTwrap .storyOwrap1 .photoWrap > img { display: block; margin: 0 auto 1rem; -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); }

.storyWrap .storyTwrap .storyOwrap1 .photoWrap .name { text-align: right; }

.storyWrap .storyTwrap .storyOwrap1 .textWrap2 { width: 100%; padding: 0; }

.storyWrap .storyTwrap .storyOwrap1:after { display: block; content: ''; clear: both; }

.storyWrap .storyTwrap .storyOwrap2 .iframebox { width: 40rem; padding-top: 2.5rem; float: left; }

.storyWrap .storyTwrap .storyOwrap2 .iframebox iframe { width: 100%; height: 22.5rem;  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); }

.storyWrap .storyTwrap .storyOwrap2 .textbox { width: calc(100% - 40rem); padding: 5rem 0 3rem 4rem; background: url(../images/blur_bg.png) no-repeat; float: left; }

.storyWrap .storyTwrap .storyOwrap2 .textbox .title { margin-bottom: 1rem; font-family: "Nanum Square"; font-size: 2rem; font-weight: 700; color: #0a0a0a; }

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

.storyWrap .storyTwrap .storyOwrap2:after { display: block; content: ''; clear: both; }

.storyWrap .storyTwrap .storyOwrap3 .detalWrap .summary { display: block; }

.storyWrap .storyTwrap .storyOwrap3 .detalWrap .summary a { margin-left: 1rem; font-size: 1.3rem; color: #00aeef; }

.storyWrap .storyTwrap .storyOwrap3 .detalWrap .summary a span { font-size: 1.1rem; }

.storyWrap .storyTwrap .storyOwrap3 .detalWrap .totalWrap { display: none; }

.storyWrap .storyTwrap .storyOwrap3 .detalWrap .totalWrap a { display: block; font-size: 1.3rem; color: #00aeef; text-align: right; }

.storyWrap .storyTwrap .storyOwrap3 .detalWrap .totalWrap a span { font-size: 1.1rem; }

.storyWrap .storyTwrap .storyOwrap3 .detalWrap.active .summary { display: none; }

.storyWrap .storyTwrap .storyOwrap3 .detalWrap.active .totalWrap { display: block; }

.storyWrap .storyTwrap .storyOwrap3 .listMore li .title { position: relative; }

.storyWrap .storyTwrap .storyOwrap3 .listMore li .title a { display: block; padding: 1rem 3rem 1rem 2rem; margin-top: 1rem; background-color: #f0f1f2; font-family: "Nanum Square"; font-size: 1.8rem; font-weight: 700; color: #0a0a0a; }

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

.storyWrap .storyTwrap .storyOwrap3 .listMore li .moreWrap { display: block; opacity: 0; max-height: 0; overflow: hidden; overflow-y: auto; visibility: hidden; }

.storyWrap .storyTwrap .storyOwrap3 .listMore li.active .title:after { color: #00aeef; }

.storyWrap .storyTwrap .storyOwrap3 .listMore li.active .moreWrap { opacity: 1; max-height: 300rem; visibility: visible; padding: 4rem 2rem 2rem; -webkit-transition: all .5s ease; transition: all .5s ease; }

.storyWrap .storyTwrap .storyOwrap3 .listMore li:hover .title:after { color: #00aeef; }

.storyWrap .storyTwrap .storyOwrap3 .detalWrap .datatable {border-top: 2px solid #616b77; border-bottom: 1px solid #ddd;}
.storyWrap .storyTwrap .storyOwrap3 .detalWrap .datatable table {margin-bottom: -2px;}
.storyWrap .storyTwrap .storyOwrap3 .detalWrap .datatable thead th {padding: 0.8rem;border-bottom: 1px solid #ddd; background-color: #f3f6f8;   font-size: 1.6rem;}
.storyWrap .storyTwrap .storyOwrap3 .detalWrap .datatable td {padding: 0.5rem;border-bottom: 1px solid #ddd; font-size: 1.4rem;}
.storyWrap .storyTwrap .storyOwrap3 .detalWrap .datatable .bg th,
.storyWrap .storyTwrap .storyOwrap3 .detalWrap .datatable .bg td {background-color: #fbfbfb;}


/* .focusWrap { padding-top: 2rem; }
.focusPho {background: url(../images/pho1.png) no-repeat;padding-top: 15rem;background-position: right 1rem;}
.focusPho .title {margin: 0rem 15rem 3rem 0rem;text-align: right;}
.focusPho2 {background: url(../images/pho2.png) no-repeat;padding-top: 15rem;background-position: right 1rem;}
.focusPho2 .title {margin: 0rem 15rem 3rem 0rem;text-align: right;} */


.iframebox2 {width: 100%; padding-top: 2.5rem;}
.iframebox2 iframe { width: 100%; height: 45rem;  -webkit-box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.3); }
.wr_info{margin-bottom: 2rem;}
.wr_info:after{ display: block;content: ''; clear: both;}
.photo{width: 14rem; margin-left: 2rem; float: right;}
.title_wrap{width: calc(100% - 16rem); margin-top: 2rem; text-align: right; float: left;}
.title_wrap .write{margin-top: 9rem;}


.goodwaterWrap { /*  background: url(../images/gw_bg.jpg)  no-repeat;padding-top: 2rem; background-position: right 1rem;  */}
.goodwaterWrap img.title { margin: 4rem 0  0rem 0rem; }
.goodwaterWrap .datatable {border-top: 2px solid #616b77; border-bottom: 1px solid #ddd;}
.goodwaterWrap .datatable table {margin-bottom: -2px;}
.goodwaterWrap .datatable thead th {padding: 0.8rem;border-bottom: 1px solid #ddd; background-color: #f3f6f8;   font-size: 1.6rem;}
.goodwaterWrap .datatable td {padding: 1rem;border-bottom: 1px solid #ddd; font-size: 1.4rem; text-align:center;}
.goodwaterWrap .datatable .bg th,
.goodwaterWrap .datatable .bg td {background-color: #fbfbfb;}

.waterdrop { width: 100%;  }
.waterdrop .drop { width:25%; float:left; }
.waterdrop .txt {  width: calc(100% - 27%); padding: 3rem 0 0 3rem;  line-height: 2.6rem;  text-align: justify;  float: left;}
.waterdrop .txt .title { margin-bottom: 2rem; font-size: 2rem;}
.waterdrop:after{ display: block;content: ''; clear: both;}


/* 2020-12-23 */
.y2020_end_wrap{/* padding-top: 3rem; */}
.y2020_end_wrap .contbox{position: relative; padding:10rem 6rem ;background: url(../images/2012_greeting_bg.jpg) no-repeat;background-size: contain;}
.y2020_end_wrap .contbox::before{ position: absolute; top: 6rem; /* background: url(../images/2012_greeting_ob1.png) no-repeat; */ left: 50%; transform: translateX(-50%); width: 7rem; height: 5rem;content: '';}
/* .y2020_end_wrap .contbox::after{content: '';width: 100%;height: 24rem; background-image: url(../images//2012_greeting_bg2.png);background-size: contain; background-repeat: no-repeat;  background-position: center bottom; position: absolute;left: 0; bottom: 0;} */
.y2020_end_wrap .contbox .title{display: inline-block; margin: 8rem 8rem 5rem 8rem;}
.y2020_end_wrap .contbox .txtbox{ padding: 2rem 2rem; margin: 0rem 0 0;border-radius: 2rem; background: url(../images/2012_greeting_bg3.png) no-repeat; word-break: keep-all;font-family: 'Nanum Myeongjo', serif;font-size: 2rem; color: #333; text-align: center;} 
.y2020_end_wrap .contbox2{ position: relative;min-height: 10rem; text-align: center;} 
/* .y2020_end_wrap .contbox2::before{content: ''; width: 28.6rem; height: 36rem; position: absolute;right: 0; bottom: 0; } */
.y2020_end_wrap .contbox2 img{ display: inline-block;margin: 5rem auto;/* padding-right: 15rem;  */}

@media (max-width: 900px) {
    .y2020_end_wrap .contbox{ position: relative; padding:12rem 6rem ;background: url(../images/2012_greeting_bg.jpg) no-repeat;background-position: center;background-size: cover;}
    .y2020_end_wrap .contbox {
        padding: 12rem 4rem 10rem;
        text-align: center;
    }
    .y2020_end_wrap .contbox .title {
        margin: 4rem 0;
    }
    .y2020_end_wrap .contbox2 img {
        padding-right: 0 !important;
    }
}
@media (max-width: 500px) {
    .y2020_end_wrap .contbox {
        padding: 12rem 2rem 8rem !important;
        text-align: center;
    }
    .y2020_end_wrap .contbox .txtbox {
        padding: 2rem 0 !important;
    }
}


#footer { position: relative; padding: 3rem 3.5rem; background-color: #f3f3f3; }

#footer img { width: 18.5rem; margin-right: 4rem; float: left; }

#footer .copyright { width: calc(100% - 15.5rem - 7rem); word-break: keep-all; font-size: 1.3rem; color: #838282; float: left;}

#footer:after { display: block; content: ''; clear: both; }

.go-top { position: absolute; bottom: 9rem; right: 2rem; width: 3.8rem; height: 3.8rem; padding: .6rem; background: #6b6b6b; font-size: 1.1rem; color: #fff; line-height: 1rem; text-align: center; }

.txt_info {padding: 1.5rem 2.0rem;background-color:#eff2f7;word-break: keep-all;font-size: 1.7rem;color: #797979;letter-spacing:-0.01em;line-height: 2.0rem;}
.pb30 { margin-bottom: 30px;}
.mail_c { color: #2c7dcf; }

/* 이미지 리스트 추가 */

.img-list-wrap > div:after{
  display: block;
  content: '';
  clear: both;
}
.img-list-wrap > div > div{
  width: 49%;
  margin-right: 2%;
  float: left;
}
.img-list-wrap > div > div:last-child{
  margin-right: 0;
}
.img-list-wrap > div > div > img{
  width: 100%;
}

.br-mo {
    display: none;
}

/* 반응형 */
@media (max-width: 900px) {
    .y2020_end_wrap .contbox2::before{width: 25rem;}
    .y2020_end_wrap .contbox2 img{padding-right: 18rem;}
}


@media (max-width: 768px) { #header { background-position: center; }
  #header .menu li { width: 31.5%; }
  #header .menu li:nth-child(1) { width: 11.5%; }
  #header .menu li:nth-child(3) { width: 25%; }
  #header .sns { right: 12rem; }
  #header .sns2 { right: 1.5rem; }
  #contents { padding: 4rem 2rem 7rem; }
  #contents .h2box { margin-bottom: 1rem; }
  #contents .h2box h2.ti1 { font-size: 2.7rem; }
  #contents h3.ti1 { font-size: 2.5rem; }
  .storyWrap .story_tab ul li { display: block; margin-bottom: 1rem; }
  .storyWrap .story_tab ul li a { min-width: auto; }
  .storyWrap .storyTwrap .storyOwrap1 { background-size: 60%; }
  .storyWrap .storyTwrap .storyOwrap1 .textWrap { width: calc(100% - 16rem); padding: 6rem 0 0; }
  .storyWrap .storyTwrap .storyOwrap1 .photoWrap { width: 16rem; padding-top: 4rem; padding-left: 2rem; }
  .storyWrap .storyTwrap .storyOwrap1 .photoWrap > img { width: 15rem; margin-right: 0; }
  .storyWrap .storyTwrap .storyOwrap1 .textWrap2 { width: 100% !important; padding: 0; }
  .storyWrap .storyTwrap .storyOwrap2 .iframebox { width: 100%; padding-top: 0; }
  .storyWrap .storyTwrap .storyOwrap2 .iframebox iframe { display: block; max-width: 100%; width: 40rem; margin: 0 auto; }
  .storyWrap .storyTwrap .storyOwrap2 .textbox { width: 100%; padding: 5rem 0 3rem; background-size: 15rem; }
  .goodwaterWrap { background-position: center 8rem; background-size: auto 13rem; }
  .goodwaterWrap img.title { margin: 0rem 0 0rem 0rem;}
  .goodwaterWrap .intro_txt br{display: none;}
  .focusPho { padding-top: 18rem; background-size:125px; }
  .focusPho img .title{ margin: 0rem 0 14rem 0rem;}
  .focusPho .title{margin: 0 0 3rem;}
  .focusPho2{ padding-top: 18rem;background-size: 125px;}
  .focusPho2 .title{margin: 0 0 3rem;}
  .iframebox2 { width: 100%; padding-top: 0; }
  .iframebox2 iframe { display: block; max-width: 100%; width: 40rem; margin: 0 auto; }

  /*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;}


  #footer { padding: 3rem 2rem; }
  #footer img { display: block; margin: 0 auto 1.5rem; }
  #footer .copyright { width: 100%; }
  .go-top { bottom: 15rem; } }
/*2020-09-22*/
@media (max-width: 840px){
  .img-list-wrap > div > div > .txt_info { font-size: 1.3rem; }
}

@media (max-width: 640px){
  .img-list-wrap > div > div{ width: 100%; margin-right: 0; float: none; }
  .img-list-wrap > div > div > .txt_info { font-size: 1.5rem; }
}

@media (max-width: 500px) { 
  #header .titlebox { padding: 0 3.15rem 1.6rem; margin: 3rem 0 3.5rem 3rem; }
  #header .titlebox img { width: 18rem; }
  .storyWrap .storyTwrap .storyOwrap1 .textWrap { width: calc(100% - 11rem); padding: 3rem 0 0; }
  .storyWrap .storyTwrap .storyOwrap1 .photoWrap { width: 11rem; padding-left: 1.5rem; } 

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

  .waterdrop{position: relative;}
  .waterdrop .drop{ position: absolute;width: 7rem;}
  .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: 12rem 2rem 20rem;}
  .y2020_end_wrap .contbox .txtbox{padding: 3rem 2rem; font-size: 1.5rem;}
  .y2020_end_wrap .contbox2::before{width: 26rem; height: 25rem;}


  #contents p.t1 strong{ display: block;text-align: center; float: none;}
  .photo{margin-left: 0;}

}


.ucc-box {
    padding: 4rem 3rem 3.2rem;
    background: url(../images/ucc-bg.png) no-repeat center / cover;
    text-align: center;
}
.ucc-box>strong {
    display: inline-block;
    position: relative;
    z-index: 1;
    margin: 1rem 0 2.6rem;
    font-family: 'Gmarket Sans';
    font-size: 2.3rem;
    font-weight: 600;
    letter-spacing: -0.05em;
}
.ucc-box>strong::before {
    position: absolute;
    top: -1rem; left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    width: 28.4rem; height: 6.8rem;
    background: url(../images/ucc-bubble.png) no-repeat center / contain;
    content: "";
}
.ucc-box>h4 {
    position: relative;
    margin: 1rem 0;
    word-break: keep-all;
    font-family: 'Gmarket Sans';
    font-size: 6.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.05em;
    line-height: 9rem;
}
.ucc-box>h4::before {
    position: absolute;
    top: -6rem; right: 1rem;
    width: 6rem; height: 5.8rem;
    background: url(../images/ucc-title.png) no-repeat center / contain;
    content: "";
}
.ucc-box>h4>span {
    color: #fff600;
}
.ucc-box>p {
    display: inline-block;
    padding: .8rem 2.4rem 0;
    border-top: 1px solid #fff;
    border-bottom: 1px solid #fff;
    word-break: keep-all;
    font-family: 'Gmarket Sans';
    font-size: 2.8rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.05em;
}
.ucc-list {
    display: inline-block;
    margin: 2rem auto;
    text-align: left;
}
.ucc-list li {
    position: relative;
    padding-left: 1rem;
    word-break: keep-all;
    font-family: 'Gmarket Sans';
    font-size: 1.9rem;
    font-weight: 500;
    letter-spacing: -0.05em;
    line-height: 3.5rem;
}
.ucc-list li::before {
    position: absolute;
    top: 0; left: 0;
    content: "·";
}


.img-right {
  margin-bottom: 1rem;
  margin-left: 2rem;
  text-align: center;
  float: right;
}
.img-right>span {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #525252;
}

@media (max-width: 450px) {
    .ucc-box>h4 {
        font-size: 6rem;
        line-height: 7.4rem;
    }
    .ucc-box>h4::before {
        top: -2rem;
    }
    .ucc-box>strong::before {
        top: -.7rem;
    }
    .ucc-box>p {
        padding: .8rem 2.4rem .6rem;
    }
}


/* Vol.19 2월호 */
#header #header-visual {
    position: relative;
    height: 40rem;
    padding: 2.2rem 3.2rem;
    background: url(../images/header-bg.png) no-repeat center / cover;
}
#header .logo {
    display: inline-block;
    position: absolute;
    bottom: 2rem; right: 18rem;
    z-index: 2;
    text-align: center;
}
#header .logo::before {
    position: absolute;
    bottom: -8rem; left: 50%;
    transform: translateX(-50%);
    z-index: -1;
    width: 35.2rem; height: 46rem;
    background: url(../images/logo-bg.png) no-repeat center / contain;
    pointer-events: none;
    content: "";
}
#header .logo img {
    display: block;
    margin-bottom: 1.5rem;
}
#header .logo a {
    display: inline-block;
    padding: .4rem 1rem .4rem 2rem;
    border: 1px solid #fff;
    border-radius: 50rem;
    font-size: 1.5rem;
    font-weight: 400;
    color: #fff;
    line-height: normal;
    transition: .2s;
}
#header .logo a:hover {
    border: 1px solid #133891;
    background-color: #fff;
    color: #133891;
}
#header h2 {
    max-width: 12.4rem;
    line-height: 0;
    float: left;
}
#header .title-num {
    text-align: right;
    float: right;
}
#header .title-num::after {
    display: block;
    content: "";
    clear: both;
}
#header .title-num .header-sns {
    margin-top: 1rem;
}
#header .title-num .header-sns a {
    display: inline-block;
    width: 3rem; height: 3rem;
    margin-bottom: .6rem;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, .13);
    line-height: 3rem;
    text-align: center;
}
#header .title-num .header-sns i {
    font-size: 1.6rem;
    color: #fff;
}
#header .title-num .header-sns img {
    vertical-align: baseline;
}
.go-top {
    position: absolute; top: -3.6rem;
    right: 1.4rem;
    z-index: 5;
    width: 4rem; height: 5.5rem;
    padding-top: 1.8rem;
    background: url(../images/top-btn.png) no-repeat center / contain;
    font-size: 1.2rem;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0;
    text-align: center;
}
.go-top span {
    display: inline-block;
    margin-top: 2px;
}
#footer {
    position: relative;
    padding: 3rem 3.5rem;
    background-color: #3b3b3b;
}
#footer .footer-wrap {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
            align-items: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
}
#footer img {
        flex-shrink: 0;
    width: 18.5rem;
    margin-right: 4rem;
    -ms-flex-negative: 0;
    float: none;
}
#footer .copyright {
    width: auto;
    word-break: keep-all;
    font-size: 1.4rem;
    color: #cfcfcf;
    letter-spacing: -0.04em;
    line-height: 2.2rem;
    float: none;
}
.mail_c {
    color: #fff;
}

/* 서브 페이지 메뉴 */
#sub-nav {
    position: relative;
    z-index: 1;
    padding: 3rem 0;
    margin-top: 4rem;
}
#sub-nav::before {
    position: absolute;
    bottom: 0; left: 0;
    z-index: -1;
    width: 100%; min-height: 19.6rem;
    height: calc(100% + 14rem);
    background: url(../images/sub-header.png) no-repeat center / cover;
    content: "";
}
#sub-nav ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
            justify-content: center;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
}
#sub-nav li {
    position: relative;
    padding: 0 2.5rem;
}
#sub-nav li::before {
    position: absolute;
    top: 50%; right: 0;
    transform: translateY(-50%);
    opacity: .5;
    width: 1px; height: 1.8rem;
    background-color: #fff;
    content: "";
}
#sub-nav li:last-child::before {
    display: none;
}
#sub-nav li a {
    position: relative;
    font-family: 'Jalnan';
    font-size: 1.8rem;
    color: #fff;
}
#sub-nav li a>span {
    font-family: 'Noto Sans KR';
    font-weight: 700;
}
#sub-nav li.active {
    padding-left: 4rem;
}
#sub-nav li.active a {
    color: #66f4f5;
}
#sub-nav li.active a::before {
    position: absolute;
    top: 50%; left: -2.4rem;
    transform: translateY(-50%);
    width: 1.7rem; height: 2.2rem;
    background: url(../images/subnav-icon.png) no-repeat center / contain;
    content: "";
}


.sec05.sec-box {
    padding-top: 8rem;
    padding-bottom: 10rem;
    background: url(../images/sec05-bg.png) no-repeat center / cover;
    text-align: center;
}
.sec05.sec-box h3 {
    display: inline-block;
    position: relative;
}
.sec05.sec-box h3 img {
    margin-right: 4rem;
}
.sec05.sec-box h3::before {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 43.4rem; height: 11.6rem;
    background: url(../images/sec05-title-bg.png) no-repeat center / contain;
    content: "";
}
.sec05.sec-box h3::after {
    position: absolute;
    bottom: 0; right: -2rem;
    width: 5.2rem; height: 6.4rem;
    background: url(../images/sec05-title-icon.png) no-repeat center / contain;
    content: "";
}
.sec05-con {
    margin-top: 8rem;
}
.sec05-item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
            align-items: center;
    color: #fff;
    text-align: left;
    -webkit-box-align: center;
        -ms-flex-align: center;
}
.sec05-item:nth-child(2) {
        -ms-flex-direction: row-reverse;
            flex-direction: row-reverse;
    margin-top: 6rem;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: reverse;
}
.sec05-img {
        flex-shrink: 0;
    -ms-flex-negative: 0;
}
.sec05-text {
            flex-grow: 1;
    padding-left: 1.4rem;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
}
.sec05-item:nth-child(2) .sec05-text {
    padding-left: 4rem;
}
.sec05-text strong {
    display: block;
    margin-bottom: 1rem;
    font-size: 2.5rem;
    color: #b8c5ff;
    letter-spacing: -0.05em;
    line-height: 3.3rem;
}
.sec05-list li {
    display: table;
}
.sec05-list li span::before {
    margin-right: 4px;
    content: "·";
}
.sec05-list li span,
.sec05-list li p {
    display: table-cell;
    min-width: 7.8rem;
    font-size: 1.6rem;
    letter-spacing: -0.05em;
}
.sec05-list li span {
    font-weight: 500;
}


@media (max-width: 640px) {
    #header .logo {
        bottom: 4rem; right: 14rem;
    }
    .logo img {
        width: 16rem;
    }
    #header .logo::before {
        bottom: -10rem;
        width: 28rem;
    }
    #footer .footer-wrap {
        display: block;
    }
    #footer img {
        margin-left: 0;
        margin-right: auto;
    }
}

@media (max-width: 430px) {
    #header .logo {
        bottom: 4rem; right: 14rem;
    }
    .logo img {
        width: 14rem;
    }
    #header .logo::before {
        bottom: -11rem;
        width: 26rem;
    }
    #header #header-visual {
        padding: 2.2rem 2rem;
    }
    #sub-nav {
        margin-top: 0;
    }
    #sub-nav ul {
        padding: 0 1rem;
    }
    #sub-nav li {
        padding: 0 2rem;
        text-align: center;
    }
    #sub-nav li.active {
        padding-left: 3.4rem;
    }
    #sub-nav li a {
        font-size: 1.6rem;
    }
}


@media (max-width: 480px) {
  #header #header-visual {
    background: url(../images/header-bg.png) no-repeat 33% center / cover;
  }
}






/* 영상 댓글 이벤트 */
.event-sec.sec-box { position: relative; z-index: 1; padding-top: 7rem; padding-bottom: 7rem; }
.event-sec::before { position: absolute; top: -8.6rem; left: 0; z-index: -1; width: 100%; height: calc(100% + 14rem); background: url(../images/c-event-bg.png) no-repeat center / cover; content: ""; }
.event-sec .arrow-link { border-bottom: 1px solid rgba(255, 255, 255, 0.5); }
.event-sec .arrow-link::before { background-color: rgba(255, 255, 255, 0.5); }
.event-sec .top-info { display: flex; flex-wrap: wrap; margin: 3.6rem 0; }
.event-sec .top-info>div { margin: .5rem 0; margin-right: 2.4rem; }
.event-sec .top-info>div:last-child { margin-right: 0; }
.event-sec .top-info>div * { display: inline-block; }
.event-sec .top-info>div span { padding: .2rem 1.2rem; border-radius: 50rem; font-size: 1.6rem; font-weight: 500; color: #fff; letter-spacing: -0.06em; }
.event-sec .top-info>div.color01 span { background-color: #407ff3; }
.event-sec .top-info>div.color02 span { background-color: #00b8b1; }
.event-sec .top-info>div.color03 span { background-color: #724ae6; }
.event-sec .top-info>div p { margin-left: 1rem; font-size: 1.8rem; font-weight: 700; color: #fff; letter-spacing: -0.06em; }
.event-sec .event-con { display: flex; }
.event-sec .event-con .img { flex-shrink: 0; max-width: 100%; width: 37rem; height: 44rem; overflow: hidden; margin-right: 3rem; border-radius: 5rem 5rem 0 5rem; }
.event-sec .event-con .img img { width: 100%; height: 100%; object-fit: cover; }
.event-sec .event-con .desc { color: #fff; }
.event-sec .event-con .desc h4 { margin-bottom: 1.4rem; font-size: 2.7rem; font-weight: 700; letter-spacing: -0.075em; }
.event-sec .event-con .desc h4>span { color: #fde800; }
.event-sec .event-con .desc h4>span .rotate { display: inline-block; transform: rotate(12deg) translate(4px, -1px); }
.event-sec .event-con .desc>p { word-break: keep-all; font-size: 1.8rem; font-weight: 300; letter-spacing: -0.06em; line-height: 2.7rem; }
.event-sec .event-con .desc .process { padding: 3rem 2rem; margin: 2rem 0 3rem; border-radius: 5rem 5rem 5rem 0; background-color: #0683ab; }
.event-sec .event-con .desc .process li { position: relative; padding-left: 2rem; font-size: 1.6rem; font-weight: 500; letter-spacing: -0.06em; }
.event-sec .event-con .desc .process li .num { position: absolute; top: 0; left: 0; }
.event-sec .event-con .desc .link>div { display: inline-block; font-size: 0; vertical-align: top; }
.event-sec .event-con .desc .link>div>a:first-child { margin-right: 2rem; font-size: 1.7rem; font-weight: 500; letter-spacing: -0.06em; }
.event-sec .event-con .desc .link>div>a:first-child i { margin-left: .8rem; }
.event-sec .event-con .desc .link>div>a:first-child:hover { text-decoration: underline; }
.event-sec .event-con .desc .link p { display: inline-block; margin-right: 1.2rem; font-size: 1.7rem; font-weight: 500; letter-spacing: -0.06em; }
.event-sec .event-con .desc .link .round-link { display: inline-flex; justify-content: center; align-items: center; width: 3rem; height: 3rem; border-radius: 50%; background-color: #fff; font-size: 1.6rem; color: #121b76; vertical-align: top; transition: .3s; }
.event-sec .event-con .desc .link .round-link:first-of-type { margin-right: .6rem; }
.event-sec .event-con .desc .link .round-link:hover { background-color: #e3f2fe; }


@media (max-width: 768px) {
  .event-sec .event-con .img { width: 31rem; height: 36rem; }
}

@media (max-width: 660px) {
  .event-sec .event-con { display: block; }
  .event-sec .event-con .img { margin: 0 auto 3rem !important; }
}

@media (max-width: 540px) {
  .event-sec { padding-bottom: 10rem; }
  .event-sec::before { top: -10rem; }
}

@media (max-width: 380px) {
  .event-sec .arrow-link { top: 0; }
}


/* 영상 댓글 이벤트 서브 */
.event-sec.sec-box.sub { padding: 5rem 3rem 6rem; border-radius: 2.4rem; background-color: #039dcf; }
.event-sec.sub::before { display: none; }
.event-sec.sub .event-con .img { width: 33rem; height: 38rem; }

.event-sec .top-info { display: flex; flex-wrap: wrap; margin: 3.6rem 0; }
.event-sec .top-info>div { margin: .5rem 0; margin-right: 2.4rem; }
.event-sec .top-info>div:last-child { margin-right: 0; }
.event-sec .top-info>div * { display: inline-block; }
.event-sec .top-info>div span { padding: .2rem 1.2rem; border-radius: 50rem; font-size: 1.6rem; font-weight: 500; color: #fff; letter-spacing: -0.06em; }
.event-sec .top-info>div.color01 span { background-color: #2b45c1; }
.event-sec .top-info>div.color02 span { background-color: #6a0bd6; }
.event-sec .top-info>div.color03 span { background-color: #d33391; }
.event-sec .top-info>div p { margin-left: 1rem; font-size: 1.8rem; font-weight: 700; color: #fff; letter-spacing: -0.06em; }