@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);
}

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




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

.home_title {
    padding-bottom: .7rem;
}

.title_img {
    width: 7.27rem;
}

.title_explain {
    margin-top: 10px;
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    font-weight: 400;
}

.homeAbout_list {
    gap: .4rem;
}

.homeAbout_list li {
    width: calc(50% - .2rem);
}

@media only screen and (max-width: 500px) {
    .homeAbout_list li {
        width: 100%;
    }

    .title_explain {
        font-size: 12px;
    }

    .part01 {
        padding: 20px 0 30px;
    }
}











/* ==========================================================================
   part02
========================================================================== */
.part02 {
    padding: 0 0 1rem;
}

.home_pro {
    justify-content: space-between;
    margin: 0 0 0 -0.4rem;
}

.homePro_left {
    width: calc(50% - .4rem);
    margin: 0 0 0 .4rem;
}

.homePro_right {
    width: calc(50% - .4rem);
    margin: 0 0 0 .4rem;
    flex-direction: column;
    align-items: center;
}

.homePro_title {
    color: rgba(0, 0, 0, 1);
    font-size: .24rem;
    font-weight: 600;
}

.homePro_intro {
    color: rgba(0, 0, 0, 1);
    font-size: 14px;
    font-weight: 400;
    margin: .1rem 0 .3rem;
}

.homePro_link {
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-weight: 400;
    padding: 5px 10px;
    background: rgba(23, 27, 40, 1);
}

.homePro_list {
    gap: .4rem;
    margin: .45rem 0 0;
}

.homePro_list li {
    width: calc(50% - .2rem);
    border-radius: .08rem;
    transition: box-shadow .4s;
}

.homePro_list li:hover {
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}

.homePro_box {
    height: 100%;
    padding: .1rem 0;
    border-radius: .08rem;
    /* background: rgba(237, 237, 242, 1); */
    background: rgb(244, 200, 0);
}

.homePro_box .pic .bgimg {
    width: 2rem;
}

.homePro_name {
    color: rgba(0, 0, 0, 1);
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 500;
    line-height: 125%;
    text-align: center;
    padding: .2rem 0;
}

.homePro_img {
    width: 82.15%;
}

.homePro_right .homePro_con {
    width: 5.6rem;
    max-width: 100%;
    margin-top: auto;
}

@media only screen and (max-width: 500px) {
    .homePro_left {
        width: 100%;
    }

    .homePro_title {
        font-size: 14px;
    }

    .homePro_link,
    .homePro_name,
    .homePro_intro {
        font-size: 12px;
    }

    .homePro_right {
        width: 100%;
        margin-top: 20px;
    }

    .homePro_right .homePro_con {
        width: 100%;
        margin-top: 20px;
    }

    .part02 {
        padding: 0 0 20px;
    }
}










/* ==========================================================================
   footer
   ========================================================================== */
footer {
    position: relative;
    background: url(../images/foot.png) center no-repeat;
    background-size: cover;
}

footer img {
    max-width: 100%;
}

footer a {
    color: #fff;
}

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

.foot_flex {
    justify-content: space-between;
    padding: .85rem 0 .75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.foot_logo {
    width: 3.35rem;
}

.foot_slogan {
    width: 3.35rem;
    margin-top: .2rem;
}

.foot_list li {
    margin-right: 1.15rem;
}

.foot_h3 {
    color: rgba(244, 200, 0, 1);
    font-family: Montserrat;
    font-size: 16px;
    font-weight: 700;
    position: relative;
    padding-bottom: .15rem;
}

.foot_h3::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: .1rem;
    width: .23rem;
    height: 1px;
    background: rgba(244, 200, 0, 1);
}

.foot_h4 {
    color: rgba(255, 255, 255, 1);
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 5px;
}

.foot_h5 {
    color: rgba(255, 255, 255, 1);
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 400;
}

.external_link {
    height: 100%;
    align-items: flex-end;
}

.external_link a:not(:last-of-type) {
    margin-right: .18rem;
}


.foothd {
    padding: .3rem 0;
}

.foothd_area {
    color: rgba(255, 255, 255, 1);
    font-family: Montserrat;
    font-size: 14px;
    font-weight: 400;
}

.space {
    display: inline-block;
    width: .2rem;
}

@media only screen and (max-width: 1024px) {
    .foot_list li {
        margin-right: .6rem;
    }
}

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

    .space:nth-child(2) {
        display: block;
        width: 0;
    }
}

@media only screen and (max-width: 500px) {
    .foothd_area {
        font-size: .22rem;
    }

    .space:nth-child(2) {
        display: inline-block;
        width: 0px;
    }

    .space {
        width: 0px;
    }
}