@charset "utf-8";
@import url('https://fonts.googleapis.com/earlyaccess/notosanskr.css'); 
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
/* 초기화 */
html {overflow-y:scroll;height:100%;min-width:320px}
body {margin:0;padding:0;font-size:0.813em;height:100%;font-family:'Pretendard', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
legend {position:absolute;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
input, button {margin:0;padding:0;font-size:1em;font-family:'Pretendard', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;}
button, input[type=submit] {cursor:pointer}
input[type=text], input[type=password], input[type=image], button {font-size:1em;-webkit-appearance:none}
textarea, select,button {font-size:1em;font-family:'Pretendard', AppleSDGothicNeo-Regular,'Malgun Gothic','맑은 고딕',dotum,'돋움',sans-serif;}
textarea {border-radius:0;-webkit-appearance:none}
select {margin:0;background:none}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
ul,li,dl,dt,dd{padding:0;margin:0}
ul{list-style:none;}
img{vertical-align:top;max-width:100%;height:auto}

*, :after, :before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
:root {
    --primary-color: #1E3A8A;
    --secondary-color: #1F61FF;
    --bg-color: #FFFFFF;
    --text-color: #111;
    --text-muted: #6B7280;
    --border-color: #E5E7EB;
    --btn-primary-bg: var(--primary-color);
    --btn-primary-text: #FFFFFF;
    --btn-secondary-bg: var(--secondary-color);
    --btn-secondary-text: #FFFFFF;
}


/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;width:100%;height:0px}
#hd_pop h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops img{max-width:100%;height:auto}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}

/* 상단 레이아웃 전체 교체본 */
#hd {
    position: absolute !important; 
    top: 0 !important; 
    left: 0 !important; 
    width: 100% !important; 
    background: rgba(255, 255, 255, 0.55) !important; 
    background-color: rgba(255, 255, 255, 0.55) !important;
    backdrop-filter: blur(10px) !important; 
    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important; 
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.02) !important; 
    z-index: 1000 !important;
    transition: all 0.3s ease;
}
#hd.fixed {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    animation: fadeInDown 0.3s ease-in-out; 
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
/* 반투명 흰색 막 위이므로 로고, 메뉴, 아이콘 글씨는 원래대로 진한 검정/회색 유지 */
#hd ul.cate > li > a { color: var(--text-color) !important; }
#hd_btn button, #hd_btn a { color: var(--text-color) !important; }
.btn_login .btn_user_icon { color: var(--text-color) !important; }
.btn_login a.btn_user_icon span{display: none;}
#hd h1 {position:absolute; font-size:0; text-indent:-9999em; line-height:0; overflow:hidden}

/* 1. 헤더 래퍼: Flexbox를 이용한 좌, 중, 우 정렬 (시안 반영) */
#hd_wr {margin:0 auto; max-width:1600px; padding:0 20px; position:relative; display:flex; justify-content:space-between; align-items:center; height:90px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
transition: all 0.30s ease-in-out;}

/* 2. 로고 (좌측) */
#logo {flex-shrink:0;}
#logo img {vertical-align:middle; height:40px; width:auto;}

/* 3. 카테고리 GNB (중앙) */
.menu {flex-grow:1; display:flex; justify-content:center; align-items:center;}
.menu_wr h2 {position:absolute; font-size:0; text-indent:-9999em; line-height:0; overflow:hidden}

/* 4. 우측 유틸리티 (우측) - 언어 선택 제외, 로그인/검색/장바구니 렌더링 */
#hd_btn {display:flex; align-items:center; gap:20px; flex-shrink:0;}
#hd_btn button, #hd_btn a {background:none; border:0; color:var(--text-color); font-size:20px; cursor:pointer; display:flex; align-items:center; text-decoration:none;}
#btn_cartop {position:relative;}
#btn_cartop .cart-count {position:absolute; top:-6px; right:-10px; background:var(--secondary-color); border-radius:50%; font-size:11px; font-weight:bold; color:#fff; width:18px; height:18px; display:flex; justify-content:center; align-items:center;}
#hd_btn #btn_sch{display: none;}

/* 우측 유틸 - 로그인/사용자정보 */
.btn_login {display:flex; align-items:center; gap:15px; margin-right:10px; font-size:14px; color:var(--text-muted);}
.btn_login .btn_ol {background:none; border:0; display:flex; align-items:center; cursor:pointer; color:var(--text-muted); text-decoration:none;}
.btn_login .btn_ol img {width:28px; height:28px; border-radius:50%; margin-right:8px;}
.btn_login {color:var(--text-muted); text-decoration:none;}

/* 5. 검색창 팝업 (기존 구조 유지) */
#hd_sch {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:9999; text-align:center;}
.hd_sch_wr {position:absolute; top:50%; left:50%; width:80%; transform:translate(-50%, -50%);}
#hd_sch h2 {position:absolute; font-size:0; text-indent:-9999em; line-height:0; overflow:hidden}
#hd_sch .sch_inner {position:relative; max-width:600px; margin:0 auto;}
#hd_sch #sch_str {background:transparent; border:0; border-bottom:2px solid #fff; color:#fff; width:100%; height:50px; padding-left:10px; font-size:18px; outline:none}
#hd_sch .sch_submit {position:absolute; top:0; right:0; height:50px; border:0; cursor:pointer; background:transparent; color:#fff; width:50px; font-size:20px;}
#hd_sch .btn_close {position:absolute; top:20px; right:20px; width:50px; height:50px; background:none; color:#fff; border:0; font-size:30px; opacity:0.5; cursor:pointer;}
#hd_sch .btn_close:hover {opacity:1}
#ppl_word {display:none;} 

/* 관리자 버튼 */
.hd_admin {
    position: fixed !important;
    bottom: 30px !important;
    left: 30px !important;
    top: auto !important;
    right: auto !important;
    z-index: 99999 !important;
}

.hd_admin a {
    padding: 0 20px;
    display: inline-block;
    line-height: 40px;
    background: #d12323;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); 
}

.hd_admin a:hover {
    background: #ff0000;
}


/* ================================================================
   1. PC 해상도 (1025px 이상)
================================================================= */
@media (min-width: 1025px){
    #btn_cate {display:none !important;} 
    .menu .menu_close {display:none !important;}
    .menu { position: relative; }
    ul.cate {display:flex; justify-content:center; gap:100px; margin:0; padding:0;}
    ul.cate > li {position:relative; list-style:none;}
    ul.cate > li > a {
        display:block; 
        font-size:18px; 
        font-weight:700; 
        color:var(--text-color); 
        padding:33px 0; 
        text-transform:uppercase; 
        text-decoration:none;
        letter-spacing: 0.5px;
    }
    ul.cate::before {
        content: ''; position: fixed; top: 90px; left: 0; width: 100%; height: 0;
        background: #ffffff; border-bottom: 1px solid #e5e5e5;
        box-shadow: 0 10px 20px rgba(0,0,0,0.05);
        transition: all 0.3s ease; opacity: 0; visibility: hidden; z-index: -1; 
    }
    ul.cate:hover::before { height: 340px; opacity: 1; visibility: visible; }
    ul.sub_cate {
        position: absolute; top: 90px; left: 50%; transform: translateX(-50%);
        width: 206px; padding: 20px 0; background: transparent; 
        border: none; box-shadow: none; opacity: 0; visibility: hidden;
        transition: opacity 0.3s ease 0.1s; 
    }
    ul.cate:hover .sub_cate { opacity: 1; visibility: visible; }
    ul.sub_cate li {list-style:none; text-align:center;}
    ul.sub_cate li a {
        display:block; padding:12px 15px; font-size:16px; color:var(--text-muted); text-decoration:none;
    }
    ul.sub_cate li a:hover {color:var(--text-color); font-weight:600;}
    .sub_ct_toggle {display:none !important;}
    .btn_login {
        position: absolute; right: 20px; top: 50%; transform: translateY(-50%); 
        margin: 0; z-index: 1001; 
    }
    .btn_login .btn_user_icon { display: block; font-size: 20px; color: var(--text-color); text-decoration: none; }
    .btn_login .btn_user_icon:hover { color: var(--text-muted); }
}

