@charset "utf-8";
* {
    -webkit-overflow-scrolling: touch;
}

html {
    scroll-padding-top: 15rem;
}

body {
    counter-reset: section; /* counter 이름을 'section'으로 지정합니다. 초깃값은 0입니다. */
}

/* bootstrap reset */
div.datepicker { z-index: 9999 !important; }
input.datepicker {
    padding: .375rem .75rem;
    line-height: 1.5;
}
input.datepicker:disabled,
input.datepicker:read-only {
    background-color: rgba(0, 0, 0, .04);
}
input.datepicker:disabled:hover,
input.datepicker:read-only:hover {
    border-color: #ccc !important;
}
.form-control,
.btn-outline-secondary:hover {
    color: #232327;
}
.btn-outline-secondary:hover {
    border-color: #ced3ed;
    background-color: transparent;
    color: #232327;
}
.btn-outline-secondary:hover:active {
    border-color: #ced3ed;
    background-color: #ced3ed;
}

.form-select {
    margin-right: 1.7rem;
}

.btn-check:hover+.btn, 
.btn:hover {
    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 15%);
}

.btn-primary {
    background-color: #2D316C;
    border-color: #2D316C;
}
a.btn-primary {
    background-color: #2D316C;
    color:#fff;
    border-color: #2D316C;
}

.btn-tertiary {
    background-color: #4d4d65;
    border-color: #4d4d65;
    color: #fff;
    position: relative;
}

.btn-tertiary:hover {
    color: #fff;
}
.btn-primary.disabled, 
.btn-primary:disabled {
    opacity: .6;
    background-color: #aaa;
    border-color: #bbb;
}

.dropdown-menu.custom {
    max-height: 264px;
    overflow-y: auto;
}
.dropdown-menu.custom li + li {
    border-top: 1px solid #ccc;
}
.dropdown-menu.custom li a {
    font-size: .867em;
    padding: .2em .85em;
}

* > .tool-tip-balloon {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(calc(-100% - 10px), -50%);
    border: 1px solid #ccc;
    background-color: #fff;
    padding:.245rem 1rem;
    font-size: .8rem;
    border-radius: 6px;
    white-space: nowrap;
    display: none !important;
    z-index: 10000;
    letter-spacing: -.05em;
}

* > .tippy-box {
	background-color: #2D316C;
}
* > .tippy-box .tippy-arrow {
    color: #2D316C;
}

* > .tippy-box[data-theme~='exclamation'] {
	font-size: .8rem;
	color: #fff;
	background-color: #2D316C;
	max-width: 100% !important;
}
* > .tippy-box[data-theme~='exclamation'] .tippy-arrow {
    color: #2D316C;
}

.btn-question {
    width: 1em;
    height: 1em;
    position: relative;
    padding: 0;
    margin-left: .15em;
}
.btn-question::before {
    content:"";
    width: 100%;
    height: 100%;
    background-color: #7D7FA6;
    -webkit-mask: url('../img/common/ico-question.svg') 50% 50%/contain no-repeat;
    mask: url('../img/common/ico-question.svg') 50% 50%/contain no-repeat;
    position: absolute;
    top:0;
    left: 0;
}
.btn-question:hover .tool-tip-balloon {
    display: none;
}

.title-container {
	display: flex;
	gap: 6px;
	align-items: center;
	text-decoration: none;
}

.title-container:hover {
	text-decoration: underline;
}

.tooltip-container {
    position: relative;
    display: inline-block;
}

.tooltip-container img{
    display: block;
    vertical-align: middle;
}

* > .tool-tip-balloon.up {
    left: 50%;
    top: auto;
    bottom: calc(100% + 8px);
    transform: translate(-50%, 0);
    text-align: left;
}
* > .tool-tip-balloon.right {
    left: 0;
    top: 0;
    transform: translate(15%, -10%);
    text-align: left;
}
* > .tool-tip-balloon.down {
    left: 50%;
    top: calc(100% + 8px);
    transform: translate(-50%, 0);
    text-align: left;
}

*:hover > .tool-tip-balloon,
.btn-question:focus .tool-tip-balloon,
.tooltip-container:hover .tool-tip-balloon,
.locked:hover .tool-tip-balloon {
    display: inline-block !important;
    opacity: 1;
}

.btn-check:active+.btn-outline-secondary,
.btn-check:checked+.btn-outline-secondary,
.btn-outline-secondary.active,
.btn-outline-secondary.dropdown-toggle.show,
.btn-outline-secondary:active {
    background-color: #313daa;
}

.btn-check:active+.btn-outline-secondary:focus,
.btn-check:checked+.btn-outline-secondary:focus,
.btn-outline-secondary.active:focus,
.btn-outline-secondary.dropdown-toggle.show:focus,
.btn-outline-secondary:active:focus,
.btn-check:focus+.btn-outline-secondary,
.btn-outline-secondary:focus {
    box-shadow: 0 0 0 0.25rem rgb(74 88 215 / 34%);
}

.form-check-input {
    height: 1.8em;
    margin-top: 0.15em;
    cursor: pointer;
}

.form-check .form-check-input {
    margin-top: 0;
}

.form-check-input[type=checkbox] + label,
.form-check-input[type=radio] + label {
    margin-left: .4rem;
}

.dropdown-toggle,
.btn.dropdown-toggle {
    position: relative;
    padding-right: 2em;
}

.dropdown-toggle::after {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translate(0, -50%);
}

/* owl-carousel theme reset */
.owl-theme .owl-nav > [class*=owl-],
.carousel-wrap .btn-wrap button {
    width: 17px;
    height: 17px;
    box-sizing: border-box;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-color: transparent;
    background-size: auto 10px;
    font-size: 0;
    text-indent: -9999px;
    padding: 0;
    margin:.1rem .2rem;
    border-radius: 3px;
}

.owl-theme .owl-nav [class*=owl-]:hover,
.carousel-wrap .btn-wrap button:hover {
    background-color: rgb(93, 141, 255, .15);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    background-size: auto 10px;
    color: inherit;
}

.owl-theme .owl-nav .owl-prev,
.owl-theme .owl-nav .owl-prev:hover {
    background-image: url('../img/common/ico-carousel-nav-prev.svg');
}

.owl-theme .owl-nav .owl-next,
.owl-theme .owl-nav .owl-next:hover {
    background-image: url('../img/common/ico-carousel-nav-next.svg');
}

.carousel-wrap .btn-wrap button.play {
    background-image: url('../img/common/ico-carousel-play.svg');
}

.carousel-wrap .btn-wrap button.stop {
    background-image: url('../img/common/ico-carousel-pause.svg');
}

.owl-theme .owl-dots .owl-dot {
    background-color: transparent;
    padding:0 .25rem;
    margin: 0;
    width: auto;
}

.owl-theme .owl-dots .owl-dot span {
    margin:0;
    background-color:#1826A2;
    opacity: .2;
}

.owl-theme .owl-dots .owl-dot.active span {
    opacity: 1;
    background-color:#1826A2;
}

.carousel-wrap {
    position: relative;
}
.owl-carousel.one .owl-nav,
.owl-carousel.one .owl-dots {
    display: none;
}

/* animate */
@keyframes downAndUp {
    0% {
        margin-top: 0;
        opacity: .2;
    }
    
    30% {
        margin-top: 10px;
        opacity: 1;
    }
    
    100% {
        margin-top: 0;
        opacity: .2;
    }
}

@keyframes showRight {
    80% {
        opacity: 0;
        right: 10px;
    }
    
    100% {
        opacity: 1;
        right: -30px;
    }
}

@keyframes boxShadowWidthColor01 {
    0% {
    box-shadow: 0 0 0 0px rgba(239, 175, 110, 0.34);
    }
    40% {
    box-shadow: 0 0 0 4px rgba(239, 175, 110, 0.34);
    }
    
    100% {
    box-shadow: 0 0 0 0px rgba(239, 175, 110, 0.34);
    }
}
@keyframes boxShadowWidthColor02 {
    0% {
    box-shadow: 0 0 0 0px rgba(60, 190, 159, 0.34);
    }
    40% {
    box-shadow: 0 0 0 4px rgba(60, 190, 159, 0.34);
    }
    
    100% {
    box-shadow: 0 0 0 0px rgba(60, 190, 159, 0.34);
    }
}
@keyframes boxShadowWidthColor03 {
    0% {
    box-shadow: 0 0 0 0px rgba(92, 117, 241, 0.34);
    }
    40% {
    box-shadow: 0 0 0 4px rgba(92, 117, 241, 0.34);
    }
    
    100% {
    box-shadow: 0 0 0 0px rgba(92, 117, 241, 0.34);
    }
}
@keyframes boxShadowWidthColor04 {
    0% {
    box-shadow: 0 0 0 0px rgba(251, 38, 81, 0.12);
    }
    40% {
    box-shadow: 0 0 0 4px rgba(251, 38, 81, 0.12);
    }
    
    100% {
    box-shadow: 0 0 0 0px rgba(251, 38, 81, 0.12);
    }
}
@keyframes boxShadowWidthColor05 {
    0% {
    box-shadow: 0 0 0 0px rgba(22, 203, 223, 0.34);
    }
    40% {
    box-shadow: 0 0 0 4px rgba(22, 203, 223, 0.34);
    }
    
    100% {
    box-shadow: 0 0 0 0px rgba(22, 203, 223, 0.34);
    }
}

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

@keyframes flowDownAndUp {
    0% {
        transform: translate(0, -70%);
    }
    
    50% {
        transform: translate(0, -50%);
    }
    
    100% {
        transform: translate(0, -70%);
    }
}

@keyframes blinkAndHide {
    0% {
        opacity: 0.1;
    }
    
    15% {
        opacity: 1;
    }
    
    30% {
        opacity: 0.1;
    }
    
    45% {
        opacity: 1;
    }
    
    60% {
        opacity: 0.1;
    }
    
    75% {
        opacity: 1;
    }
    
    85% {
        opacity: 0;
    }
    
    100% {
        display: none;
    }
}

@keyframes fadeInAndHide {
    0% {
        z-index: -1;
        opacity: 0;
    }
    1% {
        z-index: 100;
    }
    50% {
        opacity: 1;
    }
    
    99% {
        opacity: 0;
    }
    
    100% {
        z-index: -1;
    }
}

/* 공통 */
html {
    font-size: 15px;
}

body {
    overflow-x: hidden;
    transition: background-color .2s;
}

p,
a,
span,
input,
select,
textarea,
label,
em {
    color: #232327;
}

a.btn {
    font-size: .867em;
}

header {
    background: #fff;
    height: 5.2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 0 2.4rem;
    position: fixed;
    width: 100%;
    z-index: 1100;
    box-sizing: border-box;
    /* border-bottom: 1px solid #B3B4BA; */
}

.btn-menu {
    background-color: transparent;
    width: 40px;
    height: 40px;
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translate(0, -50%);
    font-size: 0px;
    text-indent: -9999px;
    display: none;
}

.btn-menu::before,
.btn-menu::after,
.btn-menu > span {
    content:"";
    width: 16px;
    height: 1px;
    background-color: #333333;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .25s;
}

.btn-menu::before {
    margin-top: -6px;
}

.btn-menu::after {
    margin-top: 6px;
}

h1 {
    width: 10.15em;
    width: 135px;
}

h1>a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 0px;
    line-height: 0px;
    text-indent: -9999px;
}

h1>a>img,
h1>a>embed {
    width: 100%;
    height: 100%;
    shape-rendering:auto;
}

#gnb {
    display: inline-block;
    font-size: 0;
    position: absolute;
    left: 40%;
    transform: translate(-40%, 0);
}

#gnb>ul>li {
    display: inline-block;
}

#gnb>ul>li>a {
    font-size: 1.3rem;
    font-weight: 500;
    padding: 0 1vw;
    color: #232327;
}

.util {
    font-size: 0;
    display: flex;
    align-items: center;
}

.util>li {
    display: inline-block;
    vertical-align: top;
}

.util>li>a {
    width: 24px;
    height: 24px;
    display: block;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    position: relative;
}

.util>li {
    width: 5.2rem;
}

.util>li>a {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: .15em;
    justify-content: center;
    height: 5.2rem;
    text-indent: 0;
    text-align: center;
    padding-right: 0;
    font-family: "GmarketSans", "notokr", "맑은 고딕", serif;
    font-weight: 500;
    color: #2D316C;
}
.util>li>a,
.util>li>a>span {
    font-size: .8rem;
    letter-spacing: -0.02rem;
}
.util>li>a:hover,
.util>li>a.show {
    background-color: #F4F5FC;
}

.util>li>a>span {
    color: #2D316C;
}

.util>li>a::before {
    content: "";
    display: block;
    width: 2rem;
    height: 2rem;
    border-radius: 100px;
    margin-left: auto;
    margin-right: auto;
    background-color: #2D316C;
    -webkit-mask: 50% 50% no-repeat;
    mask: 50% 50% no-repeat;
}

.util>li.user>a::before {
    -webkit-mask-image: url('../img/common/ico-top-before-login.svg');
    mask-image: url('../img/common/ico-top-before-login.svg');
}
.util>li.user.info>a::before {
    -webkit-mask-image: url('../img/common/ico-top-after-login.svg');
    mask-image: url('../img/common/ico-top-after-login.svg');
}
.util>li.portfolio>a::before {
    -webkit-mask-image: url('../img/common/ico-top-my-portfolio.svg');
    mask-image: url('../img/common/ico-top-my-portfolio.svg');
}
.util>li.kr>a::before {
    -webkit-mask-image: url('../img/common/ico-top-kr.svg');
    mask-image: url('../img/common/ico-top-kr.svg');
}
.util>li.user.info>a::after {
    display: none;
    position: static;
    transform: translate(0, 0);
}
.util>li.more>a {
    font-size: 0;
}
.util>li.more>a::before {
    -webkit-mask-image: url('../img/common/ico-top-all-menu.svg');
    border-radius: 0;
    background-color: #444349;
}
.util>li .dropdown-menu {
    border-radius: 0;
    border-color: #B4B3B9;
    padding-left: .4em;
    padding-right: .4em;
    min-width: auto;
}
.util>li .dropdown-menu::after {
    content:"";
    display: block;
    width: .7em;
    height: .7em;
    background-color: #fff;
    border: 1px solid #B4B3B9;
    border-right: none;
    border-bottom: none;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    margin-top: -1px;
}
.util>li .dropdown-menu[data-popper-placement*=end] {
    margin-right: .75rem !important;
}
.util>li .dropdown-menu[data-popper-placement*=end]::after {
    left: auto;
    right: 1.1rem;
}
.util>li .dropdown-menu .dropdown-item {
    text-align: center;
    font-weight: normal;
    font-size: .933em;
    padding-top: .55em;
    color:#666;
}
.util>li .dropdown-menu .dropdown-item:active {
    background-color: rgba(0, 0, 0, .06);
}
.util>li .dropdown-menu li + li > .dropdown-item {
    border-top: 1px solid #B4B3B9;
}



img {max-width: 100%;}


.btn-go-top {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-size: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, .5);
    transition: all .3s;
}
.btn-go-top::before {
    content:"";
    display: block;
    position: absolute;
    top:0; left: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
    -webkit-mask: url(../img/common/ico-up-arrow.png) 50% 50% no-repeat;
    mask: url(../img/common/ico-up-arrow.png) 50% 50% no-repeat;
    transition: all .15s;
}
.btn-go-top:hover {
    background-color: rgba(0, 0, 0, .75);
}
.btn-go-top:hover:before {
    background-color: #fff;
}

/* 로그인 */
.over-modal.login-wrap {
    background-color: #fff;
    padding: 3.5em 3em;
    position: fixed;
    min-width: 450px;
    max-width: calc(100% - 40px);
    height: auto;
    top: 50%; 
    left: 50%;
    transform: translate(-50%, -50%);
    overflow-y: auto;
    box-shadow: 0 0 80px rgba(0, 0, 0, .2);
}

.over-modal.login-wrap .tit {
    font-size: 1.54em;
    font-weight: 600;
}

.over-modal.login-wrap .tit + p {
    font-size: 1.067em;
    color: #8D97A5;
}

.over-modal.login-wrap .input-group input {
    background-color: #F4F5FC;
    border: none;
    font-size: 1.2em;
    height: 3.2em;
    line-height: 3.889em;
    border-radius: 10px;
    padding: 0 0 0 4em;
    background-position: 20px 50%;
    background-repeat: no-repeat;
    background-image: url('../img/common/bg-input-id.svg');
}

.over-modal.login-wrap .input-group input[type=password] {
    background-image: url('../img/common/bg-input-pw.svg');
    background-position: 23px 50%;
}

.over-modal.login-wrap .input-group + .input-group {
    margin-top: 10px;
}

.btn.btn-login {
    display: block;
    background-color: #2D316C;
    border: none;
    font-size: 1.333em;
    height: 3.25em;
    line-height: 3.5em;
    border-radius: 10px;
    font-weight: 600;
    color: #fff;
    padding: 0;
    margin-top: 1em;
    margin-bottom: .6em;
}

.over-modal.login-wrap .btn-wrap {
    width: 100%;
}

.over-modal.login-wrap .btn-wrap .btn {
    float: none;
    width: 100%;
    margin: 0;
    text-align: left;
    height: 6em;
    border-radius: 10px;
    background-color: #F3F4F5;
    border: none;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 102px;
    background-position: 40px 50%;
    background-repeat: no-repeat;
    background-image: url('../img/common/ico-signup.svg');
}

.over-modal.login-wrap .btn-wrap .btn + .btn {
    margin-top: 10px;
    background-image: url('../img/common/ico-find-idpw.svg');
}

.over-modal.login-wrap .btn-wrap .btn > span {
    display: block;
}

.over-modal.login-wrap .btn-wrap .btn > span:first-child {
    font-size: .933em;
    color: #8D97A5;
}

.over-modal.login-wrap .btn-wrap .btn > span:nth-child(2) {
    font-size: 1.467em;
    font-weight: 600;
}

.over-modal.login-wrap .btn-wrap .btn.btn-find {
    height: 4em;
    padding-top: .9em;
    padding-bottom: .3em;
    justify-content: space-between;
    background-size: 2.4em auto;
    background-position: 50px 50%;
}

.over-modal.login-wrap .btn-wrap .btn-find.id {
    background-image: url('../img/common/ico-find-id.svg');
}

.over-modal.login-wrap .btn-wrap.flex {
    gap: .6em;
    margin-top: .6em;
    flex-direction: column;
}

.over-modal.login-wrap .btn-wrap.flex .btn {
    margin-top: 0;
}

.over-modal.login-wrap .btn-wrap.flex .btn > * {
    flex: 1 1 auto;
    line-height: 1em;
}

.over-modal.login-wrap .btn-wrap.flex .btn > span:nth-child(2) {
    font-size: 1.067em;
}

hr.line.type01 {
    border: none;
    border-bottom: 1px solid #DEDFE6;
    display: block;
    height: 0px;
    margin:0;
}

.over-modal.login-wrap .form-check {
    display: inline-block; 
    margin-right: 1.5em;
}

.over-modal.login-wrap .form-check-label {
    font-size: .933em;
    margin-left: 8px;
}

.over-modal.login-wrap hr.line.type01 {
    margin: 1.4em 0;
}

.over-modal.login-wrap .btn-close {
    position: absolute;
    top: 20px;
    right: 20px;
    transform: translate(0, 0);
}

.over-modal.login-wrap .btn-close::before,
.over-modal.login-wrap .btn-close::after {
    background-color: #232327;
}

/* 메가메뉴 */
.mega-menu {
    position: fixed;
    z-index: 1090;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 5.2rem);
    overflow-y: auto;
    background-color: #F4F5FC;
    top: -100%;
    left: 0;
    display: block;
    font-size: 1rem;
    padding: 0 0 40px 0;
    transition: all .5s;
}

.mega-menu > .btn-close {
    position: absolute;
    top: 30px;
    right: 30px;
}

body.mega-menu-activated .mega-menu {
    box-shadow: 0 12px 10px rgba(0, 0, 0, .1);
    top: 5.2rem;
}

body.mega-menu-activated .modal {
    z-index: 5;
}

body.mega-menu-activated .btn-menu::before {
    transform: translate(-50%, -50%) rotate(45deg);
    margin-top: 0;
}

body.mega-menu-activated .btn-menu::after {
    transform: translate(-50%, -50%) rotate(-45deg);
    margin-top: 0;
}

body.mega-menu-activated .btn-menu > span {
    left: -300px;
}

.mega-menu .inner {
    text-align: center;
}

.mega-menu .inner > ul {
    display: inline-flex;
    margin: 0 auto;
    text-align: left;
}

.mega-menu .inner > ul > li {
    margin: 40px 30px 0;
    max-width: 150px;
}

.mega-menu .inner > ul > li a {
    padding-left: 27px;
    display: block;
    position: relative;
    z-index: 1;
}

.mega-menu .inner > ul > li > a,
.mega-menu .inner > ul > li > span {
    display: inline-block;
    width: auto;
    font-size: .8em;
    font-weight: 600;
    height: 1.733em;
    line-height: 1.733em;
    background-color: #2D316C;
    border-radius: 0 100px 100px 0;
    color: #fff;
    padding: 0 1em 0 .6em;
}

.mega-menu .inner > ul > li > span {
    display: none;
}

.mega-menu .inner > ul > li > ul {
    margin-top: 18px;
}
.mega-menu .inner > ul > li > ul > li {
    position: relative;
}

.mega-menu .inner > ul > li > ul > li + li {
    margin-top: 19px;
}

.mega-menu .inner > ul > li > ul > li > a {
    font-size: 1.2em;
    font-weight: 500;
}

.mega-menu .inner > ul > li > ul > li > ul {
    margin-top: 14px;
}

.mega-menu .inner > ul > li > ul > li > ul::before {
    content:"";
    display: block;
    width: 17px;
    height: 17px;
    background: #fff url('../img/common/bg-mm-plus.svg') 50% 50% no-repeat;
    border: 1px solid #5B60A5;
    border-radius: 4px;
    position: absolute;
    top: 5px; 
    left: 0px;
}

.mega-menu .inner > ul > li > ul > li > ul {
    margin-top: 0;
}

.mega-menu .inner > ul > li > ul > li > ul > li {
    max-height: 0;
    overflow: hidden;
    margin-top: 0;
}

.mega-menu .inner > ul > li > ul > li > ul > li > a {
    font-size: 0;
    color: #808080;
    transition: all .1s;
}

.mega-menu .inner > ul > li > ul > li > ul > li + li {
    margin-top: 0px;
}

.mega-menu .inner > ul > li > ul > li > .expanded + ul {
    margin-top: 14px;
}

.mega-menu .inner > ul > li > ul > li > .expanded + ul > li {
    max-height: 7.18em;
    margin-top: 8px;
}

.mega-menu .inner > ul > li > ul > li > .expanded + ul > li + li {
    margin-top: 8px;
}

.mega-menu .inner > ul > li > ul > li > .expanded + ul::before {
    top: 5px; 
}

.mega-menu .inner > ul > li > ul > li > .expanded + ul > li > a {
    font-size: .933em;
}

.mega-menu .inner > ul > li > ul > li > .expanded + ul::before {
    background-image: url('../img/common/bg-mm-minus.svg');
}

.mega-menu .inner > ul > li > ul > li > ul > li > a::before {
    content:"";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #808080;
    position: absolute;
    top: 8px;
    left: 11px;
}

#container {
    padding-top: calc(5.2rem + 3.86rem);
}

#container > .search-bar {
    position: fixed;
    top: 5.2rem;
    width: 100%;
    z-index: 550;
    background-color: #2D316C;
}

#container > .search-bar > .inner {
    width: 1600px;
    height: 3.86rem;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#container > .search-bar .search-wrap {
    display: flex;
    align-items: center;
}

#container > .search-bar .input-group {
    width: 450px;
}

#container > .search-bar .input-group > * {
    height: 2.4rem;
    background-color: #fff;
    border: none;
}

#container > .search-bar .input-group > .dropdown-menu {
    height: auto;
}

#container > .search-bar .input-group .dropdown-toggle {
    font-size: .933em;
    color: #2D316C;
}

#container > .search-bar .input-group button.btn.btn-search {
    width: 2.4rem;
    font-size: 0px;
    text-indent: -9999px;
    background: #fff url('../img/contents/ico-search-big-dark.svg') 50% 50% / 20px auto no-repeat;
}

#container > .search-bar .ranking {
    margin-top: 0;
    margin-left: 20px;
}

#container > .search-bar .ranking > *,
#container .ranking .num {
    color: #fff;
}
#container > .search-bar .ranking .keyword-ranking.carousel {
    border-right:none;
    margin-right: 0;
    padding-right: 0;
}

#container > .search-bar .ranking .btn.btn-outline-secondary:hover,
#container .ranking .btn-outline-secondary:hover .num {
    color: #232327;
}

#container .ranking .num {
    font-weight: 400;
    color: #C5C5CC;
}

#container > .search-bar .ranking > label {
    color: rgba(255, 255, 255, .7);
    font-size: .933em;
}

#container > .search-bar .util a.btn {
    font-size: 0;
    text-indent: -9999px;
    border: none;
    width: 21px;
    height: 21px;
    background-color: transparent;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}

#container > .search-bar .util a.btn + a.btn {
    margin-left: 5px;
}

#container > .search-bar .util > ul {
    display: flex;
}

#container > .search-bar .util > ul > li {
    position: relative;
    padding: 0 30px;
}

#container > .search-bar .util > ul > li:first-child {
    padding-left: 0;
}

#container > .search-bar .util > ul > li:last-child {
    padding-right: 0;
}

#container > .search-bar .util > ul > li:last-child::after {
    display: none;
}

#container > .search-bar .util > ul > li::after {
    content:"";
    display: block;
    width: 1px;
    height: 20px;
    background-color: #8183A7;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

#container > .search-bar .util > ul > li > button {
    color: #C0C1D3;
    font-size: .933rem;
    margin-left: 7px;
    background-color: transparent;
    padding: 0;
    line-height: normal;
    vertical-align: middle;
}
#container > .search-bar .util > ul > li > button:hover {
    text-decoration: underline;
}

#container > .search-bar .util a.btn:hover {
    background-color: rgba(0, 0, 0, .24);
}

.dropdown-toggle.responsive + .dropdown-menu {
    z-index: 1;
}

.dropdown-toggle.responsive.show + .dropdown-menu {
    z-index: 1000;
}

*[class*=btn-favorite] {
    position: absolute;
    top: -9999px;
    left: -9999px;
    vertical-align: middle;
    font-size: 0;
    text-indent: -9999px;
    border: none;
    width: 21px;
    background-color: #B3B3B3;
    height: 21px;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
}
*[class*=btn-favorite].top {
    vertical-align: top;
}

.btn-favorite {
    -webkit-mask-image: url('../img/common/btn-favorite-outline.svg');
    mask-image: url('../img/common/btn-favorite-outline.svg');
}

.btn-favorite-remove {
    background-color: #2D316C;
    -webkit-mask-image: url('../img/common/btn-favorite-fill.svg');
    mask-image: url('../img/common/btn-favorite-fill.svg');
    position: absolute;
}

.btn-favorite.btn-fav-sheet, 
.btn-favorite-remove.btn-fav-sheet {
    margin-left: -7px;
    margin-right: -7px;
}

*[class*=btn-favorite].active {
    position: static;
}

#container > .search-bar .util .btn[class*=btn-favorite],
#container > .search-bar .util .btn[class*=btn-favorite]:hover {
    background-color: #fff;
}

.page-title .btn[class*=btn-favorite],
.page-title .btn[class*=btn-favorite]:hover {
    background-color: #fff;
}

#container > .search-bar .util a.btn.btn-text-zoomout {
    background-image: url('../img/common/btn-text-zoomout.svg');
}

#container > .search-bar .util a.btn.btn-text-zoomin {
    background-image: url('../img/common/btn-text-zoomin.svg');
}

