@charset "utf-8";

@import url('lib/animated.css');
@import url('lib/jquery-ui-1.10.4.custom.min.css');
@import url('lib/swiper.css');

/* ==============================
 * header
 * ============================== */
#headerWrap { position:fixed; top:0; left:0; z-index:50; width:100%; height:80px; border-bottom:1px solid #f2f2f2; background:rgba(255,255,255,0.9)}
#headerWrap .innerBox { height:100%;}
#headerWrap h1 { position:absolute; top:50%; left:20px; transform:translateY(-50%);}
#headerWrap h1 a { display:block; width:89px; height:17px; font-size:0; background:url('../images/common/logo_b.png') no-repeat; background-size:100%;}
#headerWrap .gnbWrap .bg { visibility:hidden; opacity:0; position:fixed; top:80px; left:0; width:100%; height:350px; box-shadow:0 3px 5px rgba(0,0,0,0.1); border-top: 1px solid #e1e1e1; background:rgba(255,255,255,1); transition: all .3s ease;}
#headerWrap .gnbBox { position:absolute; top:50%; left:220px; right:20px; transform:translateY(-50%);}
#headerWrap .gnbBox li { display:block; float:left; margin-right:58px;}
#headerWrap .gnbBox li a { display:block; font-size:14px; color:#111;}
#headerWrap .gnbBox li a.on,
#headerWrap .gnbBox li a:hover { font-weight:bold; text-decoration:underline; letter-spacing: -0.2px;}
#headerWrap .gnbBox li .view { visibility: hidden; position:absolute; top:31px; left:-26px; width:160px; border:1px solid #dddddd; border-radius:9px; background:#fff; transition: all .3s ease; opacity: 0; transform: translateY(20px);}
#headerWrap .gnbBox li .view.on { visibility: visible; opacity:1; transform: translateY(0px);}
#headerWrap .gnbBox li .view a { display:block; padding:10px 25px;}
#headerWrap .gnbBox li .view a + a { border-top:1px solid #ddd;}
#headerWrap .gnbBox .btnDown { position:absolute; top:50%; right:0; padding-right:30px; transform:translateY(-50%); font-size:13px; color:#111; font-weight:bold; background:url('../images/common/icon_header_down_b.png') no-repeat right center;}
 
#headerWrap .btnMenu { overflow:hidden; display:none; position:absolute; right:5px; top:50%; z-index:100; width:50px; height:50px; transform:translateY(-50%); font-size:0;}
#headerWrap .btnMenu span { position:absolute; left:50%; top:50%; width:20px; height:2px; font-size:0; background:#333; transform:translate(-50%, -50%);}
#headerWrap .btnMenu span:after { content:''; display:block; position:absolute; top:-7px; right:0; width:100%; height:2px; background:#333; transition:all .3s ease;}
#headerWrap .btnMenu span:before { content:''; display:block; position:absolute; top:7px; left:0; width:100%; height:2px; background:#333; transition:all .3s ease;}
#headerWrap .btnMenu.on span { background:none; }
#headerWrap .btnMenu.on span:after { top:50%; transform-origin: 50% 50%; transform:translateY(-50%) rotate(45deg); }
#headerWrap .btnMenu.on span:before { top:50%; transform-origin: 50% 50%; transform:translateY(-50%) rotate(-45deg); }

#headerWrap .languageBox { position:absolute; top:-5px; right:200px; width:100px; height:33px; margin-left:59px; border:1px solid #d7d7d7; border-radius:18px; background:#fff;}
#headerWrap .languageBox button { position:relative; width:100%; padding-left:20px; text-align:left; line-height:31px; font-size:14px; color:#001111; font-weight:bold;}
#headerWrap .languageBox button:after { content:''; display:block; position:absolute; top:50%; right:15px; width:8px; height:5px; margin-top:-2.5px; background:url('../images/common/icon_language_arrow.png') no-repeat;}
#headerWrap .languageBox button.on:after { transform:rotate(180deg);}
#headerWrap .languageBox .languageView { display:none; overflow:hidden; position:absolute; top:33px; left:0; width:100%; border:1px solid #d7d7d7; border-radius:15px; background:#fff;}
#headerWrap .languageBox .languageView a { display:block; width:100%; padding:10px 0 10px 20px; font-size:14px; color:#999999;}
#headerWrap .languageBox .languageView a:hover { color:#001111; background:#f3f3f3;}

