@charset "utf-8";
/*
 * Name     : main.css
 * Version  : 1.1.1
 * Author   : 1px studio
 * Project  : prime02 
 * Date     : 2025-03-03
 * Desc     : -
 * -------------------------------------------------
 */

/* 메인페이지 공통 */
#main .main-section {margin-top: var(--margin-space);z-index: 10;}
#main .main-section .circle-button {border: 1px solid;color: var(--main);border-radius: 50px;width: 45px;display: block;height: 45px;text-align: center;line-height: 44px;}
#main .main-section .circle-button i.bi {transition: all 0.5s;}
#main .main-section .circle-button.swiper-button-prev:hover i.bi {padding-right:10px;transition: all 0.3s;}
#main .main-section .circle-button.swiper-button-next:hover i.bi {padding-left:10px;transition: all 0.3s;}
#main .main-section .swiper-button-next::after,
#main .main-section .swiper-button-prev::after {display: none;}
#main .main-section .swiper-button-next,
#main .main-section .swiper-button-prev {top:auto;bottom: 0;}
#main .main-section .swiper-button-prev {left:10px;}
#main .main-section .swiper-button-next {left:65px;}
#main .swiper-slide {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}
#main .more {display: block;}
#main .more i {padding-left: 10px;}
#main .section-more {background-color: var(--white-200);padding: 0.625rem 2.5rem;font-size: 1rem;border-radius: 40px;font-weight: 400;transition: all .3s;white-space: nowrap;}
#main .section-more:hover {background: var(--gray-100);}

/* 메인 슬라이드 */
#main {margin-top: 90px;}
#main .main-slide {height: 1024px; background-color: var(--white-100);}
#main .main-slide .row {height: 100%;}
#main .main-slide .main-swiper {z-index: 2; position: relative;}
#main .main-slide .main-swiper .text-boxBG {z-index: 2; position: absolute; height: 100%; width: 50%; background: linear-gradient(to right, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 100%);}
#main .main-slide .main-swiper .text-box {z-index: 3; opacity:0; visibility: hidden; position: absolute; top: 25%; left:5%; width: 100%; max-width: 700px; height:450px;}
#main .main-slide .main-swiper .text-box .btn-line {opacity: 0;}
#main .main-slide .main-swiper .text-box .hidden-box {transition: all 0.8s;}
#main .main-slide .main-swiper .text-box .hidden-box.box01 div,
#main .main-slide .main-swiper .text-box .hidden-box.box02 div {transform: translateY(118%); opacity: 0;}
#main .main-slide .main-swiper .text-box .hidden-box.box03 div {transform: translateX(3%); opacity: 0;}
#main .main-slide .main-swiper .text-box.on {opacity: 1; visibility: visible;}
#main .main-slide .main-swiper .text-box.on .btn-line {opacity: 1; display:block; z-index: 3; transition: opacity 1.5s cubic-bezier(0.42,0,0.14,1.01) 1.5s;}
#main .main-slide .main-swiper .text-box.on .hidden-box.box01 div {transform: translateY(0%); transition: all 1.5s cubic-bezier(0.42,0,0.14,1.01) 0.2s;opacity: 1;}
#main .main-slide .main-swiper .text-box.on .hidden-box.box02 div {transform: translateY(0%); transition: all 1.5s cubic-bezier(0.42,0,0.14,1.01) 0.4s;opacity: 1;}
#main .main-slide .main-swiper .text-box.on .hidden-box.box03 div {transform: translateX(0%); transition: all 1.5s cubic-bezier(0.42,0,0.14,1.01) 1.2s;opacity: 1;}
#main .main-slide .main-swiper .text-box .hidden-box {overflow: hidden;}
#main .main-slide .main-swiper .text-box .btn-line {text-align:left; width:var(--margin-space); border: 1px solid var(--white-100); border-radius: 30px; padding: 8px 0 8px 20px; margin-top: var(--margin-top-50); color:var(--white-100);}
#main .main-slide .main-swiper .text-box .btn-line i.bi {padding: 0 0 3px 13px; line-height: 0; transition: all 0.3s;}
#main .main-slide .main-swiper .text-box .btn-line:hover i.bi {transition: all 0.3s; padding-left:20px}
/*#main .main-slide .main-text .font-main-slide {color: var(--gray-800);text-align: right;padding: 0 80px 50px 0;line-height: 0;z-index: 0;}
#main .main-slide .main-text .font-main-slide span {padding:0 8px;}
#main .main-slide .main-text .swiper-button-prev {z-index: 2;left:auto;right: 186px;bottom: 44px;top: auto;color:var(--white-200)}
#main .main-slide .main-text .swiper-button-next {z-index: 2;left:auto;right: 44px;bottom: 44px;top: auto;color:var(--white-200)}
#main .main-slide .main-text .swiper-button-prev::after, #main .main-slide .main-text .swiper-button-next::after {font-size: 14px;}*/
#main .main-slide .main-swiper .swiper-pagination {position:absolute; left:50%; top:950px; z-index:3; transform:translateX(-50%);width:max-content}
#main .main-slide .main-swiper .swiper-pagination span {opacity:.3; position:relative; width:29px;height:29px; margin:0 5px; background-color:transparent; transition:all .3s}
#main .main-slide .main-swiper .swiper-pagination span.on {opacity:1}
#main .main-slide .main-swiper .swiper-pagination span:before {opacity:0; display:block; content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:45px; height:45px; border:1px solid rgba(255,255,255,.3); border-radius:50%; transition:all .3s}
#main .main-slide .main-swiper .swiper-pagination span.on:before {opacity:1; width:24px; height:24px}
#main .main-slide .main-swiper .swiper-pagination span:after {display:block; content:""; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:7px; height:7px; border-radius:50%; background:#fff}

