@charset "utf-8"; /* ******************* *
* 메인 : 공통
* ******************* */
/* .main__sect { margin-bottom: 10rem; } */
.main__sect .sect__header { margin-bottom: 3.4rem; } 
.main__sect .sect__title { font-size: 4.0rem; font-weight: 700; line-height: 1.2; } 
.main__sect .sect__title.white { color: #fff; } 

.btn__more { display: inline-flex; justify-content: center; align-items: center; min-width: 180px; height: 50px; border: 1px solid #fff; box-sizing: border-box; color: #fff; font-size: max(1.6rem, 14px); text-align: center; position: relative; z-index: 1; transition: .35s; } 
.btn__more::before { content: ''; width: 0%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; bottom: 0; margin: auto; z-index: -1; transition: .35s; } 
.btn__more:hover { color: var(--color-main); } 
.btn__more:hover::before { width: 100%; } 

@media (max-width: 768px){
 .btn__more { min-width: 160px; height: 45px; } 
 }
@media (max-width: 640px){
 .btn__more { min-width: 140px; } 
 }



/* ******************* *
* 메인 : MVIS
* ******************* */
.mvis__sect { height: 100vh; } 
.mvis__sect .mvis__slider { height: 100%; } 
.mvis__sect .mvis__slider-item { height: 100%; position: relative; } 
.mvis__sect .mvis__title-wrap { width: 100%; color: #0C1659; position: absolute; top: 65%; left: 0; z-index: 10; } 
.mvis__sect .mvis__title-wrap .cinner { max-width: 1500px; text-align: center; } 
.mvis__sect .mvis__title-wrap .title { margin-bottom: 2.0rem; font-size: 6.50rem; line-height: 1.3; } 
.mvis__sect .mvis__title-wrap .text { font-size: 3.6rem; line-height: 1.6; font-weight: 500; } 
.mvis__sect .mvis__img { width: 100%; height: 100%; position: absolute; inset: 0; margin: auto; } 
.mvis__sect .mvis__img img { width: 100%; height: 100%; object-fit: cover; } 
/* 애니메이션 */
/* .mvis__sect .mvis__title-wrap .title,
.mvis__sect .mvis__title-wrap .text,
.mvis__sect .mvis__title-wrap .btn__more { opacity: 0; transform: translateY(40px); } 
.mvis__sect .mvis__slider-item.active .mvis__title-wrap .title,
.mvis__sect .mvis__slider-item.active .mvis__title-wrap .text,
.mvis__sect .mvis__slider-item.active .mvis__title-wrap .btn__more { opacity: 1; transform: translateY(0); } 
.mvis__slider-item.active .mvis__title-wrap .title { transition: opacity .8s, transform .8s; transition-delay: .2s; } 
.mvis__slider-item.active .mvis__title-wrap .text { transition: opacity .8s, transform .8s; transition-delay: .5s; } 
.mvis__slider-item.active .mvis__title-wrap .btn__more { transition: opacity .8s, transform .8s; transition-delay: .8s; } */

@media (max-width: 1024px){
 .mvis__sect .mvis__title-wrap .title { font-size: 6rem; } 
 }
 @media (max-width: 768px){
 .mvis__sect .mvis__title-wrap .title { font-size: 5.25rem; } 
 .mvis__sect .mvis__title-wrap .text {font-size: 3rem;}
 }
@media (max-width: 640px){
 .mvis__sect .mvis__title-wrap .title { font-size: 4.5rem; } 
 .mvis__sect .mvis__title-wrap .text {font-size: 2.8rem;}
 }
@media (max-width: 480px){
 .mvis__sect .mvis__title-wrap .title { font-size: 4.2rem; } 
 .mvis__sect .mvis__title-wrap .text {font-size: 2.3rem;} 
 }

.main__sect { overflow:hidden; } 

/* ******************* *
* 메인 : About
* ******************* */
.main__about { position: relative; } 
.main__about .cinner { max-width: 1528px; width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 
.main__about .sect__header { margin-bottom: 1.8rem;display:flex;flex-direction: column;gap:50px;align-items: center; } 
.main__about .sect__title { font-size: 4.2rem; text-align: center; line-height:1.4; font-weight: 500; color:var(--color-main)!important} 
.main__about .sect__content { color: #fff; } 
.main__about .sect__content .text { font-size:4rem; line-height: 1.6; text-align: center; } 
.main__about .sect__bg { width: 100%; height: 100%; } 
.main__about .sect__bg img { width: 100%; aspect-ratio: 1920 / 882; object-fit: cover; } 
@media (max-width: 1200px){
 .main__about .sect__title { font-size: 4rem; } 
 .main__about .sect__content .text {font-size: 2.8rem;}
 }

@media (max-width: 640px){
 .main__about .sect__content .text { margin-bottom: 6rem; } 
 .main__about .sect__bg img {height:600px}
 }
@media all and (max-width: 500px) {
    .main__about .sect__title {font-size: 3.5rem;} 
    .main__about .sect__content .text {font-size: 2.3rem;}
} 
/* ******************* *
* 메인 : main__shop_info
* ******************* */
.main__shop_info { } 
.main__shop_info .info { display: flex; } 
.main__shop_info .info .left { width:50% } 
.main__shop_info .info .right { width:50% } 

.main__shop_info .info .img_wrap { } 
.main__shop_info .info .txt_wrap { background: var(--color-main); } 
.main__shop_info .info .txt_wrap a { color: #fff; width: 100%; display: flex; height: 100%; align-items: center; justify-content: center; flex-direction: column; text-align: center; } 
.main__shop_info .info .txt_wrap h3 { font-size: 3.6rem; margin-bottom:2.6rem; } 
.main__shop_info .info .txt_wrap p { font-size:3rem; margin-bottom:7rem; line-height:1.5 } 
.main__shop_info .info .txt_wrap .fake_link { width:245px; height:52px; font-size:2.5rem; border:1px solid #fff; border-radius:30px; display:flex; align-items:center; justify-content:center; z-index:2; position:relative; overflow:hidden; } 
.main__shop_info .info .txt_wrap .fake_link span { position:relative; z-index:2; } 
.main__shop_info .info .txt_wrap:hover .fake_link { color:#DB0032; border:2px solid #DB0032; } 
.main__shop_info .info .txt_wrap .fake_link:before { position:absolute; content:''; width:0%; height:100%; background:#fff; transition:.5s; left:0; bottom:0; z-index:1; } 
.main__shop_info .info .txt_wrap:hover .fake_link:before { width:100%; transition:.5s; } 

@media (max-width: 1200px){
 .main__shop_info .info .txt_wrap h3 { font-size: 3.3rem; } 
 .main__shop_info .info .txt_wrap p {font-size: 2rem;}
 .main__shop_info .info .txt_wrap .fake_link {font-family: 1.8rem;}
 }
@media (max-width: 768px){
    .main__shop_info .info {flex-direction: column;}
    .main__shop_info .info:nth-child(2) {flex-direction: column-reverse;}
 .main__shop_info .info .left,
.main__shop_info .info .right { width:100% } 
.main__shop_info .info .txt_wrap {aspect-ratio: 1/1;}
.main__shop_info .info .txt_wrap h3 {font-size: 5rem;}
.main__shop_info .info .txt_wrap p {font-size: 3.5rem;}

}
@media all and (max-width: 500px) { 
    .main__shop_info .info .txt_wrap h3 {font-size: 30px;}
    .main__shop_info .info .txt_wrap p {font-size: 20px;}
} 

/* ******************************************** *
* 메인 : 신상품, 베스트 상품 리스트 스킨 (main.60.skin.php)
* ******************************************** */
.main__sect .items__list { display: flex; flex-wrap: wrap; } 
.main__sect .items__item { width: calc(100% / 3 ); } 
.main__sect .items__item .item__img { width: 100%; aspect-ratio: 640 / 992;; overflow: hidden; position: relative; } 
.main__sect .items__item .item__img a { display: block; width: 100%; height: 100%; position: relative; overflow: hidden; } 
.main__sect .items__item .item__img img { width: 100%; height: 100%; object-fit: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(1); transition: .3s ease; } 
.main__sect .items__item .item__img a:hover img { transform: translate(-50%, -50%) scale(1.05); } 
.main__sect .items__item .item__img .soldout { display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; background: rgba(0,0,0,.5); color: #fff; font-family: var(--font-Outfit); font-size: max(.90rem, 17px); font-weight: 600; position: absolute; inset: 0; margin: auto; } 
.main__sect .items__item .item__contents { font-size: max(1.80rem, 18px); line-height: 1.2; background: var(--color-main); } 
.main__sect .items__item .item__contents a { display:flex; align-items: center; justify-content: space-between; color:#fff; padding:15px 20px } 
.main__sect .items__item .item__contents a p { font-size: 2rem; } 
.main__sect .items__item .item__contents .item__title { display: block; margin-bottom: 5px; font-size: 2.0rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } 
.main__sect .items__item .item__contents .item__cost { font-size: 2rem; } 
/* .main__sect .items__slide-ctrls { display: none; margin-top: 20px; } 
.main__sect .items__slide-ctrls .data-dots { display:flex; justify-content:center; align-items: center; gap:8px; } 
.main__sect .items__slide-ctrls .data-dots .swiper-pagination-bullet { width:8px; height:8px; border-radius:50%; background: #858585; cursor:pointer; transition:.3s; } 
.main__sect .items__slide-ctrls .data-dots .swiper-pagination-bullet-active { background: var(--color-main); } 
.main__sect .items__empty { padding: 12rem 0; color: #555; font-size: 1.8rem; text-align: center; }  */

@media (max-width: 1400px) { } 

@media all and (max-width: 1024px) {

    .main__sect .items__item .item__contents .item__title,
    .main__sect .items__item .item__contents a p {font-size: 1.6rem;}
 } 
 
@media (max-width: 768px) {
    .main__sect .items__list {flex-wrap: nowrap;}
    .main__sect .items__item .item__img {aspect-ratio: 1/1;}
    .main__sect .items__item .item__contents .item__title, 
    .main__sect .items__item .item__contents a p {font-size: 2rem;}
 } 
@media all and (max-width: 500px) { 
} 
/* ******************************************** *
* 메인 : 베스트 상품 
* ******************************************** */

.main__best .items__item { width:50% } 
.main__best .items__item .item__img { aspect-ratio: 1/1; } 

@media (max-width: 1024px){
 }

 /* ******************************************** *
* 메인 : main__about_list
* ******************************************** */

.main__about_list { } 
.main__about_list .list_wrap { display:flex } 
.main__about_list .list_wrap li { position:relative; background:linear-gradient(#161616,#1226AA); width:25%; color:#fff; aspect-ratio:480/1055; border-right:1px solid #787373; overflow:hidden; transition:.5s; } 
.main__about_list .list_wrap li:before { content:''; position:absolute; inset:0; background-repeat:no-repeat; background-position:center center; background-size:cover; opacity:0; transition:opacity .8s ease; z-index:0; } 
.main__about_list .list_wrap li:nth-child(1):before { background-image:url(../img/main/sec6_img01.png); } 
.main__about_list .list_wrap li:nth-child(2):before { background-image:url(../img/main/sec6_img02.png); } 
.main__about_list .list_wrap li:nth-child(3):before { background-image:url(../img/main/sec6_img03.png); } 
.main__about_list .list_wrap li:nth-child(4):before { background-image:url(../img/main/sec6_img04.png); } 
.main__about_list .list_wrap li.on:before { opacity:1; } 
.main__about_list .list_wrap li > div { height: 100%; display: flex; flex-direction: column; padding: 100px 60px; position:relative; z-index:1;justify-content: space-between; } 
.main__about_list .list_wrap li h3 { font-size: 3.2rem;line-height: 1.5; } 
.main__about_list .list_wrap li h3 .num { font-size: 12.8rem; display: block;  } 
.main__about_list .list_wrap li h3 .ko {font-size: .6em;font-weight: 400;}
.main__about_list .list_wrap li:hover h3 .num { color:#DB0032 } 
.main__about_list .list_wrap li p { font-size: 3rem; font-weight: 500; line-height: 1.3;display: flex;
    flex-direction: column;
    gap: 10px } 


@media (max-width: 1400px){
 .main__about_list .list_wrap li > div { padding: 0 30px; } 
 .main__about_list .list_wrap li h3 { font-size: 2.3rem; padding-top: 80px; padding-bottom: 350px; } 
 .main__about_list .list_wrap li h3 .num { font-size: 9rem; } 
 .main__about_list .list_wrap li p { font-size: 2.3rem; } 
 }
@media (max-width: 1200px) { 
     .main__about_list .list_wrap li h3 { font-size: 2.5rem;padding-bottom: 280px; } 
 .main__about_list .list_wrap li h3 .num { font-size: 8rem; } 
 .main__about_list .list_wrap li p { font-size: 2rem; } 
} 
@media all and (max-width: 1024px) { 
    .main__about_list .list_wrap li > div {padding:30px;justify-content: space-between;}
    .main__about_list .list_wrap li h3 {padding-bottom:0; padding-top:0}

}
@media all and (max-width: 768px) { 
    .main__about_list .list_wrap {flex-wrap:wrap}
    .main__about_list .list_wrap li {width:50%; aspect-ratio: 1/1;}
    .main__about_list .list_wrap li h3 .num {font-size: 5rem;}
} 

@media all and (max-width: 500px) { 
    .main__about_list .list_wrap li h3 .num {font-size: 80px;}
    .main__about_list .list_wrap li h3 {font-size: 30px;;}
    .main__about_list .list_wrap li p{font-size: 30px;;}
    .main__about_list .list_wrap li {width:100%;}
}