.main{padding-top:80px;padding-bottom:60px;}

.main-right{margin-left:340px;}
.richtext-detail,
#detail_decorate_root,
#detail_decorate_root [class^="magic-"],
#detail_decorate_root .magic-0,
#detail_decorate_root [class*="magic-"],
#detail_decorate_root img,
.pro-content video{
  width:100% !important;
  height: auto !important;
}
.main-left{float:left;width:260px;}
.main-left h3{display:none;font-size:20px;color:#fff;height:50px;line-height:50px;padding:0 0 0 20px;background:var(--color-primary);position:relative;}
.main-left h3::after{display:block;font-family:"qico";content: "\e727";position:absolute;top:6px;right:6px;width:40px;height:40px;line-height:40px;text-align:center;font-size:20px;-webkit-transition: -webkit-transform .3s ease;transition: -webkit-transform .3s ease;transition: transform .3s ease;transition: transform .3s ease, -webkit-transform .3s ease;}
.main-left h3.active::after{-webkit-transform: rotate(45deg) scale(1.08);-ms-transform: rotate(45deg) scale(1.08);transform: rotate(45deg) scale(1.08);}
 .crmFormVali-error{
    top: 102% !important;
    right: auto !important;
    left: 10px !important;
  }
.sidemenu{margin:0 0 20px;}
.sidemenu > ul{}
.sidemenu > ul > li{border-bottom:1px solid #e2e2e2;}
.sidemenu > ul > li h5{line-height:22px;display:block;padding:12px 0 12px 13px;font-size:15px;color:#212121;cursor:pointer;position:relative;}
.sidemenu > ul > li h5 a{display:block;margin-right:40px;box-sizing:border-box;}
.sidemenu > ul > li h5 a:hover{color:var(--color-primary);text-decoration:underline;}
.sidemenu > ul > li h5 span{position:absolute;right:0;top:0;background:url("./pics/i4.png") no-repeat center;width:40px;height:45px;display:block;}

.sidemenu > ul > li ul{display:none;}
.sidemenu > ul > li ul li{line-height:18px;border-bottom:1px dashed #DCDCDC;background:#fff;padding:8px 13px;}
.sidemenu > ul > li ul li:last-child{border-bottom:none;}
.sidemenu > ul > li ul li a{padding-left:15px;font-size:13px;color:#484848;display:block;}
.sidemenu > ul > li ul li.active a,.sidemenu > ul > li ul li a:hover{color:var(--color-primary);background:url("https://okki-shop.oss-cn-hangzhou.aliyuncs.com/1342/upload/sort/09760d796666109e70d1665cf49b32d17e6f53f9d5507510b138b139136d7036.png") no-repeat left center;}

.sidemenu > ul > li.active h5{color:var(--color-primary);border-bottom:1px solid #e2e2e2;}
.sidemenu > ul > li.active span{background:url("./pics/i4-1.png") no-repeat center;}
                              
.tit .swiper-button-prev::after,.tit .swiper-button-next::after{content:none;}

.pro_view{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;}

.pro_img{width:435px;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;}
.pro_img .view{width:343px;position:relative;}
.pro_img .view .swiper{width:100%;}
.pro_img .view .swiper img{aspect-ratio: 1/1;object-fit: cover;width:100%;display:block;}

.pro_img .preview{width:80px;height:343px;position:relative;text-align:center;overflow:hidden;box-sizing:border-box;}
.pro_img .preview .swiper{width:100%;height:100%;text-align:center;}
.pro_img .preview .swiper-wrapper{height:100%;}
.pro_img .preview .swiper-slide{cursor:pointer;width:80px;display:inline-block;box-sizing:border-box;position:relative;}
.pro_img .preview .swiper-slide::after{display:none;content:'';background:color-mix(in srgb, var(--color-second) 50%, transparent);position:absolute;left:0;right:0;top:0;bottom:0;}
.pro_img .preview .swiper-slide img{width:100%;box-sizing:border-box;}

.pro_img .preview .swiper-slide.active-nav::after{display:block;}

.pro_img .preview .arrow-left,.pro_img .preview .arrow-right{background:color-mix(in srgb, var(--color-primary) 75%, transparent);position:absolute;left:0;right:0;width:80px;height:15px;line-height: 15px;z-index:10;text-align:center;}
.pro_img .preview .arrow-left{top:0;}
.pro_img .preview .arrow-right{bottom:0;}
.pro_img .preview .arrow-left i,.pro_img .preview .arrow-right i{color:#fff;font-size:12px;line-height:15px;}


.pro_view_inner{-webkit-flex:1;flex:1;margin-left:35px;}
.pro_view_inner h1{color:#212121;font-size:18px;letter-spacing:2px;text-transform:uppercase;}

.pro_view_inner h2{color:#212121;font-size:18px;letter-spacing:2px;text-transform:uppercase;}
.pro_view_inner hr{height:1px;background:#EFEFEF;margin:40px 0 0;}
.pro_view_inner .pro-share{margin:40px 0 0;}
.pro_view_inner a.book{width:155px;height:38px;line-height:38px;text-align:center;font-size:16px;color:#fff;display:block;background:var(--color-primary);margin:40px 0 0;border-radius: var(--button-radius);}

.pro_tab_box{height:60px;margin-top:30px;}
.pro_tab{height:60px;box-sizing:border-box;z-index:99;background:var(--color-primary);}
.pro_tab.scroll-top{position:fixed;top:0px;left:0;z-index:100;width: 100%;}

.pro_tab ul{height:60px;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;position:relative;}
.pro_tab ul li{padding:0 5px;box-sizing:border-box;height:40px;line-height:20px;text-align:center;position:relative;box-sizing:border-box;font-size:13px;cursor:pointer;color:#fff;position:relative;text-transform:uppercase;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;-webkit-flex: auto;flex: auto;}
.pro_tab ul li:not(:last-child)::after{content:'';width:1px;background:#fff;position:absolute;right:0;top:10px;bottom:10px;}
.pro_tab ul li.active{text-decoration:underline;}

.pro_text{margin:35px 0 0;position:relative;}
.pro_text .pro-scroll{padding:18px 0 25px;border-top:1px solid #EFEFEF;}
.pro_text .tit{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;}
.pro_text .tit h5{width:217px;height:42px;line-height:42px;text-align:center;font-size:14px;color:#fff;background:var(--color-primary);text-transform:uppercase;}

.pro-content{padding:25px 0 0;line-height:30px;font-size:16px;color:#333;}
.pro-content p~p{margin-top:10px;}
.pro-content .table-response{width:100%;max-width: 100%;overflow-x:auto;}
.pro-content table {width:100%;font-size:14px;color:#212121;border-collapse: collapse;}
.pro-content table th{padding:10px 20px;border:1px solid #E4EAF2;background-color:#F8FAFC;}
.pro-content table td{padding:10px 20px;border:1px solid #E4EAF2;background-color:#ffffff;}
.pro-content table tr td:nth-child(2n+1){background-color:#F8FAFC;}
/* .pro-video a.v{width:100%;display:block;overflow:hidden;box-sizing:border-box;position:relative;}
.pro-video a.v::after{content:'';background:url("./pics/v2.png") no-repeat right 40px bottom 30px;width:100%;height:100%;position:absolute;right:0;bottom:0;display:block;}
.pro-video a.v img{width:100%;display:block;transition:all 0.3s ease 0s;}
.pro-video a.v:hover img{transform: scale(1.04);}
.pro-video a.v:hover::after{background-color:rgba(0,0,0,0.28);} */

.pro-choose em{color:var(--color-primary);margin-right: 8px;}
.pro-choose p{font-size:16px;}

.pro-quality-page .swiper-button-prev,.pro-quality-page .swiper-button-next{position:static;display:inline-block;width:39px;height:39px;background:var(--color-second);border-radius:50%;margin:0;text-align:center;}
.pro-quality-page .swiper-button-prev,.pro-quality-page .swiper-container-rtl .swiper-button-next{margin-left:12px;}
.pro-quality-page .swiper-button-prev i,.pro-quality-page .swiper-button-next i{color:#fff;font-size:23px;line-height:39px;}
.pro-quality-page .swiper-button-prev:hover,.pro-quality-page .swiper-button-next:hover{background:var(--color-primary);}

.pro-quality .list{position:relative;}
.pro-quality .swiper-slide{position:relative;overflow:hidden;}
.pro-quality .swiper-slide img{width:100%;display:block;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;}

.pro-quality .swiper-slide .t{position:absolute;z-index:2;left:0;right:0;bottom:0;width:100%;padding:0 30px;box-sizing:border-box;background:color-mix(in srgb, var(--color-primary) 75%, transparent);cursor:pointer;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;flex-direction:column;-webkit-flex-direction:column;text-align:center;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;}
.pro-quality .swiper-slide .t h5{line-height:44px;color:#fff;font-size:16px;text-transform:uppercase;}
.pro-quality .swiper-slide .t p{color:#fff;font-size:14px;line-height:23px;margin:20px 0 0;display:none;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;}

.pro-quality .swiper-slide:hover .t{height:100%;}
.pro-quality .swiper-slide:hover .t p{display:block;}

.pro-quality .swiper-pagination{display:none;position:static;width:100%;margin-top:20px;}
.pro-quality .swiper-pagination-bullet {height:8px;width:8px;margin:0 3px;background:#ccc;border-radius:10px;opacity:1;box-sizing:border-box;}
.pro-quality .swiper-pagination-bullet-active{width:12px;background:var(--color-primary);}

.pro-certificate-page .swiper-button-prev,.pro-certificate-page .swiper-button-next{position:static;display:inline-block;width:39px;height:39px;background:var(--color-second);border-radius:50%;margin:0;text-align:center;}
.pro-certificate-page .swiper-button-prev,.pro-certificate-page .swiper-container-rtl .swiper-button-next{margin-left:12px;}
.pro-certificate-page .swiper-button-prev i,.pro-certificate-page .swiper-button-next i{color:#fff;font-size:23px;line-height:39px;}
.pro-certificate-page .swiper-button-prev:hover,.pro-certificate-page .swiper-button-next:hover{background:var(--color-primary);}

.pro-certificate .list{position:relative;}
.pro-certificate .swiper-slide{position:relative;overflow:hidden;}
.pro-certificate .swiper-slide img{width:100%;display:block;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;}

.pro-certificate .swiper-slide .t{position:absolute;z-index:2;left:0;right:0;bottom:0;width:100%;padding:0 30px;box-sizing:border-box;background:color-mix(in srgb, var(--color-primary) 75%, transparent);cursor:pointer;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;flex-direction:column;-webkit-flex-direction:column;text-align:center;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;}
.pro-certificate .swiper-slide .t h5{line-height:44px;color:#fff;font-size:16px;text-transform:uppercase;}
.pro-certificate .swiper-slide .t p{color:#fff;font-size:14px;line-height:23px;margin:20px 0 0;display:none;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;}

.pro-certificate .swiper-slide:hover .t{height:100%;}
.pro-certificate .swiper-slide:hover .t p{display:block;}

.pro-certificate .swiper-pagination{display:none;position:static;width:100%;margin-top:20px;}
.pro-certificate .swiper-pagination-bullet {height:8px;width:8px;margin:0 3px;background:#ccc;border-radius:10px;opacity:1;box-sizing:border-box;}
.pro-certificate .swiper-pagination-bullet-active{width:12px;background:var(--color-primary);}

.pro-other-page .swiper-button-prev,.pro-other-page .swiper-button-next{position:static;display:inline-block;width:39px;height:39px;background:var(--color-second);border-radius:50%;margin:0;text-align:center;}
.pro-other-page .swiper-button-prev,.pro-other-page .swiper-container-rtl .swiper-button-next{margin-left:12px;}
.pro-other-page .swiper-button-prev i,.pro-other-page .swiper-button-next i{color:#fff;font-size:23px;line-height:39px;}
.pro-other-page .swiper-button-prev:hover,.pro-other-page .swiper-button-next:hover{background:var(--color-primary);}

.pro-other .list{position:relative;}
.pro-other .swiper-slide{position:relative;overflow:hidden;}
.pro-other .swiper-slide img{width:100%;height:100%;aspect-ratio:1/1;display:block;transition:all 0.3s ease 0s;-webkit-transition:all 0.3s ease 0s;}
.pro-other .swiper-slide p{color:#212121;font-size:14px;margin:10px 0 0;text-align:center;text-transform:uppercase;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}

.pro-other .swiper-slide:hover .t{height:100%;}
.pro-other .swiper-slide:hover .t p{display:block;}

.pro-other .swiper-pagination{display:none;position:static;width:100%;margin-top:20px;}
.pro-other .swiper-pagination-bullet {height:8px;width:8px;margin:0 3px;background:#ccc;border-radius:10px;opacity:1;box-sizing:border-box;}
.pro-other .swiper-pagination-bullet-active{width:12px;background:var(--color-primary);}

.pro-inquiry{margin:20px 0 0;border-radius:10px;padding:40px 80px 10px;box-shadow:0 0 68px 0 rgba(222,222,229,0.75);}
.pro-inquiry h4{font-size:24px;color:#212121;text-align:center;margin-bottom:25px;}
.pro-inquiry .inquirbox input[type="text"],.pro-inquiry .inquirbox textarea{padding:10px 0;border-bottom:2px solid color-mix(in srgb, var(--color-second) 50%, transparent);}
.pro-inquiry p{text-align: center;}
.pro-inquiry .inquirbox input[type="text"]:focus,.pro-inquiry .inquirbox textarea:focus{border-bottom:2px solid var(--color-primary);}
.pro-inquiry .inquirbox input.submit{width:145px;line-height:36px;margin:0 auto;}
.inquirbox .row{margin-bottom:20px;}
.inquirbox input[type="text"],.inquirbox textarea{padding:10px 10px;font-size:14px;border:none;width:100%;line-height:22px;text-align:left;color:#333;box-sizing:border-box;}
.inquirbox textarea{max-width:100%;width:100%;resize:none;}
.inquirbox input[type="text"]:focus,.inquirbox textarea:focus{outline:0;}
.inquirbox .red{color:#f00;}
.inquirbox .yzm { width:70%; margin-right:10px;}
.inquirbox img {cursor: pointer; margin-left: 3px; display: inline-block;vertical-align: middle;}
.inquirbox input.submit{display:block;color:#fff;font-size:15px;width:220px;height:48px;line-height:48px;letter-spacing:1px;background:var(--color-primary);text-align:center;cursor:pointer;}


@media screen and (max-width:992px){
  .main{padding-top:25px;padding-bottom:30px;}
  
  .main-right{margin-left:0;}

  .main-left{float:none;width:100%;}
  .main-left h3{display:block;}

  .sidemenu > ul{display:none;}

  .pro_view{-webkit-flex-direction:column;flex-direction:column;}

  .pro_img{width:100%;-webkit-flex-direction:column;flex-direction:column;}
  .pro_img .view{width:343px;position:relative;margin:0 auto;}
  .pro_img .view .swiper{width:100%;}
  .pro_img .view .swiper img{width:100%;display:block;}

  .pro_img .preview{width:343px;height:auto;position:relative;text-align:center;overflow:hidden;box-sizing:border-box;margin:10px auto 0;}
  .pro_img .preview .swiper{width:100%;height:100%;text-align:center;}
  .pro_img .preview .swiper-wrapper{height:100%;}
  .pro_img .preview .swiper-slide{cursor:pointer;width:50px;display:inline-block;box-sizing:border-box;position:relative;}
  .pro_img .preview .swiper-slide::after{display:none;content:'';background:color-mix(in srgb, var(--color-second) 50%, transparent);position:absolute;left:0;right:0;top:0;bottom:0;}
  .pro_img .preview .swiper-slide img{width:100%;box-sizing:border-box;}

  .pro_img .preview .swiper-slide.active-nav::after{display:block;}

  .pro_img .preview .arrow-left,.pro_img .preview .arrow-right{background:color-mix(in srgb, var(--color-primary) 75%, transparent);position:absolute;left:0;right:0;width:30px;height:30px;z-index:10;text-align:center;}
  .pro_img .preview .arrow-left{top:calc(50% - 15px);}
  .pro_img .preview .arrow-right{bottom:auto;top:calc(50% - 15px);left:auto;right:0;}
  .pro_img .preview .arrow-left i,.pro_img .preview .arrow-right i{color:#fff;font-size:12px;line-height:30px;display:inline-block;transform:rotate(-90deg);}


  .pro_view_inner{margin:25px 0 0;}
  .pro_view_inner h1{text-align:center;}
  .pro_view_inner hr{margin:20px 0 0;}
  .pro_view_inner .pro-share{margin:20px 0 0;text-align:center;}
  .pro_view_inner a.book{margin:20px auto 0;}

  .pro_tab_box{display:none;}

  .pro_text{margin:30px 0 0;}
  .pro_text .pro-scroll{padding:0 0 20px;}
  .pro_text .tit{-webkit-align-items:center;align-items:center;}
  .pro_text .tit h5{width:auto;display:inline-block;padding:0 15px;height:40px;line-height:40px;}

  .pro-content{line-height:24px;font-size:14px;padding:15px 0 0;}
  .pro-content table{font-size:14px;}
  .pro-content table th{padding:7px 10px;}
  .pro-content table td{padding:7px 10px;}

  .pro-quality-page .swiper-button-prev,.pro-quality-page .swiper-button-next{width:24px;height:24px;}
  .pro-quality-page .swiper-button-prev,.pro-quality-page .swiper-container-rtl .swiper-button-next{margin-left:5px;}
  .pro-quality-page .swiper-button-prev i,.pro-quality-page .swiper-button-next i{font-size:18px;line-height:24px;}

  .pro-quality .swiper-slide .t{position:static;padding:0 10px;}
  .pro-quality .swiper-slide .t h5{line-height:40px;font-size:15px;}
  .pro-quality .swiper-slide .t p{display:none;}
  .pro-quality .swiper-slide:hover .t{height:100%;}
  .pro-quality .swiper-slide:hover .t p{display:none;}

  .pro-quality .swiper-pagination{display:block;}

  .pro-other-page .swiper-button-prev,.pro-other-page .swiper-button-next{display:none;}
  .pro-other .swiper-pagination{display:block;}

  .pro-inquiry{padding:20px 15px 10px;box-shadow:0 0 15px 0 rgba(222,222,229,0.75);}
  .pro-inquiry h4{font-size:20px;margin-bottom:20px;}
  .inquirbox .row{margin-bottom:0;}
  .inquirbox .row > div{margin-bottom:16px;}
  .inquirbox input.submit{font-size:15px;width:160px;height:40px !important;line-height:40px;padding:0;}
}

@media screen and (max-width:450px) {
  .pro_img .view,.pro_img .preview{width:100%;}
}




@media screen and (max-width:768px){

  .richtext-detail{

    width: 100% !important;
  }
  #detail_decorate_root{

    width:100% !important;
  }
  #detail_decorate_root [class*="magic-"]{width:100% !important;height:100% !important;}
}
.ife-detail-decorate-table{
  overflow-x: auto;
  
  }

.pro_view {
  overflow: hidden;
  display: -webkit-flex;
  display: flex;
}
.pro_view .pro_img img {
  margin: auto;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.pro_img .pro_relative {
  position: relative;
}
 .pro_img .pro_relative.active {
  display: block;
}
.pro_img .pro_relative {
  display: none;
}
.pro_img {
  display: block;
  padding: 0 15px;
}
.pro-overview {
  margin-top: 16px;
}
.pro-overview .view {
  padding: 0 20px;
  box-sizing: border-box;
  position: relative;
  width: 100%;
}
.pro-overview .swiper-slide {
  cursor: pointer;
}
.pro-overview .swiper-slide.swiper-select-active {
  border: 1px solid var(--color-primary);
}
.pro-overview .swiper-slide img {
  aspect-ratio: 1;
  object-fit: cover;
}
.pro-overview .arrow-left,
.pro-overview .arrow-right {
  position: absolute;
  top: calc(50% - 30px);
  line-height: 60px;
  z-index: 10;
  text-align: center;
}
.pro-overview .arrow-left {
  left: -10px;
}
.pro-overview .arrow-right {
  right: -10px;
}
.pro-overview .arrow-left i,
.pro-overview .arrow-right i {
  color: #000;
  font-size: 16px;
}
.pro-overview .arrow-left:hover i,
.pro-overview .arrow-right:hover i {
  color: var(--color-primary);
}
/* 媒体查询图片相关样式 */
@media screen and (max-width: 1500px) {
  :root {
    --bobo-goods-read-right-large-img-mr: 30px;
  }
}
@media screen and (max-width: 1280px) {
  :root {
    --bobo-goods-read-right-large-img-mr: 30px;
  }
}
@media screen and (max-width: 992px) {
  .pro_view {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
}
@media screen and (max-width: 768px) {
  .pro_view {
    -webkit-flex-direction: column;
    flex-direction: column;
  }
  .pro_img {
    margin: 0 auto;
  }
}
@media screen and (max-width: 576px) {
  .pro_img {
    width: 100%;
  }
}

 .video {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 9;
  display: block;
  transform: translate(-50%, -50%);
  font-size: 100px;
  color: #fff;
  opacity: 0.7;
}