@charset "utf-8";
/* 레이아웃, 공통 */
.layout {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}
.layout-mid {
    width: 90%;
    max-width: 1620px;
    margin: 0 auto;
}
.layout-wide {
    width: 90%;
    max-width: 1720px;
    margin: 0 auto;
}
.border-white {
    border: var(--border-white);
}
.btn-more {
    padding: var(--space-15) var(--space-20);
}
.btn-more img {
    width: clamp(12px, calc(20 / var(--inner) * 100vw), 20px);
}
.btn-more:hover {
    background:var(--color-primary);
    border-color:var(--color-primary);
}
    /* @media all and (max-width: 640px) {
        .btn-more {
            padding: 8px 15px;
            font-size: 13px;
        }
    } */

/* 메인 비주얼 */
.main-visual {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.main-visual .layout-mid {
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    z-index: 2
}
.main-visual .layout-mid .txtarea {
    color: var(--color-white);
    text-align: left
}
.main-visual .swiper,
.main-visual .swiper-wrapper,
.main-visual .swiper-slide,
.main-visual .imgarea {
    height: 100%
}
.main-visual .swiper-slide {
    position: relative;
}
.main-visual .imgarea video,
.main-visual .imgarea img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-visual .imgarea img {
    transform: scale(1);
    transition:all 1.2s cubic-bezier(0.165, 0.840, 0.440, 1)
}
.main-visual .swiper-slide-active .imgarea img {
    transform: scale(1.08);
}
.main-visual .video-mobile {
    display: none;
}
.main-visual .video-pc {
    display: block;
}
    /*  미디어쿼리 */
    @media all and (max-width: 1000px) {
        .main-visual .layout-mid {
            justify-content: center;
            top: 30%;
        }
        .main-visual .layout-mid .txtarea {
            text-align: center;
        }
    }
    @media all and (max-width: 640px) {
        .main-visual .layout-mid {
            justify-content: center;
            top: 30%;
        }
        .main-visual {
            width: 100%;
            height: 100vh;
        }
        .main-visual .video-mobile {
            display:block;
        }
        .main-visual .video-pc {
            display:  none;
        }
    }
    @media (orientation: portrait) {
        .main-visual .video-mobile {
            display: block;
        }
        .main-visual .video-pc {
            display: none;
        }
    }
    @media (orientation: landscape) {
        .main-visual .video-mobile {
            display: none;
        }
        .main-visual .video-pc {
            display: block;
        }
    }

/* 메인 솔루션 */
.main-solution {
    position:relative;
    overflow:hidden;
    background: url('/public/images/main-solution-bg.jpg') center center / cover no-repeat;
}
.main-solution .main-solution-list .layout-mid {
    width: 95%;
    margin: 0;
    max-width: 2000px;
    overflow: hidden;
}
.main-solution .card-txt {
    flex: 0 0 58%;
    padding: var(--space-60);
}
.main-solution .card-txt h3 {
    line-height: 1.2;
}
.main-solution .card-txt ul li {
    position: relative;
    gap: var(--space-10);
    display: flex;
    align-items: flex-start;
    font-size: var(--font-18);
}
.main-solution .card-txt ul li:not(:last-child) {
    margin-bottom: var(--space-12);
}
.main-solution .card-txt ul li::before {
    content: "";
    width: clamp(16px, calc(20 / var(--inner) * 100vw), 20px);
    height: clamp(16px, calc(20 / var(--inner) * 100vw), 20px);
    display: block;
    background: url("/public/images/main-solution-check.svg") center center / contain no-repeat;
}
.main-solution .card-img {
    flex: 0 0 42%;
    max-width: 400px;
}
.main-solution .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.main-solution .solution-swiper {
    overflow: visible;
}
.main-solution .solution-pagination {
    position: static;
    width: auto !important;
    text-align: center;
}
.main-solution .swiper-button-prev1,
.main-solution .swiper-button-next1 {
    cursor: pointer;
}
.main-solution .swiper-button-prev1 svg,
.main-solution .swiper-button-next1 svg {
    display: flex;
    width: clamp(16px, calc(24 / var(--inner) * 100vw), 24px);
}
.main-solution .swiper-button-prev1 svg path,
.main-solution .swiper-button-next1 svg path {
    transition: var(--transition);
}
.main-solution .swiper-button-prev1:hover svg path,
.main-solution .swiper-button-next1:hover svg path {
    stroke: var(--color-primary);
}
.main-solution .solution-pagination .swiper-pagination-bullet {
    background: var(--color-white);
    opacity: .3;
    width: clamp(10px, calc(14 / var(--inner) * 100vw), 14px);
    height: clamp(10px, calc(14 / var(--inner) * 100vw), 14px);
    transition: var(--transition);
}
.main-solution .solution-pagination .swiper-pagination-bullet:hover,
.main-solution .solution-pagination .swiper-pagination-bullet-active {
    opacity: 1;
}
    /* 15인치 노트북 */
    @media screen and (max-width: 1800px) {
        .main-solution .main-solution-list .layout-mid {
            max-width: 1860px;
        }
    }
    /* 13인치 노트북 */
    @media screen and (max-width: 1600px) {
        .main-solution .main-solution-list .layout-mid {
            max-width: 1660px;
        }
    }

    @media all and (min-width: 1921px) {
        .main-solution .main-solution-list .layout-mid {
            max-width: 2400px;
        }
    }
    /*  미디어쿼리 */
    @media all and (max-width: 1000px) {
        .main-solution .solution-top .layout-mid {
            flex-direction: column;
            text-align: center;
        }
        .main-solution .solution-top .main-solution-info {
            margin-top: var(--space-30)
        }
        .main-solution .solution-swiper .swiper-slide:nth-of-type(1) .card-img img {
            object-position: 20%;
        }
        .main-solution .card-wrap {
            height: 350px;
        }
        .main-solution .card-txt {
            flex: 0 0 52%;
        }
        .main-solution .card-img {
            flex: 0 0 48%;
        }
    }
    @media all and (max-width: 640px) {
        .main-solution .card-wrap {
            flex-direction: column;
            height: 500px;
        }
        .main-solution .card-txt {
            flex: 0 0 68%;
        }
        .main-solution .card-img {
            flex: 0 0 32%;
        }
        .main-solution .main-solution-list {
            margin-top: 30px;
        }
        .main-solution .solution-swiper .swiper-slide:nth-of-type(1) .card-img img {
            object-position: center;
        }
    }
    

/* 메인 ABOUT */
.main-about {
    position: relative;
    overflow: hidden;
}
.main-about .main-about-info {
    position: relative;
    z-index: 2;
    padding-top: var(--space-190);
}
.main-about .main-about-thumb {
    position: absolute;
    z-index: -1;
    top: 48.5%;
    left: 47%;
    width: 40%;
    max-width: 680px;
    /* width: clamp(280px, calc(680 / var(--inner-mid) * 100vw), 680px); */
    aspect-ratio: 1 / 1;
    transform: translate(-50%, -50%);
    animation: aboutRotate 7s ease-in-out infinite;
}
.main-about .main-about-mask {
    width: 100%;
    height: 100%;
    border-radius: 24%;
    overflow: hidden;
}
.main-about .main-about-mask img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: imageCounterRotate 7s ease-in-out infinite;
}
@keyframes aboutRotate {
    0% {
        transform: translate(-50%, -50%) rotate(22deg);
    }
    50% {
        transform: translate(-50%, -50%) rotate(26deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(22deg);
    }
}
@keyframes imageCounterRotate {
    0% {
        transform: rotate(-22deg) scale(1.25);
    }
    50% {
        transform: rotate(-26deg) scale(1.25);
    }
    100% {
        transform: rotate(-22deg) scale(1.25);
    }
}
    /*  미디어쿼리 */
    @media all and (max-width: 1200px) {
        .main-about .main-about-info {
            padding-top: 40px;
            justify-content: flex-start;
        }
        .main-about .main-about-thumb {
            width: 40%;
            left: 73%;
            top: 49.5%;
        }
    }
    @media all and (max-width: 640px) {
        .main-title-wrap {
            text-align: center;
        }
        .main-about .main-about-thumb {
            width: 46%;
            top: 42.5%;
            left: 50%
        }
        .main-about .main-about-info {
            text-align: center;
            padding-top: 65%;
            justify-content: center;
        }
    }

/* OUR CAPABILITIES */
.main-capability {
    position: relative;
    background: url('/public/images/main-capabilities-bg.jpg') center center / cover no-repeat;
}
.main-capability h3,
.main-capability .text {
    line-height: 1.4;
}
.main-capability .card-icon img {
    width: clamp(30px, calc(111 / var(--inner-mid) * 100vw), 111px);
}
    /*  미디어쿼리 */
    @media all and (max-width: 1200px) {
        .main-capability .text {
            white-space: normal;
        }
        .main-capability .main-capability-list .card-wrap {
            padding: 50px 20px;
        }
    }
    @media all and (max-width: 1000px) {
        .main-capability .main-capability-list .card-wrap {
            padding: 40px 20px;
        }
    }
    @media all and (max-width: 640px) {
        .main-capability .main-capability-list {
            grid-template-columns: repeat(1, 1fr);
        }
        .main-capability .main-capability-list .card-wrap {
            padding: 30px 20px;
        }
        .main-capability .main-capability-list .card-wrap .card-txt {
            flex-direction: row;
            align-items: flex-start;
        }
        .main-capability .textarea {
            padding-left: 20px;
            margin-top: 0;
            text-align: left;
        }
        .main-capability h3 {
            line-height: 1.2;
        }
        .main-capability .textarea h3 br {
            display: none;
        }
    }


/* 서브 공통 */
aside {
    padding-top: var(--space-250);
}

.title-label {
    height: clamp(35px, calc(50 / var(--inner) * 100vw), 50px);
    padding: 0 var(--space-20);
    border-radius: var(--border-radius);
}
.title-label span {
    line-height: inherit;
    text-transform: uppercase;
}
.circle-num {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 auto;
    width: clamp(30px, calc(50 / var(--inner) * 100vw), 50px);
    aspect-ratio: 1 / 1;
    background-color: var(--color-primary);
    border-radius: 50%;
    font-family: var(--fm-pretendard);
    color: var(--color-white);
    font-size: var(--font-25);
    font-weight: var(--fw-semibold);
}
    @media all and (max-width: 640px) {
        aside {
            padding-top: 120px;
        }
    }

    


/* 정도경영 */
.management-item {
    position: relative;
    width: clamp(300px, calc(400 / var(--inner) * 100vw), 400px);
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    background-color: var(--color-gray-f8);
}
.management-icon {
    position: absolute;
    bottom: 56%;
    left: 50%;
    transform: translateX(-50%);
    width: min(22%, 85px);
    height: min(22%, 85px);
}
.management-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.management-text {
    position: absolute;
    top: 50%;
    width: 100%;
    padding: 0 var(--space-40);
}
.management-guide {
    padding: var(--space-60);
}
.management-guide .guide-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: var(--space-40);
    padding-bottom: var(--space-40);
    border-bottom: var(--border-gray-e1);
}
.management-guide .guide-item:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.management-guide .guide-cont {
    margin-top: var(--space-10);
    margin-left: var(--space-20);
}
    @media all and (max-width: 1200px) {
        .management-list {
            gap: var(--space-40);
        }
        .management-icon {
            bottom: 62%;
            width: min(15%, 85px);
            height: min(15%, 85px);
        }
        .management-text {
            top: 45%;
        }
    }
    @media all and (max-width: 640px) {
        .management-list {
            flex-wrap: wrap;
            justify-content: flex-start;
            gap: var(--space-30);
        }
        .management-item {
            width: calc(50% - (var(--space-40))/ 2);
        }
        .management-icon {
            bottom: 68%;
        }
        .management-text {
            top: 40%;
        }
    }
    @media all and (max-width: 440px) {
        .management-list {
            gap: var(--space-30) 0;
        }
        .management-item {
            width: 80%;
            margin: 0 auto;
        }
        .management-icon {
            bottom: 60%;
        }
        .management-text {
            top: 47%;
            padding: 0 var(--space-60);
        }
    }


