@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: 32.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 1rem;  text-align: justify;  letter-spacing: -0.10rem;}
#contents p.t2 { color: #3b3b3b; line-height: 4.0rem;  word-break: keep-all;  margin: 5rem 0 1rem; font-size: 2.3rem;font-weight: 500;letter-spacing: -0.25rem; color: #00558b !important;}
#contents p.t1 strong { font-size: 2.5rem; color: #3173cd; line-height: 3rem; float: right; text-align: right;/*  word-break: keep-all;  */}
#contents p.t2 strong { font-size: 2.5rem; color: #3173cd; line-height: 2.5rem; /* word-break: keep-all; */ }

#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 .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: 4rem 0 4rem 0; }

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


.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: 4rem 0  0rem 0rem; }

.waterdrop { width: 100%;  }
.waterdrop .drop { width:30%; float:left; }
.waterdrop .txt {  width: calc(100% - 30%);  float: left; padding: 6rem 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-top: 3rem; */}
.y2020_end_wrap .contbox{background: url(../images/2012_greeting_bg.jpg) no-repeat;background-size: contain;position: relative; padding:10rem 6rem ;}
.y2020_end_wrap .contbox::before{content: ''; width: 7rem; height: 5rem; position: absolute; left: 50%; transform: translateX(-50%); top: 6rem; /* background: url(../images/2012_greeting_ob1.png) no-repeat; */}
/* .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{ background: url(../images/2012_greeting_bg3.png) no-repeat;border-radius: 2rem; color: #333; text-align: center; margin: 0rem 0 0; padding: 2rem 2rem;font-family: 'Nanum Myeongjo', serif;font-size: 2rem; word-break: keep-all;} 
.y2020_end_wrap .contbox2{min-height: 10rem; text-align: center; position: relative;} 
/* .y2020_end_wrap .contbox2::before{content: ''; width: 28.6rem; height: 36rem; position: absolute;right: 0; bottom: 0; } */
.y2020_end_wrap .contbox2 img{/* padding-right: 15rem;  */margin: 5rem auto; display: inline-block;}

@media (max-width: 900px) {
    .y2020_end_wrap .contbox{background: url(../images/2012_greeting_bg.jpg) no-repeat;background-size: cover;background-position: center; position: relative; padding:12rem 6rem ;}
    .y2020_end_wrap .contbox {
        text-align: center;
        padding: 12rem 4rem 10rem;
    }
    .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 {
        text-align: center;
        padding: 12rem 2rem 8rem !important;
    }
    .y2020_end_wrap .contbox .txtbox {
        padding: 2rem 0 !important;
    }
}


#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 14rem 0rem;}
  .goodwaterWrap .intro_txt br{display: none;}
  .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 .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: 13rem;}
  .title_wrap{width: 100%; text-align: center;}
  .title_wrap .write{margin-top: 12rem;}

  .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: 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{text-align: center; float: none; display: block;}
  .photo{margin-left: 0;}

}


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

@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;
    }
}