@charset "utf-8";
/********************************************
프로젝트명 :2026년 SC 메인(국문,영문) 리뉴얼 
타이틀 :미디어쿼리 분기(768px)
최초작성일 :2026-01-29
********************************************/
@charset "utf-8";
/********************************************
프로젝트명 :2026년 SC 메인(국문,영문) 리뉴얼 
타이틀 :미디어쿼리 분기(768px)
최초작성일 :2026-01-29
********************************************/



/* header */  
.gnb_menu{display:none;}
#salesHeader.sc-hd .header_inner {width:100%;padding:0;}
#salesHeader.sc-hd h1.logo {margin-left:16px;width:90px;height:35px;}
#salesHeader.sc-hd .global {order:1;margin:0;}
#salesHeader.sc-hd .global li {display:none;}
#salesHeader.sc-hd .global li:last-child {display:inline-block;width:70px;height:70px;line-height:70px;background:none;padding:0;}
#salesHeader.sc-hd .global li:last-child a {display:block;min-width:70px;width:100%;height:100%;font-size:14px;font-weight:500;color:#0473EA;}
#salesHeader.sc-hd .global li:last-child a span {display:none;}
#salesHeader.sc-hd .gnb_open {display:inline-block;order:3;position:relative;background:#fff url(../images/kr/base/ico_menu_all_m.svg) no-repeat 50% 50%;background-size:24px auto;cursor:pointer;vertical-align:middle;width:70px;height:68px;}
#salesHeader.sc-hd .gnb_open.close {background:#FAFAFA url(../images/kr/base/m_btn_gnb_close.svg) no-repeat 50%; background-size:30px auto;}

#salesHeader.sc-hd .search_area {order:2;width:70px;height:70px;}
#salesHeader.sc-hd .search_area.active {z-index:2;position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:70px;}
#salesHeader.sc-hd.sc-hd .search_area button.btn_search_open {text-align:center;margin-right:0;padding-top:31px;width:70px;height:70px;background:url(../images/kr/base/ico_search_mo_prev.svg) no-repeat 50% 11px;background-size:24px auto;font-size:12px;font-weight:500;color:#525355;line-height:16px;padding-left:0;}
#salesHeader.sc-hd .search_area .search_input_area {right:0;box-sizing:border-box;width:100%;height:70px;padding:5px 0 5px 12px;border:none;border-radius:0;background:#18ABEB;}
#salesHeader.sc-hd .search_area .search_input_area fieldset {position:relative;padding-left:0;padding-right:120px;}
#salesHeader.sc-hd .search_area .search_input_area input, #salesHeader.sc-hd .search_area .search_input_area label {position:relative;top:0;left:0;box-sizing:border-box;padding-right:12px;padding-left:12px;height:60px;background:#fff;font-size:14px;font-weight:500;color:#18ABEB;line-height:60px;}
#salesHeader.sc-hd .search_area .search_input_area label {z-index:2;position:absolute;top:0;left:0;width:calc(100% - 120px);height:60px;}
#salesHeader.sc-hd .search_area .btn_area button {position:absolute;top:-6px;}
#salesHeader.sc-hd .search_area .btn_area button.btn_search {width:60px;height:70px;right:60px;background:#18abeb url(../images/kr/base/ico_search_m.svg) no-repeat 50% 50%;background-size:24px auto;}
#salesHeader.sc-hd .search_area .btn_area button.btn_search:after {display:none;}
#salesHeader.sc-hd .search_area .btn_area button.search_btn_close {width:60px;height:70px;right:0;background:#1d83b0 url(../images/kr/base/ico_menu_close_m.svg) no-repeat 50% 50%;background-size:24px auto;}

