 *{outline:none!important;}
.g_bg {background-position: center;background-size: cover;background-repeat: no-repeat  }
.g_w{max-width: 1388px;margin: 0 auto}
.con{ padding: 150px 0  ; background: url("../images/log3.jpg") no-repeat;background-size:cover;background-position:top center}
.top{text-align: center}
.top img{}
 .log_nav{margin-top: 30px;}
 .log_nav > ul{display: flex;justify-content: space-between}
 .log_nav > ul > li{position: relative}
 .log_nav > ul > li > a{ display: block; position: relative; width: 272px; height: 68px; padding-top: 6px; color: #fff; border: 1px solid #fff; border-radius: 50px;
    text-align: center;transition: .4s all ease;
   }
 .log_nav > ul > li > a:after{position: absolute;left: 0;top: 0;width: 100%;height: 100%;content: '';border-radius: 60px;transition: .4s all ease}
 .log_nav > ul > li > a span{display: block;font-size: 22px;position: relative;z-index: 6;background-image:-webkit-linear-gradient(bottom,#fff,#b7b7ff);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;}
 .log_nav > ul > li > a i{display: block;font-style: normal;font-size: 18px;line-height: 18px;position: relative;z-index: 6;background-image:-webkit-linear-gradient(bottom,#fff,#b7b7ff);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;}
 .log_nav > ul > li > a:hover{ border-color: #1200b2; color: #fff; transition: .4s all ease}
 .log_nav > ul > li > a:hover:after{background-color: #1200b2;  transition: .4s all ease}
 .log_nav_ul2{display: none;position: absolute;left:50%;top: 100%;  opacity: 0; z-index: 9;overflow: hidden;
     animation: navU .5s ease forwards;
     -webkit-animation: navU .5s ease forwards;}
 .log_nav_ul2 li{padding-top: 6px}
 .log_nav_ul2 li a{ display: block; width: 270px; height: 40px; line-height: 40px; color: #fff;font-size: 18px;text-align: center; border: 1px solid #fff; border-radius: 30px; transition: .4s all ease}
 .log_nav_ul2 li a:hover{background: #1200b2; color: #fff; transition: .4s all ease}
 .log_nav > ul > li:hover .log_nav_ul2{display: block}

 .bottom{margin-top: 300px;}
 .bottom .g_w{display: flex}
 .bottom .con_l{width: 53%}
 .bottom .con_r{width: 47%;padding-left: 15px}
 .bottom .con_r .text{color: #fff;font-size: 18px; line-height: 28px;text-align: justify}
 .bottom .con_r .text p{margin-top: 40px;}
 .bottom .con_r .text p:nth-child(1){margin-top: 0;line-height: 36px}

 .bottom .img{position: relative;}
 .bottom .img .video{position: absolute; left: 15.8%; top:5%; width: 67%; background: #000}
 .bottom .img .video .video_view{padding-top: 64.8%}
 .bottom .img .video video{position: absolute;max-width: 100%; max-height: 100%; left: 50%;top: 50%;transform: translate(-50%,-50%)}


 .foot{margin-top: 304px;text-align: center}
 .foot span{color: #fff;opacity: .46;margin: 0 12px}
 .foot a{color: #fff;opacity: .46;margin: 0 12px}

 .msg{ display: none; position: fixed;  left: 50%;top: 50%; transform: translate(-50%,-50%); z-index: 999; background: rgba(20,4,77,1); border-radius: 18px; box-shadow: 0 0 2px #fff;
     padding: 30px;width: 500px; max-width: 90%; height: 300px;   align-items: center; justify-content: center;color: #fff;animation: msgAni .5s ease forwards;
     -webkit-animation: msgAni .5s ease forwards;}
 .msg span{position: absolute;  left: 50%;top: 50%; transform: translate(-50%,-50%);font-size: 36px;font-weight: 600;letter-spacing: 8px}
 .msg i{position: absolute;right: 10px;top: 4px;font-size: 24px;cursor: pointer;font-style: normal;color: #fff;opacity: 1;font-weight: 400}
 .msg i:hover{color: #fff}


 .i_countdown{position: fixed;left: 0;top: 0; z-index: 99999999; width: 360px; padding:20px 18px ; border:4px solid #fff; border-radius: 28px;
     background: url(../images/i-countdown3.png); background-size: cover;}
 .i_countdown .close{ display: none; position: absolute; right: 2%; top: 2%;opacity: 1;
     width: 24px; height: 24px;background: url(../images/close.png);background-size: 100% 100%;}
 .i_countdown .logo{text-align: center;}
 .i_countdown .logo img{width: 70px;}
 .i_countdown .title{ margin: 10px auto 0 auto; text-align:center; }
 .i_countdown .title b{font-size: 20px;display: block;margin-top: 20px;font-weight: 600;
     background-image:-webkit-linear-gradient(top,#fff,#b7b7ff);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;}
 .i_countdown .title span{font-size: 16px;display: block;font-weight: 600;
     background-image:-webkit-linear-gradient(top,#fff,#b7b7ff);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;}
 .i_countdown:hover .close{display: block;}

 .i_countdown .bottom{width: 260px;padding:10px; margin: 20px auto 0 auto; border-radius: 26px; text-align: center;
     border:4px solid rgba(200,105,184,.84);background: rgba(255,255,255,.84);}
 .i_countdown .bottom .img{ margin:0 ; font-size: 24px;font-weight: 600;
     background-image:-webkit-linear-gradient(top,#cb67b5,#a971d6);
     -webkit-background-clip:text;
     -webkit-text-fill-color:transparent;}
 .i_countdown .bottom .text{width: 100%;  padding: 10px 0; color: #fff;display: flex; align-items: flex-end; justify-content: center;
     background-image: linear-gradient(to right, #cb67b5 , #a971d6); border-radius: 6px;}
 .i_countdown .bottom .text a{font-size: 20px;line-height: 20px;color: #fff}
 .i_countdown .bottom .text i{font-size: 16px;font-style: normal;margin-left: 8px;}

 @keyframes msgAni
 {
     0% {
         opacity: 0;
         transform: translate(-50%, -20%);
     }
     100% {
         opacity: 1;
         transform: translate(-50%, -50%);
     }
 }
 @-webkit-keyframes msgAni {
     0% {
         opacity: 0;
         transform: translate(-50%, -20%);
     }
     100% {
         opacity: 1;
         transform: translate(-50%, -50%);
     }
 }
 @keyframes navU
 {
     0% {
         opacity: 0;
         transform: translate(-50%, -20px);
     }
     100% {
         opacity: 1;
         transform: translate(-50%, 0);
     }
 }
 @-webkit-keyframes navU {
     0% {
         opacity: 0;
         transform: translate(-50%, -20px);
     }
     100% {
         opacity: 1;
         transform: translate(-50%, 0);
     }
 }

@media (max-width: 1800px) {  }

@media (max-width: 1700px) {

}

@media (max-width:1550px) {

}
@media (max-width:1440px) {
    .g_w{padding: 0 5%}
    .top img{width: 1110px;max-width: 80%}
    .log_nav > ul > li > a{width: 240px;height: 60px;}
    .log_nav > ul > li > a span{font-size: 20px;}
    .log_nav > ul > li > a i{font-size: 16px;}
    .log_nav_ul2 li a{width: 240px}
    .bottom .con_r .text{font-size: 16px;}
    .bottom .con_r .text p{margin-top: 20px}
}

@media (max-width:1350px) {  }

@media (max-width:1280px) {  }

@media (max-width:1220px) {
    .log_nav > ul > li > a{width: 200px;height: 50px;padding-top: 4px}
    .log_nav > ul > li > a span{font-size: 18px;}
    .log_nav > ul > li > a i{font-size: 14px;line-height: 14px;}
    .log_nav_ul2 li a{width: 200px;font-size: 14px;}
    .bottom{margin-top: 300px;}
    .bottom .con_r .text{font-size: 14px;line-height: 24px;}
    .bottom .con_r .text p:nth-child(1){line-height: 24px;}
    .bottom .con_r .text p{margin-top: 20px}
    .foot{margin-top: 150px;}
}

@media (max-width:1024px) {

}

@media (max-width:998px){
    .log_nav > ul > li > a{width: 170px;height: 50px;}
    .log_nav_ul2 li a{width: 170px;font-size: 14px;}
    .bottom .g_w{display: block}
    .bottom .con_l{width: 100%;text-align: center}
    .bottom .con_r{padding: 0;margin-top: 20px;width: 100%}
}
@media (max-width:768px) {
    .con{padding: 40px 0}
    .log_nav > ul{display: block}
    .log_nav > ul li{width: 100%;margin:8px 0;}
    .log_nav > ul > li > a{width: 100%}
    .log_nav_ul2{width: 100%}
    .log_nav_ul2 li a{width: 100%;background: #fff;color: #1200b2}
    .bottom{margin-top: 40px;}
    .foot{margin-top: 40px;}
    .foot span{display: block}
    .foot a{display: block}

    .msg{height: 200px}
    .msg span{font-size: 20px;}
}
@media (max-width:600px){
}

@media (max-width:500px){

}
