@charset "UTF-8";

.contact-box{width:100%;margin:0 auto;border-radius:24px;border:#e0e0e0 solid 1px;padding:40px;display: flex;justify-content:space-between;align-items: center;}
.contact-info{width:34%;padding:0 20px;}
.contact-info li{display: flex;margin-bottom:24px;}
.contact-info li .icon{width:36px;border-radius:4px;height:36px;background-color: var(--mainColor);display: flex;align-items: center;justify-content:center;}
.contact-info li .icon img{display: block;width:68%;max-width: 24px;}
.contact-info li .txt{margin-top:4px;width:calc(100% - 56px);margin-left:20px;display: flex;font-size:18px;color:#333;line-height:28px;}
.contact-info li .txt .label{width:56px;}
.contact-info li .txt .info{width:calc(100% - 56px);}

.contact-info li.code{margin-bottom:0;}
.contact-info li.code .txt{display: block;}
.contact-info li.code .txt .label{width:100%;}
.contact-info li.code .txt .code-img{width:108px;margin-top:8px;}
.contact-info li.code .txt .code-img img{display: block;max-width:100%;}


.map{width:62.5%;height:460px;}


@media(max-width:1440px){
    .contact-box{padding:32px;}
    .contact-info{padding:0 16px;}
    .contact-info li{margin-bottom:20px;}
    .contact-info li .txt{margin-top:4px;margin-left:16px;font-size:16px;line-height:28px;}
    .contact-info li .txt .label{width:48px;}
    .contact-info li .txt .info{width:calc(100% - 48px);}

    .map{height:400px;}
}
@media(max-width:1080px){
    .contact-box{padding:20px;border-radius:16px;}
    .contact-info{padding:0 12px;}
    .contact-info li{margin-bottom:16px;}
    .contact-info li .icon{width:32px;height:32px;}
    .contact-info li .txt{margin-top:4px;width:calc(100% - 48px);margin-left:12px;font-size:14px;line-height:24px;}
    .contact-info li .txt .label{width:48px;}
    .contact-info li .txt .info{width:calc(100% - 48px);}

    .map{height:400px;}
}


@media(max-width:769px){
    .contact-box{padding:16px;display:block;}
    .contact-info{padding:0;width:100%;}
    .contact-info li{margin-bottom:12px;}
    .contact-info li .icon{width:24px;height:24px;}
    .contact-info li .txt{margin-top:2px;width:calc(100% - 36px);line-height:20px;}
    .contact-info li .txt .label{width:48px;}
    .contact-info li .txt .info{width:calc(100% - 48px);}

    .map{height:320px;width:100%;margin-top:24px;}
}