@charset "utf-8"; 
/*
 * Name     : main.css
 * Version  : 1.1.2
 * Product  : prime05
 * Author   : 1px studio
 * Date     : 2024.08.15
 * Desc     : 공지사항 swiper 효과 변경 
---------------------------------------------------
*/

/* main common */
#main {letter-spacing: -0.03rem;margin-top: var(--header-space);}
.section-title-sm {font-size: 1.25rem;color: var(--point-middle);margin-bottom: 20px;line-height: 1;}
.section-title-lg {font-size: 2.25rem;line-height: 1.34;font-weight: 600;margin-bottom: 40px;display: flex;align-items: center;}
.section-text-1 { font-size: 1rem; line-height: 1.75; word-break: break-all;}
.section-text-2 { font-size: 1.0625rem; line-height: 1.75; }
.section-text-3 {font-size: 1.0625rem;line-height: 1.75;color: var(--gray-700);}
.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;}
.section-more:hover {background: var(--gray-100);}
.swiper {-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
.gray-line {border-top: 1px solid var(--gray-200);margin-bottom: 4.5rem;opacity: 1;max-width: 1320px;padding: 0;}


/* hero */
.hero {height: calc(100vh - var(--header-space));padding: 0 var(--x-padding) 6.48vh;display: flex;align-items: center;}
.hero .container-xxxl {position: relative;display: flex;transition: all .8s var(--ease-power4-out);}
.hero .hero-content {display: flex;flex-direction: column;justify-content: space-evenly;width: 33.333333%;padding-left: 190px;height: 80vh;position: relative;transition: all .8s var(--ease-power4-out);}
.hero .hero-swiper {width: 66.666667%;padding-left: 3.125rem;transition: all .8s var(--ease-power4-out);}
.hero .hero-swiper .swiper-wrapper {align-items: center;}
.hero .hero-swiper .swiper-slide {max-height: 812px;height: 80vh;}
.hero .hero-swiper .swiper-slide .hero-img {border-radius: 1.625rem;overflow: hidden;height: 100%;width: 100%;}
.hero .hero-swiper .swiper-slide .hero-img img {object-fit: cover;height: 100%;}
.hero .hero-text-box {opacity: 0;display: none;margin-top: 20%;align-items: center;height: 32.5rem;}
.hero .hero-text-box .hero-text-item .hero-title {font-size: 3.4375rem;line-height: 1.34;font-weight: 500;margin-bottom: 2.6rem;transition: all .8s var(--ease-power4-out);}
.hero .hero-text-box .hero-text-item .hero-text {font-size: 1.0625rem;line-height: 1.82;font-weight: 300;margin-bottom: 4rem;transition: all .8s var(--ease-power4-out);}
.hero .hero-text-box .hero-text-item .hero-more {background: var(--main);color: var(--white-100);height: 68px;width: 278px;font-size: 1.125rem;font-weight: 500;border-radius: 8px;line-height: 1;transition: all .8s var(--ease-power4-out);display: inline-flex;align-items: center;position: relative;padding-left: 50px;}
.hero .hero-text-box .hero-text-item .hero-more::after {content:'';background: url(../images/main/arrow-right.svg) no-repeat;width: 24px;height: 24px;display: inline-block;position: absolute;right: 45px;transition: all .6s var(--ease-power4-out);}
.hero .hero-text-box .hero-text-item .hero-more:hover::after {right: 60px;}
.hero .hide-box {overflow: hidden;line-height: inherit;}
.hero div[up-transition] {line-height: inherit;}
.hero .swiper-page .hero-bullet {width: 20px;height: 20px;border-radius: 20px;border: 1px solid transparent;display: inline-block;position: relative;margin: 4px;cursor: pointer;}
.hero .swiper-page .hero-bullet.hero-bullet-active {border-color: var(--point);}
.hero .swiper-page .hero-bullet::after {content: '';width: 4px;height: 4px;border-radius: 4px;background: var(--gray-400);display: inline-block;position: absolute;top: 7px;left: 7px;}
.hero .swiper-page .hero-bullet.hero-bullet-active::after {background: var(--point);}
.hero .swiper-progress {position: absolute;top: 0px; left: 0px; display: flex;align-items: center;flex-direction: column;justify-content: center;height: 100%;}
.hero .swiper-progress .progress-num {font-size: 4.375rem;font-weight: 500;transform: rotate(-90deg);margin-bottom: 60px;line-height: 1;width: 5.3rem;transition: all .8s var(--ease-power4-out);}
.hero .swiper-progress .progress-line {height: 360px;width: 1px;background: var(--main);position: relative;transition: all .8s var(--ease-power4-out);}
.hero .swiper-progress .progress-line .progress-inner {width: 5px;height: 270px;background: var(--main);position: absolute;bottom: 0;left: -2px;}
.hero .hero-swiper .swiper-slide .hero-img .hero-video-iframe {width: 100%;height: 100%;position: absolute;top:0;left:0;}
.hero .hero-buttons {position: absolute;top: 6%;left: 3.125rem;right: 0;bottom: 9%;}
.hero .hero-buttons .hero-prev {width: 50%;position: absolute;top: 0;left: 0;bottom: 0;z-index: 1;}
.hero .hero-buttons .hero-next {width: 50%;position: absolute;top: 0;right: 0;bottom: 0;z-index: 1;}


/* notice */
.notice {margin-top: var(--x-padding);}
.notice .notice-box {background: var(--gray-50);background: var(--point-light);height: 5rem;display: flex;align-items: center;justify-content: space-between;padding: 0 50px;border-radius: 1rem;}
.notice-head {padding-right: 3.3rem;border-right: 1px solid var(--gray-800);}
.notice-title {max-width: 70%;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: normal;}
.notice .notice-box .notice-head h3 {font-size: 1.125rem;font-weight: 600;line-height:1.25}
.notice .notice-box .swiper.notice-swiper {width: 70%;height: 100%;}
.notice .notice-box .notice-swiper .swiper-slide {display: flex;}
.notice .notice-box .notice-swiper .swiper-slide a {display: flex;justify-content: space-between;align-items: center;background: none;}
.notice .notice-box .notice-buttons {display: flex;}
.notice .notice-box .notice-buttons button {border: none;background: transparent;border-radius: 0.5rem;display: flex;align-items: center;justify-content: center;width: 2.8rem;height: 2.8rem;margin: 0 0.2rem;}
.notice .notice-box .notice-buttons button:hover {background: var(--gray-100);color: var(--main);}
.notice .notice-box .notice-title h5 {font-size: 1.125rem;font-weight: 500;}
.notice .notice-box .notice-content {font-size: 1rem;width: 55%;}
.notice .notice-box .notice-date {font-size: 1rem;}


/* wedo */
.wedo .wedo-box {padding-top: 20px;display: flex;margin: 0 -1rem;}
.wedo .wedo-box .wedo-item {padding: 0 0.9375rem;width: 33.33333333%;flex:0 0 auto;}
.wedo .wedo-box .wedo-item .wedo-bg {background: var(--white-200);border-radius: 1rem;overflow: hidden;padding: 0;}
.wedo .wedo-box .wedo-item .wedo-text {padding: 3.125rem 2.8rem;}
.wedo .wedo-box .wedo-item .wedo-title {font-size: 1.75rem;font-weight: 600;line-height: 1;margin-bottom: 2rem;letter-spacing: 0;}
.wedo .wedo-box .wedo-item .wedo-desc {font-size: 1rem; line-height: 1.75rem;height:8rem; word-break: break-all;}
.wedo .wedo-box .wedo-item .wedo-more {font-size: 1.0625rem;font-weight: 600;position: relative;}
.wedo .wedo-box .wedo-item .wedo-more::after {content:'';width: 0;height: 1px;background: var(--main);display: inline-block;position: absolute;left: 0;bottom: -3px;transition: all .8s var(--ease-power4-out);}
.wedo .wedo-box .wedo-item .wedo-more:hover::after {width: 100%;}
.wedo .wedo-box .wedo-item .wedo-img {width: 100%;}
.wedo .wedo-box .wedo-item .wedo-img img {width: 100%;}

/* ability */
.ability .ability-box {width: 100%;justify-content: space-between;display: flex;}
.ability .ability-box .ability-item {border-top: 1px solid var(--gray-200);padding-top: 30px;margin-bottom: 65px;width: 43.65%;flex: 0 0 auto;}
.ability .ability-box .ability-item .ability-num {font-size: 5.125rem;font-weight: 500;line-height: 1;margin-bottom: 20px;}
.ability .ability-box .ability-item .ability-text {color: var(--gray-400);}


/* client */
.client .client-title {display: flex;align-items: center;margin-top: 20px;}
.client .client-box {width: 100%; overflow: hidden;height: 96px;}
.client .client-box .client-item {width: 96px;display: inline-block;margin-right: 96px;}


/* production */
.production .production-box {display: flex;justify-content: space-between;}
.production .production-box .production-item {flex: 0 0 auto;width: calc(50% - 1rem);}
.production .production-box .production-item .production-img {border-radius: 0.75rem;overflow: hidden;max-height: 224px;}
.production .production-box .production-item .section-text-1 {height: 160px;}

/* brand */
.brand {padding-bottom: 2rem;margin-top: 2rem;}
.brand .section-text-2 {margin-bottom: 5.625rem;}
.brand .video {overflow: hidden;margin-top: 8rem;height: 30.8rem}
.brand video {padding: 0;width: 100%;height: 100%;overflow: hidden;position: absolute;object-fit: cover;border-radius: 1rem;}
.brand video source {z-index: -1;width: 100%;position: absolute;}
.brand .iframe-wrapper {position: relative;padding-top: calc(9/16*100%);height: 0;width: 100%;overflow: hidden;object-fit: cover;border-radius: 1rem;}
.brand .iframe-wrapper iframe {display: block;position: absolute;height: 100%;width: 100%;top: 0;left: 0;}
.brand .iframe-wrapper::after {content: '';position: absolute;top: 0;right: 0;bottom: 0;left: 0;z-index: 1;}
#video-view {position: absolute;bottom: 25px;width: 48px;z-index: 10;height: 48px;font-size: 1.5rem;background: rgb(0 0 0 / 50%);color: #fff;border: none;left:20px;border-radius: 50px;display: flex;justify-content: center;align-items: center;transition: all var(--ease-power4-out) .5s;transform: scale(0.9);}
#video-view:hover {background: rgb(0 0 0 / 100%);transform: scale(1);}
#video-popup {position: fixed;top: 0;left: 0;right: 0;bottom: 0;display: flex;justify-content: center;align-items: center;z-index: 1001;display: none;}
#video-popup .close-cover {background: rgb(0 0 0 / 80%);position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;padding: 3rem;text-align: right;}
#video-popup .close-cover button {background: none;color: var(--white-100);border: none;font-size: 2rem;}
#video-popup .video-wrapper {position: relative;width: 62%;padding-bottom: 35%;z-index: 10;transform: translateY(-50%);display: none;}
#video-popup .video-wrapper iframe, #video-popup .video-wrapper video {position: absolute;width: 100%;height: 100%;}


/* product */
.product .container-xxl {position: relative;padding-top: 3.5rem;}
.product .section-more {margin-left: 5rem;}
.product .product-swiper {margin-top: 6rem;}
.product .product-swiper .swiper-slide {width: 420px;}
.product .product-swiper .swiper-slide a img {transition: all 1.8s var(--ease-power4-out);transform:scale(1)}
.product .product-swiper .swiper-slide a:hover img {transform: scale(1.15);}
.product .product-swiper .product-img {width: 100%;border-radius: 0.75rem;overflow: hidden;margin-bottom: 1.25rem;position: relative;max-height: 325px;display: flex;align-items: center;justify-content: center;}
.product .product-swiper .product-text .product-title {font-size: 1rem;font-weight: 400;}
.product .swiper-buttons {position: absolute;right: 2.5rem;top: 12.5rem;display: flex;z-index: 2;}
.product .swiper-buttons button {width: 3.375rem;height: 3.375rem;background: var(--gray-50);border-radius: 3.375rem;margin-left: 6px;transition: all .3s;border: none;}
.product .swiper-buttons button::after {content: '';background: url(../images/main/arrow-right-black.svg) no-repeat;background-position: center center;display: block;width: 100%;height: 100%;}
.product .swiper-buttons .swiper-prev::after {transform: rotate(180deg);}
.product .swiper-buttons button:hover {background: var(--gray-100);}
.product .swiper-buttons .swiper-button-disabled:hover {background: var(--gray-50);}
.product .swiper-buttons .swiper-button-disabled::after {opacity: .2;}
.product .product-hover {position: absolute;top: 0;right: 0;bottom: 0;left: 0;backdrop-filter: blur(15px);display: flex;align-items: center;justify-content: center;transition: all .8s var(--ease-power4-out);opacity: 0;}
.product .product-hover span {padding: 1rem 2.8125rem;border-radius: 40px;font-size: 16px;font-weight: 300;background: var(--white-100);}
.product .product-img:hover .product-hover {opacity: 1;}
.product .swiper-mobile-buttons { display:none; } 
.product .swiper-mobile-buttons button.prev { position: absolute; top: 0px; left: 0; border: none; background: none; width: 15%; height: 90%; z-index: 2; } 
.product .swiper-mobile-buttons button.next { position: absolute; top: 0px; right: 0; border: none; background: none; width: 15%; height: 90%; z-index: 2; } 
.product .swiper-mobile-buttons button.next::after { content: '\F285'; font-family: 'bootstrap-icons'; display: block; color: var(--white-100); font-size: 1.8rem; } 
.product .swiper-mobile-buttons button.prev::after { content: '\F284'; font-family: 'bootstrap-icons'; display: block; color: var(--white-100); font-size: 1.8rem; } 

/* blog */
.blog .section-more {margin-left: 5rem;}
.blog .blog-box {margin-top: 4.375rem;}
.blog .blog-img {border-radius: 0.75rem;overflow: hidden;height: 0;padding-top: 100%;position: relative;}
.blog .blog-img img {display: none;width: 100%;height: 100%;object-fit: cover;position: absolute;top: 0;}
.blog .blog-img img.active {display: block;}
.blog .blog-list {padding-left: 6.875rem;height: 100%;}
.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;}
.blog .blog-list .blog-row:hover, .blog .blog-list .blog-row.active {color: var(--point);font-weight: 500;}
.blog .blog-list .blog-row::after {content:'';width:0;height:1px;display:inline-block;position: absolute;background: var(--point);transition: all .8s;bottom:-1px;}
.blog .blog-list .blog-row:hover::after, .blog .blog-list .blog-row.active::after {width: 100%;}
.blog .blog-list .blog-row .blog-date {font-size: 1.125rem;width: 15%;flex: 0 0 auto;}
.blog .blog-list .blog-row .blog-title {font-size: 1.4375rem;flex: 0 0 auto;text-align: left;width: 70%;display: -webkit-box;overflow: hidden;text-overflow: ellipsis;white-space: normal;-webkit-line-clamp: 1;-webkit-box-orient: vertical;word-break: normal;}
.blog .blog-list .blog-row .blog-link {font-size: 0;background: none;border: none;}
.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;}
.blog .blog-list .blog-row:hover .blog-link::after, .blog .blog-list .blog-row.active .blog-link::after {opacity: 1;}
.blog .blog-list .blog-row img {display: none;}




