@charset "utf-8";
.pt80-40 {padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.pb80-40 {padding-bottom: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.txt-box {padding: clamp(20px, calc( 120 / var(--inner) * 100vw ), 120px) 15px;}

.sec-about-txt {position: relative; letter-spacing:0; overflow: hidden;}
.sec-about-txt:before {position: absolute; content: 'SJ fabrics'; right: 0; bottom: 0; font-family: "miller-text", serif; font-size: clamp(30px, calc( 110 / var(--inner) * 100vw ), 110px); font-weight: 700; line-height: .8em; color: #eee9e6;}

.sec-about-gallery .contain {position: relative;}
.about-gallery-wrapper {max-width: 1041px; padding: 0 60px; margin: 0 auto;}
.about-gallery .items {position: unset;}
.about-gallery .slick-arrow {position: absolute; top: 41%; left: var(--container-space); width: 64px; height: 64px; border-radius: 100%; background: url('/images/sub/about-arrow.png') no-repeat center center; background-size: contain; border: 0; overflow: hidden; text-indent: -99999em;}
.about-gallery .slick-arrow.slick-next {left: auto; right: var(--container-space); transform: rotate(180deg);}
.about-gallery .slick-arrow:hover {background-image: url('/images/sub/about-arrow-on.png');}
.about-gallery .item {position: relative; width: 100%; padding-bottom: 58.7405%; overflow: hidden; border-radius: var(--bdrs20);}
.about-gallery .item:after {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border-radius: var(--bdrs20); border: 1px solid #ddd;}
.about-gallery img {position: absolute; width: 100%; height: 100%; max-width: 100%; max-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: contain;}
.about-gallery-thumb .items {margin: 0 -5px;}
.about-gallery-thumb .slick-slide {padding: 0 5px;}
.about-gallery-thumb .item {position: relative; width: 100%; padding-bottom: 59.027778%; overflow: hidden; border-radius: 8px;}
.about-gallery-thumb .item:after {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border-radius: 8px; border: 1px solid #ddd;}
.about-gallery-thumb img {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover;}
.about-gallery-thumb .slick-dots {display: flex; justify-content: center; gap: 10px; margin-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.about-gallery-thumb .slick-dots button {display: block; width: 12px; height: 12px; border-radius: 100%; border: 1px solid #bfbfbf; background: #bfbfbf; overflow: hidden; text-indent: -99999em; opacity: .8; transition: .2s;}
.about-gallery-thumb .slick-dots .slick-active button {background: #606060; border-color: #606060;}

.common-fabrics {padding-bottom: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); margin-bottom: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px); border-bottom: 1px solid #ddd;}
.common-fabrics-img {position: relative;width: 100%; padding-bottom: 100%; overflow: hidden; margin-bottom: 5px;}
.common-fabrics-img:after {display: flex; align-items: center; justify-content: center; position: absolute; content: 'veiw more →'; top: 0; left: 0; width: 100%; height: 0; background: rgba(116,97,85,.85); color: #fff; font-weight: 500; opacity: 0; transition: .3s;}
.common-fabric:hover .common-fabrics-img:after {height: 100%; opacity: 1;}
.common-fabrics-img img {position: absolute; width: 100%; height: 100%; max-width: 100%; max-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover;}
.product-third-menu {padding-bottom: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px);}
.product-third-menu ul {display: flex; flex-wrap: wrap; margin: -6px;}
.product-third-menu li {min-width: calc(100% / 6); padding: 6px;}
.product-third-menu a {display: flex; align-items: center; justify-content: center; height: 48px; padding: 0 12px; background: #eee; color: #6c6c6c; border-radius: 8px;}
.product-third-menu .active a {background: var(--secondary-color); color: #fff;}
.product-title h2 {padding-bottom: clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px); margin-bottom: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); border-bottom: 1px solid #ddd; font-size: clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); color: var(--dark-color); font-weight: 700; line-height: 1.2em;}

.product-view {display: flex; margin-bottom: clamp(30px, calc( 50 / var(--inner) * 100vw ),50px);}
.product-view-gallery { position: relative; width: 41.66667%;}
.product-view-big {overflow: hidden; position: relative; margin-bottom: 10px;}
.product-view-big:before, .product-view-thumb .item:before {content: '';padding-bottom: 100%; display: block;}
.product-view-big .item {display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; text-align: center;}
.product-view-big .item.active {display: block;}
.product-view-big .item img {width: 100%; height: 100%; object-fit:cover; }
.sqs-image-zoom-duplicate { transition: transform 0.3s ease;}
.product-view-big:hover .sqs-image-zoom-duplicate { transform: scale(1.5);}
.product-view-thumb {display: flex; flex-wrap: wrap; gap:10px;}
.product-view-thumb .item {position: relative; width: calc((100% - 40px) / 5)}
.product-view-thumb .item:after {position: absolute; content: ''; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid #ddd; z-index:1;}
.product-view-thumb .item img {position: absolute; width: 100%; height: auto; max-width: 100%; min-height: 100%; left: 0; top: 50%; transform: translateY(-50%); object-fit: cover;}


.product-view-txt {flex:1; padding-top: clamp(0px, calc( 50 / var(--inner) * 100vw ),50px); padding-left: clamp(25px, calc( 70 / var(--inner) * 100vw ),70px);}
.product-view-tit {padding-bottom: clamp(12px, calc( 35 / var(--inner) * 100vw ),35px); margin-bottom: clamp(20px, calc( 50 / var(--inner) * 100vw ),50px); border-bottom: 1px solid #ddd;}
.product-view-tit h3 {margin-bottom: clamp(7px, calc( 15 / var(--inner) * 100vw ),15px);}
.product-view-info li {display: flex;}
.product-view-info li:not(:last-child) {margin-bottom: clamp(5px, calc( 12 / var(--inner) * 100vw ),12px);}
.product-view-info {margin-bottom: clamp(10px, calc( 50 / var(--inner) * 100vw ),50px);}
.product-info-tit {display: block;min-width: 135px; color: var(--dark-color); font-weight: 700;}
.product-view-color .product-info-tit {margin-bottom: 10px;}
.product-view-color select.input {min-width: 234px; height: 50px; background: var(--secondary-color) url('/images/bbs/select-white.png') right 14px center no-repeat; color: #fff; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ),18px); font-weight: 500;}
.product-view-color option {background: #fff; color: var(--dark-color); font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ),16px);}
.product-detail h4 {padding-bottom: 10px; margin-bottom: 25px; border-bottom: 1px solid #ddd;}
.btn-list {display: flex; align-items: center; justify-content: center; width: 120px; height: 50px; margin: 0 auto; border-radius: 12px; background: var(--secondary-color); font-size: 18px; font-weight: 500; color: #fff;}

.intro-welcome-box {width: fit-content; padding-right: clamp(20px, calc( 50 / var(--inner) * 100vw ),50px); padding-bottom: clamp(20px, calc( 45 / var(--inner) * 100vw ),45px); padding-top: clamp(20px, calc( 45 / var(--inner) * 100vw ),45px); border-radius: 0 0 var(--container-space) 0;  background: #fff;}
.sec-intro-welcome {position: relative; padding-bottom: clamp(30px, calc( 100 / var(--inner) * 100vw ),100px);}
.sec-intro-welcome:before {position: absolute; content: ''; left: 0; bottom: 0; z-index: -2; width: calc(50% + 600px); height: 80%; border-radius: 0 var(--bdrs30) var(--bdrs30) 0; background: url('/images/sub/intro-welcome.jpg') no-repeat center center; background-size: cover;}
.sec-intro-welcome:after {position: absolute; content: ''; left: 0; top: 0; bottom: clamp(30px, calc( 100 / var(--inner) * 100vw ),100px); width: 50%; z-index: -2; background: #fff;}
.introductrion .sec:not(:last-child) {margin-bottom: clamp(40px, calc( 100 / var(--inner) * 100vw ),100px);}
.introductrion h2 {margin-bottom: clamp(10px, calc( 15 / var(--inner) * 100vw ),15px);}
.step-items {display: flex; flex-wrap: wrap; gap: 27px;}
.step-item.w100 {flex: none; width: 100%;}
.step-num {display: flex; align-items: center; justify-content: center;  width: 64px; height: 64px; margin-bottom: clamp(12px, calc( 35 / var(--inner) * 100vw ),35px); background: #c09072; border-radius: 100%; font-weight: 700; font-size: 15px; color: #fff; font-family: "Play", sans-serif;}
.step-item {flex: 1; padding: clamp(20px, calc( 40 / var(--inner) * 100vw ),40px) var(--container-space); border-radius: var(--bdrs20); background: #f9f6f3; line-height: 1.625em;}
.step-item:nth-child(2) .step-num {background: #9b6b4d;}
.step-item:nth-child(3) .step-num {background: #746155;}
.step-item:nth-child(4) .step-num {background: #664937;}
.step-item:nth-child(5) .step-num {background: #2d1201;}

.general-service {display: flex; padding: clamp(15px, calc( 35 / var(--inner) * 100vw ),35px) clamp(0px, calc( 80 / var(--inner) * 100vw ),80px); padding-left: 0; border-top: 1px solid #ddd;}
.general-service:last-child {border-bottom: 1px solid #ddd;}
.general-service h3 {position: relative; width: 33.929%; height: fit-content; padding-left: 30px; font-weight: 600; font-size: clamp(18px, calc( 24 / var(--inner) * 100vw ),24px); color: var(--dark-color);}
.general-service h3:before {position: absolute; left: 0; top: 4px; content: ''; width: 20px; height: 20px; background: url('/images/sub/deco-tit.png') no-repeat center center; background-size: contain;}
.general-service p {flex: 1;}