/*design_4 시작*/
/* 텍스트 크기는 이 변수만 바꿔 반응형을 조정한다.
   .gw-bottom-container > .gw-main-visual-text02 처럼 더 구체적인 선택자가 있어
   미디어쿼리에서 폰트를 직접 덮어쓰면 우선순위 싸움이 난다. */
#gw-theme-main-visual {--gw-visual-t01:24px;--gw-visual-t02:64px;--gw-visual-t03:20px;--gw-visual-t03-w:480px;--gw-visual-gap:16px;--gw-visual-gap-lg:32px;
    position: relative;z-index: 99;overflow: hidden;width: 100%;height: 100vh;}
#gw-theme-main-visual .gw-visual {position: relative;width: 100%;height:100%;overflow: hidden;}
#gw-theme-main-visual .gw-visual .swiper-wrapper{width:100%;height:100%;}
#gw-theme-main-visual .gw-visual .swiper-slide {overflow: hidden;position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;visibility: hidden;transition: opacity 1.2s ease-in-out, visibility 1.2s ease-in-out;display: block;}
#gw-theme-main-visual .gw-visual .swiper-slide.swiper-slide-active {opacity: 1 !important;visibility: visible !important;z-index: 1;}
#gw-theme-main-visual .gw-visual .swiper-slide .bg {overflow: hidden;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;transform: scale(1.1);transition: transform 1.2s ease-in-out;}
#gw-theme-main-visual .gw-visual .swiper-slide .bg > img{object-fit:cover;width:100%;height:100%;}
#gw-theme-main-visual .gw-visual .swiper-slide.swiper-slide-active .bg {transform: scale(1);}
#gw-theme-main-visual .gw-visual .swiper-slide .slide-inner{position: absolute;left: 0;top: 0;z-index: 100;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;}
/* 헤더(#hd)가 position:fixed 로 배너 위를 덮으므로, 헤더 아래 영역만 박스로 잡고
   그 안에서 중앙 정렬한다. top:50% 로 두면 헤더 높이의 절반만큼 아래로 치우쳐 보인다. */
