.main { box-sizing: border-box; width: 100%; background: url(../images/bgxc.jpg) no-repeat; background-size: 100% 100%; } .banner { width: 100%; } .banner2 { width: 100%; position: relative; } .login_btn { width: 57%; position: absolute; left: 22%; top: 5%; } .login_btn img { width: 100%; } .login { text-align: center; font-size: 10px; position: absolute; top: 58%; /* left: 28%; */ width: 100%; margin: 0 auto; /* padding: 1.2rem 0.8rem 1.5rem 0.8rem; */ /* background: url(../img/login_bg.png) no-repeat; */ /* opacity: 0.8; */ background-size: 100% 100%; border-radius: 0.6rem; box-sizing: border-box; } .kaitong { /*padding: 2rem;*/ /*box-sizing: border-box;*/ } .login .iphone, .login .yanzhenma { width: 100%; box-sizing: border-box; margin-bottom: 1rem; padding: 0.84rem 0 0.8rem 1rem; font-size: 0.95rem; border-radius: 0.3rem; border: 1px solid #FFFFFF; } .login .yanzhenma { width: 60%; margin-bottom: 0; } .login .yangzhenma_box { display: flex; justify-content: space-between; align-items: center; } .login .yanzhenma_btn { display: block; border: 0; width: 27%; text-align: center; padding: 0.9rem; font-size: 0.9rem; border-radius: 0.3rem; background-color: #E52D51; color: white; } .btn, .Tbtn { display: block; width: 90%; margin: 0 auto; margin-bottom: 0.875rem; padding: 0.68rem 0; background: linear-gradient(to right, #E52D51, #E52D51, #E92A77, #E92A77); font-size: 1.25rem; color: white; text-align: center; border-radius: 0.3rem; } .line { width: 100%; height: 0.07rem; background: rgba(208, 208, 208, 1); } .copyright { width: 100%; color: #ffffff; font-size: 12px; text-align: center; } .tips_bg { padding-bottom: 20px; box-sizing: border-box; width: 100%; background: url(../images/cbgxc.jpg) no-repeat; background-size: 100% 100%; } .tips { width: 94%; margin: 0 auto; } .tips_header { width: 100%; margin: 1.3rem 0 1.1rem 0; font-size: 0.95rem; color: white; text-align: center; } .tips_item { display: flex; padding-bottom: 1rem; font-size: 0.8rem; align-items: flex-start; } .tips_item .num { border-radius: 50%; width: 1.1rem; line-height: 1.1rem; margin-top: 0.1rem; margin-right: 0.68rem; background-size: 100% 100%; text-align: center; color: #f2480e; height: 1.1rem; background-color: #ffffff; } .num_pic1 { /*background: url(../img/1.png) no-repeat;*/ } /*.num_pic2{ background: url(../img/2.png) no-repeat; } .num_pic3{ background: url(../img/3.png) no-repeat; } .num_pic4{ background: url(../img/4.png) no-repeat; } .num_pic5{ background: url(../img/5.png) no-repeat; } .num_pic6{ background: url(../img/6.png) no-repeat; }*/ .tips_item span { width: 90%; color: #FFFFFF; } /*用户升级*/ .login_header { margin-bottom: 1rem; font-size: 1rem; color: white; } .login .circular { display: inline-block; width: 0.7rem; height: 0.7rem; margin-top: 0.1rem; border: 0.06rem solid white; position: relative; border-radius: 0.7rem; } #chec + label:before { content: "\a0"; display: inline-block; vertical-align: middle; box-sizing: border-box; font-size: 18px; width: 0.65em; height: 0.65em; margin-right: .2em; margin-top: -0.2rem; border: 0.06rem solid #fff; /* text-indent: .15em; */ /* line-height: 1; */ } #chec:checked + label:before { background-color: #ffffff; background-clip: content-box; padding: .16em; } #chec { position: absolute; clip: rect(0, 0, 0, 0); } .login .active:before { content: ''; width: 0.3rem; height: 0.3rem; position: absolute; top: 0.1875rem; left: 0.1875rem; border-radius: 0.3rem; background-color: #FF14CB; } .login_foot label { color: #ffffff; font-size: 0.7rem; } .login .login_foot { margin-top: 1rem; } .login .login_foot span { display: inline-block; font-size: 0.8rem; color: rgba(117, 97, 180, 1); } .fuli { width: 94%; text-align: center; margin: 0 auto; margin-bottom: 1rem; font-size: 0.97rem; color: rgba(255, 255, 255, 1); } .fuli a { color: #AF3854; } .order { color: #AF3854; } .maskArea { position: fixed; width: 100%; height: 100%; top: 0; left: 0; background-color: black; opacity: 0.5; z-index: 1; font-size: 1.25rem; color: white; } .tc { width: 96%; min-height: 40%; position: fixed; top: 27%; left: 2%; display: flex; flex-flow: column; align-items: center; align-content: center; justify-content: center; text-align: center; background: url(../img/tanchaung.png) no-repeat; background-size: 100% 100%; z-index: 2; color: white; } .tc .wancheng { width: 3.5rem; margin: 0 auto; margin-bottom: 1rem; } .close { position: fixed; top: 27%; width: 2rem; right: 12%; z-index: 3; } /*订阅成功*/ .shengyu { width: 50%; height: 50%; margin: 0 auto; position: relative; display: flex; flex-flow: column; align-items: center; align-content: center; justify-content: center; color: white; border-radius: 50%; background: linear-gradient(to bottom, #562BE4, #461BD2, #D61D87, #E53535); } .header1 { width: 94%; position: relative; display: flex; align-items: center; align-content: center; box-sizing: border-box; margin: 1rem auto; background: url(../img/zhizhen.png) no-repeat; background-position: 0.06rem; background-size: 100%; } .shengyu p { font-size: 1.25rem; } .shengyu span { font-size: 2.8rem; } .yiyong { width: 100%; display: flex; justify-content: space-around; font-size: 0.94rem; color: #484A9A; } .yiyong .yiyong_item { display: flex; flex-flow: column; align-items: center; align-content: center; margin-bottom: 1.5rem; } .yiyong_item span { color: white; padding-top: 0.5rem; } .fuli1 { width: 100%; padding: 0.5rem 0; text-align: center; color: white; font-size: 0.94rem; background-color: #FF14CB; } .fuli1 span { text-decoration: underline; } .dingyue { padding-top: 1.5rem; } #myCanvas { width: 80%; position: absolute; top: 10%; left: 10%; } /*退订页面*/ .tuiding { display: flex; align-items: flex-start; text-align: left; margin-top: 2rem; } .tuiding img { width: 0.5rem; padding-right: 0.4rem; padding-top: 0.2rem; } .Ttips { width: 90%; } input::-webkit-input-placeholder { color: #484848; } input::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #484848; } input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #484848; } input:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #484848; } .tips_order { font-size: 0.6rem; } a:active { text-decoration: underline; }