@charset "utf-8";
/** 레이아웃 */
html, body {}
button {border:0; background:transparent;}
#header {position:absolute; z-index:999; width:100%; height:140px; transition:all 0.4s;}
#header .header_wrap {position:relative; width:100%; height:100%; box-sizing:border-box; }
#header .header_wrap .logo {position:absolute; top:50%; transform:translateY(-70%); left:50px; width:200px; height:60px; z-index:20;}
#header .header_wrap .logo a {display:block; width:100%; height:100%; background:url('../img/layout/cmmLogo.png') no-repeat left center; background-size:100% auto; transition:all 0.4s;}
#header .header_wrap .gnb {position:absolute; width:100%; box-sizing:border-box; height:100%;transition:all 0.5s;}
#header .header_wrap .gnb .gnb_ul{  width:1030px; position:absolute; left: calc( 50vw - 445px );z-index:10; }
#header .header_wrap .gnb .gnb_ul > li{ float:left; height:100%; box-sizing:border-box; position:relative; }
#header .header_wrap .gnb .gnb_ul > li > a{ font-size: 22px; font-weight: 600; font-family: 'Montserrat'; display:inline-block; padding:56px 50px 57px 50px; color:#fff; transition:all 0.4s;}
#header .header_wrap .gnb .gnb_ul > li > a span {position:relative;}
#header .header_wrap .gnb .gnb_ul > li > a span:before { content:" "; display:block; position:absolute; opacity:0; top:-17px; right:-25px; width:37px; height:30px; transition:all 0.3s; background:url('../img/layout/gnb_ul_hover.png'); }
#header .header_wrap .gnb .gnb_ul > li > a.menu_on {color:#70f1ff;}
#header .header_wrap .gnb .gnb_ul > li > a.menu_on span:before{opacity:1;}
#header .header_wrap .gnb .gnb_ul  li{ text-align:center; }
#header .header_wrap .gnb .item {display:none; position:absolute;width: 100%;background: #fff;padding: 20px 0;top: 100px;box-shadow: 4px 5px 9px #00000038;}
#header .header_wrap .gnb .sub_ul > li{ width:100%; }
#header .header_wrap .gnb .sub_ul > li >a{margin-bottom:10px; padding:8px 0px; display:inline-block; width:100%; font-size:17px; font-weight: 600; font-family:'Montserrat'; box-sizing:border-box; }
#header .header_wrap .gnb .sub_ul > li:last-child > a {margin-bottom:0;}
#header .header_wrap .gnb .sub_ul > li >a span {position:relative; z-index:1;}
#header .header_wrap .gnb .sub_ul > li >a span:before {content:''; position:absolute; display:block; top:-10px; right:-10px; width:5px; height:5px; border-radius:10px; background:#70f1ff; opacity:0; transition:all 0.3s;}
#header .header_wrap .gnb .sub_ul > li >a span:after {content:''; position:absolute; display:block; bottom:0px; left:0; width:100%; height:10px; background:#daf2f4; z-index:-1; opacity:0; transition:all 0.3s;}
#header .header_wrap .gnb .sub_ul > li >a:hover span:after,
#header .header_wrap .gnb .sub_ul > li >a:focus span:after {opacity:1;}
#header .header_wrap .gnb .sub_ul > li >a:hover span:before,
#header .header_wrap .gnb .sub_ul > li >a:focus span:before {top:0; opacity:1;}
#header .header_wrap .gnb .gnb_m_close{ display:none;}


#header .header_wrap .rightBox {position:absolute; top:0; right:0; z-index:20; }
#header .header_wrap .rightBox:before {display:block; content:''; clear:both;}

