@charset "utf-8";
/* ********************************************************************************************* 
	@CreateDate	:	2015.03.24																 
 	@ModifyDate	:																			 
 	@Description	:	css reset, common, font, icon, btn style								 
	@Author		:																		 
********************************************************************************************* */
/* ------------------------- RESET   ------------------------- */
	html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
	/*table, caption, tbody, tfoot, thead, tr, th, td,*/
	article, aside, canvas, details, embed,  .footer, header, hgroup, 
	menu, nav, output, ruby, section, summary, time, mark, audio, video {
		margin: 0;
		padding: 0;
		border: 0;
		vertical-align: baseline;
	}
	img, fieldset, form, label, legend, figure, figcaption, input, button {
		margin: 0;
		padding: 0;
		border: 0;
		vertical-align: middle;
	}
	article,aside,details,figcaption,figure, .footer,header,hgroup,menu,nav,section { display:block; }
	button::-moz-focus-inner,
	input[type=button]::-moz-focus-inner,
	input[type=submit]::-moz-focus-inner,
	input[type=reset]::-moz-focus-inner{ padding:0; border:0; }

	body { line-height: 1; }
	ol, ul { list-style: none; }
	blockquote, q { quotes: none; }
	blockquote:before, 
	blockquote:after,
	q:before, 
	q:after { content: ''; content: none; }

	img { vertical-align: top; line-height: 0; font-size: 0; }
	textarea { resize: none;}
	table { width: 100%; border-spacing: 0; border-collapse: separate; border: 0;}
	input, select { font-family: inherit;}
	input[type="text"], input[type="password"], input[type="email"], input[type="search"], input[type="image"], input[type="tel"], select, textarea{ /* -webkit-appearance:none; */ -webkit-border-radius:0;}

