@charset "UTF-8";
/* font-family: 'SUIT', sans-serif; */

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

 * br01 - 767
 * br02 - 1024
 * br03 - 
 * 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: "pretendard", sans-serif !important; word-break: keep-all;}
.font02, .font02 div,.font02 a,.font02 p,.font02 span,.font02 h1, .font02 h2,.font02 h3,.font02 h4,.font02 h5,.font02 h6,.font02 input, .font02 textarea,.font02 button, .font02 label{font-family: 'SUIT', sans-serif !important; word-break: keep-all;}

.blur{backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);}

.more_btn_O a::after{content: ""; display: block; width: 0; height: 100%; background-color: #F43B00; position: absolute; left: 0; top: 0; transition: all 0.3s;}
.more_btn_O a:hover::after{width: 100%;}
.more_btn_W a::after{content: ""; display: block; width: 0; height: 100%; background-color: #fff; position: absolute; left: 0; top: 0; transition: all 0.3s;}
.more_btn_W a:hover::after{width: 100%;}

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

/* ************************************************
******************** HEADER **********************
************************************************* */
header{position: absolute !important;}
#header{transition: all 0.3s !important;}
#header .nav_manu nav > ul > li > a{}
#header .nav_manu nav > ul > li > a .sub-arrow{display: none;}
#header .nav_manu nav > ul > li > .sub-menu{padding: 7px 0;}
#header .nav_manu nav > ul > li > .sub-menu li a{border: 0;}

#header.on{background-color: #fff; border-bottom: 1px solid #DDD;}
#header.on .logo img{content: url(/wp-content/uploads/2025/07/c257abf4f97e403f7333349f7c0b7a3d.png);}
#header.on .nav_manu nav > ul > li > a{color: #000;}
#header.on .nav_manu nav > ul > li > a.elementor-item-active{color: #F43B00;}
#header.on .nav_manu nav > ul > li > a:hover{color: #F43B00;}
#header.on .menu_pop_icon svg path{fill: #000;}

/************ menu popup *************/
.manu_close_icon svg path{fill: #000 !important;}
.menu_pop a{padding-top: 20px !important; padding-bottom: 20px !important;}
.menu_pop li.current_page_parent > a{color: #F43B00 !important;}
.menu_pop li.current_page_parent > a .sub-arrow svg path{fill: #F43B00;}
.menu_pop a.highlighted{border-bottom: 1px solid #ddd !important;}
.menu_pop a .sub-arrow{position: absolute; right: 20px;}
.menu_pop a .sub-arrow svg path{fill: rgba(0, 0, 0, 0.70);}
.menu_pop .current-menu-item a .sub-arrow svg path{fill: rgba(244, 59, 0, 0.70);}
.menu_pop nav > ul > li:last-child{border-bottom: 1px solid #ddd !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 ul.sub-menu li a.elementor-item-active{text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: #F43B00 !important;}
.menu_pop_close .elementor-icon-wrapper{display: flex; justify-content: flex-end;}


/* ************************************************
*********************** MAIN ***********************
************************************************* */
/* sec01 */
#sec01 .swiper {width: 100%; height: 100vh;}
#sec01 .swiper-slide, #sec01 .swiper-slide-duplicate{position: relative; }

#sec01 .txt_wrap{padding: 0 20px; display: flex; flex-direction: column; align-items: center; width: 100%; color: #FFF; position: absolute; left: 50%; bottom: 275px; transform: translateX(-50%); z-index: 2;}
#sec01 .txt_wrap .title{opacity: 0; margin-bottom:24px; max-width: 1400px; width: 100%; font-weight: 700; font-size: 60px; line-height: 130%; letter-spacing: -0.6px; transition: 0.5s ease 0.5s; }
#sec01 .swiper-slide-active .txt_wrap .title, #sec01 .swiper-slide-duplicate-active .txt_wrap .title{opacity: 1;}
#sec01 .txt_wrap .description{opacity: 0; max-width: 1400px; width: 100%; font-weight: 600; font-size: 20px; line-height: 140%; letter-spacing: -0.2px; transition: 0.5s ease 0.75s;}
#sec01 .swiper-slide-active .txt_wrap .description, #sec01 .swiper-slide-duplicate-active .txt_wrap .description{opacity: 1;}

#sec01 .img_wrap{width: 100%; height: 100%; }
#sec01 .img_wrap::after{content: "";display: block;width: 100%; height: 100%; background: linear-gradient(0deg, rgba(50, 25, 10, 0.00) 0%, rgba(50, 25, 10, 0.40) 100%); position: absolute; top: 0; left: 0;}
#sec01 .slide03 .img_wrap::after{content: "";display: block;width: 100%; height: 100%; background: linear-gradient(0deg, rgba(50, 25, 10, 0.00) -29.84%, rgba(50, 25, 10, 0.60) 77.47%); position: absolute; top: 0; left: 0;}
#sec01 .img_wrap img{width: 100%; height: 100%; object-fit: cover; object-position: center;}

#sec01 .progress-bar-wrap{padding: 0 20px; display: flex; justify-content: center; width: 100%; position: relative; bottom: 136px; clear: both; z-index: 2; }
#sec01 .swiper-progress-bar {max-width: 1400px; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.40); position: relative;}
#sec01 .swiper-progress-bar .slide_progress-bar:after {content: ""; width: 0; height: 100%; background: #fff;position: absolute; top: 0; left: 0; transition: 0.1s width linear;}
#sec01 .swiper-progress-bar.active .slide_progress-bar {opacity: 1;}
#sec01 .swiper-progress-bar.animate .slide_progress-bar:after {transition: width linear; transition-delay: unset; width: 100%; transition-duration: 5s;}

#sec01 .arrow_wrap{max-width: 1440px; width: 100%;  position: relative; left: 50%; bottom: 186px; transform: translateX(-50%); z-index: 1; }
#sec01 .arrow_wrap img{position: absolute; right: 20px; bottom: 0; z-index: 1; animation: scroll 0.6s ease-in-out 0s infinite alternate;}
@keyframes scroll {
0% {bottom: 0px;}
100% {bottom: 30px;}
}

/* sec02 */
#sec02 .rotate_img{height: fit-content; position: absolute; right: -132px; top: -15px; animation: rotate_image 12s linear infinite;}
@keyframes rotate_image {
    100% {
        transform: rotate(360deg);
    }
}
#sec02 .sec02_img_wrap > div{flex-wrap: nowrap;}

/* sec03 */
#sec03 #Care_cate > div{margin-left: -149px;}
#sec03 #Care_cate .cate_box{overflow: hidden; width: calc((100% - 40px) / 3);}
#sec03 #Care_cate .cate_box:not(:last-child){margin-right: 20px;}
#sec03 #Care_cate .cate_box .elementor-background-overlay{backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);}
#sec03 #Care_cate .cate_box .cate_box_img{width: 100%; height: 100%; position: absolute; transition: all 0.3s ease-out;}

#sec03 #Care_cate .cate_box:hover .cate_box_img{transform: scale(1.1);}

/* sec04 */
#sec04 .pro .jet-portfolio__item .jet-portfolio__link{cursor: auto;}
#sec04 .pro .jet-portfolio__item .jet-portfolio__inner{margin: 13px 13px 27px 13px;}
#sec04 .pro .jet-portfolio__item .jet-portfolio__image{background-color: #f5f5f5;}
#sec04 .pro .jet-portfolio__item .jet-portfolio__image img{object-fit: contain; mix-blend-mode: darken;}
#sec04 .pro .jet-portfolio__item a img{transition: all 0.3s ease-out;}
#sec04 .pro .jet-portfolio__item a:hover img{transform: scale(1.05);}
#sec04 .pro .pro_txt_point{font-size: 12px; text-decoration-line: underline;}

/* ************************************************
********************* SUB *************************
************************************************* */
/* sub Breadcrumbs */
#sub_Breadcrumbs .breadcrumb-item{position: relative;}
#sub_Breadcrumbs .breadcrumb-item + .breadcrumb-item{padding-left: 32px;}
#sub_Breadcrumbs .breadcrumb-item + .breadcrumb-item::before{content: ""; padding: 0; display: block; width: 16px; height: 16px; background: url(/wp-content/uploads/2024/09/Breadcrumbs_arrow.svg) no-repeat center center / contain; position: absolute; left: 8px; top: 50%; transform: translateY(-50%);}
#sub_Breadcrumbs .breadcrumb-item:nth-child(2){position: relative;}
#sub_Breadcrumbs .breadcrumb-item:nth-child(2)::after{content: ""; display: block; width: 100%; height: 21px; background-color: transparent; position: absolute; left: 0; top: -1px; cursor:text;}

/* sub menu */
#sub_menu nav > ul{margin-inline-end: 0; margin-inline-start: 0; width: 100%;}
#sub_menu nav > ul > li{flex: 1;}
#sub_menu nav > ul > li > a{justify-content: center;}
#sub_menu nav > ul > li > a.elementor-item-active{font-weight: 500;}

/* sub menu mo */
#sub_menu_mo .subm_nav_m nav > ul > li > a{background-color: #fff !important; border-bottom: 1px solid #DDDDDD; position: relative;}
#sub_menu_mo .subm_nav_m nav > ul > li > a::before, #sub_menu_mo .subm_nav_m nav > ul > li > a::after{ position: absolute; content:"";display: block;width: 11px;height: 2px;transform: translate(50%,-50%);top:50%;right:25px;background-color: #2E2E2E; transition: all 0.5s; opacity: 1 !important;}
#sub_menu_mo .subm_nav_m nav > ul > li > a::before{transform: translate(50%,-50%) rotate(-90deg);opacity: 1;}

#sub_menu_mo .subm_nav_m nav > ul > li > a.highlighted::before, .sub_menu .subm_nav_m nav > ul > li > a.highlighted::after{transition: all 0.5s;}
#sub_menu_mo .subm_nav_m nav > ul > li > a.highlighted::before{transform: translate(50%,-50%) rotate(0deg); }
#sub_menu_mo .subm_nav_m nav > ul > li > a.highlighted::after{transform: translate(50%,-50%) rotate(180deg); opacity: 0;}
#sub_menu_mo .subm_nav_m nav > ul > li > ul li:last-child{border-bottom:  1px solid #DDDDDD;}
#sub_menu_mo .subm_nav_m nav > ul > li > ul a{color: #8E8E8E !important;}
#sub_menu_mo .subm_nav_m nav > ul > li > ul a.elementor-item-active{color: #F43B00 !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: #F43B00 !important;}

/* OEM·ODM */
.OEM_num{margin-left: 8px; font-weight: 700; color: #F43B00;}
.OEM_tit{font-weight: 600; font-size: 22px;}

/* 연구개발 */
.darken img{mix-blend-mode: darken;}

/* 품질관리 시스템 */
.quality_box figure, .quality_box img{width: 100% !important;}

/* 문의하기 */
#Product_Inquiry input:focus, #Product_Inquiry select:focus , #Product_Inquiry textarea:focus {outline: none;}
#Product_Inquiry .form_input_wrap{margin-bottom: 30px; display: flex; gap: 20px;} 
#Product_Inquiry .form_input_wrap .form_input{display: flex; flex: 1;} 
#Product_Inquiry .form_input_wrap .form_input p, 
#Product_Inquiry .input_message p{display: flex; flex: 1; flex-wrap: wrap;} 
#Product_Inquiry .form_input_wrap .form_input p label, 
#Product_Inquiry .input_message p label{margin-bottom: 12px; width: 100%; font-weight: 600; font-size: 16px; color: #2E2E2E; line-height: 160%; letter-spacing: -0.36px;} 
#Product_Inquiry .form_input_wrap .form_input p label span,
#Product_Inquiry .input_message p label span{margin-left: 6px; font-weight: 500; font-size: 16px; color: #FF1703; letter-spacing: -0.32px; vertical-align: top;} 
#Product_Inquiry .form_input_wrap .form_input p > span,
#Product_Inquiry .input_message p > span{flex: 1;}
#Product_Inquiry .form_input_wrap .form_input p > span > input,
#Product_Inquiry .input_message p > span > textarea{padding: 0 20px; width: 100%; height: 65px; border: 1px solid #DDD; background: #FFF; font-weight: 500; font-size: 18px; color: rgb(0 0 0 / 0.7); line-height: 160%; letter-spacing: -0.36px;}

#Product_Inquiry .form_input_wrap .form_input.sel p{justify-content: space-between;}
#Product_Inquiry .form_input_wrap .form_input.sel p > span{flex: unset; width: calc((100% - 12px) / 2);}
#Product_Inquiry .form_input_wrap .form_input.sel p > span select{padding: 0 20px; width: 100%; height: 65px; border: 1px solid #DDD; background: #FFF; font-weight: 500; font-size: 18px; color: rgb(0 0 0 / 0.7); line-height: 160%; letter-spacing: -0.36px;}

#Product_Inquiry .form_input_wrap .form_input.sel p > span::after {content: ""; display: block;width: 14px; height: 15px; background: url(/wp-content/uploads/2024/09/select02.svg) no-repeat center center / contain; position: absolute; top: 50%; right: 20px; transform: translateY(-50%);}

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

#Product_Inquiry .formAwrap_box{overflow-y: scroll; margin-bottom: 20px; padding: 30px 30px 0; height: 413px; border: 1px solid #DDD; background: #FAFAFA; font-weight: 300; font-size: 16px; color: #8E8E8E; line-height: 160%; letter-spacing: -0.32px;}
#Product_Inquiry .formAwrap_box .formAwrap_wrap{margin-bottom: 50px;}
#Product_Inquiry .formAwrap_box .formAwrap_wrap > div:not(:last-child){margin-bottom: 25px;}
#Product_Inquiry .formAwrap_box .formAwrap_wrap .formAwrap_tit{font-weight: 500;}
#Product_Inquiry .formAwrap_box .formAwrap_wrap .formAwrap_txt{padding: 0 10px 0;}

#Product_Inquiry .form_acceptance_warp{display: flex; justify-content: space-between; align-items: center;}
#Product_Inquiry .form_acceptance_warp .form_acceptance .wpcf7-list-item{margin: 0;}
#Product_Inquiry .form_acceptance_warp .form_acceptance .wpcf7-list-item label{margin: 0; display: flex; align-items: center;}
#Product_Inquiry .form_acceptance_warp .form_acceptance .wpcf7-list-item .wpcf7-list-item-label{font-weight: 600; font-size: 16px; color: #2E2E2E; line-height: 23px; letter-spacing: -0.8px;}
#Product_Inquiry .form_acceptance_warp .form_submit input{width: 420px; height: 65px; background: #000; font-weight: 700; font-size: 16px; color: #FFF; line-height: 140%;}
#Product_Inquiry .form_acceptance_warp input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0 11px 0 0; background: #fff; border-radius: 0px; cursor: pointer; height: 22px; outline: 0; width: 22px; border: 1px solid #DDD; padding: 0;}
#Product_Inquiry .form_acceptance_warp input[type="checkbox"]:checked {background: #000; border: 1px solid #000;}

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

/* history */
#history .jet-timeline__line{margin-left: 395px !important;}
#history .jet-timeline-item{padding-left: 390px !important;}
#history .jet-timeline-item .timeline-item__card .timeline-item__card-desc div{margin-top: 20px; padding-left: 19px; position: relative;}
#history .jet-timeline-item .timeline-item__card .timeline-item__card-desc div::before{content: "-"; position: absolute; left: 0px; top: 0px;}
#history .jet-timeline-item .timeline-item__card .timeline-item__card-desc div span{margin: 8px 0 0 !important; display:block; font-weight: 400 !important; font-size: 16px !important; color: rgba(46, 46, 46, 0.60) !important;}
#history .jet-timeline-item .timeline-item__meta{display: none;}
#history .jet-timeline-item  > .timeline-item__meta{display: block; position: absolute; left: 0; top: 0;}


/* ************************************************
***************** RESPONSIBILITY *******************
************************************************* */
@media (max-width:1440px){
    /* main */
    #sec03 .sec03_R > div{padding: 111px 20px 38px 0px;}
}
@media (max-width:1024px){
    .br02{display: none;}

    /* main */
    #sec01 .txt_wrap .title{margin-bottom:20px; font-size: 50px;}
    #sec01 .txt_wrap .description{font-size: 18px;}
    #sec01 .arrow_wrap{bottom: 170px;}
    #sec01 .arrow_wrap img{width: 35px;}

    #sec02 .rotate_img{right: -110px; top: 166px;}

    #sec03 .sec03_R > div{padding: 100px 20px 38px 0px;}

    #sec04 .pro .jet-portfolio__item .jet-portfolio__inner{margin: 10px 10px 20px 10px;}

    /* OEM·ODM */
    .OEM_num{margin-left: 5px;}
    .OEM_tit{font-size: 18px;}
    .OEM_txt{font-size: 14px;}

    /* 연구개발 */
    .s_txt{font-size: 13px !important;}

    /* 문의하기 */
    #Product_Inquiry .form_input_wrap{gap: 10px;}
    #Product_Inquiry .form_input_wrap .form_input p label, 
    #Product_Inquiry .input_message p label{margin-bottom: 10px;} 
    #Product_Inquiry .form_input_wrap .form_input.sel p > span{width: calc((100% - 10px) / 2);}
    #Product_Inquiry .form_input_wrap .form_input p > span > input, 
    #Product_Inquiry .form_input_wrap .form_input.sel p > span select{height: 50px;}
    #Product_Inquiry .formAwrap_box{padding: 20px 20px 0; height: 310px; font-size: 15px;}
    #Product_Inquiry .form_acceptance_warp .form_submit input{width: 320px; height: 55px;}

    /* history */
    #history .jet-timeline__line{margin-left: 225px !important;}
    #history .jet-timeline-item{padding-left: 220px !important;}
    #history .jet-timeline-item .timeline-item__card .timeline-item__card-desc div{margin-top: 16px;}
    #history .jet-timeline-item .timeline-item__card .timeline-item__card-desc div span{margin: 5px 0 0 !important; font-size: 14px !important;}

}
@media (max-width:767px){
    .br01{display: none;}

    /* main */
    #sec01 .swiper{height: 550px;}
    #sec01 .txt_wrap{bottom: 150px;}
    #sec01 .txt_wrap .title{margin-bottom:15px; font-size: 35px;}
    #sec01 .txt_wrap .description{font-size: 16px;}
    #sec01 .arrow_wrap{bottom: 70px;}
    #sec01 .arrow_wrap img{width: 25px;}
    #sec01 .progress-bar-wrap{bottom: 50px;}
    #sec01 .slide03 .img_wrap img{object-position: 35%;}

    #sec02 .rotate_img{right: -113px; top: 25px;}

    #sec03 .sec03_R > div{padding: 100px 20px 38px 20px;}
    #sec03 #Care_cate > div{margin-left: 0;}
    #sec03 #Care_cate .cate_box{overflow: hidden; width: calc((100% - 20px) / 3);}
    #sec03 #Care_cate .cate_box:not(:last-child){margin-right: 10px;}

    #sec04 .pro .jet-portfolio__item .jet-portfolio__inner{margin: 5px 5px 15px 5px;}

    /* OEM·ODM */
    .OEM_tit{font-size: 16px;}

    /* 연구개발 */
    .s_txt{font-size: 12px !important;}

    /* history */
    #history .jet-timeline__line{margin-left: calc( 10px / 2 ) !important;}
    #history .jet-timeline-item{padding-left: 0px !important;}
    #history .jet-timeline-item  > .timeline-item__meta{display: none;}
    #history .jet-timeline-item .timeline-item__card .timeline-item__card-desc div{margin-top: 13px; padding-left: 15px;}
    #history .jet-timeline-item .timeline-item__card .timeline-item__card-desc div span {margin: 0 !important; font-size: 12px !important;}
}
@media (max-width:650px){
    /* main */
    #sec02 .rotate_img{right: -15vw; top: 28px;}
    #sec02 .rotate_img img{width: 30vw;}

    /* Product Inquiry */
    #Product_Inquiry .form_input_wrap{gap: 20px; margin-bottom: 20px; flex-wrap: wrap;}
    #Product_Inquiry .form_input_wrap .form_input{width: 100%; flex: unset;}
    #Product_Inquiry .form_input_wrap .form_input p label, 
    #Product_Inquiry .input_message p label{margin-bottom: 5px; font-size: 14px;} 
    #Product_Inquiry .form_input_wrap .form_input p > span > input, 
    #Product_Inquiry .form_input_wrap .form_input.sel p > span select{height: 40px;}
    #Product_Inquiry .form_input_wrap .form_input p label span, 
    #Product_Inquiry .input_message p label span,
    #Product_Inquiry .form_input_wrap .form_input.sel p > span select,
    #Product_Inquiry .form_acceptance_warp .form_acceptance .wpcf7-list-item .wpcf7-list-item-label{font-size: 14px;}
    #Product_Inquiry .input_message{margin-bottom: 30px;}
    #Product_Inquiry .input_message p > span > textarea{height: 160px;}
    #Product_Inquiry .formAwrap_box{padding: 10px 10px 0; height: 230px; font-size: 14px;}
    #Product_Inquiry .form_acceptance_warp{flex-wrap: wrap; justify-content: center;}
    #Product_Inquiry .form_acceptance_warp .form_acceptance{margin-bottom: 20px; width: 100%; text-align: center;}
    #Product_Inquiry .form_acceptance_warp .form_submit input{width: 220px; height: 50px; font-size: 14px;}
    #Product_Inquiry .formAwrap_box .formAwrap_wrap{margin-bottom: 30px;}
    #Product_Inquiry .formAwrap_box .formAwrap_wrap > div:not(:last-child){margin-bottom: 15px;}
    #Product_Inquiry .form_acceptance_warp input[type="checkbox"]{margin: 0 8px 0 0; width: 18px; height: 18px;}
}
@media (max-width:375px){
    /* Product Inquiry */
    #Product_Inquiry .form_input_wrap .form_input.sel p > span{width: 100%;}
    #Product_Inquiry .form_input_wrap .form_input.sel p > span:nth-of-type(1){margin-bottom: 10px;}
}