/* gnb */
#gnb_m {position:fixed;top:0;left:0;z-index:9999;width:100%;height:calc(100vh - 70px);background:#fff;overflow-y:auto;}
#gnb_m.active {display:block; margin-top:70px;}
#gnb_m .inner {box-shadow:0px -2px 13px 0px #00000012;}
#gnb_m .mo_header_inner {position:relative;display:flex;justify-content:space-between;margin:0 auto;width:100%;height:70px;}
#gnb_m .mo_header_inner h1.logo {margin-left:16px;width:90px;height:35px;}
#gnb_m .mo_header_inner h1.logo a {display:block;max-width:130px;}
#gnb_m .mo_header_inner h1.logo a img {width:100%;}
#gnb_m .mo_header_inner .h_right {display:flex;align-items:center;justify-content:flex-start;}
#gnb_m .mo_header_inner .h_right .global {order:1;}
#gnb_m .mo_header_inner .h_right .search_area{order:2;}
#gnb_m .mo_header_inner .h_right button[type="button"] {border:none;}
#gnb_m .mo_header_inner .btn_close {position:relative;order:3;}
#gnb_m ul {margin:0;}
/* #gnb_m strong.tit {display:block;height:70px;font-size:0;line-height:0;} */
#gnb_m strong.tit {visibility:hidden; font-size:0; position:absolute; top:-99999rem;}
#gnb_m .gnb_list > li {margin-bottom:8px;}
#gnb_m .gnb_list > li .menu_bar {position:relative; display:flex; justify-content:space-between;}
#gnb_m .gnb_list > li > .menu_bar {background-color:#F8F8F8;}
#gnb_m .gnb_list > li > .menu_bar a {display:flex; align-items:center; justify-content:center; padding-left:20px; width:100%; height:66px; font-size:18px; color:#525355; font-weight:500; line-height:1.3;}
#gnb_m .gnb_list > li > .menu_bar button {position:absolute; top:0; left:0; width:100%; height:66px; background:url(../images/kr/base/icon_m_arw_gray.svg) no-repeat calc(100% - 20px) 50%;background-size:20px 20px;text-indent:-9999px;border:none;}
#gnb_m .gnb_list > li.active > .menu_bar {background-color:#EAF0F8;}
#gnb_m .gnb_list > li.active > .menu_bar a {color:#0473EA;}
#gnb_m .gnb_list > li.active > .menu_bar button {background-image:url(../images/kr/base/icon_m_arw_blue.svg);}
#gnb_m .gnb_list > li .two_depth {margin:0 20px;}
#gnb_m .gnb_list > li.active .two_depth {display:block;}
#gnb_m .gnb_list > li.nodepth a {text-decoration:none;}
#gnb_m .two_depth {display:none; padding-top:20px; padding-bottom:3px;}
/* #gnb_m .two_depth > li > .menu_bar {background:url(../images/kr/base/icon_m_arw_gray.svg) no-repeat 100% 50%;background-size:16px 16px;border-bottom:1px solid #eee;line-height:47px;} */
#gnb_m .two_depth > li:has(button) .menu_bar {background-image:none;}
#gnb_m .two_depth > li > .menu_bar a {font-size:14px; color:#0B56A7; font-weight:bold; line-height:1.43;}
/* #gnb_m .two_depth > li > .menu_bar a + button {position:absolute;right:-15px;top:0;width:47px;height:47px;background:url(../images/kr/base/icon_m_arw_gray.svg) no-repeat center;background-size:16px 16px;transition:transform 0.3s ease;font-size:0;line-height:0;border:none;} */
#gnb_m .two_depth > li.active > .menu_bar a + button {transform:rotate(180deg);}
#gnb_m .two_depth > li.active .three_depth {display:block;}

