* {
            -webkit-touch-callout: none; /* iOS Safari */
            -webkit-user-select: none; /* Safari */
            user-select: none; /* Standard syntax */
            animation: x5hack 1ms linear infinite !important; /* 持续动画干扰长按识别 */

        }
        
        /* 禁止长按图片保存 */
        img {
            pointer-events: none;
        }








@font-face {
    font-style:normal;
    font-family:'OP';
    
    src:url('../fonts/OPPOM.otf') format('truetype');
    

}

.mt-7{
        margin-top: 24px;
}

.col-sm-6{
        padding-left: 12px;
        padding-right: 12px;
}

.qr-code{
        position:relative;
        display:inline-block;
}

.home_al{
                margin-top: 80px;
        }

.home_li,.home_li_nav{
                margin-top: 3rem;
        }



.qr-code:hover .qr-code-img{
  display:inline-block;
}

.navbar-brand{
        margin: 0 0;
}

.container {
  max-width: 85%;
}


  .nav-item:nth-child(4){
        margin-right: 0;


  }

.carousel{
        margin-top: 4.25rem;
}




/*案例处的css开始*/

.carousel_collect{
      
        
}

.text-muted {


    
}

.nav-link:last-child{
    margin: 0;
}
.card-al-p{
        padding: 24px;
}

.card-al-b-l{
        float: left;
}
.card-al-b-r{
        float: right;
        

}
#card-imgal-top{
        border-radius: 8px;
}

.nav_al_a{
        
        transition: all .4s;
        padding-left:12px ;
        padding-right: 12px;

         

}
.nav_al_a:hover{
        text-decoration: none;
        margin-top: -2px;
       

         

}

.nav_al_a:hover  .card-al-p{
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.04);
}



.card-al-b-l,.card-al-b-r,.card-al-b-l>p , .card-al-b-r>p,.card-al-b-l>i,.card-al-b-r>i{
        display: inline-block;
        font-style: normal;
        vertical-align: middle;


}
.card-al-b-l-avatar,.card-al-b-r-avatar{
   display: inline-block;
   width: 20px;
   height: 20px;
   
   margin-right: 8px;
   padding: 0;
}
.card-note-b-r-avatar{

   display: inline-block;
   width: 24px;
   height: 24px;
   
   margin-right: 8px;
   padding: 0;

}
.card-al-b-l-avatar{
        background: url(../img/logo_tx.svg) no-repeat;
         background-size: cover;
         border-radius: 50%;

}

.card-al-b-r-avatar,.card-note-b-r-avatar{
        background: url(../img/label.svg) no-repeat;
         background-size: cover;
         border-radius: 50%;

}



.card-al-b-l-name,.card-al-b-r-name{
  display: inline-block;
  height: 20px;
  line-height: 20px;
/*  background: yellow;*/
  max-width: 10rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}


.card-al-b-l-name{
       font-size: calc(0.8rem + 0.2vw);
       color: #8a8a8a;
}

.card-note-b-l-name{
       font-size: calc(1rem + 0.2vw);
       color: #F83322;
       font-family: "OP";
}

.card-al-b-r-name{
       font-size: calc(0.6rem + 0.2vw);
       color: #b5b5b5;
}

.card-note-b-r-name{
        font-size: calc(0.8rem + 0.2vw);
       color: #b5b5b5;
       
}


body{
        height: 100vh;
        overflow: auto;"

}


#body_bg{
   background: rgba(0, 0, 0, 0.03);
}

#body_general_bg{
   background: #f8f8f8;


}

/*案例处的css结束*/
.collect_bg{
        background: #fff;
        padding: 20px 20px;
        max-width: 24%;
}


.collect_logo_img img{
        display: inline-block;
        width: 80px;
        height: 80px;
}
/*下载页面代码开始*/






.card_img  img{
        border-radius:0.5rem;

}

.card_coll_a b{
      color: rgba(0, 0, 0, .75);
}

.card_coll_a a:hover{
        text-decoration: none;
      
}

.card_coll_a a:hover b{
        
        color: rgba(0, 0, 0, 1);
}

.card_coll_a:hover  {
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.04);
        margin-top: -2px;
        transition: all .4s
}










.card-hover{
        border-radius: 6px;

}

.card-hover{
        border-radius: 6px;
        border: 1px solid rgba(0, 0, 0, 0.05);
        
}







.duik-promo{
    background-color: transparent;
    background-image: url(../img/home-bg.png);
}
.duik-promo_case{
        background-image: url(../img/case-bg.png);

}

.duik-promo_collect{
       background-image: url(../img/collect-bg.png); 
}

.duik-promo,.duik-promo_case {
    color: #fff;
   
    
    height: 480px;
}

