@charset "utf-8";

/*CSS Common*/

*{box-sizing: border-box}
body{background-color: var(--color-background-lightest)}

@media screen and (min-width:1281px){
	.main{padding:100px 0 0 0}
	.inner{padding: 0}
}

@media screen and (max-width:1280px){
	.main{padding:40px 0 0 0}
}

@media screen and (max-width:767px){

}
/*CSS Common*/

/*sec-best-product:베스트,신상품*/
.sec-best-product{box-sizing: content-box}
.best-produt-wrap{display: flex; justify-content: center; flex-direction: column; align-items: center}
.best-product-title{display: inline-block; position: relative; font-family: "Montserrat", serif}
.best-product-title::after{position: absolute; content:''; background-image: url("/image/main/bestItem_after.png"); background-size: contain; background-repeat: no-repeat}
.best-product-type{text-align: center}
.best-product-type-btn{color: var(--color-text-2)}
.best-product-type-btn.on{font-weight: 600; color: var(--color-text-5)}
.best-product-list, .new-product-list{display: none}
.best-product-list.on, .new-product-list.on {display: block}
a.box:hover .imgW{box-shadow: 2px 4px 7px rgb(0 1 29 / 15%)}

@media screen and (min-width:1281px){
	.sec-best-product{padding: 10.5rem 1rem 13rem}
	.best-product-title{font-size: 3.75rem}
	.best-product-title::after{right: -20px; bottom: 12px; width: 12px; height: 12px}
	.best-product-type{margin:1.88rem 0 6.25rem}
	.best-product-type-divider{margin: 0 20px}
	.best-product-type-btn{font-size: 1.13rem}
}

@media screen and (max-width:1280px){
	.sec-best-product{padding: 7rem 3vw}
	.best-product-title{font-size: 2.5rem}
	.best-product-title::after{width: 10px; height: 10px; right: -15px; bottom: 7px}
	.best-product-type{margin:1rem 0; font-size: 15px}
	.best-product-type-divider{margin: 0 10px}
	.best-product-type-btn{font-size: 15px}
}

@media screen and (max-width:767px){

}
/*sec-best-product:베스트,신상품*/

/*sec-brand-story:브랜드 스토리*/
.sec-brand-story{box-sizing: content-box}
.brand-story-wrap{display: flex; justify-content: center}
h2.story-left-title{color: var(--color-text-4); display: inline-block; font-family: "Montserrat", serif}
span.story-left-title{position: relative; color: var(--color-text-5)}
span.story-left-title::after{position: absolute; content:''; background-image: url("/image/main/bestItem_after.png"); background-size: contain; background-repeat: no-repeat}
.story-left-img img{width: 100%; display: block; object-fit: cover}
.story-left-txt{color: var(--color-text-2); line-height: 170%}

.storty-right-point{color: var(--color-text-4)}
.story-right-txt{color: var(--color-text-2); line-height: 170%}
.story-right-img{position: relative}
.story-right-img img{width: 100%; display: block; object-fit: cover}
.story-right-img-txt{position: absolute; color: var(--color-text-1); white-space: pre-line}
.story-line{position: absolute; bottom: 10px; right: 0; width: 100%; border-top: 1px solid var(--color-border-2)}
.story-right-txt1{color: var(--color-text-2); display: inline-block; position: relative; line-height: 1}
.story-right-txt1:after{content: ""; position: absolute; top: 50%; left: 100%; transform: translateY(-50%); width: 100vw; height: 2px; background: var(--color-border-2); margin-left: 20px}

@media screen and (min-width:1281px){
	.sec-brand-story{padding: 0 1rem}
	.brand-story-wrap{gap: 6.25rem}
	h2.story-left-title{white-space: pre-line; font-size: 3.75rem}
	span.story-left-title::after{right: -20px; bottom: 13px; width: 12px; height: 12px}
	.story-left-img{margin: 3.25rem 0 9.75rem} 
	.storty-left-point{font-size: 1.63rem; margin-bottom: 2.81rem}
	.story-left-txt{white-space: pre-line; font-size: 1.25rem}
	
	.story-right-cont{margin-bottom: 6.81rem}
	.storty-right-point{white-space: pre-line; font-size: 1.63rem; margin-bottom: 3.31rem}
	.story-right-txt{white-space: pre-line; font-size: 1.25rem}
	.story-right-txt1{font-size: 1.25rem; margin-top: 2.13rem}
	.story-right-img-txt{font-size: 3.77rem; bottom: 4.38rem; left: 4.38rem}
}

