@charset "utf-8";
/* 레이아웃, 공통 */
.layout {
    width: 96%;
    max-width: 1800px;
    margin: 0 auto;
}

.main-visual {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 100vh;
    background: url("/public/images/main-visual.jpg") no-repeat center / cover;
}
.main-visual .layout {
    height: 100%;
}
.main-visual-text {
    width: 100%;
    margin-bottom: var(--space-80);
}
.main-visual-title {
    width: clamp(280px, calc(960 / var(--inner) * 100vw), 960px);
}

.main-label {
    height: clamp(20px, calc(24 / var(--inner) * 100vw), 24px);
    padding: 0 var(--space-10);
    margin-bottom: var(--space-20);
    border: var(--border);
    border-radius: var(--border-radius);
}
.main-about-title {
    margin-bottom: var(--space-60);
}
.main-about-desc {
    margin-bottom: var(--space-100);
}
.main-more:hover {
    transform: translateY(5px);
}
.main-more img {
    width: clamp(11px, calc(15 / var(--inner) * 100vw), 15px);
    margin-left: var(--space-10);
}
.main-about-img {
    max-width: 740px;
}
.main-about-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.main-service {
    width: 100%;
    background: url("/public/images/main-service-bg.jpg") no-repeat center / cover;
}
.main-label-white {
    border-color: var(--color-white);
    color: var(--color-white);
}
.main-service-list {
    margin-bottom: var(--space-100);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.main-service-item {
    padding: var(--space-80) var(--space-40);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
}
.main-service-icon {
    width: clamp(80px, calc(156 / var(--inner) * 100vw), 156px);
    margin: 0 auto var(--space-60) auto;
}
.main-service-icon img {
    width: 100%;
    object-fit: contain;
}

.main-team-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    margin-bottom: var(--space-20);
}
.main-team-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-team-position {
    display: block;
    margin-bottom: var(--space-5);
}

.main-contact {
    width: 100%;
    background: url("/public/images/main-contact-bg.jpg") no-repeat center / cover;
}
.main-contact .input-box {
    display: flex;
    align-items: center;
    height: clamp(50px, calc(60 / var(--inner) * 100vw), 60px);
    padding: 0 var(--space-30);
    background-color: var(--color-white);
}
.main-contact .input-box.w100 {
    grid-column: 1 / 4;
}
.main-contact .input-style {
    width: 100%;
    height: 100%;
    font-size: var(--font-20);
}
.main-contact .input-textarea {
    height: clamp(150px, calc(200 / var(--inner) * 100vw), 200px);
    padding: var(--space-20) var(--space-30);
}
.main-contact .input-policy-agree {
    margin-top: var(--space-80);
}
.main-contact .btn-radio {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.main-contact .btn-radio svg {
    width: 15px; 
    height: 15px;
    fill: none;
    vertical-align: middle;
}
.main-contact .btn-radio svg circle {
    stroke-width: 1;
    stroke: var(--color-white);
}
.main-contact .btn-radio svg path {
    stroke: var(--color-white);
}
.main-contact .btn-radio svg path.inner {
    stroke-width: 6;
    stroke-dasharray: 19;
    stroke-dashoffset: 19;
}
.main-contact .btn-radio svg path.outer {
    stroke-width: 1;
    stroke-dasharray: 57;
    stroke-dashoffset: 57;
}
.main-contact .btn-radio input {
    display: none;
}
.main-contact .btn-radio input:checked + svg path {
    transition: var(--transition);
}
.main-contact .btn-radio input:checked + svg path.inner {
    stroke-dashoffset: 38;
    transition-delay: 0.3s;
}
.main-contact .btn-radio input:checked + svg path.outer {
    stroke-dashoffset: 0;
}
.main-contact .btn-radio span {
    display: inline-flex;
    margin-right: var(--space-10);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--font-18);
    transition: var(--transition);
}
.main-contact .btn-radio input:checked ~ span {
    color: rgba(255, 255, 255, 1);
}
.main-contact-submit {
    margin-top: var(--space-40);
}
.main-contact-submit button {
    height: clamp(50px, calc(60 / var(--inner) * 100vw), 60px);
    padding: 0 var(--space-30);
    border: var(--border-white);
    transition: var(--transition);
}
.main-contact-submit button:hover {
    transform: translateY(5px);
}
.main-contact-submit button svg {
    width: clamp(11px, calc(15 / var(--inner) * 100vw), 15px);
    margin-left: var(--space-10);
}
    @media all and (max-width: 1200px) {
        .main-visual {
            height: 80vh;
        }
        .main-visual-text {
            flex-wrap: wrap;
        }
        .main-visual-title {
            width: 100%;
            margin-bottom: var(--space-60);
        }
        .main-visual-copy {
            width: 100%;
        }

        .main-about-wrap {
            flex-wrap: wrap;
            flex-direction: column;
            align-items: flex-start;
        }
        .main-about-text {
            width: 100%;
            margin-bottom: var(--space-100);
        }
        .main-about-img {
            width: 100%;
            height: 300px;
            max-width: 100%;
        }

        .main-why-list {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-60) var(--space-30);
        }
        .main-service-list {
            grid-template-columns: repeat(2, 1fr);
        }
        .main-service-list .main-service-item:nth-of-type(3),
        .main-service-list .main-service-item:nth-of-type(4){
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }
    }
    @media all and (max-width: 640px) {
        .main-visual {
            height: 70vh;
        }

        .main-about-img {
            height: 200px;
        }

        .main-why-list {
            grid-template-columns: repeat(1, 1fr);
            gap: var(--space-80) 0;
        }
        .main-service-list {
            grid-template-columns: repeat(1, 1fr);
        }
        .main-service-item {
            padding: var(--space-100) 0;
        }
        .main-service-list .main-service-item:nth-of-type(2) {
            border-top: 1px solid rgba(255, 255, 255, 0.2);
        }

        .main-contact .input-area {
            grid-template-columns: repeat(1, 1fr);
        }
        .main-contact .input-box.w100 {
            grid-column: 1 / 1;
        }
        .main-contact .input-textarea {
            padding: var(--space-30);
        }
    }


