@charset "utf-8";
/* *******************************************************
 * filename : layout.css
 * description : 전체 레이아웃 CSS
 * date : 2022-03-26
******************************************************** */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600&display=swap'); /* Poppins */
@import url('https://fonts.googleapis.com/css?family=Martel:400,700&display=swap'); /* Martel  */
@import url('https://fonts.googleapis.com/css?family=Crimson+Pro:400,500i&display=swap'); /* Crimson  */


/* layout */
body, table, th, td, button, select, input, textarea {
	font-family: 'Noto Sans KR',  'Malgun Gothic', '맑은 고딕', dotum, '돋움', 'Poppins', sans-serif;
	font-size:13px;
	color:#666;
	-webkit-text-size-adjust:none;
}

body { background-color:#fff; }
#wrap {width:100%; min-width:320px; position:relative; }

.font-martel {font-family:'Martel', 'Noto Sans KR',  'Malgun Gothic', '맑은 고딕', dotum, '돋움', Arial, sans-serif;}
.font-crimson {font-family:'Crimson Pro', 'Noto Sans KR',  'Malgun Gothic', '맑은 고딕', dotum, '돋움', Arial, sans-serif;}
.fs-14 {font-size:14px !important;}
.fs-15 {font-size:15px !important;}
.fs-16 {font-size:16px !important;}
.fs-17 {font-size:17px !important;}
.fs-18 {font-size:18px !important;}
.fs-19 {font-size:19px !important;}
.fs-20 {font-size:20px !important;}
.fc-3 {color:#333 !important}
.fc-6 {color:#666 !important}
.fc-9 {color:#999 !important}
.fc-darkblue {color:#366da1 !important}
.fc-red {color:#e83e3e !important}
.fw-300 {font-weight: 300;}
.fw-400 {font-weight: 400;}
.txtL {text-align: left !important;}
.txtC {text-align: center !important;}
.txtR {text-align: right !important;}
.ml20 {margin-left:20px !important;}
.mt0 {margin-top:0px !important;}
.mt20 {margin-top:20px !important;}
.mt30 {margin-top:30px !important;}
.mt40 {margin-top:40px !important;}
.mt50 {margin-top:50px !important;}
.mb0 {margin-bottom:0px !important}
.mb20 {margin-bottom:20px !important}
.mb30 {margin-bottom:30px !important}
.mb40 {margin-bottom:40px !important}
.mb50 {margin-bottom:50px !important}
.my20 {margin-top: 20px !important;margin-bottom: 20px !important;}
.skip-link { position:absolute; text-align:center; width:200px; display:block; background:#476ff3; color:#fff; left:-9999px; }
.skip-link:hover { z-index:999999; margin-left:-100px; left:50%; }
.skip-link:focus { z-index:999999; margin-left:-100px; left:50%; }
.skip-link:active { z-index:999999; margin-left:-100px; left:50%; }

/* ****************** 공통클래스 ********************** */
.area{ max-width:1304px; margin:0px auto;position:relative} /* width 홈페이지 컨텐츠 가로값에 맞게 변경 */
.d-flex {display: flex;}
.align-center {align-items: center;}
.align-end {align-items: flex-end;}
.align-start {align-items: flex-start}
.justify-between{justify-content: space-between;}
.justify-center{justify-content: center;}
.justify-start {justify-content: flex-start !important;}
.posRel {position:relative;}
span.icon {font-family : xeicon;}
.clearfix{*zoom:1;}
.clearfix:after{clear:both; display:block; content:"";}
.hr {background:#d9d9d9;width:100%;height:1px;}
.blind{overflow:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}
.trans200{-webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
.trans300{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
.trans400{-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s}
.trans500{-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s}
.material-icons{line-height:inherit; color:inherit; vertical-align:middle;}
.text-ellipsis{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.table-layout{display:table; width:100%; height:100%;}
.table-cell-layout{display:table-cell; width:100%; height:100%; vertical-align:middle;}
.over-img{overflow:hidden;}
.over-img img{-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}
a:hover .over-img img{
	-ms-transform: scale(1.1) rotate(0.002deg);
	  -o-transform: scale(1.1) rotate(0.002deg);
	  -moz-transform: scale(1.1) rotate(0.002deg);
	  -webkit-transform: scale(1.1) rotate(0.002deg);
	  transform: scale(1.1) rotate(0.002deg);
}
.line-clamp2{
	overflow:hidden;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.line-clamp3{
	overflow:hidden;
	display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
input:focus{outline:none; border:1px solid #476ff3; border-radius: 6px;}
input[type="radio"],input[type="checkbox"] {border:none; border-radius: 6px; padding:0; height:auto; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;}
input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"] {width:calc(100% - 36px); background:#f7f7f7; border-radius: 6px; -webkit-appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; caret-color:#e81d75;margin:0 5px;}
input[type="number"] {-moz-appearance:textfield;}
input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button {-webkit-appearance:none; margin:0}
input::-ms-reveal, input::-ms-clear {display: none;}
select{padding:0 60px 0 12px; height:48px; font-weight:400; font-size:16px; line-height:48px; color:#000; background: #f7f7f7 url('../images/icn_down_blk_20x20.png') no-repeat right 14px top 50% !important; background-size:20px !important; -webkit-appearance: none; appearance:none; -moz-appearance:none;}
select::-ms-expand{display:none}
select::-ms-value{color:inherit; background:none}
textarea{padding:10px; vertical-align:middle; background:#fff; border:1px solid #d7d7d7; color:#000; font-weight:400; font-size:16px; line-height:22px; letter-spacing:-0.6px; -webkit-appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; border-radius:0; resize:none;outline:0}
input, select{height:50px; vertical-align:middle; background:#f7f7f7; border:1px solid transparent; color:#000; letter-spacing:-0.6px; border-radius:6px; font-weight:400; font-size:16px;width: calc(100% - 10px);margin: 0 5px}
input{padding: 0 12px;}
.radio_box {
    display: inline-block;
    vertical-align: top;
}
.radio_box input[type="radio"]:checked + label:after {
    background: url(../images/radio_icon_on.png) no-repeat center;
    background-size: 24px;
}
.radio_box input[type="radio"] + label:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 24px;
    height: 24px;
    background: url(../images/radio_icon.png) no-repeat center;
    border-radius: 100%;
    background-size: 24px;
}
.radio_box input[type="radio"] {
    width: 24px;
    height: 24px;
}
.radio_box input[type="radio"] {
    display: none;
}

/* ****************** HEADER ********************** */
#header{position:relative;height:96px;width:100%; z-index:99;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;transition:all 0.3s}	/* 배경위에 헤더가있으면 absolute변경 후 headerInnerWrap 배경삭제 */
#headerInnerWrap{position:absolute; top:0px; left:0px; width:100%;  z-index:99;}
#headerInner {
    position: relative;
    margin: 0px auto;
    max-width: 1304px;
    /* padding: 0 15px; */
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: padding 0.3s;
    -moz-transition: padding 0.3s;
    -o-transition: padding 0.3s;
    -ms-transition: padding 0.3s;
    transition: padding 0.3s;
}
#header .logo {
    position: relative;
    z-index: 100;
    float: left;
    padding: 13px 0;
}
#header .logo a {
    color:#000;
	font-size:26px;
	font-weight: 800;
}
.gnb-overlay-bg{display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:97;}
#gnb{position:absolute; text-align:center; top:0; left:0px; width:100%; z-index:99; border-bottom: 1px solid rgba(255,255,255,0.24)}
#gnb > ul{display: flex;align-items: center;justify-content: end;}
#gnb > ul > li{ position:relative; float:left; word-break:keep-all;}
#gnb > ul > li > a{position:relative; z-index:100; display:block; height:96px; line-height:96px; padding:20px 25px 0 25px; text-align:center; color:#B6B6B6; font-size:20px; letter-spacing:-0.55px; font-weight:700; -webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s;}
#gnb > ul > li > a:hover, #gnb > ul > li.on > a{color:#8B8B8B;font-weight:bold}
/* GNB :: 2차 전체메뉴 */
#gnbBg{display:none; position:absolute; left:0; top:100px; width:100%; height:300px; background:#fff; border-bottom:1px solid #ddd; border-top:1px solid #ddd; z-index:98}	/* gnb 2depth BG */
#gnb.total-menu > ul > li .gnb-2dep{
	display:none; 
	position:absolute; 
	top:100px; 
	left:0px; 
	z-index:99;
	width:100%; 
	height:300px;
	text-align:left; 
	border-right:1px solid #ddd;
}
#gnb.total-menu > ul > li:first-child .gnb-2dep{border-left:1px solid #ddd;}
#gnb.total-menu > ul > li .gnb-2dep:before {
	content:""; position:absolute; left:0; top:0px; width:0; left:50%; height:1px; background-color:#f57f20; 
	-webkit-transition:all 0.5s;-moz-transition:all 0.5s;-o-transition:all 0.5s;-ms-transition:all 0.5s;transition:all 0.5s; z-index:10;
}
#gnb.total-menu > ul > li:hover .gnb-2dep:before {width:100%; left:0;}
#gnb.total-menu > ul > li .gnb-2dep ul{padding:13px 0px;}
#gnb.total-menu > ul > li .gnb-2dep ul li{position:relative;}
#gnb.total-menu > ul > li .gnb-2dep ul li a{ display:block;  padding:7px 15px; color:#333; font-size:14px; letter-spacing:-0.5px; font-weight:400; line-height:1.3; -webkit-transition:all 0.2s;-moz-transition:all 0.2s;-o-transition:all 0.2s;-ms-transition:all 0.2s;transition:all 0.2s}
#gnb.total-menu > ul > li .gnb-2dep ul li a:hover{color:#f57f20;}


/* GNB :: 2차 각각메뉴 */
#gnb.each-menu > ul > li .gnb-2dep{
	/* display:none; */
	position:absolute; 
	top:0; 
	left:0px; 
	z-index:99;
	width:100%; 
	text-align:left; 
	visibility:hidden;padding-top:96px;
	opacity:0;filter:Alpha(opacity=0);
}
/* #gnb.each-menu > ul > li .gnb-2dep:before{
	content:""; position:absolute; top:-20px; left:0px; right:0px; height:0; opacity:0;filter:Alpha(opacity=0);  background: linear-gradient( 153deg, #476ff3, #0041c0 );
	-webkit-transition:all 0.4s;-moz-transition:all 0.4s;-o-transition:all 0.4s;-ms-transition:all 0.4s;transition:all 0.4s
} */
#gnb.each-menu > ul > li .gnb-2dep ul{padding:0px 0px 15px 0;}
#gnb.each-menu > ul > li .gnb-2dep ul li{position:relative; padding:8px 20px; opacity:0;filter:Alpha(opacity=0);-webkit-transition:all 0s 0s;-moz-transition:all  0s 0s;-o-transition:all  0s 0s;-ms-transition:all  0s 0s;transition:all  0s 0s; }
#gnb.each-menu > ul > li .gnb-2dep ul li a{ display:block; color:#fff; font-size:15px; font-weight:400;  line-height:1.3; opacity:0.85;filter:Alpha(opacity=85);}
#gnb.each-menu > ul > li .gnb-2dep ul li a:hover{opacity:1.0;filter:Alpha(opacity=100);}
/* over했을때 */
#gnb.each-menu > ul > li:hover .gnb-2dep:before{height:calc(100% + 20px); opacity:1.0;filter:Alpha(opacity=100);}
#gnb.each-menu > ul > li .gnb-2dep.open{visibility:visible; opacity:1.0;filter:Alpha(opacity=100);}
#gnb > ul > li .gnb-2dep.open ul li{opacity:1.0;filter:Alpha(opacity=100); -webkit-transition:all 0.8s;-moz-transition:all 0.8s;-o-transition:all 0.8s;-ms-transition:all 0.8s;transition:all 0.8s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(1){-webkit-transition-delay: 0.1s;-moz-transition-delay: 0.1s;-o-transition-delay: 0.1s;-ms-transition-delay: 0.1s;transition-delay:0.1s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(2){-webkit-transition-delay: 0.2s;-moz-transition-delay: 0.2s;-o-transition-delay: 0.2s;-ms-transition-delay: 0.2s;transition-delay:0.2s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(3){-webkit-transition-delay: 0.3s;-moz-transition-delay: 0.3s;-o-transition-delay: 0.3s;-ms-transition-delay: 0.3s;transition-delay:0.3s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(4){-webkit-transition-delay: 0.4s;-moz-transition-delay: 0.4s;-o-transition-delay: 0.4s;-ms-transition-delay: 0.4s;transition-delay:0.4s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(5){-webkit-transition-delay: 0.5s;-moz-transition-delay: 0.5s;-o-transition-delay: 0.5s;-ms-transition-delay: 0.4s;transition-delay:0.5s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(6){-webkit-transition-delay: 0.6s;-moz-transition-delay: 0.6s;-o-transition-delay: 0.6s;-ms-transition-delay: 0.4s;transition-delay:0.6s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(7){-webkit-transition-delay: 0.7s;-moz-transition-delay: 0.7s;-o-transition-delay: 0.7s;-ms-transition-delay: 0.4s;transition-delay:0.7s;}
#gnb > ul > li .gnb-2dep.open ul li:nth-child(8){-webkit-transition-delay: 0.8s;-moz-transition-delay: 0.8s;-o-transition-delay: 0.8s;-ms-transition-delay: 0.4s;transition-delay:0.8s;}

.nav-open-btn{display:none;}
#gnbM{display:none}

#footer {
    background: #1e1e1e;
    color: #7e7e7e;
    font-size: 14px;
    padding: 14px 20px 33px;
    position: relative;
}
.ft-link{
	padding:20px 0
}
.ft-link a {
	display:inline-block; 
	margin-right:20px; 
	color:#fff;
	position: relative;
	font-size:16px;
}
.ft-link a::after {
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: block;
	width: 1px;
	height: 11px;
	background: #999;
	margin-right: -13px;
}
.ft-link a:last-child:after {
	display: none;
}
.ft-info {
	padding: 48px 0 20px; 
	position:relative;
}
.ft-info p {
	color: #7e7e7e;
	font-size:14px;
	font-weight: 500;
	line-height: 1.2;
}
.ft-info .copy{
	margin:10px 0 0;
}
.ft-info p span{
	color:#666;
}
.ft-info .ftel-cont {
	position: absolute;
	top:65px;
	right: 120px;
}
.ft-info .ftel-cont .ftel{
	color: #bfbfbf;
	font-size: 36px;
	font-weight: 700;
	text-align: right;
}
.ft-info .sns-link {
	position: absolute;
	right:120px;
	top: 35px;
}
.ft-info .sns-link li {
	float: left;
	margin-left: 16px;
}
.ft-info .sns-link li:first-child {
	margin-left: 0;
}
.ft-info .sns-link li a {
	display: block;
	width: 32px;
	height: 32px;
	border-radius: 15px;
	background-repeat: no-repeat;
	background-position: 50% 50%;
	text-indent: -9999px;
}
.ft-info .sns-link li a.facebook {
	background-color: #3d5ba1;
	background-image: url(../images/ico_facebook_small.png);
}
.ft-info .sns-link li a.band {
	background-color: #34aa3d;
	background-image: url(../images/ico_band_small.png);
}
.topBt {
	display:block;
	position:absolute;
	right: 0;
	bottom: 0; 
	width:70px;
	height:70px;
	text-align:center;
	background:#101010;
	border-radius: 50%;
}
.topBt span {
	display:inline-block;
	color:#fff;
	font-size:12px;
	padding:40px 0 0;
	position:relative
}
.topBt span:before {
	display:block;
	content:"";
	width:14px;
	height:14px;
	border:2px solid transparent;
	border-top:2px solid #fff;
	border-left:2px solid #fff;
	position:absolute;
	top:22px;
	left:50%;
	margin-left:-8px;
	transform:rotate(45deg);
	-ms-transform:rotate(45deg)
}







@media (max-width: 1220px) {
	#header, #headerInnerWrap {
		height: 80px;
	}
	#header .logo {
		padding: 27px
	}
	#gnb {
		display: none;
	}
	.nav-open-btn {
		display: block;
		position: absolute;
		top: 24px;
		right: 15px;
		z-index: 9998;
		height: 30px;
		transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		-webkit-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		-oz-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		-ms-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
	}
	.nav-open-btn .line {
		display: block;
		width: 28px;
		height: 3px;
		background-color: #4e4e4e;
		margin: 4px auto;
		-webkit-transition: all 0.3s ease-in-out;
		-o-transition: all 0.3s ease-in-out;
		transition: all 0.3s ease-in-out;
	}
	.nav-open-btn.active .line {
		background-color: #476ff3;
	}
	.nav-open-btn .line.line2 {
		margin-left: -7px;
	}
	.nav-open-btn.active .line:nth-child(1) {
		-webkit-transform: translateY(7px) rotate(45deg);
		-ms-transform: translateY(7px) rotate(45deg);
		-o-transform: translateY(7px) rotate(45deg);
		transform: translateY(7px) rotate(45deg);
	}
	.nav-open-btn.active .line:nth-child(2), .nav-open-btn.active .line:nth-child(4) {
		opacity: 0;
	}
	.nav-open-btn.active .line:nth-child(3) {
		-webkit-transform: translateY(-7px) rotate(-45deg);
		-ms-transform: translateY(-7px) rotate(-45deg);
		-o-transform: translateY(-7px) rotate(-45deg);
		transform: translateY(-7px) rotate(-45deg);
	}
	.gnb-overlay-bg-m {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,0.5);
		z-index: 101;
	}
	#gnbM {
		display: block;
		position: fixed;
		top: 0px;
		right: -82%;
		width: 80%;
		height: 100%;
		max-width: 280px;
		background-color: #fff;
		z-index: 999;
		transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		-webkit-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		-oz-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		-ms-transition: all 0.3s cubic-bezier(0.47, 0, 0.745, 0.715);
		visibility: hidden;
	}
	#gnbM.open {
		right: 0px;
		visibility: visible;
	}
	.gnb-navigation-wrapper {
		position: relative;
		height: 100%;
		box-sizing: border-box;
		padding-top: 80px;
		overflow-y: auto;
	}
	#navigation > li:first-child {
		border-top: 1px solid #e7e7e7;
	}
	#navigation > li {
		border-bottom: 1px solid #e7e7e7;
	}
	#navigation > li > a {
		position: relative;
		display: block;
		padding: 15px;
		color: #4e4e4e;
		font-size: 17px;
		font-weight: 500;
	}
	#navigation > li > a:hover {
		color:#476ff3;
	}	
	#navigation > li .gnb-icon {
		position: absolute;
		top: 50%;
		right: 15px;
		margin-top: -10px;
	}
	#navigation > li .gnb-icon i {
		font-size: 20px;
	}
	#navigation > li .gnb-2dep {
		display: none;
		padding: 15px 0;
		background-color: #476ff3;
	}
	#navigation > li .gnb-2dep > li {
		height: auto !important;
	}
	#navigation > li .gnb-2dep > li > a {
		display: block;
		color: #fff;
		font-size: 14px;
		padding: 12px 15px;
		opacity: 0.7;
		filter: Alpha(opacity=70);
	}
	#navigation > li .gnb-2dep > li > a:hover {
		opacity: 1;
	}
}
@media (max-width: 800px) {
	#header, #headerInnerWrap {
		height: 60px;
	}
	#header .logo {
		padding: 17px 9px;
	}
	.nav-open-btn {
		top: 17px;
		margin-top: 0;
	}
	.nav-open-btn.active {
		top:17px;
	}
	.nav-open-btn .line {
		width: 20px;
		height: 2px;
	}
	.nav-open-btn.active .line:nth-child(1) {
		-webkit-transform: translateY(6px) rotate(45deg);
		-ms-transform: translateY(6px) rotate(45deg);
		-o-transform: translateY(6px) rotate(45deg);
		transform: translateY(6px) rotate(45deg);
	}
	.nav-open-btn.active .line:nth-child(3) {
		-webkit-transform: translateY(-6px) rotate(-45deg);
		-ms-transform: translateY(-6px) rotate(-45deg);
		-o-transform: translateY(-6px) rotate(-45deg);
		transform: translateY(-6px) rotate(-45deg);
	}
	.gnb-navigation-wrapper {
		padding-top: 60px;
	}
	#navigation > li > a {
		font-size: 15px;
	}
}