/*
Theme Name: Salient Child Theme
Description: This is a custom child theme for Salient
Theme URI:   https://themeforest.net/item/salient-responsive-multipurpose-theme/4363266
Author: ThemeNectar
Author URI:  https://themeforest.net/user/themenectar
Template: salient
Version: 1.0
*/


/***************************************************
 * Font
 * Pretendard [400, 500, 700]
***************************************************/
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

.en{ font-family: "Poppins", sans-serif;}

/***************************************************
 * Display
 * 
***************************************************/
.pc--show{ display: block;}
.pc--hidden{ display: none;}


/***************************************************
 * Button - 공통
 * 
***************************************************/
.btn-default-wrap .wpb_wrapper{ padding-top: 20px;}

.btn-default{ display: inline-block;}
.btn-default .btn-default-inner{ display: flex; align-items: center; justify-content: center; gap: 15px; padding: 20px 30px; border: 1px solid #000; border-radius: 10px; background-color: #fff; transition: all 300ms ease-in-out;}
.btn-default .btn-default-inner img{ width: 25px; height: 23px; margin-bottom: 0px;}
.btn-default .btn-default-inner .txt{ font-size: 18px; font-weight: 500; line-height: 1; color: #000;}

.btn-default:hover .btn-default-inner{ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}


/***************************************************
 * Button - ai
 * 
***************************************************/
.btn-ai-wrap .wpb_wrapper{ padding-top: 30px; text-align: center;}

.btn-ai{ display: inline-block;}
.btn-ai .btn-ai-inner{ display: flex; align-items: center; justify-content: center; gap: 15px; padding: 20px 30px; border: 1px solid #4159db; border-radius: 60px; background-color: #fff; transition: all 300ms ease-in-out;}
.btn-ai .btn-ai-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(90deg, rgba(36, 51, 116, 1.000) 0.000%, rgba(43, 67, 173, 1.000) 16.667%, rgba(49, 86, 218, 1.000) 33.333%, rgba(57, 107, 244, 1.000) 50.000%, rgba(64, 127, 248, 1.000) 66.667%, rgba(72, 146, 231, 1.000) 83.333%, rgba(79, 162, 193, 1.000) 100.000%); color: #fff;}
.btn-ai .btn-ai-inner .txt{ font-size: 18px; font-weight: 500; line-height: 1; color: #4159d4;}

.btn-ai:hover .btn-ai-inner{ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}


/***************************************************
 * Button - buy
 * 
***************************************************/
.btn-buy-wrap { display: flex; justify-content: center; gap: 5px; padding-top: 0px; text-align: center;}

.btn-buy{ display: inline-block;}
.btn-buy .btn-buy-inner{ display: flex; align-items: center; justify-content: center; gap: 15px; padding: 20px 30px; border: 1px solid #664497; border-radius: 60px; background-color: #fff; transition: all 300ms ease-in-out;}
.btn-buy .btn-buy-inner.naver{ border: 1px solid #41b045;}
.btn-buy .btn-buy-inner.coupang{ border: 1px solid #e0311d;}
.btn-buy .btn-buy-inner.email{ border: 1px solid #664497;}
.btn-buy .btn-buy-inner.down{ border: 1px solid #ffa508;}

.btn-buy .btn-buy-inner .icon{ display: flex; align-items: center; justify-content: center; width: 25px; height: 25px; margin-bottom: 0px;  color: #fff;}
.btn-buy .btn-buy-inner .txt{ font-size: 16px; font-weight: 500; line-height: 1; color: #664497;}
.btn-buy .btn-buy-inner.naver .txt{ color: #41b045;}
.btn-buy .btn-buy-inner.coupang .txt{ color: #e0311d;}
.btn-buy .btn-buy-inner.email .txt{ color: #664497;}
.btn-buy .btn-buy-inner.down .txt{ color: #ffa508;}

.btn-buy:hover .btn-buy-inner{ box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;}


/***************************************************
 * Main - 공통
 * 
***************************************************/
.row .col .main-section-title{ text-align: center; padding-bottom: 50px;}
.row .col .main-section-title h3{ padding-bottom: 20px; font-family: "Poppins", sans-serif; font-size: 68px; font-weight: 700; line-height: 68px; color: #222;}
.row .col .main-section-title .small{ font-size: 20px; font-weight: 500; line-height: 20px; color: #777;}


/***************************************************
 * Main - Main Visual
 * 
***************************************************/
#main-visual{ height: 700px; text-align: center;}
#main-visual .visual-title{ padding-top: 100px;}
#main-visual .visual-title h1{ font-size: 60px; font-weight: 500; line-height: 80px; color: #4a5c24; letter-spacing: -4px; text-align: center;}
#main-visual .visual-title h1 .point{ font-weight: 700;}

#main-visual .visual-arrow{ padding-top: 265px;}


/***************************************************
 * Main - What is illite
 * 
***************************************************/
#main-illite{ background-color: #fff;}
#main-illite .row-bg-wrap .row-bg{ background-size: auto 590px;}

.row .col .main-illite-box .wpb_wrapper{ display: flex; flex-direction: column; align-items: center; justify-content: center; height: 445px; padding: 0px 30px; border-radius: 10px; background-color: #c9b17a; text-align: center;}
.row .col .main-illite-box.bg--green .wpb_wrapper{ background-color: #a0a19e;}
.row .col .main-illite-box .wpb_wrapper h4{ padding-bottom: 10px; font-size: 26px; font-weight: 500; line-height: 36px; color: #fff;}
.row .col .main-illite-box .wpb_wrapper .desc{ font-size: 16px; font-weight: 500; line-height: 30px; color: #fff;}


/***************************************************
 * Main - Our Strengths
 * 
***************************************************/
.row .col .main-strengths-box{ padding-left: 100px;}
.row .col .main-strengths-box.left{ padding-left: 0px; padding-right: 100px;}
.row .col .main-strengths-box h3{ padding-bottom: 10px; font-size: 36px; font-weight: 500; line-height: 46px; color: #000;}
.row .col .main-strengths-box .desc{ font-size: 18px; font-weight: 500; line-height: 36px; color: #555;}


/***************************************************
 * Main - Our Value
 * 
***************************************************/
.row .col .main-value-info{ padding-bottom: 70px; text-align: center;}
.row .col .main-value-info h3{ padding-top: 30px; font-size: 21px; font-weight: 500; line-height: 40px; letter-spacing: -1px; color: #333;}


/***************************************************
 * Main - News
 * 
***************************************************/
.row .col #kboard-default-latest table{ border-bottom: 1px solid #e1e1e1;}
.row .col #kboard-default-latest table thead{ display: none;}
.row .col #kboard-default-latest table tr:nth-child(2n+1){ background-color: #fff;}
.row .col #kboard-default-latest table tr td{ padding: 40px 0px; border-top: 1px solid #e1e1e1;}
.row .col #kboard-default-latest table .kboard-latest-title{ padding-left: 0px;}
.row .col #kboard-default-latest table tr td a{  display: flex; align-items: center; gap: 10px; }
.row .col #kboard-default-latest table tr td .kboard-default-cut-strings{font-size: 20px; color: #777;}
.row .col #kboard-default-latest table tr td.kboard-latest-date{ padding-right: 30px; font-size: 20px; color: #777; box-sizing: content-box;}
.row .col .kboard-default-new-notify{ padding: 5px 5px; background-color: #664497;}


/***************************************************
 * Footer
 * 
***************************************************/
body #footer-outer .row{ padding: 90px 0px;}
body #footer-outer .row .footer-info{ text-align: center;}
body #footer-outer .row .footer-info h3{ padding-bottom: 20px; font-size: 32px; font-weight: 700; line-height: 42px; color: #fff;}
body #footer-outer .row .footer-info ul{ display: block;}
body #footer-outer .row .footer-info ul li{ padding: 0px; font-size: 16px; font-weight: 500; line-height: 36px; color: #fff;}
body #footer-outer .row .footer-info .copyright{ padding-top: 52px;}


/***************************************************
 * Responsive
 * 
***************************************************/
@media (max-width: 1600px) {
    .notebook--show{ display: block;}
    .notebook--hidden{ display: none;}
}

@media (max-width: 1200px) {
    .small-pc--show{ display: block;}
    .small-pc--hidden{ display: none;}

    .col-small-pc__100{ width: 100%;}    
}

@media only screen and (min-width: 1px) and (max-width: 999px){
    /* Header */
    body #header-outer{ padding: 20px 0px;}
}

@media (max-width: 768px) {
    .tablet--show{ display: block;}
    .tablet--hidden{ display: none;}

    .col-tablet__33{ float: left; width: 33.33%;}
    .col-tablet__50{ float: left; width: 50%;}
    .col-tablet__100{ width: 100%;}

    /* Main - 버튼 */
    .btn-default-wrap .wpb_wrapper{ padding-top: 10px;}
    .btn-default .btn-default-inner{ display: flex; align-items: center; justify-content: center; gap: 15px; padding: 15px 15px; border: 1px solid #000; border-radius: 10px; background-color: #fff; transition: all 300ms ease-in-out;}
    .btn-default .btn-default-inner img{ width: auto; height: 11px; margin-bottom: 0px;}
    .btn-default .btn-default-inner .txt{ font-size: 14px; font-weight: 500; line-height: 1; color: #000;}

    /* Main - 공통 */
    .row .col .main-section-title{ padding-bottom: 20px;}
    .row .col .main-section-title h3{ padding-bottom: 10px; font-size: 40px; line-height: 40px;}
    .row .col .main-section-title .small{ font-size: 16px; line-height: 30px;}

    /* Main - Visual */
    #main-visual{ height: 500px;}
    #main-visual .visual-title{ padding-top: 80px;}
    #main-visual .visual-title h1{ font-size: 40px; line-height: 60px; letter-spacing: -3px;}
    #main-visual .visual-arrow{ padding-top: 200px;}

    /* Main - What is illite */
    .row .col .main-illite-box .wpb_wrapper{ height: 400px;}
    .row .col .main-illite-box .wpb_wrapper h4{ font-size: 24px; line-height: 34px;}
    .row .col .main-illite-box .wpb_wrapper .desc{ font-size: 14px;}

    /* Main - Our Strengths */
    .row .col .main-strengths-box{ padding: 30px; padding-left: 10px; padding-right: 10px;}
    .row .col .main-strengths-box.left{ padding-left: 10px; padding-right: 10px;}
    .row .col .main-strengths-box h3{ padding-bottom: 10px; font-size: 28px; line-height: 38px;}
    .row .col .main-strengths-box .desc{ font-size: 16px;}

    /* Main - Our Value */
    .row .col .main-value-info{ padding-bottom: 30px;}

    /* Main - News*/
    .row .col #kboard-default-latest table tr td{ padding: 20px 0px;}
    .row .col #kboard-default-latest table .kboard-latest-title{ padding-left: 0px;}
    .row .col #kboard-default-latest table tr td .kboard-default-cut-strings{ width: 95%; font-size: 14px;}
    .row .col #kboard-default-latest table tr td.kboard-latest-date { padding-right: 0px; font-size: 14px;}

    /* Footer */
    body #footer-outer .row { padding: 60px 0px;}
    body #footer-outer .row .footer-info h3{ padding-bottom: 0px; font-size: 24px; font-weight: 700; line-height: 42px;}
    body #footer-outer .row .footer-info ul li{ font-size: 16px; line-height: 26px;}
    body #footer-outer .row .footer-info .copyright { padding-top: 20px;}
}

@media (max-width: 600px) {
    .mobile--show{ display: block;}
    .mobile--hidden{ display: none;}

    .col-mobile__33{ float: left; width: 33.33%; margin-bottom: 30px;}
    .col-mobile__50{ float: left; width: 50%;}
    .col-mobile__100{ width: 100%;}

    /* Main - Visual */
    #main-visual .visual-title h1{ font-size: 28px; line-height: 48px; letter-spacing: -3px;}
}