@charset "utf-8";
/* 레이아웃, 공통 */
.layout {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}
.layout-wide {
    width: 94%;
    max-width: 1720px;
    margin: 0 auto;
}
.btn-area .btn {
    height: clamp(50px, calc(60 / var(--inner) * 100vw), 60px);
    padding: 0 var(--space-30);
    background-color: var(--color-dark);
}
.btn-area .btn:hover {
    transform: translateY(5px);
}
    /*  미디어쿼리 */
    @media all and (max-width: 640px) {
        .layout-wide {
            width: 90%;
        }
        .layout-large {
            width: 90%;
        }
        .btn-more {
            font-size: var(--font-16);
            gap: 0 var(--space-14);
            padding: var(--space-15) var(--space-25) var(--space-20);
        }
        .btn-more span.font20 {
            font-size: var(--font-16);
        }
    }

/* 메인 비주얼 */
.main-visual {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}
.main-visual .swiper,
.main-visual .swiper-wrapper,
.main-visual .swiper-slide,
.main-visual .imgarea {
    height: 100%
}
.main-visual .swiper-slide .layout-wide {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2
}
.main-visual .swiper-slide {
    position: relative;
}
.main-visual .logoarea {
    width: clamp(250px, calc(398 / var(--inner) * 100vw), 398px);
}
.main-visual .imgarea video,
.main-visual .imgarea img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.main-visual .swiper-slide .txtarea {
    text-align: left;
    margin-bottom: clamp(150px, calc(250 / var(--inner) * 100vw), 250px);
}
    /*  미디어쿼리 */
    @media all and (max-width: 1000px) {
        .main-visual {
            height: 50vh;
        }
    }
    @media all and (max-width: 640px) {
        .main-visual {
            width: 100%;
            height: 80vh;
        }
        .main-visual .swiper-slide .txtarea {
            text-align: center;
        }
    }


/* 공통 */
#sub-content {
    padding-top: clamp(60px, calc(100 / var(--inner) * 100vw), 100px);
}
.sub-tit-logo {
    width: clamp(180px, calc(240 / var(--inner) * 100vw), 240px);
    margin: 0 auto;
}
.section-tit-area span {
    width: 4px;
    height: 16px;
    margin-right: var(--space-10);
    background-color: var(--color-dark);
}
.flex-box-area .imgarea,
.flex-box-area .textarea {
    width: 50%;
}
.list-check {
    position: relative;
    padding-left: clamp(23px, calc(28 / var(--inner) * 100vw), 28px);
}
.list-check span {
    position: absolute;
    top: clamp(4px, calc(5 / var(--inner) * 100vw), 5px);
    left: 0;
    display: flex;
    justify-content: center;
    width: clamp(15px, calc(18 / var(--inner) * 100vw), 18px);
    height: clamp(15px, calc(18 / var(--inner) * 100vw), 18px);
    background-color: var(--color-gray);
    border-radius: var(--border-radius);
}
.list-check span img {
    width: 50%;
}
.number-textarea .item {
    position: relative;
    margin-bottom: var(--space-20);
    padding-bottom: var(--space-20);
    border-bottom: var(--border);
    padding-left: clamp(35px, calc(40 / var(--inner) * 100vw), 40px);
}
.number-textarea .item:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.number-textarea .number {
    position: absolute;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: clamp(25px, calc(30 / var(--inner) * 100vw), 30px);
    aspect-ratio: 1;
    background: var(--color-dark);
    border-radius: var(--border-radius);
    color: var(--color-white);
    font-size: var(--font-14);
    font-weight: var(--fw-semibold);
}
/* .number-textarea .number-textwrap {
    padding-top: var(--space-5);
} */
.process-list {
    gap: var(--space-75);
}
.process-list .item {
    position: relative;
}
.process-list .item .icon {
    position: relative;
    width: clamp(150px, calc(220 / var(--inner) * 100vw), 220px);
    aspect-ratio: 1;
    margin: 0 auto var(--space-30) auto;
    border-radius: var(--border-radius);
    text-align: center;
}
.process-list .item .icon::after {
    position: absolute;
    top: 50%;
    right: -20%;
    transform: translateY(-50%);
    content: "";
    display: block;
    width: 10px;
    height: 20px;
    background: url("/public/images/process-arrow.svg") no-repeat center / 10px auto;
}
.process-list .item:last-of-type .icon::after {
    display: none;
}
.process-list .icon img {
    width: 17%;
    margin-bottom: var(--space-10);
}

    @media all and (max-width: 1200px) {
        .process-list {
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-100);
        }
        .process-list .item .icon {
            width: 100%
        }
        .process-list .item .icon::after {
            right: -15%;
        }
        .process-list .item:nth-of-type(3) .icon::after {
            display: none;
        }
    }
    @media all and (max-width: 1000px) {
        .flex-box-area {
            flex-wrap: wrap;
        }
        .flex-box-area .imgarea,
        .flex-box-area .textarea {
            width: 100%
        }
        .list-check span img {
            width: 48%;
        }
        .process-list .item .icon::after {
            right: -15%;
            width: 8px;
            height: 16px;
            background: url("/public/images/process-arrow.svg") no-repeat center / 8px auto;
        }
    }
    @media all and (max-width: 768px) {
        .process-list .item .icon::after {
            right: -19%;
        }
    }
    @media all and (max-width: 640px) {
        .process-list {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-60) var(--space-20);
        }
        .process-list .item .icon::after {
            display: none;
        }
    }