/* 메인용 헤더 */
.mainWrap #headerWrap {border-bottom:1px solid rgba(255,255,255,0.08); background:none;}
.mainWrap #headerWrap h1 a { background:url('../images/common/logo_w.png') no-repeat; background-size:100%;}
.mainWrap #headerWrap .gnbBox li a { color:#fff;}
.mainWrap #headerWrap .gnbBox li .view { border-color:#464646; background:#15181c;}
.mainWrap #headerWrap .gnbBox li .view a + a { border-color:#464646;}
.mainWrap #headerWrap .gnbBox .btnDown { color:#fff; font-weight:bold; background:url('../images/common/icon_header_down_w.png') no-repeat right center;}

.mainWrap.black #headerWrap {border-bottom:1px solid #f2f2f2; background:rgba(255,255,255,0.3)}
.mainWrap.black #headerWrap h1 a { background:url('../images/common/logo_b.png') no-repeat; background-size:100%;}
.mainWrap.black #headerWrap .gnbBox li a { color:#111;}
.mainWrap.black #headerWrap .gnbBox li .view { border-color:#ddd; background:#fff;}
.mainWrap.black #headerWrap .gnbBox li .view a + a { border-color:#ddd;}
.mainWrap.black #headerWrap .gnbBox .btnDown { color:#111; font-weight:bold; background:url('../images/common/icon_header_down_b.png') no-repeat right center;}
 

/* ==============================
 * footer
 * ============================== */
#footerWrap { position:relative; bottom:0; left:0; width:100%; height:400px; padding-top:125px; background:#1d1d1f;}
#footerWrap .logo { display:block; width:152px; height:50px; font-size:0; 
	background:url('../images/common/footer_logo.gif') no-repeat;
	background:url('../images/common/footer_logo.png') no-repeat;
}
#footerWrap .textBox { position:relative; margin-top:90px;}
#footerWrap .textBox .address { font-size:14px; color:#ffffff;}
#footerWrap .textBox .copy { margin-top:5px; font-size:12px; color:#8a8a8a; text-transform: uppercase;}
#footerWrap .textBox .menu { position:absolute; top:0; right:100px; width:326px;}
#footerWrap .textBox .menu li { float:left; width:33.333%; }
#footerWrap .textBox .menu li a { font-size:12px; color:#ffffff;}
#footerWrap .btnDown { position:absolute; top:-40px; right:20px; padding:10px 30px 10px 0; border-bottom:2px solid #ffffff; font-size:13px; color:#fff; font-weight:bold; background:url('../images/common/icon_header_down_w.png') no-repeat right center;}
#footerWrap .btnTop { position:absolute; bottom:0px; right:20px; width:45px; height:45px; font-size:0; background:url('../images/common/btn_top.png') no-repeat;}

/* 메인용 */
.mainWrap #footerWrap { height:auto !important;}
.mainWrap #footerWrap .fp-tableCell { height:400px !important;}

