@charset "utf-8";
/* CSS Document */

#contents {margin-top:0 !important;} 
.sub_content {width:100%; display:block !important;}
#visual {background:var(--black); overflow:hidden;}
#visual .slick-slider {overflow:visible;}
#visual .slick-arrow {position:absolute; top:auto; bottom:0;  display:block; width:70px; height:70px; /**border-left:1px solid #eee var(--black); border-right:1px solid #eee var(--black)**/ border-top:0; border-bottom:0; cursor:pointer; z-index:90; transform:translate(0);}
#visual .slick-prev {left:-70px; background:var(--main) url("/data/skin/front/moment/img/icon/prevArrow.svg")no-repeat center;}
#visual .slick-next {left:auto; right:-70px; background:var(--main) url("/data/skin/front/moment/img/icon/nextArrow.svg")no-repeat center;}
#visual .slider-wrap .slick-slide {/*filter: grayscale(1);*/ background:var(--black);}
#visual .slider-wrap .slick-slide img {/*opacity:0.5;*/}
#visual .slider-wrap .slick-slide.slick-current {opacity:1; filter: grayscale(0);}
#visual .slider-wrap .slick-slide.slick-current img {opacity:1;}
#visual .visual_bottom { height:70px; border-top:1px solid var(--black); border-bottom:1px solid var(--black); background:var(--main);}
#visual .visual_bottom .w1350 {position:relative;  background:var(--white);}
#visual .visual_bottom .plus_btn {position:absolute; top:0; right:0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;  width:70px; height:70px; background:var(--black); color:var(--main); font-size:30px;}
#visual .visual_bottom .nav_list {width:calc(100% - 347px); margin-left:70px; background:var(--white); display:flex; flex-wrap:nowrap;}
#visual .visual_bottom .nav_list li {line-height:70px; padding:0 8px; cursor:pointer; letter-spacing: -0.9px; color:rgba(17,17,17,0.5); font-size:18px; position:relative;  transition:all 0.3s ease; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; display: block; }
#visual .visual_bottom .nav_list li:hover {color:var(--black); transition:all 0.3s ease;}
#visual .visual_bottom .nav_list li::after {content:''; width:1px; height:40px; background:#eee/**var(--black)**/; opacity:0.2; position:absolute; top:50%; transform:TranslateY(-50%); right:0;}
#visual .visual_bottom .nav_list li.slick-current {color:var(--black); font-weight:500;}
#visual .visual_bottom .nav_list li:last-of-type::after {display:none;}
#visual .visual_bottom .page_wrap {width:137px; height:70px; position:absolute; top:0; right:70px; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;  background:var(--main);}
#visual .visual_bottom .page_wrap .slick-page {display:flex; flex-wrap:wrap; align-items:center; }
#visual .visual_bottom .page_wrap .slick-page li {font-size:15px; color:var(--black); font-family:var(--eng); font-weight:500;}
#visual .visual_bottom .page_wrap .controler {display:block; margin-left:19px; line-height:1;}
#visual .visual_bottom .page_wrap .controler a {color:Var(--black); font-variation-settings:  'FILL' 1,  'wght' 400,  'GRAD' 0,  'opsz' 24;}
#visual .visual_bottom .page_wrap .controler a.play {display:none;}
/* #visual .main_visual {max-width:1350px; margin:0 auto; } */
#visual .main_visual > div {display:flex; flex-wrap:nowrap; }
/* #visual .main_visual .slick-list {overflow:visible !important;}
#visual .main_visual .slick-track {display:flex !important; height:100%;}
#visual .main_visual .slick-slide {float:none !important;} */
#visual .visual_bottom .nav_list .slick-list {width:100%;}

#best_seller .center_title {position: relative;}
#best_seller .center_title .moreBtn {font-size: 18px; font-weight: 500; line-height:177.778%; letter-spacing: -0.9px; display:flex; flex-wrap: wrap; align-items: center; position: absolute; top:50%; right:0; transform: translateY(-50%);}
#best_seller .center_title .moreBtn i {font-size:24px; display:block; font-style:normal; margin-left:6px; transition: all 0.4s ease; position: relative; top:-2px;}
#best_seller .center_title .moreBtn:hover {letter-spacing: 1.8px;}
#best_seller .center_title .moreBtn:hover i {transform:rotate(180deg); transition: all 0.4s ease;}
#best_seller h3{ font-weight:700;}



#banner_pop {position:fixed; top:0; left:0; width:100%; height:var(--vh); 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;}
#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:50px; margin:0 auto 20px; 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:744px;}
#banner_pop .banner_pop_in ul .mCSB_container {display:flex; flex-wrap:wrap; }
#banner_pop .banner_pop_in ul li {width:calc((100% - 10px) / 2); margin-right:10px; 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%;}



