@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");


/*
*****************************************
* CSS Variables
* ***************************************
* Site : illglobal-dergenes
* File : custom.css
* DATE : 2026.03.12
*
* 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-family: "DM Sans", "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 ************************
************************************************* */
.home .jupiterx-header{position: absolute !important;}

/* #header{transition: padding-left 0.3s ease-in-out, padding-right 0.3s ease-in-out, min-height 0.3s ease-in-out, background-color 0.3s ease-in-out !important;} */
/* #header > div{transition: all 0.3s !important;} */
#header .nav-menu nav > ul{gap: 60px;}
#header .nav-menu nav > ul::after,
#header .nav-menu nav .sub-arrow{display: none;}
#header .nav-menu nav .sub-menu{min-width: 150px !important; padding: 10px; }
#header .nav-menu nav > ul > li.current-menu-parent > a{color: #EB0F6B;}
#header .nav-menu nav > ul > li > a:hover{color: #EB0F6B;}
#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: 8px; height: 44px;}
#header .nav-menu nav > ul > li > .sub-menu a:hover{font-weight: 500 !important;}
#header .nav-menu nav > ul > li > .sub-menu a.elementor-item-active{font-weight: 500 !important;}

.home #header .menu-icon svg path{fill: #fff !important;}

#header.on{background-color: #fff !important; border-bottom: 1px solid #F0F0F0;}
#header.on .logo img{content: url(/wp-content/uploads/2026/03/logo.svg) !important;}
#header.on .nav-menu nav > ul > li > a{color: #121212;}
#header.on .nav-menu nav > ul > li > a:hover{color: #EB0F6B;}
#header.on .nav-menu nav > ul > li > a.highlighted{color: #EB0F6B;}
#header.on .lang svg path{fill: #121212 !important;}
#header.on .lang li span{color: #121212 !important;}
#header.on #language-switcher{color: #121212 !important; background-image: url('/wp-content/uploads/2026/05/sel-arrow.svg'); background-position: right 4px center;}
.home #header.on .menu-icon svg path{fill: #121212 !important;}

