@charset "utf-8";
/*
 * Name     : main.css
 * Version  : 1.10
 * Author   : onepixel studio
---------------------------------------------------
*/

/* 메인페이지 공통 */
#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 .space-1 {margin-bottom: 240px;}
#main .space-2 {margin-bottom: 180px;}

/* 메인 슬라이드 */
#main {margin-top: 90px;}
#main .main-slide {height: 660px;background-color: var(--white-200);}
#main .main-slide .row {height: 100%;}
#main .main-slide .main-text {position: relative;}

#main .main-slide .main-text .text-box {opacity:0;visibility: hidden;position: absolute;right: 0;top: 205px;width: 100%;max-width: 480px;}
#main .main-slide .main-text .text-box .hidden-box.box01 video {position: absolute; display: block; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; pointer-events: none; z-index: -1}
#main .main-slide .main-text .text-box .btn-line {opacity: 0;}
#main .main-slide .main-text .text-box .hidden-box {transition: all 0.8s;}
#main .main-slide .main-text .text-box .hidden-box.box01 div,
#main .main-slide .main-text .text-box .hidden-box.box02 div {transform: translateY(118%);opacity: 0;}
#main .main-slide .main-text .text-box .hidden-box.box03 div {transform: translateX(3%);opacity: 0;}
#main .main-slide .main-text .text-box.on {opacity: 1;visibility: visible;}
#main .main-slide .main-text .text-box.on .btn-line {opacity: 1;display:block;z-index: 1;transition: opacity 1.5s cubic-bezier(0.42,0,0.14,1.01) 1.5s;}
#main .main-slide .main-text .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-text .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-text .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-text .text-box .hidden-box {overflow: hidden;}
#main .main-slide .main-text .text-box .btn-line {text-align:left;width:var(--margin-space);border: 1px solid var(--main);border-radius: 30px;padding: 8px 0 8px 20px;margin-top: var(--margin-top-50);}
#main .main-slide .main-text .text-box .btn-line i.bi {padding: 0 0 3px 13px;line-height: 0;transition: all 0.3s;}
#main .main-slide .main-text .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-300);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: 1;left:auto;right: 186px;bottom: 44px;top: auto;color:var(--gray-300)}
#main .main-slide .main-text .swiper-button-next {z-index: 1;left:auto;right: 44px;bottom: 44px;top: auto;color:var(--gray-300)}
#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 {height: 100%;}
#main .main-slide .main-swiper .main-slide-img {height: 100%;object-fit: cover;width: 100%;}
#main .main-slide .main-swiper .main-slide-video {position: absolute; display: block; top: 0; left: 0; width: 100% !important; height: 100% !important; object-fit: cover; pointer-events: none; z-index: 1}

/* 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%}
#main .main-section.business .bg-gray {width: 1280px;height: 440px;background: var(--white-200);position: absolute;top: 28px;left: 0;z-index: -1;}

/* 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.box3 {margin-top: 115px;width: 28.5%;max-width: 500px;position:absolute;right: 0;top: 620px;}
#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 .design-img .video-container {text-align: center;}
#main .main-section.design .design-box .hero-video {max-width: 100%; height: auto;}

#main .main-section.design .design-box .font-gray14 {margin-top: var(--margin-top-30)}

/* section - news */
#main .main-section.news {position:relative;}
#main .main-section.news .news-text {position: relative;width:320px;height:510px;}
#main .main-section.news .news-slide {overflow: hidden;position: absolute;top:0;right: 0;max-width: 1550px;}
#main .main-section.news .news-slide .news-swiper {height: 510px;}
#main .main-section.news .news-slide .news-swiper .swiper-slide {width: 270px;}
#main .main-section.news .news-slide .news-swiper .swiper-slide a {height: 100%;display: block;}
#main .main-section.news .news-slide .news-swiper .swiper-slide a:hover {text-decoration: none;}
#main .main-section.news .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 .news-slide .swiper-scrollbar {height: 3px;left:0;width:99%;bottom:0;} 
#main .main-section.news .news-slide .swiper-scrollbar .swiper-scrollbar-drag {background-color: var(--gray-400);}


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




