* {padding: 0;margin: 0;}
ul,li {list-style: none; color:#fff;}
a {text-decoration: none;}
div {box-sizing: border-box;}
body {position:relative; height: 100vh; overflow: hidden;color: #fff;}
.video_bg {z-index: -1;}
.image_bg {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; height: 100%; width: 100%; z-index: -2; filter: brightness(0.8); background-size: cover;}
.footer {position: absolute; bottom: 20px; left:0;right:0; text-align: center; padding:0 10px; color:red;}
.footer p span{background:#00000021;display:inline-block;padding:5px; color:red;}
.footer p:nth-child(1) span {border-radius:5px 5px 0 0;}
.footer p:nth-child(2) span {border-radius:5px;}
/* pc */
@media screen and (min-width: 750px) {
    .container {width: 90%; margin: 0 auto;}
    .video_bg {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);object-fit: cover;height: 100%;width: 100%;filter: brightness(0.8);}
    .image_bg {background-image: url(pcbg.webp);}
    .header {display: flex;}
    .header .logo {width: 200px;margin-top: 30px; }
    .header .logo .logoimg {display:block; width: 100%; height:60px;  background:url(logo.webp); background-repeat: no-repeat; background-size: 100%;}
    .header .nav {flex: 1; text-align: right;}
    .header .nav ul {margin-top:43px;}
    .header .nav ul li { float: right;background:#000;border-radius: 20px;margin-left:10px;padding-left:30px;background-repeat: no-repeat;background-size: 24px;background-position: 15px 4px;}
    .header .nav ul li a {display:inline-block; padding: 6px 30px 7px 20px; color: #fff;}
    .header .nav ul li.telegram {background-image: url(telegram.svg);}
    .header .nav ul li.ie {background-image: url(ie.svg);}
    .header .nav ul li.earth {background-image: url(earth.svg);}
    .header .nav ul li.test {background-image: url(test.svg);}
    .main {margin-top:30vh;color: #fff;}
    .main h2 {font-size: 50px;letter-spacing:6px;font-weight: bold;}
    .main p {font-size: 24px;font-weight: bold;margin-top:10px;}
    .wap_main {display: none;}
    .article {margin-top:30px; display: flex;}
    .article .a_left {width: 180px;}
    .article .a_left .ewm {display: inline-block; background: #fff; padding:10px;}
    .article .a_left .ewmtxt {text-align: center; color: #fff;}
    .article ul {margin-left:10px; margin-top:2px;}
    .article ul li {background:#000;border-radius: 20px;margin-bottom:12px;padding-left:20px;background-repeat: no-repeat;background-size: 23px;background-position: 15px 5px;}
    .article ul li:nth-child(1) {background-image: url(android.svg); }
    .article ul li:nth-child(2) {background-image: url(ios.svg);}
    .article ul li:nth-child(3) {background-image: url(android.svg);}
    .article ul li:nth-child(4) {background-image: url(ios.svg);}
    .article ul li a {display:inline-block; padding:5px 20px 8px 30px; color: #fff;letter-spacing: 5px;}
    .article ul li:nth-child(1) a {color:#00e700;}
    .article ul li:nth-child(2) a {color:#00e700;}
}

/* wap */
@media screen and (max-width: 750px) {
    .video_bg {display: none;}
    .image_bg {background-image: url(wapbg.webp);background-position:center;}
    
    .header {width:100%;padding:80px 0 20px 0}
    .header .logo {width: 100%; text-align: center;}
    .header .logo .logoimg {display:block;width:200px;height:60px;background:url(logo.webp);background-repeat:no-repeat;background-size:180px; margin: 0 auto;background-position:top center;}
    .header .nav {display: none;}

    .main {display: none;}
    .wap_main {text-align: center;}
    .wap_main h2 {font-size: 34px;letter-spacing:3px;font-weight: bold;}
    .wap_main p {font-size: 14px;margin-top:5px;}

    .article .a_left {display: none;}
    .article {width: 100%; margin-top: 50px;}
    .article ul {width: 200px; margin: 0 auto;}
    .article ul li {background:#000;border-radius: 20px;margin-bottom:10px; text-align: center; padding-left:20px;background-repeat: no-repeat;background-size: 23px;background-position: 20px 5px;}
    .article ul li:nth-child(1) {background-image: url(android.svg); }
    .article ul li:nth-child(2) {background-image: url(ios.svg);}
    .article ul li:nth-child(3) {background-image: url(android.svg);}
    .article ul li:nth-child(4) {background-image: url(ios.svg);}
    .article ul li a {display:inline-block; padding:5px 10px 8px 10px; color: #fff;letter-spacing: 5px;}
    .article ul li:nth-child(1) a {color:#00e700;}
    .article ul li:nth-child(2) a {color:#00e700;}
}