@charset "utf-8"; 

/* main common */
.space-1 {margin-bottom: 240px;}
.space-2 {margin-bottom: 180px;}
.m-title-1 {font-size:var(--font-size-lg-1);font-weight:var(--font-weight-semibold);letter-spacing: var(--letter-spacing-lg);line-height: var(--line-height-lg);text-align: center;margin-bottom:35px;}
.m-text-1 {font-size:var(--font-size-sm-2);font-weight:var(--font-weight-normal);letter-spacing: var(--letter-spacing-sm);line-height: var(--line-height-sm);text-align: center;}


button.dot-btn {display: inline-flex;justify-content: center;align-items: center;cursor: pointer;font-size: var(--font-size-sm-2);font-weight: var(--font-weight-medium);letter-spacing: var(--letter-spacing-sm);position: relative;background: none;border:none;width: auto;padding-left:40px;color:var(--blueblack)}
button.dot-btn .dot {overflow: hidden;display: inline-block;left: 0;top: -2px;border-radius: 100%;transform: scale(0.3225) translateX(0);transition: all 600ms var(--expoOut);will-change: transform;position: absolute;width: 35px;height: 35px;background-color: var(--blueblack);}
button.dot-btn .dot::before {content: "\F138";font-family: 'bootstrap-icons';position: absolute;width: 100%;height: 100%;top: 4px;left: 0px;opacity: 0.0001;transform: translateX(-100%);transition: all .6s var(--expoOut);will-change: transform;color: var(--white-100);}
button.dot-btn.bg::before {content: "";display: block;position: absolute;z-index: -1;width: 100%;height: 100%;left: 0;top: 0;right: 0;bottom: 0;transform: scale(1);border-radius: 50px;background-color: var(--white-200);transition: all .6s var(--expoOut);will-change: transform;}
button.dot-btn.bg {padding: 16px 26px 16px 52px;}
button.dot-btn.bg .dot {top: 13px;left: 13px;}
button.dot-btn.bg .text {position: relative;color: var(--blueblack);transform: translateX(0);transition: all .6s var(--expoOut);will-change: transform;}


