@font-face {
    font-family: 'iconfont';
    src: url('../fonts/iconfont.eot');
    src: url('../fonts/iconfont.eot?#iefix') format('embedded-opentype'), url('../fonts/iconfont.woff') format('woff'), url('../fonts/iconfont.ttf') format('truetype'), url('../fonts/iconfont.svg#iconfont') format('svg');
}

.iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}

html {
    font-family: SimHei;
}

.clear {
    clear: both;
}

.swiper-slide img {
    width: 100%;
    float: left;
}

.swiper-pagination-bullet-active {
    background: #802740;
}

.compatible-tips {
    background-color: rgb(255, 249, 211);
    font-size: 16px;
    text-align: center;
    padding: 10px 0;
    color: #000;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    -moz-transition: top 200ms ease-in-out;
    -o-transition: top 200ms ease-in-out;
    -webkit-transition: top 200ms ease-in-out;
    transition: top 200ms ease-in-out;
    z-index: 999;
}

.compatible-tips>span {
    color: #bd1117;
}

@media screen and (min-width: 1025px) {
    .index-container {
        margin-top: 170px;
    }
}

@media screen and (max-width: 1024px) {
    .index-container {
        margin-top: 80px;
    }
}

.box {
    margin-top: 60px;
}

.box>ul {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    justify-content: center;
}

.box>ul>li {
    float: left;
    color: #802740;
    text-align: center;
    cursor: pointer;
    border: 1px dashed #802740;
    border-radius: 16px;
}

.box>ul>li.now {
    color: white;
    background-color: #802740;
}

.list>div {
    margin: 0 auto;
}

.list div.text {
    color: #99957c;
    display: none;
    width: 100%;
}

.list div.text:first-child {
    display: block;
}

.product-container {
    float: left;
    position: relative;
}

.product-container img {
    width: 100%;
}

.product-info>span {
    display: block;
    width: 100%;
    text-align: center;
}

.cut-off-rule {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
}

.cut-off-rule>span {
    height: 2px;
    width: 20px;
}

.honey-lemon-bgColor {
    background-color: #fffac3;
}

.rose-bgColor {
    background-color: #ffe5e6;
}

.jasmine-bgColor {
    background-color: #f5ecff;
}

.sweet-osmanthus-bgColor {
    background-color: #e1f9e5;
}

.group-1-bgColor {
    background-color: #ee8da2;
}

.group-2-bgColor {
    background-color: #96b178;
}

.group-3-bgColor {
    background-color: #ffd3df;
}

.group-4-bgColor {
    background-color: #f5dcbd;
}

.group-1-color {
    color: #6E4D24;
}

.group-2-color {
    color: #475f2d;
}

.group-3-color {
    color: #e297ab;
}

.group-4-color {
    color: #6e4d24;
}

.herbaceous-powder-1-bgColor {
    background-color: #e29ca4;
}

.herbaceous-powder-2-bgColor {
    background-color: #adabd8;
}

.herbaceous-powder-3-bgColor {
    background-color: #bccd99;
}

.herbaceous-powder-4-bgColor {
    background-color: #b4d1a8;
}

.herbaceous-powder-1-color {
    color: #678d58;
}

.herbaceous-powder-2-color {
    color: #625fa6;
}

.herbaceous-powder-3-color {
    color: #6c843c;
}

.herbaceous-powder-4-color {
    color: #678d58;
}

.herbaceous-powder-1-rule>span {
    background-color: #8c2935;
}

.herbaceous-powder-2-rule>span {
    background-color: #625fa6;
}

.herbaceous-powder-3-rule>span {
    background-color: #6c843c;
}

.herbaceous-powder-4-rule>span {
    background-color: #678d58;
}

.honey-lemon-color {
    color: #99957c;
}

.rose-color {
    color: #b68587;
}

.jasmine-color {
    color: #ac9ac2;
}

.sweet-osmanthus-color {
    color: #99c1a0;
}

.honey-lemon-rule>span {
    background-color: #99957c;
}

.rose-rule>span {
    background-color: #b68587;
}

.jasmine-rule>span {
    background-color: #ac9ac2;
}

.sweet-osmanthus-rule>span {
    background-color: #99c1a0;
}

.product-look-more {
    display: -webkit-flex;
    display: flex;
    justify-content: center;
}

.product-look-more>span {
    display: block;
    width: 100px;
    border: 1px solid #802740;
    border-radius: 20px;
    text-align: center;
    padding: 3px 0;
}

.product-look-more>span>a {
    color: #802740;
}

