* {
    box-sizing: border-box;
}

.body {
    overflow: hidden;
}

img {
    display: block;
}

.body {
    width: 100%;
}

.banner {
    width: 100%;
    margin-bottom: 0.7rem;
}

.banner img {
    width: 100%;
    height: auto;
}

.first {
    width: 3.75rem;
    height: 1.08rem;
    line-height: 1.08rem;
    margin: 0 auto .3rem;
    /* background-color: pink; */
    background: url('../img/first.png') no-repeat center top;
    background-size: 100% 100%;
    font-family: "Bold";
    font-size: .38rem;
    color: #fff;
    text-align: center;
    letter-spacing: 1px;
}

.topic01 {
    padding: .4rem .3rem .37rem .3rem;
    font-size: 0;
}

.topic01 p {
    font-family: "Medium";
    font-size: .26rem;
    color: #333;
    line-height: .40rem;
}

.topic01 span {
    font-family: "Light";
    font-size: .22rem;
    color: #666;
    line-height: .38rem;
    display: block;
}

.activeimg {
    padding: .36rem 0 .2rem;
    display: flex;
    justify-content: space-between;
}

.activeimg img {
    width: 3.35rem;
    height: 2.43rem;
}

.active03 {
    width: 100%;
    height: auto;
    margin-bottom: .5rem;
}

.topic01-lastspan {
    margin-bottom: .3rem;
}

.scenicimg {
    width: 100%;
    height: auto;
    margin-bottom: .3rem;
}

.topic02 {
    margin: 0 .2rem .35rem;
    height: 7.15rem;
    background: url('../img/line.png') no-repeat center top;
    background-size: 100% 100%;
}

.second {
    width: 2.17rem;
    height: .55rem;
    background: url('../img/second.png') no-repeat center top;
    background-size: 100% 100%;
    font-family: "Medium";
    font-size: .28rem;
    color: #fff;
    line-height: .55rem;
    text-align: center;
}

.topic02 .top {
    display: flex;
    /* width: 4.2rem; */
    padding: 0 .24rem .28rem .28rem;
    justify-content: space-between;
    align-items: flex-end;
}

.topic02 .top .left {
    padding-right: .35rem;
}

.topic02 .top .left p {
    font-size: 0;
    display: flex;
}

.topic02 .top .jh {
    margin-bottom: .35rem;
}

.topic02 .top .left p .title {
    font-family: "Medium";
    font-size: .24rem;
    color: #333;
    margin-right: .22rem;
    width: .66rem;
}

.topic02 .top .left span:nth-child(2) {
    font-family: "Light";
    font-size: .24rem;
    color: #666;
    flex: 1;
}

.topic02 .top .right {
    height: 100%;
    /* margin-left: .35rem; */
    padding-top: .28rem;
    position: relative;
}

.topic02 .top .right img {
    width: 100%;
}

.topic02 .top .right .tag01,
.topic02 .bottomimgdv .tag02 {
    display: block;
    width: 1.61rem;
    height: 0.36rem;
    border-top-right-radius: .18rem;
    border-bottom-right-radius: .18rem;
    background-color: rgba(0, 0, 0, 0.3);
    font-family: "Light";
    font-size: .18rem;
    color: #fff;
    position: absolute;
    bottom: .24rem;
    left: 0;
}

.topic02 .bottomimgdv .tag02 {
    bottom: .34rem;
}

.topic02 .bottomimgdv {
    margin: 0 .24rem 0 .25rem;
    position: relative;
}

.topic02 .bottomimg {
    width: 100%;
}

.topic03 {
    margin: 0 .2rem .35rem;
    background: url('../img/trip.png') no-repeat center top;
    background-size: 100% 100%;
}

.topic03 .lx,
.topic04 .lx {
    margin-left: .24rem;
}

.topic03 .text {
    padding: .3rem .36rem .4rem .36rem;
}

