@charset "utf-8";
/* CSS Document */

#content{overflow: hidden;height:100vh;}
#info{width:40%;color:#fff;background:#2a2e4a;height:100%;z-index: 99;}
.logo{position:absolute;top:0}
#info .attention,#info .tip,#info .title{max-width:400px}
#info .title{font-size:18px;font-weight:400}
#info .tip{font-size:14px;margin:10px auto 40px}
#info .attention{font-size:12px;font-weight:400}
#info .allatt{width: 0; height: 0; border-style: solid; border-width: 100vh 0 100vh 12vw; border-color: transparent transparent transparent #2a2e4a;position: absolute;top:-50%;right: -8vw;}
#info .allatt::after,#info .allatt::before{content:'';width: 0; height: 0; border-style: solid; border-width: 100vh 0 100vh 12vw; border-color: transparent transparent transparent #2a2e4a;position: absolute;top:-100vh;right: -25px;opacity: 0.1;}
#info .allatt::before{right: -50px;}
#submit-form{max-width:70%}
#submit-form label{max-width:350px;display:flex;flex-wrap:nowrap;align-items:center;justify-content:flex-end;margin-bottom:20px}
#submit-form input[type=email],#submit-form input[type=text]{width:240px;height:36px;background:rgba(255,255,255,.1);border-radius:4px;border:0;color:#fff;margin:0 10px;padding: 0 10px;}
#submit-form input:focus{box-shadow:unset;background:rgba(255,255,255,.2);}
#submit-form input[type=submit]{background:#47acff;color:#fff;border:none;border-radius:4px;padding:4% 10%;font-size:16px;font-weight:700;cursor:pointer;margin:20px 26.3%}
#submit-form input[type=submit]:hover{filter: contrast(86%);}
.footer{display:block;position:absolute;bottom:0;font-size:12px;opacity:.5;height:55px;border-top:1px solid #343853;width:105%;line-height:55px}

#goods h1.title{font-size:32px;margin-bottom:50px}
#goods{padding-left:110px;height:100%;width:60%;background:#eaeaea url(images/cooperation/goods-bg.png);background-size: cover;}
#goods .version .title{font-size:18px;font-weight:700}
#goods .version .tip{font-size:22px;color:#eb7100;font-weight:700;margin:20px 0}
#goods .version li{font-size:16px;color:#666}
#goods .version li:not(:last-child){margin-bottom:15px}
#goods .version ul{margin:0}
#goods .version .life-time .btn{margin-top:40px;font-weight:700}
#goods .giveaway{background:#fff;box-shadow:0 10px 20px 0 rgba(0,0,0,.1);border-radius:4px;padding:40px 45px;}
#goods .life-time{background:#fff;box-shadow:0 10px 20px 0 rgba(0,0,0,.1);border-radius:4px;padding:45px 45px;max-width:420px;overflow:hidden}
#goods .life-time .price{position:absolute;right:0;top:0;background-image:linear-gradient(134deg,#db9702 0,#eb7100 100%);width:100px;height:100px}
#goods .life-time .price .sm-dollar{font-size:20px}
#goods .life-time .price p{transform:rotate(45deg);color:#fff;font-size:32px;font-weight:700;line-height:32px;padding-left:32px}
#goods .life-time .price:after{content:'';position:absolute;right:0;top:0;width:0;height:0;border-style:solid;border-width:100px 0 0 100px;border-color:transparent transparent transparent #fff}
#goods li.no:after{background:url(images/no-ico.svg)}
#goods .footer{display: none;}

aside.popu{background:rgba(0,0,0,.3);position:fixed;left:0;top:0;width:100%;height:100%;padding:0 10px;z-index: 999}
aside.popu .cont{background:#fff;max-width:600px;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;padding:35px 2%;box-shadow:0 0 36px rgba(0,0,0,.3);border-radius:2px}
aside.popu .cont .title{font-size:24px;color:#eb7100;font-weight:700;margin-bottom:20px}
aside.popu .cont a{color:#2a2e4a;text-decoration:underline}


@media (max-width: 1570px){
    #goods{padding: 0 20px;}
    .footer{width: 100%;}
    #info .allatt{display: none;}
}
@media (max-width: 1100px) {
    #submit-form{max-width: 100%;}
    #goods .version{flex-direction: column-reverse;}
    #goods{height: 100%;padding: 40px 16px 85px;width: 100%;}
    #goods .life-time .price .sm-dollar{font-size: 12px;}
    #goods .life-time .price p{font-size: 14px;}
    #goods .life-time .price{width: 70px;height: 70px}
    #goods .life-time .price:after{border-width: 70px 0 0 70px;}
    #content{flex-direction: column;}
    #info{width: 100%;padding: 100px 16px 50px;}
    #info .footer{display: none;}
    #goods .footer{display: block;border: none;}
}