@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:5; width:100%; background:rgba(255,255,255,0.95);}
#headerWrap .header { position:relative; width:100%; max-width:1240px; height:80px; padding:0 20px; margin:0 auto;}
.header .logo {}
.header .logo a { display:block; position:absolute; top:30px; left:20px; width:60px; height:19px; font-size:0; background:url('../images/common/logo.png') no-repeat; background-size:100%;}
.header .gnb { position:relative; padding-left:20%;}
.header .gnb > ul { display:flex; display:-ms-flex; height:80px; align-items:center;}
.header .gnb > ul > li { margin:0 18px;}
.header .gnb > ul > li:first-child { margin-left:0;}
.header .gnb > ul > li > a { font-size:14px;}
.header .gnb > ul > li.on > a { font-weight:bold;}
.header .btnAll { position:absolute; top:20px; right:20px; width:30px; height:30px; font-size:0;}
.header .btnAll:before { content:''; position:absolute; top:10px; left:0; width:50%; height:3px; background:#111; transition:all .3s ease;}
.header .btnAll:after { content:''; position:absolute; top:20px; left:0; width:100%; height:3px; background:#111;}
.header .btnAll:hover:before {width:100%;}

#headerWrap .sub { display:none;}

#headerWrap.subHeader .header { height:130px;}
#headerWrap.subHeader ~ #container { margin-top:130px;}
#headerWrap.subHeader .sub { display:none; position:absolute; bottom:-50px; left:0%; right:0; padding-left:20%; font-size:0; border-top:1px solid #f2f2f2; border-bottom:1px solid #f2f2f2;}
#headerWrap.subHeader .sub a { position:relative; display:inline-block; line-height:50px; font-size:13px; color:#111;}
#headerWrap.subHeader .sub a + a { margin-left:20px;}
#headerWrap.subHeader .sub a:hover:after,
#headerWrap.subHeader .sub a.on:after { content:''; display:block; position:absolute; bottom:16px; left:0; right:0; height:1px; background:#7b7b7b;}
#headerWrap.subHeader .on > .sub { display:block;}
#headerWrap.subHeader .gnb > ul > li .sub {}
#headerWrap.subHeader .gnb > ul > li:nth-child(2) .sub a:first-child { margin-left:130px;}
#headerWrap.subHeader .gnb > ul > li:last-child .sub a:first-child { margin-left:400px;}

/* btnAll */
.btnAllWrapBox { visibility:hidden; opacity:0;  position:fixed; top:0; left:0; z-index:10; width:100%; height:100%; transition:all .3s ease;}
.btnAllWrapBox .bg { position:absolute; top:0; left:100%; width:100%; height:100%; background:rgba(0,0,0,0.8); transition:all .3s ease .1s;}
.btnAllWrapBox .allBox { position:absolute; top:0; left:100%; overflow-y:auto; width:500px; height:100%; background:#fff; transform:translateX(0%); transition:all .3s ease .3s;}
.btnAllWrapBox .allBox .btnClose { display:block; width:22px; height:22px; margin:57px 0 90px 98px; font-size:0; background:url('../images/common/btn_all_close.png') no-repeat; transition:all .3s ease;}
.btnAllWrapBox .allBox .btnClose:hover { transform:rotate(180deg);}
.btnAllWrapBox .allBox li {  margin-left:98px; text-align:left;}
.btnAllWrapBox .allBox li + li { margin-top:60px;}
.btnAllWrapBox .allBox li > a { font-size:18px; color:#010101; transition:all .3s ease; font-weight:100;}
.btnAllWrapBox .allBox li > a:hover { color:#111;}
.btnAllWrapBox .allBox li .sub { /*display:none; */margin-top:40px; margin-left:15px;}
.btnAllWrapBox .allBox li .sub a { display:block;  font-size:14px; color:#999999; transition:all .3s ease;}
.btnAllWrapBox .allBox li .sub a + a {margin-top:15px;}
.btnAllWrapBox .allBox li .sub a:hover,
.btnAllWrapBox .allBox li .sub a.on { color:#ef7460;}
.btnAllWrapBox .allBox li.on > a { font-weight:bold;}

.btnAllWrapBox.on { opacity:1; visibility:visible;}
.btnAllWrapBox.on .bg { left:0;}
.btnAllWrapBox.on .allBox { transform:translateX(-100%);}

/* ==============================
 * footer
 * ============================== */
#footerWrap {position:relative;}
#footerWrap .btnTop { position:absolute; top:0; right:0; width:91px; height:40px; font-size:0; background:url('../images/common/btnTop.jpg') no-repeat;}
#footerWrap .contactUs { background:#413d46;}
#footerWrap .contactUs h1 { padding:70px 0 40px;; text-align:center; font-size:20px; color:#ffffff; font-weight:normal; line-height:1; text-transform:uppercase; }
#footerWrap .contactUs .phoneEmail { text-align:center;}
#footerWrap .contactUs .phoneEmail a { color:#fff; font-size:14px;}
#footerWrap .contactUs .phoneEmail a + a { margin-left:33px; padding-left:33px; border-left:1px solid #545159;}
#footerWrap .contactUs .phoneEmail a:before { content:''; display:inline-block; width:17px; height:16px; margin-right:14px; vertical-align:middle; background:url('../images/common/icon_p.png') no-repeat; background-size:100%;}
#footerWrap .contactUs .phoneEmail .icon1:before { background-image:url('../images/common/icon_p.png');}
#footerWrap .contactUs .phoneEmail .icon2:before { background-image:url('../images/common/icon_e.png');}
#footerWrap .contactUs .snsLink { padding:40px 0 70px; text-align:center;}
#footerWrap .contactUs .snsLink a { display:inline-block; width:36px; height:36px; vertical-align:middle; font-size:0; background:url('../images/common/icon_p.png') no-repeat; background-size:100%;}
#footerWrap .contactUs .snsLink .f { background-image:url('../images/common/icon_f.png');}
#footerWrap .contactUs .snsLink .t { background-image:url('../images/common/icon_t.png');}
#footerWrap .copy { padding:35px 0 30px; text-align:center; color:#fff; font-size:12px; text-transform:uppercase; background:#181818;}


@media screen and (max-width:1240px) {
	.btnAllWrapBox .allBox {width:400px;}
	.btnAllWrapBox .allBox li + li { margin-top:50px;}
	.btnAllWrapBox .allBox li .sub { margin-top:30px;}
}

@media screen and (max-width:1000px) {
	.header .gnb ul { display:none;}
	#headerWrap.subHeader .header { height:80px;}
	#headerWrap.subHeader ~ #container { margin-top:80px;}
	
	.btnAllWrapBox .allBox {width:300px;}
	.btnAllWrapBox .allBox li { margin-left:70px;}
	.btnAllWrapBox .allBox .btnClose { margin-left:70px;}
}

@media screen and (max-width:768px) {
	#headerWrap .header { height:60px;}
	#headerWrap.subHeader .header { height:60px;}
	#headerWrap.subHeader ~ #container { margin-top:60px;}
	
	.header .logo a { top:50%; width:40px; height:13px; transform:translateY(-50%);}
	.header .btnAll { top:50%; width:20px; transform:translateY(-50%);}
	
	.btnAllWrapBox .allBox {width:250px;}
	.btnAllWrapBox .allBox .btnClose { margin-left:50px; margin-top:25px; margin-bottom:40px;}
	.btnAllWrapBox .allBox li { margin-left:50px;}
	.btnAllWrapBox .allBox li > a { font-size:16px;}
	.btnAllWrapBox .allBox li .sub { margin-top:20px;}
	.btnAllWrapBox .allBox li .sub a { font-size:12px;}
	.btnAllWrapBox .allBox li .sub a + a { margin-top:10px;}
	
	
	#footerWrap .contactUs h1 { padding:35px 0 20px; font-size:15px;}
	#footerWrap .contactUs .phoneEmail a { font-size:12px;}
	#footerWrap .contactUs .phoneEmail a + a { margin-left:12px; padding-left:12px;}
	#footerWrap .contactUs .snsLink { padding:20px 0 35px;}
	#footerWrap .copy { padding:14px 0 15px; font-size:11px;}
}