/* ================================================================
   2. PC 좁은 해상도 (1025px ~ 1440px) - 메뉴 깨짐 완벽 방지
================================================================= */
@media (min-width: 1025px) and (max-width: 1440px) {
    ul.cate { gap: 20px !important; }
    ul.cate > li > a { font-size: 15px !important; letter-spacing: 0; padding: 35px 0 !important; }
    ul.sub_cate { width: 140px !important; }
    ul.sub_cate li a { font-size: 14px !important; padding: 10px; }
}
/* ================================================================
   3. 태블릿 & 모바일 해상도 (1024px 이하) - LEVELON 테크 스타일
================================================================= */
@media (max-width: 1024px){
    #hd_wr {padding:0 20px; height:64px; background:#ffffff;}
    #logo img {height:32px;}
    
    #hd_btn {
        position: absolute !important; 
        top: 50% !important; 
        transform: translateY(-50%) !important; 
        right: 20px !important; 
        display: flex !important; 
        align-items: center !important; 
        gap: 20px !important; 
        margin: 0 !important;
    }
    
    #hd_btn button, #hd_btn a {
        position: relative !important; 
        display: flex !important; 
        align-items: center !important;
        justify-content: center !important;
        font-size: 22px !important; 
        color: #1e293b !important;
        background: none !important;
        border: 0 !important;
        padding: 0 !important;
        width: auto !important;
        height: auto !important;
    }
    
    #hd_btn #btn_sch { display: none !important; }

    #btn_sch { order: 1 !important; }     
    #btn_cartop { order: 2 !important; }  
    #btn_cate { order: 3 !important; }    

    .menu {
        display: none; 
        overflow-y: auto; 
        position: fixed; 
        top: 0; left: 0; 
        height: 100vh; 
        min-height: 100%; 
        width: 320px; 
        background: #ffffff; 
        z-index: 99999; 
        text-align: left; 
        box-shadow: 10px 0 30px rgba(0, 0, 0, 0.08);
    }
    
    /* 메뉴 닫기 X 버튼 */
    .menu .menu_close {
        position: absolute; 
        top: 16px; right: 16px; 
        width: 40px; height: 40px; 
        background: #f8fafc; color: #1e293b; 
        font-size: 20px; border: 1px solid #e2e8f0; 
        border-radius: 8px; cursor: pointer; z-index: 10;
        display: flex; align-items: center; justify-content: center;
    }
    
    .btn_login {
        padding: 24px 20px; 
        background: #f8fafc; 
        border-bottom: 1px solid #e2e8f0; 
        margin-bottom: 0;
		margin-right: 0;
    }
    
    .btn_login a.btn_user_icon {
        font-size: 15px; 
        color: #1e293b; 
        display: flex; 
        align-items: center; 
        gap: 12px; 
        text-decoration: none; 
        font-weight: 600;
    }
	.btn_login a.btn_user_icon span{display: block;}
    .btn_login a.btn_user_icon i {
        font-size: 18px;
        color: var(--primary-color, #1E3A8A);
        background: #eff6ff;
        width: 36px; height: 36px;
        border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
    }
    
    .menu_wr { width: 100%; display: block; }
    ul.cate { display: block; padding: 0; margin: 0; list-style: none; }
    ul.cate > li { border-bottom: 1px solid #f1f5f9; position: relative; }
    
    ul.cate > li > a { 
        display: block; 
        padding: 18px 20px; 
        font-size: 15px; 
        color: #1e293b; 
        font-weight: 600; 
        text-decoration: none; 
        transition: background 0.15s;
    }
    
    ul.cate > li > a:hover {
        background: #f8fafc;
        color: var(--secondary-color, #1F61FF);
    }
    ul.cate > li > a { 
        display: flex; 
        justify-content: space-between; 
        align-items: center;
        padding: 18px 20px; 
        font-size: 15px; 
        color: #1e293b; 
        font-weight: 600; 
        text-decoration: none; 
        transition: background 0.15s;
    }
    ul.cate > li > a::after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-right: 2px solid #94a3b8;
        border-bottom: 2px solid #94a3b8;
        transform: rotate(45deg); 
        transition: transform 0.2s ease, border-color 0.2s ease;
        margin-right: 4px;
    }

    ul.cate > li.menu-open > a::after {
        transform: rotate(-135deg);
        border-color: var(--primary-color, #1E3A8A);
    }
    ul.sub_cate { display: none; background: #f8fafc; list-style: none; padding: 0; margin: 0; }
    ul.sub_cate li { border-bottom: 1px solid #f1f5f9; }
    ul.sub_cate li:last-child { border-bottom: none; }
    
    ul.sub_cate li a { 
        display: block; 
        padding: 14px 20px 14px 36px; 
        font-size: 14px; 
        color: #64748b; 
        text-decoration: none; 
    }
    
    ul.sub_cate li a:hover { 
        color: var(--primary-color, #1E3A8A); 
        background: #f1f5f9; 
    }
    
    .sub_ct_toggle { 
        position: absolute; 
        top: 0; right: 0; 
        width: 60px; height: 56px; 
        background: transparent; 
        border: 0; color: #94a3b8; 
        font-size: 16px; 
        cursor: pointer; 
    }
}
/* ================================================================
   LEVELON 표준 버튼 시스템 클래스 (.btn_style1, 2, 3)
================================================================= */

.btn_style1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 32px; 
    font-size: 15px;     
    font-weight: 600;
    color: #ffffff;
    background: var(--primary-color, #1E3A8A);
    border: 1px solid var(--primary-color, #1E3A8A);
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(30, 58, 138, 0.15);
    min-width: 110px; 
}
.btn_style1:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
    box-shadow: 0 6px 16px rgba(30, 58, 138, 0.25);
}

.btn_style2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #475569;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 110px;
}
.btn_style2:hover {
    background: #f8fafc;
    color: #1e293b;
    border-color: #94a3b8;
}

.btn_style3 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 28px;
    font-size: 15px;
    font-weight: 600;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fee2e2;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
    min-width: 110px;
}
.btn_style3:hover {
    background: #dc2626;
    color: #ffffff;
    border-color: #dc2626;
}
/* ================================================================
   LEVELON 표준 버튼 시스템 - 모바일/태블릿 반응형 (1024px 이하)
================================================================= */
@media (max-width: 1024px) {
    .btn_style1, 
    .btn_style2, 
    .btn_style3 {
        padding: 10px 20px; 
        font-size: 14px; 
        min-width: 80px; 
        height: 44px;
        box-sizing: border-box; 
    }
}
/* 중간 레이아웃 */
#container {margin: 0}
#container_title {margin:0 auto;max-width:1600px;padding:40px 20px 20px;text-align:center;font-size:42px; }
.idx_c{margin:0 auto;max-width:1200px;}
.idx_c:after {display:block;visibility:hidden;clear:both;content:""}

.box{background:#fff;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.07);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.07);
box-shadow: 0 2px 5px rgba(0,0,0,0.07)}

.container, .cart-container, .view-container{margin:140px auto 100px !important;max-width:1600px; padding: 0 20px; min-height: 600px;}
#container.idx-container{padding: 0 }
.view-container #container_title{display:none}

@media (max-width: 1024px){
    #container {margin-top:55px}
   .container, .cart-container{margin:85px auto 30px !important; min-height:auto;} 
    #container_title{font-size:28px;padding:20px}
}

/*메인*/
#idx_tab{padding-left:220px; position:relative;}
#idx_tab h2{display:none}
#idx_tab .tabs{position:absolute;top:0;left:0}
#idx_tab .tabs li{display: block; font-size:1.154em;margin: 0 0 15px;font-weight:500; line-height: 24px;color: #717989; text-align: left;cursor:pointer}
#idx_tab .tabs .current{color: var(--secondary-color);position: relative;text-decoration: underline;}
#idx_tab .sct_wrap{display:none}
#idx_tab .sct_wrap.current{display: block; }

#idx_review{background:#f8f9fa;text-align:center;padding:100px 0}
#idx_review h2{ text-align: center; font-size: 1.846em;margin: 0 0 20px;}
.review{max-width:1200px;margin:0 auto;}
.review .rv_li{margin:20px;background:#fff;opacity:0.5; position:relative;padding:40px;text-align:left;
-webkit-box-shadow:  0 1px 2px rgba(0, 0, 0, .1);
-moz-box-shadow:  0 1px 2px rgba(0, 0, 0, .1);
box-shadow:  0 1px 2px rgba(0, 0, 0, .1);}
.review .rv_li:hover {
-webkit-box-shadow:0 5px 10px rgba(0, 0, 0, .15);
-moz-box-shadow:0 5px 10px rgba(0, 0, 0, .15);
box-shadow:0 5px 10px rgba(0, 0, 0, .15);}
.review .slick-active{opacity:1}
.review .rv_hd{position:relative;padding-left:70px;line-height:25px;margin-bottom:20px}
.review .prd_img{position:absolute;top:0;left:0;}
.review .prd_img img{border-radius:50px}
.review .rv_tit{display:block;font-size:1.077em;font-weight:600}
.review .rv_prd{color:#717989}          
.review p{line-height:1.7em;min-height:80px}


 @media (max-width:1024px){
    #idx_tab{padding:10px}
    #idx_tab .tabs{position:relative}
    #idx_tab .tabs{position:relative;width:100%;margin-bottom:20px;text-align:center}
    #idx_tab .tabs li{display:inline-block;margin:0 10px 10px}
    #idx_tab .sct_wrap {margin:10px 0}
}

 @media (max-width:639px){
     #idx_review{padding:80px 0}
     .review .rv_li{margin:8px}
 }

/* 내용관리 */
#ctt {margin:10px 0;padding:10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.ctt_admin {margin:0 5px;text-align:right}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0}
.ctt_img {text-align:center}

/* 하단 레이아웃 */
/* ==================================================
   LEVELON Premium Footer
================================================== */
.levelon_footer {
    background-color: #151A24; 
    padding: 80px 0 60px;
    color: #8892A0; 
    font-size: 15px;
    line-height: 1.6;
    border-top: 1px solid #2A3441;
}

.levelon_footer .inner_wrap {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

.levelon_footer .flex_between {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

/* 좌측 영역 (로고 & CS) */
.levelon_footer .ft_left {
    width: 30%;
    min-width: 280px;
}

.levelon_footer .footer_logo {
    color: #FFFFFF;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 40px;
}

.levelon_footer .cs_box .cs_title {
    font-size: 13px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 5px;
}

.levelon_footer .cs_box .cs_tel {
    display: block;
    font-size: 32px;
    font-weight: 700;
    color: #FFFFFF;
    margin-bottom: 15px;
    letter-spacing: -0.5px;
}

.levelon_footer .cs_box .cs_time {
    font-size: 14px;
    line-height: 1.8;
}

/* 우측 영역 (정보 & 링크) */
.levelon_footer .ft_right {
    width: 65%;
}

.levelon_footer .ft_links {
    display: flex;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.levelon_footer .ft_links a {
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 500;
}

.levelon_footer .ft_links .privacy_text {
    font-weight: 700;
    color: var(--secondary-color)
}

.levelon_footer .ft_info p {
    margin: 0 0 40px 0;
    line-height: 1.8;
}

.levelon_footer .ft_info span {
    display: inline-block;
    margin-right: 20px;
}

.levelon_footer .ft_bottom {
    align-items: center;
    border-top: 1px solid #2A3441;
    padding-top: 30px;
}

.footer_sns {
    display: flex;
    align-items: center;
    gap: 20px; 
}

.footer_sns a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s ease; 
}

.footer_sns a img {
    width: 28px;  
    height: 28px; 
    object-fit: contain; 
    vertical-align: middle;
}


.footer_sns a:hover {
    opacity: 0.6;
}

#ft_to_top {
    position: fixed;
    bottom: 40px; 
    right: 40px;
    width: 52px;
    height: 52px;
    background: #1A2849;
    color: #ffffff;
    border-radius: 50%;
    z-index: 999;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 
        0 4px 6px rgba(0, 0, 0, 0.1), 
        0 10px 15px rgba(26, 40, 73, 0.2); 

    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

#ft_to_top:hover {
    background: #233661;
    transform: translateY(-6px);

    box-shadow: 
        0 8px 12px rgba(0, 0, 0, 0.1), 
        0 16px 24px rgba(26, 40, 73, 0.3); 
}

/* 반응형 처리 */
@media (max-width: 1024px) {
    .levelon_footer {
        padding: 50px 0 40px;
    }
    .levelon_footer .ft_left,
    .levelon_footer .ft_right {
        width: 100%;
    }
    .levelon_footer .ft_right {
        margin-top: 30px;
    }
    .levelon_footer .footer_logo {
        font-size: 24px;
        margin-bottom: 20px;
    }
    .levelon_footer .cs_box .cs_tel {
        font-size: 26px;
    }
    .levelon_footer .ft_links {
        gap: 15px;
        flex-wrap: wrap;
        margin-bottom: 20px;
        font-size: 14px;
    }
    .levelon_footer .ft_info p {
        margin-bottom: 25px;
        font-size: 14px;
    }
    .levelon_footer .ft_info span {
        display: block;
        margin-right: 0;
        margin-bottom: 6px;
    }
    .levelon_footer .ft_bottom {
        padding-top: 20px;
        flex-direction: column;
        gap: 15px;
        text-align: left;
		font-size:14px;
    }
    #ft_to_top {
        bottom: 20px; 
        right: 20px;
        width: 44px;
        height: 44px;
    }
}
/* 목록 바로가기 */
.sanchor {margin:0 0 5px;padding:0}
.sanchor:after {display:block;visibility:hidden;clear:both;content:""}
.sanchor li {float:left;list-style:none;width:25%;border-top:2px solid #000;text-align:center;  overflow: hidden;  white-space: nowrap;letter-spacing:0.2em;font-size:0.93em}
.sanchor a {display:block;padding:10px;border-left:1px solid #ededed;border-bottom:1px solid #ededed;background:#fcfcfc;text-decoration:none;color:#484848}
.sanchor a:focus, .sanchor a:hover {background:#eee;text-decoration:none}
.sanchor a.sanchor_on {background:#fff;text-decoration:none;border-bottom:1px solid #fff;}

/* ####### 쇼핑몰 컨텐츠 ####### */

.st_bg{display: inline-block;width: 1px;height: 10px;margin: 0 10px;background: #e2e1e0;vertical-align: -1px;}
#listtype{margin:10px;}

#sod_chk {padding:15px 15px 0;}
.sod_list {padding:10px 0;}
.sod_list .sod_li {background:#fff;border: 1px solid #e7e8ef;margin:10px 0;}
.sod_list .li_name{line-height:1.3em;padding: 10px 10px;font-size:1.083em}
.sod_list .li_op_wr{position:relative;margin:10px;padding-left:90px;min-height:80px}
.sod_list .total_img{position:absolute;top:0;left:0}
.sod_list .mod_options{padding: 0 7px;border: 1px solid #38b2b9;color: #38b2b9;background: #fff;height: 23px;line-height: 21px;margin: 5px 0 0;}
.sod_list .li_prqty{margin:10px 10px ;border-top:1px solid #dcdcdc;padding:10px 0 0}
.sod_list .li_prqty:after {display:block;visibility:hidden;clear:both;content:''}
.sod_list .li_prqty_sp{float:left;width:50%;display:block;line-height:20px;padding:0 7px;text-align :right;}
.sod_list .li_prqty_sp span{float:left}
.sod_list .prqty_sc,.sod_list .prqty_price{border-right:1px solid #dcdcdc}
.sod_list .total_price{background:#f5f5f5;border:1px solid #e2e2e2;display:block;clear:both;margin:10px;text-align:right;padding:5px 10px;line-height:20px}
.sod_list .total_price span{float:left}
.sod_list .total_price strong{font-size:1.25em;color:#7d8dff}
.sod_opt li {padding-left: 10px;background: url('../img/bullet.gif') no-repeat 3px 50%;color: #777;margin: 3px 0;line-height: 1.3em;}

#sit_opt_added {margin:0;padding:0;border-bottom:0;list-style:none}
#sit_opt_added li {padding:15px 0;border-bottom:1px solid #eee;margin:0 0 2px;position:relative}
#sit_opt_added li .opt_name{line-height:18px;padding:0 0 10px}
#sit_opt_added li .opt_count{}
#sit_opt_added li .opt_count:after {display:block;visibility:hidden;clear:both;content:""}
#sit_opt_added button {float:left;width:30px;height:30px;border:1px solid #efb6b6;background:#fff;color:var(--secondary-color);font-size:0.92em}
#sit_opt_added button:hover{background:#f8ebeb;border-color:var(--secondary-color);color:var(--secondary-color)}
#sit_opt_added .num_input {float:left;border:0;height:30px;width:40px;border-top:1px solid #efd7d7;border-bottom:1px solid #efd7d7;text-align:center;color:#333;}
#sit_opt_added .num_input:focus{background:#fffafa;color:var(--secondary-color)}
#sit_opt_added .sit_opt_del{background:#f3f3f3;color:#aaa;border:0;margin-left:3px}
#sit_opt_added .sit_opt_prc{float:right;display:block;padding:0 3px;text-align:right;line-height:30px;font-weight:bold;}

#sit_opt_added .sit_opt_prc{float:right;display:block;padding:0 3px;text-align:right;line-height:30px;font-weight:bold;}

/* 장바구니 */
#mod_option_frm{position:fixed;top:50%;left:50%;background:#fff;width:300px;max-height:300px;margin-left:-150px;margin-top:-150px;overflow-y:auto;z-index:99;border-radius:0 0 3px 3px;
-webkit-box-shadow:1px 5px 15px rgba(0,0,0,0.4);
-moz-box-shadow:1px 5px 15px rgba(0,0,0,0.4);
box-shadow: 1px 5px 15px rgba(0,0,0,0.4);}
#mod_option_frm h2{height:45px;line-height:45px;font-size:1.167em;border-bottom: 1px solid #eee;padding:0 15px}
#mod_option_frm  #sit_sel_option{margin:15px }
#mod_option_frm #sit_tot_price{margin:15px;line-height:30px }
#mod_option_frm  #sit_sel_option ul{background:#f3f3f3;border:0}
#mod_option_frm h3{margin: 0 0 10px;color:#5772d5;}
#mod_option_frm .option_wr {margin:15px ; }
#mod_option_frm .option_wr label{margin: 0 0 5px;display:block}
#mod_option_frm .option_wr select{width:100%; height: 40px;border: 1px solid #d9d9d9;margin: 0 0 5px;}
#mod_option_frm .btn_confirm{margin:10px ; }
#mod_option_frm .btn_confirm .btn_submit{height:40px;font-weight:bold;width:100%;}
#mod_option_frm .btn_confirm .btn_close{position:absolute;top:0;right:0;width:45px;height:45px;border:0;background:none;color:#999;font-size:1.25em}

#sod_bsk{padding:20px 0 0;background: #f3f3f3;}
#sod_bsk:after {display:block;visibility:hidden;clear:both;content:''}
#sod_bsk .btn_del_wr{margin:10px }
#sod_bsk .btn_del_wr .btn01{height:30px}
#sod_bsk .sod_ta_wr{background:#e9e9e9;padding:20px;}
#sod_bsk .go_shopping{margin: 10px;}
#sod_bsk .go_shopping .btn_b01{line-height:43px;font-size:1.167em;font-weight:bold;width:100%;text-align:center;display:block}
#m_sod_bsk_tot{padding:15px;background:#f3f3f3}
#sod_bsk #m_sod_bsk_tot  {background:none;padding:0}
#m_sod_bsk_tot:after{display:block;visibility:hidden;clear:both;content:""}
#m_sod_bsk_tot dt{float:left;width:40%;padding:5px 0 ;line-height:20px;clear:both}
#m_sod_bsk_tot dd{float:left;width:60%;padding:5px 0;text-align:right;line-height:20px}
#m_sod_bsk_tot .sod_bsk_cnt{border-top:1px solid #ccc;font-weight:bold;margin-top:15px;line-height:25px}
#m_sod_bsk_tot .sod_bsk_cnt strong{font-size:1.25em}
#sod_bsk_act .btn_submit{height:45px;font-size:1.167em;font-weight:bold;width:100%;margin:10px 0;border-radius:50px}

.cart_list:after {display:block;visibility:hidden;clear:both;content:''}  
.cart_list .sod_li{background:#fff;border:1px solid #e7e8ef;border-bottom:1px solid #cbd0d5;margin:10px 0;position:relative;
-webkit-box-shadow: 0 3px 6px rgba(0,0,0,0.08);
-moz-box-shadow: 0 3px 6px rgba(0,0,0,0.08);
box-shadow: 0 3px 6px rgba(0,0,0,0.08);}
.cart_list .sod_li:hover{border:1px solid #406fff;
-webkit-box-shadow: 0 3px 15px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 15px rgba(0,0,0,0.2);
box-shadow: 0 3px 15px rgba(0,0,0,0.2);}
.cart_list .sod_li:after {display:block;visibility:hidden;clear:both;content:''}  
.cart_list .li_op_wr{padding:20px;padding-left:140px;min-height:140px;position:relative}
.cart_list .li_name{padding:15px;border-bottom:1px solid #f3f3f3}
.cart_list .total_img {position:absolute;top:20px;left:20px}

.cart_list .li_prqty{background:#f8f9fa;padding:20px;float:left;width:75%}
.cart_list .li_prqty:after {display:block;visibility:hidden;clear:both;content:''}  
.cart_list .li_prqty_sp {display:block;width:25%;float:left;border-left:1px solid #eee;padding:0 10px;text-align:center;line-height:20px;}
.cart_list .li_prqty_sp:first-child{border-left:0}
.cart_list .li_prqty_sp span{display:block;color:#999;font-size:0.92em;margin-bottom:10px}
.cart_list .total_price{line-height:20px;background:#eef2f6;;color:#0074e9;padding:20px;float:left;width:25%;text-align:center}
.cart_list .total_price:after{display:block;visibility:hidden;clear:both;content:""}
.cart_list .total_price span{display:block;color:#999;font-size:0.92em;margin-bottom:10px}
.cart_list .mod_btn{padding:0 10px;height:30px;margin:20px 0;font-size:12px}

 @media (min-width: 1025px){
    .sod_bsk_left{float:left;width:70%;padding:20px 5%;height:100%;background:#ededed}
    #sod_bsk{position:relative;padding:0}
    #sod_bsk .sod_ta_wr{float:right;width:30%;height:100%;background:#f3f3f3;padding:40px;position:relative;z-index:9}
    #sod_bsk .sod_ta_wr.fixed{position:fixed;top:0;right:0;z-index:10}
    .go_shopping {}
    .cart_list .sod_li{margin:20px 0}
}

 @media (max-width: 1024px){
    .cart_list .li_prqty{width:100%;padding:10px 0}
    .cart_list .total_price{width:100%;padding:15px}
    .cart_list .total_price span{display:inline-block;margin:0;color:#000;margin-right:10px;}
    #sod_bsk{padding:0}
 }

/* 주문서 작성 */
#sod_frm {}
#sod_frm .od_prd_list{margin:20px 10px;background:#fff;}
.od_prd_list .td_chk{border-left:0;}
.od_prd_list .td_prd{border-left:0;position:relative;padding-left:100px;min-height:100px}
.od_prd_list .td_prd .sod_img{position:absolute;top:15px;left:10px}
.od_prd_list .td_prd .sod_name{min-height:80px}
.od_prd_list .td_prd .prd_name{font-size:1.167em}
.od_prd_list .total_prc{color:#ff006c;font-weight:bold;font-size:1.167em}

#sod_frm_orderer{padding:20px}
#sod_frm_taker{padding:20px}
#sod_frm_taker h2,#sod_frm_orderer h2{margin:10px 0;font-size:1.25em}
.odf_list li{}
.odf_list label,.odf_list strong{display:block;margin:7px 0 5px;color:#444;font-weight:normal}
.odf_list .frm_input{width:100%;margin:0 0 5px}
.odf_list .dlv_slt div {background:#fff;border:1px solid #ccc;margin:5px 0;padding:10px}
.odf_list .dlv_slt div label{display:inline-block;margin:3px 0;color:#000}
#order_address{display:block;width:80px;text-align:center;border: 1px solid #3476be;color: #3476be;;height:30px;line-height:28px;margin:5px 0 0;background:none}
.odf_list .ad_default{display:inline-block;margin:0}
.odf_list .btn_addsch{position:absolute;top:5px;right:5px;border-radius:3px;height:30px;}
.odf_list .add_num{position:relative;display:block;}
.odf_list  textarea{border: 1px solid #ccc;background: #fff;color: #000;vertical-align: middle;border-radius: 3px;padding: 5px;width:100%;height:70px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
#m_sod_frm_paysel {margin:10px 0 ;}
#m_sod_frm_paysel ul {margin:0 0 ;background:#fff;padding:0 0 10px;}
#m_sod_frm_paysel ul:after {display:block;visibility:hidden;clear:both;content:""}
#m_sod_frm_paysel li {float:left;padding:5px ;width:46%;height:25px}
#m_sod_frm_paysel .KPAY{background:url('../../../img/kpay.png') no-repeat;width:37px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%}
#m_sod_frm_paysel .PAYNOW{background:url('../../../img/paynow.png') no-repeat;width:46px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%;}
#m_sod_frm_paysel .PAYCO{background:url('../../../img/payco.png') no-repeat 1px;width:46px;height:15px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%;}
#m_sod_frm_paysel .inicis_lpay{background:url('../../../img/lpay_logo.png') no-repeat;width:35px;height:12px;overflow:hidden;text-indent:-999px;display:inline-block;background-size:100%;}
#m_sod_frm_paysel .inicis_kakaopay{background:url('../../../img/kakao.png') no-repeat 50% 50% #ffeb00;border-radius:30px;height:22px;width:74px;display:inline-block;overflow:hidden;text-indent:-999px;background-size:35px auto}
#m_sod_frm_paysel .kakaopay_icon{background:url('../../../img/kakao.png') no-repeat 50% 50% #ffeb00;border-radius:30px;height:22px;width:74px;display:inline-block;overflow:hidden;text-indent:-999px;background-size:35px auto}
#m_sod_frm_paysel .samsung_pay{margin-left:-23px;background:url('../../../img/samsungpay.png') no-repeat 24px 3px;height:25px;width:106px;display:inline-block;overflow:hidden;text-indent:-999px}

#sod_frm .sod_ta_wr{background: #f3f3f3;}
#sod_frm .btn_confirm{padding:0 20px 20px;background:#f3f3f3;margin:0 0 10px}
#sod_frm .btn_submit{width:100%;height:45px;font-size: 1.167em;font-weight: bold;margin:5px 0;border-radius:30px}
#sod_frm .btn_cancel,#sod_frm .btn01{width:100%;height:45px;line-height:43px;font-size:1.167em;font-weight: bold;padding:0;border-radius:30px}

#sod_frm_pay{padding:20px ;background:#f3f3f3}
#sod_frm_pay h2{margin:10px 0;font-size:1.25em}
#sod_frm_pay .cp_btn1,#sod_frm_pay .cp_cancel1{margin-top:0}
.odf_tbl{position:relative}
.odf_tbl table{background:#fff;width:100%;border-collapse:collapse;border-bottom:1px solid #eee;background:#fff}
.odf_tbl table th{border:1px solid #eee;border-right:0;padding: 10px;text-align:left;width:120px;font-weight:normal}
.odf_tbl table td{border:1px solid #eee;border-left:0;padding:7px 10px;text-align:right}

#sod_frm_pt_alert{margin:10px 0;color:#328abd;}

.sod_frm_point {margin-top:10px;clear:both;background:#fff}
.sod_frm_point div{background:#fff;border-bottom:1px solid #eee;padding:10px;text-align:right}
.sod_frm_point div:after {display:block;visibility:hidden;clear:both;content:''}
.sod_frm_point div label{float:left;line-height:30px}
.sod_frm_point div span{display:block;font-size:0.92em}
.sod_frm_point div span:after {display:block;visibility:hidden;clear:both;content:''}
.sod_frm_point div strong{float:left;color:var(--text-muted);font-weight:normal}
.sod_frm_point #od_temp_point{height:30px;border:1px solid #ccc;text-align:right}

#settle_bank{background:#fff;border-bottom:1px solid #ccc;padding:10px;text-align:right; clear:both}
#settle_bank select{height:30px;margin:0 0 5px;width:100%;}
#settle_bank #od_deposit_name{height:30px;border:1px solid #ccc;text-align:center;}
#settle_bank label{float:left;line-height:30px}
#sod_frm_pt_info{border-bottom:1px solid #ccc}
.od_coupon{position:absolute;top:0;left:0;background:#fff;width:100%;z-index:99;border-radius:0 0 3px 3px;border:1px solid #eee;
-webkit-box-shadow:1px 1px 5px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 5px rgba(0,0,0,0.4);
box-shadow: 1px 1px 5px rgba(0,0,0,0.4);}
.od_coupon h3{height:45px;line-height:45px;font-size:1.167em;padding:0 15px;text-align:left}
.od_coupon .tbl_head02{margin:0 15px 15px}
.od_coupon .tbl_head02 .btn_frmline {background:#3b67c2;color:#fff;border:0;padding:0 5px;line-height:25px }
.od_coupon .tbl_head02 td{text-align:left;background:#fff !important;border-right:0}
.od_coupon .tbl_head02 th{width:auto !important;border-left:0}
.od_coupon .tbl_head02 .td_mngsmall{width:60px;text-align:center}
.od_coupon .tbl_head02 .td_numbig{width:80px;text-align:right}
.od_coupon .btn_confirm{margin:20px ; }
.od_coupon .btn_confirm .btn_submit{height:40px;font-size:1.167em;font-weight:bold;width:100%;}
.od_coupon .btn_confirm .btn_close{position:absolute;top:0;right:0;width:45px;height:45px;border:0;background:none;color:#333;font-size:1.25em}

.cp_btn ,.cp_btn1{padding:0 7px;border:1px solid #38b2b9;color:#38b2b9;background:#fff;height:23px;line-height:21px;margin:5px 0 0 }
.cp_apply{background:#3b67c2;color:#fff;border:0;padding:0 5px;line-height:25px }
.cp_cancel,.cp_cancel1 {padding:0 7px;border:1px solid #aaa;color:var(--text-muted);background:#fff;height:23px;line-height:21px;margin:10px 0 0 2px;}

#sod_frm_escrow{margin:10px;}
#sod_frm_escrow h2{font-size:1.25em}
#od_pay_sl h3{font-size:1.25em}

.sod_left{display: table-cell;width:65%;padding:0 10px;vertical-align:top;}
.sod_right{display: table-cell;width:35%;background:#eceff4;padding:20px;vertical-align:top;height:100%}
.sod_right #sod_frm_pay{padding:0 ;background:transparent}
 #sod_frm .sod_right .btn_confirm{padding:0 ;background:transparent;margin:20px 0}

/* 쿠폰 */
#scp_list li{position:relative;padding: 0}
#scp_list .li_pd{position:relative;padding:10px}
#scp_list .li_title{font-weight:bold;font-size:1.167em;}
#scp_list .pd_price{position:absolute;top:10px;right:10px}
#scp_list .pd_price strong{color:#ff006c;font-size:1.5em;}
#scp_list .li_target{color:var(--text-muted);margin:5px 0 0;background:#f3f3f3;border-top:1px dotted #ccc;padding:5px 10px;}
#scp_list .pd_date{float:right;color:#777}

/* 배송지 목록 */
#sod_addr {}
#sod_addr ul {margin:0;padding:0;list-style:none}
#sod_addr li {position:relative;padding:0;border-bottom:1px solid #e9e9e9}
#sod_addr .addr_title{border-bottom:1px solid #ddd;padding:10px 10px 10px 30px;}
#sod_addr .ad_subject{height:30px ;border:1px solid #bbb;width:100%;padding:0 10px}
#sod_addr .ad_chk{position:absolute;top:17px;left:10px}
#sod_addr .addr_info{padding:15px}
#sod_addr .addr_name{margin:0 0 10px;font-weight:bold;font-size:1.083em}
#sod_addr .addr_addr{line-height:1.5em;margin:5px 0;}
#sod_addr .addr_tel{margin:5px 0;color:var(--text-muted)}
#sod_addr .fa-mobile{font-size:14px}
#sod_addr .addr_btn{border-radius:0 0 3px 3px;padding:10px}
#sod_addr .addr_btn:after {display:block;visibility:hidden;clear:both;content:""}
#sod_addr .sel_address{width:32%;float:left;margin-right:1%;height:30px;background:none;border:1px solid #333;color:#333;;padding:0 5px;}
#sod_addr .del_address{display:block;width:32%;text-align:center;float:left;margin-right:1%;border:1px solid #aaa;background:none;color:#888;padding:0 5px;height:30px;line-height:28px;vertical-align:middle}
#sod_addr input[type="radio"]{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;text-indent:-999px;left: 0;z-index: -1px;}
#sod_addr .add_lb {display: inline-block;float:left;width:32%;text-align:center;border:1px solid var(--primary-color);color:var(--primary-color);height:30px;line-height:28px}
#sod_addr input[type="radio"]:checked+.add_lb {z-index:3;background:var(--primary-color);color:#fff}

/* 주문내역 */
#sod_v {margin:0 20px}
#sod_v .td_stat {width:100px}
#sod_v_info {margin:0 0 10px;padding:10px;background:#e6d5d2;color:#883d1a;text-align:center;border-bottom:1px solid #c3bcb1}

/* 주문상세내역 */
#sod_list_inq{}
.sod_fin_list .sod_ta_wr{padding:15px;background:#f3f3f3}
.sod_fin_list h2 {position:absolute;border:0;font-size:0;line-height:0;content:""}
.sod_fin_list .prqty_stat{position:absolute;top:0;right:0;padding:3px 5px;background:#6583c5;color:#fff}
.sod_fin_list .li_opt{color: #777;margin: 3px 0;line-height: 1.3em;padding-right:50px}
#sod_sts_wrap{margin:0 0 10px}
#sod_sts_explan_open{padding: 0 10px;height: 30px;border: 1px solid #eee;;color: #333;background:none}
#sod_sts_explan{display:none}
#sod_fin_legend{background:#f7f7f7;;margin:0 0 10px;padding:10px;line-height:20px}
#sod_fin_legend:after {display:block;visibility:hidden;clear:both;content:""}
#sod_fin_legend dt{float:left;width:20%}
#sod_fin_legend dd{float:left;width:80%}
#sod_fin_view{margin:20px 0;}
#sod_fin_view h2 {position:absolute;border:0;font-size:0;line-height:0;content:""}
#sod_fin_view h3{font-size:1.167em;margin:20px 0 10px}

#sod_fin_no{border:2px solid #b9b9b9;background:#f3f3f3;;color:#444;text-align:center;padding:10px}
#sod_fin_no strong{font-size:1.167em}

#sod_fin_tot{margin:10px 0}
#sod_fin_tot h2{font-size:1.167em;margin:20px 0 10px}
#sod_fin_tot ul{margin:0;padding:0;list-style:none}
#sod_fin_tot li{padding:10px;background:#38b2b9;border-bottom:1px solid #5ec2c7;color:#fff;zoom:1}
#sod_fin_tot li:after{display:block;visibility:hidden;clear:both;content:""}
#sod_fin_tot #alrdy{border-bottom:0 !important}
#sod_fin_tot #alrdy .right{margin-top:10px;text-align:right;color:#f3f3f3;font-size:0.9em}
#sod_fin_tot #alrdy .right p{position:relative}
#sod_fin_tot #alrdy .right .title{position:absolute;left:0;padding-left:8px}
#sod_fin_tot strong {float:right}

#sod_fin_cancel{margin:10px 0;}
#sod_fin_cancel h2{position:absolute;border:0;font-size:0;line-height:0;content:""}
#sod_fin_cancel h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#sod_fin_cancel button {height:40px;border:1px solid #5e6b6f;font-weight:bold;width:100%;background:none;color:#5e6b6f;border-radius:30px}
#sod_fin_cancel p{text-align:center;background:#ffe0e0;border:2px solid #d50c0c;padding:15px;color:#d50c0c;font-size:1.167em;font-weight:bold}
#sod_fin_cancelfrm {display:none;margin:10px 0 0;text-align:center;background:#fff;padding:15px}
#sod_fin_cancelfrm .frm_input {background:#fff;margin: 0 0 5px;width:100%}
#sod_fin_cancelfrm .btn_frmline{background:#5e6b6f;color:#fff;border:0;padding:10px;width:100%;cursor:pointer}
#sod_fin_test {padding:10px}
#sod_fin{margin:20px}

/* 마이페이지 */
#smb_my {position:relative;max-width:1600px;margin:0 auto;padding:0 20px}

#smb_my_ov{background:#fff;border:1px solid #e6e6e6;margin:0 0 15px;}
#smb_my_ov .hello_name{background:#f8f8f8;text-align:center;padding-bottom:20px;border-bottom:1px solid #e6e6e6;position:relative;}
#smb_my_ov h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#smb_my_ov .my_img{display:inline-block;border-radius:50%;overflow:hidden;position:relative;margin:35px 0 0;
-webkit-box-shadow:0 6px 10px rgba(0,0,0,0.1);
-moz-box-shadow:0 6px 10px rgba(0,0,0,0.1);
box-shadow:0 6px 10px rgba(0,0,0,0.1);}
#smb_my_ov .btn_edit{position:Absolute;bottom:0;left:0;width:100%;background:#959595;line-height:23px;color: #fff;}
#smb_my_ov .btn_edit:hover{background:#d25959;color:#fff}
#smb_my_ov .my_name{margin:10px 0}
#smb_my_ov .btn_out{position:absolute;top:0;right:0;background:#fff;border-bottom:1px solid #e6e6e6;border-left:1px solid #e6e6e6;border-radius:0 0 0 5px;padding:0 5px;line-height:22px;font-size:11px;color:#777}

#smb_my_wr {min-height:560px}

.my_cou_wr{border-bottom:1px solid #e6e6e6;font-weight:bold;}
.my_cou_wr:after {display:block;visibility:hidden;clear:both;content:""}
.my_cou_wr .my_cou{float:left;width:50%;border-right:1px solid #e6e6e6;text-align:center;padding:10px 0}
.my_cou_wr .my_po{float:left;width:50%;text-align:center;padding:10px 0}
.my_cou_wr img{padding:5px 0 0;width:23px;height:auto;}
.my_cou_wr a{color:#d63154}
.my_cou_wr span{display:block;line-height:20px;color:#000}

.my_info{padding:0 10px;line-height:18px}
.my_info dt{border-top:1px solid #e6e6e6;color:#5366ae;padding:10px 0 0;font-size:0.92em}
.my_info dd{padding:0 0 10px;}
.my_info dt:first-child{border:0}

.btn_my_if{width:100%;border:0;background:#fff;padding:10px;background:#f3f3f3}

#smb_my_od{margin:0 0 50px;padding: 0}
#smb_my_od h2{margin:0 0 10px;font-size:1.25em;font-weight:500}
#smb_my_wish{margin:0 0 35px}
#smb_my_wish h2{margin:0 0 10px;font-size:1.25em;font-weight:500}
#smb_my_wish ul:after {display:block;visibility:hidden;clear:both;content:""}
#smb_my_wish li{float:left;width:25%;padding:5px}
#smb_my_wish li img{width:100%;height:auto;}
#smb_my_wish li  a{display:block;margin:5px 0;font-weight:bold}
#smb_my_wish .empty_list{width:100%;padding:100px 0}

@media (min-width: 1025px){
    #smb_my_ov{position:absolute;top:0;left:0;width:280px}
    #smb_my {padding:10px;padding-left:300px}
    .btn_my_if{display:none;}
}
@media (max-width: 1024px){
    .my_info{display:none}
}
@media (max-width:  640px){
    #smb_my_wish li {width:50%}
}

/* 위시리스트 */
#sod_ws {margin:0 20px;}
#sod_ws li{background:#fff;border:1px solid #eee;margin:10px 0;position:relative;border-radius:3px}
#sod_ws .wish_img{ position: absolute;top: 50%;left: 20px;z-index: 10;width: 70px;height: 70px;margin-top: -35px;border-radius:50%;overflow:hidden;z-index:4}
#sod_ws .wish_info{padding:15px 15px 15px 100px;min-height:90px}
#sod_ws .wish_chk{position:absolute;top:5px;left:5px;z-index:9}
#sod_ws .info_date{color:#777;display:block;font-size:0.92em;margin:5px 0 0}
#sod_ws .wish_prd{display:block;font-weight:bold;font-size:1.083em}
#sod_ws .wish_del{position:absolute;bottom:10px;right:10px;}
#sod_ws .wish_del a{display:block;width:30px;height:30px;line-height:30px;background:#eee;border-radius:3px;color:#777;text-align:center;font-size:1.25em}
#sod_ws .sold_out{display:inline-block;padding:3px 5px;background:#ff0000;color:#fff}

#sod_ws_act {text-align:center;margin:10px 0;}
#sod_ws_act:after {display:block;visibility:hidden;clear:both;content:''}
#sod_ws_act .btn01{float:left;width:49%;height: 50px;background: #d50c0c;font-weight: bold;border: 0;color: #fff;font-weight: bold;font-size:1.25em}
#sod_ws_act .btn02{float:right;width:49%;height: 50px;border: 1px solid #d50c0c;color: #d50c0c;font-weight: bold;background: #fff;font-weight: bold;font-size:1.25em;}

/* 주문내역 include  */
#sod_inquiry li:after {display:block;visibility:hidden;clear:both;content:''}
#sod_inquiry li {background:#fff;border:1px solid #eee;padding:15px;margin-bottom:10px;position:relative;border-radius:5px}
#sod_inquiry li .idtime_link{font-weight:500}
#sod_inquiry li .idtime_time{position:absolute;top:15px;right:15px;color:#999}
#sod_inquiry li .inquiry_name{margin:10px 0;color:var(--text-muted);font-weight:300}
#sod_inquiry li .inquiry_price{font-weight: bold;margin: 10px 0 0;color:#7d8dff;position:absolute;bottom:16px;left:16px}
#sod_inquiry li .inv_status{display:block;text-align:center;float:right;margin-top:5px;font-size:12px;}
#sod_inquiry li .inv_inv{margin:10px 0 0;display:block;border:1px solid #c4c5cc;color:var(--text-muted)}
#sod_inquiry li .inv_inv i{width:30px;height:30px;line-height:30px;background:#f3f3f3;text-align:center;color:var(--text-muted);font-size:15px;margin-right:5px}

.status_01{display:block;background:#fda83c;color:#fff;line-height:25px;padding:0 10px;border-radius:30px}
.status_02{display:block;background:#ff6f6f;color:#fff;line-height:25px;padding:0 10px;border-radius:30px;}
.status_03{display:block;background:#5bd085;color:#fff;line-height:25px;padding:0 10px;border-radius:30px;}
.status_04{display:block;background:#6fa8ff;color:#fff;line-height:25px;padding:0 10px;border-radius:30px;}
.status_05{display:block;background:#333;color:#fff;line-height:25px;padding:0 10px;;border-radius:30px;}
.status_06{display:block;background:#f3f3f3;border:1px solid #ddd;color:var(--text-muted);line-height:25px;font-weight:bold;padding:0 10px;;border-radius:30px;}


/* 주문상세내역 중 현금영수증 발급 */
#scash {}
#scash section {padding:10px 0}
#scash h2 {margin:0 0 10px;text-align:center}
#scash .tbl_head01 th {padding:0 10px;border-top:1px solid #eee;border-bottom:1px solid #eee;background:#f2f5f9;text-align:left;}
#scash_apply {padding:10px 0 15px;text-align:center}
#scash_apply button {padding:10px;border:0;background:#565e60;color:#fff}
#scash_copy {text-align:center}

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;width:1px;height:1px;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;width:1px !important;height:1px !important;font-size:0;text-indent:-9999em;line-height:0;border:0 !important;overflow:hidden !important}

/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;font-size:0;line-height:0;overflow:hidden;left:0}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:1.5em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* 이미지 등비율 리사이징 */
.img_fix {width:100%;height:auto}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {position:relative}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden;}
#captcha #captcha_img {height:40px;border:1px solid #898989;;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;width:40px;height:40px;background:url('../../../img/captcha.png') no-repeat;text-indent:-999px;;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../../../img/captcha.png') no-repeat  0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top}
#captcha #captcha_info {display:block;margin:3px 0 5px ;font-size:0.95em;letter-spacing:-0.1em}

/* ckeditor 태그 기본값 */
#bo_v_con ul{display: block;list-style-type: disc;margin-top: 1em;margin-bottom: 1em;margin-left: 0;margin-right: 0;padding-left: 40px;}
#bo_v_con ol{display: block;list-style-type: decimal;margin-top: 1em;margin-bottom: 1em;margin-left: 0;margin-right: 0;padding-left: 40px;}
#bo_v_con li{display: list-item;}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {display:block;margin:0 0 5px}

/* Mobile화면으로 */
#mobile_cng {display:block;margin:5px;padding:5px 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}

/* ckeditor 단축키 */
.cke_sc {margin: 0 0 10px; text-align: right;}
.btn_cke_sc {
    display: inline-block;
    padding: 0 12px;
    height: 32px;
    border: 1px solid var(--border-color) !important;
    background: var(--bg-color) !important;
    color: var(--text-muted) !important;
    text-decoration: none !important;
    line-height: 30px;
    font-size: 13px;
    border-radius: 4px;
    vertical-align: middle;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn_cke_sc:hover {
    border-color: var(--text-muted) !important;
    color: var(--text-color) !important;
    background: #F9FAFB !important;
}

/* 단축키 안내 레이어 */
.cke_sc_def {
    margin: 0 0 10px;
    padding: 15px;
    border: 1px solid var(--border-color);
    background: #F9FAFB;
    border-radius: 4px;
    text-align: center;
}
.cke_sc_def dl {
    margin: 0;
    text-align: left;
}
.cke_sc_def dl:after {
    display: block; visibility: hidden; clear: both; content: "";
}
.cke_sc_def dt, .cke_sc_def dd {
    float: left;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px dashed var(--border-color);
    font-size: 13px;
    color: var(--text-muted);
}
.cke_sc_def dt {
    width: 20%;
    font-weight: 600;
    color: var(--text-color);
}
.cke_sc_def dd {
    width: 30%;
}
/* 단축키 닫기 버튼 */
.btn_cke_sc_close {
    display: inline-block;
    margin-top: 15px;
    padding: 0 24px;
    height: 34px;
    border: none !important;
    background: var(--text-muted) !important;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    line-height: 34px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn_cke_sc_close:hover {
    background: var(--text-color) !important;
}
/* 콘텐츠별 스타일 */
.cnt_cmt {display:inline-block;margin:0 0 0 5px;font-weight:bold}

/* 버튼 */
.btn{display:inline-block;padding:0 5px;height:30px;line-height:30px;border-radius:3px;font-weight:500;border-radius:30px}
.btn_m{display:inline-block;padding:0 20px;height:40px;line-height:40px;border-radius:3px;font-weight:500;border-radius:30px}
.btn_l{display:inline-block;padding:0 35px;height:55px;line-height:50px;border-radius:3px;font-weight:500;border-radius:30px}

.btn01 {display:inline-block;padding:0 7px;;border: 1px solid #dce1e4;background:#fff;color:#7d7c90;text-decoration:none;vertical-align:middle;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.08);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.08);
box-shadow: 0 1px 2px rgba(0,0,0,0.08);}
.btn01:focus, .btn01:hover  {color:#4c497c;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
.btn02 {display:inline-block;padding:8px 7px 7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle}
a.btn02:focus, .btn02:hover {text-decoration:none}
.btn_confirm {text-align:center} /* 서식단계 진행 */
.btn_submit {background:var(--secondary-color);color:#fff;text-decoration:none;vertical-align:middle;border:0;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.08);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.08);
box-shadow: 0 1px 2px rgba(0,0,0,0.08);}
.btn_submit:hover {background:var(--primary-color);color:#fff;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-moz-box-shadow:  0 2px 5px rgba(0,0,0,0.1);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);}

a.btn_cancel {display:inline-block;padding:8px 7px 7px;border:1px solid #ccc;background:#fff;color:#000;text-decoration:none;vertical-align:middle}
button.btn_cancel {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;vertical-align:top;text-decoration:none}
a.btn_frmline, button.btn_frmline {display:inline-block;padding:0 5px;height:1.9em;border:0;background:#333;color:#fff;letter-spacing:-0.1em;text-decoration:none;vertical-align:top;line-height:1.9em} /* 우편번호검색버튼 등 */
button.btn_frmline {font-size:1em}
.btn_top{margin:10px;text-align:right}
.btn_top li{display:inline-block}

/* 게시판용 버튼 */
a.btn_b01,.btn_b01 {display:inline-block;background:#fff;border:1px solid #dee3ed;color:#7d7c90;text-decoration:none;vertical-align:middle;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.08);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.08);
box-shadow: 0 1px 2px rgba(0,0,0,0.08);}
.btn_b01:hover, .btn_b01:hover {color:#4c497c;
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-moz-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
a.btn_b02 ,.btn_b02{display:inline-block;background:var(--secondary-color);color:#fff;text-decoration:none;vertical-align:middle;border:0;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.08);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.08);
box-shadow: 0 1px 2px rgba(0,0,0,0.08);}
a.btn_b02:hover, .btn_b02:hover {background:var(--primary-color);
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-moz-box-shadow:  0 2px 5px rgba(0,0,0,0.1);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
a.btn_b03, .btn_b03{display:inline-block;background:#fff;color:var(--secondary-color);border:1px solid var(--secondary-color);text-decoration:none;vertical-align:middle;
-webkit-box-shadow:0 1px 2px rgba(0,0,0,0.08);
-moz-box-shadow:0 1px 2px rgba(0,0,0,0.08);
box-shadow: 0 1px 2px rgba(0,0,0,0.08);}
a.btn_b03:hover, .btn_b03:hover {
-webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.1);
-moz-box-shadow:  0 2px 5px rgba(0,0,0,0.1);
box-shadow: 0 2px 5px rgba(0,0,0,0.1);}
a.btn_admin {display:inline-block;background:#e8180c;color:#fff;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */
a.btn_admin:focus, a.btn_admin:hover {}

/* 기본테이블 */
.tbl_wrap {margin:0 0 10px}
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_wrap caption {padding:10px 0;color:#4b8b99;font-weight:bold;text-align:left}

.tbl_head01 {margin:0 0 10px}
.tbl_head01 table{border-top:1px solid #d3d3d3;border-bottom:1px solid #d3d3d3}
.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 thead th {padding:12px 0;border-bottom:1px solid #d3d3d3;background:#f3f3f3;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
.tbl_head01 thead a {color:#383838}
.tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head01 tbody th {padding:10px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.tbl_head01 td {padding:15px 5px;border-top:1px solid #f3f3f3;border-left:1px solid #f3f3f3;line-height:1.5em;word-break:break-all}
.tbl_head01 td:first-child{border-left:0}
.tbl_head01 a {}

.tbl_head02 {margin:15px}
.tbl_head02 caption  {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.tbl_head02 thead th {padding:7px 0;border-top:1px solid #333;border-bottom:1px solid #ddd;background:#f3f3f3;color:#333;font-size:0.95em;text-align:center;}
.tbl_head02 thead a {color:#383838}
.tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th {border-top:1px solid var(--text-muted);border-bottom:1px solid var(--text-muted);background:#484848;color:#fff}
.tbl_head02 tfoot td {background:#484848;color:#fff;font-weight:bold;text-align:center}
.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9}
.tbl_head02 td {padding:5px 3px;border-bottom:1px solid #e9e9e9;line-height:1.4em;word-break:break-all}

.tbl_head03 {margin:0 0 10px}
.tbl_head03 table{border-bottom:1px solid #d8dee1}
.tbl_head03 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head03 thead th {padding:17px 0;background:#fff;border-bottom:1px solid #d9e0e7;border-top:1px solid #d9e0e7;font-size:0.95em;text-align:center;letter-spacing:-0.1em;color: #8d9da9;font-weight: normal;}
.tbl_head03 thead th:first-child{border-radius:5px 0 0 0}
.tbl_head03 thead th:last-child{border-radius:5px 0 0 0}
.tbl_head03 thead a {color:#383838}
.tbl_head03 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head03 tfoot th, .tbl_head03 tfoot td {padding:10px 0;border-bottom:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head03 tbody th {padding:10px 0;border-top:1pxfsolid #e9e9e9;border-bottom:1px solid #e9e9e9}
.tbl_head03 td {padding:15px 5px;border-top:1px solid #f3f3f3;line-height:1.5em;word-break:break-all;;}
.tbl_head03 tr:nth-child(odd){background:#f9fafa} 
.tbl_head02 a {}

/* 폼 테이블 */
.tbl_frm01 {}
.tbl_frm01 th {padding:10px 0;width:90px;border:1px solid #e9e9e9;border-left:0;text-align:left;font-weight:300}
.tbl_frm01 td {padding:10px 5px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
.tbl_frm01 textarea {width:100%;height:100px}
.tbl_frm01 a {text-decoration:none}
.tbl_frm01 .frm_address {margin-top:5px;width:100%}
.tbl_frm01 .frm_file {display:block;margin-bottom:5px;width:100%}
.tbl_frm01 .frm_info {display:block;padding:5px 0 0;color:var(--text-muted);line-height:1.3em}

/* 기본리스트 */
.list_01{padding:0 20px;}
.list_01 li{background:#fff;border-radius:3px;margin:10px 0;padding:10px 15px;
-webkit-box-shadow:  0 1px 4px #cbd1df;
-moz-box-shadow:  0 1px 4px #cbd1df;
box-shadow: 0 1px 4px #cbd1df;
}

/* 기본폼 */
.form_01{margin:10px}
.form_01 div{margin:5px 0;position:relative}
.form_01 li{margin:5px 0;position:relative}
textarea, .frm_input,select {border:1px solid #e1e6eb;background:#fff;color:#000;vertical-align:middle;
-webkit-box-shadow:  0 2px 2px #f3f3f3;
-moz-box-shadow:  0 2px 2px #f3f3f3;
box-shadow: 0 2px 2px #f3f3f3;}
textarea:focus, .frm_input:focus,select:focus{outline:none;border-color:var(--secondary-color);background:#f8f4f4}
textarea {width:100%;height:100px;padding:10px;}
 .frm_input{height:45px;padding:0 10px}
.full_input{width:100%} 
.form_01 .frm_file {display:block;margin-bottom:5px;width:100%}
select{height:45px;padding:0 10px}
.form_01 .frm_info{font-size:0.92em;color:var(--primary-color);text-align:left;margin:3px 0 10px;display:block;line-height:1.3em}

/* 자료 없는 목록 */
.empty_table {padding:50px 0 !important;text-align:center !important;color:var(--text-muted) !important}
.empty_list {padding:50px 0 !important;text-align:center !important;color:var(--text-muted) !important}

/* 필수입력 */
.required, textarea.required {background-image:url('../img/require.png')  !important;background-repeat:no-repeat   !important;background-position:right top  !important;}

/* 테이블 그리드 padding 0 5px 고려한 넓이 */
.grid_1 {width:40px}
.grid_2 {width:100px}
.grid_3 {width:120px}
.grid_4 {width:190px}
.grid_5 {width:240px}
.grid_6 {width:290px}
.grid_7 {width:340px}
.grid_8 {width:390px}
.grid_9 {width:440px}
.grid_10 {width:490px}
.grid_11 {width:540px}
.grid_12 {width:590px}
.grid_13 {width:640px}
.grid_14 {width:690px}
.grid_15 {width:740px}
.grid_16 {width:790px}
.grid_17 {width:840px}
.grid_18 {width:890px}

/* 테이블 항목별 정의 */
.td_chk {width:50px;text-align:center}
.td_group {width:100px;text-align:center}
.td_board {width:120px;text-align:center}
.td_statsmall {width:50px;text-align:center}
.td_num {width:50px;text-align:center}
.td_numbig {width:100px;text-align:center}
.td_mb_id {width:100px;text-align:center}
.td_nick {width:100px;text-align:center}
.td_name {width:100px;text-align:left}
.td_namesmall {width:100px;text-align:left}
.td_date {width:50px;text-align:center}
.td_datetime {width:170px;text-align:center}
.td_mngsmall {width:50px;text-align:center}
.td_mng {width:80px;text-align:center}
.td_stat {text-align:center}

/* 새창 기본 스타일 */
.new_win {}
.new_win #win_title {font-size: 1.2em;font-weight: bold;height: 50px;padding: 10px 20px;line-height: 30px;color: #333;}
.new_win #win_title .sv {font-size:0.75em;line-height:1.2em}
.new_win_con{margin:10px 20px}

.new_win .win_ul {margin:10px 20px}
.new_win .win_ul li{display:inline-block;}
.new_win .win_ul li a{display: block;line-height: 24px;padding: 0 10px;}
.new_win .win_ul li .selected {background: var(--primary-color);color: #fff;border-radius: 13px;
-webkit-box-shadow: 0 0 5px rgba(65,98,255,0.8);
-moz-box-shadow: 0 0 5px rgba(65,98,255,0.8);
box-shadow: 0 0 8px rgba(65,98,255,0.8);}

.new_win .win_desc {margin:5px 0;font-size:0.92em;color:var(--primary-color)}
.new_win .win_btn {clear:both;margin:10px;text-align:center}
.new_win .win_btn a {display:inline-block;height:40px;line-height:40px;font-weight:bold}
.new_win .win_btn .btn_close {display:inline-block;padding:0 10px;border:0;background:#c6c6d2;color:var(--text-muted);text-decoration:none;font-weight:bold;height:40px;border-radius:3px;margin:10px 0}
.new_win .win_btn .btn_submit{width:100%;height:40px;line-height:40px;border-radius:3px;margin:0 0 20px;display:inline-block;font-weight:bold}

/* 자바스크립트 alert 대안 */
#validation_check {margin:100px auto;width:500px}
#validation_check h1 {margin-bottom:20px;font-size:1.3em}
#validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff}

/* 사이드뷰*/
.sv_wrap {display:inline-block;position:relative;font-weight:normal}
.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;border:1px solid #283646;background:var(--text-color)}
.sv_wrap .sv a {display:inline-block !important;margin:0 !important;padding:5px !important;width:94px;border-bottom:1px solid #283646;color:#fff !important}
.sv_wrap a:focus, .sv_wrap a:hover, .sv_wrap a:active {text-decoration:none !important}
.sv_on {display:block !important;position:absolute;top:10px;left:20px;width:auto;height:auto !important}
.sv_nojs .sv {display:block}

/* 페이징 */
.pg_wrap {clear:both;margin:10px 0;text-align:center}
.pg {display:inline-block}
.pg_page, .pg_current, .qa_page  {display:inline-block;padding:0 10px;min-width:40px;border-radius:33px;height:40px;color:#9f9f9f;line-height:40px;vertical-align:middle}
.pg a:focus, .pg a:hover {text-decoration:none;background-color:#f3f3f3}
.pg_page,.qa_page {background:#fafafa;}
.pg_start {background:url(../img/btn_first.gif) no-repeat 50% 50% #fafafa;width:40px;height:40px ;text-indent:-999px;overflow:hidden}
.pg_prev {background:url(../img/btn_prev.gif) no-repeat 50% 50% #fafafa;width:40px;height:40px ;text-indent:-999px;overflow:hidden}
.pg_next {background:url(../img/btn_next.gif) no-repeat 50% 50% #fafafa;width:40px;height:40px ;text-indent:-999px;overflow:hidden}
.pg_end {background:url(../img/btn_end.gif) no-repeat 50% 50% #fafafa;width:40px;height:40px ;text-indent:-999px;overflow:hidden}
.pg_current {display:inline-block;background:var(--secondary-color);color:#fff;font-weight:normal;line-height:40px;}

/* 상품상세 메뉴 floating */
#info_top_layer {display:none;position:absolute; top:0; left:0; width:100%; background-color: #eee;}
#form_btn_layer { display:none;position:absolute; top:0; left: 0; width: 100%; height: 60px; background-color: #eee;}

/*현금영수증*/
#kcp_req_rx .tbl_head01 tbody th {text-align:left;}

/*배송지목록*/
#sod_addr .win_desc{padding:10px 20px}

/*쇼핑몰레이아웃*/
#fregisterform{margin:10px}
#bo_w {padding:10px 0;}
#sit_sms_new #sms_agree{padding:10px 20px !important}

/*이벤트*/
#sev_hhtml,#sev_thtml{padding:10px}
#sev_hhtml img,#sev_thtml img{width:100%}

/*네이버페이*/
.naverpay-item{padding-top:15px;clear:both}
#sod_bsk_act .naverpay-cart{margin-top:15px;clear:both;position:static}

/*PC 주문서*/
#sod_frm_orderer .tbl_frm01,#sod_frm_taker .tbl_frm01{background:#fff;padding:10px 0;}
#sod_frm_orderer table th,#sod_frm_taker table th{border:0;padding:10px 5px;}
#sod_frm_orderer table td,#sod_frm_taker table td{border:0;padding:5px 10px;vertical-align:middle}

#od_pay_sl input[type="radio"]{position:absolute;width:0;height:0;overflow:hidden;visibility:hidden;text-indent:-999px;left: 0;z-index: -1px;}
#od_pay_sl .lb_icon {display: inline-block;float:left;width:50%;background:#fff;border:1px solid #eceff4;margin:-1px 0 0 -1px;cursor: pointer;height:60px;position:relative;padding-left:65px;padding-top:20px;z-index:1}
#od_pay_sl input[type="radio"]:checked+.lb_icon {border:1px solid #ff006c;z-index:3}

#sod_frm_paysel {}
#sod_frm_paysel label{display:inline-block;width:50%;text-align:left}
#sod_frm_paysel legend {position:absolute;font-size:0;line-height:0;overflow:hidden}
#sod_frm_paysel .KPAY{background:url('../../../img/kpay.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .PAYNOW{background:url('../../../img/paynow.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .PAYCO{background:url('../../../img/payco.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .inicis_lpay{background:url('../../../img/lpay_logo.png') no-repeat 50% 50% #fff;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .kakaopay_icon{background:url('../../../img/kakao.png') no-repeat 50% 50% #f4dc34;overflow:hidden;text-indent:-999px}
#sod_frm_paysel .bank_icon{background:url('../../../img/pay_icon1.png') no-repeat 15px 50% #fff}
#sod_frm_paysel .vbank_icon{background:url('../../../img/pay_icon2.png') no-repeat 15px 50% #fff;padding-top:13px}
#sod_frm_paysel .iche_icon{background:url('../../../img/pay_icon2.png') no-repeat 15px 50% #fff;padding-top:13px}
#sod_frm_paysel .hp_icon{background:url('../../../img/pay_icon3.png') no-repeat 24px 50% #fff}
#sod_frm_paysel .card_icon{background:url('../../../img/pay_icon4.png') no-repeat 17px 50% #fff}

#sod_frm #sod_bsk_tot{}
#sod_frm  #sod_bsk_tot:after {display:block;visibility:hidden;clear:both;content:""}
#sod_frm  #sod_bsk_tot li{position:relative;float:left;background:#fff;width:33.333%;height:70px;text-align:center;border-bottom:1px solid #e7ebf1;padding:15px 0}
#sod_frm  #sod_bsk_tot li:after {display:block;visibility:hidden;clear:both;content:""}
#sod_frm  #sod_bsk_tot li span{display:block;color:#777;margin-bottom:5px;font-weight:500}
#sod_frm  #sod_bsk_tot .sod_bsk_sell,#sod_frm  #sod_bsk_tot .sod_bsk_coupon{border-right:1px solid #e7ebf1}
#sod_frm  #sod_bsk_tot .sod_bsk_point,#sod_frm  #sod_bsk_tot .sod_bsk_cnt{width:100%;clear:both;height:40px;padding:0 15px;line-height:40px;text-align:right}
#sod_frm  #sod_bsk_tot .sod_bsk_point span,#sod_frm  #sod_bsk_tot .sod_bsk_cnt span {float:left;margin:0;font-weight:500}
#sod_frm  #sod_bsk_tot .sod_bsk_coupon:before{display:block;content:"-";position:absolute;top:25px;left:-10px;width:20px;height:20px;background:#fff;color:#ff006c;border-radius:50%;border:1px solid #e7ebf1;font-weight:bold;font-size: 16px;line-height: 14px;}
#sod_frm  #sod_bsk_tot .sod_bsk_dvr:before{display:block;content:"+";position:absolute;top:25px;left:-10px;width:20px;height:20px;background:#fff;color:#ff006c;border-radius:50%;border:1px solid #e7ebf1;font-weight:bold;font-size: 16px;line-height: 14px;}
#sod_frm  #sod_bsk_tot .sod_bsk_cnt strong{color:#ff006c;font-size:1.25em}
#sod_frm_pay .pay_tbl table{width:100%;border-collapse:collapse}
#sod_frm_pay .pay_tbl th{text-align:left;padding:10px;width:80px;border-bottom:1px solid #e7ebf1;background:#fff;font-weight:bold;color:#777;font-weight:500}
#sod_frm_pay .pay_tbl td{text-align:right;padding: 10px;height:30px;border-bottom:1px solid #e7ebf1;background:#fff}
#sod_frm_pay .pay_tbl td .cp_cancel{margin:0 0 0 2px}
#sod_frm_pay .pay_tbl td .btn_frmline{padding: 0 7px;border: 1px solid #38b2b9;color: #38b2b9;background: #fff;height: 23px;line-height: 21px;margin: 0;}
#od_tot_price{margin:10px 0;background:#fff;line-height:40px;text-align:right;padding:0 10px}
#od_tot_price span{float:left;font-weight:bold}
#od_tot_price strong{font-size:1.5em;color:#ff006c}

.btn_address{background:#70aff2;border:1px solid #3476be;height:40px;color:#fff;padding:0 10px;font-size:1.083em;font-weight:bold}

/*개인결제 폼*/
#m_sod_frm_orderer {margin:10px;}
#m_sod_frm_orderer h2{position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#m_sod_frm_orderer ul{background:#fff;margin:10px 0;border-bottom:1px solid #ccc;padding:10px 15px}
#m_sod_frm_orderer li{line-height:20px}
#m_sod_frm_orderer th{width:80px}
#m_sod_frm_orderer td .frm_input{width:100%}
#m_pv_sod_frm .btn_confirm{margin:10px}
#m_pv_sod_frm .btn_confirm .btn_submit{width:100%;height: 45px;font-size: 1.167em;font-weight: bold;margin:0 0 3px;}
#m_pv_sod_frm .btn_confirm .btn_cancel{width:100%;height: 45px;line-height: 43px;font-size: 1.167em;font-weight: bold;padding:0}


/* ================================================================
   SECTION 01. MAIN VISUAL (와이드 풀스케일 하이엔드 버전)
================================================================= */
#main_visual {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 850px;
    background-color: #f8fafc;
    overflow: hidden;
    display: flex;
    align-items: center;
}

/* 배경 톤 */
#main_visual .visual_bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 25% 50%, rgba(96, 165, 250, 0.1) 0%, rgba(255, 255, 255, 1) 65%);
    z-index: 1;
}

#main_visual .visual_inner {
    position: relative;
    max-width: 1600px; 
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;   
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 2;
}

/* 1. 왼쪽 텍스트 영역 (스케일 업) */
#main_visual .visual_text_box {
    flex: 1.2;
    max-width: 780px;  
    z-index: 3;
}

.brand_declaration {
    margin-bottom: 22px;
}
.brand_declaration p {
    font-size: 24px;    
    font-weight: 500;
    color: #333;
    margin: 0;
    letter-spacing: -0.5px;
}
.brand_declaration p strong {
    color: var(--primary-color);
    font-weight: 700;
}

.visual_text_box .main_copy {
    font-size: 92px;  
    font-weight: 300;
    line-height: 1.08;
    letter-spacing: -2.5px;
    margin-bottom: 28px;
    color: var(--text-color);
}
.visual_text_box .main_copy strong {
    font-weight: 800;
    color: #0b1329;
}

#main_visual .visual_text_box .sub_copy {
    font-size: 32px;    
    font-weight: 300;     
    line-height: 1.45;     
    color: #334155;           
    margin-bottom: 45px;     
    letter-spacing: -0.5px;
}

#main_visual .visual_text_box .sub_copy strong {
    font-weight: 700;          
    color: var(--primary-color);            
}

.visual_btn_wr .btn_more {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 18px;    
    font-weight: 600;
    color: var(--text-color);
    text-decoration: none;
    padding-bottom: 8px;
    border-bottom: 2.5px solid var(--text-color);
    transition: all 0.2s ease;
}
.visual_btn_wr .btn_more:hover {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    gap: 22px;
}

#main_visual .visual_expert_showcase {
    flex: 0 0 680px;  
    position: relative;
    height: 580px;     
    z-index: 3;
}

/* 비대칭 곡선 마스크 및 입체감 */
.blob_image_box {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 58% 42% 55% 45% / 45% 55% 42% 58%;
    box-shadow: 0 30px 60px rgba(11, 19, 41, 0.12);
    border: 4px solid rgba(255, 255, 255, 0.95);
    background-color: #ffffff; 
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-radius 0.8s ease, transform 0.3s ease;
}

.blob_image_box:hover {
    border-radius: 45% 55% 42% 58% / 58% 42% 55% 45%;
    transform: translateY(-8px);
}

.blob_image_box img {
    width: 85%;       
    height: 85%;
    object-fit: contain; 
    filter: drop-shadow(0 15px 25px rgba(0,0,0,0.08));
}

/* 반응형 모바일/태블릿 */
@media (max-width: 1024px) {
    #main_visual { height: auto; padding: 60px 0 60px; margin-top: -20px;}
    #main_visual .visual_inner { flex-direction: column; gap: 60px; padding: 0 30px; }
    #main_visual .visual_text_box { max-width: 100%; text-align: center; }
	.brand_declaration p {font-size: 18px;}
    #main_visual .visual_text_box .main_copy { font-size: 52px; }
    #main_visual .visual_text_box .sub_copy { margin: 0 auto 35px auto; font-size: 22px; }
    .visual_btn_wr { display: flex; justify-content: center; }
    #main_visual .visual_expert_showcase { width: 100%; max-width: 500px; height: 420px; flex: auto; }
}




/* ================================================================
   SECTION 02 & 03
================================================================= */
#story_sticky_section {
    background-color: #ffffff; 
    position: relative;
}

#story_sticky_section .sticky_inner {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
	box-sizing: border-box;
    justify-content: space-between;
    align-items: flex-start; 
}

#story_sticky_section .scroll_content_area {
    width: 45%;           
    padding-bottom: 20vh; 
	overflow-x: hidden;
}

#story_sticky_section .story_block {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#story_sticky_section .sticky_visual_area {
    width: 50%;
    position: sticky;     
    top: 0;
    height: 100vh;        
    display: flex;
    align-items: center;
    justify-content: center;
}

#story_sticky_section .visual_fix_box {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
#story_sticky_section .visual_fix_box img {
    width: 100%;
    height: 95vh;
    object-fit: contain;
    mix-blend-mode: multiply; 
}

.corp_eyebrow {
	display: block;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--primary-color);
    margin-bottom: 20px;
    text-transform: uppercase;
}

#story_sticky_section .corp_title {
    font-size: 76px;
    font-weight: 300;
    line-height: 1.25;
    letter-spacing: -2.5px;
    color: var(--text-color);
    margin: 0;
}

#story_sticky_section .corp_title strong {
    font-weight: 800;
    color: #000;
}

#story_sticky_section .corp_divider {
    width: 60px;
    height: 3px;
    background-color: var(--text-color);
    margin: 45px 0;
}

#story_sticky_section .corp_desc p {
    font-size: 24px;
    line-height: 1.6;
    color: #444;
    margin: 0 0 16px 0;
    letter-spacing: -0.5px;
}

#story_sticky_section .corp_desc p strong {
    font-weight: 700;
    color: var(--text-color);
}

#story_sticky_section .corp_philosophy {
    margin-top: 60px;
    padding-top: 30px;
    border-top: 1px solid #e2e8f0;
}

#story_sticky_section .corp_philosophy p {
    font-size: 34px;
    font-weight: 300;
    color: var(--text-color);
    margin: 0;
    letter-spacing: -1.5px;
}

#story_sticky_section .corp_philosophy p strong {
    font-weight: 800;
    color: var(--primary-color);
}
@media (max-width: 1024px) {
    #story_sticky_section .sticky_inner {
        flex-direction: column;
        padding: 0 40px; 
        box-sizing: border-box;
    }
    
    #story_sticky_section .sticky_visual_area {
        position: relative;
        width: 100%;
        height: auto;
        min-height: 400px;
        order: -1; 
        margin-top: 80px;
        margin-bottom: 30px;
    }

    #story_sticky_section .visual_fix_box {
        height: auto;
    }
    
    #story_sticky_section .visual_fix_box img {
        height: 100%;
        max-height: 45vh;
    }
    
    #story_sticky_section .scroll_content_area {
        width: 100%;
        padding-bottom: 80px;
        text-align: center;
    }
    
    #story_sticky_section .story_block {
        min-height: auto;
        padding: 40px 0;
        align-items: center;
    }

    #story_sticky_section .corp_eyebrow { font-size: 16px; margin-bottom: 16px; }
    #story_sticky_section .corp_title { font-size: 52px; line-height: 1.25; letter-spacing: -1.5px; }
    #story_sticky_section .corp_divider { width: 50px; margin: 30px auto; }
    #story_sticky_section .corp_desc p { font-size: 18px; margin-bottom: 14px; line-height: 1.6; }
    #story_sticky_section .corp_philosophy { margin-top: 50px; padding-top: 24px; }
    #story_sticky_section .corp_philosophy p { font-size: 26px; letter-spacing: -1px; }
}

@media (max-width: 768px) {
    #story_sticky_section .sticky_inner { padding: 0 24px; }
    
    #story_sticky_section .sticky_visual_area {
        min-height: 300px;
        margin-top: 60px;
        margin-bottom: 20px;
    }
    
    #story_sticky_section .visual_fix_box img { max-height: 40vh; }
    #story_sticky_section .scroll_content_area { padding-bottom: 60px; }
    #story_sticky_section .story_block { padding: 30px 0; }

    #story_sticky_section .corp_eyebrow { font-size: 14px; }
    #story_sticky_section .corp_title { font-size: 36px; letter-spacing: -1px; }
    #story_sticky_section .corp_divider { width: 40px; margin: 24px auto; }
    #story_sticky_section .corp_desc p { font-size: 15px; margin-bottom: 12px; }
    #story_sticky_section .corp_philosophy { margin-top: 40px; padding-top: 20px; }
    #story_sticky_section .corp_philosophy p { font-size: 22px; }
}






#main_visual { 

    top: 0;
    z-index: 1;
}
#story_sticky_section {
    position: relative;
    z-index: 10; 
    background-color: #ffffff; 
    box-shadow: 0 -30px 60px rgba(0,0,0,0.08); 
}

/* ================================================================
   [하이엔드 스크롤 애니메이션] 요소 등장 효과
================================================================= */

.reveal_el {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
                transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.reveal_el.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal_img {
    transform: scale(1.15); 
    transition: transform 1.8s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.reveal_img.active {
    transform: scale(1.3);
}

/* 반응형 모바일/태블릿 이미지 스케일 예외 처리 */
@media (max-width: 1024px) {
    .reveal_img { transform: scale(1.0); transform-origin: center; }
    .reveal_img.active { transform: scale(1.1); }
}

/* ================================================================
   SECTION 05.  TECHNOLOGY 
================================================================= */
#section_core_tech {
    background-color: #ffffff; 
    height: 100vh;
    min-height: 800px; 
    display: flex;
    align-items: center;
    padding: 0; 
    overflow: hidden;
    position: relative;
    z-index: 10;
}

#section_core_tech::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    height: 1px;
    background: linear-gradient(90deg, rgba(226,232,240,0) 0%, rgba(226,232,240,1) 15%, rgba(226,232,240,1) 85%, rgba(226,232,240,0) 100%);
}

#section_core_tech .tech_inner {
    max-width: 1600px; 
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

#section_core_tech .tech_top {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: clamp(40px, 6vh, 80px); 
    gap: 40px;
}

#section_core_tech .tech_text { width: 45%; flex-shrink: 0; }
#section_core_tech .corp_eyebrow { color: var(--primary-color); font-size: 18px; font-weight: 800; letter-spacing: 0.15em; display: block; margin-bottom: 24px; }
#section_core_tech .corp_title { font-size: 56px; font-weight: 800; color: var(--text-color); margin: 0 0 24px 0; letter-spacing: -2px; line-height: 1.2; }
#section_core_tech .tech_desc { font-size: 20px; color: var(--text-muted); margin: 0; line-height: 1.6; letter-spacing: -0.5px; }

#section_core_tech .tech_main_img { 
    width: 55%; 
    border-radius: 20px; 
    overflow: hidden; 
    background-color: #f4f5f6;
    height: clamp(200px, 25vh, 280px);
}
#section_core_tech .tech_main_img img { 
    width: 100%; 
    height: 100%; 
    display: block; 
    object-fit: cover; 
}

#section_core_tech .tech_bottom {
    width: 100%;
}
#section_core_tech .core_tech_slider { width: 100%; overflow: visible; }

#section_core_tech .tech_card {
    background-color: #f4f5f6; 
    border-radius: 16px;
    padding: clamp(35px, 4vh, 50px) 45px 45px 45px;

    height: clamp(380px, 42vh, 460px); 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: grab;
    border: 1px solid transparent; 
    box-shadow: none; 
    overflow: hidden;
    position: relative;
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
#section_core_tech .tech_card:active { cursor: grabbing; }
#section_core_tech .tech_card:hover { 
    transform: translateY(-8px); 
    border-color: transparent;
    box-shadow: 0 20px 40px rgba(31, 97, 255, 0.15); 
}

#section_core_tech .tech_card::before {
    content: '';
    position: absolute;
    bottom: -50px;
    left: -50px;
    width: 150px;
    height: 150px;
    background: linear-gradient(135deg, var(--secondary-color, #1F61FF) 0%, var(--primary-color, #1E3A8A) 100%);
    border-radius: 50%;
    z-index: 0;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: scale(0);
}
#section_core_tech .tech_card:hover::before {
    transform: scale(12);
}

#section_core_tech .card_top,
#section_core_tech .card_bottom {
    position: relative;
    z-index: 2;
    transition: color 0.4s ease, border-color 0.4s ease;
}

#section_core_tech .tech_card:hover .card_title,
#section_core_tech .tech_card:hover .card_desc,
#section_core_tech .tech_card:hover .card_num,
#section_core_tech .tech_card:hover .text_navy,
#section_core_tech .tech_card:hover .text_blue {
    color: #ffffff !important;
}

#section_core_tech .card_title { font-size: 40px; font-weight: 800; color: var(--text-color); line-height: 1.35; margin: 0 0 24px 0; letter-spacing: -1.5px; word-break: keep-all; transition: color 0.4s ease; }
#section_core_tech .card_desc { font-size: 25px; color: var(--text-muted); line-height: 1.6; letter-spacing: -0.5px; margin: 0; word-break: keep-all; transition: color 0.4s ease; }

#section_core_tech .card_bottom {
    border-top: 2px solid #e2e8f0;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    transition: border-color 0.4s ease;
}
#section_core_tech .tech_card:hover .card_bottom {
    border-top-color: rgba(255, 255, 255, 0.3);
}

#section_core_tech .card_num {
    font-size: 72px;
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -3px;
    transition: color 0.4s ease;
}
#section_core_tech .text_navy { color: var(--primary-color, #1E3A8A); transition: color 0.4s ease; }
#section_core_tech .text_blue { color: var(--secondary-color, #1F61FF); transition: color 0.4s ease; }

#section_core_tech .tech_slider_nav {
    display: flex;
    justify-content: flex-start; 
    gap: 16px;
    margin-top: 50px;
}

#section_core_tech .nav_btn {
    position: static; 
    width: 64px; 
    height: 64px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 1px solid #e2e8f0;
    margin: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

#section_core_tech .nav_btn::after {
    font-size: 20px;
    color: var(--text-color);
    font-weight: 800;
    transition: color 0.3s ease;
}

/* 마우스 호버 시 포인트 효과 */
#section_core_tech .nav_btn:hover {
    background-color: var(--primary-color, #1E3A8A);
    border-color: var(--primary-color, #1E3A8A);
    box-shadow: 0 10px 20px rgba(30, 58, 138, 0.2);
}

#section_core_tech .nav_btn:hover::after {
    color: #ffffff; 
}

#section_core_tech .swiper-button-disabled {
    opacity: 0.3;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 1024px) {
    #section_core_tech { 
        height: auto; 
        min-height: auto; 
        padding: 100px 0; 
        display: block; 
    }
    
    #section_core_tech .tech_top { 
        flex-direction: column; 
        align-items: center; 
        gap: 40px; 
        margin-bottom: 60px; 
    }
    
    #section_core_tech .tech_text { 
        width: 100%; 
        text-align: center; 
    }
    
    #section_core_tech .tech_main_img { 
        width: 100%; 
        height: 350px; 
    }
    
    #section_core_tech .tech_slider_nav { 
        justify-content: center; 
        margin-top: 40px; 
    }
    
    #section_core_tech .corp_title { font-size: 48px; }
    #section_core_tech .tech_card { padding: 40px 30px; height: 420px; }
    #section_core_tech .card_title { font-size: 28px; }
    #section_core_tech .card_num { font-size: 60px; }
}

/* ================================================================
   반응형 2단계: 모바일 (768px 이하)
================================================================= */
@media (max-width: 768px) {
    #section_core_tech { padding: 70px 0; }
    #section_core_tech .tech_inner { padding: 0 24px; }
    
    #section_core_tech .tech_top { gap: 30px; margin-bottom: 40px; } 
    
    #section_core_tech .tech_main_img { height: 240px; border-radius: 16px; }
    
    #section_core_tech .corp_eyebrow { font-size: 14px; margin-bottom: 12px; }
    #section_core_tech .corp_title { font-size: 32px; margin-bottom: 16px; letter-spacing: -1px; }
    #section_core_tech .tech_desc { font-size: 16px; }
    
    #section_core_tech .tech_slider_nav { margin-top: 30px; gap: 12px; }
    #section_core_tech .nav_btn { width: 48px; height: 48px; }
    #section_core_tech .nav_btn::after { font-size: 16px; }

    #section_core_tech .tech_card { padding: 35px 25px; height: 380px; }
    #section_core_tech .card_title { font-size: 22px; margin-bottom: 12px; }
    #section_core_tech .card_desc { font-size: 15px; }
    #section_core_tech .card_bottom { padding-top: 24px; }
    #section_core_tech .card_num { font-size: 48px; }
}


/* ================================================================
   SECTION 06. PRODUCT LINEUP 
================================================================= */
#section_lineup {
    background-color: #ffffff;
    height: 100vh;
    min-height: 850px;
    display: flex;
    align-items: center;
    padding: 0;
    position: relative;
    z-index: 10;
}

#section_lineup::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1400px;
    height: 1px;
    background: linear-gradient(90deg, rgba(226,232,240,0) 0%, rgba(226,232,240,1) 15%, rgba(226,232,240,1) 85%, rgba(226,232,240,0) 100%);
}

#section_lineup .lineup_inner {
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
}

#section_lineup .lineup_header {
    margin-bottom: 0px;
}

#section_lineup .corp_title {
    font-size: 64px;
    font-weight: 900;
    color: var(--text-color);
    margin: 0 0 24px 0;
    letter-spacing: -2px;
}

#section_lineup .lineup_desc {
    font-size: 20px;
    color: var(--text-muted);
    margin: 0 0 30px 0 ;
    line-height: 1.6;
    letter-spacing: -0.5px;
}

#section_lineup .lineup_grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

#section_lineup .lineup_card {
    border-radius: 32px;
    padding: 40px 40px;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 600px;
    position: relative;
    
    opacity: 0;
    transform: translateY(60px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

#section_lineup .lineup_card.active {
    opacity: 1;
    transform: translateY(0);
}

#section_lineup .lineup_card.active:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    transition-delay: 0s !important;
    transition-duration: 0.3s;
}

#section_lineup .card_color_1 { background-color: #D4E4FF; } 
#section_lineup .card_color_2 { background-color: #E2E7ED; }  
#section_lineup .card_color_3 { background-color: #CED8EE; }  

#section_lineup .card_text_box {
    min-height: 200px;
    display: flex;
    flex-direction: column;
}

#section_lineup .prod_name {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-color);
    margin: 0 0 16px 0;
    letter-spacing: -1.5px;
}

#section_lineup .prod_desc {
    font-size: 18px;
    color: #333;
    line-height: 1.5;
    margin: 0;
    word-break: keep-all;
}

#section_lineup .prod_specs {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid rgba(0, 0, 0, 0.1); 
}

#section_lineup .prod_specs p {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.7); 
    line-height: 1.5;
    margin: 0 0 6px 0;
    letter-spacing: -0.5px;
    position: relative;
    padding-left: 10px;
    word-break: keep-all;
}

#section_lineup .prod_specs p:last-child {
    margin-bottom: 0;
}

#section_lineup .prod_specs p::before {
    content: '·';
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 900;
    color: rgba(0, 0, 0, 0.5);
}

#section_lineup .card_img_box {
    width: 100%;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0 40px 0;
}

#section_lineup .card_img_box img {
    max-width: 100%;
    max-height: 240px;
    object-fit: contain;
    transition: transform 0.5s ease;
}

#section_lineup .lineup_card.active:hover .card_img_box img {
    transform: scale(1.08);
}

#section_lineup .prod_btn_wrap {
    margin-top: auto;
}

#section_lineup .btn_view {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color, #1E3A8A); 
    font-size: 18px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: -0.5px;
    transition: transform 0.3s ease, color 0.3s ease;
}

#section_lineup .btn_view:hover {
    color: var(--secondary-color, #1F61FF); 
    transform: translateX(5px); 
}

@media (max-width: 1024px) {
    #section_lineup { 
        padding: 120px 0; 
        height: auto; 
        min-height: auto;
        display: block; 
    }
    #section_lineup .lineup_header { margin-bottom: 60px; }
    #section_lineup .corp_title { font-size: 52px; line-height: 1.3; } 
    #section_lineup .lineup_grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    #section_lineup .lineup_card { min-height: 500px; padding: 40px 30px; height: auto; }
    #section_lineup .card_text_box { min-height: 180px; }
}

@media (max-width: 768px) {
    #section_lineup { 
        padding: 80px 0; 
        height: auto; 
        min-height: auto;
        display: block; 
    }
    #section_lineup .lineup_inner { padding: 0 24px; }
    #section_lineup .lineup_header { margin-bottom: 40px; }
    #section_lineup .corp_eyebrow { font-size: 13px; margin-bottom: 12px; }
    #section_lineup .corp_title { 
        font-size: 38px; 
        margin-bottom: 16px; 
        letter-spacing: -1px; 
        line-height: 1.2; 
    }
    #section_lineup .lineup_desc { font-size: 16px; }
    #section_lineup .lineup_grid { grid-template-columns: 1fr; gap: 20px; }
    #section_lineup .lineup_card { min-height: auto; padding: 35px 25px; }
    #section_lineup .card_text_box { min-height: auto; }
    #section_lineup .prod_name { font-size: 26px; margin-bottom: 12px; }
    #section_lineup .prod_desc { font-size: 16px; }
    #section_lineup .prod_specs { margin-top: 20px; padding-top: 16px; }
    #section_lineup .prod_specs p { font-size: 13px; }
    #section_lineup .card_img_box { margin: 30px 0; }
    #section_lineup .card_img_box img { max-height: 180px; }
    #section_lineup .btn_view { font-size: 16px; }
}

/* ================================================================
   SECTION 07. VALIDATION (매거진/백서 에디토리얼 레이아웃)
================================================================= */
#section_validation_banner_bg {
    height: 100vh;
    min-height: 850px;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 10;
    overflow: hidden;
}
#section_validation_banner_bg .banner_bg_overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}
#section_validation_banner_bg .banner_bg_overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#section_validation_banner_bg .bg_dark_dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(11, 19, 43, 0.55) 0%, rgba(15, 23, 42, 0.65) 100%);
}
#section_validation_banner_bg .banner_container {
    max-width: 1600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
    position: relative;
    z-index: 2;
}
#section_validation_banner_bg .banner_left_col {
    width: 35%;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#section_validation_banner_bg .banner_eyebrow {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin-bottom: 20px;
    display: block;
}
#section_validation_banner_bg .banner_main_title {
    font-size: 51px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1.3;
    margin: 0 0 50px 0;
    letter-spacing: -1.5px;
}
#section_validation_banner_bg .banner_desc {
    font-size: 15px;
    color: #cbd5e1;
    line-height: 1.7;
    margin: 0 0 50px 0;
    word-break: keep-all;
    font-weight: 300;
}
#section_validation_banner_bg .banner_slider_arrows {
    display: flex;
    gap: 16px;
}
#section_validation_banner_bg .banner_prev,
#section_validation_banner_bg .banner_next {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    margin: 0 !important;
    width: 55px;
    height: 55px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.4s ease;
}
#section_validation_banner_bg .banner_prev::after,
#section_validation_banner_bg .banner_next::after {
    display: none !important; 
}
#section_validation_banner_bg .banner_prev:hover,
#section_validation_banner_bg .banner_next:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
#section_validation_banner_bg .banner_prev span,
#section_validation_banner_bg .banner_next span {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
}
#section_validation_banner_bg .banner_right_col {
    width: 65%;
    overflow: hidden;
}
#section_validation_banner_bg .validationBannerSwiper {
    overflow: visible !important;
    padding: 20px 0;
}
#section_validation_banner_bg .banner_card {
    width: 560px !important;
    height: 650px !important;
    background-color: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(15px);
    border-radius: 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.03) !important;
    padding: 55px 55px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.04) !important;
    flex-shrink: 0;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}
#section_validation_banner_bg .banner_card_inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#section_validation_banner_bg .banner_card:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12) !important;
    transform: translateY(-5px);
}
#section_validation_banner_bg .bc_num_tag {
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-color) !important;
    letter-spacing: 0.2em;
    display: block;
    margin-bottom: 12px;
    text-transform: uppercase;
}
#section_validation_banner_bg .bc_title {
    font-size: 34px !important;
    font-weight: 900;
    color: var(--text-color)111;
    margin: 0;
    letter-spacing: -1.5px;
}
#section_validation_banner_bg .banner_card.step_card_1 {
    background-color: #ffffff !important;
}
#section_validation_banner_bg .banner_card.step_card_2 {
    background-color: #f9f9f6 !important;
}
#section_validation_banner_bg .banner_card.step_card_3 {
    background-color: #f0f2f5 !important;
}
#section_validation_banner_bg .banner_graph_box {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 40px;
    background: transparent; 
    border: none;
    border-radius: 0;
    padding: 0 10px 20px 10px;
    height: 300px !important; 
    position: relative;
    margin: 20px 0;
}
#section_validation_banner_bg .bg_col {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    justify-content: flex-end;
    width: 80px; 
}
#section_validation_banner_bg .bg_val {
    font-size: 20px !important; 
    font-weight: 800;
    color: #94a3b8;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}