#header .header_wrap .rightBox .menuBtn {position:relative; float:left; width:29px; height:29px; box-sizing:border-box; margin: calc( 111px / 2 );}
#header .header_wrap .rightBox .menuBtn i.dot{position:absolute; display:block; width:5px; height:5px; border-radius:5px; left:0px; top:0px; background:#fff; transition:all 0.5s; }
#header .header_wrap .rightBox .menuBtn i:nth-child(1),
#header .header_wrap .rightBox .menuBtn i:nth-child(2),
#header .header_wrap .rightBox .menuBtn i:nth-child(3){ background:#fff; }
#header .header_wrap .rightBox .menuBtn i:nth-child(4),
#header .header_wrap .rightBox .menuBtn i:nth-child(5),
#header .header_wrap .rightBox .menuBtn i:nth-child(6){ background:#4c9ccf; left:50%; margin-left: calc( -1 * 5px / 2); }
#header .header_wrap .rightBox .menuBtn i:nth-child(7),
#header .header_wrap .rightBox .menuBtn i:nth-child(8),
#header .header_wrap .rightBox .menuBtn i:nth-child(9){ background:#0aa5b5; right:0px; left:auto; }
#header .header_wrap .rightBox .menuBtn i:nth-child(2),
#header .header_wrap .rightBox .menuBtn i:nth-child(5),
#header .header_wrap .rightBox .menuBtn i:nth-child(8){ top:50%; margin-top:calc( -1 * 5px / 2); }
#header .header_wrap .rightBox .menuBtn i:nth-child(3),
#header .header_wrap .rightBox .menuBtn i:nth-child(6),
#header .header_wrap .rightBox .menuBtn i:nth-child(9){ bottom:0px; top:auto; }

#header.h_sitemap .header_wrap .rightBox .menuBtn i.middle{ display:none; }
#header.h_sitemap .header_wrap .rightBox .menuBtn i.top{ transform:rotate(45deg); top:49px; }
#header.h_sitemap .header_wrap .rightBox .menuBtn i.bottom{ transform:rotate(-45deg); top:49px; }

#header.active {background:#fff; border-bottom:1px solid #ddd; box-sizing:border-box;}
#header.active .header_wrap .logo a {background:url('../img/main/comp_logo_active.png') no-repeat left center; background-size:100% auto;}
#header.active .header_wrap .gnb .gnb_ul > li > a span {color:#000;}
#header.active .header_wrap .rightBox .menuBtn i:nth-child(1),
#header.active .header_wrap .rightBox .menuBtn i:nth-child(2),
#header.active .header_wrap .rightBox .menuBtn i:nth-child(3) {
  background:#454092;
}