#gnb_m .gnb-util-mo {margin-bottom:25px;}
#gnb_m .gnb-util-mo p {font-size:14px; color:#0B56A7; font-weight:bold; margin-bottom:0; line-height:initial;}
#gnb_m .gnb-util-mo a > p {
    margin-top:16px;
    font-size:16px;
    font-weight:400;
}
#gnb_m .gnb-util-mo > ul {
    display:flex !important;
    overflow-x:auto !important;
    flex-wrap:nowrap !important;
    scroll-snap-type:x mandatory;
    touch-action:pan-x;
    -webkit-overflow-scrolling:touch;
    margin-left:0;
    padding-right:20px;
    padding-bottom:20px;
    margin-right:-20px;
    margin-top:13px;
}
#gnb_m .gnb-util-mo > ul li {
    max-width:none !important;
    flex:0 0 256px !important;
    width:256px !important;
    scroll-snap-align:start;
    user-select:none;
}
#gnb_m .gnb-util-mo > ul li p {
    color:#191919;
}
#gnb_m .gnb-util-mo > ul li + li {
    margin-left:16px;
}
#gnb_m .gnb-util-mo > ul li .sh-thum__img {
    line-height:0;
}
#gnb_m .gnb-util-mo > ul li .sh-thum__img img {
    width:256px;
    height:150px;
}

/* #gnb_m .two_depth > .gnb-util-mo {margin-bottom:40px;}
#gnb_m .two_depth > .gnb-util-mo p{font-size:16px;color:#0B56A7;margin-bottom:0; line-height:initial;}
#gnb_m .two_depth > .gnb-util-mo > ul{ display:flex !important;overflow-x:auto !important;flex-wrap:nowrap !important;scroll-snap-type:x mandatory;touch-action:pan-x;-webkit-overflow-scrolling:touch;margin-left:0;padding-right:20px;margin-right:-20px;margin-top:13px;}
#gnb_m .two_depth > .gnb-util-mo > ul li {max-width:none !important;flex:0 0 65% !important; width:65% !important; scroll-snap-align:start;user-select:none;}
#gnb_m .two_depth > .gnb-util-mo > ul li p {color:#191919;}
#gnb_m .two_depth > .gnb-util-mo > ul li + li {margin-left:16px;}
#gnb_m .two_depth > .gnb-util-mo > ul li .sh-thum__img img{width:100%;} */

#gnb_m .three_depth {
    display:block;
    margin-top:8px;
    margin-bottom:25px;
    padding-top:15px;
    border-top:1px solid #DFDFDF;
}
#gnb_m .three_depth > li + li {
    margin-top:10px;
}
#gnb_m .three_depth > li .menu_bar > a {
    display:block;
    font-size:16px;
    font-weight:400;
    color:#191919;
    line-height:24px;
}
#gnb_m .three_depth > li .menu_bar > a:hover,
#gnb_m .three_depth > li .menu_bar > a:active {color:#0473EA;}


.ko-en .notice-bar.hab-eng{padding:0 16px !important;}
.notice-bar.head-alert-bar.hab-eng .hab-cont,
.hab-area{margin-left:0 !important;}
.notice-bar.hab-eng .feign-area {
    padding-left:54px;
}
.feign-area p {padding-bottom:0;}


/* 메인 */
/* --- 비주얼 슬라이더 영역 --- */
#main_container {min-width:calc(100% - 32px);}
/* .section .inner, .section.w-full .inner{max-width:calc(100% - 32px) !important;} */
.sc-visual-wrap .inner {max-width:100% !important;}

/* --- 상품 슬라이드 영역  --- */
/* .product-img {height:auto;} */
.sc-product-wrap .bx-controls-direction a,
.sc-fin-wrap .bx-controls-direction a {width:25px;}
.sc-product-wrap .bx-prev{left:-32px;}
.sc-product-wrap .bx-next{right:-32px;}
.product-list {flex-wrap:wrap;}
.product-item {flex:none; width:calc(33.3% - 16px);}
.product-guide {flex:none; max-width:100%; width:calc(100% - 16px); margin-top:16px;}
.product-guide .product-tit {margin:12px 0;}
.product-list.type3 .product-item {flex:none; width:calc(50% - 16px);}
.product-list.type3 .product-item:nth-child(3),
.product-list.type3 .product-item:nth-child(4) {margin-top:16px;}

