@charset "utf-8";
/*───────────────────────────────────────────────────────────

	 리스트 타입 및 옵션

───────────────────────────────────────────────────────────*/
@import url("../goods/goods.css");


/*** 쇼핑몰 메인본문 | main/index.php ***/

#visual {position:relative; background:var(--black); height:calc(100vh - 184px);}
#visual .slider-wrap {height:calc(100vh - 184px);}
#visual .slider-wrap .slick-list, #visual .slider-wrap .slick-track {height:calc(100vh - 184px);}
#visual .slider-wrap .slick-slide {/* opacity:0.8;  */height:calc(100vh - 184px);}
#visual .slider-wrap .slick-slide a {display:block; height:100%;}
#visual .slider-wrap .slick-slide img {object-fit: cover; width:auto; min-height:calc(100vh - 184px);}
#visual .visual_bottom {position:absolute; bottom:0; right:0; display:flex; flex-wrap:wrap; align-items:flex-end; width:100%;}
#visual .visual_bottom .page_wrap {width:100%; height:50px;  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;  /* background:var(--black); */ padding:0 5%; box-sizing:border-box;}
#visual .visual_bottom .page_wrap .slick-page {display:flex; flex-wrap:wrap; align-items:center; width:calc(100% - 25px);}
#visual .visual_bottom .page_wrap .slick-page li {font-size:14px; color:var(--white); font-family:var(--eng); font-weight:500;}
#visual .visual_bottom .page_wrap .slick-page li.and {width:calc(100% - 70px); margin:0 10px;}
#visual .visual_bottom .page_wrap .controler {display:block; margin-left:5px; line-height:1;}
#visual .visual_bottom .page_wrap .controler a {color:Var(--white); font-variation-settings:  'FILL' 1,  'wght' 400,  'GRAD' 0,  'opsz' 24; font-size:20px;}
#visual .visual_bottom .page_wrap .controler a.play {display:none;}
#visual .visual_bottom .plus_btn { display:flex; flex-wrap:wrap; align-items:center; justify-content:center;  width:45px; height:45px; background:var(--black); color:var(--main); font-size:25px; margin-left:89px; font-weight:300;}

#visual .slick-arrow {position:absolute; top:auto; bottom:0;  display:block; width:45px; height:45px; border:1px solid var(--black); cursor:pointer; z-index:90; background-size:10px !important; transform:translate(0); display:none !important}
#visual .slick-prev {left:auto; right:89px; background:var(--main) url("/data/skin/front/moment/img/icon/prevArrow.svg")no-repeat center;}
#visual .slick-next {right:45px; background:var(--main) url("/data/skin/front/moment/img/icon/nextArrow.svg")no-repeat center;}

/* progress bar */
    .slider-progress {
      width: 100%;
      height: 1px;
      background:rgba(255,255,255,0.5);
      margin: 0 auto;
    }
    .slider-progress .progress {
      width: 0%;
      height: 1px;
      background: var(--white);
    }

#banner_pop {position:fixed; top:0; left:0; width:100%; height:100vh; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; z-index:99999; text-align:center; opacity:0; visibility:hidden; transition:all 1s ease;}
#banner_pop.visible {opacity:1; visibility:visible; transition:all 1s ease;}
#banner_pop .pop_mask {position:absolute; top:0; left:0; width:100%; height:0; background:rgba(0,0,0,0.7); transition:all 1s ease;}
#banner_pop.visible .pop_mask {height:100%; transition:all 1s ease;}
#banner_pop .banner_pop_in {max-width:1330px; margin:0 auto; opacity:0; visibility:hidden; transition:all 1s ease; transform:translateY(-10%);}
#banner_pop.visible .banner_pop_in {opacity:1; visibility:visible; transition:all 1s ease; transition-delay:0.5s;}
#banner_pop .banner_pop_in .closeBtn {font-size:30px; margin:0 auto 10px; color:var(--white); position:relative; z-index:90;  transition:all 0.3s ease;}
#banner_pop .banner_pop_in .closeBtn:hover {transform:rotate(180deg); transition:all 0.3s ease;}
#banner_pop .banner_pop_in ul {display:flex; flex-wrap:wrap; max-height:50vh; max-width:640px; width:90%; margin:0 auto;}
#banner_pop .banner_pop_in ul .mCSB_container {display:flex; flex-wrap:wrap; }
#banner_pop .banner_pop_in ul li {width:100%; margin-bottom:10px;}
#banner_pop .banner_pop_in ul li:nth-child(2n) {margin-right:0;}
#banner_pop .banner_pop_in ul li img {width:100%;}
.mCSB_inside>.mCSB_container {margin-right:15px;}




#creator {overflow:hidden;}
#creator .slick-arrow {display:none !important;}
#creator .creator_list {/* display:flex; flex-wrap:wrap; justify-content:space-between; */ display:block; margin:0 0 25px; margin-left: -10px;}
#creator .creator_list .slick-list {overflow:hidden;}
#creator .creator_list img {width:100%;}
#creator .creator_list .slick-slide {float:none; margin-left:10px;}
#creator .slick-list {overflow:hidden;}
#creator .slick-track {display:flex; }
#creator .center {}
#creator .center .fs40 {margin:0 0 0;}
#creator .center a {letter-spacing: -0.9px; font-size: 14px; color:var(--black); text-decoration-line: underline; text-underline-offset:4px; transition:all 0.3s ease;}
#creator .center a:hover {letter-spacing:2pt; transition:all 0.3s ease;}


