@charset "utf-8";

.main-visual {position:relative; width:100%; height:950px; overflow:hidden;}
.main-visual .main-video {position: absolute;bottom: 0;top:0;right:0;width: 100%;height: 100%;background-size: 100% 100%;background-color: black; background-position: center center;object-fit: cover; z-index:1;}
.main-visual .background {
	position:absolute; 
	top:0; 
	left:0;
	width:100%; height:100%;	
	background-position:50% 50%;
	background-repeat:no-repeat;
	background-size:cover;
	transform:scale(1.09);
    -ms-transform:scale(1.09); /* IE 9 */
    -moz-transform:scale(1.09); /* Firefox */
    -webkit-transform:scale(1.09); /* Safari and Chrome */
    -o-transform:scale(1.09); /* Opera */
	transition: all 2s ease-out 0s;
	transition-delay: 0.1s;
	z-index:0;
}
.main-visual.load .background {
	transform:scale(1);
    -ms-transform:scale(1); /* IE 9 */
    -moz-transform:scale(1); /* Firefox */
    -webkit-transform:scale(1); /* Safari and Chrome */
    -o-transform:scale(1); /* Opera */
}
.scroll-down {position:absolute; bottom:40px; right:14%; animation:2s scrollUpDown linear infinite; display:flex; align-items:center; justify-content:center; z-index:55; width:80px; height:80px; border:1px solid #fff; border-radius:100%;}

@keyframes scrollUpDown{
	0%,100% {transform:translateY(0);}
	50% {transform:translateY(10px);}
}

.main-product {position:relative;}
.main-product:before {content:"";position:absolute; top:-166px; left:0; width:30%; height:166px; background:#f5f5f5}
.main-product .contain {position:relative;}
.main-product .title {position:absolute; top:-166px; left:30px; height:166px; display:flex; align-items:center; width:467px; padding-left:44px; background:#fff; font-family: 'Montserrat', sans-serif; z-index:5}
.main-product .title h2 {font-size:24px; line-height:1.4em; letter-spacing:-.035em; font-weight:600;}
.main-product .title h2 span {display:block; font-size:14px; line-height:1.3em; font-weight:300; letter-spacing:-.035em;}
.main-product .row {position:relative; display:flex; }
.main-product .row:before {content:"";position:absolute; top:0; left:0; width:1px; height:100%; background:#f3f3f3}
.main-product .row .col-head {width:467px;  min-height:1px;}
.main-product .tit {position:sticky; position: -webkit-sticky; left:0; top:0; padding-top:100px;}
.main-product .tit h3 {font-size:18px; line-height:1.3em; margin-bottom:20px; font-weight:400; letter-spacing:-.035em;font-family: 'Montserrat', sans-serif;}
.main-product .tit .txt {font-size:45px; line-height:1.333em; font-weight:600; letter-spacing:-.035em; margin-bottom:150px;}
.main-product .tit .more {display:inline-block; position:relative; overflow:hidden; background:#1b1b1b; border-radius:20px; color:#fff; font-size:18px;line-height:50px; font-weight:700; padding:0 44px; margin-bottom:20px;}
.main-product .tit .more span {position:relative; z-index:1}
.main-product .tit .more:after {content:"";position:absolute; top:0; left:0; width:0; height:100%; background:#f08200; opacity:0; transition:0.3s; z-index:0}
.main-product .tit .more:hover:after {width:100%; opacity:1;}
.main-product .info {flex:1 1 auto; min-width:0; width:1%;}
.main-product .info .first-group {display:flex;}
.main-product .info .first-group .col {position:relative; width:50%; height:157px; border-bottom:1px solid #f3f3f3; border-left:1px solid #f3f3f3;}
.main-product .info .first-group .col:last-child:after {content:"";position:absolute; top:0; right:0; width:1px; height:100%; background:#f3f3f3;}
.main-product .info ul {display:flex; flex-wrap:wrap; border-left:1px solid #f3f3f3;}
.main-product .info ul li {width:50%; text-align:center; position:relative; border-bottom:1px solid #f3f3f3; border-right:1px solid #f3f3f3;}
.main-product .info ul li a {display:block; padding-bottom:55px;}
.main-product .info ul li .thumb {position:relative; height:0; padding-bottom:96.8%; margin-bottom:20px;overflow:hidden;}
.main-product .info ul li .thumb img {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; transition:0.3s;}
.main-product .info ul li a:hover .thumb img {transform:translate(-50%,-50%) scale(1.04,1.04); -ms-transform:translate(-50%,-50%) scale(1.04,1.04); -webkit-transform:translate(-50%,-50%) scale(1.04,1.04);}
.main-product .info ul li .tt {font-size:18px; line-height:1.3em; font-weight:700; letter-spacing:-.035em;}
.main-product .info ul li .tt .txt {font-size:90%; line-height:1.3em; color:#999;font-weight:400; letter-spacing:-.035em; margin-top: 0.2em}

.main-tools-logos {position:relative; overflow:hidden;}
.main-tools-logos:after {content:""; position:absolute; top:0; right:0; width:50%; height:100%; background:#f5f5f5; z-index:-1}
.main-tools-logos .wrap {background:#f5f5f5; padding:44px 45px 65px;}
.main-tools-logos p {font-size:18px; line-height:1.3em; margin-bottom:50px; letter-spacing:-.035em;}
.main-tools-logos .tools-logos-slider {padding-left:10px;}
.main-tools-logos .slick-list {margin:0 -62px;}
.main-tools-logos .slick-slide {padding:0 62px;}
.main-tools-logos .item {text-align:center;}
.main-tools-logos .item .pic {position:relative; height:0; padding-bottom:50%; overflow:hidden; background-repeat:no-repeat; background-position:50% 50%; background-size:contain; opacity:.3; transition:0.3s;}
.main-tools-logos .item .tit {font-size:16px; line-height:1.4em; opacity:.50;font-weight:500; letter-spacing:-.035em; transition:0.3s; padding-top:20px;}
.main-tools-logos .item.pic1 .pic {background-image:url('/html/_skin/public_html/images/main/tools_em1.png')}
.main-tools-logos .item.pic2 .pic {background-image:url('/html/_skin/public_html/images/main/tools_em2.png')}
.main-tools-logos .item.pic3 .pic {background-image:url('/html/_skin/public_html/images/main/tools_em3.png')}
.main-tools-logos .item.pic4 .pic {background-image:url('/html/_skin/public_html/images/main/tools_em4_new.png')}
.main-tools-logos .item.pic5 .pic {background-image:url('/html/_skin/public_html/images/main/tools_em5_new.png')}
.main-tools-logos .item.pic1 a:hover .pic {background-image:url('/html/_skin/public_html/images/main/tools_em1_on.png')}
.main-tools-logos .item.pic2 a:hover .pic {background-image:url('/html/_skin/public_html/images/main/tools_em2_on.png')}
.main-tools-logos .item.pic3 a:hover .pic {background-image:url('/html/_skin/public_html/images/main/tools_em3_on.png')}
.main-tools-logos .item.pic4 a:hover .pic {background-image:url('/html/_skin/public_html/images/main/tools_em4_new_on.png')}
.main-tools-logos .item.pic5 a:hover .pic {background-image:url('/html/_skin/public_html/images/main/tools_em5_new_on.png')}
.main-tools-logos .item a:hover .pic,
.main-tools-logos .item a:hover .tit {opacity:1;}

.main-creating {background:url('/html/_skin/public_html/images/main/creating_bg.jpg') 50% 50% no-repeat; background-size:cover; overflow:hidden;}
.main-creating .row {display:flex; color:#fff;}
.main-creating .col {width:33.333333%; position:relative;}
.main-creating .col:after {content:"";position:absolute; top:0; right:0; width:1px; height:100%; background:#fff; opacity:.1;}
.main-creating .col.pt {padding-top:135px;}
.main-creating .col .tit {font-size:50px; line-height:1.2em; padding-left:77px;font-weight:700; letter-spacing:-.015em;}
.main-creating .col .info {padding-left:31px;}
.main-creating .col .txt {font-size:18px; line-height:1.944em; font-weight:400; letter-spacing:-.015em; margin-bottom:150px;}
.main-creating .col .more {display:inline-block;  position:relative; border-radius:20px; color:#fff; overflow:hidden; border:1px solid rgba(255,255,255,.20); font-size:18px;line-height:50px;font-weight:700; padding:0 44px;}
.main-creating .col .more span {position:relative; z-index:1}
.main-creating .col .more:after {content:"";position:absolute; top:0; left:0; width:0; height:100%; background:#f08200; opacity:0; transition:0.3s; z-index:0}
.main-creating .col .more:hover:after {width:100%; opacity:1;}

.main-video {overflow:hidden;}
.main-video .row {position:relative; padding:95px 0;}
.main-video .line {position:absolute; top:0; left:0; width:1px; height:100%; background:#000; opacity:.05;}
.main-video .line.line2 {left:33.333333%}
.main-video .line.line3 {left:66.666666%}
.main-video .line.line4 {left:auto; right:0}
.main-video .title {text-align:center; position:relative; padding-bottom:35px; z-index:3}
.main-video .title h2 {font-size:50px; line-height:1.2em; font-weight:700; letter-spacing:-.015em; margin-bottom:10px;}
.main-video .title p {font-size:18px; line-height:1.2em; letter-spacing:-.015em; margin-bottom:40px;}
.main-video .title .more {position:absolute; bottom:-25px; left:0; width:100%; }
.main-video .title .more a {display:inline-block; position:relative; overflow:hidden; border-radius:20px; color:#fff; background:#000; font-size:18px;line-height:50px;font-weight:700; padding:0 44px;}
.main-video .title .more a span {position:relative; z-index:1}
.main-video .title .more a:after {content:"";position:absolute; top:0; left:0; width:0; height:100%; background:#f08200; opacity:0; transition:0.3s; z-index:0}
.main-video .title .more a:hover:after {width:100%; opacity:1;}
.main-video .video-content {position:relative;}
.main-video .swiper-slide {text-align:center;}
.main-video .swiper-slide.swiper-slide-next {margin-top:80px;}
.main-video .swiper-slide .thumb {position:relative; height:0; padding-bottom:70.4%; margin-bottom:25px; background:#000; overflow:hidden;}
.main-video .swiper-slide .thumb:after {content:"";position:absolute; top:0; left:0; width:100%; height:100%; background:url('/html/_skin/public_html/images/main/video_play.png') 50% 50% no-repeat; opacity:.50; transition:0.3s;}
.main-video .swiper-slide .thumb img {position:absolute; top:50%; left:50%; opacity:.30;transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; min-height:100%; object-fit:contain; transition:0.3s;}
.main-video .swiper-slide a:hover .thumb:after {opacity:.9;}
.main-video .swiper-slide a:hover .thumb img {transform:translate(-50%,-50%) scale(1.04,1.04); -ms-transform:translate(-50%,-50%) scale(1.04,1.04); -webkit-transform:translate(-50%,-50%) scale(1.04,1.04); opacity:.6;}
.main-video .swiper-slide .tit {font-size:18px; line-height:1.3em;}
.main-video .video-next,
.main-video .video-prev {position:absolute; top:28%; width:35px; height:72px; cursor:pointer;background-repeat:no-repeat; background-position:50% 50%; background-size:contain; border:0; z-index:10}
.main-video .video-next {right:-100px; background-image:url('/html/_skin/public_html/images/main/bt_next.png')}
.main-video .video-prev {left:-100px; background-image:url('/html/_skin/public_html/images/main/bt_prev.png')}
.main-video .swiper-button-disabled {opacity:0;}

.main-customer {background:url('/html/_skin/public_html/images/main/cus_bg.jpg') 50% 50% no-repeat; background-size:cover; overflow:hidden;}
.main-customer .row {display:flex;}
.main-customer .col {width:33.333333%; position:relative; color:#fff;}
.main-customer .col:first-child:after,
.main-customer .col:before  {content:"";position:absolute; top:0; width:1px; height:100%; background:#fff; opacity:.1;}
.main-customer .col:first-child:after {left:0;}
.main-customer .col:before {right:0}
.main-customer .padd {padding:140px 0;}
.main-customer .col a {display:block; width:100%; height:100%; position:relative;}
.main-customer .col a:after {content:"";position:absolute; top:0; left:0; width:100%; height:0; background:#001726; opacity:0; transition:0.3s; z-index:0}
.main-customer .col h2 {font-size:50px; line-height:1.2em; font-weight:700; margin-bottom:35px; letter-spacing:-.015em;}
.main-customer .col p {font-size:18px; line-height:1.667em; font-weight:400;letter-spacing:-.015em;}
.main-customer .col .content {padding:70px 65px 0; position:relative; z-index:2}
.main-customer .col .content i {margin-bottom:20px; display:block}
.main-customer .col .content .btns {display:flex; align-items:center;}
.main-customer .col .content .btns .tt {flex:1 1 auto; min-width:0; width:1%; font-size:20px; line-height:1.5em; font-weight:700;}
.main-customer .col .content .btns .arrow {position:relative; width:82px; height:51px; margin-left:20px; background:url('/html/_skin/public_html/images/main/cus_arrow.png') 50% 50% no-repeat; background-size:contain; transition:0.3s;}
.main-customer .col a:hover:after {opacity:.7; height:100%}