@import url(common.css);

html {
    font-size: clamp(16px, 5.2083vw, 100px);
}

::-webkit-scrollbar {
    width: .1rem;
    height: .2rem;
}

::-webkit-scrollbar-thumb {
    background: #555;
}

::-webkit-scrollbar-track {
    background: #ddd;
}


a,
p,
span,
i,
em,
li {
    font-size: 0.18rem;
}

p {
    opacity: 0.7;
}

h1 {
    font-size: .55rem;
}

h2 {
    font-size: .50rem;
}

h3 {
    font-size: .45rem;
}

h4 {
    font-size: .40rem;
}

h5 {
    font-size: .30rem;
}

h6 {
    font-size: .24rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
    line-height: 1;
}

.br10 {
    border-radius: .1rem;
}

.br15 {
    border-radius: .15rem;
}

.br20 {
    border-radius: .20rem;
}

.br30 {
    border-radius: .30rem;
}

.br40 {
    border-radius: .40rem;
}

.br50 {
    border-radius: .50rem;
}

.con {
    width: 100%;
    padding: 0 2.3rem;
}

.mid-con {
    width: 100%;
    padding: 0 .8rem;
}

.big-con {
    width: 100%;
    padding: 0 .4rem;
}

.small-con {
    width: 100%;
    padding: 0 1.6rem;
}

.fy-btn {
    background-color: #fff;
    width: .5rem;
    height: .5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
    color: #000;
    font-weight: bold;
}

.fy-btn:hover {
    background-color: var(--main-color);
    color: #fff;
}

/*header*/
header {
    padding: 0;
    background-color: transparent;
    border-bottom: 1px solid transparent;
    transition: all 0.3s ease-in-out;
    position: absolute;
    width: 100%;
    z-index: 100;
}

.header-con {
    border-bottom: 1px solid transparent;
}

.logo img {
    width: 2.31rem;
    height: auto;
}

.header-right {
    flex: 1;
}

.header-menu {
    margin-left: 2.94rem;
    margin-right: .46rem;
}

.header-menu>span {
    display: none;
}

nav>ul>li>a {
    color: #fff;
    font-size: .18rem;
    line-height: 1;
    padding: .3rem 0.15rem;
    display: block;
    position: relative;
    font-weight: 400;
}

nav>ul>li>a::after {
    content: '';
    display: block;
    width: 0;
    height: .02rem;
    border-radius: .04rem;
    transition: all 0.3s ease-in-out;
    position: absolute;
    bottom: .05rem;
    left: 50%;
    transform: translateX(-50%);
}

nav>ul>li>a.on,
nav>ul>li>a:hover {
    color: #fff;
}

nav>ul>li>a.on::after,
nav>ul>li>a:hover::after {
    width: 60%;
    background-color: #fff;
}

header.on {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    position: fixed;
}

header.on .header-con {
    border-bottom: 1px solid #eee;
}

header.on nav>ul>li>a {
    color: #333;
}

header.on nav>ul>li>a.on,
header.on nav>ul>li>a:hover {
    color: var(--main-color);
}

header.on nav>ul>li>a.on::after,
header.on nav>ul>li>a:hover::after {
    background-color: var(--main-color);
}

.header-search-btn {
    margin-right: .4rem;
}

.header-search-btn span {
    font-size: .2rem;
    line-height: 1;
    display: block;
    color: #fff;
}

.header-search-btn span:hover {
    color: var(--main-color);
}

header.on .header-search-btn span {
    color: #000;
}


.header-search-form {
    top: 0.85rem;
    right: 2rem;
    z-index: 10;
}

.header-search-box {
    background-color: #fff;
    padding: 0;
    width: 2.5rem;
}

.header-search-box input[type=text] {
    font-size: 0.18rem;
    width: 100%;
    padding: 0 .16rem;
    display: block;
}

.header-search-box input[type=text]::placeholder {
    color: #666;
    font-family: 'HarmonyOS Sans';
}

.search-btn {
    background-color: var(--main-color);
    border: none;
    outline: none;
    padding: 0.15rem .2rem;
}

.search-btn span {
    font-size: .2rem;
    color: #fff;
    line-height: 1;
}

.header-btn {
    border: 1px solid transparent;
    background-color: transparent;
}

.header-lang {
    padding: 0;
    margin-right: .23rem;
    transition: all 0.3s ease;
}

.header-lang i {
    font-size: .25rem;
    color: #fff;
    line-height: normal;
    transition: all 0.3s ease;
}

.header-lang:hover i {
    color: var(--main-color);
    transform: scale(1.1);
}

header.on .header-lang i {
    color: #333;
}

header.on .header-lang:hover i {
    color: var(--main-color);
}

.header-quick-menu {
    padding: 0;
    transition: all 0.3s ease;
}

.header-quick-menu i {
    font-size: .25rem;
    color: #fff;
    line-height: normal;
    transition: all 0.3s ease;
}

.header-quick-menu:hover i {
    color: var(--main-color);
    transform: scale(1.1);
}

header.on .header-quick-menu i {
    color: #333;
}

header.on .header-quick-menu:hover i {
    color: var(--main-color);
}

/*å¿«æ·èœå•æŠ½å±‰*/
.quick-menu-mask {
    background-color: rgba(0, 0, 0, .5);
    z-index: 200;
    opacity: 0;
    visibility: hidden;
    transition: all .3s ease;
}

.quick-menu {
    width: 5.4rem;
    max-width: 90vw;
    background-color: #fff;
    z-index: 201;
    box-shadow: -.1rem 0 .4rem rgba(0, 0, 0, .08);
    transform: translateX(100%);
    transition: transform .35s ease;
    box-sizing: border-box;
}

body.quick-menu-on {
    overflow: hidden;
}

body.quick-menu-on .quick-menu-mask {
    opacity: 1;
    visibility: visible;
}

body.quick-menu-on .quick-menu {
    transform: translateX(0);
}

.quick-menu-close {
    position: absolute;
    top: .4rem;
    right: .5rem;
    width: .44rem;
    height: .44rem;
    z-index: 2;
}

.quick-menu-close i {
    font-size: .3rem;
    color: #333;
    line-height: 1;
    transition: all .3s ease;
}

.quick-menu-close:hover i {
    color: var(--main-color);
    transform: rotate(90deg);
}

.quick-menu-body {
    padding: 1.6rem .5rem 1rem;
    overflow-y: auto;
}

.quick-menu-body ul li + li {
    margin-top: .1rem;
}

.quick-menu-body ul li a {
    display: block;
    padding: .26rem .3rem;
    font-size: .2rem;
    color: #111;
    border-radius: .12rem;
    transition: all .3s ease;
}

.quick-menu-body ul li a:hover {
    background-color: #FFF3EC;
}

.quick-menu-foot {
    padding: .28rem .5rem;
    background-color: var(--main-color-gray);
    box-sizing: border-box;
}

.quick-menu-foot .icon-diqiuquanqiu {
    font-size: .24rem;
    color: #333;
    margin-right: .12rem;
}

.quick-menu-foot span {
    font-size: .16rem;
    color: #333;
}

.quick-menu-foot .icon-youjiantou-copy {
    font-size: .18rem;
    color: #666;
}

/*header ä¸‹æ‹‰å¤§èœå•ï¼ˆé˜¿æ³¢ç½—ç²¾é€‰ï¼‰*/
.header-mega {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 .2rem .4rem rgba(0, 0, 0, .08);
    padding: .5rem 0 .6rem;
    z-index: 99;
}

.header-mega.on {
    display: block;
}

.hm-inner {
    align-items: stretch;
    gap: .5rem;
}

