/*************************************************** sub ***************************************************/  
.sub video, .sub img{vertical-align:top;}
.sub .sec_tit h2{font-size: 42px;   word-break: keep-all;}
.sub .sec_tit p{font-size: 18px;   margin-top: 30px; word-break: keep-all; color: #555; font-weight: 400; }
.sub .sec_tit .stit {display:block; font-size: 18px; font-weight: 500; margin-bottom: 30px; margin-top: 0;}
.sub .sec_tit .btit{font-size: 128px; display:block; color: #4a4a4a;}
.sub .sec_tit .btit + p{margin-top: 80px; color: #555; font-size: 24px; }
.sub .btn_more{position:relative; display:inline-flex; align-items:center; justify-content:space-between; margin-top: 40px; color: #fff;     gap: 30px; height: 50px; background: rgba(255,255,255,0.1); backdrop-filter:blur(30px); border-radius:40px; padding:0 24px; font-size: 16px;} 
.sub .btn_more::before {  content: "";  position: absolute;  inset: 0;  border-radius: 40px;   padding: 1px; background:linear-gradient(160deg, rgb(255 255 255 / 80%), transparent, rgb(255 255 255 / 80%)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }   

.sub .btn_more .ico-download{display:inline-block; width: 20px; height: 20px; background: url('/img/icon_download.svg') no-repeat center center / contain;}

.sub .mo{display:none;}
   

/*************************************************** Chablis - Story ***************************************************/ 
body:has(.story) #container { max-width:100%; padding:0; width: 100%;}

.story h3{font-size: 30px;  }
.story h3 + p{margin-top: 20px; font-size: 18px;  word-break: keep-all; }  
.story_visual{position: relative; padding:0 5%;  margin-bottom: 50px; top: 0; width: 100%; height: 100vh;   display:flex; align-items:center; justify-content:center; text-align: center; z-index:-1;}
.story_visual .visual_bg{position:absolute; left:0; top:0; width: 100%; height: 100%; z-index:-1; background: #fff;} 
.story_visual .visual_bg video{width: 100%; height: 100%; object-fit:cover; opacity:1; margin-top: 0; }
.story_about {width: 100%; height: 100vh; display:flex; align-items:center; justify-content:center; text-align: center; background:#fff;}
.story_about .tit{ display:flex; gap:20px;}
.story_about .tit p{position:relative; font-size: 6vw; font-weight: 600; white-space:nowrap;}
.story_about .tit .txt2{position:absolute; left:0; top:0; opacity:0; background: #fff;}
.story_about .tit strong{color: #46B1B4; font-weight: 600;}
.story_about .imgs{position:absolute; top:50%; left:0; right:0; margin:0 auto;transform:translateY(10%);  aspect-ratio:1; width: 100%; max-width: 40vw; pointer-events: none;}
.story_about .imgs img{position:absolute; left:0; right:0;  object-fit:cover; width: 100%; height: 100%; transform:scale(1.2); opacity:0;}
.story_about .imgs .img1{opacity:1;} 
.story_life .life_sec01 {position:relative; width: 100%; height: 100vh; display:flex; align-items:center; justify-content:center; text-align: center; background:#fff;}
.story_life .life_sec01 .txt{position:relative; overflow:hidden; padding:0 5%;}
.story_life .life_sec01 .txt .w_dim{ display:block; width: 100%; height: 100%;   position:absolute; left:0; bottom:0;   pointer-events: none;   background-image: linear-gradient(0deg, #fff, transparent);}
.story_life .life_sec01 .txt p{font-size: 22px; font-weight: 500; word-break: keep-all;}
.story_life .life_sec01 .imgs{position:absolute; left:0; top:0; width: 100%; height: 100%; z-index:-1; pointer-events: none;}
.story_life .life_sec01 .imgs img{position:absolute; }
.story_life .life_sec01 .imgs .img1{right:10%; top:30%;} 
.story_life .life_sec01 .imgs .img2{left:10%; top:50%;}
.story_life .life_sec01 .imgs .img3{left:70%; top:100%;}  
.story_life .life_sec01 .imgs .img4{left:50%; top:10%;} 
.story_life .life_sec01 .imgs .img5{left:20%; bottom:0;}
.story_life .life_sec01 .imgs .img6{left:40%; bottom:-10%;} 


.story_life .life_sec02{position:relative; width: 100%; height: 100vh;  background: #fff; z-index:2; overflow:hidden;  border:24px solid #fff; }
.story_life .life_sec02 .insta_feed{width: 100%; height: 100%;  transform:scale(1);  }
.story_life .life_sec02 .insta_feed img{width: 100%; height: 100%; }
.story_life .life_sec02 .life_style{position:absolute; left:50%; transform:translateX(-50%); top:0; width: 33%; height: 100%;  color: #fff; display:flex; align-items:center; justify-content:center; text-align: center; border-radius:8px; opacity:0; overflow:hidden;}
.story_life .life_sec02 .life_style .feed_center {width: 100%; text-align: center;}
.story_life .life_sec02 .life_style .feed_center .sec_tit{ padding:0 5%;}
.story_life .life_sec02 .life_style .feed_center .sec_tit h2 {font-size: 2.2vw; word-break:keep-all; }
.story_life .life_sec02 .life_style .feed_center .sec_tit h2 .char {  display: inline-block;  opacity: 0.3;  }
.story_life .life_sec02 .life_style .life_bg{position:absolute; left:0; top:0; width: 100%; height: 100%; z-index:-1; }
.story_life .life_sec02 .life_style .life_bg video{width: 100%; height: 100%; object-fit:cover;  }
.story_life .life_sec02 .life_promo{position:absolute; left:0; top:0; width: 100%; height: 100vh; opacity:0; transform:translateY(60px); padding:160px 5%; display:flex; text-align:left; justify-content:space-between;gap:5%;}
.story_life .life_sec02 .life_style .sec_tit p{color: rgba(255,255,255,0.8);} 
.story_life .life_sec02 .promo_list{width:65%; max-width:963px; }
.story_life .life_sec02 .promo_list ul{display:flex; flex-direction:column; gap:20px;}
.story_life .life_sec02 .promo_list ul li{position:relative; display:flex; background: #a1aeb033; padding:24px; border-radius:20px; height:100%;    backdrop-filter:blur(60px); transition:all ease .35s;} 
.story_life .life_sec02 .promo_list ul li::before {  content: "";  position: absolute;  inset: 0;  border-radius: 20px;   padding: 1px; background:linear-gradient(160deg, rgb(255 255 255 / 80%), transparent, rgb(255 255 255 / 80%)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }  
.story_life .life_sec02 .promo_list ul li .img{ aspect-ratio: 1.5; width: 50%; max-width:420px; height:100%;}
.story_life .life_sec02 .promo_list ul li .img img{width: 100%; height: 100%; object-fit:cover; border-radius:12px;}
.story_life .life_sec02 .promo_list ul li .txt{padding:24px 40px; width: 50%;}  
@media (hover: hover) and (pointer: fine) {
	.story_life .life_sec02 .promo_list ul li:hover{background: #fff;  }
	.story_life .life_sec02 .promo_list ul li:hover .txt h3{color: #748fa1;}
	.story_life .life_sec02 .promo_list ul li:hover .txt p{color: #292929;} 
}
.story_design{padding:160px 5% 0;  border-radius:100px 100px 0 0; margin: -100px 0 0; background: #fff; height:auto; min-height:100vh; position:relative; z-index:3; overflow:hidden;}   
.story_design .thumb{width: 80px; aspect-ratio:1;}
.story_design .txt{width: 100%; flex:1;}  
.story_design .tab_swiper{margin-top: 40px; }
.story_design .tabs{  max-width:664px; display:flex; gap:12px; flex-wrap:wrap;}
.story_design .tab {width:calc(50% - 6px); display:flex; align-items:center; gap:16px; border-radius:12px; opacity:0.4; transition:all ease .35s;; padding:16px; background: #fff;font-size: 15px; font-weight: 500;  cursor:auto;}
.story_design .tab.active { opacity:1;   color: #727272;} 
.story_design .tab p + p{margin-top: 5px;} 
.story_design .design_canvas{position:absolute; left:0; top:0;width: 100%; height: 100%; display:flex; align-items:center; justify-content:center;     z-index: -1;   pointer-events: none; } 
.story_design #storyCanvas {position:absolute; left:0; bottom:0; width: 100%;  height: 100%; min-height:100%;  object-fit:cover;  display: block;}

.story_color{padding:120px 0px 0px 0px; center; width: 100%; margin:0 auto;}
.story_color .sec_tit{padding:0 5%;}
.story_color .color_btn{display:flex;justify-content:center; gap:30px;flex-wrap:wrap;margin-bottom:35px;padding:70px 0 30px 0}
.story_color .swatch{display:flex;flex-direction:column;align-items:center;gap:8px;background:transparent;border:none;cursor:pointer;padding:0;}
/* 동그라미 부분 */
.story_color .swatch::before{content:"";width:32px;height:32px;border-radius:50%;border:1px solid #ddd;transition:all .2s ease;}
.story_color .swatch[data-key="white"]::before{ background:#f5f5f5; }
.story_color .swatch[data-key="black"]::before{ background:#111; }
.story_color .swatch[data-key="beige"]::before{ background:#f7f4ea; }
.story_color .swatch[data-key="blue"]::before{ background:#b9e2ff; }
.story_color .swatch[data-key="green"]::before{ background:#b9ffe1; }
.story_color .swatch[data-key="candy"]::before{background-image: linear-gradient(75deg,rgba(156, 255, 224, 1) 10%, rgba(248, 214, 250, 1) 50%, rgba(186, 244, 255, 1) 90%);  }
.story_color .swatch[data-key="pink"]::before{ background:#ffdee9; }
.story_color .swatch.is-active::before{border:2px solid #ededed;transform:scale(1.1);}
.story_color .color_label{font-size:14px;color:#333;}
/* =========================
   이미지 + 텍스트 영역
========================= */
.story_color .color_img{height:80vh;padding:50px;background-size:cover;background-position:center;background-repeat:no-repeat;position:relative;overflow:hidden;color:#fff;transition:opacity .25s ease;text-align: center;  display:flex;flex-direction:column;}
/* 어두운 오버레이 */
.story_color .color_img::before{ position:absolute;inset:0;background:rgba(0,0,0,.25);}
/* 텍스트가 오버레이 위로 오게 */
.story_color .color_img > *{position:relative;}
/* 텍스트 스타일 */
.story_color .color_img h3{font-size:28px;text-align:center;}
.story_color .color_img p{font-size:16px;line-height:1.6;margin-bottom:20px;text-align:center;}
.story_color .color_img .btn_wr{display:flex; gap:10px; margin-top:auto;     justify-content: center;} 

.chablis_banner{background: #fff;  padding:180px 0 80px;}
.chablis_banner ul{display:flex; gap:20px; width: 90%; max-width:1520px; margin:0 auto;}
.chablis_banner li{width: 50%;}
.chablis_banner li a{display:flex; gap:10%; padding:24px; border-radius:20px; background: #f4f4f4; height: 100%;}
.chablis_banner li .txt{padding-right: 20px; width:calc(90% - 180px);}
.chablis_banner li img{border-radius:12px;}
.chablis_banner li p{font-size: 18px;}
.chablis_banner li h3{font-size: 28px; margin-top: 20px;  word-break:keep-all;}
.chablis_banner li .mini-more{display:inline-flex; gap:10px; align-items:center; font-weight: 500; padding:12px 0; font-size: 16px; margin-top: 40px; transition:all ease .35s;}
.chablis_banner li .mini-more i{width: 24px; height: 24px; background: #fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size: 14px;}
@media (hover: hover) and (pointer: fine) {
	.chablis_banner li a:hover .mini-more{gap:16px;} 
}



   
/*************************************************** Chablis - Mts ***************************************************/ 
body:has(.mts) #container { max-width:100%; padding:0; width: 100%;} 

.mts h3{font-size: 28px;  }
.mts h3 + p{margin-top: 8px; font-size: 18px;  word-break: keep-all; }  
.mts h4{font-size: 20px; margin:10px 0; color: #555; font-weight: 500;}
.mts_visual{position:relative; width: 100%; height: 100vh; padding:0 5%;  display:flex; align-items:center; justify-content:center; text-align: center;}  
.mts_visual .sec_tit{z-index:3;}
.mts_visual .visual_bg{position:absolute; left:0; top:0; width: 100%; height: 100%; z-index:-1; background: #fff;}
.mts_visual .visual_bg:before{content:''; width: 100%; height:100%;  background-image: linear-gradient(180deg, transparent, #fff); position:absolute; left:0; top:19%; z-index:1;}
.mts_visual .visual_bg:after{content:''; width: 100%; height:100%;  background-image: linear-gradient(0deg, #fff, #fff, transparent); position:absolute; left:0; top:50%; z-index:1;}
.mts_visual .visual_bg video{width: 100%; height: 100%; object-fit:cover; opacity:0.9; margin-top: 0; transform:translateY(0%); }
.mts_nature{position:relative;   padding:60px 0 0; z-index:2;} 
.mts_nature ul{ max-width:1510px; width: 90%; margin:0 auto;}
.mts_nature ul li + li{margin-top: 100px;}
.mts_nature ul li{display:flex; justify-content:space-between; gap:5%;}
.mts_nature ul li .img{max-width:692px; width: 50%; border-radius:24px; overflow:hidden;}
.mts_nature ul li .txt{max-width:600px; width: 50%;}
.mts_nature ul li:nth-child(2n + 1){flex-direction: row-reverse; align-items:center;}
.mts_nature ul li:nth-child(2n + 1) .txt{text-align:right;}
.mts_nature ul li:nth-child(2){align-items:flex-end; justify-content:flex-start; gap:13%;} 
.mts_nature .note{display:block; margin-top: 16px; font-size: 16px; color: #888;}
.mts_filter .filter_sec01{background-color: #f4f4f4; background-attachment: fixed; display:flex;}
.mts_filter .filter_sec01 > div{width: 50%;}
.mts_filter .filter_sec01 .sec_tit{ padding:160px 10%;  color: #4A4A4A; }
.mts_filter .filter_sec01 .sec_tit p{color: #4A4A4A;}
.mts_filter .filter_sec01 .filter_tabs{width: 50%; max-width:860px;margin:48px; background: #fff; border-radius:24px; padding:40px; text-align: center;}
.mts_filter .filter_sec01 .filter_tabs .tab_thumb{display:flex; gap:12px;}
.mts_filter .filter_sec01 .filter_tabs .tab_thumb li{width: 100%;}
.mts_filter .filter_sec01 .filter_tabs .tab_thumb li a{display:block; padding:20px 20px 28px; border-radius:12px;}
.mts_filter .filter_sec01 .filter_tabs .tab_thumb li a.active{ background: #f4f4f4;} 
.mts_filter .filter_sec01 .filter_tabs .tab_cont h3{ font-size: 24px;  margin-top: 10px;}
.mts_filter .filter_sec01 .filter_tabs .tab_cont .tab_img{aspect-ratio: 1.5;}
.mts_filter .filter_sec01 .filter_tabs .tab_cont .tab_img video{width: 100%; height: 100%; object-fit:contain;} 
.mts_filter .filter_sec01 .water-info{position:relative; padding:28px 34px; margin-top: 40px; border-radius:20px;background:rgb(199 228 234 / 25%); color:#4F4F4F; max-width:423px;}
.mts_filter .filter_sec01 .water-info::before {  content: "";  position: absolute;  inset: 0;  border-radius: 20px;   padding: 2px; background:linear-gradient(160deg, rgb(255 255 255 / 100%), transparent, rgb(255 255 255 / 100%)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }  
.mts_filter .filter_sec01 .water-title{font-size:20px;font-weight:650; margin-top: 10px;}
.mts_filter .filter_sec01 .water-desc{font-size:14px; margin:10px 0;}
.mts_filter .filter_sec01 .water-desc strong{color:#D4A017;font-weight:600;}
.mts_filter .filter_sec01 .water-link{display:flex; gap:10px; align-items:center; font-size: 14px; color:#4F4F4F; padding-top: 10px; border-top:1px solid #ddd; }
.mts_filter .filter_sec01 .water-link:before{content:''; width: 16px; aspect-ratio:1; background: url('/img/icon_external_link.svg') no-repeat center center / contain; display:inline-block;}
.mts_filter .filter_sec02{position:relative;  width: 90%; margin:0 auto; display:flex; flex-direction:column; justify-content:space-between;  padding:120px 0; }
.mts_filter .filter_sec02 .filter_bg{position:absolute; width: 100%; height:100%;left:0; top:0;  z-index:-1; border-radius:24px; overflow:hidden; background: #000;} 
.mts_filter .filter_sec02 .filter_bg video{width: 100%; height: 100%; object-fit:cover;   opacity:.84; } 
.mts_filter .filter_sec02 .sec_tit{text-align: center;  color: #4A4A4A; padding-bottom: 70px; }
.mts_filter .filter_sec02 .filter_merit{display:flex;  margin:0 auto; gap:30px;}
.mts_filter .filter_sec02 .filter_merit li{width:100%;position:relative; padding:10px; background: #FFFFFF;  border-radius:24px; display:flex; flex-direction: column; align-items:center; gap:10%; backdrop-filter:blur(60px); transition:all ease .35s;  }
.mts_filter .filter_sec02 .filter_merit li::before {  content: "";  position: absolute;  inset: 0;  border-radius: 24px;   padding: 1px; background:linear-gradient(160deg, rgb(255 255 255 / 80%), transparent, rgb(255 255 255 / 80%)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }  
.mts_filter .filter_sec02 .filter_merit li .icon{width: 100px;} 
.mts_filter .filter_sec02 .filter_merit li p{font-size: 18px; color: #555;}
.mts_filter .filter_sec02 .filter_merit li strong{font-weight: 500; color: #4a4a4a;} 
.mts_filter .filter_sec02 .filter_merit li .icon img{ mix-blend-mode: multiply; }
.mts_filter .filter_sec02 .filter_merit li .txt{width: calc(90% - 20px); padding-top: 30px; text-align:center;}
@media (hover: hover) and (pointer: fine) {
	.mts_filter .filter_sec02 .filter_merit li:hover{background: #fff;} 
}
.mts_cycle {width: 90%; max-width:1510px; margin:auto; border-radius:24px; background: #ebf4f6; padding:80px;}
.mts_cycle .cycle_top{display:flex; justify-content:space-between; }
.mts_cycle .cycle_top .cycle { font-size: 18px; font-weight: 600;}
.mts_cycle .cycle_top .cycle .day{display:flex; gap:8px; align-items:center; justify-content:flex-end;  margin-top: 12px;}
.mts_cycle .cycle_top .cycle .num {display:flex; gap:4px; }
/*
.mts_cycle .cycle_top .cycle .num span{position:relative; z-index:1;font-size: 48px; font-weight: 600; color: #5fcce3; background: #fff;width: 64px;height: 80px; border-radius:6px; border:1px solid #eee; display:flex; align-items:center; justify-content:center; box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.12);}
.mts_cycle .cycle_top .cycle .num span:before{content:''; width: 100%; height: 1px; position:absolute; left:0; top:50%; box-shadow: 0 0 2px rgba(0, 0, 0, 0.12); background: #e8e8e8; z-index:-1; }
*/ 
.fix-card{display: inline-block; text-align: center; font-size: 72px;font-weight: 600;color: #5fcce3;  width: 96px;  height: 120px; line-height: 80px;background: url('/img/mts/flip_bg.png') no-repeat center center / 100% 100%;}
.flip-card {  position: relative;  display: inline-block; width: 80px; height: 96px;  perspective: 1000px;  display:flex;  flex-direction:column;  background: url('/img/mts/flip_bg.png') no-repeat center center / 100% 100%;} 
.top-half, .bottom-half,
.top-flip, .bottom-flip {  position: absolute;  left: 0;  width: 100%;height: 50%;  overflow: hidden;   font-weight: bold; text-align: center; font-size: 60px;font-weight: 600;color: #1e93ac;line-height: 1; }
.top-half ,
.top-flip{  top: 0;  padding-top: 18px;	align-items: flex-start; 	background: url('/img/mts/flip_bg.png') no-repeat top center / 100% auto;}
.bottom-half,
.bottom-flip {  bottom: 0;  padding-bottom: 18px; 	display: flex;     justify-content: center;		align-items: flex-end; }
.top-flip { top: 0;  animation: flipTop 0.6s ease-in forwards;  transform-origin: bottom;}
.bottom-flip { bottom: 0;   animation: flipBottom 0.6s ease-out forwards;  transform-origin: top;}
@keyframes flipTop {
  0% { transform: rotateX(0deg); }
  100% { transform: rotateX(-90deg); }
}

@keyframes flipBottom {
  0% { transform: rotateX(90deg); }
  100% { transform: rotateX(0deg); }
}
.mts_cycle .cycle_top .sec_tit h2{font-size: 30px;}
.mts_cycle .cycle_form form {margin-top: 60px; padding-top: 60px; border-top:1px solid #ddd; display:flex; gap:80px;}
.mts_cycle .cycle_form .form-group { width: 100%;  text-align: center;}
.mts_cycle .cycle_form .form-group + .form-group label:nth-child(2):before{content:''; width:10px; height:10px; border-radius:50%; background: #c2c2c2; position:absolute; left:-40px; top:50%; transform:translate(-50%,-50%);}
.mts_cycle .cycle_form .form-group > label { font-size: 24px; font-weight: 500; margin-bottom: 40px; display:block;}
.mts_cycle .cycle_form .form-group input[type="text"],
.mts_cycle .cycle_form .form-group input[type="number"],
.mts_cycle .cycle_form .form-group select { width: 100%; padding: 13px 14px;  border: 1px solid #ddd;  border-radius: 6px;  } 
.mts_cycle .cycle_form .input-group{ width:calc(100% - 100px); } 
.mts_cycle .cycle_form .start-date{display: flex;  gap: 8px;}
.mts_cycle .cycle_form .radio-group label{position:relative;  display:block; }
.mts_cycle .cycle_form .radio-group label + label{margin-top: 16px;  } 
.mts_cycle .cycle_form .radio-group input[type="radio"] {  display: none;}
.mts_cycle .cycle_form .radio-group span {  display: block;  background: #fff;  border:1px solid #ddd; color: #747474;  padding: 20px 14px;  border-radius: 70px;  cursor: pointer;  user-select: none;  transition: background 0.2s, color 0.2s; line-height: 1.2; font-size: 18px; word-break:keep-all;} 
.mts_cycle .cycle_form .radio-group input[type="radio"]:checked + span {    border-color:#5fcce3; background: #5fcce3; color: #fff; font-weight: 600;}
.mts_use{width: 90%; max-width:1510px; margin:100px auto 0px auto;}
.mts_use .btn_more{color: #4a4a4a; border:1px solid #ddd; font-weight: 500;}
.mts_use {  display: flex;  align-items: center; gap:10%;}
.mts_use .use_left { width: 45%; }
.mts_use .use_right { width: 45%;   position: relative; }
.mts_use .use_main_swiper {  width: 100%;  border-radius: 24px; max-width: 688px;  overflow: hidden;} 
.mts_use .use_main_swiper .swiper-slide {aspect-ratio: .9;} 
.mts_use .use_main_swiper .swiper-slide img {  width: 100%; height:100%; object-fit:cover; }
.mts_use .use_thumb_wrap { max-width:630px;  position: relative;margin-top: 80px; }
.mts_use .use_thumb_wrap .use_thumb_swiper{max-width:527px;  border-radius:9px; overflow:hidden; margin:0;}
.mts_use .use_thumb_swiper .swiper-slide {     aspect-ratio: 1.5;  border-radius: 9px;  overflow: hidden;  cursor: pointer;  }
.mts_use .use_thumb_swiper .swiper-slide img {  width: 100%; height:100%; object-fit:cover; opacity: 0.6;  transition: opacity 0.3s, transform 0.3s;}
.mts_use .use_thumb_swiper .swiper-slide-thumb-active img{  opacity: 1;  transform: scale(1.05);} 
#container .use_thumb_wrap .use_prev,
#container .use_thumb_wrap .use_next {background: #f4f4f4;  color: #333; } 
#container .use_thumb_wrap .use_prev{left:auto; right:48px;}
#container .use_thumb_wrap .use_next {right:0;}




/*************************************************** Chablis - How to use ***************************************************/ 
body:has(.how) #container { max-width:100%; padding:0; width: 100%;} 
  
.how_visual{position: relative; padding:0 5%;  top: 0; width: 100%; height: 100vh;   display:flex; align-items:center; justify-content:center; text-align: center; z-index:-1;}  
.how_visual .sec_tit{z-index:3;}
.how_visual .visual_bg{position:absolute; left:0; top:0; width: 100%; height: 100%; z-index:-1; background: #fff;} 
.how_visual .visual_bg video{width: 100%; height: 100%; object-fit:cover; opacity:1; margin-top: 0; }
.how_use{ display:flex; background: linear-gradient(180deg, rgba(244, 244, 244, 1) 0%, #d0feff 100%);}
.how_use > div{width: 50%;}
.how_use .use_left{padding:160px 5% 5% 10%; color: #4A4A4A; display:flex; flex-direction:column; justify-content:space-between;  }
.how_use .use_right{padding:80px;}
.how_use .use_right .tab_cont{   background: #fff; border-radius:24px;  overflow:hidden; text-align: center;}
.how_use .tab_thumb{display:flex; gap:12px; padding-top: 30px;}
.how_use .tab_thumb li{ }
.how_use .tab_thumb li a{display:flex; align-items:center; justify-content:center; width: 120px; height: 120px; border-radius:16px; font-size: 18px; font-weight: 500; backdrop-filter:blur(32px); background: rgba(255,255,255,0.45); cursor:pointer;}
.how_use .tab_thumb li a.active{ background: #fff;  color: #46b1b4; } 
.how_use .tab_cont{position:relative;display:none;} 
.how_use .tab_cont.active{display:block;}
.how_use .use_swiper .swiper-slide{padding:80px; background: #fff;  }
.how_use .use_swiper .img{ width: 100%; max-width:460px; margin:20px auto; aspect-ratio: 1.2;}
.how_use .use_swiper .img img{ width: 100%; height: 100%; object-fit:contain;}
.how_use .use_swiper .txt{font-size: 24px; font-weight: 500; margin: 48px 0 24px;}
.how_use .use_swiper .txt h3{color: #7FC7CF; margin-bottom: 20px; font-weight: 500;}
#container .how_use .swiper-pagination{bottom:30px; background: none; font-size: 16px; font-weight: 500;}
#container .how_use .swiper-button-next, 
#container .how_use .swiper-button-prev{width: 60px; height: 60px; background: #f4f4f4;}
#container .how_use .swiper-button-next:after, 
#container .how_use .swiper-button-prev:after{font-size: 16px;}
#container .how_use .swiper-button-next{right:40px;}
#container .how_use .swiper-button-prev{left:40px;}
.how_faq{padding:160px 5% 0; background: #fff;}
.how_faq .sec_tit{text-align: center;}
.how_faq .faq { width: 100%; max-width: 1520px;  margin: 80px auto 0;} 
.how_faq .faq-item { background: #F4F4F4; padding:40px; border-radius:20px; } 
.how_faq .faq-item + .faq-item{margin-top: 24px;}
.how_faq .faq-question { display:block;  width: 100%;text-align:left;border:0; background: none; position: relative; font-size: 24px;font-weight: 600; padding-right: 60px; word-break:keep-all;}
.how_faq .faq-question::after { content: ''; width: 32px; height: 32px; background: url('/img/icon_dropdown.png') no-repeat center center / contain; position: absolute;  right: 20px;  font-size: 18px;  transition: transform 0.3s;  }
.how_faq .faq-item.open .faq-question::after {   transform: rotate(180deg);}
.how_faq .faq-item.open {background: #f4fdff;}
.how_faq .faq-answer { display: none; padding-top: 30px; font-size: 18px; color: #555; border-top:1px solid #ddd; margin-top: 30px;  }
.how_faq .faq-answer p{word-break:keep-all; }
.how_faq .faq-answer a{word-break:break-all;}
.how_faq .faq-answer strong{color: #4a4a4a;}
 

 
/*************************************************** About - From Nature ***************************************************/ 
body:has(.from) #container { max-width:100%; padding:0; width: 100%;} 


.from h3{font-size: 30px;  }
.from h3 + p{margin-top: 20px; font-size: 18px;  word-break: keep-all; } 
.from_visual{position:relative; width: 100%; padding:250px 0 0px;  overflow:hidden;  text-align: center; color: #4a4a4a; background-image: linear-gradient(0deg, transparent 0%, #bcfeff 100%);  background-color:#fff; z-index:0;} 
.from_visual .sec_tit {position:relative; z-index:1; padding:0 5%;}  
.from_visual .sec_tit p {margin-top: 80px;}
.from_visual .sec_tit p strong{color: #4a4a4a; font-weight: 600;}
.from_visual .sec_tit:last-child p{color: #66c9d2; margin-top: 80px;  font-weight: 500;} 
.from_why{padding:200px 0; text-align: center;   background-color:#fff;}
.from_why .sec_tit{ width: 90%; max-width:1510px; margin:0 auto 0;}
.from_why .why_cont{display:flex; gap:60px;  width: 90%; max-width:1510px; margin:100px auto 0; }
.from_why .why_cont > li{width: 50%;}
.from_why .why_cont .img{border-radius:20px; overflow:hidden; margin-bottom: 48px;}
.from_why .why_cont .img:hover img{transform:scale(1.05);}
.from_why .why_cont .img img{width: 100%; transition:all ease .5s;}  
.from_gallery .bg{position:absolute; left:0; top:0; width: 100%;  height:100%; z-index:-1; }
.from_gallery .bg img{width: 100%;  transition:all ease .3s; position:absolute; top:50%; left:0; transform:translateY(-60%);} 
.from_gallery {    position: relative;    height: 100vh;  margin-top: 70px; }
.from_gallery > img {position: absolute;  width: 320px;       aspect-ratio: 0.8;   object-fit: cover;    border-radius: 12px;     transform-origin: center center;  opacity:0;}
.from_gallery .img1{left:20%; top:4%; transform:translate(-30%, -30%);}
.from_gallery .img2{left:57%; top:2%; transform:translate(30%, -30%);}
.from_gallery .img3{left:14%; top:30%; transform:translate(-30%, -30%);}
.from_gallery .img4{left:43%; top:24%; transform:translate(30%, -30%);}
.from_gallery .img5{left:72%; top:20%; transform:translate(30%, 30%);}
.from_gallery .img6{left:27%; top:52%;  transform:translate(-30%, 30%);z-index:-1;}
.from_gallery .img7{left:50%; top:48%; transform:translate(30%, 30%);}  
.from_design .design_sec01{position:relative; width: 100%; height: 100vh;   z-index:2; overflow:hidden;  }  
.from_design .design_sec01{ } 
.from_design .design_sec01 .txt1,
.from_design .design_sec01 .txt2{position:absolute; left:0;  top:0; z-index:3; width: 100%; height: 100%;  color: #fff;  text-align: center;   overflow:hidden; display:flex; align-items:center; font-size: 42px; font-weight: 500; justify-content:center; opacity:0; transform:translateY(60px);} 
.from_design .design_sec01 .bg { width: 100%; height: 100%; overflow:hidden;}
.from_design .design_sec01 .bg video{width: 100%; height: 100%; object-fit:cover; opacity:.7;}


.from_design-bg { position:fixed;  width: 100%; height: 100vh; z-index:-1; top:0; left:0;   overflow:hidden;   } 
.from_design-bg .video-wrap{ width: 100%; height: 100%;}
.from_design-bg .video-wrap video{width: 100%; height: 100%; object-fit:cover;   } 

.from_design .design_sec01 .bg:before{content:''; width: 100%; height: 100%; position:absolute; left:0; top:0; background: #55AFDB;     mix-blend-mode: color; z-index:1;}
.from_design .design_sec01 .bg:after{content:''; width: 100%; height: 100%; position:absolute; left:0; top:0; background: rgba(0,0,0,0.3);  z-index:2;}
.from_design .design_sec01 .design_promo{position:absolute; left:0; top:0;z-index:4; width: 100%; height: 100vh;  gap:60px;  transform:translateY(100%); padding:160px 300px 160px 200px; display:flex; text-align:left; justify-content:space-between; border-radius:100px 100px 0 0; background: url('/img/from/promo_bg.jpg') no-repeat top center / cover; }
.from_design .design_sec01 .sec_tit p{color: #4A4A4A;} 
.from_design .design_sec01 .promo_list{width:40%; max-width:854px; text-align: center;}
.from_design .design_sec01 .promo_list ul{display:flex; flex-direction:column; gap:120px;}
.from_design .design_sec01 .promo_list ul li{position:relative;  }  
.from_design .design_sec01 .promo_list ul li .thumb{position:relative;  }
.from_design .design_sec01 .promo_list ul li .thumb img{width: 100%;   border-radius:20px;}
.from_design .design_sec01 .promo_list ul li .thumb .btn_more{position:absolute; bottom:40px; left:50%; transform:translateX(-50%) translateY(20px);  opacity:0;      background: rgba(255, 255, 255, 0.2);    backdrop-filter: blur(5px); color: #fff; font-weight: 500;}
.from_design .design_sec01 .promo_list ul li .txt{margin-top: 48px; }  
.from_learning{padding:160px 96px 160px 200px; display:flex; text-align:left; justify-content:space-between; gap:60px; background: url('/img/from/learning_bg.jpg') no-repeat center center / cover; height:100vh; overflow:hidden; color: #414141; border-radius:50px 50px 0 0;}
.from_learning .learning_list{width:65%; max-width:963px; }
.from_learning .learning_list ul{display:flex; flex-direction:column; gap:20px;}
.from_learning .learning_list ul li{position:relative; display:flex; background: #aeaca63b; padding:24px; border-radius:20px; height:100%;    backdrop-filter:blur(5px); transition:all ease .35s;} 
.from_learning .learning_list ul li::before {  content: "";  position: absolute;  inset: 0;  border-radius: 20px; border: 1px solid #cecece36; padding: 1px; background:linear-gradient(160deg, rgb(255 255 255 / 80%), transparent, rgb(255 255 255 / 80%)); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }  
.from_learning .learning_list ul li .img{ aspect-ratio: 1.5; width: 50%; max-width:420px; height:100%;}
.from_learning .learning_list ul li .img img{width: 100%; height: 100%; object-fit:cover; border-radius:12px;}
.from_learning .learning_list ul li .txt{padding:24px 40px; width: 50%;}  
@media (hover: hover) and (pointer: fine) {
	.from_learning .learning_list ul li:hover{background: #fff;  }
	.from_learning .learning_list ul li:hover .txt h3{color: #4a4a4a;}
	.from_learning .learning_list ul li:hover .txt p{color: #292929;} 
}
.from_nature{width: 90%; margin:0 auto; height: 100vh; text-align: center; display:flex; align-items:center; justify-content:center;}
.from_nature .sec_tit .btit{color: transparent; } 
.from_nature .sec_tit{opacity:.3;  background-clip: text;  -webkit-background-clip: text;color: transparent;  background-image: linear-gradient(180deg,    #666, #444 10%, #333 33%, #666 45%, #999 50%, #666 66%, #333); background-size: 100% 300%; background-position-y: 0%; animation: gradient 2s ease-in-out infinite;}

@keyframes gradient {
  from {
    background-position-y: 0%;
  }
  to {
    background-position-y: 100%;
  }
}


/*************************************************** About - Of Nature ***************************************************/ 
body:has(.of) #container { max-width:100%; padding:0; width: 100%;} 

.of h3{font-size: 30px;  }
.of h3 + p{margin-top: 20px; font-size: 18px;  word-break: keep-all; } 
.of_visual{position:relative; width: 100%; padding:250px 5% 450px;  overflow:hidden;  background: #f4f4f4;  text-align: center; color: #4a4a4a;} 
.of_visual .sec_tit {position:relative; z-index:1; }   
.of_visual .sec_tit p {margin-top: 80px;}
.of_visual .bg { position:absolute; left:0; top:0; width: 100%; height: 100%; overflow:hidden;}
.of_visual .bg video{width: 100%; height: 100%; object-fit:cover;}
.of_objet{position:relative; width: 100%; background: #fff; z-index:2; overflow:hidden;  display:flex; text-align:left; justify-content:space-between; padding:160px 5%;  } 
.of_objet .objet_cont{ width: 100%;  height: calc(100vh - 120px);  overflow:hidden;background: url('/img/of/objet_bg.jpg') no-repeat center bottom / cover; border-radius:20px; padding:120px 6%; display:flex; justify-content:space-between;}
.of_objet .objet_list{width:60%; max-width:744px; text-align: center;}
.of_objet .objet_list ul{display:flex; flex-direction:column; gap:80px;}
.of_objet .objet_list ul li{position:relative;  }  
.of_objet .objet_list ul li .thumb{position:relative;  border-radius:20px; overflow:hidden; aspect-ratio: 744 / 460;}
.of_objet .objet_list ul li .thumb img{width: 100%;  object-fit:cover;  transition:all ease .5s;} 
.of_objet .objet_list ul li .thumb:hover img{transform:scale(1.05);}
.of_objet .objet_list ul li .txt{margin-top: 48px;  }  
.of_design{max-width:1510px; width: 90%; margin:0 auto;}
.of_design .sec_tit .stit{color: #4A4A4A;}
.of_design ul{margin-top: 100px; display:flex; gap:20px; height: 560px;}
.of_design ul > li{padding:40px; border-radius:20px; background: #000; color: #fff; width: 16.666%;  text-align: center; transition:all ease .6s;  } 
.of_design ul > li.active{width: 50%; text-align:left;  }
.of_design ul > li h3{font-size: 28px;  }
.of_design ul > li p{  white-space: nowrap; opacity:0; transform:translateY(20px); margin-top: 12px; }
.of_design ul > li.active p{transform:translateY(0); opacity:1;  transition:all ease .35s;}
.of_design ul > li:nth-child(1){background: url('/img/of/of_design_bg01.jpg') no-repeat center center / cover;}
.of_design ul > li:nth-child(2){background: url('/img/of/of_design_bg02.jpg') no-repeat center center / cover;}
.of_design ul > li:nth-child(3){background: url('/img/of/of_design_bg03.jpg') no-repeat center center / cover;}
.of_design ul > li:nth-child(4){background: url('/img/of/of_design_bg04.jpg') no-repeat center center / cover;}
.of_premium{padding:200px 0; text-align: center; width: 90%; max-width:1510px; margin:0 auto;}
.of_premium .why_cont{display:flex; gap:60px; margin-top: 100px; aspect-ratio:725 / 460;}
.of_premium .why_cont > li{width: 50%;}
.of_premium .why_cont .img{position:relative; border-radius:20px; overflow:hidden; margin-bottom: 48px;}
.of_premium .why_cont .img video,
.of_premium .why_cont .img img{width: 100%; object-fit:cover;  transition:all ease .5s;} 
.of_premium .why_cont .img:hover img{transform:scale(1.05);}
.of_award{padding: 160px 5% 10%; background-image: linear-gradient(0deg, transparent 80%, #f5f5f5); }
.of_award .sec_tit{text-align: center;}
.of_award .sec_tit .btit{font-size: 200px; letter-spacing: -5px;}
.of_award .sec_tit .btit:after{content:''; width: 30px; height: 30px; border-radius:50%; background: #5fcce3; display:inline-block; vertical-align: text-top;}
.of_award .grid-container {max-width: 1510px;margin: 50px auto 0;width: 100%; display: grid; grid-template-columns: 320px 300px 2fr 320px; grid-template-rows: repeat(3, 1fr); gap: 20px;   }
.of_award .grid-container h3 strong { color: #005EB8; } 
.of_award .grid-container .item { position:relative; background: #F4F4F4; border-radius:20px; padding:48px; display: flex; flex-direction: column; ; overflow:hidden; gap:12px; font-size: 18px; }
.of_award .grid-container .item h3{font-size: 22px;}
.of_award .grid-container .item p{  margin-top: 0;}
.of_award .grid-container .item:has(img){padding:0; }
.of_award .grid-container .item  img {   width:100%; height:100%; object-fit:cover; }
.of_award .grid-container .item:has(.award_logo){  display:flex;   gap:0;  flex-direction: row;}
.of_award .grid-container .item .award_logo{aspect-ratio:1; flex-shrink:1;} 
.of_award .grid-container .item .award_txt{padding:48px;  flex:1;  display: flex; flex-direction: column; ; overflow:hidden; gap:12px;  justify-content:center;}
.of_award .item:nth-child(1) { grid-column: 1; grid-row: span 2; }
.of_award .item:nth-child(2) { grid-column: 2 / span 3; grid-row: 1; } 
.of_award .item:nth-child(3) { grid-column: 2 / span 2; grid-row: 2; }
.of_award .item:nth-child(4) { grid-column: 4; grid-row: span 2; }
.of_award .item:nth-child(5) { grid-column: 1 / span 3; grid-row: 3; }   


/*************************************************** About - For Nature ***************************************************/ 
body:has(.for) #container { max-width:100%; padding:0; width: 100%;} 

.for h3{font-size: 30px;  }
.for h3 + p{margin-top: 20px; font-size: 18px;  word-break: keep-all; } 
.for_visual{position:relative; width: 100%; padding:250px 5% 160px;  overflow:hidden;  text-align: center; }
.for_visual .visual_bg{position:absolute; left:0; top:0; width: 100%; height: 100%; z-index:-1; background: #000;} 
.for_visual:before{content:''; width: 100%; height:60%;  background-image: linear-gradient(0deg, #ffffff00, transparent); position:absolute; left:0; bottom:0; z-index:1;}
.for_visual .visual_bg video{width: 100%; height: 100%; object-fit:cover; opacity:0.8;   } 
.for_visual .sec_tit {position:relative; z-index:1; }   
.for_visual .sec_tit p {margin-top: 80px;}
.for_visual .for_about{ position:relative; z-index:1; max-width:1510px; margin:260px auto 0; width: 100%;}
.for_visual .for_about > p{font-size: 18px;}
.for_visual .for_about ul{display:flex; gap:40px; margin-top: 60px;}
.for_visual .for_about li{width:33.33%; padding:40px 40px 60px; border-radius:20px; background: rgba(255,255,255,0); text-align: center; font-size: 18px; backdrop-filter:blur(20px);}
.for_visual .for_about h3{font-size: 28px; margin:40px auto 20px;}
.for_material{ display:flex; align-items:center; justify-content:space-evenly; background-color: #f8f8f8;  }
.for_material > div{width: 45%;}
.for_material .sec_tit p{color: #4a4a4a;}
.for_material .material_left{padding:130px 0px 5% 5%; max-width:747px; color: #4a4a4a;  } 
.for_material .material_right{ padding:5% 5% 5% 0px; max-width:864px;  } 
.for_material .material_right .img{  background: #fff; border-radius:24px;  overflow:hidden; text-align: center;     aspect-ratio: 864 / 804;} 
.for_material .material_right .img img{width: 100%; height: 100%; object-fit:cover; }
.for_material .material_list {  margin-top: 80px; border-top:2px solid #e4e4e4;}  
.for_material .material_list li {   border-bottom:1px solid #e6e6e6; }  
.for_material .material_list button { display:block;  width: 100%;text-align:left;border:0; background: none; position: relative; font-size: 18px;font-weight: 600;  color: #4a4a4a; padding:24px 0;}  
.for_material .material_list button::after { content: ''; width: 24px; height: 24px; background: url('/img/icon_dropdown.png') no-repeat center center / contain; position: absolute;  right: 0;   transition: transform 0.3s;  filter:invert(0.5); }
.for_material .material_list li.open button::after {   transform: rotate(180deg);}
.for_material .material_list .cont { display: none; padding: 0 0 24px; font-size: 16px; color: #4a4a4a;  }
.for_material .material_list .btn_more {font-size: 14px; margin-top: 24px;}  
.for_handle{padding:200px 0; center; width: 90%; max-width:1510px; margin:0 auto;}
.for_handle .img_cont{display:flex; gap:60px; margin-top: 100px;  text-align:center }
.for_handle .img_cont > li{width: 50%;}
.for_handle .img_cont .img{position:relative; border-radius:20px; overflow:hidden; margin-bottom: 48px;}
.for_handle .img_cont .img img{width: 100%; transition:all ease .5s;}
.for_handle .img_cont .img:hover img{transform:scale(1.05);}
.for_handle .img_cont .img .btn_more{position:absolute; bottom:40px; left:50%; transform:translateX(-50%); background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(5px); color: #fff; font-weight: 500;}  
.for_handle .wood_cont{margin-top: 60px; padding:80px; border-radius:20px; background: #f4f4f4; display:flex; gap:40px; justify-content:space-between; align-items:flex-end;}
.for_handle .wood_cont ul{display:flex; gap:20px; justify-content:space-between; margin-top:20px;}
.for_handle .wood_cont ul li{width: 100%; font-size: 18px; text-align: center;}  
.for_handle .wood_cont .btn_more{margin-top: 48px; background: #BD9A9A;  } 
.for_handle .handle_popup { position: fixed;  inset: 0;  background: rgb(120 120 120 / 30%);  backdrop-filter:blur(10px);  justify-content: center;  align-items: center;  z-index: 1000; display:none;}
.for_handle .handle_popup.active { display: block;  animation: fadeIn 0.3s ease;}
.for_handle .handle_popup .popup_cont {  position:absolute; top:50%; transform:translateY(-50%);  background: #fff;  padding: 4%; border-radius: 20px;  width: 90%;    max-width:1510px;  left:0;  right:0; margin:0 auto; max-height:90vh; overflow-y:auto;}
.for_handle .handle_popup .popup_cont h3{text-align: center; margin-bottom: 48px;}
.for_handle .handle_popup .btn_close { border:0; background: #fff; position: absolute;  top: 30px;  right: 30px; width: 60px; height: 60px; background: url('/img/icon_close.svg') no-repeat center center / 50px;}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.for_handle .handle_popup .white_wood{text-align: center;}
.for_handle .handle_popup .white_wood > ul{display:flex; gap:20px;}
.for_handle .handle_popup .white_wood > ul > li{width: 33.33%; background: #f4f4f4; border-radius:20px; padding:48px 30px; text-align: center;}
.for_handle .handle_popup .white_wood h4{margin-top: 40px; font-size: 24px;} 
.for_handle .handle_popup .white_wood p{margin-top: 20px; font-size: 16px; word-break:keep-all;color: #555;} 
.for_handle .handle_popup .real_wood > ul{display:flex; gap:0px; justify-content:center; text-align: center;} 
.for_handle .handle_popup .real_wood .real_box{margin-top: 40px; border-radius:20px; background: #f4f4f4; padding:48px; font-size: 18px; display:flex; justify-content:space-between; gap:5%; align-items:center;}
.for_handle .handle_popup .real_wood .real_box .note{font-size: 16px; margin-top: 20px;}
.for_making{display:flex; height: 75vh;}
.for_making .make_left {flex: 3;}
.for_making .making_right {flex: 7;}
.for_making .making_video{width: 100%; height: 100%;}
.for_making .making_video video{width: 100%; height: 100%; object-fit:cover;}
.for_making .making_right{text-align: center; padding:100px 5% 100px; overflow:hidden; background: url('/img/for/making_bg.jpg') no-repeat center center / cover;}
.for_making .making_right .making_swiper{margin-top: 40px;   overflow: initial;}
.for_making .making_right .making_swiper .swiper-slide {position:relative;}
.for_making .making_right .making_swiper .swiper-slide p{padding:30px 24px; position:absolute; left:0; bottom:0;  text-align:left;font-size: 18px; color: #fff; width: 100%; font-weight: 500;}
.for_making .making_right .making_swiper .swiper-slide .num{display:block; position:absolute; left:0; top:0; color: #fff; font-weight: 700; font-size: 18px; padding:30px 24px;}
.for_making .making_right .making_swiper .swiper-slide img{border-radius:12px; width: 100%;}
.for_making .making_right .making_swiper .swiper-buttons{position:relative;   display:flex; gap:10px; justify-content:flex-end; margin-bottom: 40px;}
.for_making .making_right .making_swiper .swiper-buttons .swiper-button-prev,
.for_making .making_right .making_swiper .swiper-buttons .swiper-button-next{  position:relative; left:auto !important; right:auto !important; top:auto; bottom:auto; margin:0;}
.for_recycle{ max-width:1510px; margin:0 auto; width: 90%; padding:200px 0;} 
.for_recycle .sec_tit{text-align: center;}
.for_recycle .sec_tit .btit{font-size: 96px; margin-top: 12px;}
.for_recycle .sec_tit .btit + p{font-size: 18px; margin-top: 20px;}
.for_recycle .recycle_cont{background: #f4f4f4; padding:80px; border-radius:20px; display:flex; gap:5%; justify-content:space-between; margin-top: 100px; align-items: flex-start;}  
.for_recycle .recycle_cont .txt .btn_more{margin-top: 48px; background: #5fcce3;}
.for_recycle .recycle_cont .recycle_step{display:flex; gap:35px;  text-align: center; padding-top:40px;}
.for_recycle .recycle_cont .recycle_step p{margin-top: 20px;  font-size: 18px; font-weight: 500; }
.for_recycle .recycle_cont .recycle_step li{position:relative;}
.for_recycle .recycle_cont .recycle_step li + li:before{content:''; width: 11px; height: 11px; border-radius:50%; background: #bcbcbc; position:absolute; left: -24px; top:36%;}
.for_zero{ padding:160px 5%; background: url('/img/for/zero_bg.jpg') no-repeat center center / cover; color: #fff;}  
.for_zero .sec_tit{text-align: center; }
.for_zero .sec_tit .btit{font-size: 96px; margin-top: 12px; color: #fff;}
.for_zero .sec_tit .btit + p{font-size: 18px; margin-top: 20px; color: #fff;}
.for_zero .zero_cont{max-width:1510px; margin:100px auto 0; }
.for_zero .zero_cont > ul{display:flex; gap:20px; margin-bottom: 20px;} 
.for_zero .zero_cont > ul > li { background: #87858063; color: #fff;border-radius:20px; font-size: 18px;  backdrop-filter:blur(10px);} 
.for_zero .zero_cont > ul.top li{padding:80px;}
.for_zero .zero_cont > ul.top li:nth-child(1){width: 70%;}
.for_zero .zero_cont > ul.top li:nth-child(2){width: 30%; text-align: center;}
.for_zero .zero_cont > ul.top li:nth-child(2) h3{margin-bottom: 40px;}
.for_zero .zero_cont > ul.btm li{padding:48px;}
.for_zero .zero_cont > ul.btm li:nth-child(1){width: 25%;}
.for_zero .zero_cont > ul.btm li:nth-child(2){width: 25%;}
.for_zero .zero_cont > ul.btm li:nth-child(3){width: 50%;} 
.for_zero .zero_cont .diminish{text-align: center;}
.for_zero .zero_cont .diminish strong{font-size: 64px; line-height: 1.3; font-weight: 600;}
.for_zero .zero_cont .diminish p{font-size: 24px; font-weight: 600; margin-top: 16px;}
.for_zero .zero_graph .graph_circle{position:relative; max-width:180px; margin:0 auto;text-align: center;}
.for_zero .zero_graph .graph_circle + .graph_circle{margin-top: 24px;}
.for_zero .zero_graph .graph_circle svg{vertical-align:top;}
.for_zero .zero_graph .circle_txt{position:absolute; left:0; top:0; width: 100%; height: 100%; display:flex; flex-direction:column; justify-content:center; align-items: center; gap:7px;}
.for_zero .zero_graph .circle_txt h4{line-height: 1;}
.for_zero .zero_graph .circle_txt p{font-size: 14px;font-weight: 300;}
.for_zero .zero_graph .circle_txt strong{font-size: 42px; font-weight: 600;}
.for_zero .progress_box{ margin-top: 48px;}
.for_zero .progress_box h4{font-size: 24px;}
.for_zero .progress_box .progress_bar {  text-align: center; display:flex; gap:40px; align-items:center;}
.for_zero .progress_box .progress_bar strong{font-size: 42px; font-weight: 600;}
.for_zero .progress_box .progress_bg {  width: 100%; max-width:583px;  height: 24px;  background: rgba(255, 255, 255, 0.1);  border-radius: 20px;overflow: hidden;  position: relative;}
.for_zero .progress_box .bar { position: absolute;  left: 0;  top: 0;  height: 100%;  width: 0; background: #46B1B4;  border-radius: 20px;  transition: width 1.5s ease-out, opacity 0.5s ease;  opacity: 0;}
.for_zero .progress_box .bar:before{content:''; width: 12px; height: 12px;  background: #fff; border-radius:50%; box-shadow: 0 0 8px rgba(0,0,0,0.2); position:absolute; right:6px; top:6px;}
 




@media (max-width:1024px) {  
	.from_visual{}
	.from_gallery .bg{display:none;}
	.from_design .design_sec01 .design_promo{padding-left: 5%; padding-right: 5%;}
	.from_learning{padding-left: 5%; padding-right: 5%;}
}


@media (min-width:970px) {  
	.story_design .tab_swiper .swiper-wrapper{ transform: none !important;}
}

@media (max-width:969px) {   
	.sub .sec_tit .btit{font-size: 46px;}
	.sub .sec_tit h2{ font-size: 26px;}
	.sub .sec_tit h2 br{display:none;}
	.sub .sec_tit p{font-size: 16px; margin-top: 15px;}
	.sub .sec_tit p br{display:none;}
	.sub .sec_tit .stit{font-size: 16px; margin-bottom: 15px;}
	.sub .btn_more{font-size: 14px; margin-top: 20px; height: 40px; padding: 0 20px;} 

	
	.sub .mo{display:block;}
	.sub .pc{display:none;}


	

	/* from */
	.from h3{font-size: 22px;}
	.from h3 + p{margin-top: 10px; font-size: 16px;}
	.from h3 + p br{display:none;}
	.from_visual{padding: 0 0 80px;}
	.from_visual .sec_tit p{margin-top: 15px;}
	.from_visual .sec_tit:first-child{  height:70vh; display: flex;flex-direction: column;   align-items: center;  justify-content: center;} 
	.from_gallery { transform: scale(.7) translateY(-25vh); margin-top: 0;  transform-origin: bottom;  }
	.from_gallery > img{width:40vw; margin-left: -13%; opacity:1;}
	.from_visual .sec_tit:last-child p{margin-top: 0;}
	.from_visual .sec_tit:last-child p br{display:block;}
	.from_why{padding:80px 0;}
	.from_why .why_cont{margin-top: 40px; flex-direction:column; gap:40px;}
	.from_why .why_cont > li{width: 100%;} 
	.from_why .why_cont .img{margin-bottom: 24px;}
	.from_design .design_sec01{    display: flex;    align-items: center;    justify-content: center;flex-direction: column;    gap: 40px;}
	.from_design .design_sec01 .txt1, .from_design .design_sec01 .txt2{font-size: 5vw; opacity: 1;transform: translateY(0);position: relative;height: auto; }
	.from_design .design_sec01 .bg{position: absolute;left: 0;top: 0;object-fit: cover;}
	.from_design .design_sec01 .design_promo{ height:auto; padding: 80px 5%;  border-radius: 50px 50px 0 0; flex-direction:column; gap:40px;}
	.from_design .design_sec01 .promo_list{width: 100%; max-width:100%;}
	.from_design .design_sec01 .promo_list ul{gap:60px;}
	.from_design .design_sec01 .promo_list ul li .txt{margin-top: 24px;}
	.from_design .design_sec01 .promo_list ul li .thumb .btn_more{transform:translateX(-50%) translateY(0) !important; opacity:1 !important; bottom:20px;}
	.from_learning{height:auto; padding:80px 5%;  flex-direction:column; gap:40px;  }
	.from_learning .learning_list{width: 100%; max-width:100%;}
	.from_learning .learning_list ul li{ flex-direction:column;  }
	.from_learning .learning_list ul li .img{width: 100%; max-width:100%;}
	.from_learning .learning_list ul li .txt{width: 100%; padding:24px 0 0;}
	.from_nature{height:auto; padding:160px 0;}
	.from_nature .sec_tit h2{font-size: 24px;}  


	/* of */
	.of h3{font-size: 22px;}
	.of h3 + p{margin-top: 10px; font-size: 16px;}
	.of h3 + p br{display:none;}
	.of_visual{padding: 200px 5%; height:100vh; display: flex;flex-direction: column;   align-items: center;  justify-content: center;  background-image: linear-gradient(0deg, #f4f4f4f4, #fff 20%);} 
	.of_objet{padding: 80px 5%;}
	.of_objet .objet_cont{height:auto;    padding: 60px 30px; flex-direction:column; gap:40px;}
	.of_objet .objet_list ul{gap:40px;}
	.of_objet .objet_list{width: 100%;}
	.of_objet .objet_list ul li .txt{margin-top: 24px;}
	.of_design ul{margin-top: 40px; flex-direction: column;height: auto;}
	.of_design ul > li{width: 100%; aspect-ratio:1; padding:30px;}
	.of_design ul > li p{opacity:1; transform:none; margin-top: 6px;}
	.of_design ul > li h3{font-size: 22px;}
	.of_premium{padding:80px 0;}
	.of_premium .why_cont{margin-top: 40px; flex-direction:column; gap:40px;}
	.of_premium .why_cont > li{width: 100%;} 
	.of_premium .why_cont .img{margin-bottom: 24px;}
	.of_award{padding:80px 5%;}
	.of_award .grid-container{  display:flex;  flex-wrap:wrap; margin: 40px auto 0;} 
	.of_award .grid-container .item{width: 100%; padding:30px;  gap:10px;  }
	.of_award .grid-container .item:has(.award_logo){display:block;}
	.of_award .grid-container .item h3{font-size: 18px;}
	.of_award .grid-container .item .award_logo{aspect-ratio: 1.5; width: 70%;}
	.of_award .grid-container .item .award_txt{padding:0 30px 30px;  }
	.of_award .item:nth-child(1),
	.of_award .item:nth-child(3),
	.of_award .item:nth-child(4){display:none;}
	.of_award .sec_tit .btit{letter-spacing:0;}
	.of_award .sec_tit .btit:after{width: 10px; height: 10px;}
	.of_award .sec_tit h2 br{display:block;}

 
	/* for */
	.for h3{font-size: 22px;}
	.for h3 + p{margin-top: 10px; font-size: 16px;}
	.for h3 + p br{display:none;}
	.for_visual{padding:0 5% 80px;}
	.for_visual .sec_tit{ height:100vh; display: flex;flex-direction: column;   align-items: center;  justify-content: center;}
	.for_visual .for_about{margin:0 auto;}
	.for_visual .for_about > p{font-size: 18px;}
	.for_visual .for_about ul{margin-top: 40px;  flex-direction:column; gap:20px;} 
	.for_visual .for_about li{width: 100%; padding: 20px 20px 30px;}   
	.for_visual .for_about li img{max-width:80px;}
	.for_visual .for_about h3{margin:10px auto; font-size: 18px; }
	.for_material{flex-direction: column;  }
	.for_material .material_left{padding:80px 5% 40px; max-width:100%; width: 100%;}
	.for_material .material_right{max-width:100%; width: 100%; padding: 0;   margin-top: 30px; }
	.for_material .material_right .img{   aspect-ratio: 2;   }
	.for_material .material_right .img img{  object-position: top;}
	.for_material .material_list{margin-top: 40px;}
	.for_material .material_list button{font-size: 18px; padding:20px 0;}
	.for_material .material_list .cont{font-size: 14px; padding:0 0 20px;}
	.for_handle{padding:80px 0;}
	.for_handle .img_cont{margin-top: 40px; flex-direction:column; gap:40px;}
	.for_handle .img_cont > li{width: 100%;} 
	.for_handle .img_cont .img{margin-bottom: 24px;}
	.for_handle .img_cont .img .btn_more{bottom:20px;}
	.for_handle .wood_cont{margin-top: 60px; padding:40px 30px; flex-direction:column; gap:20px;}
	.for_handle .wood_cont .btn_more{margin-top: 24px;}
	.for_handle .wood_cont ul{flex-wrap:wrap; gap:10px; margin:10px 0 20px;}
	.for_handle .wood_cont ul li{width:calc(50% - 5px); font-size: 16px;}
	.for_handle .wood_cont ul li img{max-width:60%;}
	.for_handle .handle_popup .popup_cont{padding:40px 30px;}
	.for_handle .handle_popup .white_wood > ul{ flex-direction:column; }
	.for_handle .handle_popup .white_wood > ul > li{width: 100%; padding:30px 20px;} 
	.for_handle .handle_popup .white_wood > ul > li img{width: 80px;}
	.for_handle .handle_popup .white_wood h4{margin-top: 20px; font-size: 18px;}
	.for_handle .handle_popup .btn_close{top:0; right:0; background-size:30px;}
	.for_handle .handle_popup .popup_cont h3{margin-bottom: 24px;}
	.for_handle .handle_popup .white_wood p{font-size: 14px; margin-top: 10px;}
	.for_handle .handle_popup .real_wood > ul{gap:15px;}
	.for_handle .handle_popup .real_wood .real_box{margin-top: 20px; padding:24px; flex-direction: column;  font-size: 16px; gap:20px;}
	.for_handle .handle_popup .real_wood .real_box .note{font-size: 14px;   margin-top: 10px;}
	.for_making{flex-direction:column; height:auto;}
	.for_making > div{width: 100%;}
	.for_making .making_right{padding:80px 5%;}
	.for_making .making_right .making_swiper{margin-top: 20px;}
	.for_making .making_right .making_swiper .swiper-buttons{margin-bottom: 20px;}
	.for_making .making_right .making_swiper .swiper-slide p{font-size: 14px; padding:  10px;}
	.for_recycle{padding:80px 0;}
	.for_recycle .sec_tit .btit + p{font-size: 16px; margin-top: 10px;}
	.for_recycle .recycle_cont{margin-top: 40px; padding:40px 30px; flex-direction:column; gap:40px;}
	.for_recycle .recycle_cont .txt .btn_more{margin-top: 24px;}
	.for_recycle .recycle_cont .recycle_step{gap:20px;}
	.for_recycle .recycle_cont .recycle_step p{font-size: 14px; margin-top: 10px;} 
	.for_recycle .recycle_cont .recycle_step li + li:before{width: 6px; height: 6px; left: -14px;}
	.for_zero{padding:80px 5%;}
	.for_zero .sec_tit .btit + p{font-size: 16px; margin-top: 10px;}
	.for_zero .zero_cont{margin-top: 40px;}
	.for_zero .zero_cont > ul > li{width: 100% !important; padding:40px 30px !important; font-size: 16px;}
	.for_zero .progress_box{margin-top: 24px;}
	.for_zero .progress_box .progress_bar strong{font-size: 24px;}
	.for_zero .progress_box .progress_bar{gap:20px;}
	.for_zero .progress_box .progress_bg{height:14px;}
	.for_zero .progress_box .bar:before{width: 6px; height: 6px; right: 4px; top:4px;}
	.for_zero .progress_box h4{font-size: 18px;}
	.for_zero .zero_cont > ul.top li:nth-child(2) h3{margin-bottom: 20px;}
	.for_zero .zero_graph .circle_txt strong{font-size: 30px;}
	.for_zero .zero_cont .diminish strong{font-size: 40px;}
	.for_zero .zero_cont .diminish p{font-size: 18px; margin-top: 8px;} 
	.for_zero .zero_cont > ul{ flex-direction:column; }



	/* story */
	.story h3{font-size: 22px;}
	.story h3 + p{margin-top: 10px; font-size: 16px;}
	.story h3 + p br{display:none;}
	.story_about .tit p{font-size: 6.5vw;}  
	.story_about .imgs{max-width:46vw;}
	.story_life .life_sec01{height:auto; padding-bottom: 160px;} 
	.story_life .life_sec01 .txt .w_dim{display:none;}
	.story_life .life_sec01 .txt p{font-size: 16px;}
	.story_life .life_sec01 .imgs{overflow:hidden; top:-30%; height:130%;}
	.story_life .life_sec01 .imgs img{transform:scale(.3);}
	.story_life .life_sec01 .imgs .img1{top:-10%; right:-10%;}
	.story_life .life_sec01 .imgs .img2{left:-26%; }
	.story_life .life_sec01 .imgs .img3{  right:-24%; top: 45%;}
	.story_life .life_sec01 .imgs .img4{top:-10%;}
	.story_life .life_sec01 .imgs .img5{left:-5%;bottom: 5%;}
	.story_life .life_sec01 .imgs .img6{bottom:0;}
	.story_visual{margin-bottom: 0;}
	.story_life .life_sec02{border:0; height:auto;}
	.story_life .life_sec02 .insta_feed{transform:none; height:auto; display:none;} 
	.story_life .life_sec02 .life_style{position:relative; width: 100%; left:0; transform:none; opacity:1; padding: 0 0 50px; border-radius:0; flex-direction: column; height:auto;}
	.story_life .life_sec02 .life_style .feed_center{padding:0 5%; display:none;}
	.story_life .life_sec02 .life_promo{position:relative; height:auto; opacity:1; padding: 80px 5%; transform:none; flex-direction:column; gap:40px;}
	.story_life .life_sec02 .promo_list{width: 100%; max-width:100%;}
	.story_life .life_sec02 .promo_list ul li{ flex-direction:column; }
	.story_life .life_sec02 .promo_list ul li .img{width: 100%; max-width:100%;}
	.story_life .life_sec02 .promo_list ul li .txt{width:100%; padding: 20px 0 0;} 
	.story_design{   border-radius: 50px 50px 0 0; margin: -50px 0 0; padding: 40px 5% 0;  border-radius: 30px 30px 0 0; display: flex;  flex-direction: column;}
	.story_design .tabs{  flex-wrap:nowrap; width:100%; gap:0; }
	.story_design .tab{width: 100%;     opacity: 1;}  
	.story_design .thumb{width: 60px;}  
	.story_design .tab_swiper{margin-top: 20px;  width: 100%; border-radius:12px;} 
	.story_design .tab{flex:0 0 auto;}  
	.story_design #storyCanvas{height:auto; }

	.chablis_banner{padding:80px 0;}
	.chablis_banner ul{ flex-direction:column; gap:10px;}
	.chablis_banner li{width: 100%;}
	.chablis_banner li .txt{padding-right: 10px;}
	.chablis_banner li a{height:auto; gap:20px; padding:20px;}
	.chablis_banner li p{font-size: 16px;}
	.chablis_banner li h3{font-size: 18px; margin-top: 10px;}
	.chablis_banner li .mini-more{font-size: 14px; margin-top: 5px; padding:6px 0;}
	.chablis_banner li .img{  max-width:100px;}
	.chablis_banner li .txt{    width: calc(100% - 120px);}
	.story_color{padding-top: 80px;}


	/* mts */
	.mts h3{font-size: 18px;}
	.mts h3 + p{margin-top: 10px; font-size: 16px;}
	.mts h3 + p br{display:none;}
	.mts h4{font-size: 16px;}
	.mts_visual .visual_bg{height:80%;}
	.mts_nature{ padding: 80px 0 0; margin-bottom: -120px;}  
	.mts_nature ul li{ flex-direction:column !important; gap:20px !important; }
	.mts_nature ul li .img{width: 100%; max-width:100%;}
	.mts_nature ul li .txt{width: 100%; max-width:100%;}
	.mts_nature ul li:nth-child(2n + 1) .txt{text-align:left;}
	.mts_nature ul li + li{margin-top: 40px;}
	.mts_nature .note{font-size: 14px; }
	.mts_nature .note br{display:none;}
	.mts_filter .filter_sec01{position:relative; flex-direction:column; gap:40px; padding-bottom: 80px;} 
	.mts_filter .filter_sec01 > div{width: 100%;}
	.mts_filter .filter_sec01 .sec_tit{padding:80px 5% 0;}
	.mts_filter .filter_sec01 .filter_tabs{width: 90%; max-width:90%; margin:0 auto; padding:14px;}
	.mts_filter .filter_sec01 .filter_tabs .tab_thumb{gap:0;}
	.mts_filter .filter_sec01 .filter_tabs .tab_thumb li a{padding:10px;}
	.mts_filter .filter_sec01 .filter_tabs .tab_thumb li a p{display:none;}
	.mts_filter .filter_sec01 .filter_tabs .tab_cont{padding:0 10px 20px;}
	.mts_filter .filter_sec01 .filter_tabs .tab_cont h3{font-size: 20px;} 
	.mts_filter .filter_sec01 .filter_tabs .tab_cont p{font-size: 14px;}
	.mts_filter .filter_sec01 .filter_tabs .tab_cont p br{display:none;}
	.mts_filter .filter_sec01 .water-info{margin-top: 20px; padding:24px;}
	.mts_filter .filter_sec01 .water-title{font-size: 18px;} 
	.mts_filter .filter_sec02{ padding:80px 0 0; }
	.mts_filter .filter_sec02 .sec_tit{padding-bottom: 20px;}
	.mts_filter .filter_sec02 .filter_merit{flex-direction:column; } 
	.mts_filter .filter_sec02 .filter_merit li p{font-size: 15px;}
	.mts_filter .filter_sec02 .filter_merit li{  gap:10px;}
	.mts_filter .filter_sec02 .filter_merit li .icon{ max-width:50px;}
	.mts_filter .filter_sec02 .filter_merit li .txt{width:calc(100% - 70px); padding-top: 0;}
	.mts_cycle{margin:80px auto; padding:40px 30px;}
	.mts_cycle .cycle_top{flex-direction:column; gap:0;} 
	.mts_cycle .cycle_form form{margin-top: 24px; padding-top: 24px; flex-direction:column; gap:20px; margin-left: -15px; margin-right: -15px;}
	.mts_cycle .cycle_top .sec_tit h2{font-size: 22px;}
	.mts_cycle .cycle_top .cycle{font-size: 16px; display:flex; gap:20px; align-items:center; justify-content:space-between;}
	.mts_cycle .cycle_top .cycle .day{ justify-content:flex-start; margin-top: 0;}
	.mts_cycle .cycle_form .form-group > label{font-size: 16px; margin-bottom:10px;}
	.mts_cycle .cycle_form .radio-group span{font-size: 14px; padding:14px 8px; height: 100%;border-radius: 10px;display: flex;align-items: center; justify-content: center;}
	.mts_cycle .cycle_form .radio-group label + label{margin-top: 0;}
	.mts_cycle .cycle_form .form-group + .form-group label:nth-child(2):before{display:none;}
	.fix-card{width: 48px; height: 60px; font-size: 30px; line-height: 60px;}
	.flip-card{width: 48px; height: 60px; font-size: 30px;}
	.top-half, .bottom-half, .top-flip, .bottom-flip{font-size: 30px;}
	.top-half, .top-flip{padding-top: 15px;}
	.bottom-half, .bottom-flip{padding-bottom: 15px;} 
	.mts_cycle .cycle_form .form-group .radio-group{display:flex; gap:4px;}
	.mts_cycle .cycle_form .radio-group label{width: 33.33%;}
	.mts_use{flex-direction:column;  gap:20px;}
	.mts_use .use_left{width: 100%;}
	.mts_use .use_right{width: 100%;}
	.mts_use .use_thumb_wrap{margin-top: 60px;}
	#container .use_thumb_wrap .use_prev, #container .use_thumb_wrap .use_next{top:-30px;}


	/* how */
	.how_use{position:relative; flex-direction:column;  gap:20px; padding-bottom: 80px;} 
	.how_use .use_left{padding:80px 5% 0; gap:40px; width: 100%;}
	.how_use .tab_thumb li a{width: 80px; height: 80px; font-size: 14px; border-radius:10px;}
	.how_use .use_right{width: 100%; padding:0 5%;}
	.how_use .use_swiper .swiper-slide{padding:40px 30px 60px; }
	#container .how_use .swiper-button-next, #container .how_use .swiper-button-prev{width: 40px; height: 40px;}
	#container .how_use .swiper-button-next{right:20px;}
	#container .how_use .swiper-button-prev{left:20px;}
	.how_use .use_swiper .txt{font-size: 18px; margin: 24px 0 12px;}
	.how_use .use_swiper .txt h3{margin-bottom: 10px;}
	.how_use .use_swiper .img{margin:0 auto; max-width:70%;}
	.how_faq{padding:80px 5% 0;}
	.how_faq .faq{margin:40px auto 0;}
	.how_faq .faq-item{padding:20px; border-radius:10px;}
	.how_faq .faq-question{font-size: 16px; padding-right: 30px;  }
	.how_faq .faq-question::after{right:0; top:0; width: 20px; height: 20px;}
	.how_faq .faq-item + .faq-item{margin-top: 10px;}
	.how_faq .faq-answer{font-size: 15px; padding-top: 15px; margin-top: 15px;}
	
 
}