@import url(https://use.fontawesome.com/releases/v6.0.0/css/all.css);
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@charset "utf-8";

/* Reset CSS  */
html { height: 100%; overflow-y:scroll;}
body { font-size: 14px; line-height: 1.4; color:#000;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, blockquote, th, td, p { margin: 0px; padding:0px;  list-style:none;  font-family:"Pretendard", "Noto Sans KR", "Malgun Gothic", "Dotum", sans-serif;}
fieldset{ border: 0px; }
a{font-style:normal; text-decoration:none; color:#000;}
hr, legend {height: 0; left: -5000px; line-height: 0; overflow-x: hidden; overflow-y: hidden; position: absolute; visibility: hidden;width: 0;}
caption {font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0;}
* {-webkit-text-size-adjust:none;}
* { margin:0; padding:0; border:0; outline:0;  }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display:block; }
img, video { max-width:100%; border:0; height:auto; vertical-align:top; }
table { border-collapse:collapse; border-spacing:0; border: 0px solid #E5E5E5; }
input, select { vertical-align:middle; }
label { cursor:pointer; }
.blind,legend,hr,caption { display:block; overflow:hidden; position:absolute; top:0; left:-1000em; }
i,em,address { font-style:normal; font-weight:normal; }
td,th {vertical-align: middle;line-height: 1.6;}
td strong {font-weight: 100;	font-size: 5px;vertical-align: bottom;}
a:hover{text-decoration:none;}
ul:after{content:""; display:block; clear:both;}

.container { max-width: 1440px; width:100%; height: 100%; margin: 0 auto; position: relative; box-sizing: border-box; padding:0 15px;}
.container:after {content: ""; display: block; clear: both;}


/*header*/
#m-hd{position:absolute; padding:0; height:90px;top:0; z-index: 9000; width:100%; transition-duration: 0.3s;}
#m-hd:hover{background:#fff;}
#m-hd:hover #m-logo a{background:url('../img/logo_color.png') no-repeat center center; }
#m-hd:hover #m-gnb > li > a{color:#000;}
#m-hd .container{}
#m-hd:after{content:""; display:block; clear:both}
#m-hd.sub-hd{position:relative;}
#m-hd #m-logo{position: absolute; left:15px; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); z-index: 9000}
#m-hd #m-logo a{display:block; width:198px; height:50px; background:url('../img/logo.png') no-repeat center center; }
#m-hd.sub-hd #m-logo a{background:url('../img/logo_color.png') no-repeat center center; }
#m-hd.sub-hd #m-gnb > li > a{color:#000;}


#lang-nav{position:absolute;  top:50%; right:0; -webkit-transform:translateY(-50%); transform:translateY(-50%); z-index: 5000; width:144px; }
.lang-target{color:#fff; font-size:15px; cursor:pointer; padding:12px 30px; background:#014099; position: relative;}
.lang-target .arrow{position: absolute; right:30px; top:50%;}
.lang-target .arrow::before{content:""; display:block; width:7px; height:1px; background:#fff; position: absolute; transform:rotate(45deg); left:-5px;}
.lang-target .arrow::after{content:""; display:block; width:7px; height:1px; background:#fff; position: absolute; transform:rotate(-45deg);}
#lang-nav #lang{display:none; position: absolute; width:100%; padding:8px 0; background:#fff;}
#lang li a{display:block; font-size:15px; color:#aeaeae; padding:8px 30px; }
#lang li a:hover{color:#000; }


#mobile-btn{display:none ;position:absolute; right: 15px; cursor: pointer; top:21px}
#all-menu{display:none;}


@media (min-width:1201px){/*pc*/

  #m-hd #m-nav{text-align: center; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width:100%}
  #m-hd #m-nav::after{content:""; display:block; clear:both}
  #m-hd #m-gnb{display:inline-block;}
  #m-hd #m-gnb > li{float:left; text-align:center; margin-right:60px}
  #m-hd #m-gnb > li:last-child{margin-right: 0;}
  #m-hd #m-gnb > li > a{font-size:19px; font-weight:600; margin:0 auto; display:block; color:#fff; box-sizing:border-box;position:relative; line-height:90px; position: relative;}
/*
  #m-hd #m-gnb > li .lnb{display:none; position: absolute;background:rgba(0, 0, 0, 0.7); padding:0 10px; width:100%;}
  #m-hd #m-gnb > li:hover .lnb{display:block; position: absolute;}
  #m-hd #m-gnb > li:hover > a{color:#014099;  } */
  /*megadrop*/
  #megadrop{position:absolute; width:100%; left:0;  text-align: center; display:none;  z-index: 9999; background:#fff;z-index: 10; }
    #megadrop::after{content:""; display:block; position: absolute; width:10000%; overflow: hidden; background:#fff; height:60px; z-index: -1; top:0; left:50%; transform: translateX(-50%); border-top:1px solid #ddd;}
  #m-hd #m-gnb > li:hover > a::after{content:""; display:block; position: absolute; bottom:0; width:100%; height:4px; background:#f6ab00}
  #m-hd #m-gnb > li:hover #megadrop{display:inline-block; }
  #m-hd #m-gnb .lnb{ display:inline-block; }
  #m-hd #m-gnb .lnb li{display:inline-block; margin-right:50px }
  #m-hd #m-gnb .lnb li:last-child{margin-right:0px }
  #m-hd #m-gnb .lnb li a{display:block; font-size:17px; line-height:60px; color:#a8a8a8;  font-weight: 600;}
  #m-hd #m-gnb .lnb li a:hover{color:#014099}
  #m-hd #m-gnb .lnb li a p{margin-top:7px;}


}

@media (max-width:1600px){
}

@media (max-width:1360px){
  #m-hd #m-gnb > li > a{font-size:18px}
}


@media (max-width:1200px){/*테블릿 + 모바일 */
  #m-hd{height:66px; }
  #m-hd #m-nav,
  .lang-target{display:none;}
  #m-hd #m-logo a{width:166px; height:42px; background:url('../img/t_logo.png') no-repeat center center; }
  #m-hd.sub-hd #m-logo a{ background:url('../img/t_logo_color.png') no-repeat center center !important; }
  #m-hd:hover #m-logo a{ background:url('../img/t_logo_color.png') no-repeat center center !important; }

  #mobile-btn{display:block;}
  #mobile-menu-open{width:30px; height: 22px; }

  #mobile-menu-open,
  #mobile-menu-open span {display: inline-block; transition: all .4s;box-sizing: border-box;}
  #mobile-menu-open {position: relative;}
  #mobile-menu-open span {position: absolute; left: 0; width: 100%; height: 3px; background-color: #fff; border-radius: 2px}
  #m-hd.sub-hd #mobile-menu-open span,
  #m-hd:hover #mobile-menu-open span {background-color: #000;}
  #mobile-menu-open span:nth-of-type(1) {top: 0;}
  #mobile-menu-open span:nth-of-type(2) {top: 9px;}
  #mobile-menu-open span:nth-of-type(3) {bottom: 0;}
  #mobile-menu-open.active span{background-color: #000;}
  #mobile-menu-open.active span:nth-of-type(1) {-webkit-transform: translateY(14px) rotate(-45deg); transform: translateY(14px) rotate(-45deg);}
  #mobile-menu-open.active span:nth-of-type(2) {opacity: 0;}
  #mobile-menu-open.active span:nth-of-type(3) {-webkit-transform: translateY(-14px) rotate(45deg);transform: translateY(-14px) rotate(45deg);}

  #mobile-menu-close,
  #mobile-menu-close span {display: inline-block; transition: all .4s;box-sizing: border-box;}
  #mobile-menu-close {position: absolute; right:0; width: 30px; height: 30px;}
  #mobile-menu-close span {position: absolute; left: 0; width: 100%; height: 3px; background-color: #000; border-radius: 2px}

  #mobile-menu-close span:nth-of-type(1) {top:14px; transform: rotate(45deg);}
  #mobile-menu-close span:nth-of-type(2) {top:14px;transform: rotate(-45deg);}


  #all-menu #all-nav{ position:relative; }
  #all-menu #all-gnb > li{margin-bottom:25px;}
  #all-menu #all-gnb > li:last-child{margin-bottom:0px;}
  #all-menu #all-gnb > li > a{font-size:18px; display:inline-block; text-align:left; color:#000; font-weight:600}
  #all-menu #all-gnb .lnb li a{font-size:16px; color:#babcbf; }
  #all-menu #all-gnb .lnb li a:hover{color:#014099; background: none;}
  #all-menu #all-gnb .lnb li:last-child {margin-right:0;}

  #mobile-lang{margin-top:20px;}
  #mobile-lang li{margin-bottom:5px;}
  #mobile-lang li:last-child{margin-bottom:0px;}
  #mobile-lang li a{font-size:15px; font-weight:600; color:#b5b5b5; }
  #mobile-lang li a.active{color:#014099;}

  #all-menu-top #member-join{margin-top:30px}
  #all-menu-top #member-join li{margin-bottom:10px;}
  #all-menu-top #member-join li:last-child{margin-bottom:0;}

  #all-menu{position:fixed; display:block; z-index:9500; top:0; right:-100%; opacity:0; height:100%; background:#fff; width:70%; max-width:220px;}
  #all-menu #all-gnb .lnb{display:none; margin-top:10px}
  #all-nav{margin-top:20px}
  #all-menu-top{position:relative;}
  #all-gnb ul a{font-size:15px; font-weight: 500; color:#aaa; display:block;}
  #all-gnb ul > li{padding:8px 0}

  #menu-box{ padding:20px 30px;}

}


@media (max-width:768px){/*모바일 */
  #m-hd #m-logo{left:20px}
  #m-hd #m-logo a{width:134px; height:34px; background:url('../img/m_logo.png') no-repeat center center; }
  #m-hd.sub-hd #m-logo a{ background:url('../img/m_logo_color.png') no-repeat center center !important; }
  #m-hd:hover #m-logo a{ background:url('../img/m_logo_color.png') no-repeat center center !important; }

.lang-target{display:none;}



}


/*index 공통*/
.contents-box::after{content:""; display:block; clear:both;}
.box-wrap::after{content:""; display:block; clear:both;}

#main-banner {position: relative; overflow: hidden; width:100%; }
#main-banner::after {content:""; display:block; clear:both}
#main-banner .banner-img{width:100%; overflow: hidden;}

#main-banner .swiper-slide{position:relative;}
#main-banner .swiper-wrapper > div{height:50vw; min-height:350px; max-height:815px; position:relative; background-position: center center; background-size: cover; background-repeat: no-repeat; }
#main-banner .swiper-wrapper .bg01{background-image:url("../img/sl_img01.png");}
#main-banner .swiper-wrapper .bg02{background-image:url("../img/sl_img02.png");}
#main-banner .swiper-wrapper .bg03{background-image:url("../img/sl_img03.png");}

#main-banner .swiper-wrapper .banner-contents{display:table; width:100%; text-align: center; height: 100%;}
#main-banner .swiper-wrapper .banner-contents .container{display:table-cell; vertical-align: middle;}
#main-banner .swiper-wrapper .banner-contents h5{font-size:20px; font-weight: 400; line-height: 1.6; word-break: keep-all;}
#main-banner .swiper-wrapper .banner-contents h3{font-size:50px; font-weight: 600; line-height: 1.4; margin:20px auto 0; width:60%}

#main-banner .swiper-wrapper .bg01 .banner-contents h5{color:#fff;}
#main-banner .swiper-wrapper .bg01 .banner-contents h3{color:#fff;}

#main-banner .swiper-wrapper .bg02 .banner-contents h5{color:#fff;}
#main-banner .swiper-wrapper .bg02 .banner-contents h3{color:#fff;}

#main-banner .swiper-wrapper .bg03 .banner-contents h5{color:#fff;}
#main-banner .swiper-wrapper .bg03 .banner-contents h3{color:#fff;}


#main-banner .swiper-pagination{position:relative; font-size:0; text-align: center; margin:0 auto}
#main-banner .pagination-box{position: absolute; width:260px; left:50%; bottom:80px; margin-left:-130px; text-align: center;}
#main-banner .pagination-box::after{content:""; display:block; clear:both;}

#main-banner .pagination-top {width:54px; margin-bottom:30px;}
#main-banner .pagination-top .swiper-pagination-bullet { background: transparent; display:none; font-size:19px; color:#fff; font-weight: 600;}
#main-banner .pagination-top .swiper-pagination-bullet-active {display:block;}
#main-banner .pagination-top .swiper-pagination-bullet-active:before{content:""; position:absolute; top:50%; left:50%; margin:4px 0 0 0; width:2px; height:14px; background:#fff;}
#main-banner .pagination-top .swiper-pagination-bullet-active::after{content:"3"; position:absolute; top:0; right:0; font-size:19px;}

#main-banner .pagination-bottom .swiper-pagination-bullet {width: 40px; height: 4px; display: inline-block; border-radius: 0; background:#fff; left:0; opacity:35%; margin-right:15px }
#main-banner .pagination-bottom .swiper-pagination-bullet:last-child {margin-right:0;}
#main-banner .pagination-bottom .swiper-pagination-bullet-active{ opacity: 1; }


#main-banner .pagination-box.black .pagination-top .swiper-pagination-bullet {color:#000; }
#main-banner .pagination-box.black .pagination-top .swiper-pagination-bullet-active:before{background:#000;}
#main-banner .pagination-box.black .pagination-bottom{ background:rgba(0, 0, 0, 0.3);}
#main-banner .pagination-box.black .pagination-bottom .swiper-pagination-bullet {background:#000;}


#main-banner .swiper-button-prev,
#main-banner .swiper-button-next{width:auto;}
#main-banner .swiper-button-prev{}
#main-banner .swiper-button-next{}
#main-banner .swiper-button-prev:after,
#main-banner .swiper-button-next:after{display:none;}

.sl-arrow{ width:10px; height:34px; position:relative;}
.sl-arrow::before{content:""; display:block; width:11px; height:2px; background:#e7e7e7; -webkit-transform:rotate(45deg); transform:rotate(45deg); position: absolute; top:13px;}
.sl-arrow::after{content:""; display:block; width:11px; height:2px; background:#e7e7e7; -webkit-transform:rotate(-45deg); transform:rotate(-45deg); position: absolute; bottom:12px; }
.sl-arrow.sl::before{-webkit-transform:rotate(-45deg); transform:rotate(-45deg); margin-left:-6px;}
.sl-arrow.sl::after{-webkit-transform:rotate(45deg); transform:rotate(45deg); margin-left:-6px;}

/*index*/
#wrap{overflow: hidden;}
#wrap.index{padding:50px 0;}
.main-section{padding:50px 0;}

.section-tit{font-size:18px; color:#014099; margin-bottom:20px;}
.link{display:block; width:167px; background:#014099;  text-align: center; font-size:16px; font-weight: 500; color:#fff; padding:16px 0; margin-top:55px; transition-duration: 0.2s;}
.link:hover{background:#f6ab00;}

.index .section01 .contents-box{display:table; width:100%;}
.index .section01 .contents-box > div{display:table-cell; width:50%; vertical-align: middle;}
.index .section01 .contents-box .img-box{background:url('../img/main_bg01.png') no-repeat center center / cover;}
.index .section01 .contents-box .txt-box{height:520px;}
.index .section01 .contents-box .txt-box .contents{padding-left:80px; max-width:705px;}
.index .section01 .contents-box .txt-box h3{font-size:37px; font-weight: 300; margin-bottom:30px; word-break: keep-all;}
.index .section01 .contents-box .txt-box p{font-size:18px; font-weight: 300; line-height: 1.8; word-break: keep-all;}
.index .section01 .contents-box .txt-box p.color{color:#f6ab00; font-weight: 500;}

.index .section02 {padding-bottom:100px;}
.index .section02 .contents-box {position:relative;}
.index .section02 .contents-box .contents-left{position: absolute; left:15px; z-index: 5000; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.index .section02 .contents-box .contents-left::after{content:""; display:block; width:42px; height:1px; background:#eaeaea; left:-7px; top:25%; position: absolute;}
.contents-left .swiper-button-next,
.contents-left .swiper-container-rtl .swiper-button-prev{right:0; transform: rotate(180deg); -webkit-transform: rotate(180deg); }
.contents-left .swiper-button-prev,
.contents-left .swiper-container-rtl .swiper-button-next{left:0;}
.contents-left .swiper-button-prev,
.contents-left .swiper-button-next{position:static}

.contents-left .swiper-button-prev:after,
.contents-left .swiper-button-next:after{display:none;}

.pro-arrow{display:block; width:41px; height:23px; position: relative; margin-bottom:50px;}
.pro-arrow::before{content:""; display:block; width:29px; height:4px; background:#eaeaea; transform: rotate(45deg); position: absolute; left:9px;}
.pro-arrow::after{content:""; display:block; width:29px; height:4px; background:#eaeaea;transform: rotate(-45deg); position: absolute; right:9px;}

.index .section02 .contents-box .contents-center{width:85%}
.index .section02 .contents-box .contents-right{position: absolute; top:30%; right:4px;}
.index .section02 .swiper-container{max-height:520px; height:50vw;}
.index .section02 .swiper-slide .box-wrap {display:table; width:100%;}
.index .section02 .swiper-slide .box-wrap > div{display:table-cell; width:50%; vertical-align: middle;}
.index .section02 .txt-box{padding-left:120px;}
.index .section02 .txt-box .pro-tit h3{font-size:42px;}
.index .section02 .txt-box .pro-tit p{font-family: "Poppins", sans-serif; font-size:28px; }
.index .section02 .txt-box .pro-txt{font-size:18px; color:#797979; margin-top:40px;}
.index .section02 .img-box{background:#f6f6f6; text-align: center; height:520px;}

.index .section02 .swiper-pagination .swiper-pagination-bullet{display: block; border-radius: 0; width:4px; height:43px; background:#e6e6e6; opacity: 1;}
.index .section02 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active{background:#014099;}

.contents-right span{position:relative;}
.contents-right span:nth-child(1)::before,
.contents-right span:nth-child(2)::before,
.contents-right span:nth-child(3)::before,
.contents-right span:nth-child(4)::before,
.contents-right span:nth-child(5)::before{display:block; position: absolute;  width:165px; left:-165px; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); font-size:17px; color:#c5c5c5; font-weight: 600; text-align: right; padding-right: 25px;}
.index .section02 .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active::before{color:#014099}

.contents-right span:nth-child(1)::before{content:"Water Meter"}
.contents-right span:nth-child(2)::before{content:"Hot Water Meter"}
.contents-right span:nth-child(3)::before{content:"Heat Meter"}
.contents-right span:nth-child(4)::before{content:"Gas Meter"}
.contents-right span:nth-child(5)::before{content:"Electricity Meter"}


.index .section03{background:url('../img/main_bg02.png') no-repeat center center / cover; padding:100px 0;}
.index .section03 .contents-box > div{float:left; width:50%;}
.index .section03 .section-tit{color:#fff;}
.index .section03 .contents-left h3{font-size:33px; line-height: 1.4; color:#fff;}
.index .section03 .contents-left h3 span{display:block;}

.index .section03 .contents-right .box{float:left; width:50%; padding:0 15px;  }
.index .section03 .contents-right{margin:0 -15px;}
.index .section03 .contents-right .box a{display:block; position: relative; border:1px solid rgba(255, 255, 255, 0.32); padding:35px; transition-duration: 0.2s}
.index .section03 .contents-right .box a p{font-size:19px; line-height: 1.5; color:#fff; margin-bottom:70px; font-weight: 500;}
.index .section03 .contents-right .box a .more{position: absolute; right:35px; bottom:35px; width:21px; height:21px;}
.index .section03 .contents-right .box a .more::before{content:""; display:block; width:21px; height:1px; background:#fff; position:absolute; top:10px; }
.index .section03 .contents-right .box a .more::after{content:""; display:block; width:1px; height:21px; background:#fff; position:absolute; left:10px }
.index .section03 .contents-right .box a:hover{background:#014099; border-color:#014099; }

.index .section04 {padding-top:100px;}
.index .section04 .contents-box > div{float:left; width:50%;}
.index .section04 .contents02{padding-left:50px;}
.index .section04 .contents02 a{display:table; background:url('../img/m_contact.png') no-repeat center center / cover; width:100%; height:283px;}
.index .section04 .contents02 a .box{display:table-cell; vertical-align: middle; padding:0 63px; position:relative;}
.index .section04 .contents02 .section-tit{color:#fff;}
.index .section04 .contents02 h3{color:#fff; font-size:37px; line-height: 1.5;}
.index .section04 .contents02 .arrow{display: block; width:46px; height:46px; border:1px solid #fff; border-radius: 50%; position: absolute; right:65px; top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.index .section04 .contents02 .arrow::before{content:""; display:block; width:13px; height:1px;  background:#fff; position: absolute; transform:rotate(45deg) translateX(-50%); -webkit-transform:rotate(45deg) translateX(-50%); left:50%; top:50%;}
.index .section04 .contents02 .arrow::after{content:""; display:block; width:13px; height:1px;  background:#fff; position: absolute; transform:rotate(-45deg), translateX(-50%); -webkit-transform:rotate(-45deg) translateX(-50%); left:50%; top:50%;}


/*footer*/
#footer{border-top:1px solid #e2e2e2;}
#footer .contents-box{ padding:20px 0; position: relative;}
#footer .txt-box a{font-size:16px; font-weight: 700;}
#footer .txt-box p{font-size:16px; line-height: 1.6; margin-top:20px;}
#footer .txt-box .copy{color:#878787;}
#footer .ft-logo{position:absolute; right:0; top:50%; transform:translateY(-50%);  -webkit-transform:translateY(-50%);}


@media (max-width:768px){/*mobile*/

  #main-banner .swiper-wrapper .banner-contents h5{font-size:15px;}
  #main-banner .swiper-wrapper .banner-contents h3{font-size:24px; margin:10px 0 0; width:100%}
  #main-banner .pagination-box{position: absolute; width:260px; left:50%; bottom:30px; margin-left:-130px; }
  #main-banner .pagination-top .swiper-pagination-bullet{font-size:16px;}
  #main-banner .pagination-top .swiper-pagination-bullet-active::after{font-size:16px;}
  #main-banner .pagination-top .swiper-pagination-bullet-active:before{ margin:3px 0 0 0;height:12px;}

#main-banner .pagination-bottom .swiper-pagination-bullet{width:30px; margin-right:10px;}

  .section-tit{font-size:16px; margin-bottom:7px;}

  .index .section01 .contents-box{display:block;}
  .index .section01 .contents-box > div{display:block; width:100%;}
  .index .section01 .contents-box .txt-box{text-align: center; height: auto;}
  .index .section01 .contents-box .txt-box .contents{padding-left:15px; padding-right: 15px;}
  .index .section01 .contents-box .txt-box h3{font-size:24px; margin-bottom:20px}
  .index .section01 .contents-box .txt-box p{font-size:17px; line-height: 1.6; word-break: keep-all; margin-top:10px;}
  .link{margin: 50px auto 0; font-size: 15px; padding:12px 0;}


  .index .section02 .swiper-slide .box-wrap > div{display:block; width:100%; text-align: center;}
  .index .section02 .txt-box{padding-left:0}
  .index .section02 .contents-box .contents-left{display:none; }
  .index .section02 .txt-box .pro-tit h3{font-size:27px; }
  .index .section02 .txt-box .pro-tit p{font-size:19px;}
  .index .section02 .txt-box .pro-txt{font-size:17px; margin-top:20px}
  .index .section02 .contents-box .contents-center{width:100%;}
  .index .section02 .swiper-slide{}
  .index .section02 .swiper-container{max-height:none; height:560px;}
  .index .section02 .swiper-slide .box-wrap{display:block;}
  .index .section02 .img-box{height: auto; margin-top:30px; padding:30px}
  .index .section02 .img-box img{max-height: 239px}
  .index .section02 .link{margin-top:25px}
  .contents-right span::before{display:none !important;}
  .index .section02 .contents-box .contents-right{}
  .index .section02 .swiper-pagination .swiper-pagination-bullet{}

  .index .section03 .contents-left h3{font-size:23px; margin-bottom:20px;}
  .index .section03 .contents-right .box{float:none; width:100%; padding:0; margin-bottom:15px; }
  .index .section03 .contents-box > div{float:none; width:100%;}
  .index .section03 .contents-right{margin:0;}
  .index .section03 .contents-right .box a p{margin:0;}
  .index .section03 .contents-right .box a .more{bottom:0; top:50%; transform: translateY(-50%);}

  .index .section04 .contents-box > div{float:none; width:100%;}
  .index .section04 .contents02{padding-left:0; margin-top:100px;}
  .index .section04 .contents02 a{height: 200px;}
  .index .section04 .contents02 h3{font-size:20px;}
  .index .section04 .contents02 a .box{padding:0 30px;}

  #footer .ft-logo{margin-top:30px; position:static; text-align:center; transform:none;  -webkit-transform:none;}

}


/*sub-visual*/
#visual{ width:100%; height:50vw; max-height:300px; min-height:120px; background-position: center center; background-repeat: no-repeat; background-size: cover; position: relative;}
#visual.bg1{background-image:url('../img/sub_visual01.png');}
#visual.bg2{background-image:url('../img/sub_visual02.png');}
#visual.bg3{background-image:url('../img/sub_visual03.png');}
#visual.bg4{background-image:url('../img/sub_visual04.png');}

.visual-wrap{position: relative; height:50vw; max-height:300px; min-height:120px; width:100%; max-width: 1410px; margin: 0 auto;}
.visual-tit-box{position: absolute; z-index: 99; width:100%; top:50%; left:50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%);text-align:center; }
.visual-title{font-size:50px; color:#fff; text-align: center; margin-bottom:10px; }
.route{display: inline-block;}
.route li{float:left; margin-right:40px; position:relative; color:#fff; font-size:16px; }
.route li::before{content:""; display:block; width:1px; height:9px; background:#fff; position:absolute; right:-20px; top:5px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
.route li::after{content:""; display:block; width:1px; height:9px; background:#fff; position:absolute; right:-20px; bottom:4px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}
.route li:last-child{margin-right:0;}
.route li:last-child::before,
.route li:last-child::after{display:none;}


/*snb*/
#contents-section{position: relative;}
#snb-wrap{background:#0b4ea2; width:100%;}
.snb{max-width:705px; height:67px; }
.snb > li{float:left; color:#fff; font-size:18px; font-weight: bold; line-height: 67px; position:relative;}

.snb .arrow{display:block; position:absolute; right:0; top:50%;}
.snb .arrow::before{content:""; display:block; width:6px; height:1px; background:#fff; position:absolute; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); top:2px; }
.snb .arrow::after{content:""; display:block; width:6px; height:1px; background:#fff; position:absolute;transform: rotate(45deg); -webkit-transform: rotate(45deg); bottom:1px;}
.snb-home{width:10%;}
.snb-home a{color:#fff;}
.route-title{width:30%; padding-left:50px;}
.route-title a{color:#fff; }

.snb-nav {width:60%; position:relative; }
.snb-nav .here.on{display:block;}
.snb-nav .here{cursor: pointer; padding-left:50px;}

.snb-arrow {display:block; width:26px; height:26px; border:1px solid #fff; border-radius: 50%; position: absolute; top:50%; right:15px; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.snb-arrow::before{content:""; display:block; width:6px; height:6px; border:1px solid #fff; border-top:transparent; border-right:transparent; position: absolute; top:9px; right:9px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
.snb-menu {position: absolute; width: 100%; z-index: 9999; background:#fff; display: none; border:1px solid #ddd; border-top:0;}
.snb-menu a {color: #000; display:block; padding:10px 0 10px 50px; font-size:15px; font-weight: 400;}
.snb-menu li{line-height: normal;}
.snb-menu li:hover a {background:#fff; color:#000;}

@media (max-width:1200px){
  .snb{max-width: none;}
}
@media (max-width:768px){/*mobile*/
  .visual-title{font-size:34px; }
  .visual-sub-title{font-size:15px; letter-spacing: 2px; margin-right: -2px; font-weight: 400}
  .route{display: inline-block;}
  .route li{float:left; margin-right:30px; position:relative; color:#fff; font-size:14px; }
  .route li::before{content:""; display:block; width:1px; height:7px; background:#fff; position:absolute; right:-20px; top:5px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg);}
  .route li::after{content:""; display:block; width:1px; height:7px; background:#fff; position:absolute; right:-20px; bottom:4px; transform: rotate(45deg); -webkit-transform: rotate(45deg);}

  .snb{height:auto;}
  .snb > li{float:none; width:100%; line-height: 54px; font-size:17px}
  .snb-nav .here{padding-left:30px;}
  #snb-wrap{position:relative;}
  .snb-home,
  .route-title{display:none;}

}

/*sub공통*/
#sub-wrap{padding:50px 0;}
.sub-section{padding:50px 0;}

.sub-tit-box{margin-bottom:80px; text-align: center;}
.sub-tit-box h3{font-size:40px; display: inline-block;}

.table-container {width: 100%; overflow-x: auto; white-space: nowrap; }
@media (max-width:768px){/*mobile*/
  #sub-wrap{padding:0 0 50px;}
  .sub-tit-box{margin-bottom:25px;}
  .sub-tit-box h3{font-size:24px;}

}

/*sub0101*/
.sub0101 .img-box{background:url('../img/sub01_01_img01.png') no-repeat center center / cover; display:table; width:100%; height:470px; padding:80px;}
.sub0101 .img-box .inner{display:table-cell; vertical-align: middle; }
.sub0101 .img-box .inner p::before{content:""; display:block; width:50px; height:5px; background:#fff; margin-bottom:20px;}
.sub0101 .img-box .inner p{font-size:34px; width:40%; word-break:keep-all; line-height: 1.6; color:#fff; font-weight: 300;}
.sub0101 .img-box .inner p b{display:block;}
.sub0101 .txt-box{margin-top:50px; }
.sub0101 .txt-box h5{font-size:24px; line-height: 1.6;}
.sub0101 .txt-box p{font-size:18px; line-height: 1.7; margin-top:30px; word-break: keep-all; color:#777;}


@media (max-width:1200px){
.sub0101 .img-box .inner p{width:80%;}

}

@media (max-width:768px){
  .sub0101 .img-box{background:url('../img/sub01_01_img01_mobile.png') no-repeat center center / cover; display:block; height:700px; padding:60px;}
  .sub0101 .img-box .inner{display:block}
  .sub0101 .img-box .inner p{font-size:29px; text-align: center; width:100%;}
  .sub0101 .img-box .inner p::before{margin:0 auto 20px;}
  .sub0101 .txt-box h5{font-size:22px;}
  .sub0101 .txt-box p{font-size:17px;}

}

/*sub0102*/
.sub0102 .img-box{text-align:center;  padding-top:100px;}
.sub0102 .contact-link{text-align: right; padding-top:20px; border-top:1px solid #ddd;}
.sub0102 .contact-link a{display:inline-block; width:130px; padding:12px 0; text-align: center; background:#878787; color:#fff; font-size:16px; font-weight: 600;}

.sub-contents-wrap > div{display:none;}
.sub-contents-wrap > div.active{display:block;}
.history-nav{display:flex; align-items: center; margin-bottom:100px}
.history-nav li{width:33.333333%; padding:0 15px;}
.history-nav li .inner{padding:16px 0; text-align: center; border:1px solid #ddd; color:#bababa; font-size:18px; font-weight: 600; cursor:pointer; }
.history-nav li.on .inner{background:#faa618; border-color:#faa618; color:#fff;}

.history .selected-years {font-size: 150px; padding-top:153px; color: #f3f3f3; text-align: center; letter-spacing: -1px; font-weight: 600; position: absolute; left: 0; right: 0; z-index: -10;}

.month{font-size:19px; color:#12325c; margin-bottom:8px; display:inline-block;}

.history dl dd{margin-bottom:25px;}
.history dl dd:last-child{margin-bottom:0;}

@media (max-width: 1199px) {
  .history .selected-years { font-size: 12.5vw; font-weight: 900; }
}

.history-tab {text-align: center; position: relative; z-index: 20; display:none;}
.history-tab ul {display: inline-block; border: 1px solid #ddd;}
.history-tab a {display: block; font-size: 19px; letter-spacing: -0.5px; width: 300px; text-align: center; background: #fff; padding: 15px;}
.history-tab a + a {border-left: 1px solid #ddd;}
.history-tab a.active {background: #5a5a5a; color: #fff;}
.history-content > .long dt:before{left: 200px !important; width: calc(70% - 35px) !important;}

@media (max-width: 1199px) {
  .history-tab ul {display: block;}
  .history-tab li {width: 50%;}
  .history-tab a {width: auto;}
}

.history-content {position: relative; padding-top: 200px;}
.history-content:before {content: ""; position: absolute; width: 10px; height: 10px; border-radius: 10px; background: #bebebe; color: #fff; border: none; display: inline-block; line-height: 10px; text-align: center; left: calc(50% - 4px); top: 0;}
.history-content:after {content: ""; position: absolute; top: 0; left: 50%; bottom: 0; width: 1px; background: #bebebe; display: block;}
.history-content > li {width: 50%; padding-bottom: 70px; position: relative;}
.history-content > li dt {font-size: 35px; font-weight: 600; letter-spacing: -0.5px; position: relative; padding-bottom: 25px; color:#333; font-weight: 400;}
.history-content > li dt:before {content: ""; position: absolute; top: 25px; background: #ddd; height: 1px; width: 50px; display: block;}
.history-content > li dd p:before{content:"";display:block; position:absolute; left:0; top:11px; width:5px; height:5px; background:#9c9c9c; border-radius: 50%;}
.history-content > li dl {display: inline-block; max-width: 500px;}
.history-content > li:before {content: ""; position: absolute; width: 20px;
  height: 20px; border-radius: 50%; background: #fff; color: #fff; border: 5px solid #1b66b1; display: inline-block; line-height: 11px; text-align: center; z-index: 10; top: 16px;}
.history-content > li:nth-child(2n+1) {margin-left: calc(50% - 2px);}
.history-content > li:nth-child(2n+1):before {margin-left: -8px;}
.history-content > li:nth-child(2n+1) dl {padding-left: 65px;}
.history-content > li:nth-child(2n+1) dt:before {left: -66px;}
.history-content > li:nth-child(2n) {text-align: right;}
.history-content > li:nth-child(2n):before {right: -10px;}
.history-content > li:nth-child(2n) dl {padding-right: 65px; text-align: left;}
.history-content > li:nth-child(2n) dt:before {left: 210px;width: calc(100% - 154px);}
.history-content > li:nth-child(2n) dd {text-align: left;}
.history-content > li p {display: flex; line-height: 26px; font-size:17px; font-weight: 300; word-break: keep-all; margin-bottom:6px; position:relative; padding-left:14px;}
.history-content > li p:last-child {margin-bottom:0;}
.history-content > li p .year {font-size: 19px; color: #e60021; font-weight: 400; width: 50px;}
.history-content > li p .desc {width: calc(100% - 50px);display: block; letter-spacing: -0.5px;}

@media (max-width: 1199px) {
  .history-content {padding: 150px 20px 0;}
  .history-content > li dt {font-size: 31px; padding-bottom: 20px;}
  .history-content > li p .year {font-size: 17px;}
  .history-content > li p .desc {width: calc(100% - 50px); display: block; letter-spacing: -0.5px; font-size: 13px;}
}

@media (max-width: 768px) {
  .history-nav {flex-direction:column;}
  .history-nav li{width:100%; margin-bottom:10px}
  .history-nav li:last-child{margin-bottom:0}
  .history-nav li .inner{padding:12px 0; font-size:14px;}

  .history-content:before {left: 16px;}
  .history-content:after {left: 20px; width: 1px;}
  .history-content > li {width: auto; padding-bottom: 70px; position: relative; margin-left: 0;}
  .history-content > li dt {font-size: 29px;}
  .history-content > li dt:before {width: 30px; top: 14px;}
  .history-content > li:before {top: 3px;}
  .history-content > li:nth-child(2n+1), .history-content > li:nth-child(2n) {margin-left: 0;}
  .history-content > li:nth-child(2n+1):before, .history-content > li:nth-child(2n):before {margin-left: -9px;}
  .history-content > li:nth-child(2n+1) dl, .history-content > li:nth-child(2n) dl {padding-left: 35px;}
  .history-content > li:nth-child(2n+1) dt:before, .history-content > li:nth-child(2n) dt:before {left: -36px;}
  .history-content > li:nth-child(2n) {text-align: left;}
  .history-content > li:nth-child(2n):before {right: inherit;}
  .history-content > li:nth-child(2n) dl {padding-right: inherit;}
  .history-content > li:nth-child(2n) dt:before {width: 30px;}
}

/* sticky */
.years-bg.active {position: fixed; bottom: inherit;}
.years-bg.active.history-tab {top: 65px; left: 0; right: 0;}
.years-bg.active.selected-years {top: 50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); left: 0; right: 0; padding-top:0;}
.years-bg.active.selected-years + .history-content {margin-top: 135px;}

@media (max-width: 768px) {
  .years-bg.active.history-tab {top: 41px; left: 0; right: 0;}
  .years-bg.active.selected-years {display:none;}
  .years-bg.active.selected-years + .history-content {margin-top: 100px;}

  .history-tab{display:none;}
}

/*sub0104*/
.sub0104 .address{font-size:20px; text-align: center; margin:0 0 50px;color:#333;word-break: keep-all; line-height: 1.6}
.sub0104 .info li{float:left; width:33.333333%; text-align: center;}
.sub0104 .info li *{font-family: "Poppins", sans-serif; }
.sub0104 h5{font-size:20px; color:#014099; margin-bottom:12px; }
.sub0104 .info li p{font-size:18px; color:#999 ; }
.sub0104 .map{margin-top:50px;}
.sub0104 iframe{width:100%; height:50vw; max-height: 500px;}

@media (max-width:768px){/*mobile*/
  .sub0104 .info li{float:none; width:100%; margin-bottom:30px; }
  .sub0104 .info li:last-child{margin-bottom:0px; }
  .sub0104 h5{font-size:18px;}
  .sub0104 .info li p{font-size:17px; }
}

.contact-guid{font-size:19px; line-height:1.6; text-align: center;}


.sub0301 .img-box{text-align: center; padding:100px 0; background:#f5f5f7;}
.sub0302 .img-box{text-align: center; padding:100px 0; background:#f5f5f7;}

@media (max-width:1200px){/*tablet+mobile*/


}


@media (max-width:768px){/*mobile*/

  .sub0301 .img-box{background:none; padding:0;}
  .sub0302 .img-box{background:none; padding:0;}
.contact-guid{font-size:17px; }

}




.page-ready{background:#f6f6f6; padding:300px 0; text-align:center;}
.page-ready p{font-size:24px; font-weight:500;}