/* section - event */
#main .main-section.event {position: relative;}
#main .main-section.event .row > div {min-height: 420px;}
#main .main-section.event .event-left {position: relative;}
#main .main-section.event .preview-box {border-radius: 8px;overflow: hidden;}
#main .main-section.event .event-slide-thumb {position: absolute;bottom: 90px;width: calc(100% - 30px);}
#main .main-section.event .event-slide-thumb .swiper-slide {height:78px;overflow: hidden;border-radius: 8px;opacity: 0.6;cursor: pointer;width:31%;}
#main .main-section.event .event-slide-thumb .swiper-slide.swiper-slide-thumb-active {opacity: 1;}
#main .main-section.event .event-slide-thumb .swiper-slide .thumb-img {width: 100%;height:100%}
#main .main-section.event .event-swiper {height: 100%;}
#main .main-section.event .event-swiper .swiper-slide {background: #fff;}
#main .main-section.event .event-swiper .swiper-slide a {display:block;width: 100%;height:100%;position: relative;overflow: hidden;border-radius: 8px;}
#main .main-section.event .event-swiper .swiper-slide a:hover {text-decoration: none;}
#main .main-section.event .event-swiper .swiper-slide a .slide-img {width: 100%;height: 100%;object-fit: cover;}
#main .main-section.event .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 .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 .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 .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 .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 .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 - insta */
#main .main-section.insta {background: url('../images/main/section-contact.jpg')no-repeat center;background-size : cover;background-attachment : fixed;padding-top:70px;padding-bottom:70px;margin-top:0px;}
#main .main-section.insta .container-xl {padding-top:70px;padding-bottom:270px;height:100%;position: relative;}
#main .main-section.insta .contact-txt {float: left;width: 300px;}
#main .main-section.insta .contact-sns {position: absolute;top: 82px;right: 0;z-index: 10;}
#main .main-section.insta .contact-sns .sns-icon {padding: 10px;font-size: 28px;color: var(--white-100);float: left;line-height: 0;}
#main .main-section.insta .contact-sns .sns-icon img {width: 29px;}
#main .main-section.inst .section .section-heading {text-align: center}
#main .main-section.inst.section .section-heading h4 {font-size: 20px; font-weight: 800; color: #3e78ff; line-height: 1.1; margin-bottom: 24px}
#main .main-section.inst.section .section-heading h2 {font-size: 30px; font-weight: 700; color: #000; letter-spacing: -0.02em; line-height: 1.48}
#main .main-section.inst.section .col-controller {font-size: 0}
#main .main-section.inst.section .col-controller button {position: relative; display: inline-block; font-size: 32px; color: #adb5bd; line-height: 1; padding: 0 10px; border: 0; background-color: transparent; outline: 0; transition: color .3s}
#main .main-section.inst.section .col-controller button + button::before {content: ''; position: absolute; top: 50%; left: -6px; display: block; width: 2px; height: 16px; margin: 0 6px; background-color: #e5e5e5; transform: translateY(-50%)}
#main .main-section.inst.section .col-controller button:hover {color: #333}
#main .main-section.inst.section .col-controller button.swiper-button-disabled, .section .col-controller button:disabled {color: #dee2e6; cursor: not-allowed}
#main .main-section.inst.section .col-controller .button-more-view {display: inline-flex; width: 48px; height: 48px; margin-left: 10px; font-size: 28px; color: #999; border: 2px solid #dee2e6; border-radius: 50%; align-items: center; justify-content: center; vertical-align: middle; transition: color .3s, border-color .3s, box-shadow .3s}
#main .main-section.inst.section .col-controller .button-more-view:hover {color: #666; border-color: #666; box-shadow: 2px 2px 4px rgba(0,0,0,.08)}



