@font-face {
    font-family: iconfont;
    src: url('../font/iconfont.woff');
}

html {
    font-size: calc(0.3125vw + 8px);
    line-height: 1.4;
    letter-spacing: 0.5px;
    color: #333333;
    /* background-color: #e5d6ba; */
    /* background-color: #efebe8; */
    /* font-family: SourceHanSansCN, raleway, Source Han Sans CN, Noto Sans CJK SC, Source Han Sans SC, sans-serif; */
    font-family: Source Han Sans CN, Noto Sans CJK SC, Source Han Sans SC, sans-serif;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    overflow-x: auto;
    -webkit-font-smoothing: antialiased;
}

.wrap:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.index .banner {
    width: 100%;
    height: 34rem;
}

.index .banner .indexbanner {
    width: 100%;
    height: 100%;
}

.index .banner .indexbanner .one {}

.index .banner .indexbanner .one .bgimg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.index .banner .indexbanner .one .banner-content {
    text-align: center;
    z-index: 2;
}

.index .banner .indexbanner .one .banner-content p {
    font-size: 1.714rem;
    text-align: center;
    text-transform: uppercase;
    color: #ffffff;
    font-family: SourceHanSansCN;
    font-weight: bold;
}

.index .banner .indexbanner .one .banner-content a {
    margin-top: 2rem;
}

.index .banner .indexbanner .indexbannerpg .swiper-pagination-bullet {
    background: #e5d6ba;
    width: 0.714rem;
    height: 0.714rem;
    margin: 0 0.5rem;
    opacity: 1;
}

.index .banner .indexbanner .indexbannerpg .swiper-pagination-bullet-active {
    background: #ffffff;
    border-color: #ffffff;
}

.index .banner .indexbanner .one .banner1left {
    position: absolute;
    left: 16.5rem;
    top: 6rem;
    height: 100%;
}