@media screen and (max-width:1280px){
	.sec-brand-story{padding: 0 3vw}
	.brand-story-wrap{gap: 3rem}
	h2.story-left-title{white-space: pre-line; font-size: 2.5rem}
	span.story-left-title::after{right: -15px; bottom: 8px; width: 10px; height: 10px}
	.story-left-img{margin: 1.5rem 0 4rem}
	.storty-left-point{font-size: 1.44rem; margin-bottom: 1.5rem}
	.story-left-txt{font-size: 15px}
	
	.story-right-cont{margin-bottom: 3rem}
	.storty-right-point{font-size: 1.44rem; margin-bottom: 1.5rem}
	.story-right-txt{font-size: 15px}
	.story-right-txt1{font-size: 15px; margin-top: 1.5rem}
	.story-right-txt1:after{display: none}
	.story-right-img-txt{font-size: 2.5rem; bottom: 3rem; left: 3rem}
}

@media screen and (max-width:767px){
	.brand-story-wrap{flex-direction: column}
}

@media screen and (max-width:320px){
	.story-right-img-txt{font-size: 1.7rem; bottom: 2rem; left: 2rem}
}

/*sec-brand-story:브랜드 스토리*/

/*sec-product-intro:제품 보러가기*/
.sec-product-intro{background-color: var(--color-background-2)}
.product-intro-wrap{display: flex; justify-content: space-between; align-items: center; gap: 3rem}

.intro-left-name{font-family: "Montserrat", serif}
.intro-left-link{border: 1px solid var(--color-button-border); display: flex; align-items: center; justify-content: center; cursor: pointer}
.intro-left-link:hover{border: none; background-color: var(--color-primary); color: var(--color-text-1)}
.intro-left-txt{line-height: 170%}

.intro-right-bg{background: url(/image/main/product_intro_right.jpg) no-repeat center; background-size: cover}
.intro-right-bg img{width: 100%; display: block; object-fit: cover}

@media screen and (min-width:1281px){
	.sec-product-intro{padding: 6.56rem 1rem; margin: 12.13rem 0 13.75rem}
	
	.intro-left-title{font-size: 1.5rem}
	.intro-left-name{white-space: pre-line; font-size: 4.38rem; margin: 2.69rem 0 3.31rem}
	.intro-left-txt{white-space: pre-line; font-size: 1.13rem; margin-bottom: 4.25rem}
	.intro-left-link{font-size: 1.13rem; color: var(--color-text-4); width: 180px; height: 61px}
	
	.intro-right-bg{padding:4.19rem 12.5rem}
}

@media screen and (max-width:1280px){
	.sec-product-intro{padding: 4rem 3vw; margin: 7rem 0}
	
	.intro-left-title{font-size: 16px}
	.intro-left-name{font-size: 2.5rem; margin: 1.5rem 0 2rem}
	.intro-left-txt{font-size: 15px; margin-bottom: 2rem; white-space: pre-line}
	.intro-left-link{font-size: 15px; color: var(--color-text-4); height: 50px}
	
	.intro-right-bg{padding:3rem 9rem}
}

@media screen and (max-width:767px){
	.product-intro-wrap{flex-direction: column}
	
	.intro-left{text-align: center}
	.intro-left-txt{white-space: normal}
	.intro-right-bg{display: flex; justify-content: center}
	.intro-right-bg img{width: 70%}
}
/*sec-product-intro:제품 보러가기*/


/*sec-product-view:제품 보기*/
.sec-product-view{box-sizing: content-box}
.product-view-wrap{text-align: center}
.product-view-title{position: relative; display: inline-block; font-family: "Montserrat", serif}
.product-view-title::after{position: absolute; content:''; background-image: url("/image/main/bestItem_after.png"); background-size: contain; background-repeat: no-repeat}

.product-view-list{display: flex; flex-wrap: wrap}
.product-view-item .imgW{position: relative; box-sizing: border-box}
.product-view-item .Tmask{background-color: rgba(0, 0, 0, .1)}
.product-view-item .Rmask{background-color: rgba(0, 0, 0, .1)}
.product-view-item .Bmask{background-color: rgba(0, 0, 0, .1)}
.product-view-item .Lmask{background-color: rgba(0, 0, 0, .1)}
.product-view-item-link{display: flex; flex-direction: column; align-items: center}
.product-view-item-link:hover .imgW{box-shadow: 2px 4px 7px rgb(0 1 29 / 15%)}
.product-view-item img{width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block}
.product-view-item-title{display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; text-overflow: ellipsis; word-break: keep-all}
.product-view-item-keyword{display: flex; justify-content: center; gap: 5px}
.keyword{width: 42px; height: 23px; display: flex; justify-content: center; align-items: center; font-size: 14px}
.product-view-item-best{background-color: var(--color-background-lightest); border: 1px solid var(--color-border-3)}
.product-view-item-new{background-color: var(--color-primary); color: var(--color-text-1)}

