@charset "utf-8";
/* CSS Document */

/* html,body{ width: 100%; height: 100%;} */
.bodymain{ padding-top: 0; height: 100%; background-color: #fff; font-family: "SourceHanSansCN-Light";}

.edit-container{ width: 78.125vw; margin: 0 auto; position: relative;}

.js-up,.js-up-s {
	opacity: 0;
	-webkit-transform: translate(0, 30px);
	-ms-transform: translate(0, 30px);
	transform: translate(0, 30px);
	-webkit-transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82);
	transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82);
}
.js-opacity {
	opacity: 0;
	-webkit-transition: all 0.8s ease;
	transition: all 0.8s ease;
}
.js-left {
	opacity: 0;
	-webkit-transform: translate(-30px, 0);
	-ms-transform: translate(-30px, 0);
	transform: translate(-30px, 0);
	-webkit-transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82);
	transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82);
}
.js-right {
	opacity: 0;
	-webkit-transform: translate(30px, 0);
	-ms-transform: translate(30px, 0);
	transform: translate(30px, 0);
	-webkit-transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82);
	transition: all 0.8s cubic-bezier(0.79, -0.27, 0.21, 0.82);
}
.js-bold {
	font-weight: bold;
}
.delay1 {
	-webkit-transition-delay: .3s !important;
	transition-delay: .3s !important;
}
.delay2 {
	-webkit-transition-delay: .6s !important;
	transition-delay: .6s !important;
}
.delay3 {
	-webkit-transition-delay: 0.9s !important;
	transition-delay: 0.9s !important;
}
.delay4 {
	-webkit-transition-delay: 1.2s !important;
	transition-delay: 1.2s !important;
}