.index .banner .indexbanner .one .banner1left p {
    font-size: 4.286rem;
    font-weight: bold;
    background-image: linear-gradient(90deg, #c5b86d 0, #f9f0a3 40%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.4;
    text-transform: uppercase;
}

.index .banner .indexbanner .one .banner1right {
    position: absolute;
    right: 0%;
    bottom: 0;
    height: 100%;
}

.index .banner .indexbanner .one .banner2right {
    position: absolute;
    right: 4%;
    top: 0;
    width: 58rem;
}

.index .banner .indexbanner .one .banner2left {
    position: absolute;
    left: 14rem;
    top: 6rem;
    height: 12.5rem;
}

.index .banner .indexbanner .one .gobtn2 {
    position: absolute;
    left: 14rem;
    top: 21rem;
    color: #f39fb3;
    font-size: 2.03rem;
    letter-spacing: 0;
    text-align: center;
    padding: 0.5rem 2.5rem;
    background-color: #ffffff;
}

.index .banner .indexbanner .one .gobtn2:hover {
    background-color: #c5a45a;
    color: #ffffff;
}

.index .banner .indexbanner .one .gobtn1 {
    position: absolute;
    left: 16.5rem;
    top: 21rem;
    display: flex;
}

.index .banner .indexbanner .one .gobtn1 a {
    display: inline-block;
    color: #b10423;
    font-size: 2.03rem;
    letter-spacing: 0;
    text-align: center;
    padding: 0.5rem 2.5rem;
    background-color: #ffffff;
    transition: all 0.3s ease;
    line-height: 1.5;
}

.index .banner .indexbanner .one .gobtn1 a:hover {
    background-color: #c5a45a;
    color: #ffffff;
}

.index .banner .indexbanner .one .gobtn1 img {
    margin-left: 2rem;
}

.index .banner .indexbanner .one .banner3left {
    position: absolute;
    left: 16.5rem;
    top: 8rem;
    height: 100%;
}

.index .banner .indexbanner .one .banner3left p {
    font-size: 2.285rem;
    font-weight: bold;
    background-image: linear-gradient(90deg, #a66d48 0, #865c40 40%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    line-height: 1.4;
    text-transform: uppercase;
}

.index .banner .indexbanner .one .banner3left p.tit {
    font-size: 3.928rem;
    text-transform: uppercase;
}

.index .banner .indexbanner .one .gobtn3 {
    position: absolute;
    left: 16.5rem;
    top: 21rem;
}

.index .banner .indexbanner .one .gobtn3 a {
    display: inline-block;
    color: #ffffff;
    font-size: 2.03rem;
    letter-spacing: 0;
    text-align: center;
    padding: 0.5rem 2.5rem;
    background-color: #b68867;
    transition: all 0.3s ease;
}

.index .banner .indexbanner .one .gobtn3 a:hover {
    background-color: #ffffff;
    color: #c5a45a;
}

.index .banner .indexbanner .one {
    overflow: hidden;
}

.index .banner .indexbanner .one .gobtn3 a {
    font-size: 1.33rem;
}

.index .banner .indexbanner .one .gobtn2 {
    font-size: 1.33rem;
}

.index .banner .indexbanner .one .gobtn1 a {
    font-size: 1.33rem;
}

.index .banner .indexbanner .one .gobtn1 img {
    margin-left: 2rem;
    width: 3rem;
}



.index .banner .indexbanner .one .banner1left.ie p {
    background-image: none;
    -webkit-text-fill-color: initial;
    color: #c5b86d;
}

.index .banner .indexbanner .one .banner3left.ie p {
    background-image: none;
    -webkit-text-fill-color: initial;
    color: #865c40;
}

.index .banner .indexbanner .one.admission {
    /* background-image: radial-gradient(#021027, #000000); */
    background-color: #000000;
    cursor: pointer;
}

.index .banner .indexbanner .one.admission .particle {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}

.index .banner .indexbanner .one.admission .content {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 2;
}

.index .banner .indexbanner .one.admission .content .imgparticle {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

.index .banner .indexbanner .one.admission .content .layertop {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    -webkit-animation: layer-fadeIn 1s, layertop-move 2s infinite;
    animation: layer-fadeIn 1s, layertop-move 2s infinite;

}

.index .banner .indexbanner .one.admission .content .layerbottom {
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    z-index: 2;
    -webkit-animation: layer-fadeIn 1s, layerbottom-move 2s infinite;
    animation: layer-fadeIn 1s, layerbottom-move 2s infinite;

}

.index .banner .indexbanner .one.admission .content .middle {
    position: absolute;
    width: 24.3125rem;
    height: 18rem;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    z-index: 3;
    /* -webkit-animation: logofadeIn 3s, layertop-move 2s 1s infinite;
        animation: logofadeIn 3s, layertop-move 2s 1s infinite; */
    -webkit-animation: logofadeIn 1s;
    animation: logofadeIn 1s;
}

.index .banner .indexbanner .one.admission .content .middle img {
    width: 100%;
}

.index .banner .indexbanner .one.admission .content .middle h2 {
    position: absolute;
    bottom: -40px;
    left: -100%;
    width: 300%;
    text-align: center;
    color: #ffffff;
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: 1.2rem;
    margin-left: 1.1rem;
    background-image: linear-gradient(90deg, #94753c 0, #dfc69a 40%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}



@-webkit-keyframes logofadeIn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes logofadeIn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes layer-fadeIn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

@keyframes layer-fadeIn {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.7;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes layertop-move {
    0% {
        transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
    }

    10% {
        transform: translate(-1px, -1px);
        -ms-transform: translate(-1px, -1px);
        -webkit-transform: translate(-1px, -1px);
        -o-transform: translate(-1px, -1px);
        -moz-transform: translate(-1px, -1px);
    }

    20% {
        transform: translate(-2px, -2px);
        -ms-transform: translate(-2px, -2px);
        -webkit-transform: translate(-2px, -2px);
        -o-transform: translate(-2px, -2px);
        -moz-transform: translate(-2px, -2px);
    }

    30% {
        transform: translate(-3px, -1.5px);
        -ms-transform: translate(-3px, -1.5px);
        -webkit-transform: translate(-3px, -1.5px);
        -o-transform: translate(-3px, -1.5px);
        -moz-transform: translate(-3px, -1.5px);
    }

    40% {
        transform: translate(-4px, -1px);
        -ms-transform: translate(-4px, -1px);
        -webkit-transform: translate(-4px, -1px);
        -o-transform: translate(-3px, -1px);
        -moz-transform: translate(-3px, -1px);
    }

    100% {
        transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
    }
}

@keyframes layertop-move {
    0% {
        transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
    }

    10% {
        transform: translate(-1px, -1px);
        -ms-transform: translate(-1px, -1px);
        -webkit-transform: translate(-1px, -1px);
        -o-transform: translate(-1px, -1px);
        -moz-transform: translate(-1px, -1px);
    }

    20% {
        transform: translate(-2px, -2px);
        -ms-transform: translate(-2px, -2px);
        -webkit-transform: translate(-2px, -2px);
        -o-transform: translate(-2px, -2px);
        -moz-transform: translate(-2px, -2px);
    }

    30% {
        transform: translate(-3px, -1.5px);
        -ms-transform: translate(-3px, -1.5px);
        -webkit-transform: translate(-3px, -1.5px);
        -o-transform: translate(-3px, -1.5px);
        -moz-transform: translate(-3px, -1.5px);
    }

    40% {
        transform: translate(-4px, -1px);
        -ms-transform: translate(-4px, -1px);
        -webkit-transform: translate(-4px, -1px);
        -o-transform: translate(-3px, -1px);
        -moz-transform: translate(-3px, -1px);
    }

    100% {
        transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
    }
}

@-webkit-keyframes layerbottom-move {
    0% {
        transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
    }

    10% {
        transform: translate(1px, 1px);
        -ms-transform: translate(1px, 1px);
        -webkit-transform: translate(1px, 1px);
        -o-transform: translate(1px, 1px);
        -moz-transform: translate(1px, 1px);
    }

    20% {
        transform: translate(2px, 2px);
        -ms-transform: translate(2px, 2px);
        -webkit-transform: translate(2px, 2px);
        -o-transform: translate(2px, 2px);
        -moz-transform: translate(2px, 2px);
    }

    30% {
        transform: translate(3px, 1.5px);
        -ms-transform: translate(3px, 1.5px);
        -webkit-transform: translate(3px, 1.5px);
        -o-transform: translate(3px, 1.5px);
        -moz-transform: translate(3px, 1.5px);
    }

    40% {
        transform: translate(4px, 1px);
        -ms-transform: translate(4px, 1px);
        -webkit-transform: translate(4px, 1px);
        -o-transform: translate(3px, 1px);
        -moz-transform: translate(3px, 1px);
    }

    100% {
        transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
    }
}

@keyframes layerbottom-move {
    0% {
        transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
    }

    10% {
        transform: translate(1px, 1px);
        -ms-transform: translate(1px, 1px);
        -webkit-transform: translate(1px, 1px);
        -o-transform: translate(1px, 1px);
        -moz-transform: translate(1px, 1px);
    }

    20% {
        transform: translate(2px, 2px);
        -ms-transform: translate(2px, 2px);
        -webkit-transform: translate(2px, 2px);
        -o-transform: translate(2px, 2px);
        -moz-transform: translate(2px, 2px);
    }

    30% {
        transform: translate(3px, 1.5px);
        -ms-transform: translate(3px, 1.5px);
        -webkit-transform: translate(3px, 1.5px);
        -o-transform: translate(3px, 1.5px);
        -moz-transform: translate(3px, 1.5px);
    }

    40% {
        transform: translate(4px, 1px);
        -ms-transform: translate(4px, 1px);
        -webkit-transform: translate(4px, 1px);
        -o-transform: translate(3px, 1px);
        -moz-transform: translate(3px, 1px);
    }

    100% {
        transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        -webkit-transform: translate(0, 0);
        -o-transform: translate(0, 0);
        -moz-transform: translate(0, 0);
    }
}

.indexbanner .one.vip {
    position: relative;
}

.indexbanner .one.vip .leaf {
    position: absolute;
    height: 60%;
    right: 0;
    top: 5px;
}

.indexbanner .one.vip .silkscarf {
    position: absolute;
    width: 15vw;
    left: 0;
    top: -1rem;
}

.indexbanner .one.vip .b5logo {
    position: absolute;
    width: 36vh;
    left: 12vw;
    top: 17%;
}

.indexbanner .one.vip .btncontainer {
    position: absolute;
    width: 36vh;
    left: 12vw;
    top: 78%;
    text-align: center;
    z-index: 1;
}

.indexbanner .one.vip .b5btn {
    display: inline-block;
    width: 32%;
    cursor: pointer;
}

.indexbanner .one.vip .smchoco {
    position: absolute;
    width: 32vw;
    left: 6vw;
    bottom: 7%;
}

.indexbanner .one.vip .b5products {
    position: absolute;
    left: 41vw;
    bottom: 1.5vw;
    display: flex;

}

.indexbanner .one.vip .b5products div {
    display: inline-block;
    width: 9vw;
}

.indexbanner .one.vip .b5products div:nth-child(1) {
    z-index: 9;
}

.indexbanner .one.vip .b5products div:nth-child(2) {
    transform: translateX(-40%);
    z-index: 8;
}

.indexbanner .one.vip .b5products div:nth-child(3) {
    transform: translateX(-80%);
    z-index: 7;
}

.indexbanner .one.vip .b5products div:nth-child(4) {
    transform: translateX(-120%);
    z-index: 6;
}

.indexbanner .one.vip .b5products div:nth-child(5) {
    transform: translateX(-160%);
    z-index: 5;
}

.indexbanner .one.vip .b5products div:nth-child(6) {
    transform: translateX(-200%);
    z-index: 4;
}

.indexbanner .one.vip .b5products div:nth-child(7) {
    transform: translateX(-240%);
    z-index: 3;
}

.indexbanner .one.vip .b5products div:nth-child(8) {
    transform: translateX(-280%);
    z-index: 2;
}

.indexbanner .one.vip .b5products div:nth-child(9) {
    transform: translateX(-320%);
    z-index: 1;
}

.indexbanner .one.vip .b5productsd {
    position: absolute;
    left: 41vw;
    bottom: 0;
    display: flex;
}

.indexbanner .one.vip .b5productsd div {
    display: inline-block;
    width: 9vw;
}

.indexbanner .one.vip .b5productsd div:nth-child(1) {
    z-index: 9;
}

.indexbanner .one.vip .b5productsd div:nth-child(2) {
    transform: translateX(-40%);
    z-index: 8;
}

.indexbanner .one.vip .b5productsd div:nth-child(3) {
    transform: translateX(-80%);
    z-index: 7;
}

.indexbanner .one.vip .b5productsd div:nth-child(4) {
    transform: translateX(-120%);
    z-index: 6;
}

.indexbanner .one.vip .b5productsd div:nth-child(5) {
    transform: translateX(-160%);
    z-index: 5;
}

.indexbanner .one.vip .b5productsd div:nth-child(6) {
    transform: translateX(-200%);
    z-index: 4;
}

.indexbanner .one.vip .b5productsd div:nth-child(7) {
    transform: translateX(-240%);
    z-index: 3;
}

.indexbanner .one.vip .b5productsd div:nth-child(8) {
    transform: translateX(-280%);
    z-index: 2;
}

.indexbanner .one.vip .b5productsd div:nth-child(9) {
    transform: translateX(-320%);
    z-index: 1;
}

.indexbanner .one.vip .b5desc {
    position: absolute;
    left: 53vw;
    top: 22%;
    width: 25vw;
}

.index .banner .indexbanner .one .gobtn4 {
    position: absolute;
    left: 25%;
    top: 66%;
    background-color: #c5a45a;
    color: #ffffff;
    font-size: 1.4rem;
    letter-spacing: 0;
    text-align: center;
    padding: 0.5rem 2.5rem;
    border-radius: 30px;
}

.index .banner .indexbanner .one .gobtn4:hover {
    background-color: #ffffff;
    color: #f39fb3;
}



.indexproducts {
    position: relative;
    width: 100%;
    padding: 2rem 0;
    background-color: #ffffff;
    padding-bottom: 120px;
}

.indexproducts .products-container {
    /* width: 88.143rem; */
    margin: 0 auto;
    text-align: center;
    position: relative;
    z-index: 1;
    width: 100%;
}

.indexproducts .products-container h1 {
    font-size: 3.15rem;
    color: #000;
    margin-top: 120px;
    padding-bottom: 60px;
    text-align: center;
    text-transform: uppercase;
    position: relative;
}

.indexproducts .products-container h1::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 4px;
    background-color: #000;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
}

.indexproducts .products-container h3 {
    font-size: 1.14rem;
    line-height: 1.4;
    text-align: center;
    font-weight: 400;
    color: #666666;
}

.indexproducts .products-container .index-products {
    text-align: center;
    margin-top: 2rem;
}

.indexproducts .products-container .index-products>a {
    position: relative;
    width: 19.65rem;
    height: 19.857rem;
    display: inline-block;
    vertical-align: top;
    margin: 0.714rem;
    padding: 1.428rem 0.714rem;
    text-align: center;
    background-color: #ffffff;
    -moz-box-shadow: 0 0 10px #e9e9e9;
    -webkit-box-shadow: 0 0 10px #e9e9e9;
    box-shadow: 0 0 10px #e9e9e9;
    -moz-border-radius: 0.714rem;
    -ms-border-radius: 0.714rem;
    -o-border-radius: 0.714rem;
    /* border-radius: 0.714rem; */
    transition: all 0.3s linear;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    box-sizing: border-box;
    border: 1px solid #cccccc;
}

.indexproducts .products-container .index-products>a:first-child::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 45px;
    background-color: #d00000;
    top: -20px;
    left: -20px;
    z-index: -1;
}

.indexproducts .products-container .index-products>a:last-child::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 100%;
    background-color: #d00000;
    top: -20px;
    right: -20px;
    z-index: -1;
}

.indexproducts .products-container .index-products>a:hover {
    box-shadow: 0 0 20px #d6d6d6;
}


.indexproducts .products-container .index-products>a h2 {
    font-size: 1rem;
    height: 1.357rem;
    color: #c5a45a;
    line-height: 1.428rem;
    margin-bottom: 1.714rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
}

.indexproducts .products-container .index-products>a .product-desc {
    display: inline-block;
    vertical-align: middle;
    width: 8.214rem;
    font-size: 12px;
    color: #111111;
}

.indexproducts .products-container .index-products>a .product-img {
    display: inline-block;
    vertical-align: middle;
    width: 9.214rem;
    overflow: hidden;
}

.indexproducts .products-container .index-products>a .product-img img {
    width: 6.07rem;
    height: 10rem;
    margin: 0 auto;
}

.indexproducts .products-container .index-products>a>p {
    width: 100%;
    text-align: center;
    margin-top: 2rem;
}

.indexproducts .products-container .index-products>a>p span {
    position: relative;
    padding: 0.5rem 0;
    font-size: 1rem;
    font-weight: bold;
    color: #c5a45a;
    text-transform: uppercase;
}

.indexproducts .products-container .index-products>a>p span:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: #c5a45a;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}

.indexproducts .products-container .index-products>a:hover>p span:after {
    width: 100%;
}

.indexproducts .products-container .index-products>a.products-learnmore {
    background-color: transparent;
    border: 1px solid #ccc;
    transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
    background-color: #fff;
}

.indexproducts .products-container .index-products>a.products-learnmore * {
    transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}

.indexproducts .products-container .index-products>a.products-learnmore .topicon:before {
    content: "\EA1F";
    font-size: 1.428rem;
    font-family: 'iconfont';
    color: #c5a45a;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}

.indexproducts .products-container .index-products>a.products-learnmore .title {
    color: #c5a45a;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 1.143rem;
    text-align: center;
    margin-top: 1rem;
}

.indexproducts .products-container .index-products>a.products-learnmore .create {
    font-size: 12px;
    color: #c5a45a;
    margin-top: 1.5rem;
}

.indexproducts .products-container .index-products>a.products-learnmore .btn {
    display: inline-block;
    padding: 0.7rem 4rem;
    font-size: 0.9rem;
    text-align: center;
    color: #ffffff;
    background-color: #c5a45a;
    font-family: SourceHanSansCN;
    font-weight: 700;
    vertical-align: middle;
    margin-top: 3.5rem;
}

.indexproducts .products-container .index-products>a.products-learnmore:hover {
    background-color: #c5a45a;
    border: 1px solid #c5a45a;
}

.indexproducts .products-container .index-products>a.products-learnmore:hover .topicon:before {
    color: #ffffff;
}

.indexproducts .products-container .index-products>a.products-learnmore:hover .title {
    color: #ffffff;
}

.indexproducts .products-container .index-products>a.products-learnmore:hover .create {
    color: #ffffff;
}

.indexproducts .products-container .index-products>a.products-learnmore:hover .btn {
    color: #c5a45a;
    background-color: #ffffff;
}

.indexproducts .products-container .btn-chocolat {
    margin-top: 3.6rem;
}

.indexproducts .productsbg1 {
    position: absolute;
    right: 0;
    top: 0;
}

.indexproducts .productsbg2 {
    position: absolute;
    left: 0;
    bottom: 145px;
}

.btn-chocolat {
    display: inline-block;
    margin: 0 auto;
    background: #3d2b2b;
    border-color: #3d2b2b;
    text-transform: uppercase;
    text-align: center;
    color: #ffffff;
    padding: 1rem 2rem;
    margin-top: 0.3rem;
    font-size: 0.9rem;
    font-family: SourceHanSansCN;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}



.indexservice {
    position: relative;
    width: 100%;
    overflow: hidden;
    background-attachment: fixed;
    padding-top: 115px;
    padding-bottom: 120px;
    background-position-y: -585px;
}

.indexservice>.title {
    font-size: 2rem;
    color: #c5a45a;
    text-align: center;
    font-family: SourceHanSansCN;
}

.indexservice .service-content {
    text-align: center;
    width: 87.143rem;
    margin: 2rem auto 0;
}

.indexservice .service-content>a {
    position: relative;
    text-align: center;
    display: inline-block;
    vertical-align: top;
    width: 31.286rem;
    height: 21.429rem;
    margin: 0.714rem;
    background-color: #ffffff;
}

.indexservice .service-content>a .img {
    width: 100%;
    overflow: hidden;
}

.indexservice .service-content>a .img img {
    width: 100%;
    transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -o-transition: all 0.6s ease;
}

.indexservice .service-content>a>.title {
    color: #c5a45a;
    text-transform: uppercase;
    padding: 0 1rem;
    margin-top: 1.428rem;
    margin-bottom: 5px;
    font-size: 1.286rem;
    text-align: center;
    font-weight: 700;
    line-height: 1.1;
}

.indexservice .service-content>a p {
    color: #c5a45a;
    padding: 0 1rem;
    margin-bottom: 5px;
    text-align: center;
}

.indexservice .service-content>a .btn span {
    position: relative;
    color: #000000;
    padding: 0.5rem 0;
    font-weight: 700;
}

.indexservice .service-content>a .btn span:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 1px;
    background-color: #000000;
    transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
}

.indexservice .service-content>a:hover .img img {
    transform: scale(1.1);
    -ms-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    -o-transform: scale(1.1);
}

.indexservice .service-content>a:hover .btn span:after {
    width: 100%;
}

.indexservice .service-content>a.service-learnmore {
    background-color: transparent;
    border: 1px solid #c5a45a;
    transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}

.indexservice .service-content>a.service-learnmore * {
    transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}

.indexservice .service-content>a.service-learnmore .topicon {
    margin-top: 1.5rem;
}

.indexservice .service-content>a.service-learnmore .topicon:before {
    content: "\EA1F";
    font-size: 1.428rem;
    font-family: 'iconfont';
    color: #c5a45a;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    transition: all 0.8s ease;
    -webkit-transition: all 0.8s ease;
    -moz-transition: all 0.8s ease;
    -o-transition: all 0.8s ease;
}

.indexservice .service-content>a.service-learnmore .title {
    color: #c5a45a;
    text-transform: uppercase;
    font-size: 1.428rem;
    font-weight: lighter;
    text-align: center;
    margin-top: 1rem;
}

.indexservice .service-content>a.service-learnmore .create {
    font-size: 12px;
    color: #c5a45a;
    margin-top: 1.5rem;
}

.indexservice .service-content>a.service-learnmore .btn {
    display: inline-block;
    padding: 0.7rem 3rem;
    font-size: 12px;
    text-align: center;
    color: #ffffff;
    background-color: #c5a45a;
    font-family: SourceHanSansCN;
    font-weight: 700;
    vertical-align: middle;
    margin-top: 4rem;
    max-width: 15rem;
}

.indexservice .service-content>a.service-learnmore:hover {
    background-color: #c5a45a;
}

.indexservice .service-content>a.service-learnmore:hover .topicon:before {
    color: #ffffff;
}

.indexservice .service-content>a.service-learnmore:hover .title {
    color: #ffffff;
}

.indexservice .service-content>a.service-learnmore:hover .create {
    color: #ffffff;
}

.indexservice .service-content>a.service-learnmore:hover .btn {
    color: #c5a45a;
    background-color: #ffffff;
}

.indexservice>.title {
    font-size: 2rem;
    font-weight: bold;
}


.welcome {
    /* background-color: #fff; */
    overflow: hidden;
    padding-bottom: 100px;
    position: relative;
}

.welcome::after {
    content: '';
    width: 799px;
    height: 585px;
    position: absolute;
    background: url('/themes/basic/skin/images/flower.png') no-repeat;
    background-size: cover;
    right: 68px;
    bottom: -60px;
    z-index: -1;
}


/* .welcome .title {
    font-size: 2rem;
    color: #c5a45a;
    text-align: center;
    font-family: SourceHanSansCN;
} */

.welcome .title {
    font-size: 3.15rem;
    color: #000;
    margin-top: 120px;
    padding-bottom: 60px;
    text-align: center;
    text-transform: uppercase;
    position: relative;
}

.welcome .title::after {
    content: '';
    position: absolute;
    width: 50px;
    height: 4px;
    background-color: #000;
    left: 50%;
    transform: translateX(-50%);
    bottom: 20px;
}

.welcome .welcome-content {
    width: 87.143rem;
    margin: 2rem auto 0;
    padding-bottom: 3rem;
    max-width: 100%;
}

.welcome .welcome-content .img {
    float: left;
    width: 47.79%;
    padding-left: 20px;
    box-sizing: border-box;
    position: relative;
}

.welcome .welcome-content .img img{
    max-width: 100%;
}

.welcome .welcome-content .img::after {
    content: '';
    position: absolute;
    width: 40px;
    height: 100%;
    background-color: #d00000;
    left: 0;
    top: -20px;
    z-index: -1;
}

.welcome .welcome-content .word {
    float: right;
    width: 52%;
}

.welcome .welcome-content .word p {
    color: #333333;
    font-size: 16px;
    margin-top: 45px;
    color: #333333;
    line-height: 25px;
}

.welcome .welcome-content .word p:first-child {
    margin-top: 10px;
}


.video-box {
    position: absolute;
    overflow: hidden;
    left: 0px;
    /* top: 180px; */
    top: 0px;
    z-index: 9;
    width: 100%;
    background: #000;
}

.video-box .indexvideo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-box .text {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: #fff;
    z-index: 9;
}

.video-box .text strong {
    color: #b9934c;
    font-size: 3rem;
    font-family: Montserrat,Helvetica Neue,Helvetica,Roboto,Arial,sans-serif;
}

.video-box .text h3 {
    font-family: Belluga, Montserrat, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif;
    color: #fff;
    font-size: 5rem;
    font-weight: normal;
}

.video-box .text h3 span {
    display: inline-block;
    vertical-align: middle;
    width: 3.6rem;
    margin-left: 30px;
}

.video-box:after {
    content: '';
    background: rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
}

.video-box .text h4 {
    font-size: 2.6rem;
    color: #fff;
    font-weight: normal;
}


.cursor {
    width: 10px;
    height: 10px;
    border: 3px solid #b9934c;
    background: #b9934c;
    border-radius: 50%;
    display: none;
    position: absolute;
    top: 0px;
    left: 0px;
    pointer-events: none;
    z-index: 999;
    transition: .1s ease;
}

.mobilebanner {
    display: none;
    height: calc(100vh - 55px);
}

.mobilebanner .mbanner {
    height: 100%;
}

.swiper-slide.mb {
    background-size: 100% auto;
    background-repeat: no-repeat;
}

@media (max-width:750px) {
    .index .banner {
        display: none;
    }

    .mobilebanner {
        display: block;
    }

    .indexproducts .products-container {
        width: 100%;
        padding: 0 10px;
        box-sizing: border-box;
    }

    .indexproducts .productsbg1,
    .indexproducts .productsbg2{
        width: 25%;
        height: auto;
    }

    .indexproducts .products-container .index-products>a{
        width: 235px;
    }

    .indexservice{
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .indexservice .service-content{
        width: 100%;
    }

    .welcome{
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
    }

    .welcome .welcome-content{
        width: 100%;
    }

    .welcome .welcome-content .img{
        float: none;
        width: 100%;
    }

    .welcome .welcome-content .word{
        float: none;
        width: 100%;
    }

    .welcome .welcome-content .img::after{
        display: none;
    }

    .welcome .welcome-content .img{
        padding-left: 0;
    }

    .welcome .welcome-content .img img{
        width: 100%;
        height: auto;
    }
}