#gw-theme-main-visual .gw-main-visual-text-con{position:absolute;left:0;top:var(--gw-header-h,100px);bottom:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--gw-visual-gap);width:100%;color:#fff;text-align:center;}
#gw-theme-main-visual .gw-main-visual-text-con .gw-main-visual-text01{position:relative;font-size:var(--gw-visual-t01);font-family: 'NEXON Lv1 Gothic OTF', sans-serif;font-weight: 700;}
/* 한글은 기본 줄바꿈이 어절을 쪼갠다. 좁은 화면에서 "품질"이 "품 / 질"로 갈라지는 것을 막는다 */
#gw-theme-main-visual .gw-main-visual-text-con .gw-main-visual-text02{font-size:var(--gw-visual-t02);font-family:'NEXON Lv1 Gothic OTF', sans-serif;font-weight:700;color:#fff;word-break:keep-all;}
#gw-theme-main-visual .gw-main-visual-text-con .gw-main-visual-text03{width:var(--gw-visual-t03-w);max-width:100%;font-size:var(--gw-visual-t03);font-weight:500;color:#fff;word-break:keep-all;}
#gw-theme-main-visual .gw-main-visual-text-con .gw-bottom-container > div{color:#fff;}
#gw-theme-main-visual #gw-theme-main-visual .gw-visual .swiper-slide.active .line:after{transform:scaleX(1);}
#gw-theme-main-visual .gw-main-visual-text01{overflow:hidden;}
#gw-theme-main-visual .gw-bottom-container{display:flex;flex-direction:column;align-items:center;gap:var(--gw-visual-gap-lg);width:100%;min-height: 48px;}
#gw-theme-main-visual .gw-bottom-container>div{overflow:hidden;opacity:0;transform:translateY(-100%);}
#gw-theme-main-visual .gw-bottom-container>.gw-main-visual-text02{font-size:var(--gw-visual-t02);font-family:'NEXON Lv1 Gothic OTF', sans-serif;font-weight:700;color:#fff;word-break:keep-all;}
#gw-theme-main-visual .gw-bottom-container>.gw-main-visual-text03{width:var(--gw-visual-t03-w);max-width:100%;font-size:var(--gw-visual-t03);font-weight:500;color:#fff;box-sizing:border-box;word-break:keep-all;}
#gw-theme-main-visual .gw-main-visual-text01 span{display:inline-block;transform:translateY(100%);}
#gw-theme-main-visual .swiper-slide.active .gw-main-visual-text01 span{transform:translateY(0);}
#gw-theme-main-visual .swiper-slide.active .gw-bottom-container > div{opacity:1;transform:translateY(0);transition:all 0.6s 1.2s;}
#gw-theme-main-visual .gw-main-visual-text01 span{transition:all 0.6s ease;}
#gw-theme-main-visual .gw-bottom-container > div{transition:all 0.6s ease 0.2s;}
#gw-theme-main-visual .gw-slide-btn-container {overflow:hidden;width: 500px;height:59px;place-content: center;transition:all 0.6s ease 0.2s;}
#gw-theme-main-visual .gw-slide-btn-container > .gw-btn01 {max-width: 220px;transform:translateY(100%);opacity:0;}
#gw-theme-main-visual .swiper-slide.active .gw-btn01{opacity:1;transform:translateY(0);transition:all 0.6s 1.2s;}
#gw-theme-main-visual .gw-slide-btn-container .gw-btn01 {padding: 15px 0;display: inline-block;position: relative;width:100%;height:auto;line-height:initial;z-index: 1;overflow: hidden;border: 3px solid rgba(255,255,255,0.3);color: #fff;background-color: transparent;text-align: center;text-transform: uppercase;font-family:"NotoKr_B", sans-serif;transition:all .3s;}
#gw-theme-main-visual .gw-slide-btn-container .gw-btn01:before {content: '';width: 0;height: 500%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) rotate(45deg);background: #000;transition: .5s ease;display: block;z-index: -1;}
#gw-theme-main-visual .gw-slide-btn-container .gw-btn01:hover::before {width: 150%;}
#gw-theme-main-visual .gw-slide-btn-container .gw-btn01:hover{color: #fff;border: 3px solid #000;}
#gw-theme-main-visual .gw-main-arrow-container{position: absolute;top: 44.5%;left:  50%;transform:translate(-50%,-50%);width: 100%;z-index: 100;}
#gw-theme-main-visual .gw-main-visual-arrow{display: flex;justify-content: space-between;align-items: center;}
#gw-theme-main-visual .gw-button-next{transform:rotateY(180deg);}
#gw-theme-main-visual .gw-progress-container {display:none;position: relative;top: -1px;width: 100%;height: 1px;background: rgba(255, 255, 255, 0.2);}
#gw-theme-main-visual .gw-progress-bar { position: absolute; top: 0; left: 0; transform: translateX(-100%); width: 20%;height: 1px;background: #fff;animation: progress 6s linear 1;}
@keyframes progress {
    from {left: 0; transform: translateX(-100%);}
    to {left: 100%;transform: translateX(100%);}
}
#gw-theme-main-visual .gw-slide-bottom-container{position: relative;}
#gw-theme-main-visual .swiper-pagination{position:absolute;top:75% !important;bottom:auto !important;left:50%;transform:translate(-50%,-50%);z-index: 1;cursor:pointer;}
#gw-theme-main-visual .swiper-pagination span{margin:0 9px;display: inline-block;position:relative;opacity:1;width:10px;height:10px;background:0;border:1px solid #fff;border-radius:50%;text-shadow:0 2px 3px rgba(0,0,0,0.1);}
#gw-theme-main-visual .swiper-pagination span.swiper-pagination-bullet-active{width:20px;border-radius:5px;background:#fff;}
#gw-theme-main-visual .scroll{display:none;position:absolute;left:50%;bottom:40px;z-index:10;transform:translateX(-50%);width:90px;height:90px;align-items:center;justify-content:center;text-align:center;color: #fff;}
#gw-theme-main-visual .scroll .gw-text{position:absolute;left:0;top:0;width:100%;height:100%;background:url(../../../img/gw-scroll-text.png) no-repeat;animation:scroll 10s infinite linear;}
@keyframes scroll{
    0%{transform:rotate(0);}
    100%{transform:rotate(360deg);}
}