.swiper-pagination{ font-size: 0; width: 100%;}
.swiper-pagination-bullet{ width: 30px; height: 4px; border: 0; border-radius: 4px; background-color: #fff; opacity: 0.3; margin: 0 3px 0 0 !important;}
.swiper-pagination-bullet-active{ opacity: 1; background-color: #307fbb;}


.sensing-banner{ height: 100lvh; position: relative;}
.sensing-banner img{ display: block; width: 100%; height: 100%; object-fit: cover;}
.sensing-banner .sensing-logo{ width: 2.8rem; position: absolute; top: 1.46rem; right: 0.55rem;}
.sensing-banner .sensing-logo img{ display: block; width: 100%;}
.sensing-banner .banner-inner{ position: absolute; left: 0.65rem; bottom: 0.5rem; color: #fff;}
.sensing-banner .banner-inner .title-box{ /* line-height: 1.2; */}
.sensing-banner .banner-inner .title-box .title1{ font-size: 0.55rem;}
.sensing-banner .banner-inner .title-box .title2{ font-size: 0.45rem; font-weight: bold;}
.sensing-banner .banner-inner .label-describe{ margin-top: 0.3rem;}
.sensing-banner .banner-inner .label-describe dl{ margin: 0 -0.28rem;}
.sensing-banner .banner-inner .label-describe dd{ float: left; padding: 0 0.28rem; font-size: 0.16rem; line-height: 1; text-align: center; border-right: 0.01rem solid rgba(255, 255, 255, 0.3);}
.sensing-banner .banner-inner .label-describe dd .title{ font-size: 0.18rem; margin-bottom: 0.1rem;}
.sensing-banner .banner-inner .label-describe dd .title span{ font-size: 0.35rem;}
.sensing-banner .banner-inner .label-describe dd:last-child{ border-right: 0;}


.sensing-title-box{ width: 4.26rem; height: 4.26rem; background: url(/honda/funtec/enjoy/hondasensing360plus/images/sensing-title-bg.png) center no-repeat; background-size: cover; font-size: 0.45rem; text-align: center; position: relative;}
.sensing-title-box span{ width: 100%; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);}

.xtjj-section{ padding: 0.4rem 0;}
.xtjj-section .sensing-title-box{ float: left; margin-left: 0.3rem;}
.xtjj-section .cont-inner{ width: 9.35rem; font-size: 0.22rem; color: #3a3a3a; line-height: 1.8; position: absolute; right: 0.3rem; top: 50%; transform:translateY(-50%);}

.xtsjd-section{ padding: 0.4rem 0;}
.xtsjd-section .pic{ float: left; width: 9.2rem; border-radius: 0.15rem; overflow: hidden;}
.xtsjd-section .pic img{ display: block; width: 100%;}
.xtsjd-section .cont-inner{ float: right; width: 5.25rem; margin-top: 0.5rem;}
.xtsjd-section .cont-inner .cont{ font-size: 0.2rem; color: #3a3a3a; line-height: 1.8; padding-left: 0.2rem; margin-top: -0.5rem;}
/* .xtsjd-section .cont-inner .cont .bold{ font-weight: bold;} */
.xtsjd-section .cont-inner .cont.animate .bold1{ animation: bold 1.5s 0.6s linear forwards;}
.xtsjd-section .cont-inner .cont.animate .bold2{ animation: bold 2.5s 0.6s linear forwards;}
@-webkit-keyframes bold{ 100% { color: #e46c2b; }}
@-moz-keyframes bold{ 100% { color: #e46c2b; }}
@-o-keyframes bold{ 100% { color: #e46c2b; }}

.gndjs-section{ padding: 0.4rem 0;}
.gndjs-section .sensing-title-box{ margin: 0 auto;}
.gndjs-list-block{ margin-top: 1.2rem;}
.gndjs-list-block:first-child{ margin-top: 0;}
.gndjs-top-box{ background-color: #eef9ff; border-radius: 0.15rem; padding: 0.6rem; text-align: center;}
.gndjs-top-box .title-box{ display: inline-block; vertical-align: top; text-align: left; line-height: 1.2; color: #3a3a3a; padding-left: 1.1rem; position: relative;}
.gndjs-top-box .title-box .title1{ font-size: 0.36rem;}
.gndjs-top-box .title-box .title2{ font-size: 0.3rem;}
.gndjs-top-box .title-box .icon{ width: 0.61rem; height: 0.61rem; position: absolute; top: 50%; margin-top: -0.305rem; left: 0;}
.gndjs-top-box .title-box .icon .round1{ width: 100%; height: 100%; border-radius: 100%; background: url(/honda/funtec/enjoy/hondasensing360plus/images/sensing-title-round1.png) center no-repeat; background-size: cover; position: absolute; top: 0; left: 0; z-index: 5;}
.gndjs-top-box .title-box .icon .round2{ width: 0.9rem; height: 0.9rem; border-radius: 100%; background: url(/honda/funtec/enjoy/hondasensing360plus/images/sensing-title-round2.png) center no-repeat; background-size: cover; position: absolute; top: 50%; left: 50%; margin: -0.45rem 0 0 -0.45rem; z-index: 1; animation: rounds 2s infinite linear;-webkit-animation: rounds 2s infinite linear;-moz-animation: rounds 2s infinite linear;-o-animation: rounds 2s infinite linear;}

@-webkit-keyframes rounds{0%{-webkit-transform:scale(1.0);} 50%{-webkit-transform:scale(1.35);} 100% {-webkit-transform:scale(1.0);}}
@-moz-keyframes rounds{ 0% {-moz-transform:scale(1.0);}  50% {-moz-transform:scale(1.35);} 100% {-moz-transform:scale(1.0);}}
@-o-keyframes rounds{0%{-o-transform:scale(1.0);}  50%{-o-transform:scale(1.35);} 100%{-o-transform:scale(1.0);}}

.gndjs-list-item{ margin-top: 0.3rem;}
.gndjs-list-item .pic{ border-radius: 0.15rem; overflow: hidden;}
.gndjs-list-item .pic img{ display: block; width: 100%;}
.gjcdbgfz-inner{ margin-top: 0.4rem;}
.gjcdbgfz-inner .top-title{ font-size: 0.32rem;}
.gjcdbgfz-inner .cont-item .cont-item-block{ margin-top: 0.2rem;}
.gjcdbgfz-inner .cont-item .cont-item-block .cont-left{ float: left; width: 6.35rem; font-size: 0.18rem; line-height: 1.8;}
.gjcdbgfz-inner .cont-item .cont-item-block .cont-left .title{ font-size: 0.26rem; color: #e46c2b;}
.gjcdbgfz-inner .cont-item .cont-item-block .img{ float: left; height: 1.15rem; margin-left: 0.6rem;}
.gjcdbgfz-inner .cont-item .cont-item-block .img img{ display: block; height: 100%;}

.sensing-btn-box{ margin-top: 0.3rem;}
.sensing-btn-box .video-play-btn{ width: 2.06rem; line-height: 0.56rem; background-color: #e46c2b; border-radius: 0.56rem; text-align: center; cursor: pointer;}
.sensing-btn-box .video-play-btn span{ display: inline-block; vertical-align: top; font-size: 0.18rem; color: #fff; padding-left: 0.32rem; background: url(/honda/funtec/enjoy/hondasensing360plus/images/icon-video-play.png) left center no-repeat; background-size: 0.22rem;}

.bxfz-list-item{ margin-top: 1.1rem;}
.bxfz-list-item .pic{ float: left; width: 10rem;}
.bxfz-list-item .gjcdbgfz-inner{ float: right; width: 4.6rem;}
.bxfz-list-item .gjcdbgfz-inner .cont-item .cont-item-block .cont-left{ float: none; width: 100%;}
.bxfz-list-item .gjcdbgfz-inner .cont-item .cont-item-block .img{ float: none; margin-left: 0; margin-top: 0.3rem;}

.wdplyj-list-item{ /* margin-top: 0.7rem; */}
.wdplyj-list-item .pic{ float: right; width: 10rem;}
.wdplyj-list-item .gjcdbgfz-inner{ float: left; width: 4.6rem; margin-top: 0.3rem;}
.wdplyj-list-item .gjcdbgfz-inner .cont-item .cont-item-block .cont-left{ float: none; width: 100%;}
.wdplyj-list-item .gjcdbgfz-inner .cont-item .cont-item-block .img{ float: none; margin-left: 0; margin-top: 0.3rem; height: auto; border-radius: 0.15rem; overflow: hidden;}
.wdplyj-list-item .gjcdbgfz-inner .cont-item .cont-item-block .img img{ height: auto; width: 100%;}

.gndjs-tips{ border-top: 0.01rem solid #fae2d5; margin-top: 0.7rem; padding: 0.5rem 0; font-size: 0.16rem; line-height: 1.8;}
.gndjs-tips .top-title{ font-weight: bold; color: #e46c2b;}
.gndjs-tips .cont{ margin-top: 0.1rem;}
.gndjs-tips .cont span{ text-decoration: underline; text-decoration-color: #e46c2b;}
.gndjs-tips .cont span span{ text-decoration: underline double; color: #e46c2b;}
.privacy-policy-btn{ cursor: pointer;}

.privacy-policy-section{ width: 100%; height: calc(100% - 70px); background-color: #111; padding: 1.05rem 0 0.7rem 0; position: fixed; bottom: 0; left: 0; z-index: 999; display: none;}
.privacy-policy-section .edit-container{ height: 100%;}
.privacy-policy-close{ width: 0.5rem; height: 0.5rem; background: url(/honda/funtec/enjoy/hondasensing360plus/images/privacy-policy-close.png) center no-repeat; background-size: cover; position: absolute; top: -0.68rem; left: 0; cursor: pointer;}
.privacy-policy-container{ background-color: #fff; border-radius: 0.15rem; overflow: hidden; height: 100%;}
.privacy-policy-nav{ float: left; width: 3.3rem; height: 100%; background-color: #f5f5f7; padding: 0 0.15rem; position: relative;}
.privacy-policy-nav ul{ width: calc(100% - 0.3rem); position: absolute; left: 0.15rem; top: 50%; transform:translateY(-50%);}
.privacy-policy-nav li{ font-size: 0.16rem; color: #e46c2b; font-weight: bold; padding: 0.15rem 0 0.15rem 0.62rem; position: relative; cursor: pointer;}
.privacy-policy-nav li span{ display: inline-block; vertical-align: top; position: relative;}
.privacy-policy-nav li span::before{ content: ''; width: 0.07rem; height: 0.07rem; background-color: #e46c2b; border-radius: 100%; position: absolute; top: 50%; transform:translateY(-50%); left: -0.2rem;}
.privacy-policy-nav li.active{ background-color: #e46c2b; color: #fff; border-radius: 0.55rem;}
.privacy-policy-nav li.active span::before{ display: none;}
.privacy-policy-nav li.active .icon{ width: 0.23rem; height: 0.23rem; position: absolute; top: 50%; transform:translateY(-50%); left: 0.16rem;}
.privacy-policy-nav li.active .icon .round1{ width: 100%; height: 100%; background: url(/honda/funtec/enjoy/hondasensing360plus/images/privacy-policy-round1.png) center no-repeat; background-size: cover;}
.privacy-policy-nav li.active .icon .round2{ width: 165%; height: 165%; background: url(/honda/funtec/enjoy/hondasensing360plus/images/privacy-policy-round1.png) center no-repeat; background-size: cover; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);}
.privacy-policy-content{ float: right; width: 11.6rem; height: 100%; padding: 0 0.1rem; position: relative;}
.privacy-policy-content .box{ display: none;}
.privacy-policy-scroll{ padding: 0.65rem 0.8rem 0.55rem 0.8rem; height: 100%; overflow-y: auto;}
.privacy-policy-content .title-box{ text-align: center; font-size: 0.14rem;}
.privacy-policy-content .title-box .title{ font-size: 0.32rem;}
.privacy-policy-content .title-box .bottom-box{ margin-top: 0.15rem; padding-top: 0.15rem; border-top: 0.01rem solid #ccc; color: #555;}
.privacy-policy-content .title-box .bottom-box span{ margin:0 0.05rem; }
.privacy-policy-content .content{ font-size: 0.16rem; line-height: 1.8; margin-top: 0.4rem;}
.privacy-policy-content .content p{ text-indent: 2em; margin-top: 0.25rem;}
.privacy-policy-content .table{ margin-top: 0.25rem;}
.privacy-policy-content .table table{ border-top: 1px solid #ccc; border-left: 1px solid #ccc;}
.privacy-policy-content .table table th,.privacy-policy-content .table table td{ border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; padding: 0.05rem 0.15rem; word-break: break-all;}
.privacy-policy-content .table table th{ background-color: #f5f5f7;}




.privacy-policy-content::before{ content: ''; width: 90%; height: 20%; position: absolute; left: 5%; bottom: 0; background: -webkit-linear-gradient(to top, #fff, transparent); background: linear-gradient(to top, #fff, transparent);}

.privacy-policy-scroll::-webkit-scrollbar {/*转动条整体样式*/
	width: 0.04rem;     /*高宽划分对应横竖转动条的尺寸*/
	height: 0.01rem;
}
.privacy-policy-scroll::-webkit-scrollbar-thumb {/*转动条内里小方块*/
	background: #e46c2b;
}
.privacy-policy-scroll::-webkit-scrollbar-track {/*转动条内里轨道*/
	background: #f5f5f7;
}

.jsyycydxt-list .gndjs-list-block{ margin-top: 1.2rem;}
.jsyycydxt-list .gndjs-list-block:first-child{ margin-top: 0.3rem;}
.jsyycydxt-inner{ margin-top: 0.4rem;}
.jsyycydxt-inner .top-title{ font-size: 0.32rem; text-align: center;}
.jsyycydxt-inner .txt{ font-size: 0.18rem; text-align: center; margin-top: 0.15rem;}
.jsyycydxt-inner .cont-item{ width: 10.95rem; margin: 0.4rem auto 0 auto;}
.jsyycydxt-inner .cont-item-block{ float: left; width: 33.333%;}
.jsyycydxt-inner .cont-item-block .cont-left{ border: 0.01rem solid #cecdce; border-radius: 0.15rem; padding: 0.2rem 0.25rem; font-size: 0.16rem; color: #606060; margin: 0 0.05rem;}
.jsyycydxt-inner .cont-item-block .cont-left .title{ font-size: 0.18rem; color: #e46c2b;}
.jsyycydxt-inner .cont-item-block .cont-left .cont{ margin-top: 0.1rem; height: 3.6em; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.jsyycydxt-inner .cont-item-block .img{ margin-top: 0.2rem;}
.jsyycydxt-inner .cont-item-block .img img{ display: block; width: 100%;}
.jsyycydxt-inner .sensing-btn-box{ margin-top: 0.5rem;}
.jsyycydxt-inner .sensing-btn-box .video-play-btn{ margin: 0 auto;}

.kmpzyj-list-item{ /* margin-top: 0.7rem; */}
.kmpzyj-list-item .pic{ float: left; width: 10rem;}
.kmpzyj-list-item .gjcdbgfz-inner{ float: right; width: 4.6rem;}
.kmpzyj-list-item .gjcdbgfz-inner .cont-item .cont-item-block .cont-left{ float: none; width: 100%;}
.kmpzyj-list-item .gjcdbgfz-inner .cont-item .cont-item-block .img{ float: none; margin-left: 0; margin-top: 0.3rem;}


.function-points-section{ margin-top: 0.5rem;}
.function-points-section .sensing-title-box{ width: 100%; background-size: auto 100%; font-size: 0.35rem;}
.function-points-section .sensing-title-box strong{ font-size: 0.45rem;}
.function-points-inner{ background: url(/honda/funtec/enjoy/hondasensing360plus/images/function-points-bg.jpg) top center no-repeat #eef9ff; background-size: 100% auto; border-radius: 0.15rem; overflow: hidden; padding: 1rem 0 0.9rem 0;}
.function-points-width{ width: 12rem; margin: 0 auto;}
.function-points-inner{ margin-top: -0.5rem;}
.function-points-inner .trends-box{ height: 3.15rem; position: relative;}
.function-points-inner .trends-box .title{ position: absolute; color: #0a5078;}
.function-points-inner .trends-box .title1{ font-size: 0.47rem; top: 0; left: 41.666%; animation: shake 5s linear infinite backwards;}
.function-points-inner .trends-box .title2{ font-size: 0.28rem; top: 14.6%; left: 28.333%; animation: shake 7s linear infinite backwards;}
.function-points-inner .trends-box .title3{ font-size: 0.37rem; top: 20.634%; left: 60%; animation: shake 9s linear infinite backwards;}
.function-points-inner .trends-box .title4{ font-size: 0.28rem; top: 30.158%; left: 44.5%; animation: shake 7s linear infinite backwards;}
.function-points-inner .trends-box .title5{ font-size: 0.23rem; top: 34.285%; left: 23.333%; animation: shake 6s linear infinite backwards;}
.function-points-inner .trends-box .title6{ font-size: 0.22rem; top: 44.444%; left: 6%; animation: shake 8s linear infinite backwards;}
.function-points-inner .trends-box .title7{ font-size: 0.23rem; top: 42.539%; left: 73.333%; animation: shake 10s linear infinite backwards;}
.function-points-inner .trends-box .title8{ font-size: 0.23rem; top: 50.158%; left: 50%; animation: shake 8s linear infinite backwards;}
.function-points-inner .trends-box .title9{ font-size: 0.31rem; top: 51.746%; left: 35.583%; animation: shake 5s linear infinite backwards;}
.function-points-inner .trends-box .title10{ font-size: 0.23rem; top: 61.587%; left: 13.333%; animation: shake 7s linear infinite backwards;}
.function-points-inner .trends-box .title11{ font-size: 0.37rem; top: 65.079%; left: 62%; animation: shake 6s linear infinite backwards;}
.function-points-inner .trends-box .title12{ font-size: 0.28rem; top: 69.206%; left: 42.083%; animation: shake 8s linear infinite backwards;}
.function-points-inner .trends-box .title13{ font-size: 0.23rem; top: 86.349%; left: 33.166%; animation: shake 10s linear infinite backwards;}

@keyframes shake {
    0% {
        transform: translate(-2px, -3px);
    }
    25% {
        transform: translate(3px, -2px);
    }
    50% {
        transform: translate(-3px, 2px);
    }
    75% {
        transform: translate(2px, 3px);
    }
    100% {
        transform: translate(-2px, -3px);
    }
}

.function-points-inner .cont{ font-size: 0.16rem; color: rgba(000, 000, 000, 0.8); line-height: 1.8; text-align: center; margin-top: 0.6rem;}
.function-points-btn-box{ margin-top: 0.4rem; text-align: center;}
.function-points-btn-box .btn-box{ display: inline-block; vertical-align: top; font-size: 0.22rem; color: #fff; background-color: #e46c2b; border-radius: 0.7rem; padding: 0.19rem 0.4rem 0.19rem 0.78rem; position: relative;}
.function-points-btn-box .btn-box .icon{ width: 0.29rem; height: 0.29rem; position: absolute; top: 50%; transform:translateY(-50%); left: 0.24rem;}
.function-points-btn-box .btn-box .icon .round1{ width: 100%; height: 100%; background: url(/honda/funtec/enjoy/hondasensing360plus/images/privacy-policy-round1.png) center no-repeat; background-size: cover;}
.function-points-btn-box .btn-box .icon .round2{ width: 165%; height: 165%; background: url(/honda/funtec/enjoy/hondasensing360plus/images/privacy-policy-round1.png) center no-repeat; background-size: cover; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);}



.models-section{ padding: 0.8rem 0;}
.models-section .top-title{ font-size: 0.45rem; text-align: center;}

.models-tabs .tabs{ font-size: 0; text-align: center; position: relative; /* background: url(/honda/funtec/enjoy/hondasensing360plus/images/models-tabs-line.png) bottom center no-repeat; */}
.models-tabs .tabs ul{ margin: 0 -0.65rem;}
.models-tabs .tabs li{ display: inline-block; vertical-align: top; padding: 0 0.65rem;}
.models-tabs .tabs li .block-box{ font-size: 0.26rem; cursor: pointer; width: 1.1rem; line-height: 0.52rem; position: relative;}
.models-tabs .tabs li.active .block-box{ color: #0862a7; font-weight: bold;}
.models-tabs .tabs li.active .block-box::before{ content: ''; width: 100%; height: 0.04rem; background-color: #0862a7; position: absolute; left: 0; bottom: -0.01rem;}

.models-tabs .tabs-content-box{ margin-top: 0.6rem;}
.models-tabs .tabs-content-box .box{ display: none;}

.models-swiper-hidden{ display: none;}
.models-wrapper{ display: block; }
.models-swiper-animate .models-wrapper{ display: flex;}
.models-swiper{ font-size: 0; text-align: center;}
.models-swiper-inner{ margin: 0 -60%;}
.models-swiper .models-slide{ display: inline-block; vertical-align: top; width: 33.333%;}
.models-swiper .models-slide .block-box .logo{ height: 0.75rem;}
.models-swiper .models-slide .block-box .logo img{ display: block; width: 100%; height: 100%; object-fit: cover; margin: 0 auto;}
.models-swiper .models-slide .block-box .car{ margin-top: 0.2rem;}
.models-swiper .models-slide .block-box .car img{ display: block; width: 100%;}
.models-swiper .models-slide .block-box .tscx-btn{ margin-top: 0.3rem;}
.models-swiper .models-slide .block-box .tscx-btn span{ display: inline-block; border: 1px solid #272f36; border-radius: 0.1rem 0.1rem 0 0.1rem; font-size: 0.2rem; width: 1.68rem; line-height: 0.38rem;}

.models-swiper .swiper-pagination{ position: initial; margin-top: 0.45rem;}
.models-swiper .swiper-pagination-bullet{ background-color: #ccc;}
.models-swiper .swiper-pagination-bullet-active{ background-color: #307fbb;}


.sensing-video-layer{ width: 100%; height: 8.76rem; background-color: #000; position: fixed; left: 0; bottom: 0; z-index: 999; padding: 1.2rem 0 0.6rem 0; display: none;}
.sensing-video-swiper-hidden{ display: none;}
.sensing-video-swiper{ position: relative;}
.sensing-video-swiper .swiper-slide{ padding: 0 0.1rem;}
.sensing-video-swiper .swiper-slide .block-box{ cursor: pointer;}
.sensing-video-swiper .swiper-slide .block-box .pic{ border-radius: 0.2rem; overflow: hidden; opacity: 0.3; position: relative;}
.sensing-video-swiper .swiper-slide .block-box .pic video{ display: block; width: 100%;}
.sensing-video-swiper .swiper-slide .block-box .pic .play-pause-button{ width: 0.38rem; height: 0.38rem; position: absolute; top: 0.15rem; right: 0.15rem; border-radius: 50%; background: url(/honda/funtec/enjoy/hondasensing360plus/images/icon-play.png) center no-repeat; background-size: cover; cursor: pointer; display: none;}
.sensing-video-swiper .swiper-slide .block-box .pic .play-pause-button.active{ background-image: url(/honda/funtec/enjoy/hondasensing360plus/images/icon-pause.png);}
.sensing-video-swiper .swiper-slide .block-box .pic .play-pause-button svg{ transform: rotate(-90deg);}

.ab {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
}

.circle_left {
	border: 0.03rem solid #3b3b3b;
	border-radius: 50%;
	clip: rect(0, 0.19rem, 0.38rem, 0);
}


.circle_right {
	border: 0.03rem solid #3b3b3b;
	border-radius: 50%;
	// 使用clip-path应该更改为： 
	clip-path: inset(0 0 0 0.19rem);
	clip: rect(0, 0.38rem, 0.38rem, 0.19rem);
}


.sensing-video-swiper .swiper-slide .block-box .title{ font-size: 0.2rem; color: #fff; text-align: center; margin-top: 0.2rem; opacity: 0.3;}
.sensing-video-swiper .swiper-slide-active .block-box .pic{ opacity: 1;}
.sensing-video-swiper .swiper-slide-active .block-box .title{ opacity: 1;}

/* #play-circle {
  display: none;
} */


.sensing-video-layer .layer-close{ width: 0.5rem; height: 0.5rem; background: url(/honda/funtec/enjoy/hondasensing360plus/images/privacy-policy-close.png) center no-repeat; background-size: cover; position: absolute; top: 0.45rem; left: 38.333%; cursor: pointer;}
.sensing-video-swiper .swiper-arrow{ width: 0.5rem; height: 0.5rem; background-position: center; background-repeat: no-repeat; background-size: cover; position: absolute; top: -0.77rem; cursor: pointer;}
.sensing-video-swiper .swiper-arrow-prev{ background-image: url(/honda/funtec/enjoy/hondasensing360plus/images/icon-swiper-arrow-prev.png); left: 58.125%;}
.sensing-video-swiper .swiper-arrow-next{ background-image: url(/honda/funtec/enjoy/hondasensing360plus/images/icon-swiper-arrow-next.png); left: 61.562%;}
.sensing-video-swiper .swiper-button-disabled{ opacity: 0.3; cursor: initial;}


.side-navigation{ position: fixed; top: 50%; transform:translateY(-50%); left: 0.16rem; display: none;}
.side-navigation li{ line-height: 0.3rem; font-size: 0.15rem; color: #717171; margin-top: 0.15rem; padding-left: 0.32rem; position: relative; cursor: pointer;}
.side-navigation li span{ display: inline-block; vertical-align: top; position: relative;}
.side-navigation li span::before{ content: ''; width: 0.07rem; height: 0.07rem; background-color: #ace5f6; border-radius: 100%; position: absolute; top: 50%; transform:translateY(-50%); left: -0.26rem;}
.side-navigation li.active{ font-size: 0.18rem; color: #000;}
.side-navigation li.active span::before{ display: none;}
.side-navigation li.active .icon{ width: 0.18rem; height: 0.18rem; position: absolute; top: 50%; transform:translateY(-50%); left: 0rem;}
.side-navigation li.active .icon .round1{ width: 100%; height: 100%; background: url(/honda/funtec/enjoy/hondasensing360plus/images/sensing-title-round1.png) center no-repeat; background-size: cover;}
.side-navigation li.active .icon .round2{ width: 165%; height: 165%; background: url(/honda/funtec/enjoy/hondasensing360plus/images/sensing-title-round1.png) center no-repeat; background-size: cover; position: absolute; top: 50%; left: 50%; transform:translate(-50%,-50%);}









@media (max-width: 1680px){
	.base-qrcode-section{ height: 190px;}
	
}


@media (max-width: 1440px){
	
	
	
}

@media (max-width: 1200px){
	.privacy-policy-section{ height: calc(100% - 56px);}
}

@media (max-width: 992px){
	.edit-container{ width: 100%;}
	
	.sensing-banner{ height: auto;}
	.sensing-banner .sensing-logo{ width: 2rem; right: 0.4rem;}
	.sensing-banner .banner-inner{ width: 100%; left: 0; padding: 0 0.4rem;}
	.sensing-banner .banner-inner .title-box .title1{ font-size: 0.48rem;}
	.sensing-banner .banner-inner .title-box .title2{ font-size: 0.36rem;}
	.sensing-banner .banner-inner .label-describe dl{ margin: 0 -0.2rem;}
	.sensing-banner .banner-inner .label-describe dd{ font-size: 0.22rem; padding: 0 0.2rem;}
	.sensing-banner .banner-inner .label-describe dd .title{ font-size: 0.24rem;}
	.sensing-banner .banner-inner .label-describe dd .title span{ font-size: 0.4rem;}
	
	.sensing-title-box{ width: 3.2rem; height: 3.2rem; font-size: 0.4rem;}
	
	.xtjj-section{ padding: 0.8rem 0.4rem;}
	.xtjj-section .sensing-title-box{ float: none; margin: 0 auto;}
	.xtjj-section .cont-inner{ width: 100%; position: initial; transform: translateY(0); font-size: 0.24rem; margin-top: -0.4rem;}
	
	.xtsjd-section{ padding: 0 0.4rem;}
	.xtsjd-section .pic{ float: none; width: 100%;}
	.xtsjd-section .cont-inner{ float: none; width: 100%; margin-top: 0.4rem;}
	.xtsjd-section .cont-inner .sensing-title-box{ margin: 0 auto;}
	.xtsjd-section .cont-inner .cont{ font-size: 0.24rem; padding: 0; margin-top: -0.4rem;}
	
	.gndjs-section{ padding: 0.8rem 0.4rem;}
	.gndjs-list-block{ margin-top: 0.8rem;}
	.gndjs-top-box{ padding: 0.4rem 0.4rem 0.4rem 0.6rem;}
	.gndjs-top-box .title-box{ padding-left: 1rem;}
	.gndjs-top-box .title-box .icon{ width: 0.5rem; height: 0.5rem; margin-top: -0.25rem;}
	.gndjs-top-box .title-box .title1{ font-size: 0.32rem;}
	.gndjs-top-box .title-box .title2{ font-size: 0.28rem;}
	
	.gjcdbgfz-inner .top-title{ font-size: 0.36rem;}
	.gjcdbgfz-inner .cont-item .cont-item-block .cont-left{ float: none; width: 100%; font-size: 0.24rem;}
	.gjcdbgfz-inner .cont-item .cont-item-block .cont-left .title{ font-size: 0.32rem;}
	.gjcdbgfz-inner .cont-item .cont-item-block .img{ float: none; margin-left: 0; height: 1.5rem; margin-top: 0.2rem;}
	
	.sensing-btn-box{ margin-top: 0.4rem;}
	.sensing-btn-box .video-play-btn{ width: 2.8rem; line-height: 0.7rem;}
	.sensing-btn-box .video-play-btn span{ font-size: 0.24rem; padding-left: 0.4rem; background-size: 0.3rem;}
	
	.bxfz-list-item{ margin-top: 0.8rem;}
	.bxfz-list-item .pic{ float: none; width: 100%;}
	.bxfz-list-item .gjcdbgfz-inner{ float: none; width: 100%;}
	.bxfz-list-item .gjcdbgfz-inner .cont-item .cont-item-block .img{ margin-top: 0.2rem;}
	
	.wdplyj-list-item .pic{ float: none; width: 100%;}
	.wdplyj-list-item .gjcdbgfz-inner{ float: none; width: 100%;}
	
	.gndjs-tips{ margin-top: 0.6rem; padding: 0.4rem 0; font-size: 0.24rem;}
	
	.privacy-policy-section{ height: 11rem; padding: 1.05rem 0.4rem 0.8rem 0.4rem;}
	.privacy-policy-section .edit-container{ height: auto;}
	.privacy-policy-close{ width: 0.6rem; height: 0.6rem; top: -0.78rem;}
	.privacy-policy-container{ height: auto;}
	.privacy-policy-nav{ float: none; width: 100%; height: auto; padding: 0.2rem 0;}
	.privacy-policy-nav ul{ width: 100%; position: initial; transform: translateY(0); overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; display: block; white-space: nowrap;}
	.privacy-policy-nav li{ display: inline-block; vertical-align: top; margin: 0 0.1rem; font-size: 0.24rem; padding: 0.19rem 0.4rem 0.19rem 0.4rem;}
	.privacy-policy-nav li.active{ padding-left: 0.78rem;}
	.privacy-policy-nav li.active .icon{ width: 0.29rem; height: 0.29rem; left: 0.24rem;}
	
	.privacy-policy-content{ float: none; width: 100%; height: 8rem;}
	.privacy-policy-scroll{ padding: 0.6rem 0.3rem;}
	.privacy-policy-content .title-box{ font-size: 0.22rem;}
	.privacy-policy-content .title-box .bottom-box span{ display: block;}
	.privacy-policy-content .content{ font-size: 0.24rem;}
	
	
	
	.jsyycydxt-inner .top-title{ font-size: 0.36rem;}
	.jsyycydxt-inner .txt{ font-size: 0.24rem; margin-top: 0.2rem;}
	.jsyycydxt-inner .cont-item{ width: 100%;}
	.jsyycydxt-inner .cont-item-block{ float: none; width: 100%; margin-top: 0.2rem;}
	.jsyycydxt-inner .cont-item-block .cont-left{ font-size: 0.24rem;}
	.jsyycydxt-inner .cont-item-block .cont-left .title{ font-size: 0.28rem;}
	.jsyycydxt-inner .cont-item-block .cont-left .cont{ height: auto; -webkit-line-clamp: initial;}
	.jsyycydxt-inner .cont-item-block .img{ width: 80%; margin: 0.2rem auto 0 auto;}
	
	
	.kmpzyj-list-item .pic{ float: none; width: 100%;}
	.kmpzyj-list-item .gjcdbgfz-inner{ float: none; width: 100%;}
	
	.function-points-section .sensing-title-box{ font-size: 0.32rem;}
	.function-points-section .sensing-title-box strong{ font-size: 0.4rem;}
	
	
	.function-points-inner{ margin-top: -0.4rem; padding: 0.8rem 0.2rem;}
	.function-points-width{ width: 100%;}
	.function-points-inner .trends-box .title2{ left: 18.333%;}
	.function-points-inner .trends-box .title3{ top: 19%; left: 66%;}
	.function-points-inner .trends-box .title4{ top: 24.158%; left: 40.5%;}
	.function-points-inner .trends-box .title5{ top: 30%; left: 3.333%;}
	.function-points-inner .trends-box .title6{ left: 0%;}
	.function-points-inner .trends-box .title7{ top: 38%; left: 58%;}
	
	.function-points-inner .trends-box .title8{ top: 56%; left: 54%;}
	.function-points-inner .trends-box .title9{ top: 46%; left: 33.583%;}
	.function-points-inner .trends-box .title10{ left: 0;}
	.function-points-inner .trends-box .title11{ top: 71%; left: 50%;}
	.function-points-inner .trends-box .title12{ top: 74%; left: 16.5%;}
	.function-points-inner .trends-box .title13{ top: 88%;}
	
	
	.function-points-inner .cont{ font-size: 0.24rem; margin-top: 0.4rem; padding: 0 0.2rem;}
	
	.function-points-btn-box .btn-box{ font-size: 0.24rem;}
	
	
	.models-section{ padding: 0.8rem 0.4rem;}
	.models-section .top-title{ font-size: 0.4rem; width: 70%; margin: 0 auto;}
	
	.models-swiper-inner{ margin: 0 -60%;}
	.models-swiper .models-slide .block-box .logo{ height: 0.8rem;}
	.models-swiper .models-slide .block-box .car{ margin-top: 0.4rem;}
	.models-swiper .models-slide .block-box .car img{ width: 120%; position: relative; left: -10%;}
	.models-swiper .models-slide .block-box .tscx-btn{ margin-top: 0.4rem;}
	.models-swiper .models-slide .block-box .tscx-btn span{ font-size: 0.28rem; width: 2.4rem; line-height: 0.6rem; border-radius: 0.2rem 0.2rem 0 0.2rem;}

	
	
	.sensing-video-layer{ height: 11rem;}
	
	.sensing-video-swiper .swiper-slide .block-box .pic .play-pause-button{ width: 0.6rem; height: 0.6rem;}
	
	.circle_left {
		border: 0.05rem solid #3b3b3b;
		border-radius: 50%;
		clip: rect(0, 0.3rem, 0.6rem, 0);
	}
	
	.circle_right {
		border: 0.05rem solid #3b3b3b;
		border-radius: 50%;
		// 使用clip-path应该更改为： 
		clip-path: inset(0 0 0 0.3rem);
		clip: rect(0, 0.6rem, 0.6rem, 0.3rem);
	}
	
	.sensing-video-swiper .swiper-slide .block-box .title{ font-size: 0.24rem;}
	
	.sensing-video-layer .layer-close{ width: 0.6rem; height: 0.6rem;  top: 0.3rem; left: 0.4rem;}
	.sensing-video-swiper .swiper-arrow{ width: 0.6rem; height: 0.6rem; top: -0.9rem;}
	.sensing-video-swiper .swiper-arrow-prev{ left: auto; right: 1.2rem;}
	.sensing-video-swiper .swiper-arrow-next{ left: auto; right: 0.4rem;}
	
	
	.base-qrcode-section{ height: auto;}
	
	.side-navigation{ display: none !important;}

}
@media (max-width: 767px){
	
	
	
}

@media (max-width: 320px){
	
}

/* 特殊缩放 */
@media (max-width: 1280px){
	/* 缩小70% */
	
	
}
<!--耗时1764576624.5996秒-->