@charset "utf-8";


/* sub3에서 이동 */

/* 서브 올공용 */
.sub .sub_page_tit {  }
.sub .sub_page_tit.wh { color: #fff; }
.sub .sub_page_tit.center { text-align: center; }
.sub .sub_page_tit .desc { margin-bottom: 0.5em; font-size: var(--subTxt); font-weight: 600; opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; transition-delay: 0.3s; }
.sub .sub_page_tit .tit { font-size: var(--smTit); font-weight: 700; opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; transition-delay: 0.3s; }
.sub .sub_page_tit .desc + .tit {  transition-delay: 0.5s; }
.sub .sub_page_tit .txt { margin-top: 1.5em; font-weight: 500; opacity: 0; transform: translateY(30px); transition: opacity 0.8s, transform 0.8s; transition-delay: 0.7s; }

.sub .sub_page_tit.active .desc,
.sub .sub_page_tit.active .tit,
.sub .sub_page_tit.active .txt { opacity: 1; transform: translateY(0); }

/* 브랜드 스토리 */
/*.sub_brand_story .sub_visual { margin-bottom: 0; }*/
.story_page {margin-top: calc( -1 * var(--subVisPd));}
.story_page .visual_sect{position: relative; height: 100vh;}
/*.story_page .visual_sect .cont_wrap{ position: relative; height: 100%; transform: translateZ(0); will-change: transform; background:#ddc8b5;}*/
.story_page .visual_sect .cont{position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.story_page .visual_sect .cont_box {position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 60rem 0 60rem 0; overflow: hidden; }
.story_page .visual_sect .cont .tit_box {  }
.story_page .visual_sect .cont .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.story_page .visual_sect .cont .bg img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.story_page .visual_sect .cont .tit_box .tit { display: flex; align-items: center; justify-content: center; font-size: var(--smTit); font-weight: 700; text-align: center; color: #fff; }
.story_page .visual_sect .cont .tit_box .tit .txt { position: relative; white-space: nowrap; color: rgba(255,255,255,0.3); }
.story_page .visual_sect .cont .tit_box .tit .copy { position: absolute; left: 0; top: 0; width: 0; color: #fff; overflow: hidden; }

.story_page .visual_sect .cont.cont01{ background:#ddc8b5;}
.story_page .visual_sect .cont.cont01 .cont_box{ background: linear-gradient(to bottom,  #AF7E65 1%,#797255 100%); }
.story_page .visual_sect .cont.cont02{background:#797355;}
.story_page .visual_sect .cont.cont03{background:#a76f58;}
.story_page .visual_sect .cont.cont02,
.story_page .visual_sect .cont.cont03 { opacity: 0;}

.story_page .do_cir_sect { position: relative; padding: 18rem 0; background-color: var(--brown); color: #fff; }
.story_page .do_cir_sect:before { content: ''; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background-color: var(--brown); z-index: 5; }
.story_page .do_cir_sect .cont { position: relative; display: grid; grid-template-columns: 26rem minmax(0, 1fr) 26rem; gap: 6rem; margin-top: var(--contMt); padding: 19rem 0; pointer-events: none;}
.story_page .do_cir_sect .cont .bg { position: absolute; left: 50%; top: 50%; width: 85%; height: 100%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.5s; transition-delay: 0.8s; }
.story_page .do_cir_sect .cont.active .bg { opacity: 1; }
.story_page .do_cir_sect .cont .bg img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.story_page .do_cir_sect .cont .bg object { width: 100%; height: 100%; object-fit: contain; object-position: center; }

.story_page .do_cir_sect .cont .main_cir { position: relative; width: 100%; padding-top: 100%; border-radius: 100%; border: 1px solid #fff; font-size: var(--lgTxt2); font-weight: 700; text-align: center; background-color: var(--brown); opacity: 0; transform: translateX(3rem); transition: all 0.5s; transition-delay: 0.3s; }
.story_page .do_cir_sect .cont .main_cir .txt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.story_page .do_cir_sect .cont .main_cir.gr { background-color: var(--green); border-color: var(--green); transform: translateX(-3rem); }
.story_page .do_cir_sect .cont.active .main_cir { opacity: 1; transform: translateX(0); }
.story_page .do_cir_sect .cont .sub_cir_box { display: flex; align-items: center; justify-content: space-between; opacity: 0; transition: opacity 0.5s; transition-delay: 0.6s; }
.story_page .do_cir_sect .cont.active .sub_cir_box { opacity: 1; }
.story_page .do_cir_sect .cont .sub_cir_box .sub_cir { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; padding-top: calc(25% + 1.3rem); border-radius: 100%; border: 1px dashed #fff; text-align: center; }
.story_page .do_cir_sect .cont .sub_cir_box .sub_cir .txt { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap; }
.story_page .do_cir_sect .cont .sub_cir_box .sub_cir + .sub_cir { margin-left: -2.5rem; }

.story_page .slogan_sect { display: flex; align-items: center; justify-content: center; height: 100vh; overflow: hidden; }
.story_page .slogan_sect .cont { position: relative; width: 100%; height: 100%; }

.story_page .slogan_sect .cont .mask_cont { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: #fff; }
.story_page .slogan_sect .cont .mask_bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 5; }
.story_page .slogan_sect .cont .mask_bg .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.story_page .slogan_sect .cont .mask_bg .bg_bk { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; background-color: rgba(0,0,0,0.55); opacity: 0; z-index: 5; }

.story_page .slogan_sect .cont .cont_bg { -webkit-clip-path: url(#introMask); clip-path: url(#introMask); }


.story_page .slogan_sect .cont .tit_cont { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; font-size: var(--tit); font-weight: 700; }
.story_page .slogan_sect .cont .tit_cont .img_box { position: relative; width: 0; height: 0; padding-top: 0; border-top: 1px solid var(--black); margin: 0 auto; border-radius: 2rem; overflow: hidden; }
.story_page .slogan_sect .cont .tit_cont .img_box .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.story_page .slogan_sect .cont .tit_cont .img_box .img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.story_page .slogan_sect .cont .slogan_line { position: absolute; left: 50%; top: 0; width: 1px; height: 0; transform: translate(-50%, 0); border-right: 1px solid #fff; z-index: 10; }
.story_page .slogan_sect .cont .slogan_line .dot { position: absolute; left: 50%; bottom: 0; width: 10px; height: 10px; background-color: #fff; border-radius: 100%; transform: translate(-42%, 50%); }
.story_page .slogan_sect .cont .slogan_line .dot:before { content: ''; position: absolute; left: 50%; top: 50%; width: 200%; height: 200%; background-color: rgba(255,255,255,0.2); border-radius: 100%; transform: translate(-50%, -50%); }

.story_page .slogan_sect .cont .side_ico_cont { position: absolute; left: 50%; top: 50%; display: flex; align-items: flex-end; justify-content: center; width: 100%; transform: translate(-50%, -50%); z-index: 10; }
.story_page .slogan_sect .cont .side_ico_cont .side_box { display: flex; flex-direction: column; width: 14%; opacity: 0; }
.story_page .slogan_sect .cont .side_ico_cont .side_box.side_box02 { margin-left: 15%; }
.story_page .slogan_sect .cont .side_ico_cont .side_box .txt_box { margin-top: 9.5rem; color: #fff; font-weight: 700; text-align: center; }
.story_page .slogan_sect .cont .side_ico_cont .side_box .txt_box .tit { font-size: var(--mainTit); }
.story_page .slogan_sect .cont .side_ico_cont .side_box .txt_box .txt { margin-top: 0.8em; font-size: var(--lgTxt2); }

.story_page .slogan_sect .cont .logo_cont { position: absolute; left: 50%; top: 50%; width: 74rem; transform: translate(-50%, -50%); text-align: center; z-index: 10; }
.story_page .slogan_sect .cont .logo_cont .logo { opacity: 0; }
.story_page .slogan_sect .cont .logo_cont .txt_box { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 20rem; opacity: 0; }
.story_page .slogan_sect .cont .logo_cont .txt_box .txt { position: relative; display: flex; align-items: center; justify-content: center; font-weight: 500; font-size: var(--smTit); color: rgba(255,255,255,0.5); overflow: hidden; white-space: nowrap; }
.story_page .slogan_sect .cont .logo_cont .txt_box .txt .copy { position: absolute; left: 0; top: 0; width: 0; color: #fff; overflow: hidden; }

.story_page .logo_sect { padding-bottom: var(--sectPd); }
.story_page .logo_sect .line_box { height: 28rem; }
.story_page .logo_sect .line { position: relative; width: 30px; height: 0; transition: height 1s; transition-delay: 0.3s; margin: 0 auto; }
.story_page .logo_sect.active .line { height: 100%; }
.story_page .logo_sect .line .img { width: 2px; height: 100%; margin: 0 auto; }
.story_page .logo_sect .line .img img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.story_page .logo_sect .line .dot { position: absolute; left: 50%; bottom: 0; width: 10px; height: 10px; background-color: var(--brown); border-radius: 100%; transform: translate(-50%, 50%); opacity: 0; transition: opacity 0.3s; transition-delay: 0.2s; }
.story_page .logo_sect .line .dot:before { content: ''; position: absolute; left: 50%; top: 50%; width: 200%; height: 200%; background-color: rgba(167,111,88,0.2); border-radius: 100%; transform: translate(-50%, -50%); }
.story_page .logo_sect.active .line .dot { opacity: 1; }

.story_page .logo_sect .sub_page_tit { margin-top: var(--contMt); }
.story_page .logo_sect .sub_page_tit .tit { transition-delay: 0.6s; }
.story_page .logo_sect .sub_page_tit .txt { transition-delay: 1s; }

.story_page .logo_sect .cont { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; margin-top: var(--contMt); }

.story_page .logo_sect .cont .logo_cont { opacity: 0; opacity: 0; transition: opacity 1s; }
.story_page .logo_sect .sub_page_tit.active + .cont .logo_cont { opacity: 1; }
.story_page .logo_sect .cont .logo_cont .logo_box { display: flex;flex-direction: column; align-items: center; justify-content: center; padding: 4.2rem 0; border-radius: 2.4rem; color: #fff; }
.story_page .logo_sect .cont .logo_cont:nth-of-type(1) { transition-delay: 0.8s; }
.story_page .logo_sect .cont .logo_cont:nth-of-type(1) .logo_box { background-color: var(--brown); }
.story_page .logo_sect .cont .logo_cont:nth-of-type(2) { transition-delay: 1s; }
.story_page .logo_sect .cont .logo_cont:nth-of-type(2) .logo_box { background-color: #DDC8B5; }
.story_page .logo_sect .cont .logo_cont:nth-of-type(3) { transition-delay: 1.2s; }
.story_page .logo_sect .cont .logo_cont:nth-of-type(3) .logo_box { background-color: var(--green); }
.story_page .logo_sect .cont .logo_cont .logo_box .logo { width: 5.2rem; }
.story_page .logo_sect .cont .logo_cont .logo_box .logo img {  }
.story_page .logo_sect .cont .logo_cont .logo_box .txt { margin-top: 1em; font-size: var(--smTxt); font-weight: 700; }

.story_page .logo_sect .cont .logo_cont .txt_box { margin-top: 3.2rem; }
.story_page .logo_sect .cont .logo_cont .txt_box .tit { font-size: var(--txt2); font-weight: 700; }
.story_page .logo_sect .cont .logo_cont .txt_box .txt { margin-top: 1em; font-size: var(--smTxt); font-weight: 500; }

.story_page .story_clinc_sect { padding: var(--sectPd) 0 var(--sectPd); background: linear-gradient(to bottom,  #f8f8f6 0%,#ffffff 100%); }

.story_page .story_philo_sect .cont { display: flex; align-items: flex-start; justify-content: space-between; }
.story_page .story_philo_sect .cont .sticky_box { position: sticky; left: 0; top: 12rem; width: 50%; height: 100%; }
.story_page .story_philo_sect .cont .philo_img { position: relative; width: calc(100% - 11rem); padding-top: 55%; margin-top: 6rem; border-radius: 2rem; overflow: hidden; opacity: 0; transform: translateX(5rem); transition: opacity 0.5s, transform 0.5s; }
.story_page .story_philo_sect.active .cont .philo_img { opacity: 1; transform: translateX(0); }
.story_page .story_philo_sect .cont .philo_img .img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s; }
.story_page .story_philo_sect .cont .philo_img .img.active { opacity: 1; }
.story_page .story_philo_sect .cont .philo_img .img img { width: 100%; height: 100%; object-fit: cover; object-position: center; }

.story_page .story_philo_sect .cont .philo_txt { width: 50%; padding-top: 35vh; opacity: 0; transform: translateX(-5rem); transition: opacity 0.5s, transform 0.5s; }
.story_page .story_philo_sect.active .cont .philo_txt { opacity: 1; transform: translateX(0); }
.story_page .story_philo_sect .cont .philo_txt .txt_box { margin-bottom: 15rem; opacity: 0.5; transition: opacity 0.5s; }
.story_page .story_philo_sect .cont .philo_txt .txt_box .img { display: none; }
.story_page .story_philo_sect .cont .philo_txt .txt_box.active { opacity: 1; }
.story_page .story_philo_sect .cont .philo_txt .txt_box .num_box { display: flex; align-items: center; justify-content: flex-start; }
.story_page .story_philo_sect .cont .philo_txt .txt_box .num { display: flex; align-items: center; justify-content: center; padding: 0.8rem 1.5rem; margin-right: 1.6rem; border-radius: 1rem; background-color: #E8E8E8; color: var(--gray); font-size: var(--txt2); font-weight: 700; transition: all 0.3s; }
.story_page .story_philo_sect .cont .philo_txt .txt_box.active .num { color: var(--green); background-color: #F3F1E7; }
.story_page .story_philo_sect .cont .philo_txt .txt_box .tit { display: flex; align-items: center; justify-content: flex-start; line-height: 1; font-size: var(--smTit); font-weight: 700; }
.story_page .story_philo_sect .cont .philo_txt .txt_box .txt { margin-top: 1em; font-size: var(--txt1); font-weight: 500; }

.story_page .story_rule_sect { margin-top: var(--sectPd); }
.story_page .story_rule_sect .cont { margin-top: var(--contMt); opacity: 0; transform: translateY(5rem); transition: opacity 0.8s, transform 0.8s; transition-delay: 0.5s; }
.story_page .story_rule_sect.active .cont { opacity: 1; transform: translateY(0); }

.story_page .story_rule_sect .cont_tit { display: flex; align-items: flex-end; justify-content: space-between; }
.story_page .story_rule_sect .cont_tit .paging { display: flex; align-items: center; justify-content: center; }
.story_page .story_rule_sect .cont_tit .swiper_btn { display: flex; align-items: center; justify-content: center; width: 6.4rem; height: 6.4rem; border-radius: 100%; border: 1px solid #ddd; cursor: pointer; transition: all 0.3s; }
.story_page .story_rule_sect .cont_tit .swiper_btn + .swiper_btn { margin-left: 1.6rem; }
.story_page .story_rule_sect .cont_tit .swiper_btn svg { width: 2.2rem; }
.story_page .story_rule_sect .cont_tit .swiper_btn:hover { background-color: #000; border-color: #000; fill: #fff; }  

.story_page .story_rule_sect .rule_slide { overflow: hidden; }
.story_page .story_rule_sect .rule_slide .item {position:relative;  border-radius: 3.2rem; background-color: var(--bg); }
/*.story_page .story_rule_sect .rule_slide .item .txt_box{position:absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 6.4rem; height: 100%;}*/
.story_page .story_rule_sect .rule_slide .item .txt_box{padding: 6.4rem;}
.story_page .story_rule_sect .rule_slide .item .ico { width: 6.5rem; margin-bottom: 6.5rem; }
.story_page .story_rule_sect .rule_slide .item .tit { font-size: var(--lgTxt2); font-weight: 700; }
.story_page .story_rule_sect .rule_slide .item .txt { margin-top: 1em; font-size: var(--txt1); }






/* sub3에 옮길 것 */
.sub_self-test-result .sub_visual {border-bottom:none; margin-bottom: 0;}
.posture_case .rule_slide .item .before_after .bimg:after{z-index: 10;}