/*배너 이미지가 없을 경우------------------------------------------------------------------------------------------------------------------ */
#gw-theme-main-visual .gw-slider-container {height: 100%;}
#gw-theme-main-visual .gw-slider {height: 100%;}
#gw-theme-main-visual .gw-no-banner {width:100%;height: 100%;background: #ddd;  align-items: center;place-content: center;}
#gw-theme-main-visual .gw-no-banner .gw-title{font-size:var(--main-title03);}
#gw-theme-main-visual .gw-no-banner .gw-btn01{max-width: 300px;}

/* 랩탑 */
@media screen and (max-width:1440px) {
    #gw-theme-main-visual{--gw-visual-t02:56px;--gw-visual-t03:18px;}
    #gw-theme-main-visual .gw-main-arrow-container{top:43.5%;}
}

/* 작은 랩탑. 이 지점부터 헤더가 60px 이고 좌우 화살표가 사라진다 */
@media screen and (max-width:1280px) {
    #gw-theme-main-visual{--gw-visual-t01:22px;--gw-visual-t02:48px;--gw-visual-t03:17px;--gw-visual-gap-lg:28px;}
    #gw-theme-main-visual .gw-main-visual-arrow{display: none;}
    #gw-theme-main-visual .gw-slide-btn-container{height: auto;}
}

/* 태블릿 */
@media screen and (max-width:1024px) {
    #gw-theme-main-visual{--gw-visual-t02:40px;--gw-visual-t03-w:100%;}
    /* 모바일 브라우저의 주소창 높낮이로 100vh 가 튀는 것을 막는다 */
    #gw-theme-main-visual{height:100vh;height:100svh;}
    #gw-theme-main-visual .gw-main-visual-text-con > *:not(.gw-progress-container){padding:0 40px;box-sizing:border-box;}
}

@media screen and (max-width:768px) {
    #gw-theme-main-visual{--gw-visual-t01:20px;--gw-visual-t02:34px;--gw-visual-t03:16px;--gw-visual-gap:12px;--gw-visual-gap-lg:24px;}
    #gw-theme-main-visual .gw-slide-btn-container{width:100%;}
}

@media screen and (max-width:576px) {
    #gw-theme-main-visual{--gw-visual-t01:18px;--gw-visual-t02:28px;--gw-visual-t03:15px;--gw-visual-gap-lg:20px;}
    #gw-theme-main-visual .gw-main-visual-text-con > *:not(.gw-progress-container) {padding: 0 20px;}
    #gw-theme-main-visual .scroll{display: none;}
    #gw-theme-main-visual .gw-slide-btn-container .gw-btn01 {max-width: 100%;width: 100%;padding: 12px 0;height: auto;line-height: inherit;}
    #gw-theme-main-visual .swiper-pagination{top:90% !important;}
	#gw-theme-main-visual .gw-no-banner .gw-title{padding:40px 20px 20px 20px;}
}

@media screen and (max-width:375px) {
    #gw-theme-main-visual{--gw-visual-t01:16px;--gw-visual-t02:24px;--gw-visual-t03:14px;--gw-visual-gap:10px;--gw-visual-gap-lg:16px;}
}

@media screen and (max-width:320px) {
    #gw-theme-main-visual .swiper-pagination{top:88% !important;}
}
/*design_4 끝*/