/* å·¦ï¼šå›¾ç‰‡ï¼ˆèƒŒæ™¯å›¾ï¼Œä¸è‡ªèº«æ’‘é«˜ï¼›é  stretch è·Ÿéšè¡Œé«˜ = ä¸­æ èœå•é«˜åº¦ï¼‰ */
.hm-pic {
    width: 34%;
    flex-shrink: 0;
    background-image: url('../images/menu-l.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

/* ä¸­ï¼šèœå• */
.hm-menu {
    width: 25%;
    flex-shrink: 0;
    padding: .3rem .4rem;
    border-radius: .15rem;
    background: linear-gradient(180deg, rgba(255, 102, 0, .14) 0%, rgba(255, 102, 0, 0) 100%);
}

.hm-menu ul li {
    padding: .16rem 0;
}

.hm-menu ul li a {
    font-size: .2rem;
    color: #111;
    transition: color .3s ease;
}

.hm-arrow {
    width: .32rem;
    height: .32rem;
    flex-shrink: 0;
    background-color: var(--main-color);
    opacity: 0;
    transform: translateX(-.12rem);
    transition: all .3s ease;
}

.hm-arrow i {
    font-size: .16rem;
    color: #fff;
}

.hm-menu ul li:hover a {
    color: var(--main-color);
}

.hm-menu ul li:hover .hm-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* å³ï¼šè”ç³»ä¿¡æ¯ */
.hm-contact {
    flex: 1;
    min-width: 0;
    /* padding-left: .5rem; */
    display: flex;
    /* align-items: center; */
    justify-content: space-between;
    gap: .4rem;
    padding-top: .3rem;
}

.hm-watermark {
    width: 6.4rem;
    opacity: .12;
    pointer-events: none;
    bottom: -0.2rem;
}

.hm-contact-in {
    position: relative;
    z-index: 1;
}

.hm-contact-in h3 {
    font-size: .32rem;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
}

.hm-sub {
    margin-top: .14rem;
    font-size: .18rem;
    color: #999;
}

.hm-hot {
    margin-top: .8rem;
}

.hm-hot span {
    font-size: .16rem;
    color: #666;
}

.hm-hot p {
    margin-top: .1rem;
    font-size: .34rem;
    font-weight: 700;
    color: var(--main-color);
    line-height: 1.2;
}

.hm-kefu {
    position: relative;
    z-index: 1;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    background-color: var(--main-color);
    background-image: url('../images/woman.png');
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
    margin-left: .2rem;
}

.hm-kefu img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

/*page: ç«™ç‚¹åœ°å›¾ / æ³•å¾‹å£°æ˜Ž / éšç§æ¡æ¬¾*/
.pg-top {
    width: 100%;
    position: relative;
}

.pg-top-pic {
    padding-bottom: 3rem;
}

.pg-top-mask {
    background-color: rgba(0, 0, 0, .4);
}

.pg-top-txt h1 {
    font-size: .5rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
}

.pg-top-txt p {
    margin-top: .16rem;
    font-size: .18rem;
    color: rgba(255, 255, 255, .85);
}

.pg-body {
    padding: .8rem 0 1rem;
    background-color: var(--main-color-gray);
}

/* ç½‘ç«™åœ°å›¾ */
.pg-block {
    margin-bottom: .5rem;
}

.pg-block:last-child {
    margin-bottom: 0;
}

.pg-block-title {
    font-size: .24rem;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
    padding-left: .16rem;
    border-left: .06rem solid var(--main-color);
    margin-bottom: .24rem;
}

.pg-links {
    gap: .16rem;
}

.pg-link {
    display: inline-block;
    padding: .14rem .28rem;
    background-color: #fff;
    border-radius: .1rem;
    font-size: .16rem;
    color: #333;
    transition: all .3s ease;
}

.pg-link:hover {
    background-color: var(--main-color);
    color: #fff;
}

/* æ–‡æœ¬å†…å®¹é¡µ */
.pg-article {
    background-color: #fff;
    border-radius: .2rem;
    padding: .6rem .7rem;
}

.pg-update {
    font-size: .14rem;
    color: #999;
    margin-bottom: .3rem;
}

.pg-article h2 {
    font-size: .24rem;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
    margin: .4rem 0 .2rem;
}

.pg-article p {
    font-size: .16rem;
    color: #555;
    line-height: 2;
    margin-bottom: .18rem;
}

.pg-article ul {
    padding-left: .4rem;
    margin-bottom: .18rem;
}

.pg-article li {
    font-size: .16rem;
    color: #555;
    line-height: 2;
    list-style: disc;
    margin-bottom: .06rem;
}

.pg-article strong {
    color: #333;
    font-weight: 600;
}

/*index*/
.index-ba {
    width: 100%;
}

.index-ba-swiper {
    width: 100%;
}

.index-ba-swiper .swiper-slide {
    width: 100%;
    height: 100%;
}

.index-ba-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.index-ba .index-ba-pagination {
    bottom: .5rem;
    left: 0;
    z-index: 1;
}

.index-ba .index-ba-pagination .swiper-pagination-bullet {
    background-color: #eee;
    width: .1rem;
    height: .1rem;
    display: block;
    opacity: 1;
    margin: 0 .1rem;
    border-radius: 50%;
}

.index-ba .index-ba-pagination .swiper-pagination-bullet-active {
    background-color: var(--main-color);
    opacity: 1;
    width: 0.25rem;
    height: 0.1rem;
    border-radius: .5rem;
}

/* index-room */
.index-room {
    padding: 1.3rem 0;
    background: linear-gradient(180deg, #ffffff 30%, #f6f6f6 100%);
    border-radius: .3rem .3rem 0 0;
    margin-top: -0.3rem;
    z-index: 1;
}


.index-room-top {
    margin-bottom: .75rem;
}

.index-tit h1 {
    font-weight: 400;
    color: #000;
    line-height: 1.3;
}

.index-room-fy {
    gap: .1rem;
}
.index-room-fy .fy-btn {
    background-color: var(--main-color-gray);
}
.index-room-fy .fy-btn:hover {
    background-color: var(--main-color);
    color: #fff;
}
.index-room-swiper {
    width: 100%;
}

.index-room-swiper .swiper-slide {
    height: auto;
}

.index-room-item {
    z-index: 2;
}

.index-room-item-point {
    width: .36rem;
    height: .36rem;
    background: transparent;
    border-radius: 50%;
}

.index-room-item-point::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: .26rem;
    height: .26rem;
    background-color: var(--main-color);
    z-index: 2;
    border-radius: 50%;
}

.index-room-item-point::after {
    content: '';
    width: .1rem;
    height: .1rem;
    background-color: #fff;
    border-radius: 50%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
}
.index-room-item-point:hover{
    background-color: rgba(255, 255, 255, 0.4);
}
.index-room-item-con {
    background-color: #fff;
    margin-left: .15rem;
    padding: .22rem;
    flex:1;
    opacity: 0;
    transform: translateY(.2rem);
}

.index-room-item:hover .index-room-item-con {
    opacity: 1;
    transform: translateY(0);
}

.index-room-item-con img {
    width: .8rem;
    height: .8rem;
    object-fit: cover;
    border-radius: .1rem;
    margin-right: .2rem;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, .1);
    overflow: hidden;
}

.index-room-item-txt h6 {
    font-size: .18rem;
    font-weight: 500;
    color: #000;
}
.index-room-item-txt{
    padding-bottom: .2rem;
}
.index-room-item-txt p {
    font-size: .15rem;
    color: #999;
    opacity: 1;
    margin-top: .1rem;
    line-height: 1;
}

.index-room-item-btn {
    width: .4rem;
    height: .4rem;
    background-color: var(--main-color-gray);
    flex-shrink: 0;
    margin-left: .4rem;
}

.index-room-item-btn i {
    font-size: .2rem;
    color: #000;
    transform:rotate(-45deg);
}
.index-room-item-btn:hover {
    background-color: var(--main-color);
    color: #fff;
}
.index-room-item-btn:hover i {
    color: #fff;
    transform:rotate(0deg);
}

/* index-cate */
.index-cate {
    width: 100%;
    padding: 0rem 0 1rem;
    background-image: url('../images/index-cate-bg.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.index-cate-top {
    margin-bottom: .6rem;
}
.index-cate-tit h1 {
    margin-bottom: .2rem;
}
.index-room-tit p{
       font-size: .2rem;
    opacity: 0.7;
    margin-top:.2rem;
}
.index-cate-tit p {
    font-size: .2rem;
    opacity: 0.7;
}

.index-cate-fy {
    gap: .1rem;
    margin-top: .5rem;
}

.index-cate-swiper {
    width: 9.35rem;
    margin: 0;
    overflow: unset;
}

.index-cate-swiper .swiper-slide {
    height: auto;
}

.index-cate-item {
    display: block;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.index-cate-item-pic {
    width: 100%;
    padding-bottom: 6rem;
    transition: transform 0.6s ease;
}

.index-cate-item .a-box {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0) 100%);
}

.index-cate-item-txt {
    color: #fff;
    margin-top: .35rem;
}

.index-cate-item-txt p {
    font-size: .17rem;
    font-weight: 400;
    color: var(--main-color);
    opacity: 1;
    margin-bottom: .2rem;
}

.index-cate-item-txt span {
    font-size: .24rem;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
    line-height: 1.5;
}

.index-cate-item:hover .index-cate-item-pic {
    transform: scale(1.05);
}


/* index-ab */
.index-ab {
   
}

.index-ab-con {
    width: 6rem;
    padding-top: 1rem;
}

.index-ab-con h2 {
    font-size: .5rem;
    font-weight: 400;
    color: #000;
    line-height: 1.3;
    margin-bottom: .47rem;
    width: 90%;
}

.index-ab-con h2 em {
    color: var(--main-color);
     font-size: .5rem;
}

.index-ab-con p {
    font-size: .18rem;
    line-height: 1.8;
    opacity: 0.7;
    margin-bottom: 1rem;
    text-align: justify;
}

.index-ab-btn {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .18rem;
    border: 1px solid var(--main-color);
    transition: all 0.3s ease;
}

.index-ab-btn:hover {
   background-color: var(--main-color);
   color: #fff;
}

.index-ab-btn span {
    font-size: .18rem;
}

.index-ab-btn em {
    width: .48rem;
    height: .48rem;
    background-color: var(--main-color);
}

.index-ab-btn em i {
    font-size: .2rem;
    color: #fff;
}

/* index-news */
.index-news {
    padding: 1rem 0;
    background-color: var(--main-color-gray);
}

.index-news-top {
    margin-bottom: .5rem;
}

.index-news-tit h1 {
   
}

.index-news-more {
    padding: .16rem .4rem;
    background-color: var(--main-color);
    color: #fff;
    font-size: .18rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.index-news-more:hover {
    background-color: #e55c00;
    color: #fff;
    transform: translateY(-0.05px);
}

.index-news-con {
    gap: .2rem;
}

.index-news-item {
    padding: .7rem .5rem;
    background-color: #fff;
}

.index-news-item span {
    font-size: .3rem;
    color: #000;
    opacity: 1;
    margin-bottom: .6rem;
    display: block;
}
.index-news-item span em{
    font-size: .18rem;
    color:rgba(132, 132, 132, 1);
}

.index-news-item h6 {
    font-size: .24rem;
    font-weight: 400;
    color: #000;
    line-height: 1.4;
    margin-bottom: .75rem;
}

.index-news-item .txt {
    font-size: .18rem;
    color: #999;
    line-height: 1.6;
    opacity: 1;
    -webkit-line-clamp: 2;
}

.index-news-item:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
    box-shadow: 0 4px 15px rgba(255, 102, 0, 0.3);
    transform: translateY(-2px);
}

.index-news-item:hover span {
    color: rgba(255, 255, 255, 0.8);
}
.index-news-item:hover span em{
    color: #fff;
}
.index-news-item:hover h6 {
    color: #fff;
}

.index-news-item:hover .txt {
    color: rgba(255, 255, 255, 0.8);
}

/* index-after */
.index-after {
    padding: 1rem 0 0;
    background: linear-gradient(180deg, #f6f6f6 60%, RGBA(247, 231, 221, 1) 100%);
    margin-bottom: -1rem;
}
.index-after-con{
    
}

.index-after-tit h1 {
    margin-bottom: .5rem;
    font-size: .5rem;
}

.index-after-l {
    width: 5.8rem;
    z-index: 1;
}

.index-after-pt {
    background-color: #fff;
    padding: .26rem .35rem;
    margin-bottom: .26rem;
    gap: .26rem;
}

.index-after-pt-txt h3 {
    font-size: .31rem;
    font-weight: 600;
    color: #000;
    margin-bottom: .15rem;
}

.index-after-pt-txt p {
    font-size: .18rem;
    opacity: 1;
}

.index-after-pt-txt p span {
    color: #999;
    opacity: 1;
    padding-left: .1rem;
}

.index-after-pt-img {
    flex-shrink: 0;
}

.index-after-pt-img img {
    width: 1.15rem;
}

.index-after-sc {
    background-color: #fff;
    padding: .3rem;
    gap: .4rem;
}

.index-after-sc a {
    width: .42rem;
    height: .42rem;
    background-color: var(--main-color);
    border-radius: .08rem;
    transition: all 0.3s ease;
}

.index-after-sc a i {
    font-size: .3rem;
    color: #fff;
}

.index-after-sc a:hover {
    transform: translateY(-0.05rem);
}


.weixinqr {
    top: .5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.3rem;
    padding: .1rem;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.weixinqr img {
    width: 1rem;
    height: auto;
    margin: 0 auto;
}
.weixinqr p{
    font-size: .14rem;
}

.weixin-btn.active .weixinqr {
    opacity: 1;
    visibility: visible;
}

.index-after-m{
    width: 4.52rem;
}
.index-after-m img{
    width: 100%;
    height: auto;
}

.index-after-r {
    margin-left: .6rem;
}

.index-after-r>h4{
    font-size: .28rem;
    font-weight: 600;
    color: #000;
    margin-bottom: .3rem;
    margin-top: .2rem;
}


.index-after-r p {
    font-size: .18rem;
    opacity: 1;
    margin-bottom: .1rem;
}
.index-after-r div{
    margin-bottom: .15rem;
    align-items: baseline;
}
.index-after-r div h2 {
    font-size: .28rem;
    font-weight: 400;
    color: var(--main-color);
}
.index-after-r div em{
    font-size: .18rem;
    line-height: 1;
    margin-left: .1rem;
}

.index-after-r a {
    display: inline-flex;
    align-items: center;
    gap: .1rem;
    padding: .12rem .3rem;
    background-color: var(--main-color);
    color: #fff;
    text-decoration: none;
    margin-top: .2rem;
    transition: all 0.3s ease;
}

.index-after-r a i {
    font-size: .2rem;
    color: #fff;
}

.index-after-r a span {
    font-size: .16rem;
    color: #fff;
}

.index-after-r a:hover {
    background-color: #e55c00;
}
.index-after-img{
    z-index: 0;
    bottom: 1.2rem;
}
.index-after-img img{
    width: 14.4rem;
    margin: 0 auto;
    opacity: 0.05;
}

/*footer*/
footer {
    background-color: #fff;
    border-radius: .3rem .3rem 0 0;
    margin-top: -.3rem;
}

.footer-con {
    padding: 1rem 0 .5rem;
}

.footer-nav {
    padding-bottom: .4rem;
    border-bottom: 1px solid #eee;
}

.footer-nav-cols {
    flex: 1;
    gap: .3rem;
    flex-wrap: wrap;
}

.footer-nav-col {
    min-width: 1.2rem;
    max-width: 1.5rem;
}

.footer-nav-title {
    font-size: .2rem;
    font-weight: 500;
    color: #999;
    margin-bottom: .2rem;
    line-height: 1.4;
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin-bottom: .12rem;
}

.footer-nav-list li a {
    font-size: .18rem;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
    line-height: 1.4;
}

.footer-nav-list li a:hover {
    color: var(--main-color);
}

/* äºŒç»´ç åŒºåŸŸ */
.footer-qr {
    flex-shrink: 0;
    margin-left: .5rem;
}

.footer-qr-title {
    font-size: .2rem;
    font-weight: 500;
    color: #333;
    margin-bottom: .2rem;
    text-align: left;
}

.footer-qr-codes {
    gap: .3rem;
}

.footer-qr-item {
    text-align: center;
}

.footer-qr-item img {
    width: 1.16rem;
    height: 1.16rem;
    object-fit: contain;
    display: block;
    margin: 0 auto .08rem;
}

.footer-qr-item p {
    font-size: .15rem;
    color: #999;
    margin: 0;
}

/* åº•éƒ¨ç‰ˆæƒæ  */
.footer-bottom {
    padding-top: .2rem;
    align-items: center;
}

.footer-icp {
    font-size: .14rem;
    color: #999;
    margin: 0;
}
.footer-icp a{
    font-size: .14rem;
    color: #999;
}

.footer-links {
    display: flex;
    align-items: center;
    gap: .08rem;
}

.footer-links a {
    font-size: .14rem;
    color: #999;
    text-decoration: none;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--main-color);
}

.footer-links span {
    font-size: .12rem;
    color: #ccc;
}


.pf-nav {
    bottom: 2rem;
    right: .2rem;
    z-index: 999;
    background-color: #fff;
    border-radius: .12rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    padding: .1rem 0;
    gap: 0;
}

.pf-nav-item {
    position: relative;
}

.pf-nav-item + .pf-nav-item {
    border-top: 1px solid #f0f0f0;
}

.pf-nav-ico {
    width: .5rem;
    height: .5rem;
    margin: 0;
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
}

.pf-nav-ico span {
    color: var(--main-color);
    font-size: .24rem;
    line-height: 1;
}

.pf-nav-item:last-child .pf-nav-ico span {
    color: var(--main-color);
}

.pf-nav-txt {
    background-color: #fff;
    padding: 0.0781rem;
    right: 0.35rem;
    width: 1.2rem;
    z-index: 2;
}

.pf-nav-txt p {
    font-size: 0.0833rem;
    text-align: center;
}

/* pf-nav popup */
.pf-nav-popup {
    background-color: #fff;
    padding: .12rem .16rem;
    right: .65rem;
    bottom: .05rem;
    width: 2.2rem;
    z-index: 2;
    opacity: 0;
    visibility: hidden;
    transform: translateX(.1rem);
    transition: all 0.3s ease;
    pointer-events: none;
}

.pf-nav-popup p {
    font-size: .15rem;
    color: #333;
    opacity: 1;
    text-align: center;
    word-break: break-all;
}

.pf-nav-item.active .pf-nav-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

/*about*/
/* ab-top: Hero banner */
.ab-top {
    width: 100%;
    position: relative;
}

.ab-top-pic {
    padding-bottom: 7.62rem;
}

/* topnav */
.top-nav-list {
    gap: .17rem;
    padding-bottom: .6rem;
}

.top-nav-item {
    padding: .18rem .3rem;
    font-size: .2rem;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.2);
    text-decoration: none;
    transition: all 0.3s ease;
    line-height: 1;
}

.top-nav-item:hover,
.top-nav-item.on {
    background-color: #fff;
    color: var(--main-color);
}

/* ab1: Company intro */
.ab1 {
    padding: 1.1rem 0;
    background-color: #fff;
    margin-top: -.3rem;
    border-radius: .3rem .3rem 0 0;
}


.ab1-con-l {
    width: 6.1rem;
}

.ab-con h1 {
    font-size: .55rem;
    font-weight: 400;
    color: #000;
    line-height: 1.4;
}

.ab-con h1 em {
    color: var(--main-color);
    font-size: .55rem;
    font-weight: 400;
    line-height: 1.4;
}
.ab-con p {
    font-size: .2rem;
    opacity: 0.7;
    margin-bottom: .15rem;
    text-align: justify;
}
.ab1-con-l h1{
    margin-bottom: .4rem;
}

.ab1-con-r {
    width: 5.66rem;
}

.ab1-con-num {
    width: 48%;
}
.ab1-con-num:first-child {
   width: 100%;
   margin-bottom: .8rem;
}
.ab1-con-num h1 {
    font-size: .8rem;
    font-weight: 500;
    color: var(--main-color);
    line-height: 1;
    margin-bottom: .3rem;
    padding-bottom: .26rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    width: 100%;
}

.ab1-con-num p {
    font-size: .2rem;
}

/* ab2: Video section */

.ab2-pic {
   padding-bottom: 5rem;
}
.ab2 .index-ab-btn{
    border: 1px solid #fff;
}
.ab2 .index-ab-btn span{
    color: #fff;
}
.ab2 .index-ab-btn:hover {
    border: 1px solid var(--main-color);
}

/* ab3: Factory section */
.ab3 {
    padding: 1.2rem 0  .97rem;
    background-color: transparent;
    z-index: 1;
}

.ab3-top {
    margin-bottom: .6rem;
}

.ab3-top h1 {
    width: 5rem;
}

.ab3-top > div {
    width: 6.18rem;
}


.ab3-con-l {
    width: 4.34rem;
    border-radius: 1.47rem;
    padding-bottom: 2.3rem;
    background-size: 125%;
}
.ab3-con-r {
    width: 8.46rem;
    border-radius: 2rem;
    padding-bottom: 4rem;
}

.ab3-con-l img,
.ab3-con-r img {
    width: 100%;
    height: auto;
    display: block;
}

/* ab4: Brand story */
.ab4 {
    background-image: url(../images/ab4-bgs.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    padding: 5rem 0 3rem;
    margin-top: -5rem;
    z-index: 0;
}

.ab4-con {
    padding-top: 1.2rem;
}
.ab4-logo{
  z-index: 0;
}

.ab4-con-l {
    width: 5rem;
}

.ab4-con-l h1 {
    margin-bottom: .6rem;
}
.ab4-con-l p{
    line-height: 1.8;
}

.ab4-con-r {
    width: 6.74rem;
}

.ab4-con-r img {
    width: 100%;
    height: auto;
    display: block;
}

/* ab5: Timeline/Awards */
.ab5 {
    background-color: transparent;
    margin-top: -3rem;
    z-index: 1;
    padding: 1.2rem 0 1.7rem;
}

.ab5-con {
   margin-bottom: .8rem;
   
}

.ab5-con-l {
    width: 5.48rem;
}

.ab5-con-l  span {
    padding: .18rem .38rem;
    border: 1px solid var(--main-color);
    color: var(--main-color);
    font-size: .45rem;
    font-weight: 600;
    margin-bottom: .5rem;
    line-height: 1;
}

.ab5-con-l h3 {
    font-size: .36rem;
    font-weight: 400;
    color: #000;
    line-height: 1.6;
    margin-bottom: .35rem;
}

.ab5-con-l p {
    font-size: .18rem;
    line-height: 1.6;
}

.ab5-con-r {
    width: 6.33rem;
    border-radius: 1.78rem;
}
.ab5-con-r-pic{
   padding-bottom: 3.56rem;
}

.ab5-con-b {
    position: relative;
    padding: 0 .5rem;
}

.ab5-con-bar-btn {
    width: .3rem;
    height: .3rem;
    background-color: #fff;
    transition: all 0.3s ease;
    flex-shrink: 0;
    border:1px solid rgba(0, 0, 0, .1)
}

.ab5-con-bar-btn i{
    font-size: .16rem;
    color: #333;
}

.ab5-con-bar-btn:hover {
    background-color: var(--main-color);
     border:1px solid var(--main-color);
}

.ab5-con-bar-btn:hover i {
    color: #fff;
}
.ab5-con-swiper{
    margin: 0 .2rem;
    padding-top: 0.05rem;
}
.ab5-con-swiper::before{
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    position: absolute;
    top: 0.15rem;
    left: 0;
    border-top: 1px dashed rgba(0, 0, 0, .4);
}

.ab5-con-item {
    width: 100%;
    height: 1.1rem;
}
.ab5-con-item-point{
    width: .2rem;
    height: .2rem;
    background-color: #fff;
    border:1px solid rgba(0, 0, 0, .4);
}
.ab5-con-item-icon i{
    color: var(--main-color);
    font-size: .3rem;
    line-height: 1;
    display: none;
    background-color: #fff;
}
.ab5-con-item span{
    background-color: transparent;
    color: #000;
    opacity: 0.7;
    padding: .14rem .3rem;
    font-size: .18rem;
}
.ab5-con-item span:hover{
    background-color: var(--main-color);
    color: #fff;
}
.ab5-con-swiper .swiper-slide-active .ab5-con-item-icon i{
    display: block;
}
.ab5-con-swiper .swiper-slide-active .ab5-con-item-point{
    display: none;
}
.ab5-con-swiper .swiper-slide-active .ab5-con-item span{
    background-color: var(--main-color);
    color: #fff;
}





/* ab6: Project cases */
.ab6 {
    padding: 0 0 1.2rem;
}

.ab6-top {
    margin-bottom: .7rem;
}

.ab6-top p {
   width: 5.2rem;
}

.ab6-swiper {
    width: 100%;
}

.ab6-swiper .swiper-slide {
    width: 49%;
}

.ab6-item {
    position: relative;
    overflow: hidden;
}

.ab6-item-pic {
    padding-bottom: 4rem;
}

.ab6-item:hover .ab6-item-pic {
    transform: scale(1.05);
}

.ab6-item-tit {
    padding: .27rem;
    background: linear-gradient(0deg, rgba(0,0,0,0.6) 0%, transparent 100%);
    color: #fff;
    font-size: .22rem;
    font-weight: 500;
}

.ab6-fy .fy-btn{
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}
.ab6-prev{
    left: .2rem;
}
.ab6-next {
    right: .2rem;
}

.ab6-prev:hover,
.ab6-next:hover {
    background-color: var(--main-color);
}

.ab6-prev:hover i,
.ab6-next:hover i {
    color: #fff;
}

/* ab7: Manufacturing videos */
.ab7 {
  padding: 0.5rem 0  2rem;
   background: linear-gradient(180deg, #fff 60%, RGBA(247, 231, 221, 1) 100%);
}


.ab7-swiper {
    width: 90%;
    overflow: unset;
}

.ab7-swiper .swiper-slide {
    width: 32%;
    
}

.ab7-item-pic{
    padding-bottom: 5.7rem;
}


.ab7-item-btn {
    width: .7rem;
    height: .7rem;
    background-color: rgba(255, 255, 255, 0.9);
    bottom: .2rem;
    right: .2rem;
}

.ab7-item-btn i {
    font-size: .3rem;
    color: var(--main-color);
}

.ab7-item-btn:hover {
    background-color: var(--main-color);
}

.ab7-item-btn:hover i {
    color: #fff;
}


/*join*/
.j-top-pic {
    padding-bottom: 8rem;
}

.j-top-txt {
    top: 2rem;
    gap: .2rem;
}

.j-top-txt h2 {
    font-size: .48rem;
    font-weight: 500;
    color: #fff;
    line-height: 1;
}

.j-top-txt p {
    font-size: .24rem;
    color: rgba(255, 255, 255, 1);
    opacity: 1;
}

/* j-ab1: ä¸æ­¢äºŽåˆ¶é€  */
.j-ab1 {
    padding: 1.1rem 0;
    background-color: #fff;
    margin-top: -.3rem;
    border-radius: .3rem .3rem 0 0;
}


.j-ab1-l {
    margin-bottom: .6rem;
}

.j-ab1-l h1 {
    width: 5rem;
}

.j-ab1-l p{
    width: 6.3rem;
}


.j-ab1-cards {
    gap: .1rem;
}

.j-ab1-card-pic {
    padding-bottom: 90%;
}

.j-ab1-card-txt {
    padding: .5rem;
    bottom: 0;
}

.j-ab1-card-txt h4 {
    font-size: .28rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: .2rem;
}

.j-ab1-card-txt p {
    font-size: .18rem;
     color: #fff;
}

/* j-ab2: æž„ç­‘å…±èµ¢ç”Ÿæ€ */
.j-ab2 {
    padding: 1rem 0 0;
    background-color: transparent;
    z-index: 1;
}

.j-ab2-top {
    margin-bottom: .8rem;
}

.j-ab2-top h1 {
    width: 5rem;
}

.j-ab2-top p {
    width: 6.18rem; 
}

.j-ab2-cards {
    gap: .25rem;
}

.j-ab2-card {
    padding: .9rem .4rem;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
}

.j-ab2-card h4 {
    font-size: .28rem;
    font-weight: 600;
    color: #000;
    margin-bottom: .3rem;
}

.j-ab2-card p {
    font-size: .18rem;
}

.j-ab2-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-0.03rem);
}

/* j-ab3: è¿œè§è€…çš„å…±é¸£ */
.j-ab3 {
    background-image: url(../images/ab4-bgs.jpg);
    background-repeat: no-repeat;
    background-size: 100%;
    padding: 5rem 0  2rem;
    margin-top: -5rem;
    z-index: 0;
}

.j-ab3-top {
    padding-top: 1rem;
    margin-bottom: .6rem;
    gap: .8rem;
}

.j-ab3-top-l h1{
    margin-bottom: .5rem;
}

.j-ab3-top-l ol {
    padding-left: 0;
    list-style: none;
}

.j-ab3-top-l ol li {
    font-size: .2rem;
    opacity: 0.7;
    line-height: 2;
    text-align: justify;
}


.j-ab3-top-r img {
    width: 100%;
    height: auto;
    display: block;
}

.j-ab3-cards {
    gap: .4rem;
}

.j-ab3-card {
    padding: .4rem;
    background-color: #fff;
    transition: all 0.3s ease;
}

.j-ab3-card span {
    font-size: .5rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.1);
    display: block;
    margin-bottom: .15rem;
    line-height: 1;
}

