.text_title{ font-size: 0.38rem; color: #231815; letter-spacing: 1px ; line-height: 1.6; font-weight: bold;}
.text_bref{ font-size: 0.16rem; line-height: 2; color: #231815;}
@font-face {
    font-family:'Inkfree';
    src: url('../../font/Inkfree.ttf');
}
.pos{position: absolute;}
.relative{position: relative;}
.banner{height: 6.5rem;}
@keyframes lineAnimate {
    to{  stroke-dashoffset: 0;  }
}
.linesvg svg{width: 100%;}
.linesvg .jt, .svgtext{opacity: 0;}

.sec1 .img1{  height: 6.9rem;  }
.sec1 .text{  margin: 0.74rem 0; }
.sec1 .text .text_bref {font-size: 0.22rem; }
.sec1 .text .p2{ margin-top: 0.54rem;  }

.sec2 { height: 7.07rem; justify-content: flex-end;}
.sec2 .rightbox{text-align: right; margin-top: 2.12rem; margin-right: 0.4rem;}
.sec2 .rightbox .text .p2{margin-top: 1.8rem;}
.sec2 .cls-1{  fill: none;  stroke: #000;  stroke-linecap: round;  stroke-linejoin: round;  stroke-width: 2.4px;  }
.sec2 .jtTextBref{left:3.56rem; top:0.8rem;}
.sec2 .jtTextBref p{font-style: italic; margin-left: 10px; margin-top: -0.1rem;}
.sec2 .jtTextBref .linesvg{width:1.28rem; clip-path: inset(0% 100% 0% 0%);}


.sec3  { height: 5.4rem; margin-top: 1rem;margin-bottom: 1.04rem;  padding-left: 5.84%; box-sizing: border-box; }
.sec3 .leftbox { width:calc(100% - 8.7rem); margin-top: 0.5rem;}
.sec3 .leftbox .p2{ margin-top: 1rem; }
.sec3 .rightbox { width:8.7rem; background: #4d4d4d; height: 4.4rem;  }
.sec3 .rightbox .img{ width:6.2rem; left:calc(50% - 3.1rem); transition:transform 1.4s ease; }
.sec3 .rightbox .img1{bottom: -1.4rem; transform: translateY(60px); }
.sec3 .rightbox .img2{bottom: -1.24rem;  transform: translate(80px,-30px);}
.sec3 .rightbox .img3{bottom: -0.7rem;left: calc(50% - 3.9rem); transform: translate(-50px,0px);}
.sec3 .rightbox .img4{top: 0.68rem; transform: translate(0px,-80px);}
.sec3 .rightbox.on .img{transform: translate(0px,0px);}

.sec4{height: 3.34rem; }
.sec4 .leftbox{width:3.7rem;}
.sec4 .text .p2{margin-top: 0.5rem; margin-bottom: 0.3rem;}
.sec4 .rightbox{width:calc(100% - 3.7rem); height: 100%; padding-left: 0.6rem; box-sizing:border-box; align-items: flex-end;}
.sec4 .linesvg{width:6.94rem; left: 1.17rem; bottom: 0.45rem; clip-path: inset(0% 79% 0% 0%);}
.sec4 .cls-1 {  fill: #231815;  }
.sec4 .cls-2 {  font-family: 'Inkfree';  font-size: 34px;  font-weight: 700;  }
.sec4 .cls-3 {  fill: none;  stroke: #231815;  stroke-miterlimit: 10;stroke-width: 2; stroke-linecap: round; }
.sec4 .cls-4 {  fill: none;  stroke: #231815;  stroke-miterlimit: 10;stroke-dasharray: 0 0 11.91 11.91; }
.sec4 .linesvg .circleLine{ stroke-dasharray: 453; stroke-dashoffset: 453; }
.sec4 .linesvg .line{ stroke-dasharray: 350; stroke-dashoffset: 350; }
.sec4 .linesvg .svgtext,.sec4 .linesvg tspan{display: inline-block; opacity: 0;}
.sec4 .linesvg.on .circleLine{ animation: lineAnimate2 1s cubic-bezier(0.07, 0.39, 0.02, 0.94) forwards; }
.sec4 .linesvg.on .line{ animation: lineAnimate 1s cubic-bezier(0.12, 0.43, 0.19, 0.99) forwards; }
@keyframes lineAnimate2 {
    to{  stroke-dashoffset: 0; stroke-dasharray: 0 0 11.91 11.91;  }
}

.sec5 {background:linear-gradient(-135deg,#ebebeb,#ffffff); height: 11.58rem; margin: 3.4rem 0 ;}
.sec5 .bigTitle {right:0; top:-0.9rem;}
.sec5 .p2{margin-top: 0.4rem;}
.sec5 .comRow{align-items: center;}
.sec5 .comRow1,.sec5 .comRow3{height: 3.74rem; justify-content: flex-end;}
.sec5 .comRow1 .img1{width: 7.02rem; top:-1.6rem; left:0;}
.sec5 .comRow2 .img1{width: 7.56rem;}
.sec5 .comRow3 .img1{width: 7.48rem; left:0; bottom:-1.46rem;}
.sec5 .comRow .text{ padding: 0.3rem; box-sizing: border-box;}
.sec5 .comRow2{margin: 0.48rem 0;}
.sec5 .comRow:nth-child(even) .text{text-align: right;}

.sec6 {height: 5.05rem; margin-bottom: 1rem; position: relative; align-items: flex-end; margin-bottom: 0.48rem;}
.sec6 .img1 {width:6.2rem; margin-bottom: -0.2rem;}
.sec6 .brefBj {background: #4d4d4d; color: #fff; height: 2.3rem; padding: 0 0.45rem; box-sizing: border-box; width: 7.02rem; margin-top: 1.22rem; display: flex; align-items: center;}
.sec6 .brefBj .text_bref {color: #fff; line-height: 2.4;  font-style: italic;}
.sec6 .brefBj .p2 {margin-top: 0.7rem; font-style: italic; opacity: 0.8;}
.sec6 .svgtext {  font-family:  'Inkfree';  font-size: 20.12px;  font-weight: 700;  opacity: .7;  }
.sec6 .cls-1 {  fill: none;  stroke: #000;  stroke-linecap: round;  stroke-miterlimit: 10;  stroke-width: 2px;  }
.sec6 .linesvg{right: 0.9rem;bottom: 0rem;width: 6rem; }
.sec6 .linesvg .line1{stroke-dasharray: 60;  stroke-dashoffset: 60;}
.sec6 .linesvg .line2{stroke-dasharray: 270;  stroke-dashoffset: 270;}
.sec6 .linesvg.on .line1{ animation: lineAnimate 1s cubic-bezier(0.12, 0.43, 0.19, 0.99) forwards; }
.sec6 .linesvg.on .line2{ animation: lineAnimate3 1s cubic-bezier(0.12, 0.43, 0.19, 0.99) forwards; }
@keyframes lineAnimate3 {
    to{  stroke-dashoffset: 540;  }
}

.sec7 .bref{ font-size: 0.18rem; color: #000000; opacity: 0.6; margin-bottom: 0.18rem;}
.sec7 .imgbox{background: #ebebeb; height: 1.73rem;}
.sec7 .imgbox .img1{width:3.7rem;}
.sec7 .imgbox .img2{width:6.3rem;}
.sec7 .imgbox .img3{width:2.8rem;}

.sec8{height: 7.38rem;}
.sec8 .text{padding-right: 0.82rem; right:0; bottom: 1.18rem;}
.sec8 .text .circle{font-size: 0.18rem; color: #231815; text-align: right; position: relative; padding-right: 54px; justify-content: flex-end; margin-bottom: 0.48rem; opacity: 0; transform: translateX(-50px); }
.sec8 .text .circle .yq{
    display: block;  width:26px;  height:26px;  border-radius: 50%;  position: absolute;  right:0; transform: scale(0); opacity: 0;
}
.sec8 .text .circle1 .yq{background: #ec6568;}
.sec8 .text .circle2 .yq{background: #68c683;}
.sec8 .text .circle3 .yq{background: #71d1ec;}
.sec8 .text .text_bref{margin-top: 1.4rem; text-align: right; line-height: 2.2; opacity: 0; transform: translateX(-50px);}

.sec9{background: #ebebeb; height:8.68rem; display: flex; justify-content: flex-end; }
.sec9 .text{margin-right: 1.55rem; text-align: right; margin-top: 1.88rem;}
.sec9 .text .text_bref{margin-top: 0.52rem;}
.sec9 .imgBox{left:5.38%; top:1.57rem; display: grid; grid-template-columns: auto auto auto;}
.sec9 .imgBox .img1{width:3.13rem; height:3.11rem; margin-bottom: 0.14rem;}
.sec9 .imgBox .img2{width:3.13rem; height:2.99rem;}
.sec9 .imgBox .img3{width:5.32rem; height:2.99rem; position: relative; }
.sec9 .imgBox .img3 img{position: absolute;left:0;top:0;  }
.sec9 .imgBox .img3.clipOn img{/*clip:rect(0px 5.32rem 2.99rem 0px)*/}
.sec9 .imgBox .img4{ height: 2.99rem;}
.sec9 .imgBox .img4 img{height: 100%;}

/**/
.comPage .text_title{ line-height: 1.4  }
.comPage .text_bref{ line-height: 1.7  }
.comPage .sec5 .comRow .text{ margin-right: 0.6rem;}
.comPage .sec8 .text{ bottom: 1rem;}
.comPage .sec8 .text .text_bref{line-height: 1.7  }
@media all and (min-width: 1921px) {
    .text_title{ font-size: 38px; }
    .comPage .text_title{ font-size: 36px; }
    .text_bref{ font-size: 16px;}
    .sec1 .text .text_bref{ font-size: 22px;}
}

@media screen and (max-width: 767px) {
    .banner{height: auto;}
    .text_bref{font-size: 0.26rem; line-height: 1.66}
    .text_title{font-size: 0.34rem;}
    .sec1 .img1{height: 7.67rem; overflow: hidden;}
    .sec1 .img1 img{width: 215%; margin-left: -54%;}
    .sec1 .text,
    .sec2 .rightbox .text,
    .sec9 .text,
    .sec6 .text_title,
    .sec3 .leftbox .text {padding: 0 0.4rem; box-sizing: border-box;}
    .sec1 .text{width: 100%; margin: 0.96rem 0;}
    .sec1 .text .text_bref{font-size: 0.26rem;}
    .sec1 .text .text_bref br{display: none;}
    .sec1 .text .p2 {margin-top: 0.2rem;}
    .sec2{flex-direction: column; background: #EBEBEB; height: auto; padding-bottom: 1.1rem;}
    .sec2 .leftimg {overflow: hidden; margin-top: 0.5rem;}
    .sec2 .leftimg img{width: 226%; margin-left: -12%;}
    .sec2 .jtTextBref .text_bref {font-size: 0.24rem; margin-top: -0.5rem;}
    .sec2 .jtTextBref { left: 1.8rem; top: 1.54rem;}
    .sec2 .jtTextBref .linesvg {width: 1.4rem; transform: rotate(-11deg);}
    .sec2 .rightbox{position: unset; margin-top: 0.88rem; margin-right: 0;}
    .sec2 .rightbox .text_title br,.sec2 .rightbox .text .p2 br{display: none;}
    .sec2 .rightbox .text{text-align: left;}
    .sec2 .rightbox .text .p2{margin-top: 0.2rem;}
    .sec3{flex-direction: column; padding-left: 0; height: auto;}
    .sec3 .leftbox{width: 100%; order:2;}
    .sec3 .rightbox{width: 100%; order:1; height: 3.7rem;}
    .sec3 .rightbox .img {width: 5.2rem;left: calc(50% - 2.5rem); transform: translate(0px, 0px);}
    .sec3 .rightbox .img3 {bottom: -1.2rem;left: calc(50% - 3.4rem);}
    .sec3 .rightbox .img1 {bottom: -1.9rem;}
    .sec3 .rightbox .img2 {bottom: -1.74rem;}
    .sec3 .rightbox .img3 {bottom: -1.2rem;}
    .sec3 .rightbox .img4 {top: 1.18rem;}
    .sec3 .leftbox{margin-top: 3.17rem;}
    .sec3 .leftbox .text_title br,.sec3 .leftbox .p2 br{display: none}
    .sec3 .leftbox .p2{margin-top: 0.2rem;}
    .sec4{flex-direction: column; height: auto; }
    .sec4 .linesvg{width: 4.23rem; left: 1.5rem;}
    .sec4 .leftbox{width: 4.48rem; height: 4.04rem; margin-left: 0.4rem;}
    .sec4 .rightbox{padding-left: 0; width: 100%; padding: 0.4rem 0.4rem 1.1rem ; box-sizing: border-box; }
    .sec5{margin: 0; padding: 1.1rem 0.4rem; box-sizing: border-box; height: auto;}
    .sec5 .bigTitle{position: unset; margin-bottom: 0.8rem;}
    .sec5 .comRow1 .img1{position: unset; width: 4.9rem; height: 3.74rem;}
    .sec5 .comRow1 .text{ width: 4.9rem; }
    .sec5 .comRow1{ height: auto;align-items: flex-start;}
    .sec5 .comRow {flex-direction: column;}
    .sec5 .comRow .text{padding: 0; margin-top: 0.4rem;}
    .sec5 .comRow:nth-child(even) .text{text-align: left;}
    .sec5 .p2{margin-top: 0.2rem;}
    .sec5 p br{display: none;}
    .sec5 .comRow2 {align-items: flex-end; margin: 0.8rem 0;}
    .sec5 .comRow2 .text{order:2; width: 5.02rem;}
    .sec5 .comRow2 .img1{order:1; width: 5.02rem; height: 2.46rem; }
    .sec5 .comRow3 {height: auto;}
    .sec5 .comRow3 .img1{position: unset;margin-left: -28%; width: 90%;}
    .sec6 {flex-direction: column; height: auto; margin-bottom: 2.37rem; padding-top: 0.6rem}
    .sec6 .linesvg{width: 3.16rem; left: 0.8rem; bottom: -1.8rem; right:auto; margin-top: 0.4rem}
    .sec6 .brefBj{height: 5.5rem; width: 100%; align-items: flex-start; padding: 0.8rem 0.4rem 0; margin-top: 0.4rem;}
    .sec6 .brefBj .text_bref{line-height: 1.6;}
    .sec6 .img1{width: 4.6rem; right:0.4rem; position: absolute; bottom:-1.48rem;}
    .sec7 {margin-bottom: 1.2rem;}
    .sec7 .bref{font-size: 0.26rem; padding: 0 0.4rem; box-sizing: border-box; margin-bottom: 0.26rem;}
    .sec7 .imgbox{height: 2.5rem; overflow-x: auto;}
    .sec7 .imgbox .img1 {width: 4.98rem;}
    .sec7 .imgbox .img2 {width: 6.88rem; margin-left: 0.4rem}
    .sec7 .imgbox .img3 {width: 4rem; margin-left: 0.4rem}
    .text_bref br{display: none;}
    .sec8{background: #E5E4E9; height: 7.59rem;}
    .sec8 .img1{height: 4.48rem; overflow: hidden;}
    .sec8 .img1 img{width: 129%; margin-left: -16%;}
    .sec8 .text .circle{font-size: 0.24rem; margin-bottom:0.7rem; padding-right: 0.6rem;}
    .sec8 .text {padding-right: 0.42rem;}
    .sec8 .text .circle .yq{width: 0.28rem; height: 0.28rem;}
    .sec8 .text .text_bref{padding-left:0.4rem; line-height:1.66;}
    .sec9 {flex-direction: column; justify-content:flex-start; height: auto;}
    .sec9 .text{margin-right:0; text-align: left; margin-top: 1.1rem;}
    .sec9 .imgBox{position: unset;}
    .sec9 .text .text_bref{margin-top: 0.2rem;}
    .sec9 .imgBox{display:flex; flex-wrap: wrap; justify-content: space-between;margin-top: 0.5rem; }
    .sec9 .imgBox .img1,
    .sec9 .imgBox .img2,
    .sec9 .imgBox .img3,
    .sec9 .imgBox .img4{width: calc(50% - 0.04rem); height: 3.38rem; overflow: hidden; }
    .sec9 .imgBox .img1,
    .sec9 .imgBox .img2{margin-bottom: 0.08rem;}
    .sec9 .imgBox .img3 img{width: 178%;margin-left: -40%;}
    .sec9 .imgBox .img4 img {width: 152%;margin-left: -39%; height: auto;}
    .comPage .text_bref,
    .comPage .sec8 .text .text_bref,
    .comPage .sec6 .brefBj .text_bref{line-height: 1.4;}
    .comPage .sec2 .jtTextBref .text_bref{line-height: 1.3; width: 3rem; margin-top: -1rem;}
    .comPage .sec5 .comRow .text{margin-right: 0;}
    .comPage .sec8 .text .text_bref{margin-top: 1.8rem;}
}