/* MAIN SLIDE */
.main-slide-bg.img1 {background: url(../images/main/main-slide1.jpg) no-repeat center;}
.main-slide-bg.img2 {background: url(../images/main/main-slide2.jpg) no-repeat center;}
.main-slide-bg.img3 {background: url(../images/main/main-slide3.jpg) no-repeat center;}
.main-slide-bg.img4 {background: url(../images/main/main-slide4.jpg) no-repeat center;}
.main-slide-summary {font-size: var(--font-size-md-2);letter-spacing: var(--letter-spacing-md);font-weight: var(--font-weight-medium);color:var(--white-100);margin-bottom: 28px;opacity: 0;padding-left:6px;line-height: 1.25;}
.main-slide-title {font-size: var(--font-size-xl-2);letter-spacing: var(--letter-spacing-xl);font-weight: var(--font-weight-thin);word-break: keep-all;color:var(--white-100);width: 100%;opacity: 0;line-height: 1.25;}
.main-slide-title-bold {font-size: var(--font-size-xl-2);letter-spacing: var(--letter-spacing-xl);font-weight: var(--font-weight-semibold);color:var(--white-100);opacity: 0;line-height: 1.25;}
.slide-cursor { display: none; justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 9000; pointer-events: none; } 
.slide-cursor .pointer { opacity: 0.5; display: block; width: 30px; height: 30px; border-radius: 100%; background-color: var(--primary-color-1); -webkit-transform: scale(0); transform: scale(0); } 
.slide-cursor .txt { position: absolute; left: 50%; top: 50%; font-size: var(--font-size-xs-1); color: var(--white-100); line-height: 18px; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); font-weight: var(--font-weight-medium); } 
.cursor-area { cursor: pointer; } 
.main-slide { position: relative; height: 100vh; padding: 0;} 
.main-slide .main-swiper { overflow: hidden; position: relative; height: 100%; } 
.main-slide .main-swiper .swiper-slide { overflow: hidden; position: relative; height: 100%; } 
.main-slide .main-swiper .swiper-slide .main-slide-txt-wrap { display: flex; justify-content: center; align-items: center; position: relative; z-index: 1; margin: 0 auto; max-width: 1400px; height: 100%; } 
.main-slide .main-swiper .swiper-slide .main-slide-txt { margin-top: 40px; width: 100%; } 
.main-slide .main-swiper .swiper-slide .main-slide-bg-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 
.main-slide .main-swiper .swiper-slide .main-slide-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; -webkit-transition: transform 5s ease; transition: transform 5s ease; -webkit-transform: scale(1.1); transform: scale(1.1); } 
.main-slide .swiper-button-prev { opacity: 0 !important; left: 0 !important; top: 0 !important; margin: 0 !important; width: 30% !important; height: 100% !important; background: none !important; display: block; } 
.main-slide .swiper-button-next { opacity: 0 !important; right: 0 !important; top: 0 !important; margin: 0 !important; width: 30% !important; height: 100% !important; background: none !important; display: block; } 
.main-slide .swiper-button-prev::after, .main-slide .swiper-button-next::after { content: none; } 
.main-slide .main-swiper .swiper-slide-active .main-slide-bg { -webkit-transform: scale(1); transform: scale(1); } 
.main-slide .swiper-slide-active .main-slide-txt-wrap .main-slide-summary { -webkit-animation: fadeUp 1s 1.1s forwards; animation: fadeUp 1s 1.1s forwards; } 
.main-slide .swiper-slide-active .main-slide-txt-wrap .main-slide-title { -webkit-animation: fadeUp 1s 1.2s forwards; animation: fadeUp 1s 1.2s forwards; } 
.main-slide .swiper-slide-active .main-slide-txt-wrap .main-slide-title-bold { -webkit-animation: fadeUp 1s 1.3s forwards; animation: fadeUp 1s 1.3s forwards; } 
.main-slide .load-init .swiper-slide-active .main-slide-txt-wrap .main-slide-summary { -webkit-animation: fadeUp 1s 0.3s forwards; animation: fadeUp 1s 0.3s forwards; } 
.main-slide .load-init .swiper-slide-active .main-slide-txt-wrap .main-slide-title { -webkit-animation: fadeUp 1s 0.4s forwards; animation: fadeUp 1s 0.4s forwards; } 
.main-slide .load-init .swiper-slide-active .main-slide-txt-wrap .main-slide-title { -webkit-animation: fadeUp 1s 0.5s forwards; animation: fadeUp 1s 0.5s forwards; } 
.main-slide .swiper-pagination {width: inherit;left: -160px;top: 50vh;}
.main-slide .swiper-pagination-bullet {background-color: transparent;border: 1px solid var(--white-100);width: 10px;height: 10px;opacity: 0.6;margin: 20px 0 !important;}
.main-slide .swiper-pagination-bullet-active {background-color: var(--white-100);border-color: var(--white-100);opacity: 1;}
.main-slide .swiper-pause {position: absolute;z-index: 10;color: var(--white-100);border: 1px solid var(--white-100);width: 24px;height: 24px;border-radius: 20px;font-size: 20px;line-height: 18px;left: -6px;cursor: pointer;}
.main-slide .swiper-pause.stop i::before {content: "\F4F5";line-height: 23px;}
.main-slide .progress-circle {width: 220px;height:220px; border-radius: 100%;border: 1px solid var(--white-200);}
.main-slide .autoplay-progress {max-width: 1400px;width: 100%;position: absolute;z-index: 10;bottom: -90vh;}
.main-slide .autoplay-progress .autoplay-wrap {width: 220px;height:220px;position: absolute;right:0;bottom:0;z-index: 10;}
.main-slide .autoplay-progress svg {width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;font-weight: bold;color: var(--white-100);position: absolute;top:0;left:0;stroke-width: 2px;stroke: var(--white-200);fill: none;opacity: 0.4;z-index: -1;}
.main-slide .autoplay-progress svg.fill {--progress: 0;stroke-dashoffset: calc(1335 * (1 - var(--progress)));stroke-dasharray: 1335;transform: rotate(-90deg);stroke: var(--white-100);opacity: 1;}
.main-slide .autoplay-progress .m-prev {font-size: var(--font-size-sm-3);font-weight: var(--font-weight-normal);letter-spacing: var(--letter-spacing-sm);color:var(--white-100);cursor: pointer;}
.main-slide .autoplay-progress .m-next {font-size: var(--font-size-sm-3);font-weight: var(--font-weight-normal);letter-spacing: var(--letter-spacing-sm);color:var(--white-100);cursor: pointer;}
.main-slide .autoplay-progress .bar {width: 1px;height: 22px;background: var(--white-100);transform: rotate(18deg);margin: 0 15px;opacity: 0.6;}