#event {position:relative;}
#event li {width:100%; height: 638.7px }
#event .slick-list, #event .slick-track {height:100%;}
#event li img {background-repeat:no-repeat; background-position:center; background-size:contain; width:100%;}
#event .slick-arrow { display:block; width:45px; height:45px; border:1px solid var(--black); cursor:pointer; z-index:90; background-size:10px !important; transform:translate(0); position: absolute; font-size: 0; bottom:-45px; z-index: 50;}
#event .slick-prev {right:44px; background:var(--main) url("/data/skin/front/moment/img/icon/prevArrow.svg")no-repeat center;}
#event .slick-next {right:0; background:var(--main) url("/data/skin/front/moment/img/icon/nextArrow.svg")no-repeat center;}
#event .page_wrap {width:100%; height:45px;  display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;  background:var(--black); /* position: absolute; bottom:0; right:89px; */ padding-right:105px; box-sizing:border-box; background:var(--black);}
#event .page_wrap .event_slick_page {display:flex; flex-wrap:wrap; align-items:center; }
#event .page_wrap .event_slick_page li {font-size:15px; color:var(--white); font-family:var(--eng); font-weight:500;}
#event .page_wrap .controler {display:block; margin-left:10px; line-height:1;}
#event .page_wrap .controler a {color:Var(--white); font-variation-settings:  'FILL' 1,  'wght' 400,  'GRAD' 0,  'opsz' 24; font-size:24px;}
#event .page_wrap .controler a.play {display:none;}


