body {
    background: #F5F5F7
}

.contact1 {
    padding: 100px 0 130px
}

.contact1 .wrap {
    width: 1440px;
    margin: auto
}

.contact1 .wrap .title {
    font-weight: 500;
    font-size: 32px;
    color: #000011;
    margin: 0 0 59px
}

.contact1 .wrap .content .item {
    width: 100%;
    height: 340px;
    background: #FFFFFF;
    border-radius: 12px;
    margin: 0 0 30px;
    position: relative;
    padding: 80px 60px;
    overflow: hidden;
    z-index: 1
}

.contact1 .wrap .content .item:not(:last-child) {
    margin: 0 0 30px
}

.contact1 .wrap .content .item:hover .common_bg {
    opacity: 1
}

.contact1 .wrap .content .item .common_bg {
    opacity: 0;
    transition: .6s ease
}

.contact1 .wrap .content .item .headline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 30px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.contact1 .wrap .content .item .headline .p1 {
    font-weight: bold;
    font-size: 24px;
    color: #111111
}

.contact1 .wrap .content .item .headline .dis {
    display: flex;
    align-items: center;
    gap: 20px
}

.contact1 .wrap .content .item .headline .dis .icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.contact1 .wrap .content .item .headline .dis .icon.icon2 img {
    transform: scale(1.4)
}

.contact1 .wrap .content .item .headline .dis .icon img {
    object-fit: contain
}

.contact1 .wrap .content .item .message {
    margin: 60px 0 0 0;
    display: flex;
    justify-content: space-between
}

.contact1 .wrap .content .item .message .list .to {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 20px
}

.contact1 .wrap .content .item .message .list .to .iconfont {
    font-size: 16px;
    color: #0069AC
}

.contact1 .wrap .content .item .message .list .to p {
    font-weight: bold;
    font-size: 16px;
    color: #111111
}

.contact1 .wrap .content .item .message .list .p1 {
    font-size: 16px;
    color: #444444;
    max-width: 485px
}

.contact1 .wrap .content .item .message .grid {
    width: 740px;
    display: flex;
    gap: 100px
}

html[lang="en"] .contact1 .wrap .content .item .message .grid{
    gap: 50px;
}

.contact1 .wrap .content .item .message .grid .list:first-child {
    width: 160px
}

html[lang="en"] .contact1 .wrap .content .item .message .grid .list:first-child{
    width: fit-content;
}

.contact2 {
    background: #fff;
    padding: 105px 0 98px 0
}

.contact2 .wrap {
    width: 1440px;
    margin: auto
}

.contact2 .wrap .title {
    font-weight: 500;
    font-size: 32px;
    color: #000011;
    line-height: 44px;
    margin: 0 0 77px
}

.contact2 .wrap .content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 70px
}

.contact2 .wrap .content .list {
    width: 680px
}

.contact2 .wrap .content .list.all {
    width: 100%
}

.contact2 .wrap .content .list p {
    font-weight: bold;
    font-size: 14px;
    color: #111111;
    margin: 0 0 40px
}

.contact2 .wrap .content .list input {
    width: 100%;
    padding: 0 0 32px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1)
}

.contact2 .wrap .content .list input::placeholder {
    color: #999999
}

.contact2 .wrap .content .list textarea {
    width: 100%;
    height: 300px;
    background: #FFFFFF;
    padding: 36px 28px;
    font-size: 14px;
    border: none
}

.contact2 .wrap .content .list textarea::placeholder {
    color: #999999
}

.contact2 .wrap .content button {
    width: 700px;
    height: 70px;
    background: #0069AC;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
    font-size: 16px;
    color: #FFFFFF;
    margin: auto
}