/* advertising solution */
.advertising-network {
    width: min(90%, 980px);
    margin-left: var(--space-100);
}
.network-card {
    padding: var(--space-60);
}
.network-card-percent {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.network-card-text {
    flex: 1;
    min-width: 0;
    margin-right: var(--space-100);
}
.network-bar {
    position: relative;
    overflow: hidden;
    width: min(100%, 540px);
    height: clamp(34px, calc(44 / var(--inner) * 100vw), 44px);
    background: var(--color-gray-e1)
}
.network-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    width: 0;
    height: 100%;
    background: var(--color-primary);
    transition: width 1.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.network-bar span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 79%;
    height: 100%;
}
.network-bar.active .network-bar-fill {
    width: var(--fill-width, 79%);
}
.network-number {
    display: flex;
    align-items: flex-end;
}
.network-number strong {
    line-height: 1;
}
.network-number span {
    padding-bottom: var(--space-10);
}
.network-point-text {
    flex: 1;
    min-width: 0;
}
.network-img {
    width: min(40%, 322px);
    margin-left: var(--space-60);
}
.performance-card {
    padding: var(--space-40);
}
.daily-timeline {
    position: relative;
    padding: 0 var(--space-100);
}
.daily-row {
    z-index: 2;
    position: relative;
    display: flex;
}
.daily-row-bottom {
    justify-content: flex-end;
}
.daily-item {
    position: relative;
    margin-right: var(--space-60);
}
.daily-item:last-of-type {
    margin-right: 0;
}
.daily-row-bottom .daily-item:last-of-type {
    margin-right: var(--space-60);
}
.daily-item::after {
    z-index: 3;
    position: absolute;
    left: 0;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary);
}
.daily-row-top .daily-item::after {
    bottom: -44px;
}
.daily-row-bottom .daily-item::after {
    top: -45px;
}
.daily-img {
    position: relative;
    overflow: hidden;
    width: clamp(150px, calc(230 / var(--inner) * 100vw), 230px);
}
.daily-img-wide {
    width: clamp(150px, calc(330 / var(--inner) * 100vw), 330px);
}
.daily-img span {
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: clamp(30px, calc(34 / var(--inner) * 100vw), 34px);
    padding: 0 var(--space-15);
    background-color: var(--color-primary);
}
.daily-item h4 {
    white-space: nowrap;
}
.daily-line {
    z-index: 0;
    position: relative;
    height: 1px;
    margin: 40px 0;
    background: var(--color-gray-e1);
}
.daily-sun,
.daily-moon {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}
.daily-sun {
    left: 0;
}
.daily-sun img {
    width: clamp(35px, calc(57 / var(--inner) * 100vw), 57px);
}
.daily-moon {
    right: 0;
}
.daily-moon img {
    width: clamp(30px, calc(45 / var(--inner) * 100vw), 45px);
}
    @media all and (max-width: 1200px) {
        .advertising-wrap {
            flex-wrap: wrap;
        }
        .advertising-title-area {
            width: 100%;
            margin-bottom: var(--space-60);
            text-align: center;
        }
        .network-card-text {
            max-width: 540px;
        }
        .performance-list {
            grid-template-columns: repeat(2, 1fr);
        }
        .daily-timeline {
            display: flex;
            justify-content: center;
            padding: 100px 0;
        }
        .daily-timeline::after {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%,-50%);
            content: "";
            display: block;
            width: 1px;
            height: calc(100% - 140px);
            background-color: var(--color-gray-e1);
        }
        .daily-row {
            flex-direction: column;
            width: 50%;
        }
        .daily-row-top {
            padding-right: 40px;
        }
        .daily-row-bottom {
            padding-left: 40px;
        }
        .daily-item {
            margin-right: 0;
        }
        .daily-row-top .daily-item {
            margin-bottom: var(--space-60);
            text-align: right;
        }
        .daily-row-top .daily-item:last-of-type {
            margin-right: 0;
        }
        .daily-row-bottom  {
            justify-content: flex-start;
        }
        .daily-row-bottom .daily-item {
            margin-top: var(--space-60);
            margin-right: 0;
        }
        .daily-row-bottom .daily-item:last-of-type {
            margin-right: 0;
        }
        .daily-item::after {
            z-index: 2;
            position: absolute;
            left: 0;
            content: "";
            display: block;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background-color: var(--color-primary);
        }
        .daily-row-top .daily-item::after {
            top: 0;
            bottom: auto;
            left: auto;
            right: -44px;
        }
        .daily-row-bottom .daily-item::after {
            top: 0;
            left: -44px;
        }
        .daily-img {
            width: 50%;
        }
        .daily-row-top .daily-img { 
            display: flex;
            justify-self: self-end;
        }
        .daily-line {
            display: none;
        }
        .daily-sun,
        .daily-moon {
            position: absolute;
            top: auto;
            transform: translate(-50%, 0);
        }
        .daily-sun {
            top: 0;
            left: 50%;
        }
        .daily-sun img {
            width: clamp(35px, calc(57 / var(--inner) * 100vw), 57px);
        }
        .daily-moon {
            left: 50%;
            right: auto;
            bottom: 0;
        }
        .daily-moon img {
            width: clamp(30px, calc(45 / var(--inner) * 100vw), 45px);
        }
    }
    @media all and (max-width: 640px) {
        .network-card-percent {
            flex-direction: column-reverse;
            align-items: flex-start;
        }
        .network-card-text {
            max-width: 100%;
            margin-right: 0;
        }
        .network-card-text p {
            margin-top: var(--space-20);
        }
        .network-card-point {
            flex-direction: column;
        }
        .network-img {
            width: 100%;
            margin-top: var(--space-20);
            margin-left: 0;
        }
        .performance-list {
            grid-template-columns: repeat(1, 1fr);
        }
        .performance-card-head h4 br {
            display: block;
        }
        .daily-timeline {
            padding: 60px 0;
        }
        .daily-timeline::after {
            height: calc(100% - 100px);
        }
        .daily-row-top {
            padding-right: 20px;
        }
        .daily-row-bottom {
            padding-left: 20px;
        }
        .daily-row-top .daily-item::after {
            right: -24px;
        }
        .daily-row-bottom .daily-item::after {
            left: -24px;
        }
        .daily-img {
            width: 100%;
        }
    }