.hero-title {
    font-size: 6.25rem;
    line-height: 1;
}
.mh-30rem {
    min-height: 30rem;
}


.lead {
    font-size: 1.25rem;
    font-weight: 300;
}

.share-img{
        display: inline-block;
        width:160px;
        height: 120px;

}


.note_b{
   
        display: inline-block;
       
       
        font-size: calc(1.2rem + 0.2vw);
        vertical-align: middle;
        margin-left: 1rem;
        
        
        
}


.note_i{
        position: absolute;
        bottom: 1.5rem;
}



.note_container{
        margin-top: -120px;

}
.note_span{
        
        display: inline-block;
       
        background: #333;
       padding:0.2rem 0.6rem;

        font-size: calc(0.6rem + 0.2vw);
       
        border-radius: 0.2rem;
        vertical-align: middle;


}

.card_note{
        background: rgba(255, 255, 255, 0.6);
        background-color: rgba(255, 255, 255, 0.2);
          -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
}

.general_l{
        background: #fff;

        

}

.general_r{

   
   
        
        
}
.container_general{
        margin-bottom:64px;
        margin-top: 71px;
}
.container_general_l_p,.container_general_l_top{
         
          background: #fff;

}
.container_general_l_p{
        font-size: calc(0.7rem + 0.2vw);;
        line-height: calc(1.4rem + 0.2vw);
        
        padding: 20px 20px;
}

.container_general_l{
        background: #fff;
}
.container_general_l_top{
      
       border-bottom:1px solid #eee;
       padding: 40px 0;
       font-size: calc(1.3rem + 0.5vw);
        
       
       
}
.general_img{
        display: block;
        width: 100%;
}

.general_bottom_fo{
        height: 112px;
        width: 100%;
        
}


.container_general_r{
        background: #fff;
        border-radius: 4px;
        padding: 0 32px;


}
.gen_block{
        width: 100%;
        height: 40px;
}


.container_general_r_top{
        border-bottom:1px solid #eee;
}
.container_general_r_top img{
        display: block;
        width: 4rem;

        height: 4rem;
        margin: 0 auto;
        border-radius: 50%;



}

.container_general_r_top_h{
        font-size: calc(0.8rem + 0.2vw);
        color: rgba(0, 0, 0, 0.8);
}

.container_general_r_top_p{
        font-size: calc(0.6rem + 0.2vw);
         color: rgba(0, 0, 0, 0.3);
}

.container_general_r_bottom_h{
        font-size: calc(1rem + 0.2vw);
        color: rgba(0, 0, 0, 0.8);

}

.container_general_r_bottom_span{
        font-size: calc(0.6rem + 0.2vw);
        color: rgba(0, 0, 0, 0.3);
        font-weight: 400;
        display: block;
        margin-top: 0.4rem;
}

.container_general_r_bottom_span i{
       font-style: normal; 
       color: rgba(0, 0, 0, 0.5);

}

.general_l{
        
        border-radius: 4px;
}








.container_title{
     text-align: center;   
}
.H3_title{
        
        color: rgba(0, 0, 0, 0.9);
        font-size: calc(1.4rem + 0.4vw);
        line-height: 44px;
}
.H3_P_title{
        
        color: rgba(0, 0, 0, 0.3);
        font-size: calc(0.9rem + 0.1vw);
        line-height: 24px;
        padding: 0 12px;
}
.container_1{

         text-align: center;
         
}
.container_1 ul{
        display: inline-block;
        margin: 0;
        padding: 0;
}

.container_1 ul li{
        display: inline;

}


.btn-outline-more {
  font-size: calc(0.9rem + 0.1vw);
  color: rgba(0, 0, 0, 0.9);
  border-color:rgba(0, 0, 0, 0.9);
  padding: 0.75rem  3rem;

  
}

.btn-outline-more span{
        display: inline-block;
        width: 20px;
        height: 20px;
        vertical-align: middle;
        background: url(../img/more_w.svg) no-repeat;

}

.btn-outline-more:hover {
  color: #fff;
  background-color: #3FE095;
  border-color: #3FE095;

}

.btn-outline-more:hover  span {
        background: url(../img/more_d.svg) no-repeat;

     
}

.container_1 ul li a:hover{
        color: rgba(0, 0, 0, 0.9);

}

.nav  .active{ 

    background-color: #3FE095;
    color: fff;
    
    

 }

.card_index img{
        border-radius: 0.5rem;
}

.card_str>img {
        width: 44px;
        height: 44px;
        border-radius: 0.75rem;

}

.card-body_2 h5 {
        font-size: calc(1.0rem + 0.2vw);
        color: rgba(0, 0, 0, 1.0);

}

