@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 1) MAIN animation
 * 2) MAIN CONTENTS
*/

/* **************************************** * 
 * 사이트 시작시 커버ㄹㄹ
 * **************************************** */
.main-cover{position:fixed; opacity:1; visibility:visible; top:0; left:0; z-index:999; width:100%; height:100%; background:#121212; transition:all 1.2s ease 0s;}
.motion-on .main-cover{opacity:0; visibility:hidden;}

/* **************************************** *
 * Main animation set
 * **************************************** */
[data-txt-motion]{}
[data-txt-motion="hidden"]{overflow:hidden;}
[data-txt-motion="hidden"] > span{display:block; opacity:0;}

.swiper-slide-active [data-txt-motion="hidden"] > span{animation:text_hidden_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="left"]{animation:text_left_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="right"]{animation:text_right_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="up"]{animation:text_up_motion 1.6s ease 0.1s forwards;}
.swiper-slide-active [data-txt-motion="down"]{animation:text_down_motion 1.6s ease 0.1s forwards;}

@keyframes text_hidden_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateY(0);}
}
@keyframes text_left_motion {
 from{opacity:0; transform:translateX(70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_right_motion {
 from{opacity:0; transform:translateX(-70rem);}
 to{opacity:1; transform:translateX(0);}
}
@keyframes text_up_motion {
 from{opacity:0; transform:translateY(70rem);}
 to{opacity:1; transform:translateX(0);}    
}
@keyframes text_down_motion {
 from{opacity:0; transform:translateY(-70rem);}
 to{opacity:1; transform:translateX(0);}
}

/* **************************************** *
 * Site custom
 * **************************************** */
 * {font-family: var(--lang-ko) !important;}
 #main .wrap div {width: auto; height: auto; overflow: visible;}

/* main visual */
.main-visual{height:650rem;}
.main-visual-container,
.main-visual-wrapper,
.main-visual .swiper-slide{height:100% !important;}
.main-visual .swiper-slide::before{content:'';position:absolute;background-position:50% 50%;transition:all 1s ease;transform:scale(1);inset:0;background-repeat:no-repeat;background-size: cover;}
.main-visual__bg{position:absolute; top:0; left:0; width:100%; height:100%;}
.main-visual__bg i{display:block; height:100%; background-position:50% 50%; background-size: cover;}

.main-visual__controls {position:absolute;bottom: 50rem;left:0;z-index:21; display: block; width:100%; height: auto;}
.main-visual__controls .wrap {display:flex;align-items:center;justify-content: flex-end; height: auto;}
.main-visual__count {min-width: 90rem; backdrop-filter: blur(10rem); -webkit-backdrop-filter: blur(10rem); display:flex; align-items:center; justify-content: center; gap: 7rem; height: 50rem; padding: 0 20rem; margin-right: 13rem; font-size:var(--font-15); font-weight: 600; color:var(--op-w30); border-radius: 100rem; background: var(--op-b30); transition: var(--trans-01);}
.main-visual__count i{color: var(--w);}
.main-visual .main-visual__btn {backdrop-filter: blur(10rem); -webkit-backdrop-filter: blur(10rem); position: relative; width: 50rem !important; height: 50rem !important; font-size: 0; border-radius: 100%; background: var(--op-b30); transition: var(--trans-01);}
.main-visual .main-visual__btn::after {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 14rem; background-image: url(../img/layout/arrow-basic_w.svg); transition: var(--trans-01);}
.main-visual__btn.button-next {margin-left: 7rem;}
.main-visual__btn.button-prev::after{transform: rotate(180deg);}

@media (hover: hover) and (pointer: fine){
	.main-visual__btn:hover {background: var(--w);}
	.main-visual__btn:hover::after {background-image: url(../img/layout/arrow-basic.svg);}
}

.btn-store-wrap {z-index: 31; position: absolute; left: calc((100vw - 1280rem) / 2); bottom: 50rem;}
.btn-store {display: flex; align-items: center; padding-right: 30rem; border-radius: 100rem; border: 1px solid var(--op-b10); background: var(--bg-default); box-shadow: 8rem 8rem 10rem rgba(0, 0, 0, .2); transition: var(--trans-01);}
.btn-store i {width: 85rem; height: 85rem; margin-right: 12rem; border-radius: 100%; border: 1px solid var(--op-b10); background: var(--w); transition: var(--trans-01);}
.btn-store i img {height: 57rem;}
.btn-store em {display: block; margin-bottom: 5rem; font-size: var(--font-13); font-weight: 600; color: var(--c-primary);}
.btn-store p {font-size: var(--font-15); color: var(--b-default); transition: var(--trans-01);}
.btn-store p b {color: var(--b-title); transition: var(--trans-01);}
.btn-store-wrap .btn-close {position: absolute; right: -22rem; top: 0;}

@media (hover: hover) and (pointer: fine){
	.btn-store:hover {background: var(--c-primary);}
	.btn-store:hover em,
	.btn-store:hover p,
	.btn-store:hover p b {color: var(--w);}
	.btn-store:hover i {border-color: var(--c-primary);}
}

 @media all and (min-width:2000px){
	.main-visual {height: 769rem;}
 }

 @media all and (max-width:1680px){
	.btn-store-wrap {left: 60rem;}
	.main-visual__controls {right: 60rem;}
	.main-visual__controls .wrap {max-width: none;}
 }

 @media (max-width:1200px){
	.main-visual{height:575rem;}
	.main-visual__controls {bottom: 30rem;}

	.btn-store-wrap {bottom: 30rem;}
}

@media all and (max-width:1023px){
	.main-visual{height: 470rem;}
	.main-visual__count {margin-right: 5rem;}
	.main-visual__controls {right: 40rem;}
	.main-visual__btn.button-next {margin-left: 5rem;}
	.btn-store-wrap {left: 40rem;}
	.btn-store i {width: 80rem; height: 80rem;}
	.btn-store i img {height: 50rem;}
	.btn-store em {margin-bottom: 4rem;}
}

@media (max-width:860px){
	.main-visual {height: 385rem;}
	/* .main-visual .mob-block {display: block !important;}
	.main-visual .mob-none {display: none !important;} */
}

@media (max-width: 540px){
	.main-visual {height: 400rem;}
	.main-visual__controls {right: 20rem; bottom: 20rem;}
	.main-visual__count {min-width: 80rem;height: 40rem;margin-right: 3rem;font-size: var(--font-13);}
	.main-visual .main-visual__btn {width: 40rem !important;height: 40rem !important;}
	.main-visual__btn.button-next {margin-left: 3rem;}
	.btn-store-wrap {display: none;}
}


/* quick */
.main-quick {padding-top: var(--space60);}
.main-quick p {color: var(--b-title); transition: var(--trans-01);}
.main-quick ul {gap: 42rem;}
.main-quick i {width: 120rem; height: 120rem; margin-bottom: 20rem; border-radius: 100%; background: var(--bg-default);}

@media (hover: hover) and (pointer: fine){
	.main-quick li:hover p {color: var(--c-primary);}
}

@media (max-width:860px){
	.main-quick ul {display: grid; grid-template-columns: repeat(6, 1fr); gap: 30rem;}
	.main-quick i {width: 100%; height: auto; aspect-ratio: 1/1;}
	.main-quick i img {width: 52rem;}
}


@media (max-width:540px){
	.main-quick ul {grid-template-columns: repeat(3, 1fr); gap:25rem 0;}
	.main-quick i {width: 75%; margin: 0 auto; margin-bottom: 10rem;}
	.main-quick i img {width: 47rem;}
}

/* merit */
.main-merit {margin: var(--space130) 0;}
.main-merit .main-title-wrap {width: auto; height: auto;}
.main-merit .main-title {position: sticky; top: var(--space60);}
.main-merit .btn-basic {margin-top: 47rem;}
.main-merit__list {flex-shrink: 0; width: 50%;}
.main-merit__item {padding: 45rem 40rem 40rem; background: var(--bg-light);}
.main-merit__item:not(:last-child) {margin-bottom: 24rem;}
.main-merit__item i {flex-shrink: 0; width: 57rem; height: 57rem; margin-right: 30rem; background: var(--c-primary); border-radius: 100%;}
.main-merit__item i img {width: 30rem;}
.main-merit__item em {display: block; margin-bottom: 8rem; color: var(--c-primary);}
.main-merit__item p {line-height: 1.5; margin-top: 30rem; color: var(--op-b50);}

@media (max-width:1023px){
	.main-merit .main-title-wrap {margin-bottom: 40rem;}
	.main-merit .main-title {display: flex; align-items: flex-end; justify-content: space-between;}
	.main-merit .main-title-wrap  .btn-basic {margin-top: 0;}
	.main-merit .wrap {flex-direction: column;}
	.main-merit__list {width: 100%;}
}

@media (max-width:860px){
	.main-merit__item {padding: 45rem 30rem 40rem;}
	.main-merit__item p {margin-top: 24rem;}
	.main-merit__item:not(:last-child) {margin-bottom: 20rem;}
}

@media (max-width:540px){
	.main-merit {margin-top: 80rem;}
	.main-merit .main-title-wrap {margin-bottom: 25rem; text-align: center;}
	.main-merit .main-title-wrap .main-title {justify-content: center;}
	.main-merit__item {padding: 22rem 20rem 30rem;}
	.main-merit__item:not(:last-child) {margin-bottom: 12rem;}
	.main-merit__item em{margin-bottom: 5rem;}
	.main-merit__item i {width: 32rem; height: 32rem; margin-right: 15rem;}
	.main-merit__item i img {width: 20rem;}
	.main-merit__item > div {padding-top: 5rem;}
	.main-merit__item p {margin-top: 20rem;}
	.main-merit__item p br {display: none;}
	.main-merit .btn-wrap {text-align: center;}
	.main-merit .btn-basic {margin-top: 30rem;}
	.main-merit__item > div h6 { font-size: 16rem;}
	span{line-height:1.5;}
}

/* benefit */
.main-benefit {padding: var(--space120) 0 var(--space130);}
.main-benefit__list {margin-top: 46rem;}
.main-benefit__list a {overflow: hidden; display: block; box-shadow: 0 5px 30px 0 rgba(0, 0, 0, 0.06); transition: var(--trans-01);}
.main-benefit__box {position: relative; height: 324rem !important; padding: 35rem 30rem; background: var(--w);}
.main-benefit__box img {position: absolute; right:30rem; bottom: 30rem;}
.main-benefit__box strong {display: block;margin-bottom: 10rem;font-size: 20rem;}
.main-benefit__box span {color: var(--op-b50);}
.main-benefit__item p {display: flex; padding: 24rem 30rem; justify-content: space-between; align-items: center; color: var(--c-primary); border-top: 1px solid var(--op-b10); background: linear-gradient(180deg, #FFF1F2 0%, #FFF 100%); transition: var(--trans-01);}
.main-benefit__item p::after {content:''; display: block; width: 14rem; height: 14rem; background-repeat: no-repeat; background-position: center; background-size: 13rem; background-image: url(../img/layout/arrow-basic_c.svg); transition: var(--trans-01);}

@media (hover: hover) and (pointer: fine){
	.main-benefit__item:hover a {box-shadow: 0 5px 30px 0 rgba(245, 70, 77, 0.3);}
	.main-benefit__item:hover p {color: var(--w); background: var(--c-primary);}
	.main-benefit__item:hover p::after {background-image: url(../img/layout/arrow-basic_w.svg);}
}

@media (max-width:1200px){
	.main-benefit__box {height: 310rem !important;}
	.main-benefit__box img {transform: scale(0.7); transform-origin: right bottom;}
}

@media (max-width:1023px){
	.main-benefit__list {margin-top:37rem; grid-template-columns: repeat(2, 1fr);}
	.main-benefit__box img {transform: scale(1);}
}

@media (max-width:860px){
	.main-benefit__box img {transform: scale(0.75);}
}

@media (min-width:541px){
	.main-product .main-title > h3 br {display: none;}
}

@media (max-width:540px){
	.main-benefit__list {margin-top: 25rem; grid-template-columns: 1fr;}
	.main-benefit__box {height: 200rem !important; padding: 22rem 20rem; padding-right: 120rem;}
	.main-benefit__box img {right: 20rem; bottom: 20rem;}
	.main-benefit__item p {padding:15rem 20rem 17rem; font-size: 14rem;}
	.main-benefit__box strong {font-size: 17rem;}
}

/* product */
.main-product {margin-top: var(--space130);}
.main-product .tab-content {display: block;}
.main-product ul.tabs-new {margin-left: auto;}
.main-product ul.tabs-new li {display: inline-flex; align-items: center; padding: 0; margin-right: 32rem; font-size: var(--default); font-weight: 600; color: var(--op-b30); border: none !important;}
.main-product ul.tabs-new li.active {color: var(--b-title);}
.main-product ul.tabs-new li i {width: 20rem;margin-right: 5rem;}
.main-product ul.tabs-new li i img {max-width: 100%;}
.main-product .product-list {margin-top: 50rem;}

@media (max-width:1023px){
	.main-product .main-title {flex-direction: column; justify-content: center; text-align: center;}
	.main-product ul.tabs-new {margin-left: 0; margin-top: 35rem;}
	.main-product ul.tabs-new li {position: relative; padding-right: 3rem; margin-right: 28rem;}
	.main-product ul.tabs-new li.active::after {position: absolute; left: 0; bottom:-10rem; content:''; width: 100%; height: 2rem; background: var(--b-title);}
	.main-product ul.tabs-new li:last-child {margin-right: 0 !important;}
	.main-product .btn-wrap {margin-top: 40rem;}
}

@media (max-width:540px){
	.main-product .main-title {word-break: keep-all;}
	.main-product ul.tabs-new{margin-top: 30rem;}
	.main-product ul.tabs-new li.active::after {bottom: -7rem;}
	.main-product ul.tabs-new li {margin-right: 12rem;}
	.main-product .product-list {margin-top: 35rem;}
}

/* banner */
.main-banner {margin-top: var(--space110); margin-bottom: var(--space130);}
#main .main-banner a {display: block; float: none; width: 100%;} 

@media (max-width:1023px){
	.main-banner {margin-top: var(--space100); margin-bottom: var(--space120);}
	.main-banner figure {height: 160rem;}
}

@media (max-width:860px){
	.main-banner figure {height: 130rem;}
}

@media (max-width:540px){
	.main-banner figure {height: 116rem;}
}

/* review */
.main-review__slider {overflow: hidden !important; margin-top: 50rem;}
.main-review__slider .swiper-slide {overflow: visible !important;}
.main-review__slider a {overflow: hidden;}
.main-review__slider .swiper-wrapper {width: 100%; height: 100%;}
.main-review__slider .swiper-pagination {margin-top: 42rem;}
.review-thumb {height: 210rem !important;}
.review-thumb img {width: 100%; height: 100%;}
.review-con {padding: 30rem 23rem 35rem; border-top: 1px solid var(--op-b10);}
.review-star li {width: 15rem; height: 15rem; margin: 0 2rem; background-color: var(--w); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: url(../img/layout/ic-star.svg);}
.review-star li.gray {filter: grayscale(1); -webkit-filter: grayscale(1);}
.review-txt {overflow: hidden !important; min-height: 45rem; margin-top: 18rem; font-size: var(--font-16); color: var(--op-b50);}

@media (max-width:1023px){
	.main-review__slider {margin-top: 37rem;}
	.review-thumb {height: 300rem !important;}
	.review-con {padding: 25rem;}
}

@media (max-width:540px){
	.main-review .main-title {text-align: center; word-break: keep-all;}
	.main-review__slider {margin-top: 25rem;}
	.review-thumb {height: 240rem !important;}
	.review-con {padding: 15rem 15rem 25rem;}
	.review-star li {flex-shrink: 0; width: 13rem; height: 13rem; margin: 0 1px;}
	.review-txt {min-height: 42rem; margin-top: 15rem; font-size: 15rem;}
	.main-review__slider .swiper-pagination {margin-top:22rem;}
	.main-review .btn-wrap {margin-top: 37rem;}
}

/* store */
.main-store {overflow: hidden !important; margin-top: var(--space130); padding: var(--space130) 0; background: url(../img/main/store-bg.jpg) no-repeat center / cover;}
.main-store h3 {margin-bottom: 30rem;font-size: var(--font-45);}
.main-store .btn-wrap {margin-top: 45rem; gap: 10rem;}
.main-store__txt p + p {margin-top: 6rem;}
.main-store__txt p:has(span) {gap: 15rem;}
.main-store__txt i {overflow: hidden; width: 22rem; height: 22rem; margin-left: 6rem;}
.main-store__txt img {max-width: 100%;}
.main-store__txt p span:last-child i {transform: scaleY(-1);}
.rolling-img {overflow: hidden !important; margin-top: var(--space80); padding-top: 40rem;}
.rolling-img__box a {width: 302rem; aspect-ratio: 1/1; margin: 0 12rem; box-shadow: 0 10rem 20rem 0 var(--op-b20); transition: var(--trans-01);}
.rolling-img__box img {width: 100%; height: 100%; object-fit: cover; object-position: center; margin: 0;}

@media (hover: hover) and (pointer: fine){
	.rolling-img__box a:hover {transform: translateY(-40rem);}
}

@media (max-width:1023px){
	.main-store .btn-wrap {margin-top: 35rem;}
	.rolling-img__box a {width: 240rem;}
}

@media (max-width:540px){
	.main-store h3 {margin-bottom: 22rem;font-size: 25rem;}
	.main-store__txt p {flex-direction: column;}
	.main-store__txt p:has(span) {gap: 2rem;}
	.main-store__txt p + p {margin-top: 7rem;}
	.main-store__txt i {width: 18rem; height: 18rem; margin-left: 8rem;}
	.main-store .btn-wrap {gap: 8rem;}
	.rolling-img {padding-top: 20rem;}
	.rolling-img__box a {width: 120rem; margin: 0 6rem;}

	@media (hover: hover) and (pointer: fine){
		.rolling-img__box a:hover {transform: translateY(-20rem);}
	}
}

/* 제품 순서변경 예시 */
/*@media (max-width: 768px){
    .product-item a{
        display:flex;
        flex-direction:column;
    }

    .product-title-wrap{ order:2; }
    .product-thumb-wrap{ order:1; }
    .product-price-wrap{ order:3; }
}*/