@charset "utf-8";

body{overflow:inherit; position:relative;}
body.active{overflow:hidden; position:fixed; width:100%;}

/* common */
#content.main p{font-weight:300;font-size:15px;color:#666;line-height: normal;}
#wrap{/* overflow: hidden; */}
.wrapper{position:relative; width:1200px; margin:0 auto;}
::selection{background:#ffd8bc; color:#FFF; text-shadow:none;}
button:active{border:none; outline:none;}
button:focus{outline:0;}

#header.web .gnb > li > ul{display:none;}

/* header */
#header h1{margin-top:45px;}
#header h1 img[src*="mark"]{height: 48px; width: initial;}
#header.web nav{display:inline-flex; margin-top:45px;}
#header .area_all_menu{position:absolute;margin-top: 15px;left:0;}
#header .area_all_menu > img{position: absolute; left: 0; bottom: 72px; height: 64px;}
#header .area_util{position:absolute; bottom:0; right:0; padding:10px 30px; border:1px solid #ddd; border-left:1px solid #ddd;}
#header .area_util > h2{font-weight:500; font-size:30px; color:#222; letter-spacing:-0.5px;}
#header .area_util > ul > li{position:relative; padding:0 8px;}
#header .area_util > ul > li a{display:inline-block; font-weight:500; font-size:16px; color:#222;}
#header .area_util > ul > li:after{content:""; position:absolute; top:50%; margin-top:-6px; right:0; width:1px; height:12px; background:#ccc;}
#header .area_util > ul > li:last-child:after{background:none;}
#header .area_util > ul{margin-top:10px;}
#header .area_util > ul > li img{display:inline-block; margin-right:4px; vertical-align: text-bottom;}
#header .area_util > p{position:absolute; right:0; bottom:100px; font-size:14px; color:#666; text-align:right;}
#header .area_util > p > b{display:block; color:#f89f61;}

/* gnb */
#header.web .gnb{display:inline-flex;}
#header.web .gnb > li{position:relative; padding:0 47px;}
#header.web .gnb > li:after{content:""; position:absolute; top:50%; margin-top:-6px; right:0; width:1px; height:12px; background:#ddd;}
#header.web .gnb > li:last-child:after{background:none;}
#header.web .gnb > li > a{font-size:17px; transition:color 0.2s ease-out 0s;}
#header.web .gnb > li > a:hover{color:#f8a56b;}
#header .btn_all_menu{text-align:right;width:144px;height:50px;background:url(../images/main/icon_all_menu.png) no-repeat 20px 50%;border:1px solid #222;display: block;}
#header .btn_all_menu > p{padding-right:20px;color: #222;font-weight: 400;padding-top: 14px;}

#header .btn_menu{display:none; position:absolute; top:50%; right:15px; z-index:101; width:25px; height:16px; transform:translateY(-50%);}
#header .btn_menu span{opacity:1; display:block; position:relative; right:0px; height:1px; margin:6px 0px; background:#0e0e0e; font-size:0px; transition:all 0.5s ease 0s;}
#header .btn_menu:before,
#header .btn_menu:after{content:''; display:block; width:100%; height:1px; background:#0e0e0e; transition:all 0.5s ease-out 0s;}
#header .btn_menu.active span{opacity:0;}
#header .btn_menu.active:before{background:#fff; transform:rotate(45deg) translate(10px, 5px);}
#header .btn_menu.active:after{background:#fff; transform:rotate(135deg) translate(-5px, 0px);}
#header .btn_close{display:none; position:absolute; top:0px; left:0px; width:35%; height:100%; font-size:0px;}
#header.mob nav{position:fixed; top:0px; right:-100%; z-index:100; width:100%; height:100%; transition:all 0.6s ease 0s;}
#header.mob nav.active{right:0px;}
#header.mob .gnb{position:absolute; top:0px; right:0px; width:65%; height:100%; box-sizing:border-box; padding-top:70px; background:rgba(0,0,0,0.9); transition:all 0.5s ease-out 0s;}
#header.mob .gnb > li a{display:block; border-bottom:1px solid #3a3a3a; text-align:left;}
#header.mob .gnb > li > a{padding:20px 30px; color:#fff; font-size:16px; font-weight:200;}
#header.mob .gnb > li > ul{display:none;}
#header.mob .gnb > li > ul > li > a{padding:15px 37px; font-weight:300; font-size:14px; color:#666;}   
#header.mob nav.active .gnb{box-shadow:-15px 10px 94px 0px rgba(0,0,0,0.35);}

/* footer */
#footer{position:relative;float:left;width:100%;margin-top: 70px;padding:40px 0 90px;background:url(../images/common/img_footer_bg.png) repeat 50% 50%;}
#footer .wrapper > div{float:left;margin-top: 40px;}
#footer .wrapper > img{float:left;}
#footer .wrapper > div > ul{display:block; overflow:hidden; margin-bottom:30px;}
#footer .wrapper > div > ul > li{float:left;}
#footer .wrapper > div > ul > li a{display:inline-block; padding:5px 15px; border-radius:3px; font-weight:200; font-size:14px; color:rgba(255,255,255,0.6);}
#footer .wrapper > div > ul > li:first-child a{background:#1c1d1a;}
#footer .wrapper > div > ul > li a{margin-right:5px; background:#424242;}
#footer .wrapper > div > ul > li:last-child a{background:none; border:1px solid rgba(255,255,255,0.5); color:#fff;}

address{font-size:14px; color:#aaa;}
address b{margin:0 5px 0 12px; font-weight:500; color:#d8d8d8;}
address b:nth-child(1){margin-left:0;}
address + p, address + p a{margin-top:8px;font-size:14px;color: #676767 !important;margin-top: 55px;}
address > ul > li{float:left; margin-right:13px;}
address > ul > li a{display:inline-block; color:#aaa !important;}

.scroll_top{position:absolute; display:inline-block; top:-60px; right:0; width:60px; height:60px; background:#151515; text-align:center; transition:all 0.2s ease-out 0s; cursor:pointer;}
.scroll_top:hover{background:#f89f61;}
.scroll_top img{padding:26px 0;}

/* sub visual */
.area_subVisual{background:url(../images/content/img_sub_visual01.jpg) no-repeat 50% 50%; text-align:left; height:398px; margin:20px auto 0;}
.area_subVisual > div > div > h2{margin-bottom:17px; font-weight:100; font-size:39px; color:#fff;}
.area_subVisual > div > div > p{line-height:1.7; color:#fff;}
.area_subVisual > div{display:table; height:100%;}
.area_subVisual > div > div{display:table-cell; vertical-align:middle;}

/* lnb */
.area_lnb > .wrapper{position:relative; top:-45px; background:#fff; -webkit-box-shadow:1px 35px 68px -17px rgba(0,0,0,0.08); -moz-box-shadow:1px 35px 68px -17px rgba(0,0,0,0.08); box-shadow:1px 35px 68px -17px rgba(0,0,0,0.08); text-align:center;}
.area_lnb > .wrapper > ul{display:inline-flex; padding:23px 0;}
.area_lnb > .wrapper > ul > li > a{font-weight:400; font-size:20px; color:#ddd; transition:all 0.3s ease-out 0s;}
.area_lnb > .wrapper > ul > li:after{content:""; position:absolute; top:50%; right:0; width:4px; height:4px; background:#ddd; border-radius:100px;}
.area_lnb > .wrapper > ul > li{position:relative; padding:0 20px;}
.area_lnb > .wrapper > ul > li:last-child:after{background:none;}
.area_lnb > .wrapper > ul > li:last-child{padding-right:0;}
.area_lnb > .wrapper > ul > li:first-child{padding-left:0;}
.area_lnb > .wrapper > ul > li > .on, .area_lnb > .wrapper > ul > li:hover a{color:#f89f61;}

/* snb */
.area_snb{text-align:center;}
.area_snb > div > ul > li{display:inline-block; margin:0 5px 12px 5px; text-align:center;}
.area_snb > div > ul > li > a{display:block; padding:15px 40px; border:1px solid #ddd; font-weight:300; font-size:16px; color:#888; transition:all 0.2s ease-out 0s;}
.area_snb > div > ul > li > .on, .area_snb > div > ul > li > a:hover{border:1px solid #f89f61; color:#f89f61;}

@media all and (min-width:1680px){
	#header .wrapper,
	.area_visual .wrapper{position:relative; width:1600px; margin:0 auto; text-align:center;}	
}

@media all and (max-width:1680px){
	#header .wrapper,
	.area_visual .wrapper{position: relative;width: 92%;margin: 0 4%;text-align: center;}
	.area_subVisual{position: relative;width: 92%;margin: 20px 4% 0;}
	#header .area_util > h2{font-size:30px;}
	#header .area_util{padding:10px 40px;}
	#header .area_util > p{}
}

#@media all and (max-width:1540px){
#    #header.web nav{margin-right:150px;}
#}

@media all and (max-width:1500px){
	.area_lnb > .wrapper{width:80%; margin:0 auto;}
}

@media all and (max-width:1380px){
	.wrapper{width:92%; margin:0 4%;}
}

@media all and (max-width:1440px){
	#header.web .gnb > li{padding:0 30px;}
	#header .btn_all_menu{width:134px;}
	/*#header .area_util > ul > li a{font-size:14px;}*/
}

@media all and (max-width:1280px){
	#header .btn_menu,
	#header .btn_close{display:block;}
}

@media all and (max-width:1280px){	
	#header .area_util,
	#header .area_all_menu{display:none;}
	#header h1{margin-top:0;}
	#header{padding:20px 0;}
	#footer .wrapper > div{margin-top:40px; margin-left:0; width:100%;}
	
	.area_lnb > .wrapper > ul > li > a{font-size:17px;}
	.area_lnb > .wrapper > ul{padding:20px 0;}

	.area_snb > div > ul > li > a{padding: 15px 25px; font-size: 15px;}
	
	.area_subVisual{position: relative; width: 92%; margin: 0 4%;}
	.area_subVisual > div > div > h2{font-size:30px;}
}

@media all and (max-width:767px){
	body, input, textarea, button, select{font-family:'Maven Pro', Sans-serif;}

	address > ul{overflow:hidden;}
	address > ul > li{margin-bottom:4px;}
	address + p{margin-top:5px;}
	
	.area_lnb > .wrapper > ul > li > a{font-size:17px;}
	.area_lnb > .wrapper{top:-35px;}

	.area_snb > div > ul > li > a{padding:13px; font-size:14px;}
	.area_snb > div > ul > li{margin:0 2px 7px 2px;}
}

@media all and (max-width:640px){
	
	p{font-size:14px;}
	#header h1 img[src*="mark"]{height: 36px;}
	#header h1 > a > img{width:150px;}
	
	.mobile-nav-button{top:31px;}
	
	.area_subVisual{height:248px; background-size:cover;}
	.area_subVisual > div > div > h2{margin-bottom:9px;font-size: 25px;}
	.area_subVisual > div > div > p{font-size:13px;}
	.area_subVisual > div > div{padding-bottom:40px;}
	.area_subVisual .wrapper{width:86%; margin:0 7%;}
	
	.area_lnb > .wrapper > ul{padding:15px 0;}
	.area_lnb > .wrapper{top:-30px;}
	.area_lnb > .wrapper > ul > li > a{font-size:15px;}
	.area_lnb > .wrapper > ul > li{padding:0 15px;}
}

@media all and (max-width:540px){
	#header.mob .gnb{width:100%;}
	#header .btn_close{width:0px;}
}

@media all and (max-width:480px){
	#footer .wrapper > div > ul > li a{margin-right:5px; margin-bottom:5px;}
	
	.scroll_top{width:50px; height:50px;}
	.scroll_top img{width:12px; padding:21px 0;}
	.area_snb > div > ul > li > a{padding:7px;}
}