@font-face {
    font-family: 'KCC-Ganpan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/KCC-Ganpan.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}
#product .w1350 h3 {font-family: 'Orbit-Regular';}

#product {background:var(--black); overflow:hidden;}
#product .slick-list {overflow:hidden; height:100%;}
#product .slick-track {height:100%; display: flex;}
#product .prd_list {margin-left:-15px; overflow:hidden;}
#product .prd_list .slick-list {overflow:visible;}
#product .prd_list dl {float:none; margin-left:15px; position:relative; overflow:hidden;}
#product .prd_list dl dt {background:var(--white);}
#product .prd_list dl dt img {width:100%; background-repeat:no-repeat; background-position:center; background-size:cover}
#product .prd_list dl dd {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); text-align:center; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; padding:20px; box-sizing:Border-box; opacity:0; visibility:hidden; transform:translateY(50%); transition:all 0.6s ease;}
#product .prd_list dl dd h4 {letter-spacing: -0.9px; line-height:177%; font-size: 14px; font-weight:500; color:var(--white); margin:0 0 10px; width:100%;}
#product .prd_list dl dd i {font-size:50px; color:var(--white);}

#product .prd_list dl:hover dd {opacity:1; visibility:visible; transform:translateY(0%); transition:all 0.6s ease;}



#prd_pop {position:fixed; top:0; left:0; width:100%; height:100vh; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; z-index:99999; text-align:center; opacity:0; visibility:hidden; transition:all 1s ease;}
#prd_pop.visible {opacity:1; visibility:visible; transition:all 1s ease;}
#prd_pop .pop_mask {position:absolute; top:0; left:0; width:100%; height:0; background:rgba(0,0,0,0.7); transition:all 1s ease;}
#prd_pop.visible .pop_mask {height:100%; transition:all 1s ease;}
#prd_pop .prd_pop_in {max-width:430px; margin:0 auto; opacity:0; visibility:hidden; transition:all 1s ease; z-index:20; min-height: 56vh;}
#prd_pop.visible .prd_pop_in {opacity:1; visibility:visible; transition:all 1s ease; transition-delay:0.5s;}
#prd_pop .prd_pop_in .closeBtn {font-size:25px; margin:0 auto 10px; color:var(--white); position:relative; z-index:90;  transition:all 0.3s ease; display:block; width:25px;}
#prd_pop .prd_pop_in .closeBtn:hover {transform:rotate(180deg); transition:all 0.3s ease;}
#prd_pop .prd_pop_in iframe {height:460px !important;}


/*수정사항*/

#wrap_1 {width: 90%; margin: 0 auto; padding-top: 60px;}
#wrap_1 img {width: 100%; height: 100%;} 
        #wrap_1 h4 {color: #fff; position: absolute; top: 0; left: 0; font-size:17px; font-weight:400; width: 100%; height: 30px; line-height: 30px; text-align: center; background-color: #3333335b;}
        #wrap_1 h5 {color: #fff; position: absolute; top: 0; left: 0; font-size:17px; font-weight:400; width: 100%; height: 30px; line-height: 30px; text-align: center; background-color: #3333335b;}
        #wrap_1 .box_1 {width: 100%; display: flex; margin-bottom: 5px;}
        #wrap_1 .box_1 .box_left {width: 50%;}
        #wrap_1 .box_1 .box_left li {height: 100%; position: relative;}
        #wrap_1 .box_1 .box_left li:first-child {height: calc(50% - 5px); background-color: #bbb; margin-bottom: 5px;}
        #wrap_1 .box_1 .box_left li:nth-child(2) {height: 50%; background-color: #bbb;}
        #wrap_1 .box_1 .box_right {width: 50%; background-color: #bbb; position: relative; margin-right: 5px;}
        #wrap_1 .box_2 {width: 100%;}
        #wrap_1 .box_2 h4 {font-size: 10px;}
        #wrap_1 .box_2 .box_botton {width: 100%; display: flex; justify-content: space-between;}
        #wrap_1 .box_2 .box_botton li {width: 32%; height: 120px; background-color: #bbb; position: relative;}
        #wrap_1 .box_2 .box_botton li:nth-child(2n){background-color: #bbb;}


#brand {overflow:hidden; /*backgrand-color:#111 !important;*/}
#brand .slick-arrow {display:none !important}
#brand .slick-list {width:100%; overflow:visible; height:100% !important;}
#brand .slick-track {height:100%; display: flex; margin-left: -5px;}
/* #brand .brand_list {margin-left:-30px;}
#brand .brand_list li {margin-left:30px;} */
#brand .brand_list {margin-left: 5px; overflow:visible;}
#brand .brand_list .slick-slide {float:none; margin-left: 5px; text-align:center;}
#brand .brand_list li img {width:100%; border-radius:50px; }
#brand .brand_list li span {font-size: 12px; font-weight: 800; line-height:183.333%; letter-spacing: -0.6px; display:block; margin:4px 0 10px;}




#hashtag {overflow:hidden; margin-top:50px;}
#hashtag .hashtag_list {}
#hashtag .hashtag_list li {display:flex; flex-wrap:wrap; /* background:var(--black); */}
#hashtag .hashtag_list li .tag {position:relative; width:50%; overflow:hidden;}
#hashtag .hashtag_list li .tag .cover {width:100%; height:100%; position:absolute; top:0; left:0; width:100%; height:100%; display:flex; flex-wrap:wrap; align-content:center; justify-content:center; padding:20px; box-sizing:border-box; text-align:center; }
#hashtag .hashtag_list li .tag .cover h4 {width:100%; letter-spacing: -0.8pt; font-weight:500; font-size: 20px; color:var(--white);}
#hashtag .hashtag_list li .tag .cover p {width:100%; letter-spacing: -0.9px; line-height:177%; font-size: 13px; color:rgba(255,255,255,0.8);}
#hashtag .hashtag_list li .tag img {width:100%; background-repeat:no-repeat; background-position:center; background-size:cover; transition:all 0.6s ease;}

#hashtag .hashtag_list li .tag:nth-of-type(1) {width:100%;}
/* #hashtag .hashtag_list li .tag:nth-of-type(-n+2) h4 {font-size: 40px; font-family:var(--eng); font-weight:900; letter-spacing: -0.8px; text-transform: uppercase;} */

#hashtag .hashtag_list li .tag:hover img {opacity:0.7; transform:scale(1.1); transition:all 0.6s ease;}

.com_arrow {overflow:visible;}
.com_arrow .slick-list {overflow:visible;}
.com_arrow .slick-arrow {width:11px; height:30px; display:block; font-size:0; position:absolute; top:-44px; cursor:pointer; z-index:99; padding:0;}
.com_arrow .slick-prev {left:5%;  background:url("/data/skin/front/moment/img/icon/prevArrow_b.svg")no-repeat center / 100%;}
.com_arrow .slick-next {right:5%; background:url("/data/skin/front/moment/img/icon/nextArrow_b.svg")no-repeat center / 100%;}



/* .main_prd_list  .goods_prd_item2.list_num_2 {position:relative; top:50px; opacity:0; transition:all 0.2s linear;}
.main_prd_list  .goods_prd_item2.list_num_2.action {top:0; opacity:1; transition:all 0.2s linear; transition-delay:0s;}
.main_prd_list  .goods_prd_item2.list_num_2.action:nth-of-type(2n) {transition-delay:0.1s;} */




/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) { 


}
/*******************************************************************************
	@media ~1100px
*******************************************************************************/
@media all and (max-width:1100px) { 


}
/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) { 


}
/*******************************************************************************
	@media 681 ~ 768px
*******************************************************************************/
@media all and (max-width:768px) { 

}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:620px) { 

#brand .brand_list li img {border-radius:40px;}


}
/*******************************************************************************
	@media 361~480px
*******************************************************************************/
@media all and (max-width:500px) { 

#brand .brand_list li img {border-radius:30px;}
#hashtag .hashtag_list li .tag .cover h4 {font-size:17px; line-height:1.5;}
#hashtag .hashtag_list li .tag .cover p {margin:7px 0 0;}

}
/*******************************************************************************
	@media ~360px
*******************************************************************************/
@media all and (max-width:400px) { 

#brand .brand_list li img {border-radius:25px;}

}
/*******************************************************************************
	@media ~360px
*******************************************************************************/
@media all and (max-width:320px) { 

}