/* 서브 공통 */
aside {
    width: 100%;
    height: clamp(250px, calc(550 / var(--inner) * 100vw), 550px);
}
.about aside {
    background: url("/public/images/about.jpg") no-repeat center / cover;
}
.why_arc aside {
    background: url("/public/images/why.jpg") no-repeat center / cover;
}
.services aside {
    background: url("/public/images/services.jpg") no-repeat center / cover;
}
.team aside {
    background: url("/public/images/team.jpg") no-repeat center / cover;
}
.market aside {
    background: url("/public/images/market.jpg") no-repeat center / cover;
}
.join aside {
    background: url("/public/images/join.jpg") no-repeat center / cover;
}
.policy aside {
    background: url("/public/images/policy.jpg") no-repeat center / cover;
}
aside .layout {
    position: relative;
    height: 100%;
}
.aside-tit-area {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/* 서브 */
.about-ceo-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-ceo-text {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.about-ceo-sign {
    position: absolute;
    right: 6%;
    bottom: 0;
}
.about-ceo-sign img {
    width: clamp(70px, calc(139 / var(--inner) * 100vw), 139px);
}
.about-value-list {
    width: min(1200px, 100%);
    margin: 0 auto;
    border: var(--border);
    border-width: 0 1px;
}
.about-value-item {
    width: 50%;
    padding: var(--space-80) var(--space-40);
}
.about-value-item + .about-value-item {
    border-left: var(--border);
}
.about-value-item .icon {
    width: clamp(70px, calc(174 / var(--inner) * 100vw), 174px);
    height: clamp(70px, calc(174 / var(--inner) * 100vw), 174px);
    margin: 0 auto var(--space-40) auto;
}
.about-value-item .icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.about-organization {
    width: 100%;
    background: url("/public/images/about-org-bg.jpg") no-repeat center / cover;
}
.about-org-left {
    width: min(900px, 100%);
}
.about-org-right {
    width: min(780px, 100%);
}
.about-org-accordion {
    width: 100%;
}
.about-org-row {
    padding: var(--space-40) 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
.about-org-toggle {
    position: relative;
    width: 100%;
    text-align: left;
    color: var(--color-white);
    cursor: pointer;
}
.about-org-toggle span {
    transition: var(--transition);
}
.about-org-arrow {
    position: absolute;
    right: clamp(4px, calc(10 / var(--inner) * 100vw), 10px);
    top: 50%;
    width: clamp(12px, calc(16 / var(--inner) * 100vw), 16px);
    height: clamp(12px, calc(16 / var(--inner) * 100vw), 16px);
    transform: translateY(-50%) rotate(45deg);
    border-right: var(--border-white);
    border-bottom: var(--border-white);
    transition: var(--transition);
}
.about-org-row.on .about-org-arrow {
    transform: translateY(-50%) rotate(-135deg);
}
.about-org-panel {
    display: none;
    padding: var(--space-20) 0 0 0;
}
.about-org-row.on .about-org-panel {
    display: block;
}
/* hover */
.about-org-toggle:hover span {
    opacity: 0.6;
}
.about-map {
    width: 100%;
    height: 450px;
    background-color: #e1e1e1;
}
.about-info-item img {
    width: clamp(20px, calc(25 / var(--inner) * 100vw), 25px);
    margin-right: var(--space-10);
}
    @media all and (max-width: 1200px) {
        .about-ceo-wrap {
            grid-template-columns: repeat(1, 1fr);
        }
        .about-ceo-img {
            margin-bottom: var(--space-100);
        }
        .about-ceo-text {
            padding: 0 2%;
        }
        .about-ceo-sign {
            position: static;
            margin-top: var(--space-100);
        }
        .about-org-wrap {
            flex-wrap: wrap;
        }
        .about-org-left {
            width: min(100%, 100%);
            margin-bottom: var(--space-60);
        }
        .about-org-right {
            width: min(100%, 100%);
        }
        .about-info-list {
            flex-wrap: wrap;
            justify-content: center;
            gap: var(--space-20);
        }
        .about-info-item {
            width: 100%;
            justify-content: center;
        }
    }
    @media all and (max-width: 640px) {
        .about-value-list {
            flex-wrap: wrap;
        }
        .about-value-item {
            width: 100%;
        }
        .about-value-item:first-of-type {
            border-bottom: var(--border);
        }
        .about-value-item + .about-value-item {
            border-left: 0;
        }
    }


.service-intro-bg {
    width: 100%;
    background: url("/public/images/main-service-bg.jpg") no-repeat center / cover;
}
.service-process-left {
    padding-right: var(--space-100);
}
.service-process-right {
    width: min(1160px, 100%);
    padding-left: var(--space-100);
    border-left: var(--border)
}
.process-list {
    border-top: var(--border);
}
.process-item {
    padding: var(--space-60) 0;
    border-bottom: var(--border);
}
.process-text {
    flex: 1;
}
.process-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: clamp(80px, calc(90 / var(--inner) * 100vw), 90px);
    height: clamp(30px, calc(40 / var(--inner) * 100vw), 40px);
    border-radius: var(--border-radius);
    background-color: var(--color-basic);
    flex-shrink: 0;
}
.process-content {
    padding: 0 var(--space-60);
}
.process-icon {
    width: clamp(110px, calc(150 / var(--inner) * 100vw), 150px);
    height: clamp(110px, calc(150 / var(--inner) * 100vw), 150px);
    border-radius: 50%;
    background-color: var(--color-basic);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.process-icon img {
    width: 44%;
    height: 44%;
    object-fit: contain;
}
    @media all and (max-width: 1200px) {
        .service-process-wrap {
            flex-wrap: wrap;
        }
        .service-process-left {
            width: 100%;
            padding-right: 0;
            text-align: center;
            margin-bottom: var(--space-60);
        }
        .service-process-right {
            padding-left: 0;
            border-left: 0;
        }
    }
    @media all and (max-width: 640px) {
        .process-text {
            flex-direction: column;
        }
        .process-content {
            margin-top: var(--space-30);
            padding: 0 var(--space-60) 0 0;
        }
    }


.team-group-top {
    margin-bottom: var(--space-100);
    padding-bottom: var(--space-100);
    border-bottom: var(--border);
}
.team-group .team-member-list {
    gap: var(--space-60) var(--space-30);
}
    @media all and (max-width :1400px) {
        .team-group .team-member-list {
            grid-template-columns: repeat(4, 1fr);
            gap: var(--space-60) var(--space-30);
        }
    }
    @media all and (max-width :1200px) {
        .team-group .team-member-list {
            grid-template-columns: repeat(3, 1fr);
            gap: var(--space-60) var(--space-30);
        }
    }
    @media all and (max-width :640px) {
        .team-group .team-member-list {
            grid-template-columns: repeat(2, 1fr);
            gap: var(--space-60) var(--space-30);
        }
    }
    @media all and (max-width :414px) {
        .team-group .team-member-list {
            grid-template-columns: repeat(1, 1fr);
            gap: var(--space-60) 0;
        }
    }


.market-category ul {
    gap: 0 var(--space-60);
}
.market-category li a {
    position: relative;
}
.market-category li a:hover,
.market-category li.on a {
    font-weight: var(--fw-bold);
}
.market-category li a::after {
    position: absolute;
    bottom: -5px;
    left: 0;
    content: "";
    display: flex;
    width: 0;
    height: 2px;
    background-color: var(--color-basic);
    transition: var(--transition);
}
.market-category li a:hover::after,
.market-category li.on a::after {
    width: 100%;
}


.youtube-list {
    width: min(1700px, 100%);
    margin: 0 auto;
    gap: var(--space-40) 0;
}
.youtube-item {
    width: 100%;
}
    @media all and (max-width: 640px) {
        .youtube-item {
            width: 100%;
            height: 150px;
        }
        .youtube-item img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
    }