#main .main-slide .main-swiper {height: 100%;}
#main .main-slide .main-swiper .main-slide-img {height: 100%; object-fit: cover; width: 100%;}

/* section - business */
#main .main-section.business {position: relative;}
#main .main-section.business .business-cover {border-radius: var(--radius-8);overflow: hidden;}
#main .main-section.business .business-cover img {width:100%; max-height: 700px;}
#main .main-section.business .bg-gray {width: 1280px; height: 440px; background: var(--white-200); position: absolute; top: 28px; left: 0; z-index: -1;}

#main .main-section.business .ability-box {width: 100%;justify-content: space-between;display: flex;}
#main .main-section.business .ability-box .ability-item {border-top: 1px solid var(--gray-200);padding-top: 30px;margin-bottom: 65px;width: 100%;flex: 0 0 auto;}
#main .main-section.business .ability-box .design-img {border-radius: var(--radius-8);overflow: hidden;margin-bottom: 30px;}
#main .main-section.business .ability-box .design-img img {width:100%}

/* brand */
#main .main-section.brand {padding-bottom: 2rem;margin-top: 2rem;}
#main .main-section.brand .section-text-2 {margin-bottom: 5.625rem;}
#main .main-section.brand .video {overflow: hidden;margin-top: 8rem;height: 30.8rem}
#main .main-section.brand video {padding: 0;width: 100%;height: 100%;overflow: hidden;position: absolute;object-fit: cover;border-radius: 1rem;}
#main .main-section.brand video source {z-index: -1;width: 100%;position: absolute;}
#main .main-section.brand .iframe-wrapper {position: relative;padding-top: calc(9/16*100%);height: 0;width: 100%;overflow: hidden;object-fit: cover;border-radius: 1rem;}
#main .main-section.brand .iframe-wrapper iframe {display: block;position: absolute;height: 100%;width: 100%;top: 0;left: 0;}
#main .main-section.brand .iframe-wrapper::after {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;}

#main .main-section.brand .design-box .design-img {border-radius: var(--radius-8);overflow: hidden;margin-bottom: 30px;}
#main .main-section.brand .design-box .design-img img {width:100%}


/* banner */
#main .main-section.banner {padding: 200px 0 220px 0; margin: 0 30px; background: url(../images/main/show-banner.jpg) no-repeat center;background-size: cover;background-attachment: fixed; text-align: center;}
#main .main-section.banner .section-title-white {font-size: var(--font-size-xl-1); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-xl-1); color: var(--white-100); position: relative;}
/* 버튼 스타일 */
#main .main-section.banner .section-white-btn {
    font-size: var(--font-size-sm-2);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-sm-2);
    color: var(--main);
    background-color: var(--white-100);
    border-radius: 50px;
    padding: 18px 50px;
    border: none;
    transition: all .3s;
}