@-webkit-keyframes fadeUp { 
 from { opacity: 0; visibility: hidden; -webkit-transform: translateY(40px); transform: translateY(40px); } 
 to { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } 
 }

@keyframes fadeUp { 
 from { opacity: 0; visibility: hidden; -webkit-transform: translateY(40px); transform: translateY(40px); } 
 to { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } 
 }


/* ABOUT */
.about .a-text-wrap {padding: 30px 10px;}
.about .a-title {font-size: var(--font-size-md-2);font-weight: var(--font-weight-medium);letter-spacing: var(--letter-spacing-md);margin-bottom: 16px;}
.about .a-text {font-size: var(--font-size-xs-1);font-weight: var(--font-weight-light);letter-spacing: var(--letter-spacing-xs);line-height: var(--line-height-xs);}
.about .container-xxl > .row > .col-12 {padding: 0 10px;}
.about .a-img-wrap {overflow: hidden;}


/* LATEST */
.latest .l-img {width: 50%;overflow: hidden;}
.latest .l-img img {min-height: 354px;width: 100%;object-fit: cover;}
.latest .l-text-wrap {padding: 40px 120px;}
.latest .l-label {font-size: var(--font-size-sm-2);font-weight: var(--font-weight-medium);letter-spacing: var(--letter-spacing-sm);margin-bottom: 30px;}
.latest .l-text {font-size: var(--font-size-xs-2);font-weight: var(--font-weight-light);letter-spacing: var(--letter-spacing-xs);line-height: var(--line-height-xs);margin-bottom: 50px;}


/* BANNER */
.banner {background: url(../images/main/banner.jpg) no-repeat center;background-size: cover;background-attachment: fixed;}
.banner .banner-text {font-size:var(--font-size-xxx);font-weight:var(--font-weight-light);text-transform:uppercase;text-align: center;color:var(--white-100);padding: 128px 0;}
.banner .banner-text .word-wrap {overflow: hidden;white-space: nowrap;}
.banner .banner-text .word-wrap .word {letter-spacing: -0.25em;display: inline-block;transform: translateY(100%);opacity: 0.0001;}

