@charset "utf-8";

/***********************
******* 매인
************************/
.mainBanner{background-image: url('/img/mainBanner.jpg'); background-size:cover; background-position: center; overflow: hidden;}
.swiper-wrapper {    transition-timing-function: linear !important;  }
.swiper-container {      width: 100%; bottom:-30% }
.count{font-size:320px;    top: 50%;  left:50%;  transform: translate(-50%, -50%); opacity: 0.4;}

@keyframes spin {
from {
transform: rotate(0deg); 
}
to {
transform: rotate(-360deg);
}
}
.logo-swiper-r .swiper-slide .mainSlideImg {    animation: spin 40s linear infinite;    transform-origin: center center;   }


/***********************
******* graph
************************/
.graph{ background:url('/img/graphBg.jpg'); background-size:cover;}


/***********************
******* ranking
************************/
.rankingTop{background-image:url('/img/rankingBg.png'); background-size:cover;}
.rankingBottom{background-image:url('/img/interior.jpg'); background-size:cover; }


/***********************
******* sales
************************/
.sales{background-image:url('/img/salesBg.jpg'); background-size:cover; background-position:center;}
.separator {    align-self: flex-end;}
.salesBox{box-shadow: 0 0 8px rgba(0, 0, 0, 0.25);}
.sales-swiper-container .swiper-wrapper {    transition-timing-function: linear !important;}


/***********************
******* strategy
************************/
.strategy{background-image: url('/img/strategyBg.png'); background-size:cover; background-position:bottom; background-repeat: no-repeat;}
.strategySlideBox{width:auto !important;}


/***********************
******* menu
************************/
.menu-header { margin-bottom:-2%;}
.swiper-container-wrap {    position: relative;     width: 100%;}
.slide-item-box img {    width: 100%;    height: auto;    aspect-ratio: 4 / 3;    object-fit: cover;}
.swiper-button-next,
.swiper-button-prev {    top: 50%;     transform: translate(0, -50%);   z-index: 10;}
.swiper-button-next::after,
.swiper-button-prev::after {    display: none !important; }
.swiper-button-prev { left: 5px; }
.swiper-button-next { right: 5px; }