.index-video-container>video {
    display: none;
}

@media screen and (min-width: 1025px) {
    #phone-list {
        display: none;
    }
    #list {
        display: block;
    }
    .box>ul {
        height: 30px;
    }
    .box>ul>li {
        width: 95px;
        font-size: 18px;
        padding: 0 20px;
        line-height: 30px;
    }
    .list {
        margin-top: 70px;
    }
    #product-1 {
        max-width: 960px;
        margin: 0 auto;
    }
    #product-2 {
        max-width: 1150px;
        margin: 0 auto;
    }
    #product-3 {
        max-width: 960px;
        margin: 0 auto;
    }
    #product-4 {
        max-width: 980px;
        margin: 0 auto;
    }
    #catsId-1 {
        height: 523px;
    }
    #catsId-3 {
        height: 523px;
    }
    #catsId-4 {
        height: 471px;
    }
    .group-tea {
        max-width: 1150px;
    }
    .beautiful-praise {
        max-width: 1300px;
    }
    .single-tea .product-container img {
        height: 395px;
    }
    .single-tea .product-container {
        width: 195px;
    }
    /* .single-tea .product-container:not(:nth-last-child(2)) {
        margin-right: calc((100% - 195px * 4) / 3);
    } */
    .group-tea .product-container img {
        height: 455px;
    }
    .group-tea .product-container {
        max-width: 280px;
    }
    .group-tea .product-container:not(:nth-last-child(2)) {
        margin-right: calc((100% - 280px * 4) / 3);
    }
    .beautiful-praise {
        max-width: 980px;
        margin: 0 auto;
    }
    .beautiful-praise .product-container img {
        height: 320px;
    }
    .beautiful-praise .product-container {
        width: 460px;
    }
    .beautiful-praise .product-container:not(:nth-last-child(2)) {
        margin-right: 60px
    }
    .single-tea .product-english {
        font-size: 12px;
        height: 30px;
        position: absolute;
        bottom: 103px;
    }
    .single-tea .product-name {
        font-size: 22px;
        position: absolute;
        bottom: 50px;
    }
    .cut-off-rule {
        padding: 15px 0;
        position: absolute;
        width: 100%;
        bottom: 74px;
    }
}

.single-tea .product-bgColor {
    width: 100%;
    height: 405px;
    position: absolute;
    z-index: -1;
    bottom: -60px;
}

.group-tea .product-name {
    font-size: 18px;
    margin-top: 20px;
    margin-bottom: 50px;
}

.group-tea .product-bgColor {
    width: 170px;
    height: 600px;
    position: absolute;
    z-index: -1;
    bottom: -45px;
    left: calc(50% - 85px);
}

.beautiful-praise .product-name {
    color: #728d5f;
    /* margin-top: 30px; */
    font-size: 18px;
    position: absolute;
    bottom: 50px;
}

.beautiful-praise .product-bgColor {
    width: 260px;
    height: 376px;
    background-color: #d5e1cc;
    position: absolute;
    z-index: -1;
    bottom: -70px;
    left: calc(50% - 130px);
}

.product-look-more {
    font-size: 16px;
    margin-top: 140px;
}

.index-video-container {
    width: 960px;
    margin: 0 auto;
}

.video-tip {
    color: #ffffff;
    font-size: 30px;
    display: block;
    text-align: center;
    padding: 45px 0;
}

.index-video {
    width: 100%;
    background-color: #802740;
    margin-top: 150px;
}

.index-video-container>.index-video-bg {
    padding-bottom: 60px;
}

#foot {
    max-width: 1230px;
    background-color: white;
    margin: 0 auto;
    font-size: 18px;
}

