@charset "utf-8";

/* common */
::selection{background:rgba(156,23,23,0.7); color:#fff;}
body{font-size:16px; word-break:keep-all;}
th[data-view="file"] + td ul li a{line-height:1em;}

.wrap{width:1200px; margin:0 auto;}

a.btn_basic{display:inline-block;padding:23px 72px;border:1px solid #c1c1c1;font-weight:800;font-size: 14px;color:#aaa;transition:all 0.4s ease-out 0s;text-transform:uppercase;}
a.btn_basic:hover{box-shadow:6px 7px 29px 0px rgba(203,25,25,0.1); color:#cb1919; border-color:#cb1919;}
a.btn_basic.cancle:hover{box-shadow:6px 7px 29px 0px rgba(0, 0, 0, 0.05); color:#aaa; border-color:#ababab;}

/* header */
.main #header{border-color:rgba(255,255,255,0.4);}
#header .area_util ul li.active a{opacity:1; background:rgba(255,255,255,0.2);}
#header{position:absolute;top:0;left:0;z-index:9999;width:100%;padding: 17px 0;border-bottom:1px solid #eee;text-align:center;}

#header h1{position:absolute; top:50%; left:0; width:360px; margin-top:-15px; text-align:left;}
#header h1 a{display:block;}
#header h1 img{height:32px;}
#header h1 em{position:relative; width: 50%; line-height:1.4; padding-left:40px; font-weight:500; font-size:13px; color:#fff; text-align:left;}
#header a > *{float:left;}
#header h1 em i{display:block; opacity:0.7; font-weight:400;}
#header h1 em:before{content:""; position:absolute; opacity:0.3; top:0; left:20px; width:1px; height:100%; background:#fff;}
:lang(en) #header h1 em{margin-top: -10px;}

#header .area_util ul li{float:left;}
#header .area_util ul li a{display:block; opacity:0.6; padding:4px 20px; font-weight:900; font-size:14px; color:#fff; border-radius:100px;}
#header .area_util{position:absolute; top:50%; right:0; margin-top:-15px;}

#header .btn_menu{display:none;}
#header .btn_menu{position:absolute;top: -13px;right:0;z-index:9999;width:23px;height:24px;font-size:0px;transition:all 0.3s ease 0s;}
#header .btn_menu > span{display:block;position:absolute;left:0px;width:100%;height:2px;background: #FFF;}
#header .btn_menu > span:nth-of-type(1){top:5px;}
#header .btn_menu > span:nth-of-type(2){top:50%;margin-top:-1px;transition:background 0.3s ease 0s;}
#header .btn_menu > span:nth-of-type(3){top:17px;}
#header .btn_menu > span:nth-of-type(1),
#header .btn_menu > span:nth-of-type(3){transition:all 0.3s ease;transition-property:top, transform;transition-delay:0.3s, 0s;}
#header .btn_menu.active{position:fixed;top:25px;transform:rotate(180deg);right: 20px;}
#header .btn_menu.active > span:nth-of-type(1){top:10px; transform:rotate(-45deg);}
#header .btn_menu.active > span:nth-of-type(2){background:transparent;}
#header .btn_menu.active > span:nth-of-type(3){top:10px; transform:rotate(45deg);}
#header .btn_menu.active > span:nth-of-type(1),
#header .btn_menu.active > span:nth-of-type(3){transition-delay:0s, 0.3s;background: #000;}
#header .btn_close{position:fixed; opacity:0; visibility:hidden; top:0px; left:0px; z-index:99; width:-webkit-calc(100% - 320px); width:100%; height:-webkit-calc(100vh - -0px * 1); height:calc(100vh - -0px * 1); background:#000; font-size:0; transition:all 0.3s ease-out 0s;}
.active #header .btn_close{opacity:0.4; visibility:visible;}

#header nav{display:inline-block; position:relative; top:11px;}
#header nav .gnb{text-align:center;}
#header nav .gnb > li{display:inline-block; position:relative; padding:0 37px;}
#header nav .gnb > li:last-child:after{background:none;}
#header nav .gnb > li > a{display:inline-block; padding-bottom:25px; font-size:19px; color:#fff; transition:all 0.4s ease-out 0s;}
#header nav .gnb > li:nth-child(3) > a{font-size:21px;}
#header nav .gnb > li:hover > a{opacity:0.6;}
#header nav .gnb > li:hover > a.on{opacity:1;}
#header nav .gnb > li > a.on,
.sub #header nav .gnb > li > a.on{color:#cb1919;}

#header .inr{position:relative; margin:0 100px;}
#header .box_contact{position:absolute;top: 74px;right:0;padding:23px 27px 23px 48px;background:rgba(255,255,255,0.1);border:1px solid rgba(255,255,255,0.3);border-top:0;z-index: 1;}
#header .box_contact,
#header .box_contact a{color:#fff;}
#header .box_contact div *{display:block; text-align:left;}
#header .box_contact div a{position:relative; line-height:1; font-weight:900; font-size:24px;}
#header .box_contact div i{opacity:0.9; line-height:1; margin-bottom:6px; font-weight:300; font-size:13px;}
#header .box_contact div a:before{content:"";position:absolute;top:4px;left:-22px;width:18px;height:18px;background:url(../images/common/icon_call.svg) no-repeat 50% 50%;z-index: 50;}

/* footer */
#footer{position:relative; float:left; width:100%; background:#242424; color:#fff;}
#footer .inr{width:1660px;}
#footer address b{opacity:0.75; padding:0 5px 0 0; font-weight:300; font-size:14px; color:#888;}
#footer address span{padding:0 10px 0 0;}
#footer address span,
#footer address a{opacity:0.75; line-height:1.8em; font-weight:200; color:#fff;}
#footer address span.dhm{font-weight:600; color:#cb1919;}

#footer .logo{display:inline-block; opacity:0.35; padding-top:14px; vertical-align:top;}
#footer .logo img{height:32px; vertical-align:middle;}
#footer .top_footer{padding:44px 0 30px; border-bottom:1px solid #323232;}
#footer .btm_footer{padding:30px 0 50px;}
#footer .btm_footer:after{content:''; display:block; clear:both;}
#footer .btm_footer p{float:left; opacity:0.2; font-weight:200; font-size:14px; color:#fff;}

#footer .link{float:right;}
#footer .link > li{display:inline-block; margin:0 0 0 5px; border:1px solid #424242; border-radius:2px;}
#footer .link > li:last-child{background:#3a3a3a; border:1px solid #565656;}
#footer .link > li:last-child a{opacity:0.8;}
#footer .link > li > a{display:inline-block; opacity:0.5; line-height:30px; padding:0 10px; font-weight:200; font-size:13px; color:#fff;}

:lang(en) #footer .info{display: block; padding: 10px 0 0 0;}
#footer .info{display:inline-block; padding:0 0 0 40px;}
#footer .info span{padding:0 15px 0 0; font-weight:300; font-size:15px; color:#ccc; word-break:keep-all;}
#footer .info span.tel_link{display:none;}
#footer .info span > a{color:#CCC;}
#footer .info p,
#footer .info a{padding:2px 0 0; color:#CCC;}
#footer .btn_top{position:fixed; opacity:1; opacity:0; right:50px; bottom:70px; z-index:99; width:61px; height:61px; background:#cb1919; background-size:7px; background-position:50% 50%; font-size:0; transition:all 0.4s ease-out 0s; transform:rotate(270deg); -webkit-transform:rotate(270deg); background-repeat:no-repeat;}
#footer .btn_top.active{position:fixed; opacity:0; bottom:50px;}
#footer .btn_top.hidden{opacity:0;}
#footer .btn_top.fiexd.active{position:fixed; opacity:1; top:auto; bottom:50px;}
#footer .btn_top.fiexd{position:absolute; opacity:1; top:-24px; bottom:auto;}

/* tab */
.tabs li{float:left; cursor:pointer;}
.tabs li.active{background:#FFF; border-bottom:1px solid #FFF;}
.tab_container{background:#FFF; clear:both;}
.tab_content{display:none;}
.tab_container .tab_content ul{width:100%; margin:0px; padding:0px;}
.tab_container .tab_content ul li{padding:5px; list-style:none;}

/* sub  */
.sub #header{background:#fff;}
.sub #header h1 em{font-weight:700; color:#222;}
.sub #header h1 em:before{background:#999;}
.sub #header nav .gnb > li > a{color:#222;}
.sub #header .area_util ul li.active a{opacity:1;background: #cb1919;color:#fff;}
.sub #header .area_util ul li a{color:#999;}
.sub #header .box_contact{background:#fff;}
.sub #header .box_contact *{color:#222;}
.sub.policy #header .box_contact{border:1px solid #EEE; border-top:0;}


@media screen and (max-width:1680px){
	#header{text-align:right;}
	#header nav{margin-right:140px;}
	#header nav .gnb > li{padding:0 28px;}
}

@media screen and (max-width:1380px){
	#header .inr{margin:0 40px;}
	#header h1 em{}
}

@media all and (max-width:1280px){
	body,
	p,
	li,
	a{font-size:15px;}
	.wrap{width:auto; margin:0 40px;}
}

@media all and (max-width:1200px){
	#header h1 em{opacity:0;}
}

@media all and (min-width:1024px){
	#header nav .gnb > li ul{display:none;position:absolute;opacity:0;visibility:hidden;top:15px;right:-18px;width:100%;padding:8px 17px;background:#fff;border:1px solid #444;box-shadow:15px 20px 29px 0px rgba(0, 0, 0, 0.23);transition:all 0.4s ease-out;transition-property:opacity, top, visibility;transition-delay:0s, 0s, 0s;z-index: 999;}
	#header nav .gnb > li ul.active{display:block; transition-delay:0.1s;}
	#header nav .gnb > li.active ul{opacity:1; visibility:visible; top:35px; z-index:10; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li ul > li > a{display:block; position:relative; padding:10px 0px; background:#fff; border-top:1px solid #e1e1e1; font-size:15px; color:#404040; text-align:left; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul > li > a:hover{opacity:0.5;}
	#header nav .gnb > li ul > li:first-child > a{border-top-width:0px;}
	a[data-link="call"]{cursor:auto; pointer-events:none;}
}

@media all and (max-width:1023px){
	#header{padding:36px 0;}
	#header .inr{margin:0 30px;}
	#header h1 em{opacity:1;}
	#header .area_util{right:51px;}
	#header .btn_menu,
	#header .btn_close{display:block;}
	#header nav{position:fixed; top:0px; right:-100%; z-index:998; width:80%; height:100%; margin:0; background:#fff;}
	#header nav.active{right:0px; box-shadow:-5px 0px 15px rgba(0,0,0,0.1); transition:all 0.5s ease-out 0s;}
	#header nav .gnb > li{display:block;}
	#header nav .gnb{position:absolute; top:150px; right:0px; width:100%; overflow-y:auto;}
	#header nav .gnb > li{padding:0;}
	#header nav .gnb > li > a{display:block; padding:10px 30px; font-size:18px; color:#111; text-align:left; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul{display:none; margin:0 20px 12px; padding:8px 0  10px; background:#f5f5f5;}
	#header nav .gnb > li ul > li > a{display:block; padding:7px 20px; text-align:left;}
	#header nav .gnb > li ul li.active a{color:#eeaf5e;}
	#header nav .gnb > li > a.on,
	.sub #header nav .gnb > li > a.on{color:#222;}
	#header .box_contact{top:37px;}
	#header nav .gnb > li:nth-child(3) > a{color:#cb1919 !important;}
	#footer .info{display:block; padding:25px 0 0 0;}
	
	.sub #header .btn_menu > span{background:#222;}
}

@media all and (max-width:767px){
	body,
	p,
	li,
	a{font-family:'Play', Sans-serif; font-size:14px;}
	a.btn_basic{padding:13px 28px; font-size:12px;}

	.wrap{margin:0 15px;}

	#header .inr{margin:0 15px;}
	#header nav{width:85%;}
	#header nav .gnb > li > a{padding:9px 20px; font-weight:600; font-size:16px;}
	#header nav .gnb > li > a.on{font-weight:700;}
	#header nav .gnb > li:nth-child(3) > a{font-size:17px;}
	#header h1 img{height:26px;}
	#header .box_contact{display:none;}
	#header .area_util{opacity:0; transition:all 0.5s ease-out 0s;}
	
	.active #header .area_util{opacity:1; z-index:999;}

	#header h1 em{padding-left:25px; font-size:11px;}
	#header h1 em:before{left:12px; height:25px;}
	#header .area_util ul li a{padding:2px 14px; font-size:12px;}
	
	.active #header .area_util ul li.active a{background:#cb1919; color:#fff;}
	.active #header .area_util ul li a{color:#333;}
	.active #header .area_util{top:6px;}
	.main #header{border-color:transparent;}

	#footer .logo img{height:25px;}
	#footer .info span{padding:0 10px 0 0; font-size:12px;}
	#footer .btn_top{right:15px; width:42px; height:42px; background-size:6px;}
	#footer .btn_top.fiexd.active{bottom:20px;}
	#footer address b{padding:0 2px 0 0;}
	#footer address span.dhm{display:block; font-weight:bold; color:#ff4d4d;}
	#footer .top_footer{padding:24px 0 15px; border-bottom:1px solid #323232;}
	#footer .btm_footer p{display:block; float:none; font-size:12px;}
	#footer .btm_footer{padding:20px 0 30px;}
	#footer .link{display:block; float:none; margin-top:13px;}
	#footer .link > li{margin:0 0 0 2px;}
	#footer .link > li:first-child{margin-left:0;}
	#footer .link > li > a{padding:0 10px; font-size:11px;}
}

@media screen and (max-width:540px){

}

@media all and (max-width:400px){
	body,
	p,
	li,
	a{font-size:13px;}
}

@media all and (max-width:370px){
	#header h1 em {
		display: none;
	}
}