/* PRODUCT */
.product {position: relative;}
.product .p-navi-prev, .product .p-navi-next {cursor: pointer;font-size: var(--font-size-sm-2);font-weight: var(--font-weight-medium);letter-spacing: var(--letter-spacing-sm);}
.product .p-navi-bar {width: 1px;height: 18px;display: inline-block;border-top: 1px solid;background: var(--blueblack);opacity: 0.8;transform: rotate(36deg);margin: -3px 11px;}
.product .container-xxl {padding:0;}
.product .product-wrap {position: relative;width: calc(50% + 700px);left: calc(50% - 700px);}
.product .swiper-pagination {top:unset;bottom: 0;background-color: var(--gray-100);}
.product .product-swiper .swiper-wrapper {padding: 0;}
.product .swiper-pagination .swiper-pagination-progressbar-fill {background-color: var(--blueblack);}
.product .p-item {width: 340px;overflow: hidden;}
.product .p-link {height: 100%;display: block;}
.product .p-item .p-text-wrap {padding: 30px 15px; }
.product .p-item .p-title {font-size: var(--font-size-md-1);font-weight: var(--font-weight-medium);letter-spacing: var(--letter-spacing-md);}
.product .p-item .p-bar {margin-top: 10px;margin-bottom: 25px;background-color: var(--blueblack);width: 22px;height: 3px;display: block;}
.product .p-item .p-text {font-size: var(--font-size-xs-2);font-weight: var(--font-weight-light);letter-spacing: var(--letter-spacing-xs);line-height: var(--line-height-xs);margin-bottom: 15px;}
.product .p-item .p-date {font-size: var(--font-size-xs-2);font-weight: var(--font-weight-light);letter-spacing: var(--letter-spacing-xs);line-height: var(--line-height-xs);}
.product .p-navi-disabled {opacity: 0.4;}

/* BLOG */
.blog .blog-swiper {overflow-x: hidden;overflow-y: visible;}
.blog .blog-swiper .swiper-wrapper {padding: 0;}
.blog .b-navi-next {cursor: pointer;font-size: var(--font-size-sm-2);font-weight: var(--font-weight-medium);letter-spacing: var(--letter-spacing-sm);}
.blog .b-navi-prev {cursor: pointer;font-size: var(--font-size-sm-2);font-weight: var(--font-weight-medium);letter-spacing: var(--letter-spacing-sm);}
.blog .b-navi-disabled {opacity: 0.4;}
.blog .b-progress {width: 100%; max-width:70px; height:2px;position: relative;margin: 0 12px;}
.blog .b-progress .swiper-pagination {height: 2px;background-color: var(--gray-100);}
.blog .b-progress .swiper-pagination .swiper-pagination-progressbar-fill {background-color: var(--blueblack);}
.blog .b-item {box-sizing: border-box !important;border: 1px solid var(--gray-100);}
.blog .b-item .b-img-wrap {display: block;overflow: hidden;position: relative;}
.blog .b-item .b-img-wrap::after {content: "";display: block;padding-bottom: 70.55%;}
.blog .b-item .b-img-wrap img {transition: transform var(--expoOut) 1.6s;position: absolute;width: 100%;height: 100%;object-fit: cover;}
.blog .b-item .b-img-wrap .cate {position: absolute;bottom: 0px;right: 0;padding: 5px 11px;background: var(--blueblack);color: var(--white-100);font-size: var(--font-size-xs-1);}
.blog .b-item .b-text-wrap {padding: 40px 30px;}
.blog .b-item .b-text-wrap .b-title {font-size: var(--font-size-sm-3);font-weight: var(--font-weight-semibold);letter-spacing: var(--letter-spacing-sm);margin-bottom:30px;}
.blog .b-item .b-text-wrap .b-text {font-size: var(--font-size-xs-2);font-weight: var(--font-weight-normal);letter-spacing: var(--letter-spacing-xs);line-height: var(--line-height-xs);margin-bottom: 35px;height: 79px;}
.blog .b-item .b-text-wrap .date {position: absolute;bottom: 40px;right: 30px;font-size: var(--font-size-xs-1);color: var(--gray-300);opacity: 0.8;}
.blog .b-item .b-text-wrap .more {font-size: var(--font-size-xs-2);font-weight: var(--font-weight-normal);letter-spacing: var(--letter-spacing-xs);}
.blog .b-item .b-text-wrap .more::after {content: '\F144';font-family: bootstrap-icons !important;opacity: 0.0001;transform: scale(0.2) translate(10px, 10px);font-size: 12px;display: inline-block;transition: all var(--expoOut) 0.6s;}