#container > .inner {
    width: 1600px;
    margin: 0 auto;
}

#left {
    width: 300px;
    margin-top: 4.32rem;
    float: left;
    position: fixed;
    left: 50%;
    transform: translate(-800px, 0);
    top: calc(5.2rem + 3.86rem);
    transition: all .5s;
}

#left h2 {
    /* padding: 30px 0 30px 30px; */
    padding: 16px 0 16px 30px;
    border: 1px solid #2D316C;
    border-left: none;
    border-right: none;
    font-size: 1.4em;
    color: #232327;
    font-weight: 600;
}

#lnb > ul {
    overflow-y: auto;
    transition: all .7s;
    border-bottom: 1px solid #2D316C;
}

#lnb > ul > li {
    border-bottom: 1px solid #2D316C;
    position: relative;
}

#lnb > ul > li:last-child {
    border-bottom: none;
}

#lnb > ul > li > a {
    display: block;
    width: 100%;
    /* padding: 20px 55px 20px 40px; */
    padding: 10px 55px 10px 40px;
    font-size: 1.067em;
    font-weight: 500;
    position: relative;
    transition: all .15s;
    white-space: normal;
    word-break: keep-all;
    z-index: 1;
}

#lnb > ul > li.active > a,
#lnb > ul > li.expand > a {
    font-weight: 600;
    color: #2D306B;
}

#lnb > ul > li > ul::before {
    content:"";
    display: block;
    width: 20px;
    height: 20px;
    border: 1px solid #5B60A5;
    box-sizing: border-box;
    background: #F4F5FC url('../img/common/btn-lnb-arrow-expand.svg') 50% 50% no-repeat;
    border-radius: 4px;
    position: absolute;
    /* top: 25px; */
    top: .8rem;
    right: 30px;
    transition: all .2s;
}

#lnb > ul > li.expand > ul::before {
    transform: rotate(-180deg);
}

#lnb > ul > li > ul {
    margin-top: 0px;
    padding-bottom: 0px;
    overflow: visible;
}

#lnb > ul > li > ul {
    max-height: 0px;
    overflow: hidden;
    transition: all .35s;
}

#lnb > ul > li.expand > ul {
    /* margin-top: -10px; */
    margin-top: 4px;
    padding-bottom: 10px;
    max-height: 1000px;
}

#lnb > ul > li > ul > li > a {
    display: block;
    font-size: 1em;
    color: #A6A6A6;
    /* padding: 8px 8px 8px 54px; */
    padding: 4px 8px 4px 54px;
    position: relative;
}

#lnb > ul > li > ul > li > a::before {
    content:"";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #A6A6A6;
    position: absolute;
    /* top:20px; */
    top: 14px;
    left:40px;
}

#lnb > ul > li > ul > li > a:hover,
#lnb > ul > li > ul > li.active > a {
    background-color: #F4F5FC;
    color: #2D316C;
}

#lnb > ul > li > ul > li.active > a {
    font-weight: 600;
}

#lnb > ul > li > ul > li.active > a::before {
    background-color: #2D316C;
}

#left.float {
    top: calc(96px + 76px + 20px);
    margin-top: 0;
    /* font-size: 14px; */
}

/* #left.float #lnb > ul > li > a {
    padding: 10px 55px 10px 40px;
} */

#left.float #lnb > ul > li > ul::before {
    top: 14px;
}

#left.float #lnb > ul > li.expand > ul {
    margin-top: 4px;
}

#left.float #lnb > ul > li > ul > li > a::before,
#left.float #lnb > ul > li.expand > ul::before {
    top: 14px;
}

/* #left.float h2 {
    padding: 16px 0 16px 30px;
} */

#left.float #lnb > ul > li > ul > li > a {
    padding: 4px 8px 4px 54px;
}

#contents {
    margin-top: 1.6rem;
    float: right;
    width: calc(100% - 350px);
    min-height: calc(100vh - 5.2em - 3.86rem - 2.533rem - 2.533rem - 100px);
    padding-bottom: 80px;
    transition: all .15s;
}

#right {
    float:right;
    width: 300px;
}

.breadcrumb {
    justify-content: flex-end;
    align-items: center;
    margin-bottom: .4em;
}

.breadcrumb ul {
    display: inline-flex;
    align-items: center;
}

.breadcrumb ul li {
    position: relative;
}

.breadcrumb ul li > a > embed,
.breadcrumb ul li > a > img {
    max-height: 1.467em;
}

.breadcrumb ul li > * {
    vertical-align: middle;
    margin-top: 2px;
}

.breadcrumb ul li + li {
    padding-left: 1.4em;
    margin-left: 1.1em;
}

.breadcrumb ul li + li::before {
    content:"";
    display: inline-block;
    width: 8px;
    height: 13px;
    background: url('../img/common/ico-breadcrumb-arrow.svg') 50% 50% no-repeat;
    position: absolute; 
    top: 14px;
    left: 0;
    transform: translate(0, -50%);
}

.breadcrumb span {
    height: 25px;
    line-height: 25px;
    font-size: 1em;
    color: #7D7FA6;
}

.breadcrumb ul li:first-child a {
    margin-top: 5px;
}

.breadcrumb ul li:last-child span {
    color: #232327;
    font-weight: 600;
    margin-top: .1em;
}

.page-title {
    height: 4rem;
    display: flex;
    align-items: center;
    background-color: #F4F5FC;
    border-radius: .8em;
    padding: 0 1.5rem;
    margin-bottom: 1.8rem;
    position: relative;
}

.page-title p:first-of-type {
    font-size: 1.4em;
    font-weight: 600;
    margin-left: 10px;
    margin-top: -.1em;
}

.page-title .btn-wrap {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translate(0, -50%);
}

.page-title .btn-wrap .btn {
    background-color: #fff;
    font-size: .867rem;
    color: #7D7FA6;
    border-color: #A0A2BC;
    display: inline-flex;
    font-weight: 500;
    align-items: center;
    padding-top: .34rem;
    padding-bottom: .333rem;
}

.page-title .btn-wrap .btn::before {
    content:"";
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-color: #2D316C;
    -webkit-mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    margin-right: .4rem;
}

.page-title .btn-wrap .btn.btn-inq::before {
    -webkit-mask-image: url('../img/common/ico-btn-inq.svg');
}

.page-title .btn-wrap .btn[class*=btn-fav]::before {
    -webkit-mask-image: url('../img/common/btn-favorite-outline.svg');
    -webkit-mask-size: 20px auto !important;
    transform: translate(0, -1.5px);
}
.page-title .btn-wrap .btn.btn-fav.active {
    background-color: #2d316c;
    border-color: #2d316c;
    color: rgba(255, 255, 255, .8);
}
.page-title .btn-wrap .btn.btn-fav.active::before {
    -webkit-mask-image: url('../img/common/btn-favorite-fill.svg');
    background-color: #fff;
}

.page-title .btn-wrap .btn.btn-mp::before {
    -webkit-mask-image: url('../img/common/ico-btn-mp.svg');
}

.page-title .btn-wrap .btn.btn-print::before {
    -webkit-mask-image: url('../img/common/ico-btn-print.svg');
}

.page-title .btn-wrap .btn.btn-excel::before {
    -webkit-mask-image: url('../img/common/ico-btn-excel.svg');
}
.page-title .btn-wrap .btn.btn-popup::before {
    -webkit-mask-image: url('../img/common/ico-btn-popup.svg');
}
.page-title .btn-wrap .btn.btn-info::before {
    -webkit-mask-image: url('../img/common/ico-information.svg');
}

footer {
    clear: both;
    width: 100%;
    position: relative;
    z-index: 2;
    background-color: #5A5B68;
    padding: 2.533rem 0;
}

footer .inner {
    position: relative;
    width: 1600px;
    margin: 0 auto;
    padding-left: 118px;
    box-sizing: border-box;
}

footer .inner .dropdown-toggle {
    background-color: #fff;
    border-radius: 100px;
    position: absolute;
    border: none;
    top: -10px;
    right: 0;
    font-size: .867em;
    padding: 0 30px 0 20px;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
}

footer .logo {
    position: absolute;
    top: 0;
    left: 0;
    margin-right: 50px;
    display: block;
    width: 66px;
    height: 100%;
}

footer .logo svg {
    float: left;
}

footer ul.footer-util {
    font-size: 0;
    display: block;
    text-align: left;
}

footer ul.footer-util li {
    display: inline-block;
    margin-right: 30px;
}

footer ul.footer-util li a {
    font-size: 1rem;
    color: #EBEBEF;
    font-weight: 400;
}

footer ul.footer-util li a.emphasis {
    font-weight: 600;
}

footer ul.info {
    display: block;
    font-size: 0px;
    text-align: left;
    margin-top: 18px;
}

footer ul.info li {
    display: inline-block;
    margin-right: 25px;
}

footer ul.info li * {
    font-size: .933rem;
    color: #FFFFFF;
    vertical-align: middle;
    letter-spacing: 0;
}

footer ul.info li .ico {
    margin-right: 8px;
    max-width: 1.067rem;
    max-height: 1.067rem;
}

footer .copyright {
    font-size: .867em;
    color: #fff;
    letter-spacing: 0;
    text-align: left;
    margin-top: 18px;
}

.btn-panel-wrap {
    position: absolute;
    top: 50%;
    left: -50px;
    transform: translate(-50%, -50%);
}

.btn-panel-wrap li {
    position: relative;
    margin: 12px 0;
}

