@charset "UTF-8";


.se5{}
.se5 .viewZone{
    position:relative;
}
.se5 .viewZone:after{
    display:block;
    clear:both;
    content:'';
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    right:0;
    background:linear-gradient(to top, #000, transparent);
}
.se5 .viewZone .ifzone{
    position:relative;
    width: 100vw;
    height: 51vw;
    min-height: 100vh;
    min-width: 177.77vh;
    overflow: hidden;
}

.se5 .viewZone .ifzone div{
    
}
.se5 .viewZone .ifzone iframe{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    transform: scale(1.2);
   
}

.se5 .viewZone .txtzone{
    position:absolute;
    left:50%;
    top:20%;
    transform: translatex(-50%);
    z-index: 1;
    color:#fff;
    text-align: center;

}
.se5 .viewZone .txtzone .text1{
    font-weight: bold;
    font-size:30px;
    line-height: 36px;
    margin-bottom: 40px;
}
.se5 .viewZone .txtzone .text2{
    font-weight: bold;
    font-size:50px;
    line-height: 56px;
    margin-bottom: 40px;
}
.se5 .viewZone .txtzone .text2 span{
    color:#f08300;
}
.se5 .viewZone .txtzone .text3{
    font-size:24px;
    line-height: 24px;
    margin-bottom: 15px;
}
.se5 .viewZone .txtzone .text4{
    font-size:20px;
    line-height: 20px;
    color:#ddd;
}
.se5 .viewZone .txtzone .btn{
    display:block;
    clear:both;
    content:'';
    width:150px;
    margin:70px auto 0;
    height:30px;
    border:solid 1px #fff;
    color:#fff !important;
    text-align: center;
    line-height: 30px;
    font-size:15px;
}

.se5 .slideZone{
    width:1200px;
    margin:0 auto;
    position:relative;
}
.se5 .slideZone h3{
    text-indent:-9999px;
}
.se5 .slideZone .txt-box{
    position:absolute;
    bottom:70px;
    left:50%;
    transform: translatex(-50%);
    z-index: 100;
    color:#fff;
    width:600px;    
}
.se5 .slideZone .txt-box li{
    width:100%;
    height:auto;
}
.se5 .slideZone .txt-box li:after{
    display:block;
    clear:both;
    content:'';
}
.se5 .slideZone .txt-box li .left{
    float:left;
    font-size:20px;
    line-height: 26px;
}
.se5 .slideZone .txt-box li .right{
    float:right;
    font-size:16px;
    line-height: 20px;
}
.se5 .slideZone .swp{
    position:absolute;
    bottom:150px;
    left:0;
    width:100%;
    z-index: 10;
}
.se5 .slideZone .swp li{
    float:left;
    width:20%;
    color:#fff;
    font-size:20px;
    font-weight: bold;
}

.se5 .slideZone .swp li:last-child{
    margin-right:0;
}
.se5 .slideZone .swp li a{
    display:block;
    width:100%;
    height:210px;
    text-align: center;
    color:#fff !important;
    
}
.se5 .slideZone .swp li a:after{
    display:block;
    clear:both;
    content:'';
    background:url(../img/se5_guide.png) no-repeat center/ 85%;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
}
@keyframes nunu{
    0%{
        transform: rotate(0);
    }
    100%{
        transform: rotate(360deg);
    }
}
@keyframes nunu2{
    0%{
        transform: rotate(0)  translate(-50%,-50%);
 
    }
    100%{
        transform: rotate(-360deg) translate(-50%,-50%);
        
    }
}
.se5 .slideZone ul li a .tt1{
    line-height: 210px;
    opacity: 1;
}
.se5 .slideZone ul li a .tt2{
    opacity: 0;
    position:absolute;
    top: 50%;
    left:50%;
    transform: translate(-50%,-50%);
    width:100%;
    transition:all 0.4s;
}
.se5 .slideZone ul li a:hover .tt2{
    opacity: 1;
   
}
.se5 .slideZone ul li a:hover .tt1{
    opacity: 0;
    animation:nunu2 3s infinite;
}
.se5 .slideZone ul li a .tt1 i{
    display:none;
}
.se5 .slideZone ul li a i{
   margin-bottom: 10px;
    font-size:30px;
    color:#f08300;
}
.se5 .slideZone ul li a .tt3{
    display:block;
    line-height: 24px;
    font-size:16px;
}
.se5 .slideZone ul li a:hover:after{
    background:url(../img/se5_guide_over.png) no-repeat center/ 85%;
    animation:nunu 3s infinite;
}

.se5 .slideZone .slick-slider .slick-prev{
    width:40px;
    height:40px;
    border-radius: 50%;
    border:solid 1px #fff;
    display:block;
    left:-40px;
}
.se5 .slideZone .slick-prev::before{
    text-indent:-9999px;
    content:"<";
    line-height: 0.5;
}
.se5 .slideZone .slick-next{
    width:40px;
    height:40px;
    border-radius: 50%;
    border:solid 1px #fff;
    display:block;
    right:-40px;
}
.se5 .slideZone .slick-next:before{
    text-indent:-9999px;
    content:">";
    line-height: 0.5;
}

@media all and (min-width:320px) and (max-width:700px){
   
    .se5 .viewZone .ifzone iframe{
        display:none;
    }
    .se5 .viewZone .ifzone{
        min-width:100%;
        text-align: center;
    }
    .se5 .viewZone .ifzone img{
        position:absolute;
        top:0;
        left:50%;
        transform: translatex(-50%);
        width:auto;
        height:100vh;
    }
    .se5{
        
    }
    .se5 .viewZone:after{
        display:none;
    }
    .se5 .viewZone .txtzone{
        top:5%;
        width:95%;
    }
    .se5 .viewZone .txtzone .text1{
        margin-bottom: 10px;
        font-size:20px;
    }
    .se5 .viewZone .txtzone .text2{
        font-size:28px;
        width:100%;
        margin-bottom: 10px;
    }
    .se5 .viewZone .txtzone .text3{
        font-size:16px;
    }
    .se5 .viewZone .txtzone .text4{
        font-size:14px;
    }
    .se5 .viewZone .txtzone .btn{
        margin:30px auto 0;
    }
    .se5 .slideZone{
        width:100%;
    }
    .se5 .slideZone .swp{
        bottom:70px;
        margin-left:3.33%;
    }
    .se5 .slideZone .swp li{
        width:45%;
        margin-bottom: 10px;
    }
    .se5 .slideZone .swp li:nth-child(odd){
        margin-right:3.33%;
    }
    .se5 .slideZone .swp li a:after{
        display:none;
    }
    .se5 .slideZone .swp li a{
        height:50px;
        border:solid 1px #fff;
        box-sizing: border-box;
        width:100%;
    }
    .se5 .slideZone ul li a .tt1{
        line-height: 50px;
    }
    .se5 .slideZone ul li a .tt1 i{
        display:inline-block;
        color:#fff;
        font-size:20px;
        margin-right:5px;
    }
    .se5 .slideZone ul li a .tt2{
        opacity: 0;
        display:none;
    }
    .se5 .slideZone ul li a:hover .tt1{
        opacity: 1;
    }
    .se5 .slideZone ul li.on a .tt1{
        text-decoration: underline;
    } 
    .se5 .slideZone ul li.on a .tt1 i{
        color:red !important;
    } 

   
}