/* NOTICE */
.notice .n-line-1 {border-top: 1px solid var(--blueblack);}
.notice .n-line-2 {border-top: 1px solid var(--gray-100);}
.notice .n-date {padding-left:40px;font-size: var(--font-size-sm-1);font-weight: var(--font-weight-light);letter-spacing: var(--letter-spacing-sm);}
.notice .n-title {font-size: var(--font-size-sm-3);font-weight: var(--font-weight-medium);letter-spacing: var(--letter-spacing-sm);cursor: pointer;}
.notice .n-text {font-size: var(--font-size-xs-2);font-weight: var(--font-weight-normal);letter-spacing: var(--letter-spacing-xs);display: none;line-height: 1.6;}
.notice .n-text.open {display: block;}
.notice .n-more {font-size: var(--font-size-xs-2);font-weight: var(--font-weight-medium);letter-spacing: var(--letter-spacing-xs);}

@media (hover: hover) {
    button.dot-btn:hover .dot {transform: scale(1) translateX(-7px);transition: all 400ms var(--expoOut);}
    button.dot-btn:hover .dot::before {opacity: 1;transform: translateX(0%);transition: all 400ms var(--expoOut);}
    button.dot-btn.bg:hover::before {transform: scale(1.12);transition: all .4s var(--expoOut);}
    button.dot-btn.bg:hover .text {transform: translateX(7px);transition: all .4s var(--expoOut);}
    .blog .b-item .b-link:hover img {transform: scale(1.08);transition: transform var(--expoOut) 1.6s;}
    .blog .b-item .b-link:hover .b-text-wrap .more::after {opacity: 1;transition: all var(--expoOut) 0.6s;transform: scale(1) translate(10px, 2px);}
}
@media (max-width: 1850px) {
    .main-slide > .container-xxl {width: 100%;max-width: 100%;}
    .main-slide .swiper-pagination {left: 4%;width:96%;}
    .main-slide .autoplay-progress {max-width: 90%;}
}
@media (max-width: 1670px) {
    .main-slide .main-swiper .swiper-slide .main-slide-txt-wrap {max-width: 80%;}
}

@media (max-width: 1440px) {
    .main-slide .autoplay-progress {width: calc(100% - 100px);max-width: unset;}
    .main-slide .autoplay-progress .autoplay-wrap {width: 200px;height:200px;}
    .product .product-wrap {width: calc(100% - 10px); left: 10px;}
    .product .container-xxl {padding: 0 10px;}
    .latest .l-text-wrap {padding: 20px 80px;}
    .latest .l-text {margin-bottom: 40px;}
}
@media (max-width: 1330px) {
}
@media (max-width: 1280px) {
    :root {
        --font-size-lg-1: 34px;
    }
    .p-item {width: 320px;}
}
@media (max-width: 1200px) {
    button.dot-btn.bg .dot {top: 11px;}
    button.dot-btn .dot {top:-4px;}
    button.dot-btn .dot::before {top: 5px;}
}

