@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
/* font-family: 'FranklinGothic-Demi', cursive; */
/* font-family: "franklin-gothic-std", sans-serif; */



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

 * br767 - 767
 * br1024 - 1024
 * br1250 - 1250
 * 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 ul, .font li{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;}
.font02, .font02 div,.font02 a,.font02 p,.font02 span,.font02 h1, .font02 h2,.font02 h3,.font02 h4,.font02h5,.font02 h6,.font02 input, .font02 textarea,.font02 button, .font02 label, .font02 ul, .font02 li{font-family: "franklin-gothic-std", "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;}

.jupiterx-scrolled .jupiterx-icon-angle-up:before{content: ""; display: block; width: 20px; height: 20px; background: url(/wp-content/uploads/2026/05/top-arrow.svg) no-repeat center / contain;}

/* ************************************************
********************* HEADER ************************
************************************************* */
#header{position: absolute;}
#header{transition: top 1s !important;}
#header > div {transition: padding-top 0.4s !important;}

#header .nav-menu nav > ul{gap: 70px;}
#header .nav-menu nav > ul::after,
#header .nav-menu nav .sub-arrow{display: none;}
#header .nav-menu nav .sub-menu{padding: 8px; 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; border-radius: 12px;}

#header.up{top: -120px !important;}
#header.on > div{padding-top: 10px !important;}

/* menu */
.menu_pop li.current-menu-parent > a,
.menu_pop li.current-menu-item > a{border-radius: 8px; border-bottom: none !important; background-color: #249AD9 !important; color: #fff !important;}
.menu_pop li.current-menu-parent > a .sub-arrow svg path{fill: #fff;}
.menu_pop li.current-menu-parent > a.highlighted .sub-arrow svg path{fill: #fff;}
.menu_pop li > a.highlighted .sub-arrow svg path{fill: #249AD9;}
.menu_pop li > a.highlighted .sub-arrow{transform: rotate(180deg);}

.menu_pop a.highlighted{border-bottom: 1px solid #ddd !important;}
.menu_pop a .sub-arrow{padding: 0;position: absolute; right: 12px;}
.menu_pop a .sub-arrow svg path{fill: #38495A;}

.menu_pop ul.sub-menu li a{padding: 10px 12px !important; border-left: 0; border-bottom: 1px solid #ddd !important; font-weight: 400 !important; font-size: 14px !important; color: #38495A !important;}
.menu_pop ul.sub-menu li a.elementor-item-active{border-radius: 0; background-color: #fff !important; color: #249AD9 !important;}

/* ************************************************
********************* MAIN ************************
************************************************* */
/* sec01 */
#sec01{height: calc( 100vh - 30px) !important;}
#sec01 > div{height: 100% !important;}
#sec01 .sec01-video{height: 100% !important;}
#sec01 .sec01-video div{height: 100% !important;}
#sec01 .sec01-video div video{height: 100%; object-fit: cover;}

#sec01 .scroll-txt div{writing-mode: sideways-lr;}
#sec01 .scroll_bar .elementor-divider-separator::after{content: ""; display: block; width: 6px; height: 6px; background-color: #249AD9; border-radius: 100%; position: absolute; left: 50%; top: 0; transform: translateX(-50%); animation: scroll 1.5s infinite;}
@keyframes scroll {
  0% {
    top: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* sec03 */
#sec03-slide{display: flex; justify-content: center; flex-wrap: wrap; gap: 50px;}
#sec03-slide .slide-control-wrap{display: flex; justify-content: center; gap: 50px; align-items: center; padding: 0 20px; max-width: 1000px; width: 100%;}
#sec03-slide .slide-control-wrap .swiper-pagination{position: relative; max-width: 810px; width: 100%;}
#sec03-slide .slide-control-wrap .arrow-wrap{display: flex; gap: 10px;}
#sec03-slide .slide-control-wrap .arrow-wrap .elementor-swiper-button{font-size: 0;}

/* ************************************************
********************** SUB ************************
************************************************* */
/* company */
.txt-color {display: block;}
.txt-color .word {white-space: nowrap;}
.txt-color .char {display: inline; transition: all 0.2s linear;}
.txt-color .char.space {display: inline;}

.company-history .timeline-item__card{min-height: auto !important;}
.company-history .timeline-item__point{margin-top: 20px;}
.company-history .timeline-item__point .timeline-item__point-content{min-width: 8px; min-height: 8px;}
.company-history .timeline-item__card-title{transition: all 0.3s;}
.company-history .timeline-item__card-desc{display: flex; flex-direction: column; gap: 10px;}

/* pro */
#pro-menu.pro-menu nav ul{justify-content: space-between !important; width: 100%;}
#pro-menu.pro-menu nav ul::after{display: none;}
.pro-menu nav ul li a.elementor-item-active{border-bottom: 2px solid #101C28; font-family: "franklin-gothic-std", "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; font-weight: 600 !important;}

/* Equipment */
.Equipment-box .jet-table .jet-table__body .jet-table__body-row:last-child td{border-width: 0 !important;}
.Equipment-box:hover .Equipment-box-img img{transform: scale(1.055);}

/* Contact */
#Contact input:focus, #Contact textarea:focus {outline: none;}
#Contact .form_input_wrap{display: flex; gap: 10px; margin-bottom: 10px;} 
#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;} 
#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: 0 20px; width: 100%; height: 70px; border-radius: 12px; border: 1px solid #DDD; background: rgba(255, 255, 255, 0.80); font-weight: 500; font-size: 16px; color: #101C28; line-height: 130%; letter-spacing: 0.16px;}

#Contact .input_message{margin-bottom: 8px;}
#Contact .input_message p > span > textarea{padding: 21px 20px; height: 286px;}

#Contact .form_acceptance_warp{display: flex; flex-direction: column; gap: 10px;}
#Contact .form_acceptance_warp .form_acceptance_txt{padding: 30px 20px; background-color: #fff; border-radius: 12px;
border: 1px solid #DDD; color: rgba(16, 28, 40, 0.60); font-weight: 400; font-size: 15px; line-height: 150%; letter-spacing: -0.15px;}
#Contact .form_acceptance_warp .form_acceptance_txt .form_acceptance_txtGroup p{display: flex; gap: 0px 28px; align-items: center; flex-wrap: wrap;}
#Contact .form_acceptance_warp .form_acceptance_txt .form_acceptance_txtGroup p span{position: relative;}
#Contact .form_acceptance_warp .form_acceptance_txt .form_acceptance_txtGroup p span::after{content: ""; display: block; width: 1px; height: 10px; background-color: #ddd; position: absolute; right: -14px; top: 50%; transform: translateY(-50%);}
#Contact .form_acceptance_warp .form_acceptance_txt .form_acceptance_txtGroup p span:last-child:after{display: none;}
#Contact .form_acceptance_warp .form_acceptance .wpcf7-list-item{margin: 0;}
#Contact .form_acceptance_warp .form_acceptance .wpcf7-list-item label{margin: 0; display: flex; align-items: center;}
#Contact .form_acceptance_warp .form_acceptance .wpcf7-list-item .wpcf7-list-item-label{font-weight: 500; font-size: 15px; color: #333; line-height: 140%;}
#Contact .form_acceptance_warp input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0 10px 0 0; background: #fff; border-radius: 6px; cursor: pointer; height: 22px; outline: 0; width: 22px; border: 1px solid #ddd; padding: 0;}
#Contact .form_acceptance_warp input[type="checkbox"]:checked {background: #249AD9 url(/wp-content/uploads/2026/05/check.svg) no-repeat center / 11px 9px; border: 1px solid #249AD9;}
#Contact .form_acceptance_warp .form_submit{text-align: end;}
#Contact .form_acceptance_warp .form_submit input{margin-top: 43px; width: 466px; height: 75px; background: #38495A; border: 0; border-radius: 12px; font-weight: 600; font-size: 17px; color: #FFF; line-height: normal;}

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

#Contact input::placeholder{color: rgba(16, 28, 40, 0.60);}
#Contact input::-webkit-input-placeholder{color: rgba(16, 28, 40, 0.60);}
#Contact input:-ms-input-placeholder{color: rgba(16, 28, 40, 0.60);}
#Contact textarea::placeholder{color: rgba(16, 28, 40, 0.60);}
#Contact textarea::-webkit-input-placeholder{color: rgba(16, 28, 40, 0.60);}
#Contact textarea:-ms-input-placeholder{color: rgba(16, 28, 40, 0.60);}

/* ************************************************
******************* RESPONSIBILITY *****************
************************************************* */
@media (max-width:1440px){
  #header .nav-menu.en nav > ul{gap: 60px;}
	
  #sec03-txtWrap{padding-right: 60px;}
}
@media (max-width:1300px){
  #sec03-txtWrap{padding-right: 40px;}
}
@media (max-width:1250px){
  .br1250{display: none;}

  #header .nav-menu nav > ul{gap: 40px;}
  #header .nav-menu.en nav > ul{gap: 40px;}
  
  #sec03-txtWrap{padding-right: 0px;}

  #Contact .input_message p > span > textarea{height: 240px;}
}
@media (max-width:1100px){
  #header .nav-menu.en nav > ul{gap: 24px;}
}
@media (max-width:1024px){
  .br1024{display: none;}

  #header .nav-menu nav > ul{gap: 20px;}
  #header .nav-menu.en nav > ul{gap: 20px;}
  
  /* sec01 */
  #sec01{height: calc( 80vh - 30px) !important;}
  
  /* sec03 */
  #sec03-slide, #sec03-slide .slide-control-wrap{gap: 40px;}
  #sec03-slide .slide-control-wrap .arrow-wrap .elementor-swiper-button svg{width: 40px; height: 40px;}

  /* Contact */
  #Contact .form_input_wrap .form_input p > span > input, #Contact .input_message p > span > textarea{padding: 0 16px; height: 66px;}
  #Contact .input_message p > span > textarea{padding: 18px 16px; height: 200px;}
  #Contact .form_acceptance_warp .form_acceptance_txt{padding: 20px; font-size: 14px;}
  #Contact .form_acceptance_warp .form_acceptance_txt .form_acceptance_txtGroup p{gap: 0px 20px;}
  #Contact .form_acceptance_warp .form_acceptance_txt .form_acceptance_txtGroup p span::after{right: -10px;}
  #Contact .form_acceptance_warp input[type="checkbox"]{width: 20px; height: 20px; border-radius: 4px;}
  #Contact .form_acceptance_warp .form_acceptance .wpcf7-list-item .wpcf7-list-item-label{font-size: 14px;}
  #Contact .form_acceptance_warp .form_submit input{margin-top: 33px; width: 420px; height: 70px; font-size: 16px;}
}
@media (max-width:900px){
  /* pro */
  #pro-menu.pro-menu{border-width: 0 !important;}
  #pro-menu.pro-menu nav ul{justify-content: center !important;}
}
@media (max-width:767px){
  .br767{display: none;}

  /* sec01 */
  #sec01{height: 500px !important;}

  /* sec03 */
  #sec03-slide, #sec03-slide .slide-control-wrap{gap: 30px;}
  #sec03-slide .slide-control-wrap .arrow-wrap .elementor-swiper-button svg{width: 36px; height: 36px;}

  /* company */
  .company-history .timeline-item__point{margin-top: 15px;}

  /* Contact */
  #Contact .form_input_wrap{flex-direction: column;}
  #Contact .form_input_wrap .form_input p > span > input, #Contact .input_message p > span > textarea{height: 60px; font-size: 15px;}
  #Contact .input_message p > span > textarea{padding: 16px; height: 180px;}
  #Contact .form_acceptance_warp .form_acceptance_txt{padding: 16px; font-size: 13px;}
  #Contact .form_acceptance_warp input[type="checkbox"]{width: 18px; height: 18px;}
  #Contact .form_acceptance_warp .form_acceptance .wpcf7-list-item .wpcf7-list-item-label{font-size: 13px;}
  #Contact .form_acceptance_warp .form_submit input{width: 360px; height: 62px; font-size: 15px;}
}
@media (max-width:600px){
  #Contact .form_acceptance_warp .form_acceptance_txt .form_acceptance_txtGroup p{flex-direction: column; align-items: flex-start;}
  #Contact .form_acceptance_warp .form_acceptance_txt .form_acceptance_txtGroup p span::after{display: none;}
  #Contact .form_acceptance_warp .form_submit input{width: 50%; height: 50px; font-size: 14px;}
}