/* 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;}

#topBanner{width:100%; background-color:#2155ff;}
#topBanner .topIn{width:1200px;margin:0 auto; position:relative; }
#topBanner .topIn .topimg{display:block; height:45px; margin:0 auto; background: url(/design/gotcha82/gotcha/img/topbanner01.jpg) no-repeat center/1920px auto;}
#topBanner .close{display: block; width:45px; height:45px; position: absolute; top: 0;  right: 0; text-indent:-9999px;}
.item-wrap, .item-wrap .item-cont{width:1200px}

/* 메인 비쥬얼 배너 */
#mainSpot{width: 100%;  margin: 0 auto;}
#mainSpot img{display:block; width: 1920px; height: 480px; border-radius: 0; margin: 0 auto;}
#mainSpot .swiper-pagination{ top: auto; bottom: 33px; left: 50%; transform: translateX(-50%); width: 390px; height: 1px;}
#mainSpot .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background: #030000;}
#mainSpot .swiper-button-next,#mainSpot .swiper-button-prev{left: 50%; transform: translateX(-50%);}
#mainSpot .swiper-button-next{width: 50px; height: 50px; background: url(/design/gotcha82/ideco/pc/icon/main_right.png) no-repeat;margin-left:600px;}
#mainSpot .swiper-button-prev{width: 50px; height: 50px; background: url(/design/gotcha82/ideco/pc/icon/main_left.png) no-repeat; margin-left:-600px;}
#mainSpot .swiper-button-next:after, #mainSpot .swiper-button-prev:after{opacity:0}

