@import url(./layout.css);

/* ==========================================================================
   common part
========================================================================== */
.pic {
    overflow: hidden;
    position: relative;
    height: auto;
}

.bgimg {
    width: 100%;
}

.upimg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: all .5s;
}

.pic:hover .upimg {
    transform: scale(1.05);
}

/* 没有放大效果 */
.upimg2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

/* 居中对齐 */
.upimg3 {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 100%;
    max-height: 100%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transition: all .5s;
}

.pic:hover .upimg3 {
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

/* 缩小放大 */
.upimg4 {
    position: absolute;
    left: 50%;
    top: 50%;
    max-width: 100%;
    max-height: 100%;
    -webkit-transform: translate(-50%, -50%) scale(0.93);
    transform: translate(-50%, -50%) scale(0.93);
    transition: all .5s;
}

.pic:hover .upimg4 {
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

/* 背景模式 */
.upimg5 {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all .5s;
}

.pic:hover .upimg5 {
    transform: scale(1.05);
}

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




/* ==========================================================================
   banner
========================================================================== */
.banner {
    padding: .45rem 0;
}

.banner_flex {
    gap: .35rem;
}

.banner_left {
    width: 3.55rem;
    border-bottom: 1px solid rgba(237, 238, 242, 1);
    border-radius: .08rem;
    box-shadow: 0px 0px .15rem 0px rgba(0, 0, 0, 0.12);
    background: rgba(255, 255, 255, 1);
}

.banner_right {
    width: calc(100% - 3.9rem);
}

.banner_swiper .pic {
    border-radius: .08rem;
}

.homePro_category {
    position: relative;
    height: 100%;
    padding: .1rem 0;
}

.hpc_title {
    align-items: center;
    justify-content: space-between;
    color: rgba(51, 51, 51, 1);
    font-size: var(--font16);
    font-weight: 400;
    line-height: .5rem;
    padding: 0 .2rem;
    margin: 0 .15rem;
    border-radius: .08rem;
    transition: all .3s;
}

.hpc_item:not(:last-of-type) .hpc_title {
    border-bottom: 1px solid rgba(234, 237, 242, 1);
}

.hpc_title i {
    color: rgba(128, 128, 128, 1);
}

.hpc_item:hover .hpc_title {
    background: rgba(206, 22, 22, 1);
    color: rgba(255, 255, 255, 1);
    font-weight: 600;
}

.hpc_item:hover .hpc_title i {
    color: rgba(255, 255, 255, 1);
}

.hpc_title a {
    color: inherit;
}

.hpc_box {
    position: absolute;
    z-index: 9;
    left: 100%;
    top: 0;
    height: 100%;
    width: 100%;
    background: #fff;
    box-shadow: 0px 0px .15rem 0px rgba(0, 0, 0, 0.12);
    padding: .1rem;
    border-radius: .08rem;
    display: none;
}

.hpc_item:hover .hpc_box {
    display: block;
}

.hpc_list {
    flex-direction: column;
    max-height: 100%;
}

.hpc_list li {
    line-height: .5rem;
    padding: 0 .2rem;
}

.hpc_link {
    color: rgba(51, 51, 51, 1);
    font-size: var(--font16);
    white-space: nowrap;
    position: relative;
}

.hpc_link::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -0.03rem;
    width: 0;
    height: 1px;
    background: var(--primary);
    transition: all .35s;
}

.hpc_link:hover::before {
    width: 100%;
}

.banner_swiper .swiper-horizontal>.swiper-pagination-bullets {
    text-align: right;
    padding-right: .1rem;
}

.banner_swiper .swiper-pagination-bullet {
    background: rgba(255, 255, 255, 1);
    opacity: 1;
    width: .2rem;
    height: .2rem;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 .05rem;
}

.banner_swiper .swiper-pagination-bullet-active {
    background: rgba(206, 22, 22, 1);
}

.advert {
    margin-top: .4rem;
    overflow: hidden;
    border-radius: .08rem;
}

.advert img {
    width: 100%;
}









/* ==========================================================================
   part01
========================================================================== */
.part01 {
    padding: .68rem 0 .74rem;
    background: linear-gradient(135.00deg, rgba(206, 222, 247, 1) 0%, rgba(241, 234, 241, 1) 14.021%, rgba(245, 247, 249, 1) 56.54%, rgba(226, 236, 246, 1) 83.122%, rgba(213, 210, 242, 1) 100%);
}

.home_heading {
    justify-content: space-between;
    align-items: center;
}

.home_title {
    gap: .3rem;
    align-items: center;
}

.home_h2 {
    color: rgba(51, 51, 51, 1);
    font-size: var(--font24);
    font-weight: 400;
}

.home_h4 {
    color: rgba(136, 136, 136, 1);
    font-size: var(--font16);
    font-weight: 400;
}

.home_more {
    border-radius: .09rem;
    background: rgba(211, 17, 17, 1);
    padding: .04rem .12rem;
    color: rgba(255, 255, 255, 1);
    font-size: var(--font16);
    font-weight: 400;
}

.home_more:hover {
    color: #fff;
}

.home_more i {
    margin-left: .1rem;
    transition: all .35s;
}

.home_more:hover i {
    transform: translateX(.05rem);
}

.homePro_list {
    gap: .35rem;
    margin-top: .45rem;
}

.homePro_list li {
    width: calc(20% - .28rem);
}


.homePro_box {
    border-radius: .08rem;
    box-shadow: 0px 0px .29rem 0px rgba(224, 230, 238, 1);
    background: rgba(255, 255, 255, 1);
    padding: .2rem;
    position: relative;
    height: 100%;
}

.homePro_area {
    margin-top: .3rem;
}

.homePro_title {
    color: rgba(0, 0, 0, 1);
    font-size: var(--font18);
    font-weight: 400;
    text-align: center;
    height: calc(var(--font18) * 3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.homePro_intro {
    margin: .05rem 0;
    color: rgba(136, 136, 136, 1);
    font-size: var(--font16);
    font-weight: 400;
    text-align: center;
    height: calc(var(--font16) * 3);
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 2;
    -webkit-line-clamp: 2;
}

.homePro_price {
    align-items: baseline;
    justify-content: center;
    gap: .2rem;
}

.discount {
    color: rgba(211, 17, 17, 1);
    font-size: var(--font24);
    font-weight: 600;
}

.original {
    color: rgba(136, 136, 136, 1);
    font-size: var(--font18);
    font-weight: 400;
    text-decoration: line-through;
}

.homePro_cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-bottom: .03rem solid rgba(211, 17, 17, 1);
    border-radius: .08rem;
    box-shadow: 0px 0px 29px 0px rgba(224, 230, 238, 1);
    background: linear-gradient(180.00deg, rgba(97, 114, 135, 0.8) 30.031%, rgba(97, 114, 135, 0) 83.122%);
    opacity: 0;
    transition: all .4s;
}

.homePro_box:hover .homePro_cover {
    opacity: 1;
}

.homePro_tool {
    margin-top: .7rem;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
}

.homePro_btn {
    border-radius: .08rem;
    box-shadow: 0px .04rem .15rem 0px rgba(134, 143, 155, 1);
    background: rgba(255, 255, 255, 1);
    padding: .12rem .24rem;
    color: rgba(0, 0, 0, 1);
    font-size: var(--font18);
    font-weight: 400;
    gap: .1rem;
    min-width: 1.72rem;
    transition: all .35s;
}

.homePro_btn i {
    color: rgba(211, 17, 17, 1);
    font-size: var(--font24)
}

.homePro_btn:hover {
    transform: translateY(-0.05rem);
    color: var(--primary);
}









/* ==========================================================================
   part02
========================================================================== */
.part02 {
    padding: .7rem 0 .75rem;
    background: #fff;
}

.homePro_nav {
    align-items: center;
    margin-left: .7rem;
    gap: .2rem .5rem;
}

.homePro_nav li {
    position: relative;
}

.homePro_nav li:not(:last-of-type)::before {
    content: "";
    position: absolute;
    right: -0.25rem;
    height: 100%;
    width: 1px;
    background: rgba(218, 223, 230, 1);
}

.homePro_link {
    color: rgba(51, 51, 51, 1);
    font-size: var(--font18);
    font-weight: 400;
}

.mainly li:first-child {
    width: calc(40% - .21rem);
}

.mainly .homePro_box {
    border: 1px solid rgba(227, 229, 238, 1);
    box-shadow: none;
}

.mainly li:first-child .homePro_box {
    padding: 0;
    border-radius: .08rem;
    overflow: hidden;
    height: 100%;
}

.recommend_img {
    object-fit: cover;
    height: 100%;
}

.recommend_name {
    position: absolute;
    left: .5rem;
    bottom: .5rem;
    color: rgba(255, 255, 255, 1);
    font-size: var(--font24);
    font-weight: 600;
}









/* ==========================================================================
   part03
========================================================================== */
.part03 {
    background: rgba(237, 243, 249, 1);
    padding: .7rem 0 .75rem;
}







/* ==========================================================================
   part04
========================================================================== */
.part04 {
    background: rgba(255, 255, 255, 1);
    padding: .7rem 0 .75rem;
}






/* ==========================================================================
   part05
========================================================================== */
.part05 {
    background: rgba(249, 245, 253, 1);
    padding: .7rem 0 .75rem;
}




/* ==========================================================================
   part06
========================================================================== */
.part06 {
    padding: .7rem 0;
}

.home_partner {
    text-align: center;
    color: rgba(51, 51, 51, 1);
    font-size: var(--font24);
    font-weight: 400;
}

.partner_marquee {
    margin: .4rem 0 .75rem;
}

.tempWrap {
    width: 100% !important;
}

.homePartner_list li {
    width: 2.1rem !important;
    margin-left: .45rem;
}

.partner_item .pic {
    background: #fff;
    border-radius: .16rem;
}


.advantage_list {
    gap: .36rem;
}

.advantage_list li {
    width: calc(25% - .27rem);
}

.advantage_box {
    border: 1px solid rgba(226, 228, 238, 1);
    border-radius: .08rem;
    padding: .3rem 0;
    gap: .2rem;
    transition: all .35s;
}

.advantage_h3 {
    color: rgba(0, 0, 0, 1);
    font-size: var(--font18);
    font-weight: 600;
}

.advantage_h4 {
    color: rgba(85, 85, 85, 1);
    font-size: var(--font14);
    font-weight: 400;
    margin-top: .05rem;
}

.advantage_icon {
    width: .44rem;
}

.advantage_box:hover {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);
}






/* ==========================================================================
   part07
========================================================================== */
.part07 {
    background: url(../images/part07.png) no-repeat;
    background-size: cover;
    padding: .7rem 0;
}

.homeCon_flex {
    justify-content: space-between;
    align-items: center;
}

.homeCon_h2 {
    color: rgba(255, 255, 255, 1);
    font-size: var(--font24);
    font-weight: 400;
}

.homeCon_area {
    margin-left: 1rem;
}

.homeCon_h3 {
    color: rgba(255, 255, 255, 1);
    font-size: var(--font18);
    font-weight: 600;
}

.homeCon_h4 {
    color: rgba(255, 255, 255, 1);
    font-size: var(--font18);
    font-weight: 400;
}

.home_call {
    padding: .12rem .24rem;
    border-radius: .08rem;
    background: rgba(206, 22, 22, 1);
    color: rgba(255, 255, 255, 1);
    font-size: var(--font16);
    font-weight: 600;
    gap: .1rem;
}

.home_call:hover {
    color: #fff;
}











/* ==========================================================================
   footer
   ========================================================================== */
footer a {
    color: inherit;
}

footer a:hover {
    text-decoration: underline;
    color: inherit;
}

.foot_main {
    background: rgba(244, 245, 249, 1);
}

.foot_nav {
    justify-content: space-between;
    padding: .8rem 0;
}

.fn_col {
    border-left: 1px solid rgba(207, 211, 222, 1);
    padding-left: .45rem;
}

.fn_h3 {
    color: rgba(0, 0, 0, 1);
    font-size: var(--font18);
    font-weight: 600;
    margin-bottom: .1rem;
}

.fn_list li {
    color: rgba(0, 0, 0, 1);
    font-size: var(--font16);
    font-weight: 400;
    line-height: 2;
}

.fn_ewm {
    width: 1.1rem;
}

.fn_ewm img {
    width: 100%;
}

.ewm_h4 {
    color: rgba(0, 0, 0, 1);
    font-size: var(--font16);
    font-weight: 400;
    text-align: center;
    margin-top: .05rem;
}

.fn_col:last-of-type .fn_h3 {
    text-align: center;
}

.foot_contact {
    color: rgba(0, 0, 0, 1);
    font-size: var(--font16);
    line-height: 2;
    font-weight: 400;
}

.foothd {
    background: rgba(228, 230, 239, 1);
    padding: .2rem 0;
}

.copy_right {
    color: rgba(51, 51, 51, 1);
    font-size: var(--font14);
    font-weight: 400;
    gap: .2rem .5rem;
    justify-content: center;
}


@media only screen and (max-width: 768px) {
    .foot_main {
        display: none;
    }
}


#Lb_pager {
    display: flex;
    justify-content: center;
}