@charset "utf-8";

/*공통*/
.txt-yellow {color:#ffd508 !important;}
.doc-cnt {margin-bottom:100px;}
.doc-cnt:last-child {margin-bottom:0 !important;}

.pt100 {padding-top:100px;}
.pt120 {padding-top:120px;}
.pt140 {padding-top:140px;}

/* 별점 */
.grade-star {background-size: contain; background-position: 50% 50%; background-repeat: no-repeat; height: 16px; width: 100%;} 
.grade-star.star5 {background-image: url("../images/sub/star5.png");}
.grade-star.star4 {background-image: url("../images/sub/star4.png");}
.grade-star.star3 {background-image: url("../images/sub/star3.png");}
.grade-star.star2 {background-image: url("../images/sub/star2.png");}
.grade-star.star1 {background-image: url("../images/sub/star1.png");}

/* 쥬베라 */

.about .top-bg-box {position:relative;}
.top-bg-box .img {position:absolute; left:0; top:0;}
.about .dc1 {position:relative;}
.about .dc1 .txt-wrap {position:absolute; bottom:0; left:0; padding-left:40px; padding-bottom:50px;}
.about .dc1 .txt-wrap  .tit {font-family:var(--font-marcellus); font-size:36px; font-weight:400; line-height:1.2em; letter-spacing:0; color:#2c2c2c; margin-bottom:20px;}
.about .dc1 .txt-wrap  p {padding-left:20px; font-weight:400; letter-spacing:-0.04em; color:#505050;}

.about .dc2 .tit-wrap {margin-bottom:200px;}
.about .dc2 .tit-wrap .img {margin-bottom:55px;}
.about .dc2 .tit-wrap .tit {font-size:30px; font-weight:700; line-height:1.2em; letter-spacing:-0.04em; color:#2c2c2c; margin-bottom:25px;}
.about .dc2 .tit-wrap .txt {font-weight:400; letter-spacing:-0.04em; color:#505050;}
.about .dc2 .wrap {position:relative; height:1280px;}
.about .dc2 .wrap .box {position:absolute;}
.about .dc2 .wrap .box:nth-child(odd) {text-align:right;}
.about .dc2 .wrap .box .img {margin-bottom:46px;}
.about .dc2 .wrap .box1 {right:0; top:0;}
.about .dc2 .wrap .box2 {left:0; top:120px;}
.about .dc2 .wrap .box3 {bottom:0; left:40%;}
.about .dc2 .wrap .tt {font-size:15px; font-weight:700; line-height:1.2em; letter-spacing:-0.04em; color:#a8a8a8; margin-bottom:16px;}
.about .dc2 .wrap .tx {font-family:var(--font-marcellus); font-size:48px; font-weight:400; line-height:1.2em; letter-spacing:0; color:#121212;}

.about .dc3 .deco-txt {font-family:var(--font-marcellus); font-size:140px; font-weight:400; color:#f4f4f4; letter-spacing:0.12em; line-height:1em; text-align:center;}
.about .dc3 .tit-wrap {padding-left:42px; margin-bottom:90px; position:relative; margin-top:-60px;}
.about .dc3 .tit-wrap .tit {font-size:66px; font-weight:500; line-height:1.2em; letter-spacing:-0.04em; color:#2c2c2c; margin-bottom:20px;}
.about .dc3 .tit-wrap .txt {font-weight:400; letter-spacing:-0.04em; color:#505050;}
.about .dc3 ul {display:flex; margin:0 -15px;}
.about .dc3 ul li {width:33.333%; padding:0 15px;}
.about .dc3 ul li img {width:100%;}

.tracking-in-expand {animation: tracking-in-expand 1s 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;}
@keyframes tracking-in-expand {
  0% {
    letter-spacing: -0.5em;
    opacity: 0;
  }
  40% {
    opacity: 0.6;
  }
  100% {
    opacity: 1;
  }
}

/* 제품소개 */
.product-cate {padding-bottom:20px; border-bottom:1px solid #505050; margin-bottom:60px;}
.product-cate ul {display:flex;}
.product-cate ul li {margin-right:46px;}
.product-cate ul li:last-child {margin-right:0;}
.product-cate ul li a {display:block; position:relative; font-weight:700; line-height:1.2em; letter-spacing:-0.04em; color:#a8a8a8;}
.product-cate ul li a:hover,
.product-cate ul li.active a {color:#2c2c2c;}
.product-cate ul li a:before {content:""; position:absolute; width:7px; height:7px; background:#2c2c2c; border-radius:100%; left:0; top:-20px; opacity:0; transform:translate(-5px,-5px); transition:0.2s all ease;}
.product-cate ul li a:hover:before,
.product-cate ul li.active a:before {opacity:1; transform:translate(0);}

/* 콜렉션 */
.collection .doc-cnt {margin-bottom:160px;}
.collection .top-cont .tit-wrap {position:relative; z-index:1;}
.collection .top-cont .tit-wrap p {font-size:30px; font-weight:500; line-height:1.2em; letter-spacing:-0.04em; color:#2c2c2c;}
.collection .top-cont .tit-wrap p strong {font-weight:700;}
.collection .top-cont .tit-wrap h3 {font-family:var(--font-marcellus); font-size:86px; font-weight:400; line-height:1.2em; letter-spacing:0; color:#2c2c2c;}
.collection .top-cont .img-wrap {max-width:680px; margin:-40px auto 0 auto;}
.collection .top-cont .img-wrap .inner {display:flex; justify-content:space-between; margin-top:26px;}
.collection .top-cont .img-wrap .img {position:relative;}
.collection .top-cont .img-wrap .img:before {content:""; position:absolute; width:15px; height:318px; background:url("../images/sub/collection_txt.png") no-repeat 50% 50%; background-size:contain; right:-44px; top:0;}
.collection .top-cont .img-wrap.ver2 .img:before {top:auto; bottom:0;}
.collection .top-cont .img-wrap .tt {font-size:26px; font-weight:500; line-height:1.3em; letter-spacing:-0.04em; color:#2c2c2c;}
.collection .top-cont .img-wrap .tx {font-size:16px; font-weight:500; line-height:1.5em; letter-spacing:-0.04em; color:#505050; text-align:right;}
.collection .top-cont .img-wrap .tx strong {color:#2c2c2c;}

.collection .dc2 .img {padding:0 100px;}
.collection .dc2 img {width:100%;}

.collection .dc3 .system-info {text-align:center;}
.collection .dc3 .tt {font-size:15px; font-weight:700; line-height:1.2em; letter-spacing:-0.04em; color:#a8a8a8; margin-bottom:20px;}
.collection .dc3 .tit {font-family:var(--font-marcellus); font-size:48px; font-weight:400; line-height:1.2em; letter-spacing:0; color:#2c2c2c; margin-bottom:60px;}
.collection .dc3 ul {display:flex; justify-content:center;}
.collection .dc3 ul li {width:240px; height:240px; display:flex; align-items:center; justify-content:center; border:1px solid #505050; border-radius:100%; margin-left:-10px; font-size:20px; font-weight:500; line-height:1.2em; letter-spacing:-0.04em; color:#2c2c2c;}

.collection .dc4 .imgWrap {display:flex; justify-content:space-between; margin-bottom:180px;}
.collection .dc4 .imgWrap .img:last-child {margin-top:113px;}
.collection .dc4 .txt-wrap {display:flex; align-items:center; justify-content:space-between;}
.collection .dc4 .txt-wrap p {font-size:48px; font-weight:500; line-height:1.2em; letter-spacing:-0.04em; color:#2c2c2c;}
.collection .dc4 .txt-wrap .more a {display:inline-block; padding:28px 130px 28px 40px; position:relative; font-family:var(--font-marcellus); font-size:16px; font-weight:400; line-height:1em; letter-spacing:-0.04em; color:#2c2c2c; border:1px solid #505050; border-radius:100vh;}
.collection .dc4 .txt-wrap .more a:before {content:""; position:absolute; width:51px; height:11px; background:url("../images/common/arw_btn_black.png") no-repeat 50% 50%; background-size:contain; right:40px; top:50%; margin-top:-5.5px;}

.collection .dc5 img {width:100%;}
.focus-in-contract {animation: focus-in-contract 0.7s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;}
@keyframes focus-in-contract {
  0% {
    letter-spacing: 1em;
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}