@charset "utf-8";


/********************
// tablet 분기점
********************/
@media only screen and (max-width: 1200px) {
    .inner{width:calc(100% - 120px); }
    .swiper-container {      width: 100%; bottom:-20% }
    .count{font-size:240px;  }
    .range{background-image: url('/img/rangeBg-t.jpg'); background-size:cover; background-position:bottom}
    .shopinshopLogo {position: relative; display: grid; grid-template-columns: 1fr 30px 1fr;
        grid-template-areas:
            "logo01 arrow12 logo02"
            "logo04 arrow43 logo03";
        column-gap: 16px; row-gap: 44px; align-items: center;}
    .shopinshopLogo .logo01 {grid-area: logo01;}
    .shopinshopLogo .logo02 {grid-area: logo02;}
    .shopinshopLogo .logo03 {grid-area: logo03;}
    .shopinshopLogo .logo04 {grid-area: logo04;}
    .shopinshopLogo .arrow12 {grid-area: arrow12; width: 16px; justify-self: center;}
    .shopinshopLogo .arrow43 {grid-area: arrow43; width: 16px; justify-self: center; transform: translateY(-50%) rotate(180deg);}
    .shopinshopLogo .arrow23 {position: absolute; display: block; top: 50%; right: 24%; width: 16px; transform: translateY(-50%) rotate(90deg); z-index: 3;}
    .shopinshopLogo .arrow14 {position: absolute; display: block; top: 50%; left: 24%; width: 16px; transform: translateY(-50%) rotate(-90deg); z-index: 3;}

    .timeBanner {margin-top:-15%;display:grid; grid-template-columns: repeat(3 , 1fr); bottom:0; z-index: 3;}
    .benefitBox{display:grid;  grid-template-columns: 1fr 38px 1fr 38px 1fr;    align-items: center;}    
    .reviewCnts {display:grid; grid-template-columns:repeat(1, 1fr);}
    .reviewCnttxt {min-height:auto;}
    .topBtn{bottom:100px; right:40px; z-index: 99;}
    .form_input{padding:16px; background: #fff; border:1px solid #D9DADE;}
}
/********************
// 모바일 분기점
********************/
@media only screen and (max-width: 768px) {     
    .inner{width:calc(100% - 40px); }
    .swiper-container {      width: 100%; bottom:-10% }
    .count{font-size:160px;  }
    .swiper-button-next,
    .swiper-button-prev {    top: 52%;  }
    .swiper-button-prev { left: 0px; }
    .swiper-button-next { right: 0px; }
    .shopinshopImgBox{display:grid; grid-template-columns: repeat(1, 1fr);}
    .shopinshopSalesBox { display: grid; grid-template-columns: repeat(1, 1fr); }
    .timeBanner {margin-top:-15%;display:grid; grid-template-columns: repeat(1 , 1fr); bottom:0; z-index: 3;}
    .timeBanner div:nth-child(1){border-bottom:1px solid #D9DADE; border-right:none;}
    .timeBanner div:nth-child(2){border-bottom:1px solid #D9DADE; border-right:none;}
    .benefitBox{display:grid;  grid-template-columns: 1fr;    align-items: center; justify-items: center;}
    .topBtn{bottom:80px; right:20px; z-index: 99;}
    .mFix{bottom:0}

    .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.2); 
        opacity: 0;  
    }
}

.form_agreement input[type="checkbox"] {width: 14px;  height: 14px;}

}