.topic03 .text p {
    font-family: "Light";
    font-size: .22rem;
    color: #666;
    /* text-indent: -.66rem;
    margin-left: .66rem; */
    line-height: .45rem;
    display: flex;
}

.topic03 .text p span:nth-child(1) {
    /* width: .75rem;
    display: inline-block; */
    display: inline-block;
    width: .73rem;
    /* background-color: cyan; */
    /* color: red; */
}

.topic03 .text p span:nth-child(2) {
    /* width: .75rem;
    display: inline-block; */
    flex: 1;
    display: inline-block;
    /* background-color: pink; */
    /* color: red; */
}

.topic04 {
    margin: 0 .2rem .7rem;
    background: url('../img/equipment.png') no-repeat center top;
    background-size: 100% 100%;
}

.topic04 .text {
    padding: .2rem .36rem .35rem;
}

.topic04 .text p {
    font-family: "Light";
    font-size: .22rem;
    color: #666;
    display: flex;
    line-height: .45rem;
}

.topic04 .text p span:nth-child(1) {
    /* width: .75rem;
    display: inline-block; */
    display: inline-block;
    width: .26rem;
    /* background-color: cyan; */
    /* color: red; */
}

.topic04 .text p span:nth-child(2) {
    /* width: .75rem;
    display: inline-block; */
    flex: 1;
    display: inline-block;
    /* background-color: pink; */
    /* color: red; */
}

.topic05 {
    margin: 0 .3rem .68rem;
    background: url('../img/signup.png') no-repeat center top;
    background-size: 100% 100%;
    padding: .55rem .6rem .45rem;
}

.topic05 .usersex,
.topic05 .check,
.topic05 .usercode {
    width: 3.87rem;
    /* height: .5rem; */
    margin: 0 auto;
    background-color: #fff;
    border-radius: 7px;
    overflow: hidden;
    margin-bottom: .37rem;
}

.topic05 .username,
.topic05 .usernum {
    width: 3.87rem;
    margin: 0 auto;
    border-radius: 7px;
    overflow: hidden;
    /* margin-bottom: .37rem; */
}

.topic05 .usercode {
    transform: scale(0.5, 0.5);
    opacity: 0;
    transition: transform 0.3s linear, opacity 0.3s linear;
}

.topic05 .username input,
.topic05 .usernum input,
.topic05 .usercode input {
    display: block;
    width: 3.87rem;
    height: .5rem;
    padding-left: .24rem;
    /* height: 100%; */
    /* padding: .2rem 0 .2rem .24rem; */
    font-family: "Regular";
    font-size: .18rem;
    color: #666;
    border-radius: 7px;
}

.topic05 .username input::placeholder,
.topic05 .usernum input::placeholder,
.topic05 .usercode input::placeholder {
    font-family: "Regular";
    font-size: .18rem;
    color: #666;
}

.topic05 .usersex {
    display: flex;
    padding-left: .24rem;
}

.topic05 .usersex span {
    display: block;
    width: .8rem;
    padding-left: .22rem;
    font-family: "Regular";
    font-size: .18rem;
    color: #666;
    line-height: .5rem;
}