/* section - contact */
#main .main-section.contact {background: url('../images/main/section-contact.jpg')no-repeat center;background-size : cover;background-attachment : fixed;height:800px;}
#main .main-section.contact .container-xl {padding-top:70px;padding-bottom:70px;height:100%;position: relative;}
#main .main-section.contact .contact-txt {float: left;width: 300px;}
#main .main-section.contact .contact-sns {position: absolute;top: 82px;right: 0;z-index: 10;}
#main .main-section.contact .contact-sns .sns-icon {padding: 10px;font-size: 28px;color: var(--white-100);float: left;line-height: 0;}
#main .main-section.contact .contact-sns .sns-icon img {width: 29px;}





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

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


	    #main .main-section.news2 .news-text,
    #main .main-section.news2 .news-slide .news-swiper {height: 485px;}
    #main .main-section.news2 .news-slide .news-swiper .swiper-slide {width: 250px;}
    #main .main-slide .main-text .swiper-button-prev {right: 175px;}
    #main .main-section.news2 .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-text .text-box .btn-line {width: 150px;}
    #main .main-section.business .row {margin-top:40px !important}
    #main .main-section.news .news-text {width:220px;height: 400px;}
    #main .main-section.news .news-slide {width: calc(100% - 280px) !important}
    #main .main-section.news .news-slide .news-swiper {height: 400px;}
    #main .main-section.news .news-slide .news-swiper .swiper-slide {width: 200px;}
    #main .main-section.event .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 .news-slide .news-swiper .swiper-slide .news-slide-img {height: 240px;}

    #main .main-section.news2 .news-text {width:220px;height: 400px;}
    #main .main-section.news2 .news-slide {width: calc(100% - 280px) !important}
    #main .main-section.news2 .news-slide .news-swiper {height: 400px;}
    #main .main-section.news2 .news-slide .news-swiper .swiper-slide {width: 200px;}
  
    #main .main-section.news2 .news-slide .news-swiper .swiper-slide .news-slide-img {height: 240px;}



}

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

    #main .main-section.news2 .news-text {width:100%;height: unset;}
    #main .main-section.news2 .news-slide2 {position: static;width: 100% !important;}
    #main .main-section.news2 .news-slide2 .swiper-scrollbar {position: static;}
    #main .main-section.news2 .news-text {margin-bottom: 30px;}
    #main .main-section.news2 .news-slide2 .news-swiper2 .swiper-slide2 {width: 160px;}
    #main .main-section.news2 .news-slide2 .news-swiper2 {height: 360px;}
    #main .main-section.news2 .news-slide2 .news-swiper2 .swiper-slide2 .news-slide-img2 {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;}
    #main .main-slide {height: 460px;}
    #main .main-slide .main-text .font-main-slide {padding: 0 46px 30px 0;}
    #main .main-slide .main-text .font-main-slide span {padding: 0 6px;}
    #main .main-slide .main-text .text-box {top:110px;}
    #main .main-slide .main-text .text-box .btn-line {margin-top:30px;width:155px;padding: 6px 0 6px 18px;}
    #main .main-slide .main-text .swiper-button-prev {bottom: 20px;right: 133px;}
    #main .main-slide .main-text .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 .event-slide-thumb {margin-top: 25px;}
    #main .main-section.event .event-slide-thumb .swiper-slide {width:31%}
    #main .main-section.event .event-swiper .swiper-slide.swiper-slide-active a .hover-text {bottom:20px;left:20px;}
    #main .main-section.event .event-swiper .swiper-slide a .hover-text .font-event-s {max-width: calc(100% - 20px);}
    #main .main-section.contact .contact-txt {width: 100%;}
    
}



 #main .main-section.notice {font-size: 16px}
    

@media (max-width: 991px) {

  #main .main-section.notice .row-notice .col-title h3 {font-size: 20px}

    .space-1 {margin-bottom: 20px;}
    .space-2 {margin-bottom: 10px;}

}


@media (max-width: 767px) {
        #main .main-section.notice .row-notice .col-notice-item {max-width: calc(100% - 280px)}
}

@media (max-width: 575px) {
    #main .main-section .notice .row-notice .col-title {margin-bottom: 16px}
    #main .main-section .notice .row-notice .col-title h3 {font-size: 18px}
    #main .main-section .notice .row-notice .col-notice-item {max-width: inherit}
    #main .main-section .notice .row-notice .col-notice-item .notice-swiper .swiper-slide a {font-size: 15px; max-width: calc(100% - 90px)}
    #main .main-section .notice .row-notice .col-notice-item .notice-swiper .swiper-slide .date {font-size: 13px; width: 80px;display: inline-block;}
    #main .main-section .notice .row-notice .col-controller {margin-top: 20px}

	    .space-1 {margin-bottom: 30px;}
    .space-2 {margin-bottom: 20px;}
}




