@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.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');



/*
 *****************************************
 * CSS Variables
 * ***************************************
 * Site : lcde
 * File : custom.css
 * DATE : 2025.11.25
 *
 * 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;}
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: "Poppins", "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-main{background-color: #11345F;}
.single-post #jupiterx-main{background-color: #fff;}
.home #jupiterx-main{background-color: #fff;}


/* ************************************************
********************* HEADER ************************
************************************************* */
.jupiterx-header{position: absolute !important;}
.jupiterx-header > header{width: 100% !important;}

#header .nav-menu nav > ul{gap: 90px;}
#header .nav-menu nav > ul::after,
#header .nav-menu nav .sub-arrow{display: none;}
#header .nav-menu nav .sub-menu li.menu-item-has-children a .sub-arrow{display: block; padding: 0 0 0 3px; margin-block-end: -2px; margin-block-start: 0; position: absolute; right: 4px; top: 50%; transform: translateY(-50%);}
#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.on{background-color: #fff; border-bottom: 1px solid #DEDEDE;}
#header.on .nav-menu nav > ul > li > a{color: #111 !important;}
#header.on .nav-menu nav > ul > li > a.highlighted{color: #206CF5 !important;}
#header.on .nav-menu nav > ul > li > a.elementor-item-active{color: #206CF5 !important;}
#header.on .nav-menu nav > ul > li.current-menu-parent > a{color: #206CF5 !important;}
#header.on .logo img{content: url(/wp-content/uploads/2025/11/logo-b.svg) !important;}
#header.on .lang img{content: url(/wp-content/uploads/2025/12/lang-b.svg) !important;}
#header.on .menu-pop img{content: url(/wp-content/uploads/2025/12/mene-icon-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: #206CF5; 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(17, 17, 17, 0.7);}
.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: 10px !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: #206CF5 !important;}
.menu_pop li.current_page_item > a{color: #206CF5 !important;}
.menu_pop li.current_page_item > a .sub-arrow svg path{fill: #206CF5;}
.menu_pop_close svg path{fill: #111;}


/* ************************************************
********************* MAIN ************************
************************************************* */
/* sec01 */
#sec01-video{position: absolute; width: 100%; height: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%);}
#sec01-video > div ,#sec01-video .elementor-jet-video, #sec01-video .jet-video{width: 100%; height: 100%;}
#sec01-video .elementor-jet-video .jet-video video{height: 100%; object-fit: cover;}



/* sec03 */
.sec03-box .sec03-box-img{height: 100% !important;}
.sec03-box .sec03-box-img.sec03-box-img03{height: inherit !important;}
.sec03-box .sec03-box-img img{object-fit: cover !important; transition: all 0.5s;}
.sec03-box .sec03-box-btn .raven-button-texts-wrapper{margin-right: -30px; transition: all 0.3s;}
.sec03-box .sec03-box-btn .raven-button-icon{opacity: 0;}
.sec03-box:hover .sec03-box-btn .raven-button-texts-wrapper{margin-right: 0;}
.sec03-box:hover .sec03-box-btn .raven-button-texts-wrapper .button-text{color: #206CF5 !important;}
.sec03-box:hover .sec03-box-btn .raven-button-icon{opacity: 1;}
.sec03-box:hover .sec03-box-img img{transform: scale(1.1);}

/* sec04 */
.sec04-GDL{background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.90) 50%, rgba(255, 255, 255, 0.00) 100%); -webkit-backdrop-filter: blur(5px);  backdrop-filter: blur(5px); top: 50% !important; transform: translateY(-50%); transition: all 0.3s !important;}
.sec04-box:hover .sec04-GDL{opacity: 0; top: 60% !important;}

/* sec06 */
.sec06-img{opacity: 0; width: 100%;  transition: all 0.25s !important; position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.sec06-img.on{opacity: 1;}
.sec06-img img{width: 100% !important; object-position: center center !important;}
.sec06-slide > div{display: flex !important; flex-direction: column; justify-content: center;}
.sec06-slide .jet-carousel{margin-left: 0 !important; margin-right: 0 !important;}
.sec06-slide .jet-carousel .jet-slick-dots{gap: 8px;}
.sec06-slide .jet-carousel .jet-slick-dots li{padding: 0 !important;}
.sec06-slide .jet-carousel .jet-slick-dots li span{height: 6px !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 rgba(255, 255, 255, 0.40);}
.f-FamilySite nav > ul > li > a .sub-arrow::after{content: ""; display: block; width: 9px; height: 6px; background: url(/wp-content/uploads/2025/12/Family-Site.svg) no-repeat center / contain;}
.f-FamilySite nav > ul > li > .sub-menu{width: 100%  !important;}
.f-FamilySite nav > ul > li > .sub-menu a{border-inline-start: 0px solid transparent !important;}
.f-FamilySite nav > ul:hover > li > .sub-menu{width: 100% !important; min-width: auto !important;}


/* ************************************************
*********************** SUB ***********************
************************************************* */
.sub-menu nav, .sub-menu nav > ul, .sub-menu nav > ul > li{width: 100%;}
.sub-menu nav > ul > li > a{justify-content: space-between !important; cursor: pointer;}
.sub-menu nav > ul > li > a .sub-arrow{padding: 0; margin-block-end: 0; margin-block-start: 0; width: 8px; height: 5px; background: url(/wp-content/uploads/2025/12/sub-menu-arrow.svg) no-repeat center / contain;}
.sub-menu.sub-menu02 nav > ul > li > a .sub-arrow{background: url(/wp-content/uploads/2025/12/sub-menu-arrow02.svg) no-repeat center / contain;}
.sub-menu nav > ul > li > a .sub-arrow svg{display: none;}
.sub-menu nav > ul > li > .sub-menu{min-width: auto !important; width: 100% !important; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);}
.sub-menu nav > ul > li > .sub-menu li{width: 100% !important;}
.sub-menu nav > ul > li > .sub-menu li a{justify-content: center; border-inline-start: 0;}

.box-hover h5{transition: all 0.1s !important;}
.box-hover::after{content: ""; display: block; width: 100%; height: 100%; border-radius: 12px; border: 1px solid #ddd; position: absolute; left: 0; top: 0; transition: all 0.1s;}
.box-hover:hover::after{border: 3px solid #206CF5;}
.box-hover:hover h5{color: #206CF5 !important;}

.Cases-img{aspect-ratio: 67 / 36;}
.Cases-img02{aspect-ratio: 666 / 358;}
.table-img{overflow-x: auto !important;}

/* 가로 스크롤 아이콘 */
.msg_touch_help{display: none; width: 66px; height: 66px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: url(/wp-content/uploads/2025/12/scroll-m.svg)no-repeat center !important;}

.pro-img{aspect-ratio: 440 / 308;}
.pro-img02{aspect-ratio: 666 / 467;}

.pro-slide{flex-basis: auto !important;}
.pro-slide .sp-image-container{overflow: hidden; border-radius: 24px; background-color: #EDEDED !important;}
.pro-slide .sp-mask{aspect-ratio: 666 / 467;}
.pro-slide .sp-mask .sp-slide{background-color: transparent !important;}
.pro-slide .sp-thumbnails-container.sp-bottom-thumbnails{margin: 0; position: absolute; bottom: calc(50% - 95px); left: calc(100% + 23px); z-index: 1;}
.pro-slide .sp-thumbnails-container.sp-bottom-thumbnails .sp-thumbnail-container{background-color: #EDEDED;}
.pro-slide .sp-thumbnails-container.sp-bottom-thumbnails .sp-thumbnail-container,
.pro-slide .sp-thumbnails-container.sp-bottom-thumbnails .sp-thumbnail-container::before{border-radius: 12px;}

.Hydrogen-loop-txt{background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.90) 50%, rgba(255, 255, 255, 0.00) 100%); -webkit-backdrop-filter: blur(5px);  backdrop-filter: blur(5px); transition: all 0.3s !important;}
.Hydrogen-loop-box:hover .Hydrogen-loop-txt{bottom: -40% !important; opacity: 0;}

/* 문의하기 */
#contact input:focus , #contact textarea:focus {outline: none;}
#contact .form_input_wrap{margin-bottom: 30px; 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: 600; font-size: 20px; color: #393434; line-height: 140%; letter-spacing: -1px;} 
#contact .form_input_wrap .form_input p label span,
#contact .input_message p label span{margin-left: 2px; font-weight: 600; font-size: 20px; color: #393434; 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: 65px; border: 1px solid #E0E0E0;  border-radius: 20px; background-color: #F6F6F6; font-weight: 500; font-size: 16px; color: #333; line-height: 100%;}

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

#contact .formAwrap_box{margin-bottom: 30px; padding: 40px; border-radius: 20px; border: 1px solid #E0E0E0; background: #F6F6F6;}
#contact .formAwrap_box .formAwrap_wrap{display: flex; gap: 10px; flex-direction: column;}
#contact .formAwrap_box .formAwrap_wrap .formAwrap_tit{font-weight: 600; font-size: 20px; color: #393434; line-height: 140%; letter-spacing: -1px;}
#contact .formAwrap_box .formAwrap_wrap .formAwrap_txt{font-weight: 300; color: #84868A; font-size: 18px; line-height: 160%; letter-spacing: -1px;}

#contact .form_acceptance_warp{margin-bottom: 40px; display: flex; flex-direction: column; gap: 20px; text-align: center;}
#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{color: #393434; font-size: 20px; font-weight: 600; line-height: 160%; letter-spacing: -1px;}
#contact .form_acceptance_warp input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0 11px 0 0; background: #F6F6F6; border-radius: 20px; cursor: pointer; width: 20px;  height: 20px; outline: 0; border: 1px solid #E0E0E0; padding: 0;}
#contact .form_acceptance_warp input[type="checkbox"]:checked {background: #206CF5; border: 1px solid #206CF5;}

#contact .form_submit p{text-align: center;} 
#contact .form_submit input{width: 280px; height: 56px; background: #206CF5; border-radius: 10px; border: 0; font-weight: 600; font-size: 16px; color: #FFF; line-height: normal;}

#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:1024px){
    .br02{display: none;}

    #header .nav-menu nav > ul{gap: 70px;}
    #header .nav-menu nav .sub-menu{min-width: 135px !important;}

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

    /* sec03 */
    .sec03-box .sec03-box-btn .raven-button-texts-wrapper{margin-right: -28px;}

    .pro-slide .sp-thumbnails-container.sp-bottom-thumbnails{margin-top: 10px !important; position: relative; bottom: unset; left: 0;}
    .pro-slide .sp-thumbnails-container.sp-bottom-thumbnails .sp-thumbnail-container,
    .pro-slide .sp-thumbnails-container.sp-bottom-thumbnails .sp-thumbnail-container::before{border-radius: 10px;}

    #contact .form_input_wrap .form_input p label, 
    #contact .input_message p label{margin-bottom: 10px; font-size: 18px;} 
    #contact .form_input_wrap .form_input p label span,
    #contact .input_message p label span,
    #contact .formAwrap_box .formAwrap_wrap .formAwrap_tit,
    #contact .form_acceptance_warp .form_acceptance .wpcf7-list-item .wpcf7-list-item-label{font-size: 18px;}  
    #contact .form_input_wrap .form_input p > span > input,
    #contact .input_message p > span > textarea{padding: 8px; height: 55px; font-size: 15px;}
    #contact .input_message p > span > textarea{height: 180px;}
    #contact .formAwrap_box{padding: 30px;}
    #contact .formAwrap_box .formAwrap_wrap .formAwrap_txt{font-size: 16px;}
    #contact .form_acceptance_warp input[type="checkbox"] {width: 18px;  height: 18px;}
    #contact .form_submit input{width: 240px; height: 50px; font-size: 15px;}
}
@media (max-width:767px){
    .br01{display: none;}

    /* 가로 스크롤 아이콘 */
    .msg_touch_help{display: block;}

    .pro-slide .sp-slides-container{border-radius: 12px;}

    #contact .form_input_wrap{margin-bottom: 20px; flex-direction: column;} 
    #contact .form_input_wrap .form_input p label, 
    #contact .input_message p label{margin-bottom: 8px; font-size: 16px;} 
    #contact .form_input_wrap .form_input p label span,
    #contact .input_message p label span,
    #contact .formAwrap_box .formAwrap_wrap .formAwrap_tit,
    #contact .form_acceptance_warp .form_acceptance .wpcf7-list-item .wpcf7-list-item-label{font-size: 16px;}  
    #contact .form_input_wrap .form_input p > span > input,
    #contact .input_message p > span > textarea{padding: 5px; height: 50px; border-radius: 12px; font-size: 14px;}
    #contact .input_message p > span > textarea{height: 160px;}
    #contact .input_message{margin-bottom: 13px;}
    #contact .formAwrap_box{padding: 20px; border-radius: 12px;}
    #contact .formAwrap_box .formAwrap_wrap .formAwrap_txt{font-size: 14px;}
    #contact .form_acceptance_warp{margin-bottom: 30px;}
    #contact .form_acceptance_warp input[type="checkbox"] {width: 16px;  height: 16px;}
     #contact .form_submit input{width: 200px; height: 45px; font-size: 14px;}
}