/* --- 공지사항  --- */
.sc-notice-wrap .inner {/* padding-top:24px;padding-bottom:32px; */}
.notice-list {display:flex !important;overflow-x:auto !important;flex-wrap:nowrap !important; padding-bottom:10px; scroll-snap-type:x mandatory;touch-action:pan-x;-webkit-overflow-scrolling:touch;margin-left:0;padding-right:20px;margin-right:-16px; margin-bottom:20px; scrollbar-width:thin; }
.notice-list::-webkit-scrollbar {display:none;}
.notice-item {min-height:300px; /*flex:0 0 65% !important;*/ min-width:230px; scroll-snap-align:start;user-select:none;}

/* --- 금융시장 정보  --- */
.fin-list-wrap {}
.fin-item {width:calc(100% / 3 - 20px) !important; margin:0 10px;}
.sc-fin-wrap .bx-prev {left:-24px;}
.sc-fin-wrap .bx-next {right:-24px}

/* .notice-item {height:auto;}
.notice-date {margin-top:16px;} */

/* --- 서비스 안내  --- */
.sc-ser-wrap .inner .bx-wrapper {width:100%;}
.sc-item-wrap {flex-direction:column; padding-bottom:45px;}
.ser-item {width:100%;}
/* .ser-item + .ser-item {margin-left:0;margin-top:32px;} */

.sc-ser-wrap .inner .ser-pager {justify-content:center;position:relative;flex-direction:row;top:auto;right:auto;margin-top:32px;}
.sc-ser-wrap .inner .ser-pager a {width:12px;height:8px;min-height:auto;padding:0;border-radius:3px;background:#AAAAAA;text-indent:-9999px;border:none;font-size:0;}
.sc-ser-wrap .inner .ser-pager a + a {margin:0 0 0 10px;}
.sc-ser-wrap .inner .ser-pager a.active {background:#FFFFFF;width:32px;border-radius:3px ;}
.sc-ser-wrap .inner .ser-pager a.active span {background:none;}

/* --- 앱 다운로드 안내  --- */
.sc-app-wrap .inner {flex-direction:column; padding-bottom:0; align-items:center;}
.app-cont {margin-bottom:50px; width:100%;}
.app-tit {font-size:28px !important;}
.app-txt{margin:4px 0 40px; font-size:18px !important;}
/* .app-img {margin-bottom:-32px;} */
.app-img {display:flex; align-items:flex-end; justify-content:center; width:100%; height:35vh; position:relative; background-position:50% 100%;}
.app-qr > div + div {margin-left:8px;}
.app-qr .pc_img{display:none;}
.app-qr .mo_img {display:inline-block;}

/* --- 핫이슈 --- */
.sc-bnr-wrap .bx-wrapper {width:380px !important; height:150px !important; margin:0 !important;}
.bnr-link-list{margin-left:20px !important;}
/* .bnr-link-list li a {font-size:13px; padding:8px 0;}
.bnr-link-list li a span {width:30px; height:30px; margin-bottom:4px;} */


/* footer */
.sc-ft__cs{width:100%;margin-top:60px;}



/**************************************
		as-is 스타일
	**************************************/
  /* 2022-11-15 방문판매직원조회 */
.dtd-sales-con {
    margin:25px 0;
}

.dtd-sales-con .form_add input[type="text"].form-control {
    float:none;
    width:100%;
    margin:0 0 10px 0;
}

.dtd-sales-con .form_add button {
    min-width:100%;
    margin-left:0;
}

/* 서브메인비주얼 */
.sub_main_visual .bx-wrapper .bx-viewport, .sub_main_visual .bx-wrapper .bx-viewport > ul > li, .sub_main_visual .bx-wrapper .bx-viewport > ul {
    width:98dvw !important;
    left:48dvw;
    transform:translate(-48dvw, 0);
}

.sub_main_visual .prev_btn .bx-prev {
    left:0;
    background-position:5px 50%;
}

.sub_main_visual .next_btn .bx-next {
    right:0;
    background-position:-41px 50%;
}

.sub_main_visual .mv_inner {
    margin-left:20px;
    margin-right:20px;
}

.sub_main_visual .mv_title .mv_tit {
    font-size:28px;
    margin-bottom:10px;
}

.sub_main_visual .mv_title .mv_sub_tit {
    font-size:18px;
}