@charset "utf-8";

/********************************************
프로젝트명 : 2026년 SC 메인(국문,영문) 리뉴얼 
타이틀 : layout(submain, 레이아웃 공통)
최초작성일 : 2026-01-29
********************************************/

.--col-25 {width: 25%  !important;}
.--col-50 {width: 50%  !important;}
.--col-75 {width: 75%  !important;}
.--col-100 {width: 100%  !important;}
.--w-25 .gnb-item {width: 25%  !important;}
.--w-33 .gnb-item {width: 33.3% !important;}
.--w-50 .gnb-item {width: 50%  !important;}

.hfix #salesHeader.sc-hd{width:100%;position:fixed;top:0; background-color:rgba(255,255,255,.75); backdrop-filter:blur(18px); box-shadow:rgba(0,0,0,.07) 0 2px 13px 0; border-bottom: 1px solid rgba(200,200,200,.5);}

#salesHeader.sc-hd {z-index: 300;position: relative;width: 100%;background: #fff;height: 70px; border-bottom: 1px solid #eee;}
#salesHeader.sc-hd:after {display: block;content: "";clear: both;}
#salesHeader.sc-hd .header_outer {position: relative;}
#salesHeader.sc-hd .header_inner {display: flex;width: 1404px;margin: 0 auto;align-items: center;justify-content: space-between;height: 70px;padding: 0 32px;}
#salesHeader.sc-hd h1.logo {display:flex; margin-bottom:0; width:170px; font-size:0; line-height: 0;}
#salesHeader.sc-hd h1.logo a {display: block;width: 130px;}
#salesHeader.sc-hd h1.logo a img {width: 100%;}
#salesHeader.sc-hd h1.logo > a > img.ci_pc {display: block;}
#salesHeader.sc-hd h1.logo > a > img.ci_mb {display: none;}
#salesHeader.sc-hd .h_left {display:flex; align-items:center; justify-content:flex-start; height:100%;}
#salesHeader.sc-hd .h_right {display:flex; align-items:center; justify-content:flex-end;}
#salesHeader.sc-hd .h_right button[type="button"] {border: none;}
#salesHeader.sc-hd .global {display: flex;margin-bottom: 0;}
#salesHeader.sc-hd .global > li {text-align:center; margin-left:14px;}
#salesHeader.sc-hd .global > li > a {display:block; min-width:59px; font-size:14px; color:#525355; font-weight:500;}
#salesHeader.sc-hd .global > li.active > a {color: #0473EA;}
#salesHeader.sc-hd .gnb_open {display: none;}
#salesHeader.sc-hd .search_area {position: relative;height: 30px;}
#salesHeader.sc-hd .search_area button {cursor: pointer;border: none;}
#salesHeader.sc-hd .search_area button.btn_search_open {text-align: right; height: 30px; background: url(../images/kr/base/ico_search_gray.svg) 0 50% no-repeat; background-size: 24px 24px;font-family:"SCProsperSans", sans-serif; font-size:14px; color:#525355; font-weight:500; padding-left:28px; padding-right: 0;}
#salesHeader.sc-hd .search_area .search_input_area {width: 280px;height: 28px;padding-right: 60px;margin: 0;position: absolute;top: 0;right: 0;background: #fff;border: 1px solid #29b885;border-radius: 5px;display: none;box-sizing: border-box;}
#salesHeader.sc-hd .search_area .search_input_area fieldset {margin: 0;padding-top: 0;padding-right: 23px;padding-bottom: 0;padding-left: 10px;border: none;}
#salesHeader.sc-hd .search_area .search_input_area fieldset legend {overflow: hidden;position: absolute;left: -9999px !important;top: 0;width: 1px;height: 1px;text-indent: -9999px;}
#salesHeader.sc-hd .search_area.active .search_input_area {display: block;}
#salesHeader.sc-hd .search_area .search_input_area input {width: 100%;height: 28px;padding: 0;margin: 0;font-size: 13px;color: #3e3e3e;border: none;background: none;box-shadow: none;}
#salesHeader.sc-hd .search_area .search_input_area input:focus {box-shadow: none;}
#salesHeader.sc-hd .search_area .search_input_area label {margin-bottom: 0;position: absolute;top: 0;left: 10px;font-size: 13px;color: #3e3e3e;font-weight: 400;line-height: 28px;}
#salesHeader.sc-hd .search_area .btn_area {width: 67px;height: 28px;position: absolute;top: 1px;right: 0;font-size: 0;line-height: 0;}
#salesHeader.sc-hd .search_area .btn_area .btn_search {position: absolute;right: 41px;width: 24px;height: 24px;padding: 0;background: url(../images/kr/base/ico_search.svg) no-repeat 50% 50%;}
#salesHeader.sc-hd .search_area .btn_area .btn_search:after {width: 1px;height: 16px;margin-top: -8px;content: "";display: block;position: absolute;top: 50%;left: 27px;background: #B9E8D8;}
#salesHeader.sc-hd .search_area .btn_area .search_btn_close {position: absolute;right: 10px;width: 24px;height: 24px;padding: 0;background: url(../images/kr/base/btn_search_close.svg) no-repeat 50% 50%;}

