@charset "utf-8";
/* ===================================================== */
/* 메인-공통 */
.body-main #skip-nav::before {content: ''; position: fixed; width: 100%; height: 100%; left: 0; top: 0; pointer-events: none; background-color: #fff; z-index: 9999; animation: fade-out .7s ease-in .2s both;}
/* 메인-공통 */
/* ===================================================== */
 

/* ===================================================== */
/* 메인-비주얼 */
.visual {position: relative; overflow: hidden; display: flex; height: 100vh; height: 100svh; min-height: 60rem;  flex-direction: column; padding-top: var(--header-height);}

/* 비주얼 슬라이드 */
.visual-slick {flex-grow: 1;}
.visual-slick .slick-list {height: 100%;}
.visual-slick .slick-track {height: 100%; display: flex;}
.visual-slide-img { display: block; width: 100%; height: 100%; background: #222 no-repeat center/cover; transform: scale(1.1); transition: 4s linear;} 
.visual-01 {background-image: url(../images/main/main_visual01-2.jpg);}
.visual-02 {background-image: url(../images/main/main_visual02-2.jpg);}
.visual-03 {background-image: url(../images/main/main_visual03-2.jpg);}
.visual-04 {background-image: url(../images/main/main_visual04.jpg);}
.visual-05 {background-image: url(../images/main/main_visual05.jpg);}
.visual-on .visual-slide-img { transform: scale(1.01); } 
.visual-slide-txt {position: absolute; top: 50%; left: 0; z-index: 10; width: 100%; transform: translateY(-50%); padding: 0 max(calc(var(--outer-padding) + 5em), var(--inner-padding)); font-size: min(1.1vh, 10px); color: #666;}
.visual-slide-txt h3 {font-size: 8em; font-weight: 700; color: #333;letter-spacing: -0.03em;}
.visual-slide-txt h3 span { font-size: 0.4em; letter-spacing: -0.015em; font-weight: 500;color: #666;}
.visual-slide-txt p {font-size: calc(1.6em + 5px); font-weight: 500;}

/* 페이지네이션 */
.visual-pager {position: absolute; left: var(--outer-padding); top: 0; height: 100%; color: #fff; display: flex; flex-direction: column; justify-content: center; z-index: 50; pointer-events: none;}
.visual-pager::before,
.visual-pager::after {width: 1px; content: ''; background: var(--color-main-a35); flex-grow: 1;}
.visual-pager-nav { display: flex; flex-direction: column; font-size: 0; width: 39px; transform: translateX(-19px); pointer-events: all;} 
.visual-pager-nav::after {content: ''; width: 1px; height: 25px; background-color: var(--color-main-a35); order: 50;align-self: center;}
/* 페이지네이션 애로우 */
.visual-pager-nav .slick-arrow {height: 12px; display: flex; align-items: center; }
.visual-pager-nav .slick-arrow::before {content: ''; height: 40px; background: url(../images/common/chevron_v19.svg) no-repeat center/calc(50% - 1px); width: 100%; transition: .3s;}
.visual-pager-nav .slick-next {transform: scaleY(-1); order: 10;}
/* 페이지네이션 도트 */
.visual-pager-nav .slick-dots {padding: 12px 0; } 
.visual-pager-nav .slick-dots button { display: flex; padding: 5px 0; justify-content: center; width: 100%;} 
.visual-pager-nav .slick-dots button::before { width: 1px; height: 22px; background: var(--color-main-a35) linear-gradient(var(--color-main), var(--color-main)) no-repeat center bottom/100% 0; content: ''; transition: background-size .3s;} 
.visual-pager-nav .slick-dots li.slick-active button::before { background-size: 100% 100%; background-position: center top;} 
/* 페이지네이션 숫자 */
.visual-pager-num {writing-mode: vertical-lr; font-size: 15px; font-weight: 700; display: flex; align-items: center; white-space: nowrap; transform: translateX(-19px); padding: 15px 0; color: #555;} 
.visual-pager-num .num-item {height: 1.5em; display: inline-block;}
.visual-pager-num .num-current {color: var(--color-main);}
.visual-pager-num b {padding-bottom: 0.4em;}

/* 하단 제품 링크 */
.visual-bottom-prod {display: flex; color: #fff; text-align: center; font-size: 24px; font-weight: 600; line-height: 1.15;}
.visual-bottom-prod li {flex: 1; --item-color: var(--color-violet);}
.visual-bottom-prod li a {height: 100%; display: flex; align-items: center; justify-content: center; background: #fff linear-gradient(var(--item-color), var(--item-color)) no-repeat center -1px/calc(100% + 2px) calc(100% + 2px); padding: calc(0.6em + 2vh) 0; transition: background-size .3s, color .3s;}
.visual-bottom-prod li:nth-child(2) {--item-color: var(--color-main);}
.visual-bottom-prod li:nth-child(3) {--item-color: var(--color-blue);}
.visual-bottom-prod li:nth-child(4) {--item-color: var(--color-green);}

@media (hover: hover) and (pointer: fine) {
  .visual-pager-nav .slick-arrow:hover::before {transform: translateY(-8%);}
  .visual-pager-nav .slick-dots li button:hover::before { background-size: 100% 100%; background-position: center top;} 
  .visual-bottom-prod li a:hover {background-size: calc(100% + 2px) 0; color: var(--item-color);}
}
@media (max-width: 1440px) {
  .visual-slide-txt {font-size: 0.695vw;}
  .visual-bottom-prod { font-size: 23px;}
}
@media (max-width: 1280px) {
  .visual-slide-img {background-position: right center;}
  .visual-bottom-prod { min-height: 90px; font-size: 20px;}
  .visual-bottom-prod li a {padding: calc(0.5em + 1.5vh) 0;}
}
@media (max-width: 1280px) and (orientation: portrait) {
  .visual-slide-txt {font-size: 1.1vw;top: auto; bottom: 68%; transform: none; padding-top: 10vh;}
  .visual-slide-img {background-position: center;}
  .visual-01 {background-image: url(../images/main/main_visual01_mobile.jpg);}
  .visual-02 {background-image: url(../images/main/main_visual02_mobile.jpg);}
  .visual-03 {background-image: url(../images/main/main_visual03_mobile.jpg);}
  .visual-04 {background-image: url(../images/main/main_visual04_mobile.jpg);}
  .visual-04 + .visual-slide-txt p { font-size: calc(2em + 6px)}
  .visual-05 {background-image: url(../images/main/main_visual05_mobile.jpg);}
}
@media (max-width: 1024px) {
  .visual-slide-txt {font-size: 0.8vw;}
  .visual-bottom-prod {font-size: calc(10px + 1vw);}
}
@media (max-width: 1024px) and (orientation: portrait) {
  .visual-slide-txt {font-size: calc(3px + 0.75vw); text-align: center;}
  .visual-slide-txt h3 {font-size: 7.5em;}
}
@media (max-width: 768px) {
  .visual-bottom-prod {flex-wrap: wrap; min-height: 0; font-size: 17px;}
  .visual-bottom-prod li {width: 40%; flex: 1 1 auto;}
  .visual-bottom-prod li a {padding: 1.6em 0;}
  .visual-bottom-prod li a br {display: none;}
}
@media (max-width: 576px) {
  .visual-slide-txt {font-size: 1vw;}
  .visual-pager-nav { width: 31px; transform: translateX(-15px); } 
  .visual-pager-nav .slick-arrow {height: 9px;}
  .visual-pager-nav .slick-arrow::before { height: 32px;}
  .visual-pager-nav .slick-dots {padding: 10px 0; }  
  .visual-pager-num { font-size: 14px; transform: translateX(-15px);} 
  .visual-pager-num .num-current {color: var(--color-main);}
  .visual-pager-num .num-item {height: 1.5em; display: inline-block;}
  .visual-pager-num b {padding-bottom: 0.4em;}
  .visual-bottom-prod {font-size: calc(10px + 1.4vw);}
  .visual-bottom-prod li a {padding: 1.1em 0;}
  .visual-bottom-prod li a br {display: block;}
}
@media (max-width: 576px) and (orientation: portrait) {
  .visual-slide-txt {font-size: calc(3px + 0.7vw); padding: 0 calc(var(--inner-padding) + 2.5em);}
  .visual-01 + .visual-slide-txt h3 span {display: block; font-size: 0.45em; padding-top: 0.2em;}
  .visual-03 + .visual-slide-txt {bottom: 65%;}
  .visual-03 + .visual-slide-txt p {font-size: calc(1.6em + 3px);}
}
@media (max-width: 480px) {
  .visual-03 + .visual-slide-txt p br {display: none;}
  .visual-05 + .visual-slide-txt h3 {font-size: 7em;}
}
/* 메인-비주얼 */
/* ===================================================== */