@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");


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

 * br01 - 767
 * br02 - 1024
 * br03 - 767 block
 * 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;}
.wordBr{word-break:keep-all;}
.wordBr02{word-break:break-all;}
a {text-decoration: none !important;}
a:hover{text-decoration: none !important;}
svg{margin: 0 !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;}


#arrow_Purple .elementor-icon:hover{padding-left: 13px;}
#arrow_Purple .elementor-icon:hover svg path{fill: #9744B0;}

.br03{display: none;}


/* ************************************************
******************** Header **********************
************************************************* */
.home header{position: absolute !important;}

#header .nav_menu nav > ul{gap: 40px;}
#header .nav_menu nav > ul::after{display: none !important;}
#header .nav_menu nav > ul > li > a .sub-arrow{display: none;}
#header .nav_menu nav > ul > li > a{justify-content: center;}
#header .nav_menu nav > ul > li > .sub-menu{padding: 20px; left: 50% !important; transform: translateX(-50%);}
#header .nav_menu nav > ul > li > .sub-menu li + li{margin-top: 24px;}
#header .nav_menu nav > ul > li > .sub-menu li a{justify-content: center; border: 0; text-align: center;}


#header .nav_menu nav > ul > li.menu-item-has-children.on > a{color: #9744B0 !important;}

/* ************************************************
********************** Main ************************
************************************************* */
#main_visual{clip-path: inset(90px 100px 90px round 50px); transition: all 0.7s 0.5s;}
#main_visual.on{clip-path: inset(0 0 0);}
#main_wrap{flex-grow: 1;}
#main_arrow{animation: scroll 0.6s ease-in-out 0s infinite alternate;}
@keyframes scroll {
    0% {top: 0px;}
    100% {top: 15px;}
}

/* sec02 */
#RD .RD_box .RD_box_bg, #RD .RD_box .RD_box_bg::after, #RD .RD_box .RD_box_bg img{transition: all ease-out 0.3s;}

#RD .RD_box .RD_box_bg{height: 100%;}
#RD .RD_box .RD_box_bg::after{opacity: 0.3; content: ""; display: block; width: 100%; height: 100%; background: linear-gradient(180deg, #000000 12%, #FFFFFF00 58%); position: absolute; left: 0; top: 0;}
#RD .RD_box .RD_box_bg.RD_box_bg03::after{background: linear-gradient(180deg, #000000 21%, #FFFFFF00 66%);}
#RD .RD_box .RD_box_bg.RD_box_bg02::after{background: linear-gradient(180deg, #000000 19%, #FFFFFF00 40%);}
#RD .RD_box .RD_box_bg.RD_box_bg04::after{background: linear-gradient(180deg, #000000 7%, #FFFFFF00 50%);}

#RD .RD_box .RD_box_bg > div{flex-grow: 1;}
#RD .RD_box .RD_box_bg img{height: 100%; object-fit: cover; transform: scale(1.05);}

#RD .RD_box:hover .RD_box_bg::after{opacity: 0;}
#RD .RD_box:hover .RD_box_bg img{transform: scale(1);}

/* sec03 */
#sec03_slide .jet-slider, #sec03_slide .jet-slider .sp-mask{overflow: unset;}

#sec03_slide .jet-slider .sp-mask .jet-slider__item,
#sec03_slide .jet-slider .sp-mask .jet-slider__item .sp-image-container,
#sec03_slide .jet-slider .sp-mask .jet-slider__item .jet-slider__content{border-radius: 30px;}

#sec03_slide .jet-slider__content-item{min-height: 192px;}
#sec03_slide .jet-slider__content-item .jet-slider__content-inner{justify-content: flex-end;}

#sec03_slide .jet-slider .sp-arrows{margin-top: 0px;}
#sec03_slide .jet-slider .sp-arrows .sp-previous-arrow{left: -30px; top: -30px;}
#sec03_slide .jet-slider .sp-arrows .sp-next-arrow{right: -30px; top: -30px;}
#sec03_slide .jet-slider .sp-arrows .sp-arrow svg rect, 
#sec03_slide .jet-slider .sp-arrows .sp-arrow svg path{transition: all 0.3s;}
#sec03_slide .jet-slider .sp-arrows .sp-arrow:hover svg rect{fill: #9744B0; fill-opacity: 1;}
#sec03_slide .jet-slider .sp-arrows .sp-arrow:hover svg path{fill: #fff;}