/* transaction solution */
.transaction-coupon {
    width: min(90%, 980px);
    margin-left: var(--space-100);
}
.transaction-card {
    padding: var(--space-60);
}
.transaction-img-people {
    width: min(26%, 220px);
    margin-right: var(--space-60);
}
.transaction-img-coupon {
    width: min(30%, 258px);
    margin-left: var(--space-60);
}
.transaction-custom-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-75)
}
.transaction4 {
    width: 100%;
    background: url("/public/images/transaction-img7.jpg") no-repeat center / cover;
}
.transaction-license-logo {
    width: clamp(100px, calc(190 / var(--inner) * 100vw), 190px);
    margin: 0 auto var(--space-30) auto;
}
    @media all and (max-width: 1200px) {
        .transaction-title-area {
            width: 100%;
            text-align: center;
        }
        .transaction-wrap {
            flex-wrap: wrap;
        }
        .transaction-coupon {
            width: min(100%, 100%);
            margin-left: 0;
        }
        .transaction-store-bottom p {
            width: 50%;
        }
        .transaction-brand-top {
            align-items: flex-start;
        }
        .transaction-brand-top p {
            width: 50%;
        }
    }
    @media all and (max-width: 640px) {
        .transaction-custom-list {
            grid-template-columns: repeat(1, 1fr);
        }
        .custom-phone {
            width: min(80%, 450px);
            margin: 0 auto var(--space-40) auto;
        }
    }
    @media all and (max-width: 440px) {
        .transaction-store-top {
            text-align: center;
        }
        .transaction-store-bottom {
            flex-wrap: wrap;
        }
        .transaction-img-people {
            width: min(80%, 80%);
            margin: 0 auto var(--space-60) auto;
        }
        .transaction-store-bottom p {
            width: 100%;
        }
        .transaction-card-brand {
            display: flex;
            flex-direction: column-reverse;
        }
        .transaction-brand-top {
            flex-wrap: wrap;
            margin: var(--space-60) 0 0 0;
        }
        .transaction-brand-top p {
            width: 100%;
            margin-top: var(--space-40);
        }
        .transaction-brand-bottom {
            flex-wrap: wrap;
        }
        .transaction-card-text {
            width: 100%;
            text-align: center;
        }
        .transaction-img-coupon {
            width: min(90%, 90%);
            margin: var(--space-60) auto 0 auto;
        }
    }


    /* Brand Operation & Marketing */
