@charset "utf-8";

.area_visual{position:relative;}
.area_visual .list li{height:930px; background-repeat:no-repeat; background-position:50% 0; background-size:cover;}
.area_visual .list li > div{overflow:hidden; position:absolute; top:46%; left:50%; margin-left:-319px; width:952px; height:480px; border:7px solid #fff; color:#fff; transform:translateY(-50%);}
.area_visual .list li > div em{display:block; margin-top:75px; font-size:60px; font-weight:700; text-transform:uppercase;}
.area_visual .list li > div p{padding:30px 0 10px 0; font-size:23px; line-height:1.2em;}
.area_visual .list li > div p > span > br{display:block;}
.area_visual .list li > div p > span.f01{font-size:18px; font-weight:200;}
.area_visual .list li > div i{overflow:hidden; float:left; position:relative; top:0px; display:block; margin-right:52px; width:312px; height:100%; background:rgba(255,255,255,0.7); transition:all 0.3s ease;}
.area_visual .list li > div i > img{display:block; margin:38% auto 0 auto; vertical-align:middle;}
.area_visual .list li > div > *:not(a){overflow:hidden;}
.area_visual .list li > div > *:not(a) > span{display:block;}
.area_visual .list li > div em > span{transform:translateY(-100%);}
.area_visual .list li > div p > span{opacity:0; transform:translateX(10%);}
.area_visual .list li > div i{transform:translateY(-100%);}
.area_visual .list li > div em.show > span{animation:slideDown 0.5s ease 0.6s forwards;}
.area_visual .list li > div p.show > span{animation:slideLeft 0.5s ease 0.8s forwards;}
.area_visual .list li > div i.show{animation:slideLeft 0.5s ease 0.8s forwards;}
.area_visual .bx-controls a[class^="bx-"]{position:absolute; top:58%; right:106px; z-index:70; display:inline-block; width:198px; height:180px; font-size:0px; transform:translateY(-50%);}
.area_visual .bx-controls a[class^="bx-"]:before{content:''; display:block; position:absolute; top:50%; left:50%; width:12px; height:20px; margin:-13px 0 0 -13px; background:url(../images/main/btn_visual.png);}
.area_visual .bx-controls a[class^="bx-"]:after{content:''; display:block; position:absolute; top:0px; border-top:104px solid transparent;}
.area_visual .bx-controls a.bx-prev{}
.area_visual .bx-controls a.bx-next{top:36.6%; border-bottom:1px solid rgba(255,255,255,0.3);}
.area_visual .bx-controls a.bx-next:before{transform:rotate(-180deg); opacity:0.5;}

#container{padding-top:0px; padding-bottom:0px;}
#container .inr{max-width:1300px; margin:0 auto; padding:100px 15px;}
#container h3{display:block; z-index:3; position:relative; width:1300px; margin:0 auto; padding:120px 0 0 50px; font-size:50px; font-weight:800; color:#2e2e2e; box-sizing:border-box;}
#container h3:after{content:''; display:block; z-index:-1; position:absolute; top:0px; left:0px; width:150px; height:300px; background:url(../images/common/img_contactbg.jpg) no-repeat 0 0;}

.area_lnb .lnb li:nth-child(6){margin-right:0;}
.area_lnb .lnb li:nth-child(7) a.on{display:none;}

@media all and (max-width:1500px){
	#container .inr{max-width:inherit;}
	#container h3{padding:50px 0 0 5%; width:100%; font-size:40px;}
	#container h3:after{height:190px;}
	.area_visual .bx-controls a[class^="bx-"]{width:69px; height:73px;}
	.area_visual .bx-controls a[class^="bx-"]:after{border-top-width:73px;}
	.area_visual .list li{height:700px;}
	.area_visual .list li > div{top:43%; margin-left:-352px; width:692px; height:300px;}
	.area_visual .list li > div i{width:345.5px; margin-right:20px;}
	.area_visual .list li > div em{margin-top:25px; font-size:40px;}
	.area_visual .list li > div p{padding:15px 5px 5px 0; font-size:14px; line-height:1.8em;}
	.area_visual .list li > div p:last-child > span.f01{font-size:14px;}
	.area_visual .bx-controls a[class^="bx-"]{right:0px;}
	.area_visual .list li > div i > img{width:220px; margin:60px auto 0 auto;}	
}

@media all and (max-width:1024px){
	#container h3{font-size:35px;}

	.area_visual .list li{height:600px;}
	.area_visual .list li > div{top:50%; height:300px;}
	.bx-has-controls-direction{width:100%;}
	.bx-controls-direction{position:absolute; bottom:inherit; left:inherit; top:20%; right:5%; margin-left:0; width:101px;}
	.area_visual .bx-controls a[class^="bx-"]:before{margin-left:-6px;}
	.area_visual .bx-controls a[class^="bx-"],
	.area_visual .bx-controls a.bx-next{top:inherit; bottom:0px; right:51px; width:50px; height:30px;}
	.area_visual .bx-controls a.bx-next{right:0px; border-bottom:0; border-left:1px solid rgba(255,255,255,0.3);}
}

@media all and (max-width:768px){
	.area_visual .list li > div{left:6%; margin-left:0; width:85%;}
	.area_visual .list li > div i{width:50.7%; margin-right:15px;}
	.area_visual .list li > div i > img{width:180px; margin:80px auto 0 auto;}
	.area_visual .list li > div em{font-size:30px;}
	.area_visual .list li > div p:last-child > span.f01{font-size:13px;}
	.area_visual .list li > div p{font-size:13px;}
	.area_visual .list li > div p > span > br{display:none;}
	
	.bx-controls-direction{top:15%;}
}

@media all and (max-width:540px){
	.area_visual .list li > div em{font-size:25px;}
	.area_visual .list li > div i{width:50%;}
	.bx-controls-direction{right:0px;}
	.area_visual .bx-controls a[class^='bx-']::before{margin:-5px 0 0 -6px; width:6px; height:10px; background-size:100%; background-postion:50% 50%;}
	.area_visual .bx-controls a[class^='bx-'], .area_visual .bx-controls a.bx-next{height:15px;}	
}

@media all and (max-width:480px){
	.area_visual .list li{height:500px;}
	.area_visual .list li > div i{width:50%;}
	.area_visual .list li > div p:last-child > span.f01{font-size:12px;}
	.area_visual .list li > div p{font-size:12px; padding:10px 5px 5px 0;}
	.area_visual .list li > div em{font-size:20px;}
	.area_visual .list li > div i > img{width:130px; margin:90px auto 0 auto;}

}

@media all and (max-width:375px){
	.area_visual .list li > div{height:250px;}
	.area_visual .list li > div i{width:49.4%;}
	.area_visual .list li > div p:last-child > span.f01,
	.area_visual .list li > div p{font-size:11px;}
	.area_visual .list li > div em{font-size:18px;}
}

/* animation */
@keyframes slideDown{
	0%{transform:translateY(-100%);}
	100%{transform:translateY(0);}
}
@keyframes slideUp{
	0%{transform:translateY(110%);}
	100%{transform:translateY(0);}
}
@keyframes slideLeft{
	0%{opacity:0; transform:translateX(10%);}
	100%{opacity:1; transform:translateX(0);}
}
@keyframes arrowTransformY{
	25%{transform:translateY(5px);}
	75%{transform:translateY(-5px);}
}

/* Top */
.box.hover-enter-top .inner{
-webkit-animation-name:slide_in_top;
-moz-animation-name:slide_in_top;
animation-name:slide_in_top;
}
.box.hover-leave-top .inner{
-webkit-animation-name:slide_out_top;
-moz-animation-name:slide_out_top;
animation-name:slide_out_top;
}
/* Right */
.box.hover-enter-right .inner{
-webkit-animation-name:slide_in_right;
-moz-animation-name:slide_in_right;
animation-name:slide_in_right;
}
.box.hover-leave-right .inner{
-webkit-animation-name:slide_out_right;
-moz-animation-name:slide_out_right;
animation-name:slide_out_right;
}
/* Bottom */
.box.hover-enter-bottom .inner{
-webkit-animation-name:slide_in_bottom;
-moz-animation-name:slide_in_bottom;
animation-name:slide_in_bottom;
}
.box.hover-leave-bottom .inner{
-webkit-animation-name:slide_out_bottom;
-moz-animation-name:slide_out_bottom;
animation-name:slide_out_bottom;
}
/* Left */
.box.hover-enter-left .inner{
-webkit-animation-name:slide_in_left;
-moz-animation-name:slide_in_left;
animation-name:slide_in_left;
}
.box.hover-leave-left .inner{
-webkit-animation-name:slide_out_left;
-moz-animation-name:slide_out_left;
animation-name:slide_out_left;
}

/* Top */
@-webkit-keyframes slide_in_top{
	0%{-webkit-transform:translate3d(0, -100%, 0);}
	100%{-webkit-transform:translate3d(0, 0, 0);}
}
@-webkit-keyframes slide_out_top{
	0%{-webkit-transform:translate3d(0, 0, 0);}
	100%{-webkit-transform:translate3d(0, -100%, 0);}
}
@-moz-keyframes slide_in_top{
	0%{-moz-transform:translate3d(0, -100%, 0);}
	100%{-moz-transform:translate3d(0, 0, 0);}
}
@-moz-keyframes slide_out_top{
	0%{-moz-transform:translate3d(0, 0, 0);}
	100%{-moz-transform:translate3d(0, -100%, 0);}
}
@keyframes slide_in_top{
	0%{transform:translate3d(0, -100%, 0);}
	100%{transform:translate3d(0, 0, 0);}
}
@keyframes slide_out_top{
	0%{transform:translate3d(0, 0, 0);}
	100%{transform:translate3d(0, -100%, 0);}
}

/* Right */
@-webkit-keyframes slide_in_right{
	0%{-webkit-transform:translate3d(100%, 0, 0);}
	100%{-webkit-transform:translate3d(0, 0, 0);}
}
@-webkit-keyframes slide_out_right{
	0%{-webkit-transform:translate3d(0, 0, 0);}
	100%{-webkit-transform:translate3d(100%, 0, 0);}
}
@-moz-keyframes slide_in_right{
	0%{-moz-transform:translate3d(100%, 0, 0);}
	100%{-moz-transform:translate3d(0, 0, 0);}
}
@-moz-keyframes slide_out_right{
	0%{-moz-transform:translate3d(0, 0, 0);}
	100%{-moz-transform:translate3d(100%, 0, 0);}
}
@keyframes slide_in_right{
	0%{transform:translate3d(100%, 0, 0);}
	100%{transform:translate3d(0, 0, 0);}
}
@keyframes slide_out_right{
	0%{transform:translate3d(0, 0, 0);}
	100%{transform:translate3d(100%, 0, 0);}
}

/* Bottom */
@-webkit-keyframes slide_in_bottom{
	0%{-webkit-transform:translate3d(0, 100%, 0);}
	100%{-webkit-transform:translate3d(0, 0, 0);}
}
@-webkit-keyframes slide_out_bottom{
	0%{-webkit-transform:translate3d(0, 0, 0);}
	100%{-webkit-transform:translate3d(0, 100%, 0);}
}
@-moz-keyframes slide_in_bottom{
	0%{-moz-transform:translate3d(0, 100%, 0);}
	100%{-moz-transform:translate3d(0, 0, 0);}
}
@-moz-keyframes slide_out_bottom{
	0%{-moz-transform:translate3d(0, 0, 0);}
	100%{-moz-transform:translate3d(0, 100%, 0);}
}
@keyframes slide_in_bottom{
	0%{transform:translate3d(0, 100%, 0);}
	100%{transform:translate3d(0, 0, 0);}
}
@keyframes slide_out_bottom{
	0%{transform:translate3d(0, 0, 0);}
	100%{transform:translate3d(0, 100%, 0);}
}

/* Left */
@-webkit-keyframes slide_in_left{
	0%{-webkit-transform:translate3d(-100%, 0, 0);}
	100%{-webkit-transform:translate3d(0, 0, 0);}
}
@-webkit-keyframes slide_out_left{
	0%{-webkit-transform:translate3d(0, 0, 0);}
	100%{-webkit-transform:translate3d(-100%, 0, 0);}
}
@-moz-keyframes slide_in_left{
	0%{-moz-transform:translate3d(-100%, 0, 0);}
	100%{-moz-transform:translate3d(0, 0, 0);}
}
@-moz-keyframes slide_out_left{
	0%{-moz-transform:translate3d(0, 0, 0);}
	100%{-moz-transform:translate3d(-100%, 0, 0);}
}
@keyframes slide_in_left{
	0%{transform:translate3d(-100%, 0, 0);}
	100%{transform:translate3d(0, 0, 0);}
}
@keyframes slide_out_left{
	0%{transform:translate3d(0, 0, 0);}
	100%{transform:translate3d(-100%, 0, 0);}
}