.card-body_2 P {
        font-size: calc(0.8rem + 0.1vw);
        color: rgba(0, 0, 0, 0.6);
        white-space:nowrap;
        text-overflow: ellipsis;
        overflow: hidden;


}

.card-body_1{
        margin-top: 1rem;
}

.card-body_1  h6{

        font-size: calc(0.8rem + 0.1vw);
        color: rgba(0, 0, 0, 0.5);
        font-weight: 400;
}


.card-body_1  h4{

        font-size: calc(1.0rem + 0.2vw);
        color: rgba(0, 0, 0,1);
        font-weight: 500;
        white-space:nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
}

.card-body_1 p{

        font-size: calc(0.8rem + 0.1vw);
        text-align: left;
        padding: 0;
        height: 16px;
        line-height: 16px;
        white-space:nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: rgba(0, 0, 0,0.5);
        font-weight: 400;
        
}

.card-body_1  span {
         background: linear-gradient(to right, rgba(240, 252, 255, 1), rgba(255, 255, 255, 0));
        display: block;
        width: 100%;
        border-radius: 4px;
}

.carousel_map{
        margin-top: 0px;
        margin-bottom: 64px;
}


.carousel_map_1{
        position: relative;


}

.carousel_map_2{
        position: absolute;
        top: 0;
        left: 0;
        
}


.container_al{

}

.collect_logo_img{
        width: 80px;
        height: 80px;
}



.collect_list_nav img{
        
    display: inline-block;
    width: 56px; 
    height: 56px; 
    

    border-radius: 12px;
    

}

.collect_list_nav_h{
        
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
        font-size: 20px;
        line-height: 24px;
       
        color: rgba(33,33,43, 0.8);

        
}

.collect_list_nav_p{
      
       font-size: 14px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
       
        color: rgba(33,33,43, 0.5);

        

}

.collect_list{
        margin-top: -120px;

}
.collect_list a:hover{
  text-decoration: none;
}
.collect_list_nav{

 
  
   background: rgba(255, 255, 255, 0.6);
   border-radius: 12px;
   border: 1px solid #efefef;
  


}
.collect_list_nav:hover{
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.04);
        margin-top: -2px;
        transition: all .4s
}

.collect_list_nav:hover  h1{
        color: rgba(33,33,43, 1);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 
}

.collect_list_nav:hover  p{
        color: rgba(33,33,43, 0.7);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis; 

}





@media (max-width: 431px){
        .carousel-indicators{
                bottom:-16px;
        }

        .home_al{
                margin-top: 32px;
        }

        .home_title{
                margin-top: 3px;
                font-size: 11px;
                
        }

        .home_li,.home_li_nav{
                margin-top: 32px;
        }
        .H3_title{
        
                margin-top: 60px;
        }
        .btn-outline-more {
  
          margin-top: 0px;
          margin-bottom: 0px;
  
        }

        .container-fluid-str{
                margin-top: -8px;
        }
        .card_str{
                padding: 20px  24px;
                background-color: rgba(0, 0, 0, 0.03);
        }
        .container-fluid-str_1{
                margin-top: 16px;
        }

        .H3_title_he{
                margin-top: 48px;
        }

        .map_bottom{
                margin-top: -60px;
        }
        

        .carousel-control-prev-icon{
        display: none;
        

        }

        .carousel-control-next-icon{
                display: none;
                

        }
        .carousel_map{
        margin-top: 0px;
        margin-bottom: 0px;
                }

        .container_1>ul>li:not(:last-child) {
                margin-right: 8px;
        }
        .container_1 ul li a{text-decoration: none;color: rgba(0, 0, 0, 0.6);

             display: inline-block;
             width: 60px;
             height: 28px;
             line-height: 28px;
             
             border-radius: 4px;
        }

        .carousel_al{
                margin-top: -14rem;
                
        }
        .note_container{
            

                margin-top: -14rem;
        }

        

        .nav_al_a:not(:last-child){
                margin-bottom: 16px;
        }

        .nav_tabs_li{
               
                border-radius: 6px;
                
                border-image: linear-gradient(45deg, #ff6b6b, #4ecdc4) 1;
                width:324px ;
                height: 34px;
                position: relative;
                
                
                z-index: 1;
               

        }
        .nav_tabs_li::before {
                  content: '';
                  position: absolute;
                  top: -1px; /* 边框宽度 */
                  left: -1px;
                  right: -1px;
                  bottom: -1px;
                  background: linear-gradient(0deg,rgba(255, 255, 255, 0.0), rgba(255, 255, 255, 0.1));

                  border-radius: 6px; /* 圆角比容器大 2px */
                  z-index: -1;
                }


        .row_note{
                margin-top: 16px;
        }



        
}




@media (max-width: 767px){ 

        .container {
          max-width: 100%;
        }

        .qr-code-img{
                display:none;
                position:absolute;
                top:36px;
                left:0;
                z-index:99;
                background-color:#fff;
                box-shadow:1px 1px 5px rgba(0,0,0,.2);
                border-radius:8px;
                width:351px;
                height:219px;

        }

        .navbar-collapse{
                margin-top: 12px;
        }


        .navbar-nav{
                margin-top: 0px;
        }

        .navbar-nav  a{
        margin: 12px 48px  0  0;
        }
        

        .qr-code{
        margin-top: 12px;
        padding-bottom: 24px;
        }


        .container_1>ul>li:not(:last-child) {
        margin-right: 0rem;
        }


        .note_b{
           
                
                width: 12ch; 
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;    
                
                
        }

        .note_p{

                width: 12ch; 
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;  

        }
        .note_b{
                margin-left: 0;
        }
        .general_l{
                padding: 15px;
                background: #f8f8f8;
                border-radius: ;
        }
        .hero-title {
            font-size: 4rem;
            line-height: 1;
        }

        .container_general{
                margin-bottom:6px;
                margin-top: 52px;
        }

        .collect_list_nav_nav{
                padding-left: 8%;
        }


        .collect_list{
                margin-top: -160px;

               
        }
       


        .mh-26rem{
        min-height: 20rem;   
        }
        .container_note{
                padding-bottom:4px ;
        }

        .scroll-arrow {
              position: fixed;
              bottom: 68px;
              right: 30px;
              opacity: 0;
              transition: opacity 0.3s;
            }
        #backToTop {
              width: 40px;
              height: 40px;
              background: #333;
              color: white;
              border: none;
              border-radius: 50%;
              cursor: pointer;
              text-align: center;
              line-height: 40px;
              font-size: 18px;
            }


 }






