@charset "utf-8";

/*
css name : component
use : align,display,layout,header,footer,lnb,aside
*/

/* ==================================================
	웹 폰트
================================================== */
@font-face {font-family:nt;font-weight:100;font-style:normal;src:local(※),url(../font/NotoSansCJKkr-Thin.woff) format('woff')}
@font-face {font-family:nt;font-weight:300;font-style:normal;src:local(※),url(../font/NotoSansCJKkr-Light.woff) format('woff')}
@font-face {font-family:nt;font-weight:400;font-style:normal;src:local(※),url(../font/NotoSansCJKkr-Regular.woff) format('woff')}
@font-face {font-family:nt;font-weight:500;font-style:normal;src:local(※),url(../font/NotoSansCJKkr-Medium.woff) format('woff')}
@font-face {font-family:nt;font-weight:700;font-style:normal;src:local(※),url(../font/NotoSansCJKkr-Bold.woff) format('woff')}
@font-face {font-family:nt;font-weight:900;font-style:normal;src:local(※),url(../font/NotoSansCJKkr-Black.woff) format('woff')}
@font-face {font-family:tg;font-weight:400;font-style:normal;src:url(../font/TradeGothicLTStd-BdCn20.eot);src:local(※),url(../font/TradeGothicLTStd-BdCn20.woff) format('woff')}
/* 
@font-face {font-family:nt;font-weight:100;font-style:normal;src:url(../font/NotoSans-Thin.eot);src:local(※),url(../font/NotoSans-Thin.woff) format('woff')}
@font-face {font-family:nt;font-weight:300;font-style:normal;src:url(../font/NotoSans-Light.eot);src:local(※),url(../font/NotoSans-Light.woff) format('woff')}
@font-face {font-family:nt;font-weight:400;font-style:normal;src:url(../font/NotoSans-Regular.eot);src:local(※),url(../font/NotoSans-Regular.woff) format('woff')}
@font-face {font-family:nt;font-weight:500;font-style:normal;src:url(../font/NotoSans-Medium.eot);src:local(※),url(../font/NotoSans-Medium.woff) format('woff')}
@font-face {font-family:nt;font-weight:700;font-style:normal;src:url(../font/NotoSans-Bold.eot);src:local(※),url(../font/NotoSans-Bold.woff) format('woff')}
@font-face {font-family:nt;font-weight:900;font-style:normal;src:url(../font/NotoSans-Black.eot);src:local(※),url(../font/NotoSans-Black.woff) format('woff')}
 */

/* ==================================================
	RESET
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, xmp,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small,
strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form,
label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details,
embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, 
mark, audio, video {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {background-color:#fff;}
ol, ul {list-style:none;}
table {border-collapse:collapse;border-spacing:0;}
th,td {vertical-align:middle;box-sizing:border-box;}
a:link, a:visited, a:hover, a:active {color:inherit;text-decoration:none;}
b,strong {font-weight:700;}
input, textarea, select, button {margin:0;padding:0;font:inherit;}
button {border:0;background:none;outline:none;vertical-align:baseline;cursor:pointer;}
button > span {position:relative;vertical-align:baseline;}
button::-moz-focus-inner, input::-moz-focus-inner {padding:0;border:0;}
button[disabled], input[disabled] {cursor:default;}
textarea {overflow:auto;}
textarea, input {resize:none;}
legend {visibility:hidden; font-size:0;}
audio:not([controls]) {display:none;height:0;}
svg:not(:root){overflow:hidden;}
input[type="text"]::-ms-clear,
input[type="password"]::-ms-clear{display:none;}

input[type="button"],
input[type="reset"],
input[type="submit"]{border-radius:0;-webkit-appearance:button;appearance:button;cursor:pointer;}
button,
textarea,
input[type="text"],
input[type="password"],
input[type="email"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="search"],
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {border-radius:0;-webkit-border-radius:0;appearance:none;-webkit-appearance:none;}
select {-webkit-border-radius:0;}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button{margin:0;-webkit-appearance:none;}
img {max-width:100%;}


/* ==================================================
	공통레이아웃
================================================== */
html,body {width:100%;height:100%;color:#000;font-family:'Noto Sans CJK KR','Noto Sans KR',nt,sans-serif;font-size:12px;font-weight:300;letter-spacing:-.5px;-webkit-text-size-adjust:none;}
#wrap {position:relative;width:100%;min-width:1100px;min-height:100%;}
.inner_align {width:1100px;margin:0 auto;}
.inner_align:after {clear:both;display:block;content:"";}

@media screen and (max-width:767px) {
	#wrap {min-width:auto;}
	.inner_align {width:auto;margin:0 8%;}
}
/* @media screen and (max-width:1276px) {
	#wrap {min-width:auto;}
	.inner_align {width:auto;margin:0 8%;}
} */


/* ==================================================
	header
================================================== */
#header {position:fixed;top:0;left:0;z-index:20;width:100%;background:#fff;
	-webkit-transition:all .5s ease-out;
			transition:all .5s ease-out;
}
.header_wrp {padding:38px 5.2%;}
.header_wrp:after {clear:both;display:block;content:"";}
.header_wrp .logo {float:left;position:relative;z-index:10;width:192px;}
.header_wrp .logo a {display:block;width:100%;height:0;padding-top:19.7%;background:url('../img/common/h1_logo.png') no-repeat;background-size:contain;font-size:0;
	-webkit-transition:all .5s ease-out;
			transition:all .5s ease-out;
}
#gnb {float:right;}
#gnb .btn_gnb {display:none;}
#gnb .gnb_menu {font-size:0;}
#gnb .gnb_menu li {display:inline-block;margin-left:55px;color:#000;font-family:tg,sans-serif;font-size:15px;line-height:38px;letter-spacing:0;vertical-align:top;
	-webkit-transition:all .5s ease-out;
			transition:all .5s ease-out;
}
#gnb .gnb_menu li a {display:block;}
#gnb .gnb_menu li.active {position:relative;color:#4dbeee;
	-webkit-transition:all .5s ease-out;
			transition:all .5s ease-out;
}
#gnb .gnb_menu li.active:after {position:absolute;left:0;bottom:0;width:100%;height:3px;background:#4dbeee;content:"";
	-webkit-transition:all .5s ease-out;
			transition:all .5s ease-out;
}