.topic05 .usersex .nan {
    background-image: url('../img/yes.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: .16rem .16rem;
}

.topic05 .usersex .nv {
    background: url('../img/no.png') no-repeat left center;
    background-size: .16rem .16rem;
}

.topic05 .check {
    padding-left: .24rem;
    line-height: .52rem;
}

.topic05 .click-usercode {
    opacity: 1;
    transform: scale(1, 1);
}

.topic05 .check .check-box {
    font-family: "Regular";
    font-size: .18rem;
    color: #666;
    display: block;
    padding-left: .26rem;
    background-image: url('../img/no.png');
    background-repeat: no-repeat;
    background-position: left center;
    background-size: .16rem .16rem;
}

.msg {
    display: block;
    width: 3.87rem;
    height: .37rem;
    line-height: .28rem;
    color: #fff;
    font-size: .16rem;
    font-family: 'Light';
    padding-left: .1rem;
}

.target {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    position: absolute;
    top: 0.2rem;
    left: 0.2rem;
    /* text-align: center; */
    /* line-height: 1rem; */
}

.topic05 .btn {
    width: 2rem;
    height: .52rem;
    border-radius: 7px;
    background-color: #2c8e18;
    border: 2px solid #81c542;
    margin: 0 auto;
    line-height: .45rem;
    font-family: "Regular";
    font-size: .22rem;
    color: #fff;
    text-align: center;
}

.topic06,
.topic07 {
    margin: 0 .29rem .4rem;
    background: url('../img/plan.png') no-repeat center top;
    background-size: 100% 100%;
    padding: .35rem .28rem;
    font-size: 0;
}

.topic06>span,
.topic07>span {
    font-family: "Medium";
    font-size: .26rem;
    color: #333;
}

.topic06>p,
.topic07>p {
    font-family: "Light";
    font-size: .22rem;
    color: #666;
}

.topic07 p {
    display: flex;
}

.topic07 p span:nth-child(1) {
    width: .33rem;
}

.topic07 p span:nth-child(2) {
    flex: 1;
}

.footer {
    width: 100%;
    margin-top: .7rem;
    padding: .54rem 0 .56rem;
    text-align: center;
    background-color: #77bf35;
}

.footer .code {
    width: 1.7rem;
    height: 1.7rem;
    margin: 0 auto .34rem;
}

.footer p {
    font-family: "Light";
    font-size: .2rem;
    color: #fff;
    line-height: .34rem;
}

.footer .lastp {
    margin-bottom: .18rem;
}

.footer .phone {
    /* width: 5.35rem; */
    display: inline-block;
    height: 0.82rem;
    overflow: hidden;
    background: url('../img/phone.png') no-repeat center top;
    background-size: 100% 100%;
    margin: 0 auto;
    padding-left: .85rem;
    text-align: left;
}

.footer .phone span {
    display: block;
    font-family: "Light";
    font-size: .22rem;
    color: #fff;
    line-height: .42rem;
}

.footer .phone p {
    /* display: block; */
    font-family: "Light";
    font-size: .19rem;
    color: #fff;
}

@media screen and (max-width: 1920px) {
    html {
        font-size: 256px;
    }
}

@media screen and (max-width: 1280px) {
    html {
        font-size: 170.66px;
    }
}

@media screen and (max-width: 1200px) {
    html {
        font-size: 160px;
    }
}

@media screen and (max-width: 1120px) {
    html {
        font-size: 149.33px;
    }
}

@media screen and (max-width: 1080px) {
    html {
        font-size: 144px;
    }
}

@media screen and (max-width: 960px) {
    html {
        font-size: 128x;
    }
}

@media screen and (max-width: 880px) {
    html {
        font-size: 117.33px;
    }
}

@media screen and (max-width: 840px) {
    html {
        font-size: 112px;
    }
}

@media screen and (max-width: 800px) {
    html {
        font-size: 106.66px;
    }
}

@media screen and (max-width: 750px) {
    html {
        font-size: 100px;
    }
}

@media screen and (max-width: 700px) {
    html {
        font-size: 93.33px;
    }
    ;
}

@media screen and (max-width: 640px) {
    html {
        font-size: 85.33px;
    }
}

@media screen and (max-width: 600px) {
    html {
        font-size: 80px;
    }
}

@media screen and (max-width: 560px) {
    html {
        font-size: 74.66px;
    }
}

@media screen and (max-width: 480px) {
    html {
        font-size: 64px;
    }
}

@media screen and (max-width: 400px) {
    html {
        font-size: 53.33px;
    }
}

@media screen and (max-width: 360px) {
    html {
        font-size: 48px;
    }
}

@media screen and (max-width: 320px) {
    html {
        font-size: 42.66px;
    }
}