@charset "utf-8";

/* 공통 */

.show-default {display:block;}
.hide-default {display:none;}

/* skip */
#top_skip {
	display:block;
	background:#fff;
	position:fixed;
	left:0; top:0;
	z-index:99999999;
}
#top_skip a {
	position:relative;
	display:block;
	width:120px;
	line-height:35px;
	text-align:center;
	background:#333;
	color:#fff;
	font-size:12px;
	height:0;
	overflow:hidden;
}
#top_skip a:focus {
	height:35px;
	border:2px solid #005983;
}

/* header */
#header:after {
	content: '';
	display: block;
	position: absolute;
	left: 0; right: 0;
	top: 99px;
	background: rgba(255,255,255,0.2);
	height: 1px;
}
#header.h_fixed:after,
#header.h_hover:after {
	background: #ddd;
}
#header.h_sub .white_bg {
	background: rgba(255,255,255,0.7);
}

.h_wrap { 
	height: 100px; 
	overflow:hidden;
}
#header.h_hover .h_wrap {
	box-shadow: 5px 5px 15px rgba(0,0,0,0.1);
} 
.gsnb_bg {
	position:fixed;
	top:0; left:0; right:0;
	background: #fff;
	height:0;
}

#logo {
	position: absolute;
	top: 0; left: 0;
	display: inline-block;
	padding-top: 29px;
}
#logo a {
	display:block;
	background: url('/image/common/logo.png') no-repeat;
	height: 38px;
	width: 112px;
	background-size: auto 100% !important;
}
#header.h_fixed #logo a,
#header.h_hover #logo a,
#header.h_sub #logo a {
	background: url('/image/common/logo_on.png') no-repeat;
}


/* gnb */
#gnb_wrap {
    padding-left: 340px;
}
	.header_mask { display: none; }
	.h_open .header_mask { displaY: block; }
	#gnb_wrap .m_top {
		height: 100px;
		color: #fff;
		padding: 0 35px;
		position: relative;
		display: none;
	}
	#gnb_wrap .m_top .m_logo {
		padding-top: 29px;
	}

.gnb > li {
	display: inline-block;
	position:relative; 
}
.gnb > li > a {
    display: block;
    font-size: 18px;
    line-height: 100px;
    height: 100px;
    box-sizing: border-box;
    font-weight: 500;
	color: #fff;
	border-bottom: 3px solid transparent;
	position: relative;
    z-index: 9;
	margin-right: 80px;
}
#header.h_fixed .gnb > li > a,
#header.h_hover .gnb > li > a,
#header.h_sub .gnb > li > a {
	color: #000;
}
.gnb > li.active > a {
	color: #8c0a44 !important;
	border-bottom: 3px solid #8c0a44;
}
.gsnb {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
	height: 300px;
	display: none;
}
	#header.h_hover .gsnb {
		display: block;
	}
.gsnb:after {
	content: '';
	display: block;
	clear: both;
}
.gsnb ul {
	box-sizing: border-box;
	padding: 35px 0 10px;
	position: relative;
}
.gsnb ul li {
	padding-bottom: 5px;
	word-break: keep-all;
}
.gsnb ul li a {
	display: block;
	font-size: 16px;
	color: #666;
}
.gsnb ul li a:hover {
	color: #8c0a44;
}

/* gnb btn */
.btn_gnb {
	width: 100px;
    height: 100px;
	position:absolute;
	right:0;
	top:0;
	margin-right:-30px;
	text-indent:-9999999px;
	z-index:999999;
	display:none;
}
.btn_gnb span {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    width: 35px;
    height: 2px;
    margin: 0 auto;
    background: #fff;
}
.btn_gnb span::before,
.btn_gnb span::after {
	display:block;
	content:'';
	width:100%; height:2px;
	position:absolute;
	background:#fff;
	border-radius:2px;
	transition:.2s ease;
	-webkit-transition:.2s ease;
	-moz-transition:.2s ease;
	-o-transition:.2s ease;
}
.btn_gnb span::before {
	left:0; top:0;
	margin-top:-9px;
}
.btn_gnb span::after {
	right:0; bottom:0;
	margin-bottom:-9px;
}
.h_fixed .btn_gnb span,
.h_sub .btn_gnb span {
	background: #000;
}
.h_fixed .btn_gnb span::before,
.h_sub .btn_gnb span::before,
.h_fixed .btn_gnb span::after,
.h_sub .btn_gnb span::after {
	background: #000;
}
.h_open .btn_gnb span {
	background:transparent !important;
}
.h_open .btn_gnb span::before {
	margin-top:0;
	transform:rotate(45deg);
	-webkit-transform:rotate(45deg);
	-moz-transform:rotate(45deg);
	-o-transform:rotate(45deg);
	background:#000;
}
.h_open .btn_gnb span::after {
	margin-bottom:0;
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
	-moz-transform:rotate(-45deg);
	-o-transform:rotate(-45deg);
	background:#000;
}

