﻿.model_box{position: relative;overflow: hidden;}
.model_cicle{visibility: hidden;opacity: 0;transition:all 0.6s;-webkit-transition:all 0.6s;-moz-transition:all 0.6s;-o-transition:all 0.6s;-ms-transition:all 0.6s;}
.model_cicle.cur{visibility: visible;opacity: 1;}


.model_cicle li{width: 24px;height: 24px;background: rgba(243,116,95,1);border-radius: 50%;position: absolute;cursor: pointer;}
.model_cicle li b{position: absolute;left: 0;top:0;width: 100%;height: 100%;z-index: 9;
transition:all 0.9s;-webkit-transition:all 0.9s;-moz-transition:all 0.9s;-o-transition:all 0.9s;-ms-transition:all 0.9s;}
.model_cicle li span,.model_cicle li em{background: #fff; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%); position:absolute; left:50%; top:50%;}
.model_cicle li span{width: 1px;height: 50%;}
.model_cicle li em{height: 1px;width: 50%;}



/*.model_01{position: absolute;top:0;left: 0;width: 100%;height: 100%;}*/

.modelimg img{display: none;width: 100%;}
.modelimg img.on{display: block !important;}

/*.model_01,.model_02,.model_03,.model_04,.model_05,.model_06,.model_07,.model_08,.model_09{display: none;position: relative; position: absolute;top:0;left: 0;width: 100%;height: 100%;}*/
.modelimg{display: none;position: relative; position: absolute;top:0;left: 0;width: 100%;height: 100%;}
.model_view{display: block;}


.model_01{z-index: 91;}
.model_02{z-index: 92;}
.model_03{z-index: 93;}
.model_04{z-index: 94;}
.model_05{z-index: 95;}
.model_06{z-index: 96;}
.model_07{z-index: 97;}
.model_08{z-index: 98;}
.model_09{z-index: 99;}

.model_returen{font-size: 16px;cursor: pointer; transform: translate(-50%,0);-webkit-transform: translate(-50%,0);-ms-transform: translate(-50%,0);-moz-transform: translate(-50%,0);-o-transform: translate(-50%,0);position:absolute;left:50%;bottom:1rem;background: rgba(243,116,95,0.8);color: #fff;border-radius: 20px;padding: 0 20px;height: 36px;line-height: 36px;transition:all 0.3s;-webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;-ms-transition:all 0.3s;}
.model_returen svg{position: relative;top: 5px;margin-right: 5px;}
.model_returen path {fill: #fff;}

.model_returen:hover{background: rgba(243,116,95,1);}
.model_cicle li:hover b{-webkit-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);}
.model_cicle li:after,.model_cicle li:before{
  background: #f3745f;border-radius: 50%;
  content: "";
  transform: translate(-50%,-50%);
    -webkit-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    position: absolute;
    left: 50%;
    top: 50%;}
.model_cicle li:after{
  width: 80%;height: 80%;
-webkit-animation: loading 2000ms linear  forwards infinite ;
animation: loading 2000ms linear  forwards infinite ;
}
.model_cicle li:before{
  width: 100%;height: 100%;
-webkit-animation: loading_b 2000ms linear  forwards infinite ;
animation: loading_b 2000ms linear  forwards infinite ;
}



@keyframes loading {
  0% {
    width: 80%;
    height: 80%;
     opacity: 1;
  }

  100% {
     width: 180%;
    height: 180%;
     opacity:0.3;
  }
}


@keyframes loading_b {
  0% {
    width: 100%;
    height: 100%;
     opacity: 1;
  }

  100% {
     width: 250%;
    height: 250%;
     opacity:0.3;
  }
}

@media only screen and (max-width:767px) {
.model_cicle li{width: 18px;height: 18px;}
.model_returen{bottom: 10px;padding: 0 10px;font-size: 14px;height: 30px;line-height: 30px;}
.model_returen svg{width: 20px;height: 20px;top:4px;}
@keyframes loading {
  0% {
    width: 80%;
    height: 80%;
     opacity: 1;
  }

  100% {
     width: 150%;
    height: 150%;
     opacity:0.3;
  }
}


@keyframes loading_b {
  0% {
    width: 100%;
    height: 100%;
     opacity: 1;
  }

  100% {
     width: 200%;
    height: 200%;
     opacity:0.3;
  }
}

}


/*loading加载效果*/

.loading{width: 100%;height:100%;display: flex;justify-content: center;align-items: center;position: absolute;left:0;top:0;font-size: 24px;color:#fff;z-index: 30;background:#f7f8f8;}
.loading_con{width: 6.22rem;transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%); position:absolute; left:50%; top:45%;}
.loading_con h2{position: absolute;}
.loading_con h2.logo_c{width: 0 !important;transition: all 4.5s linear;overflow:hidden;}
.loading_con h2.logo_c img{width:6.22rem;max-width: 6.22rem;}
.loading_con.on h2.logo_c{width: 100% !important;}
.loading_jd{font-size: 0.16rem;position: absolute;right:-0.6rem;top: 0.3rem;color:#282728;}


/*视频*/
.model_boxvideo .modelimg video{width: 100%;height: 100%;position: absolute;top:0;left: 0;}
.model_boxvideo .model_cicle li{z-index: 5;}
.model_boxvideo .model_returen{z-index: 5;}
/*.model_boxvideo .model_view{position: static;}*/