/* ------------------------- COMMON ------------------------- */
	html {
		/*font-family: sans-serif;*/
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		overflow-y: scroll;
		}
	
	img.adi { max-width: 100%; height: auto;width:100%;}
	.cadi { text-align: center; }
	.cadi img { max-width: 100%; height: auto; display: inline-block; }
	img.max { width: 100%; height: auto; }
	a { text-decoration: none; color: inherit;}

	/* IE 6/7 .clearfix { zoom: 1; } */
	.ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; display: inline-block; }
	.skip { display: block; height: 1px; width: 1px; margin: 0 -1px -1px 0; padding: 0; overflow: hidden; font-size: 0; line-height: 0; }
	.skip:hover,
	.skip:active,
	.skip:focus { width: 100%; height: auto; margin: 0; padding: 5px 0; text-indent: 10px; font-weight: bold; font-size: 12px; color: #333; font-family: Tahoma; line-height: 1; text-decoration: none !important; position: relative;  text-align: center; }

	caption { font-size: 0; line-height: 0; height: 0; width: 0; }
	a:link { text-decoration: none; color: #333; cursor: pointer;}
	a:visited { text-decoration: none; color: #333; }
	a:hover { text-decoration: none; color: #333;}
	a:active { text-decoration: none; color: #333;}

/* ------------------------- FONT  ------------------------- */
	@font-face {
		font-family: 'NG Reg';
		/*font-style: normal;
		font-weight: 400;*/
		src: url(../font/NanumGothic-Regular.eot);
		src: url(../font/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
		url(../font/NanumGothic-Regular.woff2) format('woff2'),
		url(../font/NanumGothic-Regular.woff) format('woff'),
		url(../font/NanumGothic-Regular.ttf) format('truetype');
		}
	@font-face {
		font-family: 'NG Bold';
		/*font-style: normal;
		font-weight: 700;*/
		src: url(../font/NanumGothic-Bold.eot);
		src: url(../font/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
		url(../font/NanumGothic-Bold.woff2) format('woff2'),
		url(../font/NanumGothic-Bold.woff) format('woff'),
		url(../font/NanumGothic-Bold.ttf) format('truetype');
		}
	@font-face {
		font-family: 'NG ExB';
		/*font-style: normal;
		font-weight: 800;*/
		src: url(../font/NanumGothic-ExtraBold.eot);
		src: url(../font/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
		url(../font/NanumGothic-ExtraBold.woff2) format('woff2'),
		url(../font/NanumGothic-ExtraBold.woff) format('woff'),
		url(../font/NanumGothic-ExtraBold.ttf) format('truetype');
		}
	@font-face {
		font-family: 'NotoSansCJK';
		src: url(../font/NotoSansCJKkr-Regular-Alphabetic.eot);
		src: url(../font/NotoSansCJKkr-Regular-Alphabetic.eot?#iefix) format('embedded-opentype'),
		url(../font/NotoSansCJKkr-Regular-Alphabetic.woff2) format('woff2'),
		url(../font/NotoSansCJKkr-Regular-Alphabetic.woff) format('woff'),
		url(../font/NotoSansCJKkr-Regular-Alphabetic.ttf) format('truetype');
		font-weight: normal;
		font-style: normal;
		}
	h1, h2, h3, h4, h5, h6, big, strong, b, dt, th { 
		font-family: 'NG Bold', Dotum, sans-serif; 
		font-weight: normal; 
		}
	.normal { font-family: 'NG Reg', Dotum, sans-serif; font-weight: normal; }
	body { 
		font-family: 'NG Reg', Dotum, sans-serif; font-weight: normal; 
		}
	@font-face {
		font-family: 'FontAwesome';
		src: url('../font/fontawesome-webfont.eot?v=4.3.0');
		src: url('../font/fontawesome-webfont.eot?#iefix&v=4.3.0') format('embedded-opentype'), 
		url('../font/fontawesome-webfont.woff2?v=4.3.0') format('woff2'), 
		url('../font/fontawesome-webfont.woff?v=4.3.0') format('woff'), 
		url('../font/fontawesome-webfont.ttf?v=4.3.0') format('truetype'), 
		url('../font/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular') format('svg');
		font-weight: normal;
		font-style: normal;
		}
        @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
	.fd { font-family: Dotum, sans-serif; font-style: normal; margin-right: 5px;}	



/* ------------------------- ICON ------------------------- */


/* ------------------------- BODY  ------------------------- */	
	body { 
		font-size: 14px; 
		line-height: 1.5; 
		color: #333;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		}



/* ------------------------- SHOW HIDE & FLUID ------------------------- */
	.hide-sm, .hide-md, .hide-lg { display: block; }
	.hide-xs { display: none; }
	.show-sm, .show-md, .show-lg { display: none; }
	.show-xs { display: block; }
	.untill-xs, .untill-sm { display: block; }
	.untill-md, .untill-lg { display: none; }
	.hidden { position: absolute; left: -9999em; }

/* ############################################################################################# */
/*																								 */
/* 		[XS]	Extra Small Devices, Phones 													 */
/*																								 */
/* ############################################################################################# */
@media only screen and (min-width : 480px) {

/* ------------------------- SHOW HIDE & FLUID ------------------------- */
	.hide-sm, .hide-md, .hide-lg { display: block; }
	.hide-xs { display: none; }
	.show-sm, .show-md, .show-lg { display: none; }
	.show-xs { display: block; }
	.untill-xs, .untill-sm { display: block; }
	.untill-md, .untill-lg { display: none; }

/* ------------------------- Layout ------------------------- */

/* ------------------------- Navigation ------------------------- */


} /* End of @media style */
/* ############################################################################################# */
/*																								 */
/* 		[SM]	Small Devices, Tablets 															 */
/*																								 */
/* ############################################################################################# */
@media only screen and (min-width : 767px) {

/* ------------------------- SHOW HIDE & FLUID ------------------------- */
	.hide-xs, .hide-md, .hide-lg { display: block; }
	.hide-sm { display: none; }
	.show-xs, .show-md, .show-lg { display: none; }
	.show-sm { display: block; }
	.untill-xs, .untill-sm { display: block; }
	.untill-md, .untill-lg { display: none; }

/* ------------------------- Layout ------------------------- */

/* ------------------------- Navigation ------------------------- */


} /* End of @media style */
/* ############################################################################################# */
/*																								 */
/* 		[MD] 	Medium Devices, Desktops 														 */
/*																								 */
/* ############################################################################################# */
@media only screen and (min-width : 1080px) {

/* ------------------------- SHOW HIDE & FLUID ------------------------- */
	.hide-xs, .hide-sm, .hide-lg { display: block; }
	.hide-md { display: none; }
	.show-xs, .show-sn, .show-lg { display: none; }
	.show-md { display: block; }
	.untill-xs, .untill-sm, .untill-md { display: block; }
	.untill-lg { display: none; }

/* ------------------------- Layout ------------------------- */

/* ------------------------- Navigation ------------------------- */



} /* End of @media style */
/* ############################################################################################# */
/*																								 */
/* 		[LG] 	Large Devices, Wide Screens 													 */
/*																								 */
/* ############################################################################################# */
@media only screen and (min-width : 1200px) {
	
/* ------------------------- SHOW HIDE & FLUID ------------------------- */
	.hide-xs, .hide-sm, .hide-md { display: block; }
	.hide-lg { display: none; }
	.show-xs, .show-sn, .show-md { display: none; }
	.show-lg { display: block; }
	.untill-xs, .untill-sm, .untill-md { display: block; }
	.untill-lg { display: none; }

/* ------------------------- Layout ------------------------- */

/* ------------------------- Navigation ------------------------- */



} /* End of @media style */








/* #########################  Print Style  ######################### */
	@media only print {
		nav,
		.nav-wrap,
		.nav,
		.gnb,
		.util, 
		.toggle-menu, 
		.sub-nav, 
		.sns, 
		.breadclumbs,
		.footer,
		#index .toggle-menu.web { display: none; }

		#index nav,
		#index .nav-wrap,
		#index .nav,
		#index .util, 
		#index .toggle-menu, 
		#index .sub-nav, 
		#index .sns, 
		#index .breadclumbs,
		#index .footer { display: block; }

		#index .btn-search { display: none;}

	} /* End of @media style */

/* ######################### Smartphones (portrait and landscape) ######################### */
	@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {

		body { font-family: sans-serif; }
		.mslider-pos { position: relative; left: 50%; margin-left: -320px; width: 600px; }		


	} /* End of @media style */

/* ######################### iPhone 4 ######################### */
	@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {

		body { font-family: sans-serif; }


	} /* End of @media style */

/* ######################### iPads (landscape) ######################### */
	@media only screen and (min-device-width : 767px) and (max-device-width : 1024px) and (orientation : landscape) {

		body { font-family: sans-serif; }


	} /* End of @media style */

/* ######################### iPads portrait	######################### */
	@media only screen and (min-device-width : 767px) and (max-device-width : 1024px) and (orientation : portrait) {
		
		body { font-family: sans-serif; }


	} /* End of @media style */	





  /* 헤더 */
.nav-mo {display: none;}
.nav-wrap.nav-mo {padding: 0;}
.nav-wrap {position: absolute; top: 0; left: 0; width: 100%; z-index: 99;   background: transparent; }
.nav-inner {display: flex; margin: 0 auto; align-items: center !important; justify-content: space-between; height:100px;max-width: 1920px;}


.nav-wrap:after {display: block; content: ""; clear: both;}
.nav-wrap .logo {text-align: left !important; width: fit-content;}
.nav-wrap .logo.xs {width: 50%;}
.nav-wrap .btn_wrap {text-align: center;}
.nav-wrap .btn_wrap a {padding: 10px; background-color: #383c92; color: #fff !important; border-top-left-radius: 20px; border-top-right-radius: 20px; border-bottom-left-radius: 20px; font-weight: bold; font-size: 18px; vertical-align: middle;}
.gnb {display: flex; justify-content: center; align-items: center; gap: 32px; padding: 0; margin-bottom: 0 !important; position: relative;}
.gnb li {list-style: none;}
.gnb_tit { text-align: center; color: white !important; font-weight:500; display: block; font-size: 18px;letter-spacing: -0.18px;}
.gnb_tit.round{border: 1px solid #fff; border-radius: 30px; padding: 8px 20px; display: flex; align-items: center; justify-content: center;}

/* 대메뉴와 소메뉴 사이 여백 추가 */
.gnb > li .depth2 {display: none; position: absolute; top: calc(100% + 20px); left: 0; background-color: rgba(255, 255, 255, 0.9); z-index: 99; border-radius: 30px; text-align: left; width: 525px; padding: 48px; transition: opacity 0.3s ease-in-out, transform 0.2s ease-in-out; opacity: 0; transform: translateY(-5px); pointer-events: none; font-size: 20px;} 

/* 대메뉴 hover 시 소메뉴 나타남 */
.gnb > li:hover .depth2, .gnb > li .depth2:hover {display: block; opacity: 1; transform: translateY(0); pointer-events: auto;}

/* 서브 메뉴 내부 */
.depth2 li {margin-bottom: 18px; display: block;}
.depth2 .gnb_stit {font-weight: bold; font-size: 24px; color: #333 !important; margin-bottom: 30px; }
.depth2 li a {display: block; font-weight: bold; line-height: auto; color: #767676 !important; text-decoration: none; position: relative; transition:ease-in-out 0.3s; }
.depth2>:last-child{margin-bottom: 0;}
/* 마우스 호버 시 효과 */
.depth2 li a:hover {color: #333 !important;}

.nav-wrap.main .scroll {display: none;}
@media screen and (max-width:1920px) {
    .nav-inner { padding: 0 50px;}

}
@media screen and (max-width:1024px) {
    .nav-inner { height: 80px; padding: 0 32px;}
    .gnb{gap: 10px;}
    .gnb_tit{font-size: 16px;font-weight: 500;line-height: 16px; letter-spacing: -0.17px; width: fit-content; padding: 16px 6px;  }
.gnb_tit.round{padding: 10px 18px;}
.gnb > li .depth2 { width: 441px;}

}
@media screen and (max-width:767px) {
.nav-inner { height: 60px; padding: 0 24px;}
.nav-wrap {position:fixed;   top: 0; left: 0; width: 100%; z-index: 99;}
.nav-wrap .logo img {height: 30px;}
.nav-wrap.scrolled {
background: rgba(241, 241, 241, 0.90); }
.nav-wrap.wh.scrolled {background: rgba(255, 255, 255, 0.90);}


.nav-wrap.main.scrolled *{ color:#333 !important; border-color: #333;}
.nav-wrap.main.scrolled  .mobile-menu-btn span { background-color: #333 !important;}
.nav-wrap.main.scrolled .scroll-no {display: none;}
.nav-wrap.main .scroll {display: none;}
.nav-wrap.main.scrolled .scroll {display: block;}
}



.fwb{font-weight: bold !important;}


/*sub_footer*/

footer{background-color: #333333; padding: 160px 0; text-align: center;}
.sub_footer{max-width: 1280px; margin: 0 auto; }
.sub_footer .logo{margin-bottom: 50px;}
.sub_footer p{color:#ccc !important; font-family: 'Pretendard Variable';font-size: 20px;font-weight: 400;line-height: 20px; letter-spacing: -0.2px; margin-top: 10px; border: none !important ;}
.sub_footer p span{font-weight: bold;color:#ccc; margin-left: 16px;}
.sub_footer p span:first-of-type {margin-left: 0;}



@media screen and (max-width:1024px) {
.sub_footer .logo img{max-width: 160px;}
.sub_footer .mo-only{display: block !important;}
.sub_footer p{line-height: 30px;}
}

@media screen and (max-width:767px) {
footer{padding: 118px 24px;}
.sub_footer .logo {margin-bottom: 40px; }
.sub_footer .logo img{max-width: 120px;}
.sub_footer p{font-size: 15px;font-weight: 400;line-height: 22px; margin-top: 20px; }
.sub_footer p span{ margin-left: 10px;}
.sub_footer p span:nth-of-type(3) {margin-left: 0;}
}

.mo_menu_wrap{display:none}
.mo_menu_wrap .mo-round{padding: 8px 16px;font-size: 14px;font-weight: 700;line-height: 14px;color: #fff !important; border: 1px solid #fff;margin-right: 18px; border-radius: 100px; }
.mobile-menu-btn {display: none; position: relative; width: 24px; height: 20px; justify-content: center; align-items: center; background: none; border: none; cursor: pointer; padding: 0; z-index: 999;} 
.mobile-menu-btn span {position: absolute; width: 100%; height: 1.5px; background-color: #ffffff; border-radius: 2px; transition: all 0.3s ease;} 
.page_newsletter .mobile-menu-btn span,.page_webzine .mobile-menu-btn span{background: #000 !important;}
.page_newsletter .mo-round,.page_webzine .mo-round{border-color: #000 !important; color: #000 !important; }

.mobile-menu-btn.bk span {background: black !important;} 
.mobile-menu-btn span:nth-child(1) {top: 0;} 

.mobile-menu-btn span:nth-child(3) {bottom: 0;} 
.mobile-menu-btn.active{}
.mobile-menu-btn.active span:nth-child(1) {transform: rotate(45deg); top: 7.5px; background-color: #000000;} 
.mobile-menu-btn.active span:nth-child(2) {opacity: 0;} 
.mobile-menu-btn.active span:nth-child(3) {transform: rotate(-45deg); bottom: auto; top: 7.5px; background-color: #000000;} 
.mobile-menu {display: none; background: #f1f1f1; position: fixed; top: 0px; left: 0; width: 100%; z-index: 998; height: 100vh; padding-top: 60px;} 
.mobile-menu .logo-mo {height: 60px; display: flex; align-items: center; border-bottom: 1px solid #ddd; padding: 0 24px;} 
.mobile-menu .logo-mo img{height: 30px;}
.mobile-gnb {margin: 10px 24px 0 24px; background: #222; border-radius: 24px; padding: 20px 0;} 

.mobile-gnb > li {list-style: none; padding:0px 24px;} 
.mobile-gnb > li > a {padding: 12px 0; color: #f1f1f1 !important;display: block; color: #f1f1f1; padding:20px 0;font-size: 20px!important;font-weight: 700!important;line-height: 20px!important;letter-spacing: -0.2px;letter-spacing: -0.2px !important;   } 
.mobile-gnb > li span {display: block; color: #f1f1f1; padding:20px 0;font-size: 20px!important;font-weight: 700!important;line-height: 20px!important;letter-spacing: -0.2px;letter-spacing: -0.2px !important; } 



.mobile-gnb a, .accordion-toggle {display: block; width: 100%; font-size: 16px; font-weight: bold; text-align: left; background: none;} 
.accordion-toggle{position: relative;}
.accordion-toggle::before{content: ''; background: url(../image/common/mo_nav_arrow.png); background-repeat: no-repeat; width: 12px; height: 8px; background-size: contain;position: absolute; right: 0;transition: transform 0.3s ease-in-out;  transform: translateY(-50%) rotate(0deg); top:50%; }

.accordion-toggle.active::before {
 transform: translateY(-50%) rotate(180deg);
}
.mobile-gnb .big {font-size: 22px;} 
.accordion-content {max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.6s ease-in-out, opacity 0.4s ease-in-out; padding-left: 0;} 
.accordion-content.open {max-height: 800px; opacity: 1;} 
.accordion-content li {background: #222;} 
.accordion-content li a{ color: #999 !important;font-size: 18px;font-weight: 500;line-height: 18px; letter-spacing: -0.18px;padding: 12px 0; }
.accordion-content li:first-of-type a{padding-top: 0;}
@media screen and (max-width: 767px) { 
.nav-inner .gnb {display: none;} 
.mobile-menu-btn {display: flex;} 
.mo_menu_wrap{display: flex; align-items: center;}

}
.mobile-menu .logo_mo{position: absolute; top:0; height: 60px; display: flex; align-items: center; justify-content: center; left: 24px;}
.mobile-menu .logo_mo img{width: 64px;}
.mobile-menu .nav_mo_round{ top:0; right:66px;height: 60px; display: flex; align-items: center; justify-content: center;position: absolute; width: fit-content;}
.mobile-menu .mo-round2{padding: 8px 16px;font-size: 14px;font-weight: 700;line-height: 14px;color: #222 !important; border: 1px solid #222;; border-radius: 100px; }





#fab_wrap {
  display: none;
}
.fab{cursor: pointer; width: 50px; height: 50px;  position: fixed; bottom:90px; right: 20px;  z-index:5; transition: ease 0.3s; background-color: red; border-radius: 999px; background-position: center;}
.fab::after{content: '';background:url('../image/common/fab.png'); width: 24px; height: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);  display: block;}

.fab:hover {width: 110px; height: 50px; background-color: red;border-radius: 999px; }
.fab:hover::after{  background-image: url('../image/common/fab_h.png'); width: 110px; height: 50px; background-size: cover;}


.top-btn{background:url('../image/common/top_btn.png'); cursor: pointer; ; background-size: contain; background-repeat: no-repeat;width: 50px; height: 50px;  position: fixed; bottom:30px; right: 20px;  z-index:5; }

.top {background:url('../image/common/top_btn.png'); cursor: pointer; ; background-size: contain; background-repeat: no-repeat;width: 50px; height: 50px;  position: fixed; bottom:30px; right: 20px;  z-index:5;}



@media screen and (max-width: 767px) {
.top,.top-btn,.fab{display: none !important;}
}