/*모바일 메뉴*/
.h_sitemap_open {overflow:hidden !important;}
.modal_sitemap_bg {display:none; position:fixed; width:100%; height:100%; top:0; left:0; background:#000; z-index:9999; opacity:0.4;}
.modal_sitemap {right:-550px; position:fixed; padding:20px 40px 40px; top:0; width:550px; height:100%; box-sizing:border-box; background:#fff; z-index:9999;}
.modal_sitemap .sitemap_header {position:relative;}
.modal_sitemap .sitemap_header .logo {width:200px; height:60px; background:url('../img/main/comp_logo_active.png') no-repeat left center; background-size:100% auto;}
.modal_sitemap .sitemap_header .close_btn {position:absolute; bottom:0; right:0; width:26px; height:26px; transform:rotate(45deg);}
.modal_sitemap .sitemap_header .close_btn:before {content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:2px; background:#000;}
.modal_sitemap .sitemap_header .close_btn:after {content:''; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:100%; background:#000;}
.modal_sitemap .sitemap_box {width:100%; height:100%;}
.modal_sitemap .sitemap_menu {overflow-y:auto; padding-top:50px; padding-left:20px; height:calc(100% - 60px); box-sizing:border-box;}
.modal_sitemap .sitemap_menu > ul > li {position:relative; text-align:left;}
.modal_sitemap .sitemap_menu > ul > li > a {padding-bottom:30px; font-size:24px; font-weight:600; font-family:'Montserrat'; display:inline-block; color:#000; transition:all 0.4s;}
.modal_sitemap .sitemap_menu > ul > li:last-child > a {padding-bottom:0;}
.modal_sitemap .sitemap_menu > ul > li > a span {position:relative;}
.modal_sitemap .sitemap_menu > ul > li > a span:before { content:" "; display:block; position:absolute; opacity:0; top:-17px; right:-25px; width:37px; height:30px; transition:all 0.3s; background:url('../img/layout/gnb_ul_hover.png'); }
.modal_sitemap .sitemap_menu > ul > li > a.menu_on span:before{opacity:1;}


.modal_sitemap .sitemap_menu .item {padding-left:20px; margin-bottom:30px;}
.modal_sitemap .sitemap_menu > ul ul > li > a {margin-bottom:10px; padding:8px 0px; display:inline-block; width:100%; font-size:17px; font-weight:500; font-family:'Montserrat'; box-sizing:border-box; color:#555;}
.modal_sitemap .sitemap_menu > ul ul > li > a span {position:relative; z-index:1;}
.modal_sitemap .sitemap_menu > ul ul > li > a span:before {content:''; position:absolute; display:block; top:-10px; right:-10px; width:5px; height:5px; border-radius:10px; background:#70f1ff; opacity:0; transition:all 0.3s;}
.modal_sitemap .sitemap_menu > ul ul > li > a span:after {content:''; position:absolute; display:block; bottom:0px; left:0; width:100%; height:10px; background:#daf2f4; z-index:-1; opacity:0; transition:all 0.3s;}
.modal_sitemap .sitemap_menu > ul ul > li >a:hover span:after,
.modal_sitemap .sitemap_menu > ul ul > li >a:focus span:after {opacity:1;}
.modal_sitemap .sitemap_menu > ul ul > li >a:hover span:before,
.modal_sitemap .sitemap_menu > ul ul > li >a:focus span:before {top:0; opacity:1;}


/** 푸터*/
.footer {position:relative; padding:0 50px; width:100%; border-top:1px solid #ccc; background:#fff; box-sizing:border-box;}
.footer .footer_wrap {position:relative; margin:0 auto; padding:50px 0 50px 250px; width:100%; box-sizing: border-box;}
.footer .footer_wrap .footer_logo {position:absolute; top:50%; transform:translateY(-50%); left:0px; width:200px; height:60px; background:url('../img/main/comp_logo_active.png') no-repeat center; background-size:100% auto;}
.footer .footer_wrap .footer_logo span {display:block; text-indent:-9999px;}
.footer .footer_wrap ul.link {margin-bottom:10px;}
.footer .footer_wrap ul.link li a {color:#0093a2; font-family: 'NanumSquare'; font-size:17px; line-height:30px; font-weight:bold;}
.footer .footer_wrap .footer_bottom .address p {color:#222; font-family: 'NanumSquare'; font-size:17px; line-height:30px; font-weight:bold;}
.footer .footer_wrap .footer_bottom .copy {margin-top:20px; color:#666; font-family: 'NanumSquare'; font-size:17px; line-height:30px; font-weight:normal;}

#hd, #wrapper, #ft {min-width:auto !important;}
#hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr {width:auto;}
#wrapper.container {position:relative; margin-top:140px;}
#wrapper.container:after {display:block; content:''; clear:both;}

/* layout */
.wrap {overflow:hidden; width:100%; position:relative;}
.cnt_box{ max-width:1400px; width:100%; margin:0 auto; }
.link_btn{ display:inline-block; padding-right:120px; position:relative; }
.link_btn:after{ content:" "; display:block; position:absolute; z-index:2; width:50px; height:50px; border:1px solid #43e5f6; border-radius:50px; right:0px; top:-12px; transition:all 0.4s; }
.link_btn .link_arrow{ width:50px; height:10px; position:absolute; z-index:3; bottom:10px; right:30px; transition:all 0.4s; }
.link_btn .link_arrow:before,
.link_btn .link_arrow:after{ content:" "; display:block; position:absolute; background:#fff; }
.link_btn .link_arrow:before{ width:50px; height:1px;  left:0px; bottom:0px; }
.link_btn .link_arrow:after{ width:10px; height:1px; transform:rotate(45deg); right:0px; bottom:4px; }
.link_btn:hover:after,
.link_btn:focus:after,
.link_btn:active:after{ border:1px solid #39949e; background:#39949e; }
.link_btn:hover .link_arrow,
.link_btn:focus .link_arrow,
.link_btn:active .link_arrow{ right:15px; }

.modal-fixed-pop-wrapper{display:none; overflow:hidden; position:fixed; top:0px; left:0px; width:100%; height:100%; z-index:9999; background:#000; background:rgba(0,0,0,0.8);}
.modal-fixed-pop-inner{position:absolute; display:table; width:100%; height:100%; text-align:center;}
.modal-inner-box{ position:relative; display:table-cell; vertical-align:middle;}
.modal-loading{position:absolute; top:50%; left:50%; margin:-25px 0 0 -25px; z-index:10000;}
.modal-inner-content{text-align:left;}
.loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 8px solid rgba(255,255,255,.3);
  border-radius: 50%;
  border-top-color: #fff;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg);  }
}
/* modal layer content */
.footer-modal-content{position:relative; width:96%; max-width:1000px; margin:20px auto; }
.footer-modal-content h2{font-size:24px; font-weight:600; letter-spacing:-0.5px; text-align:center; padding:0 50px 20px; color:#fff;}
.footer-modal-content .modal-close-btn {position:absolute; top:10px; right:0; width:26px; height:26px; transform:rotate(45deg);}
.footer-modal-content .modal-close-btn:before {content:''; display:block; position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; height:2px; background:#fff;}
.footer-modal-content .modal-close-btn:after {content:''; display:block; position:absolute; top:0; left:50%; transform:translateX(-50%); width:2px; height:100%; background:#fff;}
.footer-inner-box{padding:30px; background-color:#fff; }
.footer-inner{padding:20px; height:400px; overflow-y:auto; overflow-x:hidden; border:1px solid #ddd; font-size:14px;}



@media all and (max-width:1400px){

	#header .header_wrap .logo {width:160px;}
	#header .header_wrap .logo a {background-size:100% auto;}
	#header .header_wrap .gnb .gnb_ul {width:842px; left:calc( 50vw - 330px );}
	#header .header_wrap .gnb .gnb_ul > li > a {font-size:20px; padding:56px 25px 57px 25px;}

  .modal_sitemap .sitemap_header .logo {width:160px;}
  .modal_sitemap .sitemap_menu {padding-top:40px;}
  .modal_sitemap .sitemap_menu > ul > li > a {font-size:20px;}

  .footer {padding:0 50px;}
  .footer .footer_wrap {padding:30px 0 30px 200px;}
  .footer .footer_wrap .footer_logo {width:160px;}

}

@media all and (max-width:1200px){
  #header .header_wrap .logo {left:20px;}
  #header .header_wrap .rightBox .menuBtn {margin:55px calc( 40px / 2 );}

  .footer {padding:0 20px;}
}

@media all and (max-width:1000px){
  #header {position:fixed; height:80px; background:#fff; border-bottom:1px solid #ddd; box-sizing:border-box;}
  #header .header_wrap .gnb {display:none;}
  #header .header_wrap .rightBox .menuBtn {margin:25px calc( 40px / 2 );}
  #header .header_wrap .logo {transform:translateY(-50%);}
  #header .header_wrap .logo a {background:url('../img/main/comp_logo_active.png') no-repeat left center; background-size:100% auto;}
  #header .header_wrap .gnb .gnb_ul > li > a span {color:#000;}
  #header .header_wrap .rightBox .menuBtn i:nth-child(1),
  #header .header_wrap .rightBox .menuBtn i:nth-child(2),
  #header .header_wrap .rightBox .menuBtn i:nth-child(3) {
    background:#454092;
  }
  #wrapper.container {margin-top:80px;}
  .footer .footer_wrap .footer_bottom .address p,
  .footer .footer_wrap .footer_bottom .copy {font-family:'Noto Sans KR', sans-serif; font-size:14px;}

  .footer-modal-content{width:auto; margin:50px 15px}
	.footer-modal-content h2{font-size:18px; text-align:left; padding:0 30px 15px 0}
  .footer-modal-content .modal-close-btn {top:0;}
	.footer-inner-box{padding:15px}
	.footer-inner{padding:10px; height:250px;}

}

@media all and (max-width:700px){

  .modal_sitemap {width:80%;}
  .modal_sitemap .sitemap_menu > ul > li > a {padding-bottom:20px;}
  .modal_sitemap .sitemap_menu .item {margin-bottom:20px;}

  .footer .footer_wrap {padding:30px 0; text-align:center;}
  .footer .footer_wrap .footer_logo {display:none;}


}