.follow-us-list {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.foot-container {
    padding-top: 70px;
}

.foot-list-tip {
    font-size: 18px;
    padding-bottom: 30px;
}

.follow-us-item {
    font-size: 16px;
    color: #666666;
    width: 100px;
    text-align: center;
}

.follow-us-item:not(:first-child) {
    margin-left: 30px;
}

.follow-us-item>img {
    width: 100%;
    height: 100px;
}

.foot-one-list {}

.follow-us {
    margin-right: 120px;
}

.sale-network {
    margin-right: 140px;
}

.contact-us {}

.follow-us,
.sale-network,
.contact-us,
.foot-one-list {
    float: left;
}

.sale-network-list>li {
    padding-bottom: 10px;
}

.sale-network .sale-network-list>li {
    cursor: pointer;
}

.sale-network-list>li>a {
    color: #444444;
}

.contact-us {
    font-size: 14px;
}

.mobile-img-tip {
    display: none;
}

.pc-img-tip {
    display: block;
}

.foot-list-tip {
    color: #802740;
}

.emely-QRCode {
    display: none;
}

.follow-us>div i {
    color: #444444;
    font-size: 38px;
    width: 38px;
    display: block;
    cursor: pointer;
}

.follow-us>div i:hover {
    color: #802740;
}

.sale-network-list>li>a>img {
    display: none;
}

.sale-network-list {
    font-size: 18px;
    color: #444444;
}

.copyright {
    color: rgba(0, 0, 0, .6);
    font-size: 18px;
    text-align: center;
    margin-top: 60px;
    margin-bottom: 10px;
}

.index-video-container {
    position: relative;
}

.index-video-container img {
    width: 100%;
    float: left;
    cursor: pointer;
}

.foot-list-tip {
    display: flex;
    display: -webkit-flex;
    align-items: center;
}

.foot-list-tip>span {
    margin-left: 5px;
}

@media screen and (max-width: 1024px) {
    .foot-one-list {
        display: none;
    }
    .box>ul {
        height: 20px;
    }
    .box>ul>li {
        width: 65px;
        font-size: 12px;
        padding: 0 5px;
        line-height: 20px;
    }
    .single-tea {
        max-width: 265px;
    }
    .single-tea .product-container {
        width: 100px;
        margin-top: 30px;
    }
    .single-tea .product-container:nth-child(2n-1) {
        margin-right: calc(100% - 200px);
    }
    .single-tea .product-english {
        font-size: 12px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .single-tea .product-name {
        height: 40px;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product-info {
        margin-top: -20px;
    }
    .cut-off-rule {
        padding: 5px 0;
    }
    .single-tea .product-bgColor {
        width: 100%;
        height: 190px;
        position: absolute;
        z-index: -1;
        bottom: -20px;
    }
    .group-tea {
        max-width: 300px;
    }
    .group-tea .product-container {
        max-width: 50%;
        margin-top: 50px;
    }
    .group-tea .product-name {
        font-size: 12px;
        padding-top: 15px;
    }
    .group-tea .product-bgColor {
        width: 96px;
        height: 280px;
        position: absolute;
        z-index: -1;
        bottom: -15px;
        left: calc(50% - 48px);
    }
    .beautiful-praise {
        max-width: 315px;
    }
    .beautiful-praise .product-container {
        width: 130px;
        margin-top: 50px;
    }
    .beautiful-praise .product-container>img {
        height: 135px;
    }
    .beautiful-praise .product-container:nth-child(2n-1) {
        margin-right: calc(100% - 260px);
    }
    .beautiful-praise .product-name {
        color: #728d5f;
        margin-top: 30px;
        font-size: 14px;
    }
    .beautiful-praise .product-bgColor {
        width: 120px;
        height: 100px;
        background-color: #d5e1cc;
        position: absolute;
        z-index: -1;
        bottom: -30px;
        left: calc(50% - 60px);
    }
    .product-look-more {
        font-size: 12px;
        margin-top: 60px;
    }
    .index-video-container {
        display: flex;
        display: -webkit-flex;
        justify-content: center;
    }
    .index-video {
        margin-top: 50px;
    }
    .video-tip {
        color: #ffffff;
        font-size: 16px;
        display: block;
        text-align: center;
        position: absolute;
        top: 40px;
    }
    #foot {
        width: 100%;
        background-color: #802740;
    }
    .foot-container {
        width: calc(100% - 30px);
        margin: 0 auto;
        padding-top: 0;
    }
    .mobile-img-tip {
        display: block;
    }
    .pc-img-tip {
        display: none;
    }
    .foot-list-tip {
        color: white;
        font-size: 14px;
    }
    .wechat {
        display: none;
    }
    .emely-QRCode {
        width: 60px;
    }
    .follow-us,
    .sale-network {
        width: 50%;
        float: left;
    }
    .foot-list-tip {
        margin-bottom: 10px;
    }
    .follow-us {}
    .weibo {
        color: white;
        font-size: 30px;
        margin-left: 10px;
    }
    .sale-network-list>li>a>span {
        display: none;
    }
    .follow-us-list {
        display: flex;
        display: -webkit-flex;
        align-items: center;
    }
    .sale-network .sale-network-list>li {
        width: 50%;
        float: left;
        height: 30px;
        text-align: center;
    }
    .contact-us {}
    .contact-us .sale-network-list {
        font-size: 12px;
        color: rgba(255, 255, 255, .6);
        padding-left: 8px;
        border-bottom: 1px solid rgba(255, 255, 255, .5);
        padding-bottom: 10px;
    }
    .single-tea .product-container img {
        height: 201px;
    }
    .group-tea .product-container img {
        height: 244px;
    }
    .single-tea .product-container img {
        height: 200px;
    }
    .beautiful-praise .product-container img {
        height: 134px;
    }
    .foot-list-tip {
        display: none;
    }
    .sale-network-list {
        padding-top: 5px;
    }
    .sale-network-list>li {
        margin-top: 5px;
    }
    .copyright {
        background-color: #802740;
        color: rgba(255, 255, 255, .6);
        font-size: 12px;
        padding: 10px 0;
        text-align: center;
        margin: 0;
    }
    .copyright-1 {
        display: none;
    }
}

@media screen and (max-width: 1120px) and (min-width: 1025px) {
    .group-tea>.product-container:not(:nth-last-child(2)) {
        margin-right: calc((100% - 250px * 4) / 3);
    }
    .group-tea>.product-container {
        max-width: 250px;
    }
}

@media screen and (max-width: 1220px) and (min-width: 1025px) {
    .follow-us {
        margin-right: 30px;
    }
    .sale-network {
        margin-right: 40px;
    }
}

.news-bg {
    width: 100%;
}

.news-container {
    padding-top: 80px;
    max-width: 980px;
    margin: 0 auto;
}

.news-title {
    font-size: 28px;
    color: black;
    font-weight: 400;
    position: relative;
}

.news-title::before {
    content: '';
    display: block;
    width: 50px;
    height: 4px;
    background-color: #802740;
    position: absolute;
    bottom: -10px;
    left: 0;
}

.news-list {
    color: #000000;
    font-size: 24px;
    margin-bottom: 300px;
}

.news-item {
    margin-top: 30px;
    display: flex;
    cursor: pointer;
    flex-direction: row;
    color: #000000;
}

.news-item-time {
    width: 150px;
    display: block;
}

.news-item-title {
    padding-left: 20px;
    width: calc(100% - 150px - 35px);
    overflow: hidden;
    /*超出部分隐藏*/
    white-space: nowrap;
    /*不换行*/
    text-overflow: ellipsis;
    /*超出部分文字以...显示*/
}

.news-detail-container {
    max-width: 980px;
    margin: 0 auto;
}

.news-detail-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin-top: 80px;
}

.news-detail-title {
    font-size: 28px;
    color: black;
}

.news-detail-time {
    font-size: 20px;
    color: rgba(0, 0, 0, .6);
}

.news-details-content {
    color: #000000;
    font-size: 20px;
    margin-top: 106px;
    margin-bottom: 140px;
}

@media screen and (max-width: 1024px) {
    #catsId-1 {
        display: none;
    }
    .news-container {
        padding-top: 32px;
        width: calc(100% - 35px - 28px);
        margin: 0 auto;
    }
    .news-title {
        font-size: 15px;
    }
    .news-title::before {
        width: 16px;
        height: 1px;
        bottom: -3px;
    }
    .news-item {
        margin-top: 15px;
    }
    .news-list {
        font-size: 13px;
    }
    .news-item-time {
        width: 80px;
    }
    .news-item-title {
        padding-left: 10px;
        width: calc(100% - 80px - 20px);
    }
    .news-detail-header {
        display: block;
        margin-top: 30px;
    }
    .news-detail-title,
    .news-detail-time {
        display: block;
        width: 100%;
        text-align: center;
    }
    .news-detail-title {
        font-size: 15px;
    }
    .news-detail-time {
        font-size: 12px;
        color: rgba(0, 0, 0, .6);
    }
    .news-details-content {
        width: calc(100% - 35px - 28px);
        margin: 0 auto;
        margin-top: 15px;
        margin-bottom: 30px;
        font-size: 12px;
        color: rgba(0, 0, 0, .9);
    }
    .news-details-content img{
        width: 100%;
    }
    .index-video-container {
        width: 100%;
    }
    .index-video-container>.index-video-bg {
        padding-bottom: 0;
    }
    #list {
        display: none;
    }
    #phone-list {
        display: block;
    }
}

.layui-layer-loading {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swiper-button-next {
    background: url(../img/next-arrow.png) 100%/100% !important;
    width: 42px !important;
    height: 42px !important;
}

.swiper-button-prev {
    background: url(../img/prev-arrow.png) 100%/100% !important;
    width: 42px !important;
    height: 42px !important;
}

#list>div {
    position: relative;
}