.operation2-list .card-wrap .card-icon img {
    width: clamp(30px, calc(80 / var(--inner-mid) * 100vw), 80px);
}
.marketing2 .operation2-list .card-wrap .card-icon img {
    width: clamp(30px, calc(135 / var(--inner-mid) * 100vw), 135px);
}
.badge {
    border-radius: var(--border-radius);
    padding: var(--space-7) var(--space-20) var(--space-8);
    white-space: nowrap;
    text-align: center;
}
    /* 미디어쿼리 */
    @media all and (max-width: 1200px) {
        .operation2-list .text {
            white-space: normal;
        }
        .operation2-list .card-wrap {
            padding: 50px 20px;
        }
        .marketing2 .operation2-list .badge-area .badge {
            width: 100%;
            white-space: normal;
        }
    }
    @media all and (max-width: 1000px) {
        .operation2-list .card-wrap {
            padding: 40px 20px;
        }

    }
    @media all and (max-width: 640px) {
        .operation2-list {
            grid-template-columns: repeat(1, 1fr);
        }
        .operation2-list .card-wrap {
            padding: 30px 20px;
        }
        .operation2-list .card-wrap .card-txt {
            flex-direction: row;
            align-items: flex-start;
        }
        .operation2-list .card-wrap .textarea {
            padding-left: 20px;
            margin-top: 0;
            text-align: left;
        }
        .operation2-list .card-wrap .textarea h3 br {
            display: none;
        }
        .marketing2 .operation2-list .badge-area {
            justify-content: flex-start;
        }
        .marketing2 .operation2-list .badge-area .badge {
            width: auto;
            white-space: normal;
        }
    }

