html { background: #dbe7fd;max-width: 750px;margin: 0 auto;overflow: hidden;}
body { font-family: PingFang SC, Lantinghei SC, Helvetica Neue, Helvetica, Arial, Microsoft YaHei, \\5FAE\8F6F\96C5\9ED1, STHeitiSC-Light, simsun, \\5B8B\4F53, WenQuanYi Zen Hei, WenQuanYi Micro Hei, "sans-serif"; margin: 0 auto; color: #495374; background: #fff url(../images/bg.jpg) no-repeat center top;background-size: 100% auto;min-height: 100vh;max-width: 750px;}
img {vertical-align: top;width: 100%;}
a { color: inherit;}

.container { width: 100%;max-width: 750px; font-size: 0.36rem; position: fixed;bottom: 0;margin: 0 auto;text-align: center;}

.main {  background: rgba(235,245,255,.8);}
.main ul { display: flex; flex-wrap: wrap; border-top: solid 1px #fff; border-left: solid 1px #fff; box-sizing: border-box;}
.main ul li { cursor: pointer; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 50%; height: 2.06rem; border-right: solid 1px #fff; border-bottom: solid 1px #fff; box-sizing: border-box; background: url(../images/light.png) 0 0 no-repeat; background-size: 100% auto;}
.main ul li span { display: inline-block; width: 0.52rem; height: 0.52rem; margin-bottom: 0.12rem;}
.main ul li:nth-child(1) span { background: url(../images/img01.png) top no-repeat; background-size: 100%;}
.main ul li:nth-child(2) span { background: url(../images/img02.png) top no-repeat; background-size: 100%;}
.main ul li:nth-child(3) span { background: url(../images/img03.png) top no-repeat; background-size: 100%;}
.main ul li:nth-child(4) span { background: url(../images/img04.png) top no-repeat; background-size: 100%;}

.main ul li.active { color: #fff; background: linear-gradient(to bottom right, #6a95ff, #9db8ff);}
.main ul li.active:nth-child(1) span { background: url(../images/img01.png) bottom no-repeat; background-size: 100%;}
.main ul li.active:nth-child(2) span { background: url(../images/img02.png) bottom no-repeat; background-size: 100%;}
.main ul li.active:nth-child(3) span { background: url(../images/img03.png) bottom no-repeat; background-size: 100%;}
.main ul li.active:nth-child(4) span { background: url(../images/img04.png) bottom no-repeat; background-size: 100%;}

.main ul li.active:nth-child(1) span { background: url(../images/img01.png) bottom no-repeat; background-size: 100%;}
.main ul li.active:nth-child(2) span { background: url(../images/img02.png) bottom no-repeat; background-size: 100%;}
.main ul li.active:nth-child(3) span { background: url(../images/img03.png) bottom no-repeat; background-size: 100%;}
.main ul li.active:nth-child(4) span { background: url(../images/img04.png) bottom no-repeat; background-size: 100%; }
.pop { width: 100%;max-width: 750px; padding: 0.25rem; box-sizing: border-box; position: fixed; left: 0; right: 0; bottom: 5rem; margin: auto; background: rgba(234,244,254,.9); border-bottom: solid 1px #fff; box-shadow: 0 0.1rem 1rem 0 rgba(178,201,241,.9); display:none}

.line-tit { padding-bottom: 0.25rem; text-align: left; font-size: 0.31rem;}
.line-down { padding-bottom: 0.25rem; color: #fff;}
.line-down a { display: flex; justify-content: center; align-items: center; height: 1.03rem; font-size: 0.46rem; font-weight: bold; border-radius: 1rem; background: linear-gradient( #ff484a, #cf2414);}
.line-down img { width: 0.6rem; height: 0.6rem; margin-right: 0.25rem;}
.linebox {}
.linebox ul {}
.linebox ul li { padding-bottom: 0.25rem;}
.linebox ul li:last-child { padding-bottom: 0;}
.linebox ul li a { display: flex; cursor: default;}
.linebox ul li a .linetime { width: 1.77rem; height: 0.77rem; line-height: 0.77rem; text-align: center; border-radius: 0.15rem; margin-right: 0.25rem; background: #fff;}
.linebox ul li a .linetime em { color: #000; font-style: normal;}
.linebox ul li a .linetime b { color: #000; font-weight: normal;}
.linebox ul li a .lineweb { display: none; flex: 1; height: 0.77rem; line-height: 0.77rem; text-align: center; border-radius: 0.15rem; margin-right: 0.25rem; background: #fff;}
.linebox ul li a .linetxt { flex: 1; height: 0.77rem; line-height: 0.77rem; text-align: center; border-radius: 0.07rem; margin-right: 0.25rem; background: #fff;}
.linebox ul li a .linebtn { cursor: pointer; width: 1.96rem; height: 0.77rem; line-height: 0.77rem; text-align: center; color: #fff; border-radius: 0.15rem; background: linear-gradient(60deg, #5f85f8, #809dff);}

.ielist {}
.ielist li { padding-bottom: 0.25rem;}
.ielist li:last-child { padding-bottom: 0;}
.ielist li a { display: flex; justify-content: center; align-items: center; height: 1.28rem; font-size: 0.41rem; border-radius: 1rem; background: #fff;}
.ielist li img { width: 0.78rem; height: 0.78rem; margin-right: 0.25rem;}

.downlist {}
.downlist li { padding-bottom: 0.25rem;}
.downlist li:last-child { padding-bottom: 0;}
.downlist li a { display: flex; justify-content: center; align-items: center; height: 1.03rem; padding: 0 0.12rem 0 0.5rem; border-radius: 1rem; background: #fff;}
.downlist li div { display: flex; align-items: center; flex: 1;}
.downlist li div img { width: 0.65rem; height: 0.65rem; margin-right: 0.25rem;}
.downlist li span { display: block; width: 2.48rem; height: 0.77rem; line-height: 0.77rem; color: #fff; border-radius: 1rem; background: linear-gradient(60deg, #5f85f8, #809dff);}

.footer { height: 0.88rem; line-height: 0.88rem; text-align: center; font-size: 0.3rem; color: #7c8797; background: #353f4b;}