@media (max-width: 991px) {
    :root {
        --font-size-md-2: 20px;
        --font-size-lg-1: 32px;
        --font-size-xl-2: 42px;
        --font-size-xxx: 52px;
    }
    .main-slide-bg.img1 {background: url(../images/main/main-slide-mobile1.jpg) no-repeat center;}
    .main-slide-bg.img2 {background: url(../images/main/main-slide-mobile2.jpg) no-repeat center;}
    .main-slide-bg.img3 {background: url(../images/main/main-slide-mobile3.jpg) no-repeat center;}
    .main-slide-bg.img4 {background: url(../images/main/main-slide-mobile4.jpg) no-repeat center;}
    .main-slide .autoplay-progress .autoplay-wrap {width:180px;height:180px;}
    .about .row .col-4 {padding: 0 5px;}
    .space-1 {margin-bottom: 120px;}
    .space-2 {margin-bottom: 100px;}
    .latest .l-label {margin-bottom: 20px;}
    .latest  .l-text-wrap {padding: 20px 30px;}
    .m-title-1 {margin-bottom: 20px !important;}
    .about .mt-80 {margin-top: 50px !important;}
    .banner .banner-text {padding: 90px 0;}
    .notice .n-date {padding-left: 20px;}
    .product .p-item img {width: 100%;height: 300px;object-fit: cover;}
    .product .p-item {width: 250px;}
}
@media (max-width: 767px) {
    :root {
        --font-size-lg-1: 30px;
        --font-size-xxx: 42px;
    }
    .about .a-img-wrap {width: 40%;}
    .about .container-xxl > .row > .col-12 {display: flex;margin-bottom: 20px;}
    .about .a-text-wrap {width: 60%;padding: 20px 10px 0 30px;}
    .about .a-img-wrap img {width: 100%;object-fit: cover;height: 100%;}
    .latest {position: relative;}
    .latest > .container-xxl > .row {flex-direction: column-reverse;}
    .latest .l-img {width: 100%;height: 100%;max-height: 300px;display: flex;align-items: center;} 
    .latest .l-text-wrap {padding: 0 0 30px;margin: 0 12px;width: calc(100% - 24px);}
    .latest .l-text {margin-bottom: 10px;}
    .notice .mb-30, .blog .mb-30 {margin-top: 20px !important;}
    button.dot-btn.bg::before {background: none;}
    button.dot-btn.bg .text {transform: translateX(7px);}
    button.dot-btn.bg .dot {top: 5px;left: -6px;}
    button.dot-btn.bg {padding: 10px 0 10px 25px;}
    .notice .n-date {padding-left: 10px;}
    .main-slide .autoplay-progress .autoplay-wrap {width: 160px;height: 160px;}
    .product .p-item {width: 280px;}
    .blog .b-item .b-text-wrap .b-title {margin-bottom: 20px;}
    .blog .b-item .b-text-wrap .b-text {margin-bottom: 25px;}
}
@media (max-width: 576px) {
    :root {
        --font-size-xxx: 36px;
    }
    .b-progress {max-width: unset;}
    .blog, .notice {position: relative;}
    .blog .m-title-1, .blog .m-text-1 {text-align: left;}
    .blog .m-text-1 + .row > div {padding: 10px 20px;}
    .blog .b-item .b-text-wrap {padding: 30px 20px;}
    .blog .b-item .b-text-wrap .date {bottom: 30px; right: 20px;}
    .banner .banner-text {padding: 70px 0;}
    .latest .l-text-wrap {padding: 0 0 10px}
    .about .container-xxl > .row > .col-12 {display: block;}
    .about .a-img-wrap {width:100%;}
    .about .a-text-wrap {width:100%;padding:20px 10px 0 10px;}
    .main-slide .main-swiper .swiper-slide .main-slide-txt-wrap {width: 70%;}
    .main-slide .autoplay-progress {bottom:-95vh;width:calc(100% - 30px);}
    .main-slide .autoplay-progress .autoplay-wrap {width: 140px; height:140px;}
    .main-slide .autoplay-progress .bar {margin: 0 11px;}
    .product .p-item img {width: 100%;height: 220px;object-fit: cover;}
    .product .p-item {width: calc(100% - 10px);}
    .product .p-item .p-title {margin-bottom: 8px;}
    .product .p-item .p-bar {display: none;}
    .product .p-item .p-text-wrap {padding: 20px 5px;}
    .product .p-item .p-text {margin-bottom: 10px;}
    .blog .b-item .b-text-wrap .b-title {margin-bottom: 10px;}
    .blog .b-item .b-text-wrap .b-text.ellipsis-3 {-webkit-line-clamp: 2;height: 50px;}
}
@media (max-width: 480px) {
    :root {
        --font-size-xxx: 32px;
    }
    .notice .n-date {padding-left:0;}
    button.dot-btn {padding-left: 32px;}
}