/* 产品详情 X2 */
.cor-fff {color: #fff;}
.more1 {background: linear-gradient( 270deg, rgb(71,66,146) 0%, rgb(43,132,192) 100%);}
.more1::before {background: linear-gradient( 270deg, rgb(43,132,192) 0%, rgb(71,66,146) 100%);}

.proX2-banner {height: 100vh; position: relative;}
.proX2-banner picture img {width: 100%; height: 100%; object-fit: cover; display: block; min-height: 7rem;}
.proX2-banner .p1 {font-size: .74rem; font-weight: 700; line-height: 1.3;}
.proX2-banner .p1 p {color: #fff;}
.proX2-banner .p2 {font-size: var(--font28); margin-top: .4rem;}
.proX2-banner .p2 p {color: #fff;}
.proX2-banner .more {margin-top: .5rem;}

.proX2Tle {font-size: .54rem; font-weight: 700;}

.proX2One {position: relative;}
.proX2One li {height: 150vh;}
.proX2One li .container {position:relative; z-index:1;}
.proX2One li .style-sticky {position: sticky; top: 0; height: 100vh; z-index: 1;}
.proX2One li .bjBox {width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 0;}
.proX2One li .bjBox img {width: 100%; height: 100%; object-fit: cover; display: block;    object-position: right;}
.proX2One li .box {padding-top: 1.5rem;}
.proX2One li .tit {font-size: .55rem; font-weight: 700; color: #fff;}
.proX2One li .text {font-size: var(--font30); margin-top: .4rem;}
.proX2One li .text p {color: #fff;}

.proX2Two {padding: 1rem 0 2rem; max-width: 1920px; margin: auto;}
.proX2Two .proX2Tle {font-size: .45rem; font-weight: 700;}
.proX2Two .box {padding: 0 3.5%; box-sizing: border-box;}
.proX2Two ul {margin-top: .9rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem; grid-template-rows: repeat(2, 50%);}
.proX2Two li {position: relative; z-index: 1; min-height: 4.64rem; border-radius: .1rem; overflow: hidden;}
.proX2Two li:nth-child(1) {grid-row: 1 / 3;}
.proX2Two li:nth-child(2) {grid-column: 2 / 2;}
.proX2Two li:nth-child(3) {}
.proX2Two li:nth-child(4) {grid-row: 1 / 3; grid-column: 3 / 3;}
.proX2Two li .con {position: relative; padding: .35rem;}
.proX2Two li .imgBox {position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 0;} 
.proX2Two li .imgBox img {width: 100%; height: 100%; object-fit: cover;}
.proX2Two li .tit {font-size: .46rem; font-weight: 700; color: #fff;}
.proX2Two li .text {font-size: .2rem; margin-top: .15rem;}
.proX2Two li .text p { color: #fff;}
.proX2Two li .tip {margin-top: .3rem; display: inline-flex; align-items: center; border: 2px solid rgb(0, 174, 255); border-radius: 8px; padding: .06rem .08rem; padding-right: .15rem;}
.proX2Two li .tip img {max-width: .4rem;}
.proX2Two li .tip span {font-size: .28rem; color: #fff; margin-left: .1rem;}
.proX2Two li .wran {position: absolute; bottom: 0;width: 100%; padding: .45rem; display: flex; align-items: flex-start;}
.proX2Two li .wran p {color: #fff; font-size: .18rem; margin-left: .1rem;}
.proX2Two li .wran p span {display: block;}

.proX2Thre {padding-bottom: 1rem;max-width: 1920px; margin: auto;}
.proX2Thre .tle {font-size: .54rem; font-weight: 700;}
.proX2Thre .swiperBox {margin-top: .5rem;padding: 0 3.5%; box-sizing: border-box;}
.proX2Thre .swiper-3d, .proX2Thre .swiper-3d.swiper-css-mode .swiper-wrapper {perspective: 12rem;}
.proX2Thre .slide {width: 44%;}
.proX2Thre .slide .imgBox {border-radius: .15rem; overflow: hidden;}
.proX2Thre .slide .imgBox img {width: 100%;height: 4.9rem; object-fit: cover;}
.proX2Thre .slide span {width: 100%; z-index: 1; text-align: center; opacity: 0; display: block; font-size: .32rem; margin-top: .2rem;}
.proX2Thre .slide.swiper-slide-active span {opacity: 1; transition: .5s; transition-delay: .5s;}

.proX2Four {position: relative;}
.proX2Four .imgBox img {width: 100%;}
.proX2Four .box {z-index: 1; top: 12%;}
.proX2Four li {position: absolute;}
.proX2Four li i::before {content: '';position: absolute;top: 50%;left: 50%; transform: translate(-50%, -50%); width: 250%; height: 250%; background: #ffffff; border-radius: 50%;opacity: 0.5;animation: breath .6s linear .5s infinite alternate;}
.proX2Four li i {width: .06rem;height: .06rem; border-radius: 50%; background: #f9ff00;position: absolute; left: 0;top: 100%; transform: translate(-50%, -50%);z-index: 1;}
.proX2Four li:nth-child(1) {top: 25.15%; left: 37.5%;}
.proX2Four li:nth-child(2) {top: 26.8%; left: 36%;}
.proX2Four li:nth-child(3) {top: 29.5%; left: 36%;}
.proX2Four li:nth-child(4) {top: 32.4%; left: 36%;}
.proX2Four li:nth-child(5) {top: 40.25%; left: 35%;}
.proX2Four li:nth-child(6) {top: 48.25%; left: 30.5%;}
.proX2Four li:nth-child(7) {top: 55.6%;left: 27.5%;}
.proX2Four li:nth-child(8) {top: 74.7%; left: 35%;}
.proX2Four li:nth-child(9) {top: 89.5%; left: 38%;}

.proX2Four li:nth-child(10) {top: 26.5%; left: 63%;}
.proX2Four li:nth-child(11) {top: 30.25%; left: 61%;}
.proX2Four li:nth-child(12) {top: 32.5%; left: 65%;}
.proX2Four li:nth-child(13) {top: 39%; left: 63%;}
.proX2Four li:nth-child(14) {top: 50%; left: 71%;}
.proX2Four li:nth-child(15) {top: 53.35%; left: 64%;}
.proX2Four li:nth-child(16) {top: 59.9%; left: 74%;}
.proX2Four li:nth-child(even) i::before {animation-delay: .2s;}

.container {width: 1500px;}
.proX2Five {padding: 1rem 0;}
.proX2Five .box {margin-top: 1rem;}
.proX2Five ul {display: flex; justify-content: space-between;}
.proX2Five li {text-align: center; padding: 0 .8rem;}
.proX2Five li .more {display: flex; justify-content: center; margin-top: .2rem;}
.proX2Five li .liTle .tit {font-size: var(--font24); font-weight: 700; color: #2e2e2e;}
.proX2Five li dl {margin-top: .4rem;}
.proX2Five li dl dd {margin-top: .2rem;}
.proX2Five li dl dd span {display: block;}
.proX2Five li dl .p1 {color: #a8a8a8; font-size: var(--font14);}
.proX2Five li dl .p2 {color: #262b2e; font-size: var(--font18);}

.proX2Six {padding: 1.2rem 0 3rem; background: #e5e5e5;}
.proX2Six .proX2Tle {font-size: .66rem; font-weight: normal;}
.proX2Six .p1 {text-align: center; font-size: var(--font22); color: #2e2e2e; margin-top: .6rem;line-height: 2;}
.proX2Six .p2 {text-align: center; margin-top: .6rem;}
.proX2Six .p2 , .proX2Six .p2 a {font-size: var(--font18); color: #333;}
.proX2Six .p2 span {display: block;margin: .1rem 0;}
.proX2Six .p2 a:hover {color: #37a5d0 ;}
.proX2Six .more {display: flex; justify-content: center; margin-top: .6rem;}
.proX2Six .p3 {margin-top: .6rem;color: #2e2e2e; font-size: var(--font30); text-align: center;}
.proX2Six .imgBox {margin: .6rem auto; width: 68%;}
.proX2Six .imgBox img {max-width: 100%;}
.proX2Six {background: url(../images/X2/proX2Six-bj.jpg) no-repeat center center; background-size: cover; background-position-x: 0%;}


.modelPop {display: none;}
.joinPop { background: #fff; }
.joinPop .box {padding: 1rem .8rem; box-sizing: border-box;}
.joinPop .tle .tit {font-size: .46rem; color: #000; font-weight: 700;}
.joinPop .tle .tit2 {margin-top: .5rem;}
.joinPop .tle .tit2 p {color: #666666;}
.joinPop .form .form-item {margin-top: .4rem;}
.joinPop .form .form-item .form-tle {margin-bottom: .15rem;}
.joinPop .form .form-item .form-tle label {color: #666666; font-size: var(--font16);}
.joinPop .form .form-item .form-tle label span {color: #d10000; margin-right: .1rem;}
.joinPop .form .form-item-one {display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 0;}
.joinPop .form .form-item-one .item {position: relative; width: 30%; margin-top: .45rem;}
.joinPop .form .form-item-one .item label {position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: var(--font16); color: #d10000; z-index: 1;}
.joinPop .form .form-item-one .item input {border: 0; border-bottom: 1px solid #cccccc; box-shadow: none; font-size: var(--font16); padding-left: 15px;}
.joinPop .form .form-item-one .item .inBox {position: relative;}
.joinPop .form .form-item-one .item .erro {color: #c7000f; font-size: var(--font13); display: none; position: absolute; left: 0; top: 100%;}
.joinPop .form .form-item-one .item input.layui-form-danger ~ .erro , .joinPop .form .form-item-one .item .layui-form-danger ~ .erro {display: block;}
/* 输入框 */
.layui-input:focus, .layui-textarea:focus {border-color: #138abd  !important;}
.layui-form-danger+.layui-form-select .layui-input, .layui-form-danger:focus {border-color: #c7000f  !important;}
.layui-form-select dl dd.layui-this {background-color: #138abd  !important;}
.layui-form-select dl dd.layui-this {color: #fff !important;}
/* 城市选择 */
.joinPop #distpicker .inBox .city-picker-span:nth-child(4) {display: none;}
.joinPop #distpicker .inBox .city-picker-dropdown:nth-child(5) {display: none;}
.joinPop .city-picker-span {padding-left: 15px;border-bottom: 1px solid #cccccc; font-size: var(--font16); width: 100%;}
.joinPop .city-picker-span > .placeholder {color: #666;}
.joinPop .city-picker-span > .title {color: #666;}
.joinPop .city-picker-span > .title > span {color: #666;}
/* 复选框 */
.layui-form-checkbox {margin-right: .3rem !important;}
.layui-form-checkbox>i {background: #e2e2e2 !important; border-color: #e2e2e2 !important;}
.layui-form-checked[lay-skin=primary]>i {background-color: #138abd !important; border-color: #138abd !important;}
.layui-form-checkbox[lay-skin=primary]:hover>i {border-color: #138abd !important;}
.layui-form-checkbox>div {color: #666666 !important; font-size: var(--font16) !important;}
/* 单选 */
.layui-form-radio:hover>*, .layui-form-radioed, .layui-form-radioed>i {color: #138abd !important;}
/* 多行文本框 */
.form-item-six .layui-textarea {background: #f8f8f8;min-height: 1.6rem; padding-top: .2rem;}
/* 验证码 */
.form-item-seven #verify_img {position: absolute; right: .1rem;bottom: .1rem; width: 1.04rem; height: 0.5rem;max-height: 100%;background: #dde6f7;border: 1px solid #cccccc;border-radius: 100px; cursor: pointer; z-index: 1;}
/* 提交 */
.joinPop .form .sub {margin-top: .5rem; display: flex; justify-content: center;}
.joinPop .form .sub button {width: auto; cursor: pointer;  padding: .13rem .9rem; background: #138abd; border-radius: 100px; font-size: var(--font16); color: #fff; border: 0;}

/*.layui-layer-setwin {right: 2%;top: 5%;}*/
/*.layui-layer-setwin .layui-layer-close2 {right: 0; top: 0; font-size: var(--font30); border: 0; background: none; width: auto; height: auto; color: #333;}*/
/*.layui-layer-setwin .layui-layer-close2:hover {color: #138abd; background: none;}*/


@media screen and (max-width:1200px) {
    .proX2Two li {min-height: 4rem;}
    .proX2Two li .tit {font-size: .4rem;}
    .proX2Two li .text {font-size: .18rem;}
    .proX2Two li .tip span {font-size: .2rem;}

    .proX2Five li {padding: 0 .2rem;}
}


@media screen and (max-width:767px) {
    .proX2-banner {height: auto;}
    .proX2-banner .box {top: 22%; text-align: right;}
    .proX2-banner .box .more {display: flex; justify-content: flex-end;}
    .proX2-banner .p1 {font-size: .5rem;}
    .proX2-banner .p2 {font-size: .3rem;}

    .proX2Tle {font-size: .45rem;}

    .proX2One li {height: auto;}
    .proX2One li .container {position: static;}
    .proX2One li .style-sticky {height: auto;}
    .proX2One li .bjBox {position: relative;}
    .proX2One li .box {padding: .5rem .4rem; position: absolute; width: 100%; top: 0; left: 0; z-index: 1;}
    .proX2One li .tit {font-size: .4rem;}
    .proX2One li .text {font-size: var(--font16); margin-top: .2rem;}
    .proX2Two {padding: .5rem 0;}
    .proX2Two ul {display: block;}
    .proX2Two li {min-height: initial; margin-bottom: .3rem;}
    .proX2Two li .imgBox {position: relative;}
    .proX2Two li .con {position: absolute;z-index: 1; top: 0; left: 0;}
    .proX2Thre .swiperBox {padding: 0;}
    .proX2Thre .slide span {font-size: .2rem;}
    .proX2Thre .slide .imgBox img {height: 2.5rem;}
    .proX2Four .box .proX2Tle {font-size: .3rem;}
    /* 横向滚动方式 */
    .proX2Five .box {overflow-x: auto;}
    .proX2Five li {padding: 0 .4rem;}
    /* 向下排列方式 */
    /* .proX2Five ul {flex-wrap: wrap;}
    .proX2Five li {width: 100%; margin-bottom: .5rem;}
    .proX2Five li dl {display: flex; flex-wrap: wrap; justify-content: space-between;}
    .proX2Five li dl dd {width: 48%;}
    .proX2Five li dl .p1 {font-size: .12rem;}
    .proX2Five li dl .p2 {font-size: var(--font14);} */

    .proX2Six {padding: 1rem 0 5rem; background: url(../images/X2/proX2Six-moblie-bj.jpg) no-repeat left; background-size: cover;}
    .proX2Six .proX2Tle {font-size:.4rem;}
    .proX2Six .p1 {font-size: var(--font20);}
    .proX2Six .p1 span {display: block;}
    .proX2Six .p3 {font-size: var(--font26);}
    .proX2Six .imgBox {width:100%;}
    
    
    /* 弹窗 */
    .joinPop {width: 92% !important}
    .layui-layer-setwin {right: 1%;}
    .joinPop .box {padding: .6rem .4rem;}
    .joinPop .tle .tit {font-size: .4rem;}
    .joinPop .tle .tit2 p {font-size: var(--font12);}
    .joinPop .form .form-item-one .item {width: 100%;}
    .joinPop .form .form-item .form-tle label {font-size: var(--font14);}
    .layui-form-checkbox {margin: .1rem !important;}
    
}