@charset "utf-8";

*{box-sizing: border-box;}
.page-section{box-sizing: border-box; padding: 130px 0; background-color: #101010;}
.page-section.title{overflow: visible;}
.border-b{border-bottom: 1px solid #ddd; padding-bottom: 4rem;}
.mb-0{margin-bottom: 0 !important;}
.pb-0{padding-bottom: 0 !important;}
.page-con{width: 100%; max-width: 1630px; padding: 0 15px; margin: 0 auto;}

.ver-line{width: 1px; height: 100px; background-color: #000; margin: 0 auto;}


/* 브랜드스토리 */
.page-bg{width: 100%; height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; background-color: #333; position: relative;}

.bs-tit{width: 100%; max-width: 1630px; padding: 0 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; text-align: center;}
.bs-tit > p{font-size: 20px; font-weight: 500; margin-bottom: 1.5rem; padding-bottom: 1.5rem; position: relative; line-height: 1.5;}
.bs-tit > p::after{content: ""; width: 200px; height: 1px; background-color: rgba(255, 255, 255, 0.4); position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}
.bs-tit > h3{font-size: 45px; font-weight: 700;}

.bc-wrap{width: 100%; display: flex; justify-content: space-between;}
.bc-box:first-child{width: 55%;}
.bc-box:last-child{width: 43%;}
.bc-caption{color: #fff; margin-bottom: 3rem;}
.bc-caption > h3{font-size: 35px; font-weight: 700; margin-bottom: 3rem;}
.bc-caption > p{font-size: 16px; font-weight: 400; line-height: 1.5;}
.bc-img{display: flex;}
.bc-img img{width: 100%;}

.bs-logo{text-align: center; margin-bottom: 3rem;}
.bs-logo img{max-width: 350px; width: 100%; display: inline-block;}

.class-wrap{width: 100%; display: flex; margin-bottom: 70px;}
.class-box{width: 33.333333%; display: flex; position: relative; flex-direction: column;}
.class-box img{width: 100%;}
.class-box > h5{font-size: 20px; color: #fff; display: inline-block; position: absolute; top: 4rem; left: 4rem; z-index: 2; opacity: 0; transition: 1s;}
.class-box > h5::after{content: ""; width: 80px; height: 80px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.7); position: absolute; top: -28px; left: -30px; z-index: -1;}

.class-box > h5.cb2{transition-delay: .2s;}
.class-box > h5.cb3{transition-delay: .5s;}
.class-box > h5.ani.act{opacity: 1;}

.class-box > p{font-size: 16px; color: #fff; line-height: 1.5; margin-top: 1rem;}

.page-section.bs{padding-top: 70px;}

/* 제품차별화 */
.page-tit{width: 100%; max-width: 1630px; padding: 0 15px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); color: #fff; text-align: center;}
.page-tit > h3{font-size: 45px; font-weight: 700; margin-bottom: 1.5rem; padding-bottom: 1.5rem; position: relative;}
.page-tit > h3::after{content: ""; width: 200px; height: 1px; background-color: rgba(255, 255, 255, 0.4); position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);}
.page-tit > p{font-size: 20px; font-weight: 500; line-height: 1.5;}

.pd-img1{display: inline-block; margin-bottom: 1.5rem; max-width: 100px;}
.pd-img2{display: inline-block; margin-top: 1.5rem; max-width: 280px; width: 100%; border: 1px dashed #ddd; border-radius: 30px; padding: 5px;}

.page-bg.pd:nth-child(1){background-color: #101010;}
.page-bg.pd:nth-child(2){background-color: #333;}
.page-bg.pd:nth-child(3){background-color: #666;}

/* 배송안내 */
.ds-con{width: 100%; max-width: 1230px; padding: 0 15px; margin: 0 auto;}
.ds-tit{margin-bottom: 3rem; text-align: center; color: #fff;}
.ds-tit > h3{font-size: 45px; font-weight: 700; margin-bottom: 1rem;}
.ds-tit > p{font-size: 20px; font-weight: 400;}

.dss-wrap{width: 100%; display: flex; justify-content: space-between; margin-bottom: 130px;}
.dss-box{width: 23%;}
.dss-img{display: flex;}
.dss-img img{width: 100%; border-radius: 30px;}

.ds-wrap{width: 100%; display: flex; justify-content: space-between; margin-bottom: 3rem;}
.ds-img{width: 250px; height: 250px; background-color: #fff; border-radius: 30px; display: flex; justify-content: center; align-items: center; position: relative;}
.ds-img img{max-height: 80px;}
.ds-img > span{display: inline-block; font-size: 40px; color: rgba(255, 255, 255, 0.6); line-height: 1; position: absolute; top: 50%; right: -44px; transform: translateY(-50%);}
.ds-box{text-align: center; color: #fff;}
.ds-box > h5{font-size: 16px; font-weight: 700; margin-top: 1rem;}

.ds-caption{padding: 4rem; border-radius: 30px; background: rgba(255, 255, 255, 0.02); color: #fff; margin-bottom: 2rem;}
.ds-caption > h5{font-size: 25px; font-weight: 700; margin-bottom: 1.5rem;}
.ds-caption > h5 > span{display: inline-block; margin-right: 8px;}
.ds-caption > p{font-size: 16px; font-weight: 400; line-height: 1.8;}
.ds-caption:last-child{margin-bottom: 0;}

.ds-etc{margin-top: 3rem;}
.ds-etc > ul{width: 100%; display: flex; justify-content: center;}
.ds-etc > ul > li{font-size: 25px; font-weight: 400; margin-right: 1rem; padding-right: 1rem; position: relative; color: #fff;}
.ds-etc > ul > li > span{font-weight: 700;}
.ds-etc > ul > li::after{content: ""; width: 1px; height: 15px; background-color: #ddd; position: absolute; top: 50%; transform: translateY(-50%); right: 0;}
.ds-etc > ul > li:last-child{margin-right: 0; padding-right: 0;}
.ds-etc > ul > li:last-child::after{display: none;}
.ds-logo{margin-top: 3rem; text-align: center;}
.ds-logo img{width: 100%; display: inline-block; max-width: 250px;}

/* media-query */

@media(min-width:1200px){
  .d-lg-block{display: block;}
  .d-lg-none{display: none;}

  .ani.up.delay{
    transition: 1s opacity 0.2s, 1s transform 0.2s;
  }
  .ani.up.delay2{
      transition: 1s opacity 0.5s, 1s transform 0.5s;
  }
  .ani.up.delay3{
      transition: 1s opacity 0.8s, 1s transform 0.8s;
  }
  .ani.up.delay4{
      transition: 1s opacity 1.1s, 1s transform 1.1s;
  }
  .ani.up.delay5{
      transition: 1s opacity 1.4s, 1s transform 1.4s;
  }
  .ani.up.delay6{
      transition: 1s opacity 1.7s, 1s transform 1.7s;
  }

  .page-bg.pd{background-attachment: fixed;}
}

@media(max-width:1599px){
  .page-con{padding: 0 2rem;}
}
@media(max-width:1199px){
  .d-block{display: block;}
  .d-none{display: none;}
  .page-section{padding: 100px 0;}
  .page-tit{font-size: 30px;}
  .ver-line{height: 50px;}
  .page-con{padding: 0 15px;}

  .bs-tit > p{font-size: 14px; margin-bottom: 1rem; padding-bottom: 1rem;}
  .bs-tit > p::after{width: 100px;}
  .bs-tit > h3{font-size: 30px;}
  .bc-wrap{flex-direction: column;}
  .bc-box:first-child{width: 100%; margin-bottom: 1.5rem;}
  .bc-box:last-child{width: 100%;}
  .bc-caption > h3{font-size: 24px; margin-bottom: 2rem;}
  .bc-caption > p{font-size: 14px;}
  .bc-caption{margin-bottom: 2rem;}
  .page-section.bs{padding-top: 0;}
  .bs-logo img{max-width: 250px;}
  .bs-logo{margin-bottom: 2rem;}

  .class-img{margin-bottom: 70px;}
	.class-img > p{font-size: 13px;}
	.class-tit{margin-bottom: 2rem;}
	.class-tit > h3{font-size: 18px; margin-bottom: 1rem; padding-bottom: 1rem;}
	.class-tit > p{font-size: 13px;}
	.class-wrap{flex-direction: column; margin-bottom: 0;}
	.class-box{width: 100%; margin-bottom: 1.5rem;}
	.class-box > h5{font-size: 18px; top: 2rem; left: 2rem;}
	.class-box > h5::after{width: 60px; height: 60px; top: -17px; left: -17px;}
	.class-bg-caption{padding: 0 15px;}
	.class-bg-caption > h5{font-size: 14px;}
	.class-box > p{font-size: 14px; margin-top: 10px;}

  .page-tit > h3{font-size: 30px; margin-bottom: 1rem; padding-bottom: 1rem;}
  .page-tit > h3::after{width: 100px;}
  .page-tit > p{font-size: 14px;}

  .dss-wrap{margin-bottom: 100px; flex-wrap: wrap;}
  .dss-box{width: 48%; margin-bottom: 1rem;}
  .dss-img img{border-radius: 15px;}
  .dss-box:nth-child(3), .dss-box:nth-child(4){margin-bottom: 0;}

  .ds-wrap{margin-bottom: .5rem;}
  .ds-tit{margin-bottom: 2rem;}
  .ds-tit > h3{font-size: 30px;}
  .ds-tit > p{font-size: 14px;}
  .ds-wrap{flex-wrap: wrap; justify-content: center;}
  .ds-box{width: 48%; display: flex; flex-direction: column; align-items: center; margin-bottom: 1.5rem;}
  .ds-img{width: 120px; height: 120px; border-radius: 20px;}
  .ds-img img{max-height: 35px;}
  .ds-img > span{font-size: 22px; right: -28px;}
  .ds-box:nth-child(2) .ds-img > span{display: none;}
  .ds-box > h5{font-size: 14px;}
  .ds-caption{padding: 2rem 1.5rem; background-color: rgba(255, 255, 255, 0.1); border-radius: 20px;}
  .ds-caption > h5{font-size: 20px;}
  .ds-caption > p{font-size: 14px;}
  .ds-etc > ul{flex-direction: column; align-items: center;}
  .ds-etc > ul > li{font-size: 18px; margin-right: 0; padding-right: 0; margin-bottom: 1rem;}
  .ds-etc > ul > li::after{display: none;}
  .ds-etc{margin-top: 2rem;}
  .ds-logo{margin-top: 2rem;}
  .ds-logo img{max-width: 200px;}
}
@media(max-width:600px){
  
}

/* animation */

.ani.up{
  transform: translateY(100px);
  opacity: 0;
  transition: 1s;
}

.ani.up.act{
  transform: translateY(0);
  opacity: 1;
}