@charset "utf-8";
/* CSS Document */
* { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body { height: 100%; overflow: hidden; }
.wrap { width: 100%; height: 100%; overflow: hidden; }
.screen { width: 100%; height: 100%; overflow: hidden; -webkit-backface-visibility: hidden; }
/* 容器 setting
   ========================================================================== */
.screen { position: relative; overflow: hidden; }
.loading { width: 100%; height: 100%; }
.loading, .screen { background-image: -webkit-radial-gradient(circle, #fdfdfd, #a4a4a4); }
.cate { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; background: url("../img/screen1bg.jpg") no-repeat 0 0; overflow: hidden; opacity: 1; }
.logo { margin: 13.12% auto 0 auto; padding-bottom: 13.59%; width: 21.87%; background: url("../img/logo.png") no-repeat 0 0; }
.txt_eng, .txt_ch, .txt2, .code_txt, .J-btn,.f_txt { width: 57.34%; background: url("../img/text1.png") no-repeat; }
.txt_eng { padding-bottom: 6.56%; margin: 32.22% 0 0 5.78%; left: 3.425%; background-position: 0 0; opacity: 0;}
.txt_ch { padding-bottom: 11.09%; margin: .5% 0 0 5.78%; left: 3.425%; background-position: 0 9.20%; opacity: 0;}
.screen-arrow { position: absolute; bottom: 18px; left: 50%; margin-left: -8px; z-index: 98; background: url("../img/arrow.png") no-repeat 0 0; width: 5%; height: 2.1%; -webkit-animation: swipMove 800ms ease-in-out infinite; -webkit-animation-direction: alternate; animation: swipMove 800ms ease-in-out infinite; animation-direction: alternate; }
.tip{margin-top: 3%;color: #171717;width: 100%;text-align: center;font-size: 0.4em;opacity: 0;}
.txt2 { margin: 20.31% auto 0 auto; padding-bottom: 9.37%; background-position: 0 30.02%; }
#WxMomentVideo {width: 100%; margin-top: 6%;  opacity: 0;}
.cate2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../img/screen2bg.jpg") no-repeat; z-index: 3; }
.screen2 .logo { position: absolute; width: 15.93%; left: 42.035%; top: 0; margin-top: 108.65%; padding-bottom: 11%; z-index: 5; }
.screen2Pic { position: absolute; z-index: 4; margin-top: 28.9%; height: 80%; width: 100%; background: url("../img/screen2.jpg") no-repeat; overflow: hidden; opacity: 0; }
.screen2Pics { position: absolute; z-index: 4; margin-top: 28.9%; height: 80%; width: 100%;  overflow: hidden; opacity: 1; }
.code { position: absolute;top:0;margin: 26.36% 0 0 49.68%; width: 38.59%; text-align: center; }
.code_txt { position: absolute;width:110%;top:110%;left:15%;padding-bottom: 15%; background-position: 0 87.02%; }
.f_txt{ position: absolute;left:21.5%;padding-bottom: 11.09%;margin: 94% auto 0 auto;  background-position: 0 100%; }

.current .txt_eng { -webkit-animation: showDiv 1s ease-in-out 0.5s; -webkit-animation-fill-mode: forwards; animation: showDiv 1s ease-in-out 0.5s; animation-fill-mode: forwards; }
.current .txt_ch { -webkit-animation: showDiv 1s ease-in-out 0.5s; -webkit-animation-fill-mode: forwards; animation: showDiv 1s ease-in-out 0.5s; animation-fill-mode: forwards; }
.current .WxMomentVideo { -webkit-animation: showDiv 1s ease-in-out 1s; -webkit-animation-fill-mode: forwards; animation: showDiv 1s ease-in-out 1s; animation-fill-mode: forwards; }
.current .cate2 { -webkit-animation: hideDiv 1s ease-in-out 1s; -webkit-animation-fill-mode: forwards; animation: hideDiv 1s ease-in-out 1s; animation-fill-mode: forwards; }
.current .tip { -webkit-animation: showDiv 1s ease-in-out 1s; -webkit-animation-fill-mode: forwards; animation: showDiv 1s ease-in-out 1s; animation-fill-mode: forwards; }
.current .screen2Pic { -webkit-animation: showDiv 1s ease-in-out 1s; -webkit-animation-fill-mode: forwards; animation: showDiv 1s ease-in-out 1s; animation-fill-mode: forwards; }
.loading_img, .cate, .screen-arrow, .txt_eng, .txt_ch, .J-btn, .logo, .cate2, .screen2Pic, .txt2, .code_txt, .txt_1, .txt_2,.f_txt { -webkit-background-size: 100% auto; background-size: 100% auto; }
@-webkit-keyframes hideDiv {
	0% { opacity: 1; }
	100% { opacity: 0; }
}
@-webkit-keyframes showDiv {
	0% { opacity: 0; }
	100% { opacity: 1; }
}
@-webkit-keyframes swipMove {
	0% { margin-bottom: -5px; }
	100% { margin-bottom: 5px; }
}
 video::-webkit-media-controls-enclosure {
            display: none !important;
        }
.tvp_overlay_play_v2 .tvp_fileszie  { display: none; }

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
    .txt_eng { padding-bottom: 6.56%; margin: 10.22% 0 0 5.78%; left: 3.425%; background-position: 0 0; opacity: 0;}
    #WxMomentVideo {width: 100%; margin-top: 4%;  opacity: 0;}
    .screen2Pic { position: absolute; z-index: 4; margin-top: 10.9%; height: 95%; width: 100%; background: url("../img/screen2.jpg") no-repeat; overflow: hidden; opacity: 0; }
    .screen2Pics { position: absolute; z-index: 4; margin-top: 10.9%; height: 95%; width: 100%;  overflow: hidden; opacity: 1; }
    .screen2 .logo { position: absolute; width: 15.93%; left: 42.035%; top: 0; margin-top: 108.65%; padding-bottom: 11%; z-index: 5; }
    
    .screen-arrow { position: absolute; bottom: 8px; left: 50%; margin-left: -8px; z-index: 98; background: url("../img/arrow.png") no-repeat 0 0; width: 5%; height: 2.1%; -webkit-animation: swipMove 800ms ease-in-out infinite; -webkit-animation-direction: alternate; animation: swipMove 800ms ease-in-out infinite; animation-direction: alternate; }
.tip{position: absolute;color: #171717;bottom:30px;width: 100%;text-align: center;font-size: 0.5em;}
.loading_img, .cate, .screen-arrow, .txt_eng, .txt_ch, .J-btn, .logo, .cate2, .screen2Pic, .txt2, .code_txt, .txt_1, .txt_2,.f_txt { -webkit-background-size: 100% auto; background-size: 100% auto; }
}