@charset "utf-8";



#mainContent { position: relative; font-size: 2.4rem; } 
h2 { font-size: 5.4rem; line-height: 1; font-weight: 900; color: var(--gray-01);} 

/* showcase */
.showcase { position: relative; height: 100vh; } 
.showcase .showcase-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } 
.showcase .container{position: relative; z-index: 1; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;}
.showcase .showcase-title { color: #fff; text-align: center; width: 100%;}
.showcase p { font-weight: 400; font-size: 5.4rem; } 
.showcase .word-rotate { display: inline-block; width: 14.1rem; text-align: right; font-weight: 800; margin-right: 1.6rem; will-change: transform, opacity; } 
.showcase .highlight { font-weight: 800; line-height: 5rem; color: var(--gray-01); padding: 0.6rem; display: inline-block; margin-right: 1.2rem; background: linear-gradient( 120deg, #fff 0%, #fff 100%) 0 center / 0% 100% no-repeat; animation: highlightFill 1.5s ease-in-out 0.5s forwards; } 

@keyframes highlightFill { 
    0% { background-size: 0% 100%; } 
    100% { background-size: 100% 100%; } 
}

.showcase .scroll { position: absolute; transform: translateX(-50%); bottom: 4rem; left: 50%; width: 13.8rem; height: 13.8rem; } 
.showcase .scroll-text { position: absolute; animation: turn 10s linear infinite; width: 100%; height: 100%;}
.showcase .scroll::before { content: ""; background: url(../images/scroll_down.svg) 50% 50% / contain no-repeat; width: 2.7rem; height: 3rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

@keyframes turn { 
    0% { transform: rotate(0); } 
    100% { transform: rotate(360deg); } 
}
/* about */
.about { position: relative; background: #fff; overflow: hidden; } 
.about .sticky-container { position: relative; top: 0; height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; will-change: transform, width, height; backface-visibility: hidden;} 
.about .bg-text { position: absolute; pointer-events: none; z-index: 0; font-weight: 700; font-size: 24rem; line-height: 1; color: rgba(243, 246, 250, 0.8); font-family: 'Poppins', sans-serif; } 
.about .bg-text.bg-text-top { top: -3.3rem; right: -5.8rem; } 
.about .bg-text.bg-text-bottom { bottom: -3.8rem; left: -4.2rem; } 
.about .content-wrapper { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; } 
.about .image-box { width: 58rem; height: 28rem; border-radius: 50rem; overflow: hidden; position: relative; } 
.about .image-box img { width: 100%; height: 100%; object-fit: cover; position: relative; z-index: 1; display: block; } 
.about .image-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: #000; opacity: 0; z-index: 2; pointer-events: none; } 
.about .top-text { display: flex; justify-content: center; align-items: flex-end; margin-bottom: 3rem; } 
.about .top-text span { font-size: 5rem; line-height: 1; font-weight: 900; color: var(--gray-01); } 
.about .top-text .plus { margin: 0 1rem; } 
.about .top-text .thin { font-size: 3rem; font-weight: 500; line-height: 3rem; margin-left: 0.6rem; } 
.about .bottom-text { font-weight: 900; font-size: 5rem; line-height: 1; color: var(--gray-01); margin-top: 3rem; display: flex; gap: 0.4rem; } 
.about .top-text .thin,
.about .bottom-text span { font-family: 'Inter', sans-serif; } 
.about .final-text { position: absolute; font-size: 6rem; color: #fff; font-weight: 700; text-align: center; z-index: 10; opacity: 0; white-space: nowrap; } 
.about .heading span { font-weight: 800; font-size: 5.4rem; line-height: 1; color: #fff; display: block; text-align: center; } 
.about .heading span + span { margin-top: 1.6rem; } 
.about .final-text p { font-weight: 400; font-size: 2.6rem; color: #fff; text-align: center; margin-block: 3rem 6rem; } 
.about .btn-wrap { display: flex; align-items: center; text-align: center; gap: 1.6rem; } 
.about .btn-wrap [class^="btn-"]{display: flex; justify-content: space-between; align-items: center; width: 23rem; height: 5.6rem; padding-inline: 2.4rem; border-radius: 99rem; font-weight: 800; font-size: 1.8rem; }
.about .btn-wrap [class^="btn-"]::after{content: ""; display: block;  width: 2.4rem; height: 2.4rem; }
.about .btn-wrap .btn-about { gap: 1.8rem; color: var(--gray-01); background: #fff; } 
.about .btn-wrap .btn-about::after { background: url(../images/icon_arrow_right.svg) center / 100% 100% no-repeat;} 
.about .btn-wrap .btn-download {background: linear-gradient(250.37deg, var(--blue-03) -1.82%, var(--blue-01) 85.38%); color: #fff;} 
.about .btn-wrap .btn-download::after { background: url(../images/icon_file.svg) center / 100% 100% no-repeat;}

/* experience */
.experience {padding-block: 16rem; background: url(../images/bg_experience.png) 0 0 / cover no-repeat; display: flex; justify-content: center; color: #fff; overflow: hidden; } 
.experience .top{display: flex; justify-content: space-between; }
.experience h2 { line-height: 7rem; color: #fff;} 
.experience .number { display: flex; gap: 6rem; font-weight: 800; } 
.experience .number .stit { margin-bottom: 0.4rem; font-size: 2.2rem; font-weight: 800; letter-spacing: 0.05em; } 
.experience .number .counter, .experience .number .plus {display: inline-block; text-align: right; font-family: 'Inter', sans-serif; ; color: #FFE371; font-size: 9rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; } 
.experience .number .counter ~ span { font-size: 3.2rem; line-height: 1; padding-left: 0.4rem; } 
.experience .number .year .counter{width: 9rem;}
.experience .number .project .counter{width: 16.3rem;}
.experience .number .year p { margin-top: 2rem; font-size: 1.8rem; font-weight: 500; line-height: 2.4rem; } 
.experience .list{display: flex; gap: 1.88%; width: 100%; margin-top: 10rem;}
.experience .list li{flex: 1; }
.experience .list li a{position: relative; display: block; aspect-ratio: 302 / 340; padding: 13.91% 11.26%; color: var(--gray-01); background: #fff; border-radius: 3.6rem; pointer-events: none; font-size: 2.6rem;}
.experience .list .title{line-height: 3.2rem; font-weight: 800; display: inline-block;}
.experience .list .history{font-size: 1.8rem; line-height: 2.6rem; letter-spacing: -0.01em; color: var(--gray-03);}
.experience .list li.link a{pointer-events: auto;}
.experience .list .link-arrow{display: none;}
.experience .list li.link .link-arrow{display: block; width: 2.9rem; height: 2.9rem; position: absolute; top: 2.2rem; right: 2rem;}
.experience .list .image{width: 34.44%; height: auto; aspect-ratio: 1 / 1; position: absolute; bottom: 3.2rem; right: 2rem;}
.experience .btn-inquire{display: none;}

/* product */
.product { position: relative; height: 100vh; overflow: hidden; pointer-events: auto; } 
.product .tabs { position: absolute; right: 7rem; top: 50%; transform: translateY(-50%); z-index: 200; display: flex; flex-direction: column; gap: 2rem; text-align: right; } 
.product .tabs button { cursor: pointer; font-size: 2rem; line-height: 2.4rem; color: var(--gray-04); font-weight: 500; display: flex; justify-content: flex-end; align-items: center; gap: 0.8rem; background: none; transition: color ease .35s; } 
.product .tabs button::after { content: ""; min-width: 0.6rem; height: 0.6rem; border-radius: 50%; } 
.product .tabs button.active { color: var(--blue-01); font-weight: 700; transition: color ease .35s; } 
.product .tabs button.active::after { background: var(--blue-01); } 
.product .container { position: absolute; z-index: 100; transform: translate(-50%, -50%); top: 50%; left: 50%; } 
.product .descriptions { position: relative; z-index: 100; width: 60rem; display: flex; flex-direction: column; } 
.product .descriptions li { width: 100%; height: 0; visibility: hidden; opacity: 0; display: flex; flex-direction: column; justify-content: flex-start; transition: opacity 0.6s ease; box-sizing: border-box; } 
.product .descriptions li.visible { height: auto; opacity: 1; visibility: visible; } 
.product .descriptions li > strong { font-weight: 700; font-size: 2.8rem; line-height: 1; color: var(--blue-01); } 
.product .descriptions dl dt { font-size: 5.4rem; line-height: 5rem; font-weight: 900; color: var(--gray-01); display: inline-block; margin-block: 2rem; } 
.product .descriptions dl dt span { font-size: 4rem; line-height: 5rem; color: var(--gray-01); } 
.product .descriptions dl dd { font-size: 2.4rem; color: var(--gray-03); word-break: keep-all; } 
.product .descriptions .link { display: flex; flex-wrap: wrap; gap: 1.2rem; margin-top: 5rem; } 
.product .descriptions .link a { position: relative; display: flex; align-items: center; gap: 1rem; background: #fff; border: 1px solid #CDCDCD; border-radius: 5rem; font-weight: 400; font-size: 1.8rem; color: var(--gray-02); height: 5.2rem; padding-inline: 2.2rem; overflow: hidden; z-index: 1; } 
.product .descriptions .link a.out-link::after{content:''; display: inline-block; width: 1.5rem; height: 1.5rem; background: url(../images/icon_outlink.svg) 0 0 / 100% auto no-repeat;}
.product .descriptions .link a::before { content: ''; position: absolute; inset: 0; background: var(--blue-01); transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease; z-index: -1;}
.product .descriptions .link a:hover {color: #fff; border-color: transparent; } 
.product .descriptions .link a.out-link:hover::after{background-position: 0 -1.5rem;}
.product .descriptions .link a:hover::before { transform: scaleX(1); transform-origin: left; } 
.product .rotate { position: absolute; right: clamp(-800px, -40vw, -260px); top: 50%; transform: translateY(-50%) scale(1); box-sizing: border-box; pointer-events: none; } 
@media (max-width: 1440px) {
    .product .rotate {
        right: clamp(-800px, -70vw, -220px);
        transform: translateY(-50%) scale(0.85);
    }
}

@media (max-width: 1280px) {
    .product .rotate {
        right: clamp(-900px, -60vw, -420px);
        transform: translateY(-50%) scale(0.65);
    }
}

.product .rotate-in { transform: rotate(-90deg); } 
.product .rotate ul { border-radius: 50%; transform-origin: center; box-sizing: border-box; display: flex; justify-content: center; align-items: center; position: relative; width: 150rem; height: 150rem; pointer-events: none; } 
.product .rotate ul::after { content: ""; background: url(../images/rotate_line.svg); position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } 
.product .rotate ul li { position: absolute; width: 63rem; height: 63rem; border-radius: 50%; overflow: hidden; transition: box-shadow 0.6s ease, opacity 0.6s ease, visibility 0.6s ease; opacity: 0; box-sizing: border-box; transform-origin: center; visibility: hidden; will-change: transform; } 
.product .rotate ul li.visible { opacity: 1; visibility: visible; } 
.product .rotate ul li img { width: 100%; height: 100%; object-fit: cover; user-select: none; } 
.product .rotate ul li.active { box-shadow: 0 0 3.15rem rgba(0, 0, 0, 0.15); z-index: 10; } 
.btn-more { font-size: 2.2rem; font-weight: 500; } 
.btn-more::after { content: ''; display: inline-block; width: 0.9rem; height: 1.6rem; margin-left: 1.2rem; background: url(../images/btn_more.svg) 0 0 / 100% 100% no-repeat; } 

/* 포트폴리오 */
.portfolio { padding-top: 13rem; background: linear-gradient(180deg, #F3F6FA 0%, #FFFFFF 100%);}
.portfolio .container{position: relative;}
.portfolio h2 + p {margin-top: 2rem; font-size: 2.4rem;}
.portfolio .btn-more{position: absolute; bottom: 0; right: 4rem;}
.portfolio .slide-wrap{width: 100%; overflow: hidden;}
.portfolio .swiper {max-width: 128rem; overflow: visible; padding-block: 6rem 8.6rem;} 
.portfolio .swiper .swiper-slide{width: 62.8rem; height: auto; aspect-ratio: 628 / 500;}
.portfolio .swiper .swiper-slide a{position: relative; display: block; height: 100%; border-radius: 3.6rem; box-shadow: 0 0 3rem rgba(0, 0, 0, 0.15); overflow: hidden;}
.portfolio .swiper .swiper-slide a img{width: 100%; height: 100%; object-fit: cover;}
.portfolio .swiper .swiper-slide a .hover-text{position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 100%; padding: 4.2rem 4.4rem; color: #fff; opacity: 0; visibility: hidden; transition: all .5s; background: linear-gradient(180deg, rgba(39, 71, 245, 0) 10.3%, rgba(39, 71, 245, 0.275) 32.73%, rgba(39, 71, 245, 0.55) 46.18%, #2747F5 100%);}
.portfolio .swiper .swiper-slide a .hover-text .name{display: block; line-height: 1; font-weight: 800; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.portfolio .swiper .swiper-slide a .hover-text .explain{margin-top: 1.2rem; font-size: 3.6rem; line-height: 4.6rem; overflow:hidden;display: -webkit-box; word-break: keep-all;text-overflow: ellipsis;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.portfolio .swiper .swiper-slide a:hover .hover-text{opacity: 1; visibility: visible; transition: all .5s;}
.portfolio .swiper .page-wrap{position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; display: flex; align-items: center; height: 5.2rem; gap: 2rem;}
.portfolio .swiper .page-wrap .swiper-button-prev, .portfolio .swiper .page-wrap .swiper-button-next{position: static; width: auto; height: 100%; margin: 0; aspect-ratio: 1 / 1; border-radius: 50%; border: 1px solid var(--gray-01);}
.portfolio .swiper .page-wrap .swiper-button-prev:hover, .portfolio .swiper .page-wrap .swiper-button-next:hover{background: var(--gray-01);}
.portfolio .swiper .page-wrap .swiper-button-prev:hover path, .portfolio .swiper .page-wrap .swiper-button-next:hover path{stroke: #fff;}
.portfolio .swiper .page-wrap .swiper-button-prev::after, .portfolio .swiper .page-wrap .swiper-button-next::after{display: none;}
.portfolio .swiper .page-wrap .swiper-button-next svg{transform: rotate(180deg);}
.portfolio .swiper .page-wrap .swiper-pagination{position: static; font-size: 2.6rem; letter-spacing: -0.02em; color: var(--gray-01);}
.portfolio .swiper .page-wrap .swiper-pagination .swiper-pagination-current{font-weight: 800;}

/* 주요 고객사 */
.customer {padding-block: 13rem; background: #fff; } 
.customer .list{display: flex; flex-direction: column; gap: 2rem; margin-top: 4rem; overflow: hidden;}
.customer .list ul{display: flex; white-space: nowrap; padding: 0; width: max-content; gap: 5rem;}
.customer .list ul li{width: 20rem; height: 6rem; flex-shrink: 0;}
.customer .list ul li img{width: 100%; height: 100%;}
.customer .list .row-left { animation: slideLeft 30s linear infinite; }

@keyframes slideLeft {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
.customer .list .row-right {animation: slideRight 30s linear infinite;}

@keyframes slideRight {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}
/* .customer .list:hover ul {
    animation-play-state: paused;
} */

.news { padding-block: 16rem; background: #F3F6FA; } 
.news .container { display: flex; gap: 14.06%; max-width: 136rem; } 
.news h2 { line-height: 1; } 
.news .left-cont { flex-shrink: 0; display: flex; flex-direction: column; gap: 4rem; } 
.news .right-cont { flex: 1; min-width: 0; } 
.news .right-cont ul { border-top: 1px solid var(--gray-01);}
.news .right-cont ul li { border-bottom: 1px solid #CDCDCD; } 
.news .right-cont ul li a { display: flex; align-items: center; justify-content: space-between; gap: 7.34%; height: 10.4rem; padding-inline: 3rem; font-size: 2.4rem; transition: background 0.3s;} 
.news .right-cont ul li a:hover { background: #ECF0F6; } 
.news .right-cont .title { width: calc(100% - 20.4rem); text-overflow: ellipsis; overflow: hidden; white-space: nowrap; line-height: 1; color: var(--gray-01); } 
.news .right-cont .date { color: var(--gray-04); font-size: 2rem; line-height: 1; flex-shrink: 0; } 

.contact { position: relative; height: 57.6rem; padding-top: 11.1rem; box-sizing: border-box; } 
.contact h2 { line-height: 1; margin-bottom: 3rem; } 
.contact .tab { display: flex; gap: 1rem; } 
.contact .tab button { display: flex; align-items: center; justify-content: center; width: fit-content; height: 4.8rem; padding-inline: 2rem; background: #fff; border: 1px solid var(--blue-01); border-radius: 99rem; color: var(--blue-01); font-size: 1.8rem; transition: background 0.3s;} 
.contact .tab button.on { color: #fff; font-weight: 800; background: var(--blue-01); } 
.contact .info { width: 45.31%; max-width: 58rem; margin-top: 6.2rem; } 
.contact .info > div{display: none;}
.contact .info li { position: relative; padding-left: 4rem; margin-bottom: 1rem; } 
.contact .info li:last-child { margin-bottom: 0; } 
.contact .info li::before { content: ''; position: absolute; top: 0; left: 0; display: inline-block; width: 3.4rem; height: 3.4rem; background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; } 
.contact .info .adrs::before { background-image: url(../images/icon_location.svg); } 
.contact .info .tel::before { background-image: url(../images/icon_tel.svg); } 
.contact .info .mail::before { background-image: url(../images/icon_mail.svg); } 
.contact .info li span + span { padding-left: 4rem; position: relative; } 
.contact .info li span + span::before { content: ''; position: absolute; top: 0.6rem; left: 1.8rem; display: inline-block; width: 1px; height: 1.8rem; background: var(--gray-04); } 
.contact .map { position: absolute; right: 0; top: 0; width: 50%; height: 100%; } 
.contact .map > div { height: 100%; display: none;} 
.contact .map .pin{position: relative; display: flex; align-items: center; gap: 1.1rem; width: fit-content; height: 6.4rem; padding-inline: 3.4rem; color: #fff; background: var(--blue-01); border-radius: 99rem; font-size: 1.8rem; font-weight: 800;}
.contact .map .pin img{width: 3.6rem; height: 3.6rem; margin-top: -0.6rem;}
.contact .map .pin::after{content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); display: inline-block; width: 2rem; height: 1rem; background: url(../images/location_bg.png) 0 0 / 100% 100% no-repeat;}


/* floating-buttons */
.floating-sticky{position: sticky; bottom: 0; z-index: 100;}
.floating-wrap{display: flex; -webkit-box-pack: end; justify-content: flex-end; height: 0; padding-right: 3rem;}
.floating-buttons { height: fit-content; display: flex; flex-direction: column; align-items: flex-end; gap: 1rem; transform: translateY(-15.2rem);}
.floating-buttons .btn-inquire { width: 23rem; padding: 1.6rem 2.4rem; color: #fff; border-radius: 5rem; cursor: pointer; font-weight: 700; font-size: 1.8rem; line-height: 2.4rem; display: flex; justify-content: center; align-items: center; gap: 0.6rem; background: linear-gradient(250.37deg, var(--blue-03) -1.82%, var(--blue-01) 85.38%); opacity: 0; visibility: hidden; transform: translateY(2rem); pointer-events: auto;} 
.floating-buttons .btn-inquire::after { content: ""; background: url(../images/icon_inquire.svg) 50% 50% / contain no-repeat; width: 2.4rem; height: 2.4rem; } 
.floating-buttons .btn-top {display: flex; align-items: center; justify-content: center; overflow: hidden; width: 5.6rem; height: 5.6rem; border-radius: 50%; border: 1px solid var(--gray-01); box-shadow: 0 5.38px 15.07px rgba(0, 0, 0, 0.1); background: #fff; opacity: 0; visibility: hidden; transform: translateY(2rem); pointer-events: auto; } 
.floating-buttons .btn-top i{position: relative; bottom: 0; display: inline-block; width: 1.3rem; height: 1.3rem; background: url(../images/icon_top.svg) center 50% / 100% 100% no-repeat;}
.floating-buttons .btn-top i::after{content: ''; position: relative; bottom: 0; margin-top: 4rem; display: inline-block; width: 1.3rem; height: 1.3rem; background: url(../images/icon_top.svg) center 50% / 100% 100% no-repeat;}
.floating-buttons .btn-top:hover i, .floating-buttons .btn-top:hover::after {bottom: 4rem;transition: all 0.6s;}

@media (max-width: 1023px){
    #mainContent{font-size: 1.4rem;}
    h2 { font-size: 2.6rem; line-height: 1.2; } 

    .showcase p{font-size: 2.6rem;}
    .showcase .word-rotate{width: 6.8rem; margin-right: 0.8rem;}
    .showcase .highlight{line-height: 2.5rem; padding: 0.2rem; margin-right: 0.8rem;}
    .showcase .scroll{width: 9rem; height: 9rem;}

    .about .pin-spacer{overflow: hidden !important; width: 100% !important; max-width: 100vw !important;}
    .about .sticky-container{width: 100% !important; max-width: 100vw !important;}
    .about .bg-text{font-size: 9rem; line-height: 1;}
    .about .bg-text.bg-text-top{top: -1rem; right: auto; left: 3.3rem; font-size: 8.5rem;}
    .about .bg-text.bg-text-bottom{bottom: -1rem; left: -0.6rem;}
    .about .top-text span{font-size: 2.4rem;}
    .about .top-text .thin{font-size: 1.4rem;}
    .about .bottom-text{font-size: 2.4rem;}
    .about .image-box{width: 28rem; height: 14rem; border-radius: 100rem;}
    .about .heading span{font-size: 2.6rem; }
    .about .heading span + span{margin-top: 0.8rem;}
    .about .final-text p{margin-block: 1.6rem 3.4rem; font-size: 1.6rem;}
    .about .btn-wrap{flex-direction: column; gap: 1rem;}
    .about .btn-wrap [class^="btn-"]{width: 18rem; height: 4.6rem; padding-inline: 2rem; font-size: 1.4rem;}
    .about .btn-wrap [class^="btn-"]::after{width: 1.8rem; height: 1.8rem;}

    .experience{padding-block: 6rem;}
    .experience h2{line-height: 3.4rem;}
    .experience .top{flex-direction: column; justify-content: flex-start; flex-wrap: nowrap;}
    .experience .number{margin-top: 2.6rem; gap: 0; justify-content: flex-start;}
    .experience .number .stit{font-size: 1.2rem; margin-bottom: 0.2rem;}
    .experience .number .counter{font-size: 3.6rem;}
    .experience .number .plus{font-size: 3rem;}
    .experience .number .counter ~ span{font-size: 1.6rem; padding-left: 0.2rem;}
    .experience .number .year .counter{width: 4rem;}
    .experience .number .project .counter{width: 6.6rem;}
    .experience .number .year p{margin-top: 1rem; font-size: 1.2rem; line-height: 1.8rem;}
    .experience .list{flex-direction: column; gap: 1.6rem; margin-top: 4rem;}
    .experience .list li a{aspect-ratio: 350 / 124; padding: 2.7rem 2rem; border-radius: 1.6rem; font-size: 2rem; align-content: center;}
    .experience .list .title{display: block; width: 77.42%; line-height: 2.2rem;}
    .experience .list .history{width: 77.42%; font-size: 1.4rem; line-height: 1.8rem; margin-top: 0.8rem;}
    .experience .list .image{width: 17.14%; top: 50%; transform: translateY(-50%); bottom: auto;}
    .experience .list li.link .link-arrow{width: 1.8rem; height: 1.8rem; top: 1.1rem; right: 1.1rem;}
    .experience .btn-inquire{display: flex; justify-content: center; align-items: center; gap: 0.5rem; width: 18rem; height: 4.6rem; margin: 3rem auto 0; border-radius: 5rem; cursor: pointer; font-weight: 700; font-size: 1.4rem; line-height: 1.6rem; background: linear-gradient(250.37deg, var(--blue-03) -1.82%, var(--blue-01) 85.38%);}
    .experience .btn-inquire::after { content: ""; background: url(../images/icon_inquire.svg) 50% 50% / contain no-repeat; width: 1.8rem; height: 1.8rem; } 

    .product{height: auto; padding-block: 10rem 6rem;}
    .product .tabs{position: static; transform: none; flex-direction: row; flex-wrap: wrap; gap: 1rem; padding-inline: 2rem; margin-bottom: 4rem;}
    .product .tabs button{height: 4.4rem; padding-inline: 2rem; border-radius: 99rem; background: #F3F6FA; font-size: 1.6rem; font-weight: 400;}
    .product .tabs button.active{color: #fff; font-weight: 800; background: var(--blue-01);}
    .product .tabs button::after{display: none;}
    .product .rotate{display: none !important;}
    .product .container{position: static; transform: none;}
    .product .swiper .image{border-radius: 50%; width: 100%; height: auto; aspect-ratio: 1 / 1; margin-bottom: 2.4rem; overflow: hidden;}
    .product .swiper .image img{width: 100%; height: 100%; object-fit: cover; object-position: center;}
    .product .descriptions{flex-direction: row; width: 100%;}
    .product .descriptions li{transition: none; height: 100%; opacity: 1; visibility: visible;}
    .product .descriptions li > strong{font-size: 1.8rem; line-height: 1;}
    .product .descriptions dl dt{font-size: 2.6rem; margin: 1rem 0; line-height: 3.4rem;}
    .product .descriptions dl dd{font-size: 1.6rem;}
    .product .descriptions .link{gap: 0.6rem; margin-top: 2.4rem;}
    .product .descriptions .link a{height: 3.4rem; padding-inline: 1.2rem; font-size: 1.2rem; letter-spacing: -0.02em; gap: 0.4rem;}
    .product .descriptions .link a.out-link::after{width: 1rem; height: 1rem;}
    .product .descriptions .link a.out-link:hover::after{background-position: 0 0;}
    .product .descriptions .link a:hover{color: var(--gray-02); border-color: #CDCDCD;}
    .product .descriptions .link a:hover::before{display: none;}

    .btn-more { font-size: 1.4rem; } 
    .btn-more::after { width: 0.6rem; height: 1rem; margin-left: 0.6rem; } 

    .portfolio{padding-block: 6rem 0;}
    .portfolio h2 + p{font-size: 1.6rem; line-height: 2.4rem;}
    .portfolio .btn-more{top: 0.8rem; bottom: auto; right: 2rem; line-height: 1;}
    .portfolio .swiper{overflow: hidden; padding-block: 3rem 6.2rem;}
    .portfolio .swiper .swiper-slide{width: 71.79%; aspect-ratio: 280 / 204;}
    .portfolio .swiper .swiper-slide a{border-radius: 1.6rem; box-shadow: 0 0 1.3rem rgba(0, 0, 0, 0.15);}
    .portfolio .swiper .swiper-slide a .hover-text{padding: 1.8rem 2rem; opacity: 1; visibility: visible; transition: none;}
    .portfolio .swiper .swiper-slide a .hover-text .name{font-size: 1rem;}
    .portfolio .swiper .swiper-slide a .hover-text .explain{margin-top: 0.4rem; font-size: 1.6rem; line-height: 2rem;}
    .portfolio .swiper .page-wrap{height: 4.2rem; gap: 1.6rem;}
    .portfolio .swiper .page-wrap .swiper-pagination{font-size: 1.6rem;}
    .portfolio .swiper .page-wrap svg{width: 1.2rem; height: 1.1rem;}

    .customer{padding-block: 6rem;}
    .customer .list{margin-top: 2rem;}
    .customer .list ul{gap: 2rem;}
    .customer .list ul li{width: 10rem; height: 3rem;}

    .news { padding-block: 6rem; } 
    .news .container { flex-direction: column; } 
    .news .left-cont { flex-direction: row; justify-content: space-between; align-items: center;} 
    .news .right-cont { margin-top: 2rem; } 
    .news .right-cont ul li a { height: auto; padding: 1.8rem 2rem; gap: 7.14%; font-size: 1.4rem;}
    .news .right-cont ul li a:hover { background: none; } 
    .news .right-cont .title { width: calc(100% - 8.3rem); line-height: 2rem; } 
    .news .right-cont .date { font-size: 1.2rem; } 

    .contact {height: auto; padding-block: 6rem; } 
    .contact .container{padding-inline: 0;}
    .contact .top{padding-inline: 2rem;}
    .contact h2{margin-bottom: 2rem;}
    .contact .tab button{height: 4.2rem; padding-inline: 1.8rem; font-size: 1.4rem;}
    .contact .info { width: 100%; max-width: 100%; padding-inline: 2rem; margin-top: 2rem;} 
    .contact .info li{padding-left: 3rem; margin-bottom: 0.4rem;}
    .contact .info li::before{width: 2.4rem; height: 2.4rem; top: -0.2rem;}
    .contact .info li span + span{padding-left: 2rem;}
    .contact .info li span + span::before{height: 1.2rem; left: 0.8rem; top: 0.2rem;}
    .contact .map{ position: static; width: 100%; height: auto; aspect-ratio: 390 / 234; margin-top: 2rem;}
    .contact .map .pin{height: 3.7rem; gap: 0.6rem; font-size: 1rem; padding-inline: 2.1rem;}
    .contact .map .pin img{width: 2.2rem; height: 2.2rem; margin-top: -0.2rem;}
    .contact .map .pin::after{width: 1.2rem; height: 0.6rem;}

    .floating-wrap{padding-right: 2.2rem;}
    .floating-buttons { transform:translateY(-7.6rem) } 
    .floating-buttons .btn-inquire { display: none !important; } 
    .floating-buttons .btn-top { width: 5.2rem; height: 5.2rem; } 
}