@charset "utf-8";

/* 
 * main CSS Document
 */

/* visual */
.area_visual{position:relative;}
.area_visual .list li,
.area_visual .bx-viewport{height:-webkit-calc(100vh - -0px * 1); height:calc(100vh - -0px * 1);}
.area_visual .list li{background-size:cover; background-position:50% 50%; background-repeat:no-repeat;}
.area_visual .list li > i{display:block; position:relative; z-index:-1; width:100%; height:100%; background-size:cover; background-position:50% 50%; transform:scale(1); animation:visualScale 13s ease 0s forwards;}
.area_visual .txt{margin-top:60px;}
.area_visual .inr_visual{position:absolute;top: 29%;left:0;z-index:52;width:100%;}
.area_visual .inr_visual *{color:#fff;}
.area_visual .inr_visual .txt h2{line-height: 1.1;font-weight:300;font-size: 63px;letter-spacing:-0.06rem;}
.area_visual .inr_visual .txt h2 em{font-weight:200; letter-spacing:-0.09rem;}
.area_visual .inr_visual .txt h2 em b{display:inline-block;}
.area_visual .inr_visual .txt p{margin-top:26px; font-size:17px;}
.area_visual .inr_visual .total{position:relative; top:-3px; padding-left:88px;}
.area_visual .inr_visual .total i{display:inline-block; padding:0 10px;}

.area_quick{position:absolute; bottom:0; left:0; z-index:51;}
.area_quick li a{display:block;}
.area_quick li a{display:block; position:relative; padding:30px 25px 60px;}
.area_quick li{position:relative; float:left; z-index:999; background:#fff; box-shadow:6px 7px 29px 0px rgba(0, 0, 0, 0.4); min-width:260px;}
.area_quick li i{display:block; font-weight:600; font-size:13px; color:#cb1919;}
.area_quick li em{display:block;margin-top:7px;font-weight:700;font-size:18px;color:#222;letter-spacing: -0.03rem;}
.area_quick li a:after{content:""; position:absolute; right:25px; bottom:30px; width:7px; height:11px; background:url(../images/main/arr_quick01.svg) no-repeat 50% 50%;}
.area_quick li:last-child *{color:#fff;}
.area_quick li:last-child a:after{background-image:url(../images/main/arr_quick02.svg);}
.area_quick li:first-child{z-index:99;}
.area_quick li:last-child{z-index:1;}

a.scrolldown{position:absolute; overflow:hidden; bottom:-40px; left:calc(50% - 10px); z-index:98; font-size:12px; color:#fff; cursor:pointer;}
a.scrolldown span{display:block; position:relative; overflow:hidden; width:1px; height:124px; margin:0 auto; margin-top:10px; background:rgba(255,255,255,0.2);}
a.scrolldown span:after{content:""; position:absolute; width:1px; height:20px; background:#fff; animation:scrollanimation 1.7s infinite; -webkit-animation:scrollanimation 1.7s infinite;}
a.scrolldown > i{display:block; font-size:13px;}

.bx-controls{position:absolute;top: 29%;z-index:53;width:100%;}
.bx-controls > .bx-pager{width:1200px; margin:0 auto;}
.bx-controls > .bx-pager a{display:block; float:left; overflow:hidden; width:12px; height:12px; margin:0 3px; border:1px solid #222; text-indent:-9999px; transition:all 0.4s ease-out 0s; border-radius:40px;}
.bx-controls > .bx-pager > div{float:left; margin-right:10px;}
.bx-controls > .bx-pager a.active{background:#222;}

.area_visual .bx-controls > div{position:relative; width:1200px; margin:0 auto;}
.area_visual .bx-controls-direction a.bx-prev:After{transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.area_visual .bx-controls-direction a:hover{opacity:1; transform:scale( 1.1 );}
.area_visual .bx-controls-direction a{display:block; position:absolute; opacity:0.7; overflow:hidden; width:11px; height:18px; text-indent:-9999px; transition:all 0.2s ease-out 0s; transform:scale( 1.0 );}
.area_visual .bx-controls-direction a:after{content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:url(../images/main/arr_visual.svg) no-repeat 50% 50%;}
.area_visual .bx-controls-direction a.bx-next{left:50px;}
.area_visual .bx-controls-direction a.bx-prev{left:0;}
.area_visual .box_total{position:absolute; top:765px; left:0; z-index:999; width:100%;}
.area_visual .box_total > div{width:1400px; margin:0 auto;}
.area_visual .box_total > div *{font-weight:bold; font-size:14px; color:#fff;}
.area_visual .box_total > div em{position:relative; margin-right:24px;}
.area_visual .box_total > div em:after{content:""; position:absolute; opacity:0.4; top:4px; right:-13px; width:2px; height:10px; background:#fff; border-radius:10px;}
.area_visual .box_total > div span{opacity:0.5;}

/* product */
.tit_main_content h3{font-weight:300; font-size:38px; color:#222; letter-spacing:-0.07rem;}
.tit_main_content h3 i{display:block; margin-bottom:1px; font-weight:700; font-size:15px; color:#222; letter-spacing:0;}
.tit_main_content p{margin-top:14px; font-weight:300; color:#666;}

.area_product{overflow:hidden;}
.area_product a.btn_basic{margin-top:64px;}
.area_product [data-pro]{position:relative; float:left; height:569px;}
.area_product [data-pro="tit"]:after{content:""; position:absolute; top:0; left:0; z-index:52; width:100%; height:120px; background:#fff;}
.area_product [data-pro="content"]{position:relative; overflow:hidden; z-index:9; width:-webkit-calc(100% - 597px); width:calc(100% - 597px); padding:0 0 77px 77px; background:#f9f9f9;}
.area_product [data-pro="tit"] > *{margin-left:70px;}
.area_product [data-pro="tit"] h3{margin-top:165px;}
.area_product [data-pro="content"] .inr > *{display:block; text-align:left;}
.area_product [data-pro="content"] .inr i{margin-top:22px; font-size:15px; color:#cb1919;}
.area_product [data-pro="content"] .inr em{margin-top:-1px; font-weight:800; font-size:19px; color:#222;}
.area_product [data-pro="tit"],
.area_notice:before{width:520px;}
.area_product [data-pro="content"] > div:first-child{padding-top:120px;}
.area_product [data-pro="content"] div[class^="swiper-button-"]{position:absolute; float:right; bottom:0; left:0; z-index:99; width:77px; height:77px; background:#cb1919; background:#cb1919 url(../images/main/arr_quick02.svg) no-repeat 50% 50% / 9px 14px !important; cursor:pointer; outline:none;}
.area_product [data-pro="content"] div.swiper-button-next{left:77px !important; background:none !important; background:url(../images/main/arr_quick01.svg) no-repeat 50% 50% / 9px 14px !important;}
.area_product [data-pro="content"] div.swiper-button-prev{transform:rotate(180deg); -webkit-transform:rotate(180deg);}
.area_product .img{display:block; position:relative; overflow:hidden; width:360px; padding-top:76%; background:#fff url(../images/board/no_image.gif) no-repeat 50% 50%; text-align:center; transition:opacity 0.5s ease-out 0s;}
.area_product .img img{position:absolute; top:50%; left:0; width:100%; transition:all 0.5s ease-out 0s; transform:translateY(-50%);}

/* company  */
.main .area_company{overflow:hidden; margin-top:-77px;}

.area_company [data-comapany]{float:left; width:50%;}
.area_company [data-company]{position:relative; float:left; overflow:hidden; width:50%; height:460px;}
.area_company [data-company] *{color:#fff;}
.area_company [data-company] .txt{display:block; position:absolute; top:207px; right:162px; text-align:left;}
.area_company [data-company] .txt *{display:block; text-align:left;}
.area_company [data-company] .txt:after{content:""; position:absolute; top:96px; left:0; z-index:99; width:18px; height:10px; background:url(../images/main/arr_company.svg) no-repeat 50% 50%;}
.area_company [data-company] em{line-height:1; font-weight:800; font-size:40px; letter-spacing:-0.03rem; text-indent:-3px;}
.area_company [data-company] i{font-weight:300; font-size:16px;}
.area_company [data-company] a{display:block; width:100%; height:100%;}
.area_company [data-company] a > i{display:block; position:absolute; top:0; right:0; bottom:0; left:0; z-index:-1; width:100%; height:100%; background:no-repeat center center; background-size:cover; transition:all 2s; transform:scale(1) rotate(0deg); -webkit-transform:scale(1) rotate(0deg); -ms-transform:scale(1) rotate(0deg); -webkit-transition:all 2s;}
.area_company [data-company] a:hover > i{transform:scale(1.05) rotate(0.01deg); -webkit-transform:scale(1.05) rotate(0.01deg); -ms-transform:scale(1.05) rotate(0.01deg);}

/* notice */
.area_notice{position:relative;padding:120px 0;text-align:center;overflow: hidden;}
.area_notice .tit_main_content{margin-bottom:39px; text-align:center;}
.area_notice ul{text-align:left;}
.area_notice ul li{position:relative;float:left;top:0;width:-webkit-calc((100%/3) - 20px);width:calc((100%/3) - 20px);background:#fff;transition:all 0.4s ease-out 0s;}
.area_notice ul li a{display:block;padding:45px 37px;border:1px solid #e6e6e6;transition:all 0.4s ease-out 0s;min-height: 144px;}
.area_notice ul li:nth-child(1)~li{margin-left:30px;}
.area_notice ul li em{font-weight:500; font-size:18px; color:#222; letter-spacing:-0.03rem;}
.area_notice ul li p{display:-webkit-box; overflow:hidden; margin-top:23px; font-weight:300; font-size:15px; color:#666; word-break:break-word; -webkit-line-clamp:2; -webkit-box-orient:vertical; text-overflow:ellipsis; max-height:45px;}
.area_notice ul li i{display:block; margin-top:29px; font-weight:700; font-size:14px; color:#222;}
.area_notice a.btn_basic{margin-top:40px;}
.area_notice:before{content:""; position:absolute; top:0; left:0; z-index:-1; height:100%; background-image:url(../images/main/bg_notice.jpg);}
.area_notice ul li:hover a{border-color:#cb1919;}
.area_notice ul li:hover a em{color:#cb1919;}
.area_notice ul li:hover{top:-10px; box-shadow:11px 14px 35px 0px rgba(203, 25, 25, 0.1);}
.area_notice .box_btn{float:left; width:100%;}

@media screen and (max-width:1680px){
	.area_notice:before{width: 28vw;}
}

@media screen and (max-width:1280px){
	.main .bx-controls{left:40px; width:auto;}
	a.scrolldown{right:50px; left:auto;}
	.area_product [data-pro="tit"],
	.area_notice:before{width:370px;}
	.area_product [data-pro="content"]{width:-webkit-calc(100% - 447px); width:calc(100% - 447px);}
	.area_product [data-pro="tit"] > *{margin-left:40px;}
	.tit_main_content h3{font-size:33px;}
	.area_notice ul li a{padding:35px 27px;}
}

@media screen and (max-width:1023px){
	.area_visual .inr_visual .txt h2{font-size:52px;}
	
	.area_product [data-pro="tit"],
	.area_notice:before{width:100%;}
	.area_product [data-pro]{height:auto;}
	.area_product [data-pro="tit"] h3{margin-top:65px;}
	.area_product [data-pro="tit"]:after{z-index:-1;}
	.area_product a.btn_basic{margin-top:34px;}
	.area_product [data-pro="content"]{width:100%; padding:0 0 137px 40px; background:#fff;}
	.area_product [data-pro="content"] > div:first-child{padding-top:50px;}
	
	.main .area_company{margin-top:0;}
	
	.area_company [data-company]{height:280px;}
	.area_company [data-company] .txt{top:57px; right:52px;}
	.area_company [data-company] em{font-size:31px;}
	
	.area_notice ul li:nth-child(1)~li{margin-left:15px;}
	.area_notice ul li{width:-webkit-calc((100%/3) - 10px); width:calc((100%/3) - 10px);}
	.area_notice ul li a{padding:25px 22px;}
	.area_notice:before{background-size:cover; background-position:50%50%;}
}

@media screen and (max-width:767px){
	.area_visual .inr_visual .txt h2{font-size:28px;}
	.area_visual .inr_visual .txt p{margin-top:14px; font-size:12px;}
	.area_visual .bx-controls-direction a.bx-next{left:36px;}
	.main .bx-controls{left:15px; width:auto;}
	.area_visual .inr_visual .total{top:-1px; padding-left:66px;}
	.area_visual .txt{margin-top:40px;}
	
	.area_quick{display:none;}

	a.scrolldown{right:auto; left:calc(50% - 10px);}

	.area_product [data-pro="tit"] > *{margin-left:15px;}
	.area_product [data-pro="tit"] h3{margin-top:45px;}
	.area_product a.btn_basic{margin-top:19px;}

	.tit_main_content h3{font-weight:600; font-size:22px;}
	.tit_main_content h3 i{font-size:13px;}
	.tit_main_content p{margin-top:9px;}
	
	.area_product [data-pro="content"]{padding:0 0 77px 15px;}
	.area_product [data-pro="content"] > div:first-child{padding-top:30px;}
	.area_product .img{width:100%;}
	.area_product [data-pro="content"] .inr i{margin-top:15px; font-size:13px;}
	.area_product [data-pro="content"] .inr em{font-size:17px;}
	.area_product [data-pro="content"] div[class^="swiper-button-"]{width:47px; height:47px; background-size:9px 11px !important;}
	.area_product [data-pro="content"] div.swiper-button-next{left:47px !important;}
	
	.area_company [data-company]{width:100%; height:170px;}
	.area_company [data-company] .txt:after{top:58px;}
	.area_company [data-company] em{font-size:20px; text-indent:0;}
	.area_company [data-company] i{font-size:13px;}
	.area_company [data-company] .txt{top:37px; right:32px; width:137px;}

	.area_notice{padding:40px 0 70px;}
	.area_notice ul li:nth-child(3){display:none;}
	.area_notice ul li{width:-webkit-calc((100%/2) - 10px); width:calc((100%/2) - 10px);}
	.area_notice ul li a{padding:19px 18px;min-height: 124px;}
	.area_notice ul li em{font-weight: 600;font-size: 15px;}
	.area_notice ul li p{margin-top:13px;font-size:13px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;}
	.area_notice ul li i{font-size:12px;}
	.area_notice .tit_main_content{margin-bottom:19px;}
	.area_notice a.btn_basic{margin-top:28px;}
	.area_notice ul li:nth-child(2){margin-right:0;}
	.area_notice ul li:nth-child(1)~li{margin-left:8px;}
	.area_notice ul li{width:-webkit-calc((100%/2) - 4px); width:calc((100%/2) - 4px);}

	.main [data-attr="write_date"]{padding: 0 0 !important;}
}

@keyframes scrollanimation {
  from {top:0%;}
  to {top:105%;}
}
@-webkit-keyframes scrollanimation {
  from {top:0%;}
  to {top:105%;}
}
@keyframes visualScale{
	0%{transform:scale(1.13) rotate(.001deg);}
	100%{transform:scale(1) rotate(.001deg);}
}