.j-ab3-card h4 {
    font-size: .3rem;
    font-weight: 400;
    color: #000;
    margin-bottom: .3rem;
}

.j-ab3-card p {
    font-size: .18rem;
}

.j-ab3-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-0.03rem);
}

/* j-ab4: æ‰€è§å³æ‰€å¾—çš„å“è´¨æ‰¿è¯º */
.j-ab4 {
    background-color: #fff;
}

.j-ab4-con {
    margin-bottom: .7rem;
}

.j-ab4-l {
    width: 5rem;
}

.j-ab4-r {
    width: 5.5rem;
}


.j-ab4-swiper {
    width: 90%;
    margin: 0;
    overflow: unset;
}

.j-ab4-swiper .swiper-slide {
    width: 45%;
    margin-right: .3rem;
}

.j-ab4-item-pic {
    padding-bottom: 55%;
}

.j-ab4-item:hover .j-ab4-item-pic {
    transform: scale(1.05);
}

/* j-ab5: å¼€å¯æ‚¨çš„é˜¿æ³¢ç½—å•†ä¸šç‰ˆå›¾ */
.j-ab5 {
    padding: 1.2rem 0 1.5rem;
    background: linear-gradient(180deg, #fff 10%, RGBA(247, 231, 221, 1) 100%);
    z-index: 1;
} 

.j-ab5-con {
    gap: 1.4rem;
}

.j-ab5-l {
   
}

.j-ab5-l h1 {
    margin-bottom: .4rem;
}

.j-ab5-l p {
    margin-bottom: .15rem;
    text-align: justify;
}

.j-ab5-r {
   
}

.j-ab5-form {
    width: 100%;
    gap: .15rem;
}

.j-ab5-form-item {
    width: 100%;
}

.j-ab5-form-item input,
.j-ab5-form-item textarea {
    width: 100%;
    padding: .18rem .2rem;
    font-size: .18rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: .1rem;
    background-color: #fff;
    color: #000;
    outline: none;
    transition: border-color 0.3s ease;
}

.j-ab5-form-item input::placeholder,
.j-ab5-form-item textarea::placeholder {
    color: #999;
}

.j-ab5-form-item input:focus,
.j-ab5-form-item textarea:focus {
    border-color: var(--main-color);
}

.j-ab5-form-item textarea {
    resize: none;
    min-height: 1.2rem;
}

.j-ab5-btn {
    width: 100%;
    padding: .2rem;
    font-size: .20rem;
    font-weight: 500;
    color: #fff;
    background-color: var(--main-color);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: .1rem;
}

.j-ab5-btn:hover {
    background-color: #e55c00;
}

.j-ab5-btn.disabled {
    cursor: not-allowed;
}




/*blog*/
.news {
    margin: 1.5rem 0 2rem;
}

.news-con {
    gap: .3rem;
    margin-top: .6rem;
}

.news-item {
    background-color: var(--main-color-gray);
    transition: all 0.3s ease;
}

.news-item-pic {
    padding-bottom: 2.8rem;
    position: relative;
}

.news-item-txt {
    padding: .3rem;
}

.news-item-txt em {
    opacity: 0.6;
    font-size: .14rem;
    margin-bottom: .12rem;
    display: block;
}

.news-item-txt h6 {
    font-size: .22rem;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: .12rem;
    transition: color 0.3s ease;
}

.news-item-txt p {
    font-size: .14rem;
    line-height: 1.6;
    opacity: 0.7;
    -webkit-line-clamp: 2;
}

.news-item-ico {
    width: .45rem;
    height: .45rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin-top: .2rem;
    transition: all 0.3s ease;
}

.news-item-ico span {
    font-size: .18rem;
    transition: all 0.3s ease;
}

.news-item:hover {
    transform: translateY(-0.05rem);
}

.news-item:hover .news-item-txt h6 {
    color: var(--main-color);
}

.news-item:hover .news-item-ico {
    border-color: var(--main-color);
    background-color: var(--main-color);
}

.news-item:hover .news-item-ico span {
    color: #fff;
}

.news-item .a-box i {
    background-color: var(--main-color);
    color: #fff;
    width: .5rem;
    height: .5rem;
    font-size: .23rem;
    opacity: 0;
    transform: translateY(100%);
    transition: all ease-in-out 0.3s;
    margin: .15rem;
}

.news-item:hover .a-box i {
    transform: translateX(0);
    opacity: 1;
}

/*news category nav*/
.ab-top-bg {
    width: 100%;
    padding-bottom: 4.5rem;
    background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 50%, #1a1a1a 100%);
}

.news-top-r {
    background-color: var(--main-color-gray);
    padding: .3rem 0;
}

.news-top-r-list {
    gap: .12rem;
    flex-wrap: wrap;
}

.news-top-r-item {
    color: #000;
    font-size: .16rem;
    padding: .12rem .28rem;
    transition: all 0.3s ease;
    display: block;
}

.news-top-r-item:hover,
.news-top-r-item.on {
    background-color: var(--main-color);
    color: #fff;
}

.show-top {
    padding-bottom: 3.2188rem;
}

.show-top-con {
    padding-bottom: .6927rem;
}

.show-top-con-txt {
    margin-bottom: 0.2083rem;
}

.show-top-con-txt a,
.show-top-con-txt em {
    color: #fff;
    opacity: 0.7;
    margin-right: .026rem;
}

.show-top-con-txt a:hover {
    opacity: 1;
}

.show-top-con h1 {
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
}

.news-show-top {
    background-color: #ccc;
    padding: 1.3rem 0 1rem;
}

.news-show-top .show-top-con {
    padding-bottom: 0;
}

.news-show-top .show-top-con-txt a,
.news-show-top .show-top-con-txt em {
    color: #000;
}

.news-show-top .show-top-con h1 {
    color: #000;
    font-size: .44rem;
}

.news-show-con {
    padding: 0.4688rem 0;
}

.news-show-con-l {
    width: 70%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: .3rem;
}

.news-show-con-l-con p {
    margin-bottom: .15rem;
    opacity: 1;
    font-size: .18rem;
}

.news-show-con-l-con img {
    display: block;
    width: auto;
    margin: 0 auto .15rem;
}
.news-show-con-l-con h1,
.news-show-con-l-con h2,
.news-show-con-l-con h3 {
    font-size: .25rem;
    font-weight: 600;
    margin-bottom: .15rem;
}



.news-show-con-r {
    width: 25%;
    padding: .3rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.news-show-con-r-list {
    margin-top: .3rem;
}

.news-show-con-r-list .index-show-item {
    margin-bottom: .3rem;
    border-radius: .1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.news-show-con-r-list .index-show-pic {
    padding-bottom: 64%;
    margin-bottom: .1042rem;
    overflow: hidden;
    border-radius: .1rem;
}

.news-show-con-r-list .index-show-pic {
    background-size: 100% 100%;
    transition: background-size 0.5s ease;
}

.news-show-con-r-list .index-show-item:hover {
    transform: translateY(-0.03rem);
}

.news-show-con-r-list .index-show-item:hover .index-show-pic {
    background-size: 110% 110%;
}

.news-show-con-r-list .index-show-item:hover p {
    color: var(--main-color);
}

/*paginationÂ*/
.nodata {
    min-height: 60vh;
    margin: 0 auto;
}

.nodata-text h4 {
    opacity: 0.78;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.5rem;
}

.pagination li a,
.pagination li span {
    width: .35rem;
    height: .35rem;
    margin: 0 .05rem;
    background-color: var(--main-color-gray);
    color: #000;
    display: flex;
    font-size: .18rem;
    border-radius: .05rem;
    justify-content: center;
    align-items: center;
    line-height: 1;
}

.pagination li a:hover,
.pagination li span:hover,
.pagination li.active a,
.pagination li.active span {
    background-color: var(--main-color);
    color: #fff;
}

.pagination li.disabled a,
.pagination li.disabled span {
    background-color: #ccc;
    cursor: no-drop;
    color: #666;
}

.pagination li.disabled:hover a,
.pagination li.disabled:hover span {
    color: #666;
    background-color: #ccc;
}


/*contact*/
/* ca-top: Hero banner */
.ca-top-pic {
    padding-bottom: 7.62rem;
}

.ca-top-txt {
    top: 2.5rem;
    gap: .2rem;
}

.ca-top-txt h2 {
    font-size: .50rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.4;
}

.ca-top-txt p {
    font-size: .20rem;
    color: rgba(255, 255, 255, 0.8);
    opacity: 1;
}

/* ca-info: è”ç³»ä¿¡æ¯ */
.ca-info {
    padding: 1.1rem 0;
    background-color: #fff;
    margin-top: -.3rem;
    border-radius: .3rem .3rem 0 0;
}

.ca-info-con {
    gap: 1rem;
}

.ca-info-l {
    width: 45%;
}

.ca-info-l h1 {
    font-size: .42rem;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
    margin-bottom: .5rem;
}

.ca-info-list {
    gap: .35rem;
}

.ca-info-item {
    gap: .2rem;
}

.ca-info-ico {
    width: .56rem;
    height: .56rem;
    background-color: var(--main-color);
    flex-shrink: 0;
}

.ca-info-ico i {
    font-size: .26rem;
    color: #fff;
    line-height: 1;
}

.ca-info-txt {
    gap: .05rem;
}

.ca-info-txt span {
    font-size: .15rem;
    color: #999;
    opacity: 1;
}

.ca-info-txt p {
    font-size: .20rem;
    color: #000;
    opacity: 1;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0rem;
}

/* ç¤¾äº¤åª’ä½“ */
.ca-social {
    gap: .15rem;
    margin-top: .3rem;
}

.ca-social a {
    width: .45rem;
    height: .45rem;
    background-color: var(--main-color);
    border-radius: .1rem;
    transition: all 0.3s ease;
}

.ca-social a i {
    font-size: .22rem;
    color: #fff;
}

.ca-social a:hover {
    transform: translateY(-0.05rem);
    background-color: #e55c00;
}

/* å¾®ä¿¡äºŒç»´ç å¼¹å‡º */
.ca-weixinqr {
    top: .5rem;
    left: 50%;
    transform: translateX(-50%);
    width: 1.3rem;
    padding: .1rem;
    background: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.ca-weixinqr img {
    width: 1rem;
    height: auto;
    margin: 0 auto;
}

.ca-weixinqr p {
    font-size: .14rem;
}

.weixin-btn.active .ca-weixinqr,
.ca-social a.weixin-btn:hover .ca-weixinqr {
    opacity: 1;
    visibility: visible;
}

/* äºŒç»´ç  */
.ca-info-r {
    width: 45%;
    gap: .4rem;
}

.ca-info-r h3 {
    font-size: .28rem;
    font-weight: 500;
    color: #000;
}

.ca-qr {
    gap: .3rem;
}

.ca-qr-item {
    gap: .15rem;
}

.ca-qr-pic {
    width: 1.6rem;
    height: 1.6rem;
    overflow: hidden;
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.ca-qr-pic img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.ca-qr-item p {
    font-size: .16rem;
    color: #666;
    opacity: 1;
    text-align: center;
}

/* ca-form: ç•™è¨€è¡¨å• */
.ca-form {
    padding: 1rem 0 1.5rem;
    background: linear-gradient(180deg, #fff 60%, RGBA(247, 231, 221, 1) 100%);
    margin-top: 0;
    z-index: 1;
}

.ca-form-con {
    gap: .5rem;
}

.ca-form-l h1 {
    font-size: .50rem;
    font-weight: 400;
    color: #000;
    line-height: 1.4;
    margin-bottom: .4rem;
}

.ca-form-l p {
    font-size: .18rem;
    opacity: 0.7;
    line-height: 1.8;
    margin-bottom: .15rem;
    text-align: justify;
}

.ca-form-r {
    width: 100%;
}

.ca-form-box {
    width: 100%;
    gap: .15rem;
}

.ca-form-row {
    gap: .15rem;
}

.ca-form-item {
    width: 100%;
}

.ca-form-item input,
.ca-form-item textarea {
    width: 100%;
    padding: .18rem .2rem;
    font-size: .18rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: .1rem;
    background-color: #fff;
    color: #000;
    outline: none;
    transition: border-color 0.3s ease;
}

.ca-form-item input::placeholder,
.ca-form-item textarea::placeholder {
    color: #999;
}

.ca-form-item input:focus,
.ca-form-item textarea:focus {
    border-color: var(--main-color);
}

.ca-form-item textarea {
    resize: none;
    min-height: 1.4rem;
}

.ca-form-btn {
    width: 100%;
    padding: .2rem;
    font-size: .20rem;
    font-weight: 500;
    color: #fff;
    background-color: var(--main-color);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: .1rem;
}

.ca-form-btn:hover {
    background-color: #e55c00;
}

.ca-form-btn.disabled {
    cursor: not-allowed;
}

/*product*/

/* é€šç”¨åŒºå—æ ‡é¢˜ */

.pd-room,
.pd-cate,
.pd-book {
    padding: .7rem 0;
    background-color: var(--main-color-gray);
}
.pd-room{
    padding-top: 1.67rem;
}

.pd-sec-head {
    margin-bottom: .43rem;
}

.pd-sec-head h1,
.pd-sec-head h1 em {
    font-size: .28rem;
    font-weight: 600;
    color: #111;
    line-height: 1.4;
}
.pd-sec-head h1 em{
    color: #555555;
}

/* ç¬¬ä¸€éƒ¨åˆ†ï¼šäº§å“å¥—é—´ */
.pd-room-wrap {
    width: 100%;
}

.pd-room-swiper {
    width: 100%;
    overflow: unset;
    margin: 0;
}

.pd-room-swiper .swiper-slide {
    height: auto;
}

.pd-room-item {
    width: 100%;
    padding-bottom: 5rem;
}

.pd-room-item:hover {
    transform: scale(1.02);
}

/* è½®æ’­å¯¼èˆªæŒ‰é’®ï¼ˆç½®äºŽ .swiper å¤–éƒ¨ï¼Œé¿å…è¢« overflow è£åˆ‡ï¼‰ */
.pd-room-next,
.pd-pro-next {
    top: 50%;
    transform: translateY(-50%);
    right: .3rem;
    width: .56rem;
    height: .56rem;
    background-color: #fff;
    box-shadow: 0 .04rem .16rem rgba(0, 0, 0, 0.12);
    z-index: 2;
    transition: all .3s ease;
}

.pd-room-next i,
.pd-pro-next i {
    font-size: .22rem;
    color: #333;
    line-height: 1;
}

.pd-room-next:hover,
.pd-pro-next:hover {
    background-color: var(--main-color);
}

.pd-room-next:hover i,
.pd-pro-next:hover i {
    color: #fff;
}

/* ç¬¬äºŒéƒ¨åˆ†ï¼šä¸€çº§åˆ†ç±» + äº§å“åˆ—è¡¨ */
.pd-cate-top {
    margin-bottom: .5rem;
}

.pd-cate-title,
.pd-cate-title em {
    font-size: .28rem;
    font-weight: 700;
    color: #111;
    line-height: 1.4;
}

.pd-cate-title em {
     color: #555555;
}

.pd-more {
    gap: .12rem;
}

.pd-more span {
    font-size: .15rem;
    color: #999;
    opacity: 1;
}

.pd-more em {
    width: .34rem;
    height: .34rem;
    background-color: var(--main-color);
}

.pd-more em i {
    font-size: .16rem;
    color: #fff;
    line-height: 1;
}

.pd-more:hover span {
    color: var(--main-color);
}

.pd-cate-wrap {
    width: 100%;
}

.pd-pro-swiper {
    width: 100%;
    overflow: unset;
}

.pd-pro-card {

    padding: .4rem .3rem;
    background-color: #fff;
    gap: .1rem;
    transition: all .3s ease;
}

.pd-pro-card:hover {
    box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.1);
    transform: translateY(-.04rem);
}

.pd-pro-head {
    gap: .1rem;
}

.pd-pro-head h3 {
    font-size: .26rem;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}

.pd-pro-head p {
    font-size: .16rem;
    color: #999;
    opacity: 1;
}

.pd-hot {
    align-self: flex-start;
    margin-top: .06rem;
    padding: .05rem .2rem;
    font-size: .16rem;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    line-height: 1;
}

.pd-pro-pic {
    width: 100%;
    padding-bottom: 100%;
    margin-top: .2rem;
}

/* ç¬¬ä¸‰éƒ¨åˆ†ï¼šäº§å“æ‰‹å†Œä¸‹è½½ */
.pd-book-card {
   width: 5rem;
}

.pd-book-label {
    font-size: .16rem;
    color: #999;
    opacity: 1;
    margin-bottom: .2rem;
}

.pd-book-card h3 {
    font-size: .26rem;
    font-weight: 600;
    color: #111;
    margin: .1rem 0 .4rem;
}

.pd-book-pic {
    position: relative;
    width: 100%;
    padding-bottom: 100%;
}

.pd-book-dl {
    position: absolute;
    right: .24rem;
    bottom: .24rem;
    width: .6rem;
    height: .6rem;
    background-color: var(--main-color);
    box-shadow: 0 .04rem .16rem rgba(0, 0, 0, 0.2);
    transition: all .3s ease;
}

.pd-book-dl i {
    font-size: .26rem;
    color: #fff;
    line-height: 1;
}

.pd-book-dl:hover {
    transform: translateY(-.04rem);
}

.pd-book-info{
    padding: .4rem;
}



/*product list*/

/* ç¬¬ä¸€éƒ¨åˆ†ï¼šå½“å‰åˆ†ç±» + æè¿° + å›ºå®šåˆ†ç±»å›¾æ ‡ */
.pl-top {
    padding: 1.2rem 0 .34rem;
    background-color: var(--main-color-gray);
}

.pl-top-l {
    max-width: 9rem;
}

.pl-label {
    font-size: .18rem;
    font-weight: 600;
    color: var(--main-color);
    margin-bottom: .18rem;
}

.pl-title,
.pl-title em {
    font-size: .42rem;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}

.pl-title em {
    display: block;
}

.pl-top-r {
    gap: .7rem;
}

.pl-icon {
    gap: 0;
}

.pl-icon-img {
    width: .72rem;
    height: .72rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all .3s ease;
}

.pl-icon em {
    font-size: .16rem;
    color: #333;
}

.pl-icon:hover em {
    color: var(--main-color);
}

/* ç¬¬äºŒéƒ¨åˆ†ï¼šåŒçº§ / å­çº§åˆ†ç±»åˆ‡æ¢ */
.pl-tabs {
    padding: .3rem 0 .5rem;
    background-color: var(--main-color-gray);
}

.pl-tabs .con {
    gap: .3rem;
    flex-wrap: wrap;
}

.pl-tab {
    padding: .16rem .42rem;
    font-size: .16rem;
    color: #333;
    background-color: #fff;
    border-radius: .5rem;
    transition: all .3s ease;
}

.pl-tab:hover {
    color: var(--main-color);
}

.pl-tab.on {
    background-color: var(--main-color);
    color: #fff;
}

/* ç¬¬ä¸‰éƒ¨åˆ†ï¼šäº§å“åˆ†é¡µåˆ—è¡¨ */
.pl-list {
    padding: .1rem 0 .8rem;
    background-color: var(--main-color-gray);
}

.pl-grid {
    margin: 0 -.15rem;
}

.pl-grid-cell {
    width: 25%;
    padding: 0 .15rem .3rem;
    box-sizing: border-box;
}

.pl-empty {
    padding: 1.5rem 0;
    font-size: .18rem;
    color: #999;
}

/*room*/

/* é¡¶éƒ¨æ ‡é¢˜ */
.rm-top {
    padding: 1.2rem 0 .5rem;
    background-color: var(--main-color-gray);
}

.rm-label {
    font-size: .18rem;
    font-weight: 500;
    color: var(--main-color);
    margin-bottom: .18rem;
}

.rm-title {
    font-size: .42rem;
    font-weight: 600;
    color: #111;
    line-height: 1.3;
}

/* å¥—é—´ä¸¤åˆ—ç½‘æ ¼ */
.rm-list {
    padding: .2rem 0 .8rem;
    background-color: var(--main-color-gray);
}

.rm-grid {
    margin: 0 -.15rem;
}

.rm-cell {
    display: block;
    width: 50%;
    padding: 0 .15rem .3rem;
    box-sizing: border-box;
}

.rm-card {
    position: relative;
    width: 100%;
    padding-bottom: 58%;
    background-size: cover;
    background-position: center;
    transition: all .4s ease;
}

.rm-cell:hover .rm-card {
    transform: scale(1.02);
}

/* åº•éƒ¨æ¸å˜é®ç½©ï¼ˆhover æ˜¾çŽ°ï¼‰ */
.rm-mask {
    height: 100%;
    background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 48%);
    opacity: 0;
    transition: opacity .4s ease;
}

.rm-cell:hover .rm-mask {
    opacity: 1;
}

/* æ ‡é¢˜ä¸Žæ ‡ç­¾ */
.rm-info {
    padding: 0 0 .3rem .3rem;
    opacity: 0;
    transform: translateY(.15rem);
    transition: all .4s ease;
}

.rm-cell:hover .rm-info {
    opacity: 1;
    transform: translateY(0);
}

.rm-tag {
    display: inline-block;
    padding: .04rem .16rem;
    font-size: .14rem;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    line-height: 1.4;
    margin-bottom: .12rem;
}

.rm-name {
    font-size: .26rem;
    font-weight: 600;
    color: #fff;
}

/*pro_show*/

/* ç¬¬ä¸€éƒ¨åˆ†ï¼šä¸»å›¾ + ä¿¡æ¯ */
.ps-top {
    padding: 1.2rem 0 .6rem;
    background-color: #fff;
}

.ps-top .con {
    align-items: flex-start;
    gap: 1rem;
}

/* å·¦ä¾§ä¸»å›¾è½®æ’­ */
.ps-gallery {
    width: 44%;
    flex: 0 0 44%;
    flex-shrink: 0;
}

.ps-main-swiper {
    width: 100%;
    overflow: hidden;
    border-radius: .12rem;
}

.ps-main-pic {
    width: 100%;
    padding-bottom: 100%;
    background-size: cover;
    background-position: center;
}

.ps-main-swiper .swiper-pagination {
    bottom: .14rem;
}

.ps-main-swiper .swiper-pagination-bullet {
    width: .1rem;
    height: .1rem;
    background-color: #fff;
    opacity: .6;
}

.ps-main-swiper .swiper-pagination-bullet-active {
    background-color: var(--main-color);
    opacity: 1;
}

/* å³ä¾§ä¿¡æ¯ */
.ps-info {
    width: calc(56% - 1rem);
    flex: 0 0 auto;
    flex-shrink: 0;
    min-width: 0;
}

.ps-catelabel {
    font-size: .18rem;
    font-weight: 600;
    color: var(--main-color);
    margin-bottom: .16rem;
}

.ps-title {
    font-size: .4rem;
    font-weight: 700;
    color: #111;
    line-height: 1.3;
}

.ps-sub {
    font-size: .28rem;
    font-weight: 500;
    color: #111;
    line-height: 1.3;
    margin-bottom: .3rem;
    margin-top: 0.1rem;
}

.ps-intro {
    font-size: .16rem;
    color: #888;
    line-height: 1.9;
    margin-bottom: .5rem;
}

/* ç¼©ç•¥å›¾è½®æ’­ */
.ps-thumbs-wrap {
    width: 100%;
    margin-bottom: .5rem;
}

.ps-thumbs-swiper {
    width: 100%;
    overflow: hidden;
}
.ps-thumbs-swiper .swiper-slide {
    width: 25%;
}
.ps-thumb {
    width: 100%;
    padding-bottom: 100%;
    background-size: cover;
    background-position: center;
    border: 2px solid transparent;
    border-radius: .08rem;
    cursor: pointer;
    transition: all .3s ease;
}

.ps-thumbs-swiper .swiper-slide-thumb-active .ps-thumb {
    border-color: var(--main-color);
}

/* è´­ä¹°æ–¹å¼ */
.ps-buy-label {
    font-size: .16rem;
    font-weight: 600;
    color: #333;
    margin-bottom: .2rem;
}

.ps-buy-list {
    gap: .2rem;
    flex-wrap: wrap;
}

.ps-buy-btn {
    gap: .1rem;
    padding: .12rem .28rem;
    font-size: .14rem;
    color: #fff;
    background-color: var(--main-color);
    border-radius: .06rem;
    transition: all .3s ease;
}

.ps-buy-btn i {
    font-size: .18rem;
    color: #fff;
    line-height: 1;
}

.ps-buy-btn:hover {
    background-color: #e65c00;
    color: #fff;
}

/* ç¬¬äºŒéƒ¨åˆ†ï¼šè¯¦æƒ…å›¾ + ç›¸å…³äº§å“ */
.ps-detail {
    padding: .4rem 0 .8rem;
    background-color: var(--main-color-gray);
}

.ps-detail .con {
    align-items: flex-start;
    gap: 1.3rem;
}

.ps-pics {
    flex: 0 0 60%;
}

.ps-pic {
    width: 100%;
    height: auto;
    display: block;
    margin-bottom: .2rem;
}

.ps-relate {
    flex: 1;
    min-width: 0;
}

.ps-relate-title {
    font-size: .26rem;
    font-weight: 700;
    color: #111;
    margin-bottom: .4rem;
}

.ps-relate-list {
    gap: .3rem;
}

.ps-relate-cell {
    width: 100%;
}

.ps-empty {
    padding: 2rem 0;
    color: #999;
}








.headcart {
    position: absolute;
    right: 0.1458rem;
    top: .3444rem;
    width: 2.2135rem;
    padding: .1302rem;
    background-color: #fff;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, .15);
    border-radius: .1042rem;
    z-index: 99;
}

.headcart::after {
    content: "";
    position: absolute;
    right: .151rem;
    top: -0.125rem;
    display: block;
    border-bottom: .0625rem solid #fff;
    border-top: .0625rem solid transparent;
    border-left: .0625rem solid transparent;
    border-right: .0625rem solid transparent;
}



.headcart-order {
    display: block;
    width: 95%;
    line-height: .2604rem;
    margin: 5% auto 0;
    font-size: .0938rem;
    color: #fff;
    text-align: center;
    border-radius: .0417rem;
    background-color: var(--main-color);
    cursor: pointer;
}

.headcart-order:hover {
    background-color: #000;
}

.headcart ul {
    max-height: 1.3385rem;
    overflow-y: scroll;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.headcart .node {
    padding: .4688rem 0;
}

.headcart ul li {
    position: relative;
    padding: .0417rem 0;
    border-bottom: 1px solid #eee;
}

.headcart ul li:last-child {
    border-bottom: 0;
}

.headcart ul li a {
    width: 80%;
}

.head-pro {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.head-pro-img {
    width: 30%;
    margin-right: .0521rem;
}

.head-pro-text {
    flex: 1;
    margin-right: 15%;
    margin-left: 2%;
}

.head-pro-text h4 {
    font-size: .1042rem;
}

.headcart ul li span {
    font-size: .0938rem;
    margin-right: .0521rem;
}

.headcart h3 {
    font-weight: normal;
    font-size: .1042rem;
    margin-bottom: .1042rem;
}

.node {
    width: 100%;
    padding: .7813rem 0;
    text-align: center;
}

.node h3 {
    font-weight: bold;
}

.order-mask {
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 4;
}

.order-con {
    background-color: #fff;
    z-index: 9999;
    width: 3.3646rem;
    min-height: 1.9271rem;
    right: .1563rem;
    top: 50%;
    transform: translate(0, -50%);
    padding: 0.2344rem;
}

.order-tit h4 {
    font-size: .1042rem;
}

.order-tit span {
    font-size: .1563rem;
    line-height: 1;
}

.order-product>h4 {
    font-size: .1042rem;
    margin-top: .1563rem;
}

.order-product-list {
    overflow-y: auto;
    height: 1.3021rem;
    margin-top: 0.1042rem;
}

.order-product-list a {
    margin-bottom: .1042rem;
}

.order-product-list a .order-product-img {
    width: .5208rem;
    height: .5208rem;
    margin-right: .1042rem;
}

.order-product-text h4 {
    font-size: .1042rem;
    margin-bottom: .0521rem;
}

.order-product-text p {
    line-height: 1;
    font-size: .0885rem;
    color: rgba(0, 0, 0, 0.6);
}

.order-form {
    margin-top: .1563rem;
}

.order-form .order-section {
    margin-bottom: .1042rem;
}

.order-form .order-section span {
    font-size: .0885rem;
    margin-bottom: .0521rem;
}

.order-form .order-section input {
    overflow: hidden;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: .0885rem;
    padding: .0729rem .0521rem;
}

.order-btn {
    background-color: #000;
    color: #fff;
    font-size: .1042rem;
    line-height: 1;
    padding: .1042rem 0;
    cursor: pointer;
}

/*ä¸‹æ‹‰èœå•*/
.header-nav-box {
    background-color: #fff;
    display: none;
}

/* å½“ header æ‹¥æœ‰ show-nav ç±»æ—¶æ˜¾ç¤º */
header.show-nav .header-nav-box {
    display: block;
}

.header-nav-box-con {
    padding: .4167rem 0 .4167rem;
}

.header-nav-list {
    border-right: 1px solid rgba(0, 0, 0, .2);
    padding-right: .1042rem;
    width: 1.6667rem;
}

.header-nav-item {
    margin-bottom: .1302rem;
}

.header-nav-item h5 {
    border-bottom: .0156rem solid transparent;
    padding-bottom: .0521rem;
}

.header-nav-item.on h5,
.header-nav-item h5:hover {
    border-bottom: .0156rem solid var(--main-color);
    color: var(--main-color);
}


.header-nav-con {
    flex: 1;
    margin-left: .3281rem;
    margin-right: .5729rem;
}

.header-nav-item-list {
    margin-top: .1875rem;
    display: none;
}

.header-nav-item-list.on {
    display: flex;
}

.header-nav-item-list a {
    width: 48.5%;
    margin-bottom: .1042rem;
    font-size: .0833rem;
    line-height: 1.3;
    opacity: 0.7;
}

.header-nav-item-list a:hover {
    color: var(--main-color);
    opacity: 1;
}

.header-nav-r {
    width: 2.4479rem;
    background-color: var(--main-color);
}

.header-nav-r-text {
    padding: .1406rem .1667rem;
}

.header-nav-r-text h5 {
    color: #fff;
    margin-bottom: .1042rem;
}

.header-nav-r-text p {
    color: #fff;
    opacity: 1;
    font-size: .0833rem;
    line-height: 1;
}

.header-nav-r-text i {
    width: .1563rem;
    height: .1563rem;
    background-color: #fff;
    color: #000;
    font-size: .0833rem;
    line-height: 1;
}

.header-nav-r:hover .header-nav-r-text i {
    color: var(--main-color);
}


/*catalogues*/
.catalogues {
    padding: 1.2688rem 0 1rem;
    background-color: var(--main-color-gray);
}

.catalogues-list {
    gap: .3rem;
}

.catalogues-item {
    margin-bottom: .3rem;
}

.catalogues-item-img {
    background-color: #fff;
    padding: .2rem;
}

.catalogues-item-pic {
    padding-bottom: 4rem;
}

.catalogues-item-img .a-box {
    background-color: rgba(0, 0, 0, 0.3);
    opacity: 0;
}

.catalogues-item-img:hover .a-box {
    opacity: 1;
}

.catalogues-item-img .a-box a {
    padding: .16rem .3rem;
    background-color: #fff;
    color: #000;
    font-size: .18rem;
    margin: 0 auto .1042rem;
    width: 100%;
}

.catalogues-item-img .a-box a:hover {
    background-color: var(--main-color);
    color: #fff;
}

.catalogues-item-img .a-box a span {
    margin-right: .1rem;
}

.catalogues-item-txt p {
    margin-top: .1rem;
}



.header-submenu {
    display: none;
    position: absolute;
    top: 103%;
    left: 0;
    background-color: #fff;
    box-shadow: 0 .0208rem .0313rem rgba(0, 0, 0, 0.1);
    z-index: 100;
    padding: .1rem;
    border-radius: .1rem;
    width: 2rem;
}


.header-submenu-con a {
    display: block;
    padding: .08rem .1rem;
    color: #333;
    text-decoration: none;
    text-align: left;
}

.header-submenu-con a:hover {
    background-color: #f5f5f5;
    color: var(--main-color);
}

/*service*/
/* se-top: Hero banner */
.se-top {
    width: 100%;
    position: relative;
}

.se-top-pic {
    padding-bottom: 7.13rem;
}

.se-top-txt {
    gap: .3rem;
}

.se-top-txt h1 {
    font-size: .50rem;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
}

.se-top-txt p {
    font-size: .18rem;
    color: #666;
    line-height: 1.8;
    opacity: 1;
}

/* se-service: æœåŠ¡ Tab åŒºåŸŸ */
.se-service {
    padding: 1rem 0;
    background-color: #fff;
}

.se-tab {
    gap: .2rem;
    margin-bottom: .8rem;
}

.se-tab-item {
    padding: .15rem .4rem;
    font-size: .18rem;
    color: #666;
    border: 1px solid #ddd;
    border-radius: .3rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.se-tab-item.active {
    background-color: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
}

.se-tab-item:hover:not(.active) {
    border-color: var(--main-color);
    color: var(--main-color);
}

.se-tab-content {
    display: none;
}

.se-tab-content.active {
    display: block;
}

.se-service-header {
    margin-bottom: .6rem;
}

.se-service-header h2 {
    font-size: .36rem;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
}

.se-service-header p {
    font-size: .16rem;
    color: #999;
    line-height: 1.8;
    text-align: right;
    opacity: 1;
}

.se-card-list {
    gap: .3rem;
}

.se-card-row {
    gap: .3rem;
}

.se-card {
    width: 32%;
    padding: .4rem;
    background-color: #f8f8f8;
    border-radius: .15rem;
    transition: all 0.3s ease;
    min-height: 2.2rem;
}

.se-card:hover {
    background-color: #f0f0f0;
    transform: translateY(-0.05rem);
}

.se-card-top {
    gap: .2rem;
}

.se-card-top i {
    font-size: .40rem;
    color: #333;
    line-height: 1;
}

.se-card-top h3 {
    font-size: .22rem;
    font-weight: 600;
    color: #000;
    line-height: 1.4;
}

.se-card-top p {
    font-size: .15rem;
    color: #999;
    line-height: 1.6;
    opacity: 1;
}

.se-card-more {
    width: .36rem;
    height: .36rem;
    background-color: #333;
    align-self: flex-end;
}

.se-card-more i {
    font-size: .20rem;
    color: #fff;
    line-height: 1;
}

.se-card:hover .se-card-more {
    background-color: var(--main-color);
}

/* se-after: å”®åŽæœåŠ¡ */
.se-after {
    background-color: var(--main-color);
    position: relative;
    overflow: hidden;
    z-index: 0;
}

.se-after-logo-bg {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

.se-after-logo-bg img {
    display: block;
    width: 13rem;
    max-width: 70%;
    height: auto;
    transform: translateX(20%);
}

.se-after .con {
    padding: 1rem 2.3rem;
    position: relative;
    z-index: 1;
}

.se-after-l {
    width: 50%;
    gap: .26rem;
}

.se-after-label {
    font-size: .16rem;
    color: rgba(255, 255, 255, 0.85);
    opacity: 1;
}

.se-after-l h2 {
    font-size: .42rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.4;
}

.se-after-l > p {
    font-size: .18rem;
    color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}

.se-after-platform {
    background-color: #fff;
    padding: .4rem;
    border-radius: .16rem;
    gap: .12rem;
    width: 4.2rem;
    max-width: 100%;
    margin-top: .4rem;
    box-shadow: 0 .1rem .3rem rgba(0, 0, 0, 0.08);
}

.se-after-platform h3 {
    font-size: .28rem;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}

.se-after-platform > p {
    font-size: .14rem;
    color: #999;
    opacity: 1;
}

.se-after-strong {
    font-size: .16rem;
    color: #333;
    margin-right: .12rem;
    opacity: 1;
}

.se-after-muted {
    font-size: .16rem;
    color: #999;
    opacity: 1;
}

.se-after-foot {
    margin-top: .28rem;
    align-items: flex-end;
}

.se-after-hotline {
    gap: .06rem;
}

.se-after-hotline span {
    font-size: .18rem;
    color: #999;
    opacity: 1;
}

.se-after-hotline p {
    font-size: .3rem;
    font-weight: 700;
    color: var(--main-color);
    line-height: 1.2;
    opacity: 1;
}

.se-after-qr {
    width: 1.15rem;
    height: 1.15rem;
    flex-shrink: 0;
}

.se-after-qr img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.se-after-r {
    position: absolute;
    right: 4.7rem;
    bottom: -.95rem;
    height: 7.7rem;
    max-width: 40%;
    z-index: 1;
}

.se-after-kefu {
    height: 100%;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    object-position: bottom center;
    display: block;
}

.header-submenu.active {
    display: block;
}

/* service_show: æœåŠ¡è¯¦æƒ…é¡µ */
.ss-top {
    padding: 1.1rem 0 .3rem;
    background: #fff;
}

.ss-crumb {
    font-size: .14rem;
    color: #999;
    margin-bottom: .3rem;
}

.ss-crumb a {
    color: #999;
}

.ss-crumb a:hover {
    color: var(--main-color);
}

.ss-crumb em {
    font-style: normal;
    margin: 0 .1rem;
    color: #ccc;
}

.ss-crumb span {
    color: #666;
}

.ss-title {
    font-size: .44rem;
    font-weight: 500;
    color: #000;
    line-height: 1.3;
    margin-bottom: .5rem;
}

.ss-tab {
    gap: .3rem;
}

.ss-tab-item {
    display: inline-flex;
    align-items: center;
    padding: .16rem .4rem;
    font-size: .16rem;
    color: #333;
    border: 1px solid #e5e5e5;
    border-radius: .5rem;
    background: #fff;
    transition: all .3s ease;
}

.ss-tab-item.active {
    background: var(--main-color);
    color: #fff;
    border-color: var(--main-color);
}

.ss-tab-item:hover:not(.active) {
    border-color: var(--main-color);
    color: var(--main-color);
}

.ss-content {
    padding: .6rem 0 1rem;
    background: #fff;
}

.ss-sec-head {
    gap: .12rem;
    margin-bottom: .5rem;
}

.ss-sec-head h2 {
    font-size: .32rem;
    font-weight: 500;
    color: #000;
}

.ss-sec-head p {
    font-size: .15rem;
    color: #999;
    opacity: 1;
}

/* è§†é¢‘ç½‘æ ¼ */
.ss-video-grid {
    gap: .3rem;
}

.ss-video-item {
    width: 100%;
}

.ss-video-pic {
    padding-bottom: 133%;
}

.ss-video-btn {
    width: .7rem;
    height: .7rem;
    background: rgba(255, 255, 255, 0.9);
    bottom: .2rem;
    right: .2rem;
}

.ss-video-btn i {
    font-size: .3rem;
    color: var(--main-color);
}

.ss-video-item:hover .ss-video-btn {
    background: var(--main-color);
}

.ss-video-item:hover .ss-video-btn i {
    color: #fff;
}

.ss-video-title {
    font-size: .17rem;
    color: #333;
    margin-top: .16rem;
    text-align: center;
}

/* ç©ºçŠ¶æ€ */
.ss-empty {
    padding: 2rem 0;
    text-align: center;
    color: #999;
    font-size: .16rem;
}

/* å¸¸è§é—®é¢˜ FAQ æŠ˜å  */
.ss-faq {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.ss-faq-item {
    background: #f8f8f8;
    border: 1px solid #eee;
}

.ss-faq-q {
    padding: .3rem .4rem;
    cursor: pointer;
}

.ss-faq-q h3 {
    font-size: .18rem;
    color: #111;
    font-weight: 600;
}

.ss-faq-q i {
    font-size: .24rem;
    color: var(--main-color);
    transition: transform .3s ease;
}

.ss-faq-a {
    padding: 0 .4rem;
    max-height: 0;
    overflow: hidden;
    transition: all .3s ease;
    font-size: .15rem;
    color: #666;
    line-height: 1.8;
    opacity: 1;
}

.ss-faq-item.open .ss-faq-a {
    max-height: 8rem;
    padding: 0 .4rem .3rem;
}

.ss-faq-item.open .ss-faq-q i {
    transform: rotate(45deg);
}

/* é›¶é…ä»¶æ›´æ¢ å›¾æ–‡å¡ç‰‡ */
.ss-parts-grid {
    gap: .3rem;
}

.ss-parts-card {
    width: 32%;
    background: #fff;
    border: 1px solid #eee;
    box-shadow: 0 .06rem .2rem rgba(0, 0, 0, 0.05);
}

.ss-parts-pic {
    padding-bottom: 65%;
}

.ss-parts-info {
    padding: .3rem;
    gap: .12rem;
}

.ss-parts-info h3 {
    font-size: .2rem;
    color: #111;
    font-weight: 600;
}

.ss-parts-con {
    font-size: .14rem;
    color: #666;
    line-height: 1.7;
}

.ss-parts-con img {
    max-width: 100%;
}

/* è´¨ä¿ç›¸å…³æ¡æ¬¾ */
.ss-warranty {
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.ss-warranty-block {
    background: #f8f8f8;
    padding: .4rem .5rem;
}

.ss-warranty-head {
    gap: .2rem;
    margin-bottom: .2rem;
}

.ss-warranty-index {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: .34rem;
    height: .34rem;
    border-radius: 50%;
    background: var(--main-color);
    color: #fff;
    font-size: .16rem;
    font-weight: 600;
    flex-shrink: 0;
}

.ss-warranty-head h3 {
    font-size: .22rem;
    color: #111;
    font-weight: 600;
}

.ss-warranty-con {
    font-size: .15rem;
    color: #666;
    line-height: 1.9;
}

.ss-warranty-con img {
    max-width: 100%;
}

/* é€šç”¨æ–‡ç« åˆ—è¡¨ */
.ss-article {
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

.ss-article-item {
    background: #f8f8f8;
    padding: .4rem .5rem;
}

.ss-article-item h3 {
    font-size: .24rem;
    color: #111;
    font-weight: 600;
    margin-bottom: .2rem;
}

.ss-article-con {
    font-size: .15rem;
    color: #666;
    line-height: 1.9;
}

.ss-article-con img {
    max-width: 100%;
}

/*zizhi*/
.zizhi-top-txt {
    margin-bottom: 1.2rem;
}

.zizhi-top-txt h1 {
    color: #fff;
}

.zizhi-top-txt p {
    color: rgba(255, 255, 255, 0.8);
    font-size: .18rem;
    margin-top: .15rem;
    opacity: 1;
}

/* zizhi-section: é€šç”¨åŒºå— */
.zizhi-section {
    padding: .8rem 0;
}

.zizhi-section-1 {
    background-color: #fff;
}

.zizhi-section-2 {
    background-color: #f5f5f5;
}

.zizhi-section-3 {
    background-color: #fafafa;
}

.zizhi-header {
    margin-bottom: .5rem;
    gap: .12rem;
}

.zizhi-label {
    font-size: .18rem;
    color: #999;
    opacity: 1;
}

.zizhi-header h2 {
    font-size: .36rem;
    font-weight: 700;
    color: #000;
    line-height: 1.4;
}

.zizhi-swiper-wrap {
    padding-right: 0;
}

.zizhi-swiper,
.zizhi-swiper2,
.zizhi-swiper3 {
    width: 100%;
}

.zizhi-card {
    background-color: #fff;
    border-radius: .15rem;
    padding: .3rem .2rem .25rem;
    gap: .15rem;
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.zizhi-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transform: translateY(-0.05rem);
}

.zizhi-card-img {
    width: 100%;
    height: 2.8rem;
    overflow: hidden;
    background-color: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.zizhi-card-img a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    cursor: pointer;
}

.zizhi-card-img a::after {
    content: '\e6c3';
    font-family: 'iconfont';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: .4rem;
    color: #fff;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.zizhi-card-img a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

.zizhi-card-img a:hover::after,
.zizhi-card-img a:hover::before {
    opacity: 1;
}

.zizhi-card-img img {
    max-width: 80%;
    max-height: 100%;
    object-fit: contain;
    margin: 0 auto; 
}

.zizhi-card p {
    font-size: .16rem;
    color: #666;
    text-align: center;
    opacity: 1;
}

.zizhi-nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 2;
    padding: 0 .2rem;
}

.zizhi-prev,
.zizhi-next,
.zizhi-prev2,
.zizhi-next2,
.zizhi-prev3,
.zizhi-next3 {
    width: .5rem;
    height: .5rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    transition: all 0.3s ease;
}

.zizhi-prev i,
.zizhi-next i,
.zizhi-prev2 i,
.zizhi-next2 i,
.zizhi-prev3 i,
.zizhi-next3 i {
    font-size: .20rem;
    color: #666;
    line-height: 1;
}

.zizhi-prev:hover,
.zizhi-next:hover,
.zizhi-prev2:hover,
.zizhi-next2:hover,
.zizhi-prev3:hover,
.zizhi-next3:hover {
    background-color: var(--main-color);
    border-color: var(--main-color);
}

.zizhi-prev:hover i,
.zizhi-next:hover i,
.zizhi-prev2:hover i,
.zizhi-next2:hover i,
.zizhi-prev3:hover i,
.zizhi-next3:hover i {
    color: #fff;
}

/*room*/


/*roomshow*/
.rs-hero {
    width: 100%;
    line-height: 0;
}

.rs-hero-img {
    width: 100%;
    height: auto;
}

.rs-hero-title {
    padding-bottom: .7rem;
    z-index: 2;
}

.rs-hero-en {
    display: block;
    font-size: .9rem;
    font-weight: 300;
    letter-spacing: .02rem;
    color: #fff;
    line-height: 1;
}

.rs-hero-name {
    display: block;
    margin-top: .14rem;
    font-size: .24rem;
    font-weight: 400;
    color: #fff;
    line-height: 1;
}


.rs-body {
    margin-top: -.4rem;
    padding: .8rem 0 1rem;
    background-color: var(--main-color-gray);
    border-radius: .4rem .4rem 0 0;
    z-index: 3;
}

.rs-intro {
    align-items: flex-start;
    gap: .6rem;
    margin-bottom: .6rem;
}

.rs-intro-left {
    flex-shrink: 0;
}

.rs-pill {
    display: inline-block;
    padding: .06rem .22rem;
    font-size: .16rem;
    color: var(--main-color);
    border: 1px solid var(--main-color);
    border-radius: 999px;
    line-height: 1.4;
}

.rs-name {
    margin-top: .2rem;
    font-size: .36rem;
    font-weight: 700;
    color: #111;
    line-height: 1.2;
}

.rs-intro-right {
    max-width: 50%;
    font-size: .16rem;
    color: #666;
    line-height: 1.9;
}

.rs-list {
    gap: .2rem;
}