/* NOTICE */
#main .main-section .notice {margin-bottom: 20px;z-index: 10;}

.m-title-1 {font-size:var(--font-size-xl-2);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;}

/* 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);}


button.dot-btn {padding-right:5px;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 span{padding-right:5px;}
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 {padding-right:5px; position: relative;color: var(--blueblack);transform: translateX(0);transition: all .6s var(--expoOut);will-change: transform;}







@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);}
    
}






/* notice */
#main .main-section.notice .notice-content .row {
    background: var(--white-200);
    border-radius: 8px;
    overflow: hidden;
    padding: 40px 30px 30px;
    margin: 0;
    margin-bottom: 20px;
}

#main .main-section.notice .notice-content .row .notice-text {
    font-size: var(--font-size-sm-1);
    display: none;
    padding-top: 30px;
}

#main .main-section.notice .notice-content .row .notice-text.open {
    display: -webkit-box;
}

#main .main-section.notice .notice-content .row .notice-title {
    font-size: var(--font-size-sm-3);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-sm-2);
    word-break: break-all;
    cursor: pointer;
}

#main .main-section.notice .notice-content .row .notice-date {
    font-size: var(--font-size-sm-1);
    font-weight: var(--font-weight-light);
    letter-spacing: var(--letter-spacing-sm);
}

#main .main-section.notice .notice-content .row .row .notice-more {
    display: block;
    height: 100%;
    width: 100%;
}




/* notice */
#main .main-section .notice .notice-content .row {
    background: var(--white-200);
    border-radius: 8px;
    overflow: hidden;
    padding: 40px 30px 30px;
    margin: 0;
    margin-bottom: 20px;
}

#main .main-section.notice .notice-content .row .notice-text {
    font-size: var(--font-size-sm-1);
    display: none;
    padding-top: 30px;
}

.notice .notice-content .row .notice-text.open {
    display: -webkit-box;
}

.notice .notice-content .row .notice-title {
    font-size: var(--font-size-sm-3);
    font-weight: var(--font-weight-medium);
    letter-spacing: var(--letter-spacing-sm-2);
    word-break: break-all;
    cursor: pointer;
}

.notice .notice-content .row .notice-date {
    font-size: var(--font-size-sm-1);
    font-weight: var(--font-weight-light);
    letter-spacing: var(--letter-spacing-sm);
}

.notice .notice-content .row .notice-more {
    display: block;
    height: 100%;
    width: 100%;
}



@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) {

    .notice .n-date {padding-left: 20px;}

}
@media (max-width: 767px) {

    .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;}

}

@media (max-width: 480px) {

    .notice .n-date {padding-left:0;}
    button.dot-btn {padding-left: 32px;}
}




/* PRODUCT */
.product {position: relative;margin-top: 100px;}
.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) {

}
@media (max-width: 1670px) {
   
}

@media (max-width: 1440px) {

    .product .product-wrap {width: calc(100% - 10px); left: 10px;}
    .product .container-xxl {padding: 0 10px;}

}
@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;
    }
    .m-title-1 {margin-bottom: 20px !important;}
    .space-1 {margin-bottom: 120px;}
    .space-2 {margin-bottom: 100px;}

    .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;
    }

    .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;}

    .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;}

    .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;}
}


/* main common */
.space-1 {margin-bottom: 240px;}
.space-2 {margin-bottom: 180px;}
.m-title-1 {font-size:var(--font-size-xl-2);font-weight:var(--font-weight-bold);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;}


/* ------------------------------
 * main - notice section
------------------------------ */
#main .main-notice-section .col-notice .col-inner {padding: 36px; border: 1px solid #dee2e6; transition: border-color .25s, box-shadow .25s}
#main .main-notice-section .col-notice .col-inner:hover {border-color: transparent; box-shadow: 10px 10px 20px 2px rgba(0,0,0,.08)}
#main .main-notice-section .col-notice .col-inner .category {display: inline-block; font-size: 14px; font-weight: 700; padding-bottom: 5px; border-bottom: 2px solid #fa5c5c}
#main .main-notice-section .col-notice .col-inner .category a {color: #fa5c5c}
#main .main-notice-section .col-notice .col-inner h3 {display: -webkit-box; font-size: 19px; font-weight: 500; line-height: 1.5; margin: 20px 0; height: 57px; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical}
#main .main-notice-section .col-notice .col-inner h3 a {color: #333; transition: color .25s}
#main .main-notice-section .col-notice .col-inner h3 a:hover {color: #fa5c5c}
#main .main-notice-section .col-notice .col-inner p {display: -webkit-box; font-size: 15px; color: #777; line-height: 1.8; height: 54px; text-overflow: ellipsis; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical}
#main .main-notice-section .col-notice .col-inner .date {display: inline-block; font-size: 14px; color: #999; letter-spacing: .1em; margin-top: 30px}