/* lnb */
.lnb_wrap {
	background: #f9f9f9;
	border-bottom: 1px solid #ddd;
	height: 60px;
}
.lnb {
    display: table;
    table-layout: fixed;
    width: 100%;
}
.lnb li {
	display: table-cell;
	    vertical-align: top;
}
.lnb li a {
	font-size: 18px;
	color: #666;
	height: 60px;
	line-height: 60px;
	text-align: center;
	display: block;
	position: relative;
}
.lnb li.on a {
	color: #fff;
	height: 70px;
    line-height: 70px;
    top: -5px;
    background-color: #8c0a44;
}

.sv {
	height: 400px;
	text-align: center;
	color: #fff;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}
	.sv.K01 { background-image: url('/image/common/sv01.jpg'); }
	.sv.K02 { background-image: url('/image/common/sv02.jpg'); }
	.sv.K03 { background-image: url('/image/common/sv03.jpg'); }
	.sv.K04 { background-image: url('/image/common/sv04.jpg'); }
	.sv.K05 { background-image: url('/image/common/sv05.jpg'); }

.sv .text {
	font-size: 40px;
	padding-top: 220px;
	line-height: 1;
}


/* footer */
#footer {
	background: #34353a;
	padding: 40px 0;
}
.f_logo {
	position: absolute;
	left: 0; top: 0;
} 
#footer .text {
	padding-left: 180px;
	color: #85868b;
	font-size: 14px;
}
#footer .text ul li a {
	font-size: 15px;
	color: #85868b;
}
#footer .text ul li a.wt {
	color: #fff;
}
#footer .text ul li:after,
#footer .text .line span:after {
	content: '';
    background: rgba(255,255,255,0.3);
    width: 1px;
    height: 12px;
    display: inline-block;
    vertical-align: top;
    margin: 7px 10px 0;
}
#footer .text ul li.none:after,
#footer .text .line span.none:after  {
	display: none;
}


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

	#gnb_wrap { padding-left: 200px }
	.gnb > li > a { margin-right: 70px; }

}

/* 타블렛 가로 */
@media all and (max-width:1099px) {
}