#section_validation_banner_bg .bg_val.blue { 
    color: var(--primary-color); 
    font-size: 26px !important; 
    font-weight: 900;
}
#section_validation_banner_bg .bg_track {
    width: 100%;
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    background: #f1f5f9;
    border-radius: 0;
}
#section_validation_banner_bg .bg_fill {
    width: 100%;
    height: 0%;
    transition: height 1.5s cubic-bezier(0.16, 1, 0.3, 1); 
}
#section_validation_banner_bg .bg_fill.gray { background-color: #cbd5e1; }
#section_validation_banner_bg .bg_fill.blue { background-color: var(--primary-color); }
#section_validation_banner_bg .bg_lbl {
    font-size: 14px !important;
    font-weight: 700;
    color: #475569;
    margin-top: 16px;
}
#section_validation_banner_bg .bg_delta_badge {
    position: absolute;
    top: 0;
    right: 0;
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    box-shadow: none;
}
#section_validation_banner_bg .bg_delta_badge span { 
    font-size: 11px; 
    color: #64748b; 
    margin-bottom: 4px; 
    font-weight: 600;
}
#section_validation_banner_bg .bg_delta_badge strong { 
    font-size: 20px !important; 
    font-weight: 900; 
    color: var(--primary-color); 
}
#section_validation_banner_bg .banner_sample_stack {
    display: flex;
    flex-direction: column;
    position: relative;
    margin: auto 0;
    padding-left: 28px;
}
#section_validation_banner_bg .banner_sample_stack::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 25px;
    bottom: 25px;
    width: 1px;
    background: rgba(0, 0, 0, 0.08); 
}
#section_validation_banner_bg .bs_item {
    display: flex;
    align-items: flex-start;
    background: transparent;
    border: none;
    padding: 22px 0;
    position: relative;
}
#section_validation_banner_bg .bs_item::before {
    content: '';
    position: absolute;
    left: -27px;
    top: 29px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary-color) !important;
    box-shadow: 0 0 0 6px #f9f9f6 !important;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
}
#section_validation_banner_bg .bs_item:hover::before {
    transform: scale(1.5);
}
#section_validation_banner_bg .bs_n {
    font-size: 28px;
    font-weight: 900;
    color: var(--primary-color) !important;
    width: 95px;
    flex-shrink: 0;
    letter-spacing: -1px;
    line-height: 1;
    margin-top: 2px;
    transition: transform 0.4s ease;
}
#section_validation_banner_bg .bs_item:hover .bs_n {
    transform: translateX(6px);
}
#section_validation_banner_bg .bs_txt {
    display: flex;
    flex-direction: column;
}
#section_validation_banner_bg .bs_txt strong {
    font-size: 22px;
    font-weight: 800;
    color: var(--text-color)111;
    display: block;
    margin-bottom: 6px;
    letter-spacing: -0.5px;
}
#section_validation_banner_bg .bs_txt span {
    font-size: 18px;
    color: #64748b;
    display: block;
    line-height: 1.5;
    word-break: keep-all;
}