/* gnb */
#gnb_m {display:none;}
.gnb_menu {display:flex; margin-bottom:0; height:100%;}
.gnb_menu > li {height: calc(100% - 1px);}
.gnb_menu > li > a {position:relative; display:flex; align-items:center; text-align:center; min-width:78px; padding:0 16px; font-size:18px; color:#525355; font-weight:bold; height:100%; }
.gnb_menu > li > a:hover {color: #0473EA; text-decoration:none;}
.gnb_menu > li.active > a {color: #0473EA; background-color:#fff; text-decoration:none;}
.gnb_full_matrix {opacity:0; visibility:hidden; z-index:1000; position:absolute; left:50%;  top:70px; transform:translateX(-50%); width:100%; pointer-events:auto; word-break:keep-all;}
.gnb_menu > li.active .gnb_full_matrix {opacity: 1;  visibility: visible;  pointer-events: auto;}

.gnb_bg_dim.active {display:block; content:""; width: 100%; height:100%; position:absolute; top:0; left:0; background-color:rgba(0,0,0,.5); z-index: 99;}

/* .gnb_full_matrix {opacity: 0;  visibility: hidden;  z-index: 1000;  position: absolute;  left: 50%;  top: 70px;  transform: translateX(-50%);  width: 100%;  border-top: 1px solid #eee;  pointer-events: auto;  transition: opacity 0.1s ease-in-out;}
.gnb_menu > li:hover .gnb_full_matrix,
.gnb_menu > li > a:focus + .gnb_full_matrix,
.gnb_full_matrix:focus-within {opacity: 1;  visibility: visible;  pointer-events: auto;} */
.gnb_full_matrix .gnb_wrap {padding: 32px 0;background: #fff;}
.gnb_full_matrix .gnb_wrap .inner_wrap {display: flex;margin: 0 auto;width: 1340px;}
.gnb_full_matrix .slogan_wrap {background: linear-gradient(90deg, #3272E2 0%, #6BCF3D 100%);padding: 20px 0;}
.gnb_full_matrix .slogan {text-align: center;font-size: 18px;color: #fff;font-weight: 500;}
.gnb_full_matrix .two_depth {display: flex;justify-content: flex-start;flex-wrap: wrap;margin-left: 0;width: 100%;}
.gnb_full_matrix .two_depth > li {width: 20%;flex-shrink: 0;}
.gnb_full_matrix .two_depth.col-4 > li {width: 25% !important;}
.gnb_full_matrix .two_depth > li.is-wide {width: auto;flex-grow: 1;min-width: 250px;}
.gnb_menu > li.gnbBusiness .two_depth {display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: auto auto;align-items: start;align-content: start;}
.gnb_menu > li.gnbBusiness .two_depth li{width: 100% !important;}
.gnb_menu > li.gnbBusiness .two_depth li:first-child, 
.gnb_menu > li.gnbBusiness .two_depth li:last-child {grid-column: 1;}
.gnb_menu > li.gnbBusiness .two_depth li:nth-child(2) {grid-column: 2;grid-row: 1 / span 2;width: 100%;}
.gnb_full_matrix .d2_tit {font-size: 14px;font-weight:bold;color: #0B56A7;}
.gnb_full_matrix .d2_tit:hover{text-decoration: none;}
.gnb_full_matrix .three_depth {margin-top: 16px;margin-left: 0;}
.gnb_full_matrix .three_depth > li {margin-bottom: 8px;}
.gnb_full_matrix .three_depth > li:last-child {margin-bottom: 0;}
.gnb_full_matrix .three_depth > li a {font-size:16px; line-height:1.3; font-weight:400; color: #000; display:inline-block;}
.gnb_full_matrix .three_depth > li:hover a {color:#0473EA;text-decoration:none; position:relative;}
.gnb_full_matrix .three_depth > li a::after {content:''; display:block; position:absolute; bottom:0; left:0; width:0; height:2px; background-color: #0473EA; transition:width .4s ease-in-out;}
.gnb_full_matrix .three_depth > li:hover a::after {width:100%}
.gnb_full_matrix .gnb-util {position: relative;display: flex;flex-direction: column;padding-right: 80px;border-right: 1px solid #EEEEEE;}
.gnb_full_matrix .gnb-util.--col-50 {flex-direction: row;flex-wrap: wrap;width: 624px !important;}
.gnb_full_matrix .gnb-util.--col-50 .sh-thum:nth-child(2n) {margin-left: 32px;}
.gnb_full_matrix .gnb-util.--col-50 .sh-thum {width: calc(50% - 16px);}
.gnb_full_matrix .gnb-util .sh-thum {display: flex;flex-direction: column;margin-bottom: 42px;max-width: 256px;width: 100%;}
.gnb_full_matrix .gnb-util .sh-thum:hover {text-decoration: none;}
.gnb_full_matrix .gnb-util .sh-thum__img {width: 100%;}
.gnb_full_matrix .gnb-util .sh-thum p {font-size: 16px;color: #000000;margin-bottom: 0;}
.gnb_full_matrix .gnb-util .sh-thum:hover p{color: #0473EA;}
.gnb-util + .two_depth {padding-left: 80px;}
.gnb-util + .two_depth .gnb-item {max-width: 300px;}

.two_depth.--col-75 > li:nth-child(4),
.two_depth.--col-75 > li:nth-child(5),
.two_depth.--col-75 > li:nth-child(6),
.two_depth.--col-100 > li:nth-child(5),
.two_depth.--col-100 > li:nth-child(6),
.two_depth.--col-100 > li:nth-child(7){margin-top: 40px;}

.two_depth.--col-50 > li:nth-child(3),
.two_depth.--col-50 > li:nth-child(4),
.two_depth.--col-50 > li:nth-child(5),
.two_depth.--col-50 > li:nth-child(6),
.two_depth.--col-50 > li:nth-child(5),
.two_depth.--col-50 > li:nth-child(6),
.two_depth.--col-50 > li:nth-child(7){margin-top: 40px;}

.alert_area2026 {overflow: hidden; max-height:250px; min-height:112px !important; background-color:#0C77B9 !important; word-break:keep-all; color:#fff; display:flex;}
.alert_area2026 .a_area {padding-left:70px; background:url(../images/kr/base/ico_head_alertbar_en.svg) no-repeat; background-position:10px 50% !important; font-size:14px; font-weight:500;line-height:1.5; display:flex; align-items:center; max-width:1340px; margin: 0 auto; position:relative;}
.alert_area2026 .a_cont {width: calc(100% - 50px);}
.alert_area2026 .a_cont p {margin:0;}
.alert_area2026 .a_cont p strong {font-size: 15px;}
.alert_area2026 .a_close {width:26px; height:26px; font-size: 0; margin-top:-13px; position:absolute; top:50%; right:0; transform:translate(-50%, 0);}
.alert_area2026 .a_close a {display:block; width:100%; height:100%; background: url(../images/kr/base/ico_head_alertbar_en_exit.svg) no-repeat 0 50%; background-size: 24px auto;} 

/* #alertBar, .ko-en .notice-bar.hab-eng {overflow: hidden; transition: max-height 0.4s ease-in-out, min-height 0.4s ease-in-out, padding 0.4s ease-in-out;max-height: 250px;min-height: 112px !important;background-color: #0C77B9 !important;}
#alertBar[style*="display:none"], 
#alertBar[style*="display:none"] 
.ko-en .notice-bar.hab-eng {transition: max-height 0.5s cubic-bezier(0, 1, 0, 1), min-height 0.5s cubic-bezier(0, 1, 0, 1), padding 0.5s, margin 0.5s !important;max-height: 0 !important;min-height: 0 !important;padding-top: 0 !important;padding-bottom: 0 !important;margin-top: 0 !important;margin-bottom: 0 !important;display: block !important;}

.ko-en .notice-bar.hab-eng {display: flex;align-items: center;margin: 0 auto;max-width: 1404px;padding: 0 32px !important;}
.notice-bar.hab-eng .hab-cont {margin-left: 0; word-break: keep-all;}
.notice-bar.hab-eng .feign-area {background: url(../images/kr/base/ico_head_alertbar_en.svg) no-repeat;background-position: 0 50% !important;}
.notice-bar.hab-eng .feign-area p {font-size: 14px;font-weight:500;line-height: 1.5;}
.notice-bar.hab-eng .feign-area p strong {font-size: 15px;}
.notice-bar.hab-eng .hab-close {position: unset;font-size: 0;}
.notice-bar .read-more {width: 24px;height: 24px;font-size: 0;line-height: 0;}
.hab-area {display: flex;justify-content: space-between;align-items: center;width: 100%;}
.hab-close a {background: url(../images/kr/base/ico_head_alertbar_en_exit.svg) no-repeat 0 50%;background-size: 24px auto;} */

/* 상단으로 이동  */
div.back-to-top {bottom:10px; right:10px;}
div.back-to-top a {width:40px;height:40px;background-image:url(../images/kr/base/back-to-top.svg);}

/* footer */
#salesFooter.sc-ft {background:#191919;line-height:1;}
.sc-ft__inner {width:100%;max-width:1404px;margin:0 auto;padding:24px 32px 60px;background:#191919;}
.sc-ft__info {display:flex;justify-content:space-between;align-items:center;padding:32px 0;border-bottom:1px solid #FFFFFF4D;}
.sc-ft__country {display:flex;align-items:center;font-size:12px;color:#FFFFFF;}
.sc-ft__country img {width:20px;height:13px;margin-right:8px;}
.sc-ft__util {display:flex;flex: 1;flex-wrap: wrap;justify-content:space-between;align-items:center;padding:32px 0 48px;}
.sc-ft__util > div {display:flex;align-items:center;}
.sc-ft__sns {display:flex;justify-content:space-between;}
.sc-ft__sns a {display: inline-block;width:50px;height:50px;}
.sc-ft__sns a + a {margin-left:22px;}
.sc-ft__util .sc-ft__apps span, 
.sc-ft__util .sc-ft__sns span {font-size:12px;color:#FFFFFF;margin-right:24px;}
.sc-ft__cs-btn, .sc-ft__award {display:inline-block;vertical-align:middle;}
.sc-ft__award {margin-right:40px;width:83px;}
.sc-ft__cs-btn {width:168px;}
.sc-ft__cs-btn.--mo {display:none;}
.sc-ft__links {margin-bottom:70px;}
.sc-ft__link-list {display:flex;flex-wrap:wrap;margin-bottom: 0;}
.sc-ft__link-list li{margin:12px 12px 0 0;}
.sc-ft__link-list li a {font-size:14px;border-right:none;letter-spacing:0;padding:0;color:#FAFAFA;}
.sc-ft__link-list li.--point a {color:#0473EA;}
.sc-ft__addr, .sc-ft__copy {display:inline-block;font-size:14px;color:#666666 !important;font-style: normal;}

@media only screen and (max-width:1404px){
  #salesHeader.sc-hd .header_inner{max-width: 100%;}
}
@media only screen and (max-width:1340px) {
  .gnb_full_matrix .gnb-util{padding-right:40px;}
  .gnb-util + .two_depth {padding-left: 40px;}
}

/**************************************
		as-is 스타일
	**************************************/
/*company_customer*/
.company_customer {display:none;}
/*
	contents
*/
#main_container {background-color:#f2f3f5;}
#main_container, #sub_container {min-width:999px;position:relative;z-index:40;}
.hfix #main_container {padding-top:80px;}
#main_container .container_inner, #sub_container .container_inner {width:999px; min-width: 999px; margin:0 auto;padding-top:30px; min-height:calc(100vh - 357px);}
/* #main_container .container_inner, #sub_container .container_inner {width:100%; min-width:999px; max-width:1280px; margin:0 auto; padding:30px 10px 0 10px; min-height:calc(100vh - 357px);} */
.priority_service #sub_container, .priority_service.hfix #sub_container {padding-top:80px;}
.hfix #sub_container {padding-top:80px;}

/*
	하단 퀵메뉴
*/
#main_container .fot_menu {margin-top:30px;}
.fot_menu {background:#fff;border-top:1px solid #e0e1e1;}
.fot_menu .inner {max-width:1340px;margin:0 auto;}
.fot_menu .inner ul {margin-bottom:0; overflow: hidden;}
.fot_menu ul:after {content:""; display:block; clear:both;}
.fot_menu li {float:left;position:relative;text-align:center;background:url(../images/kr/base/foot_menu_line.gif) 0 50% no-repeat transparent;}
.fot_menu li:first-child {background:none;}
.fot_menu.col4 li {width:25%;}
.fot_menu.col5 li {width:20%;}
.fot_menu.col6 li {width:16.6%;}
.fot_menu.col7 li {width:13%;}
.fot_menu.col7 li.ico_book {width:18%;}
.fot_menu.col7 li.ico_speaker,
.fot_menu.col7 li.ico_finance {width:15%;}
.fot_menu li a {display:block;font-size:13px;color:#666;line-height:21px;}
.fot_menu li a > span {padding-top:17px;padding-bottom:17px;padding-left:25px;display:inline-block;background-image:url(../images/kr/base/ico_fotmenu.png);background-repeat:no-repeat;text-decoration:none;}
.fot_menu li a:hover span {text-decoration:underline;}
.fot_menu li.multiline a > span {padding-top:7px;padding-bottom:6px;}
.fot_menu li.ico_percent a > span {background-position:0 19px;}
.fot_menu li.ico_dollar a > span {background-position:0 -81px;}
.fot_menu li.ico_graph a > span {background-position:0 -181px;}
.fot_menu li.ico_deposit a > span {background-position:0 -281px;}
.fot_menu li.ico_clock a > span {background-position:0 -381px;}
.fot_menu li.ico_speaker a > span {background-position:0 -481px;}
.fot_menu li.ico_book a > span {background-position:0 -581px;}
.fot_menu li.ico_man a > span {background-position:0 -681px;}
.fot_menu li.ico_dom a > span {background-position:0 -781px;}
.fot_menu li.ico_finance a > span {background:url('/np/assets/images/kr/base/ico_finance_w.gif') 0 19px no-repeat;}

/*
	하단 히스토리
*/
.breadcrumbs {border-top:1px solid #dbddde; background: #f2f7f9;}
.breadcrumbs .inner {max-width:1340px; padding-left:35px;margin:0 auto;overflow:hidden;position:relative;box-sizing:content-box;}
.breadcrumbs a {padding-top:9px;padding-bottom:9px;padding-left:15px;margin-left:15px;display:inline-block;line-height:18px;background:url(../images/kr/base/ico_histroy_arrow.png) no-repeat 0 12px;font-size:12px;color:#7a8794;}
.breadcrumbs a.home {width:35px;height:100%;margin-left:0;background:none;padding:0;vertical-align:top;position:absolute;top:0;left:0;text-align:right;background:url(../images/kr/base/ico_history.png) no-repeat 100% 11px;}
/* 2021-02-03 rebranding */
/***************************************************************************/

@media (max-width: 1340px){
  #salesHeader.sc-hd .header_inner {width:100%; padding:0 32px;}
  .gnb_full_matrix .gnb_wrap {padding: 32px;}
  .gnb_full_matrix .gnb_wrap .inner_wrap{width:100%;}
  .gnb-util {padding-right: 40px;}
  /* .two_depth {padding-left: 40px;} */
}