@media screen and (max-width: 430px){
    .contentpage {
        margin: 0;
        padding: 0;
        transform: scale(0.21);
        transform-origin: 0 0;
        width: 1876px;
        height: 500%;
        z-index: -99;
    }
}
@media screen and (min-width: 431px) and (max-width: 768px) {
    .contentpage {
        margin: 0;
        padding: 0;
        transform: scale(0.41);
        transform-origin: 0 0;
        width: 1876px;
        height: 500%;
        z-index: -999;
    }
}
@media screen and (min-width: 769px) and (max-width: 820px) {
    .contentpage {
        margin: 0;
        padding: 0;
        transform: scale(0.428);
        transform-origin: 0 0;
        width: 1876px;
        height: 500%;
        z-index: -999;
    }
}
@media screen and (min-width: 821px) and (max-width: 1024px) {
    .contentpage {
        margin: 0;
        padding: 0;
        transform: scale(0.536);
        transform-origin: 0 0;
        width: 1876px;
        height: 500%;
        z-index: -999;
    }
}
@media screen and (min-width: 1025px) and (max-width: 1412px) {
    .contentpage {
        margin: 0;
        padding: 0;
        transform: scale(0.723);
        transform-origin: 0 0;
        width: 1876px;
        height: 500%;
        z-index: -999;
    }
}
@media screen and (min-width: 1413px) {  
    .contentpage {
        margin: 0;
        padding: 0;
        height: 500%;
        z-index: -999;
   }
}

/* banner */
.divbgc{
    position: relative;
    width: 100%;
    height:20%;
}
.backbgctop{
  width: 100%;
  height: 100px;
}
.backbgc{
    /* position: absolute; */
    position: fixed;
    width: 100%;
    height: 100px;
    background-color: #CFAB82;
    z-index: 9999;
}
.topbanner{
    display: flex;
    justify-content: center;
    width: 60%;
    height: 100%;
    /* background-color: yellowgreen; */
    align-items: center;
    z-index: 99;

}
.inbanner{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
}
.cwlogo{
   width: 172px;
   height: 47px;
   margin-left: 57%;
   margin-right: 1.5vw;

}
.chobanner .textblock{
    width: 140px;
    height: 56px;
    background: #FFFFFF;
    border-radius: 28px;
    text-align: center;
}
.chobanner .textblock .textpacetime{
    color: #000000;
    font-weight: bold;
}

.textblock{
    width: 140px;
    height: 56px;
    border-radius: 28px;
    text-align: center;
    /* margin-left: 0.3vw; */
}
.textblock:hover{
    width: 140px;
    height: 56px;
    background: #FFFFFF;
    border-radius: 28px;
    text-align: center;
    /* margin-left: 0.3vw; */
}
.textblock:hover .textpacetime{
     color: #000000;
    font-weight: bold;

}
.textpacetime{
    font-weight: 400;
    font-size: 20px;
    color: #ffffff;
    line-height: 56px;
}
/* part 2 */
.topalltwo{
    position: relative;
    width: 100%;
    height: 20%;
    /* background-color: yellow; */
    /* margin-top: 14.9%; */
    /* z-index: ; */
}
.incenter{
    position: absolute;
    width: 100%;
    height:100%;
    top: 0;
    right: 0;
    /* background-color: palevioletred; */
 }
.inlayout{
    position: absolute;
    width: 46%;
    top: 55%;
    transform: translate(0,-50%);
    /* background-color: aquamarine; */
    z-index: 99;
    right: 0;
    /* margin-right: 6.5%; */
}
.tecw{
    font-weight: bold;
    font-size: 3rem;
    color: #000000;
    /* line-height: 92px; */

}
.stacw{
    width: 88%;
    font-weight: 300;
    font-size: 1.53rem;
    color: #000000;
    line-height: 38px;
    text-align: left;
    /* background-color: palevioletred; */
    margin-top: 1.67rem;


}
.bigfour{
    display: flex;
    margin-top: 20px;
}
.biglita{
   display: flex;
   flex-direction: column;
   width: 4rem;
   height: 4.6rem;
   align-items: center;
   /* background-color: #C68F00; */
}
.biglit{
    display: flex;
    flex-direction: column;
    width: 4rem;
    height: 4.6rem;
    align-items: center;
    margin-left: 6.25rem;
 }