/***********************
******* shopinshop
************************/
.shopinshop{background-image: url('/img/shopinshopBg.png'); background-size:100%; background-position:bottom; background-repeat: no-repeat;}
.shopinshopLogo {position: relative; display: grid; grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr; align-items: center;}
.shopArrow {justify-self: center;}
.arrow14 {display: none;}
.logoBpx {    border: 1px solid #D9DADE;     animation: relayGlow 4s infinite; }
.shopinshopLogo > .logoBpx:nth-of-type(1) { animation-delay: 0s; }
.shopinshopLogo > .logoBpx:nth-of-type(2) { animation-delay: 1s; }
.shopinshopLogo > .logoBpx:nth-of-type(3) { animation-delay: 2s; }
.shopinshopLogo > .logoBpx:nth-of-type(4) { animation-delay: 3s; }

@keyframes relayGlow {
    0% { 
        box-shadow: 0 0 0 rgba(253, 216, 76, 0); 
        border-color: #D9DADE; 
    }
    5% { 
        box-shadow: 0 0 15px rgba(253, 216, 76, 1); 
        border-color: rgba(253, 216, 76, 1);   
    }
    20% { 
        box-shadow: 0 0 15px rgba(253, 216, 76, 1); 
        border-color: rgba(253, 216, 76, 1); 
    }
    25% { 
        box-shadow: 0 0 0 rgba(253, 216, 76, 0); 
        border-color: #D9DADE; 
    }
    100% { 
        box-shadow: 0 0 0 rgba(253, 216, 76, 0); 
        border-color: #D9DADE; 
    }
}
.shopinshopImgBox{display:grid; grid-template-columns: repeat(2, 1fr);}


/***********************
******* shopinshopSales
************************/
.shopinshopSales { background-image: url('/img/shopinshopSalesbg.jpg'); background-size: cover; background-position: center; }
.shopinshopSalesBox { display: grid; grid-template-columns: repeat(2, 1fr); }
.bar-yellow, .bar-gray { overflow: hidden; height: 0; transition: height 1.5s cubic-bezier(0.22, 1, 0.36, 1);}
.shopGraph::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: var(--gray-px, 0px); border-top: 1px solid #eaeaea; background-image: repeating-linear-gradient( 0deg, #eaeaea 0px, #eaeaea 1px, transparent 1px, transparent 20% ); z-index: 0;}
.top-total-text{text-decoration: underline;}


/***********************
******* time
************************/
.time{background:linear-gradient(to bottom, #fff, #FFFCEB )}
.timeImg{background-image: url('/img/5min.png'); background-size:cover; background-position:center;aspect-ratio: 1 / 1;}
.time-container{ aspect-ratio: 1 / 1; }
.time-arrow .arrow-arc {stroke-dasharray: 1700; stroke-dashoffset: 1700;  transition: stroke-dashoffset 1.5s cubic-bezier(0.25, 1, 0.5, 1); }
.time-arrow .arrow-head {opacity: 0; transition: opacity 0.2s ease-in 1.3s;  }
.time.active .time-arrow .arrow-arc {stroke-dashoffset: 0;  }
.time.active .time-arrow .arrow-head {opacity: 1; }
.timeBanner{display:grid; grid-template-columns: repeat(3 , 1fr); bottom:0; z-index: 3;}
.timeBanner div:nth-child(1){border-right:1px solid #D9DADE}
.timeBanner div:nth-child(2){border-right:1px solid #D9DADE}


/***********************
******* netProfit
************************/
thead th {    border-right: 1px solid #D9DADE;}
thead th:last-child {    border-right: none;}
tbody td {    border-bottom: 1px solid #D9DADE;}
tbody td {    border-right: 1px solid #D9DADE;}
tbody td:last-child {    border-right: none; }


/***********************
******* review
************************/
.reviewImgBox {overflow: hidden;}
.reviewImgBox img {display: block; width: 100%; height: 100%; object-fit: cover;}
.reviewCnts {display:grid; grid-template-columns:repeat(3, 1fr);}
.reviewCnttxt {min-height:560px;}


/***********************
******* range
************************/
.range{background-image: url('/img/rangeBg.jpg'); background-size:cover; background-position:right}
.gpsBpx {    aspect-ratio: 1 / 1; }
.gpsMain {    background: radial-gradient(circle at center, rgba(217, 218, 222, 0) 0%, #D9DADE 100%);     border-radius: 100%;}
.gpsMain::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; z-index: -1;  background: radial-gradient( circle,  rgba(252, 197, 32, 0) 0%,   rgba(252, 197, 32, 0.25) 50%,  rgba(255, 153, 0, 0.8) 100%   ); animation: gpsPulse 1.5s infinite ease-out;}
@keyframes gpsPulse {
    0% {
        transform: scale(0.8); 
        opacity: 1; 
    }
    100% {
        transform: scale(2.1); 
        opacity: 0;  
    }
}


.benefitBox{display:grid;  grid-template-columns: 1fr 51px 1fr 51px 1fr;    align-items: center;}


.priceImg001{bottom:0; left:0;}
.priceImg002{bottom:0; right:0;}
.promo-table thead th {    border-right: 1px solid #EEEEF0;}
.promo-table thead th:last-child {    border-right: none;}
.old-price{text-decoration: line-through;}


/***********************  
******* qa
************************/
.qa{background:url('/img/contactBg.jpg'); background-size:cover;}
.form_agreement input[type="checkbox"] {  margin-right: 10px;  appearance: none;  width: 18px;  height: 18px;  border: 1px solid #ccc;  border-radius: 99px;  cursor: pointer;  position: relative;}
.form_agreement input[type="checkbox"]:checked {  background-color: #161D1D;  border-color: #161D1D;}
/* 체크 표시 (V) 만들기 */
.form_agreement input[type="checkbox"]:checked::after {  content: '✔';  color: white;  position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%);  font-size: 12px;}
.policymore{text-decoration: underline;}
.form_input{padding:20px; background: #fff; border:1px solid #D9DADE;}
.btnBox1{display:grid; grid-template-columns:repeat(2, 1fr)}
.btnBox1 input[type="radio"]{left:-9999px}
.btnBox1 input[type="radio"] + label{border:1px solid #EEEEF0; background:#EEEEF0; cursor: pointer; transition: ease-in 0.3s;}
.btnBox1 input[type="radio"]:checked + label{background:#FCC520; border:1px solid #FCC520; color:#26272b}

.undLine {text-decoration:underline; text-underline-offset: 4px;}

.webFix{bottom:50px; z-index: 99; left:50%; transform: translate(-50% , 0); box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);}

.topBtn{bottom:60px; right:60px; z-index: 99;}

/***********************  
******* login
************************/
.loginBg {background:url('/img/mainBanner.jpg'); background-position:center; background-size:cover;}

/***********************  
******* contactView
************************/
.consiltCntLine {border-top:1px solid #D9DADE;}
.consiltCntLine:last-child{border-bottom:1px solid #D9DADE;}
.successBtnLine {border:1px solid #D9DADE;}