#header.white {background:transparent;}
#header.white:not(.is_scroll) .header_wrp .logo a {background-image:url('../img/common/h1_logo_w.png');}
#header.white:not(.is_scroll) #gnb .gnb_menu li {color:#fff;}
#header.white:not(.is_scroll) #gnb .gnb_menu li.active {color:#000;}
#header.white:not(.is_scroll) #gnb .gnb_menu li.active:after {background:#000;}

#header.is_scroll {background:#fff;box-shadow:0 7px 27px 6px rgba(0,0,0,.17);}


@media screen and (max-width:840px) {
	#gnb .gnb_menu li {margin-left:40px;}
}

@media screen and (max-width:767px) {
	.header_wrp {padding:12px 15px;}
	.header_wrp .logo {width:132px;}
	#gnb {float:none;}
	#gnb .btn_gnb {position:absolute;top:0;right:0;z-index:10;display:block;width:56px;height:100%;}
	#gnb .btn_gnb span,
	#gnb .btn_gnb span:before,
	#gnb .btn_gnb span:after {position:absolute;height:3px;background:#4dbeee;
		-webkit-transition:all .3s ease-out;
				transition:all .3s ease-out;
	}

	#gnb .btn_gnb span {top:50%;left:15px;width:21px;font-size:0;}
	#gnb .btn_gnb span:before {top:-7px;width:26px;content:"";}
	#gnb .btn_gnb span:after {top:7px;width:15px;content:"";}

	#gnb .gnb_menu {display:none;}
	
	#header.white:not(.is_scroll) .header_wrp .logo a {background-image:url('../img/common/h1_logo.png');}

	#gnb.is-open .gnb_menu {display:block;position:fixed;top:0;left:0;width:100%;height:100%;padding:50.66% 12.6% 0;background:#fff;box-sizing:border-box;}
	#header.white:not(.is_scroll) #gnb.is-open .gnb_menu li,
	#gnb.is-open .gnb_menu li {display:block;margin:0;color:#000;font-size:36px;line-height:50px;letter-spacing:-.5px;}
	#header.white:not(.is_scroll) #gnb.is-open .gnb_menu li.active,
	#gnb.is-open .gnb_menu li.active {color:#4dbeee;}
	#header.white:not(.is_scroll) #gnb.is-open .gnb_menu li.active:after,
	#gnb.is-open .gnb_menu li.active:after {content:none;}

	#gnb.is-open .btn_gnb span {background:transparent;}
	#gnb.is-open .btn_gnb span:before {
		transform:rotate(45deg);
		transform-origin:2px 2px;
	}
	#gnb.is-open .btn_gnb span:after {top:8px;width:26px;
		transform:rotate(-45deg);
		transform-origin:3px 1px;
	}
}

@media screen and (min-width:768px) {

	/* link hover effect */
	.link-hv {position:relative;display:inline-block;padding-bottom:4px;}
	.link-hv:before {position:absolute;left:0;bottom:0;width:100%;height:2px;background:#000;content:"";
		-webkit-transition:transform .3s ease;
				transition:transform .3s ease;
		-webkit-transform:scaleX(0);
			-ms-transform:scaleX(0);
				transform:scaleX(0);
	}
	.link-hv:hover:before {
		-webkit-transform:scaleX(1);
			-ms-transform:scaleX(1);
				transform:scaleX(1);
	}

}


