/*=============================
	BASIC STYLE
===============================*/

body {height:100%; *zoom:1; overflow:hidden;}
body:after {display:block; clear:both; content:""}
#wrap {min-width:1280px; width:100%; height:100%; overflow:visible;}

/* background fixed 흔들거림방지 */
@media all and (-ms-high-contrast:none) {
	.shtml {overflow:auto;height:100%;} /* IE10 */
	.shtml body{overflow:auto;height:100%;} /* IE10 */
}
*::-ms-backdrop, .shtml body{overflow:auto;} /* IE11 */


body {height:100%;}


/*=============================
	responsive effect
===============================*/
/* #header, #mvis, #st1, #st1 > div, #mvis .item *, #footer, .shtml {transition:0.4s;} */


/*=============================
	Header Style
===============================*/
#header {position:absolute; left:0; top:0; z-index:1; width:20%; max-width:340px; min-width:220px; height:100%; background:rgba(255,255,255,1);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#60000000,endColorstr=#60000000);

}
#header .logo {position:relative; z-index:2;height:170px;}
#header .logo img {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }

/*
#mo_me_btn {display:none; position:fixed; left:20px; width:50px; height:50px;background:rgba(0,0,0,0.7)}
#mo_me_btn a {display:block; width:100%; height:100%; line-height:10px; font-size:0;}
#mo_me_btn a span {transition:1s;}
#mo_me_btn a:hover span {}

#mo_me_btn span {position:relative; top:20px; display:inline-block; width:25px; height:2px; background:red;}
#mo_me_btn span:before {position:absolute; top:-10px; left:0; display:inline-block; content:""; width:25px; height:2px; background:#fff;}
#mo_me_btn span:after {position:absolute; top:10px; left:0; display:inline-block; content:""; width:25px; height:2px; background:#fff;}


#mo_me_btn a:hover span {animation: aa 1s infinite alternate}
#mo_me_btn a:hover span:before {}
#mo_me_btn a:hover span:after {}


*/
.tnb {position:absolute; top:0; right:0; z-index:2; padding:0 20px; background:#060606;}
.tnb li {display:inline-block; height:30px; line-height:26px; margin-left:20px;}
.tnb li:first-child {margin-left:0;}
.tnb li a {font-size:10px;  color:#ccc;}
.tnb li a:hover {color:#fff;}

@keyframes aa {
	0% {
		opacity:0;
		transform:rotateX();
	}
	100% {
		opacity:1;
		transform:rotateX(45);
	}
}



/*=============================
	Container Style
===============================*/
#mvis {position:fixed; left:0; top:0; z-index:-1; width:100%; height:100%;}
#mvis .slick-list {height:100%;}
#mvis .slick-track {height:100%;}
#mvis .slick-slide > div {font-size:0;}
#mvis .item {width:100%; height:100%; background-repeat:no-repeat; background-size:cover; }
/*
#mvis .slick-slide:nth-of-type(1) {background-image:url(../img/main/mvis_img01.jpg)}
#mvis .slick-slide:nth-of-type(2) {background-image:url(../img/main/mvis_img02.jpg)}
#mvis .slick-slide:nth-of-type(3) {background-image:url(../img/main/mvis_img03.jpg)}
*/
#mvis .item1 {background-image:url(../img/main/mvis_img01.jpg)}
#mvis .item2 {background-image:url(../img/main/mvis_img02.jpg)}
#mvis .item3 {background-image:url(../img/main/mvis_img03.jpg)}
#mvis .mtxt {position:absolute; left:4%; top:12%; width:30%; max-width:469px; margin-left:20%; }
#mvis .mtxt img {width:100%; height:auto;}
.yp-container {position:absolute; width:100%; height:100%;}


/* 메인배너 레이아웃 */
#st1 {position:absolute; right:0; bottom:100px; width:60%; max-width:780px; background:#fff; *zoom:1; background:#fff;}
#st1:after {display:block; clear:both; content:""}
#st1 > div {float:left;}
#st1 .mboard {position:relative; width:100%; height:48px; }
#st1 .mbn1, #st1 .mbn2 {width:30%}
#st1 .mbn3, #st1 .mbn4 {width:20%;}
#st1 .mbn5 {width:40%;}
#st1 .mbn1:after,
#st1 .mbn2:after {display:block; content:""; padding-bottom:100%;}
#st1 .mbn3:after, 
#st1 .mbn4:after {display:block; content:""; padding-bottom:75%;}
#st1 .mbn5:after {display:block; content:""; padding-bottom:37.5%;} 
#st1 .mbn1, #st1 .mbn2, #st1 .mbn3, #st1 .mbn4, #st1 .mbn5 {position:relative;}
#st1 .mbn_con {display:block; position:absolute; left:0; top:0; width:100%; height:100%; padding:10%;}
#st1 i img {width:100%; height:auto;}
#st1 i {width:15%;}

#st1 .mbn5 .mbn_con {padding:0;}
#st1 .mbn5 .mbn_con > div {display:table; width:100%; height:100%; padding:0; }
#st1 .mbn5 .mbn_con dl {display:table-cell; vertical-align:middle; text-align:center;  }
#st1 .mbn5 .mbn_con dt {margin-bottom:5px;}
#st1 .mbn5 .mbn_con dt:after,
#st1 .mbn5 .mbn_con dt:before {display:inline-block; content:"\00B7"; padding:0 5px;}
#st1 .mbn5 .mbn_con dd {line-height:1.1;}

/* 배너 마우스오버 */
#st1 .btn_more {display:inline-block; padding:2px 18px; border:1px solid #fff; border-radius:20px; margin-top:10px; color:#fff; font-size:8px; font-weight:300; transition:1s;}
#st1 > div:hover .btn_more { color:#fff; border:1px solid #fff; background:#fff;}
#st1 .mbn1 .btn_more {color:#fff; border:1px solid #fff; }
#st1 .mbn1:hover .btn_more {color:#3abcf5; background:#fff;}
#st1 .mbn2 .btn_more {color:#fff; border:1px solid #fff;}
#st1 .mbn2:hover .btn_more {color:#197fe1; background:#fff;}
#st1 .mbn3 .btn_more {color:#fff; border:1px solid #fff;}
#st1 .mbn3:hover .btn_more {color:#604bcc; background:#fff;}
#st1 .mbn4 .btn_more {color:#fff; border:1px solid #fff;}
#st1 .mbn4:hover .btn_more {color:#6d91cd; background:#fff;}

/* 배너 폰트 설정 */
#st1 .mbn1 a {color:#fff;}
#st1 .mbn2 a {color:#fff;}
#st1 .mbn3 dt,
#st1 .mbn4 dt {font-weight:400;}
#st1 .mbn3 a {color:#fff;}
#st1 .mbn4 a {color:#fff;}
#st1 .mbn5 {color:#fff;}
#st1 .mbn5 dt {color:#47669a; font-size:17px; font-weight:300;}
#st1 .mbn5 dd {color:#222222; font-size:20px; font-weight:700;}
#st1 .mbn5 dd span {font-size:15px; color:#aaaaaa;}

/* 배너 배경 */
#st1 .mbn1 {background:#000000 no-repeat url('../img/main/mbn1_bg.jpg'); background-size:cover;  }
#st1 .mbn2 {background:#000000 no-repeat url('../img/main/mbn2_bg.jpg'); background-size:cover;  }
#st1 .mbn3 {background:#604bcc no-repeat url(''); background-size:cover;  }
#st1 .mbn4 {background:#6d91cd no-repeat url(''); background-size:cover;  }
#st1 .mbn5 {background:#ffffff no-repeat url(''); background-size:cover;  }

/* 배너 아이콘, 텍스트 위치 */
#st1 .mbn1 i, #st1 .mbn2 i {position:absolute; top:35%; } 
#st1 .mbn3 i, #st1 .mbn4 i {position:absolute; right:10%; bottom:10%; width:20%; height:auto;}
#st1 .mbn1 dl, #st1 .mbn2 dl {position:absolute; top:50%; }

/* 배너 타이틀 */
#st1 .mbn1 dt,
#st1 .mbn2 dt {font-size:24px;}
#st1 .mbn3 dt,
#st1 .mbn4 dt {font-size:15px;}

/* 배너 설명 */
#st1 .mbn1 dd,
#st1 .mbn2 dd {font-size:15px; font-weight:200;}
#st1 .mbn3 dd,
#st1 .mbn4 dd {font-size:11px; font-weight:200;}

#st1 .mbn4 a:before,
#st1 .mbn5 a:before {display:block; content:""; position:absolute; left:0; top:0; width:100%; height:100%;
	background-size:100% 100%;
	opacity:0; transition:0.3s
}
#st1 .mbn4 a:hover:before,
#st1 .mbn5 a:hover:before {opacity:1;}
#st1 .mbn4 a:before {background-image:url('../img/main/mbn4_ov.jpg'); }
#st1 .mbn5 a:before {background-image:url('../img/main/mbn5_ov.jpg'); }


/*===============================
	Footer Style
===============================*/

#footer {display:table; position:fixed; bottom:0; left:0; z-index:2;width:100%; height:100px; background:#74a6ca;}
#footer:after {display:block; clear:both; content:""}
#footer .ft_logo, #footer .ft_info {display:table-cell; vertical-align:middle;}
#footer .ft_logo {width:280px; text-align:center;}
#footer .ft_info {width:56%; padding-left:30px; text-align:left; font-size:12px; color:#fff;}
#footer .ft_info b {color:#fff;}

#footer .sns {text-align:right; margin-right:40px;}
#footer .sns dd {display:inline-block; margin-top:30px; width:40px;}

/*===============================
	SUB STYLE 
===============================*/

.shtml {height:100%;}
.shtml:before {float:left;content: ''; width: 20%;min-width: 220px;max-width:340px;height:1px;overflow:hidden;}
.shtml body {overflow-x:hidden;}
.shtml body:after {display:block; clear:both; content:""}
.shtml #wrap {position:relative; width:auto; min-width:auto; min-height:100%; height:100%; overflow-x:hidden;overflow-y:auto;/*white-space:nowrap;*/background:#E6F5FD}
.shtml #wrap:after {display:block; clear:both; content:""}
.shtml #header {position:fixed; background:#f4f4f4;}
.shtml #wrap .tnb {position:absolute; top:0; left:0; max-width:1080px; text-align:right; background:none;}
.shtml #wrap .tnb a { color:#333;}
.shtml #footer {position:relative; bottom:0; width:100%; max-width:1080px;}

.shtml #footer .ft_logo {width:250px;}
.shtml #footer .ft_info {width:50%; padding-left:0;}
 
/* svis */ 
.shtml #container {display:inline-block; width:100%; max-width:1080px; min-height:100%; height:auto; padding:70px 15px 0; background:#fff;}
.shtml #container .inner { width:100%; }
.shtml .sbg {position:absolute;z-index:0;display:inline-block;width:40%; max-width:100%;height:100%;
	background: url('../img/common/sbd_bg.jpg') no-repeat left top ;
	background-size:cover;
}

/* 서브 html을 왼쪽으로 밀었으므로 게시판들중 틀어진부분에 대해 다시 잡아줍니다  */
/* #mb_login {margin:-320px 0 0 -430px} /* 로그인 */
/* #find_info {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; margin-left:-280px} /* 회원정보찾기 */
/* #mb_confirm{position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; margin-left:-280px;}
/* #scrap_do {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; margin-left:-280px;} /*스크랩창*/
/* #scrap {position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; margin-left:-280px;}/*스크랩 확인창*/

/* SCROLL TO TOP */
.scroll-up {position: fixed;display: none;z-index: 999;bottom: 1.8em;right: 1.8em;}
.scroll-up ul{margin: 0;padding: 0;}
.scroll-up li{list-style: none;margin: 0;padding: 0;}
.scroll-up a {background-color: #fff;display: block;width: 40px;height: 40px;text-align: center;color:#000; font-size:20px; line-height:38px; box-shadow: 0px 0px 6px #ccc;}
.scroll-up a:hover,.scroll-up a:active {background-color: #f5f5f5;color:#000;}