.operation3 {
    background: center top / 100% url("/public/images//operation-img2.jpg") no-repeat #F7F3F3;
}
.operation3-list {
    padding-top: 60%
}
.operation3-list .card-wrap:not(:last-of-type) {
    border-right: var(--border-gray-e1);
}
.operation3-list .card-wrap .textarea {
    padding-top: 5px;
}
    /* 미디어쿼리 */
    @media all and (max-width: 1500px) {
        .operation3 {
            background-size: 120%;
        }
    }
    @media all and (max-width: 1200px) {
        .operation3 {
            background-size: 120%;
        }
        .operation3-list {
            padding-top: 40%;
        }
        .operation3-list .card-wrap .text {
            white-space: normal;
        }
    }
    @media all and (max-width: 1000px) {
        .operation3 {
            background-size: 120%;
        }
        .operation3-list .card-wrap .card-txt {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
        .operation3-list .card-wrap .card-txt .textarea {
            margin-top: var(--space-10);
        }
    }
    @media all and (max-width: 640px) {
        .operation3 {
            background-size: 170%;
            background-position-y: 20px;
        }
        .operation3-list {
            padding-top: 70%
        }
        .operation3-list {
            grid-template-columns: repeat(1, 1fr);
        }
        .operation3-list .card-wrap:not(:last-of-type) {
            border-right: 0;
            border-bottom: var(--border-gray-e1);
        }
        .operation3-list .card-wrap {
            padding: 20px 0
        }
        .operation3-list .card-wrap .card-txt {
            flex-direction: row;
            justify-content: flex-start;
            align-items: flex-start;
            text-align: left;
        }
        .operation3-list .card-wrap .card-txt .textarea  {
            margin-top: 0;
            padding-top: 0;
        }
    }
    @media all and (max-width: 440px) {
        .operation3-list {
            padding-top: 60%
        }
    }

.marketing3 .layout {
    width: 95%;
    margin: 0;
    max-width: 1930px;
    overflow: hidden;
}
.marketing3 .title-area {
    flex: 0 0 45%;
    padding-top: var(--space-80);
}
.marketing3 .marketing3-img {
    flex: 0 0 52%;
}
.marketing3 .marketing3-img img {
    width: 100%;
    max-width: 888px;
}
    @media all and (max-width: 1200px) {
        .marketing3 .title-area {
            padding-top: 0;
        }
    }
    @media all and (max-width: 1000px) {
        .marketing3 .title-area pre {
            white-space: normal;
        }
    }
    @media all and (max-width: 640px) {
        .marketing3 {
            justify-content: center;
        }
        .marketing3 .layout {
            flex-wrap: wrap;
        }
        .marketing3 .title-area {
            flex: 0 0 100%;
            padding: 0 2.5%;
            text-align: center;
        }
        .marketing3 .marketing3-img {
            flex: 0 0 100%;
            margin-top: 30px;
        }
        .marketing3 .marketing3-img img {
            width: 90%;
        }
    }

.marketing4 .marketing4-img,
.marketing4 .marketing4-wrap {
    flex: 0 0 50%
}
.marketing4 .marketing4-wrap .title-area {
    padding: var(--space-30)
}

@media all and (max-width:1000px) {
    .marketing4 .marketing4-wrap .title-area pre {
        white-space: normal;
    }
}
@media all and (max-width: 640px) {
    .marketing4 .marketing-wrap {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .marketing4 .title-area {
        text-align: center;
    }
    /* .marketing4 {
        display: flex;
        flex-direction: column-reverse;
    }
    .marketing4 .marketing4-wrap {
        width: 100%;
        padding-top: var(--space-150);

    }
    .marketing4 .marketing4-img {
        margin-top: 30px;
    } */
}

.marketing5-vod .video {
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    position: relative;
}
.marketing5-vod .video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
    @media all and (max-width: 640px) {
        .marketing5 .marketing-wrap {
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    }


/* contact */
.contact-wrap {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 0 var(--space-40);
}
.contact-map {
    width: min(70%, 1000px);
    height: clamp(450px, calc(680 / var(--inner) * 100vw), 680px);
}
.contact-info {
    width: min(32%, 460px);
    padding: var(--space-50) var(--space-40);
    background-color: var(--color-gray-f8);
}
.contact-info-wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
}
.contact-info h3 {
    margin-bottom: var(--space-30);
    padding-bottom: var(--space-20);
    border-bottom: var(--border-gray-e1);
}
.contact-info-list {
    flex: 1;
}
.contact-info-item {
    margin-bottom: var(--space-20);
    padding-bottom: var(--space-20);
    border-bottom: var(--border-gray-e1);
}
.contact-info-item:last-of-type {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}
.contact-info-item img {
    width: clamp(18px, calc(24 / var(--inner) * 100vw), 24px);
}
.contact-info .btn-area .btn-more {
    width: 100%;
}
.contact-info .btn-area .btn-more img {
    margin-left: var(--space-20);
}
.contact-form {
    width: min(90%, 980px);
    padding: var(--space-60);
    background-color: var(--color-white);
}
    @media all and (max-width: 1000px) {
        .contact-wrap {
            flex-wrap: wrap;
            justify-content: space-between;
            align-items: stretch;
            gap: var(--space-40) 0;
        }
        .contact-map {
            width: min(100%, 100%);
            height: clamp(250px, calc(680 / var(--inner) * 100vw), 680px);
        }
        .contact-info {
            width: min(100%, 100%);
        }
        .contact-info .btn-area {
            margin-top: var(--space-40);
        }
        .contact-title-area {
            width: 100%;
            text-align: center;
        }
        .contact-form {
            width: min(100%, 100%);
            padding: var(--space-40);
        }
    }