@charset "utf-8";

/* base */
::selection{background:rgba(117,61,23,.35); color:#fff;}
body{font-size:16px; word-break:keep-all;}
th[data-view="file"] + td ul li a{line-height:1em;}
ul li:last-child{margin-right:0;}

.wrap{width:1200px; margin:0 auto;}
.wrapper{width:1400px; margin:0 auto;}
::selection {
	background-color: #e0002a;
	color: #fff;
}
/* common */

/* popup */
.layerPop{overflow:hidden; border:1px solid #353535; border-radius:14px;}
.layerPop .btn button{font-size:13px;}
.layerPop .btn{padding:13px 10px; background:#353535; text-align:left;}
.layerPop .btn button:last-child{float:right; margin:0 12px 0 0;}

/* animation */
.ani{position:relative; opacity:0; transition: all 0.8s ease-out 0s; transform:translate(0,20px);}
.ani.is-animate{opacity:1; transform:translate(0,0);}

.delay-100{transition-delay:100ms;}
.delay-150{transition-delay:150ms;}
.delay-200{transition-delay:200ms;}
.delay-250{transition-delay:250ms;}
.delay-300{transition-delay:300ms;}
.delay-350{transition-delay:350ms;}
.delay-400{transition-delay:400ms;}
.delay-450{transition-delay:450ms;}
.delay-500{transition-delay:500ms;}

.ani_delay-100{animation-delay:100ms;}
.ani_delay-150{animation-delay:150ms;}
.ani_delay-200{animation-delay:200ms;}
.ani_delay-300{animation-delay:300ms;}
.ani_delay-400{animation-delay:400ms;}

.slideLeft.is-animate{opacity: 1 !important;transform:translateX(0);}
.slideLeft{opacity: 0 !important;transform:translateX(-80px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slideRight.is-animate{opacity: 1 !important;transform:translateX(0);}
.slideRight{opacity:0;transform:translateX(150px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slidedown.is-animate{opacity:1; transform:translateY(0);}
.slidedown{opacity:0;transform:translateY(-30px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slideUp.is-animate{opacity:1; transform:translateY(0);}
.slideUp{opacity:0;transform:translateY(80px);transition: all 2s cubic-bezier(0.165, 0.84, 0.44, 1);}

.slideFirstDown{opacity:0;position:relative;animation: firstAniDown 0.8s ease 0s forwards;}
.slideFirstUp{opacity:0; position:relative;animation:firstAniUp 1.3s ease 0s forwards;}
.slideFirstRight{opacity:0; position:relative;animation:slideFirstRight 1.3s ease 0s forwards;}
.slideFirstLeft{opacity:0; position:relative;animation:slideFirstLeft 1.3s ease 0s forwards;}

@keyframes firstAniDown{
	0%{opacity:0; transform:translateY(-80px); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
	100%{opacity:1; transform:translateY(0); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
}
@keyframes firstAniUp{
	0%{opacity:0; transform:translateY(80px); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
	100%{opacity:1; transform:translateY(0); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
}
@keyframes slideFirstRight{
	0%{opacity:0; transform:translateX(80px); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
	100%{opacity:1; transform:translateX(0); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
}
@keyframes slideFirstLeft{
	0%{opacity:0; transform:translateX(-80px); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
	100%{opacity:1; transform:translateX(0); transition:cubic-bezier(0.165, 0.84, 0.44, 1);}
}

/* header */
#header{position:absolute; left:0; top:0; width:100%; height:100px; z-index:51; transition:0.7s cubic-bezier(0.25, 0.47, 0.12, 0.99);}
#header .wrapper{position:relative; height:100px;}
#header h1{position:absolute; left:0; top:50%; transform: translateY(-50%);}
#header h1 a{display:block; width:164px; height:37px; background:url(../../images/common/logo_w.png) no-repeat; background-size: cover;}
#header h1 img{}

#header .area_util{}

#header .btn_menu{display:none;}
#header .btn_menu{position:absolute; top:25px; right:0; z-index:9999; width:23px; height:13px; 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:0;}
#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:100%;}
#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; right: 15px; transform:rotate(180deg); }
#header .btn_menu.active > span:nth-of-type(1){top:10px; transform:rotate(-45deg); background:#333}
#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); background:#333}
#header .btn_menu.active > span:nth-of-type(1),
#header .btn_menu.active > span:nth-of-type(3){transition-delay:0s, 0.3s;}
#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{text-align:center;}
#header nav .gnb{text-align:center;}
#header nav .gnb > li{line-height:104px; display:inline-block; position:relative; padding:0 35px;}
#header nav .gnb > li > a{display:inline-block; font-size:19px; color:#fff; font-weight: 500;}
#header nav .gnb > li:hover > a{}
#header nav .gnb > li > a.on, .sub #header nav .gnb > li > a.on{}

*[lang="en"] #header nav .gnb > li{padding:0 30px;}

.box_lang{position:absolute; right:0; top:50%; width:70px; font-size: 13px; transform: translateY(-50%);}
.box_lang .lang{display:block; width:100%; /* height:45px; */ padding:0 24px 0 0; background: none; color:#fff; outline:0;}
.box_lang .lang span:before,
.box_lang .lang span::after{content:''; display:block; position:absolute; top:1px; width:9px; height:2px; background:#fff; transition:all 0.3s ease 0s;}
.box_lang .lang span:before{ right:0; transform:translateY(8px) translateX(-7px) rotate(45deg);}
.box_lang .lang span:after{right:1px; top: 9px; transform:translateY(0px) translateX(0px) rotate(-45deg);}
.box_lang .lang_select{opacity:0; visibility:hidden; display:block; position:absolute; top:30px; right:0; z-index:-1; width:100%; padding:3px 0; background:#e0002a; border-radius:30px; text-align:center; transition:opacity 300ms;}
.box_lang .lang_select a{display:block; color:#fff; font-size:14px;}
.box_lang .lang_select a:hover{opacity:.9;}
.box_lang .lang_select a.active{opacity:1; font-weight:bold; color:#247eff;}
.box_lang.on .lang_select{opacity:1; visibility:visible; z-index:50;}
.box_lang.on .lang span:before{transform:translateY(8px) translateX(-7px) rotate(-45deg);}
.box_lang.on .lang span:after{transform:translateY(0px) translateX(0px) rotate(45deg);}

.lang_select{margin-bottom:30px; text-align:left;}
.lang_list{margin-top:10px;}
.lang_list a{position:relative; padding-right:15px; color:#555;}
.lang_list a.active{color:#e0002a; font-weight:bold;}
.lang_list a:first-child:before{content:''; display:block; position:absolute; right:5px; top:8px; width:3px; height:3px; background:#999;}


.fp-viewing-6Page #header,
.fp-viewing-5Page #header,
.fp-viewing-4Page #header,
.fp-viewing-3Page #header{background:#fff;}

.fp-viewing-6Page #header h1 a,
.fp-viewing-5Page #header h1 a,
.fp-viewing-4Page #header h1 a,
.fp-viewing-3Page #header h1 a{display:block; width:180px; height:40px; background:url(../../images/common/logo.png) no-repeat}

.fp-viewing-6Page #header nav .gnb > li > a,
.fp-viewing-5Page #header nav .gnb > li > a,
.fp-viewing-4Page #header nav .gnb > li > a,
.fp-viewing-3Page #header nav .gnb > li > a{color:#111}

.fp-viewing-6Page .box_lang .lang,
.fp-viewing-5Page .box_lang .lang,
.fp-viewing-4Page .box_lang .lang,
.fp-viewing-3Page .box_lang .lang{color:#111;}

.fp-viewing-6Page .box_lang .lang span:before,
.fp-viewing-6Page .box_lang .lang span:after,
.fp-viewing-5Page .box_lang .lang span:before,
.fp-viewing-5Page .box_lang .lang span:after,
.fp-viewing-4Page .box_lang .lang span:before,
.fp-viewing-4Page .box_lang .lang span:after,
.fp-viewing-3Page .box_lang .lang span:before,
.fp-viewing-3Page .box_lang .lang span:after{background:#111;}

/* footer */
#footer{box-sizing:border-box; position:relative; z-index:1; width:100%; height:280px; padding-top:50px; background:#fff; border-top:1px solid #ddd;}
#footer .wrapper{display:flex;}
#footer h1{margin-top:10px; width:190px}
#footer h1 img{height:26px;}
#footer .inr{width:calc(100% - 190px)}
#footer .menu{overflow: hidden; width:100%; margin-bottom:25px;}
#footer .menu li{float:left; }
#footer .menu li a{position:relative; display:block; padding-right:13px; margin-right:13px; font-size:16px; color:#000; font-weight: 500;}
#footer .menu li a:before{content:''; position:absolute; right:-2px; top:45%; display:block; width:4px; height:4px; background:#ccc; border-radius:50%;}
#footer .menu li:last-child a:before{display:none;}

#footer .info li{float:left; margin-right:15px; font-size:16px;}
#footer .info{overflow:hidden; width:100%;}
#footer .info li *{display:inline-block; color:#55;}
#footer .info li em{opacity:0.4; margin-right:4px; font-weight:bold;}
#footer .info li p{font-weight:300;}

#footer .cpright span{display:block; padding:10px 0 0; width: 100%; font-size:14px; color:#555; text-align: left;}
#footer .cpright span a{color:#666;}
#footer .cpright span em{font-weight:bold;}
#footer .cpright{border-top:1px solid rgba(255,255,255,0.05);}

#footer .btn_top{position:fixed; opacity:1; opacity:0; right:50px; bottom:70px; z-index:99; transition:all 0.4s ease-out 0s;width:61px;height:61px;background: #cb1919;background-size:7px;background-position:50% 50%;font-size:0;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;}

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

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

}

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

}

@media screen and (max-width:1420px){
	.wrapper{width:94%}
}


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

}

@media screen and (max-width:1279px){
	body,
	p,
	li,
	a{font-size:15px;}

	#footer .cpright span.wrap{width:100%;}
}

@media all and (min-width:1024px){
	#header .lang_list{display:none;}

	#header nav .gnb > li ul{display:none; position:absolute; opacity:0; visibility:hidden; top:100px; left:0; width:110%; padding:8px 17px; 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;}

	#header nav .gnb > li ul.active{display:block; background:#e0002a; border-radius:10px; transition-delay:0.1s;}
	#header nav .gnb > li.active ul{opacity:1; visibility:visible; top:90px; z-index:10;}
	#header nav .gnb > li ul > li > a{line-height: 1; display:block; position:relative; padding:10px 0px;  font-size:15px; color:#fff; 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;}

	*[lang="en"] #header nav .gnb > li ul{width:90%;}
}

@media all and (max-width:1023px){
	#header,
	#header .wrapper{height:70px}
	#header h1 a{width:105px; height:23px;}
	
	#header .btn_menu,
	#header .btn_close{display:block;}
	
	#header .nav_wrap{box-sizing:border-box; position:fixed; top:0px; right:-100%; z-index:998; width:80%; height:100%; padding: 30px;margin:0; background:#fff;}
	#header .nav_wrap.active{right:0px; box-shadow:-5px 0px 15px rgba(0,0,0,0.1); transition:all 0.5s ease-out 0s;}
	#header nav{margin-top:10px;}
	#header nav .gnb > li{display:block;}
	#header nav .gnb{ width:100%; overflow-y:auto;}
	#header nav .gnb > li{padding:0;}
	#header nav .gnb > li > a{line-height:1; display:block; padding:17px 0; font-size:18px; color:#111; text-align:left; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul{display:none; padding:15px; background:#f6f6f6}
	#header nav .gnb > li ul > li > a{line-height:1; display:block; padding:10px 0px; text-align:left;}
	#header nav .gnb > li ul li.active a{color:#e0002a;}
	.box_lang{display:none;}

	#footer h1 img{height:23px;}
}

@media all and (max-width:767px){
	body,
	p,
	li,
	a{font-size:14px;}
	
	#header nav{width:100%;}
	#header nav .gnb > li > a{padding:14px 0; font-size:16px;}
	#header nav .gnb > li > a.on{font-weight:700;}
	
	#footer .wrapper{flex-direction: column;}

	#footer{height:auto; padding:40px 0;}
	#footer .inr{width:100%;}
	#footer .menu{padding-top:35px;}
	#footer .menu li a{font-size:14px;}
	#footer .info li{font-size:14px;}
	#footer div:last-child span{padding:14px 0; font-size:12px;}
	#footer ul:last-child{padding-bottom:10px;}
	#footer ul:last-child li{margin:0 0 8px;width: 100%;}
	#footer ul:last-child li em{display:block; margin:0 0 3px;}
	#footer ul:last-child li:nth-child(4){float:left; width:100%; clear:none;}	
}

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

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

@media all and (max-width:359px){

}