/*
 * @File Name : layout.css
 * @Description : 레이아웃
 * @Modification Information
 * <pre>
 * 수정일 | 수정자 | 수정내용
 * 2025.03.11 | ffany.lee | 최초 등록
 * </pre>
 * @author ffany.lee
 * @since 2025.03.11
 *
 * @Copyright (C)TWOGOMS All rights reserved.
*/

/*공통*/
body {font-family: Arial, sans-serif; line-height: 140%; letter-spacing: -0.37px; color: var(--bs-black); margin: 0; padding: 0; word-break: keep-all; overflow-x: hidden; background-color: #fff;}
body.noScroll{overflow-y: hidden; position: fixed; width: 100%; height: 100%;}

section.auto,
section.auto-full{width:100vw; height: auto;}
section.full {width:100vw; height: 100vh;}
section.half{height: 70vh; display: flex; align-items: center; justify-content: center; padding:0;}

.inner{margin:0 auto; position: relative; padding-left: 1.25rem; padding-right:1.25rem;}
.inner.solo{padding-top:6rem; padding-bottom:6rem;}
.inner.full-inner{padding:0;}
.br{display: block; margin:0 0.375rem;}/*타이틀용 br적용*/
.tablet-br,/*태블릿 피씨에서만 br적용*/
.pc-br{display: none;}

.content-gap{display: flex; flex-direction: column; gap: 80px;}
.content-gap-sm{display: flex; flex-direction: column; gap: 32px;}
.content-top-s{margin-top:16px;}
.content-top{margin-top:20px;}
.content-top-lg{margin-top:48px;}
.content-bottom-s{margin-bottom:16px;}
.content-bottom{margin-bottom:20px;}
.content-bottom-lg{margin-bottom:48px;}

.border-solid{width:100%; height:1px; background:#ddd; border: none; outline: none;}
.logo-tgs{display: inline-flex; background:url("../images/layout/logo-tgs.svg") center / cover no-repeat;}
.rounding{border-radius: 8px; overflow: hidden;}


/*.solution-title{margin:6rem 0 3rem;}*/
.title-wrap{margin-top:8rem; margin-bottom:3rem;}
.title-wrap h2{font-size: max(40px, 5vw); margin:0.5rem 0 0.875rem; font-weight: 800; line-height: 130%; display: flex; align-items: center;}
.title-wrap h2 .logo-tgs{width: calc(2.1 * max(42px, 5vw));  height: calc(1 * max(42px, 5vw)); margin: 3px 0 0 8px;}
.title-wrap h2.project-title{font-size: max(32px, 5vw); font-weight: 700;}
.title-wrap p{font-size: max(1rem, 2vw);}
.title-wrap .summary{display: flex; flex-direction: column; padding-top:1.5rem; border-top:1px solid var(--bs-gray-200); gap: 6px;}
.title-wrap .summary li span{display: inline-block;}
.title-wrap .summary li span:nth-child(1){color: var(--bs-gray); width: 60px;}
.title-wrap .summary li span:nth-child(2){color: var(--bs-black); font-weight: 500;}
.title-wrap .btn-wrap{margin-top:40px;}

.title-3xl{font-size: max(42px, 5vw); font-weight: 700;}
.title-2xl{font-size: max(36px, 4vw); font-weight: 700;}
.title-xl{font-size: max(32px, 3.7vw); font-weight: 700;}
.title-l{font-size: max(24px, 2.5vw); font-weight: 700;}
.title-m{font-size: max(20px, 2.3vw); font-weight: 600;}
.title-s{font-size: max(16px, 1.8vw);  font-weight: 600;}
.title-xs{font-size: max(14px, 1.5vw); font-weight: 600;}

.body-m{font-size: max(18px, 2vw);}
.body-s{font-size: max(16px, 1.8vw);}
.body-xs{font-size: max(14px, 1.5vw);}

.content-title{font-size: max(24px, 3vw); font-weight: 700; margin-bottom:12px;}
.content-text{font-size: max(16px, 1.9vw); line-height: 150%;}


/* 헤더 기본 */
header{position: fixed; top: 0; left: 0; width: 100%; z-index: 20; display: flex;  background-color: rgba(255, 255, 255, 0);/*아이폰 투명도 조절*/}
header.scrolled{background-color: #fff; border-bottom: 1px solid #c9c9c9}
header .header-inner{width: 100%;}
header .header-group{width: 100%; height: 100%; padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; position: sticky; top: 0; z-index: 20;}
header .logo a{display: inline-flex; width:110px; z-index:10;}
header .logo img{height:100%;}

/* 네비 & 딤 배경 */
.nav, .dim-bg{position: fixed; right: 0; top: -100%; z-index: 10; height: 100vh; width: 0; display: flex; opacity: 0; /*padding: 4vw 1.25rem;*/ transform: translateY(-100%); transition: none;}
.nav.active, .dim-bg.active{opacity: 1; width: 100%; transform: translateY(0); animation: slideDown 0.4s ease-in-out forwards; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;}
.nav.closing, .dim-bg.closing{opacity: 0; transform: translateY(-100%); transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;}
.nav.active{z-index: 15;}

/* 네비 리스트 */
.nav ul{display: flex; flex-direction: column; width: 100%;}
.nav>ul{padding-top: 30px; overflow-y:auto; -webkit-overflow-scrolling: touch; max-height: 100vh;}
.nav ul li{display: flex; flex-direction: column;}
.nav ul li.menu-items>a{font-weight: 600; padding:16px 28px;}
.nav ul li.menu-items a,
.nav ul li.menu-items.active>a{color: var(--bs-black);}
.nav ul li.menu-items:nth-child(2)>a,
.nav ul li.menu-items:nth-child(3)>a,
.nav ul li.menu-items:nth-child(4)>a{display: flex; background: url(../images/style/ic-down-arrow.png) 100% 50% / cover no-repeat; background-size: 24px; background-origin: content-box;}
.nav ul li.menu-items:nth-child(2).active>a,
.nav ul li.menu-items:nth-child(3).active>a,
.nav ul li.menu-items:nth-child(4).active>a{background: url(../images/style/ic-up-arrow.png) 100% 50% / cover no-repeat; background-size: 24px; background-origin: content-box;}
.nav ul li a{font-size: max(1.25rem, 2vw); line-height: 120%; font-weight: 500; color: var(--bs-black); display: flex; align-items: center;}

.nav .mobile-copy{margin-top: 64px; display: flex; flex-direction: column;}
.dim-bg{background-color: #fff; transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;}
.nav{padding-top: 62px;}

/* 서브메뉴 */
.nav ul li.menu-items .submenu{position: unset; display: flex; max-height: 0; overflow: hidden; opacity: 0; margin:0; gap: 8px; background:#f5f5f5; transition: max-height 0.4s ease, margin 0.4s ease, opacity 0.4s ease;}
.nav ul li.menu-items .submenu.open{max-height:unset;/*max-height: 180px;*/ opacity: 1; padding:20px;}
.nav ul li:nth-child(2) .submenu{display: flex; flex-direction: column; gap: 8px;}
.nav ul li:nth-child(2) .submenu.open{max-height: unset;}
.nav ul li.menu-items .submenu>li>a{background-color:#fff; padding:16px 20px; border-radius: 12px;}
.nav ul li:nth-child(2) .submenu>li{padding:20px; background:#fff; border-radius: 12px;}
/*.nav ul li.menu-items:nth-child(2) .submenu li a::before {content: "•"; margin-right: 6px; color: #707070; font-size: 13px; font-weight: 500;}*/
.nav ul li.menu-items .submenu .submenu-title{font-weight:700; margin-bottom: 8px; font-size: max(16px, 1.4vw);}
.nav ul li.menu-items .submenu li a{color: var(--bs-black); font-size: max(15px, 1.4vw);}
.nav ul li.menu-items .submenu .submenu-items{flex-direction: row; flex-wrap: wrap;}
.nav ul li.menu-items .submenu .submenu-items li{width: 50%;}
.nav ul li.menu-items .submenu .submenu-items li a{padding:6px 0;}
/* 메인페이지용 */
header.main-page .logo svg{color:#fff; transition: color 0.4s;}
header.main-page .btn-menu span{background-color: #fff;}
header.main-page .header-group.active .logo svg, header.main-page.scrolled .logo svg{color: var(--bs-black);}
header.main-page .btn-menu.active span, header.main-page.scrolled .btn-menu span{background-color: var(--bs-black);}
header.main-page .nav ul li a{color:#fff;}
header.main-page .nav.active ul li.menu-items a{color: var(--bs-black);}
.nav.active ul li.menu-items.active>a,
header.main-page .nav.active ul li.menu-items.active>a{color:#116DD6}
header.main-page .nav ul li.menu-items .submenu li a,
header.main-page.scrolled ul li a{color: var(--bs-black);}



@keyframes slideDown {
    from {
        top: -100%;
        opacity: 0;
    }
    to {
        top: 0;
        opacity: 1;
    }
}

@supports (-webkit-touch-callout: none) {
    header {
        background-color: rgba(0, 0, 0, 0.3); /* Safari용 header효과 */
    }
}

.btn-wrap{margin-top: 40px; gap: 8px;}
.btn-menu{background: none; border: none; width: 28px; height: 28px;  padding: 8px; box-sizing: border-box; transition: all 0.4s; cursor: pointer; position: absolute; z-index: 30; right: 20px; top:14px;}
.btn-menu span {width: 22px; height: 3px; background-color: var(--bs-black); position: absolute; -webkit-transition: transform 0.4s, background-color 0.4s; transition: transform 0.4s, background-color 0.4s;}
.btn-menu .btn-line1 { top: 24%; left: 50%; transform: translate(-50%, 0);}
.btn-menu .btn-line2 {bottom: 24%; left: 50%; transform: translate(-50%, 0);}
.btn-menu.active .btn-line1 { width: 24px; transform: translate(-50%, 6px) rotate(-45deg);}
.btn-menu.active .btn-line2 {width: 24px; transform: translate(-50%, -5.5px) rotate(45deg);}

/*움직이는 텍스트*/
.line {margin-top: 0; font-size: clamp(2rem, 6rem, 7vw); text-align: center; overflow: hidden;}
.split-line { overflow: hidden;}

.main .title{display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;}
.main .title h2{font-size:3rem; font-weight: 700;  margin-bottom:1rem; }
.main .title h2 span{line-height: 120%;}
.main .title p{font-size:1.25rem;}

.circle-wrap{margin-top:-30px;}
.circle{width: 100%; height:100vw; min-height: 450px; aspect-ratio: 1/1; border-radius: 50%; box-sizing: border-box; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: url(../images/layout/main1.jpg) center / cover no-repeat;}
.show-text{font-size: max(24px, 3vw); font-weight: 700; opacity: 0; transform: translateY(50px); transition: opacity 1s ease, transform 0.5s ease;}
.move-text{font-weight: 700;  white-space: nowrap;}

/*메인 프로젝트*/
.project-wrap{/*width:100%; height:auto; padding-bottom:3rem;*/ position: relative;/* display: flex; flex-wrap: wrap;*/}
.project-wrap li{display: flex; flex-direction: column; width:100%; height:100%; position: relative; /*padding:3rem 1.25rem;*/ box-sizing: border-box;}
.project-wrap li h2{padding:0.5rem 0 1rem 0; font-size: max(28px, 3vw); font-weight: 700;}
.project-wrap li .bg-group{width:100%; height:100%; position: relative; overflow: hidden;}
.project-wrap li .bg-group::after{content: ''; display: block; position: absolute; left: 0; right: 0; bottom: 0; top: 0; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 56.71%, rgba(0, 0, 0, 0.30) 100%);}
.project-wrap li .text-wrap,
.project-wrap li .bg-wrap{width:100%; box-sizing: border-box;}
.project-wrap li .text-wrap{ height:50%; padding:0 0 1.5rem; display: flex; justify-content: center; flex-direction: column; background: var(--bs-white);}
.project-wrap li .text-wrap p{display: none;}
.project-wrap li .text-wrap .sub-text{margin-bottom:24px}
.project-wrap li .bg-wrap{height:60vw; max-height: 400px; position: relative;}
.project-wrap li .bg-wrap .bg-hashtag{position: absolute; left: 0; bottom: 0; width:100%; font-weight: 600; display: flex; gap:1rem; padding:0 1.25rem 1.25rem 1.25rem;}
.project-wrap li .bg-wrap .bg-hashtag span{color:#fff; font-size: max(16px, 1.8vw);}
.project-wrap li .btn-wrap{margin-bottom:2rem;}
.bg-group picture,
.bg-group picture img {width: 100%; height: 100%; object-fit: cover; position: absolute; top: 0; left: 0;}

/*서브 프로젝트 리스트*/
.project-list ol{flex-wrap: wrap; display: grid; grid-template-columns: 1fr; gap: 6rem;}
.project-list ol li picture{margin-bottom:1.6rem; overflow: hidden;}
.project-list ol li picture img{aspect-ratio: 4 / 3; transition: transform 0.3s ease;}
.project-list ol li:hover picture img{transform: scale(1.1);}
.project-list ol li:hover a{cursor: none;}
.project-list ol li h3{margin-bottom: 0.8rem; font-size: 1.25rem; font-weight: 700;}
.project-list ul.category{gap: 0.5rem;}
.project-list ul.category li{width: auto; padding:4px 12px; box-sizing: border-box; border: 1px solid var(--bs-gray-200); border-radius: 8px;}
.project-list ul.category li span{color: var(--bs-gray); font-size: 0.875rem;}

.cursor{width: 0; height: 0; opacity: 0; background-color: rgba(30, 30, 30, 0.7); backdrop-filter: blur(10px); border-radius: 50%; pointer-events: none;
    position: fixed; z-index: 9999; transform: translate(-50%, -50%); transition: width 0.4s ease, height 0.4s ease, opacity 0.3s ease;}
.cursor::before{content: ''; display: block; width: 0; height: 0; background: url(../images/style/cursor-text.png) center / cover no-repeat;
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); animation: rotateCursor 10s linear infinite; opacity: 0; transition: opacity 0.3s ease;}
.cursor.on{width: 200px; height: 200px; opacity: 1;}
.cursor.on::before{width: 168px; height: 168px; opacity: 1;}

@keyframes rotateCursor {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/*서브 프로젝트 상세*/
.project-detail,
.move-tag{margin-bottom:4rem;}
.project-detail.main{overflow: hidden;}
/* .project-detail:last-child{margin-bottom: 0;} */
.project-detail.main img{animation: scaleAnimation 30s infinite;}

@keyframes scaleAnimation {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.15); /* 확대 */
    }
    100% {
        transform: scale(1); /* 원래 크기로 돌아옴 */
    }
}

.project-detail.detail-text{display: flex; flex-direction: column;}
.project-detail.detail-text div:nth-child(1){margin: 0 1.25rem 4rem; align-items: center;}
.project-detail.detail-text div:nth-child(1) p{line-height: 170%; letter-spacing: -0.42px;}

.move-tag{display: flex; flex-direction: column; gap: 10px; overflow: hidden; width:100%;}
.move-tag .tag-wrap{display: flex; flex-direction: row; white-space: nowrap; width: max-content; gap: 8px; padding-left: 8px}
.move-tag .tag-wrap span{display: inline-block; padding: max(8px, 1vw) max(16px, 2vw); border: 1px solid #8B8B8B; border-radius: 20px; font-weight: 700; font-size: max(16px, 2vw);}
.move-tag .tag-wrap:nth-child(1){animation: moveRight 100s linear infinite;}
.move-tag .tag-wrap:nth-child(2){animation: moveLeft 100s linear infinite;}
.move-tag .tag-wrap:nth-child(1) span:nth-child(3n),
.move-tag .tag-wrap:nth-child(2) span:nth-child(4n){background-color: var(--bs-black); border-color: var(--bs-black); color: var(--bs-white);}
@keyframes moveRight {
    from {
        transform: translateX(-50%);
    }
    to {
        transform: translateX(0%);
    }
}
@keyframes moveLeft {
    from {
        transform: translateX(0%);
    }
    to {
        transform: translateX(-50%);
    }
}

/*customer-review*/
.customer-review .review-title{flex-direction: column; margin-bottom:60px;}
.customer-review .review-title h2{font-weight: 500; line-height: 140%; font-size: max(32px, 5vw); margin-bottom:1rem;}
.customer-review .review-title p{font-size: max(18px, 2.3vw);}
.customer-review .review-user{margin-bottom:1rem; align-items: center; gap: 12px;}
.customer-review .review-user .user-icon{width:32px; height:32px;background: url(../images/style/ic-user.png)center / cover no-repeat;}
.customer-review blockquote p{padding: max(24px, 1.5vw) max(28px, 2vw); background-color:#F5F5F5; border-radius: 8px; line-height:170%; box-sizing: border-box; position: relative;}

/*swiper-slide*/
.swiper-slide .text-wrap,
.swiper-slide .bg-hashtag span{overflow: hidden; transition: all 2.5s cubic-bezier(0,1,.34,.99); opacity: 0;}
.swiper-slide .text-wrap{transform: translateY(5%);}
.swiper-slide .bg-hashtag span{transform: translateY(100%);}
.swiper-slide.swiper-slide-active .text-wrap,
.swiper-slide.swiper-slide-active .bg-hashtag span{transform: translateY(0); opacity: 1;}
.swiper-slide.swiper-slide-active .bg-hashtag span:nth-child(1){transition-delay: .4s;}
.swiper-slide.swiper-slide-active .bg-hashtag span:nth-child(2){transition-delay: .6s;}
.control{width:50vw; height:32px; position: relative; margin:20px auto 0}
.control .control-button{width:32px; height:32px;}
.control .control-button:after{content: '';}
.control .control-button i{position: absolute; left: 50%; top: 50%; display: inline-block; width: 2px; height: 14px; background-color: #707070;transition: background-color .3s;}
.control .control-button i:nth-child(1){margin-top: -12px;}
.control .control-button i:nth-child(2){margin-top: -3px;}
.control .swiper-button-prev i:nth-child(1){transform: rotate(45deg);}
.control .swiper-button-prev i:nth-child(2){transform: rotate(-45deg);}
.control .swiper-button-next i:nth-child(1){transform: rotate(-45deg);}
.control .swiper-button-next i:nth-child(2){transform: rotate(45deg);}
.control .swiper-pagination .swiper-pagination-current{color:var(--bs-black); font-weight: 600;}
.control .swiper-pagination span{color:var(--bs-gray);}

.fit-img img{width: 100%; height: 100%; object-fit: cover;}
.fit-img  picture{display: inline;}
.solution-wrap .inner:nth-child(2){ height:calc(100vh - 150px); overflow: hidden;}
.solution-item{height:100%; flex-direction: column;}
.solution-item .item{width:100%; height:25%;/* flex: 1;*/ will-change: flex-basis; transition: all 2.5s cubic-bezier(0,1,.34,.99);}
.solution-item .item .fit-img{width:100%; height:100%; position: relative; overflow: hidden; transform: translateY(100%); transition: all 2.5s cubic-bezier(0,1,.34,.99);}
.solution-item .solution-text{position: absolute; left:1.3rem; bottom:1.6rem; white-space: nowrap; color:var(--bs-white); width: calc(100% - 2.6rem); transform: translateY(calc(100% - 24px)); transition: transform .6s cubic-bezier(.39,0,.12,.99);}
.solution-item .solution-text dt{line-height: 130%; font-size: max(22px, 2.4vw); font-weight: 700;}
.solution-item .solution-text dd{margin-top:12px; transition: all .6s cubic-bezier(0,1,.34,.99); font-size: 15px; opacity: 0;}
.solution-item .solution-text dd div{overflow: hidden; white-space: normal;}
.solution-item .item.unactive{height: 15%;}
.solution-item .item.active{height:calc(100% - 45%);}
.solution-item .item.active .solution-text{transform: translateY(0);}
.solution-item .item.active .solution-text dd{opacity: 1; height: 100%;}

/*solution-item-애니메이션*/
.solution-item .item:nth-child(1) img{object-position: 50%;}
.solution-item .item:nth-child(2) img{object-position: 52%;}
.solution-item .item:nth-child(3) img{object-position: 0;}
.solution-item .item:nth-child(4) img{object-position: 40%;}
.solution-wrap.fade .solution-item .item .fit-img{transform: translateY(0);}
.solution-wrap.fade .solution-item .item:nth-child(1) .fit-img{transition-delay: .2s;}
.solution-wrap.fade .solution-item .item:nth-child(2) .fit-img{transition-delay: .4s;}
.solution-wrap.fade .solution-item .item:nth-child(3) .fit-img{transition-delay: .6s;}
.solution-wrap.fade .solution-item .item:nth-child(4) .fit-img{transition-delay: .8s;}
.solution-text-wrap p{font-size: max(16px, 1.8vw);}

/*request-form*/
.request-form{margin-bottom: 32px;}
.request-form .form-wrap{padding:32px 0; border-bottom:1px solid #C9C9C9; flex-direction: column;}
.request-form .form-wrap:first-child{border-top:4px solid var(--bs-black);}
.request-form .form-wrap:last-child{border-color: var(--bs-black);}
.request-form .form-wrap h3{margin-bottom:2rem;}
.request-form .form-wrap .form-list {display: flex; flex-wrap: wrap; padding: 0; list-style: none;}
.request-form .form-wrap .form-list.half{gap:30px 24px;}
.request-form .form-wrap .form-list.half  li {flex: 1 1 calc(50% - 50px); box-sizing: border-box;}
.request-form .form-wrap .form-list.full{flex-direction: column; gap:30px;}

.receipt .form-wrap{align-items: center;}
.receipt hr{width:120px; height:1px; background-color:#eee; border: none; margin-bottom:24px;}
.receipt .receipt-box{width: 90%; padding:40px 20px; border-radius:20px; background:#fff; align-items: center; flex-direction: column; text-align: center; box-shadow: 0px 16px 30px 0px rgba(0, 0, 0, 0.16);}
.receipt.request-form .form-wrap h3{margin-bottom:24px;}
.receipt.request-form .form-wrap p{font-size: max(16px, 1.8vw); color:#9D9D9D;}
.receipt .ic-message{width:90px; height:90px; background-image: url(../images/style/ic-message.png); margin-bottom:20px;}

.checkbox-group{display: flex; flex-wrap: wrap; gap: 12px;}
.checkbox-group input[type="radio"] {display: none;}
.checkbox-group label { display: inline-flex; align-items: center; padding:0.688rem 1.25rem; border: 1px solid var(--bs-black); border-radius: 5px; cursor: pointer;
    font-weight: 600; font-size:1rem; transition: all 0.3s; position: relative;}
.checkbox-group input[type="radio"]:checked + label {background-color: var(--bs-black); color: var(--bs-white);}
.type-checkbox,
.checkbox-group label::after{display: block; width:20px; height: 20px; background: url(../images/style/ic-check.png)0 0 / cover no-repeat;}
.checkbox-group label::after{content:''; margin-left: 8px;}
.checkbox-group input[type="radio"]:checked + label:after{background-position:-20px;}
.type-checkbox{margin-right:8px;}
.type-checkbox:checked{background-position:-40px;}

.form-group label{display: flex; align-items: center; font-size: max(16px, 1.8vw); margin-bottom:8px; font-weight: 600;}
.form-group .required-text{font-size:1rem; margin-top:8px;}
.form-group span{font-size: 1rem;}
.form-group .type-input,
.form-box .type-file{width:100%; height: 48px; border:1px solid #8B8B8B; padding: 12px; vertical-align: middle; font-size: 1rem; border-radius: 4px; box-sizing: border-box;}
.form-box .type-file,
.form-box{gap: 10px;}
.form-box .type-file{line-height: 1.25;}
.form-box .input-btn{width:140px; height: 48px; background-color: var(--bs-black); color: var(--bs-white); border-radius: 4px; cursor: pointer;}
.type-input:focus{border-width: 2px; border-color: var(--bs-black);}

.img-default{border-radius: 8px; margin-bottom:24px; overflow: hidden;}
.img-default.fit-img{height:300px;}
.radius-default{border-radius: 8px; overflow: hidden;}

.sub-visual-img{height:240px;}
.sub-visual-img img{width: 100%; height: 100%; object-fit: cover; display: block;}

.full-img{margin-bottom:32px;}

.solution-main{margin-bottom:24px; }

/*we-are*/
.we-are{background:url(../images/layout/about1.jpg)center / cover no-repeat;}
.text-img-group{flex-direction: column; margin-bottom:32px;}
.text-img-group p{line-height: 130%; font-size: clamp(32px, 8vw, 80px); font-weight: 700; margin-bottom:1.5rem;}
.text-img-group span{line-height: 160%;}

/*we-do*/
.half-text-wrap{flex-direction: column;}

.zigzag-list{display: flex; flex-direction: column; gap: 100px;}
.zigzag-img{margin-bottom: 32px;}
.zigzag-list.solution-info{gap: 0;}
.zigzag-list.solution-info .content-title{margin-bottom:20px;}
.zigzag-list.solution-info li:nth-child(2){box-sizing: border-box; padding: 2.5rem 2rem; background:#F5F5F5; height:340px;}
.zigzag-list.solution-info .gray-logo{position:absolute; right: 3rem; bottom:2.5rem; opacity: 0.2; height:20px;}
.zigzag-list.solution-info .gray-logo img{height:100%;}

.vision-img{background:url(../images/layout/about7.jpg)center / cover no-repeat; height: 400px;}
.visual-title{color: var(--bs-white); flex-direction: column; text-align: center;}
.visual-title p{font-size: max(36px, 5vw); font-weight: 700; margin-bottom:12px;}
.visual-title span{font-weight: 400;}

/*strengths*/
.strengths-wrap{background: url(../images/solution/solution-main1.jpg)center / cover no-repeat;}

section.auto.strengths-wrap{height:400px; z-index: 5;}
.strengths-wrap .inner{padding-top: 7rem;}
.sub-title-wrap h2{color: var(--bs-white); text-align: center; font-size: max(32px, 6.5vw); font-weight: 700; line-height: 140%;}
.sub-title-wrap p{color: var(--bs-white); text-align:center; font-size: max(16px, 2.6vw); font-weight: 400; }
.sub-title-wrap span{color: rgba(255, 255, 255, 0.80);  text-align: center; font-size: max(16px, 2.6vw); font-weight: 400; margin-top: 1rem; display: block;}

.sub-menu.select-menu{width: 100%; position: absolute; z-index: 1; top: 100%; left: 0; margin-top: -70px; flex-direction: column;}
.sub-menu.select-menu .select-box{display: flex; align-items: center; justify-content: space-between; width:100%; height:70px; text-align: left;
    box-sizing: border-box; padding:0 1.5rem; border-top: 1px solid rgba(229, 229, 229, 0.2); }
.sub-menu.select-menu .select-box.active i.ic-select{transform: rotate(180deg); }
.sub-menu.select-menu .select-box span{font-size: max(16px, 2.6vw); color: var(--bs-white); font-weight: 600;}
.sub-menu.select-menu ul{display: none; flex-wrap: wrap; background:var(--bs-white); width:100%; box-shadow: 0 16px 20px 0 rgba(0, 0, 0, 0.10);}
.sub-menu.select-menu ul.selected{display: block;}
.sub-menu.select-menu ul li{border-bottom:1px solid #eee;}
.sub-menu.select-menu ul li a{display: block; box-sizing: border-box; padding: 0.75rem 1.5rem;}
.sub-menu.select-menu ul li:last-child{border-color: #ddd;}
.sub-menu.tab-menu{display: none;}

.strengths-type{width:90%; margin:0 auto; background-size: cover; background-repeat: no-repeat; background-position: center;}
/*.strengths-type.logistics{background-image: url(../images/solution/solution-logistics-bg.jpg);}
.strengths-type.questionnaire{background-image: url(../images/solution/solution-questionnaire-bg.jpg);}
.strengths-type.records{background-image: url(../images/solution/solution-records-bg.jpg);}*/

.gray-label{font-size: max(18px, 2vw); color:var(--bs-gray); background-color:#EEE; padding:6px 10px; border-radius:8px; display: inline-block;}
.info-text h2{margin-bottom:40px;}
.info-text p{line-height: 150%; font-weight: 400;}

.wrap-mb{margin-bottom:240px;}

.features-group{flex-direction: column; margin-bottom: 120px;}
.features-group .gray-label{margin-bottom:16px;}
.features-group h2{margin-bottom:32px;}

.more-etc .features-group h2{margin-bottom:20px;}
.more-etc .etc-list{margin-bottom:40px;}
.more-etc .etc-list li{display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
.more-etc .etc-list li strong{font-size: max(18px, 2vw); font-weight:500; display: inline-block; width:95px;}
.more-etc .etc-list li:first-child{border-top: 1px solid #ddd;}
.more-etc .etc-list li{padding:20px 0; border-bottom: 1px solid #ddd;}
.more-etc .etc-list li p{color: var(--bs-gray); width: calc(100% - 105px);}

.card-group{flex-direction: column; gap: 32px;}
.card-group article figcaption{position: absolute; color: #fff; left: 2rem; bottom: 2rem;}
.card-group article figcaption h3{font-size: max(24px, 2.5vw); font-weight:700;}

.error{text-align: center;}
.error img{width: 60%; height:auto; margin:0 auto 10px;}
.error h2{margin-bottom:6px;}
.error p{font-size: max(16px, 2vw);}

/*아이콘 및 버튼*/
.icon{display: block; background-position:0 0 ; background-size:contain; background-repeat: no-repeat;}
.ic-arrow-white{background-image: url(../images/style/ic-arrow-white.png);}
.ic-arrow-white45{background-image: url(../images/style/ic-arrow-white45.png);}
.ic-arrow-black{background-image: url(../images/style/ic-arrow-black.png);}
.ic-arrow-black45{background-image: url(../images/style/ic-arrow-black45.png);}
.ic-select{background-image: url(../images/style/ic-select.png);}
.ic-arrow-more-white{background-image: url(../images/style/ic-arrow-white45-2.svg);}
.ic-download-white{background-image: url(../images/style/ic-download-white.svg);}

.ic-size-s{width:14px; height:14px;}
.ic-size-m{width:16px; height:16px;}
.ic-size-l{width:18px; height:18px;}
.ic-size-xl{width:44px; height:44px;}

.btn{display: block;}

/*화살표만 있는 버튼*/
.btn-arrow{width:40px; height:40px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.7); transition: all 0.4s; overflow: hidden; position: relative;}
.btn-arrow:hover{background-color: rgba(0, 0, 0, 1);}
.btn-arrow i{transition: transform 0.2s ease-in-out;}
.btn-arrow:hover i{animation: arrow-move1 0.4s ease-in-out forwards;}

/*텍스트버튼*/
.btn-size-l{padding:1rem 2rem;}
.btn-size-l span{font-weight: 600; font-size:1.25rem;}
.btn-size-m{padding:0.5rem 1.25rem;}
.btn-size-m span{font-weight: 600; font-size:1rem;}
.btn-size-s{padding:0.375rem 1.125rem;}
.btn-size-s span{font-weight: 500; font-size: 0.9375rem;}

.btn-text{background-color: var(--bs-black); color:var(--bs-white); border: 1px solid var(--bs-black); box-sizing: border-box; transition: all 0.4s; border-radius: 4px;}
/* .btn-text i{position: static; margin-left:0.75rem; background-image: url(../images/style/ic-arrow-white45.png);}
.btn-text:hover i{background-image: url(../images/style/ic-arrow-black45.png); }
.btn-text.show-icon i{transform: translateX(20px); opacity: 0; display: none;}
.btn-text.show-icon:hover i{background-image: url(../images/style/ic-arrow-black45.png);  transform: translate(0, 0); animation: arrow-move2 0.4s ease-in-out forwards; display: block;} */
.btn-text:hover,
footer .footer-wrap .footer-btns .btn-text:hover{background-color: #116DD6; border-color: #116DD6;}

.btn-text.btn-line{background-color: transparent; color:var(--bs-black); border: 1px solid var(--bs-black);}
.btn-text.btn-line:hover{color: #116DD6; border-color: #116DD6; background-color: #E5ECF9;}
@keyframes arrow-move1 {
    0% { transform: translate(-50%, -50%); }
    50% { transform: translate(calc(-50% - 4px), calc(-50% + 4px)); }
    100% { transform: translate(calc(-50% + 4px), calc(-50% - 4px)); }
}

@keyframes arrow-move2 {
    0% {
        opacity: 0;
        transform: translateX(0);
    }
    50% {
        transform: translate(-2px, 5px)
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/*자세히 보기 버튼*/
.btn-more-view{position: relative; padding-right: 15px; color: #707070; margin-top:24px; display: inline-block;}
.btn-more-view:after{content:''; display: block; width:8px; height:12px; background:url(../images/style/btn-more.svg)0 0 / cover no-repeat;
    position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
/*링크버튼*/
.btn-link{gap:16px; position: relative;}
.btn-link::after{content: ""; width:0; display: inline-block; position: absolute; left: 0; bottom:0; height:4px; transition: width .2s cubic-bezier(.165,.84,.44,1); background: var(--bs-black);}
.btn-link:hover::after{width: 100%;}
.btn-link span{font-size:2.5rem; font-weight: 700;}
.btn-link i{width:20px; height:20px;}

.btn-text-link span{border-bottom: 1px solid #707070; color:#707070;}
.btn-text-link span:hover{color:#116DD6; border-color:#116DD6;}

/*더보기*/
.btn-more i{margin-bottom: 0.5rem; animation: shake-up-down 1s infinite ease-in-out;}


@keyframes shake-up-down {
    0%, 100% {
        transform: translateY(0) rotate(90deg);
    }
    50% {
        transform: translateY(-5px) rotate(90deg);
    }
}

/*work-with-us*/
.work-with-us{font-size: 10rem; font-weight: 800;}

.news-header{display: none;}
.news-list{border-top: 4px solid var(--bs-black);}

.news-header.view{display: block; border-top: 4px solid var(--bs-black); padding:30px 0;}
.news-header.view p{font-size: max(18px, 2.1vw); margin-bottom:4px; font-weight: 700;}
.news-header.view span{color:#8B8B8B; font-size: 14px;}
.news-header.view span:nth-child(2){width: auto; justify-content: start;}

.news-body{border-top:1px solid #C9C9C9; border-bottom:1px solid #C9C9C9; padding:30px 0;}
.news-body .inner{padding: 0;}
.news-body .inner p{line-height: 160%;}

/*news-list*/
.news-list ul li{padding: 24px 0; border-bottom:1px solid #E0E0E0; transition: background-color 0.3s ease;}
.news-list ul li a{display: flex; flex-direction: row; gap: 1.2rem;}
.news-list ul li .news-img { width: clamp(7rem, 25vw, 260px); flex-shrink: 0; overflow: hidden;}
.news-list ul li .news-img img {width: 100%; height: 100%; object-fit: cover; display: block;}
.news-list ul li .news-text-wrap{margin-top: 8px;}
.news-list ul li .news-text-wrap span{color:var(--bs-gray);}
.news-list ul li .news-text{margin-bottom:12px;}
.news-list ul li .news-text p{font-size: max(16px, 2.1vw); font-weight: 700; overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;}
.news-list ul li .news-text span{display: none;}
.news-list ul li .date span{color:#8B8B8B; font-size: 14px;}
.news-list ul li:hover{background-color: #eee;}

.news-form{margin-bottom:32px;}

.pagination{position: relative; display: flex; align-items: center; justify-content: center; height: 32px; text-align: center; margin-top: 40px;}
.pagination a{position: relative; display: block; min-width: 18px; height: 18px; font-size: 0px; border-radius: 4px;}
.pagination a:hover{background-color:#eee;}
.pagination a.active{background-color:#1E1E1E; color:#fff;}
.pagination ol{display: flex; align-items: center; margin: 0 16px;}
.pagination ol li{margin: 0 4px;}
.pagination ol li a{display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 15px; font-weight: 500;}
.pagination .btn-first,
.pagination .btn-last{display: none;}
.pagination .btn-pagination{width: 32px; height: 32px; position:relative;}
.pagination .btn-pagination::after {content: ''; display: block; width: 32px; height: 32px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    -webkit-mask-image: url(../images/style/ic-pagination.svg); mask-image: url(../images/style/ic-pagination.svg);
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 128px 32px; mask-size: 128px 32px; background-color: #1e1e1e;}
.pagination .btn-first::after {-webkit-mask-position: 0 0; mask-position: 0 0;}
.pagination .btn-prev::after {-webkit-mask-position: -32px 0; mask-position: -32px 0;}
.pagination .btn-next::after {-webkit-mask-position: -64px 0; mask-position: -64px 0;}
.pagination .btn-last::after {-webkit-mask-position: -96px 0; mask-position: -96px 0;}
.pagination .btn-pagination.active::after {background-color: #fff;}

.card-list.certification-list ul{display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 40px; column-gap: 24px;}
.card-list.certification-list ul li .certification-img{background:#F5F5F5;  box-sizing: border-box; padding:max(24px, 6vw); border-radius:8px; margin-bottom: 10px; display: flex; justify-content: center;}
.card-list.certification-list ul li .certification-img img{box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.16); border-radius:8px; overflow: hidden;}
.card-list.certification-list ul li strong{font-size: max(16px, 1.8vw);}

/*footer*/
footer{margin-top: 60px;}
footer .move-footer{overflow: hidden;}
footer .move-footer span{font-size: 3rem; font-weight: 600; white-space: nowrap; color: #F3F4F6; animation: moveText 60s linear infinite; /* 10초 주기로 무한 반복, 필요시 시간 조절 */ }
footer .footer-wrap{background:var(--bs-black);}
footer .footer-wrap .inner{padding:40px 20px; flex-direction: column;}
footer .footer-wrap .inner.menu-inner{padding:20px; flex-direction: column; gap: 8px;}
footer .footer-wrap .footer-group{display: flex; flex-direction: column-reverse;}
footer .footer-wrap .footer-logo{width:200px; margin-bottom:20px; flex-shrink: 0;}
footer .footer-wrap .footer-logo img{width:100%;}
footer .footer-wrap ul.footer-info li{margin:4px 0; font-size:0.938rem; color:#D6D5D7;}
footer .footer-wrap .footer-copy{color: #707070;}
footer .footer-wrap .footer-btns{margin-bottom:20px; flex-direction: column; gap: 8px;}
footer .footer-wrap .footer-btns .btn-text{background-color:#2D2D2D; justify-content: space-between; padding:10px 16px; align-items: start;}
footer .footer-wrap .footer-btns .btn-text i{flex-shrink: 0; margin-top: 2px;}
footer .footer-wrap .footer-btns .btn-text span{font-size:0.938rem; line-height: 140%}
footer .footer-wrap .footer-menu{border-top:1px solid #424242;}
footer .footer-wrap .footer-menu ul li{font-size: 1rem; color:#D6D5D7;}
footer .footer-wrap .footer-menu ul li{margin-left: 20px;}
footer .footer-wrap .footer-menu ul li:first-child{margin-left: 0;}
@keyframes moveText {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}


/*지도*/
.map{margin-bottom:32px;}
.map .cont{display: none;}
.map .root_daum_roughmap_landing{height:100% !important;}

.directions-text p{padding:12px 0 20px; border-bottom: 1px solid var(--bs-gray-200);}
.directions-text ul{margin-top: 20px; flex-direction: column; gap: 6px;}

/*history*/
.history-wrap{position: relative;}
.history-percent-bar { position: absolute; left: 10px; top: 5px; width: 1px; height:100%; background-color: #ccc;}
.history-percent-bar .percent-bar {position: absolute; left: 0; top: 0; width: 100%; height: 0; /* 처음엔 0% */ background-color: #116DD6; transition: height 0.1s linear;}
.history-percent-bar .point {width: 36px; height: 36px; background-color: rgba(17, 109, 214, 0.20); border-radius: 50%; position: absolute; left: -18px; top: 0; transition: top 0.1s ease-out;
    display: flex; justify-content: center; align-items: center;}
.history-percent-bar .point-dot { width: 12px; height: 12px; background-color: #116DD6; border-radius: 50%; animation: dotPulse 1.5s ease-in-out infinite;}
.history-percent-bar .point-dot::after {content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; background-color: rgba(17, 109, 214, 0.5); border-radius: 50%;
    transform: translate(-50%, -50%) scale(1); animation: waveRipple 1.5s ease-out infinite;}
/* 중심 점 펄스 */
@keyframes dotPulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

/* 퍼져나가는 파동 */
@keyframes waveRipple {
    0% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.6;
    }
    100% {
        transform: translate(-50%, -50%) scale(2.5);
        opacity: 0;
    }
}


.history-group{padding-left: 40px; margin-bottom: 80px;}
.history-group:last-child{margin-bottom: 0;}
.history-group .history-title h3{font-size: min(40px, max(1.8rem, 2.5vw)); font-weight: 700; margin-bottom: 16px;}
.history-group .history-title .history-img{margin-bottom: 16px;}
.history-group .history-title .history-img img{width: 100%;}
.history-group .history-title .history-text{font-size: min(24px, max(1.3rem, 2vw));}

.history-group .history-list{margin-top: 32px;}
.history-group .history-list h4{font-size: min(32px, max(1.4rem, 2.5vw)); font-weight: 600; margin-bottom: 16px; color: var(--bs-blue);}
.history-group .history-list ul li{display: flex; margin-bottom: 8px;}
.history-group .history-list ul li strong,
.history-group .history-list ul li p{line-height: 160%; font-size: min(20px, max(1rem, 1.5vw));}
.history-group .history-list ul li strong{width: 2.5rem; padding-right: 10px; flex-shrink: 0;}

.info-card-group{ gap: 20px;}
.info-card{background-color:#F4F5F6; border-radius: 8px; padding:24px; display: block;}
.info-card .card-number{font-size: min(22px, max(1.2rem, 1.8vw)); margin-bottom: 8px;}
.info-card .card-title{font-size: min(26px, max(1.35rem, 2vw)); margin-bottom: 20px; font-weight: 700;}
.info-card p{font-size: min(20px, max(1rem, 1.5vw));}
.info-card .info-text-small{font-size: min(18px, max(1rem, 1.2vw));}
.info-card.service-card{background-color: #1B253C;}
.info-card.service-card .service-img img{width:100%; height:100%; max-width:430px; max-height:330px; margin-top: 50px;}

.info-text{font-size: min(20px, max(1rem, 1.5vw));}

.info-card-group.card-row{flex-direction: column; gap: 20px;}
.info-card.white-card{background-color: #fff; border: 1px solid #E6E6E6; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.08);}
.info-card.dark-card{background-color:#1B253C;}

.info-card i.ic-company{width:48px; height:48px; background-repeat: no-repeat; background-size: cover; background-position: center; display: block; margin-bottom:20px;}
.info-card:nth-child(1) i.ic-company{background-image: url(../images/layout/ic-company1.png);}
.info-card:nth-child(2) i.ic-company{background-image: url(../images/layout/ic-company2.png);}
.info-card:nth-child(3) i.ic-company{background-image: url(../images/layout/ic-company3.png);}
.info-card:nth-child(4) i.ic-company{background-image: url(../images/layout/ic-company4.png);}


.vision-group .vision-title{font-size: min(30px, max(1.25rem, 2vw)); font-weight: 700; background:#fff; color:#116DD6; padding:20px 40px; border-radius: 50px; box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.16); text-align: center; margin:40px auto;}
.vision-group ul{display: grid; gap: 20px; margin-bottom:20px;}
.vision-group ul li{height:240px; padding:28px; border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end;}
.vision-group ul li p{font-size: min(30px, max(1.5rem, 2.2vw)); font-weight: 700; margin-bottom: 8px;}
.vision-group ul li span{font-size: min(22px, max(1rem, 1.8vw));}
.vision-group ul li:nth-child(1){background: url(../images/layout/company-img2-1.png)center / cover no-repeat;}
.vision-group ul li:nth-child(2){background: url(../images/layout/company-img2-2.png)center / cover no-repeat;}
.vision-group ul li:nth-child(3){background: url(../images/layout/company-img2-3.png)center / cover no-repeat;}

.company-profile{border-radius: 8px; overflow: hidden; background: url(../images/layout/company-img3-1.png)center / cover no-repeat; padding:28px; height:200px; flex-direction: column; align-items: center; justify-content: center;}
.company-profile img{object-position: 52%;}

.swiper-preview{width: 100%; height: 100%; margin-left: auto; margin-right: auto; }
.swiper-preview .swiper-button-prev,
.swiper-preview .swiper-button-next{padding:10px;}
.swiper-preview .swiper-button-prev:after,
.swiper-preview .swiper-button-next:after{color:rgba(0, 0, 0, 0.3); font-size: min(44px, max(1.5rem, 4vw));}
.swiper-preview .swiper-button-prev:hover:after,
.swiper-preview .swiper-button-next:hover:after{color:rgba(0, 0, 0, 0.5);}
.swiper-preview .swiper-button-prev{left: 5px;}
.swiper-preview .swiper-button-next{right: 5px;}
.swiper-pagination span{width:6px; height:6px; margin:0 2px;}
.swiper-pagination .swiper-pagination-bullet-active{width:12px; border-radius: 50px;}

.introduction-effect-wrap .effect-group:first-child{border-top:1px solid #C9C9C9;}
.introduction-effect-wrap .effect-group{padding: 40px 20px; border-bottom: 1px solid #C9C9C9;}
.introduction-effect-wrap .effect-group .effect-text h4{font-size: min(30px, max(1.5rem, 2.2vw)); margin-bottom: 20px; font-weight: 700;}
.introduction-effect-wrap .effect-group .effect-text .effect-explanation{font-size: min(20px, max(1rem, 1.5vw));}
.introduction-effect-wrap .effect-group .effect-image {width: 100%; max-height: 300px; display: flex;  justify-content: center; align-items: center; margin-top: 20px; overflow: hidden;}
.introduction-effect-wrap .effect-group .effect-image img {max-height: 100%; max-width: 100%; object-fit: contain;}

.info-title{font-size: min(30px, max(1.5rem, 2.2vw)); margin-bottom: 20px; font-weight: 700;}
.list-style ul li{position:relative; font-size: min(20px, max(1rem, 1.5vw)); margin: 2px 0; padding-left: 14px;}
.list-style ul li::before{content: "•"; font-size: 1rem;  position: absolute; left: -1px; top: -2px;}


.info-cta{display: flex; flex-direction: column; align-items: center;}
.info-cta .btn-wrap{flex-direction: column; }
.info-cta .btn-wrap a{width: 160px;}

.process-steps{padding: 24px; display: flex; flex-direction: column; gap: 30px; background: #EBF2FD; border-radius: 8px;}
.process-steps li{padding:20px; border-radius: 8px; background-color: var(--bs-white); border: 1px solid #CCD9EB; box-shadow: 0 4px 8px 0 rgba(69, 72, 77, 0.16); flex: 1 1 auto; position: relative;}
.process-steps li:not(:last-child)::before {content: ''; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #224CD6; }
.process-steps li:not(:last-child)::after { content: ''; position: absolute; bottom: -30px; left: 50%; transform: translateX(-50%); width: 2px; height: 30px; background: #224CD6;}
.process-steps li .step-num,
.process-steps li p{font-size: 1rem;}
.process-steps li .step-title{font-size: 1.125rem; font-weight: 700; margin-top:2px; color:#224CD6;}
.process-steps li p{margin-top: 12px;}

.info-explanation h4{font-size: min(26px, max(1.25rem, 2vw)); font-weight: 700; margin-bottom:8px;}

.tag-title{display: flex; flex-direction: column; align-items: center;}
.tag-type .tag{color:#707070; border: 1px solid #9D9D9D; border-radius: 50px; font-weight: 500;}
.tag-type .tag-blue{border-color:#116DD6; color:#116DD6;}
.tag-type .tag-blue-light{border-color:#19A7FF; color:#19A7FF;}
.tag-type .bg-tag{border-radius: 50px; background: rgba(255, 255, 255, 0.10); backdrop-filter: blur(5px);}
.tag-type ul{display: flex; flex-direction: row; gap: 4px;}

.tag-size-m{padding:6px 12px; font-size:14px;}
.tag-size-s{padding:5px 12px; font-size: 14px;}

.solution-type .white-card{transition: border 0.3s ease, box-shadow 0.3s ease;}
.solution-type a:hover .white-card{border-color:var(--bs-black); box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.25);}

.table-style{border:1px solid #C2C2C2;}
.table-style th, .table-style td{padding:8px 12px; border-bottom: 1px solid #C2C2C2; border-right: 1px solid #C2C2C2;}
.table-style th:last-child, .table-style td:last-child{border-right: 0;}
.table-style th{background-color:#EBEEF2;}

.main-visual{min-height:100svh;}
.swiper-main,
.swiper-main .swiper-wrapper,
.swiper-main .swiper-slide {height: 100%;}
.swiper-main .swiper-slide{position: relative; overflow: hidden; background-size: cover; background-repeat: no-repeat;}
.swiper-main .swiper-slide::before{content: ""; position: absolute; inset: 0; transform: scale(1); transition: transform 8s ease; background-repeat: no-repeat; background-size: cover;}
.swiper-main .swiper-slide .swiper-title{width: calc(100% - 40px); position: absolute; left: 20px; top: 25%; z-index: 10;}
.swiper-main .swiper-slide .swiper-title h2,
.swiper-main .swiper-slide .swiper-title p{overflow: hidden; transition: transform 2.5s cubic-bezier(0,1,.34,.99),opacity 2.5s cubic-bezier(0,1,.34,.99); opacity: 0; transform: translateY(100%);}
.swiper-main .swiper-slide .swiper-title h2{font-size: max(34px, 5vw); line-height: 1.35; color: #fff; font-weight: 700; margin-bottom: 24px;}
.swiper-main .swiper-slide .swiper-title p{font-size: max(18px, 2.3vw); color: #fff;}
.swiper-main .swiper-slide-active .swiper-title h2,
.swiper-main .swiper-slide-active .swiper-title p{transform: translateY(0); opacity: 1;}
.swiper-main .swiper-slide-active .swiper-title h2{transition-delay: .5s;}
.swiper-main .swiper-slide-active .swiper-title p{transition-delay: .9s;}

.swiper-main .swiper-wrapper{position:relative;}
.swiper-main .swiper-img {position: absolute; inset: 0; overflow: hidden;}
.swiper-main .swiper-img img {width: 100%; height: 100%; object-fit: cover; transform: scale(1); transition: transform 3s ease; object-position: 60% 60%; }
.swiper-main .swiper-slide-active .swiper-img img {transform: scale(1.1);}

.swiper-main .swiper-button-next,
.swiper-main .swiper-button-prev{display: none;}
.swiper-main .swiper-pagination{position:absolute; left: 50%; bottom: 60px; transform: translateX(-50%); display: inline-flex; justify-content: center; align-items: center; }

/*스와이퍼 컨트롤 메인용*/
.swiper-control span{margin:0 4px; width: 12px; height:12px;}
.swiper-control {bottom:40px;}
.swiper-control .swiper-pagination-bullet-active{width:20px; height:10px; border-radius: 50px;}

/*메인 비쥬얼*/
.swiper-main .swiper-control span{background-color:#fff; opacity: 0.5;}
.swiper-main .swiper-control .swiper-pagination-bullet-active{background-color: #fff; opacity: 1;}


.main-service{background-color:#08142C;}
.title-group{margin-bottom: 3rem;}
.title-group h2{margin-bottom: 16px; line-height: 130%;}
.service-group{padding:32px; border-radius: 16px; overflow: hidden;}
.service-group.logistics{background:url(../images/layout/main-service2.png)center /cover no-repeat;}
.service-group.records{background:url(../images/layout/main-service3.png)center /cover no-repeat;}
.service-group .service-info{margin-bottom: 40px;}
.service-group .service-inf .tag-type{gap: 10px;}
.service-representative{border: 2px solid #19A7FF; background-color: #08142C; box-shadow: 0 0 80px 0 rgba(40, 126, 255, 0.40); margin-bottom: 20px;}
.service-representative .service-img{border-radius: 12px; overflow: hidden; height:30vh; /*height: 200px;*/}
.service-representative .service-img img{height:auto; object-position: center;}
.service-representative .tag-type{margin-bottom: 30px;}

.service-sub{gap: 20px;}
.service-sub .service-group{height:200px;}

/*메인화면 솔루션 리스트*/
.solution-list ul li a{display: block; width: 100%; height:100%;}
.solution-list .solution-representative{border-radius: 8px; height:280px;}
.solution-list .solution-representative .info-card{position:relative;}
.solution-list .solution-representative .info-card::before{content:''; display: block; position:absolute; right: 0; bottom: 0; background-repeat: no-repeat; background-position: center; background-size: cover;}
.ai-solutions .solution-list .solution-representative .info-card{background-color:#0d1841; }
.ai-solutions .solution-list .solution-representative .info-card::before{background-image:url(../images/layout/solution-main1.png); width:220px; height:190px; border-radius: 12px;}
.cloud-solutions .solution-list .solution-representative .info-card{background-color: #529EB3;}
.cloud-solutions .solution-list .solution-representative .info-card::before,
.important-solutions .solution-list .solution-representative:nth-child(1) .info-card::before,
.important-solutions .solution-list .solution-representative:nth-child(2) .info-card::before{width:200px; height:160px; bottom: 10px;}
.cloud-solutions .solution-list .solution-representative .info-card::before{background-image:url(../images/layout/solution-main4.png);}
.important-solutions .solution-list .solution-representative:nth-child(1) .info-card{background-color:#2B2F3A;}
.important-solutions .solution-list .solution-representative:nth-child(1) .info-card::before{background-image:url(../images/layout/solution-main2.png);}
.important-solutions .solution-list .solution-representative:nth-child(2) .info-card{background-color:#1C2F5E;}
.important-solutions .solution-list .solution-representative:nth-child(2) .info-card::before{background-image:url(../images/layout/solution-main3.png);}
.solution-type .solution-representative .solution-card{transition: border 0.3s ease, box-shadow 0.3s ease, border 0s; border: 2px solid transparent}
.solution-type .solution-representative a:hover .solution-card{/*outline: 2px solid rgb(255, 255, 2555, 1);*/border: 2px solid #fff; box-shadow: 0 4px 30px 0 rgba(55, 75, 155, 0.7);}

.solution-card-group{grid-template-rows: auto; grid-template-columns: 1fr; gap: 20px; grid-template-areas: "solution1" "solution2" "solution3" "solution4"; }
.solution-card-group .solution-card{padding:28px;}
.solution-card-group .solution-card .card-title{position:relative; line-height: 130%; display: flex; align-items: center; gap: 8px}
.solution-card-group .solution-card .card-title::after {content: ''; display: block; width: 16px; height: 16px; background-color: rgba(0,0,0,1); position: absolute; right: 0; top: 50%;
    transform: translateY(-50%) translateX(-50%) translateY(0) translateX(0); /* 초기 위치 */
    transition: transform 0.4s ease-in-out;
    -webkit-mask: url('../images/style/ic-arrow-black45-2.svg') center / cover no-repeat ;
    mask: url('../images/style/ic-arrow-black45-2.svg') no-repeat center / cover;}
.solution-card-group .solution-representative .solution-card h4::after{background-color: rgba(255, 255, 255, 0.7);}
.solution-card-group li a:hover .solution-card .card-title::after {transform: translateY(-50%) translateX(-50%) translateY(-10px) translateX(10px);}
.card-title .logo-tgs{width:44px; height:20px;}


.swiper-news{padding: 0 20px; border-radius: 8px;}
.swiper-news .swiper-slide{justify-content: center; align-items: start;}
.swiper-news .swiper-slide .news-thumbnail img{transform: scale(1); transition: transform 400ms ease;}
.swiper-news .swiper-slide:hover .news-thumbnail img{transform: scale(1.1);}
.swiper-news .swiper-slide:hover .news-title{color:#116DD6}
.swiper-news .news-title{font-size:max(1.125rem, 1.8vw); font-weight: 700; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; margin-bottom: 20px;}

.main-news .swiper-pagination{left: 50%; bottom: 0; transform: translateX(-50%); display: inline-block; position:relative; margin-top: 60px;}
.main-news .swiper-button-next,
.main-news .swiper-button-prev{position:absolute; top: auto; bottom: 0; width:24px; height:24px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; border-radius: 8px; font-weight: 700;}
.main-news .swiper-button-next{right:5%}
.main-news .swiper-button-prev{left:5%;}
.main-news .swiper-button-prev:after,
.main-news .swiper-button-next:after {font-size: 1.5rem; color:#9D9D9D;}
.main-news .swiper-button-prev:hover:after,
.main-news .swiper-button-next:hover:after{color:var(--bs-black);}
.main-news .swiper-pagination-current{color:var(--bs-black); font-weight: 700;}
.main-news .swiper-pagination-total{color:#707070;}

.popup-size-m{width:80%; max-width: 700px;}

.popup-modal-wrap { position: fixed; inset: 0; align-items: center; justify-content: center; z-index: 100; width: 100%; display: none;}
.popup-modal-wrap.active{display: flex;}
.popup-modal-wrap .modal-dim { position: fixed; inset: 0; background-color: rgba(0,0,0,0.5); z-index: 5; }
.popup-modal-group { height: 70vh; max-height: 600px; display: flex;  flex-direction: column;  z-index: 10; width: 80%;  max-width: 700px; background-color: #fff;  border-radius: 8px;  overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.3);}
.popup-modal-group .modal-header { padding: 14px 20px; border-bottom: 1px solid #eee; position: relative; display: flex; align-items: center; justify-content: space-between;}
.popup-modal-group .modal-body { padding: 14px 20px; box-sizing: border-box; overflow-y: auto; flex: 1 1 auto; }
.popup-modal-group .popup-text,
.popup-modal-group .modal-body .list-style ul li{font-size: 14px;}

.btn-close{background: none; border: none; width: 24px; height: 24px;  padding: 8px; box-sizing: border-box; transition: all 0.4s; cursor: pointer; }
.btn-close span {width: 20px; height: 2px; background-color: var(--bs-black); position: absolute;}
.btn-close .btn-line1 {transform: translate(-30%, -50%) rotate(-45deg);}
.btn-close .btn-line2 {transform: translate(-30%, -50%) rotate(45deg);}

/*core-solution 주요 솔루션 다크모드*/
.core-solution{background-color: #0B152A;}
.core-solution .title-wrap h2,
.core-solution .content-title,
.core-solution .info-title,
.core-solution .card-title{color:#fff;}
.core-solution .title-wrap p,
.core-solution .content-text,
.core-solution .info-text,
.core-solution .effect-text ul li,
.core-solution .list-style ul li{color:#BEBEBE;}
.core-solution .list-style ul li{font-size: max(16px, 1.8vw);}
.core-solution .info-cta p{color:#fff;}
.core-solution .introduction-effect-wrap .effect-group:first-child,
.core-solution .introduction-effect-wrap .effect-group{border-color:rgba(255,255,255,0.2);}
.core-solution .swiper-preview{background-color: #1B253C; border:2px solid #19A7FF; box-shadow: 0 0 60px 0 rgba(40, 126, 255, 0.40);}
.core-solution .swiper-preview .swiper-button-prev:after,
.core-solution .swiper-preview .swiper-button-next:after{color:#9D9D9D;}
.core-solution .swiper-preview .swiper-button-prev:hover:after,
.core-solution .swiper-preview .swiper-button-next:hover:after{color:#fff;}
.core-solution .swiper-pagination span{background-color:#fff;}
.core-solution .process-steps li:not(:last-child)::after{background-color: #3973FB;}
.core-solution .process-steps li:not(:last-child)::before{border-top: 8px solid #3973FB;}

.core-solution .process-steps{background-color:#1B253C;}
.core-solution .process-steps li{background-color: #4DA0D3; border: none;}
.core-solution .process-steps li .step-title{color:#fff}
.core-solution .process-steps li span,
.core-solution .process-steps li p{color:#DBEAF3}
.core-solution footer{margin-top: -72px;}
.core-solution footer .move-footer span{opacity: 0.08;}

.core-solution .info-cta .btn-wrap a{border: 0; color:#fff;}
.core-solution .info-cta .btn-wrap a:nth-child(1){background-color: #116DD6;}
.core-solution .info-cta .btn-wrap a:nth-child(1):hover{background-color: #19A7FF;}
.core-solution .info-cta .btn-wrap a:nth-child(2),
.core-solution .info-cta .btn-wrap a:nth-child(3){background-color:rgba(255, 255, 255, 0.2); backdrop-filter: blur(10px);}
.core-solution .info-cta .btn-wrap a:nth-child(2):hover,
.core-solution .info-cta .btn-wrap a:nth-child(3):hover{background-color:rgba(255, 255, 255, 0.5);}

.cta-group{background-position:center; background-size:cover; width:100%; height:100%;}
.cta-group .inner{padding-top: 6rem;  padding-bottom: 8rem; margin-top: 80px;}
.cta-checkOn{background-image:url(../images/solution/checkOn/checkon-img4.png);}
.cta-vault{background-image:url(../images/solution/vault/vault-img4.png);}
.cta-hanbaguni{background-image: url(../images/solution/hanbaguni/hanbaguni-img4.png);}
.cta-crowd{background-image: url(../images/solution/crowd/crowd-img4.png);}

/*ci소개*/
.info-ci-color article h4{font-size: max(18px, 2.2vw); font-weight: 500;}
.info-ci-color .twogoms-color{width:100%; height:50px;}
.info-ci-color .twogoms-brown{background-color:#A97458;}
.info-ci-color .twogoms-gray{background-color:#585757;}
.info-ci-color .twogoms-black{background-color:#1E1E1E;}
.info-ci-color .info-card-group{gap: 32px;}


.side-menu{position:fixed; bottom: 0; right: 0; width: 100%; background-color:#fff; z-index: 5; height: 50px; border-top: 1px solid #E6E6E6;}
.side-menu ul{flex-direction: row; height:100%;}
.side-menu ul li{flex: 1;}
.side-menu ul li a{width: 100%; height:100%; display: flex; align-items: center; justify-content: center; color: #707070;}
.side-menu ul li a.active{color:#116DD6; font-weight: 700;}

@media (min-width: 419px) {
    footer .footer-wrap .footer-btns .btn-text{align-items: center;}
    footer .footer-wrap .footer-btns .btn-text i{margin-top: -1px}
}

@media (min-width: 600px) {
    .main-news .inner{padding-left: 0; padding-right: 0;}
    .swiper-news {padding: 0 40px;}
    .swiper-news .swiper-slide{width:80%; max-width: 440px;}
    footer .footer-wrap .footer-btns .btn-text{width: 200px; padding:12px 18px;}
    footer .footer-wrap .inner.menu-inner{flex-direction: row; align-items: center; justify-content: space-between;}

}

@media (min-width: 767px) {
    section.auto.strengths-wrap{height:auto;}
    .btn-wrap{margin-top: 60px; gap: 14px;}

    .inner,
    .main-news .inner{padding-left: 2.5rem; padding-right: 2.5rem;}
    .inner.solo{padding-top:10rem; padding-bottom:10rem;}
    .inner.max-width-none{max-width: none;}
    .mobile-br{display: none;}
    .tablet-br{display: block;}
    .show-text{font-size: 4vw;}

    header .header-group{padding:1.25rem 2.5rem;}
    header .logo a{width: 120px;}
    .nav>ul{padding-top: 80px;}
    .nav ul li.menu-items>a{padding:20px 40px;}
    .nav ul li.menu-items .submenu.open{padding:20px 40px;}
    .nav ul li.menu-items .submenu .submenu-items li{width:25%;}

    .main .title h2{font-size:4rem;}
    .main .title p{font-size:1.75rem;}

    .title-wrap h2{margin:1rem 0;}
    .title-wrap .btn-wrap{margin-top:60px;}

    .content-title{margin-bottom: 20px;}

    .content-top{margin-top:60px;}
    .content-top-lg{margin-top:80px;}
    .content-bottom{margin-bottom:60px;}
    .content-bottom-lg{margin-bottom:80px;}

    .project-wrap li h2{padding:1.25rem 0 1.5rem 0;}
    .project-wrap li .text-wrap{justify-content: center;}
    .project-wrap li .text-wrap p{display: block;}
    .project-wrap li .text-wrap .sub-text{margin-bottom:40px;}

    .project-list ol{grid-template-columns: repeat(2, 1fr); gap: 4rem 2rem;}

    .project-detail.detail-text {flex-direction: row;}
    .project-detail.detail-text div{width:50%}
    .project-detail.detail-text div:nth-child(1){margin: 4rem 2.5rem; justify-content: center; }

    .solution-wrap .inner:nth-child(2){height: calc(100vh - 256px);}

    .customer-review .review-title{text-align: center; margin-bottom: 80px;}
    .customer-review .review-user{margin-bottom: 20px;}
    .customer-review blockquote p::before,
    .customer-review blockquote p::after{content: ''; display: block; width:17px; height:14px; background:url(../images/style/ic-quotes.png)center / cover no-repeat; position: absolute;}
    .customer-review blockquote p::before{left: 10px; top: 10px;}
    .customer-review blockquote p::after{transform: rotate(180deg); right: 10px; bottom: 10px;}

    .row-left{flex: 1;}
    .row-right{flex: 0 0 58%;}
    .full-img{margin-bottom:48px;}

    /*we-are*/
    .text-img-group{flex-direction: row; justify-content: space-between;}
    .visual-title p{margin-bottom:1rem;}
    .vision-img{height:600px;}

    .receipt .receipt-box{width: auto; padding:60px 80px 80px;}

    /*we-do*/
    .half-text-wrap{flex-direction: row; gap: 50px;}
    .zigzag-list{flex-direction: row; flex-wrap: wrap; justify-content: space-between; gap: 0;}
    .zigzag-list li{width:44%;}
    .zigzag-list li:nth-child(2){margin-top:550px;}
    .zigzag-list li:nth-child(3){margin-top:-100px;}

    .zigzag-list.solution-info li{width: 49%;}
    .zigzag-list.solution-info li:nth-child(2){margin-top:160px; height:53vw; padding: 4rem 3rem; box-sizing: border-box; }
    .zigzag-list.solution-info .gray-logo{height:auto; bottom: 4rem;}

    .zigzag-list.text-only li:nth-child(2){margin-top:120px;}

    .features-group{flex-direction: row;}
    .features-group .features-text-wrap,
    .features-group .features-img-wrap{width:50%;}
    .features-group .gray-label{margin-bottom:16px;}
    .features-group h2{margin-bottom:32px;}
    .features-group.reverse{flex-direction: row-reverse;}
    .features-group.reverse .features-text-wrap{text-align: right;}

    .more-etc .features-group{align-items: flex-end; gap: 40px;}
    .more-etc .etc-list{margin-bottom:0;}

    .card-group{flex-direction: row; gap:10px;}
    .card-group article{flex: calc((100% - 20px) / 3);}
    .card-group article figcaption{left: 1.5rem; bottom: 1.5rem;}

    .btn-menu{right:40px; top: 18px;}
    .btn-link{gap:30px;}
    .btn-link span{font-size:5rem;}
    .btn-link i{width:48px; height:48px;}

    .sub-menu.select-menu{display: none;}
    .sub-menu.tab-menu{display: block; position: absolute; left: 50%; right: 0; bottom: 0; width: 100%; max-width: 1300px; transform: translateX(-50%);}
    .sub-menu.tab-menu ul li{display: flex; flex: 1; width:33%;}
    .sub-menu.tab-menu ul li a{display: flex; justify-content: center; width: 100%; height: 100%; font-size:1.5rem; color: var(--bs-white); padding:20px 0; box-sizing: border-box;
        background: rgba(30, 30, 30, 0.30); backdrop-filter: blur(10px); border-width:1px 1px 0 0; border-color:rgba(229, 229, 229, 0.2); border-style:solid;}
    .sub-menu.tab-menu ul li:first-child a{border-left-width: 1px;}
    .sub-menu.tab-menu ul li.active a{background:var(--bs-white); color: var(--bs-black); font-weight: 700;}

    .solution-item .solution-text{left:2.5rem; bottom: 2.5rem;}

    .error img{width:434px;}
    .error p{font-size: 22px;}

    .directions-text ul{flex-direction: row; gap: 0;}
    .directions-text ul li{padding:0 20px; position:relative;}
    .directions-text ul li:first-child{padding-left: 0;}
    .directions-text ul li::before{content:''; display: block; width:1px; height:16px; background-color: var(--bs-gray-200); position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
    .directions-text ul li:first-child:before{padding-left: 0; display: none;}

    .news-list ul li{padding:30px 0;}
    .news-list ul li a{gap: 1.5rem;}
    .news-list ul li .news-text{margin-bottom:16px;}
    .news-list ul li .news-text p{margin-bottom:8px;}
    .news-list ul li .news-text span{overflow: hidden; text-overflow: ellipsis;  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all;}

    .pagination .btn-first,
    .pagination .btn-last{display: block;}

    .form-box{justify-content: end;}
    .form-box .type-input{width:100%; max-width: 400px;}

    footer{margin-top: 120px;}
    footer .footer-wrap .inner{padding:50px 40px;}
    footer .footer-wrap .inner.menu-inner{padding:20px 40px;}
    footer .footer-wrap ul.footer-info li{font-size: 1rem;}
    footer .footer-wrap .footer-menu ul li{margin-left: 50px;}

    .news-header.view{padding: 30px 20px;}
    .news-header.view p{margin-bottom:12px;}
    .news-body{padding: 30px 20px;}

    .pagination ol li a{font-size: 1rem;}

    .card-list.certification-list ul{grid-template-columns: repeat(3, 1fr); column-gap: 32px; row-gap: 80px;}
    .card-list.certification-list ul li .certification-img{padding:40px; margin-bottom:16px;}
    .card-list.certification-list ul li .certification-img img{width: 280px;}

    .solution-main,
    .img-default{margin-bottom: 32px;}
    .img-default.fit-img{height:100%;}
    .sub-visual-img{height:300px;}

    .history-percent-bar{left: 50%; height: calc(100% - 10px);}

    .history-group{display: flex; padding-left: 0; margin-bottom: 120px;}
    .history-group .history-title .history-img img{max-width: 450px;}

    .history-group .history-list{margin-top: 40px;}
    .history-group .history-list:first-child{margin-top: 0;}
    .history-group .history-list ul li strong{width: 50px;}
    .history-group .history-title{width: 50%; padding-right: 4rem;}
    .history-group .history-list-group{width: 50%; padding-left: 4rem;}

    .info-card{padding:28px;}
    .info-card.small-card{min-height: 200px;}
    .info-card-group{grid-template-columns: repeat(2, 1fr);}
    .info-card i.ic-company{width:64px; height:64px;}

    .vision-group ul{margin-bottom: 40px;}
    .vision-group ul li{padding:28px;}
    .vision-group .vision-title{margin:60px auto; max-width: 730px;}

    .company-profile{height:292px; background-image: url(../images/layout/company-img3-2.png);}

    .swiper-preview .swiper-button-prev,
    .swiper-preview .swiper-button-next{padding:30px;}
    .swiper-preview .swiper-button-prev{left: 16px; }
    .swiper-preview .swiper-button-next{right: 16px;}

    .swiper-pagination span{width:10px; height:10px; margin:0 4px;}
    .swiper-pagination .swiper-pagination-bullet-active{width:20px; border-radius: 50px;}
    .swiper-preview .swiper-horizontal > .swiper-pagination-bullets,
    .swiper-preview .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:40px;}

    .swiper-news {padding: 0;}
    .swiper-news .swiper-slide{width:100%;}

    .introduction-effect-wrap .effect-group{padding: 40px 10px; display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
    .introduction-effect-wrap .effect-group .effect-text{width:calc(100% - 400px);}
    .introduction-effect-wrap .effect-group .effect-text h4{margin-bottom: 24px;}
    .introduction-effect-wrap .effect-group .effect-image {width: 300px; max-height: unset; margin-top: 0;}
    .process-steps li{padding:24px;}
    .process-steps li .step-num,
    .process-steps li p{font-size: 18px;}
    .process-steps li .step-title{font-size: 22px; margin-top:4px;}
    .process-steps li p{margin-top:16px;}

    .info-cta .btn-wrap{flex-direction: row; }
    .info-cta .btn-wrap a{width: auto;}

    .info-explanation h4{margin-bottom:16px;}

    .table-style th, .table-style td{padding: 14px 18px;}

    .swiper-main .swiper-slide .swiper-title{width: calc(100% - 80px); top: 30%; left:60px;}
    .swiper-main .swiper-slide .swiper-title h2{margin-bottom: 32px;}

    .tag-type ul{gap:8px;}

    .title-group h2{margin-bottom: 22px;}
    .main-service .title-group{width: 70%; margin: 0 auto 3rem;}
    .service-representative{display: flex; flex-direction: row; gap: 60px; margin-bottom: 30px;}
    .service-representative .tag-type{margin-bottom: 0;}
    .service-representative .service-text{display: flex; flex-direction: column; justify-content: space-between; flex-wrap: wrap; flex: 1 1 60%; }
    .service-representative .service-img{width:40%; flex-shrink: 0; height: 100%;}

    .service-sub{gap: 20px; grid-template-columns: repeat(2, 1fr);}

    .solution-card-group{grid-template-rows: auto; grid-template-columns: 1fr 1fr; grid-template-areas: "solution1 solution1" "solution2 solution2" "solution3 solution4";}
    .solution-card-group .solution-card .card-title::after{width:18px; height:18px;}
    .card-title .logo-tgs{width:52px; height:24px;}
    .solution-card-group li:nth-child(1) { grid-area: solution1;}
    .solution-card-group li:nth-child(2) { grid-area: solution2;}
    .solution-card-group li:nth-child(3) { grid-area: solution3;}
    .solution-card-group li:nth-child(4) { grid-area: solution4;}

    .important-solutions .solution-card-group{grid-template-columns: repeat(2, 1fr); grid-template-areas:unset; grid-template-rows: auto;}
    .important-solutions .solution-card-group li:nth-child(1) { grid-area: unset;}
    .important-solutions .solution-card-group li:nth-child(2) { grid-area: unset;}

    .popup-modal-group .modal-header { padding:16px 32px;}
    .popup-modal-group .modal-body { padding:24px 32px; }
    .popup-modal-group .popup-text,
    .popup-modal-group .modal-body .list-style ul li{font-size: 1rem;}
    .btn-close{width: 32px; height: 32px; border-radius: 8px;}
    .btn-close:hover{background-color: #eee;}
    .btn-close span {width: 24px; height: 2px;}
    .btn-close .btn-line1 {transform: translate(-15%, -50%) rotate(-45deg);}
    .btn-close .btn-line2 {transform: translate(-15%, -50%) rotate(45deg);}

    .info-ci-color .twogoms-color{height:60px;}
    .info-ci-color .info-card-group{grid-template-columns: repeat(3, 1fr);}


}

@media (min-width: 849px) {
    .vision-group ul{grid-template-columns: repeat(3, 1fr); margin-bottom: 60px;}
    .vision-group ul li{height: 400px;}

    .swiper-news .news-title{font-size:1.25rem; margin-bottom: 24px;}

    .main-news .swiper-pagination{height:44px; line-height: 44px;}
    .main-news .swiper-pagination span{font-size: 20px;}
    .main-news .swiper-button-prev:after,
    .main-news .swiper-button-next:after {font-size: 2rem; color:#9D9D9D;}
    .main-news .swiper-button-next,
    .main-news .swiper-button-prev {width: 44px; height: 44px;}
    .main-news .swiper-button-next{right: 0;}
    .main-news .swiper-button-prev{left: 0;}

}

@media (min-width: 949px) {
    .info-card-group.card-row .info-card{display: flex; flex-direction: row; align-items: center;}
    .info-card-group.card-row .info-card .card-title{width:15%; margin-bottom: 0; margin-right: 20px;}
    .info-card-group.card-row .info-card .card-title.long-title{width:20%;}

    footer .footer-wrap .inner{flex-direction: row;  align-items: flex-start; gap: 30px;}
    footer .footer-wrap .footer-group{flex-direction: row; justify-content: space-between; width: 100%;}
    footer .footer-wrap ul.footer-info li:first-child{margin-top: 0;}
    footer .footer-wrap .footer-btns{ flex-direction: column; align-items: end;}
    footer .footer-wrap .footer-btns .btn-text span{font-size:1rem;}

}

@media (min-width: 1279px) {
    section.auto-full{height:100vh;}
    section.auto.strengths-wrap{height:680px;}
    .view-project-wrap .inner:nth-child(1){padding:0;}
    .solution-wrap .inner:nth-child(2){height:70vh;}
    .btn-wrap{margin-top: 80px;}

    .inner{width:100%; max-width: 1240px; /*max-width: 1300px;*/ /*padding-left: 0; padding-right: 0;*/}
    .inner.solo{padding-left: 0; padding-right: 0;}
    .inner.full-inner{max-width: none; padding: 0;}
    .br{display: inline-block;}
    .pc-br{display: inline-block;}
    .show-text{font-size: 3vw;}
    .title-wrap{margin-top:14rem; margin-bottom: 5rem;}
    .title-wrap h2,
    .sub-title-wrap h2{font-size:4.5rem;}
    .title-wrap p,
    .sub-title-wrap span{font-size:1.5rem;}
    .sub-title-wrap p{font-size: 3rem;}
    .title-wrap .summary{flex-direction: row; gap: 40px; border:none; padding-top: 0;}
    .title-wrap .summary li span{font-size: 1.25rem;}
    .title-wrap .summary li span:nth-child(1) {width: auto; margin-right:12px;}
    .title-wrap h2 .logo-tgs{width:166px; height:76px; margin: 4px 0 0 16px;}
    .gray-label{font-size: 2rem; padding:12px 20px;}

    .project-detail.main{height:1200px;}

    .title-3xl{font-size: 8rem;}
    .title-2xl{font-size: 4.5rem;}
    .title-xl{font-size: 3.5rem;}
    .title-l{font-size: 2.25rem;}
    .title-m{font-size: 1.875rem;}
    .title-s{font-size: 1.625rem;}
    .title-xs{font-size: 1.125rem;}

    .body-m{font-size: 2rem;}
    .body-s{font-size: 1.5rem;}
    .body-xs{font-size: 1.125rem;}

    .content-gap{gap: 160px;}
    .content-gap-sm{gap: 48px;}
    .content-title{font-size:2.25rem; margin-bottom: 24px;}
    .content-text{font-size:1.5rem;}
    .zigzag-list.solution-info .content-title{margin-bottom:40px;}

    .ic-size-l{width:24px; height:24px;}
    .ic-size-m{width:20px; height:20px;}

    .main .title h2{font-size:6rem;}
    .main .title p{font-size:2.25rem;}

    header{max-width: none; height: 80px; background-color: transparent; transition: background-color 0.3s ease-in, box-shadow 0.3s ease-in;}
    header .header-inner{display: flex; flex-direction: row; justify-content: space-between; align-items: center; width: 100%;}
    header .header-group{ display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0 2.75rem; width: 100%;}
    header .logo a{width:165px; height:30px; position: static;}

    .nav{position: unset; width: 100%;  height: 100%; display: flex; opacity: 1; padding: 0; flex-direction: row; transform: none; justify-content: end; padding: 0px 2.75rem;}
    .nav>ul{padding-top: 0; flex-direction: row; justify-content: end; overflow-y: unset;}
    .nav ul li.menu-items>a{width: 120px;}
    .nav ul li{ animation: none; opacity: 1; transform: translateX(0); height:auto;align-items: center; position: relative;}
    .nav ul li.menu-items a{font-size: 1.25rem; padding:0; display: flex; height: 100%; justify-content: center;}
    .nav ul li.menu-items .submenu .submenu-items li{width:100%;}
    .main-page .nav ul li.menu-items:hover>a{color:#fff;}
    .nav ul li.menu-items:hover>a,
    .main-page.scrolled .nav ul li.menu-items:hover>a{color:#116DD6; font-weight: 700;}

    .nav ul li.menu-items>a{color:var(--bs-black);}
    .nav ul li.menu-items:nth-child(2)>a,
    .nav ul li.menu-items:nth-child(3)>a,
    .nav ul li.menu-items:nth-child(4)>a{background:none;}
    .nav ul li.menu-items .submenu{position: absolute; top: 100%; left: 0; background: #fff; white-space: nowrap; padding:8px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
        flex-direction: column; align-items: start; overflow: auto; max-height: unset; height:auto; border-radius: 8px; opacity: unset; display: none;}
    .nav ul li.menu-items:hover .submenu{display: block;}
    .nav ul li.menu-items .submenu li{display: flex; justify-content: center; width: 100%; border-radius: 8px;}
    .nav ul li.menu-items .submenu li a{font-size: 17px; display: flex; justify-content: center; width: 100%; padding:8px 0;}
    .nav ul li.menu-items .submenu li:hover,
    .nav ul li.menu-items:nth-child(2) .submenu .submenu-items li:hover{background-color: #E4F2FF;}
    .nav ul li.menu-items .submenu>li:hover>a,
    .nav ul li.menu-items:nth-child(2) .submenu .submenu-items li:hover a{font-weight: 700; background-color: #D3EAFF; border-radius: 8px;}
    .nav ul li.menu-items .submenu .submenu-items li a{padding:8px 10px;}
    .nav ul li.menu-items:nth-child(2) .submenu{width:220px; margin-left:-50px; padding:10px 12px;}
    .nav ul li.menu-items:nth-child(2) .submenu li{align-items: start; background: transparent;}
    .nav ul li.menu-items:nth-child(2) .submenu>li{margin-bottom:12px; padding:0;}
    .nav ul li.menu-items:nth-child(2) .submenu>li:last-child{margin-bottom:0;}
    .nav ul li.menu-items:nth-child(2) .submenu li a{border:none;  justify-content: start;}
    .nav ul li.menu-items .submenu .submenu-title{font-size:1rem; margin:8px;}
    .nav ul li.menu-items .submenu .submenu-items{gap: 0;}

    .menu{display: none;}
    .btn-menu{display: none;}

    .circle-wrap{width:100%; height:100vh; margin-top:-100px}
    .circle{width: 50vw; height:100vh;}

    .project-wrap li{flex-direction: row; padding:0;}
    .project-wrap li h2{font-size: 3.65rem;}
    .project-wrap li .text-wrap,
    .project-wrap li .bg-wrap{width:50%; box-sizing: border-box;}
    .project-wrap li .text-wrap{padding:min(7.8125vw,160px) min(6.25vw,140px); justify-content: unset;}
    .project-wrap li .bg-group{left: 0; top: 0;}
    .project-wrap li .bg-wrap{height:100vh; max-height: none;}
    .project-wrap li .bg-wrap .bg-hashtag{padding:0 3vw 2.5vw 3vw; gap:1.6rem;}
    .project-wrap li .bg-wrap .bg-hashtag span{font-size: 36px;}

    .project-list ol li picture{margin-bottom: 1.875rem;}
    .project-list ol li h3{margin-bottom: 1rem;}
    .project-list ol{gap: 6.25rem 2rem;}
    .project-list ol li h3{font-size: 1.75rem;}
    .project-list ul.category li{padding: 8px 16px;}
    .project-list ul.category li span{font-size:1.125rem}

    .control{width:50vw; height:48px;}
    .control .control-button{width:48px; height:48px;}
    .control .control-button i{width: 3px; height: 18px;}
    .control .control-button i:nth-child(1){margin-top: -15px;}
    .control .control-button i:nth-child(2){margin-top: -3px;}

    .customer-review .review-title{margin-bottom: 120px;}
    .customer-review .review-title h2{font-size: 5rem;}
    .customer-review .review-title p{font-size: 1.75rem;}
    .customer-review .review-user .user-icon{width:56px; height:56px;}
    .customer-review blockquote p{padding:46px 60px;}
    .customer-review blockquote p::before,
    .customer-review blockquote p::after{width:20px; height:16px;}
    .customer-review blockquote p::before{left: 20px; top: 20px;}
    .customer-review blockquote p::after{right: 20px; bottom: 20px;}

    .move-tag,
    .project-detail{margin-bottom:10rem;}

    .solution-item{flex-direction: row; overflow: hidden;}
    .solution-item .item{width:25%; height:100%; flex: 1;}
    .solution-item .item:hover{flex-basis: 51.7%;}
    .solution-item .item.unactive,
    .solution-item .item.active{height:100%;}
    .solution-item .solution-text{left:3.5rem; bottom:3rem; width: calc(100% - 3.5rem); transform: none;}
    .solution-item .solution-text dt{font-size: 2.25rem;}
    .solution-item .solution-text dd{display: grid; grid-template-rows: 0fr; will-change: grid-template-rows;  font-size: 1.5rem;}
    .solution-item .item:hover .solution-text dd{grid-template-rows: 1fr;  opacity: 1; margin-top:1.5rem;}
    .solution-text-wrap p{font-size:2rem;}

    .move-tag{gap: 32px;}
    .move-tag .tag-wrap {gap: 24px; padding-left: 24px;}
    .move-tag .tag-wrap span{padding:28px 48px; font-size: 3rem; border-radius: 40px;}

    .btn-size-l span{font-size:2.5rem;}
    .btn-size-m{padding:1.125rem 2.5rem;}
    .btn-size-m span{font-size:1.4rem;}
    .btn-size-s span{font-size: 1.2rem;}

    .request-form{margin-bottom: 40px;}
    .request-form .form-wrap{padding:100px 0;}
    .request-form .form-wrap h3{margin-bottom:48px;}
    .request-form .form-wrap .form-list.half{gap:60px 100px;}
    .request-form .form-wrap .form-list.full{gap:60px;}

    .receipt.request-form .form-wrap p{font-size: 20px;}
    .receipt .ic-message{width:180px; height:180px; margin-bottom:32px;}

    .form-group label{font-size: 1.5rem;}
    .form-group .type-input,
    .form-box .type-file{height:60px; padding:16px; font-size: 1.25rem;}
    .form-box .input-btn{ height:60px; font-size: 1.25rem;}
    .form-group span{font-size: 1.25rem;}
    .form-group .required-text{font-size: 1.25rem; margin-top:1rem;}
    .checkbox-group{gap: 32px;}
    .checkbox-group label{padding:1rem 2rem; font-size:1.25rem;}
    .type-checkbox,
    .checkbox-group label::after{width:24px; height: 24px;}
    .checkbox-group input[type="radio"]:checked + label:after{background-position: -24px;}
    .type-checkbox:checked{background-position: -48px;}

    .half-text-wrap p{font-size: 4rem;}
    .wrap-mb{margin-bottom:460px;}
    .zigzag-list li{width:580px;}
    .zigzag-list.solution-info li:nth-child(2){height:794px; padding:5rem 4rem;}

    .visual-title p{font-size:6rem;}
    .vision-img{height:800px;}

    .sub-menu.tab-menu ul li a{padding:28px 0; font-size: 1.75rem;}
    .strengths-type{height:980px}
    .strengths-type .inner{height:100%;}

    .card-group{gap:30px;}
    .card-group article{flex: calc((100% - 64px) / 3);}
    .card-group article figcaption{left: 2rem; bottom: 2rem;}
    .card-group article figcaption p{font-size:1.25rem;}
    .card-group article figcaption h3{font-size: 2rem;}

    .more-etc .features-group h2{margin-bottom:32px;}
    .more-etc .etc-list li{padding:40px 0; justify-content: flex-start;}
    .more-etc .etc-list li strong{font-size: 1.8rem; width:200px;}
    .more-etc .etc-list li p{font-size: 1.5rem; width:auto; margin-left: 10px;}

    .btn-text i.ic-arrow{width: 24px; height:24px;}
    .btn-arrow{width:80px; height:80px; position: absolute; bottom: 6rem;}

    .btn-link{gap:60px;}
    .btn-link span{font-size:8rem;}
    .btn-link i{width:96px; height:96px;}
    .btn-link::after{height:8px;}

    .btn-more i{width:32px; height:32px;}
    .btn-more strong{font-size: 1.5rem;}
    .btn-more span{font-size: 1.125rem; font-weight: 500;}

    .half-img-wrap{margin-top:80px;}
    .text-img-group{margin-bottom:100px;}
    .text-img-group p{font-size: 8rem; margin-bottom: 0;}

    .control{width: 10vw; left: min(6.25vw, 140px); bottom: 3vw; position: absolute;}

    footer{margin-top: 160px;}
    footer .move-footer span{font-size: 8rem;}
    footer .footer-wrap .inner{gap: 60px;}
    footer .footer-wrap ul.footer-info li,
    footer .footer-wrap .footer-menu ul li{font-size: 1.125rem;}

    .map{height:500px; margin-bottom:54px;}
    .map .root_daum_roughmap .wrap_map{height:calc(100% - 32px);}

    .news-header{display: flex; flex-direction: row; border-bottom: 1px solid #E0E0E0; padding:20px 30px; border-top: 4px solid var(--bs-black);}
    .news-header span{display: flex; justify-content: center; align-items: center; font-size: 1.25rem;}
    .news-header span:nth-child(1){width:calc(100% - 200px);}
    .news-header span:nth-child(2){width:215px}


    .news-header.view{padding: 40px;}
    .news-header.view p{font-size: 1.85rem;}
    .news-header.view span{font-size: 1.125rem;}

    .news-list{border-top: 0;}
    .news-list ul li{padding:30px;}
    .news-list ul li .news-text-wrap{width: 100%; display:flex; flex-direction: row; justify-content: space-between; align-items: center; margin-top: 0;}
    .news-list ul li .news-text{width: calc(100% - 260px);}
    .news-list ul li .news-text p{font-size: 1.5rem; margin-bottom:12px;}
    .news-list ul li .news-text span,
    .news-list ul li .date span{font-size: 1.125rem;}
    .news-list ul li .date{width: 20%; display: flex; justify-content: center;}

    .news-body{padding: 40px; }
    .news-body .inner p{font-size: 20px;}
    .pagination{margin-top: 60px;}

    .card-list.certification-list ul li .certification-img{padding:60px 50px;}
    .card-list.certification-list ul li strong{font-size: 24px;}

    .solution-main,
    .img-default{margin-bottom: 40px;}
    .sub-visual-img{height:400px;}

    .history-percent-bar{left: 45%;}
    .history-group{margin-bottom: 160px;}
    .history-group .history-list{margin-top: 60px;}
    .history-group .history-list ul li strong{width: 60px;}

    .info-card-group{gap: 32px;}
    .info-card-group.grid-3{gap: 20px; grid-template-columns: repeat(3, 1fr);}
    .info-card-group.grid-4{gap: 20px; grid-template-columns: repeat(4, 1fr);}
    .info-card{padding:40px}
    .info-card.small-card{padding:28px;}
    .info-card i.ic-company{width:96px; height:96px;}

    .vision-group ul{gap: 32px;}
    .vision-group ul li{padding:40px; height:500px;}

    .process-steps{padding:80px 60px; flex-direction: row;}
    .process-steps li{flex: 1;}
    .process-steps li:not(:last-child)::after {bottom: auto; left: 100%; top: 50%; transform: translateY(-50%); width: 30px; height: 2px;}
    .process-steps li:not(:last-child)::before {bottom: auto; top: 50%; left: unset; right: -30px; transform: translateY(-50%); border-left: 8px solid #224CD6; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 0;}
    .core-solution .process-steps li:not(:last-child)::before{border-left: 8px solid #3973FB; border-top: 5px solid transparent;}

    .table-style th, .table-style td{padding: 16px 20px;}

    .swiper-main .swiper-slide .swiper-title{max-width: 1300px; left: 120px}
    .swiper-main .swiper-slide .swiper-title h2{font-size: 68px;}
    .swiper-main .swiper-slide .swiper-title p{font-size: 28px;}

    .swiper-main .swiper-button-next,
    .swiper-main .swiper-button-prev{display: flex; color:rgba(255, 255, 255, 0.4); width:120px; height:120px; font-size: 64px;}
    .swiper-main .swiper-button-next{right: 0;}
    .swiper-main .swiper-button-prev{left:0;}
    .swiper-main .swiper-button-prev:after,
    .swiper-main .swiper-button-next:after{font-size: 64px;}
    .swiper-main .swiper-button-next:hover,
    .swiper-main .swiper-button-prev:hover{color:rgba(255, 255, 255, 1); background-color: rgba(0, 0, 0, 0.4);}

    .service-group{padding:50px 60px;}
    .service-group .content-title{font-size: 2.75rem;}
    .main-service .title-group{margin: 0 auto 5rem;}
    .title-group{margin-bottom: 5rem;}
    .service-representative{margin-bottom: 60px;}
    .service-representative .service-img{width: 568px;}
    .service-representative .service-img img{width: 100%;}
    .service-sub{gap: 32px;}
    .service-sub .service-group{height:520px;}

    .tag-size-m{padding:8px 16px; font-size:20px;}
    .tag-size-s{padding:6px 12px; font-size: 16px;}

    .solution-card-group{grid-template-columns: 400px 1fr 1fr; grid-template-rows: 240px 260px; grid-template-areas:"solution1 solution2 solution2" "solution1 solution3 solution4"}
    .solution-card-group .solution-card .card-title{font-size: 32px;}
    .solution-list .solution-representative{height:100%;}
    .solution-list .info-card.solution-card {padding:40px;}
    .important-solutions .solution-card-group .solution-representative{height:360px;}

    .ai-solutions .solution-list .solution-representative .info-card::before{width:330px; height:285px;}
    .cloud-solutions .solution-list .solution-representative .info-card::before,
    .important-solutions .solution-list .solution-representative:nth-child(1) .info-card::before,
    .important-solutions .solution-list .solution-representative:nth-child(2) .info-card::before{width: 250px; height:200px; bottom: 30px; right: 15px;}

    .main-news .swiper-button-next{right: -44px; bottom: unset; top: 30%;}
    .main-news .swiper-button-prev{left: -44px; top: 30%;}

    .cta-group .inner{padding-top: 10rem; padding-bottom: 16rem; margin-top: 160px;}
    .core-solution footer{margin-top: -192px;}
    .core-solution .list-style ul li{font-size: 1.5rem;}

    .info-ci-color article h4{font-size: 1.6rem;}

    .side-menu{right:0; width: auto; height:auto; border:0; background-color:rgba(255, 255, 255, 0.9); backdrop-filter: blur(30px); bottom: unset; top: 50%; transform: translateY(-50%); padding: 10px; border-radius: 8px 0 0 8px; overflow: hidden;}
    .side-menu ul{flex-direction: column; gap: 16px; height: auto;}
    .side-menu ul li a{text-align: left; justify-content: start;}
    .side-menu ul li a::before{content: ''; display: inline-block; width:14px; height:14px; background:url(../images/style/ic-sidemenu.png)0 0 / cover no-repeat; border-radius: 50%; margin-right: 6px;}
    .side-menu ul li a.active{color:var(--bs-black)}
    .side-menu ul li a.active::before{background:url(../images/style/ic-sidemenu.png)-14px 0 / cover no-repeat;}


}

@media (min-width: 1500px) {
    .inner,
    .main-news .inner{padding-left: 0; padding-right: 0;}
    .main-news .swiper-button-next{right: -80px;}
    .main-news .swiper-button-prev{left: -80px;}
    .main-news .swiper-button-prev:after,
    .main-news .swiper-button-next:after {font-size: 2.5rem;}

    .side-menu{background-color:transparent}

}


@media (min-width: 1600px) {
    .swiper-main .swiper-slide .swiper-title{left: 50%; transform: translateX(-50%);}
    .swiper-news{padding:0;}

    .side-menu{right: 20px;}

}