html,body,ul,ol,li,img,div,span,iframe,a,button,p,input,textarea,select,i{
    font-family:AppleSDGothicNeo-Regular,'Roboto','Noto Sans KR',dotum,'돋움','Apple SD Gothic Neo', sans-serif; 
}

/* TOP Button */
.top_btn {
    position: fixed;
    z-index: 998;
    right: 5px;
    bottom: 115px;
}

.top_btn > div {
    background: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid #d0d0d0;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}

.top_btn p {
    font-size: 14px; /* 13px → 14px */
    color: #666; /* #444 → #666 */
    transition: all 0.3s ease;
    margin: 0;
    font-weight: 400;
    letter-spacing: -.25px; /* -.5px → -.25px */
}

.top_btn svg {
    fill: #666; /* #444 → #666 */
    transition: all 0.3s ease;
}

.top_btn:hover > div {
    background: #CC2B48;
    border-color: #CC2B48;
}

.top_btn:hover svg {
    fill: #fff;
}

.top_btn:hover p {
    color: #fff;
}

/* Top visual */
.head_wrap{position:relative; width:100%; min-height:800px; background:url(../images/main_visual.png) no-repeat top center; overflow:hidden}
.head_wrap.bg_prod{min-height:480px; background:url(../images/prod_visual.png) no-repeat top center}
.head_wrap.bg_sect{min-height:480px; background:url(../images/sect_visual.png) no-repeat top center}
.head_wrap.bg_com{min-height:480px; background:url(../images/com_visual.png) no-repeat top center}
.head_wrap.bg_pay{min-height:480px; background:url(../images/pay_visual.png) no-repeat top center}
.head_wrap.bg_ptn{min-height:480px; background:url(../images/ptn_visual.png) no-repeat top center}
.head_wrap.bg_cs{min-height:480px; background:url(../images/cs_visual.png) no-repeat top center}
.head_wrap.bg_blog{min-height:480px; background:url(/blog/content/images/2023/01/blog_visual.png) no-repeat top center}

.head_wrap.sub_bg{min-height:480px; background-position:top center; overflow:hidden}


/* GNB */
.gnb_wrap{position:fixed; z-index:998; width:100%; height:80px; transition:all 0.3s ease}
.gnb_wrap>div{max-width:1200px; height:80px; margin:0 auto}
.gnb_wrap .logo{float:left; margin-top:23px; margin-right:50px}
.gnb_wrap .logo svg{fill:#fff; cursor:pointer}
.gnb_wrap .logo svg .logo_hand{fill:#fff}

.gnb_wrap .gnb_menu{float:left; display:flex}
.gnb_wrap .gnb_menu>div{position:relative; margin:0 10px; height:80px; line-height:78px; cursor:pointer}
.gnb_wrap .gnb_menu>div span{font-size:16px; font-weight:500; color:#fff; transition:all 0.3s ease}
.gnb_wrap .gnb_menu>div>svg{fill:#fff; margin:0 0 3px 3px}
.gnb_wrap .gnb_menu>div:hover>svg{transform:rotate(180deg)}

.gnb_wrap .sub_depth{position:absolute; z-index:9; top:70px; left:50%; transform:translateX(-50%); background:#fff; font-size:14px; border-radius:20px; min-width:200px; padding:15px; box-shadow:0 0 10px rgba(0,0,0,0.3); box-sizing:border-box}
.gnb_wrap .sub_depth:before{content:''; position:absolute; top:-20px; left:50%; transform:translateX(-50%); border:10px solid transparent; border-bottom-color:#fff}
.gnb_wrap .sub_depth>div{width:100%; height:44px; line-height:42px; color:#999; border-radius:10px; padding:0 15px; box-sizing:border-box}
.gnb_wrap .sub_depth>div svg{vertical-align:middle; fill:#999; margin-right:5px}
.gnb_wrap .sub_depth>div:hover{background:#f6f6f6; color:#222}
.gnb_wrap .sub_depth>div:hover svg{fill:#222}
.gnb_wrap .depth_1 .sub_depth{display:none}
.gnb_wrap .depth_1:hover .sub_depth{display:block}
.gnb_wrap .depth_2 .sub_depth{display:none}
.gnb_wrap .depth_2:hover .sub_depth{display:block}
.gnb_wrap .depth_3 .sub_depth{display:none}
.gnb_wrap .depth_3:hover .sub_depth{display:block}
.gnb_wrap .depth_4 .sub_depth{display:none}
.gnb_wrap .depth_4:hover .sub_depth{display:block}

.gnb_wrap .btn_quick{float:right; margin-top:20px}
.gnb_wrap .btn_quick>div{display:inline-block; margin:0 10px; color:#fff; font-size:14px; cursor:pointer}
.gnb_wrap .btn_quick>div svg{fill:#fff; margin-right:5px}
.gnb_wrap .gnb_btn button.btn{display:inline-block; background:#e12547; margin:0 3px; width:130px; height:40px; line-height:38px; font-size:16px; color:#fff; text-align:center; border-radius:20px; box-sizing:border-box; transition:all 0.3s ease}
.gnb_wrap .gnb_btn button.btn.btn_start{border:none; line-height:36px; background:transparent; border:2px solid #fff;}

/* GNB FIX */
.gnb_wrap.navbar-small{position:fixed; top:0; left:0; right:0; background:#fff; box-shadow:0 1px 0 rgba(0,0,0,0.1);}
.gnb_wrap.navbar-small .logo svg{fill:#222}
.gnb_wrap.navbar-small .logo svg .logo_hand{fill:#C01E27}
.gnb_wrap.navbar-small .gnb_menu>div span{color:#444}
.gnb_wrap.navbar-small .gnb_menu>div svg{fill:#444}
.gnb_wrap.navbar-small .gnb_btn button{color:#fff}
.gnb_wrap.navbar-small .gnb_btn button.btn_start{color:#666; border-color:#666}
.gnb_wrap.navbar-small .btn_quick>div{color:#444}
.gnb_wrap.navbar-small .btn_quick>div svg{fill:#444}
.gnb_wrap.navbar-small .sub_depth>div svg{fill:#999}
.gnb_wrap.navbar-small .sub_depth>div:hover{background:#f6f6f6; color:#222}
.gnb_wrap.navbar-small .sub_depth>div:hover svg{fill:#222}

/* Mobile sidebar BTN */
.mobile_btn{display:none; position:fixed; top:20px; right:30px; cursor:pointer}
.mobile_btn svg{fill:#fff}
.gnb_wrap.navbar-small .mobile_btn svg{fill:#222}
.sidebar{position:fixed; top:0; left:-300px; bottom:0; z-index:10000002; background:#fff; width:280px; transition:all 0.3s ease}
.page-sidebar-toggled .sidebar{left:0}
/* sidebar GNB */
.sidebar{padding-bottom:50px; overflow-y:auto}
.sidebar .side_close{position:absolute; top:30px; right:30px; width:24px; height:24px; cursor:pointer}
.sidebar .side_close span{display:block; width:30px; height:3px; border-radius:2px; background:#222}
.sidebar .side_close span:first-child{transform:rotate(45deg) translateX(5px) translateY(9px)}
.sidebar .side_close span:last-child{transform:rotate(-45deg) translateX(-7px) translateY(3px)}
.sidebar .btn_quick{margin-top:30px; padding:0 30px; box-sizing:border-box}
.sidebar .btn_quick>div{display:inline-block; margin-right:20px; font-size:14px; color:#444; cursor:pointer}
.sidebar .btn_quick>div svg{fill:#444; margin-right:5px}
.sidebar .gnb_menu{display:block; margin-top:30px; padding:0 30px; box-sizing:border-box}
.sidebar .gnb_menu>div{position:relative; line-height:50px; overflow:hidden}
.sidebar .gnb_menu a{display:block}
.sidebar .gnb_menu a span{font-size:16px; font-weight:500; color:#444; transition:all 0.3s ease}
.sidebar .gnb_menu a svg{float:right; width:15px; height:auto; fill:#444; margin-top:20px; transform:rotate(180deg)}
.sidebar .sub_depth{display:block; overflow:hidden; transition:all 0.3s ease; font-size:14px}
.sidebar .sub_depth>div{display:block; background:#f6f6f6; border-radius:10px; overflow:hidden}
.sidebar .sub_depth>div>div{width:100%; height:44px; line-height:42px; color:#444; margin:10px 0; padding:0 20px; box-sizing:border-box; cursor:pointer}
.sidebar .sub_depth>div svg{vertical-align:middle; fill:#444; margin-right:5px}
.sidebar  a.collapsed svg{transform:rotate(0)}
.sidebar .collapse{display:none}
.sidebar .collapse.in{display:block}
.sidebar .gnb_btn{margin-top:30px; padding:0 30px; box-sizing:border-box}
.sidebar .gnb_btn button.btn{display:block; background:#C01E27; margin-bottom:10px; width:100%; height:44px; line-height:42px; font-size:16px; color:#fff; text-align:center; border-radius:22px; box-sizing:border-box; transition:all 0.3s ease}
.sidebar .gnb_btn button.btn.btn_start{border:none; line-height:42px; color:#444; background:transparent; border:2px solid #444}
.sidebar .foot_sns{margin-top:30px}
.sidebar .foot_sns ul{display:flex; justify-content:center; list-style:none}
.sidebar .foot_sns li{margin:0 3px}
.sidebar .foot_sns li a{display:block; width:40px; height:40px; line-height:38px; text-align:center; border-radius:50%; background:#f0f0f0; transition:all 0.3s ease}
.sidebar .foot_sns li a svg{vertical-align:middle; fill:#666}
.side_dim{position:fixed; top:0; left:0; right:0; bottom:0; z-index:10000001; background:rgba(0,0,0,0.5); display:none; transition:all 0.3s ease}
.page-sidebar-toggled .side_dim{display:block}

/* visual obj */
.mvisual{position:relative; max-width:1200px; margin:0 auto}
.mvisual .mvisual_tit{position:relative; z-index:9; padding-top:165px}
.mvisual h2{font-size:36px; font-weight:300; color:#fff}
.mvisual h1{font-size:60px; font-weight:700; color:#fff; line-height:60px}
.mvisual p{font-size:24px; color:#fff; margin-top:15px}
.mvisual button.btn{background:transparent; width:160px; border:2px solid #fff; line-height:46px; border-radius:25px; color:#fff; margin-top:30px; transition:all 0.3s ease}
.mvisual button:hover{background:#fff; color:#444; box-shadow:1px 3px 6px rgba(0,0,0,0.1);}

.obj_img{width:100%}
.obj_img>div{position:absolute; left:50%; overflow:hidden}
.obj_img .obj_1{top:385px; margin-left:-420px}
.obj_img .obj_2{top:87px; margin-left:100px}
.obj_img .obj_3{z-index:1; top:315px; margin-left:-80px}
.obj_img .obj_4{display:none}


/* CONTENTS */
.content_wrap{position:relative}
.content_wrap>section{margin:200px 0}
.contit{display:block; text-align:center}
.contit p{font-size:18px; color:#666; margin-bottom:20px;  box-sizing:border-box}
.contit h2{font-size:40px; line-height:50px; font-weight:300; color:#222; letter-spacing:-1px}
.contit em{display:block}
.contit.tal{text-align:left;}


/* SUB HEAD */
.svisual{position:relative; max-width:1200px; margin:0 auto}
.svisual .sub_tit{padding-top:200px; text-align:center}
.svisual h2{font-size:36px; font-weight:300; color:#fff}
.svisual h1{font-size:60px; font-weight:700; color:#fff; line-height:60px}
.svisual p{font-size:21px; font-weight:300; color:#fff; margin-top:10px}
.svisual button.btn{background:transparent; width:160px; border:2px solid #fff; line-height:46px; border-radius:25px; color:#fff; margin-top:30px; transition:all 0.3s ease}
.svisual button:hover{background:#fff; color:#444; box-shadow:1px 3px 6px rgba(0,0,0,0.1)}

.sub_title{text-align:center}
.sub_title p{font-size:18px; font-weight:300}
.sub_title h2{font-size:40px; font-weight:300; line-height:50px; color:#222}


/* Blog */
.blog_wrap{width:1200px; margin:0 auto 70px auto}
.blog_wrap .search_wrap{position:relative; display:flex; justify-content:center; margin-top:100px}
.blog_wrap .search_wrap:before{content:''; position:absolute; bottom:0; width:400px; height:1px; background:#444}
.blog_wrap .search_wrap select{width:80px; border:none; background:transparent}
.blog_wrap .search_wrap input{width:320px; padding:0 50px 0 20px; border:none; background:transparent}
.blog_wrap .search_wrap>div{position:relative}
.blog_wrap .search_wrap button{position:absolute; background:transparent; outline:none; border:none; top:15px; right:10px; cursor:pointer}
.blog_wrap .lt_wrap{display:flex; flex-wrap:wrap; gap:60px; margin-top:50px}
.blog_wrap .lt_wrap>div{width:360px; cursor:pointer}
.blog_wrap .lt_wrap h4{font-size:20px; font-weight:700; color:#222; margin-top:10px; white-space:nowrap; text-overflow:ellipsis; overflow:hidden}
.blog_wrap .lt_wrap p{
    font-size:16px; color:#666; line-height:25px; margin-top:10px; text-overflow:ellipsis; overflow:hidden;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical;
}
.blog_wrap .lt_wrap span{display:block; font-size:14px; color:#999; margin-top:10px}
.blog_wrap .lt_wrap>div:hover p{text-decoration:underline;}


/* Footer */
.footer{position:relative; background:#fff; width:100%; min-height:250px; padding-bottom:50px; border-top:1px solid #f0f0f0}
.footer .logo{cursor:pointer}
.footer .logo svg{fill:#222}
.footer .logo svg .logo_hand{fill:#C01E27}
.footer .foot_btn{border-bottom:1px solid #f0f0f0}
.footer .foot_btn>div{max-width:1200px; height:70px; margin:0 auto}
.footer .foot_btn .logo{float:left; margin-top:16px}
.footer .foot_btn .foot_sns{float:right; display:flex; margin-top:18px}
/*.footer .foot_btn button{font-size:16px; font-weight:500; color:#444; margin-right:40px}*/
.footer .foot_btn ul{display:flex; list-style:none; padding:0}
.footer .foot_btn li{margin:0 3px}
.footer .foot_btn li a{display:block; width:30px; height:30px; line-height:28px; text-align:center; border-radius:50%; background:#f0f0f0; transition:all 0.3s ease}
.footer .foot_btn li a svg{vertical-align:middle; fill:#222; opacity:0.5; transition:all 0.3s ease}
.footer .foot_btn li a:hover{background:#e0e0e0}
.footer .foot_btn li a:hover svg{opacity:1}

.footer .policy_btn{display:flex; gap:20px; margin-right:40px}
.footer .policy_btn button{font-size:16px; font-weight:500; color:#444; word-break: keep-all;}

.footer .foot_copy{margin-top:30px}
.footer .foot_copy>div{max-width:1200px; margin:0 auto}
.footer .foot_copy ul{display:inline-block; list-style:none; padding:0}
.footer .foot_copy li{line-height:25px; margin:0}
.footer .foot_copy li span{position:relative; font-size:14px; color:#999; margin-right:20px}
.footer .foot_copy li span:before{content:''; position:absolute; top:5px; right:-12px; width:1px; height:10px; background:#d9d9d9}
.footer .foot_copy li span:last-child{margin-right:0}
.footer .foot_copy li span:last-child:before{background:none}
.footer .foot_copy .foot_cs{float:right}
.footer .foot_copy .foot_cs p{color:#999; margin:5px 0; font-size:14px}
.footer .foot_copy .foot_cs .foot_tel{display:block; font-size:30px; font-weight:700; line-height:30px; color:#222; margin-bottom:10px}



.inner {margin-top:70px; margin-bottom:100px}


/* 블로그 글 css추가수정 */
.gh-wrapper-full {
    max-width: 1100px; /* Increased from 900px for more breathing room */
    margin: 0 auto;
}

.gh-feed-full {
    display: flex;
    flex-direction: column;
    gap: 64px; /* Increased from 48px for better separation */
}

.gl-post-card {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px; /* Increased from 32px */
    border-bottom: 1px solid #eee;
    padding-bottom: 40px; /* Increased from 32px */
}

.gl-post-card__main {
    flex: 1 1 0;
    min-width: 0;
    /* This property controls the flexibility of the main content area */
    /* The main content will expand to fill available space */
}

.gl-post-card__metas {
    display: flex;
    align-items: center;
    gap: 1.4rem; /* Slightly increased */
    margin-bottom: 0.8rem; /* Increased from 0.5rem */
    font-size: 1.4rem; /* Increased from 1.25rem */
    color: #3b82f6;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.gl-post-card__tag {
    color: #3b82f6;
    text-decoration: none;
    font-weight: 700;
}

.gl-post-card__author {
    color: #222;
    font-weight: 500;
    font-size: 1.25rem; /* Increased from 1.1rem */
}

.gl-post-card__title {
    font-size: 3.2rem; /* Significantly increased from 2.6rem */
    font-weight: 700;
    margin: 0.4rem 0 1rem 0; /* Increased spacing */
    line-height: 1.25; /* Slightly tighter for better readability */
}

.gl-post-card__title a {
    color: #222;
    text-decoration: none;
}

.gl-post-card__title a:hover {
    text-decoration: underline;
}

.gl-post-card__excerpt {
    color: #555;
    font-size: 1.6rem; /* Increased from 1.35rem */
    margin-bottom: 1.6rem; /* Increased from 1.2rem */
    line-height: 1.65; /* Improved readability */
}

.gl-post-card__datetime {
    font-size: 1.25rem; /* Increased from 1.1rem */
    color: #aaa;
    display: flex;
    align-items: center;
    gap: 0.6rem; /* Slightly increased */
}



/* Responsive adjustments to maintain good proportions */
@media (max-width: 1200px) {
    .gh-wrapper-full { 
        max-width: 95%; 
        padding: 0 20px;
    }
}

@media (max-width: 900px) {
    .gh-wrapper-full { 
        max-width: 100%; 
    }
   
    .gl-post-card__title {
        font-size: 2.8rem; /* Scaled down for smaller screens */
    }
    .gl-post-card__excerpt {
        font-size: 1.45rem;
    }
}

@media (max-width: 600px) {
    .gl-post-card { 
        flex-direction: column; 
        gap: 20px; 
    }
   
    .gl-post-card__title {
        font-size: 2.4rem;
    }
    .gl-post-card__excerpt {
        font-size: 1.35rem;
    }
}

/* 태그 css */

.gl-post-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; 
    margin-bottom: 0.75rem;
}

.gl-post-card__tag {
    /* 개별 태그의 스타일링 */
    padding: 0.25rem 0.5rem;
     background-color: #b7e4f5; /* 하늘색 (SkyBlue) */
    color: #176abc; /* 파란색 (DodgerBlue) */
    border-radius: 0.25rem;
    text-decoration: none;
    font-size: 1.2rem;
   
    transition: background-color 0.2s ease, color 0.2s ease; /* 색상 변화도 부드럽게 */
}

.gl-post-card__tag:hover {
    /* 호버 시 색상을 조금 더 진하게 */
    background-color: #115991; /* 스틸 블루 */
    color: #ffffff; /* 흰색으로 대비 강화 */
}

.gl-post-card__tags {
    gap: 0.375rem; /* 모바일: 작은 간격 */
}

@media (min-width: 768px) {
    .gl-post-card__tags {
        gap: 0.5rem; /* 데스크톱: 더 큰 간격 */
    }
}


/* 
여기서 수정해도 적용안됨, assets/built해야 적용, 현재는 dfault에 정의함.
gh-article-title{font-size:4.7rem;font-weight:600;line-height:1.2}. 
로수정
*/
.gh-article-title {
  color: var(--color-darkgrey);
  font-weight: 800;
  line-height: 1.05;
  margin-bottom: 0;
  word-break: break-word;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  grid-column: main-start / main-end !important;
  /* 모바일 ~ PC에 걸친 반응형 크기 */
  font-size: clamp(3.4rem, 5vw, 5.2rem);
}


/* 푸터 선 제거 */
.gh-article-footer {
  border-top: none !important;
}


/* 본문 콘텐츠 폭 크기 수정 */
.gh-canvas {
  display: grid;
  grid-template-columns:
    [full-start] 1fr [main-start] minmax(0, 1200px) [main-end] 1fr [full-end];
  padding: 0 20px; /* 기본 좌우 여백 (모바일에서도 적용됨) */
  box-sizing: border-box;
}

.gh-canvas > * {
  grid-column: main-start / main-end !important;
}

/* 데스크탑일 때는 패딩 제거 (넓은 화면에서는 좌우 여백 그리드로 처리) */
@media (min-width: 768px) {
  .gh-canvas {
    padding: 0;
  }
}

/* SVG 정렬 문제 해결 */
.quick_pay svg,
.quick_global svg {
    vertical-align: middle;
    margin-right: 5px;
}