/* BASIC css start */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');

@font-face {
    font-family: 'GmarketSansBold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.cf{}
.cf:after{
    content: "";
    display: block;
    clear: both;
}

/* 롤링배너 */
#mainSpot img{ width: 100%;}
#mainSpot .swiper-pagination{ top: auto; bottom: 24px; left: 50%; transform: translateX(-50%); width: 55%; height: 2px;}
#mainSpot .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background: #030000;}
/* //롤링배너 */

/* 컨테이너 공통 */
#container{}
#container .tit{text-align: center; color: #111; font-size: 1.625rem; line-height: 1em; margin-bottom: 15px; font-family: 'Noto Sans KR'; font-weight:700; letter-spacing:-1px;}
#container .des{text-align: center; font-size: 0.925rem; color:#999;  line-height: 1.25em; margin-bottom: 30px; font-family: 'Noto Sans KR'; letter-spacing:-1px; line-height:1.25em}
#container .more{display: block; padding: 12px 15px; font-size: 0.95rem; color:#111; border: 1px solid #666; border-radius: 50px; width: 110px; text-align: center; margin: 0 auto; font-family: 'Noto Sans KR';}

/* 카테고리 */
#container .category{margin-top: 40px;}
#container .category ul{width: 90%; margin: 0 auto;}
#container .category ul li{float: left; width: 25%;}
#container .category ul li a{display: block; width: 75%; margin: 0 auto 25px;}
#container .category ul li a img{width: 100%;}

/* 갓차랭킹 */
#container .cont1 {margin-bottom: 60px;}
#container .cont1 .tit{font-family: 'GmarketSansBold'; margin: 0 0 20px; padding-top: 65px;}
#container .cont1 .des{margin-bottom: 30px;}

#container .cont1 ul{width: 95%;margin: 0 auto 50px;display: flex;flex-wrap: wrap;}
#container .cont1 ul li{width: 100%;margin: 20px 0;position: relative;flex: 1 1 50%;}
#container .cont1 ul li a{display: block; margin: 0 5%;}

#container .cont1 ul li .thumbail_img{position: relative; width: 100%; background-color: #f9f9f9;}

#container .cont1 ul li a .num{font-family: 'GmarketSansBold'; font-style: italic; font-size: 1.25rem; position: absolute; top: 20px; left: 15px;}
#container .cont1 ul li a img{width: 100%;}

#container .cont1 ul li a .text{width: 100%; box-sizing: border-box;margin-top: 20px;}

#container .cont1 ul li a .text .brand{color: #999; font-family: 'Noto Sans KR';}
#container .cont1 ul li a .text .prd{color: #666;font-size: 1rem;font-weight: 400;margin-bottom: 5px;font-family: 'Noto Sans KR';line-height: 1.35;}
#container .cont1 ul li a .text .pri{color: #333; font-size: 1rem; font-weight: 500; font-family: 'Noto Sans KR';}
#container .cont1 ul li a .text .pri .sale{color: #2155ff; margin-right: 5px; font-family: 'Noto Sans KR';}
#container .cont1 ul li a .text .pri .line{color: #999; font-size: 0.825rem; text-decoration: line-through;margin-left: 5px; font-family: 'Noto Sans KR';}

#container .cont2{margin-bottom: 100px;}
#container .cont2 .exterior, #container .cont2 .interior{display: block; width: 90%; margin: 0 auto 30px;}
#container .cont2 .exterior img , #container .cont2 .interior img{width: 100%;}

#container .cont3{margin-bottom: 80px;}
#container .cont3 .sale, #container .cont3 .package{display: block; width: 90%; margin: 0 auto 30px;}
#container .cont3 .sale, #container .cont3 .package{display: block; width: 90%; margin: 0 auto 30px;}
#container .cont3 .sale img , #container .cont3 .package img{width: 100%;}

/* 띠배너 */
.longbnnr{margin: 40px 0 60px;}

/* 외장/실내 배너 */
#container .cont2{margin-bottom: 100px;}
#container .cont2 .exterior, #container .cont2 .interior{display: block; width: 90%; margin: 0 auto 30px;}
#container .cont2 .exterior img , #container .cont2 .interior img{width: 100%;}

/* 할인/패키지 배너 */
#container .cont3{margin-bottom: 80px;}
#container .cont3 .sale, #container .cont3 .package{display: block; width: 90%; margin: 0 auto 30px;}
#container .cont3 .sale, #container .cont3 .package{display: block; width: 90%; margin: 0 auto 30px;}
#container .cont3 .sale img , #container .cont3 .package img{width: 100%;}

/* 갓차메거진 */
#container .cont4{}
#container .cont4 ul{}
#container .cont4 ul li{}
#container .cont4 ul li a{display: block; width: 90%; border-radius: 10px; margin: 35px auto; transition: 0.3s; position: relative;}
#container .cont4 ul li a img{width: 100%; }
#container .cont4 ul li a .on{position: absolute; top: 0; left: 0; opacity: 0;}
#container .cont4 ul li:hover a .on{opacity: 1;}
#container .cont4 .more{margin: 50px auto 60px;}

/*베스트 리뷰*/
#container .cont5{background-color: #f9f9f9; padding: 80px 0;}
#container .cont5 .star{font-size: 1rem; color: #111; margin-bottom:5px;}
#container .cont5 .star .bl{color: #2155ff; font-family: 'Noto Sans KR';}
#container .cont5 ul hr{border: none; margin: 10px auto; height: 1px; background: #ccc; }

#container .cont5 .r1{width: 90%; margin:0 auto 35px;}
#container .cont5 .r1 li{}
#container .cont5 .r1 li a{width: 48%; height: 340px; background: #fff; margin: 0 1% 25px;  border-radius: 5px; overflow: hidden; position: relative;}
#container .cont5 .r1 li:nth-child(odd) a{float: left;}
#container .cont5 .r1 li:nth-child(even) a{float: right}
#container .cont5 .r1 li a .text{width:85%; padding:20px 15px; font-family: 'Noto Sans KR';}
#container .cont5 .r1 li a img{width: 100%}
#container .cont5 .r1 li a .text .txt{font-size: 0.95rem; margin-bottom: 25px; color: #666; font-family: 'Noto Sans KR';}
#container .cont5 .r1 li a .text .prd{color: #111; font-size: 0.825rem;  font-family: 'Noto Sans KR';}

#container .cont5 .r2{width: 90%; background-color: #fff; border-radius: 10px; margin: 0 auto; padding-bottom:70px;}
#container .cont5 .r2 hr{width: 95%; margin: 0 auto;}
#container .cont5 .r2 li{}
#container .cont5 .r2 li a{display: block; width: 100%;  height:150px; padding: 15px 0;}
#container .cont5 .r2 li a img{width: 120px; height: auto; margin: 30px 20px; float: left;}
#container .cont5 .r2 li a .star{width: 100%; padding-top: 25px;}
#container .cont5 .r2 li a .txt{display:block; width: 90%; font-size: 0.75rem; padding-top: 4px; font-family: 'Noto Sans KR'; letter-spacing:-1px;}
#container .cont5 .r2 li a .prd{width: 100%; font-size: 0.825rem; color: #111; padding-top: 4px; font-family: 'Noto Sans KR'; letter-spacing:-1px;}

/* 인스타영역 */
#container .cont6{margin-bottom: 80px;}
#container .cont6 .ico{display: block; width: 30px; margin:45px auto 15px;}
#container .cont6 .ico img{width: 100%;}
#container .cont6 .more{ border:none; padding:15px 0; display: block; width:90%; margin: 20px auto; text-align:center; background-color:#f3f3f3; border-radius:5px;}

/*쿠폰 혜택 버튼*/
.main .coupon-benefit {position:relative; margin:-25px 0 10px 0} 
.main .btn-coupon { display:inline-block; height:16px; padding:0; margin-left:5px; border:1px solid #000; font-size:10px;}
.main .btn-coupon span { display:inline-block; height:16px; padding:0 5px; color:#fff; background:#000; vertical-align:top; font-size:11px; }
.main .btn-coupon em { display:inline-block; height:16px; padding:0 3px 0 0; font-size:10px; vertical-align:top; color:#000; }
/* BASIC css end */