@media (min-width: 768px) {
    
}
@media (hover: hover) {
    
}
@media (max-width: 1710px) {
    .hero .container-xxxl {max-width: 1320px;padding: 0;}
    .hero .swiper-progress {left: -28px}
    .hero .hero-text-box {min-width: 490px;}
    .hero .hero-content {padding-left: 9%;width: 37%;}
    .hero .hero-swiper {width: 63%;padding-left: 2%;}
    .hero .hero-text-box .hero-text-item .hero-title {font-size: 3rem;}
    .hero .swiper-progress .progress-num {font-size: 3.5rem;}
    .hero .swiper-progress .progress-line {height: 300px;}
    .hero .hero-text-box .hero-text-item .hero-text {margin-bottom: 3rem;}
    .hero .hero-text-box .hero-text-item .hero-more {width: 248px;padding-left: 40px;height: 64px;font-size: 1.0625rem;}
    .hero .hero-text-box .hero-text-item .hero-more::after {right: 35px;}
    .hero .hero-text-box .hero-text-item .hero-more:hover::after {right: 45px;}
    /* .production .production-box .production-item .section-text-1 {height: calc(100% - 12vw);max-height: 160px;} */
}
@media (max-width: 1420px) {
    .brand .video {height: 34.5vw;}
}
@media (max-width: 1279px) {
    .hero .container-xxxl {padding: 0;}
    .hero .hero-content {padding-left: 8%;}

    .wedo .wedo-box .wedo-item .wedo-desc br,
    .section-text-1 br,
    .production .production-box .production-item .section-text-1 br,
    .brand .section-text-2 br {content:' ';display: none;}
    .wedo .wedo-box .wedo-item .wedo-desc {height: 9rem;}
    
}
@media (max-width: 991px) or (orientation: portrait) {
    .hero {height: auto;padding-bottom: 0;}
    .hero .hero-swiper {width: 100%;height: 100%;padding: 0;}
    .hero .container-xxxl {height: calc(100vh - 180px);min-height: 580px;}
    .hero .hero-content {position: absolute;top: 0;left: 0px;z-index: 10;width: 100%;padding-left: 10%;-webkit-backdrop-filter:brightness(0.8);backdrop-filter: brightness(0.8);border-radius: 1.625rem;overflow: hidden;height: 100%;}
    .hero .hero-swiper .swiper-slide {height:100%;max-height: 100%;}
    .hero .swiper-progress {display:none}
    .hero .swiper-page .hero-bullet.hero-bullet-active {border-color: var(--white-100);}
    .hero .swiper-page .hero-bullet.hero-bullet-active::after {background-color: var(--white-100);}
    .hero .hero-text-box {color: var(--white-100);margin-top: 40px;min-width: auto;}
    .hero .swiper-page {margin-bottom: 20px;}

    .brand .section-text-2 {margin-bottom: 2rem;}
    .section-title-lg {margin-bottom: 25px;}
    .brand .video {margin-top: 3rem;height: auto;}
    .brand .video video {position: static;}
    .gray-line {margin-bottom: 1.5rem;}
    .product .product-swiper {margin-top: 3rem;}
    .product .swiper-buttons {top: 5.6rem;}
    .product .section-more, 
    .blog .section-more {margin-left: 2rem;}
    .section-more {padding: 0.6rem 1.8rem;}
    .wedo .wedo-box {flex-direction: column;}
    .wedo .wedo-box .wedo-item {margin-bottom: 2rem;width: 100%;}
    .wedo .wedo-box .wedo-item .wedo-desc {height: 6rem;}
    .wedo .wedo-box .wedo-item .wedo-bg {display: flex;}
    .wedo .wedo-box .wedo-item .wedo-text {flex: 0 0 auto;width: 70%;padding: 2.5rem;}
    .wedo .wedo-box .wedo-item .wedo-img {flex: 0 0 auto;width: 30%;}
    .wedo .wedo-box .wedo-item .wedo-img img {width: 100%; height: 100%; object-fit: cover;}
    .notice .notice-box .notice-content {display: none;}
    .notice .notice-box .swiper.notice-swiper {margin:0 3.3rem;}
    .blog .blog-box {margin-top: 2rem;min-height: 200px;}
    .blog .blog-img {height:100%;}
    .blog .blog-list {padding-left: 2rem;}
    .blog .blog-list .blog-row .blog-title {font-size: 1.2rem;}
    .blog .blog-list .blog-row .blog-date {font-size: 1rem;}
    .blog .blog-list .blog-row .blog-link::after {height: 17px;}
    #video-popup .video-wrapper {width: 100%;padding-bottom: 56.25%;}
    #video-popup .close-cover {padding: 1rem;}
}