/* section - design */
#main .main-section.design {position: relative;}
#main .main-section.design .bg-gray {width: 70%;max-width:1280px;height:440px;position: absolute;top: 28px;left: 0;background: var(--white-200);z-index: -1;}
#main .main-section.design .container-xl {position: relative;}
#main .main-section.design .design-box.box1 {max-width: 685px;width: 53.5%;position:absolute;right: 0;top: 120px;}
#main .main-section.design .design-box.box2 {margin-top: 115px;width: 28.5%;max-width: 345px;}
#main .main-section.design .design-box .design-img {border-radius: var(--radius-8);overflow: hidden;margin-bottom: 30px;}
#main .main-section.design .design-box .design-img img {width:100%}
#main .main-section.design .design-box .font-gray14 {margin-top: var(--margin-top-30)}

/* section - news */
#main .main-section.news-prime02 {position:relative;}
#main .main-section.news-prime02 .news-text {position: relative;width:320px;height:510px;}
#main .main-section.news-prime02 .news-slide {overflow: hidden;position: absolute;top:0;right: 0;max-width: 1550px;}
#main .main-section.news-prime02 .news-slide .news-swiper {height: 510px;}
#main .main-section.news-prime02 .news-slide .news-swiper .swiper-slide {width: 270px;}
#main .main-section.news-prime02 .news-slide .news-swiper .swiper-slide a {height: 100%;display: block;}
#main .main-section.news-prime02 .news-slide .news-swiper .swiper-slide a:hover {text-decoration: none;}
#main .main-section.news-prime02 .news-slide .news-swiper .swiper-slide .news-slide-img {width:100%;border-radius: var(--radius-8);height: 340px;object-fit: cover;}
#main .main-section.news-prime02 .news-slide .swiper-scrollbar {height: 3px;left:0;width:99%;bottom:0;} 
#main .main-section.news-prime02 .news-slide .swiper-scrollbar .swiper-scrollbar-drag {background-color: var(--gray-900);}

/* section - event */
#main .main-section.event-prime02 {position: relative;}
#main .main-section.event-prime02 .row > div {min-height: 420px;}
#main .main-section.event-prime02 .event-left {position: relative;}
#main .main-section.event-prime02 .preview-box {border-radius: 8px;overflow: hidden;}
#main .main-section.event-prime02 .event-slide-thumb {position: absolute;bottom: 90px;width: calc(100% - 30px);}
#main .main-section.event-prime02 .event-slide-thumb .swiper-slide {height:78px;overflow: hidden;border-radius: 8px;opacity: 0.6;cursor: pointer;width:31%;}
#main .main-section.event-prime02 .event-slide-thumb .swiper-slide.swiper-slide-thumb-active {opacity: 1;}
#main .main-section.event-prime02 .event-slide-thumb .swiper-slide .thumb-img {width: 100%;height:100%}
#main .main-section.event-prime02 .event-swiper {height: 100%;}
#main .main-section.event-prime02 .event-swiper .swiper-slide {background: #fff;}
#main .main-section.event-prime02 .event-swiper .swiper-slide a {display:block;width: 100%;height:100%;position: relative;overflow: hidden;border-radius: 8px;}
#main .main-section.event-prime02 .event-swiper .swiper-slide a:hover {text-decoration: none;}
#main .main-section.event-prime02 .event-swiper .swiper-slide a .slide-img {width: 100%;height: 100%;object-fit: cover;}
#main .main-section.event-prime02 .event-swiper .swiper-slide a .hover-bg {width:100%;height:100%;opacity: 0.5;background: linear-gradient(to bottom, transparent, rgb(0 0 0 / 80%));transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01);transform: translateY(-100%);}
#main .main-section.event-prime02 .event-swiper .swiper-slide a:hover .hover-bg {opacity:1;transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01);}
#main .main-section.event-prime02 .event-swiper .swiper-slide a .hover-text {position:absolute;bottom:-10%;left:40px;transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01);opacity: 0;}
#main .main-section.event-prime02 .event-swiper .swiper-slide a .hover-bg i.bi {opacity:0;position: absolute;top:40px;right:60px;color:var(--white-100);font-size:22px;transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01);}
#main .main-section.event-prime02 .event-swiper .swiper-slide a:hover .hover-bg i.bi {right:40px;opacity: 1;transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01);}
#main .main-section.event-prime02 .event-swiper .swiper-slide.swiper-slide-active a .hover-text {bottom:40px;transition: all 0.5s cubic-bezier(0.42,0,0.14,1.01) 0.5s;opacity: 1;}

