@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Jost:ital,wght@0,100..900;1,100..900&display=swap');


/*
 *****************************************
 * CSS Variables
 * ***************************************
 * Site : motifull
 * File : custom.css
 * DATE : 2025.05.20
 *
 * SUMMARY :
 * 1) Jupiter X Reset 
 * 2) HEADER
 * 3) MAIN
 * 4) FOOTER
 * 5) SUB
 * 6) RESPONSIBILITY

 * br01 - 767
 * br02 - 1024
 * br03 - 1200
 * br04 -
 * br05 - 
*/

/* ************************************************
*************** Jupiter X Reset *******************
************************************************* */
/* Reset */
.jupiterx-main-content > .container > .row{margin-right:0 !important; margin-left:0 !important;}
.jupiterx-main-content{padding:0 !important;}
.container,.jupiterx-main-content > .container > .row > [class*=col-]{padding-left:0 !important; padding-right:0 !important;}
.jupiterx-post-header{display:none !important;}
p{margin-bottom:0 !important;}
.wordBr{word-break:keep-all;}
.wordBr02{word-break:break-all;}
a {text-decoration: none !important;}
a:hover{text-decoration: none !important;}
svg{margin: 0 !important;}
.font, .font div,.font a,.font p,.font span,.font h1, .font h2,.font h3,.font h4,.font h5,.font h6,.font input, .font textarea,.font button, .font label{font-family: "Jost", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif !important; word-break: keep-all;}

.elementor-icon-list-text{padding-inline-start: 0px !important;}