@media screen and (max-width: 1919px) {
    .contact1{
        padding: 5.2083333333vw 0px 6.7708333333vw;
    }
    .contact1 .wrap{
        width: 75vw;
    }
    .contact1 .wrap .title{
        font-size: 1.6666666667vw;
        margin: 0px 0px 3.0729166667vw;
    }
    .contact1 .wrap .content .item{
        height: 17.7083333333vw;
        border-radius: 0.625vw;
        margin: 0px 0px 1.5625vw;
        padding: 4.1666666667vw 3.125vw;
    }
    .contact1 .wrap .content .item:not(:last-child){
        margin: 0px 0px 1.5625vw;
    }
    .contact1 .wrap .content .item .headline{
        padding: 0px 0px 1.5625vw;
    }
    .contact1 .wrap .content .item .headline .p1{
        font-size: 1.25vw;
    }
    .contact1 .wrap .content .item .headline .dis{
        gap: 1.0416666667vw;
    }
    .contact1 .wrap .content .item .headline .dis .icon{
        width: 1.0416666667vw;
        height: 1.0416666667vw;
    }
    .contact1 .wrap .content .item .message{
        margin: 3.125vw 0px 0px;
    }
    .contact1 .wrap .content .item .message .list .to{
        gap: 0.4166666667vw;
        margin: 0px 0px 1.0416666667vw;
    }
    .contact1 .wrap .content .item .message .list .to .iconfont{
        font-size: 0.8333333333vw;
    }
    .contact1 .wrap .content .item .message .list .to p{
        font-size: 0.8333333333vw;
    }
    .contact1 .wrap .content .item .message .list .p1{
        font-size: 0.8333333333vw;
        max-width: 25.2604166667vw;
    }
    .contact1 .wrap .content .item .message .grid{
        width: 38.5416666667vw;
        gap: 5.2083333333vw;
    }

    html[lang="en"] .contact1 .wrap .content .item .message .grid{
        gap: 2.60416666666666666vw;
    }
    .contact1 .wrap .content .item .message .grid .list:first-child{
        width: 8.3333333333vw;
    }
    .contact2{
        padding: 5.46875vw 0px 5.1041666667vw;
    }
    .contact2 .wrap{
        width: 75vw;
    }
    .contact2 .wrap .title{
        font-size: 1.6666666667vw;
        line-height: 2.2916666667vw;
        margin: 0px 0px 4.0104166667vw;
    }
    .contact2 .wrap .content{
        gap: 3.6458333333vw;
    }
    .contact2 .wrap .content .list{
        width: 35.4166666667vw;
    }
    .contact2 .wrap .content .list p{
        font-size: 0.7291666667vw;
        margin: 0px 0px 2.0833333333vw;
    }
    .contact2 .wrap .content .list input{
        padding: 0px 0px 1.6666666667vw;
    }
    .contact2 .wrap .content .list textarea{
        height: 15.625vw;
        padding: 1.875vw 1.4583333333vw;
        font-size: 0.7291666667vw;
    }
    .contact2 .wrap .content button{
        width: 36.4583333333vw;
        height: 3.6458333333vw;
        font-size: 0.8333333333vw;
    }
}

@media screen and (max-width: 1024px) {
    .contact1 .wrap{
        width: 90%;
    }
    .contact1{
        padding: 50px 0;
    }
    .contact1 .wrap .title{
        font-size: 22px;
        margin: 0 0 25px;
    }
    .contact1 .wrap .content .item:not(:last-child){
        margin: 0 0 15px;
    }
    .contact1 .wrap .content .item{
        height: auto;
        padding: 20px 5%;
    }
    .contact1 .wrap .content .item .headline{
        padding: 0 0 15px;
    }
    .contact1 .wrap .content .item .headline .p1{
        font-size: 15px;
    }
    .contact1 .wrap .content .item .headline .dis{
        gap: 15px;
    }
    .contact1 .wrap .content .item .headline .dis .icon{
        width: 15px;
        height: 15px;
    }
    .contact1 .wrap .content .item .message{
        margin: 20px 0 0 0;
        flex-direction: column;
    }

    .contact1 .wrap .content .item .message .list .to .iconfont{
        font-size: 13px;
    }
    .contact1 .wrap .content .item .message .list .to p{
        font-size: 13px;
    }
    .contact1 .wrap .content .item .message .list .to{
        gap: 10px;
        margin: 0 0 10px;
    }
    .contact1 .wrap .content .item .message .list .p1{
        font-size: 13px;
        max-width: 100%;
    }

    .contact1 .wrap .content .item .message .grid .list{
        width: fit-content!important;
    }
    .contact1 .wrap .content .item .message .grid{
        width: 100%;
        flex-direction: column;
        gap: 20px!important;
        margin: 20px 0 0 0;
    }

    .contact2{
        padding: 50px 0;
    }
    .contact2 .wrap{
        width: 90%;
    }
    .contact2 .wrap .title{
        font-size: 17px;
        line-height: 30px;
        margin: 0 0 35px;
    }
    .contact2 .wrap .content{
        gap: 15px;
    }
    .contact2 .wrap .content .list{
        width: 100%;
    }
    .contact2 .wrap .content .list p{
        font-size: 13px;
        margin: 0 0 12px;
    }
    .contact2 .wrap .content .list input{
        padding: 0 0 20px;
    }

    .contact2 .wrap .content .list textarea{
        height: 90px;
        padding: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        font-size: 13px;
    }
    .contact2 .wrap .content button{
        width: fit-content;
        padding: 0 25px;
        font-size: 13px;
        height: 42px;
    }
}