@charset "utf-8";

/* visual */
.area_visual{position:relative; background-repeat:no-repeat; background-position:50% 0; background-size:cover; margin:0 auto;}
.area_visual ul{height:864px;}
.area_visual li{height:100%; background-size:cover; background-position:50% 0;}
.area_visual .show{opacity:1 !important; transform:translateY(0px) !important;}
.area_visual .visual_txt{position:absolute; top:30%; left:50%; width:1200px; margin-left:-600px; padding-left:88px; box-sizing:border-box; z-index:80;}
.area_visual .visual_txt h2{font-size:55px; color:#fff; font-weight:600; letter-spacing:-2px; text-shadow:0px 4px 3px rgba(0, 0, 0, 0.4); line-height:1.3em;}
.area_visual .visual_txt h2 span{display:block; font-weight:300;}
.area_visual .visual_txt p{margin-top:15px; font-size:18px; color:#fff; font-weight:300; text-shadow:0px 4px 3px rgba(0, 0, 0, 0.2); line-height:1.5em;}
.area_visual .visual_txt a{display:block; width:213px; height:58px; margin-top:35px; background:linear-gradient(to right, #a98cc7, #7459e3); letter-spacing:-1px; font-weight:300; line-height:60px; font-size:17px; text-align:center; color:#fff; border-radius:50px;}
.area_visual li:nth-child(2) .visual_txt a{background:linear-gradient(to right, #00e0d4, #00abd1);}
.area_visual li:nth-child(3) .visual_txt a{background:linear-gradient(to right, #4aa1ff, #4073ff);}
.area_visual .visual_txt h2,
.area_visual .visual_txt p,
.area_visual .visual_txt a{display:block; opacity:0; transform:translateY(50px);}
.area_visual .bx-pager{position:absolute; bottom:5%; left:50%; margin-left:-39px; z-index:90;}
.area_visual .bx-pager .bx-pager-item{position:relative; float:left; margin:0 7px;}
.area_visual .bx-pager .bx-pager-item a{display:block; width:12px; height:12px; border:1px solid #fff; box-sizing:border-box; text-indent:100%; white-space:nowrap; overflow:hidden;}
.area_visual .bx-pager .bx-pager-item a.active{background:#fff;}

/* product */
.product{position:relative; padding:95px 0 100px; background:#d1d9ed;}
.product:before{content:''; display:block; position:absolute; top:8%; left:0; width:186px; height:381px; background:url(../images/main/bg_product01.png) no-repeat;}
.product .inr{position:relative; max-width:1200px; margin:0 auto; text-align:center; z-index:2;}
.product h3{font-size:30px; color:#111; font-weight:500;}
.product p{margin-top:5px; font-size:15px; color:#555; letter-spacing:-1px;}
.product .list{margin-top:54px;}
.product .list li{float:left; width:33.33333333333333%;}
.product .list li a{display:block; margin:0 19px; overflow:hidden;}
.product .list li:first-child a{margin-left:0;}
.product .list li:nth-child(3) a{margin-right:0;}
.product .list li .img{display:block; position:relative; width:100%; height:330px; background-repeat:no-repeat; background-position:50%; background-size:cover; transition:all 0.3s ease 0s;}
.product .list li a:hover .img{transform:scale(1.2);}
.product .list li a:hover .img span{transform:scale(0.85);}
.product .list li .img span{display:none; position:absolute; left:0; top:33%; width:100%; padding-top:60px; font-size:17px; color:#fff; font-weight:500; letter-spacing:-1px; text-align:center; background-repeat:no-repeat; background-position:50% 0;}
.product .list li.product01 .img span{background-image:url(../images/main/product_ico01.png);}
.product .list li.product02 .img span{background-image:url(../images/main/product_ico02.png);}
.product .list li.product03 .img span{background-image:url(../images/main/product_ico03.png);}
.product .list li .img span:after{content:''; display:block; width:44px; height:8px; margin:20px auto 0; background:url(../images/main/product_arrow.png) no-repeat;}
.product .list li.product01 .img{background-image:url(../images/main/product01.jpg);}
.product .list li.product02 .img{background-image:url(../images/main/product02.jpg);}
.product .list li.product03 .img{background-image:url(../images/main/product03.jpg);}
.product .list li .img:hover:before{content:''; display:block; width:100%; height:100%; background-color:rgba(0, 0, 0, 0.7);}
.product .list li .img:hover span{display:block;}
.product .list li .tit{display:block; margin-top:30px; padding:0 20px; font-size:17px; color:#111; font-weight:600; letter-spacing:-1px; line-height:1.3em; box-sizing:border-box;}
.product .list li .txt{display:block; margin-top:10px; padding:0 20px; font-size:14px; color:#555; letter-spacing:-1px; line-height:1.6em; box-sizing:border-box;}
.product .list:after{content:''; display:block; clear:both;}

/* quick */
.quick{position:relative; background:#e6ebf8;}
.quick:before{content:''; display:block; position:absolute; bottom:-35%; right:0; width:187px; height:236px; background:url(../images/main/bg_product03.png) no-repeat;}
.quick:after{content:''; display:block; position:absolute; top:-20%; right:5%; width:98px; height:99px; background:url(../images/main/bg_product02.png) no-repeat;}
.quick .inr{max-width:1200px; margin:0 auto; text-align:center;}
.quick .list li{float:left; width:25%;}
.quick .list li div{position:relative; height:286px; padding:40px 20px 20px; background:linear-gradient(180deg, #9a97db, #7774be, #605fae); box-sizing:border-box;transition:all 0.3s ease 0s;}
.quick .list li div:hover{margin-top:-30px; box-shadow:2px 5px 15px rgba(0, 0, 0, 0.4); z-index:10;}
.quick .list li.quick02 div{background:linear-gradient(180deg, #4a9dff, #437fff, #3f71ff);}
.quick .list li.quick03 div{background:linear-gradient(180deg, #00d4d4, #00bed3, #00a6d2);}
.quick .list li.quick04 div{background:linear-gradient(180deg, #9e99ff, #9d89ff, #9c86ff);}
.quick .list li h4{padding-top:105px; font-size:17px; color:#fff; font-weight:500; letter-spacing:-1px; background-repeat:no-repeat; background-position:60% 0;}
.quick .list li.quick01 h4{background-image:url(../images/main/quick_ico01.png);}
.quick .list li.quick02 h4{background-image:url(../images/main/quick_ico02.png);}
.quick .list li.quick03 h4{background-image:url(../images/main/quick_ico03.png);}
.quick .list li.quick04 h4{background-image:url(../images/main/quick_ico04.png);}
.quick .list li p{margin-top:5px; font-size:13px; color:#fff; font-weight:300; letter-spacing:-1px;}
.quick .list li a{display:block; width:74px; height:24px; margin:15px auto 0; font-size:13px; background:rgba(0, 0, 0, 0.1); border:1px solid #fff; box-sizing:border-box; border-radius:50px;}
.quick .list li a span{padding:0 25px 0 10px; font-size:11px; color:#fff; font-weight:600; text-align:left; box-sizing:border-box; background-image:url(../images/main/quick_arrow.png); background-repeat:no-repeat; background-position:80% 50%; transition:all 0.3s ease 0s;} 
.quick .list li a:hover span{background-position:95% 50%;}
.quick .list:after{content:''; display:block; clear:both;}

/* info */
.info{padding:90px 0 100px;}
.info .inr{max-width:1200px; margin:0 auto;}
.info .noti{float:left; position:relative; width:50%;}
.info .noti .list{margin-right:45px;}
.info .data{float:right; position:relative; width:50%;}
.info .data .list,
.info .data h4{margin-left:45px;}
.info h4{font-size:30px; color:#111; font-weight:500;}
.info h4 span{display:inline-block; position:relative; margin-left:5px; padding-left:10px; font-size:15px; color:#555; font-weight:400; letter-spacing:-1px; vertical-align:middle;}
.info h4 span:before{content:''; display:block; position:absolute; left:0; top:50%; width:1px; height:10px; margin-top:-5px; background:#2c64ac;}
.info .list{margin-top:10px; padding:20px 0 0 10px; border-top:1px solid #eee; box-sizing:border-box;}
.info .list li{margin-top:10px;}
.info .list a{display:block; position:relative; float:left; width:80%; padding-left:12px; font-size:16px; color:#555; font-weight:300; letter-spacing:-1px; box-sizing:border-box; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.info .list a:before{content:''; display:block; position:absolute; left:0; top:50%; width:4px; height:4px; margin-top:-2px; background:#1553a3; border-radius:50%;}
.info .list a:hover{text-decoration:underline;}
.info .list a + span{display:block; float:right; padding-top:2px; font-size:13px; color:#7d7d7d; font-weight:400; letter-spacing:-0.5px;}
.info .list .none{display:block; text-align:center; font-size:16px; color:#555; font-weight:300; letter-spacing:-1px;}
.info .btn_more{position:absolute; right:0; top:6px; width:30px; height:30px; border:1px solid #ccc; border-radius:50%; background:url(../images/main/btn_more.png) no-repeat 50%; text-indent:100%; overflow:hidden; white-space:nowrap; transition:all 0.3s ease 0s;}
.info .btn_more:hover{transform:rotate(180deg);}
.info .noti .btn_more{right:45px;}
.info .inr:after,
.info .list li:after{content:''; display:block; clear:both;}

@media all and (max-width:1590px){
	.quick:after{display:none;}
}

@media all and (max-width:1255px){
	.product .inr,
	.quick .inr,
	.info .inr{max-width:100%; padding:0 15px;}
	.product .list li a{margin:0 3%;}
	.info .noti .list{margin-right:5%;}
	.info .noti .btn_more{right:5%;}
	.info .data .list,
	.info .data h4{margin-left:5%;}
	.area_visual ul{height:685px;}
	.area_visual .visual_txt{width:100%; left:0; margin-left:0;}
}

@media all and (max-width:1050px){
	.product .list li .txt{word-break:break-word;}
	.product .list li .txt br{display:none;}
	.area_visual ul{height:585px;}
	.area_visual .visual_txt h2{font-size:45px;}
	.area_visual .visual_txt p{font-size:16px;}
}

@media all and (max-width:1024px){
	.product{padding:50px 0 100px;}
	.product .list{margin-top:30px;}
	.product .list li .img{height:260px;}
	.area_visual ul{height:515px;}
	.area_visual .visual_txt{padding-left:68px;}
}

@media all and (max-width:880px){
	.product{padding:50px 0 70px;}
	.quick .list li{width:50%;}
	.quick .list li div{height:266px; padding:40px 20px;}
	.quick .list li h4{background-position:55% 0;}
	.quick .list li div:hover{margin-top:0;}
	.info{padding:50px 0 80px;}
	.quick:before{bottom:-10%;}
	.area_visual ul{height:445px;}
	.area_visual .visual_txt{padding-left:48px;}
}

@media all and (max-width:800px){
	.product .list li .img{height:180px;}
	.product .list li .img span{top:20%; padding-top:50px;}
	.product .list li .img span:after{margin:10px auto 0;}
	.product .list li a:hover .img span{transform:scale(0.75);}
	.info .noti{float:none; width:100%;}
	.info .noti .list{margin-right:0;}
	.info .data{float:none; width:100%; margin-top:50px;}
	.info .data .list,
	.info .data h4{margin-left:0;}
}

@media all and (max-width:768px){
	.area_visual ul{height:395px;}
	.area_visual .visual_txt h2{font-size:35px;}
	.area_visual .visual_txt p{margin-top:10px; font-size:15px;}
	.area_visual .visual_txt a{width:180px; height:100%; margin-top:15px; padding:15px 0; font-size:14px; line-height:1.3em; box-sizing:border-box;}
}

@media all and (max-width:595px){
	.product .list li{width:100%; margin-top:40px;}
	.product .list li:first-child{margin-top:0;}
	.info .noti .btn_more{right:0;}
	.product .list li a{margin:0;}
	.area_visual ul{height:355px;}
	.area_visual .visual_txt{padding-left:28px;}
	.area_visual .visual_txt h2{font-size:30px;}
	.area_visual .visual_txt p{font-size:14px;}
	.area_visual .visual_txt a{width:160px; padding:12px 0; font-size:14px;}
}

@media all and (max-width:520px){
	.quick .list li{width:100%;}
	.quick .list li div{height:100%; padding:20px;}
	.quick .list li h4{background-position:60% 0;}
}

@media all and (max-width:490px){
	.area_visual ul{height:295px;}
	.area_visual .visual_txt h2{font-size:25px;}
	.area_visual .visual_txt p{margin-top:5px; font-size:13px;}
	.area_visual .visual_txt a{width:150px; padding:10px 0; font-size:13px;}
}

@media all and (max-width:420px){
	.info h4 span{display:none;}
	.info .list a{width:100%;}
	.info .list a + span{display:none;}
}