#section_validation_banner_bg .bento_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: 16px;
    height: 100%;
    margin-top: 24px;
}
#section_validation_banner_bg .bento_cell {
    background: #ffffff;
    border-radius: 20px;
    padding: 30px 24px;
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#section_validation_banner_bg .bento_cell:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}
#section_validation_banner_bg .bento_lbl {
    font-size: 14px;
    font-weight: 800;
    color: #64748b;
    letter-spacing: -0.5px;
    margin-bottom: auto;
    line-height: 1.4;
    word-break: keep-all;
}
#section_validation_banner_bg .bento_ratio_visual {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 24px;
}
#section_validation_banner_bg .rv_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
#section_validation_banner_bg .rv_item strong {
    font-size: 32px;
    font-weight: 900;
    color: var(--text-color)111;
    letter-spacing: 0;
}
#section_validation_banner_bg .rv_item strong.blue {
    color: var(--primary-color);
}
#section_validation_banner_bg .rv_badge {
    font-size: 13px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 6px;
    letter-spacing: 0.5px;
}
#section_validation_banner_bg .rv_badge.gray { 
    background: #f1f5f9; 
    color: #475569; 
}
#section_validation_banner_bg .rv_badge.blue { 
    background: rgba(31, 97, 255, 0.1); 
    color: var(--primary-color); 
}
#section_validation_banner_bg .rv_divider {
    color: #cbd5e1;
    margin-top: 24px;
    transform: scale(1.2);
}
#section_validation_banner_bg .time_hero {
    margin-top: 20px;
}
#section_validation_banner_bg .time_hero strong {
    font-size: 33px;
    font-weight: 900;
    color: var(--text-color)111;
    letter-spacing: -1px;
}
#section_validation_banner_bg .time_sub.pill_style {
    display: inline-block;
    font-size: 14px;
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 8px 16px;
    border-radius: 30px;
    font-weight: 700;
    margin-top: 16px;
    width: fit-content;
}
#section_validation_banner_bg .disclaimer_box {
    border: 1px solid var(--primary-color);
    background: transparent;
    padding: 15px 20px;
    margin-top: 15px;
}
#section_validation_banner_bg .disclaimer_box strong {
    font-size: 12px;
    font-weight: 800;
    color: var(--primary-color);
    display: block;
    margin-bottom: 6px;
}
#section_validation_banner_bg .disclaimer_box p {
    font-size: 13px;
    color: #475569;
    margin: 0;
    line-height: 1.5;
    word-break: keep-all;
}
#section_validation_banner_bg .bento_cell.driving_cell {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: var(--primary-color);
    color: #ffffff;
    padding: 30px 36px;
}
#section_validation_banner_bg .driving_cell .bento_lbl.text_white {
    color: rgba(255, 255, 255, 0.8);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    display: block;
    font-size: 14px;
}
#section_validation_banner_bg .dc_sub {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}
#section_validation_banner_bg .dc_right strong {
    font-size: 58px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -1px;
}
#section_validation_banner_bg .banner_card_footer {
    border-top: 1px solid rgba(0,0,0,0.1);
    padding-top: 20px;
    margin-top: 0;
}
#section_validation_banner_bg .banner_card_footer strong {
    font-size: 14px;
    font-weight: 800;
    color: var(--text-color)111;
    display: block;
    margin-bottom: 6px;
}
#section_validation_banner_bg .banner_card_footer p {
    font-size: 13px;
    color: #475569;
    margin: 0;
    line-height: 1.6;
}

