/* 상단 메뉴, nav,  사이드 메뉴 */
html.expand body { /* position:fixed; top:0; left:0; width:100%; */ }
html.expand #side_bgc {position: fixed; top:0; right:0; width:100%; height:100%;  background: rgba(0,0,0,.7); }


.header_wrap {  width: 100%; height: 66px; position: fixed; z-index: 99; transition: all 0.2s ease-out; }
.header_wrap:after {content:""; display:block; clear:both; }
.header_wrap:before {content:""; display:block; height: 66px; width: 100%;  background: #ffffff; position: absolute; left:0; top:0;  transition: all 0.2s ease-out;  }


.header_wrap .head_icon {display: none;}
.header_wrap .header {  position: relative; max-width:1360px; margin: 0 auto; }
.header_wrap .header:after {content:""; display:block; clear:both;}
.header_wrap .logo_wrap {width:120px; position: absolute; top: 50%; -webkit-transform: translateY(-50%) ; left:15px; font-size:0; }
.header_wrap .logo_wrap a {display:block; }
.header_wrap .logo_wrap img {height: 38px;}


.header_wrap .header .nav { text-align: right; padding: 0 15px 0 0;}
.header_wrap .header .nav li {display:inline-block; padding: 0 20px; height: 66px; line-height: 66px; position:relative; vertical-align: top;
    transition: all 0.2s ease-out;
}
.header_wrap .header .nav li a {font-size: 1.6rem;  display: block; padding: 0 20px; height: 66px; font-weight: 500; color: #212121; /* border-bottom: 5px solid transparent; */ }
.header_wrap .header .nav li a::before {  display: block;   content: attr(title);   font-weight: bold;   height: 0;   overflow: hidden;   visibility: hidden; }

.header_wrap .header .nav li a.focus,
.header_wrap .header .nav li a.active,
.header_wrap .header .nav li a:hover { /* border-bottom: 5px solid #000000;*/ }

.header_wrap .header .nav li ul  {display:none; width: 180px; min-height: 60px; padding: 15px 0; background: #f9f9f9;text-align:center;  position:absolute;  left: 50%;  margin-left:-90px; top: 66px; font-size:0; z-index:14; }
.header_wrap .header .nav li ul li {display:block;  margin:0 ; padding:0; height:30px; line-height:30px; vertical-align:top;}
.header_wrap .header .nav li ul li a {display:block;  font-size:1.6rem; font-weight: normal;}
.header_wrap .header .nav li ul li a.longtxt {letter-spacing:-1px;}
.header_wrap .header .nav li ul li a.focus,
.header_wrap .header .nav li ul li a:hover,
.header_wrap .header .nav li ul li a.active {border-bottom: none;}

.header_null {height: 66px;}

@media all and (min-width:769px) {
    .header_wrap.scroll {height: 66px; }
    .header_wrap.scroll:before { height: 66px; }
    .header_wrap.scroll .header .nav li { height: 66px; line-height: 66px; }
    .header_wrap.scroll .header .nav li a {height: 66px;}
    .header_wrap.scroll .header .nav li ul { top: 66px;}
    .header_wrap.scroll .header .nav li ul li {height: 30px; line-height: 30px;}
    .header_wrap.scroll .header .nav li ul li a { height: auto; }

    /* 전체 메뉴로 대체 */
     /*
	.header_wrap .header .nav li:hover ul {display:block;}
    */

}

@media (max-width: 1024px) {
	.header_wrap .header .nav li { padding:0 0; }
	.header_wrap .header .nav li a {font-size:1.6rem;}

}

#side_nav .side_hide {display: none;}

@media (max-width: 768px) {
	.header_wrap {height: 50px; }
	.header_wrap .header {height:auto; min-height:50px }
	.header_wrap:before { height: 50px; }


	.header_wrap .logo_wrap  {width: 240px; position: absolute; left: 14px; margin-left: 0; font-size:0;}
	.header_wrap .logo_wrap a {display:block; text-align: left;}
	.header_wrap .logo_wrap img {height: 20px}

	.header_wrap .head_icon {height:30px;  display: block;}

	.header_wrap p.ico_ham {position: absolute; right: 12.5px; top: 12px; cursor: pointer; }
	.header_wrap p.ico_ham i {font-size: 25px; color: #000000;}
	.header_wrap p.ico_ham img {height: 15px;}

	.header_wrap .header #side_nav { padding:0 0; width: 85%; height:100%;  max-width: 500px; position: fixed; top:0; right:-100%;  background: #ffffff;  z-index: 1001 ; box-shadow:2px 0px 4px rgba(0,0,0,0.30); }
	.header_wrap .header .nav {float:none; width:100%; text-align:left; margin:0; position: relative; }
	.header_wrap .header .nav li {display:block; padding: 0 0; margin-left: 10px; height:auto; position:relative;  border-bottom: 1px solid #dcdcdc;}
	.header_wrap .header .nav li.havn {}
	.header_wrap .header .nav li.havn:after {display: block; position: absolute; right:0; top:0;  width:40px; height:50px; line-height:50px; text-align: center; font-size:15px; content: "\e941"; font-family:'xeicon'; 	transform: rotate(0deg);transition: transform 120ms 200ms ease-out;
    color: #313131;}
	.header_wrap .header .nav li.havn.on:after { transform: rotate(-180deg);    transition: transform 120ms ease-in-out;}

	.header_wrap .header .nav li a {font-size:15.5px; padding: 0 15px 0 20px; display: block; height:50px; line-height:50px; font-weight:500 ; border-bottom:none;}
    .header_wrap .header .nav li a.focus,
    .header_wrap .header .nav li a.active,
	.header_wrap .header .nav li a:hover {border-bottom:none;}


	.header_wrap .header .nav li ul {display:none; width:100%; min-height:40px; height:auto;  padding:5px 0; background: #f9f9f9;text-align:left;  position: relative; left:0;  top:0;  margin-left:0; }
	.header_wrap .header .nav li ul li {display:block;  margin:0 ; padding:0; height: auto; line-height: auto; vertical-align:top; border-bottom:none;}
	.header_wrap .header .nav li ul li a {padding-left: 25px;}


	#side_nav .side_hide {display:block;}
	#side_nav .side_logo {padding: 15px 0 10px 20px; text-align: left;}
	#side_nav .side_logo img {height: 20px;}


	#side_nav .btn_side_close {position: absolute; right: 15px; top: 15px; cursor: pointer;}
	#side_nav .btn_side_close i {font-size: 21px; color: #000000;}

    .header_null {height: 50px;}
}


    
.subnav_virtual {width: 100%; height: auto; padding: 0; background:  rgba(0,0,0,0.85); color: #fff; 
    display: none;
}
.subnav_virtual a {color: #fff;}

.subnav_virtual .subnav {max-width: 1360px; margin: 0 auto; padding-right: 20px;}
.subnav_virtual .subnav ul {text-align: right; }

.subnav_virtual .subnav li.havn {display: inline-block; padding: 0; vertical-align: top;}
.subnav_virtual .subnav li.havn a[data-sub="yes"] {display: none;}

.subnav_virtual .subnav li.havn ul {text-align: center; display: block; padding: 20px 0;}
.subnav_virtual .subnav li.havn ul li {display: block; padding: 5px 0; font-size: 1.5rem;}




.top_img {height: 220px; background: url('../img/top_img_01.jpg') repeat-x 50% 50%; background-size: auto 100%; }
.top_img.t1 { background: url('../img/top_img_01.jpg') repeat-x 50% 50%; }
.top_img.t2 { background: url('../img/top_img_02.jpg') repeat-x 50% 50%; }
.top_img.t3 { background: url('../img/top_img_03.jpg') repeat-x 50% 50%; }
.top_img.t4 { background: url('../img/top_img_04.jpg') repeat-x 50% 50%; }

@media (max-width: 768px) {
    .top_img { height: 100px; background-size: cover;}    
}






/* 하단 */
.tail_wrap { padding: 0 15px 0; background: #ffffff; color: #313131;}
.tail_wrap .tail { padding: 40px 0; max-width: 1340px; margin: 0 auto; position: relative; border-top: 1px solid #dfdfdf;}
.tail_wrap .com_info { font-size: 1.3rem; padding: 0 0; line-height: 1.8; }

.tail_wrap .btm_img {position: absolute; right: 0; top: 40px;}
.tail_wrap .btm_img img {max-width: 100%;}
.tail_wrap .copy {padding: 0; margin-bottom: 30px; font-weight: 700;  font-size: 1.5rem; line-height: 1.0;}

@media (max-width: 768px) {
    .tail_wrap .btm_img  {position: static; padding: 30px 0 0 0;}
}



.contents {padding: 80px 15px; max-width: 1360px; margin: 0 auto;}



.pt {margin: 0 0 0; font-size: 2.8rem; font-weight: 500; margin: 10px 0 30px 0; color: #003668; text-align: center;}
.pt span {border-bottom: 2px solid #003668; display: inline-block; padding-bottom: 4px;}


.about {text-align: center; padding: 50px 0;}
.about img {max-width: 100%;}

@media (max-width: 768px) {
    .contents {padding: 30px 15px;}
    .pt  {font-size: 2.0rem;}
    .about {padding: 30px 0;}
}