/* 연결페이지02 */
.link_connect{padding: 45px 0 80px;}
.link_connect ul { width: 1200px; margin: 0 auto; *zoom:1; font-size: 0; }
.link_connect ul li { display: inline-block; width: 90px; margin: 0 34px; text-align: center;}
.link_connect ul li:nth-child(1) {margin:0 36px 0 0;}
.link_connect ul li:nth-child(8) {margin:0 0 0 36px;}
.link_connect ul li a{ display:block; width : 90px; text-align:center; color: #000; font-size: 15px; font-family: 'Noto Sans KR', sans-serif;}
.link_connect ul li a img{display: block; width: 100%; padding-bottom: 12px;}

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


/* 갓차 랭킹 */
#container .cont1 {height: 720px; margin-bottom: 60px;}
#container .cont1 .tit{font-family: 'GmarketSansBold'; text-align: left; margin: 0 0 20px; padding-top: 30px;}
#container .cont1 .des{margin-bottom: 30px; text-align: left;}
#container .cont1 ul{width: 980px; position: absolute; top: 0; right: 0;}
#container .cont1 ul li{float: left; margin: 0 18px 36px;}
#container .cont1 ul li:nth-child(1),#container .cont1 ul li:nth-child(5){margin: 0 18px 36px 0 ;}
#container .cont1 ul li:nth-child(4),#container .cont1 ul li:nth-child(8){margin: 0 0 36px 18px ;}
#container .cont1 ul li a{display: block; width: 218px; height: 320px; background-color: #f9f9f9; padding: 25px; box-sizing: border-box; position: relative; overflow: hidden; }

#container .cont1 ul li a .num{font-family: 'GmarketSansBold'; font-style: italic; font-size: 1.125rem;}
#container .cont1 ul li a img{position: absolute; top: 30px; left: 50%; transform: translateX(-50%); width: 90%; transition: 0.3s;}

#container .cont1 ul li a .text{width: 100%; height: 100px; position: absolute; left: 0; bottom: -110px; padding: 10px 20px; box-sizing: border-box; transition: 0.3s;}

#container .cont1 ul li:nth-child(1) a .text{height: 110px; bottom: -110px;}
#container .cont1 ul li:nth-child(3) a .text{height: 90px; bottom: -90px;}

#container .cont1 ul li:nth-child(6) a .text{height: 130px; bottom: -130px;}

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

#container .cont1 ul li:nth-child(1) a:hover img{top: -35px;}
#container .cont1 ul li a:hover img{top: -18px;}
#container .cont1 ul li a:hover .text{bottom: 0;}

    
/* 롱배너 */
.longbnnr{ width: 1200px; margin: 45px auto 120px;}
.longbnnr img{width:100%}

/* 외장/실내 배너 */
#container .cont2{margin-bottom: 100px;}
#container .cont2 .exterior, #container .cont2 .interior{width: 48%;}
#container .cont2 .exterior{float: left;}
#container .cont2 .interior{float: right;}

/* 할인/세트 배너 */
#container .cont3{margin-bottom: 100px;}
#container .cont3 .sale, #container .cont3 .package{width: 48%;}
#container .cont3 .sale{float: left;}
#container .cont3 .package{float: right;}

/* 갓차 메거진 */
#container .cont4{}
#container .cont4 ul{}
#container .cont4 ul li{}
#container .cont4 ul li a{display: block; width: 32%; height: 590px; border-radius: 10px; float: left; margin: 0 1%; transition: 0.3s; position: relative;}
#container .cont4 ul li a img{width: 100%; position: absolute; top: 0; left: 0;}
#container .cont4 ul li a img.on{opacity: 0;}
#container .cont4 ul li:nth-child(1) a{margin: 0 1% 0 0;}
#container .cont4 ul li:nth-child(3) a{margin: 0 0 0 1%;}
#container .cont4 .more{margin: 50px auto 120px;}

#container .cont4 ul li:hover a{margin-top: -15px;}
#container .cont4 ul li:hover .on{opacity: 1;}

/* 베스트 리뷰 */
#container .cont5{background-color: #f9f9f9; padding: 120px 0;}

#container .cont5 .star{font-size: 1rem; color: #111; font-family: 'Noto Sans KR';}
#container .cont5 .star .bl{color: #2155ff;}
#container .cont5 ul hr{border: none; margin: 10px auto; height: 1px; background: #ccc; }

#container .cont5 .r1{ margin-bottom: 35px;}
#container .cont5 .r1 li{}
#container .cont5 .r1 li a{width: 22%; height: 430px; background: #fff; float: left; margin: 0 1.5%;  border-radius: 5px; overflow: hidden; position: relative;}
#container .cont5 .r1 li a .text{width: 80%; height: 115px; position: absolute; bottom: 25px; left: 50%; transform: translateX(-50%);}
#container .cont5 .r1 li a img{width: 100%}
#container .cont5 .r1 li a .star{padding-bottom:5px}
#container .cont5 .r1 li a .text .txt{font-size: 0.95rem; margin-bottom: 20px; color: #666; font-family: 'Noto Sans KR';}
#container .cont5 .r1 li a .text .prd{color: #111; font-size: 0.825rem; position: absolute; left: 0; bottom: 0; font-family: 'Noto Sans KR';}

#container .cont5 .r1 li a .dark{width: 100%; height: 265px; background-color:#000; position: absolute; top: 0; left: 0; opacity: 0; transition: 0.3s;}
#container .cont5 .r1 li a .go{width: 60px; position: absolute; top: 100px; left: 50%; transform: translateX(-50%); opacity: 0; transition: 0.3s;}

#container .cont5 .r1 li:hover a .dark{opacity: 0.4} 
#container .cont5 .r1 li:hover a .go{opacity: 1; z-index: 1;} 

#container .cont5 .r2{width: 100%; height: 240px; background-color: #fff; border-radius: 10px;}
#container .cont5 .r2 hr{width: 95%; margin: 0 auto;}
#container .cont5 .r2 li{}
#container .cont5 .r2 li a{display: block; width: 100%; height: 120px;}
#container .cont5 .r2 li a img{width: 90px; height: 90px; margin: 15px 40px; float: left;}
#container .cont5 .r2 li a .star{padding: 25px 0 0; font-family: 'Noto Sans KR';}
#container .cont5 .r2 li a .txt{font-size: 0.95rem; width: 75%; padding-top: 10px; font-family: 'Noto Sans KR'; color:#666;}
#container .cont5 .r2 li a .prd{float: right; font-size: 0.925rem; color: #111; margin-top: -35px; margin-right: 50px; font-family: 'Noto Sans KR';}


/* 인스타영역 */
#container .cont6{margin-bottom: 130px;}
#container .cont6 .ico{display: block; width: 35px; margin: 100px auto 15px;}
#container .cont6 .ico img{width: 100%;}
/* BASIC css end */