@media screen and (max-width:1024px) {
	#headerWrap .btnMenu { display:block;}
	
	#headerWrap .gnbWrap { position:fixed; top:0; left:100%; width:100%; height:100%; transition:left .3s ease .15s;}
	#headerWrap .gnbWrap.on { left:0;}
	#headerWrap .gnbWrap .bg { visibility:hidden; opacity:0; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); transition: opacity .3s ease .3s;}
	#headerWrap .gnbWrap.on .bg {visibility: visible; opacity: 1; transition: opacity .3s ease;}
	#headerWrap .gnbBox { top:0; left:auto; right:-100%; width:80%; height:100%; padding:50px 30px 50px; transform:translateY(0); background:#fff; transition: right .3s ease;}
	#headerWrap .gnbBox li { float:none;}
	#headerWrap .gnbBox li a { font-size:20px;}
	#headerWrap .gnbBox li + li { margin-top:20px;}
	#headerWrap .gnbBox li .view { position:static; width:100%; border:0; visibility: visible; opacity:1; transform: translateY(0px); background:none;}
	#headerWrap .gnbBox li .view a { display:block; padding:5px 0 5px 20px; font-size:15px;}
	#headerWrap .gnbBox li .view a + a { border:0;}

	#headerWrap .gnbBox .btnDown { display:block; position:static; margin-top:80px; padding:10px; border:1px solid #111; border-radius:5px; font-size:13px; background-position:95% center;}
	#headerWrap .gnbWrap.on .gnbBox { right:0; transition: right .3s ease .15s;}
	
	#headerWrap .languageBox { top:15px; right:20px; margin-left:0px; margin-top:60px;}

	/* 메인용 헤더 */
	.mainWrap #headerWrap {border-bottom:0;}
	.mainWrap #headerWrap h1 a { background:url('../images/common/logo_w.png') no-repeat; background-size:100%;}
	.mainWrap #headerWrap .gnbBox li a { color:#fff;}
	.mainWrap #headerWrap .btnMenu span { background:#fff;}
	.mainWrap #headerWrap .btnMenu span:before,
	.mainWrap #headerWrap .btnMenu span:after { background:#fff;}
	.mainWrap #headerWrap .btnMenu.on span { background:none;}
	.mainWrap #headerWrap .btnMenu.on span:before,
	.mainWrap #headerWrap .btnMenu.on span:after { background:#111;}
	
	.mainWrap.black #headerWrap .btnMenu span { background:#111;}
	.mainWrap.black #headerWrap .btnMenu span:before,
	.mainWrap.black #headerWrap .btnMenu span:after { background:#111;}
	.mainWrap.black #headerWrap .btnMenu.on span { background:none;}

	.mainWrap #headerWrap .gnbBox li .view,
	.mainWrap.black #headerWrap .gnbBox li .view { position:static; width:100%; border:0; visibility: visible; opacity:1; transform: translateY(0px); background:none;}
	
	.mainWrap #headerWrap .gnbBox li a { color:#111;}
	.mainWrap #headerWrap .gnbBox .btnDown,
	.mainWrap.black #headerWrap .gnbBox .btnDown { color:#111; font-weight:bold; background:url('../images/common/icon_header_down_b.png') no-repeat 95% center;}
	 
	 #footerWrap .textBox { margin-top:50px;}
	 #footerWrap .textBox .menu { overflow:hidden; position:static; width:100%; margin-bottom:50px;}
}

@media screen and (max-width:768px) {
	/*
	 * 대타이틀 : 35
	 * 대타이틀2 : 30
	 * 소타이틀 : 26
	 * 텍스트 : 14 
	 * 간격 : 80(40x2), 60, 50, 30
	 */
	
	#headerWrap h1 { left:30px;}
	#headerWrap .btnMenu { right:15px;}
	
	.mainWrap #headerWrap { background:rgba(0,0,0,0.5)}
	.mainWrap.block #headerWrap { background:rgba(255,255,255,0.5)}
	
	#footerWrap { height:auto; padding-top:60px; transform: translateY(0%);}
	#footerWrap .logo { margin:0 auto 40px;}
	#footerWrap .textBox {margin-top: 0;}
	#footerWrap .textBox .menu {margin-bottom: 150px;}
	#footerWrap .textBox .menu a { font-size:13px;}
	#footerWrap .btnDown {top: 155px;left:30px;right:30px;font-size:13px;}
	#footerWrap .textBox .copy { margin-top:10px; padding-bottom:100px; font-size:13px;}
	#footerWrap .footer-family{z-index: 10;position: absolute;width: calc(100% - 60px);margin: 0;top: 220px;}
		
	.mainWrap #footerWrap .fp-tableCell { height:auto !important;}
}