@charset "utf-8";

/*******************************************
 * 
 * Project   : 제이엔오빌
 * File name : sub.css
 * 
********************************************/


/******************************************
 * Table - 공통
 * 
********************************************/
body:not(.woocommerce-cart) .main-content table.jnobil-table{ border-top: 1px solid #222;}
body:not(.woocommerce-cart) .main-content table.jnobil-table thead{ background: #f4f4f4;}
body:not(.woocommerce-cart) .main-content table.jnobil-table thead tr th{ font-size: 16px; font-weight: 700; line-height: 36px; color: #000; text-align: center;}
body:not(.woocommerce-cart) .main-content table.jnobil-table tr:nth-child(2n+1) { background-color: #fff;}

body:not(.woocommerce-cart) .main-content tr td:first-child, 
body:not(.woocommerce-cart) .main-content tr th:first-child{ background-color: #fff;}
body:not(.woocommerce-cart) .main-content table.jnobil-table tbody tr td{ font-size: 16px; font-weight: 400; line-height: 36px; color: #777;}


/******************************************
 * 서브 페이지 - 페이지 타이틀
 * 
********************************************/
#sub-head{ padding-top: 140px; padding-bottom: 140px; border-bottom: 0px solid #222;}

.row .col .sub-title-wrap{ padding: 0px 0px 0px; background-color: transparent;}
.row .col .sub-title-wrap h1{ margin-top: 0px; font-size: 48px; font-weight: 700; line-height: 58px; color: #fff; letter-spacing: -1px; text-align: center;}
.row .col .sub-title-wrap p{ font-size: 18px; font-weight: 400; line-height: 24px; color: #fff; text-align: center;}
.row .col .sub-title-wrap p .point{ font-weight: 700;}


/******************************************
 * 서브 페이지 - 빵조각
 * 
********************************************/
.sub-titile-menu{ border-bottom: 1px solid #ededed;}

body.material .vc_wp_custommenu .widget:not(.nectar_popular_posts_widget):not(.recent_posts_extra_widget) ul{ display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; margin-top: 30px; margin-left: 0px;}
body.material .vc_wp_custommenu .widget:not(.nectar_popular_posts_widget):not(.recent_posts_extra_widget) ul li{ list-style: none;}
body.material .vc_wp_custommenu .widget:not(.nectar_popular_posts_widget):not(.recent_posts_extra_widget) ul li a{ position: relative; font-size: 16px; color: #b7b7b7;}
body.material .vc_wp_custommenu .widget:not(.nectar_popular_posts_widget):not(.recent_posts_extra_widget) ul li a::after{ position: absolute; content: ''; top: 50%; right: -20px; width: 1px; height: 13px; background-color: #b7b7b7; transform: translateY(-50%);}
body.material .vc_wp_custommenu .widget:not(.nectar_popular_posts_widget):not(.recent_posts_extra_widget) ul li:last-child a::after{ display: none;}
body.material .vc_wp_custommenu .widget:not(.nectar_popular_posts_widget):not(.recent_posts_extra_widget) ul li a:hover,
body.material .vc_wp_custommenu .widget:not(.nectar_popular_posts_widget):not(.recent_posts_extra_widget) ul li.current_page_item a{ color: #fff;}

/* 모바일 드롭다운 스타일 메뉴 */
.page-submenu{ border-bottom: 1px solid #ededed;}
.page-submenu li a{ font-size: 16px; color: #b7b7b7;}


/******************************************
 * 서브 페이지 - Row
 * 
********************************************/
.vc_row.sub-row{ padding-bottom: 90px;}

.sub-section-title{ position: relative; border-bottom: 1px solid #ddd; text-align: center;}
.sub-section-title::before{ content: ''; position: absolute; left: 0px; bottom: -1px; width: 10px; height: 1px; background-color: transparent; z-index: 1;}
.sub-section-title::after{ content: ''; position: absolute; right: 0px; bottom: -1px; width: 10px; height: 1px; background-color: transparent; z-index: 1;}
.sub-section-title .wpb_wrapper h2{ display: inline-block; padding-bottom: 20px; border-bottom: 1px solid #222; font-size: 34px; font-weight: 700; line-height: 54px; letter-spacing: -1px;}


/******************************************
 * 서브 페이지 - 회사소개
 * 
********************************************/
.company-vision{ text-align: center;}
.company-vision .wpb_wrapper h3{ font-size: 24px; font-weight: 700; line-height: 34px;}
.company-vision .wpb_wrapper p.desc{ padding-top: 30px; font-size: 16px; font-weight: 400; line-height: 36px;}


/******************************************
 * 서브 페이지 - 회사연혁
 * 
********************************************/
.material .wpb_row.history-row{ position: relative; margin-bottom: 0px;}
.material .wpb_row.history-row::before{ content: ''; position: absolute; top: 40px; left: 50%; width: 1px; height: 100%; background-color: #664497;}
.material .wpb_row.history-row.last::before{ display: none;}

.material .history-year{ padding: 30px; text-align: left;}
.material .history-year .wpb_wrapper h3{ font-size: 24px; font-weight: 700; line-height: 34px;}

.material .history-detail{ position: relative; padding: 30px; text-align: left;}
.material .history-detail::before{ content: ''; position: absolute; top: 36px; left: -22px; width: 20px; height: 20px; border-radius: 20px; background-color: #664497; z-index: 10;}
.material .history-detail::after{ content: ''; position: absolute; top: 31px; left: -27px; width: 30px; height: 30px; border-radius: 20px; background-color: #d2b5fb;}
.material .history-detail .wpb_wrapper h3{ font-size: 24px; font-weight: 700; line-height: 34px;}

.material .history-detail .wpb_wrapper dl dt{ font-size: 20px; font-weight: 400; line-height: 40px;}
.material .history-detail .wpb_wrapper dl dd{ padding-left: 0px; font-size: 20px; font-weight: 400; line-height: 40px;}


/******************************************
 * 서브 페이지 - 인사말
 * 
********************************************/
.ceo-greeting{ text-align: left;}
.ceo-greeting .wpb_wrapper h3{ font-size: 22px; font-weight: 700; line-height: 32px;}
.ceo-greeting .wpb_wrapper p.desc{ padding-top: 15px; font-size: 16px; font-weight: 400; line-height: 36px;}
.ceo-greeting .wpb_wrapper p.ceo{ font-size: 16px; font-weight: 400; line-height: 36px; text-align: right;}


/******************************************
 * 서브 페이지 - R&D 수행이력 및 특허
 * 
********************************************/
.material .wpb_content_element.rnd-item .wpb_wrapper{ padding: 50px; border: 1px solid #ddd; border-radius: 10px;}
.material .wpb_content_element.rnd-item .wpb_wrapper dl{ display: block;}
.material .wpb_content_element.rnd-item .wpb_wrapper dl dt{ position: relative; padding-bottom: 0px; padding-left: 20px; margin-bottom: 10px; border-left: 0px solid #664497; font-size: 24px; font-weight: 700; line-height: 34px; letter-spacing: -1px; color: #664497;}
.material .wpb_content_element.rnd-item .wpb_wrapper dl dt::before{ content: ''; position: absolute; left: 0px; width: 10px; height: 100%; border-radius: 0px 5px 0px 5px; background-color: #664497;}
.material .wpb_content_element.rnd-item .wpb_wrapper dl dd{ padding: 15px 0px; padding-left: 0px; border-bottom: 1px solid #ededed; font-size: 16px; font-weight: 400; line-height: 26px;}
.material .wpb_content_element.rnd-item .wpb_wrapper dl dd:last-child{ padding-bottom: 0px; border-bottom: 1px solid #fff;}
.material .wpb_content_element.rnd-item .wpb_wrapper dl dd .tit{ font-weight: 700; color: #222;}


/******************************************
 * 서브 페이지 - 오시는 길
 * 
********************************************/
.material .wpb_content_element.location-info .wpb_wrapper{ padding: 30px 0px 15px;}
.material .wpb_content_element.location-info .wpb_wrapper dl{ display: block;}
.material .wpb_content_element.location-info .wpb_wrapper dl dt{ position: relative; padding-bottom: 0px; padding-left: 20px; margin-bottom: 20px; border-left: 0px solid #664497; font-size: 24px; font-weight: 700; line-height: 34px; letter-spacing: -1px; color: #664497;}
.material .wpb_content_element.location-info .wpb_wrapper dl dt::before{ content: ''; position: absolute; left: 0px; width: 10px; height: 100%; border-radius: 0px 5px 0px 5px; background-color: #664497;}
.material .wpb_content_element.location-info .wpb_wrapper dl dd{ padding: 10px 0px; padding-left: 0px; border-bottom: 1px solid #ededed; font-size: 16px; font-weight: 400; line-height: 26px;}
.material .wpb_content_element.location-info .wpb_wrapper dl dd .tit{ font-weight: 700;}

.material .wpb_content_element.btn-map-wrap .wpb_wrapper{ padding: 15px 0px 0px;}
.material .wpb_content_element.btn-map-wrap .wpb_wrapper ul{ display: flex; gap: 15px; margin-left: 0px;}
.material .wpb_content_element.btn-map-wrap .wpb_wrapper ul li{ list-style: none;}
.material .wpb_content_element.btn-map-wrap .wpb_wrapper ul li .btn-map{ display: inline-block;}
.material .wpb_content_element.btn-map-wrap .wpb_wrapper ul li .btn-map .btn-map-inner{ display: flex; align-items: center; justify-content: center; gap: 15px; padding: 20px 30px; border: 1px solid #41db95; border-radius: 60px; background-color: #fff; transition: all 300ms ease-in-out;}
.material .wpb_content_element.btn-map-wrap .wpb_wrapper ul li .btn-map .btn-map-inner .icon{ display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; margin-bottom: 0px; border-radius: 25px; background-color: #000; background: linear-gradient(135deg, rgba(83, 78, 32, 1.000) 0.000%, rgba(83, 78, 32, 1.000) 7.692%, rgba(85, 79, 46, 1.000) 7.692%, rgba(85, 79, 46, 1.000) 15.385%, rgba(85, 80, 64, 1.000) 15.385%, rgba(85, 80, 64, 1.000) 23.077%, rgba(85, 81, 84, 1.000) 23.077%, rgba(85, 81, 84, 1.000) 30.769%, rgba(84, 83, 107, 1.000) 30.769%, rgba(84, 83, 107, 1.000) 38.462%, rgba(81, 84, 130, 1.000) 38.462%, rgba(81, 84, 130, 1.000) 46.154%, rgba(78, 85, 153, 1.000) 46.154%, rgba(78, 85, 153, 1.000) 53.846%, rgba(74, 87, 175, 1.000) 53.846%, rgba(74, 87, 175, 1.000) 61.538%, rgba(69, 88, 195, 1.000) 61.538%, rgba(69, 88, 195, 1.000) 69.231%, rgba(65, 89, 212, 1.000) 69.231%, rgba(65, 89, 212, 1.000) 76.923%, rgba(60, 91, 226, 1.000) 76.923%, rgba(60, 91, 226, 1.000) 84.615%, rgba(55, 93, 234, 1.000) 84.615%, rgba(55, 93, 234, 1.000) 92.308%, rgba(51, 94, 238, 1.000) 92.308% 100.000%); color: #fff;}
.material .wpb_content_element.btn-map-wrap .wpb_wrapper ul li .btn-map .btn-map-inner .txt{ font-size: 14px; font-weight: 500; line-height: 1; color: #41db95;}
.material .wpb_content_element.btn-map-wrap .wpb_wrapper ul li .btn-map:hover .btn-map-inner{ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}

.material .wpb_content_element.btn-map-wrap .wpb_wrapper ul li .btn-map.kakao .btn-map-inner{ border: 1px solid #f5ac05;}
.material .wpb_content_element.btn-map-wrap .wpb_wrapper ul li .btn-map.kakao .btn-map-inner .txt{  color: #f5ac05;}


/******************************************
 * 서브 페이지 - 일라이트 소개
 * 
********************************************/
.illite-introduction{ text-align: left;}
.illite-introduction .wpb_wrapper h3{ font-size: 28px; font-weight: 700; line-height: 38px;}
.illite-introduction .wpb_wrapper h4{ padding-top: 15px; font-size: 20px; font-weight: 400; line-height: 30px; color: #555;}
.illite-introduction .wpb_wrapper p.desc{ padding-top: 15px; font-size: 16px; font-weight: 400; line-height: 36px;}
.illite-introduction .wpb_wrapper p.desc .accent{ color: #000;}


/******************************************
 * 서브 페이지 - 일라이트 특성
 * 
********************************************/
.material .wpb_content_element.characteristic-item { padding: 20px; margin-bottom: 10px; text-align: left;}
.material .wpb_content_element.characteristic-item .wpb_wrapper{ display: flex; position: relative;}
.material .wpb_content_element.characteristic-item .wpb_wrapper h3.nbr{ position: absolute; display: flex; align-items: center; justify-content: center; top: 0px; left: 0px; width: 40px; height: 40px; padding: 10px; margin-bottom: 10px; border-radius: 20px; border:1px solid #222; font-size: 18px; font-weight: 700; line-height: 1; color: #333;}

.material .wpb_content_element.characteristic-item .wpb_wrapper .cont{ padding-top: 7px; padding-left: 50px;}
.material .wpb_content_element.characteristic-item .wpb_wrapper .cont .tit{ padding-bottom: 10px; font-size: 20px; font-weight: 700; line-height: 26px; color: #333;}
.material .wpb_content_element.characteristic-item .wpb_wrapper .cont .desc{ font-size: 16px; font-weight: 400; line-height: 26px; color: #777;}


/******************************************
 * 서브 페이지 - 제품소개
 * 
********************************************/
.material .wpb_content_element.products-title{ position: relative; text-align: center;}
.material .wpb_content_element.products-title .wpb_wrapper h2{ padding-bottom: 20px; font-size: 34px; font-weight: 700; line-height: 46px; letter-spacing: -1px; color: #664497;}
.material .wpb_content_element.products-title .wpb_wrapper p.desc{ padding-bottom: 20px; font-size: 18px; font-weight: 400; line-height: 36px;}

.material .product-intro-row{ border-radius: 30px; background-color: #f7f7f7;}
.material .product-intro-row .wpb_column{ padding-top: 50px;  border-right: 1px solid #ddd;}
.material .product-intro-row .wpb_column:last-child{ border-right: 0px solid #ddd;}

.material .wpb_content_element.product-intro-item{ padding: 20px 50px 50px; background-color: transparent; text-align: center;}
.material .wpb_content_element.product-intro-item .wpb_wrapper p.nbr{ display: inline-block; padding-bottom: 5px; margin-bottom: 20px; border-bottom: 2px solid #333; font-size: 16px; font-weight: bold; line-height: 26px; color: #333;}
.material .wpb_content_element.product-intro-item .wpb_wrapper figure img{ width: 72px; height: auto;}
.material .wpb_content_element.product-intro-item .wpb_wrapper h3{ padding-bottom: 10px; font-size: 22px; font-weight: 700; line-height: 32px; color: #000;}
.material .wpb_content_element.product-intro-item .wpb_wrapper p.desc{ padding-bottom: 0px; font-size: 16px; font-weight: 400; line-height: 26px;}

/* 경기도교육청 기준 적용 친환경 도료*/
.material .wpb_content_element.product-ggd-info .wpb_wrapper h3{ padding-bottom: 10px; font-size: 22px; font-weight: 700; line-height: 32px; color: #000;}
.material .wpb_content_element.product-ggd-info .wpb_wrapper p.desc{ padding-bottom: 0px; font-size: 16px; font-weight: 400; line-height: 26px;}

/* 탭 */
.material .product-test_tab .tabbed[data-style*="minimal"] .wpb_tabs_nav { margin-bottom: 0px;}
.material .product-test_tab .nectar-flickity:not(.masonry) .flickity-viewport{ border: 1px solid #664497; border-radius: 10px;}

/* KOLAS 시험 성적서 결과 */
.material .wpb_content_element.product-test-info .wpb_wrapper{ padding-top: 120px;}
.material .wpb_content_element.product-test-info .wpb_wrapper dl dt{ padding-bottom: 30px; font-size: 24px; font-weight: 700; line-height: 34px; letter-spacing: -1px;}
.material .wpb_content_element.product-test-info .wpb_wrapper dl dt .point{ position: relative;}
.material .wpb_content_element.product-test-info .wpb_wrapper dl dt .point::before{ content: ''; position: absolute; bottom: 0px; width: 100%; height: 15px; background-color: #ebe2f7; z-index: -1;}
.material .wpb_content_element.product-test-info .wpb_wrapper dl dd{ position: relative; padding-left: 30px; padding-bottom: 20px; font-size: 15px; font-weight: 400; line-height: 36px;}
.material .wpb_content_element.product-test-info .wpb_wrapper dl dd img{ position: absolute; top: 8px; left: 0px; width: 20px; height: 20px; margin-bottom: 0px;}
.material .wpb_content_element.product-test-info .wpb_wrapper dl dd .tit{ padding-right: 10px; border-right: 1px solid #555; margin-right: 5px; font-weight: 700; color: #333;}
.material .wpb_content_element.product-test-info .wpb_wrapper .notice-box{ padding: 20px; margin-top: 20px; border-left: 5px solid #664497; background-color: #ebe2f7;}

/* 에코로 세상을 기능성 무기질 도료시험 결과 */
.material .wpb_content_element.product-test-result .wpb_wrapper{ padding-top: 30px; margin-top: 0px; border-top: 1px solid #ededed;}
.material .wpb_content_element.product-test-result .wpb_wrapper dl dt{ padding-bottom: 30px; font-size: 24px; font-weight: 700; line-height: 34px; letter-spacing: -1px;}
.material .wpb_content_element.product-test-result .wpb_wrapper dl dt .point{ position: relative;}
.material .wpb_content_element.product-test-result .wpb_wrapper dl dt .point::before{ content: ''; position: absolute; bottom: 0px; width: 100%; height: 15px; background-color: #ebe2f7; z-index: -1;}
.material .wpb_content_element.product-test-result .wpb_wrapper dl dd{ position: relative; padding-left: 30px; padding-bottom: 20px; font-size: 15px; font-weight: 400; line-height: 36px;}
.material .wpb_content_element.product-test-result .wpb_wrapper dl dd img{ position: absolute; top: 8px; left: 0px; width: 20px; height: 20px; margin-bottom: 0px;}
.material .wpb_content_element.product-test-result .wpb_wrapper dl dd .tit{ padding-right: 10px; border-right: 1px solid #555; margin-right: 5px; font-weight: 700; color: #333;}
.material .wpb_content_element.product-test-result .wpb_wrapper .notice-box{ padding: 20px; margin-top: 20px; border-left: 5px solid #664497; background-color: #ebe2f7;}

/* 일라이트 K-salt*//
.material .wpb_content_element.product-efficacy{ padding: 30px 50px 0px; border: 1px solid #ddd; background-color: transparent; text-align: center;}
.material .wpb_content_element.product-efficacy .wpb_wrapper { padding: 30px 0px 30px; border: 1px solid #ddd; text-align: center;}
.material .wpb_content_element.product-efficacy .wpb_wrapper h3.title{ padding-bottom: 0px; font-size: 26px; font-weight: 700; line-height: 36px;}
.material .wpb_content_element.product-efficacy .wpb_wrapper figure { display: flex; justify-content: center; text-align: center;}
.material .wpb_content_element.product-efficacy .wpb_wrapper p.desc{ padding-bottom: 0px; font-size: 16px; font-weight: 400; line-height: 26px;}

/* 일라이트볼*/
.material .wpb_content_element.product-effect-item{ padding: 30px 50px 0px; border: 0px solid #ddd; background-color: transparent;}
.material .wpb_content_element.product-effect-item .wpb_wrapper p.title--md{ padding-bottom: 10px; font-size: 20px; font-weight: 400; line-height: 30px;}
.material .wpb_content_element.product-effect-item .wpb_wrapper h3.title{ padding-bottom: 0px; font-size: 26px; font-weight: 700; line-height: 36px;}
.material .wpb_content_element.product-effect-item .wpb_wrapper figure { width: 30%;}
.material .wpb_content_element.product-effect-item .wpb_wrapper p.desc{ padding-bottom: 0px; font-size: 16px; font-weight: 400; line-height: 26px;}

.material .wpb_content_element.product-example-item{ padding: 50px 50px 50px; border: 1px solid #ddd; background-color: transparent; text-align: center;}
.material .wpb_content_element.product-example-item figure img{ width: 48px; height: auto;}
.material .wpb_content_element.product-example-item p.desc{ padding-bottom: 0px; font-size: 16px; font-weight: 400; line-height: 26px;}

/* 오빌라이트 */
.material .wpb_content_element.product-obilite-suggest{ padding: 50px 50px 50px; border: 0px solid #ddd; background-color: transparent; text-align: left;}
.material .wpb_content_element.product-obilite-suggest li{ padding-bottom: 20px; margin-bottom: 20px; border-bottom: 1px solid #ededed; font-size: 16px; font-weight: 400; line-height: 26px;}

/* SiumCatch */
.material .wpb_content_element.products-info{ margin-top: 40px;}
.material .wpb_content_element.products-info .wpb_wrapper{ margin-top: 10px; text-align: center;}
.material .wpb_content_element.products-info .wpb_wrapper h3{ font-size: 22px; font-weight: 700; line-height: 32px;}
.material .wpb_content_element.products-info .wpb_wrapper p.desc{ font-size: 16px; font-weight: 400; line-height: 26px;}


/******************************************
 * 서브 페이지 - 홍보영상
 * 
********************************************/
.material .wpb_content_element.illite-video-info .wpb_wrapper { padding: 20px; border: 1px solid #ededed; border-radius: ;}
.material .wpb_content_element.illite-video-info .wpb_wrapper h3{ font-size: 16px; font-weight: 700; line-height: 26px;}