/* *********************************************
 * Product
 ******************************************** */
/* 페이지 타입 */
#main .product-list-page .product-type-heading {font-size: 19px; font-weight: 600; color: var(--main); letter-spacing: -0.02em; margin-bottom: 20px}
#main .product-list-page .masonry-group .grid-sizer, .product-list-page .masonry-group .gallery-item {width: calc(33.3% - 20px)}
#main .product-list-page .masonry-group .2grid-sizer, .product-list-page .masonry-group .gallery-item {width: calc(33.3% - 20px)}
#main .product-list-page .gallery-item {margin-bottom: 40px}
#main .product-list-page .gallery-item a {display: block; height: 100%}
#main .product-list-page .gallery-item figure {position: relative; overflow: hidden}
#main .product-list-page .gallery-item figure img {display: block; width: 100%; transition: transform .5s}
#main .product-list-page .gallery-item a:hover figure img {transform: scale(1.1)}
#main .product-list-page .gallery-item .category {display: block; font-size: 14px; font-weight: 600; color: var(--primary); margin-bottom: 4px}
#main .product-list-page .gallery-item h5 {font-size: 19px; font-weight: 600; color: var(--main); letter-spacing: -0.02em; line-height: 1.48}
#main .product-list-page .gallery-item p {color: var(--gray-300); letter-spacing: -0.02em; line-height: 1.64; margin-top: 16px}
#main .product-list-page .gallery-item .gallery-card {height: 100%; background-color: var(--white-100); overflow: hidden}
#main .product-list-page .gallery-item .gallery-card.bordered {border: 1px solid #e9e9e9}
#main .product-list-page .gallery-item .gallery-card.rounded {border-radius: 20px !important}
#main .product-list-page .gallery-item .gallery-card figure {margin-bottom: 0}
#main .product-list-page .gallery-item .gallery-card .card-content {padding: 28px}
#main .product-list-page .video-item {margin-bottom: 60px}
#main .product-list-page .video-item a {display: block; height: 100%}
#main .product-list-page .video-item figure {position: relative; margin-bottom: 24px; overflow: hidden}
/* #main .product-list-page .video-item figure::before {content: ''; position: absolute; display: block; bottom: 0; left: 0; right: 0; height: 50%; background-image: linear-gradient(to top, rgba(0,0,0,.56), transparent); z-index: 1; transition: height .3s ease-in-out} */
#main .product-list-page .video-item figure img {display: block; width: 100%; transition: transform .5s}
#main .product-list-page .video-item figure .play-icon {position: absolute; display: inline-flex; top: 50%; left: 50%; width: 80px; height: 80px; font-size: 50px; color: var(--white-100); line-height: 1; border-radius: 50%; background-color: rgba(33,33,33,.6); backdrop-filter: blur(3px); align-items: center; justify-content: center; transform: translate(-50%,-50%); transition: background-color .3s; z-index: 2}
/* #main .product-list-page .video-item figure figcaption {position: absolute; bottom: 0; left: 0; right: 0; padding: 28px 32px; z-index: 10} */
#main .product-list-page .video-item .info h4 {font-size: 21px; font-weight: 600; color: var(--main); letter-spacing: -0.02em}
#main .product-list-page .video-item .info p {font-weight: 500; color: var(--gray-300); letter-spacing: -0.02em; margin-top: 10px}
#main .product-list-page .video-item a:hover figure img {transform: scale(1.1)}
/* #main .product-list-page .video-item a:hover figure::before {height: 80%} */
#main .product-list-page .video-item a:hover figure .play-icon {background-color: rgba(0,0,0,.6)}