@media (max-width: 1024px) {
    #section_validation_banner_bg { height: auto; min-height: 100vh; padding: 100px 0; }
    #section_validation_banner_bg .banner_container { flex-direction: column; gap: 40px; padding: 0 20px; }
    #section_validation_banner_bg .banner_left_col,
    #section_validation_banner_bg .banner_right_col { width: 100%; }
    
    /* 카드 사이즈 및 타이틀 보완 */
    #section_validation_banner_bg .banner_card { width: 85vw !important; max-width: 520px; height: auto !important; min-height: 540px; padding: 40px 30px; margin: 0 auto; }
    #section_validation_banner_bg .bc_title { font-size: 26px !important; }

    /* 그래프 박스 겹침 방지 보완 */
    #section_validation_banner_bg .banner_graph_box { gap: 20px; height: 260px !important; }
    #section_validation_banner_bg .bg_col { width: 60px; }
    #section_validation_banner_bg .bg_val { font-size: 16px !important; }
    #section_validation_banner_bg .bg_val.blue { font-size: 22px !important; }
    #section_validation_banner_bg .bg_delta_badge strong { font-size: 16px !important; }

    /* 벤토 그리드 리스트 화 */
    #section_validation_banner_bg .bento_grid { grid-template-columns: 1fr; gap: 16px; }
    #section_validation_banner_bg .bento_cell.driving_cell { grid-column: 1 / -1; padding: 24px; }
    #section_validation_banner_bg .dc_right strong { font-size: 48px; }
}

@media (max-width: 768px) {
    #section_validation_banner_bg { padding: 60px 0; }
    #section_validation_banner_bg .banner_container { gap: 30px; padding: 0 20px; }
    
    /* 헤더 텍스트 보완 */
    #section_validation_banner_bg .banner_main_title { font-size: 28px; margin-bottom: 20px; }
    #section_validation_banner_bg .banner_desc { font-size: 14px; margin-bottom: 30px; line-height: 1.6; }
    
    /* 카드 모바일 꽉 차게 보완 */
    #section_validation_banner_bg .banner_card { width: 92vw !important; max-width: 100%; padding: 20px 20px; border-radius: 16px !important; min-height: auto; }
    #section_validation_banner_bg .bc_title { font-size: 22px !important; }

    /* 그래프 모바일 깨짐 완전 방지 */
    #section_validation_banner_bg .banner_graph_box { gap: 22px; height: 200px !important; margin: 15px 0; padding-bottom: 10px; }
    #section_validation_banner_bg .bg_col { width: 45px; }
    #section_validation_banner_bg .bg_val { font-size: 14px !important; margin-bottom: 8px; }
    #section_validation_banner_bg .bg_val.blue { font-size: 18px !important; }
    #section_validation_banner_bg .bg_lbl { font-size: 12px !important; margin-top: 10px; }
    #section_validation_banner_bg .bg_delta_badge span { font-size: 10px; }
    #section_validation_banner_bg .bg_delta_badge strong { font-size: 14px !important; }

    /* 리스트형 아이템 간격 및 폰트 축소 */
    #section_validation_banner_bg .banner_sample_stack::before { left: 3px; }
    #section_validation_banner_bg .bs_item { padding: 16px 0; }
    #section_validation_banner_bg .bs_item::before { width: 6px; height: 6px; left: -24px; top: 22px; box-shadow: 0 0 0 4px #f9f9f6 !important; }
    #section_validation_banner_bg .bs_n { font-size: 22px; width: 65px; margin-top: 0; }
    #section_validation_banner_bg .bs_txt strong { font-size: 18px; margin-bottom: 4px; }
    #section_validation_banner_bg .bs_txt span { font-size: 14px; }

    /* 벤토 그리드 모바일 보완 */
    #section_validation_banner_bg .bento_grid { margin-top: 16px; gap: 12px; }
    #section_validation_banner_bg .bento_cell { padding: 20px 16px; }
    #section_validation_banner_bg .rv_item strong { font-size: 26px; }
    #section_validation_banner_bg .time_hero strong { font-size: 26px; }
    #section_validation_banner_bg .time_sub.pill_style { font-size: 12px; padding: 6px 12px; margin-top: 12px; }
    
    /* 하단 주행거리 박스 세로 정렬로 변경 */
    #section_validation_banner_bg .bento_cell.driving_cell { flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px 20px; }
    #section_validation_banner_bg .dc_right strong { font-size: 38px; }
	#section_validation_banner_bg .disclaimer_box{margin-top: 0;}
}


/* ================================================================
   SECTION: 사용 흐름 (HOW TO USE - 황금 비율 배경 분할 & 플로팅 카드)
================================================================= */
#section_how_to_use {
    position: relative;
    background-color: #ffffff; 
    min-height: 100vh; 
    display: flex;
    align-items: center; 
    padding: 80px 0;
    overflow: hidden;
}

#section_how_to_use .htu_right_bg {
    position: absolute;
    top: 0;
    right: 0;
    width: 65%; 
    height: 100%;
    z-index: 1;
    display: flex;
    align-items: center; 
    background-color: #ffffff;
}

#section_how_to_use .htu_right_bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: left center; 
}

#section_how_to_use .htu_container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

#section_how_to_use .htu_header {
    max-width: 32%; 
    margin-bottom: 20px; 
}

#section_how_to_use .htu_eyebrow {
    font-size: 18px;
    font-weight: 800;
    color: var(--primary-color);
    margin-bottom: 12px;
    display: block;
    letter-spacing: 0.1em;
}

#section_how_to_use .htu_main_title {
    font-size: 42px;
    font-weight: 900;
    color: var(--text-color)111;
    line-height: 1.3;
    margin: 0 0 16px 0;
    letter-spacing: -1.5px;
}

#section_how_to_use .htu_desc {
    font-size: 16px;
    color: #64748b;
    margin: 0;
    line-height: 1.5;
}

#section_how_to_use .htu_card_grid {
    display: flex;
    gap: 24px; 
    flex-wrap: wrap;
    margin-top: 10px;
}

#section_how_to_use .htu_card {
    width: 250px; 
    background: #ffffff; 
    border-radius: 24px;
    padding: 24px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.05); 
    border: 1px solid rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

#section_how_to_use .htu_card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.1);
}

#section_how_to_use .htu_card_img_wrap {
    width: 100%;
    height: 140px; 
    background: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

#section_how_to_use .htu_card_img_wrap img {
    max-height: 145px;
    object-fit: contain;
}

#section_how_to_use .htu_step_label {
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-color);
    letter-spacing: 0.05em;
    margin-bottom: 8px;
    display: block;
}

#section_how_to_use .htu_step_title {
    font-size: 18px;
    font-weight: 800;
    color: var(--text-color)111;
    margin: 0 0 10px 0;
    letter-spacing: -0.5px;
}

#section_how_to_use .htu_step_desc {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
    word-break: keep-all;
    margin: 0;
}

@media (max-width: 1024px) {
    #section_how_to_use .htu_right_bg { width: 100%; }
    #section_how_to_use .htu_right_bg::after {
        content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to bottom, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.8) 40%, transparent 100%);
        z-index: 3;
    }
    #section_how_to_use .htu_header { max-width: 100%; text-align: center; }
    #section_how_to_use .htu_card_grid { justify-content: center; margin-top: 30px; }
}

@media (max-width: 768px) {
    #section_how_to_use { padding: 80px 0; }
    #section_how_to_use .htu_container { padding: 0 24px; }
    #section_how_to_use .htu_main_title { font-size: 32px; }
    #section_how_to_use .htu_card_grid { flex-direction: column; align-items: center; gap: 16px; }
    #section_how_to_use .htu_card { width: 100%; max-width: 340px; }
}
/* ================================================================
   지식재산권(IP) 
================================================================= */


#section_ip_split {
    position: relative;
    min-height: 80vh;
    display: flex;
    overflow-x: hidden;
}

#section_ip_split .bg_left {
    position: absolute;
    top: 0; left: 0;
    width: 50%; height: 100%;
    background-color: #0b1c3a;
    z-index: 1;
}

#section_ip_split .bg_right {
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 100%;
    background-color: #ffffff;
    z-index: 1;
}

#section_ip_split .ip_container {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#section_ip_split .center_product {
    position: absolute;
    left: 48%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 80%;
    max-height: 700px;
    z-index: 5;
    pointer-events: none;
}

#section_ip_split .center_product img {
    height: 100%;
    object-fit: contain;
}

#section_ip_split .ip_left_content {
    width: 40%;
    padding: 80px 40px 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #ffffff;
    box-sizing: border-box;
    z-index: 6;
}

#section_ip_split .ip_eyebrow {
    font-size: 18px;
    color: #fff;
    letter-spacing: 0.3em;
    margin-bottom: 20px;
}

#section_ip_split .ip_title {
    font-size: 51px;
    font-weight: 800;
    margin: 0;
    letter-spacing: -1.5px;
}

#section_ip_split .ip_divider {
    width: 60px;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.3);
    margin: 40px 0;
}

#section_ip_split .ip_desc h4 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

#section_ip_split .ip_desc p {
    font-size: 18px;
    line-height: 1.6;
    color: #b0c0d8;
    margin: 0;
}

#section_ip_split .ip_right_content {
    width: 40%;
    padding: 100px 40px 100px 120px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    z-index: 6;
}

#section_ip_split .ip_feature_list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

#section_ip_split .ip_feature_list li {
    display: flex;
    align-items: center;
    position: relative;
}

#section_ip_split .line {
    position: absolute;
    left: -80px;
    width: 80px;
    height: 1px;
    background-color: #cbd5e1;
    z-index: 1;
    top: 50%;
}

#section_ip_split .circle_num {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #ffffff;
    border: 3px solid #f1f5f9;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 800;
    color: #0b1c3a;
    z-index: 10;
    margin-right: 20px;
    flex-shrink: 0;
}

#section_ip_split .text_wrap {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color)111;
}
@media (max-width: 1024px) {
    #section_ip_split {
        flex-direction: column;
        min-height: auto;
        background-color: #0b1c3a; 
    }
    
    #section_ip_split .bg_left,
    #section_ip_split .bg_right {
        display: none; 
    }
    
    #section_ip_split .ip_container {
        flex-direction: column;
        align-items: center;
        width: 100%;
        padding: 60px 20px;
    }
    
    #section_ip_split .ip_left_content {
        width: 100%;
        padding: 0 0 40px 0;
        text-align: center;
        align-items: center;
        color: #ffffff;
    }
    
    #section_ip_split .ip_divider {
        margin: 20px auto;
    }

    #section_ip_split .center_product {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        height: 320px;
        margin: 10px 0 40px 0;
        display: flex;
        justify-content: center;
    }

    #section_ip_split .center_product img {
        height: 100%;
        max-height: 320px;
    }
    
    #section_ip_split .ip_right_content {
        width: 100%;
        max-width: 500px;
        padding: 40px 30px;
        background-color: #ffffff; 
        border-radius: 20px;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        box-sizing: border-box;
    }

    #section_ip_split .ip_right_content .ip_desc {
        color: #333333;
        margin-bottom: 30px;
        text-align: center;
    }

    #section_ip_split .ip_right_content .ip_desc h4 {
        color: var(--text-color)111;
    }

    #section_ip_split .ip_right_content .ip_desc p {
        color: var(--text-muted)666;
    }

    #section_ip_split .ip_feature_list {
        align-items: stretch;
        gap: 16px;
    }

    #section_ip_split .ip_feature_list li {
        background: #f8fafc;
        padding: 12px 16px;
        border-radius: 12px;
        border: 1px solid #e2e8f0;
    }

    #section_ip_split .line {
        display: none;
    }

    #section_ip_split .circle_num {
        width: 44px;
        height: 44px;
        font-size: 20px;
        margin-right: 16px;
    }

    #section_ip_split .text_wrap {
        font-size: 16px;
        color: var(--text-color)111;
    }
}

@media (max-width: 768px) {
    #section_ip_split .ip_title {
        font-size: 36px;
    }

    #section_ip_split .center_product {
        height: 260px;
    }

    #section_ip_split .center_product img {
        max-height: 260px;
    }
}

/* ==================================================== */
/* [SUPPORT] 배송/교환/반품 안내 페이지 전용 스타일 */
/* ==================================================== */
.guide_page_wrap { max-width: 1200px; margin: 0 auto; padding: 60px 0; font-family: inherit; }

/* 공통 섹션 */
.guide_section { margin-bottom: 80px; }
.guide_section:last-child { margin-bottom: 0; }

