@charset "UTF-8";
/* font-family: "new-kansas", sans-serif; */
/* font-family: "acumin-pro", sans-serif; */



/*
 *****************************************
 * CSS Variables
 * ***************************************
 * Site : dergenes
 * File : custom.css
 * DATE : 2025.09.08
 *
 * 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: "acumin-pro", -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;}
.font-en, .font-en div,.font-en a,.font-en p,.font-en span,.font-en h1, .font-en h2,.font-en h3,.font-en h4,.font-en h5,.font-en h6,.font-en input, .font-en textarea,.font-en button, .font-en label{font-family: "new-kansas", -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-site{position: relative;}

/* ************************************************
********************* HEADER ************************
************************************************* */

/************ menu popup *************/
.menu_pop a{padding-top: 20px !important; padding-bottom: 20px !important;}
.menu_pop li.current_page_parent > a{color: #000 !important;}
.menu_pop li.current_page_parent > a .sub-arrow svg path{fill: #000;}
/* .menu_pop a.highlighted{border-bottom: 1px solid #ddd !important;} */
.menu_pop a.highlighted .sub-arrow svg path{fill: #000; 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: #fff;}
/* .menu_pop nav > ul > li:last-child{border-bottom: 1px solid #ddd !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; font-weight: 500 !important; font-size: 16px !important; }
.menu_pop ul.sub-menu li a.elementor-item-active{text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: rgba(0, 0, 0, 0.70) !important;}


/* ************************************************
********************* MAIN ************************
************************************************* */
/* sec01 */
#sec01 div{min-height: calc(98vh - 72px);}
#sec01 div video{min-height: calc(98vh - 72px); object-fit: cover;}

/* sec02 */
#sec02::after{content: ""; display: block; width: 100%; height: 80%; background: linear-gradient(0deg, #FED7EC 50%, rgba(254, 215, 236, 0.00) 100%); position: absolute; left: 0; top: unset; bottom: 0;}
#sec02-tit{position: sticky; top: 200px;}
#sec02-box > .sec02-box-rotate,
#sec02-box02 > .sec02-box-rotate{transition-timing-function: ease-in-out;}
#sec02-box:hover > .sec02-box-rotate{border-radius: 20px 20px 20px 20px; background-image: url(/wp-content/uploads/2025/09/Bubble-H02.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0); transform: rotateZ(2.5deg);}
#sec02-box02:hover > .sec02-box-rotate{border-radius: 20px 20px 20px 20px; background-image: url(/wp-content/uploads/2025/09/Bubble-V02.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0); transform: rotateZ(-2.5deg);}
#sec02-box03:hover > .sec02-box-rotate{border-radius: 20px 20px 20px 20px; background-image: url(/wp-content/uploads/2025/09/Ice-Coolagen-Masque-02.jpg); background-position: center center; background-repeat: no-repeat; background-size: cover; box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0); transform: rotateZ(2.5deg);}

/* marquee */
.marquee-move .raven-marquee-item{overflow: unset !important; position: relative;}
.marquee-move .raven-marquee-item::after{content: ""; display: block; width: 32px; height: 32px; background: url(/wp-content/uploads/2025/09/Main-ani-01.gif) no-repeat center center / contain; position: absolute; right: -112px; top: 50%; transform: translateY(-50%);}

/* sec03 */
#sec03 .e-con-inner{position: relative;}

/* sec05 */
#sec05::before{background: linear-gradient(257deg, rgba(238, 155, 249, 0.40) 3.9%, rgba(179, 190, 235, 0.40) 49.54%, rgba(17, 102, 161, 0.40) 95.19%) !important;}


/* ************************************************
********************* FOOTER **********************
************************************************* */
.jupiterx-footer{position: absolute; left: 0; bottom: 0px; z-index: 20;}

.f-logo{width: 230px; height: 230px; border: 0; border-radius: 300px; background: url(/wp-content/uploads/2025/09/footer-logo.png) no-repeat center center / contain; font-size: 0; position: relative;  box-shadow: 1px 1px 8px 0 rgba(138, 0, 82, 0.14); transition: all 0.3s ease-in-out;}
.fil0 {fill: #EE2A6B;}
.star-1 {opacity: 0; width: 20px; height: auto; position: absolute; top: 20%; left: 20%; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all 0.8s cubic-bezier(0.05, 0.83, 0.43, 0.96);}
.star-2 {opacity: 0; width: 15px; height: auto; position: absolute; top: 45%; left: 45%; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all 0.8s cubic-bezier(0, 0.4, 0, 0.8);}
.star-3 {opacity: 0; width: 5px; height: auto; position: absolute; bottom: 30%; left: 40%; filter: drop-shadow(0 0 0 #fffdef);  z-index: -5; transition: all 1s cubic-bezier(0.3, 0.4, 0, 0.8);}
.star-4 {opacity: 0; width: 8px; height: auto; position: absolute; bottom: 50%; right: 50%; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all 0.8s cubic-bezier(0.2, 0.4, 0, 0.8);}
.star-5 {opacity: 0; width: 15px; height: auto; position: absolute; top: 40%; right: 45%;  filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all 0.6s cubic-bezier(0.2, 0.4, 0, 0.8);}
.star-6 {opacity: 0; width: 5px; height: auto; position: absolute; top: 50%; left: 50%; filter: drop-shadow(0 0 0 #fffdef); z-index: -5; transition: all 0.8s cubic-bezier(0.2, 0.4, 0, 0.8);}

.f-logo:hover {box-shadow: 0 0 25px #fec1958c;}
.f-logo:hover .star-1 {opacity: 1; width: 40px; top: -10%; left: -20%; filter: drop-shadow(0 0 10px #fffdef);z-index: 2; transform: rotate(15deg);}
.f-logo:hover .star-2 {opacity: 1; width: 30px; top: 5%; left: 15%; filter: drop-shadow(0 0 10px #fffdef);z-index: 2; transform: rotate(15deg);}
.f-logo:hover .star-3 {opacity: 1; width: 15px; bottom: 10%; left: 25%; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; transform: rotate(15deg);}
.f-logo:hover .star-4 {opacity: 1; width: 24px; bottom: 30%; right: -4%; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; transform: rotate(15deg);}
.f-logo:hover .star-5 {opacity: 1; width: 15px; top: 30%; right: -20%; filter: drop-shadow(0 0 10px #fffdef);z-index: 2; transform: rotate(15deg); }
.f-logo:hover .star-6 {opacity: 1; width: 10px; top: 20px; left: 60%; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; transform: rotate(15deg);}



/* ************************************************
*********************** SUB ************************
************************************************* */


/* ************************************************
***************** RESPONSIBILITY *******************
************************************************* */
@media (max-width:1540px){
    /* sec02 */
    #sec02::after{background: linear-gradient(0deg, #FED7EC 80%, rgba(254, 215, 236, 0.00) 100%);}
}
@media (max-width:1400px){
    /* sec03 */
    #sec03 .sec03-btn{position: relative; top: unset; left: unset;}
}
@media (max-width:1034px){
    /* sec02 */
    #sec02::after{background: linear-gradient(0deg, #FED7EC 100%, rgba(254, 215, 236, 0.00) 100%);}
}
@media (max-width:1024px){
    .br02{display: none;}

    /* sec01 */
    #sec01 div, #sec01 div video{min-height: calc( 98vh - 70px );}

    /* sec02 */
    #sec02::after{background: linear-gradient(0deg, #FED7EC 70%, rgba(254, 215, 236, 0.00) 100%);}

    .marquee-move .raven-marquee-item::after{right: -96px;}

    /* footer */
    .f-logo{width: 190px; height: 190px;}

}
@media (max-width:767px){
    .br01{display: none;}

    /* sec01 */
    #sec01 div, #sec01 div video{min-height: 500px;}

    /* sec02 */
    #sec02::after{background: linear-gradient(0deg, #FED7EC 80%, rgba(254, 215, 236, 0.00) 100%);}

    .marquee-move .raven-marquee-item::after{right: -76px;}

    /* footer */
    .f-logo{width: 140px; height: 140px;}
    .f-logo:hover .star-1 {width: 30px;}
    .f-logo:hover .star-2 {width: 22px; top: 10%;}
    .f-logo:hover .star-3 {width: 9px;}
    .f-logo:hover .star-4 {width: 18px;}
    .f-logo:hover .star-5 {width: 9px;}
    .f-logo:hover .star-6 {width: 6px;}
}