@charset "utf-8";

/* 폰트 불러오기 */
@font-face {
    font-family: 'Pretendard';
    src: url('../font/PretendardVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
}

/* 기본 폰트 적용 */
body {
    font-family: 'Pretendard', sans-serif;
    margin: 0;
    padding: 0;
}


.display_tablet_only, .displaynone {
    display: none !important;
}



:root {
    --bg-dark: #070d14; /* 배경 다크 네이비 */
    --point-blue: #3b89ce; /* 상품구매 등 파란색 */
}

body { background-color: #fff;  }
a { text-decoration: none; color: inherit; }
p, h1, h2, h3, h4, h5{margin:0;}
.inner { max-width: 1300px; margin: 0 auto; padding: 0 20px; }
.point_color { color: var(--point-blue) !important; }

/* =========================================
   Top Bar
========================================= */
.top_bar { background: #f1f1f1; color: #333; font-size: 16px; padding: 10px 0; }
.top_bar .inner { display: flex; justify-content: space-between; }

/* =========================================
   Header
========================================= */
#header { position: absolute; 
    top: 0; 
    left: 0;
    width: 100%; 
    z-index: 50; 
    border-bottom: 1px solid rgba(255,255,255,0.8);}
.header_inner { 
    max-width: 1300px; margin: 0 auto; padding: 20px 20px; 
    display: flex; justify-content: space-between; align-items: center; 
}
.logo img { height: 50px; vertical-align: middle; }

/* PC GNB */
.gnb { display: flex; gap: 50px; }
.gnb a { font-weight: 600; font-size: 20px; transition: color 0.3s; color:#fff;}
.btn_consult { 
    background: #fff; color: #000; padding: 8px 24px; 
    border-radius: 30px; font-weight: bold; font-size: 20px; 
}

/* Mobile GNB */
.gnb_mobile { display: flex; border-top: 1px solid rgba(255,255,255,0.8); }
.gnb_mobile a { 
    flex: 1; text-align: center; padding: 12px 0; 
    font-size: 14px;  color:#fff; 
}
.gnb_mobile a:last-child { border-right: none; }

.top_bg_wrap {
    position: relative; /* header absolute의 기준점 */
    background: linear-gradient(to bottom, #000000, #0d1a28);
}

/* =========================================
   Main Visual
========================================= */
#visual { text-align: center; padding: 175px 20px 100px; }
.visual_txt{color:#fff;}
.visual_txt h2 { font-size: 55px; font-weight: 300; margin-bottom: 20px; }
.visual_txt h2 strong { font-weight: 700; }
.visual_txt p { font-size: 40px; font-weight: 600; line-height: 1.5; margin-bottom: 50px; }

.visual_img img { max-width: 100%; height: auto; }

.btn_buy_direct { 
    display: inline-flex; align-items: center; gap: 70px;
    background: #fff; color: #000; padding: 10px 20px; 
    border-radius: 40px; font-size:22px; font-weight: 600; 
    margin-top: 70px; transition: 0.3s;
}
.btn_buy_direct:hover { background: #eee; }

/* =========================================
   Quick Bar (우측 하단 고정)
========================================= */
.quick_bar { 
    position: fixed; bottom: 40px; right: 40px; 
    background: #fff; border-radius: 12px; padding: 15px 10px; 
    display: flex; flex-direction: column; gap: 25px; 
    z-index: 100; box-shadow: 0 10px 20px rgba(0,0,0,0.5);    align-items: center; text-align: center;
}
.quick_bar img { width: 50px; height: auto; display: block; margin: auto;}
.quick_bar span{color:#000;font-size: 14px;
    line-height: 1.1;
    display: block;
    margin: 10px 0 0 0;}

 

#section_intro { background: #f9f9f9; padding: 120px 0; color: #222; }
.intro_wrap { display: flex; justify-content: space-between; align-items: center; gap: 50px; }

.intro_txt .sec_label { display: block; color: var(--point-blue); font-weight: 700; font-size: 20px; margin-bottom: 20px; }
.intro_txt h3 { font-size: 55px; font-weight: 700; margin-bottom: 15px; letter-spacing: -1px; }
.intro_txt .sub_tit { font-size: 30px; font-weight:600; line-height: 1.5; margin-bottom: 40px; word-break: keep-all; }
.intro_txt .desc { font-size: 22px; line-height: 1.7; color: #444; word-break: keep-all; }

.intro_logos { display: flex; flex-direction: column; gap: 40px; align-items: flex-end; }
.intro_logos img { max-width: 435px; height: auto; }


#section_service { background: #fff; padding: 120px 0; text-align: center; color: #222; }

.service_txt .sec_label { display: block; color: var(--point-blue); font-weight: 700; font-size: 20px; margin-bottom: 20px; }
.service_txt h3 { font-size: 55px; font-weight: 700; margin-bottom: 40px; letter-spacing: -1px; }
.service_txt .desc { font-size: 22px; line-height: 1.8; color: #444; word-break: keep-all; margin-bottom: 60px; }

/* 영상 영역 (PC) */
.video_wrap { display: flex; justify-content: center; gap: 30px; margin-bottom: 50px; }
.video_item { 
    flex: 1; max-width: 340px; aspect-ratio: 9 / 16; 
    background: #000; border-radius: 20px; overflow: hidden; 
}
.video_item iframe { width: 100%; height: 100%; border: none; }

/* SNS 링크 버튼 */
.sns_btns { display: flex; justify-content: center; gap: 15px; }
.btn_sns { 
    display: flex; align-items: center; justify-content: center; gap: 8px; 
    border: 1px solid #ccc; padding: 12px 24px; font-size: 18px; font-weight: 600; 
    color: #222; background: #fff; transition: 0.3s; 
}
.btn_sns:hover { background: #f9f9f9; border-color: #999; }
.btn_sns img { width: 24px;  }


#section_service2 { background: #fff; padding: 0 0 120px; color: #222; }
#section_service2 .inner { display: flex; flex-direction: column; gap: 40px; }

.product_item { display: flex; }
.prod_txt { flex: 1; background: #f6f6f6; padding: 60px 80px; position: relative; }
.prod_img { flex: 1; background: #ebebeb; padding: 60px; display: flex; align-items: center; justify-content: center; position: relative; }
.prod_img img { max-width: 100%; height: auto; }

.prod_txt h3 { font-size: 50px; font-weight: 700; letter-spacing: -1px; margin-bottom: 5px; }
.prod_txt .eng { font-size: 22px; color: #b4b4b4; margin-bottom: 40px; }
.prod_txt h4 { font-size: 35px; font-weight: 700; margin-bottom: 15px; }
.prod_txt .desc { font-size: 20px; line-height: 1.6; color: #555; margin-bottom: 30px; word-break: keep-all; }

.feat_list { list-style: none; padding: 0; margin: 0; }
.feat_list li { 
    background: #fff; padding: 14px 20px; margin-bottom: 10px; 
    font-size: 18px; font-weight: 600; color: #333; max-width: 320px; 
}

/* 동그란 스마트스토어 버튼 */
.btn_store { 
    position: absolute; bottom: 40px; right: 40px; 
    width: 140px; height: 140px; background: #fff; border-radius: 50%; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;  gap:5px;
    text-align: center; font-size: 16px; font-weight: 600; color: #19be41; 
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); transition: 0.3s;
}
.btn_store:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
.btn_store img { width: 28px; margin-bottom: 5px; }

#section_value { padding: 0 0 120px 0; background: #fff; color: #222; }
.value_wrap { display: flex; justify-content: space-between; align-items: center; gap: 50px;     text-align: center;}

.value_txt { flex: 1; }
.value_txt .sec_label { display: block; color: var(--point-blue); font-weight: 700; font-size: 20px; margin-bottom: 20px; }
.value_txt h3 { font-size: 50px; font-weight: 700; line-height: 1.3; margin-bottom: 40px; letter-spacing: -1px; }
.value_txt .desc { font-size: 20px; line-height: 1.8; color: #444; margin-bottom: 20px; word-break: keep-all; }

.value_img { flex: 1; text-align: right; }
.value_img img { max-width: 100%; height: auto; }

#section_value2 { background: var(--bg-dark); padding: 120px 0; }
.value2_list { display: flex; gap: 30px; }

.value2_item { 
    flex: 1; background: #fff; border-radius: 24px; 
    padding: 30px 35px; color: #222; display: flex;
    flex-direction: column; gap:10px;
}
.value2_item h4 { font-size: 40px; font-weight: 700; margin-bottom: 0px; letter-spacing: -1px; }
.value2_item .eng { display: block; color: var(--point-blue); font-size: 20px;  margin-bottom: 40px; }
.value2_item p { font-size: 20px; line-height: 1.6; font-weight: 500; color: #111; margin: auto 0 0 0; word-break: keep-all; }


#section_value3 { background: #fff; padding: 120px 0; color: #222; }

/* 상단 텍스트 및 버튼 */
.value3_top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 50px; }
.value3_txt .sec_label { display: block; color: var(--point-blue); font-weight: 700; font-size: 20px; margin-bottom: 20px; }
.value3_txt h3 { font-size: 50px; font-weight: 700; margin-bottom: 20px; letter-spacing: -1px; }
.value3_txt .desc { font-size: 20px; line-height: 1.6; color: #444; word-break: keep-all; }

/* 우측 후기 더보기 버튼들 */
.value3_btns { display: flex; flex-direction: column; gap: 10px; }
.btn_review { 
    display: flex; align-items: center; gap: 15px; 
    border: 1px solid #ddd; padding: 12px 20px; 
    font-size: 16px; font-weight: 600; color: #222; background: #fff; 
    min-width: 125px; justify-content: flex-start; transition: 0.3s;
}
.btn_review:hover { background: #f9f9f9; border-color: #999; }
.btn_review img { width: 24px; }

/* 하단 이미지 영역 */
.value3_imgs { display: flex; gap: 30px; }
.value3_imgs .img_left { flex: 1.5; } /* 좌측 이미지를 1.5 비율로 더 넓게 */
.value3_imgs .img_right { flex: 1; } /* 우측 이미지는 1 비율 */

.value3_imgs img { width: 100%; height: auto; display: block; border-radius: 12px; }

#footer { background: #fff; color: #222; }

/* 상담 배너 */
.cs_banner { background: #3b89ce; color: #fff; padding: 20px 0; }
.cs_banner .inner { display: flex; justify-content: space-between; align-items: center; }
.cs_title { font-size: 30px; font-weight: 600; margin: 0; }
.cs_info { display: flex; align-items: center; gap: 15px; }
.cs_info strong { font-size: 38px; font-weight: 700; letter-spacing: -1px; }
.cs_info span { font-size: 20px; font-weight: 600; }

/* 회사 정보 */
.footer_info { padding: 40px 0; }
.company_name { font-size: 16px; font-weight: 700; margin-bottom: 8px; }
.company_detail { font-size: 16px; line-height: 1.8; color: #333; margin: 0; }
.company_detail .gap { display: inline-block; width: 15px; }



@media screen and (min-width: 1025px) {
    .value2_item p{min-height:96px;}
}

/* 태블릿 및 모바일 화면 (1024px 이하) */
@media screen and (max-width: 1024px) {
    .display_pc_only {
        display: none !important;
    }
    
    .display_tablet_only {
        display: block !important; /* 요소에 따라 flex나 inline-block으로 수정해 사용하세요 */
    }
    
    .top_bar{font-size:14px;}
    .logo img { height: 35px;}
    .btn_consult{font-size:15px;}
    
    .gnb_mobile{display:flex !important;padding: 0 20px;}
    
    #visual { padding: 170px 20px 50px 20px; }
    .visual_txt h2 { font-size: 26px; }
    .visual_txt p { font-size: 26px; margin-bottom: 30px; }
    .btn_buy_direct {         font-size: 18px;  padding: 12px 30px;  margin-top: 40px;  gap: 30px; }
    #visual .visual_img{width:80%; margin:auto;}
    
    #section_intro { padding: 80px 0; }
    .intro_wrap { flex-direction: column; text-align: center; }
    
    .intro_txt h3 { font-size: 32px; margin-bottom: 20px; }
    .intro_txt .sub_tit { font-size: 18px; margin-bottom: 30px; }
    .intro_txt .desc { font-size: 16px; }
    
    .intro_txt .sec_label{font-size:18px;}
    
    .intro_logos { margin-top: 40px; align-items: center; gap: 30px; }
    .intro_logos img { max-width: 250px; }
    
    #section_service { padding: 80px 0; }
    .service_txt h3 { font-size: 32px; }
    .service_txt .desc { font-size: 17px; margin-bottom: 40px; }
    
    .service_txt .sec_label{font-size:18px;}

    /* 영상 영역 (모바일 가로 스크롤) */
    .video_wrap { 
        justify-content: flex-start; overflow-x: auto; 
        padding-bottom: 20px; scroll-snap-type: x mandatory; 
        -webkit-overflow-scrolling: touch;  gap:15px;
    }
    .video_wrap::-webkit-scrollbar { display: none; } /* 스크롤바 숨김 */
    
    .video_item { 
        flex: 0 0 85%; max-width: none; 
        scroll-snap-align: center; /* 스크롤 시 중앙 정렬 */
    }

    /* SNS 링크 버튼 (모바일) */
    .sns_btns { gap: 10px; }
    .btn_sns { flex: 1; padding: 10px; font-size: 13px; }
    .btn_sns img { width: 20px; height: 20px; }
    
    #section_service2 { padding: 0 0 80px; }
    
    .product_item { flex-direction: column; }
    .prod_txt { padding: 50px 20px; text-align: center; }
    .prod_img { padding: 0 20px 50px 20px; min-height: 350px;background: #f6f6f6; }
    .prod_img img{        width: 55%;}
    
    .prod_img .btn_store{display:flex !important;}
    
    .prod_txt h3 { font-size: 34px; }
    .prod_txt h4 { font-size: 24px; }
    
    .feat_list li { margin: 0 auto 10px; max-width: 100%; text-align: center; }
    
    /* 모바일에서는 버튼이 우측 하단에 고정 */
    .btn_store { bottom: 20px; right: 20px; width: 90px; height: 90px; font-size: 11px; }
    .btn_store img { width: 22px; }
    
    
    #section_service2 .inner{padding:0;}
    
    #section_value { padding: 80px 0; }
    .value_wrap { flex-direction: column; text-align: center; gap: 50px; }
    
    .value_txt .sec_label{font-size:18px;}
    .value_txt h3 { font-size: 32px; margin-bottom: 30px; }
    .value_txt .desc { font-size: 17px; margin-bottom: 15px; }
    
    .value_img { text-align: center; }
    
    #section_value2 { padding: 60px 0; }
    .value2_list { flex-direction: column; gap: 20px; }
    
    .value2_item { padding: 20px 25px; }
    .value2_item h4 { font-size: 28px; margin-bottom: 5px; }
    .value2_item .eng { font-size: 14px; margin-bottom: 20px; }
    .value2_item p { font-size: 18px; }
    
    #section_value3 { padding: 80px 0; }
    
    .value3_top { flex-direction: column; text-align: center; align-items: center; margin-bottom: 40px; }
    .value3_txt .sec_label{font-size:18px;}
    .value3_txt h3 { font-size: 32px; margin-bottom: 20px; }
    .value3_txt .desc { font-size: 17px; }
    
    /* 모바일에서는 위아래로 떨어지게 처리 */
    .value3_imgs { flex-direction: column; gap: 20px; }
    
    .cs_banner { padding: 30px 0; }
    .cs_banner .inner { flex-direction: column; align-items: flex-start; gap: 10px; }
    .cs_title { font-size: 22px; }
    .cs_info { align-items: baseline; gap: 10px; }
    .cs_info strong { font-size: 30px; }
    .cs_info span { font-size: 14px; }
    
    /* 회사 정보 모바일 레이아웃 */
    .footer_info { padding: 30px 0 50px; }
    .company_detail { font-size: 13px; word-break: keep-all; }
}