.insurvey{
   width: 2.27rem;
   height: 2.27rem;
   margin-top: 0.87rem;
}
.incuter{
    width: 2rem;
    height: 2.33rem;
    margin-top: 0.73rem;

}
.inwiner{
    width: 2.47rem;
    height: 2.53rem;
    margin-top: 0.67rem;
}
.invideo{
    width: 2.27rem;
    height: 2.27rem;
    margin-top: 0.87rem;

}
.liteit{
    font-weight: 600;
    font-size: 15px;
    color: #C68F00;
    line-height: 21px;
    margin-top: 11px;
}
.buttone{
    display: flex;
    width: 210px;
    height: 75px;
    background: #C68F00;
    border-radius: 2.6rem;
    align-items: center;
    margin-top: 50px;
    /* text-align: center; */
    margin-left: 54%;
}
.buttone:hover{
    background-color: #DEBF6D;
}
.sebtn{
    width: 6.93rem;
    height: 2.47rem;
    font-weight: 600;
    font-size: 25px;
    color: #FFFFFF;
    line-height: 2.47rem;
    text-align: center;
    margin-left: 43px;
}
.morelogo{
    width: 0.73rem;
    height: 1.44rem;
    margin-left: 0.67rem;
}

.topallthree{
    overflow-x: auto;
    width: 100%;
    height: 16%;
    /* height: 96vh; */
    background-color: #FFFDF1;
    /* background-color: paleturquoise; */
}

.toppzip{
    position: relative;
    background-color: #FFFDF1;
    height: 2.5%;
    padding-top: 6.5%;

}
.toppzipa{
    position: relative;
    margin-top: 6%;
}
.toptitletext{
    font-weight: bold;
    font-size: 1.7rem;
    color: #000000;
    line-height: 8%;
    margin: 0 auto;
    text-align: center;
}
.topboline{
    width:7.8%;
    margin: 0 auto;
    height: 11px;
    background-color: #CFAB82;
}
.topallthree::-webkit-scrollbar {
    display: none; /* 隐藏滚动条 Chrome, Safari 和 Opera */
}
.nexttopallthree{
    display: flex;
    flex-wrap: nowrap;
    /* background-color: aquamarine; */
    margin-left: 4.3%;
}
.thblock{
    position: relative;
    display: flex;
    flex: 0 0 auto; /* 不允许伸缩 */
    width: 42%;
    height: 60vh;
    border-radius: 8px;
    margin-left: 2.5%;
    border: 3px solid rgba(153,111,0,0.15);
}

