body{
font-weight: lighter;
}
main { overflow: hidden; zoom: 1 }

/*slide*/
.slide { position: relative; width: 100%; height: 630px }
.slide-main { max-width: 1230px; height: 100%; padding-bottom: 40px; display: flex; margin: 0 auto; flex-wrap: wrap; justify-content: space-between; align-items: center; z-index: 999; position: relative; box-sizing: border-box }
.slide-main .sub { flex: 0 0 50%; max-width: 50%; padding: 0 15px; box-sizing: border-box }
.slide-main .sub span { display: block; margin-bottom:25px; font-size: 40px; color: #000; position: relative }
.slide-main .sub span em { margin-left: 10px; font-style: normal; font-size: 20px }
/*.slide-main .sub span:before { content: ""; width: 20%; height: 4px; background: #065b9c; border-radius: 4px; position: absolute; bottom: -21px }*/
.slide-main .sub p { font-size: 18px; color: #000; line-height: 35px; margin-bottom: 68px; -webkit-line-clamp: 4; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis }
.slide-main .sub .btn-buy { display: block; width: 200px; height: 46px; background: linear-gradient(90deg,#0083ff, #00d1ff); border-radius: 23px; font-size: 14px; color: #fff; line-height: 46px; padding-left: 40px; position: relative; cursor: pointer }
.slide-main .sub .btn-buy:after { content: ""; background: url(../images/arrowright_white.png) no-repeat; width: 10px; height: 12px; background-size: 100% auto; position: absolute; right:40px; top: 50%; transform: translateY(-50%) }
.slide-main .smallbg { flex: 0 0 50%; max-width: 50%; max-height: 500px; padding: 0 15px; display: flex; justify-content: center; align-items: center }
.slide-main .smallbg img { display: inline-block; max-width: 100%; max-height: 500px }
.slide-prev, .slide-next { position: absolute; top: 50%; z-index: 9; width: 42px; height: 42px; margin-top: -30px; border: 2px solid #e5e5e5; border-radius: 50%; cursor: pointer; transition: 0.3s; background: #fff }
.slide-prev:after, .slide-next:after { content: ''; position: absolute; left: 50%; top: 50%; width: 33%; height: 33%; border-top: 2px solid #ccc }
.slide-prev { left: 0; transform: translateX(-100%) }
.slide-prev:after { border-left: 2px solid #ccc; transform: translate(-30%, -50%) rotate(-45deg) }
.slide-next { right: 0; transform: translateX(100%) }
.slide-next:after { border-right: 2px solid #ccc; transform: translate(-70%, -50%) rotate(45deg) }
.slide-prev:hover, .slide-next:hover { background-color: #004a83; border-color: #004a83; filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, .3)) }
.slide-prev:hover:after, .slide-next:hover:after { border-color: #fff }
.slide:hover .slide-prev { transform: translateX(100%) }
.slide:hover .slide-next { transform: translateX(-100%) }
.slide-page { display: block; position: absolute; bottom: 20px; left: 0; z-index: 2; width: 100%; height: 20px; text-align: center }
.slide-page .swiper-pagination-bullet { display: inline-block; background: rgba(0, 0, 0, 0.2); position: relative; height:14px; width: 14px; background: none; text-align: center; margin: 0 4px; cursor: pointer;background: #dfdfdf;
    border-radius: 50%; }
.slide-page .swiper-pagination-bullet:after { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, .3); position: absolute; left: 50%; top: 50%; margin-left: -3px; margin-top: -3px; -webkit-transition: all .35s ease-in-out; transition: all .35s ease-in-out; -webkit-transform: scale(0.8); transform: scale(1); opacity:1;display: none; }
.slide-page .swiper-pagination-bullet:before { content: ""; width: 100%; height: 100%; border: 1px solid rgba(0, 0, 0, .3); border-radius: 50%; position: absolute; left: 0; top: 0; opacity: .5 }
.slide-page .swiper-pagination-bullet svg circle { stroke-dasharray: 113px; stroke-dashoffset: 0px; stroke-linecap: round; stroke-width: 0; stroke: #004a83; fill: none; animation: none; animation-play-state: paused; animation-fill-mode: none }
.slide-page .swiper-pagination-bullet-active { color: #fff; background:#004a83;}
.slide-page .swiper-pagination-bullet-active:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); background: #004a83 }
.slide-page .swiper-pagination-bullet svg { position: absolute; top: 0; right: 0; width: 14px; height: 14px; -webkit-transform: rotateY(-180deg) rotateZ(-90deg); transform: rotateY(-180deg) rotateZ(-90deg);display: none; }
.slide-page .swiper-pagination-bullet.swiper-pagination-bullet-active svg circle { animation-play-state: running; stroke-width: 2px; -webkit-animation: countdown 7s linear forwards; animation: countdown 7s linear forwards }
@-webkit-keyframes countdown {
    from { -webkit-stroke-dashoffset: 113px; stroke-dashoffset: 113px }
    to { -webkit-stroke-dashoffset: 0; stroke-dashoffset: 0 }
}
@keyframes countdown {
    from { -webkit-stroke-dashoffset: 113px; stroke-dashoffset: 113px }
    to { -webkit-stroke-dashoffset: 0; stroke-dashoffset: 0 }
}

/*title*/
.title { text-align: center }
.title h2 { font-size: 40px; font-weight: bold; color: #000; line-height: 50px }
.title p { font-size: 18px; font-weight: 400; line-height: 28px; color: #999; padding-top: 20px; display: inline-block }
@media(max-width:768px) {
    .title h2 { font-size: 28px }
    .title p { font-size: 16px; padding-top: 6px; line-height: 20px }
}

/*more*/
.more { display: inline-block; width: 200px; height: 52px; border-radius: 26px; font-size: 16px; text-align: center; color: #272636; line-height: 52px; position: relative; cursor: pointer; background: #fff; -webkit-box-shadow: 0 0 0 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2) }
.more:after { content: ""; width:10px; height:12px; display: inline-block; vertical-align: middle; background: url(../images/arrowright.png) 0% 0% / 100% no-repeat; margin: -2px 0px 0px 8px; transition: 1s }
.more:hover:after { margin-left: 20px; background-image: url(../images/arrowright_hover.png); transition: 1s }

/*pro*/
.probox { padding-top: 100px; padding-bottom: 66px; background: #f7f7f7 }
.prolist .more { display: block; margin: 40px auto 0 }
.list { margin-top: 40px }
.list li { margin-top: 0.75rem; margin-bottom: 0.75rem }
.list li a { display: block; min-width: 0; background-color: #fff; transition: all .1s ease; -webkit-box-shadow: 0 0 0 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2); overflow: hidden;box-sizing: border-box;
    padding: 20px; }
.list li a:hover { background-color: #999; box-shadow: 0 0 15px 2px rgba(0, 0, 0, .3) }
.list li a figure { position: relative; margin: 0; overflow: hidden }
.list li a figure:before { content: ""; display: block; background-size: cover; background-position: 50%; padding-bottom: 70.416666% }
.list li a figure img { display: inline-block; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: all .6s ease; position: absolute; top: 0 }
.list li a:hover figure img { transform: scale3d(1.1, 1.1, 1) }
.list li a h3 { display: block; height: 60px; padding: 0 15px; line-height: 60px; text-align:center; font-size:15px; color: #333;}
.list li a:hover h3 { color: #fff; font-weight:bold;}



/*case*/
.casebox { padding-top: 100px; padding-bottom: 66px; background: #333 }
.casebox .title h2, .casebox .title p { color: #fff !important }
.caselist .more { display: block; margin: 40px auto 0 }
.caselist li a:hover { background-color: #fff }
.caselist li a:hover h3 { color: #004a83 }

/*news*/
.newsbox { padding-top: 100px; padding-bottom: 66px }
.newslist { margin-top: 40px }
.newslist li { margin-top: 0.75rem; margin-bottom: 0.75rem }
.newslist .item { display: block; padding-bottom: 20px; min-width: 0; background-color: #f7f7f7; transition: all .1s ease; /*-webkit-box-shadow: 0 0 0 10px 0 rgba(0, 0, 0, .2); box-shadow: 0 0 10px 0 rgba(0, 0, 0, .2); */overflow: hidden }
.newslist .item figure { position: relative; margin: 0; overflow: hidden }
.newslist .item figure:before { content: ""; display: block; background-size: cover; background-position: 50%; padding-bottom: 70.416666% }
.newslist .item figure img { display: inline-block; width: 100%; height: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); transition: all .3s ease; position: absolute; top: 0 }
.newslist .item:hover figure img { transform: scale3d(1.1, 1.1, 1) }
.newslist .item .info { margin-top: 15px; padding: 0 20px }
.newslist .item .info h3.tit { margin-top: 10px; font-weight: 600; font-size: 16px; color: #333; }

.newslist .item .info p.txt { margin-top: 15px;font-size: 14px;
    color: #666;}
.newslist .item .info time.date { display: block; margin-top: 10px }
.newslist .item:hover { color: #fff; background: #999; box-shadow: 0 0 10px 2px rgba(0, 0, 0, .2) }
.newslist .item:hover h3.tit { /*color: #fut_box4 ol li:hover{

    background: rgba(0,0,0,.05);*/color: #fff;font-weight:bold;

}

.newslist .item:hover .info p.txt{
	color: #fff;
}

.footnav dl.cpfot dd{
	padding-left:0;
}
.footnav dl.cpfot dt{
	padding-left:0;
}

/******************************/
@media only screen and (max-width:1400px){}
@media only screen and (max-width:1200px){}
@media only screen and (max-width:992px){}
@media only screen and (max-width:768px){
    .slide { height: 560px }
    .slide-main { padding-top: 30px; padding-bottom: 30px; flex-direction: column-reverse }
    .slide-main .sub { max-width: 100%; display: flex; flex-direction: column; justify-content: center }
    .slide-main .sub span { font-size: 28px }
    .slide-main .sub span em { font-size: 18px }
    .slide-main .sub p { line-height: 32px; margin-bottom: 20px; font-size: 16px; -webkit-line-clamp: 2 }
    .slide-main .sub .btn-buy { width: 120px; height: 30px; border-radius: 15px; font-size: 12px; line-height: 30px; padding-left: 20px }
    .slide-main .sub .btn-buy:after { width: 18px; height: 17px; right: 15px }
    .slide-main .smallbg { flex: initial; max-width: initial; max-height: 250px; width: 100% }
    .slide-main .smallbg img { max-height: 250px }
    .slide-main .smallbg img.hide { display: block !important }
    .slide-main .smallbg video, .slide-prev, .slide-next { display: none }
}
@media only screen and (max-width:576px){
    .more { width: 160px; height: 42px; border-radius: 21px; font-size: 16px; line-height: 42px }
    .prolist .more, .caselist .more { margin-top: 20px }

    .list { margin-top: 20px }
    .list li { flex: 0 0 50%; max-width: 50% }
    .list li a h3 { height: 42px; padding: 0 15px; line-height: 42px; font-size: 14px }
.caselist.list li{
	flex: 0 0 100%; max-width: 100% 
	
}
    .probox, .casebox, .newsbox { padding-top: 60px; padding-bottom: 36px }
    .newslist { margin-top: 20px }
}



   :root { --swiper-theme-color: #007aff }
    .swiper { margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; padding: 0; z-index: 1 }
    .swiper-vertical>.swiper-wrapper { flex-direction: column }
    .swiper-wrapper { position: relative; width: 100%; height: 100%; z-index: 1; display: flex; transition-property: transform; box-sizing: content-box }
    .swiper-android .swiper-slide, .swiper-wrapper { transform: translate3d(0px, 0, 0) }
    .swiper-pointer-events { touch-action: pan-y }
    .swiper-pointer-events.swiper-vertical { touch-action: pan-x }
    .swiper-slide { flex-shrink: 0; width: 100%; height: 100%; position: relative; transition-property: transform }
    .swiper-slide-invisible-blank { visibility: hidden }
    .swiper-autoheight, .swiper-autoheight .swiper-slide { height: auto }
    .swiper-autoheight .swiper-wrapper { align-items: flex-start; transition-property: transform, height }
    .swiper-3d, .swiper-3d.swiper-css-mode .swiper-wrapper { perspective: 1200px }
    .swiper-3d .swiper-cube-shadow, .swiper-3d .swiper-slide, .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top, .swiper-3d .swiper-wrapper { transform-style: preserve-3d }
    .swiper-3d .swiper-slide-shadow, .swiper-3d .swiper-slide-shadow-bottom, .swiper-3d .swiper-slide-shadow-left, .swiper-3d .swiper-slide-shadow-right, .swiper-3d .swiper-slide-shadow-top { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 10 }
    .swiper-3d .swiper-slide-shadow { background: rgba(0, 0, 0, .15) }
    .swiper-3d .swiper-slide-shadow-left { background-image: linear-gradient(to left, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) }
    .swiper-3d .swiper-slide-shadow-right { background-image: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) }
    .swiper-3d .swiper-slide-shadow-top { background-image: linear-gradient(to top, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) }
    .swiper-3d .swiper-slide-shadow-bottom { background-image: linear-gradient(to bottom, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)) }
    .swiper-css-mode>.swiper-wrapper { overflow: auto; scrollbar-width: none; -ms-overflow-style: none }
    .swiper-css-mode>.swiper-wrapper::-webkit-scrollbar { display: none }
    .swiper-css-mode>.swiper-wrapper>.swiper-slide { scroll-snap-align: start start }
    .swiper-horizontal.swiper-css-mode>.swiper-wrapper { scroll-snap-type: x mandatory }
    .swiper-vertical.swiper-css-mode>.swiper-wrapper { scroll-snap-type: y mandatory }
    .swiper-centered>.swiper-wrapper::before { content: ''; flex-shrink: 0; order: 9999 }
    .swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child { margin-inline-start: var(--swiper-centered-offset-before) }
    .swiper-centered.swiper-horizontal>.swiper-wrapper::before { height: 100%; min-height: 1px; width: var(--swiper-centered-offset-after) }
    .swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child { margin-block-start: var(--swiper-centered-offset-before) }
    .swiper-centered.swiper-vertical>.swiper-wrapper::before { width: 100%; min-width: 1px; height: var(--swiper-centered-offset-after) }
    .swiper-centered>.swiper-wrapper>.swiper-slide { scroll-snap-align: center center }
    .swiper-fade.swiper-free-mode .swiper-slide { transition-timing-function: ease-out }
    .swiper-fade .swiper-slide { pointer-events: none; transition-property: opacity }
    .swiper-fade .swiper-slide .swiper-slide { pointer-events: none }
    .swiper-fade .swiper-slide-active, .swiper-fade .swiper-slide-active .swiper-slide-active { pointer-events: auto }


    /*product*/
    .product { position: relative; color: #fff; }
    .product .product-item { height: 100vh; padding: 0 10vw; box-sizing: border-box; display: flex !important; flex-direction: column; justify-content: center; align-items: flex-start; }
    .product-item-cover{ background-position: 50%; background-repeat: no-repeat; background-size: cover; }
    .product .product-item h1 { line-height: 1.3; font-size: 48px; margin-bottom: 24px; font-weight: 600; }
    .product .product-item h3 { font-size: 32px; margin-bottom: 24px; }
    .product .product-item h5 { font-size: 20px; margin-bottom: 60px; }
    .product .the_button { display: flex; align-items: center; justify-content: center; padding: 10px 20px; font-size: 14px; transition: all 225ms; background: transparent; cursor: pointer; border: 1px solid; -o-border-image: var(--border-gradient-blue) !important; border-image: linear-gradient(90deg, #0083ff, #00d1ff) 1 1 !important; }
    .product .the_button .gradient_text { background-image: linear-gradient(90deg, #0083ff, #00d1ff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .product .the_button svg.svg-icon { width: 12px; height: 12px; margin-left: 12px; vertical-align: -0.15em; fill: #00d1ff; overflow: hidden; }
    .product .the_button:hover:not(:disabled) { background: linear-gradient(90deg, #0083ff, #00d1ff); box-shadow: rgba(0, 3, 10, 0.1) 0 0 20px; }
    .product .the_button:hover:not(:disabled) span { color: #fff; background: none; -webkit-text-fill-color: #fff; }
    .product .the_button:hover:not(:disabled) .svg-icon { fill: #fff; }
    .product-page { position: absolute; }
    @media (min-width: 992px){
        .product-page { top: 50%; right: 10vw; z-index: 1; transform: translateY(-50%); }
    }
    .product-pageitem { width: 380px; padding: 20px; display: flex; align-items: center; border: 1px solid transparent; border-bottom: 1px solid #f3f5f8; box-sizing: border-box; cursor: pointer; }
    .product-pageitem img { display: block; width: 150px; height: 90px; margin-right: 20px; border-radius: 8px; background-color: #383e41; }
    .product-pageitem section { flex: 1; text-align: left; }
    .product-pageitem section h3 { font-weight: 600; font-size: 18px; margin-bottom: 20px; }
    .product-pageitem section p { font-size: 16px; }
    .product-pageitem:hover, .product-pageitem.is-active { -o-border-image: linear-gradient(90deg, #0083ff, #00d1ff) 1 1; border-image: linear-gradient(90deg, #0083ff, #00d1ff) 1 1; }
    .product-pageitem:hover section h3, .product-pageitem.is-active section h3, .product-pageitem:hover section p, .product-pageitem.is-active section p { background-image: linear-gradient(90deg, #0083ff, #00d1ff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

    @media only screen and (max-width:992px) {
        .product .product-item { padding: 0 20px; }
        .product .product-item h1 { font-size: 24px; margin-bottom: 14px; margin: 0;
    top: 32px;
    position: absolute;
    left: 20px;}
        .product .product-item h3 { font-size: 16px; margin-top: 20px; margin-bottom: 16px;margin: 0;
}
        .product .product-item h5 { font-size: 14px; margin-bottom: 16px;    top: 70px;
    position: absolute;
    left: 20px;  }
        .product .the_button { padding: 8px 14px;margin: 0;
 position: absolute;
    top: 104px;}
        .product-page { width: 100%; top: auto; right: 0; left: 0; bottom: 40px; z-index: 1; display: flex !important; flex-direction: row; justify-content: flex-start; overflow-x: auto; }
        .product-page::-webkit-scrollbar { width: 4px; height: 4px }
        .product-page::-webkit-scrollbar-button:vertical { display: none }
        .product-page::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background-color: transparent; }
        .product-page::-webkit-scrollbar-thumb { border-radius: 10px; background-color: rgba(255, 255, 255, .3) }
        .product-page::-webkit-scrollbar-thumb:vertical:hover { background-color: rgba(255, 255, 255, .35) }
        .product-page::-webkit-scrollbar-thumb:vertical:active { background-color: rgba(255, 255, 255, .38) }
        .product-pageitem { min-width: 380px; border: 1px solid #f3f5f8; margin: 0 20px; }
		
		
		.newslist .item .info p.txt{
			color:#000;
		}
		.newslist .item .info time.date{
			color:#000;
		}
	
    }

.caselist.list ul li a:hover{
	background-color:#999;
}
.caselist.list ul li a:hover h3{
	color:#fff;
}