@media (max-width: 767px) {
    .section-title-lg {font-size: 1.875rem}
    .wedo .wedo-box .wedo-item .wedo-bg {display: block;}
    .wedo .wedo-box .wedo-item .wedo-img,
    .wedo .wedo-box .wedo-item .wedo-text {width: 100%;}
    .wedo .wedo-box .wedo-item .wedo-desc {height: auto;margin-bottom: 1rem;}
    .ability .ability-box .ability-item .ability-num {font-size: 4rem;}
    .notice-head {padding-right: 1.5rem;}
    .notice .notice-box {padding: 0 20px 0 40px;}
    .notice .notice-box .swiper.notice-swiper {margin: 0 1.5rem;}
    .blog .blog-list {padding: 0;}
    .blog .blog-list .blog-row {width: 100%;height: 70px;overflow: hidden;margin-bottom: 0.5rem;padding-bottom: 0.5rem;justify-content: unset;border-color: var(--gray-200);color: var(--main);}
    .blog .blog-list .blog-row::after {content: none;}
    .blog .blog-list .blog-row .blog-title {font-size: 1.1rem;width: calc(100% - 190px)}
    .blog .blog-list .blog-row img {display: block;height: 100%;object-fit: cover;border-radius: 0.5rem;margin-right: 1rem;width:70px;}
    .blog .blog-list .blog-row .blog-date {width: 60px;}
    .blog .blog-box > div:first-child {display: none;}
    .blog .blog-list .blog-row .blog-link {position: absolute;right: 0;}
    .blog .blog-list .blog-row .blog-link::after {opacity: 1;}
    .section-text-3 br {display: none;content: ' ';}
    #video-view {bottom: 10px;left:10px;}
}
@media (max-width: 575px) {
    .hero .hero-text-box .hero-text-item .hero-title {font-size: 2.6rem;}
    .production .production-box {flex-direction: column;}
    .production .production-box .production-item {width: 100%}
    .production .production-box .production-item .section-text-1 {height: auto;margin-top: 2rem;}
    .production .production-box .production-item .production-img {margin-top: 1rem;}
    .blog .blog-list .blog-row .blog-title {width: calc(100% - 130px)}
    .blog .blog-list .blog-row .blog-date {display: none;}
    .notice .notice-box .notice-date {display: none;}
    .notice-title {max-width: 100%;}
    .notice .notice-box {padding: 0 10px 0 25px;height: 4.5rem;}
    .notice-head {border:none;padding-right:10px;}
    .notice .notice-box .notice-buttons button {margin: 0;}
    .notice .notice-box .swiper.notice-swiper {margin: 0 0.5rem 0 1.5rem;}
    .section-title-lg {font-size: 1.82rem;}
    .ability .ability-box .ability-item .ability-num {font-size: 3.2rem;}
}
@media (max-width: 480px) {
    .product .swiper-buttons {display: none;}
    .product .swiper-mobile-buttons {display: block;}

}