.logone{
   width: 50%;
}
.doublock{
    overflow: hidden;
    width: 50%;
    height: 100%;
    background-color: #996F0015;

}
.datanate{
    height: 8%;
    font-weight: bold;
    font-size: 1.7rem;
    /* font-size: 28px; */
    color: #000000;
    line-height: 8%;
    text-align: left;
    margin-left: 9%;
    margin-top: 65px;

}
.datatext{
    width: 80%;
    /* height: 15.5vw; */
    font-weight: 300;
    font-size: 1.3rem;
    color: #000000;
    margin-left: 9%;
    line-height: 36px;
    margin-top: 10px;
    /* background-color: palegreen; */

    text-overflow: ellipsis;
    overflow: hidden;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 6;
    overflow: hidden;

}
.mobtn{
    position: absolute;
    display: flex;
    width: 7vw;
    height:4vw;
    background: #5F4846;
    border-radius: 37px;
    align-items: center;
    margin-left: 24%;
    bottom: 2.5vw;
}
.mobtn:hover{
    background-color: #8A7874;
}
.motext{
    position: absolute;
    font-weight: 600;
    font-size: 1.2rem;
    color: #FFFFFF;
    line-height: 58px;
    /* margin-left: 1.8vw; */
    margin-left: 1.8vw;
}
.moreloglitt{
    position: absolute;
    width: 8%;
    height: 25%;
    /* margin-left:0.4vw; */
    margin-left: 4.8vw;
}
.topallfour{
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 20%;
    background-color: #ffffff;
}
.thcard{
    position: absolute;
    display: flex;
    width: 100%;
    margin-top: 5%;
}
.cardonea{
    position: relative;
    /* width:26vw; */
    width: 27%;
    height: 60.5vh;
    border-radius: 8px;
    border: 3px solid rgba(153,111,0,0.15);
    margin-left: 6%;
    /* background-color: palegreen; */
}
.cardone{
    position: relative;
    /* width:26vw; */
    width: 27%;
    height: 60.5vh;
    border-radius: 8px;
    border: 3px solid rgba(153,111,0,0.15);
    margin-left: 32px;
}
.serveone{
    width: 100%;
    height: 47vh;
}
.homebgc{
    position: relative;
    width: 100%;
    height: 13vh;
    background: linear-gradient( 180deg, rgba(253,233,192,0) 0%, #FDE9C0 100%), #FFFFFF;
}
.hometext{
    position: absolute;
    width: 100%;
    text-align: center;
    height: 57px;
    font-weight: bold;
    font-size: 30px;
    color: #996F00;
    line-height: 45px;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);


}
/* 底部 */
.divbgb{
    display: flex;
    width: 100%;
    /* height:14%; */
    height: 206px;
    background-color: #313131;
    align-items: center;
}
.divdou{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.bottotexte{
    font-size: 18px;
    color: #FFFFFF;
    line-height: 40px;
    text-align: left;
    margin-left: 7.5%;
    /* background-color: blueviolet; */

}
.bottotextea{
    font-size: 18px;
    color: #FFFFFF;
    line-height: 40px;
    margin-left: 7.5%;

}
.bottotexteaa{
    font-size: 18px;
    color: #FFFFFF;
    line-height: 40px;
    margin-left: 7.5%;
}
.bottotexteaa:hover{

    color: #CFAB82;

}
.qrimg{
    position: absolute;
    width: 120px;
    height: 120px;
    right: 7%;
}
.topallfive{
    position: relative;
    width: 100%;
    /* height: 20%; */
    height: 800px;
    background:url('./../image/botbgc.png') ;
    background-repeat: no-repeat;
    background-size: cover;
}
.introduce{
    height: 100%;
    width: 90.9%;
    display: flex;
    /* z-index: -1; */
    /* background-color: plum; */
}
.masking{
    position: absolute;
    width: 100%;
    height: 100%;
    /* width: 90.9%; */

    background-color: #00000050;
}
.outblock{
    display: none;
    position: relative;
    width: 46%;
    height: 100%;
    background: linear-gradient( 135deg, #FFEBCC 0%, #F1CA96 100%);
    opacity: 0.85;
    margin-left: 4%;
    /* transition: all 0.9s ease; 添加过渡效果 */
    z-index: 1000;
}
.outblocka,
.outblockb,
.outblockc,
.outblockd,
.outblocke,
.outblockf,
.outblockg{
    display: none;
    position: relative;
    width: 46%;
    height: 100%;
    background: linear-gradient( 135deg, #FFEBCC 0%, #F1CA96 100%);
    opacity: 0.85;
    z-index: 1000;
}
.loblockcw{
    position: relative;
    height: 100%;
    width: 14%;
    margin-left: 4%;
    align-items: center;
    /* background-color: cadetblue; */
}
.show{
    display: block;
  }
/* .loblockcw:hover + .outblock {
    display: block;
  }
.loblocka:hover + .outblocka {
    display: block;
  } */
.online{
    width: 1px;
    height: 100%;
    background-color: #fff;
}
.loblock{
    position: relative;
    height: 100%;
    width: 9%;
    align-items: center;
    /* background-color: palevioletred; */
}
.loblocka,
.loblockb,
.loblockc,
.loblockd,
.loblocke,
.loblockf,
.loblockg{
    position: relative;
    height: 100%;
    width: 14%;
    align-items: center;
}
.longtext{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 24%;
    height: 40%;
    font-weight: bold;
    font-size: 28px;
    color: #FFFFFF;
    line-height: 44px;

}
.twtcw{
    margin-left: 8%;
    margin-top: 16%;
    font-weight: bold;
    font-size: 30px;
    color: #000000;
    line-height: 57px;


}
.drestexta{
    margin-top: 10%;
    font-weight: 600;
    font-size: 16px;
    color: #000000;
    line-height: 40px;
    margin-left: 8%;


}
.drestextb{
    font-weight: 600;
    font-size: 16px;
    color: #000000;
    line-height: 40px;
    margin-top: 8%;
    margin-left: 8%;
}
.drestextz{
    font-weight: 600;
    font-size: 16px;
    color: #000000;
    line-height: 40px;
    margin-left: 8%;

}
.drestext{
    font-weight: 600;
    font-size: 16px;
    color: #000000;
    line-height: 40px;
    margin-left: 8%;

}
.drestexty{
    font-weight: 600;
    font-size: 18px;
    color: #000000;
    line-height: 40px;
    margin-left: 8%;
    margin-top: 40%;
}
.needline{
    position: absolute;
    text-decoration:underline;
    margin-top: 10%;
    margin-left: 8%;
    font-size: 16px;
    bottom: 20px;

}