.wooriib * {
    font-family: 'Spoqa Han Sans Neo';
}

.wooriib .gnb {
    font-family: 'Spoqa Han Sans Neo';
}

.wooriib .wb-footer {
    font-family: 'Spoqa Han Sans Neo';
}

/**
 * Banner
 */
.wooriib .banner-wrap {
    width: 100%;
    height: 46px;
}

.wooriib .top_banner {
    background: #e6f2fe;
    height: 100%;
}

.wooriib .top_banner .top_banner_position {
    width: 974px;
    height: 100%;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wooriib .top_banner .banner_wrap {
    width: 760px;
    height: 100%;
    display: flex;
    align-items: center;
    color: #303740;
    letter-spacing: -0.6px;
    line-height: 22.4px;
}

.wooriib .top_banner .banner_wrap strong {
    font-size: 14px;
    font-weight: 700;
    background: url("../../img/header/ico_notice.png") no-repeat 0 50%;
    padding-left: 30px;
}

.wooriib .top_banner .banner_wrap p {
    font-size: 14px;
    margin: 0 12px 0 8px;
}

.wooriib .top_banner .banner_wrap a {
    font-size: 14px;
    text-decoration: underline;
}

.wooriib .today-check {
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.wooriib .today-check .check-box {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.wooriib .today-check .check-box>span {
    color: #505763;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.14px;
}

.wooriib .top_banner .today-check .btn_close {
    width: 20px;
    height: 20px;
    background: url("../../img/header/btn_cls_gray.png") no-repeat center;
}

.wooriib .top_banner .swiper-container {
    width: 760px;
    height: 100%;
    pointer-events: none;
}

.wooriib .top_banner .swiper-container .swiper-slide-active {
    opacity: 1 !important;
}

.wooriib .top_banner .swiper-container .top-banner-content {
    flex: 1;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}




/**
 * GNB HEADER
 */
.wooriib .gnb-header-wrap {
    width: 100%;
    background-color: #1375DD;
}

.wooriib .gnb-header-wrap .gnb-header {
    width: 974px;
    padding-top: 20px;
    padding-bottom: 20px;
    height: 100%;
    margin: auto;
}

.wooriib .gnb-header-wrap .gnb-header .logo {
    height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}

.wooriib .gnb-header-wrap .gnb-header .toggle-wrap {
    position: relative;
    display: flex;
    height: 36px;
    border-radius: 20px;
    background-color: #2589F4;
}

.wooriib .gnb-header-wrap .gnb-header .toggle-wrap a {
    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.6px;
}

.wooriib .gnb-header-wrap .gnb-header .toggle-wrap .fundsupermarket {
    padding: 7px 12px;
    border-radius: 20px;
    background-color: #FFF;
    color: #145090;
}

.wooriib .gnb-header-wrap .gnb-header .toggle-wrap .cma {
    padding: 7px 12px 7px 8px;
    color: #CEE5FD;
}

.wooriib .gnb-header-wrap .gnb-header .toggle-wrap .tooltip {
    display: none;
    position: absolute;
    left: -30px;
    top: 43px;
    width: 272px;
    height: 29px;
    text-align: center;
    background-color: #FFF;
    border-radius: 20px;
    border: 1px solid #2589F4;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.25);
    z-index: 1;
}

.wooriib .gnb-header-wrap .gnb-header .toggle-wrap .tooltip>img {
    position: relative;
    top: -1px;
}

.wooriib .gnb-header-wrap .gnb-header .toggle-wrap .tooltip::before {
    content: "";
    position: absolute;
    right: 101px;
    display: block;
    width: 8px;
    top: -6px;
    height: 6px;
    background: url(../../img/header/tooltip-top.svg);
}

.wooriib .gnb-header-wrap .gnb-header .toggle-wrap .tooltip::after {
    content: "";
    position: absolute;
    right: 101px;
    display: block;
    width: 8px;
    top: -5px;
    height: 6px;
    background: url(../../img/header/tooltip-top-layer.svg);
}

.wooriib .gnb-header-wrap .gnb-header .toggle-wrap .tooltip>span {
    color: #2589F4;
    font-size: 13px;
    font-weight: 500;
    line-height: 29px;
    height: 29px;
    letter-spacing: -0.39px;
}

.wooriib .gnb-header-wrap .gnb-header .side {
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.6px;
}
.wooriib .gnb-header-wrap .gnb-header .side a {
    color: #FFF !important;
}

.wooriib .gnb-header-wrap .gnb-header .side .dot {
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background-color: #FFF;
}

.wooriib .gnb-header-wrap .gnb-header .login-timer {
    color: #FFF;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.6px;
    display: flex;
    align-items: center;
}

.wooriib .gnb-header-wrap .gnb-header .login-timer strong {
    padding-left: 6px;
    vertical-align: baseline;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/**
 * GNB MENU
 */
.wooriib .gnb-menu-wrap {
    width: 100%;
    height: 67px;
    border-bottom: 1px solid #EAEDF1;
    background-color: #FFF;
    position: relative;
}

.wooriib .gnb-menu-wrap .gnb-menu {
    width: 974px;
    height: 100%;
    margin: auto;
}

.wooriib .gnb-menu-wrap .gnb-menu .menu-list {
    height: 100%;
    color: #121417;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.18px;
}

.wooriib .gnb-menu-wrap .gnb-menu .menu-list .menu-woori-icon {
    display: none;
    cursor: pointer;
}

.wooriib .gnb-menu-wrap .gnb-menu .menu-list>div {
    height: 100%;
    display: flex;
    align-items: center;
    cursor: pointer;
    padding-left: 25px !important;
    padding-right: 25px;
}

.wooriib .gnb-menu-wrap .gnb-menu .menu-list>div:nth-child(2) {
    padding-left: 0px !important;
}

.wooriib .gnb-menu-wrap .gnb-menu .menu-list>div:hover {
    color: #1375DD;
}

/**
 * MENU DEPTH
 */

.wooriib .menu-depth-wrap {
    display: none;
    position: absolute;
    width: 100%;
    padding-top: 20px;
    padding-bottom: 40px;
    border-top: 1px solid #EAEDF1;
    border-bottom: 1px solid #EAEDF1;
    position: absolute;
    background-color: #FFF;
    z-index: 999999;
    left: 0;
    top: 66px;
}

.wooriib .menu-depth-wrap .menu-depth {
    width: 974px;
    margin: auto;
}

.wooriib .menu-depth-wrap .menu-depth .content {
    display: flex;
    column-gap: 20px;
    row-gap: 30px;
    flex-wrap: wrap;
}

.wooriib .menu-depth-wrap .menu-depth .content .sub-menu {
    width: 178.5px;
}

.wooriib .sub-menu-content {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.wooriib .sub-menu-content .title {
    height: 24px;
    color: #121417;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -1px;
    line-height: 24px;
    text-align: left;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
}
.wooriib .sub-menu-content .title.lock::after {
    content: url('../../img/header/lock-icon.svg');
    position: relative;
    left: 4px;
    display: inline-block;
    width: 12px;
    height: 12px;
}

.wooriib .sub-menu-content>ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wooriib .sub-menu-content>ul>li {
    color: #121417;
    font-size: 14px;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -1px;
    cursor: pointer;
}

.wooriib .sub-menu-content .title:hover,
.wooriib .sub-menu-content ul>li:hover {
    color: #1375DD;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/**
* GNB SEARCH
*/
.wooriib .gnb-search-wrap {
    display: none;
    position: absolute;
    width: 100%;
    padding-top: 50px;
    padding-bottom: 40px;
    border-bottom: 1px solid #EAEDF1;
    background-color: #FFF;
    z-index: 999998;
}

.wooriib .gnb-search-dim {
    display: none;
    position: fixed;
    top: 230px;
    bottom: 0;
    right: 0;
    left: 0;
    background-color: #121417;
    opacity: 0.6;
    z-index: 2;
}

.wooriib .gnb-search {
    width: 720px;
    margin: auto;
    position: relative;
    z-index: 1;
}

.wooriib .gnb-search .search-character-img-1 {
    position: absolute;
    top: -50px;
    left: 30px;
    z-index: 99;
}

.wooriib .gnb-search .search-character-img-2 {
    position: absolute;
    bottom: -40px;
    right: -120px;
    z-index: 99;
}

.wooriib .gnb-search .search-input-wrap {
    width: 100%;
    position: relative;
}


.wooriib .gnb-search .search-input {
    width: 100%;
    height: 80px;
    padding: 23px 56px 23px 28px;
    border: 4px solid #1375DD;

    font-size: 24px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.8px;
}

.wooriib .gnb-search .search-input::placeholder {
    font-size: 24px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.8px;
    color: #AEB4BF;
}

.wooriib .gnb-search .search-delete-icon {
	display: none;
	position: absolute;
	right: 80px;
	top: 50%;
	transform: translate(0, -50%);
}

.wooriib .gnb-search .search-input-icon {
    position: absolute;
    right: 28px;
    top: 50%;
    transform: translate(0, -50%);
}

.wooriib .gnb-search .search-input-wrap .search-linked-wrap {
    display: none;
    width: 720px;
    position: absolute;
    background-color: #F7F8FA;
    padding-top: 10px;
    padding-bottom: 10px;
    z-index: 999998;
}

.wooriib .gnb-search .search-input-wrap .search-linked-wrap ul {
    display: flex;
    flex-direction: column;
}

.wooriib .gnb-search .search-input-wrap .search-linked-wrap ul li {
    padding: 8px 30px;
    color: #505763;
    font-size: 14px;
    font-weight: 500;
    line-height: 160%;
    letter-spacing: -0.6px;
}

.wooriib .gnb-search .search-input-wrap .search-linked-wrap ul li .psearch {
    color: #1375DD;
    vertical-align: baseline;
}

.wooriib .gnb-search .search-input-wrap .search-linked-wrap ul li:hover {
    background-color: #EAEDF1;
}

.wooriib .gnb-search .popular-keyword {
    display: flex;
    gap: 20px;
}

.wooriib .gnb-search .popular-keyword .left {
    flex-shrink: 0;
}

.wooriib .gnb-search .popular-keyword .right {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    row-gap: 8px;
}

.wooriib .gnb-search .popular-keyword .right>span {
    cursor: pointer;
}

.wooriib .gnb-search .popular-keyword .popular {
    color: #1375DD;
    font-size: 15px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.6px;
}

.wooriib .gnb-search .popular-keyword {
    font-size: 15px;
    font-weight: 500;
    line-height: 140%;
    letter-spacing: -0.6px;
}

.wooriib .gnb-search .popular-keyword .keyword {
    color: #505763;
}

/**
 * SITE MAP
 */
.wooriib .site-map-wrap {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    overflow: auto;
    background-color: #FFF;
    border-bottom: 1px solid #EAEDF1;
    z-index: 999998;
    height: 800px;
    -ms-overflow-style: none;
}

.wooriib .site-map-wrap::-webkit-scrollbar {
    display: none;
}

.wooriib .site-map-wrap .site-map {
    width: 974px;
    margin: 0 auto;
    padding-top: 60px;
    padding-bottom: 60px;
}

.wooriib .site-map-wrap .site-map .all-title {
    font-size: 24px;
    font-weight: 700;
    line-height: 140%;
    letter-spacing: -0.8px;
    color: #121417;
}

.wooriib .site-map .menu-deph-item {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.wooriib .site-map .menu-deph-item .title-box {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding-bottom: 20px;
    border-bottom: 1px solid #F2F4F6;
    cursor: pointer;
}

.wooriib .site-map .menu-deph-item .title-box span {
    font-size: 24px;
    font-weight: 700;
    list-style: 34px;
    letter-spacing: -0.8px;
}

.wooriib .site-map .menu-deph-item .title-box img {
    transition: transform 0.25s ease-in-out;
    user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

.wooriib .site-map .menu-deph-item .map-sub-menu {
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    padding-bottom: 20px;
    gap: 20px;
}

.wooriib .site-map .menu-deph-item .map-sub-menu .sub-menu-content {
    width: 178.5px;
}

/* location */
.gnb-menu-wrap .location * {font-family: 'NanumGothic', '나눔고딕', 'Dotum', 'Arial' !important}
.gnb-menu-wrap .location {clear:both; position:relative; width:100%; height:40px; line-height:40px; margin:1px auto 0 auto; text-align:left; background:#fff;}
.gnb-menu-wrap .location.fixed {position:absolute; background:none; z-index:99999}
.gnb-menu-wrap .location>ul {display:block; width:950px; height:40px; margin:0 auto;}
.gnb-menu-wrap .location>ul>li {float:left; height:40px; font-size:13px; line-height:40px; color:#888;}
.gnb-menu-wrap .location>ul>li em {display:inline-block; padding:0 7px;}
.gnb-menu-wrap .location>ul>li a {color:#888;}
.gnb-menu-wrap .location>ul>li.home {padding:0 0 0 17px; background:url('/img/gnb/bg_location1.png') no-repeat left center;}
.gnb-menu-wrap .location>ul>li.lastcate {position:relative; color:#333;}
.gnb-menu-wrap .location>ul>li.lastcate a {float:left; color:#333;}
.gnb-menu-wrap .location>ul>li.lastcate em {float:left; color:#888}
.gnb-menu-wrap .location>ul>li.lastcate em.moreView {float:right; width:0; height:0; margin:18px 0 0 5px; padding:0; border-left:3px solid transparent; border-right:3px solid transparent; border-top:3px solid #949494; text-indent:-999999px}
.gnb-menu-wrap .location>ul>li.lastcate .cateLine {display:none; position:absolute; top:34px; left:12px; max-width:320px; min-width:150px; width:auto; padding:6px 10px; background:#fff; box-sizing:border-box; border:1px solid #c8c8c8; border-radius:5px; z-index:100;}
.gnb-menu-wrap .location>ul>li.lastcate .cateLine>ul>li {display:block; overflow:hidden; height:23px; line-height:23px; font-size:12px;}
.gnb-menu-wrap .location>ul>li.lastcate .cateLine>ul>li>a:hover {color:#134298}

/** Toggle 전환 애니메이션 */
.toggle-transition {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 9999999;
    pointer-events: none;
}

.toggle-transition .img-area {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    z-index: 1;
    animation: fadeIn 0.5s linear forwards;
}

.toggle-transition .transition-circle {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background-color: #084FBD;
    left: 50%;
    transform: translate(-50%, 0);
    animation: slideUp 0.7s linear forwards;
}

.toggle-transition .transition-back-circle {
    content: "";
    position: absolute;
    width: 200%;
    height: 200%;
    border-radius: 50%;
    background-color: #084FBD;
    opacity: 0.4;
    left: 50%;
    transform: translate(-50%, 0);
    animation: slideBackUp 0.75s linear forwards;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes slideUp {
    0% {
        transform: translate(-50%, 50%);
    }

    100% {
        transform: translate(-50%, -10%);
    }
}

@keyframes slideBackUp {
    0% {
        transform: translate(-50%, 40%);
    }

    100% {
        transform: translate(-50%, -10%);
    }
}