body{background-color: #FFF7EC !important;}


/************ menu popup *************/
.menu_pop li.current_page_parent > a{color: #9C4420 !important;}
.menu_pop li.current_page_parent > a .sub-arrow svg path{fill: #9C4420;}
.menu_pop a.highlighted{border-bottom: 1px solid rgba(156, 68, 32, 0.30) !important;}
.menu_pop a .sub-arrow{position: absolute; right: 20px;}
.menu_pop a .sub-arrow svg path{fill: #000;}
.menu_pop .current-menu-item a .sub-arrow svg path{fill: #9C4420;}
.menu_pop nav > ul > li:last-child{border-bottom: 1px solid rgba(156, 68, 32, 0.30) !important;}
.menu_pop ul.sub-menu{padding: 15px 0 15px 30px !important;}
.menu_pop ul.sub-menu li{border: none !important;}
.menu_pop ul.sub-menu li + li{margin-top: 8px !important;}
.menu_pop ul.sub-menu li a{padding: 0 !important; border: none !important;}
.menu_pop_close .elementor-icon-wrapper{display: flex; justify-content: flex-end;}


/* ************************************************
********************** Main ***********************
************************************************* */
/* sec01 */
#sec01{height: calc(100vh - 105px);}
#sec01 .img_Wrap div{height: 100% !important;}
#sec01 .slide_img .jet-carousel{margin-left: 0; margin-right: 0;}
#sec01 .slide_img .jet-carousel .slick-slide img{width: 100%; height: 100%; object-fit: cover;}

.arrow_wrap .slide_arrow/* , .arrow_wrap .slide_dot */{cursor: pointer;}
.arrow_wrap .slide_dot span{overflow: hidden; border-radius: 8px;}
.arrow_wrap .slide_dot.on span{--divider-color: #9C4420 !important;}

/* sec04 */
#Gradient > div{position: relative;}
#Gradient > div::before {content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 100px; border: 2px solid transparent; background: linear-gradient(130deg, #9C4420 0%, rgba(156, 68, 32, 0.4) 50%, rgba(156, 68, 32, 0.8) 100%) border-box; -webkit-mask: linear-gradient(#9C4420 0 0) padding-box, linear-gradient(#9C4420 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude;} 

/* sec05 */
#sec05 .sec05-img figure{overflow: hidden;}

/* sec06 */
#sec06 .sec06-img img{width: 100%;}

/* ************************************************
********************** Sub ************************
************************************************* */
.TrinogeniX-box .jet-headline__first .jet-headline__label{display: flex; justify-content: center; align-items: center; width: 52px; height: 52px; background-color: #9C4420;}
.TrinogeniX-box .jet-headline__second{min-height: 75px;}

#OurScience .bg-warp{height: 100%;}
#OurScience .detail-Rimg{display: none; opacity: 0; transition: opacity 0.5s ease;}
#OurScience .detail-Rimg.show {display: block; opacity: 1;}

.Shampoo_counterBox{-webkit-backdrop-filter: blur(7.5px); backdrop-filter: blur(7.5px);}
.Shampoo_counterBox .elementor-counter-number-wrapper{align-items: flex-end;}
.Shampoo_counterBox .elementor-counter-number-wrapper .elementor-counter-number-suffix{margin-left: 10px !important; font-weight: 500 !important; font-size: 35px !important; line-height: normal !important;}

.Before-box .elementor-image-box-wrapper, .after-box .elementor-image-box-wrapper{position: relative;}
.Before-box .elementor-image-box-wrapper img, .after-box .elementor-image-box-wrapper img{width: 100%; height: 240px; object-fit: cover;}
.Before-box .elementor-image-box-wrapper .elementor-image-box-content, .after-box .elementor-image-box-wrapper .elementor-image-box-content{display: flex; min-height: 51px; align-items: center; justify-content: center; background-color: #70685A; position: absolute; left: 0; bottom: 0;}
.after-box .elementor-image-box-wrapper .elementor-image-box-content{background-color: #9C4420;}
.after-box::after{content: ""; display: block; width: 100%; height: 100%; border: 5px solid #9C4420; position: absolute; left: 0; top: 0;}
.BeAfter-arrow{transform: translate(-50%, -50%);}

.How-box .jet-headline__first .jet-headline__label{display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; background-color: #9C4420;}
.How-box .jet-headline{flex-wrap: nowrap !important;}

.How-box-tab .jet-tabs__control-wrapper{gap: 80px; position: relative;}
.How-box-tab .jet-tabs__control-wrapper::before{content: ""; display: block; width: 1px; height: 25px; background-color: #9E988E; position: absolute; left: 52%; top: 50%; transform: translate(-50%, -50%);}
.How-tab-img{display: none !important; opacity: 0; transition: opacity 0.5s ease;}
.How-tab-img.on {display: flex !important; opacity: 1;}

.VisibleResults-tab .jet-tabs__control-wrapper{gap: 80px;}
.VisibleResults-tab .jet-tabs__control-wrapper .jet-tabs__control{position: relative;}
.VisibleResults-tab .jet-tabs__control-wrapper .jet-tabs__control + .jet-tabs__control::before{content: ""; display: block; width: 1px; height: 25px; background-color: #9E988E; position: absolute; left: -40px; top: 50%; transform: translateY(-50%);}

.news-card-list .elementor-pagination{display: flex; justify-content: center; gap: 10px;}
.news-card-list .elementor-pagination .page-numbers{display: flex; width: 32px; height: 32px; justify-content: center; align-items: center; border-radius: 8px; border: 1px solid #E0E0E0;}
.news-card-list .elementor-pagination .page-numbers.current{border: 1px solid #9C4420; background-color: #9C4420;}
.news-card-list .elementor-pagination .page-numbers:hover{border: 1px solid #9C4420; background-color: #9C4420; color: #fff !important;}
.news-card-list .elementor-pagination .page-numbers:hover path{border: 1px solid #9C4420; fill: #fff !important;}

.FAQs-acco .jet-toggle__control .jet-toggle__label-text span{margin-right: 24px;}

/* Contact Us */
#Inquiry input:focus, #Inquiry select:focus , #Inquiry textarea:focus {outline: none;}
#Inquiry .form_input_wrap{margin-bottom: 30px; display: flex; gap: 20px;} 
#Inquiry .form_input_wrap .form_input{display: flex; flex: 1;} 
#Inquiry .form_input_wrap .form_input p, 
#Inquiry .input_message p{display: flex; flex: 1; flex-wrap: wrap;} 
#Inquiry .form_input_wrap .form_input p label, 
#Inquiry .input_message p label{margin-bottom: 12px; width: 100%; font-weight: 500; font-size: 16px; color: #2E2E2E; line-height: 16px; letter-spacing: -0.32px;} 
#Inquiry .form_input_wrap .form_input p label span,
#Inquiry .input_message p label span{margin-left: 6px; font-weight: 500; font-size: 16px; color: #EE452E; letter-spacing: -0.32px; vertical-align: top;} 
#Inquiry .form_input_wrap .form_input p > span,
#Inquiry .input_message p > span{flex: 1;}
#Inquiry .form_input_wrap .form_input p > span > input,
#Inquiry .input_message p > span > textarea,
#Inquiry .form_input_wrap .form_input.radio p > span{padding: 16px; width: 100%; height: 65px; border: 1px solid #D0D0D0; background: #F6EEE0; font-weight: 400; font-size: 16px; color: #2E2E2E; line-height: 100%;}

#Inquiry .form_input_wrap .form_input.radio p > span{padding: 0 !important; display: flex; align-items: center; background-color: unset; border: none;}
#Inquiry .form_input_wrap .form_input.radio p > span .wpcf7-radio{display: flex; gap: 30px;}
#Inquiry .form_input_wrap .form_input.radio p > span .wpcf7-list-item{margin: 0;}
#Inquiry .form_input_wrap .form_input.radio p > span .wpcf7-list-item label{margin: 0;}
#Inquiry .form_input_wrap .form_input.radio p > span .wpcf7-list-item label .wpcf7-list-item-label{margin-left: 12px; font-size: 16px; color: #2E2E2E; line-height: 160%; letter-spacing: -0.32px; cursor: pointer;}
#Inquiry .form_input_wrap .form_input.radio p > span .wpcf7-list-item label .wpcf7-list-item-label::before{display: none;}
#Inquiry .form_input_wrap .form_input.radio input[type='radio'] {margin-top: 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 18px; height: 18px; border: 1px solid #D0D0D0; border-radius: 50%; outline: none; cursor: pointer; box-sizing: border-box;}
#Inquiry .form_input_wrap .form_input.radio input[type='radio']:checked {background-color: #9C4420; border: 2px solid #D0D0D0; box-sizing: border-box;}
/* #Inquiry .form_input_wrap .form_input.radio input[type='radio']:checked + span{font-weight: 500; color: #2E2E2E !important;} */


#Inquiry .input_message{margin-bottom: 38px;}
#Inquiry .input_message p > span > textarea{height: 190px;}

#Inquiry .form_submit{display: flex; justify-content: center;}
#Inquiry .form_submit input{width: 420px; height: 65px; background-color: #000; border: 0; font-weight: 600; font-size: 16px; color: #FFF; line-height: 140%;}

#Inquiry .wpcf7-not-valid-tip{font-size: 13px !important; position: absolute; bottom: -18px; left: 0; width: 100% !important;}
#Inquiry .input_message .wpcf7-not-valid-tip{bottom: -13px;}
#Inquiry .wpcf7-spinner{display: none !important;}


.jupiterx-corner-buttons{right: 0 !important;}
.jupiterx-scroll-top{display: flex !important; justify-content: center; align-items: center; padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; padding-left: 0 !important; border-width: 1px !important; border-color: #111 !important; border-radius: 0 !important; background-color: #9C4420 !important; width: 50px; height: 50px;}
.jupiterx-scroll-top:focus{box-shadow: 0 0 0 0 rgba(180, 180, 180, 0.5) !important;}
.jupiterx-icon-angle-up:before{content: "" !important; display: block; width: 22px; height: 22px; background: url(/wp-content/uploads/2025/06/top-arrow.svg) no-repeat center center / contain;}

.Self-diagnosis{-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}

.QuestionBtn-wrap .QuestionBtn{cursor: pointer;}
.QuestionBtn-wrap .QuestionBtn.active > div{border-color: #9C4420 !important; background-color: #9C4420 !important;}
.QuestionBtn-wrap .QuestionBtn.active > div .elementor-heading-title{color: #fff !important;}
.result-txt{position: relative;}
.result-txt::before{content: ""; display: block; width: 12px; height: 10px; background: url(/wp-content/uploads/2025/06/result-arrow.svg) no-repeat center center / contain; position: absolute; left: 50%; top: -9px; transform: translateX(-50%);}

/* .result-wrap{display: none !important;} */


/* ************************************************
******************* RESPONSIBILITY *****************
************************************************* */
@media (max-width:1200px){
    .br03{display: none;}
}
@media (max-width:1024px){
    .br02{display: none;}

    .TrinogeniX-box .jet-headline__first .jet-headline__label{width: 44px; height: 44px;}

    .Shampoo_counterBox .elementor-counter-number-wrapper .elementor-counter-number-suffix{margin-left: 5px !important; font-size: 30px !important;}
    .Before-box .elementor-image-box-wrapper img, .after-box .elementor-image-box-wrapper img{height: 200px;}
    .How-box .jet-headline__first .jet-headline__label{width: 32px; height: 32px;}

    .How-box-tab .jet-tabs__control-wrapper{gap: 60px; position: relative;}
    .How-box-tab .jet-tabs__control-wrapper::before{height: 22px;}

    .VisibleResults-tab .jet-tabs__control-wrapper{gap: 60px;}
    .VisibleResults-tab .jet-tabs__control-wrapper .jet-tabs__control + .jet-tabs__control::before{height: 22px; left: -30px;}

    .news-card-list .elementor-pagination{gap: 8px;}
    .news-card-list .elementor-pagination .page-numbers{width: 28px; height: 28px;}

    #Inquiry .form_input_wrap .form_input p > span > input,
    #Inquiry .input_message p > span > textarea,
    #Inquiry .form_input_wrap .form_input.radio p > span{padding: 12px; height: 55px;}
    #Inquiry .form_submit input{width: 320px; height: 55px;}

    .jupiterx-scroll-top{width: 45px; height: 45px;}
}
@media (max-width:767px){
    /* sec01 */
    #sec01{height: auto;}
    .arrow_wrap{top: 10px !important; bottom: unset !important;}

    .TrinogeniX-box .jet-headline__first .jet-headline__label{width: 40px; height: 40px;}
    .TrinogeniX-box .jet-headline__second{min-height: 60px;}

    .Shampoo_counterBox .elementor-counter-number-wrapper .elementor-counter-number-suffix{font-size: 22px !important;}
    .How-box .jet-headline__first .jet-headline__label{width: 24px; height: 24px;}

    .How-box-tab .jet-tabs__control-wrapper{gap: 40px; position: relative;}
    .How-box-tab .jet-tabs__control-wrapper::before{height: 18px;}

    .VisibleResults-tab .jet-tabs__control-wrapper{gap: 10px 30px;}
    .VisibleResults-tab .jet-tabs__control-wrapper .jet-tabs__control + .jet-tabs__control::before{height: 16px; left: -15px;}

    .news-card-list .elementor-pagination{gap: 6px;}
    .news-card-list .elementor-pagination .page-numbers{width: 26px; height: 26px; border-radius: 6px;}

    #Inquiry .form_input_wrap .form_input p label, #Inquiry .input_message p label{margin-bottom: 10px; font-size: 14px; line-height: 14px;}
    #Inquiry .form_input_wrap .form_input p > span > input, #Inquiry .input_message p > span > textarea, #Inquiry .form_input_wrap .form_input.radio p > span{height: 50px; font-size: 14px;}
    #Inquiry .form_input_wrap .form_input.radio p > span .wpcf7-radio{gap: 20px;}
    #Inquiry .form_input_wrap .form_input.radio input[type='radio']{width: 14px; height: 14px;}
    #Inquiry .form_input_wrap .form_input.radio p > span .wpcf7-list-item label .wpcf7-list-item-label{margin-left: 8px; font-size: 14px; line-height: 130%;}
    #Inquiry .form_input_wrap{margin-bottom: 20px; gap: 15px;}
    #Inquiry .input_message p > span > textarea{height: 150px;}
    #Inquiry .form_submit input{width: 280px; height: 50px; font-size: 14px;}

    .jupiterx-scroll-top{width: 40px; height: 40px;}
}
@media (max-width:550px){
    #Inquiry .form_input_wrap{flex-direction: column; gap: 20px;}
    #Inquiry .form_submit input{width: 200px;}
    #Inquiry .form_input_wrap .form_input.radio p > span .wpcf7-radio{flex-wrap: wrap; gap: 10px 20px;}
}