/* section - blog */
#main .main-section.blog .section-more {margin-left: 5rem;}
#main .main-section.blog .blog-box {margin-top: 4.375rem;}
#main .main-section.blog .blog-img {border-radius: 0.75rem;overflow: hidden;height: 0;padding-top: 100%;position: relative;}
#main .main-section.blog .blog-img img {display: none;width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;}
#main .main-section.blog .blog-img img.active {display: block;}
#main .main-section.blog .blog-list {padding-left: 6.875rem;height: 100%;}
#main .main-section.blog .blog-list .blog-row {display: flex;justify-content: space-between;height: 25%;align-items: center;border-bottom: 1px solid var(--gray-400);color: var(--gray-400);cursor: pointer;transition: color .8s;position:relative;}
#main .main-section.blog .blog-list .blog-row:hover, .blog .blog-list .blog-row.active {color: var(--point);font-weight: 500;}
#main .main-section.blog .blog-list .blog-row::after {content:'';width:0;height:1px;display:inline-block;position: absolute;background: var(--point);transition: all .8s;bottom:-1px;}
#main .main-section.blog .blog-list .blog-row:hover::after, .blog .blog-list .blog-row.active::after {width: 100%;}
#main .main-section.blog .blog-list .blog-row .blog-title {font-size: 14pt;flex: 0 0 auto;text-align: left;width: 90%;white-space: normal;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: normal;}
#main .main-section.blog .blog-list .blog-row .blog-link {font-size: 0;background: none;border: none;}
#main .main-section.blog .blog-list .blog-row .blog-link::after {content:'';background: url(../images/main/arrow-right-black.svg) no-repeat;width: 34px;height: 21px;background-position: center center;display: block;border: 1px solid var(--main);opacity: 0.3;border-radius: 30px;transition: opacity .8s;}
#main .main-section.blog .blog-list .blog-row:hover .blog-link::after, .blog .blog-list .blog-row.active .blog-link::after {opacity: 1;}
#main .main-section.blog .blog-list .blog-row img {display: none;}



@media (max-width: 1330px) {
    #main .main-slide .main-swiper .text-box {padding-left: 20px;}
    #main .main-slide {height: 900px;}
    #main .main-slide .main-swiper .text-boxBG {height: 600px;}
    #main .main-slide .main-swiper .text-box {top:170px;}
    #main .main-slide .main-swiper .swiper-pagination {top:830px;}
    #main .main-section.design .design-box.box1,
    #main .main-section.contact .contact-sns {right:1.5rem;}
}

@media (max-width: 1200px) {
    #main .main-section.news-prime02 .news-text,
    #main .main-section.news-prime02 .news-slide .news-swiper {height: 485px;}
    #main .main-section.news-prime02 .news-slide .news-swiper .swiper-slide {width: 250px;}
    #main .main-slide .main-swiper .swiper-button-prev {right: 175px;}
    #main .main-section.news-prime02 .news-slide .news-swiper .swiper-slide .news-slide-img {height: 310px;}
}

@media (max-width: 991px) {
    /* br-mb-none 클래스는 태블릿 이하 해상도에서 줄바꿈을 띄어쓰기로 변환합니다. */
    .br-mb-none br {display: inline-block;content: " ";padding: 0 2px;}
    #main {margin-top: 60px;width:100%;overflow: hidden;max-width: 100vw;}
    #main .main-slide .main-swiper .text-box .btn-line {width: 150px;}
    #main .main-section.business .row {margin-top:40px !important}
    #main .main-section.news-prime02 .news-text {width:220px;height: 400px;}
    #main .main-section.news-prime02 .news-slide {width: calc(100% - 280px) !important}
    #main .main-section.news-prime02 .news-slide .news-swiper {height: 400px;}
    #main .main-section.news-prime02 .news-slide .news-swiper .swiper-slide {width: 200px;}
    #main .main-section.event-prime02 .event-swiper .swiper-slide a .hover-text .font-event-s {max-width: calc(100% - 50px);display: -webkit-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
    #main .main-section.contact {height: 310px;}
    #main .main-section.contact .contact-sns {top:66px;}   
    #main .main-section.news-prime02 .news-slide .news-swiper .swiper-slide .news-slide-img {height: 240px;}
}