#prd_pop {position:fixed; top:0; left:0; width:100%; height:var(--vh); 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;}
#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:50px; margin:0 auto 20px; color:var(--white); position:relative; z-index:90;  transition:all 0.3s ease;}
#prd_pop .prd_pop_in .closeBtn:hover {transform:rotate(180deg); transition:all 0.3s ease;}
#prd_pop .prd_pop_in iframe {width:430px; height:660px;}






#creator {/**background:url("/data/BG_.png")no-repeat center / cover;**/}
#creator .creator_list {/* display:flex; flex-wrap:wrap; justify-content:space-between; */ display:block; margin:0 0 130px;}
#creator .creator_list a{float:none; width:calc((100%) / 2);}
#creator .creator_list img {width:100%;}
#creator .slick-list {overflow:hidden; box-shadow: 0 10px 20px rgba(0,0,0,0.10), 0 10px 20px rgba(0,0,0,0.10);}
#creator .slick-track {display:flex; }
#creator .center {}
#creator .center .fs40 {margin:0 0 30px;}
#creator .center .fs40 img{width: 50px;}
#creator .center a {letter-spacing: -0.9px; font-size: 18px; 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;}
#creator h3{ font-weight:700;}





@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 .prd_list {margin-left:-30px; overflow:visible;}
#product .prd_list .slick-list {overflow:visible;}
#product .prd_list dl {margin-left:30px; 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: 18px; font-weight:500; color:var(--white); margin:0 0 17px; width:100%;}
#product .prd_list dl dd i {font-size:80px; color:var(--white);}

#product .prd_list dl:hover dd {opacity:1; visibility:visible; transform:translateY(0%); transition:all 0.6s ease;}


#event {position:relative; }
#event li {width:100%; height:800px; }
#event li img {background-repeat:no-repeat; background-position:center; background-size:contain;}
#event .slick-arrow {display:block; width:50px; height:50px; font-size:0; background:var(--white); border:1px solid var(--black); box-sizing:border-box; left:auto; right:50%; top:auto; bottom:0; transform:translate(0);}
#event .slick-prev {background:#fff url("/data/skin/front/moment/img/icon/prevArrow.svg")no-repeat center; margin-right:-626px;}
#event .slick-next {background:#fff url("/data/skin/front/moment/img/icon/nextArrow.svg")no-repeat center; margin-right:-675px;}
#event .page_wrap {display: none; /*display:flex;*/ flex-wrap:wrap; align-items:center; justify-content:center; width:120px; height:50px; background:var(--black); position:absolute; bottom:0; right:50%; margin-right:-576px;}
#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:15px; line-height:1;}
#event .page_wrap .controler a {color:Var(--white); font-variation-settings:  'FILL' 1,  'wght' 400,  'GRAD' 0,  'opsz' 24;}
#event .page_wrap .controler a.play {display:none;}

#brand {overflow:hidden;}
/* #brand .brand_list {margin-left:-30px;}
#brand .brand_list li {margin-left:30px;} */
#brand .brand_list li img {width:100%;}
#brand h3{ font-weight:700;}

#hashtag {overflow:hidden;}
#hashtag .hashtag_list {}
#hashtag .hashtag_list li {display:flex; flex-wrap:wrap; /* background:var(--black); */}
#hashtag .hashtag_list li .tag {position:relative; width:33.33%; 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: -1.5px; font-weight:500; font-size: 30px; color:var(--white); margin:0 0 2px;}
#hashtag .hashtag_list li .tag .cover p {width:100%; letter-spacing: -0.9px; line-height:177%; font-size: 18px; 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(-n+2) {width:50%;}
#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;}
#hashtag h3{ font-weight:700;}


/*수정사항*/




.com_arrow {overflow:visible;}
.com_arrow .slick-list {overflow:visible;}
.com_arrow .slick-arrow {width:24px; height:44px; display:block; font-size:0; position:absolute; top:-65px; cursor:pointer; z-index:999;}
.com_arrow .slick-prev {left:50%; margin-left:-676px; background:url("/data/skin/front/moment/img/icon/prevArrow_b.svg")no-repeat center;}
.com_arrow .slick-next {right:50%; margin-right:-676px; background:url("/data/skin/front/moment/img/icon/nextArrow_b.svg")no-repeat center;}



#product .com_arrow .slick-prev {background:url("/data/skin/front/moment/img/icon/prevArrow_w.svg");}
#product .com_arrow .slick-next {background:url("/data/skin/front/moment/img/icon/nextArrow_w.svg");}

#product .com_arrow .slick-prev {margin-left:-660px !important;}
#brand .com_arrow .slick-prev {margin-left:-660px !important;}
#brand p {
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}
#creator .com_arrow .slick-prev {/* margin-left:-660px !important; */}