@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.cdnfonts.com/css/helvetica-neue-lt-pro-55');


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

 * br01 - 1200
 * br02 - 767
 * br03 - 1024
 * 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;}

.fontEn , .fontEn  div,.fontEn  a,.fontEn  p,.fontEn  span,.fontEn  h1, .fontEn  h2,.fontEn  h3,.fontEn  h4,.fontEn  h5,.fontEn  h6,.fontEn  input, .fontEn  textarea,.fontEn  button, .fontEn  label{font-family: 'Helvetica Neue LT Pro', "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;}

html[lang="ko-KR"] .wpml-ls-item-ko {display: none !important;}
html[lang="en-US"] .wpml-ls-item-en {display: none !important;}


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

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

#header.on{background-color: #fff; box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.04); background-image: none;}
#header.on .logo img{content: url(/wp-content/uploads/2025/07/logo-b.svg) !important;}
#header.en.on .logo img{content: url(/wp-content/uploads/2025/12/logo-en-b.svg) !important;}
#header.on .nav-menu nav > ul > li > a{color: #333 !important;}
#header.on .family-wrap{background-color: #333 !important;}
#header.on .menu-icon svg path{fill: #333 !important;}
#header.on .lang .elementor-icon-list-text{color: #333;}
#header.on .lang nav > ul > li > a{color: #333 !important;}
#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 #d1d1d1 !important;}
.menu_pop a.highlighted .sub-arrow svg path{fill: #DA251C; 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 #d1d1d1 !important; margin-bottom: 80px !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: #DA251C !important;}
.menu_pop li.current-page-parent > a{color: #DA251C !important;}
.menu_pop li.current-page-parent > a .sub-arrow svg path{fill: #DA251C;}
.menu_pop_close svg path{fill: #333333;}


/* ************************************************
********************* MAIN ************************
************************************************* */
/* sec01 */
.sec01-silde .sp-buttons{display: flex; justify-content: center; align-items: center; gap: 10px;}
.sec01-silde .sp-arrows{display: flex; justify-content: center; align-items: center; gap: 64px; top: unset !important; bottom: 52px !important; margin-top: 0 !important;}
.sec01-silde .sp-arrows .sp-arrow{position: relative !important; left: auto !important; right: auto !important; z-index: 10;}
.sec01-silde.en h2.jet-slider__title{font-family: 'Helvetica Neue LT Pro', "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;}

.scroll_bar{overflow: hidden; position: absolute !important; left: 50%; bottom: 0; transform: translateX(-50%);}
.scroll_bar .elementor-divider-separator{overflow: hidden; }
.scroll_bar .elementor-divider-separator::after{content: ""; display: block; width: 2px; height: 80px; background-color: #fff; position: absolute; left: 50%; top: 0; transform: translateX(-50%); animation: scroll 1.5s infinite;}
@keyframes scroll {
  0% {
    top: -100%;
  }
  60% {
    opacity: 1;
  }
  100% {
    top: 100%;
    opacity: 0;
  }
}

/* sec05 */
.mainSec05-slide .slick-slider{margin-right: 0 !important; margin-left: 0 !important;}
.mainSec05-slide .slick-list{overflow: unset !important;}
.mainSec05-slide .slick-list .slick-slide a{height: 100% !important;}
.mainSec05-slide .slick-list .slick-slide a img{height: 100% !important; object-fit: cover;}

.but02 .raven-button-icon{position: relative !important;}
.but02 a:hover .raven-button-icon svg path{fill: #E60012 !important;}


/* ************************************************
********************* FOOTER **********************
************************************************* */
.f-FamilySite nav > ul{width: 100%;}
.f-FamilySite nav > ul > li{width: 100%;}
.f-FamilySite nav > ul > li > a{justify-content: space-between; border: solid 1px #C4C4C4;}
.f-FamilySite nav > ul > li > a .sub-arrow::after{content: ""; display: block; width: 14px; height: 9px; background: url(/wp-content/uploads/2025/08/Family-Site.svg) no-repeat center / contain;}
.f-FamilySite nav > ul > li > .sub-menu{width: 100% !important; min-width: auto !important;}


/* ************************************************
********************** SUB ************************
************************************************* */
.sub-menu ul{margin: 0; width: 100%;}
.sub-menu ul li{flex: 1;}
.sub-menu ul li a{justify-content: center; height: 50px; border: 1px solid #ddd;}
.sub-menu ul li a.elementor-item-active{border: 1px solid #DA251C;}
.sub-menu ul li:not(:first-child) a{border-left: 0px;}

/* history */
.history .jet-timeline-item .timeline-item__card-content{display: flex;}
.history .jet-timeline-item .timeline-item__card-content .timeline-item__card-title{width: 170px;}
.history .jet-timeline-item .timeline-item__card-content .timeline-item__card-desc{width: calc( 100% - 170px);}
.history .jet-timeline-item .timeline-item__card-content .timeline-item__card-desc > div{padding: 10px 0; display: flex; gap: 10px;}
.history .jet-timeline-item .timeline-item__card-content .timeline-item__card-desc > div > div:first-child{width: 30px; font-weight: 600;}
.history .jet-timeline-item .timeline-item__card-content .timeline-item__card-desc > div > div:last-child{width: calc( 100% - 40px );}

.history .jet-timeline-item.is--active .timeline-item__card-content .timeline-item__card-title{color: #00081D !important;}

/* 인증 */
.certifications-list .jet-portfolio__item .jet-portfolio__image{border: 1px solid #DDD; aspect-ratio: 224 / 318;}
.certifications-list .jet-portfolio__item .jet-portfolio__image img{height: 100% !important;}
.certifications-list .jet-portfolio__item .jet-portfolio__title{display: flex; justify-content: center; align-items: center; min-height: 50px;}

/* 기술력 */
.technical-slide .jet-carousel{margin-left: 0px; margin-right: 0px;}
.technical-slide .jet-carousel .slick-list{overflow: unset;}
.technical-slide .jet-carousel .slick-list .technical-slide-txtWrap{opacity: 0; transition: all 0.3s !important;}
.technical-slide .jet-carousel .slick-list .slick-active .technical-slide-txtWrap{opacity: 1;}
.technical_bar::before{content: ""; display: block; width: 6px; height: 7px; background: url(/wp-content/uploads/2025/11/bar-poly.svg) no-repeat center; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
.technical_bar::after{content: ""; display: block; width: 5px; height: 5px; border-radius: 5px; background-color: #E60012; position: absolute; right: -3px; top: 50%; transform: translateY(-50%);}

.technical-box:hover div, .technical-box:hover span{color: #fff !important;}

/* 시공사례 */
.Construction-tab .jet-tabs__control-wrapper{width: 100%;}
.Construction-tab .jet-tabs__control-wrapper .jet-tabs__control{flex: 1;}
.Construction-tab .jet-tabs__control-wrapper .jet-tabs__control .jet-tabs__control-inner{height: 48px;}

.Construction-tab-list .jet-portfolio__inner{margin-bottom: 40px !important;}
.Construction-tab-list .jet-portfolio__inner .jet-portfolio__image,
.Comparison-Case-img a{aspect-ratio: 583 / 389;}
.Construction-tab-list .jet-portfolio__inner .jet-portfolio__image img,
.Comparison-Case-img a img{height: 100% !important;}

/* 문의하기 */
#contact input:focus, #contact select:focus , #contact textarea:focus {outline: none;}
#contact .form_input_wrap{margin-bottom: 40px; display: flex;} 
#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: 600; font-size: 18px; color: #333; line-height: 140%; letter-spacing: -0.36px;} 
#contact .form_input_wrap .form_input p label span,
#contact .input_message p label span{margin-left: 4px; font-weight: 500; font-size: 18px; color: #FF1703; line-height: 160%; letter-spacing: -0.36px; vertical-align: top;} 
#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; width: 100%; height: 55px; border: 1px solid #D0D0D0; font-weight: 500; font-size: 16px; color: #333; line-height: 100%;}

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

#contact .form_acceptance_warp{margin-bottom: 40px; display: flex; flex-direction: column; gap: 20px;}
#contact .form_acceptance_warp .form_acceptance_txt{color: #747474; font-size: 16px; font-weight: 400; line-height: 160%; letter-spacing: -0.32px;}
#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: 16px; color: #333; line-height: 140%; letter-spacing: -0.8px;}
#contact .form_acceptance_warp input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0 11px 0 0; background: #fff; border-radius: 5px; cursor: pointer; width: 22px;  height: 22px; outline: 0; border: 1px solid #DDD; padding: 0;}
#contact .form_acceptance_warp input[type="checkbox"]:checked {background: #E60012; border: 1px solid #E60012;}

#contact .form_submit p{text-align: end;} 
#contact .form_submit input{width: 226px; height: 58px; background: #E60012; border: 0; font-weight: 700; font-size: 18px; color: #FFF; line-height: 140%;}

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

/* ************************************************
******************* RESPONSIBILITY *****************
************************************************* */
@media (max-width:1200px){
  .br01{display: none;}
}
@media (max-width:1150px){
  #header .menu-wrap{display: none;}
  #header .logo-wrap, #header .lang-wrap{width: 50%;}
}
@media (max-width:1024px){
  .br03{display: none;}

  .scroll_bar{--divider-border-width: 80px !important;}

  .mainSec05-slide .slick-list .slick-slide{padding: 0px 5px !important;}

  .sub-menu ul li a{height: 45px;}

  /* history */
  .history .jet-timeline-item .timeline-item__card-content .timeline-item__card-title{width: 145px;}
  .history .jet-timeline-item .timeline-item__card-content .timeline-item__card-desc > div{padding: 8px 0;}
  .history .jet-timeline-item .timeline-item__card-content .timeline-item__card-desc > div > div:first-child{width: 25px;}
  .history .jet-timeline-item .timeline-item__card-content .timeline-item__card-desc > div > div:last-child{width: calc( 100% - 35px );}

  /* 인증 */
  .certifications-list .jet-portfolio__item .jet-portfolio__title{min-height: 45px;}

  /* 시공사례 */
  .Construction-tab .jet-tabs__control-wrapper .jet-tabs__control .jet-tabs__control-inner{height: 43px;}
  .Construction-tab-list .jet-portfolio__inner{margin-bottom: 20px !important;}

  /* 문의하기 */
  #contact .form_input_wrap{margin-bottom: 30px;} 
  #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 label span,
  #contact .input_message p label span{font-size: 16px;} 
  #contact .form_input_wrap .form_input p > span > input,
  #contact .input_message p > span > textarea{height: 50px; font-size: 15px;}
  #contact .input_message{margin-bottom: 23px;}
  #contact .input_message p > span > textarea{height: 180px;}
  #contact .form_acceptance_warp{margin-bottom: 30px; gap: 15px;}
  #contact .form_acceptance_warp .form_acceptance_txt,
  #contact .form_acceptance_warp .form_acceptance .wpcf7-list-item .wpcf7-list-item-label{font-size: 15px;}
  #contact .form_acceptance_warp input[type="checkbox"] {width: 20px; height: 20px;}
  #contact .form_submit input{width: 200px; height: 55px; font-size: 16px;}
}
@media (max-width:767px){
  .br02{display: none;}

  .sec01-silde .sp-buttons{margin-top: -43px !important;}
  .sec01-silde .sp-arrows{bottom: 30px !important;}
  .sec01-silde .jet-slider__item .sp-image-container img{object-position: 80% center;}
  .scroll_bar{--divider-border-width: 60px !important;}

  .sub-menu ul li a{height: 40px;}

  /* 인증 */
  .certifications-list .jet-portfolio__item .jet-portfolio__title{min-height: 40px;}

  /* 시공사례 */
  .Construction-tab .jet-tabs__control-wrapper .jet-tabs__control .jet-tabs__control-inner{height: 38px;}
  .Construction-tab-list .jet-portfolio__inner{margin-bottom: 15px !important;}

  /* 문의하기 */
  #contact .form_input_wrap{margin-bottom: 20px;} 
  #contact .form_input_wrap .form_input p label, 
  #contact .input_message p label{margin-bottom: 8px; font-size: 15px;} 
  #contact .form_input_wrap .form_input p label span,
  #contact .input_message p label span{font-size: 15px;} 
  #contact .form_input_wrap .form_input p > span > input,
  #contact .input_message p > span > textarea{height: 45px; font-size: 14px;}
  #contact .input_message{margin-bottom: 13px;}
  #contact .input_message p > span > textarea{height: 160px;}
  #contact .form_acceptance_warp{margin-bottom: 20px; gap: 14px;}
  #contact .form_acceptance_warp .form_acceptance_txt,
  #contact .form_acceptance_warp .form_acceptance .wpcf7-list-item .wpcf7-list-item-label{font-size: 14px;}
  #contact .form_submit input{width: 160px; height: 50px; font-size: 15px;}
}
@media (max-width:600px){
  /* history */
  .history .jet-timeline-item .timeline-item__card-content{flex-direction: column;}
  .history .jet-timeline-item .timeline-item__card-content .timeline-item__card-title{margin-bottom: 5px !important;}
  .history .jet-timeline-item .timeline-item__card-content .timeline-item__card-title,
  .history .jet-timeline-item .timeline-item__card-content .timeline-item__card-desc{width: 100%;}
  .history .jet-timeline-item .timeline-item__card-content .timeline-item__card-desc > div{padding: 5px 0; gap: 5px;}
}
@media (max-width:540px){
  .Construction-tab .jet-tabs__control-wrapper .jet-tabs__control{flex: unset; width: 100%;}
  .Construction-tab .jet-tabs__control-wrapper .jet-tabs__control:last-child{border: 1px solid #ddd; border-top: 0px;}
}
@media (max-width:375px){
  .sub-menu.en ul li{flex: unset; width: 50%;}
  .sub-menu.en ul li:last-child{width: 100%;}
  .sub-menu.en ul li:last-child a{border: 1px solid #ddd; border-top: 0px;}
}