/* sec05 */
#main_pro .pro_box .pro_box_bg, #main_pro .pro_box .pro_box_bg img, #main_pro .pro_box .pro_box_txt, #main_pro .pro_box .pro_box_txt .pro_box_arrow{transition: all ease-out 0.3s;}

#main_pro .pro_box .pro_box_txt .pro_box_arrow{opacity: 0;}
#main_pro .pro_box .pro_box_bg{height: 100%;}
#main_pro .pro_box .pro_box_bg > div{flex-grow: 1;}
#main_pro .pro_box .pro_box_bg img{height: 100%; object-fit: cover;}

#main_pro .pro_box:hover .pro_box_bg img{transform: scale(1.05);}
#main_pro .pro_box:hover .pro_box_txt .pro_box_arrow{opacity: 1;}

/* ************************************************
********************* FOOTER **********************
************************************************* */
.single-post footer{background-color: #fafafa;}

.f_sns_icon:hover img{content: url(/wp-content/uploads/2025/03/blog_c.svg);}
.f_sns_icon02:hover img{content: url(/wp-content/uploads/2025/03/youtube_c.svg);}
.f_sns_icon03:hover img{content: url(/wp-content/uploads/2025/03/insta_c.svg);}


/* ************************************************
*********************** SUB ***********************
************************************************* */
.Breadcrumbs .breadcrumb-item + .breadcrumb-item{padding-left: 8px;}
.Breadcrumbs .breadcrumb-item + .breadcrumb-item::before{padding-right: 0; margin-right: 8px; content: ""; width: 14px; height: 14px; background: url(/wp-content/uploads/2024/11/breadcrumb_arrow.svg) no-repeat center center / contain; vertical-align: middle;}

/* sub menu */
#sub_wrap{-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);}
#sub_menu_L .sub-arrow{padding: 0; margin-left: 24px; width: 24px; height: 24px; background: url(/wp-content/uploads/2024/11/sub_menu-arrow.svg) no-repeat center center / contain;}
#sub_menu_L nav > ul > li{width: 268px;}
#sub_menu_L nav > ul > li > a{padding-right: 19px; justify-content: space-between;}
#sub_menu_L nav > ul > li > .sub-menu{padding: 20px; width: 100% !important;}
#sub_menu_L nav > ul > li > .sub-menu li + li{margin-top: 24px;}
#sub_menu_L nav > ul > li > .sub-menu a{justify-content: center; border: 0;}

/* sub menu mo */
.sub_menu .subm_nav_m nav > ul > li > a{background-color: #9744B0 !important; font-weight: 600 !important; color: #fff !important; font-size: 18px !important; position: relative;}
.sub_menu .subm_nav_m nav > ul > li > a::before, .sub_menu .subm_nav_m nav > ul > li > a::after{ position: absolute; content:"";display: block;width: 11px;height: 2px;transform: translate(50%,-50%);top:50%;right:25px;background-color: #fff; transition: all 0.5s; opacity: 1 !important;}
.sub_menu .subm_nav_m nav > ul > li > a::before{transform: translate(50%,-50%) rotate(-90deg);opacity: 1;}

.sub_menu .subm_nav_m nav > ul > li > a.highlighted::before, .sub_menu .subm_nav_m nav > ul > li > a.highlighted::after{transition: all 0.5s;}
.sub_menu .subm_nav_m nav > ul > li > a.highlighted::before{transform: translate(50%,-50%) rotate(0deg); }
.sub_menu .subm_nav_m nav > ul > li > a.highlighted::after{transform: translate(50%,-50%) rotate(180deg); opacity: 0;}

.sub_menu .subm_nav_m nav > ul > li > ul li:last-child{border-bottom:  1px solid #DDDDDD;}
.sub_menu .subm_nav_m nav > ul > li > ul a{color: #8E8E8E !important;}
.sub_menu .subm_nav_m nav > ul > li > ul a.elementor-item-active{color: #9744B0 !important; font-weight: 500 !important; text-decoration: underline !important; text-underline-offset: 3px; text-decoration-color: #9744B0 !important;}

/* history */
/* #history .jet-hor-timeline-track::after{content: ""; display: block; width: 30px; height: calc(100% - 6px); background: linear-gradient(90deg, rgba(255, 255, 255, 0.00) 0%, rgba(153, 153, 153, 0.40) 237.5%); position: absolute; right: 0; top: 6px; z-index: 1;} */
#history .jet-hor-timeline-list{gap: 30px;}
#history .jet-hor-timeline-list.jet-hor-timeline-list--top{display: none;}
#history .jet-hor-timeline-list.jet-hor-timeline-list--middle{z-index: 2;}
#history .jet-hor-timeline-list .jet-hor-timeline-item__card-inner{padding: 0 40px;}
#history .jet-hor-timeline-list .jet-elements-icon{position: relative;}
#history .jet-hor-timeline-list .jet-elements-icon::after{content: ""; display: block; width: 2px; height: 65px; background-color: #9744B0; position: absolute; left: 50%; top: 6px; transform: translateX(-50%);}
#history .list{display: flex; flex-direction: row; gap: 14px;}
#history .list .month{width: 30px; font-weight: 600;}
#history .list .con{width: calc(100% - 44px);}
#history .jet-hor-timeline-list .jet-hor-timeline-item__card-desc{display: flex; gap: 20px; flex-direction: column;}

/* 보유기술 */
#technology_bg{clip-path: inset(90px 100px 90px round 50px); z-index: -1; transition: all 0.5s ease-in-out;}
#technology_bg.on{clip-path: inset(0 0 0); }
#technology_bg.on.fixed{position: fixed;}

#technology_wrap > div{margin: 0;}

.T_backdrop{-webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);}

/* 천연원료 추출/분리/정제기술 */
#natural_gra::before{content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border-radius: 100px; border: 5px solid transparent; background: linear-gradient(97deg, #DDDDDD 0%, #DDDDDD00 100%) border-box; -webkit-mask: linear-gradient(#DDDDDD 0 0) padding-box, linear-gradient(#DDDDDD 0 0); -webkit-mask-composite: destination-out; mask-composite: exclude;}

/* Autophagy */
.Autophagy_tit > div{display: flex !important; justify-content: center; align-items: center;}

/* 난용성 성분 가용화 기술 */
.solubilization_img img{mix-blend-mode: darken;}

/* 연구방향 */
#research_bg{clip-path: inset(90px 100px 90px round 50px); z-index: -1; transition: all 0.5s ease-in-out;}
#research_bg.on{clip-path: inset(0 0 0); }


/* 특허 및 인증 */
.pc_portfolio .jet-portfolio__link{padding: 20px; background-color: #F5F5F5; cursor: auto;}

/* 상품상세페이지 25.03.05 AN */
#prd_slide_cus .sp-slide, #prd_slide_cus .sp-thumbnail-container{border-radius: 30px;}
#prd_slide_cus .sp-bottom-thumbnails{position: absolute; bottom: 0; left: calc(100% + 60px); z-index: 1;}
#prd_slide_cus .sp-arrows{left: calc(100% + 60px); bottom: calc(0% + 80px); margin-top: 0; top: unset; z-index: 2;}
#prd_slide_cus .sp-arrow.sp-previous-arrow{left:0; background-image: url("http://pilko.superbee.kr/wp-content/uploads/2025/03/ri_arrow-up-s-line-2.svg") !important;background-size: contain;background-repeat: no-repeat;width: 40px; height: 40px;display: block;}
#prd_slide_cus .sp-arrow.sp-next-arrow{right:0; background-image: url("http://pilko.superbee.kr/wp-content/uploads/2025/03/ri_arrow-up-s-line-1-1.svg") !important;background-size: contain;background-repeat: no-repeat;width: 40px; height: 40px;display: block;}
#prd_slide_cus .sp-arrow svg{display: none;}
.prdcont .jet-slider{overflow: visible !important;}

#prdcont .prd_table .jet-table-wrapper{width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;}
#prdcont .prd_table .jet-table-wrapper .jet-table{width: 100%; min-width: 585px; border-collapse: collapse;}
#prdcont.prd_table_s .prd_table .jet-table-wrapper .jet-table{min-width: 570px;}

#prdcont .prd_table .jet-table__cell-content:empty {min-height: 80px;display: block;}


/* ************************************************
***************** RESPONSIBILITY *******************
************************************************* */
@media (max-width:1440px){
    /* sub menu */
    #sub_wrap{padding-right: 20px;}
    #sub_menu_L nav > ul > li > a{padding-left: 80px;}
    #sub_menu_R nav > ul > li > a{padding-left: 24px; padding-right: 24px;}
}
@media (max-width:1024px){
    .br02{display: none;}

    /* main */
    #main_visual{clip-path: inset(90px 50px 90px round 30px);}

    /* sec03 */
    #sec03_slide .jet-slider__content-item{min-height: 155px;}
    #sec03_slide .jet-slider .sp-arrows .sp-previous-arrow{left: -25px; top: -25px;}
    #sec03_slide .jet-slider .sp-arrows .sp-next-arrow{right: -25px; top: -25px;}

    /* history */
    #history .jet-hor-timeline-list .jet-hor-timeline-item__card-inner{padding: 0 30px;}
    #history .jet-hor-timeline-list .jet-elements-icon::after{height: 55px;}
    #history .list{gap: 10px;}
    #history .list .month{width: 25px;}
    #history .list .con{width: calc(100% - 35px);}
    #history .jet-hor-timeline-list .jet-hor-timeline-item__card-desc{gap: 15px;}

    /* 보유기술 */
    #technology_bg{clip-path: inset(90px 50px 90px round 30px);}

    /* 천연원료 추출/분리/정제기술 */
    #natural_gra::before{border: 4px solid transparent; border-radius: 60px;}

    /* 연구방향 */
    #research_bg{clip-path: inset(90px 50px 90px round 30px);}

    /* 특허 및 인증 */
    .pc_portfolio .jet-portfolio__link{padding: 15px;}
    .pc_portfolio .jet-portfolio__item .jet-portfolio__inner{margin: 10px !important;}

    /* 상품상세페이지 25.03.05 AN */
    #prd_slide_cus .sp-bottom-thumbnails{left: calc(100% + 30px);}
    #prd_slide_cus .sp-arrows{left: calc(100% + 30px); bottom: calc(0% + 70px);}
    #prd_slide_cus .sp-arrow.sp-previous-arrow{width: 35px; height: 35px;}
    #prd_slide_cus .sp-arrow.sp-next-arrow{width: 35px; height: 35px;}

    /* #prdcont .prd_table .jet-table-wrapper{width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;} */
    #prdcont .prd_table .jet-table-wrapper .jet-table{width: 100%; min-width: 764px; border-collapse: collapse;}
    #prdcont.prd_table_s .prd_table .jet-table-wrapper .jet-table{width: 100%; min-width: 570px; border-collapse: collapse;}


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

    /* sub menu mo */
    .sub_menu .subm_nav_m nav > ul > li > a{font-size: 16px !important;}

    /* main */
    #main_visual{clip-path: inset(70px 20px 70px round 20px);}

    /* sec03 */
    #sec03_slide .jet-slider .sp-mask .jet-slider__item,
    #sec03_slide .jet-slider .sp-mask .jet-slider__item .sp-image-container,
    #sec03_slide .jet-slider .sp-mask .jet-slider__item .jet-slider__content{border-radius: 20px;}
    #sec03_slide .jet-slider__content-item{min-height: 155px;}
    #sec03_slide .jet-slider .sp-arrows .sp-previous-arrow{left: -20px; top: -20px;}
    #sec03_slide .jet-slider .sp-arrows .sp-next-arrow{right: -20px; top: -20px;}

    /* history */
    #history .jet-hor-timeline-list .jet-hor-timeline-item__card-inner{padding: 0 25px;}
    #history .jet-hor-timeline-list .jet-elements-icon::after{height: 45px;}
    #history .list .month{width: 20px;}
    #history .list .con{width: calc(100% - 30px);}

    /* 보유기술 */
    #technology_bg{clip-path: inset(70px 20px 70px round 20px);}

    /* 천연원료 추출/분리/정제기술 */
    #natural_gra::before{border: 3px solid transparent; border-radius: 20px;}

    /* 연구방향 */
    #research_bg{clip-path: inset(70px 20px 70px round 20px);}

    /* 특허 및 인증 */
    .pc_portfolio .jet-portfolio__link{padding: 10px;}
    .pc_portfolio .jet-portfolio__item{position: relative !important; top: unset !important; left: unset !important;}
    .pc_portfolio .jet-portfolio__item .jet-portfolio__inner{margin: 7px 7px 20px !important;}

    /* 상품상세페이지 25.03.05 AN */
    #prd_slide_cus .sp-bottom-thumbnails{position: initial; bottom: unset; left: 0;}
    #prd_slide_cus .sp-arrows{display: none;}
    #prdcont .portfolio .jet-portfolio__image-instance{object-fit: contain;}

    

}