/* ==================================================
	footer
================================================== */
#footer {padding:64px 0 76px;background:#ebebeb;}
#footer .ft_menu {float:left;font-size:0;}
#footer .ft_menu .list {display:inline-block;font-size:10px;line-height:28px;font-weight:400;letter-spacing:0;vertical-align:top;}
#footer .ft_menu .list + .list {margin-left:80px;}
#footer .ft_menu .txt {color:#848484;}
#footer .ft_info {float:right;margin-top:90px;font-size:0;text-align:right;}
#footer .ft_info .logo {display:inline-block;width:88px;height:64px;background:url(../img/common/ft_logo.png) no-repeat;background-size:contain;}
#footer .ft_info .info {margin-top:26px;}
#footer .ft_info .info li {display:inline-block;font-size:10px;font-weight:400;vertical-align:top;}
#footer .ft_info .info li + li:before {margin:0 10px;content:"|";}
#footer .ft_info .copyright {margin-top:10px;font-size:10px;font-weight:400;}

@media screen and (max-width:767px) {
	#footer {padding:50px 0;}
	#footer .ft_menu {display:none;}
	#footer .ft_info {float:none;margin-top:0;text-align:center;}
	#footer .ft_info .logo {width:108px;height:77px;}
	#footer .ft_info .info {margin-top:40px;}
	#footer .ft_info .info li {font-size:12px;line-height:18px;}
	#footer .ft_info .info li:first-of-type {display:block;}
	#footer .ft_info .info li:first-of-type + li:before {content:"";}
	#footer .ft_info .copyright {margin-top:44px;font-size:11px;}
}

/* go to top */
.quick_btn_wrp {display:none;}
.quick_btn_wrp [class^="btn_"] {position:fixed;bottom:40px;z-index:90;}
.quick_btn_wrp [class^="btn_"] a {display:block;width:50px;height:50px;font-size:0;background-repeat:no-repeat;background-size:100%;}
.quick_btn_wrp .btn_top {right:40px;}
.quick_btn_wrp .btn_top a {background-image:url(../img/btn/btn_top.png);}
.quick_btn_wrp .btn_back {display:none;}
.quick_btn_wrp .btn_back a {background-image:url(../img/btn/btn_prev.png);}

@media screen and (max-width:767px) {
	.quick_btn_wrp [class^="btn_"] {bottom:15px;}
	.quick_btn_wrp [class^="btn_"] a {width:40px;height:40px;}
	.quick_btn_wrp .btn_top {right:15px;}
	.quick_btn_wrp .btn_back {display:block;left:15px;}
}


/* ==================================================
	align
================================================== */
.ta-l {text-align:left !important;}
.ta-c {text-align:center !important;}
.ta-r {text-align:right !important;}

.va-t {vertical-align:top !important;}
.va-m {vertical-align:middle !important;}
.va-b {vertical-align:bottom !important;}
.va-bl {vertical-align:baseline !important;}

.block-vm {height:100%;}
.block-vm:before {content:""; display:inline-block; width:0.01%; height:100%; vertical-align:middle;}
.block-vm-inner {display:inline-block; vertical-align:middle}

.trans-xy {top:50%; left:50%; transform:translate(-50%,50%); -webkit-transform:translateX(-50%,50%); -ms-transform:translateX(-50%,50%);}
.trans-x {left:50%; transform:translateX(-50%); -webkit-transform:translateX(-50%); -ms-transform:translateX(-50%);}
.trans-y {top:50%; transform:translateY(-50%); -webkit-transform:translateY(-50%); -ms-transform:translateY(-50%);}


/* ==================================================
	hide & float & clear
================================================== */
.hide {display:none !important;}
.pull-left {float:left;}
.pull-right {float:right;}
.clear:after {display:block; clear:both; content:"";}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.v-hidden {visibility:hidden; overflow:hidden;position:absolute;left:-1000%;top:auto;width:1px;height:1px;}
caption.v-hidden {position:relative;}


/* ==================================================
	transition
================================================== */
.transition-normal {transition:all .3s;-webkit-transition:all .3s;} 
.transition-slow {transition:all 1s;-webkit-transition:all 1s;}


/* ==================================================
	skip
================================================== */
a.skip{display:block;position:absolute;top:-1px;z-index:999;width:0;height:0;overflow:hidden;text-align:center}
a.skip:active,a.skip:focus{z-index:999;width:100%;height:auto;padding:5px;background:#FFF}


/* ==================================================
	margin, padding
================================================== */
.no-margin {margin:0 !important;}
.no-padding {padding:0px !important;}


/* ==================================================
	Font
================================================== */
.fz-10 {font-size:10px;}
.fz-11 {font-size:11px;}
.fz-12 {font-size:12px;}
.fz-13 {font-size:13px;}
.fz-14 {font-size:14px;}
.fz-15 {font-size:15px;}
.fz-16 {font-size:16px;}
.fz-17 {font-size:17px;}
.fz-18 {font-size:18px;}
.fz-20 {font-size:20px;}
.fz-22 {font-size:22px;}
.fz-24 {font-size:24px;}


/* ==================================================
	width
================================================== */
.w20-per {width:20%;}
.w25-per {width:25%;}
.w33-per {width:33.33%;}
.w50-per {width:50%;}
.w66-per {width:66.66%;}
.w75-per {width:75%;}
.w100-per {width:100% !important;}