.btn-panel-wrap li:first-child {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

.btn-panel-wrap button {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    font-size: 0;
    text-indent: -9999px;
    background-color: transparent;
    transition: all .4s;
}

.btn-panel-wrap button .ico {
    position: absolute;
    top: 0;
    left: 0;
}

.right-panel {
    position: fixed;
    right: 0;
    bottom: 0;
    /* height: calc(100vh - 96px); */
    height: 100vh;
    z-index: 2400;
    display: block;
    transform: translate(100%, 0);
    transition: all .5s ease-in-out;
}

.right-panel .panel {
    background-color: #F8F9FB;
    box-sizing: border-box;
    height: 100%;
}

.right-panel .inner {
    max-height: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    flex-flow: column wrap;
    justify-content: flex-start;
    align-content: flex-start;
    overflow: hidden;
    padding: 35px 0 10px 0;
}

.right-panel .inner::before,
.right-panel .inner::after {
    content: "";
    display: block;
    width: 1px;
    height: calc(100% - 35px - 35px);
    background-color: #C5C5C5;
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

.right-panel .inner::before {
    left: 358px;
}

.right-panel .inner::after {
    left: 716px;
}

.right-panel .inner .scroll {
    height: 100%;
    overflow-y: auto;
}

.right-panel .panel .item {
    width: 288px;
    padding-bottom: 25px;
    margin-bottom: 25px;
    border-bottom: 1px solid #C1C1C1;
    margin-right: 35px;
    margin-left: 35px;
    flex: 1 1;
    transition: all .1s;
}
.right-panel .panel .item:last-child {
    border-bottom: none;
}

.right-panel .panel .item p.tit {
    font-size: 1.333em;
    font-weight: 600;
}

.right-panel .panel .item .banner-wrap,
.right-panel .panel .item .banner-wrap > img {
    width: 100%;
}

.right-panel a.btn.btn-go::before {
    display: none;
}

.right-panel .panel .item *+p.tit {
    margin-top: 13px;
}

.right-panel .panel .item p.tit+span {
    margin-top: 6px;
    display: block;
}

.right-panel .panel .item .btn.btn-go {
    background: transparent;
    border-radius: 10px;
    margin-top: 10px;
}

.right-panel .panel .item.list {
    position: relative;
}

.right-panel .panel .item.list .btn.btn-go {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0;
}

.right-panel .panel .item.list ul {
    margin-top: 20px;
}

.right-panel .panel .item.list ul>li {
    font-size: 1.067em;
    display: flex;
    align-items: center;
    margin-top: 10px;
}
.right-panel .panel .item.list span.round {
    color: #fff;
    font-size: .8em;
    padding: 0 .8em;
    height: 1.8em;
    line-height: 1.8em;
    border-radius: 100px;
    background-color: #3FBECC;
    margin-right: .5em;
}
.right-panel .panel .item.list ul>li>span.text {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.right-panel .panel .item.list ul>li>span.text > a {
    width: 100%;
    white-space: nowrap;
    font-size: .867em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.right-panel.expanded {
    z-index: 2600;
    transform: translate(calc(100% - 358px), 0);
}

.right-panel.maximized {
    transform: translate(0, 0);
    transition: all .3s ease-in-out;
}

.right-panel.expanded .btn-panel-wrap,
.right-panel.maximized .btn-panel-wrap {
    left: 0;
}

.right-panel.expanded .btn-panel-wrap li:first-child {
    position: static;
}

.right-panel .btn-panel-wrap .btn-panel.expand {
    background-color: #000;
    border-radius: 50%;
    background-position: 50% 50%;
    background-image: url('../img/common/ico-arrow-white.svg');
    background-repeat: no-repeat;
}

.right-panel.expanded .btn-panel-wrap .btn-panel.expand,
.right-panel.maximized .btn-panel-wrap .btn-panel.expand {
    transform: rotate(180deg);
}

.right-panel.expanded .panel,
.right-panel.maximized .panel {
    box-shadow: 10px 30px 40px rgba(0, 0, 0, .29);
}

.right-panel.maximized .panel .item {
    border-bottom-color: #d9d9d9;
}

.right-panel.maximized .panel .item > a:not(.btn) {
    width: 100%;
}

.m-visible {
    position: fixed;
    top:-9999px;
    left:-9999px;
}

.mega-menu .m-visible ul li + li {
    margin-top: 10px;
}

.mega-menu .m-visible button.btn {
    display: block;
    width: 100%;
    text-align: center;
    font-size: .8rem;
    position: relative;
    border-radius: 100px;
    background-color: #E6EBF2;
    height: 2rem;
    line-height: 2rem;
    padding: 0;
}

.mega-menu .m-visible button.btn::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.mega-menu .m-visible button.btn-mode.dark {
    background-color: #333;
    color: #fff;
}

.mega-menu .m-visible li:first-child button .ico,
.mega-menu .m-visible li:last-child button .ico {
    background: #000;
    filter: invert(100%);
}

.mega-menu .m-visible button .ico {
    width: 10px;
    height: 10px;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* bootstrap vertical 캐러셀 */
.vertical.carousel .carousel-control {
    bottom: auto;
    width: 100%;
    height: 15%;
}
.vertical.carousel .carousel-control.right {
    top: auto;
    bottom: 0;
}
.vertical.carousel .carousel-control .glyphicon {
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
}
.vertical.carousel .carousel-indicators {
    bottom: auto;
    top: 50%;
    left: auto;
    right: 10px;
    width: 14px;
    margin: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}
.vertical.carousel .carousel-inner {
    width: calc(100% - .3em);
}
.vertical.carousel .carousel-inner > .item {
    left: 0;
    top: 0;
}
.vertical.carousel .carousel-inner > .item > img {
    width: 100%;
}
.vertical.carousel .carousel-inner > .item.next,
.vertical.carousel .carousel-inner > .item.active.right {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    top: 0;
}
.vertical.carousel .carousel-inner > .item.prev,
.vertical.carousel .carousel-inner > .item.active.left {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
    top: 0;
}
.vertical.carousel .carousel-inner > .item.next.left,
.vertical.carousel .carousel-inner > .item.prev.right,
.vertical.carousel .carousel-inner > .item.active {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    top: 0;
}
.vertical.carousel .carousel-inner > .active,
.vertical.carousel .carousel-inner > .next.left,
.vertical.carousel .carousel-inner .prev.right {
    top: 0;
}
.vertical.carousel .carousel-inner > .next,
.vertical.carousel .carousel-inner > .active.right {
    top: 100%;
    left: 0;
}
.vertical.carousel .carousel-inner > .prev,
.vertical.carousel .carousel-inner > .active.left {
    top: -100%;
    left: 0;
}

.ranking {
    display: inline-flex;
    margin-top: -2px;
    align-items: center;
    white-space: nowrap;
}

.keyword-ranking.carousel {
    display: inline-block;
    border-right: 1px solid #CDD1D8;
    margin-right: 2.2rem;
    padding-right: 2.2rem;
}

.keyword-ranking.carousel .carousel-item {
    transition: all .3s;
    display: block; 
    position: absolute;
    top: -9999px;
    left: -9999px;
    transform: translate(0, 100%);
}
.keyword-ranking.carousel .carousel-item.active {
    position: static;
    transform: translate(0, 0);
}
.keyword-ranking.carousel .carousel-item a {

}
.keyword-ranking.carousel .carousel-item a > * {
    vertical-align: middle;
    color: #fff;
    font-size: 1rem;
}

.keyword-ranking.carousel .carousel-item a > span:last-child {
    display: inline-block;
    width: 180px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left;
}

.keyword-ranking.carousel .carousel-item a:hover > span:last-child {
    text-decoration: underline;
}

.keyword-ranking.carousel .carousel-item .num {
    color: #6489F2;
    font-weight: 600;
    font-size: .8em;
    margin-right: 14px;
}

.noti-layer {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    z-index: 1000;
    background-color: rgba(0, 0, 0, .75);
    border-radius: 30px;
    font-size: 15px;
    text-align: center;
    padding: 40px 0;
    display: none;
}

.noti-layer span {
    display: block;
    color: #fff;
}

.noti-layer span.num {
    font-size: 45px;
    margin-top: .15em;
    font-weight: 600;
}

.noti-layer .flex {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    padding: 0 16px;
}

/* 메인 */
body.main {
    overflow: hidden;
    overflow-y: auto;
}

.section-container,
.section {
    position: relative;
    text-align: center;
    color: inherit;
}

.section-container .section {
    height: 100vh;
}

.section-container .page {
    position: fixed;
    list-style: none;
}

.section-container .page.vertical {
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
}

.section-container .page.horizontal {
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
}

.section-container .page li {
    width: 8px;
    height: 8px;
    background: rgba(255, 255, 255, .6);
    border-radius: 50%;
    margin: 5px 2px;
    cursor: pointer;
}

.section-container .page li.active {
    border-radius: 6px;
    background: #fff;
}

.section-container .page.horizontal li {
    display: inline-block;
}

.section-container .page.horizontal .active {
    width: 14px;
}

.section-container .page.vertical .active {
    height: 14px;
}

.section-container .section h2>span:first-child { 
    font-family: "GmarketSans", "notokr", "맑은 고딕", serif;
    font-size: 3.2em;
    color: #2D306B;
    font-weight: 600;
    position: relative;
}

.section-container .section h2>span:first-child::before {
    content: "";
    display: block;
    width: 23px;
    height: 23px;
    border-radius: 100px;
    position: absolute;
    top: -10px;
    opacity: 0;
    right: 10px;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#5d8dff+0,1c35d9+100 */
    background: rgb(93, 141, 255);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(93, 141, 255, 1) 0%, rgba(28, 53, 217, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(93, 141, 255, 1) 0%, rgba(28, 53, 217, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(93, 141, 255, 1) 0%, rgba(28, 53, 217, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5d8dff', endColorstr='#1c35d9', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
}

.section-container .section.active h2>span:first-child::before {
    animation: showRight 1s ease-in-out 1;
    animation-fill-mode: forwards;
}

.section-container .section h2>span:nth-child(2) {
    display: block;
    font-size: 1.2em;
    color: #232327;
    line-height: 1.524em;
    margin-top: 15px;
}

.section-container .section h2.left {
    text-align: left;
    float: left;
}

.section.total-search {
    position: relative;
}

.section.total-search::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: url('../img/common/bg-ci.svg') 3% 50%/contain no-repeat;
}

.section-container .section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.section-container .section>.inner {
    position: relative;
    z-index: 1;
    margin-top: 96px;
}

.section-container .section.total-search>.inner {
    width: 888px;
}

.section-container .search-wrap {
    font-size: 0;
}

.section-container .search-wrap>* {
    vertical-align: top;
}

.section-container .search-wrap>.input-group {
    width: 788px;
    height: 80px;
    border: solid 5px #313DAA;
    border-radius: 20px;
    background-color: #fff;
    box-sizing: border-box;
    overflow: visible;
    transition: all .3s;
    display: inline-flex;
    position: relative;
    z-index: 120;
}

.section-container .search-wrap>.input-group:hover,
.section-container .search-wrap>.input-group:focus-within {
    box-shadow: 10px 15px 10px rgba(35, 35, 39, 0.15);
}

.section-container .search-wrap>.dim {
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: rgba(64, 65, 70, 0.85);
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    z-index: 0;
    opacity: 0;
    transition: all 0;
    transition-timing-function: ease-in-out;
    width: 100vw;
    height: 100vh;
    backdrop-filter: blur(1px);
}

.section-container .search-wrap>.input-group:focus-within {
    border-color: #dedfe5;
}

.section-container .search-wrap>.input-group:focus-within~.dim {
    opacity: 1;
    border-radius: 0;
    z-index: 110;
}

.section-container .search-wrap>.input-group>.btn {
    border: none;
    border-radius: 14px 0 0 14px;
    width: 165px;
    padding-left: 30px;
    box-sizing: border-box;
    text-align: left;
    position: relative;
}

.section-container .search-wrap>.input-group>.btn::after {
    position: absolute;
    top:50%;
    right: 25px;
    transform: translate(0, -50%);
}

.section-container .search-wrap>.input-group>.btn.btn-outline-secondary:hover,
.section-container .search-wrap>.input-group>.btn.btn-outline-secondary.dropdown-toggle.show {
    color: #fff;
    background-color: #313DAA;
}

.section-container .search-wrap>.input-group>.form-control {
    height: 70px;
    border: none;
    border-radius: 0 13px 13px 0;
    font-size: 1.467rem;
    padding-left: 24px;
    padding-right: 24px;
    font-weight: 500;
    background: url('../img/contents/bg-input-line.svg') 0 50% no-repeat;
}

.section-container .search-wrap>.input-group>*:focus {
    box-shadow: none !important;
}

.section-container .search-wrap>.btn {
    width: 80px;
    height: 80px;
    background-color: #313DAA;
    border-radius: 28px;
    display: inline-block;
    margin-left: 20px;
    background-image: url('../img/contents/ico-search-big.svg');
    background-position: 50% 50%;
    background-repeat: no-repeat;
    font-size: 0;
    text-indent: -9999px;
    position: relative;
    z-index: 120;
    transition: all .3s;
}

.section-container .search-wrap>.btn:hover,
.section-container .search-wrap>.input-group:focus-within~.btn {
    box-shadow: 10px 15px 10px rgba(35, 35, 39, 0.15);
}

.ranking {
    margin-top: 13px;
    position: relative;
    z-index: 1;
}

.ranking > * {
    vertical-align: middle;
}

.ranking>label {
    font-size: 1.067em;
    margin-right: 20px;
}

.ranking>.btn {
    border: none;
    width: 228px;
    height: 36px;
    line-height: 36px;
    box-sizing: border-box;
    padding: 0 36px 0 16px;
    text-align: left;
    font-size: 1em;
    font-weight: 500;
    position: relative;
}

.ranking>.btn::after {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translate(0, -50%);
}

.ranking .num {
    color: #6489F2;
    font-weight: 600;
    font-size: .8em;
    margin-right: 14px;
    vertical-align: top;
    margin-top: .05em;
}

.ranking .btn.btn-ranking {
    width: auto;
    background-color: #313DAA;
    border-radius: 6px;
    color: #fff;
    font-size: .8rem;
    height: 2rem;
    line-height: 2rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding-left: .6rem;
    padding-right: .6rem;
    cursor: pointer;
}

.ranking .btn-ranking img,
.ranking .btn-ranking embed {
    margin-right: .4em;
}

body.main .keyword-ranking.carousel .carousel-item a {
    display: inline-flex;
    align-items: center;
}

body.main .keyword-ranking.carousel .carousel-item a > * {
    color: #232327;
}

body.main .keyword-ranking.carousel .carousel-item a .num {
    color: #6489F2;
    width: 13px;
    text-align: right;
    font-weight: 600;
}

body.main.search header,
body.main.search .btn-coachmark {
    z-index: 0;
}
body.main.search .section-container .search-wrap>.dim {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(0, 0);
    transition: opacity 0.24s;
}

.quick-links-wrap {
    text-align: center;
    position: relative;
    z-index: 1;
    margin: 50px 0;
}

.quick-links-wrap>ul {
    display: flex;
    flex-wrap: wrap;
    row-gap: 16px;
    justify-content: center;
}

.quick-links-wrap>ul>li {
    flex-basis: calc(100%/8);
}

.quick-links-wrap .thumb {
    width: 84px;
    height: 84px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 32px;
    background-color: #EBEFF6;
    margin: 0 auto 7px;
    position: relative;
    box-sizing: border-box;
    transition: all .15s;
    transition-timing-function: cubic-bezier(0.480, 0.355, 0.350, 1.495);
}

.quick-links-wrap>ul>li:nth-child(2n) .thumb {
    background-color: #EFF0F1;
}

.quick-links-wrap>ul>li>a:hover .thumb {
    transform: scale(1.15, 1.15);
}

.quick-links-wrap .thumb > img,
.quick-links-wrap .thumb > embed {
    max-width: 38px;
    max-height: 38px;
}

em.new {
    padding: .2rem .4rem;
    background-color: #F9558D;
    border-radius: 3px;
    color: #fff;
    letter-spacing: 0;
    font-size: .6rem;
    position: absolute;
    top: -5px;
    right: -5px;
}
em.new::before {
    content:"";
    display: block;
    width: 5px;
    height: 5px;
    border: 5px solid #F9558D;
    border-top-color: transparent;
    border-right-color: transparent;
    position: absolute;
    bottom:-6px;
    left:50%;
    transform: translate(-50%, 0) rotate(90deg);
}

.quick-links-wrap>ul>li>a * {
    cursor: pointer !important;
}

.quick-links-wrap>ul>li>a > span {
    font-size: .933em;
}

.quick-links-wrap>ul>li.add-btn .thumb {
    background: url('../img/contents/ico-add-btn.svg') 50% 50% no-repeat;
    border: 1px dashed #9EA2A7;
}

.scroll-down {
    position: absolute;
    bottom: 45px;
    left: 50%;
    transform: translate(-50%, 0);
}

.scroll-down r {
    display: block;
    background-color: #fff;
    margin: 0 auto 13px;
    width: 32px;
    height: 48px;
    box-sizing: border-box;
    border-radius: 100px;
    border: solid 3px #80808d;
}

.scroll-down b {
    display: block;
    width: 5px;
    height: 13px;
    border-radius: 100px;
    background-color: #BEBEC8;
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translate(-50%, 0);
    animation: downAndUp 1s ease-in-out infinite;
}

.scroll-down span {
    font-family: "Arial", serif;
    font-size: .733em;
    letter-spacing: 0;
}

.nav-wrap {
    position: relative;
}

.nav.type01>li>a {
    color: #9798A4;
    font-size: 1.4em;
}

.nav.type01 .nav-link {
    padding-left: 1vw;
    padding-right: 1vw;
    position: relative;
}

.nav.type01 .nav-link.active {
    font-weight: 600;
    color: #2D306B;
}

.nav.type01 .nav-link.active::before {
    content: "";
    display: block;
    width: calc(100% - 2vw);
    height: 3px;
    background-color: #2D306B;
    position: absolute;
    bottom: 2px;
    left: 1vw;
}

.nav.d4-tab {
    padding: 4px;
    border: 3px solid #2D316C;
    border-radius: 6px;
}

.nav.d4-tab .nav-link {
    font-size: 1em;
    color: #2D316C;
    padding: 0.6rem 1rem;
    border-radius:  .2rem;
}

.nav.d4-tab .nav-link.active {
    color: #fff;
    background-color: #2D316C;
}

.nav.d5-tab {
    margin-top: 2px;
    border-bottom: 1px solid #2D316C;
}

.nav.d5-tab .nav-link {
    font-size: 1em;
    color: #2D316C;
    display: inline-flex;
    align-items: center;
}

.nav.d5-tab .nav-link::before {
    content:"";
    display: inline-block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #2D316C;
    margin-right: .35em;
}

.nav.d5-tab .nav-link.active {
    font-weight: 600;
}

.nav.prgm-tab {
    border-bottom: 2px solid #2D316C;
}

.nav.prgm-tab .nav-link {
    font-size: 1.067em;
    padding: .85rem 1.333rem;
    color: #2D316C;
}
.nav.prgm-tab .nav-link.active {
    color: #fff;
    background-color: #2D316C;
    border-radius: 6px 6px 0 0;
    font-weight: 600;
}

.nav.prgm-tab.sm {
    border-bottom-width: 0px;
}

.nav.prgm-tab.sm .nav-link {
    padding: .35rem .7rem;
    font-size: .933em;
    border-radius: 4px;
}

.section-container .section.grade>.inner {
    width: 1446px;
}

table a.tit,
table tr td a:not(.btn) {
    color: #4a52c1;
}

/* table a.tit:hover {
    text-decoration: underline;
} */

span.reply {
    font-size: .8rem;
    margin-left: .5em;
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}
span.reply > strong {
    font-size: .8rem;
    vertical-align: bottom;
    color: #6b70b3;
}

.chart-wrap {
    display: flex;
}

.chart-wrap .chart-box {
    flex: 1 1 0;
}
.chart-wrap .chart-box + .chart-box {
    margin-left: 20px;
}

.chart-wrap .chart-box > p:first-child {
    font-weight: 500;
    font-size: 1.067em;
    margin-bottom: 9px;
}

.btn.grid.btn-esg {
    background-color: #26c79b;
    font-size: .8em;
    color: #fff;
    padding-left:1.2rem;
    padding-right:1.2rem;
}

a[href*=mailto] {
    display: inline-flex;
    vertical-align: bottom;
    align-items: center;
    gap: .4em;
}
a[href*=mailto]:hover {
    text-decoration: underline;
}
a[href*=mailto]::before {
    content:"";
    display:block;
    width: 1em;
    height: 1em;
    margin: 0;
    background-color: #232327;
    -webkit-mask: url('../img/common/ico-mail.svg') 50% 50%/contain no-repeat;
    mask: url('../img/common/ico-mail.svg') 50% 50%/contain no-repeat;
}

a.btn.btn-back {
    background-color: transparent;
    border:none;
    font-size: 1rem;
    display: inline-flex;
    align-items: center;
    border: 1px solid #000;
    padding-top: .35rem;
    padding-bottom: .35rem;
    height: auto;
}

a.btn.btn-back::before {
    content:"";
    display: inline-block;
    width: 1em;
    height: 1em;
    margin-right: .35em;
    border-radius: 4px;
    background-color: #232327;
    -webkit-mask: url('../img/common/btn_prev.svg') 50% 50% / 8px auto no-repeat;
    mask: url('../img/common/btn_prev.svg') 50% 50% / 8px auto no-repeat;
}

.explanation {
    border: 6px solid #8183A7;
    padding: 1.25rem 1.5rem;
    font-size: .933em;
}

.explanation .title {
    font-size: 1.2em;
    font-weight: 500;
    margin-bottom: .3rem;
}

.explanation .ico {
    width: 96px;
}

.explanation.complete {
    padding-top: 5em;
    padding-bottom: 5em;
    text-align: center;
}

.btn.btn-lock {
    content:"";
    display: inline-block;
    width: 1.333rem;
    height: 1.333rem;
    font-size: 0px;
    text-indent: -9999px;
    margin-right: .35em;
    border-radius: 4px;
    background-color: #232327;
    margin-left: .25rem;
    -webkit-mask: url('../img/common/ico-locked.svg') 50% 50% / 15px auto no-repeat;
    mask: url('../img/common/ico-locked.svg') 50% 50% / 15px auto no-repeat;
}

/* 테이블 공통 */
.table-wrap.common {
    width: 100%;
    height: auto;
    /* border-left: 1px solid #6B70B3; */
    border-top: 1px solid #6B70B3;
}

.table-wrap.common table {
    width: 100%;
    table-layout: auto;
    border-collapse: separate;
}

.table-wrap.common table th, 
.table-wrap.common table td {
    position: relative;
    text-align: center;
}

.table-wrap.common table th:last-child,
.table-wrap.common table td:last-child {
    border-right: none;
}

.table-wrap.common table .sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
    left: 0;
    background-color: #fff;
    border-right: 1px solid #6B70B3;
    border-bottom: 1px solid #6B70B3;
    z-index: 1;
    /* box-shadow: 5px 0 5px rgba(0, 0, 0, .15); */
}

.table-wrap.common table th.sticky,
.table-wrap.common table th,
.table-wrap.common table td {
    padding: 0 10px;
    height: 45px;
    background: #6B70B3;
    font-size: 0.933em;
    color: #fff;
    border-right: 1px solid #575c9b;
    border-bottom: 1px solid #575c9b;
    text-align: center;
}

.table-wrap.common table tr > .br {
    border-right: 1px solid #575c9b !important;
}

.table-wrap.common table thead th {
    /* cursor: pointer; */
    padding: 0 22px;
    font-weight: 500;
}

.table-wrap.common table thead th:last-child {
    border-right: none;
}

.table-wrap.common table th::after {
    content:"";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translate(0, -50%);
    background-position: 50% 50%;
    background-repeat: no-repeat;
    padding-right: 10px;
}

.table-wrap.common table th.asc::after {
    background-image: url('../img/contents/ico-table-arrow.svg');
    transform: translate(0, -50%) rotate(180deg);
}

.table-wrap.common table th.dsc::after {
    background-image: url('../img/contents/ico-table-arrow.svg');
}

.table-wrap.common table th .btn {
    width: 20px;
    height: 20px;
    padding: 0;
    vertical-align: baseline;
}

.table-wrap.common table td {
    background-color: #fff;
    color: #232327;
}

.table-wrap.common table td.left {
    text-align: left;
}

.table-wrap.common table td.right {
    text-align: right;
}

.table-wrap.common table td.font-bold {
    font-weight: 700;
}

.table-wrap.common table td.red {
    color: #FE3501;
}

.table-wrap.common table td.blue {
    color: #5B90E9;
}

.table-wrap.common.type02 th,
.table-wrap.common.type02 th.sticky,
.table-wrap.common tbody th,
.table-wrap.common tbody th.sticky {
    background-color: #F2F3F5;
    background-color: #f6f6f9;
    font-weight: 600;
    color: #232327;
    border-color: #575c9b;
}

.table-wrap.common.type02 th,
.table-wrap.common.type02 td {
    border-color: #A0A2BC;
}
.table-wrap.common.type02,
.table-wrap.line table th.sticky,
.table-wrap.line table th {
    border-color: #b1b2bf;
}
.table-wrap.common.line table th.sticky,
.table-wrap.common.line table th {
    border-color: #494d83;
}

.table-wrap.fold,
.ibsheet-wrap.fold {
    max-height: 2px;
    overflow: hidden;
}

hr.grid-line {
    display: none;
    opacity: 1;
    width: 100%;
    border-top: 2px solid #6b70b3;
}
hr.grid-line.on {
    display: block;
}

.table-wrap.scroll {
    padding-right: 0;
    position: relative;
}

.table-wrap.scroll table {
    /* display: inline-block; */
    max-width: 100%;
    min-width: 100%;
    vertical-align: top;
    width: auto;
    overflow-x: auto;
    white-space: nowrap;
    border-collapse: separate;
    border-spacing: 0;
    -webkit-overflow-scrolling: touch;
}

.table-wrap[class*=scroll-] table {
    display: inline-block;
}

.table-wrap.scroll.tbl table {
    display: table;
    width: 100%;
}

.table-wrap.scroll table th,
.table-wrap.scroll table td {
    vertical-align: middle;
    padding: 10px 12px;
}
.table-wrap.scroll table td.va-top {
    vertical-align: top;
}
.table-wrap.scroll.break table {
    white-space: normal;
}
.table-wrap.common.break table th,
.table-wrap.common.break table td {
    padding-top: 10px;
    padding-bottom: 10px;
}

.table-wrap.scroll.scroll-right::after {
    background: -webkit-radial-gradient(right ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
    background: radial-gradient(ellipse at right, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 100% center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 15px 100%;
    background-position: 100% 0%;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    width: 15px;
    z-index: 500;
}

.table-wrap.scroll.scroll-left::before {
    background: -webkit-radial-gradient(left ellipse, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center;
    background: radial-gradient(ellipse at left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 75%) 0 center;
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-size: 15px 100%;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 15px;
    z-index: 500;
}

.table-wrap.main.scroll table {
    border-collapse: separate;
    table-layout: auto;
}

.table-wrap.main.scroll table thead,
.table-wrap.main.scroll table tbody,
.table-wrap.main.scroll table tr {
    min-width: 100%;
}

.table-wrap.main.scroll table .sticky {
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
}
.table-wrap.main.scroll table .left * {
    text-align: left;
    width: 100%;
}

.table-wrap.main.scroll table thead th,
.table-wrap.main.scroll table tbody td {
    padding: 0 .5rem;
}

.table-wrap.main.scroll table thead th {
    font-size: 1.067em;
    font-weight: 500;
    color: #8B8C94;
    border-bottom: 1px solid #707070;
    height: 50px;
}

.table-wrap.main.scroll table tbody td {
    font-size: 1.067em;
    color: #232327;
    height: 54px;
    box-sizing: border-box;
}

.table-wrap.main.scroll table tbody td.prev {
    position: relative;
}

.table-wrap.main.scroll table tbody td.prev::after {
    content: "";
    display: block;
    width: 14px;
    height: 12px;
    background: url('../img/contents/ico-triangle-gray.svg') 50% 50% no-repeat;
    position: absolute;
    top: 50%;
    right: -2px;
    transform: translate(50%, -50%);
}

.table-wrap.main.scroll table tbody td strong {
    font-weight: 500;
}

.table-wrap table tr.color01 > * {
    font-weight: 500;
    background-color: #f4f5fc;
}
.table-wrap table tr.color01 > th,
.table-wrap table tr.color01 > .sticky {
    background-color: #cccfe9;
    color: #232327;
}

.table-wrap.break-all table td {
    white-space: normal;
    word-break: break-all;
}

table .new {
    position: static;
    margin-left: .4em;
}

table .new::before {
    display: none;
}

strong.prev-grade {
    color: #9999A1;
}
.current-grade.up::before,
.current-grade.down::before 
 {
    content:"";
    display: inline-block;
    background-color: #000;
    width: 10px;
    height: 10px;
    margin-right: .4em;
    -webkit-mask: url('../img/contents/ico-arrow-up.svg') 50% 50%/contain no-repeat;
    mask: url('../img/contents/ico-arrow-up.svg') 50% 50%/contain no-repeat;
}

.current-grade {
    color: #232327;
}

.current-grade.up {
    color: #FE3501;
}

.current-grade.down {
    color: #5B90E9;
}

.current-grade.flexible {
    color: #EE82EE;
}

.current-grade.up::before {
    background-color: #FE3501;
}

.current-grade.down::before {
    background-color: #5B90E9;
    transform: rotate(180deg);
}

.current-grade.flexible::before {
    background-color: #EE82EE;
}

.table-wrap.main .current-grade::before {
    display: none;
}

.table-wrap.main.scroll table tbody tr {}

.table-wrap.main.scroll table tbody tr td {
    border: 3px solid transparent;
    border-left: none;
    border-right: none;
    border-bottom: 1px solid rgba(112, 112, 112, .4);
}

.table-wrap.main.scroll table tbody tr td a.ellipsis {
    width: 100%;
    white-space: normal;
}

.table-wrap.main.scroll table tbody tr td:first-child {
    border-left: 3px solid transparent;
}

.table-wrap.main.scroll table tbody tr td:last-child {
    border-right: 3px solid transparent;
}

.table-wrap.main.scroll table tbody tr:hover {
    position: relative;
    z-index: 1;
    box-shadow: 0 3px 6px rgba(0, 0, 0, .1);
}

.table-wrap.main.scroll table tbody tr:hover td {
    border-color: #1826A2;
    border-bottom: 3px solid #1826A2;
    background-color: #fff;
}

.table-wrap.main.scroll table tbody tr:hover td:first-child {
    border-color: #1826A2;
    border-radius: 16px 0 0 16px;
}

.table-wrap.main.scroll table tbody tr:hover td:last-child {
    border-color: #1826A2;
    border-radius: 0 16px 16px 0;
}

td .btn.btn-download {
    margin-left: 2px;
    margin-right: 2px;
}

.btn.grid,
.btn.btn-download {
    font-size: 0px;
    width: 24px;
    height: 24px;
    box-sizing: border-box;
    border-radius: 6px;
    text-align: center;
    line-height: 24px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}

.btn.grid {
    padding: 0;
}

.btn.btn-download img,
.btn.btn-download embed {
    max-height: 16px;
    max-width: 16px;
}

.btn.btn-download {
    padding: 0;
}

.btn.grid img,
.btn.grid embed {
    width: 16px;
    height: 16px;
}

.btn.btn-download.pdf,
.btn.btn-download.youtube,
.btn.btn-download.mp4 {
    border: 1px solid #ef777a;
}

.btn.btn-download.excel,
.btn.btn-download.xls,
.btn.btn-download.xlsx {
    border: 1px solid #81ab96;
}

.btn.btn-download.doc,
.btn-download.doc, 
.btn-download.hwp {
    border: 1px solid #809cbd;
}

.btn.btn-download.zip {
    border: 1px solid #8b7cb3;
}

.btn.btn-download.movie {
    border: 1px solid #5F75F5;
}

.btn.btn-download.etc {
    border: 1px solid #A2A2A2;
}

.btn.grid.inquiry {
    border: 1px solid #777;
}

.btn.btn-download.img,
.btn-download.jpg, 
.btn-download.jpeg, 
.btn-download.png {
    border: 1px solid #8f919f;
}

.btn.btn-download.report {
    width: 22px;
    height: 22px;
    border-radius: 5px;
    background-color: #F4F5FC;
    line-height: 20px;
    border: 1px solid #A0A2BC;
    color: #8589A6;
    font-size: .677rem;
    text-align: center;
    padding:0;
}
.btn.btn-download.report.canceled {
    font-size: 0px;
    text-indent: -9999px;
    position: relative;
}
.btn.btn-download.report.canceled::before {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #8589A6;
    -webkit-mask: url('../img/common/ico-file-download.svg') 50% 50%/54% auto no-repeat;
    mask: url('../img/common/ico-file-download.svg') 50% 50%/54% auto no-repeat;
}

.btn-go-plus {
    width: 32px;
    height: 32px;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

.btn-go-plus::before,
.btn-go-plus::after {
    content: "";
    display: block;
    width: 4px;
    height: 32px;
    background-color: #929292;
    position: absolute;
    top: 50%;
    left: 50%;
    transition: all .12s;
}

.btn-go-plus::before {
    transform: translate(-50%, -50%);
    opacity: .8;
}

.btn-go-plus::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.btn-go-plus:hover::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.btn-go-plus:hover::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.section.research::before,
.section.research::after {
    content: "";
    display: block;
    min-width: 100%;
    height: 0;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    background-position: 0 0;
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 100vw;
    opacity: .26;
}

.section.research::before {
    padding-top: 26.19vw;
    animation: flowUpAndDown 11.873s ease-in-out infinite;
    animation-fill-mode: forwards;
    background-image: url('../img/contents/bg-wave-blue.png');
}

.section.research::after {
    padding-top: 26.19vw;
    animation: flowDownAndUp 7.921s ease-in-out infinite;
    animation-fill-mode: forwards;
    background-image: url('../img/contents/bg-wave-green.png');
}

.section.research>.inner {
    width: 1320px;
}

.section.research .box-wrap.flex>div {
    flex: 1 1 0;
    position: relative;
}
.section.research .box-wrap.flex>div:hover {
    z-index: 1;
}

.section.research .box-wrap.flex>div:last-child {
    margin-right: 0;
}

.section.research .box:hover {
    transform: scale(1.16);
}

.section .flex-top {
    display: flex;
    justify-content: space-between;
    align-items: unset;
}

.section .flex-top .nav-wrap {
    position: relative;
}

.section .flex-top .nav-wrap .nav {
    position: absolute;
    bottom: 0;
    right: 0;
    flex-wrap: nowrap
}

.nav.type01 .nav-link {
    white-space: nowrap;
}

.section .flex-top a.btn-go-plus {
    position: absolute;
    top: 13px;
    right: 0;
}

.box-wrap.flex {
    display: flex;
}

.box-wrap.flex>div {
    margin-right: 40px;
    flex: 1 1 0;
}

.box-wrap .box,
.owl-carousel .item,
.owl-carousel .item .box {
    width: 100%;
}

.box-wrap.flex .box:last-child {
    margin-right: 0;
}

.box {
    background-color: #fff;
    border-radius: 24px;
    box-shadow: 10px 10px 50px rgba(0, 0, 0, .06);
    padding: 36px 30px 72px;
    position: relative;
    text-align: left;
    height: 100%;
    transition: all .25s;
}

.box * {
    transition: all .15s;
}

.box .tit {
    font-size: 1.2em;
    font-weight: 600;
    margin-top: 11px;
    word-break: normal;
}

.box .btn-wrap {
    position: absolute;
    top: 36px;
    right: 30px;
}

.box .btn-wrap button,
.box .btn-wrap img[src*="ico-locked"] {
    margin-left: 8px;
    justify-content: center;
}

.box .border-span {
    font-size: .867em;
    color: #2D36A2;
    padding: .2em 1em;
    border-radius: 100px;
    background-color: #E5E7F9;
    border: 1px solid transparent;
}

.box .date {
    position: absolute;
    bottom: 36px;
    left: 30px;
    color: #767D87;
}

.box:hover {
    background-color: #00047D;
    box-shadow: none;
}

.box:hover *:not(.tool-tip-balloon.up):not(.tool-tip-balloon.right) {
    color: #fff !important;
    border-color: rgba(255, 255, 255, .5) !important;
    background-color: transparent !important;
}

.box:hover .btn-download img,
.box:hover .btn-download embed,
.box:hover img[src*="ico-locked"] {
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(345deg) brightness(102%) contrast(101%);
}

.box:hover .btn-download:hover {
    border-color: rgba(255, 255, 255, .75) !important;
}

.box:hover .date {
    opacity: .63;
}

.ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.line-2-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.line-3-ellipsis:not(.tooltip-container) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.line-4-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.line-5-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    /* 라인수 */
    -webkit-box-orient: vertical;
    word-wrap: break-word;
}

.btn.btn-go-arrow {
    clear: both;
    background-color: transparent;
    display: inline-block;
    border: none;
    position: relative;
    font-size: 1.067em;
    color: #313DAA;
    height: auto;
    padding: .7em 2em .7em 1em;
    margin-top: 20px;
    transition: all .3s;
    outline: none;
}

.btn.btn-go-arrow:hover,
.btn.btn-go-arrow:focus {
    padding-right: 3.4em;
    box-shadow: none;
}

.btn.btn-go-arrow::before,
.btn.btn-go-arrow::after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #313DAA;
    position: absolute;
    bottom: 0;
    left: 0;
}

.btn.btn-go-arrow::after {
    left: auto;
    right: -2px;
    bottom: 5px;
    transform: translate(0, -50%) rotate(45deg);
    width: 20px;
}

.section-container .section.carousel {
    justify-content: flex-start;
}

.section-container .section.carousel .tit-wrap {
    white-space: nowrap;
    z-index: 1;
    padding: 48px 80px 0 115px;
    height: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+90,ffffff+100&1+90,0+100 */
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 85%, rgba(255, 255, 255, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 */
}

.section-container .section.carousel.business-value .tit-wrap {
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#f4f5fc+80,f4f5fc+100&1+80,0+100 */
    background: -moz-linear-gradient(left, rgba(244, 245, 252, 1) 85%, rgba(244, 245, 252, 0) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(244, 245, 252, 1) 85%, rgba(244, 245, 252, 0) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(244, 245, 252, 1) 85%, rgba(244, 245, 252, 0) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f4f5fc', endColorstr='#00f4f5fc', GradientType=1);
    /* IE6-9 */
}

.section-container .section h2.left .tit-wrap * {
    flex: 1 1 100%;
}

.section-container .section h2.left hr {
    display: block;
    opacity: 0;
    margin: 0;
}

.section-container .section.carousel h2.left {
    float: none;
}

.section-container .section.carousel .owl-carousel {
    margin-top: 48px;
    height: 360px;
    position: relative;
}

.section-container .section.carousel .owl-carousel::before {
    content: attr(data-comment);
    display: inline-block;
    background-color: rgba(0, 0, 0, .4);
    color: #fff;
    border-radius: 100px;
    font-size: .867em;
    height: 2.4em;
    line-height: 2.4em;
    padding: 0 1.5em;
    position: absolute;
    bottom: -4em;
    left: 12.5%;
    z-index: 4;
    opacity: 0;
}

.section-container .section.carousel.active .owl-carousel::before {
    animation: blinkAndHide 4s ease-in-out 1;
    animation-fill-mode: forwards;
}

.section-container .section.carousel .owl-stage-outer,
.section-container .section.carousel .owl-stage,
.section-container .section.carousel .owl-item,
.section-container .section.carousel .box {
    height: 100%;
}

.section-container .section.carousel .owl-stage {
    display: flex;
}

.section-container .section.carousel .owl-item {
    width: 300px !important;
    display: inline-flex;
    align-items: center;
}

.section-container .section.carousel .item {
    height: 100%;
}

.section-container .section.carousel .box {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 36px 30px;
}

.section-container .section.carousel .box .tit {
    margin-top: 0;
}

.section-container .section.carousel .box a:hover {
    text-decoration: underline;
}

.section-container .section.carousel .box:hover {
    transform: scale(1.16);
}

.section-container .section.carousel .box .go {
    margin-top: 1.467em;
}

.section-container .section.carousel .box .go .ico {
    vertical-align: top;
    margin-left: .5em;
    margin-top: .22em;
}

.section-container .section.carousel .box:hover .go {
    opacity: .79;
}

.section-container .section.carousel .box:hover .go img {
    filter: invert(98%) sepia(100%) saturate(0%) hue-rotate(235deg) brightness(180%) contrast(103%) !important;
}

.section-container .section.carousel .owl-item+.owl-item.active {}

.section-container .section.business-value {
    background-color: #F4F5FC;
}

.section-container .section.kr-news .inner {
    display: flex;
    width: 1400px;
    align-items: flex-start;
}

.section-container .section.kr-news h2.left {
    flex: 1 1 30%;
    white-space: nowrap;
}

.section-container .section.kr-news h2.left + * {
    flex: 1 0 70%;
}

.section-container .section.kr-news ul {
    border-bottom: 2px solid #2D306B;
}

.section-container .section.kr-news ul>li {
    border-top: 2px solid #2D306B;
}

.section-container .section.kr-news ul>li>a {
    display: block;
    text-align: left;
    padding: 2.4em;
    transition: all .25s;
}

.section-container .section.kr-news ul>li>a:hover {
    transform: scale(1.05);
}

.section-container .section.kr-news ul>li>a>span {
    display: block;
}

.section-container .section.kr-news ul>li>a>span:first-child {
    font-size: 1.5em;
    font-weight: 600;
}

.section-container .section.kr-news ul>li>a>span:nth-child(2) {
    margin-top: 16px;
}

.section-container .section.kr-news ul>li>a>span:nth-child(3) {
    margin-top: 12px;
}

.section-container .section.footer {
    width: 100%;
    height: auto !important;
}

.btn-mode-wrap {
    position: fixed;
    left: 20px;
    bottom: 26px;
    z-index: 10;
}

.btn-mode-wrap .btn-mode {
    display: inline-flex;
    height: 3.46rem;
    line-height: 3.46rem;
    padding: 0 .85rem;
    border-radius: 100px;
    align-items: center;
    transition: all .2s;
    overflow: hidden;
}

.btn-mode-wrap .btn-mode .ico {
    width: 24px;
    height: 24px;
    vertical-align: top;
}

.btn-mode-wrap .btn-mode span {
    text-indent: -1000px;
    color: #fff;
    margin-left: 0;
    opacity: 0;
    transition: all .2s;
}
.btn-mode-wrap .btn-mode:hover {
    padding: 0 1.6rem;
}
.btn-mode-wrap .btn-mode:hover span {
    text-indent: 0;
    margin-left: .8rem;
    opacity: 1;
}

.btn-mode-wrap .btn-mode.dark {
    background-color: #0E0E11;
    color: #fff;
}

.btn-mode.light {
    background-color: #fff;
    position: fixed;
    left: -9999px;
    top: -9999px
}

.btn-mode.light > span {
    color: #2970FF;
}

.over-modal .list-group.favorite {
    margin-top: 1rem;
}

.over-modal .list-group.favorite .list-group-item {
    color: #616166;
    padding: .5rem;
    border-color: #ccc;
    background: transparent url('../img/common/ico-sortable.svg') right 1rem top 50% no-repeat !important;
}
.over-modal .list-group.favorite .list-group-item.ui-sortable-helper {
    border-radius: .4em;
    background-color: rgba(255, 255, 255, .95) !important;
    box-shadow:  8px 8px 10px rgba(0, 0, 0, .04);
}
.over-modal .list-group.favorite .list-group-item+.list-group-item {
    border-top-width: 1px;
    margin-top: -1px;
}

.over-modal .list-group.favorite .list-group-item .btn-favorite {
    background-color: #C2C3CC;
    -webkit-mask-image: url('../img/common/btn-favorite-fill.svg');
    mask-image: url('../img/common/btn-favorite-fill.svg');
    margin-top: -2px;
    margin-right: .5rem;
    position: static;
}

.over-modal .list-group.favorite .list-group-item.active {
    background-color: #fff;
    border-color: #ccc;
    font-weight: 600;
    color: #232327;
}

.over-modal .list-group.favorite .list-group-item.active .btn-favorite {
    background-color: #6489F2;
}

.over-modal.popup {
    display: block;
    position: fixed;
    top: -9999px;
    left: -9999px;
    background-color: transparent;
    box-shadow: none;
}
.over-modal.popup.active {
    top: 50%;
    left: 50%;
}

.over-modal.popup,
.over-modal.popup .owl-stage-outer,
.over-modal.popup .owl-item {
    width: 500px;
}

.over-modal.popup .owl-stage-outer .owl-stage {
	display: flex;
}

.over-modal .pop-header {
    justify-content: start;
}

.over-modal .pop-header p {
    color: #fff;
    margin-left: 1.067rem;
    padding-right: 2rem;
}

.over-modal.popup .pop-header {
    background-color: #fff;
    z-index: 1;
}

.over-modal.popup .btn-close::before,
.over-modal.popup .btn-close::after {
    background-color: #000;
}

.over-modal.popup .btn-close:hover::before,
.over-modal.popup .btn-close:hover::after {
    background-color: #fff;
}

.over-modal.popup .owl-stage-outer {
    overflow: hidden;
    height: auto !important;
}

.over-modal.popup .owl-item {
    display: inline-block;
    vertical-align: top;
}

.over-modal.popup .item {
    width: 500px;
    height: 0;
    max-width: calc(100vw - 40px);
}

.over-modal.popup .owl-item.active .item {
    height: auto;
}

.over-modal.popup .item img {
    max-width: calc(100vw - 40px);
}

.over-modal.popup .pop-container {
    padding: 0;
    padding-bottom: 20px;
    background-color: #fff;
    box-shadow: 0 0 80px rgba(0, 0, 0, .3);
}

.over-modal.popup .pop-footer {
    text-align: left;
    background-color: #fff;
    border-top: none;
}

.over-modal.popup .form-check {
    padding-left: 0;
    display: flex;
    justify-content: space-between;
}

.over-modal .code-popup {
    padding:30px 40px;
    background-color:#F8F9FB;
}

.btn-wrap.full {
    display: block;
    width: 100%;
}

.btn-wrap.full::after {
    content:"";
    display: block;
    clear:both;
}

.btn-wrap.right {
    text-align: right;
}

.btn-wrap.right > * {
    float:none;
}

.over-modal.popup .form-check button {
    font-size: .933em;
    background-color: transparent;
}
.over-modal.popup .form-check button:hover {
    text-decoration: underline;
}

.over-modal.popup .pop-container .btn-wrap.center {
    padding-top: 20px;
    padding-bottom: 6px;
}

.over-modal.popup .carousel {
    display: flex;
}

.over-modal.popup .owl-prev,
.over-modal.popup .owl-next {
    position: absolute;
    top:50%; 
    z-index: 10;
    width: 30px !important;
    height: 30px !important;
    transform: translate(0, -50%);
    font-size: 0;
    text-indent: -9999px;
    background-color: rgba(0, 0, 0, .6) !important;
    left: 4px !important;
}

.over-modal.popup .owl-prev::before,
.over-modal.popup .owl-next::before {
    content:"";
    display: inline-block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff !important;
    -webkit-mask: url('../img/common/ico-arrow-white.svg') 50% 50% / 8px auto no-repeat;
    mask: url('../img/common/ico-arrow-white.svg') 50% 50% / 8px auto no-repeat;
}

.over-modal.popup .owl-next::before {
    transform: rotate(180deg);
}

.over-modal.popup .owl-next {
    left: auto !important;
    right: 4px !important;
}

.over-modal.popup .owl-prev > span,
.over-modal.popup .owl-next > span {
    font-size: 3rem;
}

.over-modal.popup .owl-prev {
    left:0;
} 

.over-modal.pdf {
    width: 960px;
}

.over-modal.pdf .pop-container {
    padding: 0;
}

.over-modal.pdf .pop-header p {
    padding-right: 11rem;
}

.over-modal.pdf .pop-footer {
    background-color:#232327;
    color: #fff;
    height: 30px;
    line-height: 30px;
    padding: 0 1rem;
}

.over-modal.inquiry {
    width: 720px;
}

.over-modal.new-window {
    display: block;
    position: static;
    width: 100% !important;
    height: 100vh;
    max-width: none;
    transform: translate(0, 0);
    box-shadow: none;
}

.over-modal.new-window .pop-container {
    height:calc(100vh - 60px - 30px - 76.25px);
    max-height: none;
    overflow-y: auto;
}

.over-modal.new-window.pdf .pop-container {
    height:calc(100vh - 60px - 30px);
    max-height: none;
    overflow-y: auto;
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
}

.over-modal.new-window.pdf .pop-container > * {
    flex: 1 1 auto;
}

.over-modal.new-window.pdf .pop-container .pdf-bottom {
    flex: 0 0 auto;
    position: relative;
    overflow: visible;
}
.over-modal.new-window.pdf .pop-container .pdf-bottom.fold {
    flex: 0 0 0;
    height: 0;
    padding-top:0;
    padding-bottom: 0;
}

.over-modal.new-window.pdf .pop-container .pdf-bottom .btn-pdf-bottom-fold {
    position: absolute;
    right:10px;
    top:0;
    transform: translate(0, -100%);
    border-radius: .3em .3em 0 0;
    padding-bottom: .1em;
}

.over-modal.new-window.pdf .pop-container .pdf-bottom.fold .btn-pdf-bottom-fold::before {
    transform: rotate(180deg);
}

a.page-link {
    padding: 0 .65rem;
    height: 26px;
    line-height: 24px;
    border-radius: 4px;
    border-color: #A0A2BC;
    background-color: transparent;
    font-size: .867rem;
    margin:0 10px;
}
a.page-link:hover {
    border-color: #A0A2BC;
}

.page-item.active a.page-link {
    background-color: #A0A2BC;
    border-color: #7a7c99;
}

li.move a.page-link {
    background-color: #A0A2BC;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-size: auto 10px;
    mask-size: auto 10px;
    border: none;
    font-size: 0px;
    text-indent: -9999px;
}

li.move.first a.page-link {
    -webkit-mask-image: url('../img/common/ico-pg-first.svg');
    mask-image: url('../img/common/ico-pg-first.svg');
}

li.move.prev a.page-link {
    -webkit-mask-image: url('../img/common/ico-pg-prev.svg');
    mask-image: url('../img/common/ico-pg-prev.svg');
}

li.move.next a.page-link {
    -webkit-mask-image: url('../img/common/ico-pg-next.svg');
    mask-image: url('../img/common/ico-pg-next.svg');
}

li.move.last a.page-link {
    -webkit-mask-image: url('../img/common/ico-pg-last.svg');
    mask-image: url('../img/common/ico-pg-last.svg');
}

/* 콘텐츠 공통 */
#contents article > div {
    position: relative;
}

.btn.btn-inform {
    background-color: #2D316C;
    border-color: #2D316C;
    font-size: .933rem;
    color: #fff !important;
    padding: .175rem .75rem;
    display: inline-flex;
    align-items: center;
}

.btn-primary.service::before,
.btn-primary.coupon::before,
.btn.btn-inform::before {
    content:"";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #A0A2BC;
    -webkit-mask: url('../img/common/ico-info.svg') 0% 50% no-repeat;
    mask: url('../img/common/ico-info.svg') 0% 50% no-repeat;
    margin-right: .3rem;
}

.btn-primary.coupon::before {
    width: 18px;
    -webkit-mask-image: url('../img/common/ico-coupon.svg');
    mask-image: url('../img/common/ico-coupon.svg');
}

.btn-grid-fold {
    width: 28px;
    height: 28px;
    border: 1px solid #A0A2BC;
    border-radius: 4px;
    background-color: #fff;
    vertical-align: middle;
    margin-left: .5rem;
    margin-top: -.2rem;
}

.btn-grid-fold::before {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #828499;
    -webkit-mask: url('../img/common/ico-grid-fold.svg') 50% 50% no-repeat;
    mask: url('../img/common/ico-grid-fold.svg') 50% 50% no-repeat;
}

.btn-grid-fold.active::before {
    transform: rotate(180deg);
}

p.para,
span.para {
    line-height: 1.75em;
}

p.big,
span.big {
    font-size: 2em;
    font-weight: 600;
}

span.color {
    color: #343dc1;
    vertical-align: baseline;
}

p.medium,
span.medium,
.bootstrap-duallistbox-container label {
    font-size: 1.333em;
}

p.medium.gm {
    font-size: 1.067em;
    letter-spacing: -.02em;
}

.small {
    font-size: .8em;
    vertical-align: baseline;
    margin-left: .15em;
    margin-right: .2em;
}

p.no {
    display: flex;
    align-items: center;
}

p.dot {
    display: flex;
    align-items: center;
    gap: .4em;
}
p.dot::before {
    content:"";
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: #646DFA;
    border-radius: 50%;
}
p > strong,
li > strong {
    vertical-align: baseline;
}
p > strong.no {
    vertical-align: top;
    font-size: .6em;
    margin-top: .5em;
    display: inline-block;
    background-color: #2D306B;
    color: #fff;
    border-radius: .4em;
    min-width: 1.8em;
    padding: 0 .3em 0 .3em;
    height: 1.8em;
    line-height: 2em;
    margin-right: .4em;
    text-align: center;
    margin-top: 0;
}

p.medium > strong.no {
    margin-top: .4em;
}

.hyphen {
    text-indent: -0.5em;
    padding-left: 0.5em;
}

li> strong.no {
    vertical-align: middle;
    margin-right: .4em;
    color: #6B70B3;
    min-width: 1.26em;
}
strong.no.normal {
    font-weight: 400;
    min-width: .6em;
}
li.indent {
    text-indent: -1.7em;
    padding-left: 1.7em;
}
li.indent-02 {
    text-indent: -1.6em;
    padding-left: 1.6em;
}
li.indent-normal {
    text-indent: -1em;
    padding-left: 1em;
}
li.indent *:not(.indent):not(.indent-02):not(.indent-normal):not(.hyphen),
li.indent-02 *:not(.indent):not(.indent-02):not(.indent-normal):not(.hyphen) {
    text-indent: 0;
}
p.tit-medium {
    font-size: 1.2em;
    font-weight: 600;
}

.ico-n-text > ul {
    display: flex;
    justify-content: center;
    gap: 2.4rem;
    -webkit-gap: 2.4rem;
}
.ico-n-text > ul > li {
    text-align: center;
}
.ico-n-text > ul > li p {
    font-size: 1.24em;
    font-weight: 500;
}
.ico-n-text > ul > li * + p {
    margin-top: 1.3em;
}
.ico-n-text > ul > li * + span {
    margin-top: .667em;
}

.grid-guide {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9333em;
    margin-bottom: 1.2em;
}

ol li::before {
    counter-increment: section; /* section의 카운터 값을 1씩 증가시킵니다. */
    content: counter(section)". "; /* section의 카운터 값을 표시합니다. */
}

ol.no-num li::before {
    display: none;
}
.blt-dash {
    padding-left: 7px;
}
.blt-dash li {
    text-indent: -7px;
}
.blt-dash li + li {
    margin-top: .3em;
}
.blt-dash li p {
    display: inline;
}
.blt-dash li::before {
    content:"- ";
}

.add,
.annotation {
    margin-top: 10px;
    position: relative;
    font-size: .867rem;
    padding: .6rem 1.333rem;
    background-color: #efefef;
}

.annotation {
    display: flex;
    gap:.41em;
}

.add * {
    vertical-align: baseline;
}

.annotation > p:first-child {
    font-weight: 600;
    font-size: .867rem;
}

.annotation li + li,
.add li + li {
    margin-top: .2em;
}

.annotation p.remark {
    margin-top: -.1em;
    margin-bottom: 0;
}

.annotation p.remark::after {
    content:")";
}

strong.square {
    padding: 0 .35rem;
    background-color: #a6c7f8;
}

.annotation ol > li,
.add ol > li {
    text-indent: -.8em;
    padding-left: .8em;
}

.add {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: .333rem .667rem;
    border: 1px solid #e0e1e9;
    background-color: #F4F5FC;
}

.add.right {
    justify-content: flex-end;
}

.add .btn {
    font-size: .8rem;
}

.add > p,
.add > span {
    color: #6B70B3;
    font-size: .933rem;
}

.annotation-mark {
    font-size: .6em;
    margin-left: .3em;
    font-weight: 600;
    transform: translate(0, -.2em);
}
.annotation-mark::after {
    content:")";
}

.asterisk {
    color: #FF0000;
}

em.asterisk {
    vertical-align: baseline;
    margin-right: .1em;
    margin-left: .1em;
    font-weight: 600;
}

.grid-guide .info {
    color: #727272;
}

.grid-guide .info::before {
    content: "※";
    margin-right: 2px;
}

.grid-guide .re-guide b {
    color: #FE3501;
    font-weight: 700;
    margin: 0 5px 0 10px;
}

.grid-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.grid-title .title {
    font-size: 1.2em;
    font-weight: 600;
}

.grid-title .title span {
    font-weight: 300;
    vertical-align: baseline;
    margin-left: .3rem;
}

.grid-title .title strong {
    font-weight: 400;
    vertical-align: top;
    color: #5259C1;
    margin-left: .2em;
}

.grid-title .unit {
    font-size: 0.9333em;
}

.grid-title > .form-select {
    flex: 0 0 76px;
    padding-top: 0;
    margin-right: 0;
}

.btn.btn-plus {
    display: inline-flex;
    align-items: center;
    gap: .4em
}

.btn.btn-plus::before {
    content:"";
    display: block;
    width: 12px;
    height: 12px;
    background-color: #8C8C8C;
    -webkit-mask: url('../img/contents/ico-plus.svg') 50% 50% no-repeat;
    mask: url('../img/contents/ico-plus.svg') 50% 50% no-repeat;
}
.btn-primary.btn-plus::before {
    background-color: #fff;
}

.grid-title.right {
    justify-content: flex-end;
}

.grid-title .btn-grid-fold {
    width: 30px;
    height: 30px;
    padding: 0;
    margin-left: 8px;
    vertical-align: middle;
}

.grid-title .count {
    font-size: .933em;
    display: inline-flex;
    align-items: center;
}

.grid-title .count::before {
    content:"";
    display: block;
    width: 16px;
    height: 18px;
    margin-right: .3em;
    background-color: #232327;
    -webkit-mask: url('../img/common/ico-article-count.svg') 50% 50% no-repeat;
    mask: url('../img/common/ico-article-count.svg') 50% 50% no-repeat;
}

.data-search-wrap {
    background-color: #F4F5FC;
    padding: .8em 1.067em;
    border: 1px solid #A0A2BC;
    border-radius: 4px;
    margin-bottom: 1.2rem;
    position: relative;
}

.data-search-wrap .floor {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: nowrap;
}
.data-search-wrap .floor + .floor,
.data-search-wrap > div + div > .floor {
    margin-top: 1rem;
}

.data-search-wrap:not(.for-clone) .floor:last-of-type {
    padding-right: calc(80px + 10px);
}

.data-search-wrap .floor > * {
    font-size: .933rem;
}

.data-search-wrap .floor > label {
    font-weight: 600;
    margin-right: .5em;
}

.data-search-wrap .floor > * + label {
    margin-left: 1rem;
}

.data-search-wrap .floor .form-check {
    display: inline-flex;
    align-items: center;
}

.data-search-wrap .floor > label:first-child {
    min-width: 70px;
}

.data-search-wrap .floor .btn:not(.btn-secondary):not(.responsive):not(.btn-search),
.data-search-wrap .floor input[type=text],
.data-search-wrap .floor input[type=password],
.data-search-wrap .floor input[type=number],
.data-search-wrap .floor .form-select {
    display: inline-block;
    background-color: #fff;
    border-radius: 4px;
    border: 1px solid #A0A2BC;
    color: #2D316C !important;
    font-size: .867rem;
    font-weight: 400;
    width: auto;
    height: 30px;
    line-height: 28px;
}
.data-search-wrap .floor .dropdown-item .btn:not(.btn-secondary):not(.responsive):not(.btn-search) {
    width: 100%;
    font-size: .8rem;
}

.data-search-wrap .floor .dropdown-item {
    padding: .05rem 1rem;
}

.data-search-wrap .floor .form-select {
    padding-top: 0;
    padding-bottom: 0;
    max-width: 125px;
    margin-right: 0;
}
.data-search-wrap .floor .form-select.keyword {
    margin-right: 5px;
}

.data-search-wrap .floor .btn {
    text-align: center;
}
.data-search-wrap .floor .btn.btn-secondary {
    height: 30px;
    line-height: 28px;
    padding-top: 0;
    padding-bottom: 0;
}

.data-search-wrap .floor .input-group .btn {
    line-height: normal;
}
.data-search-wrap .floor .input-group input {
    flex: 1 1 0;
}
.data-search-wrap .floor .input-group .btn.btn-search-sm {
    flex: 0 0 30px;
    width: 30px;
}
.data-search-wrap .floor .input-group .btn + .btn {
    border-left: 1px solid rgba(255, 255, 255, .25);
}

input.datepicker {
    padding-right: 24px;
    min-width: 120px;
    background: #fff url('../img/common/ico-datepicker.svg') right 10px top 50% no-repeat;
}

.data-search-wrap .datepicker-wrap {
    white-space: nowrap;
    display: inline-block;
    position: relative;
}
.data-search-wrap .datepicker-wrap:hover .tool-tip-balloon {
    display: none;
}
.data-search-wrap .datepicker-wrap .datepicker:focus + .tool-tip-balloon {
    display: inline-block;
}

.data-search-wrap .dropdown-menu {
    min-width: auto;
}

.data-search-wrap .dropdown-menu .form-check {
    margin-top: .5em;
    margin-bottom: .5em;
}

.data-search-wrap .dropdown-menu .form-check > * {
    vertical-align: top;
}

.data-search-wrap .wave {
    margin: 0 .4rem;
}

.data-search-wrap > .btn-wrap {
    position: absolute;
    bottom: .8em;
    right: 1.067em;
}

.data-search-wrap .btn.btn-search,
.data-search-wrap > .btn-wrap > * {
    padding-top: 0;
    padding-bottom: 0;
    height: 30px;
    line-height: 28px;
    font-size: .867rem;
}

.data-search-wrap .btn.btn-search {
    margin-left: .5rem;
    background-color: #2D316C;
    border-color: #2D316C;
    color: #fff !important;
}
.data-search-wrap .btn.detail {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .5em
}
.data-search-wrap .btn.detail::before,
.btn-pdf-bottom-fold::before {
    content:"";
    display: inline-block;
    width: 12px;
    height: 12px;
    opacity: .75;
    background-color: #fff;
    -webkit-mask:url('../img/common/btn-lnb-arrow-expand.svg') 50% 50%/contain no-repeat;
    mask:url('../img/common/btn-lnb-arrow-expand.svg') 50% 50%/contain no-repeat;
}

.data-search-wrap.detail-search.opened .btn.detail::before {
    transform: rotate(180deg);
}

.data-search-wrap.detail-search .btn-wrap .btn {
    text-align: center;
    width: 86px;
}

.data-search-wrap.two-panels {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.data-search-wrap.two-panels .floor {
    justify-content: center;
}

.data-search-wrap.two-panels .floor + .floor {
    margin-top: 0;
}

.data-search-wrap.two-panels .floor:last-of-type {
    padding-right: 0;
}

.data-search-wrap.two-panels .floor:nth-child(2n + 1) {
    border-right: 1px solid #A0A2BC;
}

.data-search-wrap.two-panels .input-group {
    width: 240px;
}

.data-search-wrap.sm .btn.btn-search {
    font-size: 0px;
    width: 30px;
    text-indent: -9999px;
    background: transparent url('../img/common/ico-search-list.svg') 50% 50% no-repeat;
    border: 1px solid #A0A2BC;
    border-left-width: 0;
}

.data-search-wrap.sm .floor > *:not(label),
.data-search-wrap.sm .floor .btn {
    border-radius: 0 !important;
    margin-left: -1px;
}

.data-search-wrap.sm .form-select {
    margin-right: 0;
}
.data-search-wrap.sm label {
    white-space: nowrap;
    margin-right: .2rem;
}

.btn.btn-exclamation {
    display: inline-block;
    position: relative;
    width: 17px !important;
    height: 17px;
    padding: 0;
    overflow: visible !important;
}

.btn.btn-exclamation::before {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #0d6efd;
    -webkit-mask: url('../img/common/ico-information.svg') 50% 50%/contain no-repeat;
    mask: url('../img/common/ico-information.svg') 50% 50%/contain no-repeat;
}

table .ico {
    width: 20px;
    display: inline-block;
}

table .ico.circle {
    width: 20px;
    height: 20px;
}

.data-search-wrap .floor .keyword > * {
    float: left;
}
.data-search-wrap .floor .keyword input[type=text] {
    display: block;
}
.data-search-wrap .floor .keyword > .btn-search + .btn-keyword {
    clear:both;
}
.data-search-wrap .floor .keyword .btn-keyword {
    margin-right: .5em;
}
.btn-keyword {
    margin-top: 4px;
    padding-top: 0;
    padding-bottom: 0;
    font-size: .867em !important;
    height: 26px !important;
    line-height: 24px !important;
    display: inline-flex !important;
    align-items: center;
    position: relative;
    padding-left: .35em;
    padding-right: .35em;
}

.btn-keyword::before,
.btn-keyword::after {
    content:"";
    display: inline-block;
    width: 17px;
    height: 17px;
    border-radius: 3px;
    margin-right: .4em;
    mask-position: 50% 50%;
    -webkit-mask-position: 50% 50%;
    mask-size: 80% auto;
    -webkit-mask-size: 60% auto;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-color: #fff;
    position: relative;
    z-index: 1;
}

.btn-keyword::after {
    left: .35em;
    top: 50%;
    position: absolute;
    transform: translate(0, -50%);
    z-index: 0;
}

.btn-keyword.plus::before {
    -webkit-mask-image: url('../img/contents/ico-add-btn.svg');
    mask-image: url('../img/contents/ico-add-btn.svg');
}
.btn-keyword.plus::after {
    background-color: red;
}

.btn-keyword.minus::before {
    -webkit-mask-image: url('../img/contents/ico-remove-btn.svg');
    mask-image: url('../img/contents/ico-remove-btn.svg');
}
.btn-keyword.minus::after {
    background-color: blue;
}

/* 상세검색 */
.data-search-wrap.detail-search .floor:last-of-type {
    padding-right: calc(254.72px + 10px);
}

.data-search-wrap.detail-search .floor.detail {
    max-height: 0;
    margin-top: 0;
    overflow: hidden;
}

.data-search-wrap.detail-search.opened .floor.detail {
    max-height: none;
    margin-top: 20px;
    overflow: visible;
}

.grid-title .data-search-wrap {
    padding: 0;
    background-color: transparent;
    border: none;
    margin-bottom: 0;
}

.grid-title .data-search-wrap .floor:last-of-type {
    padding-right: 0;
}

.grid-title .data-search-wrap .floor label:first-child {
    min-width: auto;
}

.btn-search-fold {
    display: inline-flex;
    width: 100%;
    font-size: .8rem;
    margin-top: 10px;
    background-color: transparent;
    opacity: .8;
    position: relative;
    justify-content: center;
    align-items: center;
    display: none;
}

.btn-search-fold::before {
    content:'';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: .5rem;
    border: 2px solid #2D306B;
    border-top: none;
    border-left: none;
    margin-top: -2px;
    transform: rotate(45deg);
}

.data-search-wrap.expand .btn-search-fold::before {
    margin-top: 4px;
    transform: rotate(-135deg);
}

.table-wrap.common *[class*=btn-favorite] {
    background-image: none;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
}

.table-wrap.common .btn-favorite {
    background-color: #B3B3B3;
    -webkit-mask-image: url('../img/common/ico-favorite-outline.svg');
    mask-image: url('../img/common/ico-favorite-outline.svg');
}

.table-wrap.common th .btn-favorite {
    background-color: #fff;
    -webkit-mask-image: url('../img/common/ico-favorite-fill.svg');
    mask-image: url('../img/common/ico-favorite-fill.svg');
}

.table-wrap.common .btn-favorite-remove {
    background-color: #2D316C;
    -webkit-mask-image: url('../img/common/ico-favorite-fill.svg');
    mask-image: url('../img/common/ico-favorite-fill.svg');
}
.table-wrap.common li > ul > li {
    font-size: .933em;
}

p.contact {
    text-align: center;
    background-color: #F4F5FC;
    font-size: .867em;
    font-weight: 500;
    padding: 7px;
    text-indent: -1.0em;
    padding-left: 2.0em;
}
p.contact > * {
    vertical-align: baseline;
    text-indent: 0;
    padding-left: 0;
}
p.contact a[href^=tel] {
    margin-left: .7rem;
    text-decoration: underline;
}
p.contact a[href^=tel]::before {
    content:"";
    display: inline-block;
    vertical-align: baseline;
    margin-bottom: -2px;
    margin-right: .35rem;
    width: 14px;
    height: 14px;
    background-image: none;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat:no-repeat;
    mask-repeat:no-repeat;
    background-color: #6B70B3;
    -webkit-mask-image: url('../img/common/ico-tel.svg');
    mask-image: url('../img/common/ico-tel.svg');
}

.btn.btn-file-down,
.btn.btn-file-download {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.btn.btn-file-down::before,
.btn.btn-file-download::before,
.pdf-bottom .item.file ul li a::before,
.pdf-bottom .item.link ul li a::before {
    content:"";
    display: inline-block;
    width: 16px;
    height: 16px;
    background-color: #2D316C;
    -webkit-mask: url('../img/common/ico-file-download.svg') 50% 50%/contain no-repeat;
    mask: url('../img/common/ico-file-download.svg') 50% 50%/contain no-repeat;
}
.pdf-bottom .item.file ul li a::before {
    -webkit-mask: url('../img/common/ico-document.svg') 50% 50%/contain no-repeat;
    mask: url('../img/common/ico-document.svg') 50% 50%/contain no-repeat;
}
.btn.btn-file-download:hover {
    background-color: inherit !important;
}
.btn.btn-primary.btn-file-down::before {
    background-color: #fff;
}
.pdf-bottom .item.file ul li a::before,
.pdf-bottom .item.link ul li a::before {
    background-color:#56566e;
    flex: 0 0 13px;
    height: 13px;
}
.pdf-bottom .item.link ul li a::before {
    -webkit-mask-image: url('../img/contents/ico-external-link.svg');
    mask-image: url('../img/contents/ico-external-link.svg');
}
.pdf-bottom .item.link ul li.youtube a::before {
    -webkit-mask-image: url('../img/contents/ico-file-youtube.svg');
    mask-image: url('../img/contents/ico-file-youtube.svg');
}

.over-modal .btn.btn-file-download {
    position: absolute; 
    top: 50%;
    right: 60px;
    transform: translate(0, -50%);
    border: 1px solid rgba(255,255,255, .5)
}
.over-modal .btn.btn-file-download:hover {
    border-color: rgba(255,255,255, 1);
}
.over-modal .btn.btn-file-download::before {
    background-color: #fff;
}

/* 폼 공통 */
div.form input, 
div.form select, 
div.form textarea {
    height: auto;
}

div.form *[class*=form] {
    font-size: .933em;
}
div.form *[class*=form].form-label {
    font-size: 1rem;
}

div.form input[type=checkbox],
div.form input[type=radio] {
    width: 1.467rem;
    height: 1.467rem;
    padding: 0;
}
div.form label {
    font-weight: 500;
}
div.form label.required::after {
    content:"*";
    color: red;
    margin-left: .25em;
}

div.form .form-check-label {
    font-weight: 400;
}

div.form *[class*=col] .btn {
    width: 100%;
}

div.form .form-check {
    display: inline-block;
}

div.form .form-check {
    margin-right: 12px;
}

a.btn.btn-go {
    display: inline-flex;
    align-items: center;
}
div.form *[class*=col] .btn.btn-go {
    width: auto;
}
div.form div[class*=col] p {
    font-size: .933rem;
}
div.form .form-span {
    display: inline-block;
    margin-top: .5em;
    font-size: .867em;
}
div.form .form-span.keycode {
    border: 1px solid #2d316c;
    color: #2d316c;
    display: block;
    text-align: center;
    padding: .375rem .75rem;
    margin-top: 0;
    font-size: .933rem;
    letter-spacing: .1em;
    font-weight: 500;
    background-color: #F9FAFC;
}
a.btn.btn-go::before {
    content:"";
    width: 14px;
    height: 14px;
    margin-right: .35em;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}
a.btn.btn-go.kakao::before {
    background-image: url('../img/contents/kakaotalk.svg');
}
a.btn.btn-go.tele::before {
    background-image: url('../img/contents/telegram.svg');
}
a.btn.btn-go.youtube::before {
    background-image: url('../img/contents/youtube.svg');
}

.btn-wrap.sns > ul {
    display: flex;
    align-items: center;
    column-gap: .733em;
    row-gap: 0em;
    flex-wrap: wrap;
}
.btn-wrap.sns > ul > li {
    display: inline-flex;
    gap: .333em;
    align-items: center;
}
.btn-wrap.sns > ul > li a.btn {
    white-space: nowrap;
}

/* 아코디언 */
.accordion {
    border-top: 2px solid #2D316C;
    border-bottom: 2px solid #2D316C;
}

.accordion-item {
    border: none;
    background-color: transparent;
}

.accordion-button:not(.collapsed) {
    background-color: transparent;
}

.accordion .accordion-header {
    display: flex;
    align-items: center;
}

.accordion .accordion-header,
.accordion .accordion-body {
    border-bottom: 1px solid #2D316C;
}

.accordion .accordion-body:first-child {
    border-bottom: none;
}

.accordion .accordion-body {
    padding: 30px 50px;
}

.accordion .accordion-header > * {
    flex: 1 1 auto;
}

.accordion .accordion-header .accordion-button {
    display: block;
    width: 100%;
    text-align: left;
    background-color: transparent;
    box-shadow: none;
    position: relative;
    padding-right: 45px;
}

.accordion-button::after {
    position: absolute;
    width: 15px;
    height: 15px;
    top: 50%;
    right:20px;
    transform: translate(0, -50%);
    background-image: none;
    background-color: #2D316C;
    -webkit-mask: url("../img/common/btn-lnb-arrow-expand.svg") 50% 50%/contain no-repeat;
    mask: url("../img/common/btn-lnb-arrow-expand.svg") 50% 50%/contain no-repeat;
}

.accordion-button:not(.collapsed)::after {
    transform: translate(0, -50%) rotate(0deg);
}
.accordion-button.collapsed::after {
    transform: translate(0, -50%) rotate(180deg);
}

.accordion .accordion-header .form-check {
    min-height: 1rem;
    margin-bottom: 0;
}

.accordion .accordion-header .form-check > input {
    float: none;
}

.accordion .accordion-header .form-check:first-child,
.accordion.list .accordion-header .no {
    width: 80px;
    text-align: center;
}

.accordion.list .accordion-button::after {
    display: none;
}

.accordion.seminar .accordion-header .category,
.accordion.seminar .accordion-header .view,
.accordion.list .accordion-header .no {
    flex: 0 0 120px;
    text-align: center;
}

.accordion.list .accordion-header .accordion-button {
    padding-right: 20px;
}

.accordion.list .ico {
    margin-left: 1.5em;
    margin-right: 1.5em;
}

.accordion .new,
.search-result-wrap .new {
    position: static;
}
.accordion .new::before,
.search-result-wrap .new::before {
    display: none;
}

.accordion .accordion-header .form-check {
    vertical-align: middle;
    margin-bottom: 0;
}

.accordion .form-check label {
    font-size: 0;
    text-indent: -9999px;
    position: fixed;
    top: -9999px;
    left: -9999px;
}

.accordion .accordion-header .tit > p:first-of-type {
    display: inline-block;
    font-size: 1.067em;
    font-weight: 500;
    margin-bottom: 5px;
    word-break: normal;
}

.accordion .accordion-header .tit > .form-check + p:first-of-type {
    margin-bottom: 0;
    vertical-align: middle;
}

.accordion.sign-up .accordion-header .form-check {
    display: inline-flex;
    align-items: center;
    width: 36px;
}

.accordion.sign-up .accordion-header .form-check > label {
    margin-bottom: 0;
}

.accordion span.em-group {
    display: block;
    margin-top: 4px;
}

.accordion .accordion-header .tit > span,
.accordion .accordion-header span.em-group > em {
    font-size: .8rem;
    opacity: .9;
    position: relative;
    margin-right: 5px;
    padding-right: 10px;
}

.accordion .accordion-header .tit > span::after,
.accordion .accordion-header span.em-group > em::after {
    content:"";
    display: block;
    width: 1px;
    height: .8rem;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0, -50%);
}

.accordion .accordion-header .tit > span:last-of-type,
.accordion .accordion-header span.em-group > em:last-child {
    margin-right: 0;
    padding-right: 0;
}
.accordion .accordion-header .tit > span:last-of-type:after,
.accordion .accordion-header span.em-group > em:last-child:after {
    display: none;
}

.accordion .accordion-collapse.show {
    background-color: #F4F5FC;
}

.accordion-header.active {
    background-color: #DFE2F5;
    border-bottom: none;
}

.accordion .accordion-body .btn.btn-lock {
    width: 1rem;
    height: 1rem;
    -webkit-mask-size: contain;
}

.accordion.list .accordion-item:last-child .accordion-header {
    border-bottom: none;
}

.accordion-header span.sta {
    font-size: .733rem;
}

ul.file > li {
    display: flex;
    align-items: center;
}

ul.file > li + li {
    margin-top: .3rem;
}

ul.file > li a {
    font-size: .933rem;
    text-decoration: underline;
}

ul.file > li a:hover {
    color: #2D306B;
}

ul.file > li::before {
    content:"";
    display: inline-block;
    margin-right: .45rem;
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    background-color: #2D316C;
    -webkit-mask: url('../img/common/ico-file-download.svg') 50% 50%/contain no-repeat;
    mask: url('../img/common/ico-file-download.svg') 50% 50%/contain no-repeat;
}
ul.file > li.youtube::before {
    -webkit-mask-image: url('../img/contents/ico-file-youtube.svg');
    mask-image: url('../img/contents/ico-file-youtube.svg');
}
ul.file > li.external-link::before {
    -webkit-mask-image: url('../img/contents/ico-external-link.svg');
    mask-image: url('../img/contents/ico-external-link.svg');
}

#contents .narrow,
.narrow-form {
    width: 720px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.narrow-form {
    border: 1px solid #C0C1D3;
    border-top-width: 4px;
    padding: 24px 30px 40px 30px;
    margin-top: 0;
}

.narrow-form::before {
    content:"";
    display: block;
    height: 4px;
    background-color: #2D306B;
    position: absolute;
    top: -4px;
    left: -1px;
    right: -1px;
}

/* 
.narrow-form::before,
.narrow-form::after {
    content:"";
    display: block;
    width: 30px;
    height: 30px;
    position: absolute;
    top: -8px; 
    left: -8px;
    border: 8px solid #00047D;
    border-right: none;
    border-bottom: none;
}

.narrow-form::after {
    top: auto;
    left: auto;
    bottom: -8px;
    right: -8px;
    transform: rotate(180deg);
} */

.for-clone {
    display: none;
}

ul.stepper {
	padding: 0 1.5rem;
	margin: 1em -1.5rem;
	overflow-x: hidden;
	overflow-y: auto;
	counter-reset: section;
}

ul.stepper li {
	height: -webkit-min-content;
	height: -moz-min-content;
	height: min-content;
}

ul.stepper li a {
	padding: 1.5rem;
	text-align: center;
}

ul.stepper li a .circle {
	display: inline-block;
	width: 1.75rem;
	height: 1.75rem;
	margin-right: .5rem;
	line-height: 1.7rem;
	color: #fff;
	text-align: center;
	background: rgba(0,0,0,0.38);
	border-radius: 50%;
}

ul.stepper li a .label {
	display: inline-block;
	color: rgba(0,0,0,0.38);
}

ul.stepper li.active a .label,ul.stepper li.completed a .label {
	font-weight: 600;
	color: #232327;
}

ul.stepper li.active a .circle {
    background-color:#2D306B;
}

.stepper-horizontal {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.stepper-horizontal li {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-transition: .5s;
	transition: .5s;
}

.stepper-horizontal li a .label {
    font-size: 1.2em;
}

.stepper-horizontal li:not(:last-child):after {
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	height: 1px;
	margin: 0 0 0 0;
	content: "";
	background-color: rgba(0,0,0,0.1);
}

.stepper-horizontal li:not(:first-child):before {
	position: relative;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	height: 1px;
	margin: 0 0 0 0;
	content: "";
	background-color: rgba(0,0,0,0.1);
}

.stepper-horizontal li:hover {
	background-color: rgba(0,0,0,0.06);
}

@media(max-width:47.9375rem) {
	.stepper-horizontal {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}

	.stepper-horizontal li {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-box-align: start;
		-ms-flex-align: start;
		align-items: flex-start;
	}

	.stepper-horizontal li a .label {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-flow: column nowrap;
		flex-flow: column nowrap;
		-webkit-box-ordinal-group: 3;
		-ms-flex-order: 2;
		order: 2;
		margin-top: .2rem;
	}

	.stepper-horizontal li:not(:last-child):after {
		position: absolute;
		top: 3.75rem;
		left: 2.19rem;
		width: 1px;
		height: calc(100% - 40px);
		content: "";
	}
}

.stepper-horizontal>li:not(:last-of-type) {
	margin-bottom: 0 !important;
}

.stepper-vertical {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

.stepper-vertical li {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

.stepper-vertical li a {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-item-align: start;
	align-self: flex-start;
}

.stepper-vertical li a .circle {
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1;
}

.stepper-vertical li a .label {
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column nowrap;
	flex-flow: column nowrap;
	-webkit-box-ordinal-group: 3;
	-ms-flex-order: 2;
	order: 2;
	margin-top: 0;
}

.stepper-vertical li.completed a .label {
	font-weight: 500;
}

.stepper-vertical li .step-content {
	display: block;
	padding: .94rem;
	margin-top: 0;
	margin-left: 3.13rem;
}

.stepper-vertical li .step-content p {
	font-size: .88rem;
}

.stepper-vertical li:not(:last-child):after {
	position: absolute;
	top: 3.44rem;
	left: 2.19rem;
	width: 1px;
	height: calc(100% - 40px);
	content: "";
	background-color: rgba(0,0,0,0.1);
}

.text-n-bg {
    width: 100%;
    height: auto;
    padding: 60px 30px;
    position: relative;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    margin-bottom: 40px;
}

.text-n-bg::before {
    content:"";
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top:0;
    left:0;
    background-color: rgba(0, 0, 0, .3);
    z-index: 0;
}
.text-n-bg > * {
    position: relative;
    z-index: 1;
    color: #fff;
}
.text-n-bg p.gm {
    display: inline-block;
    font-size: 2.4em;
    font-weight: normal;
    padding: 0;
    border-bottom: 1px solid #fff;
}

.text-n-bg span {
    display: block;
    font-size: 1.067em;
    margin-top: 30px;
}

.article-detail .article-top {
    border-bottom: 2px solid #A0A2BC;
    padding-bottom: 30px;
    padding-left: 20px;
    padding-right: 20px;
}

.article-detail .article-top .span-group {
    margin-bottom: .9em;
    display: flex;
    gap: .5em;
}

.article-detail .article-top .span-group > span {
    border: 1px solid #ccc;
    border-radius: .2em;
    font-size: .933em;
}
.article-detail .article-top .span-group em.new {
    position: static;
    font-size: .933rem;
}
.article-detail .article-top .span-group > span,
.article-detail .article-top .span-group em.new {
    padding: .3em .75em;
}
.article-detail .article-top .span-group em.new::before {
    display: none;
}

.article-detail .article-tit {
    font-size: 1.5em;
    font-weight: 600;
    margin-bottom: 30px;
    word-break: normal;
}

.article-detail .article-tit ~ span {
    font-size: .933em;
    margin-right: 20px;
    display: inline-flex;
    align-items: center;
}

.article-detail .article-tit ~ span::before {
    content:"";
    display: inline-block;
    margin-right: .4em;
    width: 22px;
    height: 22px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
}
.article-detail .article-tit ~ span.date::before {
    background-image: url('../img/common/ico-date.svg');
}
.article-detail .article-tit ~ span.author::before {
    background-image: url('../img/common/ico-pencil.svg');
}
.article-detail .article-tit ~ span.view::before {
    background-image: url('../img/common/ico-eye.svg');
}
.article-detail .article-content {
    padding: 3.333rem 1.333rem 2rem 1.333rem;
    border-bottom: 1px solid #A0A2BC;
}
.article-detail .article-content * {
    word-break: normal;
}

.ico.file {
    max-height: 20px;
}

/* 댓글 */
.be-comment-block {
    border-radius: 2px;
    padding: 30px 0;
}

.comments-title {
    display: block;
    font-weight: 600;
    padding-bottom: .5em;
    width: 100%;
    font-size: 16px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
}

.be-img-comment {
    width: 60px;
    height: 60px;
    float: left;
    margin-bottom: 15px;
}

.be-ava-comment {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}

.be-comment {
    margin-bottom: 16px;
}

.be-comment-content {
    font-size: 0;
}

.be-comment-content span {
    font-size: .933rem;
    display: inline-block;
    width: 50%;
    margin-bottom: 8px;
    vertical-align: bottom;
}

.be-comment-content a {
    color: #383b43;
    font-weight: 500;
}

.be-comment-content span.be-comment-time {
    text-align: right;
    font-size: .8rem;
}

.be-comment-time {
    font-size: 11px;
    color: #b4b7c1;
}

.be-comment-time .btn {
    font-size: .867rem;
    margin-left: .4em;
}

.be-comment-text {
    font-size: .867rem;
    line-height: 18px;
    color: #2d316c;
    display: block;
    background: #f6f6f7;
    border: 1px solid #edeff2;
    padding: 15px 20px;
}

.form-group.ico {
    position: relative;
}

.form-group .icon {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 32px;
    height: calc(100% - 2px);
    background: #f6f6f7;
    text-align: center;
    line-height: 50px;
    -webkit-border-top-left-radius: 2px;
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;
}
.form-group .icon::before {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #b5b8c2;
    -webkit-mask: url('../img/common/ico-top-user.svg') 50% 50% / 12px auto no-repeat;
    mask: url('../img/common/ico-top-user.svg') 50% 50% / 12px auto no-repeat;
}
.form-group .icon.pw::before {
    -webkit-mask-image: url('../img/common/ico-top-login.svg');
    mask-image: url('../img/common/ico-top-login.svg');
}
.form-group.ico input.form-control {
    padding-left: 44px;
}

.form-group textarea.form-control {
    height: 120px;
    margin-top: 10px;
}
/* 답글 */
.be-comment-block.reply-article {
    overflow: hidden;
}
.be-comment-block.reply-article .be-comment-name {
    font-size: 1rem;
    font-weight: 500;
}
.be-comment-block.reply-article .be-comment-name + .be-comment-time {
    display: block;
    text-align: left;
    margin-top: 5px;
}
.be-comment-block.reply-article .be-comment-text {
    background-color: #fff;
    border-width: 2px;
    font-size: .933rem;
}
.be-comment-block.reply-article .owl-stage {
    display: flex;
}
.be-comment-block.reply-article .item {
    width: 100%;
}
.owl-theme.reply-carousel .owl-nav {
    width: 100%;
}
.owl-theme.reply-carousel .owl-nav [class*=owl-] {
    position: absolute;
    background-color: rgb(0 0 0 / 10%);
    border-radius: 50%;
    width: 24px;
    height: 24px;
}
.owl-theme.reply-carousel .owl-nav [class*=owl-]:hover {
    background-color: rgb(0 0 0 / 20%);
}
.owl-theme.reply-carousel .owl-nav .owl-prev {
    left:14px;
}
.owl-theme.reply-carousel .owl-nav .owl-next {
    right:14px;
}
.owl-theme.reply-carousel .owl-item {height: 0;}
.owl-theme.reply-carousel .owl-stage-outer,  
.owl-theme.reply-carousel .owl-item.active {height: auto !important;}

.file-wrap {
    background-color: #F7F7F7;
    min-height: 4.667rem;
    display: flex;
    align-items: center;
    padding: 1.6rem 2rem;
    gap: 1.333rem;
    margin-top: 3.333rem;
}
.file-wrap > p {
    font-weight: 500;
}
.file-wrap .btn.btn-down {
    font-size: .933em;
    width: auto;
    background-color: transparent;
    border: none;
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    gap: .4em;
    text-decoration: underline;
}
.file-wrap .btn.btn-down::before {
}
.file-wrap.border {
    border: 1px solid #BFBFBF;
}
.pdf-container {
    display: flex;
    gap: 30px;
}

.pdf-left {
    flex: 0 0 250px;
}

.pdf-util > li + li {
    margin-top: 20px;
}
.pdf-util .btn {
    display: block;
    border: none;
    border-radius: 0;
    width: 100%;
    height: 80px;
    line-height: 80px;
    text-align: left;
    font-size: 1.333em;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pdf-util .btn::after {
    content:"";
    display: block;
    width: 20px;
    height: 20px;
    background-color: #fff;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}
.pdf-util .btn.download::after {
    -webkit-mask-image:url('../img/contents/ico-file-download-white.svg');
    mask-image:url('../img/contents/ico-file-download-white.svg');
}
.pdf-util .btn.viewer::after {
    -webkit-mask-image:url('../img/contents/ico-pdf-viewer.svg');
    mask-image:url('../img/contents/ico-pdf-viewer.svg');
}
.pdf-util .btn.fullscreen::after {
    -webkit-mask-image:url('../img/contents/ico-fullscreen.svg');
    mask-image:url('../img/contents/ico-fullscreen.svg');
}

.pdf-util .btn-secondary {
    background-color: #4d5066;
}
.pdf-left .dropdown-toggle {
    display: none;
    margin-top: 20px;
    border: 1px solid #BFBFBF;
    padding: 10px 15px;
}
.pdf-index {
    margin-top: 20px;
}
.pdf-index > li + li {
    margin-top: -1px;
}
.pdf-index > li > .btn {
    width: 100%;
    text-align: left;
    padding: 8px 16px;
    height: auto;
    font-size: 1em;
    color: #4D5066;
    border: 1px solid #BFBFBF;
    border-radius: 0;
}
.pdf-index > li.active > .btn {
    border: 4px solid #2D316C;
    padding: 5px 13px;
    font-weight: 600;
    color: #2D316C;
}
.pdf-view-wrap {
    width: 100%;
    height: 100%;
}

.pdf-view-wrap.full {
    height: 100%;
}

.pdf-bottom {
    background-color: #F7F7F7;
    height: auto;
    overflow-y: auto;
    padding: .667em 2em;
}

.pdf-bottom h3 {
    font-size: 1em;
    font-weight: 600;
    margin-bottom: .4em;
}
.pdf-bottom .item {
    padding: 1em 0;
}
.pdf-bottom .item + .item {
    border-top: 1px solid #C5C5CC;
}

.pdf-bottom ul {
    display: flex;
    flex-wrap: wrap;
}

.pdf-bottom ul li {
    margin-right: 1rem;
}

.pdf-bottom ul li a {
    font-size: .933em;
    text-decoration: underline;
}
.pdf-bottom .item.block ul,
.pdf-bottom .item.block ul li {
    display: block;
}
.pdf-bottom .item.block ul li + li {
    margin-top: .3em;
}
.pdf-bottom .item.block ul li a {
    display: flex;
    align-items: unset;
    gap: .4em;
}
.pdf-bottom .item.block ul li a::before {
    margin-top: .35em;
}
.dropdown-menu.pdf-index {
    border: none;
    display: block;
    position: static;
    padding: 0;
    background-color: transparent;
    background-color: #fff;
    width: 100%;
}
.ibchart-wrap {
    padding: 12px 12px 4px 12px;
    border-radius: 12px;
    border: 1px solid #ccc;
}
.ibchart-wrap tspan,
.ibchart-wrap text {
    font-family: "notokr", '맑은 고딕', 'Malgun Gothic', sans-serif !important;
}
.ibchart-wrap .highcharts-background {
    stroke-width: 0 !important;
}
.text-count-disp {
    display: block;
    text-align: right;
}
.img-zoom > img {
    display: block;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2em;
    padding-bottom: 2em;
}
.img-zoom.izoomify-in:hover,
.img-zoom.izoomify-in:focus {
    /* position: fixed !important;
    z-index: 10000;
    width: 100%;
    height: 100%;
    top:0;
    left:0; */
}

input[type=file].abs {
    width: 0;
    height: 0;
    border: 0;
    margin: 0;
    padding: 0;
}

div.form label.form-control {
    font-weight: 400;
}

/* 개별 페이지 */
article > div.ceo-message {
    padding: 60px 0;
    position: relative;
}

.ceo-message .bg {
    width: 100%;
    height: 0;
    padding-top: 36.44%;
    background-position: 100% 100%;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.ceo-message .bg .big {
    display: block;
    width: 370px;
    height: 80%;
    min-height: 240px;
    background-color: #2D316C;
    color: #fff;
    padding: 1.2rem 1.467rem;
    position: absolute;
    top: 0; 
    left: 10%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transform: translate(0, -20px);
}

.ceo-message p.medium {
    font-size: 1.067em;
}

.ceo-message .bg .big span {
    color: #fff;
}
.ceo-message .bg .big strong {
    vertical-align: baseline;
}
.ceo-message .bg .big span:first-child {
    font-size: 1.067rem;
    letter-spacing: 0;
}

.ceo-message .bg .big .gm {
    font-size: 1.667rem;
    font-weight: 400;
}
.ceo-message .bg .big .gm strong {
    font-size: 1.28em;
}
.ceo-message .ceo-sig {
    position: absolute;
    bottom: 0;
    right: 0;
}
.ceo-message .ceo-sig > * {
    vertical-align: baseline;
}
.ceo-message .ceo-sig > span {
    font-size: 1.067rem;
}
.ceo-message .ceo-sig > strong {
    font-size: 1.2rem;
    font-weight: 500;
    margin-left: .4em;
}
.ceo-message .ceo-sig {
    position: relative;
}
.ceo-message .ceo-sig img {
    margin-left: -12px;
    margin-bottom: -20px;
}

.id-note strong {
    color: #FE3501;
}

/* 등급공시 */
.stock-wrap {
    background-color: #323248;
    border-radius: 20px;
    padding: 30px 40px;
    margin-top: 10px;
    margin-bottom: 50px;
    color: #fff;
    text-align: center;
}

.stock-wrap > .row {
    row-gap: 40px;
}

.stock-wrap * {
    color: #fff;
}
.stock-wrap label {
    opacity: .8;
}
.stock-wrap p.num {
    font-size: 3.6em;
    text-align: center;
    font-weight: 500;
    padding: .25em 0 .15em 0;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgb(255 255 255 / .2);
    letter-spacing: 0;
}

.stock-wrap p.current-grade {
    opacity: .7;
}
.stock-wrap p.current-grade.up,
.stock-wrap p.current-grade.down {
    opacity: 1;
}
.stock-wrap p.current-grade::before {
    content:"";
    display: block;
    margin-top: -.2em;
    width: 16px;
    height: 16px;
    -webkit-mask-size: 100% auto;
}

.stock-wrap .row.info {
    margin-top: 20px;
}
.stock-wrap .row.info .col > * {
    margin: 0 .2em;
}
.stock-wrap .row.info label {
    font-size: .933em;
}
.stock-wrap .info p.num {
    display: inline-flex;
    border-bottom: none;
    font-size: 1.2rem;
}

.form-check *[class*=btn-favorite] {
    background-color: #2d316ccc;
}

.form-check .btn-favorite-remove {
    background-color: #2D316C;
}

/* 기업재무정보 */
ul.business {
    padding: 30px;
    border: 1px solid #aaa;
    border-radius: 16px;
    margin-top: 10px;
}
ul.business li + li {
    margin-top: .75em;
}

/* 평가 자료실 */
.thumbnail-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    row-gap: 50px;
    column-gap: 56px;
}
.thumbnail-list > li > a {
    display: block;
    position: relative;
}
.thumbnail-list em.new {
    width: auto;
    height: auto;
    position: absolute;
    z-index: 3;
}
.thumbnail-list .thumbnail em.new {
    top: 12px;
    right: 12px;
}
.thumbnail-list .tit {
    font-size: 1.2em;
    font-weight: 500;
}
.thumbnail-list * + .tit {
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: 1.5em;
    max-height: 1.5em;
    word-break: normal;
}
.thumbnail-list .em-group {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: .933em;
    max-height: .933em;
}
.thumbnail-list .category {
    font-size: .867em;
    margin-top: 10px;
    color: #6489F2;
}
.thumbnail-list .category + .tit {
    margin-top: 4px;
}
.thumbnail-list .em-group > * {
    font-size: .933em;
    color: #767676;
}
.thumbnail-list .em-group > * + * {
    padding-left: 10px;
    margin-left: 10px;
    position: relative;
}
.thumbnail-list .em-group > * + *::before {
    content:"";
    display: block;
    width: 1px;
    height: .8em;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}
.thumbnail-list * + .em-group {
    margin-top: 7px;
}
.thumbnail-list.line-list {
    grid-template-columns: 1fr;
    row-gap: 30px;
    border-top: 2px solid #37373B;
    padding-top: 30px;
}
.thumbnail-list.line-list > li {
    border-bottom: 1px solid #CFCFCF;
    padding-bottom: 30px;
}
.thumbnail-list.line-list > li > a {
    display: flex;
    gap: 30px;
    align-items: center;
}
.thumbnail-list.line-list .thumbnail {
    flex: 0 0 200px;
    height: 150px;
    padding-top: 0;
}
.thumbnail-list.line-list .category {
    margin-top: 0;
}
.thumbnail-list.line-list .para {
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5em;
    max-height: 3em;
    word-break: break-all;
}
.thumbnail-list.line-list .para + .em-group {
    margin-top: 16px;
}
.thumbnail {
    display: block;
    border-radius: 12px;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-top: 105%;
    transition: all .25s;
}
.thumbnail::before,
.thumbnail::after {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: rgba(0, 0, 0, .2);
    z-index: 2;
    transition: all .15s;
}
.thumbnail::after {
    z-index: 0;
    opacity: .5;
    background: #fafafa;
/*     background: #fafafa url('../img/common/ico-no-image.svg') 50% 50% / 40px auto no-repeat; */
}
.thumbnail:hover {
    transform: scale(1.04);
    box-shadow: 3px 3px 10px rgb(0 0 0 / 20%);
}
.thumbnail:hover:before {
    opacity: .05;
}
.thumbnail > * {
    position: absolute;
    top:0;
    width:100%; 
    height:100%;
    object-fit: cover;
    z-index: 1;
}
.thumbnail.photo {
    padding-top: 75%;
}
.thumbnail.movie {
    padding-top: 56.25%;
}
.thumbnail.movie::after {
    content:"";
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgb(255 255 255 / 1) url('../img/contents/ico-movie.svg') calc(50% + 1px) 50% / 37% auto no-repeat;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
}

/* My portfolio */
#container.db > .inner,
#container.db #contents {
    width: 100%;
    padding: 0;
    margin: 0;
    /* min-height: auto; */
}
#container.db > .inner {
    width: 1600px;
    margin:0 auto;
    min-height: auto;
}
article .my-portfolio {
    padding-top: 50px;
    padding-bottom: 50px;
}
.dashboard {
    display: flex;
    min-height: calc(100vh - 5.2em - 3.86rem - 2.533rem - 2.533rem - 100px);
}
.db-left {
    flex: 0 0 300px;
    padding: 63px 40px 40px;
    text-align: center;
    border-left: 1px solid #BEBEC2;
    border-right: 1px solid #BEBEC2;
}

.db-left .ico-user {
    display: block;
    width: 100px;
    height: 100px;
    border: 1px solid #BEBEC2;
    margin:0 auto;
    border-radius: 50%;
    position: relative;
}

.db-left .ico-user img,
.db-left .ico-user embed {
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

.db-left .user-nm {
    font-size: 1.6em;
    font-weight: 600;
    margin-top: 15px;
}
.db-left .user-type {
    font-weight: 200;
    font-size: 1.067em;
    margin-top: 5px;
}
.db-left .lct {
    font-size: .867em;
    margin-top: 10px;
}
.db-left .btn-wrap {
    margin-top: 27px;
}

.db-content {
    padding: 63px 45px 40px;
    flex-basis: 1440px;
}

.db-content .card-wrap {
    display: flex;
    gap: 20px 30px;
}

.db-content .card-wrap > * {
    flex: 1 1 0;
}

.db-content .card-wrap .card.btn {
    border: none;
    background-color: #2D316C;
    padding: 1.5em 1.2em 1.2em;
    border-radius: 1.6em;
    height: auto;
    line-height: normal;
}

.db-content .card-wrap .card.btn.btn * {
    color: #fff;
}

.db-content .card-wrap .card.btn:nth-child(2n) {
    background-color: #5259C1;
}

.db-content .card-wrap .card.btn > .gm {
    font-size: 1.067em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease-in-out;
}

.db-content .card-wrap .card.btn:hover {
    transform: scale(1.05);
}

.db-content .card-wrap .card.btn > .gm::before {
    content:"";
    display: block;
    width: 18px;
    height: 18px;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-size: contain;
    mask-size: contain;
    margin-top: -1px;
    margin-right: .45rem;
}
.db-content .card-wrap .card.btn.company > .gm::before {
    -webkit-mask-image: url('../img/contents/ico-db-company.svg');
    mask-image: url('../img/contents/ico-db-company.svg');
}
.db-content .card-wrap .card.btn.finance > .gm::before {
    -webkit-mask-image: url('../img/contents/ico-db-finance.svg');
    mask-image: url('../img/contents/ico-db-finance.svg');
}
.db-content .card-wrap .card.btn.research > .gm::before {
    -webkit-mask-image: url('../img/contents/ico-db-research.svg');
    mask-image: url('../img/contents/ico-db-research.svg');
}
.db-content .card-wrap .card.btn.method > .gm::before {
    -webkit-mask-image: url('../img/contents/ico-db-method.svg');
    mask-image: url('../img/contents/ico-db-method.svg');
}
.db-content .card-wrap .card.btn.inquiry > .gm::before {
    -webkit-mask-image: url('../img/contents/ico-db-inquiry.svg');
    mask-image: url('../img/contents/ico-db-inquiry.svg');
}
.db-content .card-wrap .card.btn > span:nth-child(2) {
    display: flex;
    justify-content: center;
    align-items: baseline;
    margin-top: 15px;
}
.db-content .card-wrap .card.btn > span:nth-child(2) > .gm {
    font-size: 2.667em;
    font-weight: 600;
}
.db-content .card-wrap .card.btn > span:nth-child(2) > .gm + em {
    font-size: 1.2em;
    margin-left: .35em;
}
.db-content .card-wrap .btn-wrap {
    display: flex;
    gap: .5em;
    margin-top: .25em;
}
.db-content .card-wrap .btn-wrap .btn {
    font-size: .933em;
    margin-left: 0;
    margin-right: 0;
    margin-top: .34em;
    border-color:rgba(255, 255, 255, 0.25);
}
.db-content .list-wrap {
    display: flex;
    gap: 12px 50px;
    margin-top: 50px;
}

.db-content .list-wrap .card {
    border: none;
    flex: 1 1 0;
    background-color: transparent;
}

.db-content .list-wrap .card.fav .card-content {
    max-height: 315px;
    overflow-y: auto;
}

.db-content .list-wrap .card .card-top {
    display: flex;
    justify-content: space-between;
}

.db-content .list-wrap .card .card-top p.gm {
    font-size: 1.333em;
    font-weight: 600;
}

.db-content .list-wrap .card .btn-setting {
    font-size: 0;
    text-indent: -9999px;
    width: 24px;
    height: 24px;
    background-color: #ACAFBF;
    -webkit-mask: url('../img/contents/ico-gear.svg') 50% 50% no-repeat;
    mask: url('../img/contents/ico-gear.svg') 50% 50% no-repeat;
}

.db-content .list-wrap .card .card-content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.db-content .list-wrap .card .card-content > * {
    flex: 1 1 calc(50% - 5px);
    width: calc(50% - 5px);
    min-height: 55px;
}

.db-content .list-wrap .card .item.btn {
    padding: 9px 15px;
    height: auto;
    background-color: #F2F2F2;
    border-radius: 10px;
    position: relative;
    border: none;
    text-align: left;
    line-height: normal;
    word-break: normal;
    flex-wrap: wrap;
}

.db-content .list-wrap .card .item .btn-remove {
    padding: 0;
    background-color: #ACAFBF;
    width: 12px;
    height: 14px;
    -webkit-mask: url('../img/contents/ico-trashcan.svg') 50% 50%/contain no-repeat;
    mask: url('../img/contents/ico-trashcan.svg') 50% 50%/contain no-repeat;
    position: absolute;
    bottom: 12px;
    right: 15px;
    display: none;
}

.db-content .list-wrap .card .item .path {
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: .733em;
    color: #A1A4B3;
}

.db-content .list-wrap .card .item .path em {
    font-size: .733em;
    color: #A1A4B3;
    display: inline-flex;
    align-items: center;
    font-weight: 400;
}

.db-content .list-wrap .card .item .path em + em {
    margin-left: 5px;
}
.db-content .list-wrap .card .item .path em::after {
    content:"";
    display: block;
    width: 4px;
    height: 8px;
    background-color: #A1A4B3;
    margin-left: 7px;
    -webkit-mask: url('../img/contents/ico-arrow-sm.svg') 50% 50%/contain no-repeat;
    mask: url('../img/contents/ico-arrow-sm.svg') 50% 50%/contain no-repeat;
}

.db-content .list-wrap .card .item .path em {
    margin-right: 0;
}

.db-content .list-wrap .card .item .path em:last-child:after {
    display: none;
}

.db-content .list-wrap .card .item span:nth-child(2) {
    font-size: .933em;
    display: block;
    font-weight: 600;
    margin-top: 3px;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.db-content .list-wrap .card.setting .item .btn-remove {
    display: inline-block;
}

.db-content .list-wrap .card.setting .item span:nth-child(2) {
    width: calc(100% - 20px);
}

.db-content .list-wrap .card.company .item {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #E6EAF2;
}
.db-content .list-wrap .card.company .item > * {
    font-size: 1.067em;
    font-weight: 500;
}

.db-content .list-wrap .card.company .item.btn > span {
    width: 100%;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-height: 1.5em;
    max-height: 3em;
    word-break: normal;
    overflow: hidden;
    text-align: center;
}

.db-content .list-wrap .card.act .item {
    padding: 7px 15px;
    width: 100%;
    flex-basis: 100%;
    background-color: transparent;
    border: 1px solid #BEBEC2;
}

.db-content .list-wrap .card.act .item span:nth-child(2) {
    margin-top: 0;
}

.db-content .list-wrap .card.act.rsch .item {
    display: flex;
    align-items: center;
}
.db-content .list-wrap .card.act.rsch .item > span {
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5em;
    max-height: 3em;
    word-break: normal;
    overflow: hidden;
    text-align: left;
}

.bootstrap-duallistbox-container label,
.bootstrap-duallistbox-container select.form-select {
    height: auto !important;
    font-weight: 500;
    display: inline-block;
    float:left;
    margin-right: .4em;
    border-radius: 4px;
    min-width: 100px;
    height: 30px !important;
    padding-top: 0;
    padding-bottom: 0;
}
.bootstrap-duallistbox-container select.form-select {
    padding-left: .5em;
}
.bootstrap-duallistbox-container .info-container {
    display: inline-block;
    margin-top: 7px;
}
.bootstrap-duallistbox-container .info {
    font-size: .933em;
}
.bootstrap-duallistbox-container .buttons {
    margin-top: 7px;
}
.bootstrap-duallistbox-container .btn-group .btn {
    background-color: #313DAA;
    color: #fff;
    height: 36px;
    line-height: 36px;
    padding: 0;
    flex: 1 1 0;
    font-size: .933em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.bootstrap-duallistbox-container .btn-group .btn::before {
    content:"";
    display: block;
    width: 10px;
    height: 12px;
    margin-right: .35em;
    background-color: #fff;
    -webkit-mask:url('../img/common/ico-carousel-play.svg') 50% 50%/contain no-repeat;
    mask:url('../img/common/ico-carousel-play.svg') 50% 50%/contain no-repeat;
}
.bootstrap-duallistbox-container .btn-group .btn i {
    display: none;
}
.bootstrap-duallistbox-container .btn-group .btn.remove::before,
.bootstrap-duallistbox-container .btn-group .btn.removeall::before {
    transform: rotate(180deg);
}
.bootstrap-duallistbox-container .btn-group .btn.moveall,
.bootstrap-duallistbox-container .btn-group .btn.removeall {
    background-color:#626283;
}
.bootstrap-duallistbox-container .btn-group .btn.moveall::before,
.bootstrap-duallistbox-container .btn-group .btn.removeall::before {
    width: 14px;
    -webkit-mask-repeat:repeat-x;
    mask-repeat:repeat-x;
    -webkit-mask-position: 0 50%;
    mask-position: 0 50%;
}
.bootstrap-duallistbox-container select:not(.form-select) {
    background-image: none;
    height: 240px !important;
    border-color: #2D306B;
    padding: 8px;
    border-top: none;
}
/* .bootstrap-duallistbox-container .box2 select:not(.form-select) {
    height: 282px;
} */
.bootstrap-duallistbox-container select option + option {
    margin-top: 4px;
}
.bootstrap-duallistbox-container .for-clone {
    display: inline-block;
    float: right;
}
.bootstrap-duallistbox-container .data-search-wrap.for-clone {
    display: flex;
    float:none;
    clear: both;
    align-items: center;
    margin-bottom: 0;
    border-radius: 0;
    border-color: #2D306B;
    border-bottom: none;
    border-top: none;
    padding-top: .4em;
    padding-bottom: .4em;
    justify-content: start;
}
.bootstrap-duallistbox-container .data-search-wrap.for-clone > .btn-wrap {
    position: static;
    margin-left: auto;
}

.btn-wrap.equal-width {
    width: 380px;
    display: flex;
}
.btn-wrap.equal-width > .btn {
    flex: 1 1 0;
    white-space: nowrap;
    justify-content: center;
}

.data-search-wrap.for-clone .floor > label:first-child {
    min-width: auto;
    line-height: 2.1em;
}
.btn-flex {
    display: inline-flex;
    align-items: center;
}
.btn-flex::before {
    margin-right: .4em;
}
.btn-add::before {
    content:"";
    display: block;
    width: 12px;
    height: 12px;
    background-color:#232327;
    -webkit-mask:url('../img/common/bg-mm-plus.svg') 50% 50%/contain no-repeat;
    mask:url('../img/common/bg-mm-plus.svg') 50% 50%/contain no-repeat;
}

.btn.btn-search-sm {
    width: 30px !important;
    padding: .45em;
}
.btn.btn-search-sm::before {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    background-color: #00047D;
    -webkit-mask: url('../img/common/ico-search-list.svg') 50% 50%/contain no-repeat;
    mask: url('../img/common/ico-search-list.svg') 50% 50%/contain no-repeat;
}
.table-wrap.form .flex-box .btn.btn.btn-search-sm {
    flex-basis: 32.81px !important;
    height: 32.81px;
    border-color: #ced4da;
}
.btn.ico.btn-config-group::before {
    background-color: #fff;
    -webkit-mask-image: url('../img/contents/ico-group.svg');
    mask-image: url('../img/contents/ico-group.svg');
}
.btn.ico.btn-config-company::before {
    background-color: #fff;
    -webkit-mask-image: url('../img/contents/ico-company.svg');
    mask-image: url('../img/contents/ico-company.svg');
}

.form .flex-box {
    display: flex;
    gap: 8px;
    flex: 1 1 auto;
}
.form .flex-box .btn {
    flex: 0 0 auto;
    width: auto !important;
}
.table-wrap.form .flex-box {
    align-items: center;
}
.table-wrap.form .form-check {
    margin-bottom: 0;
}

/* 고객센터 */
.accordion.sign-up .accordion-body {
    max-height:500px;
    overflow-y: auto;
    background-color: #fff;
}
.accordion.sign-up .accordion-header .tit > p:first-child {
    margin-bottom: 0;
}
.complete-wrap {
    text-align: center;
    background-color: #f4f5fc;
    padding: 40px;
}
.complete-wrap strong {
    vertical-align: baseline;
}
.complete-wrap img,
.complete-wrap embed {
    width: 120px;
}
.complete-wrap > p:first-of-type {
    font-size: 2em;
    margin-top: .75em;
}
.complete-wrap > p:nth-of-type(2) {
    font-size: 1.2em;
    margin-top: 1em;
}
.complete-wrap > p:nth-of-type(2) > strong {
    color: #2196f3;
}
.complete-wrap > p:last-of-type {
    margin-top: 2em;
}

.question-item {margin:40px 30px}
.question-tit {font-size:1.2em; color:#000; font-weight:500; padding-bottom:15px;}
.question-tit p {display: block; text-indent: -45px; padding-left: 19px;}
.question-tit p * {vertical-align: baseline; text-indent: 0; padding-left: 0; white-space: normal; word-break: break-all;}
.question-tit em {font-family:Roboto, sans-serif;font-weight:700;font-size:24px; margin-right: .4em; vertical-align: top; margin-top: -.2em;}
.question-tit p .tit {margin-right: .2em;}
.question-tit p .note {font-size: .8em; font-weight: 400;}
.question-tit .critical {font-size:1em;color:#ed1b23;line-height:19px;vertical-align:.15em; margin-left: .2em; font-weight:700; text-indent: 0; padding-left: 0;}
.question-cont {padding-left:0}
.question-cont .row + .row {margin-top: 10px;}
.question-cont .form-check input.form-control {margin-left: 10px; width: auto; display: inline-block; vertical-align: middle; margin-top: 0;}

/* 검색순위 팝업 */
.over-modal.search-ranking {
    box-shadow: none;
    background-color: transparent;
    width: 1200px;
}
.over-modal.search-ranking .pop-container {
    background-color: #fff;
}
.over-modal.search-ranking .owl-stage {
    display: flex;
}
.over-modal.search-ranking .owl-stage .owl-item {
    background-color: #fff;
}
.search-carousel-wrap {
    position: relative;
}

.over-modal.search-ranking .btn-close {
    position: absolute;
    bottom: -1.85rem;
    top:auto;
    right:auto;
    left: 50%;
    width: 2.5rem;
    height: 2.5rem;
    background-color: #282c40;
    border-radius: 50%;
    background-size: 60% auto;
    transform: translate(-50%, -50%);
    background-image: none;
    opacity: .8;
    transition: all .2s;
}
.over-modal.search-ranking .btn-close:hover {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.15);
}

/* .search-carousel ul {
    margin-top: 19px;
} */

.search-carousel .owl-stage-outer {
    overflow: hidden;
    padding-top: 30px;
    padding-bottom: 30px;
}

.search-carousel .owl-item {
    float: left;
    position: relative;
    transform-origin: 50% 50%;
    transform: scale(.88);
    transition: transform .3s;
}
.search-carousel .owl-item.active + .owl-item.active {
    z-index: 1;
    box-shadow: 0 0 24px rgba(0, 0, 0, .2);
    transform: scale(1.04);
}
.search-carousel .owl-item.active + .owl-item.active + .owl-item.active {
    z-index: 0;
    box-shadow: none;
    transform: scale(.88);
}

.search-carousel ul li + li {
    margin-top: 5px;
}

.search-carousel ul li a {
    font-size: 1.067em;
    display: flex;
    align-items: center;
}

.search-carousel ul li a:hover span:last-child {
    text-decoration: underline;
}

.search-carousel ul li a .num {
    text-align: left;
    width: 2em;
    font-weight: 600;
    font-size: .867em;
    padding-top: .5em;
    color: #C2C3CC;
}

.search-carousel ul li a span:last-child {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-top: .25em;
}

.search-carousel ul li:nth-child(1) a .num,
.search-carousel ul li:nth-child(2) a .num,
.search-carousel ul li:nth-child(3) a .num {
    color: #6489F2;
}

.search-carousel ul li:nth-child(1) a span,
.search-carousel ul li:nth-child(2) a span,
.search-carousel ul li:nth-child(3) a span {
    font-weight: 600;
}

.search-carousel.owl-theme .owl-dots {
    float: left;
    margin-left: 2em;
}

.search-carousel.owl-theme .owl-nav {
    float: right;
    margin-right: 2em;
    margin-top: -6px;
}

.item.search-carousel {
    margin-top: 30px;
    background-color: #F4F5FC;
    border-radius: 20px;
    padding: 30px;
}
.item.search-carousel p {
    font-size: 1.333em;
    font-weight: 600;
    color: #2D316C;
}

.carousel-wrap .btn-wrap {
    float: right;
    margin-top: 1px;
}

/* 통합검색 */
#contents.search {
    float: left;
    width: 100%;
}
#right + div {
    margin-right: 50px;
    margin-top: 20px;
    width: calc(100% - 350px);
}
#right .item.search-carousel.keyword {
    margin-top: 0;
}
#right .item.search-carousel.keyword .pop-title {
    margin-bottom: 1rem;
}
.item.search-carousel.keyword {
    background-color: transparent;
    border: 1px solid #5A5B68;
}

.btn.btn-search-detail {
    display: inline-flex;
    align-items: center;
    gap: .4em;
}

.btn.btn-search-detail::before {
    content:"";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: #fff;
    -webkit-mask: url('../img/common/btn-lnb-arrow-expand.svg') 50% 50% /contain no-repeat;
    mask: url('../img/common/btn-lnb-arrow-expand.svg') 50% 50% /contain no-repeat;
}

.btn.btn-search-detail.active::before {
    transform: rotate(180deg);
}

.section-container.sub .search-wrap {
    display: flex;
}

.section-container.sub .search-wrap > * {
    flex: 1 1 auto;
}

.section-container.sub .search-wrap>.input-group {
    width: auto;
    height: 70px;
    border-radius: 14px;
}
.section-container.sub .search-wrap>.input-group>.form-control {
    height: 60px;
}
.section-container.sub .search-wrap>.btn {
    flex: 0 0 70px;
    height: 70px;
    border-radius: 14px;
    margin-left: 12px;
}
.section-container.sub .search-wrap>.input-group:focus-within {
    border: solid 5px #313DAA;
}
.search-wrap-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 170px;
    padding-right: 96px;
    margin-top: 12px;
    flex-wrap: nowrap;
    max-width: 100%;
}
.search-wrap-bottom * {
    white-space: nowrap;
}
dl.recent {
    display: inline-flex;
    align-items: center;
    gap: 20px;
    flex-wrap:wrap;
    height: 36px;
    line-height: 36px;
    overflow: hidden;
}

dl.recent dt {
    font-size: 1.067em;
    color: #232327;
    font-weight: 500;
}

dl.recent dd a:hover {
    text-decoration: underline;
}
dl.recent dd a::before {
    content:"#";
}
.btn.btn-del {
    padding: 0;
    width: 15px;
    height: 15px;
    font-size: 0;
    text-indent: -9999px;
    position: relative;
    margin-left: .4em;
}
.btn.btn-del::before {
    content:"";
    display: block;
    width: 10px;
    height: 10px;
    position: absolute;
    top:50%;
    left:50%;
    background-image: none;
    background-color: #8C8C8C;
    -webkit-mask: url('../img/contents/ico-add-btn.svg') 50% 50%/contain no-repeat;
    mask: url('../img/contents/ico-add-btn.svg') 50% 50%/contain no-repeat;
    transform: translate(-50%, -50%) rotate(45deg);
}
.search-options {
    display: inline-flex;
    align-items: center;
    gap: 22px;
}

.search-options .form-check {
    display: inline-flex;
    align-items: center;
    margin-bottom: 0;
}

.page-title p.result {
    font-size: 1.4em;
}

.page-title p.result .color {
    color: #5259C1;
}

.page-title p.result * {
    vertical-align: top;
}

.page-title p.result .gm {
    margin-top: 2px;
}

p.remark {
    float:left;
    height: 100%;
}

.page-title .sch-box {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    gap: 10px;
}

.page-title.search-title {
    display: flex;
    align-items: center;
    justify-content:space-between;
}

.page-title.search-title p:first-child {
    margin-left: 0;
}

.page-title.search-title label {
    font-size: .933em;
    font-weight: 600;
}
.page-title.search-title select {
    margin-right: 0;
    padding-top: 0;
    padding-bottom: 0;
    width: auto;
    min-width: auto;
    font-size: .933em;
}

.search-result-wrap {
    border-top: 2px solid #37373B;
}

.sr-item {
    border-bottom: 1px solid #CFCFCF;
    padding: 22px 32px;
    display: block;
}

.sr-item .color {
    color: #5259C1;
    vertical-align: baseline;
}

.sr-item .medium {
    font-weight: 500;
}

.sr-item * + .para {
    margin-top: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.5em;
    max-height: 3em;
    word-break: normal;
}
.sr-item * + .para.one-line {
    max-height: 1.5em;
    -webkit-line-clamp: 1;
    word-break: break-all;
}

.sr-item * + .span-group {
    margin-top: 10px;
}

.sr-item ul.menu + a,
.sr-item ul.menu ~ div a {
    display: inline-flex;
    margin-top: 6px;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    max-width: 100%;
}

.sr-item .no-category a {
    display: inline-flex;
    margin-top: 6px;
    align-items: center;
    gap: 6px;
    overflow: hidden;
    max-width: 100%;
}

.sr-item ul.menu + a > span {
    max-height: 1.5em;
    display: inline-block;
    word-break: break-all;
}

.sr-item .no-category a > span {
    max-height: 1.5em;
    display: inline-block;
    word-break: break-all;
}

.sr-item .span-group > span {
    font-size: .8rem;
    opacity: .7;
    position: relative;
}

.sr-item .span-group > span  + span {
    margin-left: 5px;
    padding-left: 10px;
}

.sr-item .span-group > span  + span::before {
    content:"";
    display: block;
    width: 1px;
    height: .8rem;
    background-color: #ccc;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
}

.sr-item p.category {
    margin-bottom: 1em;
}
.sr-item p.category::before {
    content:"[";
}
.sr-item p.category::after {
    content:"]";
}
.sr-item .btn.btn-down {
    font-size: 1.333em;
    display: flex;
    text-align: left;
    padding: 0;
    border: none;
    width: 100%;
}
.sr-item .btn.btn-down i.btn.btn-download + span {
    margin-left: .4em;
    display: inline-block;
    word-break: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sr-item .btn.btn-down i.btn.btn-download {
    flex: 0 0 24px;
}
.sr-item .date {
    opacity: .75;
}

.sr-item > div > .flex-box {
    display: flex;
    align-items: center;
    gap: 1.2em;
    justify-content: start;
}
.sr-item > div > .flex-box .btn.btn-down {
    margin-top: 0;
    display: inline-flex;
    width: auto;
}
.sr-item > div > .flex-box .btn.btn-down i.btn.btn-download + span {
    margin-left: 0;
}

ul.menu {
    display: flex;
    gap: 8px;
}

* + ul.menu {
    margin-top: 12px;
}

ul.menu li {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
}

ul.menu li + li::before {
    content:"";
    display: block;
    margin-right: 8px;
    width: 12px;
    height: 12px;
    background-color: #D4D4D4;
    -webkit-mask: url('../img/contents/ico-arrow-gray.svg') 50% 50% no-repeat;
    mask: url('../img/contents/ico-arrow-gray.svg') 50% 50% no-repeat;
}

ul.menu li a:hover {
    font-weight: 500;
}

ul.menu.round {
    border: 1px solid #ccc;
    border-radius: 100px;
    padding:.16em 1em;
}
ul.menu.round > li {
    display: inline-flex;
    gap: 0;
    font-size: .867em;
}
ul.menu.round > li + li::before {
    content:"";
    display: block;
    width: .8em;
    height: 1em;
    background-color: #D4D4D4;
    -webkit-mask: url('../img/contents/ico-arrow-gray.svg') 50% 50% no-repeat;
    mask: url('../img/contents/ico-arrow-gray.svg') 50% 50% no-repeat;
}

.search-result-wrap.file .sr-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.search-result-wrap.file .sr-item > div {
    flex: 1 1 auto;
    max-width: 100%;
}

.search-result-wrap.file .sr-item > *:last-child {
    flex: 0 0 80px;
    display: flex;
    justify-content: center;
}
.search-result-wrap.file .sr-item > .ico {
    flex: 0 0 16px;
}

#right .item.search-carousel {
    position: relative;
}

.item.search-carousel .nav.prgm-tab.sm {
    position: absolute;
    top: 25px; 
    right: 20px;
}

.item.search-carousel .nav.prgm-tab.sm .nav-item {
    margin-top: 0;
}

/* 신용평가소개 */
.eval-wrap .title {
    font-size: 1.4em;
    font-weight: 600;
    margin-bottom: .5em;
}

.eval-wrap .sub-info {
    font-size: 1.067em;
    font-weight: 300;
    color: #8C8C8C;
    margin-bottom: 20px;
}

.eval-wrap .side {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}

.eval-wrap .side ul {
    display: flex;
    gap: 50px 20px;
    text-align: center;
}

.eval-wrap .side .what {
    margin-bottom: 40px;
}

.eval-wrap .side .what .round {
    width: 150px;
    height: 150px;
    border: 2px solid #5259C1;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    position: relative;
}

.eval-wrap .side .what > li {
    margin-right: 100px;
}

.eval-wrap .side .what > li::after {
    content:"";
    display: block;
    width: 70px;
    height: 25px;
    background: #BBBDD0;
    -webkit-mask: url('../img/contents/ico-long-arrow.svg') 50% 50%/contain no-repeat;
    mask: url('../img/contents/ico-long-arrow.svg') 50% 50%/contain no-repeat;
    position: absolute; 
    right: -30px;
    top: 62.5px;
    transform: translate(100%, 0);
}

.eval-wrap .side .what > li:last-child {
    margin-right: 0;
}

.eval-wrap .side .what > li:last-child:after {
    display: none;
}

.eval-wrap .side .what>li {
    position: relative;
}

.eval-wrap .side .what .round.full {
    background: #5259C1;    
}

.eval-wrap .side .what .round.full + span {
    font-weight: 700;
}

.eval-wrap .side .what span {
    font-size: 1.25em;
}

.eval-wrap .side .what .arrow {
    margin-top: 65px;
}

.eval-wrap .kind {
    width: 100%;
    height: auto;
    background: #F9FAFC;
    padding: 2em 6em;
    margin-bottom: 6em;
    font-size: 1.25em;   
}

.eval-wrap .kind>ul>li {
    display: flex;
    align-items: center;
    gap: 0 20px;
}

.eval-wrap .kind .square {
    width: 150px;
    height: 150px;
    border-radius: 15px;
    border: 2px solid #2D316C;
    display: flex;
    justify-content: center;
    align-items: center;
}

.eval-wrap .kind .square > * {
    max-width: 60px;
    max-height: 60px;
}

.eval-wrap .kind .square.bg {
    background: #2D316C;
}

.eval-wrap .side .how {
    gap: 0 30px;
}

.eval-wrap .side .how li {
    width: 180px;
    height: 180px;
    border-radius: 100%;
    border: 5px solid #5259C1;
    font-family: "GmarketSans", "notokr", "맑은 고딕", serif;
    font-weight: 500;
    color: #5259C1;
    font-size: 1.5em;
    font-weight: 700;
    text-align: center;
    display: flex;
    justify-content: center;
    padding: 60px 10px;
}

.eval-wrap .side .how li span {
    display: block;
    font-size: 0.62em;
    font-weight: 400;
    color: #a3a6d9;
}

.eval-wrap .use {
    width: 100%;
    height: auto;
    font-size: 1.25em;
    background: #F9FAFC;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 0;
}

.eval-wrap .use ul {
    display: flex;
    text-align: center;
    gap: 0 40px;
}

.eval-wrap .use .img {
    height: 100px;
    margin-bottom: 10px;
}

.eval-wrap .use ul span {
    width: 150px;
    height: auto;
}

.arr {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: baseline;
    background-color: #a6a6a6;
    -webkit-mask: url('../img/contents/ico-arrow-up.svg') 50% 50% / 50% auto no-repeat;
    mask: url('../img/contents/ico-arrow-up.svg') 50% 50% / 50% auto no-repeat;
    transform: rotate(90deg);
    margin: 0 .4em -.1em .4em;
}

/* 회사소개 */
div[class*=kr-ovr] .logo {
    max-width: 152px;
    /* transform: rotate(0.01deg); */
}
.kr-ovr .big.gm {
    font-size: 2rem;
    color: #2D316C;
    font-weight: 400;
}

.quote {
    font-size: 2.4rem;
}
.quote::before,
.quote::after {
    content:"";
    display: block;
    margin-left:auto;
    margin-right:auto;
    width: .9em;
    height: 1em;
    background-color: #fff;
    -webkit-mask: url('../img/contents/img-quote.svg') 50% 50%/contain no-repeat;
    mask: url('../img/contents/img-quote.svg') 50% 50%/contain no-repeat;
    margin-bottom: .5em;
}
.quote.black::before,
.quote.black::after {
    background-color: #232327;
}

.quote::after {
    transform: rotate(180deg);
    margin-bottom: 0;
    margin-top: .5em;
}
.quote .gm {
    font-size: 1.3em;
}
.quote > strong {
    vertical-align: baseline;
}

.text-n-bg.true {
    padding: 12rem 0;
}

.history-container {
    position: relative;
    display: flex;
}
.history-container > * {
    flex: 1 1 50%;
}
.history-container .year {
    position: relative;
    text-align: right;
    border-right: 1px solid #232327;
}
.history-container .year button,
.history-container .year li.active ~ li.active button {
    color: #D6D8E1;
    font-size: 4em;
    font-weight: 400;
    background-color: transparent;
}

.history-container .year li {
    position: relative;
    padding-right: 6em;
    transition: all .3s;
}

.history-container .year li.active::after {
    content:"";
    display: block;
    width: 4em;
    height: 1px;
    background-color: #232327;
    position: absolute;
    right: 0;
    top: 50%;
}
.history-container .year li.active::before {
    content:"";
    display: block;
    width: 1.067em;
    height: 1.067em;
    background-color: #2D316C;
    border-radius: 50%;
    position: absolute;
    right: -.5335em;
    top: 50%;
    z-index: 1;
    transform: translate(0, -46%);
}
.history-container .year li.active button {
    font-size: 10em;
    color: #2D316C;
    font-weight: 600;
    cursor: default;
}
.history-container > div {
    padding-top: 40px;
    padding-bottom: 50vh;
}
.history-container > div > ul {
    padding-left: 3.5em;
    max-width: 100%;
}

.history-container > div > ul > li {
    margin: 4em 0;
    word-break: break-all;
    display: flex;
    flex-wrap: wrap;
}
.history-container > div > ul > li > span {
    vertical-align: top;
    flex-basis: calc(100% - 90px);
}
.history-container > div > ul > li > .gm {
    color: #2D316C;
    flex-basis: 90px;
}

.history-container.fixed {
    padding-left: 50%;
}

.history-container.fixed .year {
    position: fixed;
}

.history-container.fixed > div > ul {
    opacity: .4;
}
.history-container.fixed > div > ul.active {
    opacity: 1;
}

.relation-wrap {
    border: 1px solid #707070;
    padding: 2em;
    display: flex;
    align-items: center;
    gap: 1.5em;
}
.relation-wrap > * {
    flex: 1 1 auto;
}
.relation-wrap .img {
    flex-basis: 300px;
    padding: .8em 1em;
    background-color: #fff;
    border-radius: .5em;
    text-align: center;
}
.relation-wrap div {
    flex-basis: calc(100% - 300px);
}

.text-n-bg.ijs {
    padding-top: 8em;
    padding-bottom: 8em;
}

.text-n-bg.ijs p.gm {
    border-bottom: none;
}
.text-n-bg.ijs p.gm::after {
    content:"";
    display: block;
    width: 2em;
    height: 1px;
    background-color: #fff;
    margin:1em auto 0;
}

.text-n-bg.ijs .ico-n-text {
    gap: 50px;
    width: 720px;
    max-width: calc(100% - 3em);
    margin-left: auto;
    margin-right: auto;
}

.text-n-bg.ijs .ico-n-text li {
    flex: 1 1 0px;
}
.text-n-bg.ijs .ico-n-text li .img {
    border-radius: 50%;
    border: 1px solid #fff;
    width: 7.6em;
    height: 7.6em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}
.text-n-bg.ijs .ico-n-text li span {
    color: #fff;
}

.btn-website {
    display: inline-flex;
    gap: .4em;
    font-size: .933em;
    align-items: center;
    color: #767676;
    text-decoration: underline;
}
.btn-website::before {
    content:"";
    display: block;
    width: 1.2em;
    height: 1.2em;
    background-color: #232327;
    -webkit-mask: url('../img/contents/ico-homepage.svg') 50% 50%/contain no-repeat;
    mask: url('../img/contents/ico-homepage.svg') 50% 50%/contain no-repeat;
}
.ico-n-text.join {
    position: relative;
    align-items: baseline;
    gap: 1.2em;
    padding-left: 3em;
    padding-right: 3em;
}
.ico-n-text.join::before {
    content:"";
    display: block;
    width: 100%;
    border-top: 1px dashed #707070;
    position: absolute;
    left: 0;
    top: 7.9em;
}
.ico-n-text.join li {
    flex: 1 1 0px;
}
.ico-n-text.join li .circle {
    background-color: #fff;
    border: 3px solid #ABACB8;
    width: .867em;
    height: .867em;
    border-radius: 50%;
    margin: .5em auto -.89em;
    position: relative;
    z-index: 1;
}
.ico-n-text.join li .img {
    display: inline-flex;
    align-items: center;
    height: 7em;
}
.ico-n-text.join li p {
    font-size: 1.067em;
}
.ico-n-text.join li span {
    font-size: .933em;
}
.ico-n-text.join .t-rgt {
    font-size: .933em;
    color: #707070;
}

.ico-n-text.join.esg-process > ul > li * + p {
    display: flex;
    min-height: 3.2em;
    justify-content: center;
    align-items: center;
}

.ico-n-text.join.esg-process li span {
    border: 1px solid #dedfe5;
    border-radius: .5em;
    padding: .3em .9em;
    line-height: 1.5em;
    min-height: calc(4.5em + .6em);
    display: flex;
    justify-content: center;
    align-items: center;
}
.ico-n-text.join.esg-process li span > * {
    margin-top: auto;
}

.eval-wrap.resume .kind {
    margin-bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.eval-wrap.resume .kind * {
    text-align: left;
}

.photo-upload {
    background-color: #fafafa;
    border: 1px solid #edeff2;
    padding: .667em;
}
.photo-upload .img {
    background-color: #dedfe5;
    height: 206px;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    object-fit: cover;
    overflow: hidden;
}
.photo-upload .img > span {
    font-size: .867em;
    text-align: center;
    opacity: .8;
    position: absolute;
    top: 50%;
    left: 50%; 
    transform: translate(-50%, -50%);
}
.photo-upload .img img {
    position: relative;
    z-index: 1;
}
.photo-upload  .form-control {
    margin-left: 0 !important;
    margin-top: -15px;
    text-align: center;
}
.table-wrap + .t-rgt {
    font-size: .867em;
    margin-top: .3em;
}

/* 사업가치평가 */
.ico-n-text.bve > ul {
    gap: 3.5em;
    padding-left: 8em;
    padding-right: 8em;
    flex-wrap: wrap;
}
.ico-n-text.circle-bg .ico {
    width: 10em;
    height: 10em;
    background-color: #EFEFEF;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tab-container .map {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.tab-container .map.kor {
    max-width: 480px;
}

.tab-container .map.world {
    max-width: 1000px;
}

.tab-container .map .point {
    position: absolute;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 6px;
    height: 6px;
    background-color: #ccc;
    box-shadow: 0 0 0 3px rgba(255,255,255, .5);
    box-sizing: content-box;
    z-index: 1;
    cursor:pointer;
}

.tab-container .map .point .span-group {
    display: block;
    font-size: .8em;
    position: absolute;
    bottom:50%;
    left:50%;
    transform: translate(-50%, -8px);
    background-color: #fff;
    padding-left: .5em;
    padding-right: .5em;
    border-radius: .1em;
    border: 1px solid #ccc;
    display: none;
    white-space: nowrap;
}
.tab-container .map .point .span-group > span {
    display: block;
}
.tab-container .map .point.left .span-group {
    left:0;
    transform: translate(-10px, -8px);
}
.tab-container .map .point.right .span-group {
    left:auto;
    right:0;
    transform: translate(10px, -8px);
}
.tab-container .map .point.active {
    z-index: 2;
}
.tab-container .map .point.active .span-group {
    display: inline-block;
}

.tab-container .map .point.color01,
.achivement-container ul.color01 > li::before {
    background-color: #EFAF6E;
}

.tab-container .map .point.color01 {
    animation: boxShadowWidthColor01 1s ease-in-out infinite;
}

.tab-container .map .point.color02,
.achivement-container ul.color02 > li::before {
    background-color: #3CBE9F;
}

.tab-container .map .point.color02 {
    animation: boxShadowWidthColor02 1s ease-in-out infinite;
}

.tab-container .map .point.color03,
.achivement-container ul.color03 > li::before {
    background-color: #5C75F1;
}

.tab-container .map .point.color03 {
    animation: boxShadowWidthColor03 1s ease-in-out infinite;
}

.tab-container .map .point.color04,
.achivement-container ul.color04 > li::before {
    background-color: #FB2651;
}

.tab-container .map .point.color04 {
    animation: boxShadowWidthColor04 1s ease-in-out infinite;
}

.tab-container .map .point.color05,
.achivement-container ul.color05 > li::before {
    background-color: #16CBDF;
}

.tab-container .map .point.color05 {
    animation: boxShadowWidthColor05 1s ease-in-out infinite;
}

.tab-container .map-wrap .map::before {
    content:"";
    display: block;
    position: absolute;
    top:0; 
    left: 0;
    width: 100%;
    height: 100%;
    opacity: .35;
    background-position:0 0;
    background-size: contain;
    background-repeat: no-repeat;
}

.tab-container .map-wrap.kor .map::before {
    background-image: url('../img/contents/bg-map-kor.png');
}
.tab-container .map-wrap.world .map::before {
    background-image: url('../img/contents/bg-map-world.png');
}

.map path {
    fill: #d0d1d9 !important;
    stroke: #ffffff !important;
}
.map path:hover {
    fill: #c2c3cb !important;
}

.datamaps-hoverover strong {
    letter-spacing: 0;
    font-weight: 400;
}

.achivement-container {
    display: flex;
    gap: 20px;
}
.achivement-container.kor {
    flex-direction: column;
}
.achivement-container.kor ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    column-gap: 1em;
    row-gap: .35em
}
.achivement-container > * {
    flex: 1 1 0;
}
.achivement-container .list,
.achivement-container .list > .item {
    padding: 2em 1.333em;
    border: 1px solid #D1D2D4;
    border-radius: 1.067em;
}
.achivement-container .list.no-border {
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.achivement-container .gm {
    font-size: 1.6em;
}
.achivement-container ul {
    margin-top: 1em;
}
.achivement-container ul > li {
    font-size: .867em;
    text-indent: -.7em;
    padding-left: .7em;
}
.achivement-container ul > li + li {
    margin-top: .35em;
}
.achivement-container.kor ul > li + li {
    margin-top: 0;
}
.achivement-container ul > li::before {
    content:"";
    display: inline-block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background-color: #ccc;
    margin-right: .4em;
    vertical-align: top;
    margin-top: .5em;
}

/* 이용안내 */
.file-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 1em;
    row-gap: .733em;
}
.file-grid .btn.btn-file-down {
    justify-content: center;
}
.btn-wrap.center.file .btn {
    flex-wrap: nowrap;
}

/* Error Page */
.error-wrap {
    width: 1200px;
    margin: 0 auto;
    padding-top: 30px;
    text-align: center;
}

.img-error {
    width: 10em;
    margin: 0 0 40px 0;
}

.error-wrap .inner {
    margin-top: 10px;
    padding: 60px 40px;
    border: 12px solid #dee2e6;
}

.error-wrap p.big {
    color: #343dc1;
}

.error-wrap p.big > * {
    vertical-align: baseline;
}
.error-wrap p.big > a {
    font-size: .867em;
}
.error-wrap p.big > a:hover {
    text-decoration: underline;
}

.error-wrap h1 {
    width: 180px;
    height: 48px;
    padding:0 16px;
    position: relative;
    display: block;
    text-align: left;
    padding-bottom: 20px;
}

.error-wrap h1 > a {
    float:left;
    height: auto;
    justify-content: start;
}

/* 화면인쇄 관련 이해규 차장님 수정 220714 */
#container_print {
    /* height: 0px; */
    /* overflow: hidden; */
}

#container_print .breadcrumb {
    width: 100%;
}

#container_print .page-title {
    width: 100%;
}

/* 코치마크 */
.btn-coachmark {
    position: fixed;
    top: 5.6rem;
    right: 20px;
    text-indent: -9999px;
    font-size: 0;
    width: 40px;
    height: 40px;
    border-radius: 50% 50% 50% 0;
    background-color: #313DAA;
    z-index: 10;
    display: none;
    transition: all .12s;
}
.btn-coachmark:hover {
    transform: scale(1.09);
}
.btn-coachmark::before {
    content:"";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #fff;
    -webkit-mask: url(../img/common/ico-coachmark.svg) 50% 50% / 62% auto no-repeat;
    mask: url(../img/common/ico-coachmark.svg) 50% 50% / 62% auto no-repeat;
}
.coachmark {
    position: fixed;
    background-color: rgba(0, 0, 0, .25);
    top:0;
    left:0;
    bottom:0;
    right:0;
    z-index: 9999;
    display: none;
}
body.main .btn-coachmark.active,
.coachmark.active {
    display: block !important;
}
.coachmark .balloon {
    background-color: #fff;
    font-size: .867em;
    display: inline-block;
    padding: .5em .75em;
    position: absolute;
    border-radius: 8px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .06);
}
.coachmark .balloon > * {
    line-height: 1.5em;
}
.coachmark .balloon::before {
    content:"";
    display: block;
    width: 10px;
    height: 10px;
    background-color: inherit;
    position: absolute;
    transform: rotate(45deg);
}
.coachmark .balloon.top::before {
    top: 0;
    left:50%;
    transform: translate(-50%, -50%) rotate(45deg);
}
.coachmark .balloon.right::before {
    top: 50%;
    right: 0;
    left:auto;
    transform: translate(50%, -50%) rotate(45deg);
}
.coachmark .balloon.left::before {
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%) rotate(45deg);
}
.coachmark .balloon.bottom::before {
    top: auto;
    left: 50%;
    bottom: 0;
    transform: translate(-50%, 50%) rotate(45deg);
}
.coachmark .balloon.more {
    top: 5.2rem;
    right: 2rem;
}
.coachmark .balloon.top.more::before {
    right:.2em;
    left:auto;
    transform: translate(-50%, -50%) rotate(45deg);
}
.coachmark .balloon.panel {
    top: 50%;
    right: 6rem;
    transform: translate(0, -50%);
}
.coachmark .balloon.screenmode {
    top: auto;
    bottom: 2.45rem;
    left: 6rem;
}
.coachmark .balloon.scrollable {
    bottom: 4rem;
    left: 50%;
    transform: translate(50px, 0);
}
.coachmark .balloon.quicklink {
    top: 50%;
    left: 50%;
    transform: translate(-50%, 190px);
}
.coachmark .balloon.megamenu {
    top: 5.6em;
    left: 50%;
    transform: translate(-50%, 0);
}
.coachmark .balloon.leftpanel {
    top: 4.6em;
    left: .8rem;
    transform: translate(0, 0);
}
.coachmark .balloon.top.leftpanel::before {
    left: 1.1rem;
    transform: translate(-50%, -50%) rotate(45deg);
}
.coachmark .balloon.search {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -184px);
}
.coachmark .btn-wrap {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
}
.coachmark .btn-wrap button {
    padding: .75rem 1.5rem;
    border-radius: 100px;
    background-color: rgba(0, 0, 0, .65);
    color: #fff;
    font-size: 1.067em;
    transition: all .15s;
}
.coachmark .btn-wrap button.remove {
    background-color: #F9558D;
}
.coachmark .btn-wrap button.close {
    background-color: #00047D;
}
.coachmark button:hover {
    background-color: rgba(0, 0, 0, .85);
}
.coachmark .balloon.m-visible {
    display: none;
}

/* 왼쪽 메뉴 접힘 */
.btn-lnb-fold {
    margin-right: auto;
    border: 1px solid #bdc5e9;
    background-color: transparent;
    font-size: 0;
    text-indent: -9999px;
    width: 28px;
    height: 28px;
    border-radius: .3rem;
    position: relative;
    background-color: #d1d6ed;
}
.btn-lnb-fold::before {
    content:"";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #2d316c;
    -webkit-mask: url('../../common/img/common/btn_prev.svg') 50% 50%/7px auto no-repeat;
    mask: url('../../common/img/common/btn_prev.svg') 50% 50%/7px auto no-repeat;
    transition: all .3s;
}
body.lnb-fold #left,
body.lnb-fold #left h2 {
    width: 0;
    padding: 0;
}
body.lnb-fold #left h2 {
    overflow: hidden;
}
body.lnb-fold #contents {
    width: 100%;
    max-width: 1250px;
}
body.lnb-fold .btn-lnb-fold::before {
    transform: rotate(180deg);
}


/* 다크모드 */
body.darkmode ::-webkit-scrollbar-thumb {
    background-color: #656587
}

body.darkmode #lnb > ul > li > a {
    opacity: .8;
}
body.darkmode .btn-mode.dark {position: fixed;left: -9999px;top: -9999px} /* 다크모드 전환 버튼 */
body.darkmode .btn-mode.light {position: static} /* 라이트모드 전환 버튼 */
body.darkmode {color: #fff} /* body */

body.darkmode header, /* 헤더 */
body.darkmode #container, /* 컨테이너 */
body.darkmode #contents, /* 콘텐츠 */
body.darkmode #container > .inner,
body.darkmode .section, /* body */
body.darkmode .section-container .section.business-value,/* 메인페이지 사업가치평가 섹션 배경 */
body.darkmode .scroll-down r, /* SCROLL DOWN 안내 표시 */
body.darkmode .over-modal, /* 공통 레이어 팝업 */
body.darkmode .over-modal.search-ranking .pop-container,
body.darkmode .over-modal.search-ranking .owl-stage .owl-item {background-color: #323248}
body.darkmode .over-modal .list-group.favorite .list-group-item.ui-sortable-helper {
    background-color: rgb(50 50 72 / 95%) !important;
}

body.darkmode #container > .inner {
    overflow: hidden;
}
 
body.darkmode .btn-outline-secondary:hover {background-color: #747797} /* 공통 버튼 */
body.darkmode .right-panel .btn-panel-wrap .btn-panel.expand {background-color: #2970FF} /* 우측패널 확장 버튼 */
body.darkmode .util>li .dropdown-menu,
body.darkmode .util>li .dropdown-menu::after {background-color: #29293c} /* 로그인 후 상단 유틸 클릭 시 드롭다운 영역 */
body.darkmode .over-modal.login-wrap .btn-wrap .btn {background-color: #42425c;} /* 로그인 후 상단 유틸 클릭 시 드롭다운 영역 */
body.darkmode p, /* p 태그 요소 */
body.darkmode a, /* a 태그 요소 */
body.darkmode span, /* span 태그 요소 */
body.darkmode input, /* input 태그 요소 */
body.darkmode select, /* select 태그 요소 */
body.darkmode textarea, /* textarea 태그 요소 */
body.darkmode label, /* label 태그 요소 */
body.darkmode em, /* em 태그 요소 */
body.darkmode button, /* 버튼 태그 요소 */
body.darkmode textarea, /* textarea 태그 요소 */
body.darkmode #gnb>ul>li>a, /* GNB 1차 메뉴 */
body.darkmode .btn-outline-secondary, /* 공통 버튼 */
body.darkmode .form-control, /* bootstrap input */
body.darkmode .ranking>label, /* 메인-통합검색창 하단 '검색 순위' 레이블 */
body.darkmode .util>li>a, /* 로그인 후 상단 유틸 */
body.darkmode .util>li>a>span, /* 로그인 후 상단 유틸 */
body.darkmode .table-wrap.main.scroll table tbody td, /* 테이블 셀 공통 */
body.darkmode .section-container .section h2>span:first-child, /* 메인 페이지 각 섹션별 제목 */
body.darkmode .nav.type01 .nav-link.active, /* Tab UI 활성화 버튼 공통 */
body.darkmode .section-container .section h2>span:nth-child(2), /* 메인 페이지 각 섹션별 제목 하단 설명 텍스트 */
body.darkmode .btn.btn-go-arrow, /* 메인 페이지 각 섹션별 제목 하단 더보기 화살표 버튼 */
body.darkmode #left h2, /* 서브페이지 왼쪽 영역 최상단 1차 메뉴명 */
body.darkmode .breadcrumb ul li:last-child a, /* 페이지 경로 표시 중 현재 페이지 */
body.darkmode .btn,
body.darkmode .over-modal .pop-title, /* 팝업 제목 공통 */
body.darkmode .item.search-carousel p, 
body.darkmode .keyword-ranking.carousel .carousel-item a > *, /* 검색어 순위 텍스트 */
body.darkmode .over-modal .list-group.favorite .list-group-item, /* 메인페이지 바로가기 추가 팝업 내 리스트 */
body.darkmode .datepicker td, /* 데이트피커 달력 */
body.darkmode .datepicker th,
body.darkmode ul.stepper li a .label,
body.darkmode .breadcrumb ul li:last-child span,
body.darkmode .eval-wrap .side .how li,
body.darkmode .eval-wrap .side .how li span,
body.darkmode .eval-wrap .sub-info,
body.darkmode .nav.prgm-tab .nav-link,
body.darkmode dl.recent dt,
body.darkmode .pdf-index > li.active > .btn,
body.darkmode #lnb > ul > li.active > a, 
body.darkmode #lnb > ul > li.expand > a,
body.darkmode .kr-ovr .big.gm,
body.darkmode .history-container .year li.active button,
body.darkmode .history-container > div > ul > li > .gm,
body.darkmode .error-wrap p.big,
body.darkmode input.datepicker
 {
    color: #fff;
    opacity: 1;
}
body.darkmode .btn.btn-keyword,
body.darkmode .right-panel .panel .item.list span.round,
body.darkmode .sta.sta-none
 {
    color: #fff !important;
}
body.darkmode .btn-check:hover+.btn, 
body.darkmode .btn:hover {
    box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 25%);
}

body.darkmode .btn-check:active+.btn-outline-secondary:focus, 
body.darkmode .btn-check:checked+.btn-outline-secondary:focus, 
body.darkmode .btn-outline-secondary.active:focus, 
body.darkmode .btn-outline-secondary.dropdown-toggle.show:focus, 
body.darkmode .btn-outline-secondary:active:focus, 
body.darkmode .btn-check:focus+.btn-outline-secondary, 
body.darkmode .btn-outline-secondary:focus
 {
    box-shadow: 0 0 0 0.25rem rgb(255 255 255 / 15%);
}

body.darkmode .form-check-input:checked {
    background-color: #0d6efd !important;
    border-color: #0d6efd !important;
}
body.darkmode .history-container .year li.active ~ li.active button {
    color: #D6D8E1;
}
body.darkmode .btn.btn-inform,
body.darkmode .btn-grid-fold {
    background-color: #A3A6BF;
    border-color: #A3A6BF;
    color: #323248 !important;
}
body.darkmode .btn.btn-inform::before,
body.darkmode .btn-grid-fold::before {
    background-color: #323248;
}

body.darkmode #lnb > ul > li > ul::before {
    background-color: #A3A6BF;
    border: none;
}

body.darkmode *::placeholder {
    color: rgba(255, 255, 255, .4);
}
body.darkmode .current-grade:not(.up):not(.down),
body.darkmode .util>li .dropdown-menu .dropdown-item {
    color: rgba(255, 255, 255, .8);
}
body.darkmode tr:hover .current-grade:not(.up):not(.down),
body.darkmode strong.square {
    color: #232327;
}

body.darkmode .quick-links-wrap .thumb {
    background-color: #1e1e30;
}
body.darkmode .quick-links-wrap>ul>li:nth-child(2n) .thumb {
    background-color: #1d1d2a;
}
body.darkmode .quick-links-wrap>ul>li.add-btn .thumb {
    opacity: .75;
}
body.darkmode .quick-links-wrap>ul>li>a > span:last-child {
    opacity: .7;
}

body.darkmode .table-wrap.main.scroll table thead th {color: #B2B2C8} /* 테이블 헤더 공통 */
body.darkmode .table-wrap.main.scroll table thead th, /* 테이블 헤더 공통 */
body.darkmode .table-wrap.main.scroll table tbody tr td {border-bottom-color: rgba(255, 255, 255, .4)} /* 테이블 셀 공통 */
body.darkmode .nav.type01 .nav-link.active::before, /* Tab UI 활성화 버튼 공통 */
body.darkmode .btn-go-plus::before, /* 메인 페이지 각 섹션별 + 버튼 */
body.darkmode .btn-go-plus::after, /* 메인 페이지 각 섹션별 + 버튼 */
body.darkmode .btn.btn-go-arrow::before, /* 메인 페이지 각 섹션별 제목 하단 더보기 화살표 버튼 */
body.darkmode .btn.btn-go-arrow::after, /* 메인 페이지 각 섹션별 제목 하단 더보기 화살표 버튼 */
body.darkmode .owl-theme .owl-dots .owl-dot span, /* 캐러셀 점 표시 */
body.darkmode .owl-theme .owl-nav [class*=owl-], /* 캐러셀 좌우 이동 버튼 */
body.darkmode .owl-theme .owl-nav [class*=owl-]:hover,  /* 캐러셀 좌우 이동 버튼 마우스 오버 시 */
body.darkmode .carousel-wrap .btn-wrap button, /* 캐러셀 플레이/스톱 버튼 */
body.darkmode .btn-menu::before, /* 모바일 메뉴 버튼 */
body.darkmode .btn-menu::after, /* 모바일 메뉴 버튼 */
body.darkmode .btn-menu > span,  /* 모바일 메뉴 버튼 */
body.darkmode .over-modal .btn-close::before, /* 로그인 팝업 닫기 버튼 */
body.darkmode .over-modal .btn-close::after, /* 로그인 팝업 닫기 버튼 */
body.darkmode .page-item.active a.page-link,
body.darkmode .owl-theme .owl-dots .owl-dot span,
body.darkmode .nav.prgm-tab .nav-link.active,
body.darkmode .grid-title .count::before,
body.darkmode .no-data::before,
body.darkmode a[href*=mailto]::before,
body.darkmode .pdf-bottom .item.block ul li a::before
{
    background-color: #fff;
}
body.darkmode .table-wrap.main.scroll table tbody tr:hover td:first-child, /* 메인 페이지 Table Row 마우스 오버 시 */
body.darkmode .table-wrap.main.scroll table tbody tr:hover td, /* 메인 페이지 Table Row 마우스 오버 시 */
body.darkmode .table-wrap.main.scroll table tbody tr:hover td:last-child, /* 메인 페이지 Table Row 마우스 오버 시 */
body.darkmode .nav.prgm-tab,
body.darkmode .nav.prgm-tab .nav-link.active {
    border-color: #fff;
    color: #232327;
}

body.darkmode .over-modal.search-ranking .btn-close {
    background-color: #52566a;
}

body.darkmode .over-modal .list-group.favorite .list-group-item,
body.darkmode .over-modal .list-group.favorite .list-group-item.active {
    border-color: #4c516a;
}
body.darkmode .util>li .dropdown-menu,
body.darkmode .util>li .dropdown-menu::after,
body.darkmode .util>li .dropdown-menu li + li > .dropdown-item {
    border-color: #4c5064;
}
body.darkmode .eval-wrap .kind .square,
body.darkmode .eval-wrap .side .what .round,
body.darkmode .form-check-input[type=checkbox],
body.darkmode .form-check-input[type=radio],
body.darkmode .btn.btn-go,
body.darkmode .history-container .year,
body.darkmode .no-data,
body.darkmode .no-data .btn,
body.darkmode .pdf-bottom .item + .item {
    border-color: rgba(255, 255, 255, .2);
}
body.darkmode input.datepicker:disabled,
body.darkmode input.datepicker:read-only
{
    border-color: rgba(255, 255, 255, .2) !important;
    color: rgba(255,255,255, .5);
    background-color: rgba(0, 0, 0, .24);
}
body.darkmode .history-container .year li.active::after {
    opacity: .2;
    background-color: #fff;
}
body.darkmode .history-container .year li.active::before,
body.darkmode h1::before {
    background-color: #fff;
}
body.darkmode .eval-wrap .side .what .round.full,
body.darkmode .btn.btn-keyword,
body.darkmode .over-modal.search-ranking {
    background-color: transparent;
}

body.darkmode .over-modal.login-wrap {
    box-shadow: 0 0 80px rgb(0 0 0 / 80%);
}

body.darkmode .over-modal.login-wrap .input-group input,
body.darkmode .page-item.active a.page-link {
    color: #232327;
}
body.darkmode .btn.btn-download, /* 파일 다운로드 버튼 */
body.darkmode .accordion.sign-up .accordion-body,
body.darkmode .eval-wrap .kind .square.bg,
body.darkmode .form-control,
body.darkmode .form-select,
body.darkmode a.btn,
body.darkmode .form-check-input[type=checkbox],
body.darkmode .form-check-input[type=radio],
body.darkmode .no-data,
body.darkmode input.datepicker,
body.darkmode .btn.grid.inquiry { 
    background-color: transparent;
}
body.darkmode .dropdown-item:focus, /* 드롭다운 아이템 공통 */
body.darkmode .dropdown-item:hover, /* 드롭다운 아이템 공통 */
body.darkmode #container > .search-bar .input-group > *,
body.darkmode #container > .search-bar .input-group button.btn.btn-search {
    background-color: #303046;
    color: #fff;
}
body.darkmode .section-container .section h2.left hr {opacity: 0} /* 메인페이지 섹션별 제목 영역 내 줄바꿈을 위한 라인 요소 */
body.darkmode h1>a>img,
body.darkmode h1>a>embed,
body.darkmode .img-error, /* 상단 로고 이미지(SVG) 파일 */
body.darkmode .btn.btn-download img, 
body.darkmode .btn.btn-download embed,
body.darkmode .btn.grid.inquiry img,
body.darkmode .btn.grid.inquiry embed
{
    filter: invert(100%) sepia(1%) saturate(3%) hue-rotate(230deg) brightness(105%) contrast(100%)
} 
body.darkmode .util>li:hover > a,  /* 로그인 후 상단 유틸 */
body.darkmode .util>li > a.show
 {background-color: #404057}
body.darkmode .util>li>a::before {
    background-color: rgba(255, 255, 255, 1);
} /* 로그인 후 상단 유틸 */
body.darkmode .accordion
 {border-color: #C5C5CC} /* #LNB 2차 메뉴 항목 */
body.darkmode .accordion .accordion-header, 
body.darkmode .accordion .accordion-body.accordion,
body.darkmode * > .tool-tip-balloon.up,
body.darkmode * > .tool-tip-balloon.right,
body.darkmode .comments-title,
body.darkmode .relation-wrap,
body.darkmode .achivement-container .list, 
body.darkmode .achivement-container .list > .item,
body.darkmode #lnb > ul > li,
body.darkmode #left h2,  /* 서브페이지 왼쪽 영역 최상단 1차 메뉴명 */
body.darkmode #lnb > ul
 {
    border-color: rgb(197 197 204 / .5);
}

body.darkmode .map path {
    fill: #565674 !important;
    stroke: #323248 !important;
}
body.darkmode .map path:hover {
    fill: #5e5e83 !important;
}

body.darkmode #lnb > ul > li > ul > li > a:hover, /* #LNB 3차 메뉴 버튼 항목 */
body.darkmode #lnb > ul > li > ul > li.active > a, /* #LNB 3차 메뉴 활성화 버튼 항목 */
body.darkmode .item.search-carousel,
body.darkmode .form-select option
 { 
    background-color: #4D4D65;
    color: #fff
}
body.darkmode #lnb > ul > li > ul::before {border: none} /* #LNB 2차 메뉴 버튼 항목 */
body.darkmode #lnb > ul > li > ul > li.active > a::before, /* #LNB 2차 메뉴 활성화 버튼 항목 */
body.darkmode .btn.btn-lock,
body.darkmode .btn-website::before {
    background-color: #fff;
}
body.darkmode .section-container .search-wrap>.input-group { /* 메인페이지 통합검색 입력 영역 */
    background-color: #323248;
    border-color: #fff
}
body.darkmode .form-select option:checked,
body.darkmode .form-select option:hover {
    background-color:#2D306B;
    color: #fff;
}

body.darkmode table a.tit, 
body.darkmode table tr td a:not(.btn) {
    color: #8c9eff;
}

body.darkmode .btn.btn-download.mp4,
body.darkmode .form-control,
body.darkmode .form-select,
body.darkmode input.datepicker,
body.darkmode .btn.btn-download,
body.darkmode .btn.grid.inquiry
{
    border-color: rgba(255, 255, 255, .5);
}
body.darkmode .section-container .search-wrap>.btn {background-color: #fff;background-image: url('../img/contents/ico-search-big-dark.svg')} /* 메인페이지 통합검색 버튼 */
body.darkmode .section-container .search-wrap>.input-group>.form-control {background-image: url('../img/contents/bg-input-line-white.svg')} /* 메인페이지 통합검색 입력 폼 */
body.darkmode .section-container .search-wrap>.dim {background-color: rgb(21 24 40 / 85%)} /* 메인페이지 통합검색 입력창 포커스 시 배경 흐림 */
body.darkmode .box {background-color: #4D4D65} /* 카드 요소 공통 */
body.darkmode .box * {color: #fff;border-color: rgba(255, 255, 255, .5) !important;background-color: transparent} /* 카드 하위 요소 공통 */
body.darkmode .box .btn-download img,
body.darkmode .box .btn-download embed,
body.darkmode .btn.btn-download.mp4 img,
body.darkmode .btn.btn-download.mp4 embed,
body.darkmode img[src*="ico-locked"] {filter: invert(100%) sepia(1%) saturate(3%) hue-rotate(230deg) brightness(105%) contrast(100%) !important} /* 박스 내 다운로드 버튼 내 아이콘 */
body.darkmode .box .btn-download:hover {border-color: rgba(255, 255, 255, .75) !important} /* 카드 요소 내 다운로드 버튼 마우스 오버 시 */
body.darkmode .box .date {opacity: .63} /* 카드 요소 내 날짜 텍스트 */
body.darkmode .section-container .section.carousel .tit-wrap { /* 카드 요소 내 날짜 텍스트 */
    background: -moz-linear-gradient(left, rgba(50, 50, 72, 1) 0%, rgba(50, 50, 72, 1) 80%, rgba(50, 50, 72, 0) 100%);
    background: -webkit-linear-gradient(left, rgba(50, 50, 72, 1) 0%, rgba(50, 50, 72, 1) 80%, rgba(50, 50, 72, 0) 100%);
    background: linear-gradient(to right, rgba(50, 50, 72, 1) 0%, rgba(50, 50, 72, 1) 80%, rgba(50, 50, 72, 0) 100%);
    /* filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#323248', endColorstr='#00323248', GradientType=1) */
}
body.darkmode .section-container .section.kr-news ul>li {border-top-color: #fff} /* 메인 페이지 공지사항 리스트 아이템 */
body.darkmode .section-container .section.kr-news ul {border-bottom-color: #fff} /* 메인 페이지 공지사항 리스트 */
body.darkmode #container > .search-bar,
body.darkmode .balloon-layer-pop {background-color: #191932;} /* 서브페이지 통합 검색 영역 */
body.darkmode .page-title {background-color: #4D4D65} /* 서브페이지 페이지 제목 영역 */
body.darkmode .page-title img,
body.darkmode .page-title embed, /* 서브페이지 페이지 제목 로고 */
body.darkmode .breadcrumb img,
body.darkmode .breadcrumb embed {filter: invert(91%) sepia(42%) saturate(0%) hue-rotate(52deg) brightness(105%) contrast(100%)} /* 페이지 경로 영역 홈 버튼 아이콘 */
body.darkmode #container > .search-bar .input-group > *, /* 서브페이지 통합검색 영역 입력폼 */
body.darkmode #container > .search-bar .input-group button.btn.btn-search /* 서브페이지 통합검색 버튼 */
 {background-color: #323248;color: #fff}
body.darkmode .grid-title .data-search-wrap .floor .form-select,
body.darkmode .grid-title .data-search-wrap .floor .form-control {
    background-color: #4d4d65;
    border-color: #4d4d65;
    color: #fff !important;  
}
body.darkmode #container > .search-bar .input-group button.btn.btn-search {background-image: url('../img/contents/ico-search-big.svg')} /* 서브페이지 통합검색 버튼 */
body.darkmode footer {background-color: #2E2F3B;} /* footer 공통 */
body.darkmode footer .inner .dropdown-toggle {background-color: #3e3e56;} /* 관계사 바로가기 */
body.darkmode .table-wrap.main.scroll table .sticky {background-color: #323248;} /* 메인페이지 테이블 - 모바일 환경에서 고정 될 셀 영역 */
body.darkmode .table-wrap.main.scroll table tbody tr:hover td {background-color: #fff !important} /* 메인페이지 테이블 - row 마우스 오버 시 */
body.darkmode .right-panel * {color: #232327 !important} /* 우측 패널 하위 요소 전체 */
body.darkmode .right-panel .panel .item .btn.btn-go {border-color: #c7c7c7;}
body.darkmode article > div.ceo-message::before {opacity: .064} /* CEO 메세지 배경 */
body.darkmode .mega-menu {background-color: #44445e} /* 메가 메뉴 영역 */
body.darkmode .mega-menu .inner > ul > li > a,
body.darkmode .mega-menu .inner > ul > li > span {background-color: #535793} /* 메가 메뉴 1차 버튼 */
body.darkmode .mega-menu .inner > ul > li > ul > li > ul > li > a {color: rgba(255, 255, 255, .7)} /* 메가 메뉴 3차 버튼 */
body.darkmode .btn.btn-login {background-color: #4148a9} /* 로그인 영역 로그인 버튼 */
body.darkmode .modal, /* modal 배경 흐림 */
body.darkmode .loading-wrap,
body.darkmode .loading-wrap-02 {  /* 로딩 영역 배경 흐림 */
    background-color: rgba(42, 42, 46, .9)
}
body.darkmode .mega-menu .m-visible button.btn { /* 모바일 메가 메뉴 하단 유틸 버튼 영역 */
    background-color: #323248;
}
body.darkmode .mega-menu .inner > ul > li > a,
body.darkmode .mega-menu .inner > ul > li > span {color: #fff; background-color: #323248;} /* 모바일 메가 메뉴 1차 버튼 */
body.darkmode .mega-menu .m-visible button.btn-mode.light {background-color: #fff;color: #2970FF} /* 모바일 메가 메뉴 하단 유틸 영역 - 라이트 모드 전환 버튼 */
.mega-menu .m-visible button.btn-mode.light {position: fixed} /* 모바일 메가 메뉴 하단 유틸 영역 - 라이트 모드 전환 버튼 */
body.darkmode .mega-menu .m-visible button.btn-mode.dark {position: fixed} /* 모바일 메가 메뉴 하단 유틸 영역 - 다크 모드 전환 버튼 */
body.darkmode .mega-menu .m-visible button.btn-mode.light {position: relative;top: 0;left: 0} /* 모바일 메가 메뉴 하단 유틸 영역 - 라이트 모드 전환 버튼 */
body.darkmode .mega-menu .m-visible button.btn-mode.light .ico {filter: none;background-color: transparent} /* 모바일 메가 메뉴 하단 유틸 영역 - 라이트 모드 전환 버튼 내 아이콘 */

body.darkmode .btn-primary,
body.darkmode a.btn-primary,
body.darkmode .page-title .btn-wrap .btn.btn-fav.active,
body.darkmode .sta.sta-fill { /* 공통 버튼 */
    background-color: #2970FF;
    border-color: #2970FF;
}

body.darkmode .over-modal .pop-header,
body.darkmode .over-modal .pop-footer { /* 팝업 공통 헤더 */
    background-color: #44445e;
}

body.darkmode .over-modal.popup, /* 메인페이지 접속 시 최초 팝업 */
body.darkmode .grid-title .data-search-wrap {
    background-color: transparent;
}
body.darkmode .over-modal.popup .pop-header, /* 메인페이지 접속 시 최초 팝업 - 헤더 영역 */
body.darkmode .over-modal.popup .pop-container, /* 메인페이지 접속 시 최초 팝업 - 콘텐츠 영역 */
body.darkmode .eval-wrap .kind 
 { 
    background-color: #56566e;
}
body.darkmode .data-search-wrap,/* 조회영역 */
body.darkmode ul.stepper li a .circle,
body.darkmode .grid-title .data-search-wrap .btn.btn-search,
body.darkmode .complete-wrap,
body.darkmode .file-wrap,
body.darkmode .coachmark .balloon {
    background-color: #4D4D65;
    border-color: #4D4D65 !important;
}

body.darkmode .grid-title .data-search-wrap .floor .dropdown-toggle
 {
    border-color: #4D4D65;
}

body.darkmode .add, 
body.darkmode .annotation,
body.darkmode .stock-wrap,
body.darkmode .pdf-bottom {
    background-color: #252538;
}

body.darkmode .add {
    border-color: transparent;
}

body.darkmode .data-search-wrap .dropdown-toggle.responsive + .dropdown-menu .dropdown-item > a.btn,
body.darkmode .data-search-wrap .floor input.datepicker,
body.darkmode .data-search-wrap .floor .form-control,
body.darkmode .data-search-wrap .floor .dropdown-toggle,
body.darkmode .data-search-wrap .floor .form-select,
body.darkmode .btn.btn-search-sm,
body.darkmode .data-search-wrap .floor .btn:not(.btn-secondary):not(.responsive) {
    background-color: #323248; 
    border-color: #323248; 
    color: #C5C5CC !important;
}

body.darkmode .btn.btn-search-sm::before {
    background-color: #fff;
}

body.darkmode .page-title .btn-wrap .btn {
    background-color: #A3A6BF;
    color: #4D4D65;
}

body.darkmode p > strong.no,
body.darkmode .btn-coachmark {
    background-color: #5b5fa3;
}

body.darkmode .datepicker table tr td.day:hover, 
body.darkmode .datepicker table tr td.day.focused {
    background-color: rgba(255, 255, 255, .26);
}

body.darkmode .coachmark {
    background-color: rgba(0, 0, 0, .65);
}

body.darkmode .datepicker-dropdown.datepicker-orient-top::after {
    border-top-color: #1a1a28;
}

body.darkmode .form-check-input[type=checkbox] + label, 
body.darkmode .form-check-input[type=radio] + label,
body.darkmode .data-search-wrap .wave,
body.darkmode .grid-guide .info {
    color: #C5C5CC;
}

body.darkmode .page-title .btn-wrap .btn::before {
    background-color: #323248;
    background-image: none;
    -webkit-mask-position: 50% 50%;
    mask-position: 50% 50%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
body.darkmode .page-title .btn-wrap .btn.btn-mp::before {
    -webkit-mask-image: url('../img/common/ico-btn-mp.svg');
    mask-image: url('../img/common/ico-btn-mp.svg');
}

body.darkmode .page-title .btn-wrap .btn.btn-print::before {
    -webkit-mask-image: url('../img/common/ico-btn-print.svg');
    mask-image: url('../img/common/ico-btn-print.svg');
}

body.darkmode .page-title .btn-wrap .btn.btn-excel::before {
    -webkit-mask-image: url('../img/common/ico-btn-excel.svg');
    mask-image: url('../img/common/ico-btn-excel.svg');
}

body.darkmode .table-wrap.common table .sticky,
body.darkmode .table-wrap.common table td,
body.darkmode * > .tool-tip-balloon.up,
body.darkmode * > .tool-tip-balloon.right,
body.darkmode .data-search-wrap .btn.btn-search {
    background-color: #323248;
    color: #e7e7eb;
}

body.darkmode * > .title-container:hover {
	color: #758afc !important;
}

body.darkmode * > .tippy-box {
	background-color: #191932;
}

body.darkmode * > .tippy-box .tippy-arrow {
    color: #191932;
}


body.darkmode .table-wrap.common table th,
body.darkmode .table-wrap.common table th.stick {
    background-color: #4D4D65;
    color: #e7e7eb;
}
body.darkmode .ibsheet-wrap {
    border-top-color:#fff;
}
body.darkmode .table-wrap.common,
body.darkmode .table-wrap.common table th.sticky, 
body.darkmode .table-wrap.common table th, 
body.darkmode .table-wrap.common table td,
body.darkmode hr.grid-line,
body.darkmode .ibsheet-wrap {
    border-color: #6f6f85;
}
body.darkmode .table-wrap.common table tr > .br {
    border-color: #6f6f85 !important;
}

body.darkmode .table-wrap.common .btn-favorite-remove {
    background-color: #2970ff;
}

body.darkmode .table-wrap.scroll.scroll-right::after {
    background: -webkit-radial-gradient(right ellipse, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 75%) 100% center;
    background: radial-gradient(ellipse at right, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 75%) 100% center;
}
body.darkmode .table-wrap.scroll.scroll-left::before {
    background: -webkit-radial-gradient(left ellipse, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 75%) 0 center;
    background: radial-gradient(ellipse at left, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 75%) 0 center;
}
body.darkmode .bootstrap-duallistbox-container .data-search-wrap.for-clone {
    background-color: #44445c;
}
body.darkmode .btn-search-fold::before,
body.darkmode .eval-wrap .side .how li,
body.darkmode .search-result-wrap,
body.darkmode .thumbnail-list.line-list,
body.darkmode .pdf-index > li.active > .btn {
    border-color: #fff;
}

body.darkmode .nav.d4-tab {
    border-color: #4D4D65;
}

body.darkmode .nav.d4-tab .nav-link {
    color: #A6A6A6;
}

body.darkmode .nav.d4-tab .nav-link.active {
    color: #fff;
    background-color: #4D4D65;
}

body.darkmode .nav.d5-tab {
    border-color: #4D4D65;
}

body.darkmode .nav.d5-tab .nav-link,
body.darkmode .thumbnail-list .em-group > * {
    color: #fff;
    opacity: .8;
}

body.darkmode .nav.d5-tab .nav-link::before,
body.darkmode .quote.black::before, 
body.darkmode .quote.black::after {
    background-color: #fff;
    opacity: .8;
}

body.darkmode .nav.d5-tab .nav-link.active {
    opacity: 1;
}

body.darkmode .ico-n-text.circle-bg .ico,
body.darkmode .data-search-wrap .btn.btn-search,
body.darkmode .data-search-wrap .floor .input-group .btn {
    background-color: #28283e;
    border-color: #28283e;
}
body.darkmode .data-search-wrap .floor .input-group .btn + .btn {
    border-left-color: rgba(255, 255, 255, .15);
}

body.darkmode a.btn.btn-back,
body.darkmode .contact,
body.darkmode .accordion-header.active,
body.darkmode .form-group .icon {
    background-color: #4D4D65;
    border-color: #4D4D65;
}

body.darkmode .datepicker table tr td span:hover, 
body.darkmode .datepicker table tr td span.focused,
body.darkmode .datepicker .datepicker-switch:hover, 
body.darkmode .datepicker .prev:hover, 
body.darkmode .datepicker .next:hover, 
body.darkmode .datepicker tfoot tr th:hover {
    background-color: #2D306B;
}

body.darkmode .accordion .accordion-collapse.show,
body.darkmode .table-wrap.common table tbody th.sticky {
    background-color: #3b3b50;
}

body.darkmode .accordion .form-check-input {
    border: 1px solid rgb(197 197 204 / .5);
}

body.darkmode ul.file > li a {
    opacity: .8;
}

body.darkmode ul.file > li::before,
body.darkmode .btn-add::before {
    background-color: #fff;
}

body.darkmode ul.file > li a:hover {
    color: #fff;
    opacity: 1;
}

body.darkmode .accordion-button::after {
    background-image: none;
    background-color: #fff;
    -webkit-mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") 50% 50%/contain no-repeat;
    mask:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") 50% 50%/contain no-repeat;
}

body.darkmode .ico-n-text.join li .circle {
    background-color: #323248;
}

body.darkmode .db-left,
body.darkmode ul.business,
body.darkmode .sr-item,
body.darkmode .thumbnail-list.line-list > li {
    border-color: rgba(255, 255, 255, .2)
}
body.darkmode .db-content .list-wrap .card .item.btn {
    border: none !important;
}

body.darkmode .page-item.active a.page-link {
    border-color: #fff;
    color: #232327;
}

body.darkmode .db-content .list-wrap .card .item.btn {
    background-color: #4d4d65;
}

body.darkmode .db-content .list-wrap .card.act .item {
    border: none;
}

body.darkmode .over-modal.login-wrap .input-group input::placeholder {
    color: rgb(35 35 39 / .6);
}
body.darkmode .over-modal.login-wrap .input-group input {
    color: #232327;
}

body.darkmode .db-content .card-wrap .card.btn:nth-child(2n),
body.darkmode .be-comment-block.reply-article .be-comment-text {
    background-color: #1b1b32;
}

body.darkmode .bootstrap-duallistbox-container select,
body.darkmode .eval-wrap .use,
body.darkmode .be-comment-text {
    background-color: #4d4d65;
    border: none;
}

body.darkmode ul.stepper li a {
    opacity: .8;
}
body.darkmode ul.stepper li.active a {
    opacity: 1;
}
body.darkmode .stepper-horizontal li:not(:first-child):before,
body.darkmode .stepper-horizontal li:not(:first-child):after,
body.darkmode .stepper-horizontal li:not(:last-child)::before,
body.darkmode .stepper-horizontal li:not(:last-child):after {
    background-color: rgba(255, 255, 255, .6);
}

body.darkmode .eval-wrap .use .img,
body.darkmode .eval-wrap .kind .square img,
body.darkmode .eval-wrap .kind .square embed,
body.darkmode .eval-wrap .side .what .round img,
body.darkmode .eval-wrap .side .what .round embed,
body.darkmode .kr-ovr .logo,
body.darkmode .ico-n-text > ul > li > img,
body.darkmode .ico-n-text.join li .img,
body.darkmode .explanation .ico {
    filter: invert(100%) sepia(100%) saturate(1%) hue-rotate(345deg) brightness(102%) contrast(101%);
}
body.darkmode .eval-wrap .kind .square.bg img,
body.darkmode .eval-wrap .kind .square.bg embed,
body.darkmode .eval-wrap .side .what .round.full img,
body.darkmode .eval-wrap .side .what .round.full embed {
    filter: invert(0) sepia(100%) saturate(1%) hue-rotate(345deg) brightness(102%) contrast(101%);
}

body.darkmode .narrow-form,
body.darkmode .error-wrap .inner {
    border-color: rgba(255, 255, 255, .25);
}

/* body.darkmode .narrow-form::before,
body.darkmode .narrow-form::after {
    border-color: rgba(255, 255, 255, .3);
}
body.darkmode .input-group-text {
    background-color: rgba(255, 255, 255, .1);
    color: #fff;
    border-color: rgba(255, 255, 255, .5);
    border-right: none;
} */

body.darkmode .narrow-form::before,
body.darkmode .btn.btn-file-down::before,
body.darkmode .btn.btn-file-download::before {
    background-color: #fff;
}

body.darkmode .code-popup {
    background-color: #3b3b50;
}
body.darkmode .page-title p.result .color,
body.darkmode .grid-title .title strong,
body.darkmode .sr-item .color,
body.darkmode span.reply > strong {
    color: #848bf5;
}

body.darkmode .form-select {
    background: transparent url('../img/common/btn-combobox-arrow-dark.svg') right .75rem center / 8px auto no-repeat;
}

body.darkmode .table-wrap table tr.color01 > * {
    background-color: #404056;
}
body.darkmode .table-wrap table tr.color01 tbody th,
body.darkmode .table-wrap table tr.color01 > .sticky {
    background-color: #404056;
}
/* ibChart */
body.darkmode .ibchart-wrap,
body.darkmode .ibchart-wrap .highcharts-background {
    background-color: #404056;
    border-color: transparent;
    fill: transparent !important;
}
body.darkmode .ibchart-wrap tspan,
body.darkmode .ibchart-wrap text {
    fill: #fff !important;
}
body.darkmode .highcharts-label-box.highcharts-tooltip-box {
    fill: #252538 !important;
    stroke: none;
}
/* highcharts-graph와 highcharts-point는 한쌍으로 취급할 것 */
body.darkmode .highcharts-graph[stroke='#2d3068'] {
    stroke: #fff !important;
}
body.darkmode .highcharts-point[fill='#2d3068'] {
    fill: #fff !important;
}
body.darkmode .mega-menu .inner > ul > li > ul::before {
    background-color: #fff;
    opacity: .4;
}
body.darkmode .form-check *[class*=btn-favorite] {
    background-color: #fff;
}
body.darkmode .form-check .btn-favorite-remove {
    background-color: #2970ff;
}

body.darkmode .img-zoom.dark {
    background-color: #9aa6c3;
    border-radius: 20px;
}
body.darkmode #container .search-bar .dropdown-menu,
body.darkmode .tab-container .map .point .span-group,
body.darkmode .datamaps-hoverover .hoverinfo,
body.darkmode .dropdown-menu { /* 드롭다운 공통 */
    background-color: #1a1a34;
}

body.darkmode .tab-container .map .point .span-group,
body.darkmode .datamaps-hoverover .hoverinfo {
    border-color: #1a1a34;
    box-shadow: none;
}

.bootstrap-duallistbox-container .btn-wrap.btn-none-h {
    margin-bottom: 6px;
}

.use-front-dot {
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background: #232327;
    margin-top: -5px;
    margin-right: 4px;
}

.int-coach-btn{
    width: 35px !important;
    height: 35px !important;
    border-radius: 6px !important;
    position: absolute;
    right: 0;
    margin-right: 15px;
    top: 50%;
    transform: translate(0, -50%);
    background: #E8EAF5 url(../img/common/ico-int-question.png) no-repeat center center;
}

.balloon-layer-pop {
    background-color: #fff;
    font-size: .867em;
    display: inline-block;
    padding: 1.4em;
    position: absolute;
    z-index: -1;
    border-radius: 8px;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, .2);
    text-align: left;
    top: 0;
    right: 0;
    margin-top: 65px;
    margin-right: 94px;
    opacity: 0;
    transition: all .4s;
}

.balloon-layer-pop.active{
    opacity: 1;
    z-index: 500;
}

.balloon-layer-pop::before{
    content:"";
    display: block;
    width: 10px;
    height: 10px;
    background-color: inherit;
    position: absolute;
    transform: rotate(45deg);
    top: 0;
    right: 0;
    margin-top: -5px;
    margin-right: 20px;
}

.balloon-layer-pop li{
    margin-bottom: 10px;
}

.balloon-layer-pop .tit{
    font-size: 1.1em;
    font-weight: 800;
}

.balloon-layer-pop span{
    color: #999;
}

.balloon-layer-pop b{
    color: #313DAA;
    margin-right: 8px;
}

/* 아이패드/아이폰 대응 */
@supports (-webkit-touch-callout: none) {
    /* CSS specific to iOS devices */
    
}

.btn-left-wrap {
    position: fixed;
    z-index: 10;
    top: 50%;
    transform: translate(-150%, -50%);
    display: none;
}

.btn-left-wrap .btn-left{
     width: 30px;
     height: 50px;
     font-size: 0;
     transition: all .4s;
     background-position: 8px 50%;
     background-color: #000;
     background-image: url(../img/common/ico-arrow-white.svg);
     background-repeat: no-repeat;
     transform: rotate(180deg);
}

.btn-left-wrap .open{
    transform: rotate(0deg);
}

body.darkmode .btn-left-wrap .btn-left {background-color: #2970FF} /* 우측패널 확장 버튼 */