@charset "utf-8";

/*-----------------------------------------------------------------------------------*/
/*  기본 레이아웃
/*-----------------------------------------------------------------------------------*/

 
/**********************************************************************************
	[media query examples]
	@media (max-width: 575px) { }
	@media (max-width: 767px) { }
	@media (max-width: 991px) { }
	@media (max-width: 1199px) { }

	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
**********************************************************************************/
.container {max-width:1400px;margin:0 auto;position:relative;}
.container-full {width:100%;position:relative;}

@media (max-width: 1200px) {
	.container {width:100%;padding-left:15px;padding-right:15px;}
}


#contentWrap {position: relative;width: 100%;padding-top: 185px;}

@media (max-width: 1199px){
	#contentWrap {padding-top: 70px;}
}

/*-----------------------------------------------------------------------------------*/
/*  header
/*-----------------------------------------------------------------------------------*/


.topNav{width:100%;height:40px;}
.topNav ul {margin-right:70px}
.topNav ul li{position:relative;display:inline-block;font-size:.9rem;padding:12px 10px;}
.topNav ul li:after{position: absolute;top: 15px;right: -2px;width: 1px;height: 10px;background-color: #c7c7c7;display: block;content: '';}
.topNav ul li:last-child:after{display: none;}
.topNav ul li.social {padding:10px 5px;}
.topNav ul li.social img{width:18px;height:auto;}
.topNav ul li.social span{display:block;width:30px;height:30px;border-radius:15px;background-color:#516754;font-size:.9rem;padding:6px 3px;color: #fff;text-align: center;}
.topNav ul li.social span a{color:#fff;font-size:.9rem;}

.topNav ul li a{color:#fff;}

@media (min-width: 1200px) {
	#header {position:absolute;top:0;left:0;width:100%;height: 130px; text-align: right; z-index: 10; }
	#header .headerMenu { position: relative; height: 105px; overflow: hidden; background-color: rgba(0,0,0,0.4); transition: 0.5s height cubic-bezier(0.65, 0.24, 0.21, 0.99), 2s box-shadow cubic-bezier(0.45, 0.07, 0.2, 0.99), 0.5s background-color cubic-bezier(0.22, 0.36, 0, 0.99); }
	#header:hover .headerMenu { height: 350px; box-shadow: 0px 40px 40px 0px rgba(0,0,0,0.15);   }

	#header .headerMenu .bg {opacity: 0;width: 100%;max-width: 1400px;height: 250px;z-index: -1;margin: 0 auto;}
	#header:hover .headerMenu .bg { opacity: 1; }
	#header .headerMenu .bg0 { left: 0; }
	#header .headerMenu .bg1 { right: 0; top: 101px; }

	#header .logo { position: absolute; left: 0; top: -20px }
	#header .logo img{width:230px;}


	.gnb { display: inline-block; margin: 20px 0 0 0; }
	/* depth1 */
	.gnb .depth1>li { float: left; position: relative;min-width: 150px;}
	.gnb .depth1>li.long {width: 160px;}
	.gnb .depth1>li>a { display: block; margin: 0 ; color: #fff; font-size: 1.1rem;text-align: left;transition: 0.5s color cubic-bezier(0.21, 0.03, 0, 1);     font-weight: 400;}
	.gnb .depth1>li.select>a { color: #42afff;}

	/* depth2 */
	.gnb .depth1>li .depth2 { position: absolute; width: 100%; margin-top: 20px; }
	.gnb .depth1>li .depth2>li { position: relative; display: block; text-align: left;min-width: 130px;}
	.gnb .depth1>li .depth2>li>a { display: inline-block; font-weight:400;position: relative; padding:4px 0; color: #fff; font-size: 1rem; }
	.gnb .depth1>li .depth2>li.on>a,
	.gnb .depth1>li .depth2>li>a:hover { color: #fff; text-decoration:underline;}


}

/* Header_Mobile */
header .nav .nav-icon{display:none;}
header .nav .nav-icon div {color:#1b4c8e;font-size:2rem;}
header .nav .nav-icon.active:after,header .nav .nav-icon.active:before,header .nav .nav-icon.active div {background-color: #000;content: '';display: block;height: 3px;margin: 5px 0;-moz-transition: all .2s ease-in-out;-webkit-transition: all .2s ease-in-out;transition: all .2s ease-in-out;text-indent:-100px;overflow:hidden;}
header .nav .nav-icon.active:before {margin-top:0;}
header .nav .nav-icon.active:after {margin-bottom:0;}
header .nav .nav-icon.active:before {transform: translateY(10px) rotate(135deg);-moz-transform: translateY(10px) rotate(135deg);-webkit-transform: translateY(10px) rotate(135deg);}
header .nav .nav-icon.active:after {transform: translateY(-6px) rotate(-135deg);-moz-transform: translateY(-6px) rotate(-135deg);-webkit-transform: translateY(-6px) rotate(-135deg);}
header .nav .nav-icon.active:after,header .nav .nav-icon.active:before,header .nav .nav-icon.active div {background: #fff;}
header .nav .nav-icon.active div {-moz-transform: scale(0);-webkit-transform: scale(0);transform: scale(0);}


.headerMenu { width: 100%; z-index: 99; background: #fff; }
.headerMenu.m_ver { display: none; }
.headerMenu>.container { height: 65px; }
.headerMenu .eng-icon{position: absolute;right:10px;top:10px;text-align:center;font-size:.9rem;width:40px;color: #66857d;height: 40px;line-height: 40px;border: 1px solid #d2dcd9;border-radius: 100%;background: #d2dcd9;}

.headerMenu .navbar { font-size: 0; text-align: center; }
.headerMenu .navbar>li { display: inline-block; padding: 0 35px; font-size: 18px; font-weight: 500; letter-spacing: -0.25px; color: #111; }
.headerMenu .navbar>li .sub-menu { display: none; }


@media (max-width: 1199px) {
	.sec-header{ display:none;}
	header .nav .nav-icon {display: inline-block;width: 50px;cursor:pointer;position:absolute;right: 5px;top: 13px;z-index:100;text-align: center;border-radius: 5px;height:35px;}
	header .nav .nav-icon.active {width: 33px;padding: 0;top:15px;right: 10px;left: auto;position: fixed;}
	header .nav .layer-box {position:fixed;width: 100%;height:100%;right:-100%;padding:0;;background:#fff;z-index:99;-webkit-transition: all 0.5s ease;-moz-transition: all 0.5s ease;-o-transition: all 0.5s ease;-ms-transition: all 0.5s ease;transition: all 0.5s ease;margin:0;overflow-y: auto;}

	header .nav .layer-box.active {right:0;top:0;}
	.headerMenu.m_ver .logo {height: 55px;position: static;top: auto;left: auto;width: 100%;margin:0;padding-top: 5px}
	.headerMenu.m_ver .logo img {max-width:100%;max-height:100%;}
	.headerMenu.pc_ver { display: none; }
	.headerMenu.m_ver { display: block; }
	.headerMenu .navbar { padding: 10px 0 0; }
	.headerMenu .navbar>li { display: block; text-align: left; padding:0 0 10px 0; margin: 0; border-bottom: 1px solid #ededed; font-size: 19px; font-weight: 700; }
	.headerMenu .navbar>li>a { padding: 10px 20px; line-height: normal; display: block; position: relative; }
	.headerMenu.m_ver .navbar .support-bt { background: #3db5b6; color: #fff; margin-left: 15px; padding: 0 20px; line-height: 40px;  }
	.headerMenu .navbar .sub-menu { background: #f9f9f9; font-size: 0; }
	.headerMenu .navbar .sub-menu li { line-height: 36px; font-size: 14px; }
	.headerMenu .navbar>li>.sub-menu { padding:15px 20px; }
	.headerMenu .navbar>li>.sub-menu>li { margin-bottom: 0; width:100%; display:block; }
	.headerMenu .navbar>li.holt-menu>.sub-menu>li { width: 100%; display: block; }
	.headerMenu .navbar>li>.sub-menu>li.menu-item-has-ktl { margin-bottom: 10px; }
	.headerMenu .navbar>li>.sub-menu>li>a { font-size: 15px; font-weight: 500; letter-spacing: -1px; }
	.headerMenu .navbar .sub-menu>li:last-child { margin-bottom: 0; }
	.headerMenu .navbar>li.menu-item-has-ktl { padding-bottom: 0; }
	.headerMenu .navbar>li.menu-item-has-ktl>a:before {width: 16px;height: 9px;margin-top: -4.5px;position: absolute;right: 16px;top: 15px;font-family: 'themify';background-size: contain;content: "\e64b";}
	.headerMenu .navbar>li.menu-item-has-ktl.active>a:before { background-image: url(../images/nav-on.png); }
	.headerMenu.m_ver .navbar li .sub-menu li>.sub-menu { display: block !important; }
	.headerMenu.m_ver .navbar .sub-menu li>.sub-menu { font-size: 0; border: 1px solid #e8e8e8; border-bottom: 0; }
	.headerMenu.m_ver .navbar .sub-menu li>.sub-menu>li { display: inline-block; width: 33.333%; padding: 0; text-align: center; vertical-align: top; border-right: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8; font-size: 15px; font-weight: 400; color: #555; letter-spacing: -1px; }
	.headerMenu.m_ver .navbar .sub-menu .menu-item-has-ktl>a { font-size: 17px; font-weight: 500; letter-spacing: -1px; }
	

	 /* 모바일메뉴 상단 */
	.headerMenu.m_ver .top-box { padding:10px 0 0; background:#1b4c8e;}
	.headerMenu.m_ver .top-box .logoM{height:50px;margin:0 0 20px 20px;display:block;}
	.headerMenu.m_ver .top-box ul li{display:inline-block;width:32%;padding:10px 15px;height:auto;text-align: center;font-size: 1.1rem;}
	.headerMenu.m_ver .top-box ul li a{color:#fff;}
	.headerMenu.m_ver .top-box i{padding-right:5px;}
	.bg-banner { display: none; }
}

@media (max-width: 767px) {
	html { font-size: 87.5%; }
	.headerMenu.m_ver >.container { height: 65px; }
	.headerMenu .topbar { height: 34px; }
	.headerMenu .topbar ul li { line-height: 34px; }
	.headerMenu .topbar ul li{ font-size: 12px; }
}
@media (max-width: 575px) {
	.headerMenu.m_ver >.container {height: 60px;}
	.headerMenu.m_ver .logo { height:50px;}
}



	
/*-----------------------------------------------------------------------------------*/
/*  footer
/*-----------------------------------------------------------------------------------*/


	.footer_wrap{position:relative;width:100%;background-color:#003861;border-bottom:30px solid #323232;}
	.footer_wrap:after{position:absolute;bottom:0;left:0;width:100%;height:1px;background-color:#888;content:'';display:block;}
	.footer_wrap .footer{position:relative;max-width:1300px;margin:0 auto;color:#fff;padding:25px 0 60px 240px;background:url(/logo.png) no-repeat 0 40px;background-size:200px;}

	.footer_wrap .linkBox{width:100%;border-bottom:1px solid #B8B8B8; padding:15px 0;margin-bottom:20px;}
	.footer_wrap .linkBox .f_menu{position:relative;}
	.footer_wrap .linkBox .f_menu ul.menuF li{display:inline;margin:0 20px 0 0;padding:0 20px 0 0;font-size:1rem;}
	.footer_wrap .linkBox .f_menu ul.menuF li.last{border-right:none;}
	.footer_wrap .linkBox .f_menu ul.menuF li a{color:#cccdd1;} 

	.footer_wrap .footer .adress {font-size:.8rem;line-height:19px;font-style: normal;z-index:0;color:#b9bbc5}
	.footer_wrap .footer .adress strong{display:block;font-size:1rem;margin-bottom:10px;color:#fff;font-weight:500;}
	.footer_wrap .footer .adress p{font-size:.9rem;margin-bottom:5px;color:#b8b8b7;font-weight:400;}
	.footer_wrap .footer .adress span{display:block;font-size:.8rem;color:#b8b8b7;font-weight:400;}

	.footer_wrap .familysite li{display:inline-block;padding-right:15px;margin-top:20px;}

	.footer_wrap .sitemap{position:absolute;top:40px;right:10px;color:#D1D1D1;display: flex;flex-flow: row wrap;}
	.footer_wrap .sitemap h5{width:100%;font-size: 1.2rem; margin-bottom: 25px;font-weight:400;color:#fff;}
	.footer_wrap .sitemap ul{width:90px;}

	.footer_wrap .sitemap ul li{font-size: .8rem;color:#fff;line-height:1.5;}
	.footer_wrap .sitemap ul li a{color:#fff;font-weight:300;}



	@media  (max-width: 1024px) { 
			.footer_wrap .linkBox{min-width:100%;}
			.footer_wrap .linkBox .f_menu,.footerBox{width:100%;}

			.footer_wrap .linkBox{width:100%;min-width:100%;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
			.footer_wrap .linkBox .f_menu ul.menuF li{display:inline-block;margin:0 5px 0 0;padding:0 5px 0 0;}
			.footer_wrap .linkBox .f_menu ul.menuF li.last{border-right:none;}
			.footer_wrap .linkBox .f_menu ul.menuF li a{color:#cccdd1;}

	}

	@media (max-width: 960px) {
			.footer_wrap .linkBox{border-top: 1px solid #B8B8B8;padding: 15px 0;}
			.footer_wrap {}
			.footer_wrap .footer{background:none;width:100%;margin:0;padding:2rem 1.5rem;}
			.footer_wrap .sitemap{position:static;top:auto;right:0;padding:0;}
			.footer_wrap .sitemap h5{margin:0  0 15px;font-size:1.7rem;}
			.footer_wrap .sitemap ul{width:25%;height:auto;margin-bottom:30px;}
			.footer_wrap .sitemap ul li{font-size: 1.1rem;color:#fff;line-height:1.5;}
			.footer_wrap .linkBox .f_menu ul.menuF li a{font-size:1.3rem;}

	}

	@media (max-width: 767px) {
		.footer_wrap .sitemap ul{width:33.3%;}
		.footer_wrap .sitemap ul li a{font-size:1.2rem;}
		.footer_wrap .footer .adress strong{font-size:1.2rem;}
		.footer_wrap .footer .adress p{font-size:1.1rem;}
		.footer_wrap .footer .adress span{font-size:1rem;}

	}

	@media (max-width: 640px) {
			.linkBox .f_menu ul.menuF li{width:48%;margin:0;padding:0;text-align:center;border:none;line-height:2rem;}

	}
	@media (max-width: 480px) {
			.footer_wrap .footer .footerTop ul li{width:100%;height:100px;padding-bottom:20px;border-right:none;border-bottom:1px solid #fff;}
			.footer_wrap .footer .footerTop ul li.last{border:none;}

	}



	@media only screen and (max-width: 375px) { 
			.linkBox .f_menu ul.menuF li{width:100%;padding:5px 0;}

	}





/*위로가기*/

#m7-go-top {z-index: 100;position: fixed; overflow: hidden; text-align: center;width: 50px; height: 50px; line-height: 50px; background: #fff; 	-webkit-border-radius: 10px; 	-moz-border-radius: 10px; 	border-radius: 10px;box-shadow: 0 1px 12px rgba(0,0,0,.1);background-clip: padding-box; 	right: 50px; bottom: 50px; font-size: 20px; -moz-opacity: 1; -khtml-opacity: 1; opacity: 1; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } 
#m7-go-top:hover {-moz-opacity: 1; -khtml-opacity: 1; opacity: 1;background: #4880ee;}
#m7-go-top a { display: block; text-decoration: none; position: relative; height: 100%; color: #4880ee;-webkit-transition: background-color 200ms linear; -moz-transition: background-color 200ms linear; -o-transition: background-color 200ms linear; -ms-transition: background-color 200ms linear; transition: background-color 200ms linear; } 
#m7-go-top a:hover {color: #ffffff;} 
#m7-go-top a span {font-size: 20px;font-weight:bold;display: block;margin-top:0;} 
#m7-go-top a img { display: block; position: absolute; top: 0px; left: 0px; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } 
#m7-go-top a img + img { position: absolute; top: 0px; left: 0px; -moz-opacity: 0; -khtml-opacity: 0; opacity: 0; -webkit-transition: all 300ms linear; -moz-transition: all 300ms linear; -o-transition: all 300ms linear; -ms-transition: all 300ms linear; transition: all 300ms linear; } 
#m7-go-top:hover a img[data-hover-image='true'] {-moz-opacity: 0;-khtml-opacity: 0;opacity: 0;} 
#m7-go-top:hover a img[data-hover-image='true'] + img {-moz-opacity: 1;-khtml-opacity: 1;opacity: 1;}
@media screen and (min-width:320px) and (max-width:960px) {
#m7-go-top {right: 15px; bottom: 15px;}
}
@media only screen and (min-width: 320px) and (max-width: 480px) {
#m7-go-top {right: 15px; bottom: 15px;}
}