@media (min-width: 768px) { 


        .container_1 ul li a{text-decoration: none;color: rgba(0, 0, 0, 0.6);

             display: inline-block;
             width: 88px;
             height: 32px;
             line-height: 32px;
             
             border-radius: 4px;
        }
         .container_1>ul>li:not(:last-child) {
          margin-right: 3rem;
        }
        .btn-outline-more {
          
                  margin-top: 48px;
                  margin-bottom: 60px;
          
                } 
        .container {
          max-width: 90%;

        }
        .H3_title{
                
              margin-top: 64px;
        }
        .H3_title_he{
                        margin-top: 88px;
                }


        .card_str{
                padding: 40px  48px;
                background-color: rgba(0, 0, 0, 0.03);
        }

        .carousel_map{
                        margin-top: 0px;
                        margin-bottom: 64px;
                                }
                 
        .carousel-control-prev-icon{
                background: url(../img/left.svg);
                width: 40px;
                height: 40px;
        }
        .carousel-control-next-icon{
                background: url(../img/right.svg);
                width: 40px;
                height: 40px;
        }
        .qr-code-img{
                display:none;
                position:absolute;
                top:36px;
                left:-400px;
                z-index:99;
                background-color:#fff;
                box-shadow:1px 1px 5px rgba(0,0,0,.2);
                border-radius:8px;
                width:520px;
                height:324px;
        }
        .navbar-nav  a{
                margin: 0 92px  0  0;
          }
        .navbar-nav{
                margin:auto ;
         }
        .container_general_r{

         position: fixed;
         top:83px;  
         width: 21.5%;
          }

        .carousel_al{
        margin-top: -120px;
        padding-bottom: 48px;
        }

        .mh-26rem{
                min-height: 26rem;   
        }

        .nav_al_a{
                margin-bottom: 24px;
        }

        .row_note{
                margin-top: 30px;

        }

        .container_note{
                padding-bottom:48px ;
        }
        /*.general_top{
                width: 40px; height:40px;position: fixed;right:20px; bottom:68px;   background:rgba(255, 255, 255, 1.0);z-index: 99909;

                text-align: center;
                line-height: 40px;
                border-radius: 50%;
                font-size: 1.5rem;
                opacity: 0;
                visibility: hidden; 
                transition: opacity 0.3s, visibility 0.3s;
        }*/
        /*.general_top.active{
                opacity: 1; 
                visibility: visible;
        }*/
        /*.general_top:hover{
                color: #00be82;
                cursor: pointer;
        }*/

        .scroll-arrow {
              position: fixed;
              bottom: 68px;
              right: 30px;
              opacity: 0;
              transition: opacity 0.3s;
            }
        #backToTop {
              width: 40px;
              height: 40px;
              background: #333;
              color: white;
              border: none;
              border-radius: 50%;
              cursor: pointer;
              text-align: center;
              line-height: 40px;
              font-size: 20px;
            }

}


@media (min-width: 992px) { 
 
}




@media (min-width: 1200px) { ... }