@charset "utf-8";

/* visual */
.area_visual{position:relative; overflow:hidden;}
.area_visual div.txt{position:absolute; top:30%; left:0; z-index:80; text-align:right;}
.area_visual div.txt > em{padding-bottom:20px; font-family:'Exo 2'; font-size:31px; color:#fff;}
.area_visual div.txt > i{padding-bottom:35px; font-family:'Exo 2'; font-size:100px; color:#fff; font-weight:600; color:#fff; letter-spacing:-1px;}
.area_visual div.txt > p{position:relative; font-size:22px; line-height:1em; font-weight:300; color:#fff; letter-spacing:-1px;}
.area_visual div.txt > em,
.area_visual div.txt > i,
.area_visual div.txt > p{display:block; opacity:0; transform:translateY(50px);}

.area_visual .list {width:1200px}
.area_visual .list li{position:relative; height:100%; background-repeat:no-repeat; background-position:50% 0; background-size:cover;}
.area_visual .list li.active{animation:bgScale 700ms 1 ease-out; -webkit-animation:bgScale 700ms 1 ease-out; -moz-animation:bgScale 700ms 1 ease-out;}
.area_visual .show{opacity:1 !important; transform:translateY(0px) !important;}
.area_visual .bx-controls{position:absolute; right:50%; bottom:60px; z-index:80; margin-right:-540px;}
.area_visual .bx-controls a[class^="bx-"]{display:inline-block; position:relative; width:40px; height:40px; background:url(../images/main/btn_visual_next.png) no-repeat 0 0; text-indent:300%; overflow:hidden; white-space:nowrap; transition:all 0.4s ease 0s;}
.area_visual .bx-controls a[class^="bx-"]:hover{opacity:1;}
.area_visual .bx-controls a.bx-prev{margin-right:50px; transform:rotate(-180deg);}
.area_visual .bx-controls a.bx-start{background:url(../images/main/btn_visual_start.png) no-repeat 0 0;}
.area_visual .bx-controls a.bx-stop{background:url(../images/main/btn_visual_stop.png) no-repeat 0 0; overflow:hidden;}
.area_visual .bx-controls .bx-controls-direction:after{content:''; display:block; position:absolute; top:0px; left:35px; width:15px; height:24px;}
.area_visual .bx-controls .bx-controls-auto{position:absolute; top:0px; left:45px; width:15px; height:24px;}
.area_visual .img_scroll{display:block; position:absolute; bottom:60px; left:50%; z-index:80; width:52px; height:56px; margin-left:-26px; background:url(../images/main/img_scroll.png) no-repeat 0 0; text-indent:100%; overflow:hidden; white-space:nowrap;}

/* 박스영역 */
.area_box{position:relative; width:1200px; height:420px; margin:30px auto 0 auto;}
.area_box > h2{font-family:'Exo 2'; color:#666; font-weight:300; text-align:center; text-transform:uppercase;}
.area_box > h2 span{color:#303643; font-weight:300;}
.area_box > div{position:relative; float:left; margin-top:60px; display:block; width:50%; height:301px; box-sizing:border-box; padding:47px 60px 0; background:url(../images/main/img_box01.jpg) no-repeat; overflow:hidden; color:#fff; text-align:left;}
.area_box > div:nth-of-type(2){position:relative; float:left; background:url(../images/main/img_box02.jpg) no-repeat;}
.area_box > div > em{font-size:25px;}
.area_box > div > p{margin-top:20px; font-size:16px; line-height:1.4em;}
.area_box > div > p > span{display:block;}
.area_box > div > .btn_more{display:block; position:absolute; left:50px; bottom:47px; width:40px; height:40px; background:url(../images/main/btn_more.png) no-repeat; text-indent:100%; overflow:hidden; white-space:nowrap;}

/* 제품영역 */
.area_product{position:relative; width:100%; height:659px; margin:70px auto 0 auto; background:#f4f4f4;}
.area_product h2{padding-top:90px; font-family:'Exo 2'; color:#666; font-weight:200; text-align:center; text-transform:uppercase;}
.area_product h2 span{color:#303643; font-weight:200;}
.area_product p{width:90%; margin:0 auto; font-family:'Exo 2'; color:#666; font-weight:100; text-align:center;}
.area_product ul{margin:60px auto; width:1200px;}
.area_product ul li{float:left; margin:0 auto; width:25%;}
.area_product ul li a > div{padding-top:235px; line-height:1.5em; background:url(../images/main/img_product_line.gif) no-repeat 50% 215px;}
.area_product ul li a > div > span{display:block}
.area_product ul li > a{display:block; position:relative; color:#5a5a5a; font-size:19px; text-align:center; border:7px solid #f4f4f4; border-radius:50%;}
.area_product ul li > a:hover{border:7px solid #83baff; border-radius:50%; box-shadow:5px 5px 5px rgba(0,0,0,0.28);}
.area_product ul li.on > a{border:7px solid #fff; border-radius:50%; box-shadow:5px 5px 5px rgba(0,0,0,0.28);}
.area_product ul li.on > a:hover{border:7px solid #83baff; border-radius:50%; box-shadow:5px 5px 5px rgba(0,0,0,0.28);}
.area_product ul li.list01 a {width:180px; height:180px; margin:0 auto; background:url(../images/main/img_product01.png) no-repeat;}
.area_product ul li.list02 a {width:180px; height:180px; margin:0 auto; background:url(../images/main/img_product02.png) no-repeat;}
.area_product ul li.list03 a {width:180px; height:180px; margin:0 auto; background:url(../images/main/img_product03.png) no-repeat;}
.area_product ul li.list04 a {width:180px; height:180px; margin:0 auto; background:url(../images/main/img_product04.png) no-repeat;}

@media all and (min-width:1200px){
	.area_visual,
	.area_visual .list{min-width:1200px; height:601px;}
	.area_visual div.txt{top:130px; left:50%; margin-left:0;}
}

@media all and (max-width:1199px){
	#content{position:relative;}
	#content > *[class^="area_"]{width:100%;}
	
	.area_visual:after{top:auto; bottom:0px; height:70%; background-position:center 0;}
	.area_visual .list li{height:130px; padding-top:50%;}
	.area_visual .img_scroll{display:none;}
	.area_visual div.txt{top:25%; right:20px;}
	.area_visual div.txt > i{padding-bottom:20px; font-size:85px;}
	.area_visual .bx-controls{bottom:50px; right:20px; margin-right:0px;}
	.area_visual:after{opacity:0.8; width:100%;}
	
	.area_box{height:430px;}
	
	.area_product h2{padding-top:60px}
	.area_product{height:520px;}
	.area_product ul{margin:30px auto; width:100%;}
}

@media all and (max-width:1024px){
	.area_visual div.txt > em{font-size:28px; color:#fff;}
	.area_visual div.txt > i{padding-bottom:20px; font-size:65px;}
	.area_visual div.txt > p{font-size:22px;}
	
	.area_box{height:auto; overflow:hidden;}
	.area_box > div{margin-top:30px; width:50%; height:260px;}
	.area_box > div > em{font-size:18px;}
	.area_box > div > p{margin-top:10px; font-size:14px; line-height:1.2em;}
	.area_box > div > p > span{display:block;}
	.area_box > div > .btn_more{left:47px; bottom:47px;}
	
	.area_product{margin:30px auto 60px auto;}
}

@media all and (max-width:840px){	
	.area_box{height:auto; overflow:hidden; padding-bottom:30px}
	.area_box > div{margin-top:30px; width:50%; height:250px; box-sizing:border-box; padding:47px 30px 0;}
	.area_box > div > .btn_more{left:20px; bottom:47px;}
	
	.area_product{height:auto; overflow:hidden; margin:30px auto 60px auto;}
	.area_product ul li{float:left; margin:0 auto; width:50%; height:300px}
	.area_product ul li a > div{padding-top:215px; line-height:1.2em; background:url(../images/main/img_product_line.gif) no-repeat 50% 210px; font-size:16px}
	.area_product ul li a > div > span{display:inline-block; margin-left:5px}
}

@media all and (max-width:768px){
	#content > *[class^="area_"]{float:none; width:100%;}
	
	.area_visual:after{opacity:0.8; width:100%;}
	.area_visual div.txt > em{font-size:22px; color:#fff;}
	.area_visual div.txt > i{padding-bottom:20px; font-size:52px;}
	.area_visual div.txt > p{font-size:16px;}
	
	.area_product{height:auto; overflow:hidden; margin:30px auto;}
}

@media all and (max-width:500px){
	.area_visual div.txt{top:25%;}
	.area_visual div.txt > em{font-size:20px; color:#fff;}
	.area_visual div.txt > i{padding-bottom:20px; font-size:40px;}
	.area_visual div.txt > p{font-size:14px;}
	.area_visual .bx-controls{bottom:30px;}
	
	.area_box > div{margin-top:0px; width:100%; height:260px; box-sizing:border-box; padding:47px 25px 0;}
	.area_box > div:nth-of-type(1){margin-top:30px}

	.area_product{width:97%; height:auto; overflow:hidden;}
	.area_product ul li{float:left; margin:0 auto; width:100%; height:300px}
	.area_product ul li a > div{padding-top:215px; line-height:1.2em; background:url(../images/main/img_product_line.gif) no-repeat 50% 210px; font-size:16px}
	.area_product ul li a > div > span{display:inline-block; margin-left:5px}
}