@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");


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

 * br01 - 600
 * 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;}
a {text-decoration: none !important;}
a:hover{text-decoration: none !important;}
svg{margin: 0 !important;}
.elementor-icon-list-text{padding-inline-start: 0px !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", -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;}




/* ************************************************
********************* HEADER ************************
************************************************* */
header{position: absolute !important;}

#header .nav-menu nav > ul{gap: 40px;}
#header .nav-menu nav > ul::after,
#header .nav-menu nav .sub-arrow{display: none;}
#header .nav-menu nav .sub-menu{min-width: 150px !important;}
#header .nav-menu nav > ul > li > .sub-menu{left: 50% !important; transform: translateX(-50%);}
#header .nav-menu nav > ul > li > .sub-menu a{justify-content: center; border-inline-start: 0px solid transparent;}
#header .nav-menu nav > ul > li > .sub-menu > li.current-menu-parent > a{background-color: #003A8B !important; color: #FFFFFF !important;}

#header .menu_icon{display: none;}

#header .lang .wpml-ls-menu-item .wpml-ls-flag+span{margin-left:0px;}
#header .lang nav > ul > li.wpml-ls-menu-item > a .wpml-ls-flag+span{margin-left:8px;}
#header .lang nav > ul > li > a .sub-arrow{display: none;}
#header .lang nav > ul > li > ul.sub-menu{margin-left: unset !important; min-width: 100% !important;}
#header .lang nav > ul > li > ul.sub-menu img{display: none;}
#header .lang nav > ul > li > ul.sub-menu a{justify-content: center; border-inline-start: 0px solid transparent;}

#header.on{background-color: #fff; border-bottom: 1px solid #DEDEDE;}
#header.on .nav-menu nav > ul > li > a{color: #1B1B1B;}
#header.on .header-R-wrap{border-color: #1B1B1BB3;}
#header.on .header-R-wrap path{fill: #1B1B1B;}
#header.on .header-R-wrap span{color: #1B1B1B;}
#header.on .menu_icon svg rect{stroke: #1B1B1B;}
#header.on .menu_icon svg path{fill: #1B1B1B;}
#header .logo.on img{content: url(/wp-content/uploads/2025/06/logo-b.svg) !important;}

#header.on .header-R-wrap .menu-bar{--divider-color: #1B1B1B99;}
#header.on .lang nav > ul > li > a img{content: url(/wp-content/uploads/2025/12/lang-b.svg) !important;}

/************ menu popup *************/
.menu_pop a{padding-top: 20px !important; padding-bottom: 20px !important;}
.menu_pop a.highlighted{border-bottom: 1px solid #DEDEDE !important;}
.menu_pop a.highlighted .sub-arrow svg path{fill: #003A8B; transform: rotate(180deg); transform-origin: center; transition: all 0.3s;}
.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 nav > ul > li:last-child{border-bottom: 1px solid #DEDEDE !important; margin-bottom: 80px !important;}
.menu_pop ul.sub-menu{padding: 15px 0 15px 30px !important; transform: inherit;}
.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: #003A8B !important;}
.menu_pop li.current_page_item > a{color: #003A8B !important;}
.menu_pop li.current_page_item > a .sub-arrow svg path{fill: #003A8B;}
.menu_pop_close svg path{fill: #1B1B1B;}

/* ************************************************
*********************** MAIN ***********************
************************************************* */
/* sec01 */
.ov01{display: block; width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5);}
.ov02{display: block; width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5);}
.ov03{display: block; width: 100%; height: 100%; z-index: 1; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.36);}

#video_slide_wrap, #video_slide_wrap .swiper-slide{height: 100vh;}
#video_slide_wrap .elementor-widget-container{max-height: 100vh;height: 100%;}
#video_slide_wrap .elementor-widget-container .swiper-container{max-height: 100vh;height: 100% !important;}
#video_slide_wrap .swiper-slide{position: relative;}
#video_slide_wrap .swiper-slide .vs_video{position: relative;height: 100%; width: 100%;}
#video_slide_wrap video{height: 100%; object-fit: cover;}

.main_slide{display: flex !important; justify-content: center;}
.main_slide .vs_txt{display: flex; flex-direction: column; gap: 44px; max-width: 1440px; width: 100%; padding: 0 20px; position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; transition: all 0.3s ease-in-out;}
.main_slide .vs_txt .vst_tit{opacity: 0; font-size: 68px; font-weight: 700; line-height: 140%; color: #fff;}
.main_slide .vs_txt .vst_desc{opacity: 0; font-size: 22px; font-weight: 500; line-height: 140%; color: #fff;}
.main_slide.en .vs_txt .vst_tit{font-size: 58px;}

.section01.animated.animated-fast{animation-duration: 0.3s;}
.main_slide.swiper-slide-active .vs_txt .vst_tit{animation: fadeinup 0.5s ease-in-out forwards;-moz-animation: fadeinup 0.5s ease-in-out forwards; -webkit-animation: fadeinup 0.5s ease-in-out forwards; -o-animation: fadeinup 0.5s ease-in-out forwards;}
.main_slide.swiper-slide-active .vs_txt .vst_desc{animation: fadeinup02 0.5s 0.3s ease-in-out forwards;-moz-animation: fadeinup02 0.5s 0.3s ease-in-out forwards; -webkit-animation: fadeinup02 0.5s 0.3s ease-in-out forwards; -o-animation: fadeinup02 0.5s 0.3s ease-in-out forwards;}

.main-slider-nav{display: flex; flex-direction: column; gap: 10px; position: absolute; top: 50%; right: 4vw; z-index: 10; transform: translateY(-50%); }
.main-slider-nav .nav-up, .main-slider-nav .nav-down{height: 20px; cursor: pointer;}
.main-slider-nav .swiper-pagination{display: flex; flex-direction: column; gap: 10px; position: relative; top: unset !important; bottom: unset !important;}
.main-slider-nav .swiper-pagination .swiper-pagination-bullet{margin: 0 !important; width: auto; height: auto; background: 0; font-size: 14px; font-weight: 500; line-height: normal;}

/* sec03 */
.sec03-box .sec03-boxArrow{transition: all 0.3s !important;}
.sec03-box:hover{-webkit-backdrop-filter: blur(7.5px); backdrop-filter: blur(7.5px);}
.sec03-box:hover .sec03-boxArrow{right: 0 !important;}


@keyframes fadeinup {
    from {
        opacity:0;
        transform: translateY(100%);
    }
    to {
        opacity:1;
        transform: translateY(0%);
    }

}
@keyframes fadeinup02 {
    from {
        opacity:0;
        transform: translateY(500%);
    }
    to {
        opacity:1;
        transform: translateY(0%);
    }

}

/* sec02 */
.sec02_img{border-radius: 100px !important;}


/* ************************************************
*********************** SUB ************************
************************************************* */
.sub-menu{left: 50% !important; transform: translateX(-50%);}
.sub-menu > div{-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);}
.sub-menu nav{overflow: auto; scrollbar-width: none;}
.sub-menu nav::-webkit-scrollbar{display: none;}
.sub-menu nav ul{flex-wrap: nowrap !important;}
.sub-menu nav ul li a.elementor-item-active{text-decoration-line: underline !important; text-underline-offset: 4px;}
.sub-menu nav ul li a:hover{text-decoration-line: underline !important; text-underline-offset: 4px;}


/* 인사말 */
.greetings-box{-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);}

/* 회사연혁 */
.history-list ul{align-items: flex-start;}
.history-list ul li:first-child{width: 60px;}
.history-list ul li:first-child span{color: #1B1B1B !important; font-weight: 600 !important;}
.history-list ul li:last-child{width: calc( 100% - 60px );}

/* 인증서 */
.certificate-box h3{padding: 12px; border-radius: 12px; border: 1px solid #DADADA; background: rgba(58, 122, 196, 0.06);}

/* INFRA */
.INFRA-img > div{overflow: hidden; border-radius: 20px;}

/* 사내전경 */
.CompanyView-tab .jet-tabs__control{display: flex; justify-content: center; align-items: center; width: 180px; height: 50px; }

/* INDUSTRY slide */
.INDUSTRY-slide .jet-carousel{margin-left: 0px; margin-right: 0px;}
.INDUSTRY-num{width: 30px; height: 30px;}
.INDUSTRY-num > div{display: flex; justify-content: center; align-items: center;}

/* 윤리 강령 */
.code-of-ethics-list ul{flex-wrap: nowrap !important;}
.code-of-ethics-list ul li:first-child span{font-weight: 700 !important; color: #003A8B !important; font-size: 22px !important; letter-spacing: -0.66px !important;}

/* 품질 경영 */
.code-of-ethics-list.Quality-Management ul li:first-child span{width: 30px; text-align: center;}

/* EICC */
.EICC-list ul li{flex-direction: row-reverse;}
.EICC-list ul li:first-child::after{display: none !important;}
.EICC-list ul li:not(:first-child):after{content: "" !important; height: 14px !important; border-color: #9F9F9F !important; left: calc(-40px / 2) !important;}
.EICC-list ul li .elementor-icon-list-icon{padding-right: 0 !important; padding-left: 8px;}

/* 인재채용 */
.HRM-tit{height: -webkit-fill-available !important; height: fill-available !important;}

/* 문의하기 */
#contact input:focus, #contact select:focus , #contact textarea:focus {outline: none;}
#contact .form_input_wrap{margin-bottom: 12px; display: flex; gap: 20px;} 
#contact .form_input_wrap .form_input{display: flex; flex: 1;} 
#contact .form_input_wrap .form_input p, 
#contact .input_message p{display: flex; flex: 1; flex-wrap: wrap;} 
#contact .form_input_wrap .form_input p label, 
#contact .input_message p label{margin-bottom: 12px; width: 100%; font-weight: 500; font-size: 18px; color: #1B1B1B; line-height: 160%; letter-spacing: -0.36px;} 
#contact .form_input_wrap .form_input p > span,
#contact .input_message p > span{flex: 1;}
#contact .form_input_wrap .form_input p > span > input,
#contact .input_message p > span > textarea{padding: 10px 20px; width: 100%; height: 60px; border-radius: 8px; border: 1px solid #DADADA; background: #fff; font-weight: 400; font-size: 15px; color: #444; line-height: 160%; letter-spacing: -0.3px;}
#contact .input_message p > span > textarea{padding: 20px;}

#contact .input_message{margin-bottom: 20px;}
#contact .input_message p > span > textarea{height: 274px;}

#contact .form_acceptance{font-weight: 500; font-size: 15px; color: #9F9F9F; line-height: 153%; letter-spacing: -0.75px; text-align: center;}
#contact .form_acceptance label{margin-bottom: 0;}
#contact .form_acceptance input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; padding: 0; width: 16px; height: 16px; background: #fff; border-radius: 3px; cursor: pointer; outline: 0; border: 1px solid #DDD; vertical-align: top; }
#contact .form_acceptance input[type="checkbox"]:checked {background: #003A8B; border: 1px solid #003A8B;}
#contact .form_acceptance .wpcf7-list-item{margin: 0;}

#contact .form_submit{margin-top: 12px;}
#contact .form_submit p{text-align: center;}
#contact .form_submit input{padding: 14px 29px; width: 290px; height: 54px; background-color: #003A8B; border-radius: 12px; border: 0; font-weight: 500; font-size: 16px; color: #FFF;}

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

input::placeholder{ color:#9F9F9F;}
input::-webkit-input-placeholder{color:#9F9F9F;}
input:-ms-input-placeholder{color:#9F9F9F;}
textarea::placeholder{color:#9F9F9F;}
textarea::-webkit-input-placeholder{color:#9F9F9F;}
textarea:-ms-input-placeholder{color:#9F9F9F;}

/* One-Stop Solution */
.page-id-599{opacity: 0; pointer-events: none; overflow: hidden;}
.page-id-599.show{opacity: 1; pointer-events: auto; overflow: visible;}
.page-id-2489{opacity: 0; pointer-events: none; overflow: hidden;}
.page-id-2489.show{opacity: 1; pointer-events: auto; overflow: visible;}
.One-Stop-slide .slider-pro{margin: 0;}
.One-Stop-slide .slider-pro .sp-slide{border-radius: 20px;}
.One-Stop-slide .sp-thumbnails-container.sp-bottom-thumbnails{margin: 0; position: absolute; bottom: 0; left: calc(100% + 60px);}
.One-Stop-slide .sp-thumbnails-container.sp-bottom-thumbnails .sp-thumbnail-container,
.One-Stop-slide .sp-thumbnails-container.sp-bottom-thumbnails .sp-thumbnail-container::before{border-radius: 16px;}
.img-L .One-Stop-slide .sp-thumbnails-container.sp-bottom-thumbnails{left: unset; right: calc(100% + 60px);}

.One-Stop-menu{overflow-x: scroll !important; -ms-overflow-style: none; scrollbar-width: none;}
.One-Stop-menu nav ul{flex-wrap: nowrap !important;}

/* society */
.society-box{aspect-ratio: 1 / 1;}

/* ************************************************
******************* RESPONSIBILITY *****************
************************************************* */
@media (max-width:1420px){
    #header .nav-menu nav > ul{gap: 20px;}
}
@media (max-width:1300px){
    #header .header-L,
    #header .header-R{--width: 19%;}
    #header .header-M{--width: 62%;}
    #header .nav-menu nav > ul > li > a{font-size: 15px;}

    .main-slider-nav{right: 20px;}
}
@media (max-width:1230px){
    #header .header-L,
    #header .header-R{--width: 50%;}
    #header .header-M{display: none;}
    #header .menu_icon{display: block;}
}
@media (max-width:1200px){
    .br03{display: none;}
}
@media (max-width:1024px){
    .br02{display: none;}

    /* sec01 */
    #video_slide_wrap, #video_slide_wrap .swiper-slide{height: 80vh;}
    .main_slide .vs_txt{padding: 0 40px 0 20px; gap: 30px; }
    .main_slide .vs_txt .vst_tit{font-size: 50px;}
    .main_slide .vs_txt .vst_desc{font-size: 18px;}
    .main_slide.en .vs_txt .vst_tit{font-size: 44px;}

    /* sec02 */
    .sec02_img{width: 180px !important;}

    #main-footer{display: none !important;}

    /* 사내전경 */
    .CompanyView-tab .jet-tabs__control{width: 140px; height: 45px; }  
    
    /* 윤리 강령 */
    .code-of-ethics-list ul li:first-child span{font-size: 18px !important;}

    /* 품질 경영 */
    .code-of-ethics-list.Quality-Management ul li:first-child span{width: 25px;}

    /* EICC */
    .EICC-list ul li:not(:first-child):after{left: calc(-30px / 2) !important;}

    /* One-Stop Solution */
    .One-Stop-slide .sp-thumbnails-container.sp-bottom-thumbnails{left: calc(100% + 40px);}
    .img-L .One-Stop-slide .sp-thumbnails-container.sp-bottom-thumbnails{right: calc(100% + 40px);}

    /* 문의하기 */
    #contact .form_input_wrap .form_input p label, #contact .input_message p label{margin-bottom: 10px; font-size: 16px;}
    #contact .form_input_wrap .form_input p > span > input, #contact .input_message p > span > textarea{padding: 10px; height: 54px;} 
    #contact .input_message p > span > textarea{padding: 10px; height: 230px;}
    #contact .form_submit input{width: 260px; height: 50px;}

}
@media (max-width:767px){
    #header .header-L{--width: 30%;}
    #header .header-R{--width: 70%;}
    #header .lang .wpml-ls-menu-item .wpml-ls-flag{width: 18px !important;}

    /* sec01 */
    #video_slide_wrap, #video_slide_wrap .swiper-slide{height: 540px;}
    .main_slide .vs_txt{gap: 20px; }
    .main_slide .vs_txt .vst_tit{font-size: 30px;}
    .main_slide .vs_txt .vst_desc{font-size: 16px;}
    .main-slider-nav{right: 15px;}
    .main_slide.en .vs_txt .vst_tit{font-size: 24px;}

    /* sec02 */
    .sec02_img{width: 120px !important;}

    /* 회사연혁 */
    .history-list ul li:first-child{width: 45px;}
    .history-list ul li:last-child{width: calc( 100% - 45px );}

    /* 인증서 */
    .certificate-box h3{padding: 10px; border-radius: 8px;}

    /* 사내전경 */
    .CompanyView-tab .jet-tabs__control{width: 120px; height: 40px; } 

    /* INDUSTRY slide */
    .INDUSTRY-num{width: 25px; height: 25px;}

    /* 윤리 강령 */
    .code-of-ethics-list ul{flex-wrap: wrap !important; flex-direction: column; gap: 10px;}
    .code-of-ethics-list ul li:first-child span{font-size: 16px !important;}
    
    /* 품질 경영 */
    .code-of-ethics-list.Quality-Management ul li:first-child span{width: auto;}

    /* EICC */
    .EICC-list ul li:not(:first-child):after{height: 10px !important; left: calc(-20px / 2) !important;}

    /* One-Stop Solution */
    .One-Stop-txtWrap{position: relative !important;}
    .One-Stop-slide .slider-pro{max-width: 100% !important;}
    .One-Stop-slide .sp-thumbnails-container.sp-bottom-thumbnails{margin-top: 10px !important; position: relative; bottom: unset; left: 0;}
    .One-Stop-slide .sp-thumbnails-container.sp-bottom-thumbnails .sp-thumbnail-container,
    .One-Stop-slide .sp-thumbnails-container.sp-bottom-thumbnails .sp-thumbnail-container::before{border-radius: 10px;}
    .img-L .One-Stop-slide .sp-thumbnails-container.sp-bottom-thumbnails{right: unset;}

    /* 문의하기 */
    #contact .form_input_wrap{flex-direction: column;}
    #contact .form_input_wrap .form_input p label, #contact .input_message p label{margin-bottom: 6px; font-size: 15px;}
    #contact .form_input_wrap .form_input p > span > input, #contact .input_message p > span > textarea{font-size: 14px; height: 50px;} 
    #contact .input_message p > span > textarea{height: 200px;}
    #contact .form_submit input{width: 220px; font-size: 14px;}
}
@media (max-width:600px){
    .br01{display: none;}
}
@media (max-width:500px){
    /* INDUSTRY slide */
    .INDUSTRY-slide .jet-carousel{height: 200px;} 
    .INDUSTRY-slide .jet-carousel .slick-slider, 
    .INDUSTRY-slide .jet-carousel .slick-slider .slick-list , 
    .INDUSTRY-slide .jet-carousel .slick-slider .slick-list .slick-track,
    .INDUSTRY-slide .jet-carousel .slick-slider .slick-list .slick-track .jet-carousel__item-inner{height: 100%;} 
    .INDUSTRY-slide .jet-carousel .slick-slider .slick-list .slick-track .jet-carousel__item-inner img{height: 100%; object-fit: cover;} 
}