@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* font-family: "Oswald", sans-serif; */
/* font-family: "Roboto", sans-serif; */

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

* br767 - 767
* br1024 - 1024
* br1250 - 1250
* br500 - 500
* br1440 - 1440
*/

/* ************************************************
*************** Jupiter X Reset *******************
************************************************* */
/* Reset */
html{scrollbar-gutter:stable !important;}
html, body{overflow-x: hidden !important;}
.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: "Oswald",  -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,.font02 h5,.font02 h6,.font02 input, .font02 textarea,.font02 button, .font02 label{font-family: "Roboto",  -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 ************************
************************************************* */




/* ************************************************
********************* MAIN ************************
************************************************* */
/* sec01 */
#sec01{height: calc( 100vh - 110px );}
#sec01 #sec01-acco{height: 100%;}
#sec01 #sec01-acco .jet-tabs-addons{height: 100%;}
#sec01 #sec01-acco .jet-tabs-addons .jet-image-accordion{height: 100%;}
#sec01 #sec01-acco .jet-tabs-addons .jet-image-accordion .jet-image-accordion__list{height: 100%;}
#sec01 #sec01-acco .jet-tabs-addons .jet-image-accordion .jet-image-accordion__list h2{font-family: "Oswald" !important;}
#sec01 #sec01-acco .jet-tabs-addons .jet-image-accordion .jet-image-accordion__list h2.jet-image-accordion__title-default{align-items: center; writing-mode: sideways-lr;}
#sec01 #sec01-acco .jet-tabs-addons .jet-image-accordion .jet-image-accordion__list .jet-image-accordion__button{display: flex; justify-content: center; align-items: center; width: 70px; height: 70px;}
#sec01 #sec01-acco .jet-tabs-addons .jet-image-accordion .jet-image-accordion__list .jet-image-accordion__button:hover svg path{fill: #455585;}

/* sec02 */
#sec02-tab .jet-tabs__control{flex: 1;}
#pro-list #pro-list-arrow{opacity: 0; transition: all 0.3s;}
#pro-list #pro-list-border{transition: all 0.1s;}
#pro-list #pro-list-img{overflow: hidden; }
#pro-list #pro-list-img img{transition: all 0.3s;}
#pro-list:hover #pro-list-border{border: 2px solid #242E4B;}
#pro-list:hover #pro-list-arrow{opacity: 1;}
#pro-list:hover #pro-list-img img{transform: scale(1.08);}


/* sec03 */



/* ************************************************
********************** SUB ************************
************************************************* */
/* Company */
.company-slide > div{position: relative !important;}
.company-slide > div .company-bg{width: max-content; max-width: unset !important;}
.company-slide .company-slide-item .sp-arrows{margin-top: 0 !important; display: flex!important; justify-content: space-between!important; transform: translateY(-50%)!important; }
.company-slide .company-slide-item .sp-arrows .sp-arrow{position: relative;}
.company-slide .company-slide-item .sp-arrows .sp-arrow.sp-previous-arrow{left: -100px;}
.company-slide .company-slide-item .sp-arrows .sp-arrow.sp-next-arrow{right: -100px;}

#company-history .swiper::before{content: ""; display: block; width: 100%; height: 2px; background-color: #DDDDDD; position: absolute; left: 0; top: 5px;}
#company-history .swiper-slide::before{content: ""; display: block; width: 12px; height: 12px; background-color: #fff; border-radius: 12px; border: solid 2px #455585; position: absolute; left: 0; top: 0px; transition: all 0.3s;}
#company-history .swiper-slide::after{content: ""; display: block; width: 6px; height: 171px; background: url(/wp-content/uploads/2026/07/history-line.svg) no-repeat center bottom / cover; position: absolute; left: 3px; top: 12px;}
#company-history .elementor-swiper-button svg{transition: all 0.4s ease-in-out;}
#company-history .elementor-swiper-button svg path{transition: all 0.4s ease-in-out;}
#company-history .elementor-swiper-button:hover svg{transform: scale(1.25);}
#company-history .elementor-swiper-button:hover svg path{fill: #fff;}

/* sub menu */
.sub-menu nav ul{width: 100%; align-items: flex-end;}
.sub-menu nav ul li{flex: 1;}
.sub-menu nav ul li a{justify-content: center; height: 80px; transition: all 0.3s !important;}
.sub-menu nav ul li a::before{transform: scale(1.2);}
.sub-menu nav ul li a.elementor-item-active,
.sub-menu nav ul li a:hover{height: 90px;}
.sub-menu nav ul li a.elementor-item-active::before{transform: scale(1);}



/* ************************************************
***************** RESPONSIBILITY *******************
************************************************* */
@media (max-width:1440px){
    .br1440{display: none;}
}
@media (max-width:1250px){
    .br1250{display: none;}

    /* sec01 */
    #sec01{height: calc( 100vh - 90px );}
    #sec01 #sec01-acco .jet-tabs-addons .jet-image-accordion .jet-image-accordion__list .jet-image-accordion__button{width: 64px; height: 64px;}

    /* Company */
    .company-slide .company-slide-item .sp-arrows .sp-arrow.sp-previous-arrow{left: -64px;}
    .company-slide .company-slide-item .sp-arrows .sp-arrow.sp-next-arrow{right: -64px;}
    #company-history .swiper-slide::after{height: 150px;}

    /* sub menu */
    .sub-menu nav ul li a{height: 74px;}
    .sub-menu nav ul li a.elementor-item-active,
    .sub-menu nav ul li a:hover{height: 84px;}
}
@media (max-width:1024px){
    .br1024{display: none;}

    /* sec01 */
    #sec01{height: calc( 100vh - 80px );}
    #sec01 #sec01-acco .jet-tabs-addons .jet-image-accordion .jet-image-accordion__list .jet-image-accordion__button{width: 60px; height: 60px;}

    /* Company */
    #company-history .swiper-slide::after{height: 120px;}

    /* sub menu */
    .sub-menu nav ul li a{height: 64px;}
    .sub-menu nav ul li a.elementor-item-active,
    .sub-menu nav ul li a:hover{height: 74px;}
}
@media (max-width:767px){
    .br767{display: none;}

    /* sec01 */
    #sec01{height: 540px;}
    #sec01 #sec01-acco .jet-tabs-addons .jet-image-accordion .jet-image-accordion__list h2.jet-image-accordion__title-default{writing-mode: unset;}
    #sec01 #sec01-acco .jet-tabs-addons .jet-image-accordion .jet-image-accordion__list .jet-image-accordion__button{width: 54px; height: 54px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}

    /* Company */
    .company-slide > div .company-bg{width: calc(100% + 20px);}
    .company-slide .company-slide-item .sp-arrows .sp-arrow.sp-previous-arrow{left:0;}
    .company-slide .company-slide-item .sp-arrows .sp-arrow.sp-next-arrow{right: 0;}
    #company-history .swiper-slide::after{height: 90px;}

    /* sub menu */
    .sub-menu{position: relative !important;}
    .sub-menu nav ul{align-items: unset;}
    .sub-menu nav ul li a{height: auto;}
    .sub-menu nav ul li a.elementor-item-active,
    .sub-menu nav ul li a:hover{height: auto;}
}
@media (max-width:600px){
    /* sub menu */
    .sub-menu nav ul li{flex: unset; width: calc(100% / 3);}
}