/*  思源雅黑  */
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900);
* {margin: 0px;padding: 0px;box-sizing: border-box;}
em, i {font-style: normal;}
li {list-style: none;}
img {border: 0;vertical-align: middle;}
h1, h2, h3, h4, h5, h6 {margin: 0;}
/** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置文本格式元素 **/
a { text-decoration: none; }
body {margin: 0;padding: 0;font-family:'Noto Sans SC', Times, serif;}
html,body{height: 100%}

#overallBox{
    width: 100%;
}
#overallBox .overallBox_wrap{}
header{
    width: 100%;
    background: #fff;
}
header .headNavigationBar{
    background: #fff;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 999999999;
    -moz-box-shadow:0px 0px 6px #333333; -webkit-box-shadow:0px 0px 6px #333333; box-shadow:0px 0px 6px #333333;
}
header .headNavigationBar .navBox{
    max-width: 1080px;
    height: auto;
    margin: 0 auto;
}
.nav-balk{
    color: black !important;
    font-size: 14px;
}
.offcanvas.offcanvas-end{border-left: var(--bs-offcanvas-border-width) solid rgb(248 249 250) !important;}
.navbar-nav .nav-item:hover{
    background-color: #cccccc;
}
.navbar-nav .nav-item:hover a{
    color: #000 !important;
}
.navbar-nav .nav-item .nav-custom{
    font-size: 14px;
    color: #858585 !important;
}
.divisionLine .iconfont{
    font-size: 26px;
    color: #e3e3e3;
}

.search__box {
    background: #ffffff;
    /*border: 0.15rem #000 solid;*/
    height: 44px;
    border-radius: 40px;
    display: flex;
    align-items: center;
    padding: 6px;
    overflow: hidden;
}

.search__box:hover > .search__txt {
    border-bottom: 1px solid #000;
    width: 150px;
    padding: 3px 6px;
    font-size: 14px;
    color: #484848;
}

.search__box:hover > .search__btn {
    background: #fff;
}

.search__box:hover > .search__btn i {
    color: #000;
    transition: 0.9s;
}

.search__btn {
    float: right;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #000;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    overflow: hidden;
}

.search__btn i {
    font-size: 20px;
    color: #fff;
    transition: 0.9s;
}

.search__txt {
    border: none;
    background: none;
    outline: none;
    float: left;
    padding: 0;
    color: #fff;
    font-size: 16px;
    transition: 0.2s;
    width: 0;
}

.button {
    position: relative;
    padding: 8px 20px;
    border-radius: 6px;
    border: none;
    color: #fff;
    cursor: pointer;
    background-color: #e82a5d;
    transition: all 0.2s ease;
}

.button:active {
    transform: scale(0.96);
}

.button:before,
.button:after {
    position: absolute;
    content: "";
    width: 150%;
    left: 50%;
    height: 100%;
    transform: translateX(-50%);
    z-index: -1000;
    background-repeat: no-repeat;
}