@media screen and (max-width: 767px) {
    #main .main-slide {height: 800px;position: relative;}
    #main .main-slide .main-swiper {z-index: 2;height: 100%;position: absolute;top:0;left:0;}
    #main .main-slide .main-swiper .text-box {top:120px;max-width: 350px;}
    .font-slide-title,
    .font-slide-titleB,
    .font-slide-subtxt,
    #main .main-slide .main-swiper .text-box .btn-line,
    .font-main-slide .swiper-pagination-current {color: var(--white-100);}
    #main .main-slide .main-swiper .swiper-button-prev,
    .font-main-slide .swiper-pagination-total,
    #main .main-slide .main-swiper .swiper-button-next,
    #main .main-slide .main-swiper .font-main-slide {color: #eee;}
    #main .main-slide .main-swiper .text-box.on .btn-line {border-color: #e2e2e2;}
    #main .main-slide .main-swiper {background: #000;}
    #main .main-slide .main-swiper .swiper-wrapper {opacity: 0.85;}
    #main .main-slide .main-swiper .swiper-pagination {top:740px;}
    #main .main-section.news-prime02 .news-text {width:100%;height: unset;}
    #main .main-section.news-prime02 .news-slide {position: static;width: 100% !important;}
    #main .main-section.news-prime02 .news-slide .swiper-scrollbar {position: static;}
    #main .main-section.news-prime02 .news-text {margin-bottom: 30px;}
    #main .main-section .swiper-button-prev {left:auto;right:65px;top:20px;}
    #main .main-section .swiper-button-next {left:auto;right:10px;top:20px;}
    #main .main-section.news-prime02 .news-slide .news-swiper .swiper-slide {width: 160px;}
    #main .main-section.event-prime02 .event-left {width:100%;}
    #main .main-section.event-prime02 .row > div {min-height: unset;}
    #main .main-section.event-prime02 .event-slide-thumb {position: static;margin-top: 20px;width:100%;}
    #main .main-section.event-prime02 .preview-box {width:100%;margin-top: 20px;}
    #main .main-section.event-prime02 .event-slide-thumb .swiper-slide {width:23.7%;}
    #main .main-section.contact .contact-txt {width:unset;margin-right: 20px;}   
    #main .main-section.news-prime02 .news-slide .news-swiper {height: 360px;}
    #main .main-section.news-prime02 .news-slide .news-swiper .swiper-slide .news-slide-img {height: 205px;}
}

@media (max-width: 576px) {
    .font-slide-subtxt,
    .font-black-s-2,
    .font-gray-s-2,
    .font-contact-m-1,
    .font-footer-s-1,
    .font-event-s {font-weight: var(--font-weight-300);}
    .font-slide-subtxt, 
    .font-contact-m-1 {font-size: var(--font-size-s-2);}
    .font-slide-s-2, 
    .font-product-s-2 {font-size: var(--font-size-s-1);margin-top: 10px;}
    .font-product-m-1-SB {margin-top: 10px;}
    .font-gray-s-3 {font-weight: var(--font-weight-300);font-size: var(--font-gray-s-2);}
    .font-black-s-3 {font-weight: var(--font-weight-300);font-size: var(--font-black-s-2);}
    #main .main-slide {height: 650px;}
    #main .main-slide .main-swiper .swiper-pagination {top:600px;}
    #main .main-slide .main-swiper .font-main-slide {padding: 0 46px 30px 0;}
    #main .main-slide .main-swiper .font-main-slide span {padding: 0 6px;}
    #main .main-slide .main-swiper .text-box {top:110px;}
    #main .main-slide .main-swiper .text-box .btn-line {margin-top:30px;width:155px;padding: 6px 0 6px 18px;}
    #main .main-slide .main-swiper .swiper-button-prev {bottom: 20px;right: 133px;}
    #main .main-slide .main-swiper .swiper-button-next {bottom: 20px;right: 20px;}
    #main .main-section.contact {height: 455px;}
    #main .main-section.business .row {margin-top: 0px !important;}
    #main .main-section.business .row .col {margin-top: 20px;}
    #main .main-section.design .bg-gray {width:80%; height: 340px;}
    #main .main-section.design .design-box.box1 {position: static;width:100%;margin-top: 30px;}
    #main .main-section.design .design-box.box2 {margin-top: 30px;width:100%;max-width: unset;}
    #main .main-section.event-prime02 .event-slide-thumb {margin-top: 25px;}
    #main .main-section.event-prime02 .event-slide-thumb .swiper-slide {width:31%}
    #main .main-section.event-prime02 .event-swiper .swiper-slide.swiper-slide-active a .hover-text {bottom:20px;left:20px;}
    #main .main-section.event-prime02 .event-swiper .swiper-slide a .hover-text .font-event-s {max-width: calc(100% - 20px);}
    #main .main-section.contact .contact-txt {width: 100%;}
    
}