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

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

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

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

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

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

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

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

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



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

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

#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 { width: 25%; float: left; color: #fff; text-align: center; font-family: "Noto Sans KR"; font-weight: 500; height: 5.8rem; line-height: 5.8rem; position: relative; }

#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 { content: ''; width: 1px; height: 1.8rem; position: absolute; right: 0; top: 2rem; background-color: rgba(255, 255, 255, 0.5); }

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

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

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

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

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

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

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

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

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

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

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

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

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

#contents p.t1 { color: #3b3b3b; line-height: 2.5rem;   word-break: break-all; margin: .5rem 0 0rem;  text-align: justify; }
#contents p.t2 { color: #3b3b3b; line-height: 4.5rem; /* word-break: keep-all; */ margin: 5rem 0 1rem; font-size: 1.8rem;font-weight: 500;letter-spacing: -0.25rem; color: #00558b !important;}
#contents p.t1 strong { font-size: 2.5rem; color: #3173cd; line-height: 2.5rem; 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 { color: #3b3b3b;line-height: 3.5rem; font-size: 2.3rem; word-break: break-all; /* margin: .5rem 0 1rem;  */ text-align: justify; }
#contents p.t4 { color: #3b3b3b;line-height: 3.3rem; font-size: 2.1rem; letter-spacing: -0.07rem; font-weight: 400; word-break: break-all; margin: 14.5rem 0rem 0 1rem;  text-align: justify; }
#contents p.t5 { color: #3b3b3b; font-size: 1.7rem; word-break: break-all; /* margin: .5rem 0 1rem;  */ text-align: justify; }


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

#contents .pbox1 { background-color: #f6f6f6; border: 1px solid #d5d9da; border-radius: 2px; padding: 1rem 1.5rem; margin: .5rem 0; font-size: 1.4rem; color: #3b3b3b; }
#contents .pbox2 { margin: 1rem 0 0 0; font-size: 1.4rem; color: #3b3b3b; }

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

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

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

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

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

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

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

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

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

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

.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); float: left; padding: 8rem 4rem 0rem 0; word-break: keep-all; }

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

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

.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; float: left; padding-top: 5rem; }

.storyWrap .storyTwrap .storyOwrap1 .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); }

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

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

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

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

.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 { padding: 5rem 0 3rem 4rem; background: url(../images/blur_bg.png) no-repeat; width: calc(100% - 40rem); float: left; }

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

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

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

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

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

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

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

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

.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 { 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; }

.storyWrap .storyTwrap .storyOwrap3 .listMore li .title: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; }

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

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

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

.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; background-color: #f3f6f8;   font-size: 1.6rem;border-bottom: 1px solid #ddd;}
.storyWrap .storyTwrap .storyOwrap3 .detalWrap .datatable td {padding: 0.5rem; font-size: 1.4rem;border-bottom: 1px solid #ddd;}
.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;} 

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



.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{content: ''; display: block; clear: both;}
.photo{width: 14rem; float: right; margin-left: 2rem;}
.title_wrap{width: calc(100% - 16rem); float: left; text-align: right; margin-top: 2rem;}
.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: 0rem 0  1rem 0rem; }

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


/* 2020-12-23 */
.y2020_end_wrap{padding-bottom: 2rem;}
.y2020_end_wrap .contbox{background: url(../images/2012_greeting_bg.jpg) no-repeat;background-size: cover; position: relative; padding:10rem 12rem 8rem 12rem; }
.y2020_end_wrap .contbox::after{content: '';width: 100%;height: 24rem; 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: 0 auto;}
.y2020_end_wrap .contbox .txtbox{ color: #000; text-align: center; margin: 3rem 0 0; padding: 4rem 2rem 0rem 2rem; font-family: 'Nanum Myeongjo', serif;font-size: 2.3rem; font-weight: 600;word-break: keep-all;} 
.y2020_end_wrap .contbox .txtbox2{ text-align: center; padding: 5rem 0rem;} 
.y2020_end_wrap .contbox2{min-height: 5rem; text-align: center; position: relative;} 
.y2020_end_wrap .contbox2::before{content: ''; width: 33rem; height: 7rem; position: absolute;right: 25rem; bottom: 13rem; background: url(../images/2012_greeting_txt2.png) no-repeat; }
.y2020_end_wrap .contbox2 img{padding-right: 15rem; margin: 3rem auto; display: inline-block;}



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

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

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

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

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

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

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

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

/* 반응형 */
@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 { width: 40rem; margin: 0 auto; display: block; max-width: 100%; }
  .storyWrap .storyTwrap .storyOwrap2 .textbox { width: 100%; padding: 5rem 0 3rem; background-size: 15rem; }
  .goodwaterWrap { background-size: auto 13rem; background-position: center 8rem; }
  .goodwaterWrap img.title { margin: 0rem 0 1rem 0rem;}
  .goodwaterWrap  p.t3 {  margin: 2.5rem 0 0rem; }
  .focusPho { background-size:125px; padding-top: 18rem; }
  .focusPho img .title{ margin: 0rem 0 14rem 0rem;}
  .focusPho .title{margin: 0 0 3rem;}
  .focusPho2{background-size: 125px; padding-top: 18rem;}
  .focusPho2 .title{margin: 0 0 3rem;}
  .iframebox2 { width: 100%; padding-top: 0; }
  .iframebox2 iframe { width: 40rem; margin: 0 auto; display: block; max-width: 100%; }

  /*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 .contbox .txtbox2{padding: 1rem 1rem; font-size: 1.8rem;}
  .y2020_end_wrap .contbox .txtbox2 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 { margin: 0 auto 1.5rem; display: block; }
  #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{ float: none; width: 100%; margin-right: 0; }
  .img-list-wrap > div > div > .txt_info { font-size: 1.5rem; }
}

@media (max-width: 500px) { 
  #header .titlebox { margin: 3rem 0 3.5rem 3rem; padding: 0 3.15rem 1.6rem; }
  #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{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: 20rem; position: absolute; left: 50%; transform: translateX(-50%);}
  .waterdrop .drop img{margin: 2rem 0rem !important;}
  .waterdrop .txt{width: 100%; padding: 16rem 0 0rem;}
  .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;}


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

#contents p.t4 { color: #3b3b3b;line-height: 3.3rem; font-size: 2.1rem;letter-spacing: -0.07rem; font-weight: 400; word-break: break-all; margin: 2.9rem 0rem 0 1rem;  text-align: justify; }

}