html,
body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    height: auto;

}
*{
    -webkit-tap-highlight-color: transparent;
}
p{
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}
.Box {
    width: 100%;
    height: 5rem;
    background-image: linear-gradient(#C1E5A7, #F2E5C5);
    position: relative;
    /*overflow: hidden;*/
}
.yezi_l{
    width: 0.84rem;
    height: 1.134rem;
    background-image: url('../img/Travelplan/ye_l.gif');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left:  0rem;
    top: 0rem;
}
.yezi_r{
    width: 0.725rem;
    height: 0.82rem;
    background-image: url('../img/Travelplan/ye_r.gif');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    right:  -0.1rem;
    top: -0.1rem;
}
.yun_1{
    width: 100%;
    height: 0.4rem;
    position: absolute;
    left:  0rem;
    top: 0.35rem;
}
.yun_1 {
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    animation-delay:2.5s;
    -webkit-animation-delay:2.5s;
    position: relative;
}
.y_1{
    width: 0.65rem;
    height: 0.4rem;
    background-image: url('../img/Travelplan/cloud.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left:  -0.7rem;
    top: 0rem;
}
@keyframes rowup {
    0% {
        -webkit-transform: translate3d(-100px, 0, 0);
        transform: translate3d(-100px, 0, 0);
    }
    100% {
        -webkit-transform: translate3d(4.3rem, 0, 0);
        transform: translate3d(4.3rem, 0, 0);
    }
}

.yun_2{
    width: 100%;
    height: 0.4rem;
    position: absolute;
    left:  0rem;
    top: 0.17rem;
}
.yun_2 {
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    position: relative;
}
.y_2 {
    width: 0.7rem;
    height: 0.4rem;
    background-image: url('../img/Travelplan/cloud1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0rem;
    top: 0rem;
}
.yun_3{
    width: 100%;
    height: 0.29rem;
    position: absolute;
    left:  0rem;
    top: 0.52rem;
}
.yun_3 {
    -webkit-animation: 10s rowup linear infinite normal;
    animation: 10s rowup linear infinite normal;
    animation-delay:5s;
    -webkit-animation-delay:5s;
    position: relative;
}
.y_3{
    width: 0.6rem;
    height: 0.29rem;
    background-image: url('../img/Travelplan/cloud2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left:  -0.6rem;
    top: 0rem;
}
.b1{
    width: 100%;
    height: 2.58rem;
    background-image: url('../img/Travelplan/bg1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left:  0rem;
    bottom: 0rem;
}
.text_bg{
    width: 2.155rem;
    height:1.225rem;
    background-image: url('../img/Travelplan/text.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left:  0.795rem;
    top: 0.725rem;
    -webkit-animation-delay:1s;

}
.text_bg2{
    width: 2.5rem;
    height:1.865rem;
    background-image: url('../img/Travelplan/text_bg.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left:  0.63rem;
    top: 2.145rem;
    -webkit-animation-delay:1.8s;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.sun{
    width: 0.44rem;
    height:0.44rem;
    background-image: url('../img/Travelplan/sun.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    right:  0.275rem;
    top: 1.85rem;
    -webkit-animation-delay:2s;
}
.c_l{
    width: 1.425rem;
    height:2.53rem;
    background-image: url('../img/Travelplan/left.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left:  -0.1rem;
    bottom: -0.7rem;
}
.c_r{
    width: 1.2025rem;
    height:2.118rem;
    background-image: url('../img/Travelplan/right.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    right:  -0.2rem;
    bottom: -0.25rem;
}
.shanpo{
    width: 100%;
    height:1.54rem;
    background-image: url('../img/Travelplan/shanpo.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left:  0rem;
    bottom: -0.2rem;
}
.wangx{
    width: 0.19rem;
    height:0.19rem;
    background-image: url('../img/Travelplan/wangdown.gif');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left:  1.78rem;
    top: 3.93rem;
    -webkit-animation-delay:2.1s;

}
.flower1{
    width: 0.21rem;
    height:0.18rem;
    background-image: url('../img/Travelplan/flower1.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left:  2.34rem;
    bottom: 0.95rem;
    -webkit-animation-delay:2s;
}
.flower2{
     width: 0.24rem;
     height:0.18rem;
     background-image: url('../img/Travelplan/flower2.png');
     background-size: 100% 100%;
     background-repeat: no-repeat;
     position: absolute;
     left:  1.63rem;
     bottom: 0.45rem;
     -webkit-animation-delay:2.3s;
 }
.flower3{
    width: 0.27rem;
    height:0.245rem;
    background-image: url('../img/Travelplan/flower3.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left:  2.34rem;
    bottom: 0.1rem;
    -webkit-animation-delay:2.6s;
}

.bottom_box{
    width: 100%;
    height: 4.32rem;
    position: relative;
    overflow: hidden;
    background: #008B78;

}

.b_top{
    width: 100%;height: 0.3rem;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    font-size: 0.18rem;
    color: #FFFFFF;
    margin-top: 0.2rem;
}
.t_l,.t_r{
    width: 0.95rem;
    height:0.1rem;
    background-image: url('../img/Travelplan/b2.png');
    background-size: 100% 100%;
    background-repeat: no-repeat
}
.cp{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    margin-top: 0.2rem;

}
.cp_l,.cp_r {
    width: 1.57rem;
    height: 2.035rem;
    background: white;
    display: flex;
    flex-direction: column;

}
.cp_img{
    width: 1.57rem;
    height: 1.175rem;
}
.cp_tilte{
    font-size: 0.15rem;
    color: #000000;
    margin: 0.1rem 0 0 0.1rem;
}
.cp_cen{
    font-size: 0.11rem;
    color: #666666;
    margin: 0.05rem 0 0 0.1rem;
    height: 0.18rem;
    line-height: 0.18rem;
    overflow: hidden;
}
.cp_btn_l,.cp_btn_r{
    text-decoration: none;
    width: 0.7rem;
    height: 0.23rem;
    border-radius: 0.115rem;
    background: #FC8F00;
    font-size: 0.12rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0.05rem 0 0 0.435rem
}
.More{
    width: 100%;
    height: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.4rem;

}
.more_box{
    width: 0.7rem;
    height: 0.23rem;
    border-radius: 0.115rem;
    background: #13A08D;
    font-size: 0.12rem;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}
.logo{
    width: 2.1rem;
    height: 0.285rem;
    background-image: url('../img/Travelplan/logo.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left:  0.84rem;
    bottom: 0.155rem;
}
.Arc{
    width: 100%;
    height: 0.1rem;
    background-image: url('../img/Travelplan/b5.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    left: 0;
    bottom: 0;

}
.textc{
    width: 2rem;
    height: 1.6rem;
    margin-top: 0.16rem;
}
.textc p {
    font-size: 0.16rem;
    color: white;
    line-height: 0.25rem;
}
.xian{
    width: 2rem;height: 1px;
    background: white;
    margin-top: 0.1rem;
}
.gwen{
    font-size: 0.10rem;
    color: white;
}