/* menu - mo */
.menu_pop a{padding-top: 20px !important; padding-bottom: 20px !important;}
.menu_pop a.highlighted{border-bottom: 1px solid #F0F0F0 !important;}
.menu_pop a .sub-arrow svg path{transform-origin: center;}
.menu_pop a.highlighted .sub-arrow svg path{fill: #EB0F6B; 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 #F0F0F0 !important; margin-bottom: 60px !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: #EB0F6B !important;}
.menu_pop li.current_page_parent > a{color: #EB0F6B !important;}
.menu_pop li.current_page_parent > a .sub-arrow svg path{fill: #EB0F6B;}




/* ************************************************
********************* MAIN ************************
************************************************* */
/* btn */
.learn-btn .button-text-container{position: relative; right: -24px; transition: all 0.3s;}
.learn-btn .button-text-container .raven-button-icon{position: relative !important; right: -10px;}
.learn-btn:hover .button-text-container{right: 0px;}
.learn-btn:hover .button-text-container .raven-button-icon{right: 0px;}

/* border-wrap */
.border-wrap > div{border-left: 1px solid #F0F0F0; border-right: 1px solid #F0F0F0;}

/* pro list */
#pro-box #pro-box-more, #pro-box #pro-box-img img{transition: all 0.3s;}
#pro-box #pro-box-more > div{opacity: 0; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: all 0.3s;}
#pro-box:hover #pro-box-img img{transform: scale(1.05);}
#pro-box:hover #pro-box-more{min-height: 44px;}
#pro-box:hover #pro-box-more > div{opacity: 1;}

/* sec01 */
.main-visual{width: 100%; height: 100%;}
.main-visual:before{content: ""; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.20); position: absolute; left: 0; top: 0; z-index: 1;}
.main-visual img{transform: scale(1.075); transition: all 1s !important;}
.main-visual.on img{transform: scale(1);}
.main-visual-mo.on img{transform: scale(1);}

.scroll_bar_wrap .e-con-inner{position: relative; }
.scroll_bar{overflow: hidden;}
.scroll_bar .elementor-divider-separator{overflow: hidden; }
.scroll_bar .elementor-divider-separator::after{content: ""; display: block; width: 1px; 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;
  }
}

/* ************************************************
********************** SUB ************************
************************************************* */
/* pro */
#pro-page-wrap .elementor-grid .elementor-385:nth-of-type(3n) #pro-box{border-right-width: 0;}

/* brand */
.brand-acco .jet-accordion__item.active-toggle{border-width: 0px 0px 0px 0px !important;}
.brand-acco .jet-accordion__item:last-child{border-width: 0px 0px 0px 0px !important;}

/* pro detail */
.pro-plus-list ul{display: flex; gap: 24px; flex-direction: column; align-items: flex-end;}
.pro-plus-list02 ul{align-items: flex-start;}
.pro-plus-list ul li{padding: 10px 10px 10px 30px !important; gap: 14px; flex-direction: row-reverse; border-radius: 100px; border: 1px solid #EB0F6B; background: rgba(235, 15, 107, 0.20); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);}
.pro-plus-list.pro-plus-list-Y ul li{border: 1px solid #F6BA00; background: rgba(246, 186, 0, 0.20); }
.pro-plus-list.pro-plus-list-B ul li{border: 1px solid #004DD2; background: rgba(0, 77, 210, 0.40); }
.pro-plus-list.pro-plus-list02 ul li{padding: 10px 30px 10px 10px !important; flex-direction: row; }
.second-point{opacity: 0; position: relative; transition: all 0.3s;}
.second-point::after{content: ""; display: block; width: 12px; height: 10px; background: url(/wp-content/uploads/2026/03/second-point-arrow.svg) no-repeat center center / contain; position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);}
.pro-step-slide .swiper-slide-active .second-point{opacity: 1;}

/* Contact */
#Contact input:focus, #Contact textarea:focus {outline: none;}
#Contact .form_input_wrap{display: flex; border-bottom: 1px solid #F0F0F0;} 
#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 label, 
#Contact .input_message p label{display: flex; margin-bottom: 0; padding: 0 100px; min-width: 266px; height: 80px; border-right: 1px solid #F0F0F0; font-weight: 500; font-size: 15px; color: #929499; line-height: normal; align-items: center;} 
#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 40px; width: 100%; height: 80px; border: 0; background: #FFF; font-weight: 500; font-size: 16px; color: #121212; line-height: normal;}
#Contact .form_input_wrap .form_input p > span > input.wpcf7-file{padding: 15px;}

#Contact .input_message{margin-bottom: 15px;}
#Contact .input_message p > span > textarea{padding: 30px 100px; height: 240px; border-bottom: 1px solid #F0F0F0;}

#Contact .form_acceptance_warp{padding: 23px 100px 0; display: flex; flex-direction: column; gap: 40px;}
#Contact .form_acceptance_warp .form_acceptance_txt{color: #607181; font-weight: 300; font-size: 16px; line-height: 150%;}
#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: 16px; color: #070707; line-height: 160%; }
#Contact .form_acceptance_warp .form_submit input{width: 100%; height: 45px; background: #EB0F6B; border: 0; border-radius: 4px; font-weight: 600; font-size: 15px; color: #FFF; line-height: normal;}
#Contact .form_acceptance_warp input[type="checkbox"] {-webkit-appearance: none; -moz-appearance: none; appearance: none; margin: 0 10px 0 0; background: #fff; border-radius: 4px; cursor: pointer; height: 25px; outline: 0; width: 25px; border: 1px solid #D9D9D9; padding: 0;}
#Contact .form_acceptance_warp input[type="checkbox"]:checked {background: #EB0F6B url(/wp-content/uploads/2026/03/check.svg) no-repeat center / 11px 9px; border: 1px solid #EB0F6B;}

#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{font-weight: 400; color: #929499;}
#Contact input::-webkit-input-placeholder{font-weight: 400; color: #929499;}
#Contact input:-ms-input-placeholder{font-weight: 400; color: #929499;}
#Contact textarea::placeholder{font-weight: 400; color: #929499;}
#Contact textarea::-webkit-input-placeholder{font-weight: 400; color: #929499;}
#Contact textarea:-ms-input-placeholder{font-weight: 400; color: #929499;}

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

  #Contact .form_input_wrap .form_input p label, #Contact .input_message p label{padding: 0 50px; min-width: 240px; height: 74px;}
  #Contact .form_input_wrap .form_input p > span > input, #Contact .input_message p > span > textarea{height: 74px;}
  #Contact .input_message p > span > textarea{padding: 30px 50px; height: 220px;}
  #Contact .form_acceptance_warp{padding: 23px 50px 0;}

  /* pro detail */
  .pro-plus-list ul{gap: 14px;}
  .pro-plus-list ul li{padding: 8px 8px 8px 14px !important; gap: 8px;}
  .pro-plus-list.pro-plus-list02 ul li{padding: 8px 14px 8px 8px !important;}
}
@media (max-width:1024px){
  .br1024{display: none;}

  #header .nav-menu nav > ul{gap: 40px;}

  /* btn */
  .learn-btn .button-text-container{right: -17px;}
  .learn-btn .button-text-container .raven-button-icon{right: -15px;}

  /* sec01 */
  .scroll_bar{--divider-border-width: 120px !important;}

  /* pro */
  #pro-page-wrap .elementor-grid .elementor-385:nth-of-type(2n) #pro-box{border-right-width: 0;}
  #pro-page-wrap .elementor-grid .elementor-385:nth-of-type(3n) #pro-box{border-right-width: 1px;}

  /* pro detail */
  .pro-plus-list ul{gap: 14px;}
  .pro-plus-list ul li{padding: 5px 8px 5px 12px !important; gap: 8px;}
  .pro-plus-list.pro-plus-list02 ul li{padding: 5px 12px 5px 8px !important}

  /* Contact */
  #Contact .form_input_wrap .form_input p label, #Contact .input_message p label{padding: 0 20px; min-width: 200px; height: 70px;}
  #Contact .form_input_wrap .form_input p > span > input, #Contact .input_message p > span > textarea{height: 70px;}
  #Contact .input_message p > span > textarea{padding: 20px; height: 200px;}
  #Contact .form_acceptance_warp{padding: 23px 20px 0; gap: 30px;}
  #Contact .form_acceptance_warp .form_acceptance_txt{font-size: 15px;}
  #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: 22px; height: 22px;}
  #Contact .form_acceptance_warp .form_acceptance .wpcf7-list-item .wpcf7-list-item-label{font-size: 15px;}
}
@media (max-width:767px){
  .br767{display: none;}

  /* pro list */
  #pro-box:hover #pro-box-more{min-height: 36px;}

  /* pro */
  #pro-page-wrap .elementor-grid .elementor-385:nth-of-type(3n) #pro-box{border-right-width: 0;}

  /* pro detail */
  .pro-plus-list ul{gap: 10px;}
  .pro-plus-list ul li{padding: 6px 6px 6px 10px !important; gap: 6px;}
  .pro-plus-list.pro-plus-list02 ul li{padding: 6px 10px 6px 6px !important;}
  .second-point{width: fit-content; position: absolute !important; left: 50%; top: -30px; transform: translateX(-50%); white-space: nowrap;}

  /* Contact */
  #Contact .form_input_wrap .form_input p label, #Contact .input_message p label{min-width: 140px; height: 60px; font-size: 14px;}
  #Contact .form_input_wrap .form_input p > span > input, #Contact .input_message p > span > textarea{padding: 0 20px; height: 60px; font-size: 15px;}
  #Contact .input_message p > span > textarea{padding: 20px; height: 180px;}
  #Contact .form_acceptance_warp{padding: 10px 20px 0; gap: 20px;}
  #Contact .form_acceptance_warp .form_acceptance_txt{font-size: 14px;}
  #Contact .form_acceptance_warp .form_acceptance_txt .form_acceptance_txtGroup p{gap: 0px 20px;}
  #Contact .form_acceptance_warp input[type="checkbox"]{width: 20px; height: 20px;}
  #Contact .form_acceptance_warp .form_acceptance .wpcf7-list-item .wpcf7-list-item-label{font-size: 14px;}#Contact .form_acceptance_warp .form_submit input{height: 40px; font-size: 14px;}
}
@media (max-width:600px){
  /* pro detail */
  .CLINICALDATA-wrap{background-position: center bottom !important;}

  #Contact .form_input_wrap .form_input p label, #Contact .input_message p label{min-width: 100px;}
  #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;}
}
@media (max-width:450px){
  /* pro detail */
  .CLINICALDATA-wrap{background-size: contain !important;}
}