.guide_hd { text-align: center; margin-bottom: 40px; }
.guide_hd h3 { font-size: 32px; color: var(--text-color)827; font-weight: 700; margin: 0 0 16px; }
.guide_hd p { font-size: 16px; color: #6B7280; margin: 0; line-height: 1.6; word-break: keep-all; }

.guide_list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.guide_item { background: #F9FAFB; border: 1px solid #E5E7EB; border-radius: 12px; padding: 32px; }
.guide_item h4 { font-size: 18px; color: var(--text-color)827; font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.guide_item h4::before { content: ""; display: block; width: 6px; height: 6px; background: var(--primary-color, #1E3A8A); border-radius: 50%; }

.guide_item p { font-size: 15px; color: #4B5563; line-height: 1.6; margin: 0 0 10px; word-break: keep-all; }
.guide_item p:last-child { margin-bottom: 0; }
.guide_hd .guide_badge {
    display: inline-block;
    padding: 8px 20px;
    font-size: 18px;
    font-weight: 700;
    color: #FFFFFF;
    background: var(--primary-color, #1E3A8A);
    border-radius: 20px;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
/* 태블릿 및 모바일 반응형 (1024px 기준) */
@media (max-width: 1024px) {
    .guide_page_wrap { padding: 30px 0; }
    .guide_section { margin-bottom: 60px; }
    .guide_hd h3 { font-size: 28px; }
    .guide_hd p { font-size: 15px; }
    .guide_list { grid-template-columns: 1fr; gap: 16px; }
    .guide_item { padding: 24px; }
}
@media (max-width: 768px) {
    #bo_cate ul { 
        display: flex;
        flex-wrap: nowrap !important; 
        overflow-x: auto; 
        justify-content: flex-start !important; 
        padding: 0 15px 8px 15px !important; 
        margin: 0 !important; 
        -webkit-overflow-scrolling: touch; 
    }
    #bo_cate ul::-webkit-scrollbar { display: none; }
    #bo_cate ul { -ms-overflow-style: none; scrollbar-width: none; }
    #bo_cate li { flex-shrink: 0; }
}

/* ========================================= */
/* LEVELON ABOUT PAGE STYLE                  */
/* ========================================= */
.about_page_wr { width: 100%; background-color: #fff; color: var(--text-color);  overflow: hidden; }
.about_container { width: 100%; max-width: none; margin: 0; padding: 0; }

.ab_inner { max-width: 1400px; margin: 0 auto; padding: 0 20px; width: 100%; box-sizing: border-box; }
.sec_head { margin-bottom: 60px; }
.sec_head p { font-size: 18px; color: var(--text-muted); margin-top: 15px; }
.sec_title { font-size: 42px; font-weight: 900;  letter-spacing: -1px; line-height: 1.3; }
.text_center { text-align: center; }

/* ========================================= */
/* 1. HERO SECTION                           */
/* ========================================= */
.ab_hero {
    height: 100vh !important;
    min-height: 700px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(15, 23, 42, 0.75), rgba(15, 23, 42, 0.85)), url('/img/hero_meeting.jpg');
    background-size: cover;
    background-position: center;
    text-align: center;
    color: #fff;
    box-sizing: border-box;
}

.ab_hero_inner { max-width: 900px; margin: 0 auto; width: 100%; }
.hero_num { display: inline-block; font-size: 14px; font-weight: 700; color: #3b82f6; letter-spacing: 2px; margin-bottom: 12px; }
.ab_hero .en_title { font-size: 56px; font-weight: 900; margin-bottom: 12px; letter-spacing: -1px; }
.ab_hero .hero_sub { font-size: 16px; font-weight: 600; color: #94a3b8; letter-spacing: 3px; margin-bottom: 25px; }
.hero_line { width: 60px; height: 3px; background: #3b82f6; margin: 0 auto 30px auto; }
.ab_hero .kr_desc_wrap { width: 100%; }
.ab_hero .kr_desc { font-size: 19px; color: #cbd5e1; line-height: 1.85; word-break: keep-all; font-weight: 300; margin: 0 0 16px 0; }
.ab_hero .kr_desc:last-child { margin-bottom: 0; }

/* ========================================= */
/* 2. R&D DIRECTION                          */
/* ========================================= */
.ab_rnd { padding: 140px 0; background: #ffffff; color: var(--text-color); }
.rnd_box { max-width: 1280px; margin: 0 auto; text-align: left; }
.sec_badge { display: block; font-size: 13px; font-weight: 600; color: #888; letter-spacing: 2px; margin-bottom: 24px; }
.rnd_box h2 { font-size: 42px; font-weight: 700; color: var(--text-color); line-height: 1.3; letter-spacing: -1px; margin-bottom: 16px; word-break: keep-all; }
.rnd_box .desc { font-size: 18px; color: var(--text-muted); margin-bottom: 70px; font-weight: 400; word-break: keep-all; }
.question_grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-top: 1px solid var(--text-color); padding-top: 40px; margin-bottom: 60px; }
.q_item { background: transparent; border: none; border-radius: 0; padding: 0; box-shadow: none; display: flex; flex-direction: column; }
.q_num { font-size: 14px; font-weight: 600; color: var(--text-color); letter-spacing: 1px; margin-bottom: 30px; display: block; }
.q_text { font-size: 19px; line-height: 1.6; color: #333; word-break: keep-all; margin: 0; font-weight: 400; letter-spacing: -0.3px; }
.q_text strong { color: var(--text-color); font-weight: 700; }
.rnd_outro { font-size: 16px; color: #777; line-height: 1.6; margin: 0; word-break: keep-all; border-top: 1px solid #eaeaea; padding-top: 30px; }

/* ========================================= */
/* 3. WHAT WE DO                             */
/* ========================================= */
.ab_wwd { padding: 140px 0; position: relative; background-color: #0f172a; background-image: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.92)), url('/img/puzzle_bg.jpg'); background-size: cover; background-position: center; background-attachment: fixed; color: #fff; }
.ab_wwd .sec_title { color: #fff !important; }
.ab_wwd .sec_head p { color: #94a3b8 !important; }
.wwd_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; max-width: 1200px; margin: 0 auto; }
.wwd_card { position: relative; background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 50px 40px; overflow: hidden; transition: transform 0.3s ease, border-color 0.3s ease; }
.wwd_card:hover { transform: translateY(-5px); border-color: rgba(59, 130, 246, 0.5); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4); }
.wwd_card .num_bg { position: absolute; right: 10px; bottom: -10px; font-size: 140px; font-weight: 900; color: rgba(255, 255, 255, 0.03); line-height: 1; pointer-events: none; }
.wwd_card h4 { position: relative; font-size: 24px; font-weight: 800; color: #fff; margin-bottom: 20px; letter-spacing: -0.5px; }
.wwd_card p { position: relative; font-size: 16px; color: #94a3b8; line-height: 1.8; word-break: keep-all; font-weight: 300; }

/* ========================================= */
/* 4. OUR BUSINESS                           */
/* ========================================= */
.ab_biz { padding: 140px 0; background: #fff; }
.biz_accordion_wrap { display: flex; gap: 12px; width: 100%; max-width: 1400px; height: 500px; margin: 0 auto; box-sizing: border-box; }
.biz_card { position: relative; flex: 1 1 0%; height: 500px !important; border-radius: 12px; overflow: hidden; cursor: pointer; transition: flex 0.4s ease-in-out; box-shadow: 0 10px 30px rgba(0,0,0,0.08); background: #0f172a; }
.biz_img_wr { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.biz_img_wr img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.biz_accordion_wrap .biz_card:hover { flex: 2.8 1 0%; }
.biz_accordion_wrap .biz_card:hover .biz_img_wr img { transform: scale(1.05); }

.biz_img_wr.bed_wr { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; }
.biz_img_wr.bed_wr .bed_img { position: absolute !important; bottom: 0 !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; width: auto !important; min-width: 100% !important; height: 100% !important; min-height: 100% !important; max-width: none !important; object-fit: fill !important; }
.biz_accordion_wrap .biz_card:hover .bed_img { transform: translateX(-50%) scale(1.05) !important; transform-origin: center bottom !important; }

.biz_content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 40px 25px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.3) 25%, transparent 45%); z-index: 2; }
.biz_num { font-size: 13px; font-weight: 700; color: #3b82f6; letter-spacing: 2px; margin-bottom: 8px; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
.biz_content h4 { font-size: 19px; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.5px; white-space: nowrap; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
.biz_content p { font-size: 14px; line-height: 1.6; color: #e2e8f0; font-weight: 300; opacity: 0; transform: translateY(10px); transition: opacity 0.3s ease, transform 0.3s ease; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; margin: 0; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
.biz_card:hover .biz_content p { opacity: 1; transform: translateY(0); }

/* ========================================= */
/* 5. COMPANY INFO & MILESTONES              */
/* ========================================= */
.ab_info_milestone { padding: 140px 0; background: #11235A; color: #fff; }
.info_flex { display: flex; gap: 80px; max-width: 1400px; margin: 0 auto; padding: 0 20px; }
.info_left { flex: 1; }
.split_title { font-size: 32px; font-weight: 800; margin-bottom: 40px; }
.info_list { list-style: none; padding: 0; margin: 0; border-top: 2px solid rgba(255,255,255,0.2); }
.info_list li { display: flex; padding: 24px 0; border-bottom: 1px solid rgba(255,255,255,0.1); font-size: 16px; }
.info_list li .label { flex: 0 0 140px; font-weight: 700; color: #93c5fd; }
.info_list li .value { flex: 1; font-weight: 300; line-height: 1.5; }
.info_right { flex: 1; display: flex; align-items: center; }
.counter_grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; width: 100%; }
.c_box { background: rgba(255,255,255,0.05); padding: 45px 30px; text-align: center; border: 1px solid rgba(255,255,255,0.1); }
.c_box i { font-size: 36px; color: #3b82f6; margin-bottom: 20px; display: block; }
.c_box strong { display: block; font-size: 38px; font-weight: 800; margin-bottom: 10px; }
.c_box span { font-size: 15px; color: #cbd5e1; }

/* ========================================= */
/* RESPONSIVE: TABLET (1024px)               */
/* ========================================= */
@media (max-width: 1024px) {
    .ab_rnd { padding: 100px 0; }
    .question_grid { grid-template-columns: 1fr; gap: 30px; padding-top: 30px; }
    .rnd_box h2 { font-size: 32px; }
    .q_item { border-bottom: 1px solid #eaeaea; padding-bottom: 30px; }
    .q_item:last-child { border-bottom: none; }
    .q_num { margin-bottom: 12px; }
    
    .ab_wwd { padding: 100px 0; }
    .wwd_grid { grid-template-columns: 1fr; gap: 24px; }
    
    .ab_biz { padding: 100px 0; }
    .biz_accordion_wrap { flex-direction: column; height: auto !important; gap: 15px; }
    .biz_card { height: 220px !important; flex: none !important; }
    .biz_content p { opacity: 1; transform: translateY(0); }
    
    .ab_info_milestone { padding: 100px 0; }
    .info_flex { flex-direction: column; gap: 50px; }
}

/* ========================================= */
/* RESPONSIVE: MOBILE (768px)                */
/* ========================================= */

@media (max-width: 768px) {
    .sec_title { font-size: 30px; }
    .sec_head { margin-bottom: 40px; }
     .ab_hero { 
        height: auto !important; 
        min-height: 300px; 
        padding: 50px 20px 50px; 
    }
    .ab_hero .en_title { font-size: 34px; }
    .ab_hero .hero_sub { font-size: 13px; letter-spacing: 2px; margin-bottom: 20px; }
    .ab_hero .kr_desc { font-size: 16px; line-height: 1.7; }
    .hero_line { width: 40px; height: 2px; margin: 0 auto 24px auto; }
    
    .ab_rnd { padding: 40px 0; }
    .rnd_box h2 { font-size: 28px; }
    
    .ab_wwd { padding: 40px 0; }
    .wwd_card { padding: 40px 30px; }
    .wwd_card .num_bg { font-size: 100px; }
    
    .ab_biz { padding: 40px 0; }
    
    .ab_info_milestone { padding: 40px 0; }
    .info_list li { flex-direction: column; gap: 8px; padding: 20px 0; }
    .info_list li .label { flex: none; font-size: 15px; }
    .counter_grid { grid-template-columns: 1fr; gap: 20px; }
    .c_box { padding: 35px 25px; }
    .c_box strong { font-size: 32px; }
}


/* ========================================= */
/* LOCATION PAGE STYLE                       */
/* ========================================= */
.location_page_wr { 
    width: 100%; 
    background-color: #fff; 
    color: var(--text-color); 
    padding-bottom: 120px; 
}
.sub_page_header { 
    text-align: center; 
    padding: 90px 20px 80px; 
}
.sub_en_title { 
    font-size: 42px; 
    font-weight: 900; 
    color: #0f172a; 
    letter-spacing: -1px; 
    margin-bottom: 15px; 
}
.sub_kr_desc { 
    font-size: 16px; 
    color: #64748b; 
    font-weight: 400; 
}

/* ========================================= */
/* LOCATION MAP                              */
/* ========================================= */
.ab_map_sec { 
    width: calc(100% - 40px);
    max-width: 1600px;
    height: 550px;
    margin: 0 auto 100px auto;
    position: relative; 
    background: #e2e8f0; 
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}
.ab_map_sec:last-child { 
    margin-bottom: 0; 
}

.map_placeholder { 
    width: 100%; 
    height: 100%; 
    position: relative; 
}

.map_canvas, 
.map_placeholder .root_daum_roughmap, 
.map_placeholder .wrap_map { 
    width: 100% !important; 
    height: 100% !important; 
}

/* 플로팅 정보 박스 */
.map_info_box {
    position: absolute; 
    bottom: 30px; 
    left: 50%; 
    transform: translateX(-50%);
    width: 90%; 
    max-width: 900px;
    background: rgba(15, 23, 42, 0.95);
    backdrop-filter: blur(10px); 
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 35px 40px; 
    box-sizing: border-box; 
    color: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.3); 
    z-index: 10;
}
.map_tag { 
    display: inline-block; 
    font-size: 13px; 
    font-weight: 700; 
    color: #3b82f6; 
    letter-spacing: 2px; 
    margin-bottom: 8px; 
}
.map_info_box h4 { 
    font-size: 26px; 
    font-weight: 800; 
    margin-bottom: 8px; 
}
.map_info_box p { 
    font-size: 16px; 
    color: #cbd5e1; 
    margin-bottom: 20px; 
    word-break: keep-all; 
}
.map_contact { 
    display: flex; 
    gap: 30px; 
    font-size: 15px; 
    color: #94a3b8; 
    border-top: 1px solid rgba(255,255,255,0.1); 
    padding-top: 15px; 
}
.map_contact strong { color: #fff; }

/* ========================================= */
/* 반응형                                    */
/* ========================================= */
@media (max-width: 1024px) {
    #container { margin: 85px 0 0 !important; }
}

@media (max-width: 768px) {
    .sub_page_header { 
        padding: 40px 20px 40px; 
    }
    .sub_en_title { 
        font-size: 38px; 
    }
    
    .ab_map_sec { 
        width: 100%;
        height: auto;
        margin-bottom: 60px; 
        border-radius: 0;
    }
    .map_placeholder {
        display: flex;
        flex-direction: column;
    }
    .map_canvas, 
    .map_placeholder .root_daum_roughmap, 
    .map_placeholder .wrap_map {
        height: 350px !important; 
    }

    .map_info_box { 
        position: relative; 
        bottom: 0; 
        left: 0; 
        transform: none;
        width: 100%; 
        max-width: 100%;
        border-radius: 0;
        padding: 30px 20px; 
        box-shadow: none;
        background: #0f172a;
    }
    .map_info_box h4 { 
        font-size: 22px; 
    }
    .map_info_box p { 
        font-size: 15px; 
        margin-bottom: 16px; 
    }
    .map_contact { 
        flex-direction: column; 
        gap: 8px; 
    }
}
/* ========================================= */
/* Q&A / 1:1 문의 상단 공지사항 박스 (레이아웃 강제 수정본) */
/* ========================================= */
.qa_notice_box {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 40px;
    overflow: hidden;
}

/* 상단 헤더 영역 */
.qa_notice_box .nt_header {
    background: #f8fafc;
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
}

.qa_notice_box .nt_header p {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    margin: 0 !important;
    line-height: 1.5;
    word-break: keep-all;
}

/* 본문 2단 분할 영역 */
.qa_notice_box .nt_body {
    display: flex;
    gap: 40px;
    padding: 30px 24px;
}

.qa_notice_box .nt_col {
    flex: 1;
}

.qa_notice_box .nt_col h4 {
    font-size: 16px;
    font-weight: 800;
    color: #11235A;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    border: none !important;
}

/* 리스트 스타일 (테마 간섭 완벽 차단) */
.qa_notice_box .info_list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.qa_notice_box .info_list li {
	display: block;
    position: relative !important;
    padding: 0 0 0 12px !important; 
    margin: 0 0 14px 0 !important;
    font-size: 14px;
    color: #475569;
    line-height: 1.6 !important;
    word-break: keep-all;
}
.qa_notice_box .info_list li:last-child {
    margin-bottom: 0 !important;
}

.qa_notice_box .info_list li::before {
    content: '-' !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    color: #94a3b8;
    display: block !important;
    line-height: 1.6 !important;
}
.qa_notice_box .info_list li strong {
	margin-left: 3px;
    color: #3b82f6 !important;
    font-weight: 700 !important;
 }   

/* ========================================= */
/* 반응형 (768px 모바일 이하)                  */
/* ========================================= */
@media (max-width: 768px) {
    .qa_notice_box { margin-bottom: 30px; }
    .qa_notice_box .nt_header { padding: 16px 20px; }
    .qa_notice_box .nt_header p { font-size: 14px; }
    .qa_notice_box .nt_body { flex-direction: column; gap: 24px; padding: 24px 20px; }
    .qa_notice_box .info_list li { font-size: 13px; margin-bottom: 12px !important; }
}




/* ========================================= */
/* 홈페이지 리뉴얼 팝업 전용 (다크 테마)       */
/* ========================================= */

.hd_pops {
    top: 100px !important;
    left: 100px !important;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.hd_pops_footer {
    background: #0f172a !important; 
    color: #fff !important;
    border-top: 1px solid #334155 !important;
}

@media (max-width: 768px) {
    .hd_pops {
        position: fixed !important;
        top: 70px !important;           
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 92% !important; 
        max-width: 380px !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
    }
    
    .hd_pops_con {
        width: 100% !important;
        height: auto !important;
        max-height: 70vh !important;
        overflow-y: auto !important;
    }
}
.renewal_popup_wrap {
    text-align: center !important;
    padding: 30px 20px 20px !important;
    color: #f8fafc !important;
    background: #0f172a !important; /* 다크 네이비 배경 */
    box-sizing: border-box !important;
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
}

.renewal_popup_wrap h2 {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #ffffff !important;
    margin: 0 0 16px 0 !important;
    line-height: 1.3 !important;
    letter-spacing: -1px !important;
}

.renewal_popup_wrap .desc_main {
    font-size: 15px !important;
    color: #cbd5e1 !important; /* 밝은 회색 */
    line-height: 1.6 !important;
    margin: 0 0 10px 0 !important;
}

.renewal_popup_wrap .desc_main strong {
    color: #ffffff !important;
    font-weight: 700 !important;
}

.renewal_popup_wrap .desc_alert {
    font-size: 15px !important;
    color: #f87171 !important; 
    font-weight: 700 !important;
    line-height: 1.6 !important;
    margin: 15px 0 10px 0 !important;
}

.renewal_contact_box {
    background: #1e293b !important; 
    border: 1px solid #334155 !important;
    border-radius: 12px !important;
    padding: 25px 20px !important;
    margin-top: 30px !important;
}

.renewal_contact_box span {
    display: block !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
}

.renewal_contact_box strong {
    display: block !important;
    font-size: 32px !important;
    font-weight: 900 !important;
    color: #1F61FF !important; 
    line-height: 1 !important;
}

/* 모바일 반응형 */
@media (max-width: 768px) {
    .renewal_popup_wrap { padding: 30px 15px 25px !important; }
    .renewal_popup_wrap h2 { font-size: 22px !important; margin-bottom: 12px !important; }
    .renewal_popup_wrap .desc_main, .renewal_popup_wrap .desc_alert { font-size: 14px !important; }
    .renewal_contact_box { padding: 20px 15px !important; margin-top: 20px !important; }
    .renewal_contact_box span { font-size: 12px !important; }
    .renewal_contact_box strong { font-size: 26px !important; }
}


/* ========================================= */
/* LEVELON HOW TO USE VIDEO 스타일           */
/* ========================================= */

.howtouse_page_wr {
      width: 100%;
	  max-width: 1600px;
    background-color: #fff;
    color: var(--text-color);
    padding-bottom: 120px;
	margin: 0 auto; 
	text-align: center;
}




/* 탭 메뉴 */
.lv_video_tabs {
    list-style: none;
    margin: 0 0 50px 0;
    padding: 0;
    display: inline-flex;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
    gap: 40px;
}

.lv_video_tabs li {
    margin: 0;
    padding: 0;
}

.lv_video_tabs a {
    display: block;
    text-decoration: none;
    color: var(--text-muted, #6B7280);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 5px;
    position: relative;
    transition: color 0.3s;
}

.lv_video_tabs a:hover {
    color: var(--text-color)111;
}

.lv_video_tabs li.active a {
    color: var(--primary-color, #1E3A8A);
    font-weight: 700;
}

.lv_video_tabs li.active a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color, #1E3A8A);
}

/* 영상 콘텐츠 래퍼 */
.lv_video_wrapper {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-bottom: 56.25%;
    background-color: #f3f4f6;
    border-radius: 4px;
    overflow: hidden;
}

.lv_video_wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.placeholder_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #9ca3af;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.6;
}

.placeholder_box span { 
    font-size: 13px; 
}

/* 커밍순 영역 */
.lv_coming_soon {
    padding: 100px 20px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    max-width: 1200px;
    margin: 0 auto;
}

.lv_coming_soon h3 {
    font-size: 24px;
    color: var(--text-color)111;
    margin-bottom: 15px;
    font-style: italic;
}

.lv_coming_soon p {
    font-size: 15px;
    color: #6b7280;
}

/* 태블릿 및 모바일 분기 */
@media (max-width: 768px) {
    .lv_video_tabs {
        gap: 20px;
    }
    .lv_video_tabs a {
        font-size: 14px;
    }
}


/* ========================================= */
/* LEVELON HOW TO USE MANUAL 스타일 (최적화) */
/* ========================================= */

.howtouse_page_wr {
    max-width: 1600px;
    margin: 0 auto 100px;
    padding: 0 20px;
    text-align: center;
}

/* ======================================= */
/* 탭 메뉴 */
/* ======================================= */
.lv_manual_tabs {
    list-style: none;
    margin: 0 0 40px 0;
    padding: 0;
    display: inline-flex;
    border-bottom: 1px solid var(--border-color, #E5E7EB);
    gap: 40px;
    flex-wrap: wrap; 
    justify-content: center;
}

.lv_manual_tabs li { margin: 0; padding: 0; }
.lv_manual_tabs a {
    display: block;
    text-decoration: none;
    color: var(--text-muted, #6B7280);
    font-size: 16px;
    font-weight: 600;
    padding: 10px 5px;
    position: relative;
    transition: color 0.3s;
}

.lv_manual_tabs a:hover { color: var(--text-color)111; }
.lv_manual_tabs li.active a {
    color: var(--primary-color, #1E3A8A);
    font-weight: 700;
}
.lv_manual_tabs li.active a::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: var(--primary-color, #1E3A8A);
}

/* ======================================= */
/* 매뉴얼 본문 뷰어 */
/* ======================================= */
.lv_manual_viewer {
    max-width: 1200px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    padding: 60px 40px;
    text-align: left;
    min-height: 500px;
}

.lv_manual_viewer img {
    max-width: 100%;
    height: auto;
    display: block;
}

.manual_section { margin-bottom: 40px; }
.manual_title {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--text-color);
}
.manual_title span {
    color: var(--primary-color, #1E3A8A);
    margin-right: 10px;
}
.manual_desc {
    font-size: 16px;
    line-height: 1.8;
    color: #444;
    word-break: keep-all;
    margin-bottom: 30px;
}

/* ======================================= */
/* 3단 정보 박스 */
/* ======================================= */
.manual_spec_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.spec_box {
    background: #f9f9f9;
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
}
.spec_box h4 {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color, #1E3A8A);
    margin-bottom: 10px;
}
.spec_box p {
    font-size: 14px;
    color: var(--text-muted);
    margin: 0;
}

/* ======================================= */
/* 분해 이미지 및 구성품 테이블 */
/* ======================================= */
.manual_img_wrap {
    margin: 40px 0;
    text-align: center;
    background: #f9f9f9;
    padding: 30px;
    border-radius: 8px;
}
.manual_img_caption {
    font-size: 13px;
    text-align: center;
    color: #888;
    margin-top: 15px;
    margin-bottom: 20px;
}
.manual_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 60px;
    border-top: 2px solid var(--text-color);
}
.manual_table th, .manual_table td {
    padding: 20px 15px;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    font-size: 15px;
    line-height: 1.6;
}
.manual_table th {
    background: #fdfdfd;
    font-weight: 700;
    color: #333;
    white-space: nowrap;
}
.manual_table td { color: var(--text-muted); }
.manual_sub_title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 15px;
}

/* ======================================= */
/* 4분할 시트 텍스트 오버레이 */
/* ======================================= */
.seat_zone_wrapper {
    max-width: 469px;
    margin: 40px auto;
    text-align: center;
}
.zone_direction {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 15px 0;
}
.seat_zone_inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
}
.zone_direction_side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    color: #888;
}
.zone_direction_side.left { left: -50px; }
.zone_direction_side.right { right: -60px; }
.zone_box {
    position: absolute;
    width: 38%;
    height: 38%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.box_a { top: 9%; left: 9%; }
.box_b { top: 9%; right: 9%; }
.box_c { bottom: 9%; left: 9%; }
.box_d { bottom: 9%; right: 9%; }
.zone_alpha {
    font-size: 28px;
    font-weight: 800;
    color: var(--text-color);
    line-height: 1.2;
}
.zone_desc {
    font-size: 14px;
    font-weight: 500;
    color: #333;
}

/* ======================================= */
/* 커밍순 영역 */
/* ======================================= */
.lv_coming_soon {
    padding: 100px 20px;
    background: #fafafa;
    border: 1px solid #f0f0f0;
    max-width: 900px;
    margin: 0 auto;
}
.lv_coming_soon h3 {
    font-size: 24px;
    color: var(--text-color)111;
    margin-bottom: 15px;
    font-style: italic;
}
.lv_coming_soon p {
    font-size: 15px;
    color: #6b7280;
}

/* ----------------------------------------- */
/* 태블릿 반응형 (1024px 이하)               */
/* ----------------------------------------- */
@media (max-width: 1024px) {
    .lv_manual_viewer {
        padding: 40px 30px;
    }
    .lv_manual_tabs {
        gap: 20px;
    }
    .zone_direction_side { 
        display: none; 
    }
    .manual_table thead{display: none;}
    .manual_table,
    .manual_table tbody,
    .manual_table tr,
    .manual_table th,
    .manual_table td {
        display: block;
        width: 100%;
		margin-bottom: 0px;
        box-sizing: border-box; 
    }
    .manual_table tr {
        margin-bottom: 20px;
        border: 1px solid #e5e7eb;
        border-bottom: none;
    }

    .manual_table th {
        border-bottom: none;
        padding: 15px;
        background: #f4f5f7; 
        border-bottom: 1px solid #e5e7eb;
    }

    .manual_table td {
        padding: 15px 15px 20px;
        border-bottom: 1px solid #e5e7eb; 
    }
}

/* ----------------------------------------- */
/* 모바일 반응형 (768px 이하)                */
/* ----------------------------------------- */
@media (max-width: 768px) {
    .lv_manual_viewer {
        padding: 30px 20px;
    }
    .manual_title {
        font-size: 22px;
    }
    .manual_desc {
        font-size: 15px;
    }
    
    .manual_spec_grid {
        grid-template-columns: 1fr; 
        gap: 15px;
    }
    
    .manual_table th, .manual_table td {
        display: block;
        width: 100%;
    }
    .manual_table th {
        border-bottom: none;
        padding: 15px 15px 5px;
        background: #f4f5f7; 
    }
    .manual_table td {
        padding: 5px 15px 5px;
        margin-bottom: 0;
    }
}

@media (max-width: 480px) {
    .lv_manual_tabs a {
        font-size: 14px;
    }
    
    .lv_pdf_btn {
        width: 100%;
        padding: 12px 20px;
    }
    
    .zone_alpha { font-size: 20px; }
    .zone_desc { font-size: 11px; }
    
    .manual_img_wrap {
        padding: 15px;
    }
}

/* ======================================= */
/* 03 교정원리 - 가로형 데이터 테이블 전용 */
/* ======================================= */
.scroll_table_wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 40px;
    padding-bottom: 10px;
}

.angle_table {
    width: 100%;
    min-width: 700px; 
    border-collapse: collapse;
    text-align: center;
    border-top: 2px solid var(--text-color);
    border-bottom: 1px solid #e5e7eb;
}

.angle_table th, 
.angle_table td {
    padding: 15px 10px;
    font-size: 15px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.angle_table tr:first-child {
    background-color: #f8f6f5; 
}

.angle_table tr:first-child th,
.angle_table tr:first-child td {
    font-weight: 700;
    color: #333;
    border-bottom: 1px solid #e5e7eb;
}

.angle_table th {
    font-weight: 700;
    color: var(--text-color);
    white-space: nowrap; 
}

.angle_table td {
    color: var(--text-muted);
}

.scroll_guide {
    display: none;
    font-size: 12px;
    color: #888;
    text-align: right;
    margin-bottom: 5px;
}

@media (max-width: 768px) {
    .scroll_guide {
        display: block; 
    }
}

/* ======================================= */
/* 03 교정원리 - 단면도 텍스트 오버레이    */
/* ======================================= */
.wedge_diagram_wrap {
    position: relative;
    max-width: 800px;
    margin: 40px auto 15px;
}

.wedge_diagram_wrap img {
    width: 100%;
    height: auto;
    display: block;
}

.diagram_text {
    position: absolute;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    line-height: 1.4;
    white-space: nowrap; 
}

.diagram_text.red_txt {
    color: #e53e3e; 
    text-align: center;
    top: 15%;
    left: 45%;
    transform: translateX(-50%);
}

.diagram_text.size_txt {
    top: 30%;
    right: -1%;
}

.diagram_text.height_40 {
    top: 45%;
    left: 3%;
    transform: translateY(-50%);
}

.diagram_text.height_5 {
    top: 51%;
    right: 0;
    transform: translateY(-50%);
}

.diagram_text.wedge_1 {
    top: 61%;
    left: 16%;
}

.diagram_text.wedge_3 {
    top: 61%;
    right: 25%;
}

.diagram_text.velcro {
    bottom: 4%;
    right: 11%;
}

@media (max-width: 768px) {
    .diagram_text { font-size: 13px; }
}

@media (max-width: 480px) {
    .diagram_text { 
        font-size: 10px; 
        letter-spacing: -0.5px;
    }
    .diagram_text.red_txt { top: 12%; }
}

/* ======================================= */
/* 04 X-ray 분석 결과 - 순서도             */
/* ======================================= */
.xray_flow_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin: 40px 0 20px;
    background: #f9f9f9;
    padding: 40px 20px;
    border-radius: 8px;    
}

.flow_step {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 25px 20px;
    text-align: center;
    width: 220px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.flow_step_title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px dashed #e5e7eb;
}

.flow_arrow {
    font-size: 24px;
    color: #cbd5e1;
}

.flow_text_only {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    padding: 30px 0;
}

.flow_grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.flow_grid_item {
    background: #fdf2f8; 
    color: #be185d;
    padding: 12px 0;
    border-radius: 6px;
    font-weight: 700;
    font-size: 15px;
}

.wedge_grid_new {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px 10px;
}

.wedge_wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end; 
    height: 60px; 
}

.wedge_shape {
    width: 60px;
    background-color: #f97316; 
    clip-path: polygon(0 100%, 100% 100%, 100% 0);
    margin-bottom: 8px;
}

.shape_1 { height: 1px; }
.shape_3 { height: 3.1px; }
.shape_5 { height: 5.3px; }
.shape_7 { height: 7.4px; }

.wedge_wrapper span {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-muted);
}

.zone_color_a, 
.zone_color_b { 
    background: #e8cfd4; 
    color: #333;         
    border: 1px solid #dcbcc3; 
} 

.zone_color_c, 
.zone_color_d { 
    background: #dbb5bd; 
    color: #333;        
    border: 1px solid #cfa6ae; 
}

@media (max-width: 768px) {
    .xray_flow_wrap {
        flex-direction: column;
        padding: 30px 20px;
        gap: 15px;
    }
    .flow_step {
        width: 100%;
        box-sizing: border-box;
    }
    .flow_arrow {
        transform: rotate(90deg); 
        margin: 5px 0;
    }
}

/* ======================================= */
/* 05 웨지 삽입 방법 - 스텝 리스트 및 경고창 */
/* ======================================= */
.step_list_wrap {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 40px 0;
    font-family: 'Pretendard', sans-serif;
}

.step_item {
    display: flex;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.01);
}

.step_num {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #a06e78; 
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    margin-right: 15px;
    margin-top: 2px;
}

.step_content {
    flex: 1;
}

.step_title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-color);
    margin-bottom: 8px;
}

.step_desc {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.6;
    word-break: keep-all;
    margin: 0;
}

.warning_box {
    background-color: #fcf4f5;
    border-left: 4px solid #dcaeb6;
    padding: 20px;
    border-radius: 4px;
    margin-top: 30px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.warning_box i {
    color: #b56c7a;
    font-size: 20px;
    margin-top: 2px;
}

.warning_text {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 480px) {
    .step_item {
        padding: 15px;
    }
    .step_title {
        font-size: 16px;
    }
    .step_desc {
        font-size: 14px;
    }
    .warning_box {
        padding: 15px;
    }
    .warning_text {
        font-size: 14px;
    }
}

/* ======================================= */
/* 06 설정 예시 - 테이블 중앙 정렬 보조    */
/* ======================================= */
.manual_table.text_center th,
.manual_table.text_center td {
    text-align: center;
}

/* ======================================= */
/* 06 설정 예시 - 4분할 색상 오버레이      */
/* ======================================= */
.example_box {
    position: absolute;
    width: 39%;
    height: 39%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 12%;
}

.example_box .zone_alpha {
    font-size: 22px;
    font-weight: 700;
    color: #333;
    line-height: 1.2;
}

.example_box .zone_degree {
    font-size: 32px;
    font-weight: 800;
    color: var(--text-color);
}

.example_box.box_a { top: 8.5%; left: 8.5%;}  
.example_box.box_b { top: 8.5%; right: 8.5%;} 
.example_box.box_c { bottom: 8.5%; left: 8.5%;}
.example_box.box_d { bottom: 8.5%; right: 8.5%;} 

.example_box.box_c .zone_alpha,
.example_box.box_c .zone_degree {
    color: #ffffff;
}

@media (max-width: 480px) {
    .example_box .zone_alpha { font-size: 16px; }
    .example_box .zone_degree { font-size: 24px; }
}

/* ======================================= */
/* 07 사용 시 주의사항                     */
/* ======================================= */
.danger_box {
    background-color: #fef2f2;
    border-left: 4px solid #ef4444;
    padding: 20px;
    border-radius: 4px;
    margin-bottom: 30px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.danger_box i {
    color: #ef4444;
    font-size: 20px;
    margin-top: 2px;
}

.danger_text {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    margin: 0;
}

.notice_list {
    list-style: none;
    padding: 0;
    margin: 20px auto 0 ;
}

.notice_list li {
    position: relative;
    padding-left: 18px;
    margin-bottom: 15px;
    font-size: 16px;
    color: #444;
    line-height: 1.7;
    word-break: keep-all;
}

.notice_list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    background-color: #888;
    border-radius: 50%;
}

.badge_tip {
    display: inline-block;
    background: #fffbeb;
    border: 1px dashed #fde68a;
    color: #92400e;
    font-size: 13px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 5px;
    vertical-align: text-bottom;
}

@media (max-width: 480px) {
    .danger_box { padding: 15px; }
    .danger_text { font-size: 14px; }
    .notice_list li { font-size: 15px; padding-left: 15px; }
    .badge_tip { 
        display: inline-block; 
        margin-left: 0; 
        margin-top: 3px; 
    }
}

/* ========================================= */
/* TECHNOLOGY           */
/* ========================================= */

.tech_band {
    width: var(--true-vw, 100vw);
    margin-left: calc(50% - (var(--true-vw, 100vw) / 2));
    position: relative;
}
.tech_inner {
    max-width: 1600px;
    margin: 0 auto;
    padding: 140px 40px; 
}

/* --- 1. 히어로 영역 --- */
.hero_band {
    min-height: calc(100vh - 90px); 
    background: #fff;
    display: flex;
    flex-direction: column;
}
.hero_inner {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 0 40px;
}
.hero_text { width: 45%; display: flex; flex-direction: column; justify-content: center; padding-right: 5%; }
.hero_label { font-size: 15px; font-weight: 800; color: #1E3A8A; letter-spacing: 2px; margin-bottom: 20px; text-transform: uppercase; }
.hero_title { font-size: 56px; font-weight: 900; line-height: 1.25; margin-bottom: 30px; letter-spacing: -1.5px; word-break: keep-all; }
.hero_desc { font-size: 19px; color: var(--text-muted); line-height: 1.7; word-break: keep-all; }
.hero_visual {
    width: 50%;
    background: url('/img/hero_visual.jpg') no-repeat center center / cover;
    border-radius: 40px 0 0 40px; 
    margin: 50px 0 50px 40px;
}
.dark_band { background: #0a0a0a; color: #fff; }
.dark_band::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(circle at 50% 0%, rgba(30,58,138,0.2) 0%, transparent 60%);
    pointer-events: none;
}
.dark_title { font-size: 42px; font-weight: 800; margin-bottom: 25px; letter-spacing: -1px; position: relative; z-index: 2; line-height: 1.3; }
.dark_desc { font-size: 19px; color: #a3a3a3; line-height: 1.7; margin-bottom: 80px; word-break: keep-all; position: relative; z-index: 2; max-width: 900px; }
.tech_grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; z-index: 2; }
.dark_inner.type2 .tech_grid{grid-template-columns: repeat(3, 1fr);}
.tech_card { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); padding: 50px 40px; border-radius: 16px; transition: all 0.3s; }
.tech_card:hover { background: #1E3A8A; border-color: #3b82f6; transform: translateY(-10px); }
.tech_card_badge { display: inline-block; font-size: 13px; font-weight: 800; color: #60a5fa; margin-bottom: 20px; }
.tech_card:hover .tech_card_badge { color: #fff; }
.tech_card h4 { font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 15px 0; word-break: keep-all; line-height: 1.3; }
.tech_card p { font-size: 16px; color: #9ca3af; margin: 0; line-height: 1.6; word-break: keep-all; }
.tech_card:hover p { color: rgba(255,255,255,0.9); }
.light_band { background: #fcfcfd; }
.split_layout { display: flex; flex-wrap: wrap; gap: 80px; align-items: center; }
.split_text { flex: 1; min-width: 500px; }
.sec_badge { display: inline-block; font-size: 13px; font-weight: 800; color: #3b82f6; background: #eff6ff; padding: 5px 14px; border-radius: 20px; margin-bottom: 15px; letter-spacing: 1px; text-transform: uppercase; }
.sec_title { font-size: 42px; font-weight: 900; color: var(--text-color); margin-bottom: 25px; letter-spacing: -1px; word-break: keep-all; line-height: 1.3; }
.sec_desc { font-size: 18px; color: var(--text-muted); line-height: 1.65; margin-bottom: 40px; word-break: keep-all; margin-top: 30px; }
.sec_desc strong { color: #1E3A8A; font-weight: 800; }
.level_process { display: flex; flex-direction: column; gap: 15px; }
.process_item { display: flex; align-items: flex-start; gap: 20px; background: #fff; padding: 25px 30px; border-radius: 16px; box-shadow: 0 4px 15px rgba(0,0,0,0.02); border: 1px solid #f0f0f0; transition: transform 0.3s, border-color 0.3s; }
.process_item:hover { transform: translateY(-3px); border-color: #1E3A8A; box-shadow: 0 10px 20px rgba(30,58,138,0.05); }
.p_icon { flex-shrink: 0; width: 40px; height: 40px; background: #1E3A8A; color: #fff; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 900; box-shadow: 0 4px 10px rgba(30,58,138,0.2); }
.p_text strong { display: block; font-size: 18px; color: var(--text-color); font-weight: 800; margin-bottom: 5px; }
.p_text span { display: block; font-size: 15px; color: #444; margin-bottom: 8px; font-weight: 600; }
.p_text p { font-size: 14px; color: #888; margin: 0; line-height: 1.5; word-break: keep-all; }
.split_visual { flex: 1; min-width: 500px; background: #fff; border: 1px solid #e5e7eb; border-radius: 16px; text-align: center; box-shadow: 0 15px 35px rgba(0,0,0,0.03); display: flex; flex-direction: column; overflow: hidden; }
.visual_header { background: #fdfdfd; border-bottom: 1px solid #e5e7eb; padding: 12px 20px; display: flex; justify-content: space-between; align-items: center; }
.vh_label { font-size: 12px; color: #1E3A8A; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; background: #eff6ff; padding: 4px 10px; border-radius: 4px; }
.vh_code { font-size: 13px; color: #888; font-weight: 600; letter-spacing: 0.5px; }
.visual_body { padding: 50px 40px; background: #fff; display: flex; justify-content: center; align-items: center; min-height: 350px; }
.visual_footer { background: #fafafa; border-top: 1px solid #e5e7eb; padding: 20px 25px; text-align: left; }
.visual_footer p { font-size: 14px; color: var(--text-muted); margin: 0; word-break: keep-all; line-height: 1.6; }
.visual_footer p strong { color: var(--text-color); font-weight: 700; }
.wedge_diagram_wrap .diagram_text { position: absolute; font-size: 13px; font-weight: 700; line-height: 1.2; }
.red_txt { color: #e11d48; top: 15%; left: 35%; text-align: center; }
.size_txt { color: var(--text-muted); top: 40%; right: 10%; }
.height_40 { color: var(--text-muted); top: 50%; left: 5%; }
.wedge_1 { color: #1E3A8A; bottom: 35%; left: 25%; }
.wedge_3 { color: #1E3A8A; bottom: 35%; right: 30%; }
.height_5 { color: var(--text-muted); top: 55%; right: 10%; }
.velcro { color: var(--text-muted); bottom: 10%; right: 25%; }
.tech_steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-top: 40px; }
.tech_step_item { background: #fff; border: 1px solid #e5e7eb; padding: 40px 30px; border-radius: 16px; display: block; box-shadow: none; }
.tech_step_item h5 { font-size: 20px; font-weight: 800; color: var(--text-color); margin: 0 0 15px 0; }
.tech_step_item h5 span { color: #1E3A8A; margin-right: 15px; font-size: 16px; }
.tech_step_item p { font-size: 16px; color: var(--text-muted); margin: 0; line-height: 1.6; word-break: keep-all; }
.faq_band { background: #fff; }
.tech_faq_wrap { max-width: 1000px; margin: 0 auto; }
.tech_faq { border-top: 2px solid var(--text-color); }
.tech_faq details { border-bottom: 1px solid #e5e7eb; }
.tech_faq summary { padding: 30px 0; font-size: 19px; font-weight: 800; color: var(--text-color); cursor: pointer; outline: none; list-style: none; position: relative; }
.tech_faq summary::-webkit-details-marker { display: none; }
.tech_faq summary::after { content: '+'; position: absolute; right: 0; top: 30px; font-size: 24px; color: #1E3A8A; font-weight: 400; }
.tech_faq[open] summary::after { content: '-'; }
.tech_faq p { padding: 0 0 30px 0; font-size: 17px; color: var(--text-muted); line-height: 1.7; background: #fff; }
.tech_table { width: 100%; border-collapse: collapse; font-size: 17px; }
.tech_table th, .tech_table td { padding: 25px 15px; border-bottom: 1px solid #e5e7eb; text-align: left; }
.tech_table th { font-weight: 800; color: #1E3A8A; }
.tech_table td { color: #444; line-height: 1.6; }
@media (max-width: 1024px) {
	.hero_band { min-height: auto; }
    .tech_grid { grid-template-columns: repeat(2, 1fr); }
    .hero_inner { flex-direction: column; padding: 0; }
    .hero_text { width: 100%; padding: 80px 40px; text-align: center; }
    .hero_visual { width: 100%; height: 400px; border-radius: 0; margin: 0; } 
    .split_layout { flex-direction: column; gap: 30px; }
    .split_text, .split_visual { min-width: 100% !important; width: 100%; }
    .tech_steps { grid-template-columns: 1fr; }
    .hero_title { font-size: 46px; }
    .sec_title, .dark_title { font-size: 36px; }
	.split_history_layout { 
		margin-top: 0 !important;
        flex-direction: column !important; 
        gap: 40px !important; 
    }
    .history_img_col { 
        order: 2; 
        width: 100%;
    } 
    .history_timeline_col { 
        order: 1; 
        width: 100%; 
    }
    .left_title, .left_desc { 
        text-align: center !important; 
    }
    .split_cert_layout { 
        flex-direction: column !important; 
        gap: 40px !important; 
    }
    .cert_teaser_col { 
        width: 100% !important; 
    }
}

@media (max-width: 768px) {
	.hero_band { min-height: auto; }
    .tech_inner { padding: 50px 20px !important; }
    .hero_text { padding: 0px 20px 40px; }
    .hero_visual { height: 300px; } 
    .hero_label, .sec_badge { font-size: 12px; }
    .hero_title { font-size: 32px; margin-bottom: 20px; }
    .hero_desc { font-size: 16px; }
    .sec_title, .dark_title { font-size: 27px; margin-bottom: 15px; }
    .sec_desc, .dark_desc { font-size: 15px; margin-bottom: 40px; margin-top: 20px; }
    .tech_grid { grid-template-columns: 1fr; gap: 15px; }
    .dark_inner.type2 .tech_grid { grid-template-columns: 1fr; }
    .tech_card { padding: 30px 25px; }
    .tech_card h4 { font-size: 20px; }
    .tech_card p { font-size: 14px; }
    .tech_step_item { padding: 25px 20px; }
    .tech_step_item h5 { font-size: 18px; margin-bottom: 10px; }
    .tech_step_item p { font-size: 14px; }
    .process_item { flex-direction: column; align-items: flex-start; text-align: left; padding: 25px 20px; gap: 15px; }
    .p_text strong { font-size: 16px; }
    .p_text span { font-size: 14px; }
    .visual_header { padding: 10px 15px; }
    .visual_body { padding: 15px 10px; min-height: 250px; }
    .visual_footer { padding: 15px 20px; }
    .visual_footer p { font-size: 13px; }
    .wedge_diagram_wrap .diagram_text { font-size: 10px; }
    .tech_faq summary { font-size: 16px; padding: 20px 0; }
    .tech_faq summary::after { top: 20px; }
    .tech_faq p { font-size: 15px; padding-bottom: 20px; }
}




/* ========================================= */
/* 3. Patents & Certifications  */
/* ========================================= */
.center_title { text-align: center; margin-bottom: 20px; font-weight: 800; font-size: 40px; letter-spacing: -1px; color: var(--text-color); }
.center_desc { text-align: center; margin-bottom: 80px;}
.tech_grid.grid_3 { grid-template-columns: repeat(3, 1fr); gap: 24px; width:auto;}
.mt_10 { margin-top: 10px; }
.mb_30 { margin-bottom: 30px; }
.cert_hero_band { 
    min-height: calc(100vh - 90px); 
    display: flex; 
    flex-direction: column; 
    justify-content: center; 
    background-color: #ffffff; 
    background-image: 
        linear-gradient(rgba(30, 58, 138, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30, 58, 138, 0.04) 1px, transparent 1px);
    background-size: 50px 50px; 
    position: relative; 
    overflow: hidden;
} 
.cert_hero_band::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%); 
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(30, 58, 138, 0.05) 0%, rgba(255,255,255,0) 70%);
    z-index: 1;
    pointer-events: none; 
}
.cert_hero_inner { 
    text-align: center; 
    position: relative; 
    z-index: 2; 
    width: 100%;
    transform: translateY(-30px); 
}
.cert_hero_badge { display: inline-block; font-size: 14px; letter-spacing: 2px; font-weight: 800; margin-bottom: 20px; color: var(--text-color); background: #f1f5f9; padding: 8px 18px; border-radius: 30px; text-transform: uppercase; }
.cert_hero_title { font-size: 48px; margin-bottom: 25px; font-weight: 900; letter-spacing: -1.5px; color: var(--text-color); line-height: 1.3; }
.cert_hero_desc { margin: 0 auto; max-width: 700px; font-weight: 500; font-size: 18px; color: var(--text-muted); line-height: 1.6; word-break: keep-all; }
.cert_hero_desc strong { color: var(--primary-color); font-weight: 800; }
.typo_card { 
    border: none; 
    padding: 45px 40px; 
    border-radius: 28px; 
    text-align: left; 
    position: relative; 
    overflow: hidden; 
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    display: block; 
}
.typo_card:hover { transform: translateY(-10px); box-shadow: 0 15px 35px rgba(30,58,138,0.15); }
.bg_num { 
    position: absolute; 
    top: 10px; 
    right: 20px; 
    font-size: 110px; 
    font-weight: 900; 
    line-height: 1; 
    z-index: 1; 
    transition: transform 0.3s; 
    letter-spacing: -5px;
}
.typo_card:hover .bg_num { transform: scale(1.05) translateX(5px); }
.typo_card_inner { position: relative; z-index: 2; }
.t_label { display: inline-block; font-size: 13px; letter-spacing: 1.5px; font-weight: 800; margin-bottom: 25px; text-transform: uppercase; padding: 6px 14px; border-radius: 20px; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
.typo_card_inner strong { display: block; margin-bottom: 15px; font-weight: 800; font-size: 21px; letter-spacing: -0.5px; }
.typo_card_inner p { font-weight: 500; font-size: 16px; line-height: 1.6; word-break: keep-all; margin: 0; }
.tech_grid .typo_card:nth-child(1) { background: rgba(30, 58, 138, 0.04); }
.tech_grid .typo_card:nth-child(1) .bg_num { color: rgba(30, 58, 138, 0.04); }
.tech_grid .typo_card:nth-child(1) .t_label { color: var(--primary-color); background: #fff; }
.tech_grid .typo_card:nth-child(1) strong { color: var(--text-color); }
.tech_grid .typo_card:nth-child(1) p { color: var(--text-muted); }
.tech_grid .typo_card:nth-child(2) { background: rgba(30, 58, 138, 0.15); }
.tech_grid .typo_card:nth-child(2) .bg_num { color: rgba(30, 58, 138, 0.08); }
.tech_grid .typo_card:nth-child(2) .t_label { color: var(--primary-color); background: #fff; }
.tech_grid .typo_card:nth-child(2) strong { color: var(--text-color); }
.tech_grid .typo_card:nth-child(2) p { color: #445577; } 
.tech_grid .typo_card:nth-child(3) { background: var(--primary-color); }
.tech_grid .typo_card:nth-child(3) .bg_num { color: rgba(255, 255, 255, 0.08); }
.tech_grid .typo_card:nth-child(3) .t_label { color: var(--primary-color); background: #fff; }
.tech_grid .typo_card:nth-child(3) strong { color: #ffffff; }
.tech_grid .typo_card:nth-child(3) p { color: rgba(255, 255, 255, 0.8); }
.tech_table { width: 100%; border-collapse: collapse; font-size: 16px; background: #fff; }
.tech_table thead th { background: #f8fafc; border-top: 2px solid var(--text-color); padding: 20px 15px; font-weight: 800; color: var(--text-color); border-bottom: 1px solid var(--border-color); }
.tech_table td { padding: 20px 15px; border-bottom: 1px solid var(--border-color); color: var(--text-muted); line-height: 1.6; font-weight: 500; }
.table_scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; }
.split_history_layout { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 60px; 
    margin-top: 40px; 
}
.history_img_col { 
    flex: 1; 
    text-align: center; 
}
.history_img_col img { 
    max-width: 100%; 
    height: auto; 
    mix-blend-mode: multiply; 
    transition: transform 0.4s ease;
}
.history_img_col:hover img {
    transform: scale(1.03);
}
.history_timeline_col { 
    flex: 1; 
    text-align: left; 
}
.left_title { text-align: left; margin-bottom: 20px; font-size: 38px; line-height: 1.3; }
.left_desc { text-align: left; margin-bottom: 40px; font-size: 17px; }
.v_history_flow { 
    position: relative; 
    padding-left: 24px; 
}
.v_history_flow::before { 
    content: ''; 
    position: absolute; 
    top: 10px; bottom: 20px; 
    left: 5px; 
    width: 2px; 
    background: #e2e8f0; 
}
.v_step { 
    position: relative; 
    margin-bottom: 35px; 
    display: flex; 
    align-items: flex-start; 
}
.v_step:last-child { margin-bottom: 0; }
.v_dot { 
    position: absolute; 
    left: -24px; 
    top: 5px; 
    width: 12px; 
    height: 12px; 
    border-radius: 50%; 
    background: #fff; 
    border: 3px solid #cbd5e1; 
    z-index: 2; 
    transition: border-color 0.3s;
}
.v_step:hover .v_dot { border-color: var(--primary-color); }
.v_content { padding-left: 10px; }
.v_date { display: block; font-size: 15px; font-weight: 700; color: var(--text-muted); margin-bottom: 5px; letter-spacing: 0.5px; }
.v_title { display: block; font-size: 20px; font-weight: 800; color: var(--text-color); line-height: 1.4; }
.v_core_step .v_dot { 
    border-color: var(--primary-color); 
    background: var(--primary-color); 
    box-shadow: 0 0 0 5px rgba(30, 58, 138, 0.15); 
}
.v_core_step .v_date { color: var(--primary-color); }
.v_core_step .v_title { color: var(--primary-color); }
.core_badge { display: inline-block; font-size: 12px; font-weight: 800; color: #fff; background: var(--primary-color); padding: 4px 10px; border-radius: 20px; vertical-align: middle; margin-left: 8px; transform: translateY(-2px); }
.core_step .h_date { color: var(--primary-color); }
.core_step .h_dot { border-color: var(--primary-color); background: var(--primary-color); color: #fff; transform: scale(1.1); box-shadow: 0 4px 12px rgba(30,58,138,0.2); }
.core_step .h_title { color: var(--primary-color); font-weight: 800; }
.cert_gallery { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: 20px; 
    margin-top: 50px; 
}
.cert_item { 
    text-align: center; 
    cursor: pointer; 
    transition: transform 0.3s ease; 
}
.cert_item:hover { transform: translateY(-5px); }
.cert_item .img_wrap { 
    position: relative; 
    border-radius: 8px; 
    overflow: hidden; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.06); 
    border: 1px solid #e2e8f0; 
    background: #fff; 
    margin-bottom: 12px;
}
.cert_item img { width: 100%; display: block; transition: transform 0.4s ease; }
.cert_item:hover img { transform: scale(1.05); }
.zoom_overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(30, 58, 138, 0.5); 
    display: flex; justify-content: center; align-items: center;
    color: #fff; font-size: 28px;
    opacity: 0; transition: opacity 0.3s ease;
}
.cert_item:hover .zoom_overlay { opacity: 1; }
.c_num { 
    display: block; 
    font-size: 14px; 
    color: var(--text-muted); 
    font-weight: 500; 
    line-height: 1.4;
}
.core_cert .img_wrap {
    border: 2px solid var(--primary-color);
    box-shadow: 0 8px 20px rgba(30, 58, 138, 0.15);
}
.core_cert .c_num {
    color: var(--primary-color);
}
.core_cert .c_num strong {
    font-weight: 800;
    font-size: 15px;
}
.lightbox_wrap {
    display: none; 
    position: fixed; 
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.85); 
    backdrop-filter: blur(5px);
    z-index: 9999;
    justify-content: center; align-items: center;
    opacity: 0; transition: opacity 0.3s ease;
}
.lightbox_wrap.show { display: flex; opacity: 1; }
.lightbox_wrap img {
    max-width: 90%; max-height: 90vh; 
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    transform: translateY(20px); transition: transform 0.3s ease;
}
.lightbox_wrap.show img { transform: translateY(0); }
.lightbox_close {
    position: absolute; top: 25px; right: 35px; 
    color: #fff; font-size: 50px; font-weight: 300; 
    cursor: pointer; 
}
.split_cert_layout { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 60px; 
}
.cert_list_col { flex: 1.2; text-align: left; }
.cert_teaser_col { flex: 1; }
.cert_item_list { list-style: none; padding: 0; margin: 0; border-top: 2px solid #1e293b; }
.cert_item_list li { 
    display: flex; 
    align-items: flex-start; 
    padding: 25px 0; 
    border-bottom: 1px solid #e2e8f0; 
}
.e_date { 
    width: 180px; 
    font-weight: 700; 
    color: var(--primary-color); 
    font-size: 15px; 
    flex-shrink: 0; 
    padding-top: 2px;
}
.e_text strong { display: block; font-size: 18px; color: var(--text-color); margin-bottom: 5px; }
.e_text span { font-size: 15px; color: var(--text-muted); line-height: 1.5; word-break: keep-all; }
.cert_teaser_col { 
    flex: 1; 
    display: flex; 
}
.cert_teaser_col.right_cert_box { 
    flex: 1; 
    border-radius: 24px; 
    overflow: hidden;
    min-height: 400px; 
    display: flex;
}
.cert_teaser_col.right_cert_box img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
}
.cert_teaser_col.right_cert_box:hover img {
    transform: scale(1.05);
}
.cert_notice {
    margin-top: 50px;
    padding: 20px;
    background: #f1f5f9;
    border-radius: 8px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    text-align: left;
}
.cert_notice strong { color: #475569; }

/* --- 기본 타이틀 및 히어로 반응형 --- */
@media (max-width: 1024px) {
    .cert_hero_band { min-height: auto; padding: 80px 20px 60px; }
    .cert_hero_title { font-size: 40px; }
    .center_title { font-size: 34px; }
    .left_title { font-size: 32px; }
    .typo_card { padding: 40px 30px; }
    .bg_num { font-size: 90px; right: 10px; }
    .split_cert_layout { gap: 40px; }
}

/* --- 모바일 기기 공통 대응 (768px 이하) --- */
@media (max-width: 768px) {
    .cert_hero_band { padding: 40px 20px 30px; }
    .cert_hero_title { font-size: 30px; line-height: 1.25; }
    .cert_hero_desc { font-size: 16px; }
    
    .center_title { font-size: 26px; margin-bottom: 15px; }
    .center_desc { margin-bottom: 40px; font-size: 15px; }
    
    .left_title { font-size: 26px; }
    .left_desc { font-size: 15px; margin-bottom: 25px; }
    .tech_grid.grid_3 { grid-template-columns: 1fr; gap: 20px; }
    .cert_gallery { grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 30px; }
    .c_num { font-size: 13px; }
    .history_flow { flex-direction: column; gap: 40px; margin: 40px 0; padding-left: 20px; }
    .history_flow::before { top: 10px; bottom: 0; left: 36px; width: 4px; height: auto; }
    .h_step { padding-left: 60px; }
    .h_date { margin-bottom: 10px; font-size: 16px; }
    .h_dot { top: 8px; left: 0; }
    .h_title { padding-top: 0; margin-top: 5px; }
    .split_cert_layout { flex-direction: column; gap: 30px; }
    .cert_teaser_col { width: 100%; }
    .cert_teaser_col.right_cert_box { min-height: 280px; border-radius: 16px; }
    .cert_item_list li { padding: 20px 0; flex-direction: column; }
    .e_date { width: 100%; margin-bottom: 6px; font-size: 14px; }
    .e_text strong { font-size: 16px; }
    .e_text span { font-size: 14px; }
    .cert_notice { margin-top: 0; padding: 16px; font-size: 12px; }
}
    
    
/* ================================================================ */
/* RESEARCH & EVIDENCE 스타일 */
/* ================================================================ */

/* 1. Hero Banner */
.research_band {
    background-color: #ffffff;
    padding: 0 0 100px 0;
}
.research_band .tech_inner {
    padding: 0 20px;
}
.research_hero_fullscreen {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    height: 800px;
    max-height: 85vh;
    background: url('/img/research_hero_bg.jpg') no-repeat center center;
    background-size: cover; 
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 20px 100px 20px;
}
.research_hero_inner {
    max-width: 1000px;
    width: 100%;
}
.research_main_title {
    font-size: 56px;
    font-weight: 900;
    letter-spacing: -2px;
    line-height: 1.2;
    margin: 0 0 24px 0;
}
.research_main_desc {
    font-size: 18px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 470px; 
    word-break: keep-all;
    text-shadow: 0 0 8px rgba(255, 255, 255, 1), 0 0 15px rgba(255, 255, 255, 0.8); 
}

/* 2. Overlap Summary Grid */
.research_content_wrap {
    max-width: 1600px; 
    margin: 0 auto;
    position: relative;
    z-index: 10;
}
.overlap_summary_grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: -185px; 
    margin-bottom: 80px;
}
.overlap_card {
    background: #ffffff;
    border-radius: 0;
    padding: 40px; 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05); 
    display: flex;
    flex-direction: column;
}
.overlap_card:nth-child(2) {
    background: #fcfbf9; 
}
.overlap_card::before {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    background-color: #111;
    margin-bottom: 20px;
}
.ov_badge {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    display: block;
}
.overlap_card h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 10px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ov_date {
    font-size: 13px;
    font-weight: 400;
    color: #888;
}
.ov_target {
    font-size: 15px;
    color: #555;
    margin: 0 0 24px 0;
    line-height: 1.6;
    word-break: keep-all;
}
.ov_result { 
    margin-top: auto; 
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.ov_result strong { 
    display: block; 
    font-size: 15px; 
    color: #111; 
    font-weight: 600; 
    margin-bottom: 6px; 
}
.ov_result span { 
    display: block;
    font-size: 14px; 
    color: #666; 
}

/* 3. Research Section Common */
.research_section {
    max-width: 1600px;
    margin: 0 auto 120px auto;
}
.res_header {
    margin-bottom: 30px;
}
.res_badge {
    display: inline-block;
    font-size: 14px;
    font-weight: 800;
    color: #111;
    letter-spacing: 1px;
    margin-bottom: 16px;
}
.res_badge::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 2px;
    background: #111;
    margin-right: 10px;
    vertical-align: middle;
}
.res_header h3 {
    font-size: 28px;
    font-weight: 800;
    color: #111;
    margin: 0 0 12px 0;
}
.res_sub_info {
    font-size: 14px;
    color: #888;
}
.res_desc {
    font-size: 16px;
    color: #444;
    line-height: 1.7;
    margin-bottom: 50px;
    word-break: keep-all;
}

/* 4. Data Table */
.table_wrap {
    margin-bottom: 60px;
}
.tech_table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #111;
    border-bottom: 2px solid #111;
    text-align: left;
}
.tech_table th {
    background: #fbfbfb;
    font-size: 14px;
    color: #111;
    padding: 18px 16px;
    border-bottom: 1px solid #ddd;
}
.tech_table td {
    font-size: 15px;
    color: #333;
    padding: 18px 16px;
    border-bottom: 1px solid #eee;
}
.tech_table .t_center { text-align: center; }
.tech_table .t_bold { font-weight: 700; color: #111; }
.tech_table .text_primary { color: #2563eb; font-weight: 700; }
.table_note {
    font-size: 13px;
    color: #777;
    margin-top: 12px;
    text-align: right;
}

/* 5. Accordion Hover UI */
.compare_accordion_wrap {
    display: flex;
    width: 100%;
    height: 550px; 
    gap: 16px; 
    margin-bottom: 20px;
}
.acc_panel {
    flex: 1; 
    position: relative;
    overflow: hidden;
    transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1); 
    cursor: pointer;
    background: #e2e8f0;
}
.acc_panel:hover {
    flex: 1.5; 
}
.acc_panel img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70%;
    transition: transform 0.6s ease;
}
.acc_panel:hover img {
    transform: scale(1.05); 
}
.acc_info {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: rgba(255, 255, 255, 0.95);
    padding: 12px 20px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    pointer-events: none;
    min-width: 200px;
}
.acc_info strong {
    display: block;
    font-size: 13px;
    color: #2563eb;
    font-weight: 800;
    margin-bottom: 6px;
}
.acc_info span {
    display: block;
    font-size: 16px;
    color: #111;
    font-weight: 700;
}

/* 6. Survey Graph */
.survey_graph_box { 
    background: #fbfaf8; 
    padding: 50px 40px; 
    border-top: 2px solid #111;
    margin-bottom: 50px; 
}
.sg_graph_caption {
    font-size: 13px;
    color: var(--text-muted);
    text-align: right;
    margin: 0 0 24px 0;
    font-weight: 500;
}
.sg_row { 
    display: flex; 
    align-items: center; 
    margin-bottom: 24px; 
}
.sg_row:last-child { 
    margin-bottom: 0; 
}
.sg_label { 
    width: 90px; 
    font-weight: 700; 
    font-size: 15px; 
    color: #111; 
}
.sg_bar_wrap { 
    flex: 1; 
    display: flex; 
    flex-direction: row;
    align-items: stretch;
    height: 34px; 
    background: #e2e8f0; 
    margin: 0 24px; 
}
.sg_bar { 
    display: flex; 
    align-items: center; 
    padding-left: 12px; 
    font-size: 12px; 
    font-weight: 600; 
    color: #fff; 
    height: 100%;
    box-sizing: border-box;
    width: 0; 
    overflow: hidden; 
    white-space: nowrap; 
    transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1); 
}
.p38 { background: var(--secondary-color); } 
.p50 { background: var(--primary-color); } 
.p_t38 { background: var(--text-muted); } 
.p_t13 { background: var(--text-color); }
.sg_total { 
    width: 50px; 
    text-align: right; 
    font-weight: 800; 
    font-size: 20px; 
    color: #111; 
}

/* 7. Survey Feedback Grid */
.survey_feedback_grid { 
    display: flex; 
    border-top: 1px solid #ddd; 
    border-bottom: 1px solid #ddd; 
    margin-bottom: 60px; 
}
.feedback_card { 
    flex: 1; 
    padding: 40px 30px; 
    background: #fff;
}
.feedback_card:first-child { 
    border-right: 1px solid #ddd;
}
.feedback_card h4 { 
    color: #111; 
    font-size: 16px; 
    font-weight: 800; 
    margin-bottom: 24px; 
}
.feedback_card h4::before {
    content: "";
    display: block;
    width: 16px;
    height: 2px;
    background: #111;
    margin-bottom: 16px;
}
.feedback_card p { 
    color: #444; 
    font-size: 15px; 
    line-height: 1.7; 
    margin: 0; 
    word-break: keep-all; 
}

/* 8. Editorial Split Layout (Zig-Zag) */
.editorial_split_row {
    display: flex;
    align-items: center;
    gap: 60px;
    margin-bottom: 100px;
}
.editorial_split_row.reverse {
    flex-direction: row-reverse;
}
.split_img_col,
.split_text_col {
    flex: 1;
    min-width: 0; 
}
.sub_title_num {
    font-size: 22px;
    font-weight: 800;
    color: #111;
    margin: 0 0 24px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid #111;
    display: inline-block;
}
.td_sub {
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 400;
}
.pressure_info_box {
    padding: 0 0 0 20px;
    border-left: 3px solid var(--primary-color);
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.65;
    margin-top: 30px;
    word-break: keep-all;
}
.pressure_info_box strong {
    color: var(--text-color);
    font-weight: 800;
}
.res_img_compare {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
}
.compare_box {
    flex: 1;
    position: relative;
    background: #f8fafc;
}
.compare_box img {
    width: 100%;
    display: block;
}
.compare_label {
    position: absolute;
    bottom: 12px;
    left: 12px;
    background: rgba(255, 255, 255, 0.95);
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #111;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.after_label {
    color: var(--primary-color);
}

/* 9. Disclaimer Notice */
.cert_notice {
    background: #f8fafc;
    padding: 30px;
    font-size: 13px;
    color: #64748b;
    line-height: 1.6;
    border-top: 1px solid #e2e8f0;
    word-break: keep-all;
}
.cert_notice strong {
    color: #334155;
}


/* ================================================================ */
/* 10. 반응형 (Responsive) */
/* ================================================================ */

/* 태블릿 (1024px 이하) */
@media (max-width: 1024px) {
    .research_hero_fullscreen { height: 600px; }
    .research_main_title { font-size: 42px; }
    .research_main_desc {
        font-size: 16px;
        max-width: 400px;
    }
    .acc_panel img {
		object-position: 50%;
	}
    .overlap_summary_grid {
        gap: 16px;
        margin-top: -100px;
    }
    .overlap_card { padding: 30px 25px; }
    .ov_badge { font-size: 16px; }

    .res_img_compare { flex-direction: column; }
    .survey_feedback_grid { flex-direction: column; }
    .sg_row { flex-direction: column; align-items: flex-start; }
    .sg_bar_wrap { width: 100%; margin: 10px 0; }
    .sg_total { text-align: left; }
	.research_section{    margin: 0 auto 50px auto;}
	.split_img_col,
	.split_text_col {
			width: 100%; 
	}
}

/* 모바일 (768px 이하) */
@media (max-width: 768px) {
    .research_band { padding: 0 0 60px 0; }
    .research_band .tech_inner { padding: 0 20px !important; }
    .research_hero_fullscreen {
        height: 380px;
        padding: 0 20px 80px 20px;
    }
    .research_main_title {
        font-size: 32px;
        margin: 0 0 16px 0;
    }
    .research_main_desc {
        font-size: 15px;
        max-width: 320px;
    }
    
    .overlap_summary_grid {
        grid-template-columns: 1fr;
        margin-top: -80px;
        margin-bottom: 50px;
        gap: 16px;
    }
    .overlap_card { padding: 30px 20px; }
    .overlap_card::before { margin-bottom: 16px; }
    .ov_badge { margin-bottom: 16px; }
    .overlap_card h4 {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .res_header h3 { font-size: 22px; }
    .res_desc { font-size: 15px; }
    
    .table_wrap { overflow-x: auto; margin-bottom: 40px; }


    .compare_accordion_wrap {
        height: 350px; 
        gap: 8px;
    }

    .acc_panel:hover { flex: 2; }
    .acc_info {
        bottom: 10px;
        left: 10px;
        padding: 10px 14px;
        min-width: auto;
    }
    .acc_info strong { font-size: 11px; }
    .acc_info span { font-size: 14px; }

    .survey_graph_box { padding: 30px 20px; }
    .sg_bar { font-size: 11px; padding-left: 8px; }

    
    .survey_feedback_grid { border-bottom: none; }
    .feedback_card:first-child { 
        border-right: none; 
        border-bottom: 1px solid #ddd; 
    }
    .feedback_card { padding: 30px 0; }

    .editorial_split_row,
    .editorial_split_row.reverse {
        flex-direction: column !important; 
        gap: 30px;
        margin-bottom: 60px;
    }
    .sub_title_num {
        font-size: 20px;
        display: block;
        border-bottom: 1px solid #111;
    }
	.research_section { 
        padding: 0 ; 
    }
    
    .table_wrap { 
        overflow-x: hidden; 
        margin-bottom: 40px; 
    }
    .tech_table { 
        min-width: 100%; 
    }
    
  
    .tech_table th, 
    .tech_table td {
        padding: 12px 6px; 
        font-size: 12px;
        word-break: keep-all; 
    }
    .tech_table .t_bold {
        font-size: 13px;
    }
    .td_sub {
        font-size: 11px;
        display: block;
        margin-top: 4px;
    }
}