.banner.new_header {
    height: 45vw;
}

@media (min-width: 992px) {
    .banner.new_header {
        max-height: 830px;
    }
}

.waves1 {
    color: #fff;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    background-image: url(../img/bannerdown1.png), linear-gradient(to bottom, transparent 42px, transparent 42px);
    background-position: center top, center;
    background-repeat: no-repeat;
    background-color: transparent;
    padding-top: 160px;
}

.b_btn {
    padding: 20%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.b_btn a {
    color: #fff;
}

.btn-new {
    background: #EEC61F;
    border-color: #EEC61F;
    color: #fff
}

.btn-new:hover {
    background: #e5c735;
    border-color: #e5c735;
    color: #fff
}

.n_bg {
    position: relative;
    background-image: url(../img/kk1.png), linear-gradient(to bottom, transparent 42px, transparent 42px);
    background-size: 100% 100%;
    height: 650px;
    background-repeat: no-repeat;
    padding: 8rem 7rem;
}

.n_bg p {
    font-size: 24px;
    line-height: 36px;
    font-family: Microsoft JhengHei;
    color: #000;
    margin-bottom: 1.5rem;
    ;
}

.n_bg::before {
    content: "";
    width: 14.8vw;
    height: 14.8vw;
    background: url(../img/t1.png) no-repeat scroll center/cover;
    position: absolute;
    left: -7.4vw;
    top: -7.4vw;
    z-index: 1;
}

.n_bg::after {
    content: "";
    width: 13vw;
    height: 13vw;
    background: url(../img/b1.png) no-repeat scroll center/cover;
    position: absolute;
    right: -3vw;
    bottom: -1vw;
    z-index: 1;
}

.article-new {
    background: #fff;
    position: relative;
    padding-bottom: 2rem;
}

.new_img {
    width: 100%;
    max-width: 1000px;
    margin: auto;
}

.article-new::before {
    content: "";
    background: url(../img/d1.png) no-repeat scroll center/cover;
    position: absolute;
    width: 100%;
    height: 7.29vw;
    top: -3.7vw;
}

.article_con ul {
    padding-left: 0;
}

.article_con ul li.inner {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    border-bottom: 1px dashed #B8D200;
}

.article_con ul li.inner i {
    width: 38px;
    height: 38px;
    line-height: 38px;
    border-radius: 50%;
    background: #EEC61F;
    color: #fff;
    margin-right: 10px;
}

.article_con ul li.inner i.fa {
    font-size: 16px;
}

.article_con ul li.inner p {
    margin-bottom: 0;
}

.article_con .map {
    border: 10px solid #C7DEC0;
    border-radius: 20px;
}

.g_tit {
    background: #C7DEC0;
    border-radius: 6px;
    color: #fff;
    text-align: center;
}

.article-21 {
    background-image: url(../img/bgs1.png), linear-gradient(to bottom, #fff 42px, transparent 42px);
    padding-top: 15rem;
}

.article-21 .g-flex {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6rem;
}

.article-21 ul {
    padding-left: 0;
    overflow: hidden;
}

.article-21 ul.retailers {
    max-height: 236px;
    overflow-y: scroll;
}

.article-21 ul li {
    list-style: none;
    width: 50%;
    float: left;
    border-bottom: 1px dashed #B8D200;
    font-size: 20px;
    line-height: 58px;
}

.article-21 ul.g2 li {
    width: 100%;
}

.article-22 {
    background: #fff;
    position: relative;
}

.article-22::before {
    content: "";
    background: url(../img/bg11.png) no-repeat scroll center/cover;
    position: absolute;
    width: 100%;
    height: 7.29vw;
    top: -3.7vw;
}

.article_con {
    background-image: url(../img/bgs.png), linear-gradient(to bottom, #fff 42px, transparent 42px);
    padding-top: 15rem;
}

.box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    z-index: 2;
    position: relative;
}

.box.box3 {
    align-items: flex-end;
    z-index: 0;
}

.box .p_con {
    width: 50%;
    float: left;
    padding-left: 50px;
    position: relative;
}

.box .num {
    position: absolute;
    top: 8px;
    left: 0;
    font-size: 36px;
    line-height: 48px;
    font-weight: bold;
    color: #98C807;
}

.box .p_con .tit {
    font-size: 36px;
    font-size: calc(1.325rem + .7vw);
    line-height: 48px;
    font-weight: bold;
    border-bottom: 1px dashed #B8D200;
    padding: 0.5rem 0;
}

.box .p_con p {
    font-size: 16px;
    line-height: 30px;
    color: #595959;
    padding-top: 0.5rem;
}

.box .p_img {
    width: 35%;
    float: left;
}

.line1 {
    background-image: url(../img/line1.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 122px;
    z-index: 1;
    margin-left: 90px;
    width: calc(100% - 90px);
}

.line2 {
    background-image: url(../img/line2.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 180px;
    z-index: 1;
    margin-bottom: -90px;
    margin-top: -50px;
    margin-left: 160px;
    width: calc(100% - 160px);
}

.line3 {
    background-image: url(../img/line3.png);
    background-size: 100%;
    background-repeat: no-repeat;
    height: 120px;
    z-index: 1;
    margin-left: 120px;
    width: calc(100% - 120px);
}

.icon1 {
    background-image: url(../img/l2.png);
    width: 4.63vw;
    height: 4.01vw;
    position: absolute;
    background-size: 100%;
    left: 6.92vw
}

.icon2 {
    background-image: url(../img/l1.png);
    width: 9.8vw;
    height: 5.2vw;
    position: absolute;
    background-size: 100%;
    background-repeat: no-repeat;
    right: 0;
    bottom: 5.2vw;
}

.icon3 {
    background-image: url(../img/l1.png);
    width: 9.8vw;
    height: 5.2vw;
    position: absolute;
    background-size: 100%;
    left: 0;
    top: 8.8vw;
}

.icon4 {
    background-image: url(../img/l2.png);
    width: 4.63vw;
    height: 4.01vw;
    position: absolute;
    background-size: 100%;
    left: -3.33vw;
    bottom: 3.02vw;
}

.icon5 {
    background-image: url(../img/l1.png);
    width: 9.8vw;
    height: 5.2vw;
    position: absolute;
    background-size: 100%;
    right: 0;
    right: 2.95vw;
    bottom: 9.42vw;
}

@media (max-width:1750px) {
    .b_btn {
        padding: 18%;
    }
}

@media (max-width:1600px) {
    .b_btn {
        padding: 15%;
    }
}

@media (max-width:1500px) {
    .n_bg::before {
        width: 10vw;
        height: 10vw;
        left: -5vw;
        top: -5vw;
    }
    .n_bg::after {
        width: 13vw;
        height: 13vw;
        right: -3vw;
        bottom: -1vw;
    }
}

@media (max-width:1400px) {
    .n_bg p {
        font-size: 20px;
        line-height: 30px;
    }

}

@media (max-width: 1399.9px) {
    .article_con ul li.inner p {
        width: 70%;
        word-wrap: break-word;
        word-break: normal;
    }
}

@media (max-width:1200px) {
    .n_bg {
        padding: 5rem 4rem;
    }
    .n_bg p {
        font-size: 18px;
        line-height: 30px;
    }
    .n_bg p {
        font-size: 18px;
        line-height: 30px;
    }
}

@media (max-width:1100px) {
    .b_btn {
        padding: 12%;
    }
}

@media (max-width:991.9px) {
    .n_bg {
        background-size: 100% 100%;
    }
    .line1 {
        margin-bottom: -56px;
    }
    .line2 {
        margin-bottom: -130px;
        margin-top: -30px;
        margin-left: 120px;
        width: calc(100% - 120px);
    }
    .line3 {
        margin-left: 60px;
        margin-bottom: -66px;
        width: calc(100% - 60px);
    }
}

@media (max-width:767.9px) {
    .waves1 {
        display: none;
    }
    .n_bg {
        padding: 150px 2rem;
    }
    .line1,
    .line2,
    .line3 {
        background-image: unset;
    }
    .n_bg::before,
    .n_bg::after {
        background-image: unset;
    }
    .article-21 {
        background-image: unset;
        padding-top: 3rem;
    }
    .icon3,
    .icon4,
    .icon5 {
        background-image: unset;
    }
    .article_con {
        background-image: unset;
        padding-top: 3rem;
    }
    .box {
        display: block;
    }
    .box .p_con {
        width: 100%;
    }
    .box .p_img {
        width: 100%;
    }
}