body .layui-layer { background-color: transparent; box-shadow: none; border-radius: 0; } body .layui-layer.layui-layer-hui { background-color: #000; filter: alpha(opacity=60); background-color: rgba(0, 0, 0, 0.6); } body { line-height: 1.1; font-family: "微软雅黑"; background-color: #fff; } .main { background-color: #fff; width: 10rem; position: relative; font-size: 0; margin: 0 auto; padding-top: 0.586rem; text-align: center; box-sizing: border-box; height: 100vh; } .mTitle { position: relative; margin-left: 0.586rem; width: 9rem; font-size: 0.293rem; color: #999; text-align: left; } .mainPic { width: 8.987rem; height: 2.773rem; overflow: hidden; margin: 0.2rem auto; } .mainPic img { width: 100%; } .mBox { position: relative; width: 10rem; margin: 0.293rem auto 0; font-size: 0; text-align: center; } .inputBox { width: 8.8rem; height: 1.466rem; line-height: 1.466rem; color:#282828; position: relative; text-align: left; margin: 0 auto; border-bottom: 1px solid #ddd; } .inputBox p { text-align: left; position: absolute; top: 0; left: 0; width: 2rem; height: 100%; font-size: 0.373rem; line-height: normal; display: flex; align-items: center; } .mIpt { margin: 0 auto; width: 6.8rem; height: 1.466rem; position: absolute; top: 0; right: 0; line-height: .8rem; border-radius: 0.213rem; -webkit-border-radius: 0.213rem; -moz-border-radius: 0.213rem; -ms-border-radius: 0.213rem; -o-border-radius: 0.213rem; background: transparent; color: #282828; font-weight: bold; text-indent: 0.293rem; font-size: 0.373rem; caret-color: #006EF6; } input::-webkit-input-placeholder { color: rgba(40, 40, 40, 0.4); opacity: 0.4; font-weight: normal; } input:-moz-placeholder { color: rgba(40, 40, 40, 0.4); font-weight: normal; } input::-moz-placeholder { color: rgba(40, 40, 40, 0.4); font-weight: normal; } input:-ms-input-placeholder { color: rgba(40, 40, 40, 0.4); font-weight: normal; } .mBtn { width: 8.533rem; height: 1.067rem; line-height: 1.067rem; text-align: center; font-size: 0.427rem; /* color: #22222B; background-color: #00F7FF; */ color: #FFFFFF; background-color: #e53985; border-radius: 0.64rem; -webkit-border-radius: 0.64rem; -moz-border-radius: 0.64rem; -ms-border-radius: 0.64rem; -o-border-radius: 0.64rem; margin: 0.88rem auto 0; opacity: 0.5; position: absolute; bottom: 0.893rem; left: 0.773rem; } .mBtn.able { opacity: 1; } .mDesc { position: relative; text-align: center; font-size: 0.346rem; color: #fff; opacity: 0.6; margin: 0.613rem auto 0; text-decoration: underline; display: inline-block; } .mask1 { width: 10rem; height: 14.026rem; position: relative; font-size: 0; background-color: #FFF; -webkit-border-radius: 0.32rem 0.32rem 0 0; -moz-border-radius: 0.32rem 0.32rem 0 0; -ms-border-radius: 0.32rem 0.32rem 0 0; -o-border-radius: 0.32rem 0.32rem 0 0; } .maskTitle { position: relative; padding-top: 1.013rem; margin-left: 0.666rem; width: 8rem; font-size: 0.48rem; color: #333; } .maskInfo { position: relative; margin: 0.586rem 0 0 0.693rem; width: 9rem; font-size: 0; } .maskInfo p { font-size: 0.373rem; color: #333; } .maskInfo p:nth-child(2) { margin-top: 0.133rem; } .maskDesc { position: relative; margin: 0.533rem 0 0 0.693rem; font-size: 0.32rem; color: #808080; } .maskExample { background: url(../img/example.png?v=202004031531) no-repeat; background-size: 100% 100%; width: 10rem; height: 8.946rem; position: relative; margin: 0 auto; } .maskExample.L_En { background: url(../img/example2.png?v=202004031531) no-repeat; background-size: 100% 100%; } .closeMasking { position: absolute; right: 0.386rem; top: 0.413rem; width: 0.2rem; height: 0.2rem; z-index: 100; } .maskTop { width: 7.16rem; height: 0.973rem; background: url(../../../img/mask/mtop.png) no-repeat; background-size: contain; } .maskCenter { width: 7.16rem; background: url(../../../img/mask/mcenter.png) no-repeat; background-size: 100% 100%; margin-top: -0.2rem; } .maskBottom { width: 7.16rem; height: 0.84rem; background: url(../../../img/mask/mbottom.png) no-repeat; background-size: 100% 100%; margin-top: -0.2rem; } .mask2 { width: 7.307rem; height: 5.893rem; background: #FFFFFF; border-radius: 0.507rem; position: relative; font-size: 0; } .mask2Info { position: relative; width: 100%; font-size: 0; color: #282828; margin: 0 auto; text-align: center; padding-top: 0.62rem; } .mask2Info p { margin-top: 0.133rem; font-size: 0.346rem; width: 95%; text-align: center; line-height: 1.2; margin: 0 auto; } .mask2Info p:nth-child(2) { margin-top: 0.4rem; } .mask2Info p:nth-child(1) { font-size: 0.4rem; margin-top: 0; } .mask2Info p.check { color: #282828; text-align: left; padding-left: 0.8rem; line-height: 0.64rem; } .mask2Info p.check span { color: #E94F4C; } .mask2Btn { position: relative; width: 100%; height: 1rem; margin-top: 0.4rem; } .mask2Btn span { position: absolute; left: 0.813rem; top: 0; width: 2.573rem; height: 1rem; line-height: 1rem; border-radius: 0.493rem; text-align: center; font-size: 0.373rem; background: #E5E5E5;; color: #22222B; } .mask2Btn span:nth-child(2) { left: 3.72rem; /* background: #00F7FF; color: #22222B; */ background: #e53985; color: #FFFFFF; font-weight: 500; } .mask5 { position: relative; width: 7.2rem; font-size: 0; background: #fff; border-radius: 0.213rem; -webkit-border-radius: 0.213rem; -moz-border-radius: 0.213rem; -ms-border-radius: 0.213rem; -o-border-radius: 0.213rem; padding-bottom: 0.2rem; } .mask5Title { padding: 0.18rem 0 0.48rem 0; width: 100%; text-align: center; font-size: 0.346rem; color: #282828; } .mask5Btn { position: relative; width: 6rem; text-align: center; border-radius: 0.64rem; -webkit-border-radius: 0.64rem; height: 1rem; line-height: 1rem; font-size: 0.453rem; margin: 0 auto; /* color: #22222B; background: #00F7FF; */ color: #FFFFFF; background: #e53985; }