.button:hover:before {
    top: -70%;
    background-image: radial-gradient(circle, #e82a5d 20%, transparent 20%),
    radial-gradient(circle, transparent 20%, #e82a5d 20%, transparent 30%),
    radial-gradient(circle, #e82a5d 20%, transparent 20%),
    radial-gradient(circle, #e82a5d 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #e82a5d 15%, transparent 20%),
    radial-gradient(circle, #e82a5d 20%, transparent 20%),
    radial-gradient(circle, #e82a5d 20%, transparent 20%),
    radial-gradient(circle, #e82a5d 20%, transparent 20%),
    radial-gradient(circle, #e82a5d 20%, transparent 20%);
    background-size: 10% 10%, 20% 20%, 15% 15%, 20% 20%, 18% 18%, 10% 10%, 15% 15%,
    10% 10%, 18% 18%;
    background-position: 50% 120%;
    animation: greentopBubbles 0.6s ease;
}

@keyframes greentopBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%,
        40% 90%, 55% 90%, 70% 90%;
    }

    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%,
        50% 50%, 65% 20%, 90% 30%;
    }

    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%,
        50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

.button:hover::after {
    bottom: -70%;
    background-image: radial-gradient(circle, #e82a5d 20%, transparent 20%),
    radial-gradient(circle, #e82a5d 20%, transparent 20%),
    radial-gradient(circle, transparent 10%, #e82a5d 15%, transparent 20%),
    radial-gradient(circle, #e82a5d 20%, transparent 20%),
    radial-gradient(circle, #e82a5d 20%, transparent 20%),
    radial-gradient(circle, #e82a5d 20%, transparent 20%),
    radial-gradient(circle, #e82a5d 20%, transparent 20%);
    background-size: 15% 15%, 20% 20%, 18% 18%, 20% 20%, 15% 15%, 20% 20%, 18% 18%;
    background-position: 50% 0%;
    animation: greenbottomBubbles 0.6s ease;
}

@keyframes greenbottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%,
        70% -10%, 70% 0%;
    }

    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%,
        105% 0%;
    }

    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%,
        110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}
.right_box{
    display: flex;
    align-items: center;
/*    overflow: hidden;*/
}
.clearBorder_btn:focus{
    /* 去除按钮点击之后的边框 */
    box-shadow: none !important;
}
.bannerBox{width: 100%}
.bannerBox::before{
    content: "";
    display: block;
    height: 90px;
}
.bannerBox .bannerDiagram{
    width: 100%;
    height: 320px;
    background: url("../images/banner.png") no-repeat;
    background-size: cover;
}
.bannerBox .bannerWrap{
    width: 1080px;
    height: 100%;
    /*background-color: yellow;*/
    position: relative;
}
.bannerBox .bannerWrap .bannerArticleTitle{
    width: 100%;
    padding: 15px 0;
    /*background-color: #0a78c2;*/
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}
.bannerBox .bannerWrap .bannerArticleTitle h1{
    color: #FFFFFF;
    font-size: 2.5rem;
}
.bannerBox .bannerWrap .bannerArticleTitle h1 span{
    display: inline-block;
}
.bannerBox .bannerWrap .bannerArticleTitle li,.bannerBox .bannerWrap .bannerArticleTitle li > a,.breadcrumb-item::before{
    color: #bdbdbd !important;
}
.articleSection{
    width: 100%;
}
.articleSection .articleSection_wrap{
    max-width: 1080px;
    height: auto;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}
/* 文章样式 */
.articleSection .articleSection_wrap .col-l{
    width: 745px;
    height: auto;
}
.col-l .col-l-wrap{
    background-color: #ffffff;
    border: 1px solid #efefef;
    -moz-box-shadow:0px 0px 6px #efefef; -webkit-box-shadow:0px 0px 6px #efefef; box-shadow:0px 0px 6px #efefef;
}
.textContent_customStyle{
    width: 100%;
    padding: 10px 15px;
}
.textContent_customStyle h3{
    font-size: 1.4375rem;
    color: #e82a5d;
}
.textContent_customStyle p,.textContent_customStyle span{
    font-size: 18px;
    letter-spacing: 0.125rem;
}
.color-ash{
    color: #8b8b8b;
}
.color-yellow{
    color: #b87500;
}
.float_box{
    width: 100%;
    position: relative;
}
.float_box .float_img{
    float: right;
}
.productEffect{
    width: 100%;
    background-color: #e82a5d;
    padding: 8px 5px;
    counter-reset: step;
    counter-increment: step 0;
}
.productEffect .productEffect_wrap{
    padding: 15px;
    border-radius: 0.8125rem;
    background-color: #FFFFFF;
}
.productEffect .productEffect_wrap p{
    font-size: 18px;
    position: relative;
    padding-left: 30px;
}
.productEffect .productEffect_wrap p::before {
    content: counter(step);
    counter-increment: step;
    position: absolute;
    left: 0;top: 0;
    display: block;
    width: 28px;
    text-align: center;
    background-color: #ff0000;
    color: #FFFFFF;
    border-radius: 50%;
}
.noSideEffects{
    width: 100%;
}
.noSideEffects p{
    padding-left: 20px;
    position: relative;
    color: #5a5a5a;
    letter-spacing: 3px;
}
.noSideEffects p::before{
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #9c9a9d;
    position: absolute;
    top: 9px;
    left: 0;
    margin: auto;
}
.float-l-r{
    width: 100%;
    height: auto;
}
.float-l-r .f-l{
    float: left;
    height: 100%;
}
.float-l-r .f-l p{
    color: #5a5a5a;
}
.float-l-r .f-l p > span{
    color: #ff0000;
}
.float-l-r .f-r{
    float: right;
    height: 100%;
}
.box-l-c-r{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.screenshotOfWhatsApp{
    width: 100%;
}
.screenshotOfWhatsApp li > span{
    color: #9c9a9d;
    font-size: 16px;
}
.screenshotOfWhatsApp li > p{
    font-size: 18px;
    color: #b87500;
}
/* 表单样式 */
.form-Box{
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.form-Box .product_img{
    width: 335px;
}
.form-Box .product_form{
    width: 371px;
    background-color: #f6fa70;
    border-radius: 25px;
    overflow: hidden;
}
.form-Box .product_form .price-Box h4{
    width: 170px;
    color: #FFFFFF;
    background-color: #f45883;
    padding: 0.6rem;
    font-size: 30px;
    transform: translatey(25px);
}
.form-Box .product_form .price-Box h2{
    color: #FFFFFF;
    width: 320px;
    background-color: #e82a5d;
    padding: 1.789rem 0 0.9375rem 0;
    font-size: 45px;
}
.countDown-Box h5{font-size: 30px;}
.countDown-Box .countDown{color: #FFFFFF;}
.countDown-Box .countDown > div{
    display: inline-block; width: 70px; height: 70px;padding: 10px; border-radius: 5px;
    margin: 0 5px;
}
.countDown-Box .countDown > div p{margin: 0;}
.countDown-Box .countDown > div.or{background: #0079ff;}
.countDown-Box .countDown > div.pi{background: #01dfa2;}
.countDown-Box .countDown > div.pk{background: #ff0060;}
.countDown-Box .countDown > div  p:last-child{font-size: 2.0625rem;font-weight: bolder;}
.input-style{
    width: 100%;
    text-align: center;
    margin: 8px 0;
    display: inline-block;
}
.input-style input{
    width: 275px;
    height: 45px;
    border: 1px solid #ffc26f;
    border-radius: 10px;
    padding-left: 15px;
    outline: none;  /* 获得焦点不显示边框颜色 */
}

.button-style{
    width: 100%;
    text-align: center;
}
.button-style button{
    width: 215px;
    height: 50px;
    border-radius: 23px;
    border: none;
    background-color: #ff0060;
    color: #FFFFFF;
    font-size: 25px;
    -moz-box-shadow:0px 0px 6px #646464; -webkit-box-shadow:0px 0px 6px #646464; box-shadow:0px 0px 6px #646464;
}
.button-style button:hover{
    background-color: rgba(255, 0, 98, 0.76);
}
/* 评论区样式 */
.commentArea{
    width: 100%;
}
.commentArea .commentArea-wrap{}
.commentArea .commentArea-wrap h5{
    font-size: 18px;
    color: #777777;
}
.comment{
    width: 100%;
    border-bottom: 1px solid #e3e3e3;
}
.comment .comment-wrap{
    display: flex;
}
.comment .comment-wrap .user-img{height: auto}
.comment .comment-wrap .user-information{height: auto}
.comment .comment-wrap .user-information .user-name{}
.comment .comment-wrap .user-information .user-name strong{
    font-size: 20px;
}
.comment .comment-wrap .user-information .user-comment{}
.comment .comment-wrap .user-information .user-comment p:nth-child(1){
    font-size: 18px;
}
.comment .comment-wrap .user-information .user-comment p:nth-child(2){
     font-size: 14px;
     color: #777777;
 }
.comment .comment-wrap .user-information .likeReply{
    font-size: 16px;
    color: #686868;
    display: flex;
    align-items: center;
}
.comment .comment-wrap .user-information .likeReply a > i{
    font-size: 22px;
    color: #686868;
    margin-right: 5px;
}


/* 侧边栏样式 */
.articleSection .articleSection_wrap .col-r{
    width: 305px;
    height: auto;
}
.col-r .sidebar-r{
    width: 100%;
    background-color: #fbfbfb;
    border: 1px solid #efefef;
    -moz-box-shadow:0px 0px 6px #efefef; -webkit-box-shadow:0px 0px 6px #efefef; box-shadow:0px 0px 6px #efefef;
}
.col-r .sidebar-r .sidebar-r_wrap{
    padding: 10px;
}
.col-r .sidebar-r .sidebar-r_wrap h5{
    font-size: 18px;
    letter-spacing: 3px;
    position: relative;
    padding: 10px 0;
}
.col-r .sidebar-r .sidebar-r_wrap h5::after{
    content: "";
    display: inline-block;
    width: 55px;
    height: 1px;
    border-bottom: 1px solid #e82a5d;
    position: absolute;
    bottom: 0;
    left: 12px;
}
.col-r .sidebar-r .sidebar-r_wrap ul{
    padding: 10px !important;
}
.col-r .sidebar-r .sidebar-r_wrap ul > li{
    width: 100%;
    font-size: 14px;
    position: relative;
}
.col-r .sidebar-r .sidebar-r_wrap ul > li::after{
    content: "";
    display: inline-block;
    width: 100%;
    height: 1px;
    border-bottom: 1px #9c9c9c dotted;
    position: absolute;
    bottom: 0;
    left: 0;
}
.col-r .sidebar-r .sidebar-r_wrap ul > li:hover button{
    color: #e82a5d;
}
.col-r .sidebar-r .sidebar-r_wrap ul > li > button{
    text-align: left;
    width: 100%;
    border: none;
    background-color: transparent;
    padding: 0.8125rem 0;
    color: #7d7d7d;
}

.btn_style{display: inline-block; *display:inline; *zoom:1; padding: 10px 40px; text-decoration: none; position: relative; color:#333;}
.btn-1{position:relative;color:#fff; background:#e82a5d; border:1px solid #e82a5d;-webkit-transition: background-color .3s, color .3s;transition: background-color .3s, color .3s}
.btn-1:before {content: '';position: absolute;top: -15px;left: -15px;bottom: -15px;right: -15px;background: inherit;z-index: -1;opacity: 0.5;-webkit-transform: scale3d(.6, .4, 1);transform: scale3d(.6, .4, 1); display:none\9;}
.btn-1:hover {background: #fb4375; border-color:#fb4375;-webkit-transition: background-color .1s .3s, color .1s .3s;transition: background-color .1s .3s, color .1s .3s;-webkit-animation: anim-moema-1 .3s forwards;animation: anim-moema-1 .3s forwards}
.btn-1:hover:before {-webkit-animation: anim-moema-2 .3s .3s forwards;animation: anim-moema-2 .3s .3s forwards;}
.btn-1 .btn-inner{color: #FFFFFF;}
@-webkit-keyframes anim-moema-1 {
    60% {
        -webkit-transform:scale3d(.8, .8, 1);
        transform:scale3d(.8, .8, 1)
    }
    85% {
        -webkit-transform:scale3d(1.1, 1.1, 1);
        transform:scale3d(1.1, 1.1, 1)
    }
    100% {
        -webkit-transform:scale3d(1, 1, 1);
        transform:scale3d(1, 1, 1)
    }
}
@keyframes anim-moema-1 {
    60% {
        -webkit-transform:scale3d(.8, .8, 1);
        transform:scale3d(.8, .8, 1)
    }
    85% {
        -webkit-transform:scale3d(1.1, 1.1, 1);
        transform:scale3d(1.1, 1.1, 1)
    }
    100% {
        -webkit-transform:scale3d(1, 1, 1);
        transform:scale3d(1, 1, 1)
    }
}
@-webkit-keyframes anim-moema-2 {
    to {
        opacity:0;
        -webkit-transform:scale3d(1, 1, 1);
        transform:scale3d(1, 1, 1)
    }
}
@keyframes anim-moema-2 {
    to {
        opacity:0;
        -webkit-transform:scale3d(1, 1, 1);
        transform:scale3d(1, 1, 1)
    }
}

/*  占位盒  */
.occupyingBox-h25{
    width: 100%;
    height: 25px;
}

/* footer样式 */
.footer{
    background-color: #1f2024;
}
.media{}
.media li{}
.media li > a{
    width: 36px;
    height: 36px;
    display: inline-block;
    background: url("../images/media.png");
    vertical-align: middle;
    margin: 0 5px;
}
.media li .facebook{
    background-position: -0;
}
.media li .instagram{
    background-position: -50px;
}
.media li .youtube{
    background-position: -100px;
}