@charset "utf-8";
/* CSS Document */
/* 产品详情页 *********************************** */
.pro_del-title-bg{background:#252525;}
.pro_del-title{height: 60px;}
.pro_del-title>h1{float: left;font-size:18px;color:#fff;line-height:60px;}
.pro_del-title>a{float: right;background: #008bd6;line-height:32px;border-radius: 16px;padding:0 20px;color:#fff;margin-top:14px;margin-left:60px;font-size:16px;}
.pro_del-title>a.none{cursor: default;color:#fefefe;background:#bfbfbf;}
.pro_del-title>ul{float: right;}
.pro_del-title>ul>li{color:#fff;font-size:16px;float: left;line-height:60px;margin-left:60px;cursor: pointer;transition:color ease 0.1s;}
.pro_del-title>ul>li>a{color:#fff;font-size:16px;}
.pro_del-title>ul>li.active>a{color:#008eda;}
.pro_del-title>ul>li:hover{color:#008eda;}
.pro_del-title>ul>li:hover>a{color:#008eda;}

@media (max-width: 767px) {
  .pro_del-title>.arr{position: absolute;width:1rem;height:1rem;}
  .pro_del-title>.arr>i{transform:translate(-50%, -50%) rotate(180deg);}
  .pro_del-title{height: 1.24rem;position: relative;}
  .pro_del-title>h1{font-size:0.38rem;line-height:1.24rem;margin-left:0.4rem;}
  .pro_del-title>a{line-height:0.6rem;border-radius: 0.3rem;padding:0 0.3rem;color:#fff;margin-top:0.34rem;font-size:0.32rem;margin-right: 0.4rem;}
  .pro_del-title>ul{float: initial;padding:0 0.4rem;overflow: hidden;position: absolute;top:1.24rem;background:#252525;width:100%;transform-origin:50% 0%;
    opacity: 0;transform: scale(1,0);}
  .pro_del-title>ul>li{color:#fefefe;font-size:0.28rem;float: initial;line-height:1.12rem;text-align: center;border-top:1px solid #3b3b3b;margin:0;}
  .pro_del-title>ul>li>a{color:#fefefe;font-size:0.28rem;}

  .pro_del-title_show>ul{opacity: 1;transform: scale(1,1);transition: opacity ease 0.3s,transform ease 0.3s;z-index:10;}
  .pro_del-title_show>ul>li{}
  .pro_del-title_show>.arr>i{transform:translate(-50%, -50%) rotate(0deg);}
}


@media (min-width: 768px){
  /* specification */
    /* 顶部改为白色背景 */
  .pro_del-title-spec{background: #fff;}
  .pro_del-title-spec>.pro_del-title{border-bottom:1px solid #ccc;}
  .pro_del-title-spec>.pro_del-title>h1{color:#333;}
  .pro_del-title-spec>.pro_del-title>ul>li{color:#333;}
  .pro_del-title-spec>.pro_del-title>ul>li>a{color:#333;}
  .pro_del-title-spec>.pro_del-title>ul>li.active{color:#008eda;}
  .pro_del-title-spec>.pro_del-title>ul>li.active>a{color:#008eda;}
  .pro_del-title-spec>.pro_del-title>ul>li:hover{color:#008eda;}
  .pro_del-title-spec>.pro_del-title>ul>li:hover>a{color:#008eda;}
}

/* 参数详情 */
.pro_del_spec{padding-bottom:30px;}
.pro_del_spec>.item{border-bottom:1px solid #ccc;padding:44px 0 34px 26%;position: relative;}
.pro_del_spec>.item>h1{position: absolute;font-size:16px;color:#333;line-height:24px;top:40px;left:0px;}
  /* 产品颜色 */
.pro_del_spec .item-color{width:350px;}
.pro_del_spec .item-color-img-box{width:100%;height:350px;position: relative;margin-bottom:8px;}
.pro_del_spec .item-color-img{width:100%;height:100%;position: absolute;top:0;left:0;overflow: hidden;display: none;}
.pro_del_spec .item-color-img:first-child{display: block;}
.pro_del_spec .item-color-img>img{width:100%;}
.pro_del_spec .item-color-cur-box{display: flex;justify-content: center;margin:0 auto;flex-wrap:wrap;margin-bottom:38px;}
.pro_del_spec .item-color-cur-box_6{width:132px;}
.pro_del_spec .item-color-cur-box_8{width:176px;}
.pro_del_spec .item-color-cur-box_10{width:220px;}
.pro_del_spec .item-color-cur{width:28px;height:28px;margin:9px 8px;border-radius:50%;cursor:pointer;border:2px solid #fff;transition: box-shadow ease 0.3s;}
.item-color-cur_po{width:28px;height:28px;margin:9px 8px;}
.pro_del_spec .item-color-cur.active{box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.3);}
.pro_del_spec .item-name{width:100%;padding-bottom:18px;}
.pro_del_spec .item-name>p{font-size:16px;color:#666;text-align: center;display: none;}
.pro_del_spec .item-name>p:first-child{display: block;}
  /* 文字公共样式 */
.pro_del_spec .item-text{font-size:16ox;color:#666;line-height:36px;text-align: justify;text-justify: inter-word;}

.pro_del_spec .item-group{width:100%;margin-top:-10px;}
.pro_del_spec .item-group>h1{float: left;width:44%;padding-right:20px;}
.pro_del_spec .item-group>p{float: left;width:56%;}

@media (max-width: 767px){
  .pro_del_spec{padding-bottom:0rem;padding-top:1.14rem;border-bottom:1px solid #d0d0d0;}
  .pro_del_spec>.item{border-bottom:none;padding:0 0.8rem 0.9rem 0.8rem;position: relative;}
  .pro_del_spec>.item>h1{position: initial;font-size:0.32rem;color:#333;line-height:1;padding-bottom:0.4rem;margin-bottom:0.8rem;border-bottom:1px solid #d0d0d0;}
    /* 产品颜色 */
  .pro_del_spec .item-color{width:7.15rem;margin:0 auto 0 auto;}
  .pro_del_spec .item-color-img-box{width:100%;height:7.15rem;position: relative;margin-bottom:0.15rem;}
  .pro_del_spec .item-color-img{width:100%;height:100%;position: absolute;top:0;left:0;overflow: hidden;display: none;}
  .pro_del_spec .item-color-img:first-child{display: block;}
  .pro_del_spec .item-color-img>img{width:100%;}
  .pro_del_spec .item-color-cur-box{display: flex;justify-content: center;margin:0 auto;flex-wrap:wrap;margin-bottom:0.22rem;}
  .pro_del_spec .item-color-cur-box_6{width:2.76rem;}
  .pro_del_spec .item-color-cur-box_8{width:3.68rem;}
  .pro_del_spec .item-color-cur-box_10{width:4.6rem;}
  .pro_del_spec .item-color-cur{width:0.56rem;height:0.56rem;margin:0.18rem;border-radius:50%;border:0.04rem solid #fff;}
  .item-color-cur_po{width:0.56rem;height:0.56rem;margin:0.18rem;}
  .pro_del_spec .item-color-cur.active{box-shadow: 0px 0.05rem 0.15rem 0px rgba(0, 0, 0, 0.3);}
  .pro_del_spec .item-name{width:100%;padding-bottom:1rem;}
  .pro_del_spec .item-name>p{font-size:0.32rem;}
    /* 文字公共样式 */
  .pro_del_spec .item-text{font-size:0.32rem;line-height:0.72rem;}

  .pro_del_spec .item-group{margin-top:-0.2rem;}
  .pro_del_spec .item-group>h1{padding-right:0.2rem;}
  .pro_del_spec .item-group>p{width:56%;}
}

/* gallery */

.pro_del_gallery{width:100%;height:100%;position:fixed;z-index:33333;background:#333;top:0;left:0;display: none;justify-content: center;align-items: center;
  animation-fill-mode:both;animation-duration:0.4s;animation-timing-function: ease;animation-name:ani-fadeOut;}
  /* 关闭按钮 */
.pro_del_gallery>.close{width:40px;height:40px;position: absolute;z-index:10;top:40px;right:40px;cursor: pointer;transform: rotate(0deg);transition:transform ease 0.4s;}
.pro_del_gallery>.close::after,.pro_del_gallery>.close::before{content:' ';display:block;width:52px;height:1px;background:#fff;position: absolute;top:20px;left:-6px;}
.pro_del_gallery>.close::after {transform: rotate(45deg);}
.pro_del_gallery>.close::before{transform: rotate(-45deg);}
.pro_del_gallery>.close:hover{transform: rotate(-180deg);}

.pro_del_gallery-container-box{width:500px;height:100%;position: relative;
  animation-fill-mode:both;animation-duration:0.8s;animation-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);animation-name:ani-gallery-hide;
  /* transition: all 800ms cubic-bezier(0.770, 0.000, 0.175, 1.000);transform: scale(0.1) rotate3d(0, -1, 0 ,-180deg); */
}
.pro_del_gallery-container{width:100%;height:100%;}
.pro_del_gallery-slide{width:100%;height:100%;display: flex;justify-content: center;align-items: center;}
.pro_del_gallery-slide>img{width:100%;}

.pro_del_gallery-pagination{right:10%;width:20px;
  /* display: flex;flex-direction:column; */
}

.pro_del_gallery-pagination>.swiper-pagination-bullet{border-radius: 50%;display: block;margin:10px auto;background:#bfbfbf;opacity: 1;width:10px;height:10px;transition:all ease 0.3s;}
.pro_del_gallery-pagination>.swiper-pagination-bullet-active{background:#008fd9;transform: scale(1.6,1.6);}


@keyframes ani-gallery-show{
  0%  {transform: scale(0.1) rotate3d(0, -1, 0 ,-180deg);}
  100%{transform: scale(1) rotate3d(0, -1, 0 , 0deg);}
}
@keyframes ani-gallery-hide{
  0%  {transform: scale(1) rotate3d(0, -1, 0 , 0deg);}
  100%{transform: scale(0.1) rotate3d(0, -1, 0 ,-180deg);}
}

@media (max-width: 767px){
  .pro_del_gallery>.close{width:0.56rem;height:0.56rem;top:0.5rem;right:0.5rem;}
  .pro_del_gallery>.close::after,.pro_del_gallery>.close::before{width:0.75rem;top:0.28rem;left:-0.095rem;}

  .pro_del_gallery-container-box{width:100%;}
  .pro_del_gallery-pagination{right:0.84rem;width:20px;}

}

@media (max-width: 450px){
  .pro_del_gallery-pagination>.swiper-pagination-bullet{width:8px;height:8px;}
}