.product-view-link{border: 1px solid var(--color-button-border); display: flex; align-items: center; justify-content: center}
.product-view-link:hover{background-color: var(--color-primary); color: var(--color-text-1); border: none}

@media screen and (min-width:1281px){
	.sec-product-view{padding: 0 1rem}
	.product-view-title{font-size: 3.75rem; margin-bottom: 7.31rem}
	.product-view-title::after{right: -20px; bottom: 12px; width: 12px; height: 12px}
		
	.product-view-list{gap: 3.16rem}
	.product-view-item{width: calc((100% - (3.16rem * 2)) / 3)}
	.product-view-item-title{margin: 2.44rem 0 1.19rem}
	
	.product-view-link{font-size: 1.13rem; color: var(--color-text-4); width: 180px; height: 61px; margin: 4rem auto 0}
}

@media screen and (max-width:1280px){
	.sec-product-view{padding: 0 3vw}
	.product-view-title{font-size: 2.5rem; margin-bottom: 4rem}
	.product-view-title::after{right: -15px; bottom: 7px; width: 10px; height: 10px}
	
	.product-view-list{gap: 2rem}
	.product-view-item{width: calc((100% - (2rem * 2)) / 3)}
	.product-view-item-title{font-size: 16px; margin: 1.2rem 0}
	
	.product-view-link{font-size: 15px; color: var(--color-text-4); width: 150px; height: 50px; margin: 3rem auto 0}
}

@media screen and (max-width:1024px){
	.product-view-item{width: calc((100% - (2rem * 1)) / 2)}
}

@media screen and (max-width:767px){
	.product-view-title{margin-bottom: 3rem}
	
	.product-view-list{gap: 3rem}
	.product-view-item{width:100%}
	.keyword{font-size: 14px}
}
/*sec-product-view:제품 보기*/

/*sec-product-img:제품 이미지*/
.product-img-top-img{margin-bottom: 3.13rem}
.product-img-top-img img{width: 100%; object-fit: cover; display: block}
.product-img-bottom{display: flex; justify-content: space-between}
.product-img-bottom img{width: 100%; object-fit: cover; display: block}
@media screen and (min-width:1281px){
	.sec-product-img{box-sizing: content-box; padding: 12.5rem 0 0}
	
	.product-img-title{white-space: pre-line; color: var(--color-text-1); font-size: 3.75rem; margin-bottom: 2.13rem}
	.product-img-bottom{gap: 3.13rem}
}

@media screen and (max-width:1280px){
	.sec-product-img{padding: 7rem 0 0}
}

@media screen and (max-width:767px){
	.product-img-top-img{margin-bottom: 2rem}
}
/*sec-product-img:제품 이미지*/

/*sec-instagram:인스타그램*/
.instagram-icon{text-align: center}
.instagram-title{text-align: center; font-family: "Montserrat", serif; line-height: 1}

#instaFeed {overflow:hidden; padding: 1px 0;}
#instaFeed .swiper-wrapper{position:relative; display:-ms-flexbox; display:-webkit-flex; display:flex; -ms-flex-direction:row; -webkit-flex-direction:row; flex-direction:row; will-change:transform}
#instaFeed .swiper-slide{position:relative; z-index: -1; height:100%; -ms-flex:none; -webkit-flex:none; flex:none; background-color:#fff; transition:all .3s}
#instaFeed img{display: block; width: 100%; aspect-ratio: 1/1.3; object-fit: cover; flex-shrink: 0;height: 100%; position: relative; transition: all .3s}
#instaFeed a{display:block; overflow:hidden; border: 1px solid rgb(0 0 0 / 10%)}
#instaFeed a:hover, #instaFeed a:focus{z-index:1}
#instaFeed a:hover img, #instaFeed a:focus img{transform:scale(1.2)}

@media screen and (min-width:1281px){
	.sec-instagram{padding: 12.5rem 1rem}
	.instagram-icon{margin-bottom: 1.81rem}
	.instagram-title{font-size: 2.16rem; margin-bottom: 6.75rem}
}

@media screen and (max-width:1280px){
	.sec-instagram{padding: 7rem 3vw}
	.instagram-icon{margin-bottom: 1rem}
	.instagram-title{font-size: 2.5rem; margin-bottom: 2.5rem}
}

@media screen and (max-width:767px){
}
/*sec-instagram:인스타그램*/