
/* CSS Document */



.container-s{max-width:1600px;margin:0 auto;padding: 1.3rem 0;padding-bottom: 0.8rem;}


.chanpin_box {background: url(../../static/img/product-bg.jpg) center no-repeat ;background-size: cover;}
.flex{display: flex;}
.flex-sbc{display: flex; justify-content: space-between;  align-items: center;}
.flex-c{display: flex; align-items: center;}
.flex-cc{display: flex; align-items: center; justify-content: center;}
.flex-ccc{display: flex; align-items: center; justify-content: center; flex-direction: column;}
.flex-dcsb{display: flex; flex-direction: column; justify-content: space-between;}
.flex-sb{display: flex; justify-content: space-between;}
.flex-sbw{display: flex;justify-content: space-between; flex-wrap: wrap;}
.flex-cw{display: flex; align-items: center; flex-wrap: wrap;}
.flex-dc{display: flex; flex-direction: column;}
.flex-w{display: flex; flex-wrap: wrap;}

/* 首页产品列表页 */
.indexOneTle {position: relative; z-index: 1;}
.indexOneTle .en {font-size:0.19rem;font-weight: 700; color: #333;   font-family: Arial;margin-bottom: 0.2rem;}
.indexOneTle h3 {font-size: 0.45rem; color: #333; font-weight: bold;margin-bottom: 0.15rem;}
.indexOneTle i {display: block;width: 0.55rem;height: 2px;background: #0e6eb8;border-radius: 0.125px;}
.indexOne1_1 {background: url(../image/product-bg.jpg) no-repeat center; background-size: cover;}
.indexOne1_1 .box {display: flex; justify-content: space-between; align-items: flex-start;}
.indexOne1_1 .tle {display: flex; justify-content: space-between; }
/* .indexOne1_1 .tle ul {display: flex; width: 43%; justify-content: space-between;align-items: center;} */
.indexOne1_1 .tle ul {display: flex; width: 55%; justify-content: space-between;align-items: center;}
.indexOne1_1 .tle ul li a {display: block;  color: #020202; transition: 0.6s;    padding: 0.15rem 0.35rem;    font-size: 0.25rem;font-weight: bold;border-radius: 0.5rem;}
.indexOne1_1 .tle ul li.on a,.indexOne1_1 .tle ul li:hover a {background: #0e6eb8; color: #fff;}


.indexOne1_1 .box {margin-top: 3.3125px;}
.inOneSwiper2 {width: 100%;margin: 0;}
.indexOne1_1 .box .le {width: 30%;}
.inOneSwiper2 .slideBox {display: flex;    justify-content:flex-start;}
/* .inOneSwiper2 .slideBox .con {width: 65%;display: flex;flex-direction: column; justify-content: center;} */
.inOneSwiper2 .slideBox .con {width: 65%;display: flex;flex-direction: column; justify-content: center;padding-left: 0.2rem;}
/* .inOneSwiper2 .imgBox {width: 31%;} */
.inOneSwiper2 .imgBox {width: 32%;}
.inOneSwiper2 .imgBox img {width: 100%;}
.inOneSwiper2 .slideBox h4 {font-size: 0.3rem;color: #333; font-weight: bold; margin-bottom: 1.1875px;  white-space: nowrap; /* 不换行 */
            overflow: hidden; /* 溢出部分隐藏 */
            text-overflow: ellipsis; /* 显示省略号 */}
/* .inOneSwiper2 .slideBox .con p{display: flex; margin-bottom: 0.3125px; align-items: flex-start;margin: 0.5rem 0;line-height: 30px;} */
.inOneSwiper2 .slideBox .con p{display: flex; margin-bottom: 0.3125px; align-items: flex-start;margin: 0.5rem 0;line-height: 30px;width: inherit;}
.inOneSwiper2 .slideBox .con p  em{display: block; font-size: 1px; color: #666; margin-left: 0.375px;}

/* .more1 { width: 160px;background: #0e6eb8;border-radius: 50px; margin-top:10px;} */
.more1 { width: 160px;background: #0e6eb8;border-radius: 50px; margin-top:10px;margin-bottom: 10px;}
.more1 span {color: #fff; margin-right: 1px; transition: .5s; position: relative; z-index: 1;    display: block; font-size:0.15rem; line-height: 3.4375px;}
.more1:hover span {margin-right: 1.625px;}




.inOneSwiper2 .slideBox dl {margin-top: .4px; display: flex; justify-content: space-between;}
.inOneSwiper2 .slideBox dl .icBox {width: 0.5px;height: 0.5px;border: 0.01px solid #d2d7e0; border-radius: 0.1px; margin: auto; transition: .5s;}
.inOneSwiper2 .slideBox dl dd:hover .icBox {background: #0e6eb8; border-color: #c50e04;}
.inOneSwiper2 .slideBox dl dd:hover .icBox img {filter: brightness(100); -webkit-filter:brightness(100);}
.inOneSwiper2 .slideBox dl span {color: #949494; display: block; margin-top: .1px;}
.inOneSwiper2 .slideBox dl dd img {max-width: 50%; transition: .5s;}
.inOneSwiper2 .slideBox dl dd:hover img {transform: rotateY(180deg);}

.inOneSwiper1Box { margin-top: 1.875px; background: #fff;width: 16.45%;padding: 2.25px 2% 3.4%;border-radius: 0.625px;box-shadow: 0px 0px 0.35px 0px rgba(226,225,225,0.33);box-sizing: border-box;}
.inOneSwiper1Box h4 {display: block;font-size: 1.5px;color: #333333;padding-bottom: 0.375px;border-bottom: 1px solid #DDDDDD;}
.inOneSwiper1 {margin-top: 2.0625px; overflow: visible;}
.inOneSwiper1 .swiper-slide { height: auto !important; margin-bottom: 1.5px;}
.inOneSwiper1 .swiper-slide a {display: flex; justify-content: space-between; align-items: center;color: #595959; font-size: 1px;}
.inOneSwiper1 .swiper-slide img {filter: grayscale(100%); -webkit-filter:grayscale(100%); opacity: .5;}
.inOneSwiper1 .swiper-slide a:hover {color: #0e6eb8;}
.inOneSwiper1 .swiper-slide a:hover img {filter: none; -webkit-filter:none; opacity: 1;}
.inOneSwiper1 .swiper-slide.swiper-slide-thumb-active a {color: #0e6eb8;}
.inOneSwiper1 .swiper-slide.swiper-slide-thumb-active img {filter: none; -webkit-filter:none; opacity: 1;}
.inOneSwiper2 .swiper-pagination {display: flex; bottom: 0;}
.inOneSwiper2 .swiper-pagination div {margin: 0 .15px; position: relative; width: 34px;height: 34px;border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.inOneSwiper2 .swiper-pagination div {opacity: 1; border: 0; background: none;}
.inOneSwiper2 .swiper-pagination span {width: auto; height: auto; background: none; opacity: 0; font-size: 0.875px;color: #8C97A9;}
.inOneSwiper2 .swiper-pagination i {width: 0.375px;height: 0.375px; background: #aaaaaa; display: block; border-radius: 50%;  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: 1;}
.inOneSwiper2 .swiper-pagination .fcircle1 {position: absolute;left: 0;top: 0;width: 100%;height: 100%;}
.inOneSwiper2 .swiper-pagination .fcircle1 circle {stroke-width: 20px!important;}
.inOneSwiper2 .swiper-pagination svg {width: 100%; opacity: 0;}
.inOneSwiper2 .swiper-pagination .fcircle1 circle:nth-child(1) {stroke: #D2D7E0;}
.inOneSwiper2 .swiper-pagination .fcircle1 circle:nth-child(2) {stroke: #0e6eb8; }
@keyframes svgcircle1 {from {stroke-dasharray: 0 800;}to { stroke-dasharray: 800 800;}}
.inOneSwiper2 .swiper-pagination .swiper-pagination-bullet-active svg {opacity: 1;}
.inOneSwiper2 .swiper-pagination .swiper-pagination-bullet-active span {opacity: 1;}
.inOneSwiper2 .swiper-pagination .swiper-pagination-bullet-active i {opacity: 0;}
.inOneSwiper2 .swiper-pagination .swiper-pagination-bullet-active .fcircle1 circle:nth-child(2) {animation: svgcircle1 5.5s linear forwards;}
.indexOne1_1 .cell {display: none;max-width: 100%;margin:0 auto}
.indexOne1_1 .cell.on {display: block;}





/* 激光塑料焊接应用案例 */
.app {padding: 5.3125px 0 8.8125px;}
.app .container-s{max-width: 1600px;}
.app-list ul li{width: 15.6%; position: relative;}
.app-list ul li .pic{overflow: hidden;}
.app-list ul li .pic img{display: block; width: 100%;  -webkit-transition: opacity 1s, -webkit-transform 1s; transition: opacity 1s, transform 1s; -webkit-backface-visibility: hidden;backface-visibility: hidden;opacity: 1;}
.app-list ul li:hover .pic img{-webkit-transform: scale3d(1.1,1.1,1);transform: scale3d(1.1,1.1,1);-webkit-transition: opacity 1s, -webkit-transform 1s;transition: opacity 1s, transform 1s;-webkit-backface-visibility: hidden;backface-visibility: hidden;}
.app-list ul li .info{position: absolute; bottom: 0; width: 100%;    transition: .5s; padding:  0.25rem 11%; box-sizing: border-box; }
.app-list ul li .name{color: #fff; transform: translateY(-20px); transition: 0.6s;}
.app-list ul li h3{display: block; font-size: 0.25rem;  font-weight: bold;}
.app-list ul li span{display: block; font-size: 0.15rem; line-height: 0.4rem; min-height: 2px;}
.app-list ul li i {margin-left: 1px; opacity: 0; transform: translateX(-1px); transition: .5s;position: relative; z-index: 1; }
.app-list ul li:hover  i {opacity: 1; transform: translateX(0px);transition-delay: .3s;}
.app-list ul li:hover .info{background: #0e6eb8;}
.app-list ul li:hover  .name{transform: translateY(0);}





















