.section{background:#fff;overflow:hidden}
.nav{position:fixed;height:100vh;width:1px;top:0;right:1rem;z-index:11;background:rgba(255,255,255,.08)}
.nav.active{background:rgba(200,200,200,.2)}
.nav.active ul .li{background:#e5e5e5}
.nav.active ul .li:hover::before{background:var(--themeColor1)}
.nav.active ul .li::before{background:#e5e5e5}
.nav.active ul .li.active{background:#e5e5e5}
.nav.active ul .li.active::before{background:var(--themeColor1)}
.nav ul{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);gap:.3rem}
.nav ul .li{width:9px;aspect-ratio:1;background:rgba(255,255,255,.5);border-radius:50%;position:relative;cursor:pointer}
.nav ul .li:hover::before{background:#fff}
.nav ul .li::before{content:"";width:9px;aspect-ratio:1;background:rgba(255,255,255,.5);border-radius:50%;transform:translate(-50%,-50%);position:absolute;top:50%;left:50%;z-index:12;transition:.3s}
.nav ul .li.active{width:18px;background:rgba(255,255,255,.5)}
.nav ul .li.active::before{background:#fff}
.ccvideo .ovh{position:relative;display:flex;justify-content:center;align-items:center}
.ccvideo .ovh .i1{animation:addicons1 .5s linear forwards;position:relative;z-index:1;opacity:1}
.ccvideo .ovh .i2{position:absolute;animation:addicons2 .5s linear forwards;z-index:-1;opacity:0;background:0 0}
.ccvideo:hover .ovh .i1{animation:addicon1 .5s linear forwards;z-index:-1;opacity:0}
.ccvideo:hover .ovh .i2{animation:addicon2 .5s linear forwards;z-index:2;opacity:1}
.icon-btn{min-width:.6rem;height:.6rem;width:min-content;border-radius:.5rem;background:#fff;color:var(--themeColor);display:flex;justify-content:center;align-items:center;cursor:pointer;transition:.3s}
.icon-btn .text{height:100%;display:flex;align-items:center;justify-content:flex-end;width:0;text-align:center;overflow:hidden;transition:.3s;white-space:nowrap}
.icon-btn .icons{height:100%;aspect-ratio:1;border-radius:.5rem;display:flex;justify-content:center;align-items:center}
.icon-btn .icons .icon-box{position:relative;overflow:hidden}
@media screen and (max-width:1550px){.icon-btn .icons .icon-box{width:12px}
}
.icon-btn .icons .icon{display:block;aspect-ratio:1;transition:.3s;width:100%}
.icon-btn .icons .i1{animation:addicons1 .5s linear forwards;position:relative;z-index:1;opacity:1}
@keyframes addicons1{0%{transform:translate(-100%,100%)}
100%{transform:translate(0,0)}
}
@keyframes addicons2{0%{top:50%;right:50%;transform:translate(50%,-50%)}
50%{top:0;right:0;transform:translate(100%,-100%);opacity:0}
100%{right:100%;top:100%;transform:none}
}
.icon-btn .icons .i2{position:absolute;animation:addicons2 .5s linear forwards;z-index:-1;opacity:0;background:0 0}
.icon-btn:hover{min-width:1.7rem}
.icon-btn:hover .text{width:.8rem}
.icon-btn:hover .icons .i1{animation:addicon1 .5s linear forwards;z-index:-1;opacity:0}
@keyframes addicon1{50%{transform:translate(100%,-100%)}
100%{opacity:1;transform:translate(-100%,100%)}
}
@keyframes addicon2{0%{top:100%;right:100%;transform:translate(0,0)}
100%{top:50%;right:50%;transform:translate(50%,-50%)}
}
.icon-btn:hover .icons .i2{animation:addicon2 .5s linear forwards;z-index:2;opacity:1}
.icon-btn .iconfont{display:block;transition:.3s}
.icon-heng{width:30px;aspect-ratio:1;border-radius:50%;background:#dedede;box-shadow:0 6px 20px 0 rgba(0,0,0,.05);display:flex;justify-content:center;align-items:center;color:#17509f;cursor:pointer}
.icon-heng .button{position:relative;aspect-ratio:1;overflow:hidden;display:flex;justify-content:center;align-items:center}
.icon-heng .iconfont{background:#fff;transition:.3s;position:relative;z-index:1}
.icon-heng.prve{left:0}
.icon-heng.prve .i1{z-index:2;animation:addhengs12 .3s linear forwards}
.icon-heng.prve .i2{z-index:-1;right:50%;position:absolute;animation:addhengs11 .5s linear forwards}
.icon-heng.prve:hover .i1{z-index:-1;animation:addhengs2 .5s linear forwards}
.icon-heng.prve:hover .i2{z-index:2;animation:addhengs1 .3s linear forwards}
@keyframes addhengs1{0%{transform:translateX(200%)}
100%{transform:translateX(50%)}
}
@keyframes addhengs2{0%{transform:translateX(0)}
50%{transform:translateX(-100%)}
100%{transform:translateX(100%)}
}
@keyframes addhengs11{0%{transform:translateX(50%)}
50%{transform:translateX(-100%)}
100%{transform:translateX(200%)}
}
@keyframes addhengs12{0%{transform:translateX(100%)}
100%{transform:translateX(0)}
}
.icon-heng.next{right:0;transform:rotate(180deg);}
.icon-heng.next .i1{z-index:2;animation:addheng12 .3s linear forwards}
.icon-heng.next .i2{z-index:-1;left:50%;position:absolute;animation:addheng11 .5s linear forwards}
.icon-heng.next:hover .i1{z-index:-1;animation:addheng2 .5s linear forwards}
.icon-heng.next:hover .i2{z-index:2;animation:addheng1 .3s linear forwards}
@keyframes addheng1{0%{transform:translateX(-200%)}
100%{transform:translateX(-50%)}
}
@keyframes addheng2{0%{transform:translateX(0)}
50%{transform:translateX(100%)}
100%{transform:translateX(-100%)}
}
@keyframes addheng11{0%{transform:translateX(-50%)}
50%{transform:translateX(100%)}
100%{transform:translateX(-200%)}
}
@keyframes addheng12{0%{transform:translateX(-100%)}
100%{transform:translateX(0)}
}
.foot-icon .icons{height:100%;display:flex;justify-content:center;align-items:center}
.foot-icon .icons .icon-box{position:relative;overflow:hidden}
.foot-icon .icons .icon{display:block;aspect-ratio:1;transition:.3s;width:100%}
.foot-icon .icons .i1{animation:addicons1 .5s linear forwards;position:relative;z-index:1}
@keyframes addicons1{0%{transform:translate(-100%,100%)}
100%{transform:translate(0,0)}
}
@keyframes addicons2{0%{top:50%;right:50%;transform:translate(50%,-50%)}
50%{top:0;right:0;transform:translate(100%,-100%)}
100%{right:100%;top:100%;transform:none}
}
.about-page3{background-image:url(../images/pages/oval.jpg) no-repeat;background-size:cover;height:919px;padding:1rem 0 1rem;overflow:hidden}
.about-page3 .page3-left{max-width:50%;width:100%;gap:.5rem;flex-shrink:0;padding-right:var(--container_margin)}
.about-page3 .page-title{padding-left:10%}
.about-page3 .page3-swi{height:3rem;overflow:hidden;padding-left:10%}
.about-page3 .page3-swi .swi-slide{font-size:22px;line-height:25px;color:#666666;transition:.3s;display:flex;align-items:center;position:relative;flex-shrink:0}
.about-page3 .page3-swi .swi-slide .slide-img{display:none}
.about-page3 .page3-swi .swi-slide.swi-slides{font-family:Bold;font-size:30px;color:#000000;}
.about-page3 .page3-swi .swi-slide.swi-slides::before{width:.2rem;height: 2px;}
.about-page3 .page3-swi .swi-slide::before{content:"";position:absolute;width:0;height:1px;background:var(--themeColor1);top:50%;right:100%;transform:translate(-60%,100%);transition:.3s}
.about-page3 .page3-pation{padding-left:10%;width:100%}
.about-page3 .page3-pation .num{gap:.05rem}
.about-page3 .page3-pation .num h1{font-family:Bold;color: #000000;}
.about-page3 .page3-pation .num h1,.about-page3 .page3-pation .num h3{line-height:1}
.about-page3 .page3-pation .pation-left{gap:.3rem}
.about-page3 .page3-pation .pation-left .swipation{margin-top:.2rem;height:2px;width:2.2rem;background:rgba(0,0,0,.25)}
.about-page3 .page3-pation .pation-left .swipation .swiper-pagination-progressbar-fill{width:100%;height:100%;display:block;transform-origin:left;background-color:#004098}
.about-page3 .page3-pation .pation-right{gap:.3rem}
.about-page3 .page3-right{position:absolute;left:0;top:50%;flex:1;position:relative;height:100%;transform:translate(-35%,-50%)}
.about-page3 .page3-right .bg{transform:translateY(-50%);padding:.8rem;border-radius:50%;border:0.5rem solid #f1f1f1;text-align:end;text-align:right;position:relative;top:50%}
.about-page3 .page3-right .bg .bgimg{height:100%}
.about-page3 .page3-right .bg .bgimg{border-top-right-radius:50%;border-bottom-right-radius:50%}
.about-page3 .page3-right .imgitem{position:absolute;top:-10%;left:-15%;transition:.3s;transform-origin:right bottom;width:3rem;border:.1rem solid transparent}
.about-page3 .page3-right .imgitem::before{background-image:url(../images/pages/hboderw.png) no-repeat;background-size:cover;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0}
.about-page3 .page3-right .imgitem .img{transition:.3s ease-in-out;padding:.15rem}
.about-page3 .page3-right .imgitem .img.imgh{background-image:url(../images/pages/hboderh.png) no-repeat;background-size:cover}
.about-page3 .page3-right .imgitem .img.imgw{background-image:url(../images/pages/hboderw.png) no-repeat;background-size:cover}
.about-page3 .page3-right .imgitem .img img{width:100%}


@media screen and (max-width:1550px){
	.about-page3 .page3-right .imgitem{margin-top: -20%;}
	.page_info .info-content .info-list .info-item{padding:.3rem 0}
	.product .page-section .page-view .menu .item .item-box{font-size:15px}
}
@media screen and (max-width:1600px){
.about-page3 .page3-right .imgitem{left: -60%;}	
.cbaside{height:2rem}
.nav{right:1.2rem}
}
@media screen and (max-width:1300px){
{
	.about-page3 .page3-right .imgitem{left: -50%;margin-top: -20%;}
}
@media(max-width:1280px){
.about-page3 .page3-right .imgitem{margin-left: -20%;margin-top: -30%;}	
	.cbaside{height:2.4rem;width:.8rem;right:0}
.page_info .info-content .info-list{padding-right:var(--container_margin)}
.product .page-section .itema-box .img-box img{height:3rem}
}
@media screen and (max-width:600px){.product .detail::before{opacity:0;width:0}

.about-page3 .page3-right .imgitem{left: -60%;}
.icon-btn{height:1rem;min-width:1rem}
.icon-btn:hover{min-width:1rem}
.icon-btn:hover .text{width:0}
.about-page3{}
.about-page3 .page-title{padding-left:0}
.about-page3 .page3-pation{display:none}
.about-page3 .page3-right{position:relative;transform:none;top:auto;left:auto;display:none}
.about-page3 .page3-right .bg{position:static;transform:none;height:100%;border:none}
.about-page3 .page3-right .bg .bgimg{display:none}
.about-page3 .page3-left{max-width:100%;padding:0 var(--container_margin)}
.about-page3 .page3-swi{padding-left:0;width:100%;height:auto}
.about-page3 .page3-swi .swi-slide{flex-direction:column;font-size:.35rem}
.about-page3 .page3-swi .swi-slide.swi-slides{font-size:.35rem}
.about-page3 .page3-swi .swi-slide .slide-img{display:block;width:100%}

@media (max-width:600px){
	.swiper-vertical>.swiper-wrapper{flex-direction: initial;}
	.swiper-wrapper{position:relative;}
	.about-page3 .page3-pation{display:none;}
	.page-title h6{font-size: 16px;font-weight:500;letter-spacing:1px;}
	.page-title h2{font-size: 24px;line-height: 30px;color: #222222;font-weight:500;}
	.about-page3{height:auto;}
	.about-page3 .page-title{padding-left:0}
	.about-page3 .page3-pation{display:none}
	.about-page3 .page3-right{position:relative;transform:none;top:auto;left:auto;display:none}
	.about-page3 .page3-right .bg{position:static;transform:none;height:100%;border:none}
	.about-page3 .page3-right .bg .bgimg{display:none}
	.about-page3 .page3-left{max-width:100%;padding:0 var(--container_margin)}
	.about-page3 .page3-swi{padding-left:0;width:100%;height:auto}
	.about-page3 .page3-swi .swi-slide{flex-direction:column;font-size:.2rem}
	.about-page3 .page3-swi .swi-slide.swi-slides{font-size:.2rem}
	.about-page3 .page3-swi .swi-slide .slide-img{display:block;width:100%}

}