/* art storage */
.storage-service-area .textarea {
    padding-left: var(--space-60);
}
.system-management-area .textarea:last-of-type {
    padding-left: var(--space-60);
    border-left: var(--border);
}

    @media all and (max-width: 1000px) {
        .storage-service-area .textarea {
            padding-top: var(--space-60);
            padding-left: 0;
        }
        .system-management-area .textarea:last-of-type {
            padding-top: var(--space-60);
            padding-left: 0;
            border-left: 0;
        }
        
    }
    /* @media all and (max-width: 414px) {
        .process-list {
            grid-template-columns: repeat(1, 1fr);
            gap: var(--space-40);
        }
        .process-list .item .icon::after {
            display: none;
        }
    } */


/* import·export service */
.main-service-area .textarea {
    margin-right: var(--space-60);
}
    @media all and (max-width: 1000px) {
        .main-service-area .textarea {
            margin-right: 0;
            margin-bottom: var(--space-60);
        }
    }


/* art appraisal & valuation */
.art-appraisal-valuation3 .process-list {
    width: min(100%, 1104px);
    margin: 0 auto;
}
.art-appraisal-valuation3 .process-list .item .icon {
    width: 100%;
}


/* art collateral loans */
.art-collateral-loans3 .process-list {
    gap: var(--space-60);
}
.art-collateral-loans3 .process-list .item .icon {
    width: clamp(110px, calc(180 / var(--inner) * 100vw), 180px);
}
.art-collateral-loans3 .process-list .item .icon::after {
    right: -20%;
    width: 8px;
    height: 16px;
    background: url("/public/images/process-arrow.svg") no-repeat center / 8px auto;
}
.art-collateral-loans4 .textarea-wrap .textarea-right {
    padding-left: var(--space-60);
    border-left: var(--border);
}

    @media all and (max-width: 1200px) {
        .art-collateral-loans3 .process-list {
            gap: var(--space-100);
        }
        .art-collateral-loans3 .process-list .item .icon {
            width: 100%;
        }
        .art-collateral-loans3 .process-list .item .icon::after {
            right: -15%;
            width: 10px;
            height: 20px;
            background: url("/public/images/process-arrow.svg") no-repeat center / 10px auto;
        }
    }
    @media all and (max-width: 1000px) {
        .art-collateral-loans4 .textarea-wrap {
            flex-wrap: wrap;
        }
        .art-collateral-loans4 .textarea-wrap .textarea-right {
            padding-top: var(--space-40);
            padding-left: 0;
            border-left: 0;
        }
    }
    @media all and (max-width: 640px) {
        .art-collateral-loans3 .process-list {
            gap: var(--space-60) var(--space-20);
        }
    }


/* contact */
.map-info-area .map-content,
.map-info-area .info-content {
    width: 50%;
}
.map-content {
    height: clamp(300px, calc(500 / var(--inner) * 100vw), 500px);
}
.map-info-area .info-content {
    padding-left: var(--space-60);
}
    @media all and (max-width: 1000px) {
        .map-info-area {
            flex-wrap: wrap;
        }
        .map-info-area .map-content,
        .map-info-area .info-content {
            width: 100%;
        }
        .map-info-area .info-content {
            padding-top: var(--space-60);
            padding-left: 0;
        }
    }