/* 타블렛 세로 */
@media all and (max-width:1023px) {
	
	.h_sub .h_wrap {     background: rgba(255,255,255,0.7); }
	/* gnb */
	.btn_gnb {display:block;}
	#gnb_wrap { 
		position:fixed; 
		left: 18%; right: 0;top:0; 
		bottom: 0;
		background:#fff; 
		padding-left: 0;
		z-index: 999;
		text-align: left;
		-moz-transform: translateX(101%);
		-webkit-transform: translateX(101%);
		-o-transform: translateX(101%);
		-ms-transform: translateX(101%);
		transform: translateX(101%);
		-webkit-transition: 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
		-moz-transition: 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
		-ms-transition: 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
		-o-transition: 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
		transition: 0.25s cubic-bezier(0.165,0.84,0.44,1) 0s;
	}
	.h_open #gnb_wrap {
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-o-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}
	#gnb_wrap .m_top { display: block; }
	.gnb_scroll {position:absolute;left:0;top: 100px;right:0;bottom:0;overflow:auto;overflow-scrolling:touch;-webkit-overflow-scrolling:touch;-moz-overflow-scrolling:touch;}
	.gnb {background: #f9f9f9;border-top: 1px solid #ddd;border-bottom: 1px solid #ddd;padding: 30px 0;box-sizing: border-box;height: 500px;position: relative;}
	.gnb > li {display: block;position: static;}
	.gnb > li > a {font-size: 22px;line-height: 60px;height: 60px;padding: 0 35px;color: #000;width: 50%;}
	.gnb > li.active > a {border-bottom: 0;color: #fff !important;background: #8c0a44;}
	.gsnb {display:none;height:auto;left: auto;top: 0;bottom: 0;width: 50%;background: #fff;padding: 30px 0;}
	.gnb li.active .gsnb { displaY: block; }
	.gsnb ul {padding: 0;}
	.gsnb ul li {padding-bottom: 0;}
	.gsnb ul li a {font-size: 18px;line-height: 60px;padding: 0 35px;}

}


/* 타블렛 가로 미만 ~ 모바일 */
@media all and (max-width:767px) {
	
	/* header */
	#header:after { top:74px; }
	.h_wrap { height: 75px; }
	#logo { padding-top: 0; }
	#logo a {box-sizing:Border-box;height: 75px;background-size: auto 32px !important;background-position: left !important; }

	/* gnb */
	.btn_gnb { width: 75px; height: 75px; margin-right: -20px; }
	.btn_gnb span { width: 30px; }
	#gnb_wrap .m_top { padding: 0 25px; }
	#gnb_wrap .m_top .m_logo { padding-top: 22px; }
	#gnb_wrap .m_top .m_logo img { height: 32px; }
	.gnb_scroll {top: 75px;}
	.gnb > li > a { padding: 0 25px; }
	.gsnb ul li a { padding: 0 25px; }
	
	/* lnb */
	.sv { height: 280px; }
	.sv .text { font-size: 32px; padding-top: 160px; }
	.lnb_wrap {height: auto;background: #8c0a44;border-bottom: 0;text-align: center;position: relative;}
	.lnb_wrap .inner {margin: 0;}
	.lnb_tit { line-height: 60px; height: 60px; color: #fff; font-size: 18px; background: url(/image/main/sel_arw.png) no-repeat center right 20px / 15px; }
	.lnb {display: none;position: absolute;top: 100%;left: 0;right: 0; background: #fff; z-index: 99; }
	.lnb.on { display: block; }
	.lnb li { display: block; }
	.lnb li a { line-height: 50px; height: 50px; border-bottom: 1px solid #ddd; }
	.lnb li.on a {background: #fafafa;color: #000;line-height: 50px;height: 50px;top: 0;}

	/* footer */ 
	#footer .text { font-size: 12px; padding-left: 120px; }
}

/* 모바일 상세 */
@media all and (max-width:640px) {
}

/* 모바일 가로 */
@media all and (max-width:568px) {
	
	/* gnb */
	.gnb > li > a { padding: 0 15px; font-size: 16px; line-height: 50px; height: 50px; }
	.gsnb ul li a { padding: 0 15px; font-size: 14px; line-height: 50px; }

	/* lnb */
	.lnb_tit { line-height: 55px; height: 55px;  font-size: 16px;  }
	.lnb li a { line-height: 45px; height: 45px; }
	.lnb li.on a {line-height: 45px;height: 45px;}

	/* footer */ 
	#footer .text { padding-left: 90px; }
	.f_logo img { width: 70px; }

}

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

}

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

}

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

}







/* 공통 */

/* PC이하 ~ 타블렛 가로 */
@media all and (max-width:1199px) {
	.show-1199 {display:block;}
	.hide-1199 {display:none;}
}
/* 타블렛 가로 이하 */
@media all and (max-width:1023px) {
	.show-1023 {display:block;}
	.hide-1023 {display:none;}
}
/* 타블렛 이하 ~ 모바일 */
@media all and (max-width:767px) {
	.show-767 {display:block;}
	.hide-767 {display:none;}
}
/* 모바일 가로 미만 */
@media all and (max-width:568px) {
	.show-568 {display:block;}
	.hide-568 {display:none;}
}
/* 모바일 최소 */
@media all and (max-width:425px) {
	.show-425 {display:block;}
	.hide-425 {display:none;}
}

@media all and (max-width:375px) {
	.show-375 {display:block;}
	.hide-375 {display:none;}
}

@media all and (max-width:320px) {
	.show-320 {display:block;}
	.hide-320 {display:none;}
}

