@charset "utf-8";

/* visual */
.area_visual{position:relative; overflow:hidden;}
.area_visual:after{content:''; display:block; position:absolute; top:170px; left:0px; z-index:70; width:50%; height:493px; background:#2478d5; background-image:url(../images/main/img_visual_bg.png), linear-gradient(top left, #6464c4, #2478d5);  background-image:url(../images/main/img_visual_bg.png), -webkit-linear-gradient(top left, #6464c4, #2478d5); background-image:url(../images/main/img_visual_bg.png), -moz-linear-gradient(top left, #6464c4, #2478d5);  background-image:url(../images/main/img_visual_bg.png), -o-linear-gradient(top left, #6464c4, #2478d5); background-repeat:no-repeat; background-position:0 0; box-shadow:5px 5px 10px rgba(0,0,0,0.4);}
.area_visual div.txt{position:absolute; top:30%; left:0; z-index:80;}
.area_visual div.txt > em{padding-bottom:20px; font-family:'Raleway', sans-serif; font-size:16px; font-weight:600; color:#80aee4;}
.area_visual div.txt > i{padding-bottom:35px; font-family:'Raleway', sans-serif; font-size:50px; font-weight:600; color:#fff; letter-spacing:-1px;}
.area_visual div.txt > i > span{font-size:32px;}
.area_visual div.txt > p{position:relative; padding-left:90px; font-size:20px; line-height:1.3em; 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 div.txt > p:before{content:''; display:block; position:absolute; left:0px; top:12px; width:70px; height:1px; background:rgba(255,255,255,0.5);}
.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; left:50%; bottom:250px; z-index:80; margin-left:-150px;}
.area_visual .bx-controls a[class^="bx-"]{display:inline-block; opacity:0.5; position:relative; width:22px; height:16px; background:url(../images/main/btn_visual_next.png) no-repeat 0 0; text-indent:100%; 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:40px; transform:rotate(-180deg);}
.area_visual .bx-controls .bx-controls-direction:after{content:''; display:block; position:absolute; top:0px; left:35px; width:15px; height:24px; background:url(../images/main/img_visual_line.png) no-repeat 50% 0;}
.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;}

#content{padding:75px 0 95px;}
#content > *[class^="area_"]{float:left; box-sizing:border-box;}
#content > *[class^="area_"] h2{margin-top:56px; font-size:40px; letter-spacing:-1px; color:#151515; font-weight:500;}
#content > *[class^="area_"] h2 em{display:block; font-family:'Raleway', sans-serif; font-size:20px; letter-spacing:-0.5px; font-weight:600;}
#content:after{content:''; display:block; clear:both;}

.area_company{width:351px;}
.area_company p{margin-top:15px; font-size:16px; letter-spacing:-0.5px; color:#666; font-weight:300; word-break:keep-all;}
.area_company span{display:block; position:relative; margin-top:25px; padding-left:77px; color:#666; font-weight:300;}
.area_company span:before{content:''; display:block; position:absolute; left:0px; top:10px; width:57px; height:1px; background:#54c1e5;}
.area_company a{display:inline-block; min-width:240px; box-sizing:border-box; margin-top:30px; padding:25px 0px; background:#fff; border:2px solid #151515; color:#151515; text-align:center; letter-spacing:-1px; transition:all 0.3s ease 0s;}
.area_company a:hover,
.area_company a:focus{background:#54c1e5; border-color:#54c1e5; color:#fff;}

.area_gallery{position:relative; width:562px; padding:0 66px;}
.area_gallery:after{content:''; display:block; position:absolute; top:56px; right:66px; width:370px; height:410px; box-sizing:border-box; border:4px solid #e8e8e8;}
.area_gallery .inr{width:370px;}
.area_gallery .list{height:436px;}
.area_gallery .list li{position:relative; height:100%; box-sizing:border-box; background-repeat:no-repeat; background-position:50% 0; color:#fff;}
.area_gallery .list li > div{position:absolute; bottom:50px; left:50px; padding-right:15px;}
.area_gallery .list li em{font-family:'Raleway', sans-serif; font-size:14px; font-weight:600;}
.area_gallery .list li p{font-size:20px; letter-spacing:-1px;}
.area_gallery .bx-viewport{z-index:20;}
.area_gallery .total{position:absolute; right:90px; bottom:70px; color:#7e7e7e;}
.area_gallery .total > *{display:block; font-size:16px; color:#7e7e7e;}
.area_gallery .total em{color:#333;}
.area_gallery .bx-pager{position:absolute; top:150px; right:90px; z-index:40;}
.area_gallery .bx-pager a{display:block; position:relative; width:14px; height:14px; margin-top:12px; background:#ebebeb; text-indent:100%; overflow:hidden; white-space:nowrap;}
.area_gallery .bx-pager a:before{content:''; display:block; opacity:0; position:absolute; top:50%; left:50%; width:6px; height:6px; background:#54c1e5; transform:translate(-50%, -50%); transition:all 0.3s ease 0s;}
.area_gallery .bx-pager a:hover:before{opacity:1;}
.area_gallery .bx-pager a.active:before{opacity:1; width:14px; height:14px;}

.area_product{width:287px;}
.area_product ul{margin-top:15px;}
.area_product ul li > a{display:block; position:relative; padding:15px 0px; border-bottom:1px solid #e1e1e1; color:#6a6a6a; letter-spacing:-1px; font-size:16px;}
.area_product ul li > a:after{content:''; display:block; position:absolute; left:0px; bottom:-1px; width:0; height:4px; background:#fee25f; transition:all 0.4s ease-out 0s;}
.area_product ul li > a:hover:after{width:100%;}
.area_product ul li a br{display:none;}
.area_product .more{display:inline-block; margin-top:15px; font-size:16px; color:#151515; letter-spacing:-1px;}

@keyframes bgScale {
	0% {transform:scale(1.4); -webkit-transform:scale(1.4); -moz-transform:scale(1.4);}
	100% {transform:scale(1); -webkit-transform:scale(1); -moz-transform:scale(1);}
}

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

@media all and (max-width:1199px){
	#content{position:relative;}
	
	.area_visual:after{top:auto; bottom:0px; height:70%; background-position:center 0;}
	.area_visual .list li{padding-top:50%;}
	.area_visual .img_scroll{display:none;}
	.area_visual div.txt{top:40%; left:20px;}
	.area_visual div.txt > p{font-size:16px;}
	.area_visual .bx-controls{bottom:50px; left:20px; margin-left:0px;}
	
	
	#content > *[class^="area_"]{margin-top:253px;}
	.area_company{width:45%;}
	
	.area_gallery{float:right !important; width:50%; padding:0;}
	.area_gallery .inr{width:80%;}
	.area_gallery:after{width:80%; right:0px;}
	.area_gallery .bx-pager,
	.area_gallery .total{right:40px;}
	
	.area_product{float:none !important; clear:both; position:absolute; left:0px; top:0; width:100%; margin-top:0px !important;}
	.area_product h2{margin-top:0px !important; padding-top:70px;}
	.area_product ul li{float:left; display:block; width:23%; margin-left:2.66%;}
	.area_product ul li:first-child{margin-left:0px;}
	.area_product ul:after{content:''; display:block; clear:both;}
	.area_product .more{position:absolute; right:15px; top:70px;}
}

@media all and (max-width:900px){
	.area_visual .list li{padding-top:0; height:400px;}
	.area_visual div.txt > em{font-size:14px; color:#fff;}
	.area_visual div.txt > i{padding-bottom:20px; font-size:40px;}
	.area_visual div.txt > i > span{font-size:28px;}
	.area_visual div.txt > p{font-size:15px; letter-spacing:-0.5px;}
	.area_visual:after{opacity:0.8; width:100%;}
	.area_visual .bx-controls{left:auto; right:20px;}
}

@media all and (max-width:768px){
	#content > *[class^="area_"]{float:none; width:100%; text-align:center;}
	.area_company span{padding-left:0px; padding-bottom:10px;}
	.area_company span:before{top:auto; bottom:0; left:50%; margin-left:-28px;}
	.area_gallery{float:none !important; width:80% !important; margin:100px auto 0 !important;}
	.area_gallery .list li > div{text-align:left;}
}

@media all and (max-width:500px){
	.area_visual div.txt > p{padding-left:0px;}
	.area_visual div.txt > p:before{display:none;}
	.area_visual .bx-controls{bottom:30px;}

	.area_company{margin-top:330px !important;}
	.area_company a{padding:15px 0px;}
	
	.area_product ul li{float:none; display:inline-block; margin-left:0px;}
	.area_product ul li a br{display:block;}
	.area_product .more{display:inline-block; position:static; min-width:240px; box-sizing:border-box; margin-top:30px; padding:15px 0px; background:#fff; border:2px solid #151515; color:#151515; text-align:center; letter-spacing:-1px; transition:all 0.3s ease 0s;}
	
	.area_gallery{width:100% !important;}
	.area_gallery .list li > div{left:30px;}
	.area_gallery .list li p{font-size:18px;}
}