@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;}

/* 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:relative; z-index:80; width:100%; height:120px; background:#fff; text-align:center; transition:0.7s cubic-bezier(0.25, 0.47, 0.12, 0.99);}
#header .header_top{position:relative; height:40px; background:#f6f6f6;}
#header .header_bottom{position:relative; height:80px;}
#header h1{position:absolute; left:200px; top:50%; transform: translateY(-50%);}
#header h1 a{display:block;}
#header h1 img{height:50px;}

#header .marks{position:absolute; right:200px; top:50%; transform: translateY(-50%);}

#header .area_util{position:absolute; right:200px; top:50%; transform: translateY(-50%);}
#header .area_util ul li{position:relative; float:left; padding-left:15px; margin-left:15px;}
#header .area_util ul li:first-child:before{display:none}
#header .area_util ul li:before{content:''; position:absolute; left:0; top:0; display:block; width:1px; height:13px; background:#ddd}
#header .area_util ul li a{line-height: 1; display:flex; align-items: center; position:relative; font-size:14px; color:#555}
#header .area_util ul li a img{height:14px; margin-right:7px;}

#header .btn_menu{display:none;}
#header .btn_menu{position:absolute; top:22px; right:20px; 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:#000;}
#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; transform:rotate(180deg);}
#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;}
#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;}
#header nav .gnb{text-align:center;}
#header nav .gnb > li{display:inline-block; position:relative; padding:0 30px;}
#header nav .gnb > li:after{content:""; position:absolute; opacity:0.28; top:8px; right:0; width:1px; height:15px; background:#fff;}
#header nav .gnb > li:last-child:after{background:none;}
#header nav .gnb > li > a{line-height:80px; display:inline-block; font-size:17px; color:#111; font-weight: 500;}
#header nav .gnb > li:hover > a{color:#b7030c}
#header nav .gnb > li > a.on, .sub #header nav .gnb > li > a.on{color: #b7030c;}

#header nav .m_login{display:none;}
#header nav .m_login li{position:relative; float:left; padding-left:15px; margin-left:15px;}
#header nav .m_login li:last-child:before{content:''; position:absolute; left:0; top:5px; display:block; width:1px; height:13px; background:#ddd}
#header nav .m_login li a{display:flex; align-items: center; position:relative; font-size:14px; color:#555}
#header nav .m_login li a img{height:14px; margin-right:7px;}

/* footer */
#footer{position:relative; z-index:1; background:#111;  border-bottom:10px solid #b7030c}
#footer .wrap{position:relative;padding-top:60px;}
#footer .menu{position:absolute; box-sizing: border-box; right:0; top:0; height:219px; padding:40px; border-left:1px solid #292929; border-right:1px solid #292929}
#footer .menu li{margin-bottom:15px;}
#footer .menu li a{display:block; font-size:14px; color:#fff; border-radius:4px;}
#footer .menu li:last-child a{background:#151515; border-color:#151515;}
#footer .menu{overflow:hidden;}

#footer .info li b{width:100%; margin-bottom:15px; color:#fff; font-weight:bold;}
#footer .info li{float:left; margin-right:15px; color: #999;}
#footer .info{overflow:hidden;}
#footer .info li *{display:inline-block; color:#999;}
#footer .info li em{margin-right:4px; font-weight:bold;}
#footer .info li p{font-weight:300;}

#footer .cpright span{display:block; padding:15px 0 60px 0; font-size:14px; color:#999;}
#footer .cpright span a{color:#999;}
#footer .cpright span em{font-weight:bold;}
#footer .cpright{}

#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){

	#header .area_util{right:20px;}
	#header .marks{right:20px;}

	#header h1{left:20px;}
}

@media screen and (max-width:1365px){
	
	#header nav .gnb > li{padding:0 20px;}
}

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

	.wrap{width:98%;}

}

@media screen and (max-width:1180px){
	#header nav .gnb > li ul > li > a,
	#header nav .gnb > li > a{font-size:14px;}
	#header nav .gnb > li{padding:0 16px;}

	#footer .menu{position:static; height:auto; padding:0; border:0}
	#footer .menu li{display:inline-block; margin-right:10px;}

}

@media all and (min-width:1024px){
	#header nav .gnb > li ul{display:none; position:absolute; opacity:0; visibility:hidden; top:55px; left:0; 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;}

	#header nav .gnb > li ul.active{display:block; transition-delay:0.1s;}
	#header nav .gnb > li.active ul{opacity:1; visibility:visible; top:65px; z-index:10; transition-delay:0s, 0s, 0s;}
	#header nav .gnb > li ul > li > a{display:block; position:relative; padding:6px 0px; background:#fff; 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{height:100px;}
	#header .header_bottom{height:60px;}
	#header h1 img{height:35px;}

	#header .btn_menu,
	#header .btn_close{display:block;}

	#header .marks{display:none;}
	
	#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{width:100%; margin-top:100px; overflow-y:auto;padding: 30px;box-sizing: border-box;}
	#header nav .gnb > li{padding:0;}
	#header nav .gnb > li > a{line-height:1; display:block; padding:17px 10px; font-size:18px; color:#111; text-align:left; transition:all 0.3s ease 0s;}
	#header nav .gnb > li ul{display:none; padding:20px 0; background:#f6f6f6}
	#header nav .gnb > li ul > li > a{display:block; padding:5px 15px; text-align:left;}
	#header nav .gnb > li ul li.active a{color:#b7030c;}

	.wrap{width:94%;}

}

@media all and (max-width:767px){
	#footer .btn_top{display:none;}

	body,
	p,
	li,
	a{font-family:'', Sans-serif; font-size:14px;}
	
	#header nav{width:100%; padding-left:0}
	#header nav .gnb > li > a{padding:14px 10px; font-size:16px;}
	#header nav .gnb > li > a.on{font-weight:700;}
	#header nav.active .m_login{display:block;}

	#header .area_util ul li a{font-size:12px;}
	#header h1{left:10px;}
	#header .btn_menu{right:10px;}

	#footer{}
	#footer .wrap{padding-top:20px;}
	#footer .menu{padding-top:35px;}
	#footer .menu li a{font-size:13px;}
	#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%; font-size:13px;}
	#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){

}