@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

:root {
    --icon-circle-color: #666;
}
/* 텍스트 옵션 ------------------------------------------------- */
.font-24-bold{
    font-size: 24px;
    font-weight: 500;
}

.font-20-bold{
    font-size: 20px;
    font-weight: 500;
}
/* ------------------------------------------------------------ */

/* main tutorial */
.main-inner {
    position: relative;
    width: 80%;
    margin: 0 auto;
}

.main-row {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    gap: 50px;
}

.main-left, .main-right {
    width: calc(50% - 50px);
}

.tutorial-title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 220px;
}

.tutorial-title h2 {
    display: flex;
    flex-flow: column wrap;
    color: #4635a0;
    font-size: 30px;
    text-align: center;
    line-height: 180%;
    font-weight: 400;
}

.tutorial-title h2 strong {
    font-size: 40px;
    font-weight: 400;
}

.tutorial-title h2 b {
    font-weight: 600;
}

.tutorial-area {
    position: relative;
    padding-bottom: 50px;
    margin-bottom: 50px;
}

.tutorial-area::after {
    content: "";
    position: absolute;
    top: 320px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #f2f6fc;
    z-index: -1;
}

.tutorial-area .main-inner {
    display: flex;
    flex-flow: row wrap;
    gap: 10px;
}

.tutorial-menu {
    display: flex;
    flex-flow: column wrap;
    flex: 1;
}

.tutorial-menu h3 {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    color: #fff;
    font-size: 18px;
}

.tutorial-menu h3::before {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    margin: 0 auto 5px auto;
    background-color: #fff;
}

.tutorial-menu:first-child h3 {
    background-color: #399497;
}

.tutorial-menu:nth-child(2) h3 {
    background-color: #4786ae;
}

.tutorial-menu:nth-child(3) h3 {
    background-color: #416cac;
}

.tutorial-menu:nth-child(4) h3 {
    background-color: #5058a2;
}

.tutorial-menu:nth-child(5) h3 {
    background-color: #715bb3;
}

.tutorial-menu:nth-child(6) h3 {
    background-color: #7a48a0;
}

.tutorial-menu:nth-child(7) h3 {
    background-color: #b165b0;
}

.tutorial-menu:nth-child(8) h3 {
    background-color: #c98397;
}

.tutorial-menu:nth-child(9) h3 {
    background-color: #a6817a;
}

.tutorial-menu > ul {
    flex: 1;
    padding: 5px 15px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    background-color: #fff;
}

.tutorial-menu > ul > li {
    position: relative;
    padding: 12px 12px 12px 0;
    border-bottom: solid 1px #f0f3f7;
    font-size: 14px;
    line-height: 130%;
    word-break: keep-all;
    cursor: pointer;
}

.tutorial-menu > ul > li:last-child {
    border-bottom: 0;
}

.tutorial-menu > ul > li::after {
    content: "";
    display: block;
    position: absolute;
    top: 16px;
    right: 3px;
    width: 5px;
    height: 5px;
    border-radius: 1px;
    border-left: solid 2px #000;
    border-bottom: solid 2px #000;
    transform: rotate(-135deg);
}

.tutorial-menu > ul > li > ul {
    display: none;
    position: absolute;
    right: -145px;
    top: -3px;
    width: 150px;
    padding: 10px 5px 10px 20px;
    border: solid 1px #000;
    box-shadow: 3px 3px 10px rgba(0, 0, 0, .1);
    background-color: #f9f9f9;
    z-index: 1;
}

.tutorial-menu > ul > li > ul::before {
    content: "";
    display: block;
    position: absolute;
    top: 17px;
    left: -6px;
    width: 10px;
    height: 10px;
    border-radius: 1px;
    border-left: solid 1px #000;
    border-bottom: solid 1px #000;
    background-color: #fff;
    transform: rotate(45deg);
}

.tutorial-menu > ul > li li {
    position: relative;
    padding: 5px 0;
    line-height: 120%;
    transition: .2s;
}

.tutorial-menu > ul > li li::before {
    content: "";
    display: block;
    position: absolute;
    top: 11px;
    left: -8px;
    width: 3px;
    height: 3px;
    border-radius: 50%;
}

.tutorial-menu > ul > li > span {
    display: block;
    color: #444;
    line-height: 120%;
    font-weight: 500;
    transition: .2s;
}

.tutorial-menu:nth-child(1) > ul > li:hover > span {
    color: #399497;
}

.tutorial-menu:nth-child(1) > ul > li:after {
    border-color: #399497;
}

.tutorial-menu:nth-child(1) > ul > li > ul {
    border-color: #71b3b5;
    background-color: #f5fafa;
}

.tutorial-menu:nth-child(1) > ul > li > ul::before {
    border-color: #71b3b5;
    background-color: #f5fafa;
}

.tutorial-menu:nth-child(1) > ul > li li:hover {
    color: #399497;
}

.tutorial-menu:nth-child(1) > ul > li li::before {
    background-color: #399497;
}

.tutorial-menu:nth-child(2) > ul > li:hover > span {
    color: #4786ae;
}

.tutorial-menu:nth-child(2) > ul > li::after {
    border-color: #4786ae;
}

.tutorial-menu:nth-child(2) > ul > li > ul {
    border-color: #7aa8c5;
    background-color: #f6f9fb;
}

.tutorial-menu:nth-child(2) > ul > li > ul::before {
    border-color: #7aa8c5;
    background-color: #f6f9fb;
}

.tutorial-menu:nth-child(2) > ul > li li:hover {
    color: #4786ae;
}

.tutorial-menu:nth-child(2) > ul > li li::before {
    background-color: #4786ae;
}

.tutorial-menu:nth-child(3) > ul > li:hover > span {
    color: #416cac;
}

.tutorial-menu:nth-child(3) > ul > li::after {
    border-color: #416cac;
}

.tutorial-menu:nth-child(3) > ul > li > ul {
    border-color: #7a98c5;
    background-color: #f5f8fb;
}

.tutorial-menu:nth-child(3) > ul > li > ul::before {
    border-color: #7a98c5;
    background-color: #f5f8fb;
}

.tutorial-menu:nth-child(3) > ul > li li:hover {
    color: #416cac;
}

.tutorial-menu:nth-child(3) > ul > li li::before {
    background-color: #416cac;
}

.tutorial-menu:nth-child(4) > ul > li:hover > span {
    color: #5058a2;
}

.tutorial-menu:nth-child(4) > ul > li::after {
    border-color: #5058a2;
}

.tutorial-menu:nth-child(4) > ul > li > ul {
    border-color: #848abe;
    background-color: #f6f6fa;
}

.tutorial-menu:nth-child(4) > ul > li > ul::before {
    border-color: #848abe;
    background-color: #f6f6fa;
}

.tutorial-menu:nth-child(4) > ul > li li:hover {
    color: #5058a2;
}

.tutorial-menu:nth-child(4) > ul > li li::before {
    background-color: #5058a2;
}

.tutorial-menu:nth-child(5) > ul > li:hover > span {
    color: #715bb3;
}

.tutorial-menu:nth-child(5) > ul > li::after {
    border-color: #715bb3;
}

.tutorial-menu:nth-child(5) > ul > li > ul {
    border-color: #9b8cca;
    background-color: #f8f7fb;
}

.tutorial-menu:nth-child(5) > ul > li > ul::before {
    border-color: #9b8cca;
    background-color: #f8f7fb;
}

.tutorial-menu:nth-child(5) > ul > li li:hover {
    color: #715bb3;
}

.tutorial-menu:nth-child(5) > ul > li li::before {
    background-color: #715bb3;
}

.tutorial-menu:nth-child(6) > ul > li:hover > span {
    color: #7a48a0;
}

.tutorial-menu:nth-child(6) > ul > li::after {
    border-color: #7a48a0;
}

.tutorial-menu:nth-child(6) > ul > li > ul {
    border-color: #a27fbc;
    background-color: #faf8fc;
}

.tutorial-menu:nth-child(6) > ul > li > ul::before {
    border-color: #a27fbc;
    background-color: #faf8fc;
}

.tutorial-menu:nth-child(6) > ul > li li:hover {
    color: #7a48a0;
}

.tutorial-menu:nth-child(6) > ul > li li::before {
    background-color: #7a48a0;
}

.tutorial-menu:nth-child(7) > ul > li:hover > span {
    color: #b165b0;
}

.tutorial-menu:nth-child(7) > ul > li::after {
    border-color: #b165b0;
}

.tutorial-menu:nth-child(7) > ul > li > ul {
    border-color: #c893c8;
    background-color: #fbf7fb;
}

.tutorial-menu:nth-child(7) > ul > li > ul::before {
    border-color: #c893c8;
    background-color: #fbf7fb;
}

.tutorial-menu:nth-child(7) > ul > li li:hover {
    color: #b165b0;
}

.tutorial-menu:nth-child(7) > ul > li li::before {
    background-color: #b165b0;
}

.tutorial-menu:nth-child(8) > ul > li:hover > span {
    color: #c98397;
}

.tutorial-menu:nth-child(8) > ul > li::after {
    border-color: #c98397;
}

.tutorial-menu:nth-child(8) > ul > li > ul {
    border-color: #d9a8b6;
    background-color: #fcf9fa;
}

.tutorial-menu:nth-child(8) > ul > li > ul::before {
    border-color: #d9a8b6;
    background-color: #fcf9fa;
}

.tutorial-menu:nth-child(8) > ul > li li:hover {
    color: #c98397;
}

.tutorial-menu:nth-child(8) > ul > li li::before {
    background-color: #c98397;
}

.tutorial-menu:nth-child(9) > ul > li:hover > span {
    color: #a6817a;
}

.tutorial-menu:nth-child(9) > ul > li::after {
    border-color: #a6817a;
}

.tutorial-menu:nth-child(9) > ul > li > ul {
    border-color: #c1a7a2;
    background-color: #faf9f8;
}

.tutorial-menu:nth-child(9) > ul > li > ul::before {
    border-color: #c1a7a2;
    background-color: #faf9f8;
}

.tutorial-menu:nth-child(9) > ul > li li:hover {
    color: #a6817a;
}

.tutorial-menu:nth-child(9) > ul > li li::before {
    background-color: #a6817a;
}

.icon-plus::before, .icon-plus::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #4535a0;
    transition: background-color .3s;
}

.icon-tutorial1::before {
    mask: url(/res/img/component/icon_tutorial1-753e3831122f8f1cf66289b1ee84ccfa.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_tutorial1-753e3831122f8f1cf66289b1ee84ccfa.svg) 50%/contain no-repeat;
}

.icon-tutorial2::before {
    mask: url(/res/img/component/icon_tutorial2-aec2f86799eab498659867356d8009ef.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_tutorial2-aec2f86799eab498659867356d8009ef.svg) 50%/contain no-repeat;
}

.icon-tutorial3::before {
    mask: url(/res/img/component/icon_tutorial3-b6e9448f8036461b0770bb6beaeda0fd.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_tutorial3-b6e9448f8036461b0770bb6beaeda0fd.svg) 50%/contain no-repeat;
}

.icon-tutorial4::before {
    mask: url(/res/img/component/icon_tutorial4-555d6540fddd96eb47cf46212e901322.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_tutorial4-555d6540fddd96eb47cf46212e901322.svg) 50%/contain no-repeat;
}

.icon-tutorial5::before {
    mask: url(/res/img/component/icon_tutorial5-3c53f907594bb708b9b7bb612b30ca37.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_tutorial5-3c53f907594bb708b9b7bb612b30ca37.svg) 50%/contain no-repeat;
}

.icon-tutorial6::before {
    mask: url(/res/img/component/icon_tutorial6-fb1981a9e1c9a6e237dd2c629b367d5f.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_tutorial6-fb1981a9e1c9a6e237dd2c629b367d5f.svg) 50%/contain no-repeat;
}

.icon-tutorial7::before {
    mask: url(/res/img/component/icon_tutorial7-b2dcf5d4539c813df25b33a0b2766ce1.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_tutorial7-b2dcf5d4539c813df25b33a0b2766ce1.svg) 50%/contain no-repeat;
}

.icon-tutorial8::before {
    mask: url(/res/img/component/icon_tutorial8-66ed629cb5c0b074496a19bad82a9cb0.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_tutorial8-66ed629cb5c0b074496a19bad82a9cb0.svg) 50%/contain no-repeat;
}

.icon-tutorial9::before {
    mask: url(/res/img/component/icon_tutorial9-e6409183f78b4867247ad04169161964.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_tutorial9-e6409183f78b4867247ad04169161964.svg) 50%/contain no-repeat;
}

.main-title-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.main-title-area button {
    width: 30px;
    height: 30px;
    text-indent: -9999px;
    transition: .3s;
}

.main-title-area .btn-more {
    position: relative;
    border-radius: 50%;
    margin-top: 0;
    background-color: #f0f3f7;
}

.main-title-area .btn-more:hover {
    background-color: #4535a0;
}

.main-title-area .icon-plus::before {
    width: 10px;
    height: 2px;
}

.main-title-area .icon-plus::after {
    width: 2px;
    height: 10px;
}

.main-title-area .icon-plus:hover::before, .main-title-area .icon-plus:hover::after {
    background-color: #fff;
}

.title-tab {
    display: flex;
    align-items: center;
}

.title-tab li {
    display: inline-block;
    position: relative;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    transition: .3s;
}

.title-tab li:hover {
    color: #222;
}

.title-tab li.active, .title-tab li.active:hover {
    color: #4535a0;
    font-weight: 600;
}

.title-tab li + li {
    margin-left: 20px;
}

.title-tab li + li::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -12px;
    transform: translateY(-50%);
    width: 1px;
    height: 12px;
    background-color: #dfdfdf;
}

.title-tab .btn-more {
    margin-left: 15px;
}

.main-update {
    display: flex;
    gap: 10px;
    margin-bottom: 50px;
}

.main-update > div {
    width: 33.333%;
    border-radius: 10px;
    overflow: hidden;
}

.main-update > div img {
    width: 100%;
    height: auto;
    vertical-align: top;
    transition: .3s;
}

.main-update > div a {
    display: block;
    position: relative;
}

.main-update > div a:hover img {
    transform: scale(1.1);
}

.main-update .disabled {
    background: #f9f9f9;
}

.main-update .disabled img {
    mix-blend-mode: luminosity;
    opacity: .5;
}

.main-update ul{
    width: 100%;
}

.main-update ul li{
    position: relative;
    width: 100%;
    padding: 10px 90px 10px 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    transition: .3s ease;
    cursor: pointer;
}

.main-update ul li::before{
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 3px;
    height: 3px;
    border: 1px solid #0a2e4f;
    transition: .3s ease;
}

.main-update ul li .date {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    color: #8496a7;
    font-size: 14px;
    letter-spacing: 0;
}
.main-pay {
    position: fixed;
    top: calc(50% - 47px);
    left: auto;
    right: calc(91%);
    transform: translateY(-50%);
    width: 150px;
    border-radius: 10px;
    background-color: #6d22a2;
    z-index: 2;
}

.main-pay a {
    display: block;
    width: 100%;
    height: 100%;
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    font-size: 20px;
    line-height: 130%;
    font-weight: bold;
    word-break: keep-all;
}

.main-pay a::before {
    content: "";
    display: block;
    margin: 10px auto;
    width: 100px;
    height: 100px;
    background: url(https://aptgin.com/cdn/res/icon/common/png/img_main_pay.png) 50%/contain no-repeat;
}

.main-pay a::after {
    content: "";
    display: block;
    margin: 10px auto;
    width: 32px;
    height: 32px;
    border-radius: 100%;
    background: #fff url(https://aptgin.com/cdn/res/icon/common/svg/icon_main_arrow.svg) 50%/50% no-repeat;
}


@media (max-width: 1799px) {
    .tutorial-menu {
        flex: none;
        width: calc(20% - 10px);
    }

    .main-pay {
        position: inherit;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: calc(20% - 10px);
        z-index: 0;
    }

    .main-pay a {
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
    }

    .main-pay a::before {
        width: 100%;
        height: 200px;
        margin-top: 0;
    }
}

@media (max-width: 1699px) {
    .main-inner {
        width: 80%;
    }

    .main-row {
        gap: 20px;
    }

    .main-left, .main-right {
        width: calc(50% - 20px);
    }
}

@media (max-width: 1299px) {
    .main-left, .main-right {
        width: 100%;
    }
}

@media (max-width: 1199px) {
    .tutorial-area .main-inner {
        justify-content: flex-start;
    }

    .tutorial-menu {
        width: calc(33.333% - 10px);
    }

    .tutorial-menu > ul > li::after {
        transform: rotate(-45deg);
    }

    .tutorial-menu > ul > li > ul {
        left: 0;
        right: 0;
        top: 40px;
        width: auto;
    }

    .tutorial-menu > ul > li > ul::before {
        top: -2px;
        left: 50%;
        transform: rotate(135deg) translateX(-50%);
    }

    .main-pay {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .main-pay a {
        flex-flow: row nowrap;
        padding: 1em;
    }

    .main-pay a::before {
        width: 150px;
        height: 100px;
        margin: 0;
        margin-right: 1em;
    }

    .main-pay a::after {
        margin: 0;
        margin-left: 1em;
    }
}

@media (max-width: 799px) {
    .tutorial-title h2 {
        font-size: 1.2em;
    }

    .tutorial-title h2 strong {
        font-size: 1.5em;
    }

    .tutorial-menu {
        width: calc(50% - 10px);
    }

    .main-pay {
        width: calc(50% - 10px);
    }

    .main-pay a {
        flex-flow: column wrap;
        padding: 1em;
    }

    .main-pay a::before {
        width: 80px;
        height: 80px;
        margin: 0 auto;
    }

    .main-pay a::after {
        margin-top: 10px;
    }
}

@media (max-width: 599px) {
    .tutorial-title h2 {
        font-size: 1em;
    }

    .tutorial-title h2 strong {
        font-size: 1.2em;
    }
}

@media (max-width: 499px) {
    .tutorial-area {
        background-color: #f2f6fc;
    }

    .tutorial-area::after {
        display: none;
    }

    .tutorial-title {
        height: auto;
        padding: 2em 0;
    }

    .tutorial-menu h3 {
        height: auto;
        padding: 1em 0;
    }

    .tutorial-menu {
        width: 100%;
    }

    .tutorial-menu h3::before {
        display: none;
    }

    .main-pay {
        width: 100%;
    }

    .main-title-area, .main-update {
        flex-flow: column wrap;
    }

    .title-tab {
        margin: 1em 0;
    }

    .main-update > div {
        width: 100%;
    }
}


/*
* headings
*/
li {
    caret-color: transparent;
}

h1 {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #333;
    font-size: 26px;
    line-height: 30px;
    font-weight: 500;
    letter-spacing: -1.2px;
}

h2 {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #333;
    font-size: 24px;
    line-height: 30px;
    font-weight: 500;
    letter-spacing: -1.5px;
}

h3 {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    color: #333;
    font-size: 20px;
    line-height: 28px;
    font-weight: 500;
    letter-spacing: -1.2px;
}

h1.bullet-blue:before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/bullet_triangle_blue_svg.svg
);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 3px;
}

h2.bullet-blue:before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_bullet5.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 3px;
}

h3.bullet-blue:before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/bullet_triangle_blue_svg.svg
);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 3px;
}

h1.bullet-purple:before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/bullet_triangle_purple_svg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 3px;
}

h2.bullet-purple:before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/bullet_triangle_purple_svg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 3px;
}

h3.bullet-purple:before {
    content: '';
    width: 18px;
    height: 18px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/bullet_triangle_purple_svg.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 3px;
}

/*
* title-area
*/
.title-area {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-top: 1px solid #bec7e0;
}

.title-area.bold {
    border-top: 2px solid #606060;
}

.title-area > * {
    position: relative;
    margin-right: 10px;
}

.title-area > *:last-child {
    margin-right: 0;
}

.title-area:after {
    display: block;
    content: '';
    clear: both;
}

.title-area.bold > h2 {
    margin-top: 14px;
}

.title-area > h3 {
    margin-top: 14px;
}

.text-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* comparer */
.comparer {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 55px;
    border-top: 1px solid #d9e0f7;
    border-bottom: 1px solid #d9e0f7;
    margin-bottom: 10px;
    padding: 8px;
}

.comparer.heroes {
    border-bottom: 0;
    border-radius: 0;
    margin-bottom: 0;
    padding-left: 155px;
    padding-right: 100px;
}

.comparer.heroes .left-area {
    position: absolute;
    top: 10px;
    left: 0;
    display: flex;
}

.comparer.heroes > .right {
    position: absolute;
    top: 18px;
    right: 0;
}

.comparer.both-pad {
    position: relative;
    padding-left: 155px;
    /*     padding-right: 230px; */
    margin-bottom: 50px;
    /*     height: 90px; */
    /*     align-items: baseline; */
    /*     overflow-y: hidden; */
}

.comparer.bottom-pad {
    padding-left: 155px;
    padding-right: 230px;
}

.comparer.left-pad {
    position: relative;
    padding-left: 220px;
    padding-right: 110px;
}

.comparer.left-pad.btns {
    padding-left: 160px;
    padding-right: 350px;
}

.comparer.left-pad.no-btns {
    padding-left: 155px;
    padding-right: 115px;
}

.comparer.left-pad-up {
    position: relative;
    padding-left: 220px;
    padding-right: 110px;
    border-bottom: none;
    margin-bottom: 0;
    margin-top: 10px;
}

.comparer.full-left-pad {
    position: relative;
    padding-left: 180px;
    padding-right: 110px;
    z-index: 1;
    background: white;
}

.comparer.full-left-pad > .left-area {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
}

.comparer.both-pad .btn-arrow {
    position: absolute;
    bottom: -31px;
    left: 50%;
    transform: translateX(-50%);
    width: 300px;
    height: 30px;
    border: solid 1px #d9e0f7;
    border-top: 0;
    border-radius: 0;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background-color: #f0f3f7;
    transition: .3s;
}

.comparer.both-pad .btn-arrow:hover {
    color: #fff;
    border-color: #9086ee;
    background-color: #9086ee;
}

.comparer.both-pad .btn-arrow:hover::after {
    background-color: #fff;
}

.comparer .btn-arrow::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: #333;
    vertical-align: 3px;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
}

.comparer .btn-arrow.open::after {
    -webkit-animation: arrow_open 1s infinite;
    animation: arrow_open 1s infinite;
}

.comparer .btn-arrow.close::after {
    -webkit-animation: arrow_close 1s infinite;
    animation: arrow_close 1s infinite;
    vertical-align: 4px;
}

.comparer .btn-arrow:hover::after {
    -webkit-animation: none;
    animation: none;
}

.comparer .btn-arrow.close:hover::after {
    transform: rotate(180deg);
}

.comparer .btn-arrow .btn-arrow-count {
    display: inline-block;
    line-height: 18px;
    color: #333;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    padding: 0 6px;
    vertical-align: 5px;
    transition: .1s;
}

.comparer .btn-arrow .btn-arrow-count span {
    color: #8934fa;
    font-size: 14px;
}

.comparer .btn-arrow .btn-arrow-count span#count-type {
    color: #000;
    font-size: 12px;
}

.comparer .btn-arrow:hover .btn-arrow-count, .comparer .btn-arrow:hover .btn-arrow-count span {
    color: inherit;
}

.comparer[class*=left-pad] > .right {
    position: absolute;
    top: 18px;
    right: 0;
}

.comparer[class*=left-pad] > .right.top {
    top: 10px;
}

.comparer[class*=left-pad] .btn-arrow {
    border-radius: 0;
    padding: 0 12px;
}

.comparer[class*=left-pad] .btn-arrow:hover {
    color: #333;
}

.comparer[class*=left-pad] .btn-arrow:hover .btn-arrow-count span {
    color: #8934fa;
}

.comparer[class*=left-pad] .btn-arrow-count {
    margin-right: 5px;
}

.comparer[class*=left-pad] fieldset {
    left: 5px;
    bottom: -132px;
}

.popup-content .ac_je_flex_nw.legend-bar .legend-text {
    font-family: NotoSansM;
    font-weight: bold;
    width: 120px;
}

.level01::after {
    content: "부족";
    border-color: #729bc8;
    background-color: #83abd6;
}

.level02::after {
    content: "적정";
    border-color: #51bc94;
    background-color: #5fcea4;
}

.level03::after {
    content: "초과";
    border-color: #e0aa42;
    background-color: #ecb751;
}

.level04::after {
    content: "과잉";
    border-color: #e25d5a;
    background-color: #ed6c69;
}

[class^=volume_level]::after {
    display: inline-block;
    width: 50px;
    height: 16px;
    margin-left: 5px;
    border-width: 1px;
    border-style: solid;
    padding-top: 1px;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
}

.volume_level01::after {
    content: "매우작음";
    border-color: #729bc8;
    background-color: #80abd7;
}

.volume_level02::after {
    content: "작음";
    border-color: #51bc94;
    background-color: #5fcea4;
}

.volume_level03::after {
    content: "보통";
    border-color: #e0aa42;
    background-color: #ecb751;
}

.volume_level04::after {
    content: "많음";
    border-color: #e25d5a;
    background-color: #e68035;
}

.volume_level05::after {
    content: "매우많음";
    border-color: #e25d5a;
    background-color: #ed6c69;
}

.popup-content .ac_je_flex_nw.legend-bar li span::after {
    margin-left: 0;
    margin-right: 5px;
    font-size: 12px;
}

.popup-content .ac_je_flex_nw.legend-bar li {
    font-size: 12px;
}

@keyframes arrow_open {
    0% {
        transform: translate(0, -3px);
        opacity: .3;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: translate(0, 1px);
        opacity: 0;
    }
}

@keyframes arrow_close {
    0% {
        transform: rotate(180deg) translate(0, -2px);
        opacity: .3;
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: rotate(180deg) translate(0, 1px);
        opacity: 0;
    }
}

.comparer > .right > .btn-purple.twins {
    margin-left: 0;
}

/* .comparer > .right > .btn-purple:before {
    position: absolute;
    top: 5px;
    left: 0;
    display: block;
    content: '';
    width: 1px;
    height: 28px;
    background: #4d2b8b;
} */
.comparer > .right > .btn-comparer-save {
    position: relative;
    width: 48px;
    height: 38px;
    border-radius: 19px;
    background: #673ab7;
    outline: none;
    margin-left: 10px;
}

.comparer > .right > .btn-comparer-save.with-text {
    min-width: 130px;
    height: 38px;
    line-height: 38px;
    color: white;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    padding-left: 30px;
}

.comparer > .right > .btn-comparer-save.twins {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.comparer > .right > .btn-comparer-save > .icon-save {
    position: absolute;
    top: 8px;
    left: 16px;
    display: block;
    width: 24px;
    height: 24px;
    content: '';
    background: url(/res/img/component/icon_usb_white-8336bd0001c7739554db67af572c288c.svg);
}

.comparer > .right > .btn-comparer-save > .icon-region-group {
    position: absolute;
    top: 8px;
    right: 9px;
    display: block;
    width: 24px;
    height: 24px;
    content: '';
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_fav_lawd_multi.svg);
}

.comparer > .right > .btn-comparer-save > .icon-apt-group {
    position: absolute;
    top: 7px;
    right: 9px;
    display: block;
    width: 24px;
    height: 24px;
    content: '';
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_fav_apt_multi.svg);
}

.comparer.sticky {
    position: sticky;
    top: 0;
    min-height: 46px;
    padding-top: 0;
    padding-bottom: 0;
    border-radius: 0;
    z-index: 20;
}

.comparer > h3 {
    font-size: 16px;
    margin-right: 20px;
}

.comparer > h3 > .star-on,
.comparer > h3 > .star-off {
    display: block;
    margin-left: 6px;
}

.comparer > .right > fieldset {
    position: absolute;
    right: 0;
    bottom: -142px;
    display: none;
    min-width: 220px;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #2e2e2e;
    z-index: 5;
}

.comparer > .right > fieldset:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #2e2e2e;
    top: -10px;
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
}

.comparer > .right > fieldset:after {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    top: -9px;
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
}


/* > .right */
.comparer .right,
article .right {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
}

article .modal-description .right {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    margin-left: auto;
    bottom: 6px;
}

article .right.bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    margin-right: 0;
    z-index: 1;
}

article .right.top {
    position: absolute;
    right: 0;
    top: 10px;
}

article .left-area {
    position: absolute;
    top: 10px;
    left: 0;
    display: flex;
}

article .left-area .search-title {
    width: 130px;
    padding-top: 3px;
}

article .left-area .search-title h3 {
    font-size: 18px;
}

@media only all and (min-width: 699px) {
    .title-area > .right {
        position: absolute;
        bottom: 0;
        right: 0;
        margin-right: 0;
        z-index: 1;
    }
}

@media only all and (max-width: 698px) {
    .title-area > .right {
        position: relative;
        bottom: 0;
        right: 0;
        margin-right: 0;
        z-index: 1;
    }
}

/* > .info */
.title-area .info,
.modal-description .info,
.above-area .info {
    position: relative;
    font-size: 14px;
    line-height: 22px;
    color: #7080ad;
    font-weight: 400;
    letter-spacing: -0.5px;
    margin-right: 17px;
}

.title-area .info:first-child {
    margin-left: 20px;
}

.title-area .info:last-child,
.above-area .info:last-child {
    margin-right: 0;
}

.title-area .info:after {
    position: absolute;
    top: 5px;
    right: -9px;
    content: '';
    display: inline-block;
    width: 1px;
    height: 12px;
    background-color: #cbd2e2;
}

.title-area .info:last-child:after,
.above-area .info:last-child:after {
    display: none;
}

.above-area .info > strong {
    margin-left: 6px;
}

.above-area .sub-filter {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.above-area .alert.red {
    height: 36px;
    margin: 0;
    padding: 6px 10px;
}

.above-area .alert.red + * {
    margin-left: 10px;
}

/*
* icon / text
*/
.purple-text {
    color: #8934fa;
}
.rate-sts-div {
    margin: 2px;
}
.rate-sts {
    cursor: pointer;
    text-decoration: underline;
    font-weight: 800;
}
.icon-up-modal {
    display: inline-block;
    width: 16px;
    height: 16px;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_up_small.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_up_small.svg) 50%/contain no-repeat;
    background-color: #FA5869;
    vertical-align: middle;
    cursor: pointer;
    margin: 5px;
}
.icon-down-modal {
    display: inline-block;
    width: 16px;
    height: 16px;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_down_small.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_down_small.svg) 50%/contain no-repeat;
    background-color: #4D79F6;
    vertical-align: middle;
    cursor: pointer;
    margin: 5px;
}
.icon-equal-modal {
    display: inline-block;
    width: 16px;
    height: 16px;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_equal_small.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_equal_small.svg) 50%/contain no-repeat;
    background-color: #555555;
    vertical-align: middle;
    cursor: pointer;
    margin: 5px;
}
.icon-chart {
    display: inline-block;
    width: 16px;
    height: 16px;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    background-color: #8934FA;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 5px;
}

.icon-link {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_blue.svg);
    background-size: 16px;
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    cursor: pointer;
}

.icon-chart.white {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    background-color: #FFF;
}

.title-area .icon-chart {
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new.svg);
    width: 22px;
    height: 22px;
}

.icon-pin-purple {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg);
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 5px;
}

.icon-pin-blue {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_17x17_blue.svg);
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 5px;
}

.icon-pin-green {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_17x17_green.svg);
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 5px;
}

.icon-radius {
    display: inline-block;
    width: 17px;
    height: 17px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_17x17_green.svg);
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 5px;
}

.icon-add {
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url(/res/img/component/icon_add-bbc8ecdc37691527dcd8a4edfbdfe684.svg);
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 5px;
}

.icon-up {
    display: inline-block;
    width: 11px;
    height: 11px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_up_small.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-left: 3px;
    margin-right: 3px;
}

.k-grid .icon-up {
    transform: translateY(4px);
}

.icon-down {
    display: inline-block;
    width: 11px;
    height: 11px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_down_small.svg);
    background-position: center;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-left: 3px;
    margin-right: 3px;
}

.k-grid .icon-down {
    transform: translateY(4px);
}
.icon-quastion {
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url(/res/img/component/icon_quastion_line-f7eaaa0253a9fe246f903cf77f5a3126.svg);
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 3px;
}

.caption {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 36px;
    line-height: 36px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    overflow: hidden;
    padding: 0 15px;
    background-color: rgba(94, 53, 177, .9);
    border-radius: 18px;
}

.caption.modal-link {
    background: linear-gradient(45deg, #99bade, #99bade);
    background-size: 300%;
    cursor: pointer;
    transition: .5s;
}

.caption.modal-link:hover {
    background: linear-gradient(45deg, #99bade, #491aa7);
    background-position: right;
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
    bottom: 32px;
}

.caption.modal-link:after {
    display: block;
    content: '';
    width: 12px;
    height: 12px;
    background-image: url(/res/img/component/icon_modal_link_white-ab7b92b2450c0b45ecdafdff0db87464.svg);
    margin-left: 5px;
}

.caption.purple {
    background: #6a4bc4;
    background: radial-gradient(circle farthest-corner at 100% 150%, #d75dbc 10%, #6a4bc4 50%);
    box-shadow: 0px 9px 30px 0px rgba(102, 75, 196, 0.4);
}

.caption.purple {
    box-shadow: none !important;
}

/* 즐겨찾기 icon */
.star-on {
    display: inline-block;
    width: 22px;
    height: 20px;
    background: url(/res/img/common/star_on-6f9cc623b3f91d514bcaf728300dc431.png) no-repeat center center;
    cursor: pointer;
}

.star-off {
    display: inline-block;
    width: 22px;
    height: 20px;
    background: url(/res/img/common/star-7cd60fa8eb0a3bb6735eefd471361a9d.png) no-repeat center center;
    cursor: pointer;
}

.star-on.left-star, .star-off.left-star {
    width: 15px;
}

/*
* input-field
*/
.input-field {
    position: relative;
    border-bottom: 2px solid #adadad;
    position: relative;
    margin-top: 20px;
}

.input-field input {
    width: 100%;
    height: 40px;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    border: none;
    outline: none;
    background: none;
    padding: 0 5px;
}

.input-field span:before {
    content: attr(data-placeholder);
    position: absolute;
    top: 50%;
    left: 3px;
    color: #adadad;
    transform: translateY(-50%);
    z-index: -1;
    transition: .3s;
}

.input-field .focus + span:before, .input-field input:focus + span:before {
    top: -10px;
    color: #5e35b1;
    font-size: 14px;
    font-weight: 500;
}

.input-field span:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0%;
    height: 2px;
    background: linear-gradient(120deg, #4436a0, #7c3df1);
    transition: .5s;
}

.input-field .focus + span:after {
    width: 100%;
}


/*
* tooltip
*/
[data-tooltip] {
    position: relative;
}

[data-tooltip]:after,
[data-tooltip]:before {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: all 200ms ease;
    transition-delay: 100ms;
    z-index: 99;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    color: #fff;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-indent: 0px;
    padding: 6px 12px;
    border-radius: 5px;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: -0.2px;
    background-color: rgba(0, 0, 0, 0.8);
}

[data-tooltip]:after {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    content: '';
}

[data-tooltip]:hover:after,
[data-tooltip]:hover:before {
    visibility: visible;
    opacity: 1;
}

[data-tooltip][data-position="top"]:before {
    bottom: calc(100% - 6px);
    left: 50%;
    margin-bottom: 10px;
    transform: translateX(-50%);
}

[data-tooltip][data-position="top"]:after {
    bottom: calc(100% - 6px);
    border-top-color: rgba(0, 0, 0, 0.8);
    border-bottom: none;
    left: calc(50% - 6px);
    margin-bottom: 4px;
}

[data-tooltip][data-position="top"]:hover:before,
[data-tooltip][data-position="top"]:hover:after {
    bottom: 100%;
}

[data-tooltip][data-position="right"]:before {
    left: calc(100% - 6px);
    top: 50%;
    margin-left: 10px;
    transform: translateY(-50%);
}

[data-tooltip][data-position="right"]:after {
    left: calc(100% - 6px);
    border-right-color: rgba(0, 0, 0, 0.8);
    border-left: none;
    top: calc(50% - 6px);
    margin-left: 4px;
}

[data-tooltip][data-position="right"]:hover:before,
[data-tooltip][data-position="right"]:hover:after {
    left: 100%;
}

[data-tooltip][data-position="bottom"]:before {
    top: calc(100% - 6px);
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
}

[data-tooltip][data-position="bottom"]:after {
    top: calc(100% - 6px);
    border-bottom-color: rgba(0, 0, 0, 0.8);
    border-top: none;
    left: calc(50% - 6px);
    margin-top: 4px;
}

[data-tooltip][data-position="bottom"]:hover:before,
[data-tooltip][data-position="bottom"]:hover:after {
    top: 100%;
}

[data-tooltip][data-position="left"]:before {
    right: calc(100% - 6px);
    top: 50%;
    transform: translateY(-50%);
    margin-right: 10px;
}

[data-tooltip][data-position="left"]:after {
    right: calc(100% - 6px);
    border-left-color: rgba(0, 0, 0, 0.8);
    border-right: none;
    top: calc(50% - 6px);
    margin-right: 4px;
}

[data-tooltip][data-position="left"]:hover:before,
[data-tooltip][data-position="left"]:hover:after {
    right: 100%;
}


/*
* pulse-btn
*/
.pulse-btn {
    position: relative;
    display: block;
    transition: background .3s ease-in-out;
    -webkit-transition: background .3s ease-in-out;
    will-change: background;
    overflow: hidden;
    cursor: pointer;
    outline: none;
}

.click {
    border-radius: 50%;
    position: absolute;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 0;
}

.click.pulse {
    animation: pulse .6s ease-out;
}

@keyframes pulse {
    0% {
        background: rgba(255, 255, 255, 0.3);
        height: 30px;
        width: 20px;
    }
    100% {
        background: rgba(255, 255, 255, 0);
        height: 300px;
        width: 300px;
    }
}


/*
* btn-set
*/
.btn-set {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.btn-set .icon-reset {
    position: relative;
    display: block;
    width: 46px;
    height: 46px;
    background-color: #fff;
    border-top: 1px solid #dadce0;
    border-bottom: 1px solid #dadce0;
    border-left: 1px solid #dadce0;
}

.btn-set .icon-reset:hover {
    background-color: #f7f7f7;
}

.wrapper.fixed .btn-set .icon-reset {
    height: 45px;
    border-top: 0;
    border-bottom: 0;
}

.btn-set .icon-search {
    outline: none;
    position: relative;
    display: block;
    width: 46px;
    height: 46px;
    display: block;
    background-image: url(/res/img/component/icon_search-c0895c78def83afd19c3572f293e5c2e.svg);
    background-size: 18px 18px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
    border-top: 1px solid #dadce0;
    border-bottom: 1px solid #dadce0;
    border-left: 1px solid #dadce0;
}

.btn-set .icon-search:hover {
    background-color: #f7f7f7;
}

.wrapper.fixed .btn-set .icon-search {
    height: 45px;
}

.btn-set .icon-save {
    outline: none;
    position: relative;
    display: block;
    width: 46px;
    height: 46px;
    display: block;
    background-image: url(/res/img/component/icon-save-1af5c753718c2d8793720a8aea24da73.svg);
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: #fff;
    border-top: 1px solid #dadce0;
    border-bottom: 1px solid #dadce0;
    border-left: 1px solid #dadce0;
}

.btn-set .icon-save:hover {
    background-color: #f7f7f7;
}

.btn-set .icon-save.active {
    background-color: #ff4081;
    border-color: #ff4081;
}

.wrapper.fixed .btn-set .icon-save {
    height: 45px;
}


/*
* btn-pink
*/
.btn-pink {
    display: block;
    min-width: 100px;
    height: 40px;
    font-size: 15px;
    font-weight: 500;
    border: none;
    background: #712cce;
    background-size: 200%;
    color: #fff;
    text-align: center;
    outline: none;
    cursor: pointer;
    transition: .5s;
    border-radius: 4px;
}

.btn-pink:hover {
    background-position: right;
}
/*
* btn-hot-pink
*/
.btn-hot-pink {
    font-size: 15px;
    font-weight: 500;
    border: none;
    background: #dd6dcf;
    background-size: 200%;
    color: #fff;
    text-align: center;
    outline: none;
    cursor: pointer;
    transition: .5s;
    line-height: 10px;
    border-radius: 4px;
    padding: 10px;
}

.btn-hot-pink:hover {
    background-position: right;
}
/*
* button.delete
*/
button.delete {
    display: inline-block;
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(/res/img/component/icon_delete-11f0bbb57aab618c33ad6c0a39e78efc.svg);
    background-size: 8px;
    background-position: 50%;
    background-repeat: no-repeat;
    border-radius: 10px;
    outline: none;
    margin-left: 3px;
    transition-duration: 300ms;
    text-indent: -5000rem;
}

/*
* btn-add-item
*/
.btn-add-item {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    border-radius: 17px;
    border: 1px solid #dadce0;
    text-indent: -5000rem;
    box-sizing: border-box;
    transition: border .2s ease-in-out;
    outline: none;
}

.btn-add-item:hover {
    border: 2px solid #8934fa;
}

.btn-add-item > span {
    display: block;
    width: 30px;
    height: 30px;
}

.btn-add-item > span:before,
.btn-add-item > span:after {
    content: "";
    display: block;
    background-color: #9e9e9e;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 1px;
}

.btn-add-item > span:before {
    width: 12px;
    height: 2px;
}

.btn-add-item > span:after {
    width: 2px;
    height: 12px;
}

.btn-add-item > span:hover:before,
.btn-add-item > span:hover:after {
    background-color: #8934fa;
}


/*
* btn-group
*/
.btn-group {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.btn-group button {
    min-width: 50px;
    font-size: 14px;
    color: #333;
    font-weight: 400;
    line-height: 22px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #f4f6f9;
    border: 2px solid #f4f6f9;
    border-radius: 16px;
    outline: none;
    margin-right: 2px;
    transition-duration: 300ms;
}

.btn-group button:first-child {
    margin-left: 0;
}

.btn-group button:last-child {
    margin-right: 0;
}

.btn-group button:hover {
    color: #712cce;
    font-weight: 500;
    background-color: #fff;
    border: 2px solid #712cce;
}

.btn-group button.active,
.btn-group button.active:hover {
    color: #fff;
    font-weight: 400;
    background-color: #712cce;
    border: 2px solid #712cce;
}

@media only all and (max-width: 699px) {
    .btn-group button {
        min-width: 46px;
    }
}

.btn-group-extent {
    position: absolute;
    top: 18px;
    left: 45px;
}

.btn-group-extent button {
    min-width: 50px;
    font-size: 14px;
    color: #333;
    font-weight: 400;
    line-height: 22px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #f4f6f9;
    border: 2px solid #f4f6f9;
    border-radius: 16px;
    outline: none;
    margin-right: 2px;
    transition-duration: 300ms;
}

.btn-group-extent button:hover {
    color: #712cce;
    font-weight: 500;
    background-color: #fff;
    border: 2px solid #712cce;
}

.btn-group-extent button.active,
.btn-group-extent button.active:hover {
    color: #fff;
    font-weight: 400;
    background-color: #712cce;
    border: 2px solid #712cce;
}

.btn-group-extent button:first-child {
    margin-left: 18px !important;
    margin-bottom: 5px;
}

.btn-group-extent button:last-child {
    margin-bottom: 5px;
}

/*
* btn-purple
*/
.btn-purple {
    height: 38px;
    line-height: 38px;
    color: white;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    overflow: hidden;
    padding: 0 16px;
    border-radius: 19px;
    background: #673ab7;
    background-position: right;
    background-size: 200%;
    margin-left: 10px;
    transition: .3s;
    outline: none;
    cursor: pointer;
}

/*
* btn-report
*/
.btn-report {
    position: relative;
    height: 36px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    letter-spacing: -0.6px;
    background: #CC492E;
    border-radius: 4px;
    outline: none;
    padding-left: 38px;
    padding-right: 10px;
}


.btn-report:before {
    position: absolute;
    top: 7px;
    left: 7px;
    display: block;
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(/res/img/component/icon-ppt-d26d4d741d7bdf811ab21bff534285c0.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.btn-report:after {
    position: absolute;
    top: 10px;
    left: 30px;
    display: block;
    width: 1px;
    height: 16px;
    content: '';
    background-color: #fff;
    opacity: .3;
}

.btn-report:hover {
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}

/*
* btn-excel
*/
.btn-excel {
    position: relative;
    height: 36px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    letter-spacing: -0.6px;
    background: #19754C;
    /* overflow: hidden; */
    border-radius: 4px;
    outline: none;
    padding-left: 38px;
    padding-right: 10px;
}

.btn-excel:before {
    position: absolute;
    top: 7px;
    left: 7px;
    display: block;
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(/res/img/component/icon-excel-b6292be94d0b95d57f876e33b23d1147.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.btn-excel:after {
    position: absolute;
    top: 10px;
    left: 30px;
    display: block;
    width: 1px;
    height: 16px;
    content: '';
    background-color: #fff;
    opacity: .3;
}

.btn-excel:hover {
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}

/* btn-naver */
.btn-naver {
    position: relative;
    min-width: 60px;
    color: #fff;
    font-size: 14px;
    padding-left: 26px;
    padding-right: 12px;
    font-weight: 500;
    line-height: 27px;
    background-color: #17c920;
    border: 0 none;
    letter-spacing: -0.5px;
    border-radius: 5px;
    margin: 0 3px;
    transition: all 0.3s ease;
    outline: none;
}

.btn-naver:before {
    position: absolute;
    display: block;
    content: '';
    top: 8px;
    left: 10px;
    width: 12px;
    height: 12px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_naver.svg) no-repeat 0 center;
    margin-right: 5px;
}

.btn-naver:hover {
    background: #00ab09;
}

/* btn-blue */
.btn-blue {
    position: relative;
    min-width: 60px;
    color: #fff;
    font-size: 14px;
    padding-left: 12px;
    padding-right: 12px;
    font-weight: 500;
    line-height: 27px;
    background-color: #819cdb;
    border: 0 none;
    letter-spacing: -0.5px;
    border-radius: 5px;
    margin: 0 3px;
    transition: all 0.3s ease;
    outline: none;
}

.btn-blue:hover {
    background-color: #3f51b5;
}


/*
* select
*/
/* reset select */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    outline: 0;
    border: 0 !important;
    box-shadow: none;
    background: transparent;
    background-image: none;
}

/* remove IE arrow */
select::-ms-expand {
    display: none;
}

/* custom */
.select {
    position: relative;
    display: flex;
    min-width: 100px;
    height: 36px;
    line-height: 3;
    background: #fff;
    overflow: hidden;
    border: 1px solid #dadce0;
    border-radius: 18px;
}

select {
    flex: 1;
    font-family: "Noto Sans KR";
    color: #333;
    font-size: 14px;
    letter-spacing: -1px;
    padding: 0 40px 0 15px;
    border-radius: 18px;
    cursor: pointer;
}

.select:after {
    content: '';
    position: absolute;
    top: 50%;
    right: 15px;
    width: 10px;
    height: 6px;
    transform: translateY(-50%);
    background-image: url(/res/img/component/icon_select_down_gray-a556acc2698807c36207624f1fc39a3a.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    cursor: pointer;
    pointer-events: none;
    -webkit-transition: .25s all ease;
    -o-transition: .25s all ease;
    transition: .25s all ease;
}

.select:hover {
    background: #f7f7f7;
}


/*
* checking-set / selecting-set
*/
.checking-set,
.selecting-set {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-wrap: wrap;
}

.selecting-set input[type="text"] {
    width: 200px;
    height: 38px;
    font-size: 15px;
    line-height: 18px;
    color: #585858;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    margin-left: 6px;
}

.checking,
.selecting {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    height: auto; /* 34px */
    margin-top: 5px;
    margin-bottom: 5px;
    cursor: pointer;
    color: #444;
    font-size: 15px;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: -0.5px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.checking input[type=checkbox],
.selecting input[type=radio] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checking .checkmark {
    position: relative;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border: 2px solid #ccd2eb;
    border-radius: 4px;
    margin-right: 5px;
    transition-duration: 300ms;
}

.checking.input > div {
    width: 100%;
    margin-top: 5px;
    box-sizing: border-box;
}

.checking.input > div * {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
}

.checking.input > div sub {
    width: 15px;
    text-align: center;
    line-height: 38px;
}

.checking.input input[type=text], .checking.input input[type=number] {
    width: calc(50% - 8px);
    height: 38px;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    font-size: 15px;
    text-indent: 0;
    background: #fff;
}

.checking:hover input ~ .checkmark {
    border-color: #8934fa;
}

.checking input:checked ~ .checkmark {
    background-color: #8934fa;
    border: 2px solid #712cce;
}

.checking input:checked ~ .checkmark.pink {
    background-color: #ff74a6;
    border: 2px solid #ff74a6;
}

.checking input:checked ~ .checkmark.yellow {
    background-color: #ffb404;
    border: 2px solid #ffb404;
}

.checking input:checked ~ .checkmark.capri {
    background-color: #349eb4;
    border: 2px solid #349eb4;
}

.checking input:checked ~ .checkmark.sky {
    background-color: #3caee3;
    border: 2px solid #3caee3;
}

.checking input:checked ~ .checkmark.amber {
    background-color: #ff7045;
    border: 2px solid #ff7045;
}

.checking input:checked ~ .checkmark.indigo {
    background-color: #4550c0;
    border: 2px solid #4550c0;
}

.checking input:checked ~ .checkmark.orange {
    background-color: #ff8f00;
    border: 2px solid #ff8f00;
}

.checking input:checked ~ .checkmark.blue {
    background-color: #4d79f6;
    border: 2px solid #4d79f6;
}

.checking input:checked ~ .checkmark.light {
    background-color: #4ea5ff;
    border: 2px solid #4ea5ff;
}

.checking input:checked ~ .checkmark.dark {
    background-color: #1c5b87;
    border: 2px solid #1c5b87;
}

.checking input:checked ~ .checkmark.teal {
    background-color: #009688;
    border: 2px solid #009688;
}

.checking input:checked ~ .checkmark.green {
    background-color: #4cbf00;
    border: 2px solid #4cbf00;
}

.checking input:checked ~ .checkmark.cyan {
    background-color: #2bccad;
    border: 2px solid #2bccad;
}

.checking input:checked ~ .checkmark.salmon {
    background-color: #f69e94;
    border: 2px solid #f69e94;
}

.checking input:checked ~ .checkmark.hot {
    background-color: #ff0080;
    border: 2px solid #ff0080;
}

.checking input:checked ~ .checkmark.gray {
    background-color: #596082;
    border: 2px solid #596082;
}

.checking .checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

.checking input:checked ~ .checkmark:after {
    display: block;
}

.checking .checkmark:after {
    left: 5px;
    top: 2px;
    width: 5px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}

.selecting .radiomark {
    position: relative;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    border: 2px solid #ccd2eb;
    background-color: #fff;
    margin-right: 5px;
    transition-duration: 300ms;
}

.selecting.input > div {
    width: calc(100% - 25px);
    margin-top: 5px;
    margin-left: 25px;
    box-sizing: border-box;
}

.selecting.input > div * {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
}

.selecting.input > div sub {
    width: 15px;
    text-align: center;
    line-height: 38px;
}

.selecting.input input[type=text] {
    width: calc(50% - 15px);
    height: 38px;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    font-size: 15px;
    text-indent: 0;
    background: #fff;
}

.selecting:hover input ~ .radiomark {
    border-color: #8934fa;
}

.selecting input:checked ~ .radiomark {
    background-color: #fff;
    border: 2px solid #8934fa;
}

.selecting .radiomark:after {
    content: "";
    position: absolute;
    display: none;
}

.selecting input:checked ~ .radiomark:after {
    display: block;
}

.selecting .radiomark:after {
    left: 3px;
    top: 3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #8934fa;
}

.selecting input:disabled ~ .radiomark {
    background-color: #c0c0c0;
    border: 2px solid #c0c0c0;
}

.selecting input:disabled ~ span {
    opacity: 0.5;
}

@media only all and (max-width: 1199px) {

    .checking-set,
    .selecting-set {
        flex-direction: row;
    }

    .checking-set > .checking,
    .selecting-set > .selecting:not(.auth) {
        width: 55.333333%;
    }

    .map-filter-set .checking-set > .checking, .map-filter-set .selecting-set > .selecting {
        width: auto;
    }
}

@media only all and (max-width: 699px) {
    .checking-set > .checking,
    .selecting-set > .selecting:not(.auth) {
        width: 100%;
    }

}


/*
* switch
*/
.switch {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    height: 38px;
    color: #444;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.5px;
    padding-left: 43px;
    padding-right: 10px;
    cursor: pointer;
}

.switch input {
    display: none;
}

.switch .slider {
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
    width: 34px;
    height: 14px;
    background-color: #e4e6e9;
    transition: .15s;
    margin-left: 1px;
    margin-right: 7px;
    border-radius: 10px;
    cursor: pointer;
}

.switch .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    top: -3px;
    left: -1px;
    background-color: #fff;
    border-radius: 50%;
    transition: .15s;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.switch input:checked + .slider {
    background-color: #d0c2ff;
}
.switch input:checked + .slider:before {
    transform: translateX(16px);
    background-color: #8934fa;
}
.switch input:checked + .slider.cancel {
    background-color: #e4e6e9;
}
.switch input:checked + .slider.cancel:before {
    background-color: #e4e6e9;
}
.switch input:checked + .slider.pink {
    background-color: #ffc6db;
}

.switch input:checked + .slider.pink:before {
    background-color: #ff5c97;
}

.switch input:checked + .slider.capri {
    background-color: #aee2ec;
}

.switch input:checked + .slider.capri:before {
    background-color: #349eb4;
}

.switch input:checked + .slider.amber {
    background-color: #ffd4c7;
}

.switch input:checked + .slider.amber:before {
    background-color: #ff7045;
}

.switch input:checked + .slider.green {
    background-color: #dcedc8;
}

.switch input:checked + .slider.green:before {
    background-color: #8bc34a;
}

.switch input:checked + .slider.blue {
    background-color: #dbe4fd;
}

.switch input:checked + .slider.blue:before {
    background-color: #4d79f6;
}

.switch input:checked + .slider.yellow {
    background-color: #ffe7c3;
}

.switch input:checked + .slider.yellow:before {
    background-color: #ffab2f;
}

.switch input:checked + .slider.AliceBlue {
    background: #e3eff9;
}

.switch input:checked + .slider.AliceBlue:before {
    background: #6296c5;
}

.switch input:checked + .slider.FloralWhite {
    background: #efbd5b59;
}

.switch input:checked + .slider.FloralWhite:before {
    background: #efbd5b;
}

.switch input:checked + .slider.LavenderBlush {
    background: #c95f8259;
}

.switch input:checked + .slider.LavenderBlush:before {
    background: #c95f82;
}

.switch input:checked + .slider.OldLace {
    background: #d3ab6159;
}

.switch input:checked + .slider.OldLace:before {
    background: #d3ab61;
}

.switch input:checked + .slider.PowderBlue {
    background: #B0E0E670;
}

.switch input:checked + .slider.PowderBlue:before {
    background: #62bdc9;
}

.switch input:checked + .slider.Snow {
    background: #e5a0a059;
}

.switch input:checked + .slider.Snow:before {
    background: #e5a0a0;
}

.switch input:checked + .slider.GhostWhite {
    background: #a1a1d959;
}

.switch input:checked + .slider.GhostWhite:before {
    background: #a1a1d9;
}

.switch input:checked + .slider.Lavender {
    background: #7d7ded59;
}

.switch input:checked + .slider.Lavender:before {
    background: #7d7ded;
}

.switch input:checked + .slider.Thistle {
    background: #D8BFD899;
}

.switch input:checked + .slider.Thistle:before {
    background: #a360a3;
}

.switch input:checked + .slider.Indigo {
    background: #4b008259 ;
}

.switch input:checked + .slider.Indigo:before {
    background: #9a50b1;
}

.switch input:checked + .slider.Crimson {
    background-color: #DC143C59;
}

.switch input:checked + .slider.Crimson:before {
    background-color: #DC143C;
}

.switch input:checked + .slider.Teal {
    background-color: #00808059;
}

.switch input:checked + .slider.Teal:before {
    background-color: #008080;
}

.switch input:checked + .slider.Cyan {
    background-color: #00FFFF59;
}

.switch input:checked + .slider.Cyan:before {
    background-color: #00FFFF;
}

.switch input:checked + .slider.Magenta {
    background-color: #FF00FF59;
}

.switch input:checked + .slider.Magenta:before {
    background-color: #FF00FF;
}

.switch input:checked + .slider.Goldenrod {
    background-color: #DAA52059;
}

.switch input:checked + .slider.Goldenrod:before {
    background-color: #DAA520;
}

.switch input:checked + .slider.Chartreuse {
    background-color: #7FFF0059;
}

.switch input:checked + .slider.Chartreuse:before {
    background-color: #7FFF00;
}

.switch input:checked + .slider.Periwinkle {
    background-color: #CCCCFF59;
}

.switch input:checked + .slider.Periwinkle:before {
    background-color: #CCCCFF;
}

.switch input:checked + .slider.Salmon {
    background-color: #FA807259;
}

.switch input:checked + .slider.Salmon:before {
    background-color: #FA8072;
}

.switch input:checked + .slider.Coral {
    background-color: #FF7F5059;
}

.switch input:checked + .slider.Coral:before {
    background-color: #FF7F50;
}

.switch input:checked + .slider.MintCream {
    background-color: #F5FFFA59;
}

.switch input:checked + .slider.MintCream:before {
    background-color: #F5FFFA;
}

.switch input:checked + .slider.dynamic {
    background-color: var(--slider-switch-bg-color, #e4e6e9);
}
.switch input:checked + .slider.dynamic:before {
    transform: translateX(16px);
    background-color: var(--slider-switch-color, #8934fa);
}

.switch span.chartName.cancelText{
    color : #ff6060;
}
.switch span.chartName.cancelBtn{
    top: 9px;
    position: relative;
    left: 1px;
    color: #bdbfd6;
    width: 20px;
    height: 20px;
    cursor: default;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_disabled.svg) 50% / contain no-repeat;
    transform: translateY(-46%);
}
/*
* switch-set
*/

.switch-set {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.switch-set.box {
    background-color: #f8faff;
    padding: 10px 20px;
    border-bottom: 1px solid #dbe0ec;
}

.switch-set.box > .switch {
    margin-right: 16px;
}

.switch-set.box > .switch .slider {
    background-color: #d3cfde;
}

.switch-set.box > .switch input:checked + .slider {
    background-color: #d0c2ff;
}

.switch-set.box > .switch input:checked + .slider.pink {
    background-color: #ffc6db;
}

.switch-set.box > .switch input:checked + .slider.capri {
    background-color: #aee2ec;
}
.switch-set.box > .switch-set-label-area{
    position: relative;
    padding-right: 10px;
    margin-right: 10px;
}
.switch-set.box > .switch-set-label-area > .switch-set-label{
    padding: 10px;
}
.switch-set.box > .switch-set-label-area > .switch-set-label:before {
    position: absolute;
    top: 6px;
    left: 0;
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    background-color: #846fe6;
}
.switch-set.box > .switch-set-label-area > .switch-set-label::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 2px;
    height: 17px;
    background-color: #dadce0;
}

@media only all and (max-width: 699px) {
    .title-area > .switch-set {
        margin-left: auto;
        margin-right: 0;
    }
}


/*
* switch-radio
*/
.switch-radio {
    display: inline-block;
    height: 28px;
    background: #e3e7ec;
    width: 96px;
    border-radius: 3px;
    position: relative;
    margin-left: 5px;
}
.switch-radio.triple {
    width: 189px;
}
.switch-radio.long {
    width: 110px;
}

.switch-radio.w160 {
    width: 160px;
}

.switch-radio .switch-input {
    display: none;
}

.switch-radio .switch-label {
    float: left;
    width: 50%;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    letter-spacing: -0.5px;
    color: #000;
    text-align: center;
    cursor: pointer;
    position: inherit;
    z-index: 5;
    transition: color 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
}
.switch-radio .switch-label.triple{
    width: 63px;
}
.switch-radio .switch-toggle {
    position: absolute;
    top: 0;
    left: 0;
    float: left;
    height: 28px;
    width: 50%;
    cursor: pointer;
    background-color: #712cce;
    border-radius: 3px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    -webkit-box-shadow: 0 3px 1px -2px rgba(0, 0, 0, .2), 0 2px 2px 0 rgba(0, 0, 0, .14), 0 1px 5px 0 rgba(0, 0, 0, .12);
    transition: left 0.25s cubic-bezier(0.4, 0.0, 0.2, 1);
    will-change: transform;
}
.switch-radio .switch-toggle.triple {
    width: 63px;
}
.switch-radio .switch-input:checked + .switch-label {
    color: #fff;
}

.switch-radio .left:checked ~ .switch-toggle {
    left: 0;
}
.switch-radio.price-switch.triple .center:checked ~ .switch-toggle {
    left: 63px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.switch-radio .right:checked ~ .switch-toggle {
    left: 48px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-top-right-radius: 3px;
    border-bottom-right-radius: 3px;
}
.switch-radio.price-switch.triple .right:checked ~ .switch-toggle {
    left: 126px;
}
.switch-radio.long .right:checked ~ .switch-toggle {
    left: 55px;
}

.switch-radio.w160 .right:checked ~ .switch-toggle {
    left: 79px;
}

/*
* chip-set
*/
.chip-set {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
}

.chip-set.over-flow {
    height: 40px;
    overflow: hidden;
}

.chip {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    max-width: 300px;
    min-width: 90px;
    height: 37px;
    padding: 0 40px 0 12px;
    border: solid 2px #8934fa;
    border-radius: 37px;
    background-color: #fff;
    overflow: hidden;
    margin: 3px;
    transition-duration: 300ms;
}

.chip:hover {
    background-color: #f5f0ff;
}

.chip.long {
    max-width: 340px;
}

.chip .text {
    display: inline-block;
    color: #673ab7;
    font-size: 14px;
    font-weight: 500;
    line-height: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chip:hover .delete {
    background-color: #8934fa;
    background-image: url(/res/img/component/icon_delete_white-0db95bcc861438e6c64c4443f506f2c7.svg);
}

.chip button.delete {
    position: absolute;
    display: block;
    top: 6px;
    right: 6px;
    background-color: #e1d0ff;
}

.chip.purple {
    background-color: #8934fa;
}

.chip.purple .text {
    color: #fff;
}

.chip.purple:hover {
    border-color: #673ab7;
    background-color: #673ab7;

}

.chip.purple .delete {
    background-image: url(/res/img/component/icon_delete_purple-96d8179c76bebb98e387bb4753ca19a8.svg);
}

.chip.purple:hover .delete {
    background-color: rgba(255, 255, 255, .3);
    background-image: url(/res/img/component/icon_delete_white-0db95bcc861438e6c64c4443f506f2c7.svg);
}

.icon-reset {
    display: block;
    width: 28px;
    height: 28px;
    background-image: url(/res/img/common/icon-reset-0680ecf0a1d9e0a43baa873a99ceebc1.svg);
    background-size: 14px 14px;
    background-position: 50%;
    background-repeat: no-repeat;
    outline: none;
}

.chip-set .icon-reset {
    position: relative;
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: #8934fa;
    background-image: url(/res/img/common/icon_reset_white-975c81a7abeb814407f2f7b9040baf86.svg);
    border-radius: 16px;
    transition-duration: 300ms;
    margin: 4px;
}

.chip-set .icon-reset:hover {
    background-color: #673ab7;
}


@media only all and (max-width: 840px) {
    .chip-set {
        width: 100%;
        height: inherit;
        margin-right: 0;
    }

    .chip {
        margin-left: 0;
    }

    .title-area > .right {
        width: 100%;
        height: inherit;
    }
}

/* breadcrumb */
.breadcrumb {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.breadcrumb > * {
    display: inline-block;
    font-size: 14px;
    line-height: 22px;
    color: #333;
    font-weight: 500;
    letter-spacing: -1px;
}

.breadcrumb > .icon-home {
    width: 14px;
    height: 14px;
    background-image: url(/res/img/component/icon_gin_purple-d2b13cf95f5f74ce04c917210e7104d2.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 14px 14px;
    text-indent: -5000rem;
}

.breadcrumb > .icon-gt {
    width: 18px;
    height: 22px;
    background-image: url(/res/img/component/icon-gt-056a2432a1efd57b76abf471564cb403.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 9px 9px;
    text-indent: -5000rem;
}

.breadcrumb > strong {
    color: #5e35b1;
    font-weight: 500;
}

.wrapper.fixed .breadcrumb {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    height: 45px;
    width: max-content;
    z-index: 121;
}

.wrapper.fixed .breadcrumb > * {
    display: flex;
    align-items: center;
    font-size: 15px;
    height: 45px;
    color: #333;
    font-weight: 500;
}

.wrapper.fixed .breadcrumb > .icon-gt {
    padding: 0;
    width: 30px;
}

.wrapper.fixed .breadcrumb > .icon-home {
    width: 45px;
    height: 45px;
    background-color: #5e35b1;
    background-image: url(/res/img/component/icon_gin_white-61f74b015505cac021684177df3b7669.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    text-indent: -5000rem;
}

.wrapper.fixed .breadcrumb > strong {
    color: #5e35b1;
    overflow: hidden;
    max-width: 200px;
    white-space: nowrap;
}

.wrapper.fixed .breadcrumb.float {
    top: 10px;
    left: 10px;
    border-right: 0;
    background-color: #fff;
    padding-right: 15px;
    z-index: 1100;
}

@media only all and (max-width: 1599px) {
    .wrapper.fixed .breadcrumb {
        display: none !important;
    }
}

@media only all and (max-width: 1199px) {
    .wrapper.fixed .breadcrumb {
        position: relative;
        padding-left: 0;
        padding-right: 0;
        z-index: auto;
    }

    .wrapper.fixed .breadcrumb > * {
        font-size: 14px;
        color: #333;
    }

    .wrapper.fixed .breadcrumb > .icon-home {
        text-indent: -5000rem;
        width: 14px;
        height: 14px;
        background-image: url(/res/img/component/icon_gin_purple-d2b13cf95f5f74ce04c917210e7104d2.svg);
        background-repeat: no-repeat;
        background-position: center center;
        background-size: 14px 14px;
    }

    .wrapper.fixed .breadcrumb > strong {
        color: #5e35b1;
    }
}


/* notification-badge */
.notification-badge {
    display: inline-block;
    /* min-width: 20px; */
    line-height: 18px;
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    padding: 0 6px;
    background-color: #ff4081;
    border-radius: 20px;
    box-shadow: 0 0 10px 0 #ff4081;
}

.top-menu > ul > li > a > .notification-badge {
    font-weight: 500;
    margin-left: 5px;
    box-shadow: none;
}

.top-submenu .notification-badge {
    display: inline-block;
    top: 0;
    right: 10px;
    font-weight: 500;
    background-color: rgba(105, 12, 198, .7);
    box-shadow: none;
    margin-left: 5px;
}

.totalmenu-area .notification-badge {
    position: relative;
    display: inline-block;
    font-weight: 500;
    margin-left: 5px;
    box-shadow: none;
}

.totalmenu-area > ul > li > .top-submenu > ul > li .notification-badge {
    margin-left: 15px;
}

.login-area .user-photo .notification-badge {
    position: absolute;
    top: -8px;
    left: 18px;
    display: block;
}

/* biz-badge */
.options .biz-badge {
    position: absolute;
    top: -3px;
    right: 12px;
    min-width: 18px;
    height: 18px;
    box-shadow: none;
    z-index: 10;
}

.popup-option .biz-badge {
    top: -15px;
}

/* pre-badge */
.pre-badge {
    display: inline-block;
    margin-left: 5px;
    width: 16px;
    height: 16px;
    text-indent: -9999px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/symbol_pre.svg) 50%/contain no-repeat;
    background-color: #8934fa;
    border-radius: 20px;
    position: absolute;
    top: -6px;
    right: 0;
}
.pre-badge.radio {
    top: 0px;
    right: -18px;
}
.pre-badge.left {
    right: 10px;
}

.pre-badge.manual {
    position: inherit;
}

.pre-badge.tr {
    top: -4px;
    right: -3px;
    margin-right: -3px;
}

ul[data-legend-circle] .pre-badge.order {
    left: 23px;
    top: -16px;
    width: 13px;
    height: 13px;
}

.dropdown-menu .pre-badge.order {
    left: 35px;
    top: -20px;
    width: 13px;
    height: 13px;
}

.marker-list .pre-badge.order {
    left: 23px;
    top: -16px;
    width: 13px;
    height: 13px;
}

.pre-span {
    display: inline-block;
    margin-left: 5px;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/symbol_pre.svg) 50%/contain no-repeat;
}

/*
* img
*/
.img-box {
    text-align: center;
}


/*
* filter
*/
.filter-container {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 14px;
    margin-bottom: 14px;
}

.wrapper.fixed .filter-container {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: #fff;
    border-bottom: 1px solid #dadce0;
    margin-top: 0;
    z-index: 210;
}

.wrapper.fixed .filter-container.top {
    height: 60px;
}

.wrapper.fixed main[class*=m0] .filter-container.top, .wrapper.fixed main.heroes .filter-container.top {
    height: 46px;
}

.wrapper.fixed .btn-set .icon-search {
    border-bottom: 0;
}

.filter-set {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    border-radius: 24px;
}

.filter-set > .filter {
    position: relative;
    word-break: keep-all;
}

.filter-set > .filter > .delete {
    position: absolute;
    top: 13px;
    left: 13px;
    background-color: rgba(0, 0, 0, .05);
    margin-left: 0;
    margin-right: 3px;
    z-index: 1;
}

.filter-set > .filter > .delete:hover {
    background-color: rgba(193, 146, 253, 0.5);
}

.filter-set > .filter > a {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0 36px 0 40px;
    color: #333333;
    font-size: 15px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.4px;
    background-color: #fff;
    border-left: 1px solid #dadce0;
    border-top: 1px solid #dadce0;
    border-bottom: 1px solid #dadce0;
    transition: background 100ms ease-out;
    padding-top: 16px;
}

.filter-set > .filter.more > a {
    padding-left: 20px;
}

.filter-set > .filter > a:hover {
    background-color: #f7f7f7;
}

.filter-set > div:first-child > a {
    border-top-left-radius: 23px;
    border-bottom-left-radius: 23px;
}

.filter-set > .filter > a > .filter-name {
    position: absolute;
    top: 4px;
    left: 41px;
    color: #000;
    font-weight: 500;
    font-size: 12px;
    line-height: normal;
    opacity: .5;
}

.filter-set > .filter > a > .text {
    display: inline-block;
    height: 28px;
    line-height: 28px;
    min-width: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.wrapper.fixed .filter-set > .filter > a > .text {
}

.filter-set > div:last-child > a {
    border-right: 1px solid #dadce0;
    border-top-right-radius: 23px;
    border-bottom-right-radius: 23px;
}

.wrapper.fixed .filter-set > div:last-child > a {
    border-right: 1px solid #dadce0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.filter-set > .filter > a > .legend-text {
    display: none;
}

.filter-set > .filter > a .arrow {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 38px;
    height: 45px;
    background-image: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 7px;
}

.filter-set > .filter > a.active {
    color: #fff;
    background-color: #712cce;
    border-color: #712cce;
    border-bottom-left-radius: 0;
}

.filter-set > .filter > a.active .arrow {
    background-image: url(/res/img/component/icon_arrow03_up-c3247a48b1ac7a30df733826daed2a49.svg);
}

.filter-set > .filter > a.active > .filter-name {
    color: #fff;
}

.filter-set > .filter > fieldset {
    position: absolute;
    top: 45px;
    left: 0;
    display: none;
    min-width: 190px;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    padding-top: 60px;
    background-color: #fff;
    border: 1px solid #717171;
    z-index: 25;
}
.filter-set > .filter > fieldset.fullDay {
    min-width: 275px;
}

.filter-set > .filter > fieldset.right {
    left: auto;
    right: 0;
}

.filter-set > .filter > fieldset.right.pr0706 {
    right: unset;
}
.filter-set > .filter > fieldset.areaYearPrice {
    width: 520px;
}

.filter-set > .filter > fieldset > legend {
    top: 16px;
    left: 18px;
    width: 100%;
    height: 30px;
    color: #272727;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

.filter > fieldset .checking-set,
.filter > fieldset .selecting-set {
    padding: 15px 16px;
}

.filter > fieldset > .checking-set,
.filter > fieldset > .selecting-set {
    border-top: 1px solid #cbd0d8;
}

.filter-set .btn-submit {
    position: relative;
    display: block;
    min-width: 118px;
    color: #fff;
    font-size: 15px;
    line-height: 46px;
    font-weight: 500;
    background: #3d3d3d;
    padding: 0 50px 0 40px;
    border-top-right-radius: 23px;
    border-bottom-right-radius: 23px;
    outline: none;
}

.filter-set .icon-tips.area {
    position: absolute;
    top: 22px;
    left: 145px;
}

.filter-set .tips-box.area {
    height: 260px;
    background: white;
    top: 10px;
    width: 339px;
    font-size: 7px;
}

.filter-set .tips-box.area p {
    font-size: 11px;
    line-height: 12px;
    padding: 0 10px;
}

.wrapper.fixed .filter-set > div > a {
    height: 45px;
    border-top: 0;
    border-bottom: 0;
}

.wrapper.fixed .filter-set > div:first-child > a {
    border-radius: 0;
}

.wrapper.fixed .btn-submit {
    line-height: 45px;
    border-radius: 0;
}

.filter-set .btn-submit:hover {
    background: #5e35b1;
}

/* exception */
#psTypeTxt {
    min-width: 60px;
}


/* filter ---> mobile */
@media only all and (max-width: 1199px) {
    .filter-container {
        display: none;
        position: fixed;
        top: 20px;
        right: 20px;
        bottom: 20px;
        left: 20px;
        width: calc(100% - 40px);
        height: calc(100% - 40px);
        border-top: 0;
        box-shadow: none;
        overflow-x: hidden;
        overflow-y: auto;
        background-color: #eff2f9;
        margin-top: 0;
        margin-bottom: 0;
        z-index: 1000;
        -webkit-overflow-scrolling: touch;
    }

    .wrapper.fixed .filter-container {
        display: none;
        padding-top: 0;
        background-color: #f1f3f5;
    }

    .filter-set {
        position: relative;
        width: 100%;
        flex-direction: column;
        padding: 0;
        background-color: #eff2f9;
        border-radius: 0;
        margin-bottom: 60px;
    }

    .filter-set > .filter {
        margin-bottom: 10px;
    }

    .map-info .filter-set {
        margin-bottom: 0;
    }

    .map-info .filter-set > .filter {
        margin-bottom: 0;
    }

    .filter-set > .filter > a {
        border-left: 0;
        min-height: 46px;
        padding-top: 0;
    }

    .filter-set > .filter > a:hover {
        background-color: #fff;
    }

    .filter-set > .filter > .delete {
        display: none;
    }

    .filter-set > .filter > a {
        padding-left: 15px;
    }

    .filter-set > .filter > a > .text {
        display: none;
    }

    .filter-set > .filter > a > .filter-name {
        position: relative;
        top: auto;
        left: auto;
        font-size: 16px;
        font-weight: 600;
        line-height: 28px;
        opacity: 1;
        margin-right: 6px;
    }

    .filter-set > .filter > a > .filter-name:after {
        content: ':'
    }

    .filter-set > .filter > a.active > .filter-name {
        color: #000;
    }

    .filter-set > .filter > a > .legend-text {
        display: block;
        font-size: 16px;
    }

    .filter-set > .filter > a.active {
        border-bottom-left-radius: 0;
        background-color: #fff;
        border-top-color: #dadce0;
        border-bottom-color: #dadce0;
        color: #333;
    }

    .filter-set > .filter:first-child > a,
    .filter-set > .filter:first-child > a.active {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    .filter-set > .filter > a.active .arrow {
        background-image: url(/res/img/component/icon_arrow03_up_black-380fb67bb9816ee92461d1d90e41f52a.svg);
    }

    .filter-set > .filter > fieldset {
        display: block;
        position: relative;
        top: auto;
        left: auto;
        padding-top: 0;
        border-top: 0;
        border-right: 0;
        border-bottom: 1px solid #dadce0;
        border-left: 0;
    }

    .filter-set > .filter > fieldset > legend {
        display: none;
    }

    .map-info .filter-set > .filter > fieldset > legend {
        display: block;
    }

    .filter-set > .filter > fieldset > .checking-set,
    .filter-set > .filter > fieldset > .selecting-set {
        border-top: 0;
    }

    .filter-set .btn-set {
        position: fixed;
        bottom: 20px;
        width: calc(100% - 40px);
        z-index: 10;
    }

    .btn-set .icon-reset,
    .wrapper.fixed .btn-set .icon-reset {
        width: calc(50% - 30px);
        height: 60px;
        background: #fff;
        border-bottom: 0;
        border-left: 0;
    }

    .btn-set .icon-reset > .blind {
        position: relative;
        font-size: 18px;
        font-weight: 500;
        line-height: normal;
    }

    .filter-set > .btn-set > .btn-submit,
    .wrapper.fixed .filter-set > .btn-set > .btn-submit {
        width: calc(50% - 30px);
        height: 60px;
        font-size: 18px;
        padding-right: 40px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    .filter-close-btn {
        width: 60px;
        height: 60px;
        background-image: url(/res/img/common/btn_close-af833958d01e519a32e1f31fac30ab09.svg);
        background-position: center;
        background-repeat: no-repeat;
        background-color: #fff;
        background-size: 20px 20px;
        border-top: 1px solid #dadce0;
        outline: none;
    }
}

/*
*  .filter.region
*/
.filter-set > .filter.region > a > .icon-pin {
    position: absolute;
    top: 13px;
    left: 15px;
    width: 20px;
    height: 20px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_solid_balck.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.filter-set > .filter.region > a.active > .icon-pin {
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_white.svg);
}

.filter-set > .filter.region > a > .text {
    min-width: 65px;
    max-width: 360px;
}

.filter-set > .filter.region > fieldset {
    padding-bottom: 0;
    min-width: 140px;
}

.filter-set > .filter.region > fieldset > legend {
    top: 16px;
    left: 18px;
    width: auto;
}

.filter-set > .filter.region > fieldset > .depth-set {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap;
    background-color: #eff2f9;
    border-top: 1px solid #cbd0d8;
}

/*
*  .filter.regionStandard
*/
.filter-set > .filter.regionStandard > a > .icon-pin {
    position: absolute;
    top: 13px;
    left: 15px;
    width: 20px;
    height: 20px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_solid_balck.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.filter-set > .filter.regionStandard > a.active > .icon-pin {
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_white.svg);
}

.filter-set > .filter.regionStandard > a > .text {
    min-width: 65px;
    max-width: 360px;
}

.filter-set > .filter.regionStandard > fieldset {
    padding-bottom: 0;
    min-width: 140px;
}

.filter-set > .filter.regionStandard > fieldset > legend {
    top: 16px;
    left: 18px;
    width: auto;
}

.filter-set > .filter.regionStandard > fieldset > .depth-set {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap;
    background-color: #eff2f9;
    border-top: 1px solid #cbd0d8;
}

.filter-set > .filter.regionStandard > fieldset {
    width: auto;
}

.filter-set > .filter.regionStandard > fieldset .checking-set .checking:last-child {
    margin-right: 0;
}

.filter-set > .filter.regionStandard .region-checking {
    position: absolute;
    top: 16px;
    left: 70px;
}

.filter-set > .filter.regionStandard .region-checking.pr0707 {
    left: 99px;
}

.filter-set > .filter.aucYear > fieldset > .depth-set {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: nowrap;
    background-color: #eff2f9;
    border-top: 1px solid #cbd0d8;
}

.filter-set > .filter.aucYear > a > .text {
    min-width: 65px;
    max-width: 360px;
}

.filter-set > .filter.aucYear > fieldset {
    padding-bottom: 0;
    min-width: 140px;
}

.filter-set > .filter.aucYear > fieldset > legend {
    top: 16px;
    left: 18px;
    width: auto;
}

.depth-set > .icon-reset {
    position: absolute;
    top: -45px;
    right: 8px;
    display: block;
    width: 28px;
    height: 28px;
    background-color: #fff;
    border-radius: 18px;
    transition-duration: 300ms;
}

.depth-set > .icon-reset:hover {
    background-color: #ebecec;
}

.depth-set ul {
    width: 150px;
    height: 227px;
    overflow-y: scroll;
    -ms-overflow-style: none;
}

.depth-set ul > li {
    position: relative;
    width: 100%;
    height: 38px;
}

.depth-set ul > li:last-child {
    border-bottom: 0;
}

.depth-set button,
.date-set button {
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 14px;
    line-height: 37px;
    letter-spacing: -0.4px;
    color: #444;
    background-color: #fff;
    outline: none;
    transition: background 300ms ease-out;
}

.depth-set button:hover {
    background-color: #f5f6fa;
}

.depth-set button.active,
.depth-set button.active:hover {
    color: #712cce;
    background-color: #eae8ff;
    font-weight: 600;
}

.depth-set.with-icon-add > ul > li > button {
    padding-left: 40px;
    text-align: left;
}

.depth-set.with-icon-add > ul > li > button.group-label {
    padding-left: 0;
    text-align: center;
}

.depth-set.with-icon-add .icon-add {
    position: absolute;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    background-size: 18px;
    margin-left: 0;
    z-index: 10;
}

.depth-set.with-icon-add .icon-add:not(.icon-change):hover {
    background-color: #f5f6fa;
}

.depth-set .depth-4 {
    width: max-content;
    min-width: 380px;
    max-width: 500px;
}

.depth-set .depth-4 > li {
    width: 100%;
    height: 38px;
    color: #333;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: -0.6px;
    background-color: #fff;
    outline: none;
    transition-duration: 300ms;
    cursor: pointer;
}

.depth-set .depth-4 > li.active {
    color: #712cce;
    background-color: #eae8ff;
    font-weight: 600;
}

.depth-set .depth-4 > li > button {
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.depth-set .depth-5 {
    width: max-content;
    min-width: 330px;
    max-width: 430px;
}

.depth-set .depth-5 > li {
    width: 100%;
    height: 38px;
    color: #333;
    text-align: left;
    font-size: 14px;
    font-weight: 400;
    line-height: 38px;
    letter-spacing: -0.6px;
    background-color: #fff;
    outline: none;
    transition-duration: 300ms;
    cursor: pointer;
}

.depth-set .depth-5 > li.active {
    color: #712cce;
    background-color: #eae8ff;
    font-weight: 600;
}

.depth-set .depth-5 > li > button {
    padding-left: 12px;
    padding-right: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.filter-set > .filter.region > fieldset .checking-set {
    flex-direction: row;
    align-items: center;
    padding-right: 18px;
    padding-left: 18px;
}

.filter-set > .filter > fieldset .title {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.5px;
    margin-right: 12px;
    margin-bottom: 6px;
}

.filter-set > .filter > fieldset .title {
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.5px;
    margin-right: 12px;
    margin-bottom: 6px;
}

.filter-set > .filter > fieldset .title2 {
    font-size: 16px;
    font-weight: 500;
    color: #111;
    letter-spacing: -0.5px;
    margin-right: 6px;
}

.filter-set > .filter > fieldset strong.title {
    height: 24px;
}

.filter-set > .filter.region > fieldset .checking-set .checking {
    margin-right: 15px;
}

@media only all and (max-width: 1339px) {
    .filter-set > .filter.region > a > .text {
        width: 100%;
    }
}

@media only all and (max-width: 1199px) {
    .filter-set > .filter.region > fieldset {
        padding-top: 0;
    }

    .filter-set > .filter.region > a.active > .icon-pin {
        background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_solid_balck.svg);
    }

    .filter-set > .filter.region > a {
        padding-left: 40px;
    }

    .filter-set > .filter.region > a > .text {
        display: block;
        font-size: 16px;
        max-width: calc(100% - 50px);
    }

    .filter-set > .filter.region > fieldset > legend {
        display: none;
    }

    .filter-set > .filter.region > fieldset > .depth-set {
        min-width: 100%;
        border-top: 0;
        flex-wrap: wrap;
    }

    .depth-set > .icon-reset {
        display: none;
    }

    .depth-set ul {
        width: 33.333333%;
    }

    .depth-set .depth-4 {
        width: 100%;
        height: auto;
        min-height: 36px;
        min-width: auto;
        max-width: none;
        border-top: 1px solid #dadce0;
    }

    .depth-set .depth-4 > li {
        padding-left: 20px;
        padding-right: 20px;
    }

    .filter-set > .filter > fieldset .title {
        width: 100%;
    }

    .filter-set > .filter.region > fieldset .checking-set .checking {
        width: 33.33%;
        margin-right: 0;
    }
}

@media only all and (max-width: 699px) {
    .depth-set ul > li {
        width: 100%;
        border-right: 0;
    }
}


/*
*  filter.period
*/
.filter-set > .filter.period > a > .icon-calendar {
    position: absolute;
    top: 13px;
    left: 15px;
    width: 18px;
    height: 18px;
    background-image: url(/res/img/component/icon_calendar-ebe3c49c89f42bb20e7e5185b31de11a.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.filter-set > .filter.period > a.active > .icon-calendar {
    background-image: url(/res/img/component/icon_calendar_white-002fb33c477507c80854168674dc662d.svg);
}

.filter-set > .filter.period > a > .text {
    max-width: 260px;
}

.filter-set > .filter.period > fieldset {
    padding-right: 0;
    padding-left: 0;
    padding-bottom: 0;
}

.filter-set > .filter.period > fieldset.right {
    left: auto;
    right: -134px;
}

.filter-set > .filter.period > fieldset > legend {
    top: 16px;
    left: 18px;
    width: auto;
}

.filter-set > .filter.period > fieldset > .btn-group {
    position: absolute;
    top: 18px;
    right: 40px;
}

.filter-set > .filter.period > fieldset .selecting-set {
    flex-direction: row;
    padding-right: 28px;
    padding-left: 28px;
}

.filter-set > .filter.period > fieldset .date-range {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
    padding-left: 28px;
    border-top: 1px solid #e9edf3;
    border-bottom: 1px solid #e9edf3;
    margin-top: 7px;
    margin-bottom: 7px;
    display: none;
}

.filter-set > .filter.multiCheckBoxBldg > fieldset {
    left: -510px;
    right: auto;
}
.filter-set > .filter.multiCheckBoxPopulation > fieldset {
    right: auto;
}
.date-range > span {
    font-size: 15px;
    font-weight: 500;
    color: #8934fa;
}

.date-range > .icon-reset {
    position: relative;
    display: block;
    width: 48px;
    height: 48px;
    background-color: #fff;
    border-left: 1px solid #dadce0;
    margin-left: auto;
    transition-duration: 300ms;
}

.date-range > .icon-reset:hover {
    background-color: #d5ebff;
}

.filter-set > .filter.period > fieldset .selecting-set .selecting {
    margin-right: 15px;
}

.filter-set > .filter.period > fieldset .datepicker-set {
    position: relative;
    display: flex;
    width: 600px;
    flex-direction: row;
    overflow-x: auto;
    border-top: 1px solid #e9edf3;
    padding-top: 18px;
}

.filter-set > .filter.period > fieldset.single .datepicker-set {
    width: 300px;
}

.filter-set > .filter.period > fieldset .datepicker-set:after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 300px;
    display: block;
    width: 1px;
    height: 200px;
    content: '';
    background-color: #e9edf3;
}

.filter-set > .filter.period > fieldset.single .datepicker-set:after {
    display: none;
}

.filter-set > .filter.period > fieldset > .date-set {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    background-color: #eff2f9;
    border-top: 1px solid #e9edf3;
    width: 100%;
}

.date-set > .icon-reset {
    position: absolute;
    top: -44px;
    right: 8px;
    display: block;
    width: 28px;
    height: 28px;
    background-color: #fff;
    border-radius: 18px;
    transition-duration: 300ms;
}

.date-set > .icon-reset:hover {
    background-color: #ebecec;
}

.date-set > div {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: flex-start;
    padding-top: 26px;
    padding-bottom: 24px;
    overflow: hidden;
}

.date-set > div.depth-2 > .year,
.date-set > div.depth-3 > .year {
    border-left: 1px solid #afb8c5;
}

.date-set > div > .label {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    color: #333;
    font-weight: 500;
    text-align: center;
    line-height: 25px;
    background-color: #fff;
    border-bottom: 1px solid #afb8c5;
    border-left: 1px solid #e9edf3;
}

.date-set > div:first-child > .label {
    border-left: 0;
}

.date-set > div:first-child > .label {
    border-left: 0;
}

.date-set > div > .selected-date {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 24px;
    color: #fff;
    text-align: center;
    line-height: 24px;
    background-color: #777796;
    border-left: 1px solid #8b8ba5;
}

.date-set > div.from > .selected-date {
    border-left: 0;
}

.date-set > div > ul {
    width: 72px;
    flex: 1;
    height: 336px;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
}

.date-set > div > ul.year {
    border-left: 1px solid #8083a7;
}

.date-set > div:first-of-type > ul.year {
    border-left: 0;
}

.date-set > div > ul > li {
    display: flex;
    align-items: center;
    width: 100%;
    height: 28px;
    background-color: #fff;
}

.date-set button {
    color: #444;
    font-size: 14px;
    line-height: 28px;
    background-color: #fff;
    outline: none;
    margin: 0 auto;
    transition-duration: 300ms;
}

.date-set button.active,
.date-set button.active:hover {
    color: #712cce;
    background-color: #eae8ff;
    font-weight: 600;
}

.date-set > .std button.active,
.date-set > .std button.active:hover {
    color: #fff;
    background-color: #712cce;
    font-weight: 500;
}

.date-set button:hover {
    background-color: #f5f6fa;
}

.dropdown .dropdown-menu > li.popup-active,
.dropdown .dropdown-menu > li.popup-active:hover {
    color: #712cce;
    background-color: #eae8ff;
    font-weight: 600;
}

@media only all and (max-width: 1339px) {
    .filter-set > .filter.period > a > .text {
        max-width: 100px;
    }
}

@media only all and (max-width: 1199px) {
    .filter-set > .filter.period > a {
        padding-left: 40px;
    }

    .filter-set > .filter.period > a.active > .icon-calendar {
        background-image: url(/res/img/component/icon_calendar-ebe3c49c89f42bb20e7e5185b31de11a.svg);
    }

    .filter-set > .filter.period > a > .text {
        display: block;
        max-width: 100%;
    }

    .filter-set > .filter.period > fieldset {
        min-width: 100%;
        padding-top: 0;
        overflow-x: auto;
        margin-top: -1px;
    }

    .filter-set > .filter.period > fieldset > .date-set {
        flex-wrap: nowrap;
        width: 100%;
    }

    .date-set > .icon-reset {
        top: -36px;
    }

    .date-set > .icon-reset:hover {
        background-size: 14px 14px;
    }

    .date-set > div {
        width: 50%;
    }

    .date-set > div > ul {
        border-bottom: 0;
        flex: 1;
    }

    .filter-set > .filter.period > fieldset > .btn-group {
        position: relative;
        top: 2px;
        right: auto;
        height: 36px;
        align-items: flex-start;
        padding-left: 15px;
    }

    .filter-set > .filter.period > fieldset .selecting-set .selecting {
        margin-right: 0;
    }

    .filter-set > .filter.period > fieldset .datepicker-set:after {
        display: none;
    }
}


/*
*  .multi-set
*/
.filter .multi-set {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    border-top: 1px solid #cbd0d8;
}

.filter .multi-set > .checking-set,
.filter .multi-set > .selecting-set {
    width: 160px;
    flex:1;
    border-left: 1px solid #e9edf3;
}
.filter .multi-set > .checking-set[data-key="aptEnv"] {
    width: 220px;
}
.filter .multi-set > .checking-set[data-key="aptEnv"] label {
    width: 320px;
}
.filter .multi-set > .checking-set:first-child,
.filter .multi-set > .selecting-set:first-child {
    border-right: 0;
}

.multi-set > .icon-reset {
    position: absolute;
    top: -44px;
    right: 8px;
    display: block;
    width: 28px;
    height: 28px;
    background-color: #fff;
    border-radius: 18px;
    transition-duration: 300ms;
}

.multi-set > .icon-reset:hover {
    background-color: #ebecec;
}

@media only all and (max-width: 1199px) {
    .filter .multi-set {
        border-top: 0;
        flex-direction: column;
    }
}


/*
*  filter.detail
*/

.filter-set > .filter.detail > a > .icon-pin {
    position: absolute;
    top: 13px;
    left: 15px;
    width: 20px;
    height: 20px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_solid_balck.svg);
    background-repeat: no-repeat;
    background-position: center center;
}

.filter-set > .filter.detail > a.active > .icon-pin {
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_white.svg);
}

.filter-set > .filter.detail > fieldset {
    padding-right: 0;
    padding-bottom: 0;
    padding-left: 0;
    min-width: 150px;
}

.filter-set > .filter.detail > fieldset > legend {
    top: 16px;
    left: 18px;
    width: auto;
}

.filter.detail .multi-set > .checking-set,
.filter.detail .multi-set > .selecting-set {
    min-width: 170px;
}

@media only all and (max-width: 1199px) {
    .filter.detail .multi-set > .checking-set,
    .filter.detail .multi-set > .selecting-set {
        border-bottom: 1px solid #e9edf3;
    }

    .multi-set > .icon-reset {
        top: -36px;
        right: 40px;
    }
}


/*
*  .filter.detail > .detail-set > .details
*/
.filter .detail-set {
    width: 590px;
    min-height: 384px;
    max-height: 560px;
    overflow-y: auto;
    background-color: #eff2f9;
    border-left: 1px solid #cbd0d8;
}

.detail-set i {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    font-style: normal;
    background-color: #9dacec;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 3px;
    margin-right: 3px;
}

.detail-set > .noti {
    width: 100%;
    font-size: 14px;
    padding: 14px;
}

.detail-set > .details {
    position: relative;
    width: 100%;
    color: #444;
    font-size: 15px;
    padding-left: 105px;
    padding-right: 4px;
    background-color: #fff;
    border-bottom: 1px solid #cbd0d8;
    letter-spacing: -0.5px;
}

.detail-set > .details:last-of-type {
    border-bottom: 0;
}

.detail-set > .details > div {
    padding-top: 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e9edf3;
}

.detail-set > .details > div:last-of-type {
    border-bottom: 0;
}

.detail-set > .details strong {
    font-weight: 400;
}

.details > .fixed-title {
    position: absolute;
    top: 4px;
    left: 4px;
    display: flex;
    width: 110px;
    justify-content: center;
    height: calc(100% - 8px);
    color: #515b69;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    align-items: center;
    letter-spacing: -1px;
    border-radius: 2px;
    background-color: #e8eef9;
}

.details > div {
    margin-left: 15px;
}

.details i {
    display: inline-block;
    color: #fff;
    font-size: 13px;
    font-style: normal;
    line-height: 20px;
    background-color: #9dacec;
    padding-left: 4px;
    padding-right: 4px;
    border-radius: 3px;
    margin-right: 3px;
}

.details .dropdown > .dropdown-menu {
    width: max-content;
    min-width: 90px;
}

.details .dropdown > .dropdown-menu > li {
    font-size: 14px;
    font-weight: 400;
    padding-top: 6px;
    padding-bottom: 6px;
}

.details .dropdown > .dropdown-select > span {
    color: #712cce;
}

.detail-set > .details > div.selecting-set {
    position: relative;
    flex-direction: row;
    padding-top: 7px;
    padding-left: 0;
    padding-bottom: 7px;
}

.details > div.selecting-set > .selecting {
    width: 25%;
}

.details > div.checking-set {
    position: relative;
    flex-direction: row;
    align-items: center;
    padding: 40px 0 7px 0;
}

.details > div.checking-set > .dropdown {
    position: absolute;
    top: 7px;
    left: 0;
    min-width: 100px;
}

.details > div.checking-set > span {
    position: absolute;
    top: 6px;
    left: 102px;
}

.details > div.checking-set > .checking {
    width: 33.333333%;
    height: 28px;
}

.details > div > span {
    display: inline-block;
    line-height: 32px;
    margin-right: 2px;
}

@media only all and (max-width: 1199px) {
    .filter .detail-set {
        width: 100%;
        border-left: 0;
        min-height: 0;
    }

    .detail-set > .details {
        padding-top: 22px;
        padding-left: 16px;
        padding-right: 16px;
        border-bottom-color: #e9edf3;
    }

    .details > .fixed-title {
        top: 4px;
        width: 100%;
        height: 26px;
        color: #8f96b3;
        background-color: #fff;
    }

    .detail-set > .details > div.selecting-set > .selecting,
    .detail-set > .details > div.checking-set > .checking {
        width: 33.333333%;
    }
}

@media only all and (max-width: 699px) {
    .detail-set > .details > div.selecting-set > .selecting,
    .detail-set > .details > div.checking-set > .checking {
        width: 50%;
    }

    .details > div > span {
        line-height: 36px;
    }

    .details > div > span:first-of-type {
        line-height: 32px;
    }
}


/*
*  filter.save
*/
.filter-set > .filter.save > a {
    width: 46px;
    height: 46px;
    padding-left: 0;
    padding-right: 0;
    background-image: url(/res/img/component/icon_save-1af5c753718c2d8793720a8aea24da73.svg);
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}

.filter-set > .filter.save > a.active {
    color: #fff;
    background-image: url(/res/img/component/icon_save_white-a46301d92d5e518851308bc89139f3f6.svg);
    background-color: #712cce;
    border-color: #712cce;
    border-bottom-left-radius: 0;
}

.filter-set > .filter.save > a > .arrow {
    display: none;
}

.filter-set > .filter.save > fieldset > .input-set {
    width: 300px;
    padding: 15px;
    border-top: 1px solid #cbd0d8;
}

fieldset > .input-set > .btn-pink {
    width: 100%;
    margin-top: 10px;
    margin-left: 0;
}

@media only all and (max-width: 1199px) {
    .filter-set > .filter.save > a {
        width: 100%;
        padding-left: 15px;
        background-image: none;
    }

    .filter-set > .filter.save > a.active {
        color: #000;
        background-color: #fff;
        border-top-color: #dadce0;
        border-bottom-color: #dadce0;
    }

    .filter-set > .filter.save > a > .arrow {
        display: block;
    }

    /*
    .filter-set > .filter.save > fieldset > .input-set {
        display: flex;
        width: 100%;
        border-top: 0;
        padding-top: 6px;
    }
    .filter.save .input-set > .input-field {
        width: calc(50% - 10px);
        margin-right: 10px;
    }
    .filter.save .input-set > .btn-pink {
        width: 10%;
        margin-top: 20px;
    } */
    .filter-set > .filter.save > fieldset > .input-set {
        display: flex;
        flex-flow: row wrap;
        width: 100%;
    }

    .filter-set > .filter .input-set .selecting {
        margin-top: 20px;
    }

    .filter > fieldset .input-set .selecting-set {
        padding: 0;
        flex-flow: row wrap;
        flex: 3;
    }

    fieldset > .input-set > .input-field {
        flex: 2;
    }

    fieldset > .input-set > .btn-pink {
        flex: 1;
        margin-top: 20px;
        margin-left: 10px;
    }

    fieldset > .input-set > .btn-pink + .dropdown {
        margin-left: 60px;
        margin-top: 20px;
    }

    .filter.save fieldset > .input-set .dropdown {
        flex: 3;
        margin-top: 20px;
    }

}


/* filter ---> aside */
.mask-filter {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.4;
    overflow: hidden;
    z-index: 110;
}

.filter-container.aside {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-top: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background-color: transparent;
    -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .2);
    z-index: 1100;
}

.filter-container.aside.triple {
    width: 654px;
}

.wrapper.fixed .filter-container.aside {
    padding-top: 0;
    padding-bottom: 0;
    background-color: transparent;
}

.filter-container.aside .filter-set {
    position: absolute;
    top: 10px;
    left: 50%;
    width: 1000px;
    transform: translateX(-50%);
    height: auto;
    flex-direction: column;
    padding: 0;
    background-color: #ffffff;
    border-radius: 0;
    margin-bottom: 20px;
    padding: 20px;
    z-index: 20;
}

.aside .filter-set > .filter {
    margin-bottom: 10px;
}

.aside .filter-set > .filter > a {
    border-left: 0;
    min-height: 46px;
    padding-left: 15px;
    border-top: 1px solid #dadce0;
    border-bottom: 1px solid #dadce0;
}

.aside .filter-set > div:first-child > a {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.wrapper.fixed .aside .filter-set > .filter > a {
    border-top: 1px solid #dadce0;
    border-bottom: 1px solid #dadce0;
}

.aside .filter-set > .filter > a:hover {
    background-color: #fff;
}

.aside .filter-set > .filter > a.active:hover {
    background-color: #fff;
}

.aside .filter-set > .filter > a:before {
    position: absolute;
    top: 6px;
    right: 6px;
    display: block;
    content: '';
    width: 32px;
    height: 32px;
    background-color: #ebecec;
    border-radius: 2px;
    transition: all 500ms ease;
    opacity: 0;
    z-index: 0;
}

.aside .filter-set > .filter > a:hover:before {
    opacity: 1;
}

.aside .filter-set > .filter > a .arrow {
    width: 45px;
}

.aside .filter-set > .filter > a.active .arrow {
    background-image: url(/res/img/component/icon_arrow03_up_black-380fb67bb9816ee92461d1d90e41f52a.svg);
}

.aside .filter-set > .filter > .delete {
    display: none;
}

.aside .filter-set > .filter > a > .text {
    display: none;
}

.aside .filter-set > .filter > a {
    padding-top: 0;
}

.aside .filter-set > .filter > a > .filter-name {
    position: relative;
    top: auto;
    left: auto;
    font-size: 16px;
    font-weight: 600;
    opacity: 1;
    margin-right: 6px;
}

.aside .filter-set > .filter > a > .filter-name:after {
    content: ':'
}

.aside .filter-set > .filter > a.active > .filter-name {
    color: #000;
}

.aside .filter-set > .filter.region > a > .icon-pin {
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_solid_balck.svg);
    left: 4px;
}

.aside .filter-set > .filter.region > a > .text {
    display: block;
    letter-spacing: -1px;
    font-size: 16px;
    max-width: 700px;
}

.aside .filter-set > .filter.region .checking-set {
    border-top: 1px solid #e9edf3;
    padding: 6px 18px;
}

.aside .filter-set > .filter.region .checking-set > .title {
    width: 90px;
    margin-bottom: 0;
    flex: none;
}

.aside .filter-set > .filter.region .checking-set > .checking,
.aside .filter-set > .filter.region .selecting-set > .selecting {
    width: 90px;
    flex: none;
}

.aside .filter-set > .filter.apt > a.active > .icon-apt {
    background-image: url(/res/img/component/icon_apt-5fcea08dc2e6ab679aaaf4a046ccf59e.svg);
}

.aside .filter-set > .filter.apt > a > .text {
    display: block;
    width: 100%;
}

.aside .filter-set > .filter.period > a > .icon-calendar {
    background-image: url(/res/img/component/icon_calendar-ebe3c49c89f42bb20e7e5185b31de11a.svg);
    left: 5px;
}

.aside .filter-set > .filter.period > a > .text {
    display: block;
    max-width: calc(100% - 50px);
    font-size: 16px;
}

.aside .filter-set > .filter.region > a,
.aside .filter-set > .filter.period > a {
    padding-left: 30px;
}

.aside .filter-set > .filter > a > .legend-text {
    display: block;
    font-size: 16px;
    line-height: normal;
}

.aside .filter-set > .filter > a > .legend-text:before {
    position: absolute;
    top: 16px;
    left: 4px;
    display: block;
    content: '';
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background-color: #712cce;
}

.aside .filter-set > .filter > a.active {
    color: #333;
    background-color: #ffffff;
    border-bottom-left-radius: 0;
    border-top-color: #dadce0;
    border-bottom-color: #e9edf3;
}

.aside .filter-set > .filter.save > a,
.aside .filter-set > .filter.save > a.active {
    width: 100%;
    background-image: none;
}

.aside .filter-set > .filter.save > a > .arrow {
    display: block;
}

.aside .filter-set > .filter > fieldset {
    display: block;
    position: relative;
    top: auto;
    left: auto;
    padding-top: 0;
    border-top: 0;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    z-index: auto;
}

.aside .filter-set > .filter.region > fieldset {
    padding-top: 0;
    padding-bottom: 0;
}

.aside .filter-set > .filter.region > fieldset > .text {
    display: block;
}

.aside .filter-set > .filter.region > fieldset > .depth-set {
    border-top: 0;
}

.aside .depth-set > ul {
    flex: 1;
}

.aside .depth-set > ul.depth-4 {
    flex: 3;
}

.aside .depth-set > .icon-reset {
    display: none;
}

.aside .filter-set > .filter.period > fieldset {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: -1px;
}

.aside .filter-set > .filter.period > fieldset > .date-set {
    flex-wrap: nowrap;
}

.aside .filter-set > .filter.save > fieldset > .input-set {
    display: flex;
    flex-direction: row;
    width: 40%;
    align-items: center;
    border-top: 0;
    padding-top: 6px;
}

.aside fieldset > .input-set > .input-field {
    flex: 2;
}

.aside fieldset > .input-set > .input-field span:before {
    z-index: auto;
}

.aside fieldset > .input-set > .btn-pink {
    flex: 1;
    margin-top: 20px;
    margin-left: 10px;
}

.aside .date-set > div {
    flex: 1;
}

.aside .date-set > div:first-of-type > .label {
    border-left: 0;
}

.aside .date-set > div > .label {
    border-bottom-color: #dadce0;
}

.aside .date-set > div > ul {
    flex: 1;
    height: 224px;
    border-bottom: 0;
    -ms-overflow-style: none;
}

.aside .date-set > .icon-reset {
    top: -38px;
    right: 6px;
    width: 32px;
    height: 32px;
}

.aside .filter-set > .filter.period > fieldset > .btn-group {
    position: relative;
    top: 2px;
    right: auto;
    height: 38px;
    align-items: flex-start;
    background-color: #fff;
}

.aside .filter-set > .filter > fieldset > legend {
    display: none;
}

.aside .filter-set .btn-set {
    display: flex;
    width: 500px;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    margin: 20px auto;
    z-index: 1100;
}

.aside .btn-set .icon-reset,
.wrapper.fixed .aside .btn-set .icon-reset {
    width: 240px;
    height: 50px;
    background: #fff;
    border: 1px solid #dadce0;
}

.aside .btn-set .icon-reset > .blind {
    position: relative;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
}

.aside .filter-set > .btn-set > .btn-submit,
.wrapper.fixed .aside .filter-set > .btn-set > .btn-submit {
    width: 240px;
    height: 50px;
    font-size: 18px;
    padding-right: 40px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.aside .filter-set > .filter > fieldset > .multi-set {
    border-top: 0;
}

.aside .filter-set > .filter.detail > fieldset > .multi-set {
    flex-direction: column;
}

.aside .multi-set > .icon-reset {
    top: -36px;
    right: 44px;
}

.aside .filter-set > .filter > fieldset > .checking-set,
.aside .filter-set > .filter > fieldset > .selecting-set {
    border-top: 0;
    flex-direction: row;
    padding-top: 6px;
    padding-bottom: 6px;
}

.aside fieldset > .checking-set > .checking,
.aside fieldset > .selecting-set > .selecting {
    width: 20%;
    flex: 1;
}

.aside .filter-close-btn {
    position: absolute;
    top: 0;
    right: -48px;
    width: 48px;
    height: 48px;
    background-image: url(/res/img/common/btn_close_white-c73c9d3a8af64848f9a2a7981dd85fe6.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-color: #252525;
    background-size: 22px 21px;
    outline: none;
}

.aside .filter.detail .multi-set > .checking-set,
.aside .filter.detail .multi-set > .selecting-set {
    flex-direction: row;
    border-bottom: 1px solid #e9edf3;
    border-left: 0;
}

.aside .filter.detail .multi-set > .checking-set > .checking,
.aside .filter.detail .multi-set > .selecting-set > .selecting {
    flex: 1;
}

.aside .detail-set {
    width: 100%;
}

.aside .filter .detail-set {
    min-height: 0;
    border-left: 0;
}

.aside .detail-set > .details {
    padding-left: 120px;
    border-bottom: 1px solid #e9edf3;
}

.aside .detail-set > .details:last-child {
    border-bottom: 0;
}

.aside .detail-set > .details > .fixed-title {
    width: 104px;
    left: 0;
}

.aside .detail-set > .details > .checking-set {
    padding-top: 40px;
    padding-left: 0;
}

.filter .multi-set > .checking-set:first-of-type,
.filter .multi-set > .selecting-set:first-of-type {
    border-left: 0;
}


/*
*  .filter.area
*/
#areaTxt {
    max-width: 90px;
}

@media only all and (max-width: 1199px) {
    #areaTxt {
        max-width: 100%;
    }
}

/*
*  .filter.price
*/
#priceTxt {
    max-width: 86px;
}

@media only all and (max-width: 1199px) {
    #priceTxt {
        max-width: 100%;
    }
}

/*
*  .filter.yeardiff
*/
#yeardiffTxt {
    max-width: 86px;
}

@media only all and (max-width: 1199px) {
    #yeardiffTxt {
        max-width: 100%;
    }
}


/*
*  .modal
*/
.modal {
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    z-index: 1050;
    -webkit-overflow-scrolling: touch;
}

.modal.active {
    display: block;
}

.modal-container {
    position: absolute;
    top: 30px;
    left: 60px;
    width: calc(100% - 120px);
    min-width: 320px;
    min-height: 400px;
    background: #fff;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .12), 0 1px 5px 0 rgba(0, 0, 0, .2);
    margin-bottom: 30px;
}

.modal-container.solid {
    max-width: 1440px;
    left: 50%;
    transform: translateX(-50%);
}

.modal-container.slim {
    max-width: 70%;
    left: 50%;
    transform: translateX(-50%);
}
.modal-container.w1520 {
    max-width: 1520px;
    left: 50%;
    transform: translateX(-50%);
}
.modal-container.slim.solid {
    max-width: 1200px;
    left: 50%;
    transform: translateX(-50%);
}

.modal-container.fixed {
    max-width: 800px;
    left: 50%;
    transform: translateX(-50%);
}

.modal-container .wide {
    padding-right: 0;
    padding-left: 0;
}

.title-area.thick {
    min-height: 75px;
    border-top: 0;
}

.modal-container .title-area.purple {
    position: relative;
    min-height: 54px;
    background: -webkit-linear-gradient(45deg, #303f9f, #7b1fa2);
    background: linear-gradient(45deg, #303f9f, #7b1fa2);
    background-size: 150%;
    border-top: 0;
    transition: .5s;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.modal-container .title-area.purple:hover {
    background-position: right;
}

.modal-container .title-area.purple > h2 {
    position: relative;
    display: block;
    width: calc(100% - 50px);
    height: inherit;
    color: #fff;
    font-size: 20px;
    letter-spacing: -0.8px;
    line-height: 54px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    padding-left: 38px;
}

.modal-container h2.bullet-blue:before {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
}

.modal-container.develop-map #develop_list{
    position: absolute;
    left: 0;
    width: 330px;
    height: 700px;
    border-right: 1px solid #bcc1ca;
    z-index: 3;
    background: white;
}

.modal-container.develop-map .title-box button{
    position: absolute;
    width: 34px;
    right: 10px;
    top: 10px;
    background-color: #0000000d;
    height: 34px;
    border-radius: 34px;
    background-size: 14px;
    background-image: url(/res/img/component/icon_delete_gray-2d803a094f0007107a563518d57a416a.svg);
}

.modal-container.develop-map .location-select{
    top:70px;
    transform: translate(-50%);
}
.modal-container.develop-map .map-tool-list.icon-list {
    right: 10px;
    left: auto;
    bottom: 35px;
}
.modal-container.develop-map .map-tool-btns{
    z-index: 1;
}
.modal-container.develop-map .map-tool-btns.label-btn {
    right: 10px;
    left: auto;
    bottom: 75px;
}
.modal-container.develop-map .map-tool-btns.list-btn {
    right: 10px;
    left: auto;
    bottom: 115px;
}
.modal-container.develop-map .btn-list::before{
    -webkit-mask: url(/res_root/img/common/icon_report-7de4598107698ce343d61e7bfd01ae1d.svg) 50%/contain no-repeat;
    mask: url(/res_root/img/common/icon_report-7de4598107698ce343d61e7bfd01ae1d.svg) 50%/contain no-repeat;
    height: 17px;
    top: 3px;
}
.modal-container.develop-map .btn-icon::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/dev_all.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/dev_all.svg) 50%/18px no-repeat;
}
.modal-container.develop-map .btn-road::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/road.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/road.svg) 50%/18px no-repeat;
}
.modal-container.develop-map .btn-rail::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/rail.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/rail.svg) 50%/18px no-repeat;
}
.modal-container.develop-map .btn-jigu::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/jigu.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/jigu.svg) 50%/18px no-repeat;
}
.modal-container.develop-map .map-search{
    position: absolute;
    top: 58px;
    right: 10px;
    background-color: #f3f6fb;
    margin: 10px 5px 0px 0px;
    border-radius: 5px 5px 0 0;
}
.modal-container.develop-map .map-search .search {
    justify-content: space-between;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    margin: 0;
    height: 45px;
    background-color: #fff;
    transition: .3s;
}
.modal-container.develop-map .map-search .btn-set {
    flex-wrap: unset;
}
.modal-container.develop-map .map-search .search input {
    width: 225px;
    height: 30px;
    padding: 5px 10px;
    border: 0;
    border-radius: 4px;
    text-indent: 0;
}

.modal-container.develop-map .map-search .search button {
    text-indent: -9999px;
}
.modal-container.develop-map .map-search .search .delete {
    background-color: rgba(0, 0, 0, .05);
    margin-right: 3px;
}
.modal-container.develop-map .map-search .search .icon-search {
    width: 30px;
    height: 30px;
    border: 0;
}
.modal-container.develop-map .map-search .btn-set.search{
    border-top: 8px solid #f3f6fb;
    border-left: 8px solid #f3f6fb;
    border-right: 8px solid #f3f6fb;
    border-bottom: 8px solid #f3f6fb;
    border-radius: 5px 5px 0 0;
}
.modal-container.develop-map .map-search .area-list{
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .0);
    border-top: 0px solid #f3f6fb;
    border-left: 8px solid #f3f6fb;
    border-right: 8px solid #f3f6fb;
    border-bottom: 8px solid #f3f6fb;
    border-radius: 0 0 5px 5px;
    top: 45px;
}
.modal-container.develop-map .scroll-area {
    height: calc(100% - 60px);
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
}
.modal-container.develop-map .scroll-area::-webkit-scrollbar{
    display:none;
}
.modal-container.develop-map .manual-link-list > li strong.index{
    display: block;
    width: 100%;
    padding: 13px 18px 13px 15px;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    background-color: #f3f6fb;
    cursor: pointer;
    border-bottom: 2px solid #FFF;
}
.modal-container.develop-map .manual-link-list li.active > strong.index{
    background-color:rgba(99, 178, 238, 0.3) !important;
}
.modal-container.develop-map .manual-link-list > li li strong.index {
    padding-left: 30px;
}
.modal-container.develop-map .manual-link-list li li.active > strong.index{
    background-color:rgba(99, 178, 238, 0.3) !important;
}
.modal-container.develop-map .manual-link-list > li li a.active{
    background: rgba(99, 178, 238, 0.2);
}
.modal-container.develop-map .manual-link-list > li li a::after{
    width: 27px;
    height: 27px;
    mask: none;
    -webkit-mask: none;
}
.modal-container.develop-map .manual-link-list > li li a.rail::after {
    background: url(/res/img/map/rail-b20b0886b4620fdc3e9156abcae95244.png) 50%/contain no-repeat;
}
.modal-container.develop-map .manual-link-list > li li a.road::after {
    background: url(/res/img/map/road-148a27b6d76bbf982d38c45dbb245419.png) 50%/contain no-repeat;
}
.modal-container.develop-map .manual-link-list > li li a.jigu::after {
    background: url(/res/img/map/jigu-505a040ea1d1d53c4ef51537e89934c9.png) 50%/contain no-repeat;
}
.modal-container.develop-map .manual-link-list span.dev-section{
    display: flex;
    font-size: 12px;
    font-weight: bold;
    color: black;
    padding-bottom: 5px;
}
.modal-container.develop-map .develop-detail {
    position: absolute;
    left: 330px;
    width: 330px;
    height: calc(100% - 54px);
    background: white;
    z-index: 12;
}
.modal-container.develop-map .develop-detail .detail-inner{
    height: calc(100% - 110px);
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0 15px;
}
.modal-container.develop-map .develop-detail .detail-inner::-webkit-scrollbar{
    display: none;
}
.modal-container.develop-map .develop-detail .detail-inner .blank-data {
    margin-top: 30px;
    text-align: center;
}
.modal-container.develop-map .develop-detail .detail-inner .blank-data::before{
    content: "";
    display: block;
    width: 180px;
    height: 180px;
    margin: 0 auto 20px auto;
    background: url(/res/img/common/img_dormant_error-999183f10c9154ebed6947baa3079ccf.png) 50%/180px no-repeat;
}
.modal-container.develop-map .develop-detail .detail-header {
    padding: 10px;
}
.modal-container.develop-map .develop-detail .detail-header > strong{
    font-size: 18px;
}
.modal-container.develop-map .develop-detail .detail-info, .modal-container.develop-map .develop-detail .detail-notice, .modal-container.develop-map .develop-detail .detail-history{
    margin-top: 20px;
}
.modal-container.develop-map .develop-detail .detail-image li{
    text-align: center;
    margin-bottom: 15px;
    border: 1px solid #bcc1ca;
}
.modal-container.develop-map .develop-detail .detail-image li.relate-img{
    display: none;
}
.modal-container.develop-map .develop-detail .detail-image a{
    width: calc(100% - 20px);
    display: inline-block;
    overflow: hidden;
    position: relative;
    margin-top: 4px;
    padding-top: calc(50% - 2px);
    vertical-align: top;
}
.modal-container.develop-map .develop-detail .detail-image img{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.modal-container.develop-map .develop-detail .detail-image button{
    position: relative;
}
.modal-container.develop-map .develop-detail .detail-image button::after{
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    right: -15px;
    width: 12px;
    height: 12px;
    background: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    transform: rotate(180deg);
    transition: all .15s ease-in-out;
}
.modal-container.develop-map .develop-detail .detail-image button.open::after{
    transform: rotate(0deg);
}
.modal-container.develop-map .develop-detail .detail-info div{
    padding: 10px;
}
.modal-container.develop-map .develop-detail .detail-info dt{
    width: 100px;
    font-size: 13px;
}
.modal-container.develop-map .develop-detail .detail-info dd{
    width: calc(100% - 100px);
    font-size: 13px;
    border-right: 1px solid #ccd4e1;
    word-break:break-all;
}
.modal-container.develop-map .develop-detail .detail-history ol{
    padding: 5px 10px;
    font-size: 13px;
}
.modal-container.develop-map .develop-detail .detail-history ol li{
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid #00000012;
    position: relative;
    margin: 10px;
}
.modal-container.develop-map .develop-detail .detail-history ol li:before{
    content: "";
    width: 7px;
    height: 7px;
    position: absolute;
    top: 50%;
    left: -13px;
    margin-top: -4px;
    border-radius: 3.5px;
    background-color: #d8d8d8;
}
.modal-container.develop-map .develop-detail .detail-history ol li:first-child{
    border: 1px solid #7632c6;
}
.modal-container.develop-map .develop-detail .detail-history ol li:first-child:before{
    background-color: #7632c6;
}
.modal-container.develop-map .develop-detail .detail-notice ol{
    font-size: 13px;
}
.modal-container.develop-map .develop-detail .detail-notice ol li{
    position: relative;
    padding: 6px 10px;
    margin: 10px;
}
.modal-container.develop-map .develop-detail .detail-notice ol li:before{
    content: "";
    width: 2px;
    height: 2px;
    position: absolute;
    top: 12px;
    left: 0;
    background-color: #515254;
}

.modal-container.develop-map .btn-detail-close {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -18px;
    margin: auto;
    width: 18px;
    height: 58px;
    background-image: url(/res/img/component/icon_box_close-d2b5c392dad82aaaffd3af6840399895.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px;
    background-color: #fff;
    border-top: 1px solid #bcc1ca;
    border-right: 1px solid #bcc1ca;
    border-bottom: 1px solid #bcc1ca;
    outline: none;
    transition: box-shadow .3s ease-out;
}

.btn-modal-close {
    position: absolute;
    top: 10px;
    right: 6px;
    height: 34px !important;
    width: 34px;
    box-sizing: border-box;
    line-height: 50px;
    display: inline-block;
    transition: all 0.25s ease-out;
    border-radius: 17px;
    outline: none;
}

.btn-modal-close:hover {
    background-color: rgba(0, 0, 0, .15);
}

.btn-modal-close:before,
.btn-modal-close:after {
    transform: rotate(-45deg);
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -1px;
    margin-left: -12px;
    display: block;
    height: 2px;
    width: 24px;
    background-color: #fff;
    transition: all 0.25s ease-out;
}

.btn-modal-close:after {
    transform: rotate(-135deg);
}

.btn-modal-close:hover:before,
.btn-modal-close:hover:after {
    transform: rotate(0deg);
}

@media only all and (max-width: 1480px) {
    .modal-container {
        width: calc(100% - 120px);
    }
}

@media only all and (max-width: 1199px) {
    .btn-modal-fluid {
        display: none !important;
    }
    .modal-container.develop-map .location-select{
        display: none;
    }
}

@media only all and (max-width: 840px) {
    .modal-container {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        transform: none;
        width: 100%;
        height: 100%;
        border-radius: 0;
        overflow: auto;
    }

    .modal-container.fluid {
        width: 100%;
    }

    .modal-container .title-area.purple {
        position: sticky;
        top: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-radius: 0;
        z-index: 100;
    }

    .modal-container.slim {
        max-width: inherit;
    }

    .modal-container.develop-map .content-area{
        height: calc(100% - 60px) !important;
    }

    .modal-container.develop-map #develop_list{
        height: calc(100% - 60px) !important;
    }

}

@media only all and (max-width: 685px) {
    .modal-container.develop-map .develop-detail, .modal-container.develop-map #develop_list {
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 102;
    }
}


/*
*  .modal .title-area > .checking-set
*/
.modal .title-area > .checking-set {
    flex-direction: row;
    align-items: center;
    height: auto;
    padding-top: 20px;
    padding-bottom: 20px;
    margin-right: 0;
}

.modal .title-area > .checking-set .checking {
    font-weight: 500;
    padding-left: 20px;
}

.modal .title-area > .checking-set .checking span:last-child {
    width: 85%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.modal .contents-area {
    width: calc(100% - 40px);
    margin: 20px;
}
.modal .contents-area.cmpet {
    margin: 0px 20px;
}
.modal .contents-area.apt-group {
    width: 100%;
    margin: 0px;
}
.modal .chart-area,
.modal .grid-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 40px);
    margin: 20px;
    border: 1px solid #d5dae6;
    border-radius: 4px;
    overflow: hidden;
}


/*
* above-area
*/
.above-area {
    position: relative;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 10px;
}
.modal-container .above-area {
    align-items: flex-end;
}
.above-area.no-flex {
    justify-content: normal;
}

.above-area .left-auto {
    margin-left: auto !important;
}

.above-area .legend {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.above-area .legend.left {
    margin-right: auto;
    margin-left: 0;
}
.above-area .switch-radio .switch-label{
    z-index: 4;
}
.modal .above-area {
    margin: 20px;
}
.modal .above-area.apt-group {
    margin: 0px 0px 10px 0px;
}
.modal .above-area label.info.cmpet {
    margin-left: 40px;
}
.modal .above-area div.right.cmpet {
    margin-right: 40px;
}
.modal .above-area div.right.apt-group {
    margin-right: 0px;
}
.filter-set > .filter > a.active .arrow {
    background-image: url(/res/img/component/icon_arrow03_up-c3247a48b1ac7a30df733826daed2a49.svg);
}

@media only all and (max-width: 840px) {
    /* .above-area .btn-excel {
        position: absolute;
        top: -47px;
        right: 0;
    } */
    .above-area .legend {
        flex: 1;
    }

    .above-area .legend.right {
        flex: none;
    }
}


/*
* switcher-set
*/
.switcher-set {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    border-top: 1px solid #dee3ef;
    border-bottom: 1px solid #dee3ef;
    background: #fff;
    z-index: 100;
}

.switcher-set.popup-set {
    position:initial;
}

.switcher-set .switcher {
    position: relative;
    word-break: keep-all;
    display: flex;
    flex-direction: row;
    flex: 1;
}

.switcher-set.three .switcher {
    width: 33.333333%;
}

.switcher-set.four .switcher {
    width: 25%;
}

.switcher-set.five .switcher {
    width: 20%;
}

.switcher-set.six .switcher {
    width: 16.66666667%;
}

.switcher-set .switcher .head {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 48px;
    padding-left: 78px;
    padding-right: 48px;
}

.switcher-set .switcher .head > h3 {
    position: absolute;
    top: 0;
    left: 20px;
    height: 48px;
    font-size: 16px;
}

.switcher-set .switcher .head > .chip-set {
    width: 100%;
    height: 40px;
    overflow: hidden;
}

.switcher-set .switcher .arrow {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 46px;
    height: 47px;
    background-image: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 7px;
    border-right: 1px solid #dee3ef;
    outline: none;
}

.switcher-set .switcher .arrow:after {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: block;
    content: '';
    width: 36px;
    height: 36px;
    background-color: #ebecec;
    border-radius: 18px;
    z-index: -1;
    opacity: 0;
    transition: all 500ms ease;
}

.switcher-set .switcher .arrow:hover:after {
    opacity: 1;
}

.switcher-set .switcher:last-child .arrow {
    border-right: 0;
}

.switcher-set .switcher .arrow.active {
    background-image: url(/res/img/component/icon_arrow03_up_black-380fb67bb9816ee92461d1d90e41f52a.svg);
}

.switcher-set .open-total-switcher {
    display: block;
    position: absolute;
    top: 54px;
    right: -52px;
    width: 46px;
    height: 46px;
    background-color: #fff;
    background-image: url(/res/img/component/icon_filter-1c67095866c26ef90e9f1bc5dd296db7.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 14px;
    border-radius: 23px;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2);
    outline: none;
    transition: box-shadow .3s ease;
    z-index: 2;
}

.switcher-set .open-total-switcher:hover {
    background-color: #f7f7f7;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.switcher-set .open-total-switcher.active {
    background-color: #fff;
    background-image: url(/res/img/component/icon_filter_on-d87cd149f12d23b5d94b2e7f9fe1e71c.svg);
}

.switcher-set .open-total-switcher.active:hover {
    background-color: #f7f7f7;
}

.switcher-set .icon-reset {
    position: absolute;
    top: 0;
    right: -52px;
    display: block;
    width: 46px;
    height: 46px;
    background-color: #fff;
    background-image: url(/res/img/component/icon_reset_blod-560fd87cbcf163f40f54cc251499d225.svg);
    border-radius: 23px;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2);
    outline: none;
    transition: box-shadow .3s ease;
    z-index: 1;
}

.switcher-set .icon-reset:hover {
    background-color: #f7f7f7;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.switcher-set > .switcher > fieldset {
    position: absolute;
    top: 48px;
    left: 0;
    display: none;
    width: calc(100% + 105px);
    padding: 15px 0;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    padding: 60px 15px 15px 15px;
    background-color: #fff;
    border: 1px solid #717171;
    z-index: 1;
}

.switcher-set > .switcher:first-of-type > fieldset {
    width: calc(100% + 105px);
}

.switcher-set > .switcher:first-child > fieldset {
    width: calc(100% + 105px);
}

.switcher-set > .switcher:last-child > fieldset {
    left: auto;
    right: 0;
}

.switcher-set > .switcher > fieldset > legend {
    top: 20px;
    left: 20px;
    display: flex;
    align-items: center;
    width: calc(100% - 35px);
    height: 30px;
    color: #272727;
    font-size: 20px;
    font-weight: 500;
    line-height: 30px;
}

.switcher-set > .switcher > fieldset > .switch-set > .switch {
    position: relative;
    width: 50%;
    padding-right: 0;
}

.switcher-set.five > .switcher > fieldset > .switch-set > .switch {
    width: 100%;
}

.switcher-set.six > .switcher > fieldset > .switch-set > .switch {
    width: 100%;
}

.switcher-set > .switcher > fieldset > .switch-set > .switch.long {
    width: 100%;
}

.switcher-set.total-switcher {
    position: relative;
    margin-bottom: 400px;
}

.switcher-set.total-switcher > .switcher > fieldset {
    border-color: #dee3ef;
    height: 380px;
}

@media only all and (max-width: 1480px) {
    .switcher-set > .switcher > fieldset > .switch-set > .switch {
        width: 100%;
    }
}

@media only all and (max-width: 1199px) {
    .switcher-set {
        flex-direction: column;
    }

    .switcher-set .open-total-switcher {
        display: none;
    }

    .switcher-set .icon-reset {
        display: none;
    }

    .switcher-set.three > .switcher,
    .switcher-set.four > .switcher,
    .switcher-set.five > .switcher {
        flex-direction: column;
        width: 100%;
    }

    .switcher-set .switcher:last-child {
        padding-right: 0;
    }

    .switcher-set > .switcher > .head {
        border-bottom: 1px solid #dee3ef;
    }

    .switcher-set > .switcher:last-child > .head {
        border-bottom: 0;
    }

    .switcher-set .switcher .arrow {
        right: 10px;
        border-right: 0;
    }

    .switcher-set > .switcher > fieldset {
        position: relative;
        top: auto;
        left: auto;
        padding-top: 10px;
        border: 0 none;
        width: 100%;
        border-bottom: 1px solid #dee3ef;
    }

    .switcher-set > .switcher:last-child > fieldset {
        border-top: 1px solid #dee3ef;
        border-bottom: 0;
    }

    .switcher-set > .switcher > fieldset > legend {
        display: none;
    }

    .switcher-set > .switcher > fieldset > .switch-set > .switch {
        width: 50%;
    }
}


/*
* chart-null-icon
*/
.chart-null-icon {
    display: flex;
    margin-left: 4px;
}

.chart-null-icon > small {
    display: flex;
    align-items: center;
    min-width: 16px;
    height: 18px;
    line-height: 16px;
    text-align: center;
    font-size: 12px;
    padding: 0 2px;
    border-radius: 2px;
    margin-right: 1px;
    border-radius: 9px;
    padding: 0 4px;
}

.chart-null-icon > small.level-1 {
    color: #ad4d1f;
    border: 1px solid #ad4d1f;
}

.chart-null-icon > small.level-1:after {
    display: inline-block;
    content: '';
    width: 8px;
    height: 8px;
    background-image: url(/res/img/component/icon_delete_brown-b2f8875ecebfa0ccd923a02e071849ca.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 2px;
}

.chart-null-icon > small.level-2 {
    color: #8934fa;
    border: 1px solid #8934fa;
}

.chart-null-icon > small.level-2:after {
    display: inline-block;
    content: '';
    width: 8px;
    height: 8px;
    background-image: url(/res/img/component/icon_delete_purple-96d8179c76bebb98e387bb4753ca19a8.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 2px;
}


/*
* switcher-set
*/
.option-set {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
    background-color: #fff;
    border-bottom: 1px solid #dbe0ec;
    border-top: 1px solid #dbe0ec;
}
.option-set.borderBottomEmpty {
    border-bottom: none;
}
.option-set.apt-price-detail {
    padding-bottom: 0px;
    padding-left: 0px;
    border: 0px;

}

.option-set .option {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-right: 16px;
    border-right: 1px solid #d5dae6;
    margin-top: 10px;
    margin-right: 16px;
}
.option-set .option.apt-price-detail {
    padding: 0px;
    border: 0px;
    margin: 0px 5px;
}
.option-set .option:first-child {
    padding-left: 0;
}

.option-set .option:last-child {
    border-right: 0;
    padding-right: 0;
    margin-right: 0;
}

.option-set .option .standardDt {
    width: 100px;
    font-size : 15px;
    display: inline-block;
    position: relative;
    height: 38px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    vertical-align: middle;
    text-align: left;
    transition: .3s ease-in-out;
    padding-left: 15px;
    cursor: pointer;
    background: url(https://aptgin.com/cdn/res/icon/mapbox/svg/calendar_gray.svg) 95% 55% / 18px no-repeat;
}
.option-set .dropdown {
    margin-right: 10px;
}

.option-set .dropdown-multi {
    margin-right: 10px;
}

.option-set .swung-dash {
    margin-left: -6px;
    margin-right: 4px;
}

.option-set .option > .dropdown:last-child,
.option-set .option > .dropdown-multi:last-child {
    margin-right: 0;
}

.option-set > .right {
    margin-left: auto;
}

.option-set label {
    color: #666;
    font-size: 15px;
    font-weight: 500;
    margin-right: 14px;
}

.option-set label.bullet {
    position: relative;
    padding-left: 10px;
    margin-left: 8px;
}

.option-set label:first-child.bullet {
    margin-left: 0;
}

.option-set label.bullet:before {
    position: absolute;
    top: 6px;
    left: 0;
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    background-color: #846fe6;
}

.option-set label.bullet:before {
    position: absolute;
    top: 6px;
    left: 0;
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    background-color: #846fe6;
}

.option-set .btn-submit {
    display: block;
    min-width: 114px;
    color: #fff;
    font-size: 15px;
    line-height: 38px !important;
    font-weight: 500;
    background: #3d3d3d;
    padding: 0 30px;
    border-radius: 4px !important;
    outline: none;
    transition: background .3s ease-in-out;
    margin-top: 5px;
}

.option-set .btn-submit:hover {
    background: #5e35b1;
}


/*
* dropdown
*/
.dropdown,
.dropdown-multi {
    display: inline-block;
    height: 38px;
    transition: all .5s ease;
    position: relative;
    letter-spacing: -0.6px;
    text-align: left;
    border: 1px solid #dadce0;
    border-radius: 4px;
    box-sizing: border-box;
    transition: border .2s ease-in-out;
}

.dropdown label,
.dropdown-multi label {
    position: absolute;
    top: -9px;
    left: 7px;
    font-size: 13px;
    font-weight: 400;
    font-size: 13px;
    background: #fff;
    padding: 0 5px;
    margin-right: 0;
}

.dropdown > .dropdown-select,
.dropdown-multi > .dropdown-select {
    display: flex;
    align-items: center;
    cursor: pointer;
    width: 100%;
    height: 36px;
    font-weight: 400;
    padding: 0 24px 0 10px;
    border: 1px solid transparent;
    border-radius: 3px;
    transition: border .3s ease-in-out;
}

.dropdown > .dropdown-select > span,
.dropdown-multi > .dropdown-select > span {
    font-size: 15px;
    color: #4c4c4c;
    font-weight: 500;
}

.dropdown:focus,
.dropdown-multi:focus {
    outline: none;
}

.dropdown.active:hover,
.dropdown.active,
.dropdown-multi.active:hover,
.dropdown-multi.active {
    border: 1px solid #8934fa;
}

.dropdown.active:hover label,
.dropdown.active label,
.dropdown-multi.active:hover label,
.dropdown-multi.active label {
    /* color: #8934fa; */
}

.dropdown.active:hover > .dropdown-select,
.dropdown.active .dropdown-select,
.dropdown-multi.active:hover > .dropdown-select,
.dropdown-multi.active .dropdown-select {
    border-color: #8934fa;
}

.dropdown > .dropdown-select:after,
.dropdown-multi > .dropdown-select:after {
    border-bottom: 2px solid #9e9e9e;
    border-right: 2px solid #9e9e9e;
    content: '';
    display: block;
    width: 5px;
    height: 5px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all 0.15s ease-in-out;
}

.dropdown.active > .dropdown-select:after,
.dropdown-multi.active > .dropdown-select:after {
    border-color: #8934fa;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.dropdown > .dropdown-menu {
    position: absolute;
    background-color: #fff;
    width: calc(100% + 2px);
    max-height: 500px;
    left: -1px;
    margin-top: 2px;
    color: #444;
    font-size: 15px;
    overflow: hidden;
    display: none;
    overflow-y: auto;
    -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    z-index: 9;
}

.dropdown > .dropdown-menu {
    padding: 0;
    list-style: none;
    margin-bottom: 20px;
}

.dropdown > .dropdown-menu > li {
    color: #444;
    padding: 8px 10px;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.dropdown > .dropdown-menu > li:hover {
    background-color: #f7f7f7;
}

.dropdown > .dropdown-menu > li:active {
    color: #8934fa;
    background-color: #eae8ff;
}

.dropdown-multi > .dropdown-menu {
    position: absolute;
    display: none;
    flex-direction: row;
    background-color: #fff;
    width: 144px;
    max-height: 240px;
    left: -1px;
    margin-top: 2px;
    color: #444;
    font-size: 15px;
    overflow: hidden;
    overflow-y: auto;
    -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    z-index: 9;
}

.dropdown-multi > .dropdown-menu > ul {
    width: 72px;
    height: 210px;
    overflow-x: hidden;
    overflow-y: scroll;
    text-align: center;
    border-left: 1px solid #e9edf3;
}

.dropdown-multi > .dropdown-menu > ul.dataType {
    width: 100%;
    height: 80px;
    overflow-y: hidden;
}

.dropdown-multi > .dropdown-menu > ul.areaYear {
    width: 50%;
    height: 240px;
    overflow-y: hidden;
}
.dropdown-multi > .dropdown-menu > ul.areaYear.population {
    height: 200px;
}
.dropdown-multi > .dropdown-menu > ul.lvChange {
    width: 100%;
    height: 120px;
}
.dropdown-multi > .dropdown-menu > ul:first-child {
    border-left: 0;
}

.dropdown-multi > .dropdown-menu > ul > li {
    color: #444;
    padding: 12px 10px;
    transition: all .2s ease-in-out;
    cursor: pointer;
}

.dropdown-multi > .dropdown-menu > ul > li:hover {
    background-color: #f7f7f7;
}

.dropdown-multi .dropdown-menu > ul > li:active {
    color: #8934fa;
    background-color: #eae8ff;
}

.dropdown > .dropdown-menu::-webkit-scrollbar,
.dropdown-multi > .dropdown-menu > ul::-webkit-scrollbar {
    width: 5px;
    height: 1px;
}

.dropdown > .dropdown-menu::-webkit-scrollbar-thumb,
.dropdown-multi > .dropdown-menu > ul::-webkit-scrollbar-thumb {
    background: #712cce;
    border: 0px none #ffffff;
}

.dropdown > .dropdown-menu::-webkit-scrollbar-track,
.dropdown-multi > .dropdown-menu > ul::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 4px;
}

/* dropdown.purple */
.dropdown.purple.active:hover,
.dropdown.purple.active {
    color: #fff;
    background-color: #8934fa;
    border-color: #8934fa;
}

.dropdown.purple.active .dropdown-select:after {
    border-color: #fff;
}

/* dropdown.round */
.dropdown.round,
.dropdown-multi.round {
    height: 34px;
    border-radius: 17px;
}

.dropdown.round > .dropdown-select,
.dropdown-multi.round > .dropdown-select {
    height: 32px;
    border-radius: 15px;
}

.dropdown.round > .dropdown-select > span,
.dropdown-multi.round > .dropdown-select > span {
    font-weight: 600;
}


/* dropdown.slim */
.dropdown.slim {
    height: 30px;
    border: 0;
}

.dropdown.slim.active:hover,
.dropdown.slim.active {
    border: 0;
}

.dropdown.slim > .dropdown-select {
    height: 30px;
    padding-left: 6px;
}

.dropdown.slim > .dropdown-select {
    border: 1px solid #e4e4e4;
}

.dropdown.slim > .dropdown-select:after {
    top: 44%;
    right: 10px;
}

.dropdown.slim > .dropdown-menu > li {
    font-size: 14px;
    font-weight: 400;
    padding-top: 6px;
    padding-bottom: 6px;
}

.dropdown.slim > .dropdown-select > span {
    color: #712cce;
}


/* dropdown-multi.slim */
.dropdown-multi.slim {
    height: 30px;
    border: 0;
}

.dropdown-multi.slim.active:hover,
.dropdown-multi.slim.active {
    border: 0;
}

.dropdown-multi.slim > .dropdown-select {
    height: 30px;
    padding-left: 6px;
}

.dropdown-multi.slim > .dropdown-select {
    border: 1px solid #e4e4e4;
}

.dropdown-multi.slim > .dropdown-select:after {
    top: 44%;
    right: 10px;
}

.dropdown-multi.slim > .dropdown-menu li {
    font-size: 14px;
    font-weight: 400;
    padding-top: 6px;
    padding-bottom: 6px;
}

.dropdown-multi.slim > .dropdown-select > span {
    color: #712cce;
}

/* dropdown-multi.right */
.dropdown-multi.right > .dropdown-menu {
    left: auto;
    right: -1px;
}

/* dropdown-custom */
.dropdown > .readonly-dropdown {
    border: 0px;
    padding-left: 10px;
    padding-right: 10px;
    cursor: default;
}

.dropdown > .readonly-dropdown:after {
    content: none;
}

/*
* selection(dropdown)
*/
.selection {
    position: relative;
    font-size: 13px;
}

.selection > .btn-selection {
    position: relative;
    padding-right: 12px;
    outline: none;
}

.selection > .btn-selection:after {
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    content: '';
    display: block;
    width: 4px;
    height: 4px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 2px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: all 0.15s ease-in-out;
}

.selection > .btn-selection.active:after {
    border-color: #555;
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.selection > .btn-selection > span {
    color: #555;
    font-size: 13px;
    letter-spacing: -0.6px;
    outline: none;
}

.selection > .selection-list {
    display: none;
    position: absolute;
    top: 26px;
    left: 0;
    min-width: 80px;
    z-index: 10;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 10px 0;
    border-radius: 1px;
    background-color: white;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .3), 0 1px 3px 0 rgba(0, 0, 0, .1);
}

.selection > .selection-list > li {
    color: #333;
    font-size: 13px;
    line-height: 24px;
    padding: 0 15px;
    cursor: pointer;
}

.selection > .selection-list > li:hover {
    font-weight: 500;
}

.selection > .selection-list > li.active {
    color: #8934fa;
    font-weight: 500;
}


/*
* legend
*/
.legend {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
}

.legend > .label {
    display: flex;
    align-items: center;
    height: 34px;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    margin-right: 6px;
}

/* color-set */
.color-set {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 34px;
    color: #8997bd;
    font-size: 13px;
    flex-wrap: wrap;
}

.color-set > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 34px;
    margin-left: 10px;
}

.color-set > *:first-child {
    margin-left: 0;
}

.color-set > *:before {
    display: block;
    content: '';
    width: 12px;
    height: 12px;
    background-color: #555;
    border-radius: 6px;
    margin-right: 3px;
}

.color-set > *.none:before {
    width: 10px;
    height: 10px;
    border: solid 1px #8997bd;
    background-color: #fff;
}

.color-set > *.blue:before {
    background-color: #80abd7;
}

.color-set > *.green:before {
    background-color: #5ecda2;
}

.color-set > *.yellow:before {
    background-color: #fbca4d;
}

.color-set > *.red:before {
    background-color: #ed6c69;
}

.color-set > *.orange:before {
    background-color: #e68035;
}

.color-set > *.dark:before {
    background-color: #111;
}

.color-set > *.n1:before {
    background-color: #0128f7;
}

.color-set > *.n2:before {
    background-color: #405df9;
}

.color-set > *.n3:before {
    background-color: #8093fb;
}

.color-set > *.n4:before {
    background-color: #bfc9fd;
}

.color-set > *.n5:before {
    background-color: #fdbebe;
}

.color-set > *.n6:before {
    background-color: #fb7e7f;
}

.color-set > *.n7:before {
    background-color: #f93f41;
}

.color-set > *.n8:before {
    background-color: #f70104;
}
.color-set > *.up:before {
    background-color: #ff8c8c;
}
.color-set > *.down:before {
    background-color: #80abd7;
}

@media only all and (max-width: 840px) {
    .color-set > * {
        padding-top: 5px;
        padding-bottom: 5px;
        margin-left: 0;
        margin-right: 10px;
    }
}

/* legend-set */
.legend-set {
    position: relative;
    width: calc(100% - 70px);
    min-height: 22px;
    padding-left: 86px;
    margin-top: -6px;
}

.legend-set:after {
    display: block;
    content: '';
    clear: both;
}

.legend-set > .label {
    position: absolute;
    top: 0;
    left: 0;
    font-size: 15px;
    font-weight: 500;
    color: #333;
    line-height: 22px;
    padding-left: 8px;
    margin-right: 6px;
}

.legend-set > ul {
    margin-top: -3px;
}

.legend-set > .label:before {
    position: absolute;
    top: 5px;
    left: 0;
    display: block;
    content: '';
    width: 4px;
    height: 12px;
    background-color: #606060;
    border-radius: 2px;
}

.legend-set > .btn-collapse {
    position: absolute;
    top: 2px;
    left: 40px;
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    line-height: 20px;
    margin-right: 6px;
    outline: none;
    border-radius: 3px;
    background-color: #99bade;
    padding-right: 4px;
    padding-left: 4px;
}

.legend-set .color-set {
    position: relative;
    float: left;
    height: auto;
    color: #7080ad;
    min-height: 22px;
    margin-right: 20px;
    margin-top: 3px;
    margin-bottom: 3px;
}

.legend-set .color-set > * {
    min-width: 66px;
    height: auto;
}

.legend-set .color-set:after {
    position: absolute;
    top: 4px;
    right: -10px;
    display: block;
    content: '';
    width: 1px;
    height: 14px;
    background-color: #cbd2e2;
}

.legend-set .color-set:last-child:after {
    display: none;
}

.legend-set .color-set > .label {
    color: #333;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.4px;
    min-width: 55px;
}

.legend-set .color-set > .label:before {
    display: none;
}

.legend-set .color-set span:nth-child(2) {
    margin-left: 6px;
}

@media only all and (max-width: 1199px) {
    .legend-set .color-set {
        width: 100%;
    }

    .legend-set .color-set:after {
        display: none;
    }
}

@media only all and (max-width: 999px) {
    .legend-set {
        width: 100%;
        padding-top: 30px;
        padding-left: 0;
        padding-bottom: 22px;
    }

    .legend-set.collapsed {
        padding-top: 22px;
        padding-bottom: 0;
    }
}

@media only all and (max-width: 599px) {
    .color-set > * {
        min-width: inherit;
    }

    .color-set > .label {
        width: 100%;
    }

    .legend-set .color-set span:nth-child(2) {
        margin-left: 0;
    }
}


/*
* map-legend
*/
.map-legend {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: block;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    background-color: #fff;
    padding: 4px 10px;
    border: 1px solid #dae7f2;
    z-index: 1;
}

.map-legend > .column-list {
    display: flex;
    /* flex-direction: column; */
    flex-flow: row nowrap;
    min-height: 34px;
    color: #888;
    font-size: 12px;
    flex-wrap: wrap;
}

.map-legend > .column-list > li {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    /* padding: 6px; */
    padding: 5px 6px 5px 4px;
}

.map-legend > .column-list > li > i.cube {
    display: block;
    content: '';
    width: 12px;
    height: 12px;
    background-color: #555;
    /* margin-right: 6px; */
    margin-right: 3px;
}

@media only all and (max-width: 840px) {
    .map-legend {
        top: 10px;
        right: 10px;
    }
}


/*
* alert
*/
.alert {
    position: relative;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.2px;
    padding: 12px 20px;
    border: 1px solid transparent;
    border-radius: 4px;
    margin: 12px 0;
}

.alert > p {
    position: relative;
    padding-left: 10px;
}

.alert > p.inline-p {
    display: inline;
    margin-right: 5px;
}

.alert > p:before {
    position: absolute;
    top: 8px;
    left: 0;
    display: block;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 2px;
}

.alert.blue {
    color: #14559b;
    background-color: #f0f8ff;
    border-color: #daecff;
}

.alert.blue > p:before {
    background: #5382b3;
}

.alert.cafri {
    color: #226975;
    background-color: #eef8fa;
    border-color: #d5e7ea;
}

.alert.cafri > p:before {
    background: #779ca3;
}

.alert.red {
    color: #83272f;
    background-color: #fff1f2;
    border-color: #ead5d6;
}

.alert.red > p:before {
    background: #c88a8d;
}

/*
* table-basic
*/
.table-basic {
    width: 100%;
}

.table-basic > thead {
    border: 1px solid #ccd4e1;
}

.table-basic > thead.bold {
    border-top: 2px solid #303f9f;
}

.table-basic th,
.table-basic > thead > tr > td {
    height: 42px;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.8px;
    text-align: center;
    padding: 10px;
    border-top: 0;
    border-left: 1px solid #ccd4e1;
    border-bottom: 1px solid #ccd4e1;
    background-color: #f4f8fd;
}

.table-basic > tbody.bold {
    border-top: 2px solid #303f9f;
}

.table-basic > tbody > tr {
    border-bottom: 1px solid #ccd4e1;
}

.table-basic > tbody > tr > td {
    color: #444;
    font-size: 15px;
    font-weight: 400;
    text-align: center;
    padding: 10px 8px;
    border-left: 1px solid #ccd4e1;
    border-right: 1px solid #ccd4e1;
}

.modal-container .two-three > table:nth-child(1) {
    width: calc(40% - 3px);
    margin-right: 6px;
}

.modal-container .two-three > table:nth-child(2) {
    width: calc(60% - 3px);
}

@media (max-width: 1099px) {
    .modal-container .two-three > table:nth-child(1) {
        width: 100%;
        margin-right: 0;
    }

    .modal-container .two-three > table:nth-child(2) {
        width: 100%;
        margin-top: 20px;
    }

    .table-basic > colgroup > col:first-child {
        width: 25%;
    }

    .table-basic th,
    .table-basic > thead > tr > td,
    .table-basic > tbody > tr > td {
        font-size: 14px;
        padding-left: 4px;
        padding-right: 4px;
    }
}


/*
* dl-table-basic
*/
.dl-table-basic {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    border-top: 2px solid #303f9f;
}

.dl-table-basic > dt {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    width: 13%;
    color: #333;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.6px;
    text-align: center;
    padding: 10px;
    border-top: 0;
    border-left: 1px solid #ccd4e1;
    border-bottom: 1px solid #ccd4e1;
    background-color: #f4f8fd;
}

.dl-table-basic > dd {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 37%;
    color: #444;
    font-size: 15px;
    font-weight: 400;
    padding: 10px 8px;
    border-left: 1px solid #ccd4e1;
    border-bottom: 1px solid #ccd4e1;
}

.dl-table-basic > dd:nth-of-type(even) {
    border-right: 1px solid #ccd4e1;
}

.dl-table-basic.line3 > dt {
    width: 8%;
}

.dl-table-basic.line3 > dd {
    width: 12%;
}

.dl-table-basic.line3 > dt:nth-of-type(4n+1) {
    width: 8%;
}

.dl-table-basic.line3 > dd:nth-of-type(4n+1) {
    width: 32%;
}

.dl-table-basic.line3 > dd:nth-of-type(even) {
    border-right: none;
}

.dl-table-basic.line3 > dd:nth-of-type(4n) {
    border-right: 1px solid #ccd4e1;
}

.dl-table-basic.line4 > dt {
    width: 10%;
}

.dl-table-basic.line4 > dd {
    width: 8%;
}

.dl-table-basic.line4 > dt:nth-of-type(5n+1) {
    width: 10%;
}

.dl-table-basic.line4 > dd:nth-of-type(5n+1) {
    width: 18%;
}

.dl-table-basic.line4 > dd:nth-of-type(even) {
    border-right: none;
}

.dl-table-basic.line4 > dd:nth-of-type(5n) {
    border-right: 1px solid #ccd4e1;
}

.dl-table-basic.line5 > dt {
    width: 10%;
    min-height: 35px;
    padding: 0px;
}
.dl-table-basic.line5 > dd {
    width: 10%;
    padding: 7px 0px;
}
.dl-table-basic.line5 > dt:nth-of-type(5n+1) {
    width: 7%;
}
.dl-table-basic.line5 > dd:nth-of-type(5n+1) {
    width: 13%;
}
.dl-table-basic.line5 > dd:nth-of-type(even) {
    border-right: none;
}

.dl-table-basic.line5 > dd:nth-of-type(5n) {
    border-right: 1px solid #ccd4e1;
}
.dl-table-basic.line5 > dt {
    width: 7%;
}

.dl-table-basic.line5 > dd {
    width: 13%;
}


.dl-table-basic.line7 > dt:nth-of-type(7n+1) {
    width: 6%;
}

.dl-table-basic.line7 > dd:nth-of-type(7n+1) {
    width: 13%;
}

.dl-table-basic.line7 > dd:nth-of-type(even) {
    border-right: none;
}

.dl-table-basic.line7 > dd:nth-of-type(7n) {
    border-right: 1px solid #ccd4e1;
}


@media (max-width: 1099px) {
    .dl-table-basic > dt {
        width: 25%;
        font-size: 14px;
    }

    .dl-table-basic > dd {
        width: 75%;
        font-size: 14px;
    }

    .dl-table-basic:not(.line3) > dd:nth-of-type(odd) {
        border-right: 1px solid #ccd4e1;
    }

}


/*
* table-blue
*/
.table-blue {
    width: 100%;
    font-size: 14px;
    color: #333;
}

.table-blue > thead {
    color: #fff;
    background-color: #5e78d8;
}

.scroll-tbody {
    min-height: 100px;
    overflow-y: scroll;
    overflow-y: scroll;
    -ms-overflow-style: none;
}

.scroll-tbody::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.table-blue > tbody > tr {
    border-bottom: 1px solid #dee3eb;
}

.table-blue > thead > tr > td,
.table-blue > thead > tr > th {
    text-align: center;
    font-weight: 500;
    letter-spacing: -0.6px;
    padding: 6px 10px;
    border-top: 0;
    border-left: 1px solid #6a83df;
}

.table-blue > tbody > tr > td,
.table-blue > tbody > tr > th {
    text-align: center;
    letter-spacing: -0.4px;
    line-height: 20px;
    padding: 5px 10px;
    border-left: 1px solid #dee3eb;
}

.table-blue > tbody > tr > td:first-child,
.table-blue > tbody > tr > th:first-child,
.table-blue > thead > tr > td:first-child,
.table-blue > thead > tr > th:first-child {
    border-left: 0;
}


/*
* realprice
*/
.modal-container .row {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding-left: 20px;
    padding-right: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.modal-container .row.apt-group {
    margin-top: 0px;
}
.modal-container .modal-description {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    justify-content: space-between;
}
.modal-container .modal-alert{
    top: -12px;
    padding: 8px 20px;
}
.row > .real-price {
    width: calc(33.333333% - 4px);
    color: #333;
    font-size: 15px;
    font-weight: 500;
    line-height: 24px;
    margin-left: 6px;
}

.row > .real-price:nth-child(3n + 1) {
    margin-left: 0;
}

.real-price > li.title {
    align-items: center;
    height: 32px;
    color: #fff;
    text-align: center;
    font-weight: 400;
    background-color: #5e78d8;
    padding: 0;
    border: 0;
}

.real-price > li.title > div {
    border-left: 1px solid #4862c1;
}

.real-price > li.title > div:first-child {
    color: #fff;
    font-weight: 400;
    border-left: 0;
}

.real-price > li {
    display: flex;
    flex-direction: row;
    padding-top: 12px;
    padding-bottom: 12px;
    border-right: 1px solid #ccd4e1;
    border-bottom: 1px solid #ccd4e1;
    border-left: 1px solid #ccd4e1;
}

.real-price > li > div {
    width: 40%;
    padding-left: 5px;
    padding-right: 5px;
    border-left: 1px solid #ccd4e1;
}

.real-price > li > div:first-child {
    width: 20%;
    color: #5e78d8;
    font-weight: 500;
    text-align: center;
    border-left: 0;
}

.real-price > li > div > .high-price,
.real-price > li > div > .low-price {
    position: relative;
    display: block;
    text-align: right;
    font-weight: 600;
    line-height: 25px;
    padding-right: 5px;
}

.real-price > li > div > .high-price:hover {
    background-color: #ffefe4;
}

.real-price > li > div > .low-price:hover {
    background-color: #eaeff9;
}

.real-price > li > div > .high-price > i {
    position: absolute;
    top: 3px;
    left: 4px;
    display: block;
    width: 32px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 15px;
    background: #ff6658;
    border: 2px solid #ff6658;
    border-radius: 20px;
}

.real-price > li > div > .low-price > i {
    position: absolute;
    top: 3px;
    left: 4px;
    display: block;
    width: 32px;
    color: #fff;
    text-align: center;
    font-size: 12px;
    font-weight: 500;
    font-style: normal;
    line-height: 15px;
    background: #8795ca;
    border: 2px solid #8795ca;
    border-radius: 20px;
}

.real-price > li > div > ul {
    margin-top: 5px;
}

.real-price > li > div > ul > li {
    position: relative;
    padding-right: 50px;
    padding-left: 5px;
}

.real-price .cancel {
    position: relative;
    padding-bottom: 18px;
}

.real-price .cancel::before {
    content: "";
    display: block;
    position: absolute;
    top: 12px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: red;
}

.real-price .cancel b {
    position: absolute;
    right: 5px;
    bottom: 0;
    color: red;
    font-size: 12px;
    font-weight: 500;
}

.real-price .renew {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: 3px;
    background: #97afe626;
}

.real-price .renew b {
    position: absolute;
    top: 20px;
    right: 5px;
    bottom: 0;
    color: #3e7fe5;
    font-size: 12px;
}

.real-price .renew.up b {
    color: red;
}

.real-price .direct {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: 3px;
    background: #97afe626;
}

.real-price .direct b {
    position: absolute;
    top: 20px;
    right: 5px;
    bottom: 0;
    color: #b73dd1;
    font-size: 12px;
}

.apt-notice {
    position: relative;
    background-color: #fff1f2;
    border-color: #ead5d6;
    margin-left: auto;
    padding: 5px 10px;
    margin-right: 18px;
}

.apt-notice p {
    position: relative;
    color: #83272f;
    padding-left: 10px;
    line-height: 18px;
    font-size: 15px;
}

.apt-notice p::before {
    position: absolute;
    top: 8px;
    left: 0;
    display: block;
    content: '';
    width: 4px;
    height: 4px;
    border-radius: 2px;
    background: #c88a8d;
}

.apt-notice p span.regist, .apt-notice p span.unregist {
    position: relative;
    padding-left: 12px;
}

.apt-notice p span.regist::before {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    width: 10px;
    height: 10px;
    background-color: #3e7fe5;
}

.apt-notice p span.unregist::before {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: 0px;
    width: 10px;
    height: 10px;
    background-color: red;
}

.apt-notice p span.tag-nm i{
    font-style: normal;
    padding: 0 4px 2px 3px;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    text-align: center;
    line-height: 21px;
    font-size: 14px;
}

.apt-notice p span.tag-nm.gm i{
    background-color: #FF0060;
}
.apt-notice p span.tag-nm.sag i{
    background-color: #0079FF;
}
.apt-notice p span.tag-nm.ryd i{
    background-color: #FBA834;
}
.apt-notice p span.tag-nm.sl i{
    background-color: #00DFA2;
}

.real-price > li > div > ul > li:hover {
    background-color: #e7f5ff;
}

/* .real-price .lot-solid {
    display: inline-block;
    margin-right: 3px;
    padding: 0 4px;
    color: #fff;
    border: solid 1px #e7a811;
    border-radius: 2px;
    font-size: 12px;
    height: 15px;
    line-height: 13px;
    font-style: inherit;
    background-color: #f9b921;
} */

.real-price .lot-solid {
    padding-left: 30px;
}

.lot-solid::after {
    content: "분";
    display: inline-block;
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    color: #fff;
    border: solid 1px #e7a811;
    border-radius: 2px;
    font-weight: bold;
    font-size: .7rem;
    line-height: 15px;
    text-align: center;
    background-color: #f9b921;
}

.real-price > li > div > ul > li > span {
    position: absolute;
    top: 0;
    right: 5px;
    color: #888;
    font-size: 14px;
    font-weight: 400;
}

.real-price > li > div > ul > li span.regist {
    padding-right: 15px;
}

.real-price > li > div > ul > li span.regist::after {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: #3e7fe5;
}

.real-price > li > div > ul > li span.unregist {
    padding-right: 10px;
}

.real-price > li > div > ul > li span.unregist::after {
    content: "";
    display: block;
    position: absolute;
    top: 7px;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: red;
}

.real-price > li > div > ul > li span.tag-nm{
    padding-right: 20px;
}

.real-price > li > div > ul > li span.tag-nm i{
    position: absolute;
    display: block;
    width: 18px;
    top: 3px;
    right: 0px;
    left: auto;
    color: #fff;
    padding: 0px 2px 2px 2px;
    font-size: 11px;
    text-align: center;
    font-weight: 500;
    font-style: normal;
    line-height: 15px;
    border-radius: 3px;
}

.real-price > li > div > ul > li span.tag-nm.gm i{
    background-color: #FF0060;
}

.real-price > li > div > ul > li span.tag-nm.sag i{
    background-color: #0079FF;
}

.real-price > li > div > ul > li span.tag-nm.ryd i{
    background-color: #FBA834;
}

.real-price > li > div > ul > li span.tag-nm.sl i{
    background-color: #00DFA2;
}

.real-price > li > div > ul > li span.apt-dong-nm {
    float: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(7 * 1ch);
    padding-right: 5px;
}

.modal-container .row > .more {
    display: block;
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    background-color: #a8aec5;
    margin-top: 20px;
    outline: none;
}

@media (max-width: 1099px) {
    .modal-container .row {
        padding-left: 10px;
        padding-right: 10px;
    }

    .row > .real-price {
        width: 100%;
        margin-top: 20px;
    }

    .row > .real-price:first-of-type {
        margin-top: 0;
    }

    .row > .real-price {
        margin-left: 0;
    }
}


/*
* note-page
*/
.note-container {
    position: relative;
    min-height: 100vh;
    background-color: #edeff3;
    background-position: 100% 100%;
    background-repeat: no-repeat;
    background-size: 400px 400px;
}

.note-container > h1 {
    position: absolute;
    top: 20px;
    left: 25px;
    width: 160px;
    height: 35px;
    background-image: url(/res/img/common/logo_ginpre-8c62d23b662bbe098a33b7498a08f47a.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: -5000rem;
    z-index: 20;
}

.note-page {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 580px;
    width: 300px;
    font-size: 15px;
    line-height: 22px;
    letter-spacing: -0.5px;
    background: #fff;
    -webkit-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 0px 20px 3px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.note-page h2 {
    color: #fff;
    font-size: 20px;
    text-align: center;
    padding: 15px 15px 15px 44px;
    background: -webkit-linear-gradient(45deg, #303f9f, #7b1fa2);
    background: linear-gradient(45deg, #303f9f, #7b1fa2);
    background-size: 150%;
}

.note-page h2:before {
    position: absolute;
    top: 13px;
    left: 10px;
    display: block;
    content: '';
    width: 34px;
    height: 34px;
    border-radius: 17px;
    background-image: url(/res/img/component/icon_clip_white-c1106c913df04b7f0f11a72f82e4eb98.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px;
    background-color: transparent;
}

.note-page > ul {
    position: relative;
    padding: 16px 20px;
    border-radius: 8px;
    height: 520px;
    overflow-x: hidden;
    overflow-y: auto;
}

.note-page > ul:before {
    position: fixed;
    top: 60px;
    left: 0;
    display: block;
    width: calc(100% - 18px);
    height: 20px;
    content: '';
    background-color: #fff;
    z-index: 1;
}

.note-page > ul:after {
    position: fixed;
    left: 0;
    bottom: 0;
    display: block;
    width: calc(100% - 18px);
    height: 20px;
    content: '';
    background-color: #fff;
    z-index: 1;
}

.note-page > ul > li {
    position: relative;
    color: #333;
    font-size: 14px;
    line-height: 22px;
    padding-top: 32px;
}

.note-page > ul > li > b {
    position: absolute;
    top: 11px;
    left: 0;
    font-size: 15px;
    font-weight: 600;
    padding-left: 10px;
}

.note-page > ul > li > b:before {
    position: absolute;
    top: 5px;
    left: 0;
    display: block;
    content: '';
    width: 4px;
    height: 13px;
    background-color: #8133dc;
    border-radius: 2px;
}

.note-page > ul > li > div {
    border-bottom: 1px dotted #c5ccd8;
    padding-top: 10px;
    padding-bottom: 10px;
}

.note-page > ul > li > div > p {
    position: relative;
    margin-bottom: 8px;
}

.note-page > ul > li > div > p:last-child {
    margin-bottom: 0;
}

.note-page > ul > li > .region {
    font-weight: 500;
}

.note-page > ul > li > .period {
    display: flex;
    font-weight: 500;
}

.note-page > ul > li > .period > p {
    flex: 1;
}

.note-page > ul > li > .period > p > span {
    font-size: 12px;
    font-weight: 400;
    padding: 1px 4px;
    border-radius: 12px;
    background-color: #d0dcf1;
    margin-right: 3px;
}

.note-page > ul > li > .details > p > span {
    font-size: 12px;
    padding: 1px 4px;
    border-radius: 12px;
    background-color: #eff2f7;
    margin-right: 3px;
}

.note-page > ul > li > .details > p > b {
    font-weight: 600;
    color: #343e9f;
}

@media only all and (max-width: 699px) {
    .note-container > h1 {
        display: none;
    }

    .note-page {
        width: 100%;
        height: 100%;
        overflow-x: hidden;
        overflow-y: auto;
    }

    .note-container:before,
    .note-container:after {
        display: none;
    }
}


/*
* fixed-buttons
*/
.fixed-buttons {
    position: fixed;
    top: 95px;
    right: 0;
    z-index: 20;
}

.wrapper.fixed .fixed-buttons {
    top: 46px;
}

.fixed-buttons > li > button {
    margin-bottom: 14px;
}

@media only all and (max-width: 1199px) {
    .fixed-buttons {
        display: none;
    }
}

/* fixed-buttons > li > btn-aside-filter */
.btn-aside-filter {
    width: 46px;
    height: 46px;
    background: #ff4081;
    background-size: 200%;
    outline: none;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .1), 0 6px 30px 5px rgba(0, 0, 0, .1), 0 8px 10px -7px rgba(0, 0, 0, .1);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .1), 0 6px 30px 5px rgba(0, 0, 0, .1), 0 8px 10px -7px rgba(0, 0, 0, .1);
    transition: box-shadow .3s ease-out;
}

.btn-aside-filter:hover {
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.btn-aside-filter > span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 46px;
    height: 46px;
    background-image: url(/res/img/component/icon_filter_white-2f72f90f674b7d7189f16887c348de8c.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 14px;
}

@media only all and (max-width: 1199px) {
    .btn-aside-filter {
        display: none;
    }
}

/* fixed-buttons > li > btn-fluid */
.btn-fluid {
    position: relative;
    display: none;
    width: 46px;
    height: 46px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    outline: none;
    background: -webkit-linear-gradient(45deg, #303f9f, #7b1fa2);
    background: linear-gradient(45deg, #303f9f, #7b1fa2);
    background-position: right;
    background-size: 200%;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .1), 0 6px 30px 5px rgba(0, 0, 0, .1), 0 8px 10px -7px rgba(0, 0, 0, .1);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .1), 0 6px 30px 5px rgba(0, 0, 0, .1), 0 8px 10px -7px rgba(0, 0, 0, .1);
    transition: box-shadow .3s ease-out;
}

.btn-fluid:hover {
    background-position: left;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.btn-fluid > .on {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 46px;
    height: 46px;
    background-image: url(/res/img/common/icon_full_screen-46a51e20c4cf7953d5b5b06e26d3ed10.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    text-indent: -5000rem;
}

.btn-fluid > .off {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    background-image: url(/res/img/common/icon_full_screen_exit-a24c40d6934cb637a5cb3bd2c9eed533.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    text-indent: -5000rem;
}

@media only all and (min-width: 1569px) {
    .btn-fluid {
        display: block;
    }
}

/* fixed-buttons > li > btn-note */
.btn-note {
    position: relative;
    display: block;
    width: 46px;
    height: 46px;
    background-color: #fff;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .05), 0 6px 30px 5px rgba(0, 0, 0, .05), 0 8px 10px -7px rgba(0, 0, 0, .1);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .05), 0 6px 30px 5px rgba(0, 0, 0, .05), 0 8px 10px -7px rgba(0, 0, 0, .1);
    outline: none;
    transition: box-shadow .3s ease;
}

.btn-note:hover {
    background-position: left;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.btn-note > span {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 46px;
    height: 46px;
    background-image: url(/res/img/component/icon_clip-219d1cbbbdcbe59cd8c90723ca2ef760.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px;
}

/* btn-modal-fluid */
.btn-modal-fluid,
.wrapper.fixed .btn-modal-fluid {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 12px;
    width: 46px;
    height: 46px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    font-family: "Roboto", sans-serif;
    font-weight: 500;
    border-radius: 25px;
    outline: none;
    z-index: 1060;
    background: -webkit-linear-gradient(45deg, #303f9f, #7b1fa2);
    background: linear-gradient(45deg, #303f9f, #7b1fa2);
    background-position: right;
    background-size: 200%;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .1), 0 6px 30px 5px rgba(0, 0, 0, .1), 0 8px 10px -7px rgba(0, 0, 0, .1);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .1), 0 6px 30px 5px rgba(0, 0, 0, .1), 0 8px 10px -7px rgba(0, 0, 0, .1);
    transition: box-shadow .3s ease-out;
}

.btn-modal-fluid:hover {
    background-position: left;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.btn-modal-fluid > .on {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    background-image: url(/res/img/common/icon_full_screen-46a51e20c4cf7953d5b5b06e26d3ed10.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    text-indent: -5000rem;
}

.btn-modal-fluid > .off {
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 46px;
    background-image: url(/res/img/common/icon_full_screen_exit-a24c40d6934cb637a5cb3bd2c9eed533.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    text-indent: -5000rem;
}

/* btn-top-go */
.btn-top-go {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 10px;
    width: 46px;
    height: 46px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 14px;
    font-family: "Roboto", Roboto, sans-serif;
    font-weight: 500;
    background: #3d3d3d;
    border-radius: 23px;
    z-index: 20;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2);
    transition: .3s ease-out;
}

.btn-top-go:hover {
    opacity: 1;
    background: #000;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

@media only all and (max-width: 1199px) {
    .btn-top-go {
        bottom: 60px;
        -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    }
}

/* btn-mobile-filter */
.btn-mobile-filter {
    display: none;
    position: fixed;
    top: 85px;
    right: 15px;
    width: 46px;
    height: 46px;
    background: -webkit-linear-gradient(45deg, #303f9f, #7b1fa2);
    background: linear-gradient(45deg, #303f9f, #7b1fa2);
    background-position: right;
    background-size: 200%;
    border-radius: 24px;
    outline: none;
    -webkit-box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2);
    box-shadow: 0 16px 24px 2px rgba(0, 0, 0, .14), 0 6px 30px 5px rgba(0, 0, 0, .12), 0 8px 10px -7px rgba(0, 0, 0, .2);
    /* transition: .3s ease-out; */
    transition: none;
    z-index: 20;
}

.btn-mobile-filter:hover {
    background-position: left;
    -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

@media only all and (max-width: 1199px) {
    .btn-mobile-filter {
        right: auto;
        /* left: 10px; */
        right: 10px;
        /* bottom: 60px; */
        top: 65px;
        display: block;
        border-radius: 25px;
        margin-right: 0;
        -webkit-box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
        z-index: 120;
    }

    .btn-mobile-filter .icon-filter {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: block;
        width: 46px;
        height: 46px;
        background-image: url(/res/img/component/icon_filter_white-2f72f90f674b7d7189f16887c348de8c.svg);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 15px 14px;
        text-indent: -5000rem;
    }
}


/*
* sticker
*/
.sticker-st01 {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 160px);
    height: auto;
    margin-left: 22px;
    margin-top: 0;
}

.sticker-st01 > p {
    font-size: 14px;
    color: #7080ad;
    letter-spacing: -0.2px;
    line-height: 26px;
    margin-right: 6px;
}

.sticker-st01 > p > span {
    margin-right: 2px;
}

.title-area.bold > .sticker-st01 {
    margin-left: 0;
}

.sticker-st02 {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% - 160px);
    height: auto;
    margin-top: 0;
}

.sticker-st02 > li {
    font-size: 14px;
    color: #333;
    letter-spacing: -0.2px;
    line-height: 25px;
    margin-right: 6px;
}

.sticker-st02 > li .label {
    font-weight: 600;
    margin-right: 4px;
}

.sticker-st02 > li.date {
    display: flex;
    align-items: center;
}

.sticker-st02 > li.date > .label {
    margin: 0;
}

.sticker-st02 > li.date strong {
    display: inline-block;
    height: 20px;
    line-height: 20px;
    font-size: 12px;
    font-weight: 400;
    padding: 1px 4px;
    border-radius: 12px;
    background-color: #d0dcf1;
    margin-left: 4px;
    margin-right: 2px;
}

.sticker-st02 > li.detail {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    min-height: 24px;
    padding-left: 68px;
}

.sticker-st02 > li.detail > div {
    display: flex;
    align-items: center;
}

.sticker-st02 > li.detail > div > p {
    margin-left: 6px;
}

.sticker-st02 > li.detail > div > p:first-child {
    margin-left: 0;
}

.sticker-st02 > li.detail > .label {
    position: absolute;
    top: 0;
    left: 0;
}

.sticker-st02 > li.detail > div:after {
    display: inline-block;
    content: '/';
    margin: 0 8px;
}

.sticker-st02 > li.detail > div:last-of-type:after {
    display: none;
}

.sticker-st02 > li.detail strong {
    display: inline-block;
    height: 20px;
    font-size: 12px;
    line-height: 20px;
    font-weight: 400;
    padding: 1px 4px;
    border-radius: 12px;
    background-color: #eff2f7;
    margin-right: 3px;
}

.sticker-st02 > li.detail em {
    font-weight: 500;
    color: #343e9f;
}


/*
* nav-tabs
*/
.nav-tabs-wrap {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #dadce0;
    border-bottom: 1px solid #dadce0;
    background: #fff;
}

.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.nav-tabs li {
    position: relative;
    margin-top: 1px;
}

.nav-tabs li:after {
    position: absolute;
    left: 0;
    bottom: -1px;
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background: #dadce0;
}

.nav-tabs li.active > a {
    color: #111;
    font-weight: 600;
    background: #fff;
}

.nav-tabs li.active:before {
    position: absolute;
    top: -1px;
    left: -1px;
    display: block;
    content: '';
    width: calc(100% + 2px);
    height: 2px;
    background: #8f55e2;
    z-index: 1;
}

.nav-tabs:not([class*=col-5]) li.active::after {
    background-color: #fff;
}

.nav-tabs.col-8 li {
    width: calc(12.5% + 1px);
    background: #fff;
    border-left: 1px solid #dadce0;
    border-right: 1px solid #dadce0;
    margin-left: -1px;
}

.nav-tabs.col-6 li {
    width: calc(16.666% + 1px);
    background: #fff;
    border-left: 1px solid #dadce0;
    border-right: 1px solid #dadce0;
    margin-left: -1px;
}

.nav-tabs.col-5 li {
    width: calc(20% + 1px);
    background: #fff;
    border-left: 1px solid #dadce0;
    border-right: 1px solid #dadce0;
    margin-left: -1px;
}

.nav-tabs.col-4 li {
    width: calc(25% + 1px);
    background: #fff;
    border-left: 1px solid #dadce0;
    border-right: 1px solid #dadce0;
    margin-left: -1px;
}
.nav-tabs.col-3.saveList li {
    width: calc(33.3%);
    background: #fff;
    border-left: 1px solid #dadce0;
    border-right: 1px solid #dadce0;
}
.nav-tabs li > a {
    display: block;
    width: 100%;
    color: #999;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    line-height: 24px;
    letter-spacing: -0.4px;
    height: 48px;
    background: #fff;
    padding: 12px 0;
    cursor: pointer;
}
.nav-tabs.col-3.saveList li > div {
    display: block;
    width: 100%;
    color: #999;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    line-height: 24px;
    letter-spacing: -0.4px;
    height: 48px;
    background: #fff;
    padding: 12px 0;
    cursor: pointer;
}
@media only all and (max-width: 1199px) {
    .nav-tabs-wrap {
        background: none;
        border-top: 0;
        border-bottom: 0;
    }

    .nav-tabs {
        justify-content: flex-start;
        padding-left: 6px;
        padding-right: 6px;
    }

    .nav-tabs.col-8 li {
        width: calc(50% - 1px);
        margin-right: 4px;
        margin-bottom: 6px;
    }

    .nav-tabs.col-8 li:nth-child(even) {
        margin-right: 0;
    }
}

@media only all and (max-width: 599px) {
    .nav-tabs {
        margin-top: 6px;
    }
}

/*
* sub-tabs
*/
.sub-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    margin-bottom: 30px;
}

.sub-tabs li {
    position: relative;
}

.sub-tabs li.active > a {
    font-weight: 600;
    background: #fff;
}

.sub-tabs.col-8 li {
    width: calc(12.5% + 1px);
    background: #fff;
    border-left: 1px solid #dadce0;
    border-right: 1px solid #dadce0;
    margin-left: -1px;
}

.sub-tabs li > a {
    display: block;
    width: 100%;
    color: #111;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    line-height: 24px;
    letter-spacing: -0.4px;
    height: 34px;
    background: #fff;
    padding: 5px 0;
}

.sub-tabs li.active > a {
    color: #712cce;
    font-weight: 600;
    background: #fff;
}

@media only all and (max-width: 1199px) {
    .sub-tabs.col-8 li {
        width: calc(50% - 1px);
    }

    .sub-tabs.col-8 li:first-child {
        margin-left: 0;
    }

    .sub-tabs.col-8 li:nth-child(even) {
        width: calc(50% + 1px);
    }
}


/*
* bbs-filter
*/
.bbs-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    background-color: #f3f6fb;
    border: 1px solid #e6eaf0;
    border-radius: 4px;
    margin: 20px 0;
}

.bbs-filter .category-list {
    display: flex;
    flex-wrap: wrap;
}

.bbs-filter .category-list a {
    position: relative;
    color: #888;
    font-weight: 400;
    line-height: 24px;
    letter-spacing: -0.4px;
    padding-left: 10px;
    margin-left: 10px;
}

.bbs-filter .category-list a.active {
    color: #333;
    font-weight: 400;
    text-decoration: underline;
}

.bbs-filter .search-box input[type=text] {
    width: 200px;
}

.bbs-filter .search-box .checking {
    margin-left: 10px;
}

.bbs-filter .search-box .checking + .btn-purple {
    margin-left: 20px;
}

.category-list a:before {
    position: absolute;
    top: 3px;
    left: 0;
    content: '';
    display: block;
    width: 1px;
    height: 16px;
    background-color: #b4bebd;
}

.category-list a:first-child {
    padding-right: 0;
    margin-left: 0;
}

.category-list a:first-child:before {
    display: none;
}

/* search-box */
.search-box {
    display: flex;
    align-items: center;
}

.search-box .dropdown {
    background: #fff;
    min-width: 90px;
}

.search-box input[type=text] {
    width: 300px;
    height: 38px;
    font-size: 15px;
    line-height: 18px;
    color: #585858;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    margin-left: 6px;
}

.search-box > button {
    width: 108px;
    font-size: 15px;
    border-radius: 4px;
    margin-left: 6px;
    padding-left: 6px;
    padding-right: 6px;
}

@media only all and (max-width: 1199px) {
    .bbs-filter {
        padding-left: 10px;
        padding-right: 10px;
    }

    .bbs-filter .category-list {
        width: 100%;
        padding-top: 10px;
        padding-bottom: 16px;
    }

    .bbs-filter .search-box {
        width: 100%;
    }

    .bbs-filter .search-box input {
        flex-grow: 1;
    }

    .search-box > .btn-purple {
        min-width: 90px;
    }
}

/* search-box-wrap > search-box */
.search-box-wrap {
    display: flex;
    margin: 20px 0;
}

.search-box-wrap .search-box {
    margin: 0 auto;
}

/* search-box.square */
.square .dropdown {
    height: 42px;
    border-radius: 0;
}

.square .dropdown > .dropdown-select {
    height: 40px;
    border-radius: 0;
}

.square input {
    position: relative;
    height: 42px;
    border-radius: 0;
    border: 2px solid #d5d9e3;
}

.square > button {
    width: 98px;
    height: 42px;
    border-radius: 0;
}

@media only all and (max-width: 1199px) {
    .square input {
        width: auto;
    }
}


/* bbs-top */
.bbs-top {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.bbs-top > .count > span {
    color: #6f7072;
    line-height: 44px;
}

.bbs-top span strong {
    color: #333;
    margin: 0 4px;
    line-height: 44px;
}

.bbs-top > .bbs-btn-set {
    position: relative;
    left: auto;
    bottom: auto;
}

.bbs-top > .bbs-btn-set > button {
    position: relative;
    min-width: 88px;
    min-height: 36px;
    color: #4a4a4a;
    font-weight: 400;
    line-height: 30px;
    padding: 0 16px;
    font-size: 15px;
    letter-spacing: -0.2px;
    background: #ccd5e1;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-right: 4px;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    outline: none;
}

.bbs-top > .bbs-btn-set > .btn-write {
    min-width: 108px;
    color: #fff;
    background-color: #39359f;
    padding-left: 40px;
    padding-right: 20px;
    margin-right: 11px;
}

.bbs-top > .bbs-btn-set > .btn-write:hover {
    background-color: #333;
}

.bbs-top > .bbs-btn-set > .btn-write:before {
    position: absolute;
    top: 8px;
    left: 18px;
    display: block;
    content: '';
    width: 18px;
    height: 18px;
    background-image: url(/res/img/component/icon_pen-ff733758012773c85ae9db6e7d5a5f88.svg);
    background-repeat: no-repeat;
    background-size: contain;
}

.bbs-top > .option {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.bbs-top > .option label {
    position: relative;
    color: #666;
    font-size: 15px;
    font-weight: 500;
    margin-right: 8px;
}

.bbs-top > .option label.bullet {
    position: relative;
    padding-left: 10px;
    margin-left: 8px;
}

.bbs-top > .option label.bullet:before {
    position: absolute;
    top: 6px;
    left: 0;
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    background-color: #846fe6;
}

/* bbs-list */
.bbs-list {
    border-top: 2px solid #8f55e2;
    list-style: none;
    padding: 0;
    margin-bottom: 50px;
}

.bbs-list li > a {
    position: relative;
    display: block;
    height: 95px;
    padding: 20px 65px;
    text-decoration: none;
    border-bottom: 1px solid #dee3eb;
    transition: .2s ease-out;
}

.bbs-list li > a:hover {
    background-color: #f3f6fb;
}

.bbs-list li > a:hover:after {
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -7px;
    display: block;
    content: '';
    width: 22px;
    height: 13px;
    background-image: url(/res/img/component/icon_board_arrow-f175decede73d00b69eadb7591582411.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.bbs-list li > a > .icon-notice {
    position: absolute;
    top: 50%;
    left: 18px;
    display: block;
    width: 28px;
    height: 28px;
    margin-top: -14px;
    text-indent: -9999px;
    border-radius: 14px;
    background-image: url(/res/img/component/icon_bullhorn_st1-45ee6cd37ce76bfc395d86c2ba567caa.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-color: #8f55e2;
    background-size: 14px;
}

.bbs-list li > a > .number {
    position: absolute;
    top: 50%;
    left: 10px;
    display: block;
    width: 45px;
    text-align: center;
    color: #333;
    transform: translateY(-50%);
}

.bbs-list li a > .subject {
    color: #333;
    line-height: 22px;
    letter-spacing: -0.4px;
    height: 26px;
}

.bbs-list li a > .subject.title-hide {
    color: #aaa;
}

@media only all and (max-width: 1199px) {
    .bbs-list li > a {
        padding-right: 20px;
    }

    .bbs-list li > a {
        height: auto;
    }

    .with-thumbnail.report li > a .bbs-content-info {
        bottom: -12px !important;
    }
}

/* bbs-list.with-thumbnail */
.with-thumbnail li > a {
    position: relative;
    height: 220px;
    padding: 30px 110px 30px 290px;
}

.with-thumbnail li > a > .subject {
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
    margin-bottom: 20px;
}
.with-thumbnail .subject > span.text{
    font-size: 18px;
    font-weight: 500;
    line-height: 26px;
}
.with-thumbnail .subject .teahcer-rate-box {
    background-color: #0a2e4f;
    height: 22px;
    font-size: 14px;
    margin-left: 5px;
}

.with-thumbnail .teacher-agree ul button.teahcer-rate-reg {
    width: 100%;
    height: 26px;
}
.with-thumbnail .teacher-agree {
    display: none;
    position: absolute;
    left: 91px;
    top: 4px;
    width: 170px;
    background: #FFFFFF;
    padding: 10px;
    border: solid 1px #0a2e4f;
    box-shadow: 0 0 20px rgba(10, 46, 79, .2);
}
.with-thumbnail .subject .teacher-agree button {
    height: 26px;
    width: 148px;
    background-color: #673ab7;
}
.with-thumbnail .subject .teacher-agree span {
    font-size: 15px;
}
.with-thumbnail li > a .img {
    position: absolute;
    top: 20px;
    left: 20px;
    display: block;
    width: 250px;
    height: 180px;
    background-color: #f5f7f9;
    overflow: hidden;
}

.with-thumbnail li > a .img img {
    width: 100%;
    height: 180px;
    z-index: 1;
    transition: all 0.3s ease;
}

.with-thumbnail li > a .img:before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .5);
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s;
}

.with-thumbnail li > a:hover .img:before {
    opacity: 0.5;
}

.with-thumbnail li > a .text {
    color: #333;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-wrap: break-word;
    height: 50px;
    line-height: 25px;
}

.with-thumbnail li > a .bbs-content-info {
    position: absolute;
    bottom: 20px;
}

.with-thumbnail.report li > a .bbs-content-info {
    bottom: 10px;
}

.with-thumbnail li > a > .bbs-btn-set {
    position: absolute;
    top: 30px;
    right: 20px;
    z-index: 10;
}

@media only all and (max-width: 599px) {
    .with-thumbnail li > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        height: auto;
    }

    .with-thumbnail li > a .img {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 10px;
    }

    .with-thumbnail li > a .img > img {
        margin: 0 auto;
    }

    .with-thumbnail li > a > .subject {
        margin-bottom: 10px;
    }

    .with-thumbnail li > a .text {
        margin-bottom: 10px;
    }

    .with-thumbnail li > a .bbs-content-info {
        position: relative;
        bottom: auto;
    }
}

/* bbs-content-info */
.bbs-content-box {
    display: flex;
    flex-flow: column wrap;
}

.bbs-content-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 10px;
}

.bbs-content-info span {
    position: relative;
    /* max-width: 200px; */
    color: #333;
    font-size: 16px;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-left: 20px;
    padding-right: 12px;
    margin-right: 8px;
}

.bbs-content-info span:last-child {
    padding-right: 0;
    margin-right: 0;
}

.bbs-content-info span:after {
    position: absolute;
    top: 6px;
    right: 0;
    display: block;
    content: '';
    width: 1px;
    height: 10px;
    background-color: #b4bebd;
}

.bbs-content-info span:last-child:after {
    display: none;
}

.bbs-content-info span:before {
    position: absolute;
    top: 3px;
    left: 0;
    content: '';
    display: block;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: contain;
}

.bbs-content-info .category {
    color: #712cce;
    padding-left: 0;
}

.bbs-content-info .date {
    padding-left: 0;
}

.bbs-content-info .name:before {
    background-image: url(/res/img/component/icon_profile-71e3e22f4140e4af70d8a1282f10bacf.svg);
}

.bbs-content-info .visited:before {
    background-image: url(/res/img/component/icon_eye-6b6b0ea3124a14745dea7cc98d067d66.svg);
}

.bbs-content-info .comment:before {
    background-image: url(/res/img/component/icon_message-2f4ca0f875f476e35edf89012206a2cd.svg);
}

.bbs-content-info .lock:before {
    background-image: url(/res/img/component/icon_lock-b24d21f59cbce6e3b850151aed347109.svg);
}

.bbs-content-info .reply-no {
    color: #00bcd4;
}

.bbs-content-info .reply-no:before {
    background-image: url(/res/img/component/icon_reply_no-9a555e64bdf0832ed3e349655258664b.svg);
}

.bbs-content-info .reply-ed:before {
    background-image: url(/res/img/component/icon_reply_ed-51d14a5396753bfcf44ca61d3b403405.svg);
}

.bbs-content-info .won::before {
    background-color: #7e81a6;
    mask: url(/res/img/common/won-sign-solid-7829e2bd23dab2a761ce2a5dbe238f65.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/common/won-sign-solid-7829e2bd23dab2a761ce2a5dbe238f65.svg) 50%/contain no-repeat;
}

.bbs-content-info .unconfirmed::before {
    background-color: #7e81a6;
    mask: url(/res/img/component/icon_unconfirmed-558fe4206032869180716ae0381c5e76.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_unconfirmed-558fe4206032869180716ae0381c5e76.svg) 50%/contain no-repeat;
}

.bbs-content-info .empty {
    padding-left: 5px;
}

.bbs-content-info .empty::before {
    display: none;
}

.bbs-content-info .url {
    max-width: 90%;
    padding-left: 0;
}

.bbs-btn-set2 button {
    min-width: 88px;
    min-height: 36px;
    color: #4a4a4a;
    font-weight: 400;
    height: 36px;
    line-height: 30px;
    padding: 0 16px;
    font-size: 15px;
    letter-spacing: -0.2px;
    background: #ccd5e1;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-right: 4px;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    outline: none;
}
.bbs-btn-set2 .btn-copy-url.btn-reject {
    color: #fff !important;;
    border-color: #f45666 !important;
    background-color: #f45666 !important;;
}

/*.root-community .bbs-btn-set2 button#btnCopyUrl::before,.btn-copy-url::before{background:url(../img/common/icon_copy.svg) 50%/contain no-repeat;}*/
/*.root-community .bbs-btn-set2 .btn-coupon::before{background:url(../img/common/icon_coupon.svg) 50%/contain no-repeat;}*/

@media only all and (max-width: 599px) {
    .bbs-content-info .url {
        max-width: 200px;
        padding-left: 0;
    }
}

/* pagination */
.pagination {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
}

.page-mumber {
    display: flex;
    flex-wrap: wrap;
}

.page-mumber > li > a {
    position: relative;
    display: block;
    float: left;
    width: 42px;
    height: 42px;
    line-height: 42px;
    font-size: 15px;
    text-align: center;
    margin-right: 3px;
    background-color: #fff;
    border: 1px solid #c5cbd4;
    color: #333;
    font-weight: 500;
    border-radius: 3px;
}

.page-mumber > li.active > a {
    color: #fff;
    background-color: #8f55e2;
    border-color: #8f55e2;
}

.page-mumber > li.jump > a {
    width: 30px;
    border: 0;
}

.page-mumber > li.jump.first > a:before {
    position: absolute;
    top: 13px;
    left: 7px;
    display: block;
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(/res/img/component/icon_pagination_first-58440a03bddd9fdb650a6e4d3964d3b2.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.page-mumber > li.jump.prev > a:before {
    position: absolute;
    top: 13px;
    left: 7px;
    display: block;
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(/res/img/component/icon_pagination_prev-d552b5fe0ccc10106c4d2d67f5930bf8.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.page-mumber > li.jump.next > a:before {
    position: absolute;
    top: 13px;
    left: 7px;
    display: block;
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(/res/img/component/icon_pagination_next-d4fdf08ada698a6280e2bd8c1f9ec17c.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.page-mumber > li.jump.last > a:before {
    position: absolute;
    top: 13px;
    left: 7px;
    display: block;
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(/res/img/component/icon_pagination_last-c6e4c4f14e01f6118321afcc2642de5a.svg);
    background-repeat: no-repeat;
    background-position: center;
}

/*
* bbs-view
*/
.bbs-btn-set {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

.bbs-btn-set.align-center {
    align-items: center;
}

.bbs-btn-set.right {
    justify-content: flex-end;
}

.bbs-btn-set.right button{
    background: #673ab7;
}

.bbs-btn-set button {
    min-width: 88px;
    min-height: 36px;
    color: #4a4a4a;
    font-weight: 400;
    height: 36px;
    line-height: 30px;
    padding: 0 16px;
    font-size: 15px;
    letter-spacing: -0.2px;
    background: #ccd5e1;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-right: 4px;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    outline: none;
}

.bbs-btn-set button:last-child {
    margin-right: 0;
}

.bbs-btn-set button:hover {
    background-color: #e2e6ea;
    border-color: #f8f9fa;
}

.bbs-btn-set .btn-secondary {
    color: #fff;
    background: #4d79f6;
}

.bbs-btn-set .btn-secondary:hover {
    /*  background: #2f54c0; */
    background-color: #e2e6ea;
    border-color: #f8f9fa;
}

.bbs-btn-set .btn-dark {
    color: #fff;
    background: #4a4a4a;
}

.bbs-btn-set .btn-dark:hover {
    background: #333;
}

.bbs-btn-set .sns-list-box {
    position: absolute;
    left: 50%;
    top: 50px;
    transform: translateX(-50%);
    width: 324px;
    height: 64px;
    padding: 10px;
    background: #fff;
    border: 1px solid #c8ced6;
    border-radius: 32px;
}

.bbs-btn-set .sns-list-box:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #c8ced6;
    top: -10px;
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
}

.bbs-btn-set .sns-list-box:after {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    top: -9px;
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
}

@media only all and (max-width: 1199px) {
    .bbs-btn-set button {
        min-width: 80px;
        padding: 0 10px;
    }
}

/* btn-sns */
.bbs-btn-set > .btn-sns {
    position: relative;
}

.sns-list-box {
    display: none;
    flex-wrap: wrap;
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}

.sns-list-box > a {
    position: relative;
    display: block;
    width: 42px;
    height: 42px;
    color: #fff;
    font-size: 14px;
    border-radius: 25px;
    outline: none;
    transition-duration: 300ms;
    cursor: pointer;
}

.sns-list-box > a:last-child {
    margin-right: 0;
}

.sns-list-box > a:hover {
    background-color: #562da0;
    transform: translateY(-2px);
    -webkit-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.2);
}

.sns-list-box > .facebook {
    background-color: #3b579d;
    margin-right: 10px;
}

.sns-list-box > .twitter {
    background-color: #1da1f2;
    margin-right: 10px;
}

.sns-list-box > .kakao {
    background-color: #6b5f5f;
    margin-right: 10px;
}

.sns-list-box > .naver,
.sns-list-box > .band,
.sns-list-box > .blog {
    background-color: #00c725;
    margin-right: 10px;
}

.sns-list-box > a > span {
    position: absolute;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.sns-list-box > .facebook > .icon-facebook {
    background-image: url(/res/img/component/icon_facebook-39efd665a9e3e79540fcf8a9fe63aff7.svg);
}

.sns-list-box > .twitter > .icon-twitter {
    background-image: url(/res/img/component/icon_twitter-570ce483f66c9d4557da1a0db7839ea6.svg);
}

.sns-list-box > .kakao > .icon-kakao {
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_kakao.svg);
}

.sns-list-box > .naver > .icon-naver {
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_naver.svg);
}

.sns-list-box > .band > .icon-band {
    width: 24px;
    height: 24px;
    background-image: url(/res/img/component/icon_band-3704733ba1298fcbc94934f00274a74a.svg);
}

.sns-list-box > .blog > .icon-blog {
    width: 30px;
    height: 30px;
    background-image: url(/res/img/component/icon_blog-e708ceef5e8cd4e22e1136dc2b2c3026.svg);
}

/* btn-view */
.bbs-view {
    margin: 20px 0;
}

.bbs-head {
    position: relative;
    border-bottom: 1px solid #dee3eb;
    padding-bottom: 12px;
    margin-bottom: 20px;
}

.bbs-head .bbs-btn-set {
    position: absolute;
    right: 0;
    bottom: 12px;
}

.bbs-head > h3 {
    margin-bottom: 10px;
}

.bbs-content {
    min-height: 250px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    background-color: #fff;
    color: #333;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: -0.4px;
    line-height: 26px;
    padding: 40px 20px;
}

.bbs-btn-area {
    text-align: center;
}

.bbs-btn-area .event-text {
    font-weight: 600;
    color: #8f55e2;
    line-height: 30px;
}

/* no-access */
.bbs-view .no-access {
    padding-top: 280px;
    text-align: center;
    background-image: url(/res/img/component/bg_no_access-881825ea3ef6865ccccdc5b0e2d35e00.png);
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 60px;
}

.bbs-view .no-access > span {
    position: relative;
    display: inline-block;
    color: #9b9b9b;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 20px;
    border-radius: 40px;
    -webkit-box-shadow: 0px 0px 10px 3px rgba(200, 206, 214, .5);
    -moz-box-shadow: 0px 0px 10px 3px rgba(200, 206, 214, .5);
    box-shadow: 0px 0px 10px 3px rgba(200, 206, 214, .5);
}

/* no-posts */
.bbs-list .no-posts {
    padding-top: 280px;
    text-align: center;
    background-image: url(/res/img/component/bg_no_posts-7f051947dc40f2385705da44943bc2c6.png);
    background-repeat: no-repeat;
    background-position: center;
}

.bbs-list .no-posts > span {
    position: relative;
    display: inline-block;
    color: #9b9b9b;
    font-size: 16px;
    font-weight: 500;
    padding: 14px 20px;
    border-radius: 40px;
    -webkit-box-shadow: 0px 0px 10px 3px rgba(200, 206, 214, .5);
    -moz-box-shadow: 0px 0px 10px 3px rgba(200, 206, 214, .5);
    box-shadow: 0px 0px 10px 3px rgba(200, 206, 214, .5);
}

.bbs-view .no-access > span:before,
.bbs-list .no-posts > span:before {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid rgba(200, 206, 214, 0.5);
    top: -10px;
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
}

.bbs-view .no-access > span:after,
.bbs-list .no-posts > span:after {
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    top: -9px;
    content: '';
    position: absolute;
    left: 50%;
    width: 0;
    height: 0;
    margin-left: -8px;
}

/* event-info */
.bbs-view .event-info {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #dee3eb;
}

.bbs-view .event-info > dt {
    width: 160px;
    min-height: 35px;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    padding-left: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.bbs-view .event-info > dt .dt-single {
    margin-top: 10px;
}

.bbs-view .event-info > dd {
    display: block;
    width: calc(100% - 160px);
    border-left: 1px solid #dee3eb;
    min-height: 35px;
    color: #333;
    font-size: 16px;
    line-height: 24px;
    padding-left: 20px;
    padding-top: 6px;
    padding-bottom: 6px;
}

.bbs-view .event-info > dd .pre-func-desc {
    margin-left: 5px;
    vertical-align: middle;
    color: white;
    background: #ff863d;
    border-radius: 3px;
    padding: 5px 10px;
    border-color: #ff863d;
}

@media only all and (max-width: 1199px) {
    .bbs-view .event-info > dt {
        width: 30%;
    }

    .bbs-view .event-info > dd {
        width: 70%;
    }
}

/* bbs-attachment */
.bbs-attachment {
    padding: 20px;
    background-color: #f3f6fb;
    border: 1px solid #e6eaf0;
    border-radius: 4px;
    margin: 20px 0;
}

.bbs-attachment > p {
    margin-bottom: 6px;
}

.bbs-attachment > p > a {
    position: relative;
    display: inline-block;
    color: #333;
    font-size: 16px;
    line-height: 24px;
    padding-left: 30px;
}

.bbs-attachment > p > a:hover {
    color: #712cce;
    text-decoration: underline;
}

.bbs-attachment > p > a:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    background-color: #fff;
    background-image: url(/res/img/component/icon_clip-219d1cbbbdcbe59cd8c90723ca2ef760.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
    border-radius: 12px;
}

.bbs-attachment > p > a:hover:before {
    background-color: #8f55e2;
    background-image: url(/res/img/component/icon_clip_white-c1106c913df04b7f0f11a72f82e4eb98.svg);
}

/* comment-area */
.comment-area {
    background-color: #f3f6fb;
    padding: 20px;
    margin: 20px 0;
    border-radius: 6px;
}

.comment-area > .total {
    position: relative;
    display: flex;
    color: #333;
    line-height: 34px;
    border-bottom: 1px solid #383e4c;
    font-weight: 400;
}

/* comment-list */
.comment-list > li {
    position: relative;
    padding-top: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid #c8d0dd;
}

.comment-list > li:last-child {
    border-bottom: 0;
}

.comment-list > li > p {
    white-space: pre-wrap;
    line-height: 22px;
    padding-left: 20px;
    padding-right: 20px;
    margin-bottom: 0;
    font-size: 15px;
    word-break: break-word;
}

.comment-list > li > .bbs-content-info {
    min-height: 32px;
    margin-bottom: 6px;
}

.comment-list > li > .comment-btn-set {
    position: absolute;
    top: 16px;
    right: 0;
}

.comment-btn-set > button {
    min-width: 50px;
    min-height: 28px;
    color: #4a4a4a;
    font-weight: 400;
    line-height: 28px;
    padding: 0 10px;
    font-size: 15px;
    letter-spacing: -0.2px;
    background: #ccd5e1;
    border-radius: 3px;
    overflow: hidden;
    margin-right: 4px;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    outline: none;
}

.comment-btn-set .btn {
    height: auto;
}

.comment-btn-set .btn::before {
    display: none;
}

.comment-btn-set > .btn-secondary:hover {
    color: #fff;
    background: #4d79f6;
}

.comment-btn-set > .btn-dark:hover {
    color: #fff;
    background: #4a4a4a;
}

/* comment-form */
.comment-form > textarea {
    display: block;
    width: 100%;
    font-family: "Noto Sans KR";
    padding: 20px;
}

.bbs-view .btn-area,
.bbs-form .btn-area {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

/* bbs-page-move */
.bbs-page-move {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid #dee3eb;
    border-bottom: 1px solid #dee3eb;
}

.bbs-page-move > li {
    width: calc(50% - 100px);
}

.bbs-page-move > li:nth-child(2) {
    width: 200px;
    text-align: center;
}

.bbs-page-move > li > a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: #333;
    font-size: 16px;
    line-height: 22px;
    letter-spacing: -0.4px;
    background-color: #f3f6fb;
    padding: 30px;
}

.bbs-page-move > li:nth-child(2) > a {
    background: #fff;
}

.bbs-page-move > li > a.prev {
    text-align: left;
    padding-left: 60px;
}

.bbs-page-move > li > a.next {
    text-align: right;
    padding-right: 60px;
}

.bbs-page-move > li > a.next.none {
    text-align: right;
    padding-right: 60px;
}

.bbs-page-move > li > a:before {
    position: absolute;
    top: 50%;
    margin-top: -7px;
    display: block;
    content: '';
    width: 22px;
    height: 13px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.bbs-page-move > li > a.prev:before {
    left: 20px;
    background-image: url(/res/img/component/icon_board_arrow_prev-4611aa2ed124a1823a7a021245ed23c4.png);
}

.bbs-page-move > li > a.prev.none:before {
    display: none;
}

.bbs-page-move > li > a.next:before {
    right: 20px;
    background-image: url(/res/img/component/icon_board_arrow-f175decede73d00b69eadb7591582411.png);
}

.bbs-page-move > li > a.next.none:before {
    display: none;
}

.bbs-page-move > li > a > .text {
    display: none;
}

.bbs-page-move > li > a > .subject {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

@media only all and (max-width: 1199px) {
    .bbs-head > .bbs-btn-set {
        position: relative;
        left: auto;
        bottom: auto;
    }

    .bbs-page-move > li > a > .subject {
        display: none;
    }

    .bbs-page-move > li > a > .text {
        display: block;
    }

    .bbs-page-move > li {
        width: 33.333333%;
    }

    .bbs-page-move > li:nth-child(2) {
        width: 33.333333%;
    }

    .bbs-page-move > li > a {
        padding-top: 16px;
        padding-bottom: 16px;
    }
}


/*
* bbs-form
*/
.bbs-form > .dl-table {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    width: 100%;
    border-top: 2px solid #8f55e2;
    margin-bottom: 20px;
}

.bbs-form > .dl-table > dt {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    width: 200px;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.6px;
    text-align: center;
    padding: 6px 20px;
    background-color: #fff;
    border-top: 0;
    border-bottom: 1px solid #dee3eb;
}

.bbs-form > .dl-table > dt:after {
    position: absolute;
    top: 12px;
    right: 0;
    display: block;
    content: '';
    width: 1px;
    height: calc(100% - 24px);
    background: #dee3eb;
}

.bbs-form {
    margin-bottom: 20px;
}

.bbs-form > .dl-table > dd {
    display: flex;
    align-items: center;
    flex-flow: row wrap;
    width: calc(100% - 200px);
    color: #444;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    padding: 6px 20px;
    background-color: #fff;
    border-bottom: 1px solid #dee3eb;
}

.bbs-form > .dl-table > dd > input {
    width: 100%;
    height: 38px;
    font-size: 17px;
    line-height: 18px;
    color: #585858;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    margin-right: 6px;
}

.auth-form > .dl-table > dd > input {
    width: 100%;
    height: 38px;
    font-size: 14px;
    line-height: 18px;
    color: #585858;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
}

.bbs-form .checking-set {
    flex-direction: row;
}

.bbs-form .checking-set > .checking {
    width: auto;
    margin-right: 20px;
}

.bbs-form > .attachment {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    padding: 6px 10px;
    background-color: #f3f6fb;
    border: 1px solid #e6eaf0;
    border-radius: 4px;
    margin: 20px 0;
}

.bbs-form > .attachment > dt {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 42px;
    width: 120px;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    line-height: 36px;
    letter-spacing: -0.6px;
    text-align: center;
    border-top: 0;
}

.bbs-form > .attachment > dd {
    width: calc(100% - 200px);
    color: #444;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
}

.bbs-form > .attachment .btn-attach {
    min-width: 88px;
    min-height: 36px;
    color: #4a4a4a;
    font-weight: 400;
    line-height: 30px;
    padding: 0 16px;
    font-size: 15px;
    letter-spacing: -0.2px;
    background: #ccd5e1;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-right: 4px;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    outline: none;
}

.bbs-form > .attachment .btn-attach:hover {
    background-color: #e2e6ea;
    border-color: #f8f9fa;
}

.bbs-form > .attachment p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.bbs-form > .attachment input {
    /*width: 300px;
    height: 38px;
    font-size: 17px;
    line-height: 18px;
    color: #585858;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    margin-right: 6px;*/
    position: absolute;
    top: 0;
    left: -9999px;
    width: 1px;
    height: 1px;
    line-height: 0;
    overflow: hidden;
}

.bbs-form > .attachment input[disabled] {
    background: #e6eaf0;
}

.bbs-form > .attachment ul > li > span {
    font-size: 15px;
    line-height: 30px;
    letter-spacing: -0.4px;
}

.bbs-form > .attachment ul > li > .delete {
    background-color: #ccd5e1;
    text-indent: inherit;
    width: auto;
    padding-left: 6px;
    padding-right: 20px;
    background-position: 35px 5px;
    margin-left: 6px;
}

.btn-confirm {
    position: relative;
    min-width: 108px;
    min-height: 44px;
    color: #fff;
    font-weight: 400;
    line-height: 44px;
    padding: 0 16px;
    font-size: 15px;
    letter-spacing: -0.2px;
    background: #39359f;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-right: 4px;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    outline: none;
}

.btn-confirm:hover {
    background-color: #333;
}

.btn-cancle {
    position: relative;
    min-width: 108px;
    min-height: 44px;
    color: #fff;
    font-weight: 400;
    line-height: 44px;
    padding: 0 16px;
    font-size: 15px;
    letter-spacing: -0.2px;
    background: #707374;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 4px;
    margin-bottom: 4px;
    margin-right: 4px;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    outline: none;
}

.btn-cancle:hover {
    background-color: #333;
}

@media only all and (max-width: 1199px) {
    .bbs-form > .dl-table > dt {
        width: 30%;
    }

    .bbs-form > .dl-table > dd {
        width: 70%;
    }

    .bbs-form > .attachment {
        padding: 6px 10px;
    }

    .bbs-form > .attachment > dt {
        width: 30%;
    }

    .bbs-form > .attachment > dd {
        width: 70%;
    }
}

/* modal >> bbs-form */
.modal-container h4 {
    position: relative;
    color: #111;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.4px;
    padding-left: 12px;
    margin-bottom: 14px;
}

.modal-container h4:before {
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
    content: '';
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background: #7632c6;
}

.modal-container .bbs-form {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 0;
}

.modal-container .bbs-form > .dl-table > dt {
    justify-content: flex-start;
    width: 130px;
}

.modal-container .bbs-form > .dl-table > dd {
    width: calc(50% - 130px);
}

.modal-container .bbs-form > .dl-table > dd.long {
    width: calc(100% - 130px);
}

.modal-container .bbs-form > .dl-table > dd.triple {
    width: calc(33% - 130px);
}

.modal-container .bbs-form > .dl-table > dd > input {
    font-size: 16px;
}

.modal-container textarea {
    display: block;
    width: 100%;
    font-family: "Noto Sans KR";
    padding: 10px;
    border: 1px solid #dbdbdb;
    border-radius: 3px;
}

.modal-container .btn-area {
    margin-bottom: 0;
}

@media only all and (max-width: 1199px) {
    .modal-container .bbs-form > .dl-table > dd {
        width: calc(100% - 130px);
    }
}


/*
* bbs-cafe
*/
.cafe-list-wrap {
    margin-bottom: 20px;
}

.cafe-list-wrap > h4 {
    height: 39px;
    background-image: url(/res/img/component/text_cafe_list-5810fbf4d51edc60c8793e9928124cbb.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 130px 39px;
    margin-top: 10px;
    margin-bottom: 20px;
}

.cafe-list {
    position: relative;
    width: 1054px;
    overflow: hidden;
    margin: 0 auto;
}

.cafe-list > ul {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    height: 100%;
    transition: 1s;
}

.cafe-list > ul > li {
    width: 100%;
    height: 100%;
}

.cafe-list > input {
    display: none;
}

.cafe-list > label {
    position: absolute;
    top: 0;
    width: 30px;
    height: 100%;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.cafe-list > label.prev {
    left: 0;
    background-image: url(/res/img/component/icon_arrow_black_prev-e77feff6785db905d5a42f7b9efa17d8.svg)
}

.cafe-list > label.next {
    right: 0;
    background-image: url(/res/img/component/icon_arrow_black_next-1ffbafcbfe694235773961d648acbdad.svg)
}

#cafe_li_01:checked ~ ul {
    margin-left: 0%;
}

#cafe_li_02:checked ~ ul {
    margin-left: -100%;
}

#cafe_li_01:checked ~ label.prev {
    background-image: url(/res/img/component/icon_arrow_gray_prev-4b33bac64f2e6cab2ee8b2a52d31b6b8.svg)
}

#cafe_li_02:checked ~ label.next {
    background-image: url(/res/img/component/icon_arrow_gray_next-d7da3faef9fa80c0cf28de839fba66a6.svg)
}

.cafe-list > ul > li {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 0 30px;
    margin: 0 auto;
}

.cafe-list a {
    position: relative;
    display: block;
    width: 100px;
    margin: 0 12px;
}

.cafe-list a > .cafe-photo {
    position: relative;
    display: block;
    width: 70px;
    height: 70px;
    background-color: #fff;
    border-radius: 33px;
    padding: 2px;
    border: 1px solid #dee2e6;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 6px;
}

.cafe-list a > .cafe-photo > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 1000px;
    background-color: #f8faff;
}

.cafe-photo > .cafe-dot {
    position: absolute;
    right: 0px;
    bottom: 4px;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 7px;
}

/* 카페색상 15종(cafe-dot) */

.cafe-photo > .cafe-dot.purple {
    background: #8934fa;
}

.cafe-photo > .cafe-dot.yellow {
    background: #ffb700;
}

.cafe-photo > .cafe-dot.capri {
    background: #ffb700;
}

.cafe-photo > .cafe-dot.pink {
    background: #ff5da0;
}

.cafe-photo > .cafe-dot.sky {
    background: #3caee3;
}

.cafe-photo > .cafe-dot.amber {
    background: #ff7045;
}

.cafe-photo > .cafe-dot.indigo {
    background: #4550c0;
}

.cafe-photo > .cafe-dot.orange {
    background: #ff8f00;
}

.cafe-photo > .cafe-dot.blue {
    background: #4d79f6;
}

.cafe-photo > .cafe-dot.light {
    background: #4ea5ff;
}

.cafe-photo > .cafe-dot.dark {
    background: #1c5b87;
}

.cafe-photo > .cafe-dot.teal {
    background: #009688;
}

.cafe-photo > .cafe-dot.green {
    background: #4cbf00;
}

.cafe-photo > .cafe-dot.cyan {
    background: #2bccad;
}

.cafe-photo > .cafe-dot.salmon {
    background: #f69e94;
}

.cafe-list a > .cafe-name {
    display: block;
    color: #333;
    font-size: 14px;
    text-align: center;
}

@media only all and (max-width: 1199px) {
    .cafe-list {
        width: 310px;
        margin-bottom: 10px;
    }

    .cafe-list a {
        margin-bottom: 10px;
    }
}

/* cafe-badge */
.bbs-content-info .cafe-badge {
    position: relative;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: -0.4px;
    line-height: 20px;
    padding-left: 6px;
    padding-right: 6px !important;
    border-radius: 10px;
}

.bbs-content-info .cafe-badge:after {
    display: none;
}

.bbs-content-info .cafe-badge:before {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    width: 4px;
    height: 22px;
}

/* 카페색상 15종(cafe-badge) */
.bbs-content-info .cafe-badge.purple {
    color: #8934fa;
    background-color: rgba(137, 52, 250, 0.1);
    border: 1px solid rgba(137, 52, 250, 0.2);
}

.bbs-content-info .cafe-badge.yellow {
    color: #ffb700;
    background-color: rgba(255, 183, 0, 0.1);
    border: 1px solid rgba(255, 183, 0, 0.2);
}

.bbs-content-info .cafe-badge.capri {
    color: #ffb700;
    background-color: rgba(255, 183, 0, 0.1);
    border: 1px solid rgba(255, 183, 0, 0.2);
}

.bbs-content-info .cafe-badge.pink {
    color: #ff5da0;
    background-color: rgba(255, 93, 160, 0.1);
    border: 1px solid rgba(255, 93, 160, 0.2);
}

.bbs-content-info .cafe-badge.sky {
    color: #3caee3;
    background-color: rgba(60, 174, 227, 0.1);
    border: 1px solid rgba(60, 174, 227, 0.2);
}

.bbs-content-info .cafe-badge.amber {
    color: #ff7045;
    background-color: rgba(255, 112, 69, 0.1);
    border: 1px solid rgba(255, 112, 69, 0.2);
}

.bbs-content-info .cafe-badge.indigo {
    color: #4550c0;
    background-color: rgba(69, 80, 192, 0.1);
    border: 1px solid rgba(69, 80, 192, 0.2);
}

.bbs-content-info .cafe-badge.orange {
    color: #ff8f00;
    background-color: rgba(255, 143, 0, 0.1);
    border: 1px solid rgba(255, 143, 0, 0.2);
}

.bbs-content-info .cafe-badge.blue {
    color: #4d79f6;
    background-color: rgba(77, 121, 246, 0.1);
    border: 1px solid rgba(77, 121, 246, 0.2);
}

.bbs-content-info .cafe-badge.light {
    color: #4ea5ff;
    background-color: rgba(85, 187, 255, 0.1);
    border: 1px solid rgba(85, 187, 255, 0.2);
}

.bbs-content-info .cafe-badge.dark {
    color: #1c5b87;
    background-color: rgba(28, 91, 135, 0.1);
    border: 1px solid rgba(28, 91, 135, 0.2);
}

.bbs-content-info .cafe-badge.teal {
    color: #009688;
    background-color: rgba(0, 150, 136, 0.1);
    border: 1px solid rgba(0, 150, 136, 0.2);
}

.bbs-content-info .cafe-badge.green {
    color: #4cbf00;
    background-color: rgba(76, 191, 0, 0.1);
    border: 1px solid rgba(76, 191, 0, 0.2);
}

.bbs-content-info .cafe-badge.cyan {
    color: #2bccad;
    background-color: rgba(43, 204, 173, 0.1);
    border: 1px solid rgba(43, 204, 173, 0.2);
}

.bbs-content-info .cafe-badge.salmon {
    color: #f69e94;
    background-color: rgba(246, 158, 148, 0.1);
    border: 1px solid rgba(246, 158, 148, 0.2);
}


/*
* sidenav > icon-menu
*/
.sidenav {
    position: fixed;
    top: 70px;
    left: 0;
    bottom: 0;
    height: calc(100% - 70px);
    background-color: white;
    display: flex;
    flex-direction: row;
    z-index: 110;
}

.wrapper.fixed .sidenav {
    top: 46px;
    height: calc(100% - 46px);
}

.sidenav > .static {
    background-color: white;
    border-right: 1px solid #d9d9d9;
    z-index: 2;
    overflow-y: scroll;
}

.sidenav > .static::-webkit-scrollbar {
    width: 0px;
}

.icon-menu {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    min-width: 64px;
}

.icon-menu > li > a {
    position: relative;
    display: block;
    width: 64px;
    height: 60px;
    outline: none;
    cursor: pointer;
}

.icon-menu > li > a.active {
    background-color: #8934fa;
}

.icon-menu > li > a.active:after {
    position: absolute;
    top: 0;
    right: -1px;
    content: '';
    width: 1px;
    height: 60px;
    background-color: #8934fa;
}

.icon-menu > li > a:before {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    width: 26px;
    height: 26px;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #3C3C3C;
}

.icon-menu li a.active:before {
    background-color: #fff;
}


.my-account:before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_my_account.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_my_account.svg) 50%/contain no-repeat;
}

.my-region-list::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_fav_lawd.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_fav_lawd.svg) 50%/contain no-repeat;
}

.my-region-group::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_fav_lawd_multi.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_fav_lawd_multi.svg) 50%/contain no-repeat;
}

.my-apt-list::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_fav_apt.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_fav_apt.svg) 50%/contain no-repeat;
}

.my-apt-group::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_fav_apt_multi.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_fav_apt_multi.svg) 50%/contain no-repeat;
}

.my-save-list::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_save.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_save.svg) 50%/contain no-repeat;
}

.source-info::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_source.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_source.svg) 50%/contain no-repeat;
}

.menu-info::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_menu.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_menu.svg) 50%/contain no-repeat;
}

.gov-policy-list::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_policy.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_policy.svg) 50%/contain no-repeat;
}

.manual-list:before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_manual_list.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_manual_list.svg) 50%/contain no-repeat;
}

.decrepit-list:before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_decrepit_list.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_decrepit_list.svg) 50%/contain no-repeat;
}

.glossary-info:before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_glossary.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_glossary.svg) 50%/contain no-repeat;
}

.recommended-by-gin:before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_recommended.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_recommended.svg) 50%/contain no-repeat;
}
.my-auction-list:before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_judge.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_judge.svg) 50%/contain no-repeat;
}


@keyframes help-before {
    0%, 20%, 40%, 60%, 80% {
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transform: translate(0, -110%);
        opacity: 1;
        visibility: visible;
    }
    10%, 30%, 50%, 70%, 90% {
        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        transform: translate(0, -125%);
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}

@keyframes help-after {
    0%, 20%, 40%, 60%, 80% {
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transform: translate(0, 0);
        opacity: 1;
        visibility: visible;
    }
    10%, 30%, 50%, 70%, 90% {
        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        transform: translate(0, -5px);
        opacity: 1;
        visibility: visible;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}


.icon-menu > li > a span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    font-size: 12px;
    color: #333333;
    line-height: 24px;
    letter-spacing: -0.4px;
    text-align: center;
}

.icon-menu > li > a > .notification-badge.sky {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: #42cecd;
    box-shadow: none;
    z-index: 10;
}

.icon-menu > li > a > .notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background-color: #ffab2f;
    box-shadow: none;
    z-index: 10;
}

.icon-menu > li > a.active span {
    color: white;
}

@media only all and (max-width: 991px) {
    main[class*='m0'] {
        padding-left: 0;
    }

    .wrapper.fixed .sidenav {
        top: auto;
        width: 100%;
        height: 44px;
    }

    .sidenav > .static {
        border-top: 1px solid #d9d9d9;
        border-right: 0;
        z-index: 100;
    }

    .mask-sidenav {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        border-right: 0;
        opacity: 0.4;
        overflow: hidden;
        z-index: 98;
    }

    .icon-menu {
        flex-direction: row;
        justify-content: space-around;
    }

    .icon-menu > li > a {
        height: 44px;
        width: 44px;
    }

    .icon-menu > li > a.active {
        background-color: transparent;
    }

    .icon-menu > li > a.active:after {
        display: none;
    }

    .icon-menu > li > a span {
        display: none;
    }


    .icon-menu > li > a > .notification-badge {
        top: 4px;
        right: -4px;
    }

    .switcher-contents .btn-open,
    .switcher-contents .btn-close {
        left: -24px;
        width: 23px;
        background-color: #3d3d3d;
        border-color: #3d3d3d;
    }
    .icon-menu li.govPolicyList, .menuInfo, .scriptManualList, .glossaryInfo  {display: none !important;}
}


/*
* sidenav-contents
*/
.sidenav-contents {
    position: fixed;
    top: 70px;
    left: -336px;
    width: 400px;
    height: calc(100% - 70px);
    background-color: white;
    transition: left 0.3s ease-in-out;
    border-right: 1px solid #d9d9d9;
    z-index: 1;
}

.sidenav-contents.open {
    left: 64px;
    box-shadow: 0 4px 7px 0 rgba(0, 0, 0, .1);
}

.wrapper.fixed .sidenav-contents {
    top: 46px;
    height: calc(100% - 46px);
}

.sidenav-contents .btn-close,
.sidenav-contents .btn-open {
    position: absolute;
    top: 0;
    bottom: 0;
    right: -18px;
    margin: auto;
    width: 18px;
    height: 58px;
    background-image: url(/res/img/component/icon_arrow_left-352c2344be264d3f22d20b1acd673b22.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 5px;
    background-color: #fff;
    border-top: 1px solid #bcc1ca;
    border-right: 1px solid #bcc1ca;
    border-bottom: 1px solid #bcc1ca;
    outline: none;
}

.sidenav-contents .btn-open {
    background-image: url(/res/img/component/icon_arrow_right-281db40949f57e67efc3d373f91febb5.svg);
}

.sidenav-contents > div {
    height: 100%;
}

@media only all and (max-width: 1199px) {
    .sidenav-contents {
        top: 0;
        width: 320px;
        left: -320px;
        height: calc(100% - 44px);
        z-index: 99;
    }

    .wrapper.fixed .sidenav-contents {
        top: 0;
        height: calc(100% - 44px);
    }

    .sidenav-contents.open {
        left: 0;
    }

    .sidenav-contents .btn-close,
    .sidenav-contents .btn-open {
        right: -24px;
        width: 23px;
        background-color: #3d3d3d;
        border-color: #3d3d3d;
    }
}

/* account-box */
.account-box {
    position: relative;
    height: 140px;
    background: linear-gradient(45deg, #d7f2fd, #f4e9ee);
    background-size: contain;
    margin-bottom: 90px;
}

.account-box.male {
    background-image: url(/res/img/component/avatar_bg_male-80ffb790ff8035f901d76f3f3200889e.png);
}

.account-box.female {
    background-image: url(/res/img/component/avatar_bg_female-0ee65e03b2fad286b407fb1b3867a1d8.png);
}

.account-box > div {
    position: absolute;
    top: 80px;
    left: 0;
    width: 100%;
    display: block;
}

.account-box > div > .user-photo {
    position: relative;
    display: block;
    width: 86px;
    height: 86px;
    border-radius: 42px;
    margin: 0 auto;
    cursor: pointer;
}

.account-box > div > .user-photo > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 1000px;
    background-color: #f8faff;
    border: 1px solid rgba(0, 0, 0, 0.1);
}

.account-box > div > .user-photo > button {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 26px;
    height: 26px;
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    background-image: url(/res/img/component/icon_pen-ff733758012773c85ae9db6e7d5a5f88.svg);
    background-size: 14px;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ff4081;
    border-radius: 42px;
    margin: 0 auto;
    z-index: 10;
    outline: none;
}

.account-box > div > .account-info > strong {
    display: block;
    color: #333;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
}

.account-box > div > .account-info > span {
    display: block;
    color: #878788;
    font-size: 14px;
    text-align: center;
    margin-top: 8px;
}

@media only all and (max-width: 1199px) {
    .account-box {
        background-size: cover;
    }
}

/* link-list */
.sidenav-contents > #account > .scroll-area {
    height: calc(100% - 230px);
}

.sidenav-contents .link-list {
    padding: 0 20px;
}

.sidenav-contents .link-list > li > a {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    color: #333;
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
}

.sidenav-contents .link-list > li > a:hover {
    background-image: url(/res/img/component/icon_arrow_right-281db40949f57e67efc3d373f91febb5.svg);
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 6px;
}

.sidenav-contents .link-list > li > a > span {
    width: 60px;
    color: #6e42d9;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
    margin-right: 8px;
}

.sidenav-contents .link-list > li > a > strong {
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
}

.sidenav-contents .openChat-header {
    padding: 0 20px;
}

.sidenav-contents .openChat-header > li {
    padding: 16px 0;
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    color: #333;
    border-bottom: 1px solid #e5e5e5;
}

.sidenav-contents .openChat-header > li .btn-copy, .sidenav-contents .openChat-list > li .btn-copy {
    margin-left: auto;
    background-color: #e7e7e7;
    line-height: 30px;
    width: 70px;
}

.sidenav-contents .openChat-list > li .pwd-area {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.sidenav-contents .openChat-list > li .pwd-area span {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

/* banner-box */
.banner-box {
    padding: 50px 20px 0 19px;
}

.banner-box > a {
    display: block;
    width: 100%;
    height: auto;
    background-color: #f0f0f3;
    margin-bottom: 10px;
}

.banner-box > a > img {
    width: 100%;
    max-width: 100%;
    height: auto;
    background-color: #f8faff;
}


/* title-box */
.title-box {
    position: relative;
    height: 60px;
    padding: 24px 20px 0 20px;
}

.title-box:after {
    position: absolute;
    display: block;
    bottom: 0;
    left: 20px;
    content: '';
    width: calc(100% - 40px);
    height: 1px;
    background-color: #dadce0;
}

.title-box > strong {
    font-size: 20px;
    font-weight: 600;
    color: #333;
}

.title-box > .list-count {
    font-size: 14px;
    color: #737373;
    letter-spacing: normal;
    font-weight: 500;
    margin-left: 4px;
}

.title-box > .list-count > em {
    font-weight: bold;
    color: #8934fa;
}

.title-box > .icon-delete {
    content: "";
    display: inline-block;
    position: absolute;
    right: 20px;
    font-size: 15px;
}

.title-box > .icon-delete.map {
    right: 135px;
    top: 26px;
}

.title-box > .icon-delete::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 3px;
    vertical-align: -2px;
    background-color: #444;
}

.title-box > .icon-delete:hover {
    color: #8934fa;
}

/* option-box */
.option-box {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    height: 34px;
    padding-right: 20px;
    padding-left: 20px;
}

.option-box:after {
    position: absolute;
    display: block;
    bottom: 0;
    left: 20px;
    content: '';
    width: calc(100% - 40px);
    height: 1px;
    background-color: #dadce0;
}

.option-box.alarm {
    padding: 0 15px;
}

.option-box > .selection {
    margin-right: auto;
}

.option-box > button {
    height: 34px;
    font-size: 13px;
    color: #555;
    letter-spacing: -0.6px;
    outline: none;
}

.alarm-area .option-box.search-box {
    margin-top: 10px;
    padding-right: 12px;
    padding-left: 10px;
}

.alarm-area .option-box.search-box input {
    width: calc(100% - 70px);
}

.alarm-area .option-box.search-box button {
    height: 38px;
    padding: 0 20px;
    border-radius: 3px;
    color: #fff !important;
    font-family: NotoSansR;
    background-color: #0a2e4f;
    transition: .3s ease-in-out;
    background-color: #673ab7;
}

.alarm-box-list > div > fieldset {
    top: 68px;
    left: 20px;
}

.alarm-box-list > div fieldset::before {
    top: -16px;
    left: 9px;
    border-top: 7px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #ddd;
}

.alarm-box-list > div fieldset::after {
    top: -14px;
    left: 9px;
    border-top: 7px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #fff;
}

.alarm-box-list > div > fieldset > ul {
    width: 110px;
    font-size: 14px;
}

.alarm-box-list > div > fieldset > ul > li:not(:last-child) {
    margin-bottom: 5px;
}

.alarm-box-list > div > fieldset > ul > li.region-pin::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_solid.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_solid.svg) 50%/contain no-repeat;
    margin-bottom: 3px;
    background-color: #8934FA;
}

/* scroll-area */
.sidenav-contents > div .scroll-area {
    height: calc(100% - 220px);
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
}

.sidenav-contents > div .scroll-area.script-manual {
    height: calc(100% - 60px);
}

.sidenav-contents > div .scroll-area::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

@media only all and (max-width: 1199px) {
    .sidenav-contents > div .scroll-area {
        height: calc(100% - 60px);
    }
}

/* item-add-box */
.item-add-box {
    position: relative;
    font-size: 13px;
    padding: 10px 60px 10px 20px;
}

.item-add-box:after {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #ddd;
}

.item-add-box button.btn-inquiry {
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 40px;
    height: 30px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    background-color: #8934fa;
    border-radius: 3px;
    outline: none;
    transition: .3s;
}

.item-add-box .btn-add, .group-add-box .btn-add, .scroll-area .btn-inquiry {
    position: absolute;
    right: 20px;
    bottom: 10px;
    width: 40px;
    height: 30px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    background-color: #8934fa;
    border-radius: 3px;
    outline: none;
    transition: .3s;
}

.item-add-box .btn-add:hover {
    background-color: #7b1fa2;
}

.item-add-box > .add-region,
.item-add-box > .add-apt {
    display: flex;
    flex-direction: row;
    width: 100%;
}

.item-add-box > .add-region > .dropdown {
    flex-grow: 1;
    margin-right: 3px;
}

.item-add-box > .add-apt > .dropdown {
    width: 100%;
    margin-top: 5px;
    margin-right: 3px;
}

.item-add-box .dropdown.slim > .dropdown-select {
    width: 100%;
    padding: 0 16px 0 6px;
}

.item-add-box .dropdown.slim > .dropdown-select > span {
    color: #333;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.item-add-box .dropdown.slim > .dropdown-select:after {
    border-bottom-width: 1px;
    border-right-width: 1px;
    width: 4px;
    height: 4px;
    margin-top: -2px;
}

.item-add-box .dropdown.slim > .dropdown-menu {
    min-width: max-content;
}

.item-add-box .dropdown.slim > .dropdown-menu > li {
    font-size: 13px;
    padding-left: 6px;
    padding-right: 6px;
}

/* group-add-box */
.group-add-box {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 10px 20px;
}

.group-add-box:after {
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    content: '';
    width: 100%;
    height: 1px;
    background-color: #e5e5e5;
}

.btn-add-group {
    position: relative;
    width: 80px;
    height: 30px;
    color: #777;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    letter-spacing: -0.4px;
    line-height: 30px;
    padding-left: 30px;
    outline: none;
}

.btn-add-group:before {
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
    content: '';
    width: 24px;
    height: 24px;
    border: 1px solid #a3a7b2;
    border-radius: 14px;
    background-image: url(/res/img/component/icon_plus-d84c5404e6dcf3459c3be032fae7ed34.svg);
    background-size: 9px 9px;
    background-repeat: no-repeat;
    background-position: center;
}

.group-add-box > .input-set {
    display: none;
    width: calc(100% - 80px);
    flex-direction: row;
    align-items: center;
    margin-left: auto;
}

.group-add-box > .input-set > .input-field {
    width: calc(100% - 48px);
    border-bottom-width: 1px;
    margin-top: 0;
}

.group-add-box > .input-set > .input-field input {
    height: 29px;
    font-size: 15px;
    font-weight: 600;
    padding: 0;
}

.group-add-box > .input-set > .input-field span:before {
    font-size: 14px;
}

.group-add-box > .input-set > .input-field span:before {
    font-size: 14px;
}

.group-add-box > .input-set > .input-field .focus + span:before {
    display: none;
}

.group-add-box > .input-set > .input-field span:after {
    bottom: -1px;
    height: 1px;
}

/* item-list */
.sidenav-contents > div .item-list {
    padding-bottom: 50px;
}

.sidenav-contents > div .item-list > li {
    position: relative;
    padding: 15px 40px 15px 20px;
}

.sidenav-contents > div .item-list > li:hover {
    background-color: #f9f9f9;
}

.sidenav-contents > div .item-list > li:after {
    position: absolute;
    display: block;
    bottom: 0;
    left: 20px;
    content: '';
    width: calc(100% - 40px);
    height: 1px;
    background-color: #e5e5e5;
}

.sidenav-contents > div .item-list > li > strong {
    position: relative;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    line-height: 22px;
    color: #111;
    /*     padding-left: 18px; */
    padding-right: 55px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    vertical-align: middle;
    margin-left: 35px;
}

/* .sidenav-contents > div .item-list > li > strong:before { */
/*     position: absolute; */
/*     top: 3px; */
/*     left: 0; */
/*     display: block; */
/*     content: ''; */
/*     width: 12px; */
/*     height: 16px; */
/*     background-image: url(/res/img/component/sidenav_pin-621a741976530b6ca0c639cfcddfcc82.svg); */
/*     background-size: contain; */
/*     background-repeat: no-repeat; */
/* } */
.sidenav-contents > div .item-list.apt > li a, .sidenav-contents > div .item-list.auction > li a {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.sidenav-contents > div .item-list.apt > li a strong {
    display: inline-block;
    position: relative;
    font-size: 15px;
    line-height: 23px;
    width: calc(100% - 100px);
    margin-left: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    vertical-align: middle;
}

.sidenav-contents > div .item-list.auction > li a strong {
    display: inline-block;
    position: relative;
    font-size: 15px;
    line-height: 23px;
    width: calc(100% - 100px);
    margin-left: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    vertical-align: middle;
}

.sidenav-contents > div .item-list.apt > li > strong, .sidenav-contents .item-list.auction > li > strong {
    width: calc(100% - 55px);
    padding-left: 0;
    padding-right: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sidenav-contents > div .item-list.apt > li > strong:before,
.sidenav-contents .item-list.auction > li > strong::before {
    display: none;
}

.sidenav-contents > div .item-list.recommended > li > strong {
    padding-left: 0;
}

.sidenav-contents > div .item-list.recommended > li > strong:before {
    display: none;
}

.item-list > li > .delete {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, .05);
    z-index: 1;
}

.item-list > li > .delete:hover {
    background-color: rgba(0, 0, 0, .2);
}

.sidenav-contents .item-list.apt > li > .apt-address,
.sidenav-contents .item-list.auction > li > .apt-address {
    display: block;
    color: #777;
    font-size: 14px;
    letter-spacing: -0.4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    margin-top: 7px;
}

.sidenav-contents .item-list.apt > li > .arrow {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 50px;
    height: 49px;
    background-image: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 7px;
    outline: none;
    z-index: 10;
}

.sidenav-contents ul > li > .btn-search-bind {
    position: absolute;
    top: 10px;
    right: 45px;
    z-index: 1;
    height: 28px;
    padding: 0 5px;
    border: solid 1px rgba(117, 52, 250, .2);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    transition: .3s;
    background-color: rgba(117, 52, 250, .1);
}

.sidenav-contents ul > li > .btn-search-bind::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 2px;
    vertical-align: -1px;
    background: url(/res/img/component/icon_search-c0895c78def83afd19c3572f293e5c2e.svg) 50%/contain no-repeat;
}

.sidenav-contents ul > li > .btn-search-bind:hover {
    border-color: rgba(117, 52, 250, .5);
    background-color: rgba(117, 52, 250, .2);
}

.sidenav-contents .item-list > li > .btn-search-bind {
    top: 12px;
    right: 20px;
}

.sidenav-contents .item-list.apt > li > .btn-search-bind {
    top: 12px;
    right: 40px;
}

.sidenav-contents .item-list.apt > li > a > .btn-search-bind {
    position: absolute;
    top: 12px;
    right: 40px;
    z-index: 1;
    height: 28px;
    padding: 0 5px;
    border: solid 1px rgba(117, 52, 250, .2);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    transition: .3s;
    background-color: rgba(117, 52, 250, .1);
}

div.scroll-area button.btn-search-seq {
    position: absolute;
    width: 30px;
    top: 12px;
    left: 20px;
    z-index: 1;
    height: 28px;
    border: solid 1px rgba(117, 52, 250, .2);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    transition: .3s;
    background-color: rgba(117, 52, 250, .1);
}

div.scroll-area ul.btn-search-seq-list {
    display: none;
    overflow-y: auto;
    position: absolute;
    width: 30px;
    height: auto;
    top: 42px;
    left: 20px;
    z-index: 2;
    border: solid 1px rgba(117, 52, 250, .2);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    transition: .3s;
    background-color: rgb(255, 255, 255);
}

div.scroll-area ul.btn-search-seq-list.groupMaster {
    max-height: 110px;
}

div.scroll-area ul.btn-search-seq-list.aptList {
    max-height: 110px;
}

div.scroll-area ul.btn-search-seq-list.regionList {
    max-height: 70px;
}

div.scroll-area ul.btn-search-seq-list > li {
    text-align: center;
    margin: 5px 0px;
    cursor: pointer;
}

div.scroll-area ul.btn-search-seq-list > li:hover {
    background-color: #f5f5f5;
}

div.scroll-area ul.btn-search-seq-list.active {
    display: block;
}

div.scroll-area ul.btn-search-seq-list::-webkit-scrollbar {
    width: 2px;
}

div.scroll-area ul.btn-search-seq-list::-webkit-scrollbar-thumb {
    background: #d7bef7;
    border: 0px none #ffffff;
    border-radius: 0;
}


.sidenav-contents .item-list.apt > li > a > .btn-search-bind::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 2px;
    vertical-align: -1px;
    background: url(/res/img/component/icon_search-c0895c78def83afd19c3572f293e5c2e.svg) 50%/contain no-repeat;
}

.sidenav-contents .item-list.apt > li > a > .btn-search-bind:hover {
    border-color: rgba(117, 52, 250, .5);
    background-color: rgba(117, 52, 250, .2);
}

/* group-list */
.sidenav-contents .group-list {
    padding-bottom: 50px;
}

.sidenav-contents .group-list > li {
    position: relative;
}

.sidenav-contents .group-list > li:after {
    position: absolute;
    display: block;
    bottom: 0;
    left: 20px;
    content: '';
    width: calc(100% - 40px);
    height: 1px;
    background-color: #e5e5e5;
}

.sidenav-contents .group-list > li > a {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    cursor: pointer;
}

.sidenav-contents .group-list > li > a:hover {
    background-color: #f9f9f9;
}

.sidenav-contents .group-list > li > a > strong {
    position: relative;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    color: #111;
    max-width: calc(100% - 180px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    margin-left: 35px;
    padding: 0px 2px;
}

.sidenav-contents .group-list > li > a > .delete {
    background-color: rgba(0, 0, 0, .05);
    z-index: 1;
}

.sidenav-contents ul > li > a button {
    transition: .2s;
}

.sidenav-contents .group-list > li > a > .icon-pen {
    width: 14px;
    height: 14px;
    background-color: #333;
    margin-left: 7px;
    -webkit-mask: url(/res/img/component/icon_pen-ff733758012773c85ae9db6e7d5a5f88.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_pen-ff733758012773c85ae9db6e7d5a5f88.svg) 50%/contain no-repeat;
}

.sidenav-contents ul > li > a > .icon-pen:hover {
    background-color: #8934fa;
}

.sidenav-contents .group-list > li > a > .btn-area {
    display: none;
    position: absolute;
    top: 0;
    right: 60px;
}

.sidenav-contents .group-list > li > a > .btn-area > button {
    height: 51px;
    font-size: 13px;
    color: #555;
    letter-spacing: -0.6px;
    outline: none;
}

.sidenav-contents .group-list > li > a > .btn-area > button:hover {
    color: #6e42d9;
}

.sidenav-contents .group-list > li > .arrow {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 50px;
    height: 49px;
    background-image: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 7px;
    outline: none;
    z-index: 10;
}

.sidenav-contents .group-list > li.open > .arrow {
    background-image: url(/res/img/component/icon_arrow03_up_black-380fb67bb9816ee92461d1d90e41f52a.svg);
}

.sidenav-contents .group-list > li > .arrow:hover {
    background-color: #f9f9f9;
}

.sidenav-contents .group-list > li > .arrow-btn {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 50px;
    height: 49px;
    background-image: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 7px;
    outline: none;
    z-index: 10;
}

.sidenav-contents .group-list > li.open > .arrow-btn {
    background-image: url(/res/img/component/icon_arrow03_up_black-380fb67bb9816ee92461d1d90e41f52a.svg);
}

.sidenav-contents .group-list > li > .arrow-btn:hover {
    background-color: #f9f9f9;
}

.sidenav-contents .group-name-adjust-area {
    display: none;
}

.sidenav-contents .group-name-adjust-area .group-input-field {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 20px;
    background-color: #f7f7f7;
}

.sidenav-contents .group-input-field input {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    font-size: 14px;
    text-indent: 0;
    caret-color: black;
}

.sidenav-contents .group-name-adjust-area .group-input-field .btn-group-save {
    width: 40px;
    height: 34px;
    margin-left: 5px;
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    transition: .3s;
    background-color: #8591b1;
}

.sidenav-contents .hidden-area {
    display: none;
}

.sidenav-contents .hidden-area > .item-add-box {
    padding-top: 0;
}

.sidenav-contents .items-in-group {
    position: relative;
    padding: 0 20px 10px 20px;
}

.sidenav-contents .items-in-group:before {
    position: absolute;
    top: 10px;
    left: 26px;
    display: block;
    content: '';
    width: 1px;
    height: calc(100% - 36px);
    background-color: #e5e5e5;
}

.sidenav-contents .items-in-group > li {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 20px;
}

.sidenav-contents .items-in-group > li:before {
    position: absolute;
    top: 9px;
    left: 4px;
    display: block;
    content: '';
    width: 5px;
    height: 5px;
    background-color: #6e42d9;
    border-radius: 2.5px;
}

.sidenav-contents .items-in-group > li > span {
    display: inline-block;
    color: #777;
    font-size: 14px;
    line-height: 24px;
    letter-spacing: -0.6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    padding-right: 1px;
}

.sidenav-contents .group-list .delete {
    width: 15px;
    height: 15px;
    background-color: rgba(133, 145, 177, .2);
    background-size: 7px 7px;
}

.sidenav-contents .item-list .delete {
    width: 15px;
    height: 15px;
    background-color: rgba(133, 145, 177, .2);
    background-size: 7px 7px;
    margin-left: 6px;
}

.sidenav-contents .group-list > li > a > .delete {
    background-color: rgba(133, 145, 177, .2);
}

.sidenav-contents ul > li > a > .delete:hover {
    background-color: rgba(117, 52, 250, .2);
}

.scroll-area .hidden-area .btn-add {
    background-color: #8591b1;
}

.sidenav-contents .quick-btns {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 10px;
    margin-top: 5px;
    gap: 5px;
}

.sidenav-contents .quick-btns-group {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-left: 20px;
    margin-right: 20px;
    padding: 0 0 10px 0;
    gap: 5px;
    flex-wrap: wrap;
}

.sidenav-contents .quick-btns-group li, .sidenav-contents .quick-btns li {
    position: relative;
    width: calc(25% - 5px);
}

@media only all and (max-width: 1199px) {
    .side-panel {
        top: 56px;
        left: auto;
        right: 0;
        width: 90%;
        height: calc(100% - 100px);
        border-right: 0;
        border-left: 1px solid #d9d9d9;
    }

    .wrapper.fixed .side-panel {
        top: 0;
        height: calc(100% - 44px);
    }

    .side-panel .item-list > li > strong:before {
        top: 0;
    }
}

/* sidenav-contents > keyword-list */
.keyword-list > li {
    position: relative;
}

.keyword-list > li:after {
    position: absolute;
    display: block;
    bottom: 0;
    left: 20px;
    content: '';
    width: calc(100% - 40px);
    height: 1px;
    background-color: #e5e5e5;
}

.keyword-list > li > strong {
    position: relative;
    display: block;
    color: #333;
    font-weight: 600;
    line-height: 50px;
    font-size: 15px;
    letter-spacing: -1px;
    padding: 0 20px;
}

.keyword-list > li > .arrow {
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 50px;
    height: 49px;
    background-image: url(/res/img/component/icon_arrow03_up_black-380fb67bb9816ee92461d1d90e41f52a.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 7px;
    outline: none;
    z-index: 10;
}

.keyword-list > li > .arrow.collapsed {
    background-image: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg);
}

.keyword-list > li > .arrow:hover {
    background-color: #f9f9f9;
}

.sidenav-contents .keyword-list ul {
    padding-bottom: 6px;
}

.sidenav-contents .keyword-list ul > li {
    position: relative;
    padding: 10px 20px;
    cursor: pointer;
}

.sidenav-contents .keyword-list ul > li:hover {
    background-color: #f9f9f9;
}

.sidenav-contents .keyword-list ul > li:last-of-type:after {
    display: none;
}

.sidenav-contents .keyword-list ul > li > strong {
    position: relative;
    /*     display: block; */
    font-size: 15px;
    font-weight: 400;
    line-height: 18px;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

@media only all and (max-width: 1199px) {
    .keyword-container {
        display: none;
        top: 56px;
        height: calc(100% - 56px);
    }

    .wrapper.fixed .keyword-container {
        top: 0;
        height: 100%;
        z-index: 30;
    }
}

/* sidenav-contents > sticker-st01 */
.sidenav-contents .sticker-st01 {
    position: relative;
    padding: 15px 20px;
    margin-left: 0;
}

.sidenav-contents .sticker-st01::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 20px;
    width: calc(100% - 40px);
    height: 2px;
    border-top: dashed 1px #e5e5e5;
}

.sidenav-contents .sticker-st01 > p {
    color: #444;
    line-height: 22px;
}

.sidenav-contents .sticker-st01 > p > span {
    font-weight: 600;
}

/* sidenav-contents > sticker-st02 */
.sidenav-contents .sticker-st02 {
    color: #444;
    padding: 0 20px 20px;
    margin-left: 0;
}

.sidenav-contents .sticker-st02 > li.date {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding-left: 34px;
    margin-right: 0;
}

.sidenav-contents .sticker-st02 > li.date > .label {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

.sidenav-contents .sticker-st02 > li:last-of-type {
    margin-bottom: 0;
}

.sidenav-contents .sticker-st02 > li:nth-child(1),
.sidenav-contents .sticker-st02 > li:nth-child(2) {
    margin-top: 0;
}

.sidenav-contents .sticker-st02 > li.detail {
    padding-left: 65px;
    margin-right: 0;
}

.sidenav-contents .sticker-st02 > li.detail > div {
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 5px;
}

.sidenav-contents .sticker-st02 > li.detail > div > p {
    margin-left: 0;
}

.sidenav-contents .sticker-st02 > li.detail > div:after {
    display: none;
}

.sidenav-contents .sticker-st02 > li.detail > div:last-of-type {
    border-bottom: 0;
    padding-bottom: 0;
    margin-bottom: 0;
}

@media only all and (max-width: 1199px) {
    .sidenav-contents .sticker-st02 > li.date > .label {
        display: block;
        margin: 0;
    }

    .sidenav-contents .sticker-st02 > li.detail {
        padding-left: 0;
    }

    .sidenav-contents .sticker-st02 > li.detail {
        padding-top: 26px;
        padding-left: 0;
    }

    .sticker-st02 > li.date > strong:first-of-type {
        margin-left: 0;
    }
}

/* manual-list */
.sidenav-contents > #manual-list > .scroll-area {
    height: calc(100% - 60px);
}

.sidenav-contents .manual-link-list {
    padding: 0 20px;
}

.sidenav-contents .manual-link-list > li {
    position: relative;
    display: flex;
    align-items: center;
    color: #333;
    padding: 16px 0;

}

.sidenav-contents .manual-link-list > li > strong {
    font-size: 15px;
    font-weight: 400;
    letter-spacing: -0.4px;
    line-height: 24px;
    border-bottom: 2px solid #FFF;
}

.btn-download {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    vertical-align: middle;
    text-align: center;
    align-items: center;
    cursor: pointer;
    font-weight: 400;
    font-family: 'noto sans kr';
    color: #4a4a4a;
    border: 1px solid #dadce0;
    border-radius: 20px;
    line-height: 22px;
    padding: 0 8px;
    font-size: 12px;
    overflow: hidden;
    background: transparent;
    -webkit-transition-duration: 300ms;
    transition-duration: 300ms;
    margin-left: auto;
    outline: none;
}

.btn-download:hover {
    color: #ff5252;
    background: #fce8e6;
    border-color: transparent;
}

/* source-list */
.sidenav-contents > #source-info > .scroll-area {
    height: calc(100% - 60px);
}

.sidenav-contents .source-list {
    padding: 0 20px;
}

.sidenav-contents .source-list > li.index {
    display: block;
    color: #333;
    font-weight: 500;
    padding: 5px 10px;
    background: #f3f6fb;
    border-bottom: 0;
    height: 30px;
}

.sidenav-contents .source-list > li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #333;
    padding: 10px 0;
    border-bottom: 1px solid #e5e5e5;
}

.sidenav-contents .source-list > li > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    margin-bottom: 4px;
}

.sidenav-contents .source-list > li > p:last-child {
    margin-bottom: 0;
}

.source-list strong {
    color: #333;
    font-size: 15px;
    font-weight: 600;
    line-height: 24px;
}

.source-list .label {
    font-weight: 400;
    color: #888;
    border-radius: 20px;
    line-height: 20px;
    font-size: 13px;
    overflow: hidden;
    margin-right: 4px;
}

.source-list .text {
    color: #333;
    font-size: 15px;
    line-height: 20px;
    margin-right: 4px;
}

.source-list > li > p > span:nth-child(2),
.source-list > li > p > span:nth-child(4) {
    position: relative;
    padding-right: 8px;
    margin-right: 8px;
}

.source-list > li > p > span:nth-child(2):after,
.source-list > li > p > span:nth-child(4):after {
    position: absolute;
    top: 5px;
    right: 0;
    display: block;
    content: '';
    width: 1px;
    height: 12px;
    background: #d0d0d0;
}

.apt-extent-ul {
    display: none;
    position: absolute;
    top: 0;
    left: 83px;
    margin: 0 !important;
    border: 1px solid #ddd;
    border-radius: 3px;
    background-color: #fff;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    z-index: 11;
}

.apt-extent-ul::after {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: -14px;
    width: 0;
    height: 0;
    z-index: 13;
    border-top: 7px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid #fff;
    border-bottom: 7px solid transparent;
}

.apt-extent-ul::before {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    left: -16px;
    width: 0;
    height: 0;
    z-index: 12;
    border-top: 7px solid transparent;
    border-left: 7px solid transparent;
    border-right: 7px solid #ddd;
    border-bottom: 7px solid transparent;
}

.apt-extent-ul ul::-webkit-scrollbar {
    width: 0;
}

.apt-extent-ul ul::-webkit-scrollbar-thumb {
    width: 0;
}

.apt-extent-ul ul::-webkit-scrollbar-track {
    width: 0;
    background: transparent;
}

.apt-extent-ul ul {
    overflow: hidden;
    overflow-y: auto;
    max-width: 200px;
    max-height: 200px;
    padding: 7px;
}

.apt-extent-ul li::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 2px;
    vertical-align: middle;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    background-color: #8934FA;
}

.apt-extent-ul.auction li::before {
    width: 15px;
    height: 15px;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
}

.apt-extent-ul.open-popup li::before {
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
}

.apt-extent-ul li span {
    transition: .3s;
}

.apt-extent-ul li:hover span {
    color: #6e42d9;
}

.sidenav-contents .apt-extent-ul li {
    width: auto;
    min-width: 135px;
    padding: 5px;
    font-size: 13px;
    cursor: pointer;
}


/*
* hero
*/
.hero {
    position: relative;
    border-top: 2px solid #606060;
    justify-content: center;
    padding: 0 20px 30px 20px;
    background: linear-gradient(90deg, #d7f2fd, #f4e9ee);
}

.hero.not-found, .hero.not-found2,
.hero.selected {
    height: 380px;
}

.hero.not-found:before, .hero.not-found2:before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    content: '';
    width: 100%;
    height: 360px;
    background-image: url(/res/img/component/bg_not_found_01-7df3aa4525ee512c3a5dba44dc326f2d.png);
    background-repeat: no-repeat;
    background-size: 590px 360px;
    background-position: center;
}

.hero.selected:before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    content: '';
    width: 100%;
    height: 360px;
    background-image: url(/res/img/component/bg_selected_01-e8d6d554303019c01c3f3d0565d136e3.png);
    background-repeat: no-repeat;
    background-size: 590px 360px;
    background-position: center;
}

.hero.not-found2:before {
    background-image: url(/res/img/component/bg_not_found_03-c8ac5e5930c0661e92bf59958c2b423b.png);
}

@media only all and  (max-width: 599px) {
    .hero {
        padding: 0 10px 20px 10px;
    }
}

/* heroes-head */
.heroes-head {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    min-height: 30px;
    margin: 25px 0 15px 0;
}

.heroes-head h2 {
    max-width: 60%;
    padding: 0 54px;
}

.heroes-head h2 > .prev {
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
    width: 15px;
    height: 30px;
    content: '';
    background-image: url(/res/img/component/icon_hero_prev-d380a32b41506bd241b2e8738888a04e.svg);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.heroes-head h2 > .text {
    font-size: 30px;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.heroes-head h2 > .next {
    position: absolute;
    top: 2px;
    right: 0;
    display: block;
    width: 15px;
    height: 30px;
    content: '';
    background-image: url(/res/img/component/icon_hero_next-72b26215bd0d64f4e1e49d02747e6448.svg);
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.heroes-head .group-name {
    position: relative;
    width: 20%;
    padding-left: 28px;
    margin-right: auto;
}

.heroes-head .group-name:before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 24px;
    height: 24px;
    content: '';
    background-image: url(/res/img/component/icon_heroes_pin-720ac579bb9453774363a307debd8447.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.heroine .heroes-head .group-name:before {
    background-image: url(/res/img/component/icon_heroine_pin-bd96367e0cfa0df75f68c49f9e5bf536.svg);
}

.heroes-head .group-name > span {
    display: block;
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    color: #333;
    line-height: 24px;
    letter-spacing: -0.6px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.heroes-head h2 .hero-pin {
    width: 32px; /* 20px */
    height: 30px;
    text-indent: -5000rem;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_hero_pin.svg);
    background-position: center;
    background-repeat: no-repeat; /* 옵션 추가 */
    transform: translateY(1px);
    margin-left: 10px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.heroes-head h2 .hero-pin:hover {
    transform: translateY(-1px);
}

.heroes-head .pager {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    width: 20%;
    margin-left: auto;
}

.heroes-head .pager .pager-item {
    display: block;
    width: 10px;
    height: 10px;
    background-color: #8e8e8e;
    border-radius: 5px;
    margin: 0 5px;
    cursor: pointer;
}

.heroes-head .pager .pager-item:hover,
.heroes-head .pager .pager-item.active {
    background-color: #333;
}

@media only all and  (max-width: 599px) {
    .heroes-head {
        height: auto;
        flex-direction: column;
    }

    .heroes-head h2 {
        max-width: 100%;
        margin: 10px 0;
    }

    .heroes-head .group-name {
        width: auto;
        max-width: 80%;
        margin-right: 0;
    }

    .heroes-head .pager {
        margin-left: 0;
        width: auto;
    }
}

/* hero-body */
.hero-body {
    position: relative;
    background-color: rgba(255, 255, 255, .8);
    border: 1px solid #dae0e8;
    border-radius: 6px;
}

.hero-body > .btn-collapsed {
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-30px);
    display: block;
    width: 60px;
    height: 17px;
    background-image: url(/res/img/component/btn_collapsed-7b00886e4603a09d1a4025c1c46ff965.png);
    background-size: contain;
    outline: none;
}

.hero-body > .key-indicator {
    width: 100%;
}

.hero-body > .key-indicator > ul {
    display: flex;
    width: 100%;
    padding: 12px 20px;
}

.hero-body > .key-indicator > ul > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 20%;
    height: 50px;
    border-right: 1px solid #e9edf3;
    padding-left: 22px;
    padding-right: 22px;
}

.hero-body > .key-indicator > ul > li:last-child {
    border-right: none;
}

.hero-body > .old-indicator {
    position: relative;
    display: flex;
    padding: 0 20px 20px 20px;
}

.hero-body > .old-indicator:before {
    position: absolute;
    top: 0;
    left: 20px;
    content: '';
    width: calc(100% - 40px);
    height: 1px;
    background: #dae0e8;
}

.hero-body > .old-indicator > div {
    width: 20%;
    border-right: 1px solid #dae0e8;
}

.hero-body > .old-indicator > div:last-child {
    border-right: none;
}

.hero-body > .old-indicator > div > .title {
    display: block;
    height: 40px;
    color: #333;
    font-size: 15px;
    line-height: 40px;
    letter-spacing: -1px;
    text-align: center;
    padding-left: 30px;
    padding-right: 30px;
    background: #eeeeee;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.hero-body > .old-indicator > div:nth-child(1) > .title {
    background: #d6f2f0;
}

.hero-body > .old-indicator > div:nth-child(2) > .title {
    background: #ffebee;
}

.hero-body > .old-indicator > div > ul {
    padding: 0 10px;
}

.hero-body > .old-indicator > div > ul > li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 50px;
    padding: 10px 12px;
    border-bottom: 1px solid #f3f5f9;
}

.hero-body > .old-indicator > div > ul > li:last-child {
    border-bottom: none;
}

.hero-body ul > li > .title {
    color: #111;
    font-size: 16px;
    font-weight: 500;
}

.hero-body ul > li > div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    color: #333;
    margin-left: auto;
}

.hero-body ul > li > div > i {
    position: relative;
    font-style: normal;
    font-size: 16px;
    font-family: 'Muli', sans-serif;
    font-weight: 700;
    letter-spacing: -0.4px;
    padding-left: 14px;
    margin-right: 10px;
}

.hero-body ul > li > div > i.up {
    color: #f35868;
}

.hero-body ul > li > div > i.up:before {
    position: absolute;
    display: block;
    top: 1px;
    left: 0;
    content: '';
    width: 11px;
    height: 13px;
    background-image: url(/res/img/component/icon_up-3e0ecd945884f9d31a1afc032c4bccd9.svg);
    background-size: contain;
}

.hero-body ul > li > div > i.down {
    color: #8591b1;
}

.hero-body ul > li > div > i.down:before {
    position: absolute;
    display: block;
    top: 2px;
    left: 0;
    content: '';
    width: 11px;
    height: 13px;
    background-image: url(/res/img/component/icon_down-32dc17bada833c21e4d65ff3a3ffd17f.svg);
    background-size: contain;
}

.hero-body ul > li > div > strong {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    min-height: 24px;
    align-items: center;
    font-size: 20px;
    line-height: 24px;
    font-family: 'Muli', sans-serif;
    font-weight: 800;
}

.hero-body ul > li > div > strong > span {
    color: #6d6d6d;
    font-family: 'Muli', sans-serif;
    font-size: 16px;
    font-weight: 500;
    margin-left: 4px;
    letter-spacing: -1px;
}

.hero-body ul > li > div > span {
    font-size: 16px;
    padding-left: 4px;
}

.hero-body ul > li > div > strong.badge {
    padding-right: 45px;
}

.badge:after {
    position: absolute;
    display: block;
    top: 1px;
    right: 0;
    width: 38px;
    height: 22px;
    color: #fff;
    font-family: 'Noto Sans KR';
    font-size: 13px;
    letter-spacing: -0.4px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    border-radius: 3px;
}

.badge.trading-1:after {
    content: '부족';
    background: #2b45d4;
}

.badge.trading-2:after {
    content: '보합';
    background: #ff9800;
}

.badge.trading-3:after {
    content: '증가';
    background: #dc3535;
}

.badge.unsold-1:after {
    content: '없음';
    background: #2b45d4;
}

.badge.unsold-2:after {
    content: '있음';
    background: #dc3535;
}

.badge.supply-1:after {
    content: '부족';
    background: rgb(131, 171, 214);
}

.badge.supply-2:after {
    content: '적정';
    background: rgb(95, 206, 164);
}

.badge.supply-3:after {
    content: '초과';
    background: rgb(236, 183, 81);
}

.badge.supply-4:after {
    content: '과잉';
    background: rgb(236, 105, 105);
}

@media only all and (max-width: 1399px) and (min-width: 1024px) {
    .main.heroes .hero-body > .key-indicator > ul {
        flex-direction: column;
    }

    .main.heroes .hero-body > .key-indicator > ul > li {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e9edf3;
    }

    .main.heroes .hero-body > .key-indicator > ul > li:last-child {
        border-bottom: none;
    }

    .main.heroes .hero-body > .old-indicator {
        display: none;
        flex-direction: column;
    }

    .main.heroes .hero-body > .old-indicator > div {
        width: 100%;
        border-right: 0;
    }
}

@media only all and (max-width: 1023px) {
    .hero-body > .key-indicator > ul {
        flex-direction: column;
    }

    .hero-body > .key-indicator > ul > li {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e9edf3;
    }

    .hero-body > .key-indicator > ul > li:last-child {
        border-bottom: none;
    }

    .hero-body > .old-indicator {
        display: none;
        flex-direction: column;
    }

    .hero-body > .old-indicator > div {
        width: 100%;
        border-right: 0;
    }
}


/*
* heroine
*/
.heroine {
    position: relative;
    border-top: 2px solid #606060;
    justify-content: center;
    padding: 0 20px 30px 20px;
    background: linear-gradient(90deg, #d7f2fd, #fef4e8);
}

.heroine.not-found, .heroine.not-found2,
.heroine.selected {
    height: 380px;
}

.heroine.not-found:before, .heroine.not-found2:before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    content: '';
    width: 100%;
    height: 360px;
    background-image: url(/res/img/component/bg_not_found_02-90c2d2d91b9cf3c6b58792ba3ffba05f.png);
    background-repeat: no-repeat;
    background-size: 590px 360px;
    background-position: center;
}

.heroine.not-found2:before {
    background-image: url(/res/img/component/bg_not_found_04-e118938266531fbc26b8c0baa8ffbd60.png);
}

.heroine.selected:before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    content: '';
    width: 100%;
    height: 360px;
    background-image: url(/res/img/component/bg_selected_02-cb969a829d8be166a78f5c6f9d61337b.png);
    background-repeat: no-repeat;
    background-size: 590px 360px;
    background-position: center;
}

@media only all and  (max-width: 599px) {
    .heroine {
        padding: 0 10px 20px 10px;
    }
}

/* heroes-head */
.heroine .heroes-head {
    position: relative;
    padding-bottom: 40px;
}

.heroine .heroes-head > .location {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    min-height: 30px;
    display: flex;
    align-items: center;
}

.heroine .heroes-head > .location > .text {
    color: #333;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.4px;
}

/* heroine-body */
.heroine-body {
    position: relative;
    background-color: rgba(255, 255, 255, .8);
    border: 1px solid #dae0e8;
    border-radius: 6px;
}

.heroine-body > .btn-collapsed {
    position: absolute;
    bottom: -17px;
    left: 50%;
    transform: translateX(-30px);
    display: block;
    width: 60px;
    height: 17px;
    background-image: url(/res/img/component/btn_collapsed-7b00886e4603a09d1a4025c1c46ff965.png);
    background-size: contain;
    outline: none;
}

.heroine-body .apt-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 12px 20px;
}

.heroine-body .apt-info > .address {
    color: #333;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: -0.4px;
    line-height: normal;
    padding-right: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.heroine-body .link-buttons {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

button.icon-left {
    position: relative;
    height: 32px;
    color: #555;
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.4px;
    padding-left: 30px;
    padding-right: 14px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 16px;
    margin: 4px 6px 4px 0;
    outline: none;
}

button.icon-left.pin-green:before {
    position: absolute;
    top: 7px;
    left: 10px;
    display: block;
    content: '';
    width: 17px;
    height: 17px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_17x17_green.svg);
    background-position: center;
    background-repeat: no-repeat;
}

button.icon-left.pin-blue:before {
    position: absolute;
    top: 7px;
    left: 10px;
    display: block;
    content: '';
    width: 17px;
    height: 17px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_17x17_blue.svg);
    background-position: center;
    background-repeat: no-repeat;
}

button.icon-left.radius:before {
    position: absolute;
    top: 7px;
    left: 10px;
    display: block;
    content: '';
    width: 17px;
    height: 17px;
    background-image: url(/res/img/component/icon_radius_17x17-8f104e00564e3a87cb66e4c18d1b5117.svg);
    background-position: center;
    background-repeat: no-repeat;
}

button.icon-left.naver {
    margin-left: auto;
}

button.icon-left.naver:before {
    position: absolute;
    top: 9px;
    left: 13px;
    display: block;
    content: '';
    width: 13px;
    height: 12px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_naver_green.svg);
    background-position: center;
    background-repeat: no-repeat;
}

button.icon-left.info:before {
    position: absolute;
    top: 6px;
    left: 10px;
    display: block;
    content: '';
    width: 17px;
    height: 17px;
    background-image: url(/res/img/component/icon_information_16x16-d2ebcbf59a38f061f575be61a5e71f7a.svg);
    background-position: center;
    background-repeat: no-repeat;
}

button.icon-left.apartment:before {
    position: absolute;
    top: 6px;
    left: 10px;
    display: block;
    content: '';
    width: 16px;
    height: 16px;
    background-image: url(/res/img/component/icon_apartment_16x16-0234949a0226cac30926ba7c72be2f35.svg);
    background-position: center;
    background-repeat: no-repeat;
}

.heroine-body > .apt-detail {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    padding: 20px 20px 10px;
}

.heroine-body > .apt-detail:before {
    position: absolute;
    top: 0;
    left: 20px;
    content: '';
    width: calc(100% - 40px);
    height: 1px;
    background: #dae0e8;
}

.apt-detail .apt-feature {
    display: flex;
    flex-wrap: wrap;
    width: calc(40% - 10px);
    margin-right: 20px;
}

.apt-detail .apt-feature > li {
    position: relative;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 50%;
    min-height: 60px;
    border-right: 1px solid #dae0e8;
    padding-left: 100px;
    padding-right: 20px;
    margin-bottom: 20px;
}

.apt-detail .apt-feature > li:before {
    position: absolute;
    top: 0;
    left: 20px;
    display: block;
    content: '';
    width: 60px;
    height: 60px;
}

.apt-detail .apt-feature > li:nth-child(1):before {
    background: url(/res/img/component/apt-info-01-d8bc715bb20e6e664def5ebc90512e7b.png) no-repeat center;
}

.apt-detail .apt-feature > li:nth-child(2):before {
    background: url(/res/img/component/apt-info-02-cfdd6f030a159b46dc32f07ccf72edaa.png) no-repeat center;
}

.apt-detail .apt-feature > li:nth-child(3):before {
    background: url(/res/img/component/apt-info-03-23f66cc4c45157b6dab71c560deace21.png) no-repeat center;
}

.apt-detail .apt-feature > li:nth-child(4):before {
    background: url(/res/img/component/apt-info-04-593df3b5ad993aebab89f3b6af4a5038.png) no-repeat center;
}

.apt-detail .apt-feature > li:nth-child(5):before {
    background: url(/res/img/component/apt-info-05-534d420a1807f93c132df355a66d873e.png) no-repeat center;
}

.apt-detail .apt-feature > li:nth-child(6):before {
    background: url(/res/img/component/apt-info-06-d0aedffb59643fca7c48999e4b51f5ee.png) no-repeat center;
}

.apt-detail .apt-feature > li:nth-child(even) {
    border-right: none;
}

.apt-detail .apt-feature > li > .label {
    color: #333;
    font-size: 15px;
    font-weight: 500;
    line-height: 25px;
}

.apt-detail .apt-feature > li > p {
    display: flex;
    flex-wrap: wrap;
    height: 30px;
    align-items: baseline;
    color: #6d6d6d;
    font-size: 16px;
    font-weight: 400;
}

.apt-detail .apt-feature > li > p > strong {
    color: #111;
    font-size: 20px;
    font-weight: 700;
    font-family: 'Muli', sans-serif;
    line-height: 30px;
}

.apt-detail .apt-feature > li > p > i {
    color: #333;
    font-family: 'Muli', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-left: 4px;
    margin-right: 7px;
}

.apt-detail .unsold {
    width: calc(60% - 10px);
}

.apt-detail .scroll-tbody {
    height: 186px;
}

.apt-detail .unsold > p {
    font-size: 14px;
    line-height: 22px;
    color: #6d6d6d;
    font-weight: 400;
    letter-spacing: -0.5px;
    text-align: right;
    padding-top: 6px;
    margin-right: 10px;
}

.apt-detail .unsold > p > i.divide {
    display: inline-block;
    width: 1px;
    height: 14px;
    background-color: #b7bac0;
    margin-left: 6px;
    margin-right: 6px;
    transform: translateY(2px);
}

@media only all and (max-width: 1399px) and (min-width: 1024px) {
    .main.heroes .heroine-body > .apt-detail > .apt-feature,
    .main.heroes .heroine-body > .apt-detail > .unsold {
        width: 100%;
        margin-right: 0;
    }
}

@media only all and (max-width: 1023px) {
    button.icon-left
    .heroine-body > .apt-detail {
        padding-top: 10px;
        flex-direction: column;
    }

    .apt-detail > .apt-feature,
    .apt-detail > .unsold {
        width: 100%;
        margin-right: 0;
    }

    .heroine-body .apt-info > .address {
        width: 100%;
    }

    .heroine-body > .apt-info > .right {
        margin-left: 0;
    }
}

@media only all and (max-width: 599px) {
    .heroine-body .link-buttons {
        justify-content: center;
    }

    button.icon-left {
        font-size: 13px;
        padding-left: 26px;
        padding-right: 0;
        text-indent: -5000rem;
    }

    button.icon-left.naver {
        margin-left: 0;
    }

    .heroine-body .apt-detail {
        display: none;
        padding-left: 10px;
        padding-right: 10px;
    }

    .apt-detail .apt-feature {
        padding-left: 10px;
        padding-right: 10px;
    }

    .apt-detail .apt-feature > li {
        min-height: 48px;
        padding-left: 0;
        padding-right: 0;
        align-items: center;
    }

    .apt-detail .apt-feature > li:before {
        display: none;
        left: 50%;
        transform: translateX(-50%);
    }

    .apt-detail .apt-feature > li > .label {
        font-weight: 400;
        font-size: 14px;
        line-height: 18px;
    }

    .apt-detail .apt-feature > li:last-child {
        border-bottom: 0;
    }

    .apt-detail .apt-feature > li > p > strong {
        font-size: 17px;
    }

    .apt-detail .scroll-tbody {
        height: 204px;
    }

    .table-blue {
        font-size: 13px;
    }

    .table-blue > tbody > tr > td,
    .table-blue > tbody > tr > th {
        padding-left: 4px;
        padding-right: 4px;
    }

    .apt-detail .unsold > p {
        font-size: 12px;
        margin-right: 0;
    }
}


/*
* card
*/
.card {
    position: relative;
    width: 50%;
    min-height: 1px;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 14px;
}

.card.max {
    width: 100%;
}

.card-title {
    position: relative;
    display: flex;
    height: 47px;
    align-items: center;
    border: 1px solid #dbe0ec;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 0 10px;
}

.card-title.pink {
    background: #ffdfec;
}
.card-title.pink > h4.bullet:before {
    background: #ff5c97;
}
.card-title.purple {
    background: #6e42d957;
}
.card-title.purple > h4.bullet:before {
    background: #8934fa;
}
.card-title.amber {
    background: #fff6f3;
}
.card-title.amber > h4.bullet:before {
    background: #ff7045;
}
.card-title.green {
    background: #f9fbf6;
}
.card-title.green > h4.bullet:before {
    background: #8bc34a;
}
.card-title.capri {
    background: #f6feff;
}
.card-title.capri > h4.bullet:before {
    background: #4d79f6;
}
.card-title.blue {
    background: #f1f7ff;
}
.card-title.blue > h4.bullet:before {
    background: #349eb4;
}
.card-title.yellow {
    background: #fffbf4;
}
.card-title.yellow > h4.bullet:before {
    background: #ffab2f;
}
.card-title.AliceBlue {
    background: #e3eff9;
}
.card-title.AliceBlue > h4.bullet:before {
    background: #6296c5;
}
.card-title.FloralWhite {
    background: #efbd5b59;
}
.card-title.FloralWhite > h4.bullet:before {
    background: #efbd5b;
}
.card-title.LavenderBlush {
    background: #c95f8259;
}
.card-title.LavenderBlush > h4.bullet:before {
    background: #c95f82;
}
.card-title.OldLace {
    background: #d3ab6159;
}
.card-title.OldLace > h4.bullet:before {
    background: #d3ab61;
}
.card-title.PowderBlue {
    background: #B0E0E670;
}
.card-title.PowderBlue > h4.bullet:before {
    background: #62bdc9;
}
.card-title.Snow {
    background: #e5a0a059;
}
.card-title.Snow > h4.bullet:before {
    background: #e5a0a0;
}
.card-title.GhostWhite {
    background: #a1a1d959;
}
.card-title.GhostWhite > h4.bullet:before {
    background: #a1a1d9;
}
.card-title.Lavender {
    background: #7d7ded59;
}
.card-title.Lavender > h4.bullet:before {
    background: #7d7ded;
}
.card-title.Thistle {
    background: #D8BFD899;
}
.card-title.Thistle > h4.bullet:before {
    background: #a360a3;
}
.card-title.Indigo {
    background: #4b008259 ;
}
.card-title.Indigo > h4.bullet:before {
    background: #9a50b1;
}

.card-title.Crimson {
    background: #DC143C59;
}
.card-title.Crimson > h4.bullet:before {
    background: #DC143C;
}
.card-title.Teal {
    background: #00808059;
}
.card-title.Teal > h4.bullet:before {
    background: #008080;
}
.card-title.Cyan {
    background: #00FFFF59;
}
.card-title.Cyan > h4.bullet:before {
    background: #00FFFF;
}
.card-title.Magenta {
    background: #FF00FF59;
}
.card-title.Magenta > h4.bullet:before {
    background: #FF00FF;
}
.card-title.Goldenrod {
    background: #DAA52059;
}
.card-title.Goldenrod > h4.bullet:before {
    background: #DAA520;
}
.card-title.Chartreuse {
    background: #7FFF0059;
}
.card-title.Chartreuse > h4.bullet:before {
    background: #7FFF00;
}
.card-title.Periwinkle {
    background: #CCCCFF59;
}
.card-title.Periwinkle > h4.bullet:before {
    background: #CCCCFF;
}
.card-title.Salmon {
    background: #FA807259;
}
.card-title.Salmon > h4.bullet:before {
    background: #FA8072;
}
.card-title.Coral {
    background: #FF7F5059;
}
.card-title.Coral > h4.bullet:before {
    background: #FF7F50;
}
.card-title.MintCream {
    background: #F5FFFA59;
}
.card-title.MintCream > h4.bullet:before {
    background: #F5FFFA;
}

.card-title > h4 {
    position: relative;
    color: #333;
    font-size: 16px;
    line-height: 24px;
    font-weight: 600;
    letter-spacing: -0.4px;
    padding: 0 10px;
}

.card-title > h4.bullet {
    padding-left: 16px;
}

.card-title > h4.bullet:before {
    position: absolute;
    top: 6px;
    left: 0;
    display: block;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 6px;
}

.card-title.dynamic > h4.bullet:before {
    position: absolute;
    top: 6px;
    left: 0;
    display: block;
    content: '';
    width: 12px;
    height: 12px;
    border-radius: 6px;
    background-color: var(--bullet-bg-color, transparent);
}

.card-title.pink > h4.bullet:before {
    background: #ff5c97;
}

.card-title.purple > h4.bullet:before {
    background: #8934fa;
}

.card-title.amber > h4.bullet:before {
    background: #ff7045;
}

.card-title.green > h4.bullet:before {
    background: #8bc34a;
}

.card-title.capri > h4.bullet:before {
    background: #4d79f6;
}

.card-title.blue > h4.bullet:before {
    background: #349eb4;
}

.card-title.yellow > h4.bullet:before {
    background: #ffab2f;
}

.card-title > .btn-add-item {
    margin-left: 4px;
}

.card-content {
    height: 290px;
    border: 1px solid #e5e9f1;
    border-top: 0;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    padding: 10px;
}

.card.max .card-content {
    min-height: 500px;
}

.card-title .right {
    position: absolute;
    top: 12px;
    right: 13px;
}

.card > .card-title > .right > .min-max {
    text-indent: -5000rem;
    width: 20px;
    height: 20px;
    background-image: url(/res/img/component/icon_width_max_grey-396038ed6530a018555a0d3dfeb74c5a.svg);
    background-size: 13px 13px;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 3px;
    outline: none;
}

.card.max > .card-title > .right > .min-max {
    background-image: url(/res/img/component/icon_width_min_grey-febb25a2964bd3a0d32bedc37c3b39be.svg);
}

.card-title > .right > .close {
    text-indent: -5000rem;
    width: 20px;
    height: 20px;
    background-image: url(/res/img/component/icon_delete_gray-2d803a094f0007107a563518d57a416a.svg);
    background-size: 13px 13px;
    background-position: center;
    background-repeat: no-repeat;
    margin-left: 3px;
    outline: none;
}

.card-title .standard-date {
    display: inline-flex;
    align-items: center;
    position: absolute;
    right: 70px;
}

.card-title .standard-date label {
    margin-right: 10px;
    font-size: 14px;
}

.card-title.purple .standard-date label {
    color: #0a2e4f;
}

.card-title .standard-date button {
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.card-title .standard-date input {
    height: 38px;
    padding: 0 10px;
    font-size: 15px;
    letter-spacing: -.5px;
    line-height: 100%;
    text-indent: 0 !important;
    border: 1px solid #ffbda7;
    color: #0a2e4f
}

.card-title.purple .standard-date input {
    border: 1px solid #bf91fb;
    color: #0a2e4f
}

.card-title .standard-date .dropdown, .standard-date .dropdown-select {
    border-radius: 0;
}

.card-title .standard-date .btn {
    width: 38px;
    height: 38px;
    background-color: #ffbda7;
}

.card-title.purple .standard-date .btn {
    background-color: #bf91fb;
}

.card-title .standard-date .btn::before {
    content: "";
    display: block;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    background-color: #0a2e4f;
}

.card-title .standard-date .btn:hover, .standard-date .btn:active {
    background-color: #ff7045;
}

.card-title.purple .standard-date .btn:hover {
    background-color: #8934fa;
}

.standard-date .btn:hover::before, .standard-date .btn:active::before {
    background-color: #fff;
}

.card-title .standard-date .icon-prev {
    border-radius: 3px 0 0 3px;
}

.card-title .standard-date .icon-prev::before {
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    transform: rotate(90deg);
}

.card-title .standard-date .icon-next {
    border-radius: 0 3px 3px 0;
}

.card-title .standard-date .icon-next::before, .icon-next::after {
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    transform: rotate(-90deg);
}

.card-title .standard-date .icon-down {
    width: 100px;
    margin-left: 0 !important;
    border-radius: 0;
    font-family: NotoSansR;
    background: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 90% 55%/10px no-repeat;
    transition: border-color .3s;
    cursor: pointer;
}

.card-title .standard-date .icon-down:hover {
    border-color: #ff7045;
}

.card-title .standard-date .dropdown-multi > .dropdown-menu {
    width: 118px;
}

@media only all and (max-width: 1023px) {
    .card {
        width: 100%;
    }

    .card-title > .right > .min-max {
        display: none;
    }
}

@media only all and (max-width: 599px) {
    .card {
        padding-left: 0;
        padding-right: 0;
    }
}

/*
* switcher-contents
*/
.switcher-contents {
    position: fixed;
    top: 70px;
    right: -280px;
    bottom: 0;
    width: 280px;
    height: calc(100% - 70px);
    background-color: #fff;
    border-left: 1px solid #d9e1ea;
    z-index: 4;
}

.switcher-contents.active {
    right: 0;
}

.wrapper.fixed .switcher-contents {
    top: 46px;
    height: calc(100% - 46px);
}

.switcher-contents .btn-close {
    position: absolute;
    top: 0;
    bottom: 0;
    left: -18px;
    margin: auto;
    width: 18px;
    height: 58px;
    background-image: url(/res/img/component/icon_arrow_right-281db40949f57e67efc3d373f91febb5.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 5px;
    background-color: #fff;
    border-top: 1px solid #bcc1ca;
    border-left: 1px solid #bcc1ca;
    border-bottom: 1px solid #bcc1ca;
    outline: none;
    transition: box-shadow .3s ease-out;
}

.side-switcher.active .btn-close {
    display: block;
}

.side-switcher .switcher-contents .switcher > .tips-box.top {
    top: 50px;
    left: -15px;
    right: -15px;
}

.side-switcher .switcher-contents .switcher > .tips-box.top p {
    font-size: 12px;
    letter-spacing: -.5px;
}

.side-switcher .switcher-contents .switcher > .switch-set .tips-box.bottom {
    top: 50px;
    left: -15px;
    right: -15px;
}

.side-switcher .switcher-contents .switcher > .switch-set .tips-box.bottom ul {
    padding: 10px 0;
    background-color: #FFF;
    margin: 0;
    border-left: solid 1px #dfe6ef;
    border-right: solid 1px #dfe6ef;
    border-bottom: solid 1px #dfe6ef;
    border-radius: 3px;
    box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 10%);
}

.side-switcher .switcher-contents .switcher > .switch-set .tips-box.bottom h5 {
    border-left: solid 1px #dfe6ef;
    border-right: solid 1px #dfe6ef;
    border-radius: 3px;
    box-shadow: 1px 1px 2px 1px rgb(0 0 0 / 10%);
}

.switcher-contents .btn-open {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: -18px;
    margin: auto;
    width: 18px;
    height: 60px;
    background-image: url(/res/img/component/icon_arrow_left-352c2344be264d3f22d20b1acd673b22.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 5px;
    background-color: #fff;
    border-top: 1px solid #bcc1ca;
    border-left: 1px solid #bcc1ca;
    border-bottom: 1px solid #bcc1ca;
    outline: none;
    transition: box-shadow .3s ease-out;
}

.switcher-contents.active .btn-open {
    display: none;
}

.switcher-contents .scroll-area {
    height: 100%;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 400px;
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
}

.switcher-contents .scroll-area::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.switcher-contents .switcher {
    position: relative;
    padding: 20px 0;
    border-bottom: 1px solid #e5e5e5;
}

.switcher-contents .switcher:last-of-type {
    margin-bottom: 50px;
}

.switcher-contents .switcher > .dropdown,
.switcher-contents .switcher > .dropdown-multi {
    position: absolute;
    top: 20px;
    right: 0;
}

.switcher-contents .dropdown-multi > .dropdown-menu > ul.areaYear {
    height: 168px;
}

.switcher-contents .dropdown.slim > .dropdown-select > span {
    font-size: 14px;
    font-weight: 600;
}

.switcher-contents .switcher > .switch-set {
    flex-direction: column;
    align-items: flex-start;
}

.switcher-contents .title {
    color: #272727;
    font-size: 16px;
    font-weight: 600;
    line-height: 30px;
}

.switcher-contents .switch {
    width: 100%;
    padding-right: 0;
}

.switcher-contents .switcher > .btn-square-set {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.switcher-contents .switcher > .tips {
    position: absolute;
    top: 25px;
    left: 85px;
}

.switcher-contents .switcher > .tips.volume {
    position: absolute;
    top: 25px;
    left: 100px;
}

.switcher-contents .switcher > .tips.income {
    position: absolute;
    top: 25px;
    left: 30px;
}

.switcher-contents .switcher > .tips-box {
    top: -210px;
    bottom: auto;
}

.btn-square-set > button {
    position: relative;
    width: 76px;
    height: 70px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-sizing: border-box;
    transition: all 0.3s ease;
    outline: none;
}

.btn-square-set > button + button {
    margin-left: 5px;
}

.btn-square-set > button > span {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    color: #333333;
    font-size: 13px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -0.8px;
    text-align: center;
}

.btn-square-set > button:hover {
    border: 1px solid #d0c1e5;
    background: #f8faff;
}

.btn-square-set > button:hover > span {
    color: #712cce;
}

.btn-square-set > button:before {
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    content: '';
    width: 26px;
    height: 26px;
    background-size: contain;
    background-repeat: no-repeat;
}

.btn-square-set > button.map-be-built:before {
    background: url(/res/img/component/square_btn_01-cb604f091ea81c905242e8b6333cb49e.svg);
}

.btn-square-set > button:hover.map-be-built:before {
    background: url(/res/img/component/square_btn_01_on-db3c5810eccf00a33c08bd75b76b00a7.svg);
}

.btn-square-set > button.map-around:before {
    background: url(/res/img/component/square_btn_02-801204465f80cc0a3fb9ddcc38fa5b86.svg);
}

.btn-square-set > button:hover.map-around:before {
    background: url(/res/img/component/square_btn_02_on-1c27249566d02f5085ee34ac0fe72ddb.svg);
}

.btn-square-set > button.link-naver:before {
    background: url(/res/img/component/square_btn_03-a53fb2050d596441190115f8974d93ea.svg);
}

.btn-square-set > button:hover.link-naver:before {
    background: url(/res/img/component/square_btn_03_on-91f94ec39bbc450c48f9857ac6a1fdcd.svg);
}

.btn-square-set > button.map-radius:before {
    background: url(/res/img/component/square_btn_04-7c00b885dd8c2da34936129040f30f1b.svg);
}

.btn-square-set > button:hover.map-radius:before {
    background: url(/res/img/component/square_btn_04_on-ada06438719573aea079560370d3d723.svg);
}

.btn-square-set > button.map-chart:before {
    background-color: #3c3c3c;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/contain no-repeat;
}

.btn-square-set > button:hover.map-chart:before {
    background-color: #8934fa;
}

@media only all and (max-width: 1199px) {
    .switcher-contents {
        top: 56px;
        height: calc(100% - 56px);
        transition: right .3s ease;
        z-index: 200;
    }

    .wrapper.fixed .switcher-contents {
        top: 0;
        height: 100%;
    }

    .mask-switcher {
        display: none;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #000;
        border-right: 0;
        opacity: 0.4;
        overflow: hidden;
        z-index: 98;
    }
}


/*
* mypage
*/

/* title-wrap */
.title-wrap {
    display: flex;
    padding-left: 20px;
    padding-right: 20px;
}

.title-wrap > .title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 140px;
    margin: 0 auto;
}

.title-wrap > .title > h2 {
    color: #111;
    font-size: 42px;
    line-height: 50px;
    font-weight: 200;
    letter-spacing: -2px;
}

.title-wrap > .title > p:before {
    position: absolute;
    bottom: 0;
    left: 25px;
    display: block;
    content: '';
    width: 30px;
    height: 2px;
    background: #333;
}

.title-wrap > .title > p {
    position: relative;
    color: #555;
    font-size: 15px;
    line-height: 21px;
    letter-spacing: -0.2px;
    padding-left: 72px;
}

@media only all and (max-width: 1199px) {
    .title-wrap > .title {
        width: auto;
        flex-direction: column;
        margin-top: 20px;
    }

    .title-wrap > .title > h2 {
        font-size: 32px;
        font-weight: 500;
    }

    .title-wrap > .title > p {
        text-align: center;
        padding-top: 30px;
        padding-left: 0;
        padding-bottom: 20px;
    }

    .title-wrap > .title > p:before {
        top: 14px;
        left: calc(50% - 15px);
    }
}

/* sub-filter */
.sub-filter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px;
    background-color: #f3f6fb;
    border: 1px solid #e6eaf0;
    border-radius: 4px;
    margin: 20px 0;
}

.sub-filter .option {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-right: 10px;
}

.sub-filter .dropdown,
.sub-filter .dropdown-multi {
    background: #fff;
    margin-right: 10px;
}

.sub-filter label {
    position: relative;
    color: #555;
    font-size: 15px;
    font-weight: 500;
    margin-right: 14px;
}

.sub-filter label.bullet {
    position: relative;
    padding-left: 10px;
    margin-left: 8px;
}

.sub-filter label.bullet:before {
    position: absolute;
    top: 3px;
    left: 0;
    display: block;
    content: '';
    width: 2px;
    height: 10px;
    background-color: #8f55e2;
}

.sub-filter input[type=text] {
    width: 120px;
    height: 38px;
    font-size: 15px;
    line-height: 18px;
    color: #585858;
    box-sizing: border-box;
    background: #ffffff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    margin-left: 6px;
}

.sub-filter.mb0 {
    margin-bottom: 0;
}

input[data-date-type]:read-only {
    background-color: #ffffff;
    cursor: pointer;
}

.period-btns {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.period-btns button {
    min-width: 50px;
    font-size: 14px;
    color: #333;
    font-weight: 400;
    line-height: 22px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #e1e7f2;
    border: 2px solid #e1e7f2;
    border-radius: 16px;
    outline: none;
    margin-right: 2px;
    transition-duration: 300ms;
}

.period-btns button:hover {
    color: #712cce;
    font-weight: 500;
    background-color: #fff;
    border: 2px solid #712cce;
}

.period-btns button.active {
    color: #fff;
    font-weight: 400;
    background-color: #712cce;
    border: 2px solid #712cce;
}

.sub-filter > .right {
    display: flex;
    margin-left: auto;
}

.sub-filter .btn-purple {
    width: 108px;
    font-size: 15px;
    border-radius: 4px;
    margin-left: 6px;
    padding-left: 6px;
    padding-right: 6px;
}

.sub-filter .swung-dash {
    margin-left: -4px;
    margin-right: 6px;
}

.sub-filter .btn-group button {
    color: #fff;
    font-weight: 400;
    line-height: 22px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #712cce;
    border: 2px solid #712cce;
    border-radius: 16px;
    outline: none;
    margin-right: 2px;
    transition-duration: 300ms;
}

.btn-group button:hover {
    color: #712cce;
    font-weight: 500;
    background-color: #fff;
    border: 2px solid #712cce;
}

@media only all and (max-width: 1199px) {
    .sub-filter .option {
        margin-bottom: 10px;
    }

    .sub-filter > .right {
        width: 100%;
        justify-content: center;
    }
}

@media only all and (max-width: 599px) {
    .sub-filter .option {
        width: 100%;
        margin-right: 0;
    }

    .sub-filter label.bullet {
        min-width: 66px;
    }

    .period-btns {
        width: 100%;
        justify-content: space-between;
    }

    .period-btns button {
        min-width: 44px;
        font-size: 13px;
        padding-right: 4px;
        padding-left: 4px;
    }
}

/* sub-filter.address */
.sub-filter.address .dropdown,
.sub-filter.address .dropdown-multi {
    margin-right: 0;
}

.sub-filter.address .dropdown-menu > li {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
}

.sub-filter.address .dropdown:nth-child(4) {
    max-width: 300px;
}

@media only all and (max-width: 599px) {
    .sub-filter.address {
        padding-top: 50px;
    }

    .sub-filter.address > .option {
        position: relative;
    }

    .sub-filter.address > .option:first-child > label {
        position: absolute;
        top: -40px;
        color: #333;
        font-size: 18px;
        text-align: center;
        padding-left: 0;
        margin-top: 10px;
        margin-bottom: 20px;
    }

    .sub-filter.address > .option:first-child > .bullet:before {
        display: none;
    }

    .sub-filter.address .option {
        width: calc(50% - 3px);
    }

    .sub-filter.address .option > .dropdown {
        width: 100%;
        min-width: inherit !important;
    }

    .sub-filter.address .option:nth-child(2) {
        margin-left: 6px;
    }

    .sub-filter.address .option:nth-child(4), .sub-filter.address .option:nth-child(5) {
        width: 100%;
    }
}

input[type="number"], input[type="text"] {
    padding: 10px 10px 10px 10px;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type="number"] {
    text-align: right;
}


/* 20190319~ 배이화 추가 */

.icon-refresh {
    display: inline-block;
    width: 30px;
}

.icon-refresh span {
    display: block;
    position: relative;
    width: 28px;
    height: 28px;
    font-size: 0;
    color: transparent;
}

.icon-refresh span::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 28px;
    height: 28px;
    background: url(/res/img/component/icon_refresh-fbf7dcdcdf22bbf3223a1ca70b04b48f.svg) 50% 50%/auto 18px no-repeat;
    transition: all ease .2s;
}

.icon-refresh:active span::before {
    transform: rotate(180deg);
    transition: all ease .2s;
}

.btn {
    display: inline-block;
    height: 44px;
    padding: 0 15px;
    border: none;
    color: #fff;
    font-size: 15px;
    text-align: center;
    border-radius: 4px;
    transition: .5s;
    outline: none;
}
.btn.disabled, .btn.disabled:hover, .btn.disabled:active, .btn:disabled, .btn:disabled:hover, .btn:disabled:active {
    color: #babbcf !important;
    background-color: #edf1f6 !important;
    cursor: default;
}

.btn-pw {
    background-color: #3d3d3d;
}

.btn-pw:hover, .btn-pw:active {
    background-color: #5e35b1;
}

.btn-pw::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    vertical-align: -2px;
    background: url(/res/img/component/icon_pw-239427838ad43d119079ede23b181725.svg) 0 0/auto 18px no-repeat;
}

.btn-purple:hover, .btn-purple:active {
    background-color: #6f21a2;
}

.btn-hotpink {
    background-color: #ff4081;
}

.btn-hotpink:hover, .btn-hotpink:active {
    background-color: #ff1d6a;
}

.btn-skyblue {
    background-color: #1ea5db;
}

.btn-skyblue:hover, .btn-skyblue:active {
    background-color: #0097d3;
}

.btn-marine {
    background-color: #04509b;
}

.btn-marine:hover, .btn-marine:active {
    background-color: #084581;
}

.btn-fold {
    text-indent: -9999px;
    background: url(/res/img/component/icon_arrow_up_gray-8ed9943e9794626061cdccd4347c8f94.svg) 50%/50% no-repeat;
}

.btn-alarm {
    display: inline-block;
    position: relative;
    margin-left: 10px;
    padding: 1px 6px 1px 19px;
    border: solid 1px #e4e6e9;
    border-radius: 20px;
    color: #666;
    font-size: 12px;
    vertical-align: middle;
    transition: .3s;
}

.btn-alarm::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    mask: url(/res/img/component/icon_alarm-8486ee9a69d13624ad2d6593823d731f.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_alarm-8486ee9a69d13624ad2d6593823d731f.svg) 50%/contain no-repeat;
    background-color: #aaa;
    transform: translateY(-50%);
    transition: .3s;
}

.btn-alarm:hover {
    border-color: #999;
}

.btn-alarm.active {
    border-color: #8934fa;
    color: #8934fa;
}

.btn-alarm.active::before {
    background-color: #8934fa;
    mask: url(/res/img/component/icon_alarm_on-fefbd32a98a151b1b65faaf0e41a0bd8.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_alarm_on-fefbd32a98a151b1b65faaf0e41a0bd8.svg) 50%/contain no-repeat;
}

.btn-invest-mng {
    display: inline-block;
    position: relative;
    margin-left: 3px;
    padding: 1px 6px 1px 19px;
    border: solid 1px #e4e6e9;
    border-radius: 20px;
    color: #666;
    font-size: 12px;
    vertical-align: middle;
    transition: .3s;
}

.btn-invest-mng::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 4px;
    width: 22px;
    height: 22px;
    border-radius: 100%;
    width: 14px;
    height: 14px;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_invest_mng.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_invest_mng.svg) 50%/contain no-repeat;
    background-color: #aaa;
    transform: translateY(-50%);
    transition: .3s;
}

.btn-invest-mng:hover {
    border-color: #999;
}

.btn-invest-mng.active {
    border-color: #8934fa;
    color: #8934fa;
}

.btn-invest-mng.active::before {
    background-color: #8934fa;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_invest_mng.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_invest_mng.svg) 50%/contain no-repeat;
}

.pre-badge.invest {
    right: -10px;
}

.btn-green {
    background-color: #306d4c;
    transition: all 0.3s ease;
}

.btn-green:hover, .btn-green:active {
    background-color: #3e7a2d;
}

.text-red {
    color: #dc3535 !important;
}

.text-blue {
    color: #2b45d4 !important;
}

.beta-badge {
    display: inline-block;
    min-width: 35px;
    margin-left: 5px;
    line-height: 18px;
    color: #fff;
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    padding: 0 6px;
    background-color: #2b45d4;
    border-radius: 20px;
}

.table-basic.no-thead {
    margin-bottom: 30px;
    border-top: solid 2px #d5dae6;
}

.table-basic.no-thead th:last-child {
    border-right: 1px solid #ccd4e1;
}

.table-basic.no-thead .subject {
    height: 40px;
    color: #50649c;
    font-size: 16px;
    font-weight: bold;
    background-color: #f0f3fc;
}

.table-basic .list-basic {
    margin-bottom: 0;
}

/* 좌측 메뉴 내정보 */
.sidenav-contents .link-list > li > a > small {
    margin-left: 60px;
    color: #ff4081;
    font-size: 12px;
    font-weight: bold;
    line-height: 24px;
    text-indent: 8px;
}

.sidenav-contents .link-list > li > a > small::before {
    display: none !important;
    content: "";
    display: inline-block;
    width: 1px;
    height: 10px;
    margin-right: 8px;
    background-color: #ccc;
}

.sidenav-contents .item-list li strong .btn-alarm {
    position: absolute;
    top: 1px;
    right: 0;
    z-index: 1;
}

.sidenav-contents .openChat-list > li {
    padding: 16px 0;
    border-bottom: 1px solid #e5e5e5;
}

.sidenav-contents .openChat-list > li > strong {
    display: block;
    color: #333;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin-top: 8px;
}

.sidenav-contents .openChat-list > li > span {
    display: block;
    color: #878788;
    font-size: 14px;
    text-align: center;
    margin-top: 12px;
}

.sidenav-contents .openChat-list li .icon-kakao-nav::before {
    width: 16px;
    height: 16px;
    background-color: #6b5f5f;
    -webkit-mask: url(/res/img/component/icon_kakao.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_kakao.svg) 50%/contain no-repeat;
}

.sidenav-contents .openChat-list li .icon-kakao-nav {
    color: #6b5f5f;
    background-color: #fee500;
    margin: 10px auto;
    display: block;
    font-weight: bold;
}

.sidenav-contents .openChat-list li button::before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    vertical-align: -3px;
    background-color: #b8c4d2;
}

/* 상세검색>아파트검색> 아파트반경비교 모달창 차트 타입 아이콘 */
.chart-type button {
    width: 38px;
    height: 38px;
    border: 1px solid #dadce0;
    border-radius: 4px;
    text-indent: -9999px;
    background-size: auto 20px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    outline: none;
}

.chart-type button + button {
    margin-left: 5px;
}

.chart-type button[data-value="G"]{background-image:url(https://aptgin.com/cdn/res/icon/common/svg/icon_grid_pre.svg);}
.chart-type button[data-value="C"]{background-image:url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg);}
.chart-type button.active{border-color:#712cce;background-color:#712cce;}
.chart-type button.active[data-value="G"]{background-image:url(https://aptgin.com/cdn/res/icon/common/svg/icon_grid_white.svg);}
.chart-type button.active[data-value="C"]{background-image:url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_white.svg);}

/* 홈>시장동향>지인시계열/시계열플러스 상단 검색 영역 중 지역 선택 리스트 디자인 수정 */
.filter-set > .filter.region > fieldset {
    width: auto;
}

.filter-set > .filter.region > fieldset .checking-set .checking:last-child {
    margin-right: 0;
}

.filter-set > .filter.region .region-checking {
    position: absolute;
    top: 16px;
    left: 70px;
}

.filter-set > .filter.region .region-checking.pr0707 {
    left: 99px;
}

.filter-set > .filter > fieldset .selecting {
    flex-flow: row nowrap;
    align-items: flex-start;
}

.filter-set > .filter > fieldset .selecting .radiomark + span {
    width: calc(100% - 20px);
}

.depth-set.loc-list ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    width: 270px;
    height: auto;
    padding: 5px 7px;
    overflow: hidden;
}

.depth-set.loc-list li {
    width: calc(33.33% - 2px);
    height: 55px;;
    margin: 2px 0;
}

.depth-set.loc-list button {
    line-height: 100%;
}

.depth-set.loc-list button.active {
    border: solid 1px rgba(113, 44, 206, .2);
}

.depth-set.loc-list button::before {
    content: "";
    display: block;
    width: 30px;
    height: 18px;
    margin: 0 auto 5px auto;
    background-position: 50% 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

/* 인구수 필터 추가로 인해 css 덮어쓰기*/
.filter-set > .filter > fieldset .selecting.input {
    flex-flow: wrap;
    flex-direction: row;
    min-width: 250px;
}

.filter-set > .filter > fieldset .selecting.input .radiomark + span {
    width: auto;
}

.icon-loc-all::before {
    background: url(/res/img/component/icon_loc_all-8954c83b9060001a53cd84af9446184d.svg);
}

.icon-loc-11::before {
    background: url(/res/img/component/icon_loc_su-40f3ce58054407ffb7d0a91ed03e770a.svg);
}

.icon-loc-26::before {
    background: url(/res/img/component/icon_loc_bs-a7d89dba75c7859230a0fe39847b22b0.svg);
}

.icon-loc-27::before {
    background: url(/res/img/component/icon_loc_dg-df8d5fa01543b747c60146ba6251bdc1.svg);
}

.icon-loc-28::before {
    background: url(/res/img/component/icon_loc_ic-ff984f26cba6e0e75d1cc268b095e9de.svg);
}

.icon-loc-29::before {
    background: url(/res/img/component/icon_loc_gj-0fed29361a7f319769033188fd50bbca.svg);
}

.icon-loc-30::before {
    background: url(/res/img/component/icon_loc_dj-5b78165b72ca427bf0c639e8224d7880.svg);
}

.icon-loc-31::before {
    background: url(/res/img/component/icon_loc_us-a29d44a9ec438edd6f90c9cf6dfd06a9.svg);
}

.icon-loc-36::before {
    background: url(/res/img/component/icon_loc_sj-10dcf6e4f56d16397d18ac846a0f4fbb.svg);
}

.icon-loc-41::before {
    background: url(/res/img/component/icon_loc_gg-c02c673e446d91ef5b3b5019fccc3bcc.svg);
}

.icon-loc-42::before {
    background: url(/res/img/component/icon_loc_gw-63816f368bc557ef92b3776fd0bcabc7.svg);
}

.icon-loc-43::before {
    background: url(/res/img/component/icon_loc_cb-2bcec17d56a30c0b883f6dcc2ee25190.svg);
}

.icon-loc-44::before {
    background: url(/res/img/component/icon_loc_cn-a6ae36ee4a014323461b8d8ea66b002d.svg);
}

.icon-loc-45::before {
    background: url(/res/img/component/icon_loc_jb-d506894dba673d1fbb1e82439ab8ef68.svg);
}

.icon-loc-46::before {
    background: url(/res/img/component/icon_loc_jn-5c5adcb1b314794d59fab6ba30a2742f.svg);
}

.icon-loc-47::before {
    background: url(/res/img/component/icon_loc_gb-f9acdafcba08ee623d15c748c7454474.svg);
}

.icon-loc-48::before {
    background: url(/res/img/component/icon_loc_gn-ac31ff043c2a8b9ecb49adc07364bba2.svg);
}

.icon-loc-50::before {
    background: url(/res/img/component/icon_loc_jj-4fa26999872c82fd9bb33f7a7f5f4281.svg);
}

.icon-loc-all.active::before {
    background: url(/res/img/component/icon_loc_all_on-8c62867989640c458d8e87366f927d49.svg);
}

.icon-loc-11.active::before {
    background: url(/res/img/component/icon_loc_su_on-b65e0a7e67873d53f5af7f9fadb279e2.svg);
}

.icon-loc-26.active::before {
    background: url(/res/img/component/icon_loc_bs_on-4fdf4c346e30064affa285b6e6766a4b.svg);
}

.icon-loc-27.active::before {
    background: url(/res/img/component/icon_loc_dg_on-7210a523393e8d2514d4c3d3fed3649d.svg);
}

.icon-loc-28.active::before {
    background: url(/res/img/component/icon_loc_ic_on-d795523b969b35035dcf08c15eaf8b11.svg);
}

.icon-loc-29.active::before {
    background: url(/res/img/component/icon_loc_gj_on-c9b6af9f0a6e50f4ddf37ad6264c18fc.svg);
}

.icon-loc-30.active::before {
    background: url(/res/img/component/icon_loc_dj_on-181c9e1fa12370e9c8bfa89b92475443.svg);
}

.icon-loc-31.active::before {
    background: url(/res/img/component/icon_loc_us_on-b50b59c151fd21179e01b290c01375dc.svg);
}

.icon-loc-36.active::before {
    background: url(/res/img/component/icon_loc_sj_on-10dcf6e4f56d16397d18ac846a0f4fbb.svg);
}

.icon-loc-41.active::before {
    background: url(/res/img/component/icon_loc_gg_on-7f4b71fc24f68ab5df464d5a5d845148.svg);
}

.icon-loc-42.active::before {
    background: url(/res/img/component/icon_loc_gw_on-1ea6736a5e4ad82ac788cac967686d3f.svg);
}

.icon-loc-43.active::before {
    background: url(/res/img/component/icon_loc_cb_on-4c45b4cb001adef4ca10afc92f38fb3f.svg);
}

.icon-loc-44.active::before {
    background: url(/res/img/component/icon_loc_cn_on-d9885512b0da09f684ca92deedfcaa2a.svg);
}

.icon-loc-45.active::before {
    background: url(/res/img/component/icon_loc_jb_on-57ae335ef85f4c2dd044ab533049d599.svg);
}

.icon-loc-46.active::before {
    background: url(/res/img/component/icon_loc_jn_on-653e6a6812ee9fd64fa2b74ad785aea1.svg);
}

.icon-loc-47.active::before {
    background: url(/res/img/component/icon_loc_gb_on-3b9eec54e733e5844fcde4e32a0993b3.svg);
}

.icon-loc-48.active::before {
    background: url(/res/img/component/icon_loc_gn_on-cc8416a274bba64582b013e3e0ecc1f4.svg);
}

.icon-loc-50.active::before {
    background: url(/res/img/component/icon_loc_jj_on-deb2a4a8a189d7b1cc9ec92ad707bd71.svg);
}

/* 홈>시장동향>시계열플러스 범례 디자인 추가 */
.legend .bar-set {
    position: relative;
    padding: 0 50px;
}

.legend .color-bar {
    position: relative;
    width: 130px;
    height: 14px;
    background: linear-gradient(to right, #3161d0, #fff, #f70104);
    z-index: 1;
}

.legend .color-bar::before, .legend .color-bar::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
}

.legend .color-bar::before {
    left: -7px;
    border-right: 7px solid #3161d0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.legend .color-bar::after {
    right: -7px;
    border-left: 7px solid #f70104;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.legend .color-bar2 {
    position: relative;
    width: 130px;
    height: 14px;
    background: linear-gradient(to right, #228be6, #fff, #e74980);
    z-index: 1;
}

.legend .color-bar2::before, .legend .color-bar2::after {
    content: "";
    position: absolute;
    bottom: 0;
    width: 0;
    height: 0;
}

.legend .color-bar2::before {
    left: -7px;
    border-right: 7px solid #228be6;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.legend .color-bar2::after {
    right: -7px;
    border-left: 7px solid #e74980;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}
.legend .bar-set span {
    position: absolute;
    top: -1px;
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    z-index: 4;
}

.legend .bar-set span:first-child {
    left: 5px;
    color: #3161d0;
}

.legend .bar-set span:nth-child(2) {
    right: 2px;
    color: #f70104;
}

.legend span.standard {
    font-size: 13px;
}

/* .legend .bar-set span:nth-child(2){left:33px;color:#3161d0;}
.legend .bar-set span:nth-child(3){left:85px;}
.legend .bar-set span:nth-child(4){top:-10px;left:50%;width:20px;height:17px;padding:0 5px;color:#50649c;text-align:center;line-height:12px;background:url(/res/img/component/legend_bar_box-d06f5539d5d40e98bf9e606bc36b77d5.png) 50% 50% no-repeat;transform:translate(-50%,0);}
.legend .bar-set span:nth-child(5){right:85px;}
.legend .bar-set span:nth-child(6){right:26px;color:#f70104;}
.legend .bar-set span:nth-child(7){right:0;color:#f70104;} */
.bar-arrow::before, .bar-arrow::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    height: 0;
}

.bar-arrow.minus {
    position: absolute;
    top: 0;
    left: 37px;
    z-index: 1;
}

.bar-arrow.minus + .bar-arrow.minus {
    left: 31px;
    z-index: 0;
}

.bar-arrow.minus::before {
    border-right: 7px solid #3161d0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.bar-arrow.minus::after {
    left: 3px;
    border-right: 7px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.bar-arrow.plus {
    position: absolute;
    top: 0;
    right: 40px;
    z-index: 0;
}

.bar-arrow.plus + .bar-arrow.plus {
    right: 46px;
    z-index: 0;
}

.bar-arrow.plus::before {
    left: 3px;
    border-left: 7px solid #f70104;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.bar-arrow.plus::after {
    left: 0;
    border-left: 7px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}
.bar-arrow2::before, .bar-arrow2::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    height: 0;
}

.bar-arrow2.minus {
    position: absolute;
    top: 0;
    left: 37px;
    z-index: 1;
}

.bar-arrow2.minus + .bar-arrow2.minus {
    left: 31px;
    z-index: 0;
}

.bar-arrow2.minus::before {
    border-right: 7px solid #228be6;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.bar-arrow2.minus::after {
    left: 3px;
    border-right: 7px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.bar-arrow2.plus {
    position: absolute;
    top: 0;
    right: 40px;
    z-index: 0;
}

.bar-arrow2.plus + .bar-arrow2.plus {
    right: 46px;
    z-index: 0;
}

.bar-arrow2.plus::before {
    left: 3px;
    border-left: 7px solid #e74980;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

.bar-arrow2.plus::after {
    left: 0;
    border-left: 7px solid #fff;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}
.above-area > h4 > div {
    position: relative;
}

.above-area .legend {
    z-index: 0;
}

.above-area .sum .info.first {
    display: block;
}

.above-area .sum .info.first::after {
    display: none;
}

.above-area + .k-grid {
    margin-top: 10px !important;
}

.above-area.min-height {
    min-height: 40px;
    margin: 0;
}

.legend-info {
    display: flex;
    align-items: center;
    margin-right: 5px;
}

.main.m0102 .wide > .above-area:first-child, .main.m0103 .wide > .above-area:first-child {
    margin-top: 0;
}

.main.m0506 .contents-area > .sub-filter {
    margin-bottom: 10px;
}

/* 내정보 */
.bbs-top.info {
    line-height: 44px;
}

.bbs-top span {
    position: relative;
    padding-left: 10px;
    margin-left: 8px;
    font-weight: 500;
    font-size: 16px;
}

.bbs-top span.bullet:before {
    content: "";
    position: absolute;
    top: 17px;
    left: 0;
    display: block;
    width: 2px;
    height: 10px;
    background-color: #8f55e2;
}

.bbs-form.info .required label::after {
    content: "*";
    display: inline-block;
    margin-left: 5px;
    color: #ff4081;
}

.bbs-form.info > .dl-table > dd > input {
    float: left;
    width: 180px;
    margin-right: 0;
    font-size: 15px;
    font-weight: 500;
}

.bbs-form.info > .dl-table > dd.security input.tel-box {
    width: 60px;
    padding: 0px;
}

.bbs-form.info > .dl-table > dd > input[disabled] {
    background-color: #f0f3fc;
}

.bbs-form.info > .dl-table > dd > .btn {
    height: 38px;
    padding: 0 10px;
}

.bbs-form.info > .dl-table > dd .btn-purple {
    padding: 0 15px;
}

.bbs-form.info > .dl-table > dd > input + .btn, .bbs-form.info > .dl-table > dd > input + .dropdown, .bbs-form.info > .dl-table > dd > span + button {
    margin-left: 10px;
}

.bbs-form.info > .dl-table > dd .btn + .btn {
    margin-left: 10px;
}

.bbs-form.info > .dl-table > dd.phone > input {
    width: 80px;
}

.bbs-form.info > .dl-table > dd .icon-alarm::before {
    background-color: #fff;
}

.bbs-form.info > .dl-table > dd > .checking + button {
    margin-left: 15px;
}

.bbs-form.info dd > span {
    float: left;
    margin: 0 5px;
    text-align: center;
    line-height: 38px;
}

.bbs-form.info dd .tips {
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 0;
    margin-left: 15px;
    line-height: 130%;
}

.bbs-form.info dd .dropdown + .dropdown {
    margin-left: 10px;
}

.bbs-form.info .dropdown-select {
    width: 178px;
}

.bbs-form.info .birth .dropdown-select {
    width: 96px;
}

.bbs-form.info .checking + .checking {
    margin-left: 30px;
}

.bbs-form.info dd .word-tip {
    margin-left: 30px;
    color: #8934fa;
}

.bbs-form.info dd.security {
    position: relative;
    padding-bottom: 40px;
}

.bbs-form.info dd.security .notes {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    position: absolute;
    bottom: 5px;
    left: 20px;
}

.icon-change-own::before {
    background-color: #fff;
    mask: url(/res/img/component/icon_exchange-ffabeea2974f3e5003de49d23bc3cb89.svg) 50%/16px no-repeat;
    -webkit-mask: url(/res/img/component/icon_exchange-ffabeea2974f3e5003de49d23bc3cb89.svg) 50%/16px no-repeat;
}

.btn-delete::before {
    vertical-align: -3px;
    background-color: #fff;
    mask: url(/res/img/component/icon_delete-11f0bbb57aab618c33ad6c0a39e78efc.svg) 50%/12px no-repeat;
    -webkit-mask: url(/res/img/component/icon_delete-11f0bbb57aab618c33ad6c0a39e78efc.svg) 50%/12px no-repeat;
}

.connect-sns button {
    width: 200px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    opacity: .5;
}

.connect-sns button::before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    vertical-align: -1px;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.connect-sns button.active {
    opacity: 1;
    box-shadow: none;
}

.connect-sns button + button {
    margin-left: 10px;
}

.connect-sns button:hover, .connect-sns button:focus {
    color: #fff;
}

.connect-sns .link-naver {
    background-color: #00c725;
}

.connect-sns .link-naver::before {
    width: 12px;
    height: 12px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_naver.svg);
}

.connect-sns .link-kakao {
    background-color: #6b5f5f;
}

.connect-sns .link-kakao::before {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_kakao.svg);
}

.connect-sns .link-gin {
    background-color: #0b99ac;
}

.connect-sns .link-gin::before {
    width: 14px;
    height: 14px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/symbol_gin_white.svg);
}

.btn-certify {
    width: 180px;
    border-color: #5e7be6;
    background-color: #5e7be6;
    color: #fff;
}

.btn-certify:hover, .btn-certify:focus {
    border-color: #375ce8;
    color: #fff;
    background-color: #375ce8;
}

.btn-certify::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    vertical-align: -2px;
    mask: url(/res/img/component/icon_mobile-e71c97b19e791f9db8f5bb86fcd411a0.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_mobile-e71c97b19e791f9db8f5bb86fcd411a0.svg) 50%/contain no-repeat;
    background-color: #fff;
}

.btn-certify.complete {
    border: #9aa4b7;
    background-color: #9aa4b7;
    cursor: default;
}

.word-incomplete {
    color: #9aa4b7;
}

.word-incomplete::before {
    content: "!";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: -3px;
    color: #fff;
    border-radius: 100%;
    vertical-align: 0;
    font-size: 11px;
    line-height: 16px;
    font-weight: bold;
    text-align: center;
    background-color: #9aa4b7;
}

.word-possible {
    color: #2e9efe;
}

.word-possible::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    vertical-align: -2px;
    mask: url(/res/img/component/icon_check-31d5ada4555f53dd28d6898074159c7c.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_check-31d5ada4555f53dd28d6898074159c7c.svg) 50%/contain no-repeat;
    background-color: #2e9efe;
}

.word-tip::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    vertical-align: -3px;
    mask: url(/res/img/component/icon_tip-f72a019eb8e92b4758d5c550f2b91faa.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_tip-f72a019eb8e92b4758d5c550f2b91faa.svg) 50%/contain no-repeat;
    background-color: #8934fa;
}

/* 매물관리 삭제 버튼 */
.icon-left.delete {
    width: 60px;
    padding-left: 15px;
    padding-right: 0;
    border: solid 1px #ff2972;
    color: #fff;
    text-indent: 0;
    background: #ff4081;
}

.icon-left.delete:hover, .icon-left.delete:active {
    border-color: #3d3d3d;
    background-color: #3d3d3d;
}

.icon-left.delete::before {
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    display: block;
    width: 10px;
    height: 10px;
    background: url(/res/img/component/icon_delete_white-0db95bcc861438e6c64c4443f506f2c7.svg);
}

/* input 달력 아이콘  */
input[data-date-type] {
    width: 130px;
    padding-left: 26px;
    background: #fff url(/res/img/component/icon_calendar-ebe3c49c89f42bb20e7e5185b31de11a.svg) 10px center/18px 18px no-repeat !important;
    outline: none;
}

input[data-date-type]:active, input[data-date-type]:focus {
    border-width: 2px;
    border-color: #712cce;
}

.sub-filter input[data-date-type] {
    width: 130px;
}

/* 사용자 설정 저장 수정 */
.filter-set .filter.save fieldset .input-set .selecting-set {
    padding: 0;
    flex-flow: row wrap;
    flex: 3;
}

.filter-set .filter.save fieldset .input-set .selecting {
    flex-flow: column nowrap;
    align-items: center;
    width: 25%;
    height: auto;
    margin: 2px 0;
}

.filter-set .filter.save fieldset .input-set .selecting input {
    top: 0;
    left: -9999px;
}

.filter-set .filter.save fieldset .input-set .selecting span {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    line-height: 14px;
    font-weight: 500;
    text-align: center;
}

.filter.save .input-set > .dropdown {
    width: 100%;
    margin-top: 10px;
}

/* 상세검색 전체 필터 사용자 설정 저장 수정 */
.aside .filter-set > .filter {
    z-index: 1120;
}

.aside .filter-set > .filter.search {
    display: none;
}

.aside .filter-set > .filter.save > fieldset > .input-set {
    flex-flow: row wrap;
    width: 100%;
}

.aside .filter-set > .filter.save > fieldset > .input-set .selecting-set {
    flex: none;
    width: 100%;
    margin-bottom: 5px;
}

.aside .filter-set .filter.save fieldset .input-set .selecting {
    flex-flow: row nowrap;
    width: 20%;
    height: 34px;
}

.aside .filter-set .filter.save fieldset .input-set .selecting span {
    font-weight: normal;
    font-size: 15px;
}

.aside fieldset > .input-set > .input-field {
    flex: 3;
}

.aside fieldset > .input-set .dropdown {
    flex: 3;
    height: 42px;
}

.aside fieldset > .input-set > .btn-pink {
    flex: 1;
}

.aside fieldset > .input-set > .btn-pink + .dropdown {
    margin-left: 60px;
    margin-top: 20px !important;
}

.aside fieldset > .input-set > .btn-pink + .dropdown .dropdown-select {
    line-height: 42px;
}

/* 전체 필터 모달창 수정 */
.aside .depth-set.loc-list li {
    width: calc(16.666% - 3px);
}

.aside .filter-set > .filter > a > .filter-name {
    line-height: 28px;
}

.aside .filter-set > .filter > a > .filter-name::before, .aside .filter-set > .filter.save > fieldset > legend::before,
.aside .filter-set > .filter.detail > a > .text::before, .aside .filter-set > .filter.multichk > a > .text::before {
    content: "";
    display: block;
    position: absolute;
    top: 13px;
    left: -11px;
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background-color: #712cce;
}

.aside .filter-set > .filter.detail > a > .text::before, .aside .filter-set > .filter.multichk > a > .text::before {
    top: 16px;
    left: 4px;
}

.aside .filter-set > .filter.region > a > .filter-name::before, .aside .filter-set > .filter.period > a > .filter-name::before {
    display: none;
}

.aside .filter-set > .filter.region > fieldset {
    width: 100%;
}

.aside .filter-set > .filter > a > .text {
    display: block;
    font-size: 16px;
    max-width: none !important;
}

.aside .filter-set > .filter > a > .legend-text {
    display: none;
}

.aside .filter-set > .filter > a > .filter-name, .aside .filter-set > .filter > a > .text {
    height: 38px;
    line-height: 38px;
}

.aside .filter-set > .filter.save > a > .legend-text {
    display: block;
}

.aside .filter-set > .filter .input-set .selecting {
    margin-top: 20px;
}

.aside .filter > fieldset .input-set .selecting-set {
    padding-right: 50px;
}

/* 그리드 오른쪽 주의사항 문구 */
.title-area .alert.red {
    bottom: -8px;
    max-width: 80%;
    max-height: fit-content; /* 50px */
}

.title-area .alert.red p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.title-area .right .alert.red {
    margin: 0;
    padding: 0 10px;
    line-height: 34px;
    margin-right: 10px;
    bottom: 0;
}

.title-area .right .alert p::before {
    top: 50%;
    transform: translateY(-50%);
}

/* 거래량 모달 그리드 왼쪽 쏠림 현상 수정 */
.grid-wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 20px 20px 20px;
}

.option-set.no-empty {
    padding-bottom: 0;
    border-bottom: 0;
}

/* 홈 시장강도 차트 범례 */
.market-legend li {
    display: inline-block;
    font-size: 12px;
    color: #555;
    text-align: left;
    line-height: 29px;
    margin-right: 8px;
    letter-spacing: -0.5px;
}

.market-legend li i {
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-right: 3px;
    border-radius: 5px;
    background-color: #4b5263;
}

.market-legend li i.left-bullet {
    width: 5px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.market-legend li i.right-bullet {
    width: 5px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.market-legend li i.bullet1 {
    background-color: #c29800;
}

.market-legend li i.bullet2 {
    background-color: #f15cb6;
}

.market-legend li i.bullet3 {
    background-color: #8085e9;
}

/* 투자지역찾기 개편 */
.comparer [class^=star-] {
    margin-right: 5px;
}

.comparer fieldset {
    position: absolute;
    left: 0;
    bottom: -142px;
    display: none;
    min-width: 220px;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #717171;
    z-index: 10;
}
.comparer .edit-polygon fieldset {
    position: absolute;
    left: 0;
    bottom: -142px;
    display: none;
    min-width: 220px;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #717171;
    z-index: 10;
}
.comparer button {
    margin-left: 5px;
    border-radius: 38px;
    color: #fff;
}

.comparer .btn-blue {
    background-color: #39359f;
}
.comparer .btn-blue:hover, .comparer .btn-blue:active {
    background-color: #81ced1;
}

.comparer .btn-pink2 {
    background-color: #ff1d6a;
    height: 38px;
    padding: 0 16px;
    border-radius: 38px;
    color: #fff;
    font-weight: 500;
    margin: 0 3px;
    transition: all 0.3s ease;
    outline: none;
}
.comparer .btn-pink2:hover, .comparer .btn-pink2:active {
    background-color: #e9b2c9;
}


.comparer .pulse-btn::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 5px;
    vertical-align: -3px;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: contain;
}

.comparer .btn-purple::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    background-color: #FFF;
}

.comparer .btn-blue::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_grid_pre.svg) 50%/17px no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_grid_pre.svg) 50%/17px no-repeat;
    background-color: #FFF;
}

.comparer .btn-time {
    background: #ff4081;
}

.comparer.heroes .btn-arrow {
    color: #333;
}

.comparer.heroes .btn-arrow:hover #region-count {
    color: #8934fa;
}

.comparer.heroes .btn-arrow .btn-arrow-count span#count-type {
    color: #333;
}

.k-grid-content [class^=icon-]:not(.icon-chart):not(.icon-table-grid), .k-grid-content-locked [class^=icon-]:not(.icon-chart) {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

.k-grid-content td button.delete {
    background-color: rgba(0, 0, 0, .05);
}

.k-grid-content-locked td button.delete {
    background-color: rgba(0, 0, 0, .05);
    margin-top: 8px;
    margin-left: -1px;
}

.k-grid-content td button.delete:hover, .k-grid-content-locked td button.delete:hover {
    background-color: rgba(193, 146, 253, .5);
}

.k-grid .icon-compare {
    display: inline-block;
    margin-left: 5px;
    vertical-align: middle;
    cursor: pointer;
}

.icon-compare {
    width: 17px;
    height: 17px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50% 50%/contain no-repeat;
}

.icon-compare-pink {
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_compare_pink.svg) 50% 50%/contain no-repeat;
}

.icon-compare-pink.big {
    width: 36px;
    height: 36px;
    margin-left: 5px;
    background-size: auto 30px;
    cursor: pointer;
}

.icon-compare-pink.block {
    display: inline-block;
    margin: 0;
    vertical-align: middle;
    cursor: pointer;
}

.icon-compare-purple {
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background: url(/res/img/component/icon_compare_purple2-254488b082207756815dfc99feb6a662.svg) 50% 50%/contain no-repeat;
}

.icon-change {
    background-color: #8934fa;
    mask: url(/res/img/component/icon_exchange-ffabeea2974f3e5003de49d23bc3cb89.svg) 50%/16px no-repeat;
    -webkit-mask: url(/res/img/component/icon_exchange-ffabeea2974f3e5003de49d23bc3cb89.svg) 50%/16px no-repeat;
}

.icon-delete-blue {
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background: url(/res/img/component/icon_delete_blue-ce11b8cb35d6433a7e0bb8984714e3a6.svg) 50% 50%/contain no-repeat;
}

.icon-into-map {
    width: 16px;
    height: 16px;
    background: url(/res/img/component/icon_into_map-c9d11bcca997b089318a6dd785ab30f6.svg) 50% 50%/contain no-repeat;
}

.k-grid-content .icon-into-map {
    margin-left: 5px !important;
    vertical-align: -3px !important;
}

.icon-zigbang {
    width: 18px;
    height: 18px;
    background: url(/res/img/component/icon_zigbang-813dedab90e66125f7b6adea2654d6a5.svg) 50% 50%/contain no-repeat;
}

.icon-cone::before{
    content: "";
    display: inline-block;
    width: 21px;
    height: 21px;
    vertical-align: -3px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_cone_img.svg) 50% 50%/contain no-repeat;
}

.icon-naver-small {
    width: 14px;
    height: 14px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_naver_green.svg) 50% 50%/contain no-repeat;
}
.icon-share::before{
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: -3px;
    background: #0000009c !important;
    mask:url(https://aptgin.com/cdn/res/icon/common/svg/icon_share.svg) 50%/14px no-repeat;
    -webkit-mask:url(https://aptgin.com/cdn/res/icon/common/svg/icon_share.svg) 50%/14px no-repeat;
}

.compare-save-area {
    position: relative;
    margin-right: 5px;
}

.compare-save-area-hidden {
    width: 47px;
}

.btn-comparer-save {
    outline: none;
    vertical-align: middle;
}

.icon-group-save {
    display: block;
    width: 36px;
    height: 36px;
    border: solid 1px #dadce0;
    border-radius: 4px;
    background: url(/res/img/component/icon_group_save-f1889ee6f2bac055916d352349684ff2.svg) 50%/20px no-repeat;
    cursor: pointer;
    transition: border-color 100ms ease-out, background-color 100ms ease-out;
}

.icon-group-save:hover {
    border-color: #999;
    background-color: #f7f7f7;
}

.icon-group-save.active {
    border-color: #712cce;
    background-color: #fff;
    background-image: url(/res/img/component/icon_group_save_purple-550c8754858fd5cfb2a9032e465a8a9a.svg);
}

.icon-group-save.active:hover {
    border-color: #712cce;
}

.icon-group-save.mini-map {
    width: 20px;
    height: 20px;
    border: none;
}

.k-grid-content strong.badge {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    min-height: 24px;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 24px;
    font-family: 'Muli', sans-serif;
    font-weight: 800;
}

.k-grid-content .badge:after {
    position: static;
    display: inline-block;
}

.m0601 .sticker-st02 > li.detail em + em::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin: 0 5px;
    vertical-align: -3px;
    mask: url(/res/img/component/icon-gt-056a2432a1efd57b76abf471564cb403.svg) 50%/50% no-repeat;
    -webkit-mask: url(/res/img/component/icon-gt-056a2432a1efd57b76abf471564cb403.svg) 50%/50% no-repeat;
    background-color: #8088d2;
}

.icon-detail {
    width: 22px;
    height: 22px;
    text-indent: -9999px;
    background: url(/res/img/component/icon_detail-59cf9f5e9619fa429a40fa04e69a060b.svg) 50%/contain no-repeat;
}

.img-rotate {
    transform: rotate(0.5turn);
}

.above-area h4 {
    margin-right: 20px;
    color: #333;
    font-size: 16px;
    letter-spacing: -1.2px;
    font-weight: 500;
}

.above-area .legend-set + .btns-set {
    margin-top: 20px;
}

.above-area .btns-set {
    width: 100%;
}

.above-area .btns-set .btn {
    height: 36px;
    font-size: 14px;
    font-weight: 500;
    line-height: 30px;
    vertical-align: middle;
    overflow: visible;
}

.above-area .btns-set .btn-purple {
    margin-left: 0;
    margin-right: 15px;
    padding: 0 20px;
    border-radius: 36px;
}

.above-area .btns-set .btn-purple:hover, .above-area .btns-set .btn-purple:active {
    background-color: #6f21a2;
}

.above-area .btns-set .btn-purple::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    vertical-align: -1px;
    background: url(/res/img/component/icon_arrow_down_white-05e7a9571fe98b39ecac5d18431f1a5b.svg) 50% 50%/contain no-repeat;
}

.above-area .btns-set h3 {
    float: left;
    margin-right: 20px;
    font-size: 16px;
    line-height: 36px;
}

.above-area .btns-set sup {
    position: absolute;
    top: -10px;
    left: -3px;
    padding: 0 5px;
    color: #fff;
    font-size: 10px;
    line-height: 15px;
    font-weight: 500;
    border-radius: 15px;
    background-color: #693cbb;
    z-index: 1;
}

.above-area .btns-set .btn.disabled sup {
    background-color: #999;
}

.above-area .option1, .above-area .option2, .above-area .option3 {
    position: relative;
    border-style: solid;
    border-width: 2px;
    line-height: 30px;
    background-color: #fff;
}

.above-area .option1::after, .above-area .option2::after {
    content: "";
    display: block;
    position: absolute;
    top: -2px;
    right: -17px;
    border-left: 18px solid #fff;
    border-top: 18px solid transparent;
    border-bottom: 18px solid transparent;
    z-index: 1;
}

.above-area .option1::before, .above-area .option2::before {
    content: "";
    display: block;
    position: absolute;
    top: -1px;
    right: -14px;
    border-left: 17px solid #fff;
    border-top: 17px solid transparent;
    border-bottom: 17px solid transparent;
    z-index: 2;
    transition: .5s;
}

.above-area .option1::after {
    border-left-color: #ecb751;
}

.above-area .option2::after {
    border-left-color: #ff9537;
}

.above-area .option1 {
    color: #db9309;
    border-color: #ecb751;
}

.above-area .option2 {
    color: #ff9537;
    border-color: #ff9537;
}

.above-area .option3 {
    color: #f95c5c;
    border-color: #f95c5c;
}

.above-area .option1:hover, .above-area .option1.active {
    color: #fff;
    background-color: #ecb751;
}

.above-area .option1:hover::before, .above-area .option1.active::before {
    border-left-color: #ecb751;
}

.above-area .option2:hover, .above-area .option2.active {
    color: #fff;
    background-color: #ff9537;
}

.above-area .option2:hover::before, .above-area .option2.active::before {
    border-left-color: #ff9537;
}

.above-area .option3:hover, .above-area .option3.active {
    color: #fff;
    background-color: #f95c5c;
}

.above-area button.disabled {
    border-color: #ccc;
    color: #999;
    background-color: #eee;
    cursor: default;
}

.above-area button.disabled:hover {
    color: #999;
    background-color: #eee;
}

.above-area button.disabled:hover::before, .above-area button.disabled::before {
    border-left-color: #eee;
}

.above-area button.disabled:hover::after, .above-area button.disabled::after {
    border-left-color: #ccc;
}

.above-area .left .info:first-child {
    margin-left: 0;
}

.above-area .right .switch-radio {
    margin-right: 20px;
}

.above-area .btns-set .dropdown {
    height: auto;
    border: 0;
    letter-spacing: 0;
}

.above-area .btns-set .dropdown > .dropdown-select {
    padding: 0;
    border: 0;
}

.above-area .btns-set .dropdown > .dropdown-select span.option1 {
    padding-right: 26px;
    color: #db9309;
    line-height: 32px;
}

.above-area .btns-set .dropdown > .dropdown-select span.option1:hover {
    color: #fff;
    background-color: #ecb751;
}

.above-area .btns-set .dropdown > .dropdown-select::after {
    border-color: #db9309;
}

.above-area .btns-set .dropdown > .dropdown-select span.option1:hover {
    color: #fff;
}

.above-area .btns-set .dropdown.active > .dropdown-select {
    border: 0;
}

.above-area .btns-set .dropdown.active > .dropdown-select::after, .above-area .btns-set .dropdown.on > .dropdown-select::after {
    border-color: #fff;
}

.above-area .btns-set .dropdown.active span.option1, .above-area .btns-set .dropdown.on span.option1 {
    color: #fff;
    background-color: #ecb751;
}

.above-area .btns-set .dropdown.active span.option1::before, .above-area .btns-set .dropdown.on span.option1::before {
    border-left-color: #ecb751;
}

.above-area .btns-set .dropdown > .dropdown-select.option-btn:hover::after {
    border-color: #fff;
}

.above-area .btns-set .dropdown > .dropdown-menu {
    min-width: 210px;
    border-radius: 3px;
}

.above-area .btns-set .dropdown > .dropdown-menu > li {
    padding: 10px 15px;
    font-size: 14px;
}

.comparer.bottom {
    width: 100%;
    margin-top: 10px;
}

.comparer.bottom .chip-set .icon-reset {
    background-color: #ff4081;
}

.comparer.bottom .chip-set .icon-reset:hover, .comparer.bottom .chip-set .icon-reset:active {
    background-color: #ff1d6a;
}

.comparer.bottom .chip {
    border-color: #ff5992;
}

.comparer.bottom .chip .text {
    color: #ff4081;
}

.comparer.bottom .chip .delete {
    background-color: #ffd9e6;
}

.comparer.bottom .chip:hover .delete, .comparer.bottom .chip:active .delete {
    background-color: #ff4081;
}

.comparer.bottom .btn {
    width: 110px;
    height: 38px;
    line-height: 38px;
    border-radius: 38px;
}

.comparer.bottom .btn + .btn {
    margin-left: 5px;
}

.comparer.bottom .btn.prev::before, .comparer.bottom .btn::after, .btn.after::after{
    content: "";
    display: inline-block;
    margin-left: 5px;
    width: 13px;
    height: 8px;
    vertical-align: 1px;
    background: url(/res/img/component/icon_arrow03_up_white-74ac44f1258f4c3287a80a6f9f4d1104.svg) 50% 50%/contain no-repeat;
    transform: rotate(90deg);
}

.comparer.bottom .btn.prev::after {
    display: none;
}

.comparer.bottom .btn.prev::before {
    margin-left: 0;
    margin-right: 5px;
    transform: rotate(-90deg);
}

.comparer.bottom .btn.center::before, .comparer.bottom .btn.center::after {
    display: none;
}

.comparer.bottom .pulse-btn {
    height: 38px;
}

.comparer.bottom .btn {
    height: 38px;
    font-size: 14px;
}

.nav-container.tab {
    background: #fff;
}

.nav-container.tab .nav-tabs {
    max-width: none;
    margin-left: 0;
    justify-content: flex-start;
    border-bottom: solid 1px #dadce0;
}

.nav-container.tab .nav-tabs li {
    border-top: solid 1px #dadce0;
}

.nav-container.tab .nav-tabs li a {
    color: #999;
}

.nav-container.tab .nav-tabs li.active a {
    color: #333;
}

.nav-container.tab .nav-tabs li.active::after, .main.heroes .nav-tabs li.active::after {
    background-color: #fff;
}

.contents-area .nav-container.tab, .contents-area + .nav-container.tab {
    margin-top: 20px;
}

.nav-container.tab .mulgun-tabs {
    display: flex;
    border-bottom: solid 1px #dadce0;
}

.nav-container.tab .mulgun-tabs li {
    width: 8%;
    margin-top: 1px;
    border-top: solid 1px #dadce0;
    background: #fff;
    border-left: 1px solid #dadce0;
    /*border-right: 1px solid #dadce0;*/
}

.nav-container.tab .mulgun-tabs li.last {
    border-right: 1px solid #dadce0;
}

.nav-container.tab .mulgun-tabs li:after {
    position: absolute;
    left: 0;
    bottom: -1px;
    display: block;
    content: '';
    width: 100%;
    height: 1px;
    background: #dadce0;
}

.nav-container.tab .mulgun-tabs li a {
    position: relative;
    display: block;
    width: 100%;
    color: #999;
    font-size: 17px;
    font-weight: 500;
    text-align: center;
    line-height: 24px;
    letter-spacing: -0.4px;
    height: 48px;
    background: #fff;
    padding: 12px 0;
    cursor: pointer;
}

.nav-container.tab .mulgun-tabs li.active a {
    color: #111;
    font-weight: 600;
    background: #fff;
}

.nav-container.tab .mulgun-tabs li.active a:before {
    position: absolute;
    top: -1px;
    left: -1px;
    display: block;
    content: '';
    width: calc(100% + 2px);
    height: 2px;
    background: #8f55e2;
    z-index: 1;
}

.nav-container.tab .mulgun-tabs li.active::after{
    background-color: #fff;
}
.nav-container.tab .mulgun-tabs li.prev{
    width: calc(10%);
}
.nav-container.tab .mulgun-tabs li.next{
    width: calc(10%);
    border-right: 1px solid #dadce0;
    position: absolute;
    right: 0;
}
.nav-container.tab .mulgun-tabs li.prev a::before, .nav-container.tab .mulgun-tabs li.next a::before{
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    background-color: #999;
    transform: translate(-50%, -50%) rotate(-90deg);
    transition: .3s;
}
.nav-container.tab .mulgun-tabs li.prev a::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.contents-area > .sub-filter {
    margin-top: 0;
}

.contents-area + .title-area, .card-wrap > .title-area {
    margin-top: 30px;
    padding-top: 10px;
}

.title-area.no-bdr {
    border: 0;
    padding-left: 10px;
}

.title-area .switch-radio {
    display: flex;
    margin-top: 14px;
    margin-left: 20px;
}

.top-tab {
    margin-bottom: 0;
}

.top-tab ~ article .title-area {
    border-top: 0;
}

.card-wrap {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 20px;
}

.card-wrap .no-data {
    margin-top: 0;
}

.card-wrap .dropdown, .card-wrap .dropdown > .dropdown-select {
    border-radius: 36px;
}

.card-wrap .dropdown > .dropdown-menu {
    min-width: 240px;
}

#map {
    background: url(/res/img/common/bg_logo-bb5e279581e59e814b89e0a05102d7e6.gif) repeat;
}

.map-wrap {
    position: fixed !important;
    top: 202px;
    left: 65px;
    right: 0;
    bottom: 0;
}

.map-menu {
    position: fixed;
    top: 80px;
    left: 75px;
    z-index: 12;
}

.map-menu .btn {
    vertical-align: middle;
    letter-spacing: -1px;
}

.map-menu .btn + .btn {
    margin-left: 5px;
}

.map-menu .btn::after {
    content: "";
    display: inline-block;
    margin-left: 5px;
    background-position: 50%;
    background-repeat: no-repeat;
}

.map-menu .detail-info {
    background-color: #3d3d3d;
}

.map-menu .detail-info:hover, .map-menu .detail-info:active {
    background-color: #8934fa;
}

.map-menu .detail-info::after {
    width: 18px;
    height: 16px;
    vertical-align: -3px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_white.svg);
}

.map-menu .sale-info {
    padding-right: 30px;
    color: #8934fa;
    font-weight: bold;
    border: solid 1px #a9b2c7;
    background-color: #fff;
}

.map-menu .sale-info:hover, .map-menu .sale-info:active {
    background-color: #f0f3fc;
}

.map-menu .sale-info::after {
    position: absolute;
    top: 16px;
    right: 13px;
    width: 12px;
    height: 12px;
    vertical-align: baseline;
    background-image: url(/res/img/component/icon_arrow_up_purple-dd58b4e30a18ef374802680eb5dcb010.svg);
    transition: all .15s ease-in-out;
}

.map-menu .sale-info.open::after {
    transform: rotate(180deg);
}

.map-tool-area {
    position: fixed;
    bottom: 10px;
    left: 75px;
    width: 37px;
    height: 375px;
    z-index: 12;
}

.map-tool-btns {
    position: absolute;
    bottom: 90px;
    left: 0;
    z-index: 13;
}

.map-tool-btns button, .map-tool-list button {
    display: block;
    position: relative;
    width: 36px;
    height: 36px;
    padding-top: 18px;
    border: solid 1px #a9b2c7;
    border-radius: 5px;
    color: #8934fa;
    font-size: 10px;
    background-color: #fff;
    outline: none;
}

.map-tool-btns button span::before, .map-tool-list button span::before {
    content: "";
    display: block;
    position: absolute;
    top: 1px;
    left: 50%;
    width: 20px;
    height: 20px;
    background-color: #8934fa;
    transform: translateX(-50%);
    pointer-events: none;
}

.map-tool-btns * + * {
    margin-top: 10px;
}

.map-tool-btns .active, .map-tool-list .active {
    color: #fff;
    border-color: #8934fa;
    background-color: #8934fa;
}

.map-tool-btns .active span::before, .map-tool-list .active span::before {
    background-color: #fff;
}

.map-tool-btns > div button + button {
    margin-top: 0;
}

.map-tool-btns > div:last-child {
    margin-bottom: 0;
}

.map-tool button {
    background-repeat: no-repeat;
    background-position: 50% 3px;
    background-size: auto 17px;
}

.map-tool button:first-child {
    border-radius: 5px 5px 0 0;
}

.map-tool button + button {
    border-top: 0;
}

.map-tool button:last-child {
    border-radius: 0 0 5px 5px;
}

.tool-list {
    position: relative;
    width: 37px;
    height: 36px;
    overflow: hidden;
    -webkit-transition: width .3s, -webkit-transform .3s;
    transition: width .3s, transform .3s;
}

/* .tool-list::before{content:"";position:absolute;top:50%;left:31px;width:0px;height:0px;border-top:4px solid transparent;border-right:4px solid #a9b2c7;border-bottom:4px solid transparent;transform:translateY(-50%);z-index:1;} */
.tool-list.more::before {
    left: 32px;
    border-top: 4px solid transparent;
    border-left: 4px solid #a9b2c7;
    border-bottom: 4px solid transparent;
    border-right: 0;
}

.map-tool-list {
    position: absolute;
    left: 0;
    bottom: 42px;
}

.map-tool-list + .map-tool-list {
    bottom: 0;
}

.map-tool-list .tool-list > div {
    display: flex;
    flex-flow: row nowrap;
    position: absolute;
    top: 0;
    left: 0;
}

.map-tool-list button {
    border-right: 0;
    border-radius: 0;
}

.map-tool-list button:not(.selected) span::before {
    background-color: #a9b2c7;
}

.map-tool-list button:not(.selected) {
    color: #a9b2c7;
    background-color: #f3f6fb;
}

.map-tool-list button:first-child, .map-tool-list button:nth-child(5) {
    border-radius: 5px 0 0 5px;
}
.map-tool-list button:nth-child(4){
    border-radius: 0 5px 5px 0;
    border-right: solid 1px #a9b2c7;
}
.map-tool-list button.last {
    border-radius: 0 5px 5px 0;
    border-right: solid 1px #a9b2c7;
    margin-right: 1px;
}

.map-tool-list[data-type] button:last-child {
    border-radius: 0 5px 5px 0;
    border-right: solid 1px #a9b2c7;
}

.map-tool-list button:nth-child(n+5){
    margin-top: 5px;
}

.map-tool-list[data-type] button:last-child {
    border-radius: 0 5px 5px 0;
    border-right: solid 1px #a9b2c7;
}

.btn-fit::before {
    mask: url(/res/img/component/icon_fit-d60534203ebe2bd4831c8ae68bbdaa61.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_fit-d60534203ebe2bd4831c8ae68bbdaa61.svg) 50%/contain no-repeat;
}

.btn-hide::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_hide.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_hide.svg) 50%/contain no-repeat;
}

.btn-scale1::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_map_scale1.svg) 50%/22px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_map_scale1.svg) 50%/22px no-repeat;
}

.btn-scale2::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_map_scale2.svg) 50%/22px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_map_scale2.svg) 50%/22px no-repeat;
}

.btn-scale3::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_map_scale3.svg) 50%/22px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_map_scale3.svg) 50%/22px no-repeat;
}

.btn-map-apt::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/icon_map_apt.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/icon_map_apt.svg) 50%/16px no-repeat;
}

.btn-map::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg) 50%/18px no-repeat;
}

.btn-land::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_land.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_land.svg) 50%/contain no-repeat;
}

.btn-airplane::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_airplane.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_airplane.svg) 50%/17px no-repeat;
}

.btn-street::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_cam.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_cam.svg) 50%/18px no-repeat;
}

.btn-house::before {
    mask: url(/res/img/component/icon_house-c1cb8dd18edfa0a4416e7f21a429acb1.svg) 50%/17px no-repeat;
    -webkit-mask: url(/res/img/component/icon_house-c1cb8dd18edfa0a4416e7f21a429acb1.svg) 50%/17px no-repeat;
}

.btn-school::before {
    mask: url(/res/img/component/icon_cho-a1d34f659f27f959dc52777d11fb575a.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_cho-a1d34f659f27f959dc52777d11fb575a.svg) 50%/contain no-repeat;
}

.btn-subway::before {
    mask: url(/res/img/component/icon_subway-0b1cf9f1d358ab214b6001ef7417f698.svg) 50%/14px no-repeat;
    -webkit-mask: url(/res/img/component/icon_subway-0b1cf9f1d358ab214b6001ef7417f698.svg) 50%/14px no-repeat;
}

.btn-bus::before {
    mask: url(/res/img/component/icon_bus-4c1202bdaec84c5e2bc51ae535db5454.svg) 50%/14px no-repeat;
    -webkit-mask: url(/res/img/component/icon_bus-4c1202bdaec84c5e2bc51ae535db5454.svg) 50%/14px no-repeat;
}

.btn-job::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_job.svg) 50%/14px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_job.svg) 50%/18px no-repeat;
}

.btn-shop::before {
    mask: url(/res/img/component/icon_shop-2d87bf7103a623ac147ef8a459bef509.svg) 50%/18px no-repeat;
    -webkit-mask: url(/res/img/component/icon_shop-2d87bf7103a623ac147ef8a459bef509.svg) 50%/18px no-repeat;
}

.btn-academy::before {
    mask: url(/res/img/component/icon_book-e4e35dbc8f828e16384d809b75e190b8.svg) 50%/18px no-repeat;
    -webkit-mask: url(/res/img/component/icon_book-e4e35dbc8f828e16384d809b75e190b8.svg) 50%/18px no-repeat;
}

.btn-mart::before {
    mask: url(/res/img/component/icon_cart-64a96074b857f7c81f07089c93606658.svg) 50%/18px no-repeat;
    -webkit-mask: url(/res/img/component/icon_cart-64a96074b857f7c81f07089c93606658.svg) 50%/18px no-repeat;
}

.btn-hospital::before {
    mask: url(/res/img/component/icon_hospital-52f8133c0e9f11ce77da1758f36eb017.svg) 50%/16px no-repeat;
    -webkit-mask: url(/res/img/component/icon_hospital-52f8133c0e9f11ce77da1758f36eb017.svg) 50%/16px no-repeat;
}

.btn-cafe::before {
    mask: url(/res/img/component/icon_cup-e09707d383a3ce5f2e57a9b2ead21af9.svg) 50%/18px no-repeat;
    -webkit-mask: url(/res/img/component/icon_cup-e09707d383a3ce5f2e57a9b2ead21af9.svg) 50%/18px no-repeat;
}

.btn-store::before {
    mask: url(/res/img/component/icon_store-33959966eb0df572b62ab88b1967602a.svg) 50%/18px no-repeat;
    -webkit-mask: url(/res/img/component/icon_store-33959966eb0df572b62ab88b1967602a.svg) 50%/18px no-repeat;
}

.btn-bank::before {
    mask: url(/res/img/common/won-sign-solid-7829e2bd23dab2a761ce2a5dbe238f65.svg) 50%/18px no-repeat;
    -webkit-mask: url(/res/img/common/won-sign-solid-7829e2bd23dab2a761ce2a5dbe238f65.svg) 50%/18px no-repeat;
}

.btn-gas::before {
    mask: url(/res/img/component/icon_gas-4ca0965b7c727f2a61608cda0395363f.svg) 50%/18px no-repeat;
    -webkit-mask: url(/res/img/component/icon_gas-4ca0965b7c727f2a61608cda0395363f.svg) 50%/18px no-repeat;
}

.btn-refresh::before {
    mask: url(/res/img/component/icon_rotate-fe02720a46275e3e0b8c16b87986078d.svg) 50%/18px no-repeat;
    -webkit-mask: url(/res/img/component/icon_rotate-fe02720a46275e3e0b8c16b87986078d.svg) 50%/18px no-repeat;
}

.btn-gps::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_gps.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_gps.svg) 50%/18px no-repeat;
}

.btn-dev-all::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/dev_all.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/dev_all.svg) 50%/18px no-repeat;
}

.btn-dev-rail::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/rail.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/rail.svg) 50%/18px no-repeat;
}

.btn-dev-road::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/road.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/road.svg) 50%/18px no-repeat;
}

.btn-dev-jigu::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/jigu.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/jigu.svg) 50%/18px no-repeat;
}

.btn-mountain::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/mountain.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/mountain.svg) 50%/contain no-repeat;
}

.btn-around::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_around.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_around.svg) 50%/16px no-repeat;
}


span.btn-refresh::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 2px;
    vertical-align: -3px;
    background-color: #fff;
}

/* .map-tool-list button:first-child{order:1;}
.map-tool-list button:nth-child(2){order:2;}
.map-tool-list button:nth-child(3){order:3;}
.map-tool-list button:nth-child(4){order:4;}
.map-tool-list button:nth-child(5){order:5;}
.map-tool-list button:nth-child(6){order:6;}
.map-tool-list button:nth-child(7){order:7;}
.map-tool-list button:nth-child(8){order:8;}
.map-tool-list button:nth-child(9){order:9;}
.map-tool-list button:nth-child(10){order:10;}
.map-tool-list button:nth-child(11){order:11;}
.map-tool-list button:nth-child(12){order:12;}
.order0{order:0;}
.order1{order:1;}
.order2{order:2;}
.order3{order:3;}
.order4{order:4;}
.order5{order:5;}
.order6{order:6;}
.order7{order:7;}
.order8{order:8;}
.order9{order:9;}
.order10{order:10;}
.order11{order:11;}
.order12{order:12;} */

.btn-map-normal::before {
    mask: url(/res/img/component/icon_map_normal-5eb5da5281d20fe2aa0fccd4e3b19473.svg) 50%/18px no-repeat;
    -webkit-mask: url(/res/img/component/icon_map_normal-5eb5da5281d20fe2aa0fccd4e3b19473.svg) 50%/18px no-repeat;
}

.btn-map-fire::before {
    mask: url(/res/img/component/icon_fire-4cafca790efdb38f41f3242b92713756.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_fire-4cafca790efdb38f41f3242b92713756.svg) 50%/contain no-repeat;
}

.btn-map-filter::before {
    mask: url(/res/img/component/icon_map_filter-3d9d10ef3c514ec32a732384b618c936.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_map_filter-3d9d10ef3c514ec32a732384b618c936.svg) 50%/contain no-repeat;
}

.btn-apt-filter::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/icon_map_apt.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/icon_map_apt.svg) 50%/16px no-repeat;
}

.btn-distance {
    background-image: url(/res/img/component/icon_distance-69b473d41286cded2ef89a543f79c94d.svg);
}

.btn-distance.active {
    background-image: url(/res/img/component/icon_distance_white-f3b5e9d798239a1a26ff4de594410c72.svg);
}

.btn-directions {
    background-image: url(/res/img/component/icon_directions-1cc3556aeb486da9a20a3da97253ddc4.svg);
    background-size: auto 16px !important;
}

.btn-directions.active {
    background-image: url(/res/img/component/icon_directions_white-d162ccccbda2ce31029c3504ce1a94b1.svg);
}

.btn-radius {
    background-image: url(/res/img/component/icon_radius-d666426617db7784e6b10321011eb63a.svg);
}

.btn-radius.active {
    background-image: url(/res/img/component/icon_radius_white-ec7354270242acb440df28b13b6b61a0.svg);
}

.btn-filter.active span::before {
    background-color: #fff;
}

.sale-info-box {
    position: absolute;
    width: 380px;
    padding-bottom: 30px;
    border: solid 1px #a9b2c7;
    border-radius: 5px;
    background-color: #fff;
    z-index: 10;
}

.sale-info-box .title {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    position: relative;
    height: 52px;
    padding: 0 15px;
    border-bottom: solid 2px #a9b2c7;
    cursor: all-scroll;
}

.sale-info-box .title span {
    position: relative;
    display: inline-block;
    max-width: 240px;
    margin-right: 7px;
    color: #333;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sale-info-box .title span::before {
    content: "";
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin-right: 5px;
    vertical-align: -9px;
    background-color: #8934fa;
}

.sale-info-box .title span::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 30px;
    background-color: #fff;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/symbol_gin_white.svg) 50% 45%/80% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/symbol_gin_white.svg) 50% 45%/80% no-repeat;
}

.sale-info-box .title span.yellow::before {
    background-color: #f9b921;
}

.sale-info-box .title span.green::before {
    background-color: #7dc13a;
}

.sale-info-box .title span.blue::before {
    background-color: #4d6bd9;
}

.sale-info-box .title span.purple::before {
    background-color: #8f55e2;
}

.sale-info-box .title span.brown::before {
    background-color: #98806c;
}

.sale-info-box .title span.gray::before {
    background-color: #5e6376;
}

.sale-info-box .title span.light-gray::before {
    background-color: #999;
}

.sale-info-box .title a {
    color: #8934fa;
    font-size: 13px;
    font-weight: bold;
}

.sale-info-box .title a::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    background: url(/res/img/component/icon_arrow_up_purple-dd58b4e30a18ef374802680eb5dcb010.svg) 50%/contain no-repeat;
    transform: rotate(90deg);
}

.sale-info-box .title i::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    background-color: #fff;
    transform: translateY(-50%);
}

.sale-info-box .btn-naver {
    position: absolute;
    top: 12px;
    right: 50px;
    margin: 0;
}

.sale-info-box .box-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
    background: url(/res/img/component/icon_box_close-d2b5c392dad82aaaffd3af6840399895.svg) 50%/60% no-repeat;
    outline: none;
}

.sale-info-box .link {
    margin-bottom: 10px;
    padding: 0 20px;
}

.sale-info-box .list {
    height: 155px;
    padding: 0 15px;
    transition: height .5s;
    overflow: hidden;
}

.sale-info-box .list dl {
    display: flex;
    flex-flow: row wrap;
    padding-top: 10px;
}

.sale-info-box .list dl * {
    margin: 2px 0;
}

.sale-info-box .list dt {
    width: 17%;
    height: 20px;
    border: solid 1px #a9b2c7;
    border-radius: 18px;
    color: #50649c;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    letter-spacing: -1px;
}

.sale-info-box .list dd {
    width: 33%;
    padding-left: 5px;
    color: #454f5d;
    font-size: 13px;
    line-height: 18px;
}

.sale-info-box .btn-set {
    position: absolute;
    left: 0;
    bottom: 0;
    right: 0;
    justify-content: center;
}

.sale-info-box .btn-fold {
    width: 30px;
    height: 30px;
    padding: 0;
    transition: none;
    outline: none;
}

.sale-info-box .arrow {
    position: absolute;
    bottom: -10px;
    left: 50%;
    margin-left: -11px;
    border-top: 11px solid #a9b2c7;
    border-left: 11px solid transparent;
    border-right: 11px solid transparent;
    border-bottom: 0;
    box-shadow: 0 1px 2px rgb(0 0 0 / 10%);
}

.sale-info-box .arrow::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 2px;
    width: 0;
    height: 0;
    margin-left: -10px;
    border-top: 10px solid #fff;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 0;
}

.sale-info-box .icon-compare {
    text-indent: -9999px;
}

.sale-detail-info {
    border-top: solid 2px #8f55e2;
    border-bottom: solid 1px #d9e0f7;
}

.sale-detail-info ul {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    height: 125px;
}

.sale-detail-info li {
    padding: 0 50px;
    color: #333;
    font-size: 24px;
}

.sale-detail-info li p {
    display: inline-block;
    position: relative;
    margin: 0 auto;
    padding-left: 80px;
}

.sale-detail-info li p::before {
    content: "";
    display: block;
    position: absolute;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.sale-detail-info li + li {
    border-left: solid 1px #d9e0f7;
}

.sale-detail-info li span {
    display: block;
    margin-bottom: 14px;
    color: #4d4d4d;
    font-size: 14px;
}

.icon-loc-sale::before {
    top: 3px;
    left: 30px;
    width: 35px;
    height: 46px;
    background-image: url(/res/img/component/icon_loc_sale-251d546d98309b42dfe809671486dbb1.svg);
}

.icon-household::before {
    top: 0;
    left: 0;
    width: 55px;
    height: 50px;
    background-image: url(/res/img/component/icon_household-85c6ebca02f4f5bbe4146169c91d91d0.svg);
}

.icon-completion::before {
    top: 0;
    left: 0;
    width: 55px;
    height: 50px;
    background-image: url(/res/img/component/icon_completion-e0f60e7f224b441e72d7c5b56a8705e0.svg);
}

.school-box .title > span::after, .job-box .title > span::after, .traffic-box .title > span::after {
    display: none;
}

.sale-detail-list {
    padding: 20px;
    background-color: #f0f3fc;
}

.sale-detail-list > div {
    border: solid 1px #d9e0f7;
    border-radius: 10px;
    background-color: #fff;
}

.sale-detail-list > div + div {
    margin-top: 10px;
}

.sale-detail-list ul {
    display: flex;
    flex-flow: row wrap;
}

.sale-detail-list li {
    display: flex;
    flex-flow: column wrap;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 30px 0;
    color: #333;
    font-size: 18px;
}

.sale-detail-list li + li {
    border-left: solid 1px #d9e0f7;
}

.sale-detail-list li span {
    margin-bottom: 14px;
    color: #4d4d4d;
    font-size: 14px;
    letter-spacing: -.5px;
}

.sale-detail-list .title {
    position: relative;
    border-radius: 10px 0 0 10px;
    color: #fff;
    font-size: 30px;
}

.sale-detail-list .title::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    background: url(/res/img/component/icon_symbol_white-f352dfb002166eb15f77b685e50daa71.svg) 50%/contain no-repeat;
    opacity: .2;
}

.sale-detail-list .type1 .title {
    background-color: #9cbcde;
}

.sale-detail-list .type2 .title {
    background-color: #7fd8b6;
}

.sale-detail-list .type3 .title {
    background-color: #f0c574;
}

.sale-detail-list .type4 .title {
    background-color: #e99861;
}

.sale-detail-list .type5 .title {
    background-color: #f08787;
}

.sale-info-box.fold {
    padding-bottom: 0;
}

.sale-info-box.fold .list {
    height: 0;
}

.sale-info-box.fold .btn-set {
    bottom: -18px;
}

.btn-fold.extend {
    height: 20px;
    border-radius: 0 0 20px 20px;
    background-image: url(/res/img/component/icon_arrow_down_white-05e7a9571fe98b39ecac5d18431f1a5b.svg);
    background-size: 40%;
    background-color: #3d3d3d;
}

.depth-set.with-icon-add button[disabled] {
    color: #aaa;
    cursor: default;
}

.depth-set.with-icon-add button[disabled]:hover {
    background-color: transparent;
}

.depth-set.with-icon-add button[disabled]::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 9px;
    width: 20px;
    height: 20px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_disabled.svg) 50%/contain no-repeat;
    transform: translateY(-46%);
}

/* map */
.dotOverlay {
    display: inline-block;
    position: relative;
    bottom: 10px;
    padding: 5px 6px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
    border-radius: 8px;
    border: 1px solid rgba(169, 178, 199, .5);
    color: #50649c;
    font-size: 12px;
    letter-spacing: -.5px;
    background-color: #fff;
}

.dotOverlay .label {
    display: inline-block;
    text-align: left;
    font-weight: 500;
}

.dotOverlay .number {
    color: #ff4081;
    font-weight: bold;
}

.distanceInfo {
    position: relative;
    top: 5px;
    left: 5px;
    list-style: none;
    margin: 0;
}

.distanceInfo .label {
    width: 45px;
}

.marker {
    display: inline-block;
    position: absolute;
    left: -12px;
    top: -25px;
}

.map-pin {
    width: 25px;
    height: 25px;
    border-radius: 50% 50% 50% 0;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
    transform: rotate(-45deg);
    background-color: #eeeeee;
}

.map-pin span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    text-align: center;
    transform: translate(-50%, -50%) rotate(45deg);
}

.map-pin.yoo {
    background-color: #83cd39;
}

.map-pin.cho {
    background-color: #ffc333;
}

.map-pin.joong {
    background-color: #ff971c;
}

.map-pin.go {
    background-color: #fe683d;
}

.map-pin.teuk {
    background-color: #9e69ea;
}

.map-pin.subway {
    background-color: #d968f1;
}

.map-pin.bus {
    background-color: #5f9dd5;
}

.map-pin.bus span, .map-pin.subway {
    text-indent: -9999px;
}

.map-pin::after {
    content: "";
    position: absolute;
    top: 6px;
    left: 50%;
    width: 13px;
    height: 13px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    transform: translate(-50%, 0) rotate(45deg);
}

.map-pin.subway::after {
    background-image: url(/res/img/component/icon_subway_white-858311d5e493054e915351fb67cc487d.svg);
}

.map-pin.bus::after {
    background-image: url(/res/img/component/icon_bus_white-6d678dc06a13b624c44b1767fdb9f077.svg);
}

.marker.text .map-pin {
    position: relative;
    width: auto;
    padding-top: 32px;
    border-radius: 0;
    box-shadow: none;
    background: none;
    transform: rotate(0);
}

.marker.text .map-pin::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    margin: 0 auto;
    margin-bottom: 2px;
    width: 25px;
    height: 25px;
    border-radius: 50% 50% 50% 0;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
    transform: translate(-50%, 0) rotate(-45deg);
}

.marker.text .map-pin::after {
    transform: translate(-50%, 0) rotate(0);
}

.marker.text .map-pin span {
    position: static;
    padding: 1px 5px;
    border-style: solid;
    border-width: 1px;
    border-radius: 30px;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
    font-size: 11px;
    font-weight: 500;
    text-indent: 0;
    text-shadow: none;
    background-color: #fff;
    transform: none;
}

.marker.text .subway span {
    border-color: #d968f1;
    color: #d968f1;
}

.marker.text .subway::before {
    background-color: #d968f1;
}

.marker.text .bus span {
    border-color: #5f9dd5;
    color: #5f9dd5;
}

.marker.text .bus::before {
    background-color: #5f9dd5;
}

.marker.text .yoo span {
    border-color: #83cd39;
    color: #83cd39;
}

.marker.text .yoo::before {
    background-color: #83cd39;
}

.marker.text .cho span {
    border-color: #ffc333;
    color: #ffc333;
}

.marker.text .cho::before {
    background-color: #ffc333;
}

.marker.text .joong span {
    border-color: #ff971c;
    color: #ff971c;
}

.marker.text .joong::before {
    background-color: #ff971c;
}

.marker.text .go span {
    border-color: #fe683d;
    color: #fe683d;
}

.marker.text .go::before {
    background-color: #fe683d;
}

.marker.text .teuk span {
    border-color: #9e69ea;
    color: #9e69ea;
}

.marker.text .teuk::before {
    background-color: #9e69ea;
}

.marker.text .yoo::after, .marker.text .cho::after, .marker.text .joong::after, .marker.text .go::after, .marker.text .teuk::after {
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.15);
    text-align: center;
}

.marker.text .yoo::after {
    content: "유";
}

.marker.text .cho::after {
    content: "초";
}

.marker.text .joong::after {
    content: "중";
}

.marker.text .go::after {
    content: "고";
}

.marker.text .teuk::after {
    content: "특";
}

.meter {
    position: absolute;
    left: -17px;
    top: -9px;
}

.meter span {
    position: static;
    padding: 1px 5px;
    border-style: solid;
    border-width: 1px;
    border-radius: 30px;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
    font-size: 11px;
    font-weight: 500;
    text-indent: 0;
    text-shadow: none;
    background-color: #fff;
    transform: none;
}

.meter span::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 3px;
    vertical-align: -2px;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.meter.cho span {
    border-color: #ffc333;
    color: #ffc333;
}

.meter.cho span::before {
    background-image: url(/res/img/component/icon_cho-a1d34f659f27f959dc52777d11fb575a.svg);
}

.meter.cho::before {
    background-color: #ffc333;
}

.meter.subway span {
    border-color: #d968f1;
    color: #d968f1;
}

.meter.subway span::before {
    mask: url(/res/img/component/icon_subway-0b1cf9f1d358ab214b6001ef7417f698.svg) no-repeat 50% 50%;
    -webkit-mask: url(/res/img/component/icon_subway-0b1cf9f1d358ab214b6001ef7417f698.svg) no-repeat 50% 50%;
    background-color: #d968f1;
}

.meter.subway::before {
    background-color: #d968f1;
}

.meter.bus span {
    border-color: #5f9dd5;
    color: #5f9dd5;
}

.meter.bus span::before {
    background-image: url(/res/img/component/icon_bus-4c1202bdaec84c5e2bc51ae535db5454.svg);
}

.meter.bus::before {
    background-color: #5f9dd5;
}

.meter.red span {
    border-color: #ff0606;
    color: #ff0606;
}

.meter.red::before {
    background-color: #ff0606;
}

.meter.red span::before {
    background-image: url(/res/img/component/icon_radius_red-738a4b466733df8f7be1b0d46886f439.svg);
}

.map-pin.apt {
    width: 55px;
    height: 72px;
    border-radius: 0;
    box-shadow: none;
    transform: rotate(0);
    background: none;
}

.map-pin.apt::after {
    content: "";
    position: absolute;
    top: auto;
    left: 0;
    bottom: auto;
    width: 59px;
    height: 15px;
    transform: none;
    background-position: 0;
    background-repeat: no-repeat;
}

.map-pin.apt .option-top {
    width: 48px;
    height: 18px;
    margin-left: 11px;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    text-align: center;
}

.map-pin.apt .price {
    width: 100%;
    height: 38px;
    padding-top: 18px;
    border-left-style: solid;
    border-left-width: 1px;
    border-right-style: solid;
    border-right-width: 1px;
    border-top-style: solid;
    border-top-width: 1px;
    text-align: center;
    color: #333 !important;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: -1px;
    background-color: #fff;
}

.map-pin.apt .price::after {
    content: "";
    position: absolute;
    right: -4px;
    top: 18px;
    width: 4px;
    height: 37px;
    z-index: 2;
}

.map-pin.apt .price.pt14 {
    padding-top: 14px;
}

.map-pin.apt .option-bt {
    position: absolute;
    top: 22px;
    left: 0;
    width: 100%;
    height: 15px;
    color: #92949d;
    text-align: center;
    font-size: 12px;
    font-weight: 400;
    z-index: 3;
    font-weight: bold;
}

.map-pin.apt .option-bt.red {
    color: #ff0000;
}

.map-pin.apt .option-bt.blue {
    color: #0000ff;
}

.map-pin.apt .option-bt.t18 {
    top: 18px;
    font-size: 11px;
    color: red;
}

.map-pin.apt.gray::after {
    background-image: url(/res/img/component/marker_bt_gray-42a00bcd77746758447ad05c5bae32fe.svg);
}

.map-pin.apt.gray > .option-top {
    background-color: #5e6376;
}

.map-pin.apt.gray > .price {
    border-color: #5e6376;
}

.map-pin.apt.gray > .price::after {
    background-color: #5e6376;
}

.map-pin.apt.brown::after {
    background-image: url(/res/img/component/marker_bt_brown-39131c26a1edb727236a009ae13f8c03.svg);
}

.map-pin.apt.brown > .option-top {
    background-color: #98806c;
}

.map-pin.apt.brown > .price {
    border-color: #98806c;
}

.map-pin.apt.brown > .price::after {
    background-color: #98806c;
}

.map-pin.apt.purple::after {
    background-image: url(/res/img/component/marker_bt_purple-2a40a0225ba149552793bcf854516f04.svg);
}

.map-pin.apt.purple > .option-top {
    background-color: #8f55e2;
}

.map-pin.apt.purple > .price {
    border-color: #8f55e2;
}

.map-pin.apt.purple > .price::after {
    background-color: #8f55e2;
}

.map-pin.apt.blue::after {
    background-image: url(/res/img/component/marker_bt_blue-ff9c31de9e50b26b5fba1d4d00ff7e43.svg);
}

.map-pin.apt.blue > .option-top {
    background-color: #4d6bd9;
}

.map-pin.apt.blue > .price {
    border-color: #4d6bd9;
}

.map-pin.apt.blue > .price::after {
    background-color: #4d6bd9;
}

.map-pin.apt.green::after {
    background-image: url(/res/img/component/marker_bt_green-169266f03ded1d43675afaf16263b40e.svg);
}

.map-pin.apt.green > .option-top {
    background-color: #7dc13a;
}

.map-pin.apt.green > .price {
    border-color: #7dc13a;
}

.map-pin.apt.green > .price::after {
    background-color: #7dc13a;
}

.map-pin.apt.yellow:after {
    background-image: url(/res/img/component/marker_bt_yellow-3853bc2b49f5a55983688868e4c42bae.svg);
}

.map-pin.apt.yellow > .option-top {
    background-color: #f9b921;
}

.map-pin.apt.yellow > .price {
    border-color: #f9b921;
}

.map-pin.apt.yellow > .price::after {
    background-color: #f9b921;
}

.map-pin.apt.lightgray::after {
    background-image: url(/res/img/component/marker_bt_lightgray-d272c5f546127be36ae7a8fb2f556e8c.svg);
}

.map-pin.apt.lightgray > .option-top {
    background-color: #999;
}

.map-pin.apt.lightgray > .price {
    border-color: #999;
}

.map-pin.apt.lightgray > .price::after {
    background-color: #999;
}

.map-pin.apt.option {
    background-color: rgba(11, 46, 83, .9);
}

.map-pin.apt.option:after {
    border-top-color: rgba(11, 46, 83, .9);
}

.map-pin.apt.option > .option-top {
    background-color: rgba(11, 46, 83, .9);
}

.map-pin.apt.option > .option-top span {
    position: static;
    transform: none;
}

.map-pin.apt.option > .price {
    color: #0b2e53;
}

.map-pin.apt.option > .option-bt {
    left: auto;
    right: -44px;
    bottom: -8px;
    width: 64px;
    border: 1px solid rgba(11, 46, 83, .9);
}

.map-pin.apt.option > .option-bt span {
    display: inline-block;
    position: static;
    margin-top: 7px;
    padding-right: 5px;
    color: #0b2e53;
    transform: none;
    letter-spacing: -.5px;
}

.map-pin.apt.option span {
    cursor: pointer;
}

.map-pin.apt.option span::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 2px;
    vertical-align: 1px;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity .3s;
}

.map-pin.apt.option > .option-top span::after {
    background-image: url(/res/img/component/icon_arrow03_up_white-74ac44f1258f4c3287a80a6f9f4d1104.svg);
}

.map-pin.apt.option > .option-bt span::after {
    background-image: url(/res/img/component/icon_arrow03_up_black-380fb67bb9816ee92461d1d90e41f52a.svg);
}

.map-pin.apt.option > .option-top span.down::after, .marker-legend .btn-year.down::after {
    background-image: url(/res/img/component/icon_arrow_down_white-05e7a9571fe98b39ecac5d18431f1a5b.svg);
}

.map-pin.apt.option > .option-bt span.down::after {
    background-image: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg);
}

.map-pin.no-rotate {
    transform: rotate(0);
}

.option-list {
    display: none;
    position: absolute;
    top: -63px;
    left: 50%;
    width: 54px;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    background-color: rgba(11, 46, 83, .9);
    transform: translate(-50%, 0);
}

.option-list ul {
    overflow: hidden;
    border-radius: 5px;
}

.option-list li {
    padding: 0 10px;
    color: rgba(255, 255, 255, .7);
    font-size: 12px;
    line-height: 20px;
    letter-spacing: -.5px;
    cursor: pointer;
}

.option-list li:hover {
    color: #fff;
}

.option-list li.active {
    color: #fff;
    font-weight: 500;
    background-color: rgba(11, 46, 83, 1);
}

.marker-legend {
    position: fixed;
    right: 10px;
    bottom: 10px;
    width: 140px;
    text-align: center;
    background-color: rgba(11, 46, 83, 0.9);
    border-radius: 6px;
    padding: 4px;
}

.marker-legend .group {
    overflow: hidden;
    margin-bottom: 3px;
}

.marker-legend .group div {
    height: 20px;
    color: #fff;
    font-size: 12px;
    font-weight: 300;
    line-height: 20px;
    letter-spacing: normal;
    margin-bottom: 1px;
}

.marker-legend .heading {
    display: flex;
    flex-flow: row wrap;
    position: relative;
    text-align: left;
    line-height: 24px;
    font-size: 13px;
}

.marker-legend .heading button {
    height: 20px;
    color: rgba(255, 255, 255, .8);
    text-align: center;
    font-size: 12px;
    transition: color .3s;
    outline: none;
}

.marker-legend .heading button::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 5px;
    vertical-align: 1px;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .8;
    transition: opacity .3s;
}

.marker-legend .heading button:hover {
    color: #fff;
}

.marker-legend .heading button:hover::after {
    opacity: 1;
}

.marker-legend .btn-legend::after {
    background-image: url(/res/img/component/icon_arrow_down_white-05e7a9571fe98b39ecac5d18431f1a5b.svg);
}

.marker-legend .btn-year::after, .marker-legend .btn-legend.down::after {
    background-image: url(/res/img/component/icon_arrow03_up_white-74ac44f1258f4c3287a80a6f9f4d1104.svg);
}

.marker-legend .btn-legend {
    flex: 2;
}

.marker-legend .btn-year {
    flex: 3;
    border-radius: 2px;
    background-color: rgba(255, 255, 255, 0.1);
}

.marker-list {
    display: none;
    position: absolute;
    bottom: 24px;
    right: 8px;
    width: 64px;
    border-radius: 5px;
    box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
    background-color: #fff;
}

.marker-list ul {
    overflow: hidden;
    border-radius: 5px;
}

.marker-list li {
    color: #666667;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    letter-spacing: -.5px;
    cursor: pointer;
}

.marker-list li:hover {
    background-color: rgba(11, 46, 83, .1);
}

.marker-list li.active {
    color: #fff;
    background-color: rgba(11, 46, 83, .9);
}

.marker-option {
    position: fixed;
    bottom: 20px;
    right: 200px;
}

.marker-option.left .map-pin.apt.option {
    width: auto;
    height: 80px;
    margin-left: 0;
    background: url(/res/img/component/icon_marker_legend-c45764ce32f97f545b40a41604f4fd48.png) 0 0 no-repeat;
    background-color: transparent;
}

.marker-option.left .map-pin.apt.option::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 69px;
    background: url(/res/img/component/map_legend_border-c76997dc89248a06267c4f634ec94363.png) 0 0 no-repeat;
}

.marker-option.left .map-pin.apt.option span {
    letter-spacing: -.5px;
}

.marker-option.left .map-pin.apt.option > .option-top {
    width: auto;
}

.marker-option.left .map-pin.apt.option > .option-top span {
    font-size: 11px;
}

.marker-option.left .map-pin.apt.option > .option-top, .marker-option.left .map-pin.apt.option > .price {
    background-color: transparent;
}

.marker-option.left .map-pin.apt .price {
    position: static;
    width: auto;
    height: auto;
    border: 0;
    padding: 0 5px 0 0;
    color: #000;
    font-size: 12px;
    font-weight: bold;
    line-height: 100%;
    white-space: pre;
    text-shadow: none;
}

.marker-option.left .map-pin.apt.option > .option-bt {
    position: static;
    width: auto;
    height: 28px;
    padding: 0 5px;
    border: 0;
    box-shadow: none;
    background-color: transparent;
}

.marker-option.left .map-pin.apt.option > .option-bt span {
    width: 100%;
    min-width: 62px;
    color: #333;
    font-weight: bold;
}

.marker-option.left .map-pin.apt.option span::after {
    margin-left: 3px;
    vertical-align: 1px;
}

.marker-option.left .map-pin.apt .marker-list {
    bottom: auto;
    top: 15px;
    width: 100%;
    padding: 0;
    border: solid 1px #8f55e2;
    border-radius: 0;
    box-shadow: none;
    background-color: #fff;
}

.marker-option.left .map-pin.apt .marker-list ul {
    border-radius: 0;
}

.marker-option.left .map-pin.apt .marker-list li {
    padding: 3px 0;
    border-radius: 0;
    color: #747d8d;
    font-size: 11px;
    font-weight: 500;
    line-height: 100%;
    text-align: center;
    cursor: pointer;
    white-space: pre;
}

.marker-option.left .map-pin.apt .marker-list li:hover {
    color: #fff;
    background-color: #9086dc;
}

.marker-option.left .map-pin.apt .option-top .marker-list {
    top: 19px;
    left: 11px;
    width: calc(100% - 11px);
    border: 0;
    background-color: rgba(76, 57, 163, 1);
    transform: none;
    z-index: 5;
}

.marker-option.left .map-pin.apt .option-top .marker-list li {
    color: #fff;
}

.marker-option.left .map-pin.apt .option-top .marker-list li:hover {
    background-color: rgba(0, 0, 0, .3);
}

.marker-option.left .map-pin.apt .option-bt .marker-list {
    left: 10px;
    top: 45px;
    min-width: 80px;
}

.marker-option.left .map-pin.apt .option-bt .marker-list li {
    text-align: left;
    padding: 3px 10px 3px 15px;
}

.marker-option.left .map-pin.apt.option::after, .marker-option.left .map-pin.apt .price::after {
    display: none;
}

.ent-map-pin.live-in .apt-ent-map-info > span {
    font-weight: bold;
    margin-right: 1px;
}

.apt-ent-map-info span + span {
    margin-left: 5px;
}

.apt-ent-map-info i {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    margin-right: 2px;
    vertical-align: -1px;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
}

.ent-map-pin.yellow i {
    background-color: rgba(249, 183, 33, .95);
}

.ent-map-pin.green i {
    background-color: rgba(125, 193, 58, .95);
}

i.icon-user {
    -webkit-mask-image: url(/res/img/component/icon_user-e6ed68e58b4e5f616917f276bbb1cb53.svg);
    mask-image: url(/res/img/component/icon_user-e6ed68e58b4e5f616917f276bbb1cb53.svg);
}

i.icon-home {
    -webkit-mask-image: url(/res/img/component/icon_home-01e4fabbaab5650ace52c6a87f5c29ca.svg);
    mask-image: url(/res/img/component/icon_home-01e4fabbaab5650ace52c6a87f5c29ca.svg);
}

.map-filter {
    position: fixed;
    left: -340px;
    bottom: 52px;
    overflow-y: auto;
    width: 320px;
    max-height: 800px;
    border: 1px solid #d9e1ea;
    border-radius: 3px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
    background-color: #fff;
    opacity: 0;
    transition: .3s;
    z-index: 14;
}

.map-filter::-webkit-scrollbar {
    width: 5px;
    height: 1px;
    background: rgba(0, 0, 0, .05);
}

.map-filter::-webkit-scrollbar-track {
    background: #e6e8ec;
    border: 0px none #ffffff;
    border-radius: 0;
}

.map-filter::-webkit-scrollbar-thumb {
    background: #dadeea;
    border: 0 none #ffffff;
}

.map-filter:hover::-webkit-scrollbar-thumb {
    background: #9086dc;
}

.map-filter.active {
    left: 120px;
    opacity: 1;
}

.map-filter .btn-filter-close {
    position: absolute;
    overflow: hidden;
    top: 5px;
    right: 5px;
    display: block;
    width: 24px;
    height: 24px;
    font-size: 0;
    line-height: 0;
    text-indent: -9999px;
}

.map-filter .btn-filter-close::before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-color: #a9b2c7;
    mask: url(/res/img/component/icon_box_close-d2b5c392dad82aaaffd3af6840399895.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_box_close-d2b5c392dad82aaaffd3af6840399895.svg) 50%/contain no-repeat;
}

.filter-group {
    padding: 12px 10px 10px 10px;
}

.filter-group h4 {
    margin-bottom: 8px;
    font-size: 14px; /* color:#8f55e2; */
    font-weight: 500;
}

.filter-group + .filter-group {
    border-top: 1px solid #d9e1ea;
}

.filter-title {
    display: flex;
    align-items: center;
}

.filter-title.row {
    margin-bottom: 8px;
}

.filter-title.row h4 {
    margin-bottom: 0;
}

.filter-title button {
    float: left;
    position: relative;
    height: 25px;
    padding: 0 10px;
    border-radius: 3px;
    color: #666;
    font-size: 12px;
    background-color: #f2f2f2;
    transition: .3s;
    cursor: pointer;
}

.filter-title button:nth-child(2) {
    margin-left: 10px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.filter-title button + button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.filter-title button:hover {
    background-color: rgba(144, 134, 220, .2);
}

.filter-title .active, .filter-title .active:hover {
    color: #fff;
    font-weight: 500;
    background-color: #8934fa;
}

.filter-input {
    margin-top: 5px;
}

.filter-input input[type=number] {
    width: calc(33% - 8px);
    height: 38px;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    font-size: 15px;
    text-indent: 0;
    background: #fff;
}

.filter-input button {
    min-width: 60px;
    height: 38px;
    font-size: 14px;
    color: #fff;
    margin-left: 10px;
    background-color: #9086dc;
    border-radius: 3px;
    transition-duration: 300ms;
}

.filter-input button:hover {
    background-color: #8934fa;
}

.filter-items {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.filter-items button {
    position: relative;
    width: calc(33.333% + 1px);
    height: calc(35px + 1px);
    margin-left: -1px;
    margin-top: -1px;
    border: 1px solid #d9e0f7;
    border-radius: 0;
    color: #7080ad;
    font-size: 14px;
    background-color: #f3f6fb;
    transition: .3s;
    cursor: pointer;
}

.filter-items button:hover {
    background-color: rgba(144, 134, 220, .2);
}

.filter-items .active, .filter-items .active:hover {
    color: #fff;
    border-color: #7b70d0;
    font-weight: 500;
    background-color: #9086dc;
}

.filter-items .year0 {
    color: #f9b921;
}

.filter-items .year5 {
    color: #7dc13a;
}

.filter-items .year10 {
    color: #4d6bd9;
}

.filter-items .year15 {
    color: #8f55e2;
}

.filter-items .year25 {
    color: #98806c;
}

.filter-items .year26 {
    color: #5e6376;
}

.filter-items .year35 {
    color: #999;
}

.filter-items button[class^=year]:hover, .filter-items button[class^=year].active {
    color: #fff;
}

.filter-items .year0:hover, .filter-items .year0.active {
    border-color: #f9b921;
    background-color: #f9b921;
}

.filter-items .year5:hover, .filter-items .year5.active {
    border-color: #7dc13a;
    background-color: #7dc13a;
}

.filter-items .year10:hover, .filter-items .year10.active {
    border-color: #4d6bd9;
    background-color: #4d6bd9;
}

.filter-items .year15:hover, .filter-items .year15.active {
    border-color: #8f55e2;
    background-color: #8f55e2;
}

.filter-items .year25:hover, .filter-items .year25.active {
    border-color: #98806c;
    background-color: #98806c;
}

.filter-items .year26:hover, .filter-items .year26.active {
    border-color: #5e6376;
    background-color: #5e6376;
}

.filter-items .year35:hover, .filter-items .year35.active {
    border-color: #999;
    background-color: #999;
}

.map-filter.icon {
    width: 360px;
}

.map-filter.icon .filter-items button {
    width: calc(25% + 1px);
}

.map-filter.apt {
    display: none;
    position: fixed;
    left: auto;
    right: 0;
    bottom: 0;
    top: 173px;
    width: 350px;
    margin-left: 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    opacity: 1;
    transition: none;
}

.filter-type {
    padding: 10px;
    border-bottom: solid 1px #eee;
}

.filter-type ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    cursor: pointer;
}

.filter-type li {
    position: relative;
    padding: 5px 7px;
    border-radius: 20px;
    font-size: 14px;
    transition: all .3s;
}

.filter-type li:hover {
    color: #333;
    background-color: rgba(144, 134, 220, .2);
}

.filter-type .active, .filter-type .active:hover {
    color: #fff;
    font-weight: 500;
    background-color: #8934fa;
}

.school-box, .job-box, .traffic-box {
    padding-bottom: 15px;
    cursor: default;
}

.school-box {
    width: 300px;
}

.school-box.large {
    width: 500px;
}

.school-box.large .title span {
    max-width: 400px;
}

.school-box .title span {
    max-width: 200px;
}

.school-box .title span::before, .job-box .title span::before, .traffic-box .title span::before {
    border-radius: 100%;
    background: none;
    background-color: #8934fa;
}

.school-box .title i::before {
    left: 6px;
    width: 18px;
    height: 18px;
    transform: translateY(-58%);
}

.school-box .list, .job-box .list, .traffic-box .list {
    height: auto;
}

.school-box .list dt {
    width: 25%;
}

.school-box .list dd {
    width: 25%;
}

.school-box .list dd.w75 {
    width: 75%;
}

.school-box .list p, .job-box .list p, .school-list-box .list p {
    padding-top: 10px;
    color: #50649c;
    font-size: 13px;
}

.job-box {
    width: 400px;
}

.job-box .title span {
    max-width: 340px;
}

.job-box .title i::before {
    left: 0;
    width: 30px;
    height: 30px;
}

.job-box .list dt {
    width: 15%;
}

.job-box .list dd {
    width: auto;
}

.job-box .list dd + dt:not(:nth-child(3)) {
    margin-left: 20px;
}

.job-box .list dd:nth-child(2) {
    width: 75%;
}

.traffic-box {
    width: 800px;
}

.traffic-box .title span {
    max-width: 90%;
}

.traffic-box .title i::before {
    left: 0;
    width: 30px;
    height: 30px;
}

.traffic-box .title b {
    color: #50649c;
    font-size: 15px;
    font-weight: normal;
}

.traffic-box .list > div {
    margin-top: 10px;
}

.traffic-box .list dt {
    width: 10%;
    margin-right: 2px;
}

.traffic-box .list dd {
    width: 20%;
}

.icon-map::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-right: 2px;
    vertical-align: middle;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg) 50%/contain no-repeat;
}

.traffic-box.subway .list {
    position: relative;
}

.traffic-box.subway .list dl {
    float: left;
    width: 40%;
    padding: 0;
    margin: 13px 0;
}

.traffic-box.subway .list dt {
    width: calc(15% - 5px);
}

.traffic-box.subway .list dd {
    width: 35%;
}

.traffic-box.subway .list .date {
    float: left;
    width: 30%;
}

.traffic-box.subway .dropdown, .traffic-box.subway .dropdown > .dropdown-select {
    height: 30px;
}

.traffic-box.subway .dropdown > .dropdown-select > span, .traffic-box.subway .dropdown > .dropdown-menu > li {
    color: #454f5d;
    font-size: 13px;
}

.traffic-box.subway .dropdown > .dropdown-select > span {
    height: 23px;
}

.traffic-box.subway .icon-date {
    height: 30px;
    vertical-align: middle;
}

.traffic-box.subway .list .sub-title {
    height: 30px;
    margin-bottom: 10px;
}

.traffic-box.subway .list .sub-title h4 {
    color: #333;
    font-size: 16px;
}

.classify {
    position: absolute;
    top: -5px;
    right: 15px;
}

.classify .option-info {
    color: #50649c;
    font-size: 13px;
    margin-right: 3px;
}

.traffic-box.bus {
    width: 380px;
    padding-bottom: 0;
}

.traffic-box.bus .list {
    height: 335px;
    overflow-y: auto;
}

.traffic-box.bus .list::-webkit-scrollbar, .school-list-box .list::-webkit-scrollbar {
    width: 5px;
    height: 1px;
    background: rgba(0, 0, 0, .05);
}

.traffic-box.bus .list::-webkit-scrollbar-track, .school-list-box .list::-webkit-scrollbar-track {
    background-color: transparent;
}

.traffic-box.bus .list::-webkit-scrollbar-thumb, .school-list-box .list::-webkit-scrollbar-thumb {
    background: #dadeea;
    border: 0 none #ffffff;
}

.traffic-box.bus .list > div {
    position: relative;
    padding: 10px;
    padding-left: 40px;
}

.traffic-box.bus .list > div::before {
    content: "";
    display: block;
    position: absolute;
    top: 8px;
    left: 3px;
    width: 24px;
    height: 24px;
    background-color: #333;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_bus.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_bus.svg) 50%/contain no-repeat;
}

.traffic-box.bus .list > div::after {
    content: "";
    display: block;
    position: absolute;
    top: 30px;
    left: 15px;
    width: 1px;
    bottom: -16px;
    background-color: #eee;
}

.traffic-box.bus .list > div:last-child::after {
    display: none;
}

.traffic-box.bus .list > div p {
    color: #8934fa;
    font-weight: bold;
}

.traffic-box.bus .list > div > p span {
    color: #50649c;
    font-size: 14px;
    font-weight: normal;
}

.traffic-box.bus .list dt {
    width: 18%;
}

.traffic-box.bus .list dd {
    width: calc(82% - 2px);
    font-size: 14px;
}

.traffic-box.bus .list dd b {
    color: #50649c;
    font-size: 12px;
    font-weight: 500;
}

.traffic-box.bus .list dd .bothway {
    display: inline-block;
    width: 12px;
    margin: 0 2px;
}

.traffic-box.bus .list dd .bothway::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 3px;
    vertical-align: -1px;
    background-color: #454f5d;
    mask: url(/res/img/component/icon_exchange-ffabeea2974f3e5003de49d23bc3cb89.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_exchange-ffabeea2974f3e5003de49d23bc3cb89.svg) 50%/contain no-repeat;
}

.traffic-box.bus .more {
    position: absolute;
    right: 0;
    bottom: 0;
}

.traffic-box.bus .more button {
    width: 30px;
    height: 30px;
    border-radius: 3px 0 3px 0;
    text-indent: -9999px;
    background-color: #dbe0ec;
    transition: .3s;
}

.traffic-box.bus .more button:hover {
    background-color: #8934fa;
}

.develop-box {
    position: absolute !important;
    width: 380px;
    border: solid 1px #a9b2c7;
    border-radius: 5px;
    background-color: #fff;
    z-index: 10;
    top: -200px;
    right: 100px;
}
.develop-box .title {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    position: relative;
    height: 52px;
    padding: 0 15px;
    border-bottom: solid 2px #a9b2c7;
    cursor: all-scroll;
}
.develop-box .title i::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    background-color: #fff;
    transform: translateY(-50%);
    left: 0;
    width: 30px;
    height: 30px;
}
.develop-box .title span {
    position: relative;
    display: inline-block;
    max-width: 90%;
    margin-right: 7px;
    color: #333;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.develop-box .title span::before {
    content: "";
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    margin-right: 5px;
    vertical-align: -9px;
    background: none;
    background-color: #8934fa;
}
.develop-box .box-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
    background: url(/res_root/img/common/icon_box_close-d2b5c392dad82aaaffd3af6840399895.svg) 50%/60% no-repeat;
    outline: none;
}
.develop-box .develop-detail{
    height: calc(100% - 110px);
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0 15px;
}
.develop-box .develop-detail::-webkit-scrollbar{
    display: none;
}
.develop-box .develop-detail .blank-data {
    margin-top: 30px;
    text-align: center;
}
.develop-box .develop-detail .blank-data::before{
    content: "";
    display: block;
    width: 180px;
    height: 180px;
    margin: 0 auto 20px auto;
    background: url(/res/img/common/img_dormant_error-999183f10c9154ebed6947baa3079ccf.png) 50%/180px no-repeat;
}
.develop-box .develop-detail .detail-header {
    padding: 10px;
}
.develop-box .develop-detail .detail-header > strong{
    font-size: 18px;
}
.develop-box .develop-detail .detail-info, .develop-box .develop-detail .detail-notice, .develop-box .develop-detail .detail-history{
    margin-top: 20px;
}
.develop-box .develop-detail .detail-image li{
    text-align: center;
    margin-bottom: 15px;
    border: 1px solid #bcc1ca;
}
.develop-box .develop-detail .detail-image li.relate-img{
    display: none;
}
.develop-box .develop-detail .detail-image a{
    width: calc(100% - 20px);
    display: inline-block;
    overflow: hidden;
    position: relative;
    margin-top: 4px;
    padding-top: calc(50% - 2px);
    vertical-align: top;
}
.develop-box .develop-detail .detail-image img{
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
.develop-box .develop-detail .detail-image button{
    position: relative;
}
.develop-box .develop-detail .detail-image button::after{
    content: "";
    display: block;
    position: absolute;
    top: 2px;
    right: -15px;
    width: 12px;
    height: 12px;
    background: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    transform: rotate(180deg);
    transition: all .15s ease-in-out;
}
.develop-box .develop-detail .detail-image button.open::after{
    transform: rotate(0deg);
}
.develop-box .develop-detail .detail-info div{
    padding: 10px;
}
.develop-box .develop-detail .detail-info dt{
    width: 100px;
    font-size: 13px;
}
.develop-box .develop-detail .detail-info dd{
    width: calc(100% - 100px);
    font-size: 13px;
    border-right: 1px solid #ccd4e1;
    word-break:break-all;
}
.develop-box .develop-detail .detail-history ol{
    padding: 5px 10px;
    font-size: 13px;
}
.develop-box .develop-detail .detail-history ol li{
    padding: 6px 14px;
    border-radius: 16px;
    border: 1px solid #00000012;
    position: relative;
    margin: 10px;
}
.develop-box .develop-detail .detail-history ol li:before{
    content: "";
    width: 7px;
    height: 7px;
    position: absolute;
    top: 50%;
    left: -13px;
    margin-top: -4px;
    border-radius: 3.5px;
    background-color: #d8d8d8;
}
.develop-box .develop-detail .detail-history ol li:first-child{
    border: 1px solid #7632c6;
}
.develop-box .develop-detail .detail-history ol li:first-child:before{
    background-color: #7632c6;
}
.develop-box .develop-detail .detail-notice ol{
    font-size: 13px;
}
.develop-box .develop-detail .detail-notice ol li{
    position: relative;
    padding: 6px 10px;
    margin: 10px;
}
.develop-box .develop-detail .detail-notice ol li:before{
    content: "";
    width: 2px;
    height: 2px;
    position: absolute;
    top: 12px;
    left: 0;
    background-color: #515254;
}

.icon-more::before, .icon-more::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

.icon-more::before {
    width: 50%;
    height: 3px;
}

.icon-more::after {
    width: 3px;
    height: 50%;
}

.edu-box {
    width: 800px;
    padding-bottom: 0;
    cursor: default;
    position: absolute !important;
    top: -100px;
    right: 100px;
}

.edu-box .list dd {
    padding-left: 10px;
}

.edu-box .title {
    flex-flow: row wrap;
    height: 70px;
    padding: 10px 15px;
}

.edu-box .title i::before {
    left: 21px;
    width: 18px;
    height: 18px;
    transform: translateY(-53%);
}

.edu-box .title span {
    position: static;
    max-width: 90%;
    padding-left: 42px;
}

.edu-box .title span::before {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

.edu-box .title span b {
    color: #50649c;
    font-weight: normal;
}

.edu-box .title .list {
    width: 100%;
    height: auto;
    margin-left: 30px;
}

.edu-box .title .list dl {
    padding-top: 0;
    background-color: #fff;
}

.edu-box .title .list dt {
    width: 10%;
}

.edu-box .title .list dd {
    font-weight: 500;
    width: 10%;
}

.edu-box .title .list dd:nth-child(2) {
    width: 45%;
}

.edu-box .title .list dd:last-child {
    width: 10%;
}

.edu-box .col-2 {
    display: flex;
    flex-flow: row wrap;
}

.edu-box .col-2 > * {
    max-height: 542px;
    overflow-y: auto;
}

.edu-box .col-2 > *::-webkit-scrollbar {
    width: 5px;
    height: 1px;
    background: rgba(0, 0, 0, .05);
}

.edu-box .col-2 > *::-webkit-scrollbar-track {
    background-color: transparent;
}

.edu-box .col-2 > *::-webkit-scrollbar-thumb {
    background: #dadeea;
    border: 0 none #ffffff;
}

.edu-box .col-2 > *:hover::-webkit-scrollbar-thumb {
    background: #adb5ca;
}

.edu-box .col-2 .list-left {
    width: 65%;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0 0 0 5px;
    border-right: solid 1px #eee;
    background-color: #f4f8fd;
}

.edu-box .col-2 .list-left dl {
    position: relative;
    padding: 15px;
    cursor: pointer;
    transition: .3s;
}

.edu-box .col-2 .list-left dl:hover {
    background-color: rgba(255, 255, 255, .5);
}

.edu-box .col-2 .list-left dl + dl {
    border-top: solid 1px #ddd;
}

.edu-box .col-2 .list-left .active, .edu-box .col-2 .list-left .active:hover {
    background-color: #fff;
}

.edu-box .col-2 .list-left .active::before {
    content: "";
    border-bottom: 2px solid #8934fa;
    border-right: 2px solid #8934fa;
    display: block;
    width: 10px;
    height: 10px;
    margin-top: -4px;
    pointer-events: none;
    position: absolute;
    right: 12px;
    top: 50%;
    -webkit-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transition: all 0.15s ease-in-out;
}

.edu-box .col-2 .list-left .active .bold, .edu-box .col-2 .list-left dl:hover .bold {
    color: #333;
}

.edu-box .col-2 .list-left .active .bold {
    font-weight: bold;
}

.edu-box .col-2 .list-left .active dt {
    color: #fff;
    border-color: #9086ee;
    background-color: #9086ee;
}

.edu-box .col-2 .list-left .active .bold {
    font-size: 16px;
    background-color: transparent;
}

.edu-box .col-2 .list {
    height: auto;
    padding: 0;
}

.edu-box .col-2 .list dt {
    width: 20%;
    color: #a9b2c7;
    transition: color .3s;
}

.edu-box .col-2 .list dd {
    width: 80%;
}

.edu-box .col-2 .list .bold {
    width: 100%;
    margin-bottom: 10px;
    border: 0;
    border-radius: 0;
    color: #454f5d;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
}

.edu-box .col-2 .list-right {
    width: 35%;
    padding: 15px;
}

.edu-box .col-2 .list-right dl {
    padding: 10px 5px;
}

.edu-box .col-2 .list-right dl + dl {
    border-top: dashed 1px #ddd;
}

.edu-box .col-2 .list-right dt {
    width: 25%;
    border-color: #9086ee;
    color: #9086ee;
}

.edu-box .col-2 .list-right dd {
    width: 75%;
}

.edu-box .col-2 .list-right h4 {
    position: relative;
    padding-left: 10px;
    color: #333;
    letter-spacing: -1px;
    font-size: 15px;
    font-weight: bold;
}

.edu-box .col-2 .list-right h4::before {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 0;
    width: 4px;
    height: 13px;
    border-radius: 2px;
    background-color: #8934fa;
}

.school-list-box {
    padding-bottom: 0;
    cursor: default;
}

.school-list-box .title i::before {
    left: 6px;
    width: 18px;
    height: 18px;
    transform: translateY(-58%);
}

.school-list-box .title span::after {
    display: none;
}

.school-list-box .yoo span::before {
    background-color: #83cd39;
}

.school-list-box .cho span::before {
    background-color: #ffc333;
}

.school-list-box .joong span::before {
    background-color: #ff971c;
}

.school-list-box .go span::before {
    background-color: #fe683d;
}

.school-list-box .teuk span::before {
    background-color: #9e69ea;
}

.school-list-box .list {
    height: auto;
    max-height: 600px;
    overflow-y: auto;
    padding: 0;
}

.school-list-box .list > div {
    position: relative;
    padding: 15px;
}

.school-list-box .list > div + div {
    border-top: solid 1px #ddd;
}

.school-list-box .list > div > strong {
    color: #333;
    font-size: 15px;
    letter-spacing: -1px;
}

.school-list-box .list p {
    padding-top: 5px;
}

.school-list-box .icon-compare {
    position: absolute;
    top: 15px;
    right: 15px;
}

.school-list-box .icon-map::before {
    width: 14px;
    height: 14px;
}

.map-state {
    position: absolute;
    top: 90px;
    left: 200px;
    width: 360px;
    height: 320px;
    padding: 0 10px;
    border: solid 1px rgba(255, 255, 255, .5);
    border-radius: 10px;
    background-color: rgba(18, 36, 57, .8);
    z-index: 0;
}

.map-state .state-title {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    border-bottom: solid 1px rgba(255, 255, 255, .3);
}

.map-state .state-title span {
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    line-height: 100%;
    letter-spacing: -1px;
}

.map-state .state-title .out {
    color: white;
}

.map-state .state-title .in {
    color: white;
}

.map-state .state-title .region {
    margin: 0 8px;
    font-size: 22px;
    font-weight: bold;
}

.map-state .state-title i {
    display: inline-block;
    position: relative;
    width: 12px;
    height: 12px;
}

.map-state .state-title i::before, .state-title i::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
}

.map-state .state-title i::before {
    left: -12px;
    width: 0;
    height: 0;
    border-width: 6px;
    border-style: solid;
    border-top-color: transparent;
    border-left-color: transparent;
    border-bottom-color: transparent;
}

.map-state .state-title i::after {
    right: -8px;
    width: 8px;
    height: 12px;
}

.map-state .state-title .out i {
    margin-left: 13px;
    margin-right: 6px;
    background-color: #9c74d8;
}

.map-state .state-title .out i::before {
    border-right-color: #9c74d8;
}

.map-state .state-title .out i::after {
    background: linear-gradient(90deg, #9c74d8, transparent);
}

.map-state .state-title .in i {
    margin-left: 6px;
    margin-right: 13px;
    background-color: #f3a648;
}

.map-state .state-title .in i::before {
    border-right-color: #f3a648;
}

.map-state .state-title .in i::after {
    background: linear-gradient(90deg, #f3a648, transparent);
}

.map-state .state-legend {
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-state .state-legend span {
    color: #fff;
    font-size: 13px;
    line-height: 100%;
}

.map-state .state-legend span::before {
    content: "";
    display: inline-block;
    width: 20px;
    margin-right: 10px;
    height: 5px;
    vertical-align: middle;
}

.map-state .state-legend .in {
    margin-right: 20px;
}

.map-state .state-legend .in::before {
    background-color: #f3a648;
}

.map-state .state-legend .out::before {
    background-color: #9c74d8;
}

.map-state.up-down .out {
    color: white;
}

.map-state.up-down .in {
    color: white;
}

.map-state.up-down .state-title .out i {
    background-color: blue;
}

.map-state.up-down .state-title .out i::before {
    border-right-color: blue;
}

.map-state.up-down .state-title .out i::after {
    background: linear-gradient(90deg, blue, transparent);
}

.map-state.up-down .state-title .in i {
    background-color: red;
}

.map-state.up-down .state-title .in i::before {
    border-right-color: red;
}

.map-state.up-down .state-title .in i::after {
    background: linear-gradient(90deg, red, transparent);
}

.map-state.up-down .state-legend .in::before {
    background-color: blue;
}

.map-state.up-down .state-legend .out::before {
    background-color: red;
}

/* map right */
.header-map .login-area {
    margin-right: 30px;
}

.header-map .header.hidden .logo-ginpre, .header-map .header.hidden .symbol-aptgin::after {
    display: none;
}

.header-map .header.hidden h1 > a.symbol-aptgin {
    position: fixed;
    top: 17px;
    left: 14px;
}

.header-map .header h1 > a.symbol-aptgin {
    position: relative;
}

.header-map h1 {
    background-color: transparent;
}

.header-map h1::before {
    content: "";
    position: fixed;
    left: 0;
    top: 5px;
    width: 65px;
    height: 65px;
    background-color: #4436a0;
}

.header {
    animation-name: slideDown;
    animation-duration: .3s;
}

.header.hidden {
    top: -70px;
    animation-name: slideUp;
    animation-duration: .3s;
}

.map-area {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    animation-name: slideDown2;
    animation-duration: .3s;
}

.map-area.header-hide {
    top: 0;
    padding-top: 5px;
    animation-name: slideUp2;
    animation-duration: .3s;
}

.map-area.header-hide::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background: linear-gradient(45deg, #4436a0, #6f21a2);
}

.map-right {
    display: flex;
    flex-flow: column nowrap;
    width: 350px;
    height: auto;
    animation-name: slideDown3;
    animation-duration: .3s;
    z-index: 12;
}

.map-right.header-hide {
    top: 5px;
    animation-name: slideUp3;
    animation-duration: .3s;
}

.map-right .map-search {
    margin: 0;
    padding: 10px;
    background-color: #f3f6fb;
    transition: .3s;
}

.map-right .search {
    justify-content: space-between;
    border: 1px solid #dbdbdb;
    border-radius: 4px;;
    background-color: #fff;
}

.map-right .search input {
    width: calc(100% - 70px);
    height: 43px;
    padding: 5px 10px;
    border: 0;
    border-radius: 4px;
    text-indent: 0;
}

.map-right .search button {
    text-indent: -9999px;
}

.map-right .icon-search {
    width: 43px;
    height: 43px;
    border: 0;
}

.map-right .delete {
    background-color: rgba(0, 0, 0, .05);
    margin-right: 3px;
}

.map-right .delete:hover {
    background-color: rgba(193, 146, 253, .5);
}

.map-right.header-hide .map-search {
    padding-right: 50px;
}

.map-right .switch-area .switch {
    width: auto;
    height: 24px;
    justify-content: center;
    padding-left: 35px;
}

.map-right .switch-area .switch + .switch {
    margin-left: 10px;
}

.map-right .chart-area {
    min-height: 270px;
    padding: 8px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/100px no-repeat;
}

.switch-area {
    position: absolute;
    top: -2px;
    right: 10px;
    display: flex;
    align-items: center;
}

.switch-area span {
    font-size: 12px;
}

.switch-area .slider {
    width: 27px;
    height: 12px;
}

.switch-area .switch .slider::before {
    width: 15px;
    height: 15px;
    top: -2px;
}

.switch-area .switch input:checked + .slider:before {
    transform: translateX(14px);
}

.map-search .area-list {
    display: none;
    position: absolute;
    top: 55px;
    left: 0;
    right: 0;
    padding: 10px;
    border-radius: 0 0 3px 3px;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .3);
    background-color: #fff;
    z-index: 15;
}

.map-search .area-list ul {
    margin: 0;
}

.map-search .area-list li {
    position: relative;
    padding: 24px 30px 5px 20px;
    cursor: pointer;
}

.map-search .area-list li + li {
    border-top: solid 1px #f3f6fb;
}

.map-search .area-list li::before {
    top: 9px;
    left: 3px;
    width: 14px;
    height: 14px;
    transform: none;
}

.map-search .area-list li::after {
    right: 5px;
}

.map-search .area-list sup {
    position: absolute;
    top: 4px;
    left: 20px;
    color: #50649c;
}

.map-right .search .icon-loading {
    text-indent: 0;
}

.icon-loading {
    width: 43px;
    height: 43px;
    font-size: 0;
    color: transparent;
    line-height: 0;
    cursor: default;
}

.icon-loading:hover {
    background-color: transparent;
}

.icon-loading::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 3px solid #cecdde;
    border-radius: 50%;
    border-top-color: #8934fa;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@-webkit-keyframes spin {
    to {
        -webkit-transform: rotate(360deg);
    }
}

@keyframes slideUp {
    from {
        top: 0;
    }
    to {
        top: -70px;
    }
}

@keyframes slideDown {
    from {
        top: -70px;
    }
    to {
        top: 0;
    }
}

@keyframes slideUp2 {
    from {
        top: 70px;
    }
    to {
        top: 0;
    }
}

@keyframes slideDown2 {
    from {
        top: 0;
    }
    to {
        top: 70px;
    }
}

@keyframes slideUp3 {
    from {
        top: 70px;
    }
    to {
        top: 5px;
    }
}

@keyframes slideDown3 {
    from {
        top: 5px;
    }
    to {
        top: 70px;
    }
}

.btn-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 5px;
    right: 0;
    width: 50px;
    height: 65px;
    z-index: 201;
}

.btn-menu button {
    position: relative;
    right: 0;
    width: 22px;
    height: 18px;
    overflow: hidden;
    outline: none;
}

.btn-menu button::before, .btn-menu button::after {
    content: "";
    display: block;
    overflow: hidden;
    text-indent: -9999px;
}

.btn-menu button::before, .btn-menu button::after, .btn-menu button .toggle-bar {
    width: 22px;
    height: 2px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-1px);
    background-color: #333;
    -moz-transition: cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -o-transition: cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    -webkit-transition: cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
    transition: cubic-bezier(0.77, 0, 0.175, 1) 0.2s;
}

.btn-menu button::before {
    transform: translateY(-9px);
}

.btn-menu button::after {
    transform: translateY(7px);
}

.btn-menu button.active {
    margin-top: -7px;
}

.btn-menu button.active::before {
    background-color: #fff;
    transform: rotate(45deg);
}

.btn-menu button.active::after, .btn-menu button.active .toggle-bar {
    background-color: #fff;
    transform: rotate(-45deg);
}

.btn-menu button.active .toggle-bar {
    opacity: 0;
}

.tab-area {
    position: relative;
}

.map-category {
    overflow: hidden;
    height: 43px;
}

.map-category ul {
    height: 43px;
    border-bottom: solid 1px #dadce0;
    border-top: solid 1px #dadce0;
    padding-left: 40px;
    padding-right: 40px;
}

.map-category li {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    float: left;
    height: 41px;
    letter-spacing: -.5px;
    cursor: pointer;
}

.map-category li:not(.btn-prev):not(.btn-next) {
    width: 20%;
}

.map-category li:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: #dadce0;
}

.map-category li.active {
    color: #333;
    font-weight: bold;
}

.map-category li.active::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: #8f55e2;
}

.map-category li.active:hover::before {
    background-color: #8f55e2;
}

.map-category li.active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
}

.map-category li + li {
    border-right: solid 1px #dadce0;
}

.map-category li .pre-span {
    position: absolute;
    top: 1px;
    right: -11px;
}

.map-category .btn-next, .map-category .btn-prev {
    position: absolute;
    top: 0;
    width: 40px;
    height: 42px;
}

.map-category .btn-next {
    right: 0;
    border-left: 0;
    border-right: 0;
}

.map-category .next, .map-category .prev {
    width: 40px;
    height: 40px;
    text-indent: -9999px;
}

.map-category .next::before, .map-category .prev::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    background-color: #999;
    transform: translate(-50%, -50%) rotate(-90deg);
    transition: .3s;
}

.map-category .next:hover::before, .tab-category .next:active::before, .map-category .prev:hover::before, .tab-category .prev:active::before {
    background-color: #8f55e2;
}

.map-category .prev::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.map-category .default {
    padding-left: 0;
}

.map-category .default li:not(.btn-prev):not(.btn-next) {
    width: 20%;
}

.map-category .end {
    padding-right: 0;
}

.map-category .btn-prev {
    display: none;
    left: 0;
    border-right: solid 1px #dadce0;
}

.map-category .flex-default {
    display: flex;
    flex-flow: row nowrap;
    padding: 0;
}

.map-category .flex-default li:not(.btn-prev):not(.btn-next) {
    width: auto;
}

.map-category .flex-default li {
    flex: 1;
}

.map-category .flex-default li:first-child {
    border-right: solid 1px #dadce0;
}

.filter-area {
    padding: 5px 0;
    border-bottom: solid 1px #d9e1ea;
}

.filter-area > div {
    padding: 5px 10px;
}

.filter-area > div + div {
    border-top: solid 1px #efefef;
}

.topic-btns > button, .options button {
    color: #333;
    border-radius: 3px;
    font-size: 15px;
    background-color: #f1f1f1;
    transition: .3s;
}
.modal .options button {
    font-weight: 600;
    text-align: center;
    overflow: hidden;
    padding: 0 16px;
    height: 38px;
    color: #333;
    border-radius: 3px;
    font-size: 15px;
    background-color: #f1f1f1;
    transition: .3s;
}
.modal .options button.btn-apt-group {
    color: white;
    background: #673ab7;
}

.topic-btns > button:hover, .topic-btns > button:active, .options button:hover, .options button:active {
    color: #fff;
    border-color: #afb3bb;
    background-color: #afb3bb;
}

.filter-area .dropdown:hover {
    border-color: #8934fa;
}

.topic-btns {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.topic-btns.eco-topic > button {
    flex: 0 1 calc(33% - 3px);
    margin-bottom: 5px;
}

.topic-btns.eco-topic > button:nth-child(n+4) {
    margin-left: 0;
    margin-right: auto;
}
.topic-btns.eco-topic > button:nth-child(4) {
    margin-right: 5px;
}

.topic-btns > button {
    flex: 1;
    height: 50px;
    border: solid 1px #f1f1f1;
    border-radius: 5px;
    font-size: 17px;
}

.topic-btns > button + * {
    margin-left: 5px;
}

.topic-btns > button:hover {
    border-color: #f1f1f1;
    color: #fff;
}

.topic-btns > button.active {
    border-color: #7536cf;
    color: #fff;
    background-color: #8f55e2;
}

.topic-btns .btn-orange.active {
    border-color: #fd8c2c;
    background-color: #fd8c2c;
}

.topic-btns .btn-apt-filter {
    border-color: #8891a3;
    color: #fff;
    font-size: 15px;
    background-color: #8891a3;
}

.topic-btns .btn-apt-filter::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: -3px;
    background-color: #fff;
    mask: url(/res/img/component/icon_map_filter-3d9d10ef3c514ec32a732384b618c936.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_map_filter-3d9d10ef3c514ec32a732384b618c936.svg) 50%/contain no-repeat;
}

.topic-btns > .btn-apt-filter:hover {
    border-color: #afb3bb;
    background-color: #afb3bb;
}

.topic-btns > .btn-apt-filter.active {
    border-color: #7b70d0;
    background-color: #9086dc;
}

.topic-btns > button > .pre-span {
    position: absolute;
    top: 1px;
    right: 1px;
}

.topic-form {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 10px;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
}

.topic-form > * + * {
    margin-left: 5px;
}

.topic-form .dropdown {
    background-color: #fff;
}

.topic-form input[type=text] {
    height: 36px;
    background: #ffffff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    margin-left: 6px;
    text-indent: 0;
    transition: border-color .3s;
}

.topic-form input[type=text]:hover {
    border-color: #8934fa;
}

.topic-form button {
    height: 36px;
    color: #fff;
    background-color: #673ab7;
}

.topic-form button:hover {
    background-color: #8934fa;
}

.topic-btns .map-filter-set {
    width: calc(50% - 10px);
}

.map-filter-set {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    border-radius: 24px;
}

.map-filter-set span.pre-span {
    position: absolute;
    top: 0;
    right: -24px;
}

.map-filter-set .filter {
    position: relative;
    word-break: keep-all;
    width: 100%;
}

.map-filter-set .filter > a {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 50px;
    padding: 14px 36px 0 12px;
    border-left: 1px solid #dadce0;
    border-top: 1px solid #dadce0;
    border-bottom: 1px solid #dadce0;
    border-radius: 5px;
    color: #333333;
    font-size: 15px;
    line-height: 44px;
    font-weight: 600;
    letter-spacing: -0.4px;
    background-color: #fff;
    transition: background 100ms ease-out;
}

.map-filter-set .filter > a.active {
    border-color: #9086ee;
}

.map-filter-set .filter > a .filter-name {
    top: 4px;
    left: 12px;
    color: #747d8d;
}

.map-filter-set .filter > a .arrow {
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    width: 12px;
    height: 7px;
    background-image: none;
    background-color: #9e9e9e;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
}

.map-filter-set .filter > a.active .arrow {
    transform: translateY(-50%) rotate(-180deg);
}

.map-filter-set .checking-set, .map-filter-set .selecting-set {
    flex-direction: column;
}

.map-filter-set .selecting span.tips {
    position: absolute;
    top: 0;
    right: 2px;
}

.map-filter-set .selecting span.tips::after {
    position: absolute;
    top: 0;
    right: -48px;
}

.map-filter-set .selecting .tips-box {
    right: -25px;
    width: 430px;
}

.topic-btns .map-filter-set .filter > a {
    flex-flow: row wrap;
    color: #fff;
    padding-top: 0;
    border-color: #7970c8;
    background-color: #9086ee;
}

.topic-btns .map-filter-set .filter > a .arrow {
    background-color: #fff;
}

.topic-btns .map-filter-set .filter > a .filter-name {
    width: 100%;
    margin-top: -2px;
    margin-bottom: -10px;
    color: #fff99f;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
}

.topic-btns .map-filter-set .filter > a .text {
    display: block;
    line-height: 100%;
    white-space: nowrap;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topic-btns .map-filter-set .filter > a.active {
    border-color: #7970c8;
}

.topic-btns .map-filter-set .filter fieldset {
    display: none;
    position: absolute;
    top: 50px;
    left: auto;
    right: 0;
    padding-top: 0;
    border: 1px solid #717171;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    background-color: #fff;
    z-index: 5;
}

.topic-btns .map-filter-set.left .filter fieldset {
    left: 0;
}

.topic-btns .map-filter-set.left {
    width: calc(50% - 5px);
}

.topic-btns .map-filter-set.left + * {
    margin-left: 5px;
}

.topic-btns button + .map-filter-set {
    margin-left: 10px;
}

.options > div {
    display: flex;
    flex-flow: row wrap;
}

.options > div + div {
    margin-top: 5px;
}

.options > div > *:not(:last-child) {
    margin-right: 5px;
}

.options > div .checking {
    margin-left: 10px;
}

.options button {
    flex: 1;
    height: 38px;
}

.options button.active, .options button.clicked {
    border-color: #9086ee;
    color: #fff;
    background-color: #9086ee;
}

.options .map-filter-set {
    flex: 1;
}

.options .tip {
    position: absolute;
    top: -3px;
    right: -2px;
    width: 16px;
    height: 16px;
    border-radius: 100%;
    color: #fff;
    font-size: 12px;
    text-align: center;
    background-color: #8934fa;
    z-index: 1;
    cursor: default;
}

.options .tip[data-tooltip-direction=bottom]::after {
    top: 22px;
    min-width: 165px;
}

.options .tip[data-tooltip-direction=bottom]:hover::after {
    top: 24px;
}

.options.add {
    display: none;
}

.options.add.active {
    display: block;
}

.options.add > div:not(.sub-btns) > button {
    border-radius: 3px 3px 0 0;
}

.options.add > div:not(.sub-btns) > button span {
    display: none;
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: #fff;
    z-index: 1;
}

.options.add > div:not(.sub-btns) > button.active {
    position: relative;
    border: solid 1px #dee3eb;
    border-bottom: 0;
    border-top: solid 2px #9086ee;
    color: #333;
    font-weight: bold;
    background-color: #fff;
}

.options.add > div:not(.sub-btns) > button.active span {
    display: block;
}

.options.add > div:not(.sub-btns) > button:not(:last-child) {
    margin-right: 1px;
}

.options.add > div:not(.sub-btns) > button span.pre-span {
    display: inline-block;
    height: 16px;
    bottom: auto;
    left: auto;
    background-color: transparent;
    top: -6px;
    right: -3px;
}

.options.half-option {
    display: flex;
    flex-flow: row wrap;
}
.options.half-option > div {
    width: 49%;
}
.options.half-option > div+div {
    margin-top: 0px;
    margin-left: 6px;
}
.options.half-div{
    width: 49%;
    display: inline-block;
    padding-right: 0;
}
.options.half-div.right-div{
    padding-left: 1px;
    padding-right: 8px;
}

.option-text {
    line-height: 38px;
}

.option-info {
    font-size: 14px;
    line-height: 38px;
    letter-spacing: -1px;
}

.icon-date {
    display: inline-block;
    width: 18px;
    height: 38px;
    background: url(/res/img/component/icon_calendar-ebe3c49c89f42bb20e7e5185b31de11a.svg) 50%/18px no-repeat;
}

.map-date .dropdown > .dropdown-select {
    padding: 0 20px 0 8px;
}

.map-date .dropdown > .dropdown-select::after {
    right: 9px;
}

.tab-panel {
    display: none;
}

.tab-panel.active {
    display: block;
}

.map-info {
    position: relative;
    flex: 1;
}

.map-info .title-area > * {
    margin: 0;
    line-height: 20px;
}

.map-info .title-area h4 {
    margin-left: 5px;
    padding-left: 10px;
}

.map-info .title-area h4::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background-color: #712cce;
    transform: translateY(-50%);
}

.map-info .title-area .info {
    position: absolute;
    top: 2px;
    right: 5px;
}

.map-info .title-area .info.static {
    position: static;
    display: block;
}

.map-info .title-area .info .dropdown {
    height: 24px;
    margin-left: 3px;
}

.map-info .title-area .info .dropdown > .dropdown-select {
    height: 24px;
    line-height: 24px;
}

.map-info .title-area .info .dropdown > .dropdown-select span {
    font-size: 12px;
}

.map-info .title-area .info .dropdown > .dropdown-menu > li {
    padding: 5px;
    font-size: 12px;
}

.map-info .title-area .info.price::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 100%;
    background-color: rgba(236, 105, 105, 0.8);
}

.map-info .sub-tab {
    clear: both;
}

.map-info .sub-tab ul {
    display: flex;
    justify-content: space-between;
    border: 0;
    border-radius: 3px 3px 0 0;
    overflow: visible;
}

.map-info .sub-tab li {
    position: relative;
    flex: 1;
    width: auto;
    height: 36px;
    border-color: #d9e0f7;
    border-right: 0;
    border-bottom: solid 1px #d9e0f7;
    border-radius: 3px 3px 0 0;
    color: #a4aecb;
    font-size: 13px;
    transition: background-color .3s;
    background-color: #f3f6fb;
}

.map-info .sub-tab li .tips {
    position: absolute;
    top: -9px;
    right: -6px;
}

.map-info .sub-tab li .tips::after {
    width: 16px;
    height: 16px;
    font-size: 12px;
    line-height: 14px;
}

.map-info .sub-tab li .tips-box {
    top: -8px;
    right: 10px;
    width: 308px;
}

.map-info .sub-tab li:hover::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 2px;
    height: 2px;
    background-color: #d9e0f7;
}

.map-info .sub-tab li + li {
    margin-left: 0;
}

.map-info .sub-tab li:last-child {
    border-right: solid 1px #dadce0;
}

.map-info .sub-tab li:not(.active):hover {
    background-color: #f3f6fb;
}

.map-info .sub-tab .active {
    color: #333;
    border-color: #d9e0f7;
    background-color: #fff;
}

.map-info .sub-tab .active::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    width: 100%;
    border-radius: 2px;
    height: 2px;
    background-color: #9086ee;
}

.map-info .sub-tab .active:hover::before {
    background-color: #9086ee;
}

.map-info .sub-tab .active:hover {
    background-color: #fff;
}

.map-info .sub-tab .active::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #fff;
}

.map-info .sub-tab li[class^=btn-] {
    position: relative;
    padding: 0 12px;
    font-size: 0;
    line-height: 0;
    color: transparent;
}

.map-info .sub-tab li[class^=btn-]::before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #a4aecb;
}

.map-info .sub-tab .btn-prev {
    border-right: solid 1px #d9e0f7;
}

.map-info .sub-tab .btn-prev::before {
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    transform: translate(-50%, -50%) rotate(90deg);
}

.map-info .sub-tab .btn-next::before {
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    transform: translate(-50%, -50%) rotate(-90deg);
}

.map-info .compare-btns {
    min-height: auto;
    margin: 0;
    padding: 0;
    border: 0;
}

.map-info .compare-btns button {
    height: 38px;
    line-height: 38px;
    margin-right: 0;
    padding: 0;
}

.map-info .tab-panel {
    flex-flow: column nowrap;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 43px;
}

.map-info .tab-panel.active {
    display: flex;
}

.map-info .scroll-tbody {
    min-height: auto;
    max-height: 156px;
}

.map-info .table-basic {
    border-top: solid 2px #d5dae6;
}

.map-info .table-basic.mini {
    margin: 5px 0 10px 0;
}

.map-info .table-basic th, .map-info .table-basic td {
    font-size: 13px;
}

.map-info .table-basic.mini th, .map-info .table-basic.mini td {
    height: 30px;
}

.map-info .table-basic th {
    padding: 5px 1px;
    font-size: 12px;
}

.map-info .table-basic td {
    padding: 5px;
    text-align: left;
}

.map-info .table-basic td .list-basic {
    margin-bottom: 0;
}

.map-info .table-basic td .dropdown {
    width: 100%;
}

.map-info .table-basic td .dropdown > .dropdown-select {
    padding-top: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
}

.map-info .table-basic td .dropdown > .dropdown-select > span, .map-info .table-basic td .dropdown > .dropdown-menu > li {
    font-size: 13px;
    word-break: keep-all;
    line-height: 110%;
}

.map-info .table-basic td .dropdown > .dropdown-menu > li {
    padding: 8px 10px;
}

.map-info .auction-photo {
    margin-bottom: 20px;
}

.map-info .auction-photo img {
    width: 100%;
}

.map-info .auction-photo img + img {
    margin-top: 10px;
}

.map-info .result-area h5 {
    padding: 3px 3px 3px 10px;
    border-bottom: solid 1px #e9e7ff;
    font-size: 13px;
    color: #9086ee;
    font-weight: 500;
    background-color: #f5f4ff;
}

.map-info .result-area h5 + p {
    position: absolute;
    top: 0;
    right: 10px;
    color: #7080ad;
    font-size: 11px;
    line-height: 23px;
}

.map-info .result-area h5 .info {
    float: right;
    color: #7080ad;
    font-size: 11px;
}

.map-info-wrap div {
    margin-top: 5px;
}

.map-info-btns {
    display: flex;
    flex-flow: row wrap;
}

.map-info-btns button {
    width: 100%;
    margin: 0;
    padding: 0;
    height: 38px;
    border-radius: 3px;
    transition: .3s;
}

.map-info-btns button::before, .map-info-btns button::after {
    display: inline-block;
    width: 17px;
    height: 17px;
    vertical-align: -3px;
    transition: .3s;
}

.map-info-btns button + button {
    margin-left: 5px;
}

.map-info-btns button:nth-child(4) {
    margin-left: 0;
    margin-top: 5px;
}

.map-info-btns button.btn-naver {
    width: 49%;
    margin: 0 0 0 5px;
}

.map-info-btns .btn-blue {
    background-color: #39359f;
}

.map-info-btns .btn-blue:hover, .map-info-btns .btn-blue:active {
    background-color: #2d4eaf;
}

.map-info-btns .btn-green {
    color: #fff;
}

div[class^=chart-] + .map-info-btns .btn-history {
    width: 49%;
}

div[class^=chart-] + .map-info-btns .btn-history + .btn-history {
    margin-left: 5px;
}

.map-info-btns.twice button {
    width: calc(50% - 4px);
}

.map-info-btns button[data-compare-auth="P"]{
    position: relative;
}
.map-info-btns button[data-compare-auth="P"] span.pre-span {
    position: absolute;
    margin: 0;
    width: 16px;
    height: 16px;
    top: -6px;
    right: -4px;
}

.map-info .maintenance .table-basic th, .map-info .maintenance .table-basic td {
    font-size: 14px;
}

.map-info .maintenance .table-basic td {
    padding: 5px 10px;
}

.map-info .icon-refresh {
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 2px;
    vertical-align: -4px;
}

.map-info .icon-refresh span {
    width: 20px;
    height: 20px;
}

.map-info .icon-refresh span::before {
    position: static;
    width: 20px;
    height: 20px;
    background-size: auto 16px;
}

.map-info .filter-set {
    border-radius: 0;
}

.map-info .filter-set > .filter.period > a {
    border-radius: 3px;
    height: 40px;
    padding-top: 0;
}

.map-info .filter-set > .filter.period {
    width: 100%;
}

.map-info .filter-set > .filter.period > a {
    padding: 0 36px;
    transition: .3s ease-in-out;
}

.map-info .filter-set > .filter.period > a:hover {
    border-color: #8934fa;
    background-color: #fff;
}

.map-info .filter-set > .filter.period > a > .icon-calendar {
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
}

.map-info .filter-set > .filter.period > a > .arrow {
    content: "";
    display: block;
    position: absolute;
    right: 12px;
    top: 50%;
    width: 7px;
    height: 7px;
    border-bottom: 2px solid #9e9e9e;
    border-right: 2px solid #9e9e9e;
    margin-top: -4px;
    pointer-events: none;
    -webkit-transform-origin: 66% 66%;
    transform-origin: 66% 66%;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: ll 0.15s ease-in-out;
    background: none;
}

.map-info .filter-set > .filter.period > a > .text {
    font-weight: 500;
}

.map-info .filter-set > .filter.period > a.active {
    border-width: 2px;
    border-color: #8934fa;
    background-color: #fff;
}

.map-info .filter-set > .filter.period > a.active .text {
    color: #333;
}

.map-info .filter-set > .filter.period > a.active .arrow {
    -webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.map-info .filter-set > .filter.period > a.active .icon-calendar {
    border-color: #8934fa;
    background-image: url(/res/img/component/icon_calendar-ebe3c49c89f42bb20e7e5185b31de11a.svg);
}

.map-info .filter-set > .filter > fieldset {
    top: 40px;
    right: 0;
    padding-top: 70px;
    z-index: 10;
}

.map-info .filter-set > .filter > fieldset legend {
    top: 4px;
    left: 12px;
    font-size: 16px;
    font-weight: bold;
}

.map-info .filter-set > .filter > fieldset .date-set > div > ul {
    width: 50px;
}

.map-info .filter-set > .filter > fieldset .btn-group {
    top: 36px;
    right: 8px;
}

.map-info .filter-set > .filter > fieldset .icon-reset {
    top: -67px;
}

.map-info .btn-group .clicked {
    color: #fff;
    background-color: #9086ee;
    border-color: #9086ee;
}

.topic-btns .map-filter-set .filter > a .icon-tips::after {
    background-color: #7970c8;
}

.topic-btns .map-filter-set .filter > a .icon-tips:hover::after {
    background-color: #8934fa;
}

.table-small {
    width: auto;
}

.table-small th, .table-small td {
    padding: 5px;
    border: solid 1px #eef0f9;
    border-top: 0;
    font-size: 12px;
    line-height: 130%;
    text-align: center;
    font-weight: 400;
}

.table-small th:first-child, .table-small td:first-child {
    border-left: 0;
}

.table-small thead {
    background-color: #f0f3fc;
}

.table-small thead th {
    border-color: #d9e0f7;
    color: #50649c;
}

.table-small tbody th {
    color: #50649c;
    background-color: #f0f3fc;
}

.icon-multi::before {
    content: "";
    margin-right: 5px;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    background-color: #FFF;
}

.icon-grid::before {
    content: "";
    margin-right: 5px;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_grid_pre.svg) 50%/17px no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_grid_pre.svg) 50%/17px no-repeat;
    background-color: #FFF;
}

.icon-time::before {
    content: "";
    margin-right: 5px;
    background-color: #fff;
    -webkit-mask: url(/res/img/component/icon_history-76d30273895fcc37f49f252c0791c012.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_history-76d30273895fcc37f49f252c0791c012.svg) 50%/contain no-repeat;
}

.icon-data-down {
    font-size: 14px;
}

.icon-data-down::before {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: 5px;
    background-color: #fff;
    mask: url(/res/img/component/icon_download-e8b7f509d9491d7f24b56742e57b638a.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_download-e8b7f509d9491d7f24b56742e57b638a.svg) 50%/contain no-repeat;
}

.icon-popup::after {
    content: "";
    margin-left: 5px;
    background-color: #fff;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
}

.result-area {
    position: relative;
    padding: 25px 10px 10px 10px;
    flex-grow: 1;
    overflow-y: auto;
}

.result-area > .layer {
    display: none;
    padding-bottom: 10px;
    background-color: #fff;
}

.result-area > .layer + .layer {
    margin-top: 10px;
}

.result-area > .layer > div:not(:first-child):not(.btn-center-close), .result-area > div:not(.layer):not(:first-child):not(.btn-center-close) {
    margin-top: 10px;
}

.result-area > .layer.active {
    display: block;
}

.result-area .title-area {
    border-top: 0;
    margin-bottom: 10px;
}

.result-area .title-area + .population-info {
    margin-top: 20px;
}

.result-area .title-area dl {
    position: absolute;
    top: 2px;
    right: 5px;
    display: flex;
    flex-flow: row wrap;
}

.result-area .title-area dl * {
    color: #7080ad;
}

.result-area .title-area dt {
    position: relative;
    margin-right: 5px;
    font-size: 13px;
    letter-spacing: -1px;
}

.result-area .title-area dd {
    font-family: Muli, sans-serif;
    font-size: 14px;
    font-weight: bold;
}

.result-area .title-area dd span {
    font-family: "Noto Sans KR", "맑은 고딕", "돋움", sans-serif;
    font-weight: 500;
}

.result-area .title-area dd + dt {
    margin-left: 10px;
    padding-left: 10px;
}

.result-area .title-area dd + dt::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    width: 1px;
    height: 13px;
    background-color: #ccd2eb;
}

.result-area .btn-naver::before {
    position: static;
    display: inline-block;
}

.result-area .options {
    position: relative;
    padding: 10px;
    background-color: #f0f3f7;
}

.result-area .options > div {
    padding-top: 18px;
}

.result-area .options .dropdown {
    width: calc(50% - 3px);
    background-color: #fff;
}

.result-area .option-info {
    position: absolute;
    color: #8934fa;
    top: 0;
    left: 12px;
    font-size: 13px;
    line-height: 28px;
    font-weight: 500;
}

.result-area .group-save-area {
    display: none;
}

.result-area .group-save-area .input-field span::before {
    z-index: 1;
}

.result-area .btn-comparer-save .icon-group-save.mini-map {
    width: 16px;
    height: 16px;
    background-size: 16px;
}

.region-info {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 65px;
    padding-top: 25px;
    border: solid 1px #e6eaf0;
    border-radius: 3px;
    background-color: #f3f6fb;
}

.region-info > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 27px;
    padding: 0 5px;
    border-bottom: solid 1px #e6eaf0;
}

.region-info > div span {
    display: inline-block;
    padding: 2px;
    border-radius: 2px;
    color: #fff;
    font-size: 11px;
    line-height: 100%;
}

.region-info .info {
    color: #7080ad;
    font-size: 12px;
}

.region-info > dl > * {
    float: left;
    color: #333;
    line-height: 20px;
}

.region-info > dl > dt {
    position: relative;
    margin-right: 5px;
    font-size: 13px;
    letter-spacing: -1px;
}

.region-info > dl > dd {
    font-family: Muli, sans-serif;
    font-size: 16px;
    font-weight: bold;
}

.region-info > dl > dd + dd {
    margin-left: 10px;
}

.region-info > dl > dd + dt {
    margin-left: 12px;
    padding-left: 12px;
}

.region-info > dl > dd + dt::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 1px;
    height: 14px;
    background-color: #ccd2eb;
    transform: translateY(-50%);
}

.region-info > dl > dd::before, .info-current dd::before {
    display: inline-block;
    width: 11px;
    height: 13px;
    margin-right: 2px;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.region-info .economy dt {
    font-size: 16px;
}

.region-info .economy dd {
    font-family: "Noto Sans KR";
    font-weight: normal;
}

.region-info .economy dd b {
    font-family: Muli, sans-serif;
}

.region-info .economy .rise {
    font-size: 14px;
    color: #f35868;
}

.region-info .economy .fall {
    font-size: 14px;
    color: #8591b1;
}

.status01 {
    background-color: #99a3bc;
    border: 1px solid #7e849a;
}

.status02 {
    background-color: #bca799;
    border: 1px solid #a9998f;
}

.status03 {
    background-color: #cb7362;
    border: 1px solid #a86356;
}

.rise::before {
    content: "";
    vertical-align: 0;
    background-image: url(/res/img/component/icon_up-3e0ecd945884f9d31a1afc032c4bccd9.svg);
}

.fall::before {
    content: "";
    vertical-align: -2px;
    background-image: url(/res/img/component/icon_down-32dc17bada833c21e4d65ff3a3ffd17f.svg);
}

.compare-info {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 15px 0;
    border: solid 1px #e6eaf0;
    border-radius: 3px;
    background-color: #f3f6fb;
}

.region-box {
    position: relative;
}

.region-box:first-child {
    margin-left: 0;
}

/* .region-box:first-child::before{content:"vs";position:absolute;top:50%;right:-39px;height:24px;padding:0 8px;border-radius:15px;box-shadow:0 0 5px rgba(0,0,0,.2);color:#afb3bb;line-height:20px;font-family:Muli,sans-serif;font-size:16px;font-weight:bold;background-color:#fff;} */
.region-box {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    padding-top: 30px;
    margin-left: 20px;
}

.region-box h5 {
    position: absolute;
    top: 0;
    left: 50%;
    width: 130px;
    margin-top: 5px;
    font-size: 12px;
    text-align: center;
    transform: translateX(-50%);
}

.region-box dl {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    float: left;
    width: 85px;
    height: 85px;
    border-radius: 100%;
    background-color: #747d8d;
}

.region-box dl + dl {
    margin-left: 5px;
}

.region-box dl * {
    color: #fff;
    font-weight: 500;
}

.region-box dl dt {
    width: 100%;
    margin-bottom: 5px;
    padding: 0 3px 0 5px;
    font-size: 12px;
    overflow: hidden;
    white-space: pre;
    text-overflow: ellipsis;
    text-align: center;
}

.region-box dl dd {
    font-size: 16px;
}

.region-box dl dd span {
    font-family: Muli, sans-serif;
    font-weight: bold;
}

.population-info {
    padding-bottom: 5px;
}

.population-info dl {
    overflow: hidden;
    position: relative;
    padding: 0 10px;
}

.population-info dl > * {
    height: 30px;
    border-bottom: dashed 1px #d9e1ea;
    line-height: 30px;
}

.population-info dt {
    float: left;
    clear: both;
    width: 45%;
    padding-left: 10px;
    font-size: 14px;
}

.population-info dd {
    float: right;
    width: 55%;
    padding-right: 10px;
    font-size: 12px;
    text-align: right;
}

.population-info dd b {
    margin-right: 2px;
    color: #333;
    font-family: Muli, sans-serif;
    font-size: 15px;
}

.population-info dt::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: -4px;
    background-color: #666;
}

.population-info .icon-human::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_my_account.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_my_account.svg) 50%/contain no-repeat;
}

.population-info .icon-family::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_fav_apt_multi.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_fav_apt_multi.svg) 50%/contain no-repeat;
}

.population-info .icon-apt::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/icon_map_apt.svg) 50%/80% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/icon_map_apt.svg) 50%/80% no-repeat;
}

.population-info .icon-shop::before {
    mask: url(/res/img/component/icon_apt-5fcea08dc2e6ab679aaaf4a046ccf59e.svg) 50%/95% no-repeat;
    -webkit-mask: url(/res/img/component/icon_apt-5fcea08dc2e6ab679aaaf4a046ccf59e.svg) 50%/95% no-repeat;
}

.population-info .icon-member::before {
    mask: url(/res/img/component/icon_member-ab8a7ad7a4f21eadc9efe3d9894fee54.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_member-ab8a7ad7a4f21eadc9efe3d9894fee54.svg) 50%/contain no-repeat;
}

.population-info.single .icon-circle::before {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
    border-radius: 100%;
    background-color: var(--icon-circle-color);
}

.population-info.single .icon-circle.primary::before {
    background-color: var(--icon-circle-color);
}

.population-title {
    display: flex;
    align-content: center;
    height: 30px;
    border-bottom: solid 1px #d9e0f7;
    background-color: #f3f6fb;
}

.population-title span {
    display: inline-block;
    font-family: NotoSansR;
    font-size: 13px;
    text-align: center;
    line-height: 28px;
}

.population-title span:first-child {
    width: 40%;
}

.population-title span:last-child {
    width: 60%;
}

.population-info.single {
    border-top: solid 2px #666667;
}

.population-info.single dl {
    padding: 0;
}

.population-info.single dt {
    padding-left: 15px;
}

.population-info.single dd {
    padding-right: 15px;
}

.population-info.single dt.w50 {
    width: 50%;
}

.population-info.single dd.w50 {
    width: 50%;
}

.utility-info {
    position: relative;
    overflow: hidden;
    margin: 10px 0;
}

.utility-info dl > * {
    width: 33.333%;
    padding: 5px 0;
    font-size: 13px;
    text-align: center;
}

.utility-info dt {
    position: relative;
}

.utility-info dt::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    vertical-align: -2px;
    background-color: #666;
}

.utility-info dd {
    padding-top: 0;
    color: #666;
}

.utility-info dd b {
    font-family: Muli, sans-serif;
    font-size: 15px;
    font-weight: 700;
}

.utility-info dt:nth-child(3) {
    position: absolute;
    top: 0;
    left: 33.333%;
}

.utility-info dd:nth-child(4) {
    position: absolute;
    top: 28px;
    left: 33.333%;
}

.utility-info dt:nth-child(5) {
    position: absolute;
    top: 0;
    left: 66.666%;
}

.utility-info dd:nth-child(6) {
    position: absolute;
    top: 28px;
    left: 66.666%;
}

.utility-info dd + dt::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 50px;
    border-left: dashed 1px #d9e1ea;
}

.icon-calendar::before {
    mask: url(/res/img/component/icon_calendar-ebe3c49c89f42bb20e7e5185b31de11a.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_calendar-ebe3c49c89f42bb20e7e5185b31de11a.svg) 50%/contain no-repeat;
}

.icon-summer::before {
    mask: url(/res/img/component/icon_sun-11fe620c7e502fb59ea6e4f1a53ec6b0.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_sun-11fe620c7e502fb59ea6e4f1a53ec6b0.svg) 50%/contain no-repeat;
}

.icon-winter::before {
    mask: url(/res/img/component/icon_snow-f6e6218187b92297c34789db26078555.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_snow-f6e6218187b92297c34789db26078555.svg) 50%/contain no-repeat;
}

.provide {
    position: absolute;
    top: 0;
    right: 10px;
    font-size: 11px;
    line-height: 28px;
}

.provide.caution-text::before {
    content: "?";
    width: 14px;
    height: 14px;
    margin-right: 2px;
    font-size: 10px;
    line-height: 14px;
    vertical-align: 0;
    background-color: #8934fa;
}

.provide a {
    display: inline-block;
    color: #8934fa;
    text-decoration: underline;
    font-weight: 500;
}

.btn-history {
    padding: 5px;
    border: solid 2px #7080ad;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    background-color: #7080ad;
}

.btn-history:hover, .btn-history:active {
    border-color: #6274a4;
    background-color: #6274a4;
}

.btn-history::before {
    content: "";
    margin-right: 5px;
    background-color: #fff;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
}

.btn-history:hover::after, .btn-history:active::after {
    background-color: #fff;
}

.btn-compete {
    padding: 5px;
    border: solid 2px #698cd3;
    color: #698cd3;
    font-size: 14px;
    font-weight: 500;
    background-color: #fff;
    transition: .3s;
}

.btn-compete:hover, .btn-compete:active {
    color: #fff;
    background-color: #698cd3;
}

.btn-compete::after {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-left: 5px;
    vertical-align: -3px;
    background-color: #698cd3;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
}

.btn-compete:hover::after, .btn-compete:active::after {
    background-color: #fff;
}

.apt-title-area {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 95px;
    text-align: center;
    background: linear-gradient(90deg, #d7f2fd, #f4e9ee);
}

.apt-title-area > div {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
}

.apt-title-area > p {
    font-size: 13px;
    line-height: 130%;
}

.apt-title-area .apt-title {
    margin-bottom: 3px;
    padding-top: 15px;
}

.apt-title-area .apt-title h4 {
    max-width: 270px;
    color: #111;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apt-title-area .apt-title h4::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: -2px;
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/icon_map_apt.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/icon_map_apt.svg) 50%/contain no-repeat;
    background-color: #6f21a2;
}

.apt-title-area .apt-title span {
    text-indent: -9999px;
}

.apt-title-area .apt-address button {
    margin-left: 8px;
    color: #7080ad;
    font-size: 12px;
    font-weight: bold;
    transition: .3s;
}

.apt-title-area .apt-address button::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 3px;
    vertical-align: -1px;
    background-color: #7080ad;
    mask: url(/res/img/component/icon_exchange-ffabeea2974f3e5003de49d23bc3cb89.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_exchange-ffabeea2974f3e5003de49d23bc3cb89.svg) 50%/contain no-repeat;
    transition: .3s;
}

.apt-title-area .apt-address button:hover {
    color: #8934fa;
}

.apt-title-area .apt-address button:hover::before {
    background-color: #8934fa;
}

.apt-title-area .apt-address p {
    max-width: 250px;
    font-size: 13px;
    line-height: 130%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.apt-title-area [class^=star-] {
    margin-left: 3px;
}

.icon-share {
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: #7080ad;
    cursor: pointer;
    mask: url(/res/img/component/icon_share-791e7b9aff0fb567460293c5915dbe09.svg) 50%/70% no-repeat;
    -webkit-mask: url(/res/img/component/icon_share-791e7b9aff0fb567460293c5915dbe09.svg) 50%/70% no-repeat;
    transition: .3s;
}

.icon-share:hover {
    background-color: #8934fa;
}

.share-area {
    display: none;
    position: absolute;
    top: 62px;
    left: 10px;
    right: 10px;
    padding: 10px;
    border: solid 1px #d9e1ea;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    background-color: #fff;
    z-index: 1;
}

.share-area.active {
    display: block;
}

.apt-title .share-area .btn-sns {
    float: none;
}

.apt-title .share-area .btn-sns .sns > li {
    display: inline-block;
    float: none;
}

.apt-title .share-area p {
    padding-top: 0;
    padding-bottom: 10px;
    border-bottom: solid 1px #d9e1ea;
    color: #7080ad;
    font-weight: bold;
}

.sns-area-close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background-color: #7080ad;
    mask: url(/res/img/component/icon_box_close-d2b5c392dad82aaaffd3af6840399895.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_box_close-d2b5c392dad82aaaffd3af6840399895.svg) 50%/contain no-repeat;
}

.apt-title-area + .tab-area {
    margin-top: 70px !important;
}

.map-info .apt-detail {
    padding-bottom: 10px;
}

.map-info .apt-detail .apt-feature {
    width: 100%;
}

.map-info .apt-detail .apt-feature li {
    min-height: 30px;
    margin: 10px 0;
    padding-left: 60px;
    padding-right: 0;
}

.map-info .apt-detail .apt-feature li:before {
    left: 0;
    height: 30px;
    min-height: 30px;
}

.map-info .apt-detail .apt-feature li * {
    line-height: 120%;
}

.map-info .apt-detail .apt-feature li .label {
    font-size: 12px;
}

.map-info .apt-detail .apt-feature li p {
    height: auto;
    font-size: 13px;
}

.map-info .apt-detail .apt-feature li p * {
    font-size: 15px;
}

.map-info .apt-detail .apt-feature li p strong {
    margin-right: 3px;
}

.map-info .apt-detail {
    border-bottom: solid 1px #d9e1ea;
}

.map-info .apt-detail + .map-info-btns {
    margin-top: 15px;
}

.map-info .table-blue {
    border-top: solid 1px #d9e0f7;
}

.map-info .table-blue th {
    color: #50649c;
    border-color: #dee3eb;
    border-bottom: solid 2px #d9e0f7;
    background-color: #f0f3fc !important;
}

.map-info .table-blue th, .map-info .table-blue td {
    padding: 5px 1px;
    border-bottom: 1px solid #dee3eb;
    font-size: 13px;
}

.map-info .table-blue a {
    display: inline-block;
    padding: 0 3px;
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
}

.map-info .table-blue a:hover {
    color: #8934fa;
}

.map-info .table-blue td * {
    vertical-align: middle;
}

.map-info .table-blue span {
    font-weight: bold;
}

.map-info .table-blue b {
    margin-right: 2px;
    vertical-align: baseline;
    font-family: Muli, sans-serif;
}

.map-info .table-blue .fall::before, .map-info .table-blue .rise::before {
    display: inline-block;
    width: 11px;
    height: 13px;
    margin-right: 2px;
    vertical-align: -2px;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat;
}

.map-info .table-blue .fall {
    font-family: Muli, sans-serif;
    color: #8591b1;
}

.map-info .table-blue .rise {
    font-family: Muli, sans-serif;
    color: #f35868;
}

.map-info .table-blue .text-right {
    padding-right: 10px;
}

.map-info .table-blue .text-left {
    padding-left: 10px;
}

.map-info .tab-panel.apt-tab {
    position: static;
}

.map-info .title-area [class^=star-] {
    margin-left: 1px;
    vertical-align: bottom;
}

.map-info .title-area h4 > * {
    display: inline-block;
}

.apt-tab .subject {
    padding: 5px;
    border-radius: 18px;
    background-color: #f3f3f3;
}

.apt-tab .subject ul {
    overflow: hidden;
}

.apt-tab .subject li {
    float: left;
    width: calc(16.666% - 7px);
    padding: 5px 0;
    border-radius: 20px;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}

.apt-tab .subject li:hover {
    background-color: #fff;
    transition: .3s;
}

.apt-tab .subject .active, .apt-tab .subject .active:hover {
    color: #fff;
    background-color: #7080ad;
}

.apt-tab .subject [class^=btn-] {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
    margin-top: 3px;
    padding: 0;
    text-indent: -9999px;
}

.apt-tab .subject [class^=btn-]::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    background-color: #999;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
}

.apt-tab .subject .btn-prev::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.apt-tab .subject .btn-next {
    float: right;
}

.apt-tab .subject .btn-next::before {
    transform: translate(-50%, -50%) rotate(-90deg);
}

.apt-tab > .title-area {
    margin: 10px 0;
}

.no-price {
    display: flex;
    position: absolute;
    top: 156px;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
}

.no-price p, .no-info p {
    color: #a4aecb;
    font-size: 14px;
    text-align: center;
}

.no-price p::before {
    content: "";
    display: block;
    margin: 0 auto 15px auto;
    width: 50px;
    height: 50px;
    background-color: #a4aecb;
    mask: url(/res/img/component/no_data-00b38c0327437a51dd0c6fa4e33543c3.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/no_data-00b38c0327437a51dd0c6fa4e33543c3.svg) 50%/contain no-repeat;
}

.no-info {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
}

.table-blue.text-small th, .table-blue.text-small td {
    font-size: 11px;
}

.table-blue .active {
    background-color: rgba(124, 214, 207, .5);
}

.table-blue .active td {
    border-color: rgba(124, 214, 207, .8);
}

.table-blue .checking {
    justify-content: center;
}

.table-blue .checking .checkmark {
    margin: 0;
}

.table-blue .badge {
    position: relative;
}

.table-blue .badge::after {
    position: static;
    margin: 0 auto;
}

.table-blue .icon-edit {
    display: block;
    width: 16px;
    height: 16px;
    background-color: #0a2e4f;
    mask: url(/res/img/component/icon_edit-1a717b66e41ea86f6b6472e9a7f6c17f.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_edit-1a717b66e41ea86f6b6472e9a7f6c17f.svg) 50%/contain no-repeat;
    transition: .3s;
}

.table-blue .icon-edit:hover, .table-blue .icon-edit:active {
    background-color: #8934fa;
}

.left-tab {
    position: absolute;
    bottom: 10px;
    left: -29px;
}

.left-tab li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    margin-left: 3px;
    min-height: 60px;
    padding: 8px 5px;
    border-radius: 3px 0 0 3px;
    box-shadow: -2px 0 3px rgb(0, 0, 0, .1);
    color: #fff;
    font-size: 13px;
    line-height: 100%;
    text-align: center;
    word-break: break-all;
    background-color: #afb3bb;
    cursor: pointer;
    transition: .2s;
}

.left-tab li + li {
    margin-top: 1px;
}

.left-tab li:hover {
    color: #fff;
}

.left-tab li.active {
    width: 28px;
    margin-left: 0;
    color: #fff;
}

.left-tab li:first-child:hover, .left-tab li:first-child.active {
    background-color: #926fcd;
}

.left-tab li:nth-child(2):hover, .left-tab li:nth-child(2).active {
    background-color: #9086dc;
}

.left-tab li:nth-child(3):hover, .left-tab li:nth-child(3).active {
    background-color: #698cd3;
}

.left-tab li:nth-child(4):hover, .left-tab li:nth-child(4).active {
    background-color: #83abd6;
}

.left-tab li:nth-child(5):hover, .left-tab li:nth-child(5).active {
    background-color: #7080ad;
}

.left-tab.top {
    bottom: auto;
    top: 0;
}

.left-tab.top li {
    background-color: #8891a3;
}

/* .left-tab.top li:first-child{animation:attention 5s infinite 2s;} */
/* .left-tab.top li:first-child:hover,.left-tab.top li:active,.left-tab.top li.active{animation:none;} */

@keyframes attention {
    0%, 10%, 14%, 18% {
        transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transform: translate(0, 0);
    }
    5% {
        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        transform: translate(0, -10px);
    }
    12% {
        transition-timing-function: cubic-bezier(0.755, .050, .855, .060);
        transform: translate(0, -5px);
    }
    16% {
        transform: translate(0, -3px);
    }
}

.apt-detail-area .article {
    padding: 10px 0 0 0;
}

.apt-detail-area .article + .article {
    border-top: solid 1px #d9e1ea;
}

.apt-detail-area .article > div + div {
    margin-top: 10px;
}

.apt-detail-area .article.auction {
    padding-top: 5px;
}

.apt-detail-area .title-area {
    margin-bottom: 10px;
    border: 0;
}

.apt-detail-area .title-area .badge {
    display: inline-block;
    margin-left: 8px;
}

.apt-detail-area .title-area .badge::after {
    position: static;
}

.apt-detail-area .title-area button {
    position: absolute;
    top: 0;
    right: 0;
    height: 24px;
    padding: 0 7px;
    border: solid 1px #9086ee;
    border-radius: 3px;
    color: #9086ee;
    font-size: 12px;
    letter-spacing: -1px;
    transition: .3s;
}

.apt-detail-area .title-area button:hover {
    color: #fff;
    background-color: #9086ee;
}

.apt-detail-area .title-area .btn-history::after {
    width: 12px;
    height: 12px;
    vertical-align: -2px;
    transition: .3s;
}

.apt-detail-area .btn-naver {
    width: 100%;
    margin: 10px 0 0 0;
    line-height: 33px;
    border-radius: 0;
}

.apt-detail-area .btn-naver::before {
    position: static;
    display: inline-block;
    vertical-align: -1px;
}

.apt-detail-area .population-info {
    padding: 10px 0;
    border-top: solid 2px #666667;
    border-bottom: solid 1px #d9e1ea;
}

.apt-detail-area + .apt-detail {
    padding-top: 0;
}

.apt-detail-area + .apt-detail .pyeong {
    padding-top: 5px;
}

.clear {
    clear: both;
}

.info-detail, .info-detail > div {
    position: relative;
}

.info-detail > dl {
    clear: both;
    position: relative;
    overflow: hidden;
    padding: 10px 0;
    padding-left: 50px;
    cursor: pointer;
    transition: background-color .3s;
}

.info-detail > dl::before {
    position: absolute;
    top: 50%;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    text-align: center;
    color: #fff;
    line-height: 30px;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 45%;
    transform: translateY(-50%);
}

.info-detail > dl:hover, .info-detail > dl:active {
    background-color: #f9f9f9;
}

.info-detail > dl.subway::before {
    content: "";
    background-color: #d968f1;
    background-image: url(/res/img/component/icon_subway_white-858311d5e493054e915351fb67cc487d.svg);
}

.info-detail > dl.bus::before {
    content: "";
    background-color: #5f9dd5;
    background-image: url(/res/img/component/icon_bus_white-6d678dc06a13b624c44b1767fdb9f077.svg);
}

.info-detail > dl.baby::before {
    content: "어";
    background-color: #FFA8D5;
}

.info-detail > dl.yoo::before {
    content: "유";
    background-color: #83cd39;
}

.info-detail > dl.cho::before {
    content: "초";
    background-color: #ffc333;
}

.info-detail > dl.joong::before {
    content: "중";
    background-color: #ff971c;
}

.info-detail > dl.go::before {
    content: "고";
    background-color: #fe683d;
}

.info-detail > dl.company::before {
    content: "직";
    background-color: #3b91e6;
}

.info-detail > dl.company.under::before {
    background-color: #6f88c1;
}

.info-detail > dl.company.excess::before {
    background-color: #da139f;
}

.info-detail > dl.apt::before {
    content: "";
    background-color: #fff;
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/icon_map_apt.svg) 50%/45% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/icon_map_apt.svg) 50%/45% no-repeat;
    z-index: 1;
}

.info-detail > dl.apt::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #926fcd;
    transform: translateY(-50%);
}

.info-detail > dl.broker::before {
    content: "";
    background-color: #fff;
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/icon_map_apt.svg) 50%/45% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/icon_map_apt.svg) 50%/45% no-repeat;
    z-index: 1;
}

.info-detail > dl.broker::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    background-color: #926fcd;
    transform: translateY(-50%);
}

.info-detail > dl.mart::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/mart_1.png);
    background-size: 90%;
}

.info-detail > dl.mart.small::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/mart_0.png);
    background-size: 90%;
}

.info-detail > dl.store::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/convenience_1.png);
    background-size: 90%;
}

.info-detail > dl.bank::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/bank_i.png);
    background-size: 90%;
}

.info-detail > dl.bank.atm::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/bank_o.png);
    background-size: 90%;
}

.info-detail > dl.park::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/park.png);
    background-size: 90%;
}

.info-detail > dl.public.office1::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/office_1.png);
    background-size: 90%;
}
.info-detail > dl.public.office2::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/office_2.png);
    background-size: 90%;
}
.info-detail > dl.public.office3::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/office_3.png);
    background-size: 90%;
}
.info-detail > dl.public.office4::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/office_4.png);
    background-size: 90%;
}
.info-detail > dl.public.office5::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/office_5.png);
    background-size: 90%;
}
.info-detail > dl.public.office6::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/office_6.png);
    background-size: 90%;
}
.info-detail > dl.public.office7::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/office_7.png);
    background-size: 90%;
}

.info-detail > dl.hospital::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/hospital_1.png);
    background-size: 90%;
}
.info-detail > dl.hospital.small::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/hospital_2.png);
    background-size: 90%;
}

.info-detail > dl.business::before {
    content: "";
    background-color: #9086ee;
    background-image: url(/res/img/component/icon_bg_business-82dcfa80f7661b07320b592d510c54bc.svg);
    background-size: 65%;
}
.info-detail > dl.bigstore::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/big_store.png);
    background-size: 90%;
}
.info-detail > dl.station::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/railway_station.png);
    background-size: 90%;
}
.info-detail > dl.doroic::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/mapbox/png/doro_ic.png);
    background-size: 90%;
}

.info-detail > dl.active {
    background-color: #f0f3fc;
}

.info-detail > dl + dl {
    border-top: 1px dashed #ddd;
}

.info-detail > dl dt {
    margin-bottom: 5px;
    color: #222;
    font-weight: 500;
}

.info-detail > dl dt.baejung {
    margin: 0;
    color: inherit;
    font-size:13px;
    font-weight: normal;
}

.info-detail > dl dt span {
    color: #7080ad;
    font-size: 13px;
}

.info-detail > dl dd {
    position: relative;
    float: left;
    font-size: 13px;
    letter-spacing: -.5px;
}

.info-detail > dl dd b {
    font-weight: 500;
}

.info-detail > dl dd + dd {
    margin-left: 10px;
}

.info-detail > dl dd + dd::before {
    content: "/";
    position: absolute;
    top: 50%;
    left: -8px;
    transform: translateY(-50%);
}

.info-detail > dl + .btn-more {
    margin-top: 0;
    margin-bottom: 10px;
}

.info-detail > dl + .btn-more.close button::after {
    vertical-align: 0;
    transform: rotate(-180deg);
}

.info-detail .fit b {
    color: #8934fa;
}

.info-detail .clear {
    margin-left: 0;
}

.info-detail .clear::before {
    display: none;
}

.info-detail .gyung {
    overflow: hidden;
    cursor: pointer;
}

.info-detail .gyung:hover {
    background-color: #f7f7f7;
}

.info-detail .gyung .num {
    margin-bottom: 5px;
    color: #8934fa;
    font-size: 15px;
    font-weight: 500;
}

.info-detail .gong .num {
    margin-bottom: 5px;
    color: #8f55e2;
    font-size: 15px;
    font-weight: 500;
}

.info-detail .rank::before {
    content: "상승";
    display: block;
    position: absolute;
    top: 50%;
    left: 10px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    text-align: center;
    color: #fff;
    font-size: 13px;
    line-height: 30px;
    font-weight: bold;
    background-color: #7080ad;
    transform: translateY(-50%);
}

.info-detail .rank dt a i {
    vertical-align: top;
}

.info-detail .rank dt a:hover, .info-detail .rank dt a:active {
    color: #6a83df;
}

.info-detail .rank dd {
    line-height: 170%;
}

.info-detail .rank dd span {
    display: inline-block;
    width: 60px;
    margin-right: 2px;
    border: solid 1px #a9b2c7;
    border-radius: 18px;
    color: #50649c;
    font-size: 11px;
    font-weight: 500;
    line-height: 18px;
    text-align: center;
    letter-spacing: -1px;
}

.info-detail .rank dd b {
    font-weight: bold;
}

.info-detail .rank .rise {
    color: #dc3535;
}

.info-detail .rank .rise::before {
    display: none;
}

.info-detail .caution {
    padding-left: 10px;
    padding-top: 5px;
    padding-bottom: 10px;
    border-bottom: solid 2px #698cd3;
    color: #698cd3;
    font-size: 12px;
    font-weight: bold;
}

.info-detail .caution::before {
    content: "!";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 4px;
    border-radius: 100%;
    vertical-align: bottom;
    color: #fff;
    font-size: 11px;
    text-align: center;
    line-height: 15px;
    background-color: #698cd3;
}

/* .info-detail .rank .rise::after{content:"";display:inline-block;width:11px;height:13px; margin-left:2px;vertical-align:-1px;background:url(/res/img/component/icon_up-3e0ecd945884f9d31a1afc032c4bccd9.svg) 50%/contain no-repeat;} */
.info-detail > dl.apt-map {
    padding-left: 15px;
}

.info-detail > dl .btn-map {
    position: absolute;
    right: 50px;
    top: 50%;
    float: none;
    margin-left: 0;
    transform: translateY(-50%);
}

.info-detail > dl .btn-map-move {
    position: absolute;
    right: 15px;
    top: 50%;
    float: none;
    margin-left: 0;
    transform: translateY(-50%);
}

.info-detail > dl .btn-map::before, .info-detail > dl .btn-map-move::before {
    display: none;
}

.info-detail > dl .btn-map button {
    color: #8934fa;
    font-size: 11px;
    font-weight: bold;
}

.info-detail > dl .btn-map button::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    background-color: #8934fa;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg) 50%/contain no-repeat;
}

.info-detail > dl .btn-map-move button {
    color: #ff7240;
    font-size: 11px;
    font-weight: bold;
}

.info-detail > dl .btn-map-move button::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    background-color: #ff7240;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg) 50%/contain no-repeat;
}

.info-detail > dl .dt-bldg-nm {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: calc(100% - 80px);
}

.info-detail .btn-more {
    margin-top: 10px;
}

.info-detail .btn-more button {
    height: 35px;
    background-color: #f1f1f1;
    transition: .3s;
}

.info-detail .btn-more button:hover, .info-detail .btn-more button:active {
    color: #fff;
    background-color: #afb3bb;
}

.info-detail .btn-more button::after {
    transition: .3s;
}

.info-detail .btn-more button:hover::after, .info-detail .btn-more button:active::after {
    background-color: #fff;
}

.info-detail .unsold {
    margin-bottom: 10px;
    padding-top: 5px;
}

.info-detail .unsold + button {
    margin-bottom: 12px;
}

.info-detail .info-current {
    margin-top: 10px;
    padding: 10px;
}

.info-detail .info-current.no-margin {
    margin-top: -1px;
}

.info-detail .info-current .list-basic {
    margin: 0;
}

.info-detail .info-current li {
    color: #7080ad;
    font-size: 13px;
}

.info-detail .info-current li::before {
    top: 7px;
}

.info-detail .subject {
    margin-bottom: 10px;
}

.info-detail .btn-naver {
    margin-bottom: 10px;
}

.info-detail .icon-link {
    margin-left: 2px;
    background-color: #8934fa;
    background-image: none;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_blue.svg) center/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_blue.svg) center/16px no-repeat;
}

.info-detail .icon-pin {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: -2px;
    cursor: pointer;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg) 50%/contain no-repeat;
}

.map-info .info-detail .table-blue.text-right th {
    font-size: 12px;
    font-weight: 500;
}

.map-info .info-detail .table-blue.text-right td {
    text-align: right;
    padding-right: 10px;
}

.map-info .info-detail h5 {
    border-top: solid 1px #e9e7ff;
    padding: 5px 10px;
}

.map-info .info-detail h5 + p {
    line-height: 28px;
}

.info-lot-solid {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #e9e7ff;
}

.info-lot-solid span {
    font-weight: 500;
    letter-spacing: -1px;
}

.info-lot-solid span + span {
    margin-left: 5px;
}

.info-lot-solid span + span::before {
    content: "/";
    display: inline-block;
    margin-right: 5px;
    color: #7e81a6;
    font-weight: normal;
}

.info-lot-solid span small {
    color: #7e81a6;
    font-weight: normal;
}

.info-lot-solid .btn {
    height: 30px;
    margin-left: 10px;
    padding: 0 10px;
    font-size: 11px;
}

.info-current {
    padding: 10px 15px;
    border: 1px solid #d9e0f7;
}

.info-current dl {
    clear: both;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.info-current dl > * {
    line-height: 36px;
}

.info-current dl > *:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    border-top: solid 1px #eee;
}

.info-current dt {
    width: 40%;
    font-size: 14px;
}

.info-current dt::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 6px;
    vertical-align: -3px;
    background-color: #8934fa;
}

.info-current dd {
    width: 30%;
    text-align: right;
}

.info-current dd b {
    font-family: Muli, sans-serif;
}

.info-current dd + dd {
    width: calc(30% - 10px);
    padding-left: 10px;
    font-family: Muli, sans-serif;
    font-size: 13px;
    font-weight: bold;
    text-align: left;
}

.info-current .rise {
    color: #f35868;
}

.info-current .fall {
    color: #8591b1;
}

.retail::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_wallet.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_wallet.svg) 50%/16px no-repeat;
}

.service::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_service.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_service.svg) 50%/18px no-repeat;
}

.sports::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_football.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_football.svg) 50%/16px no-repeat;
}

.hotel::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_hotel.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_hotel.svg) 50%/17px no-repeat;
}

.food::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_food.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_food.svg) 50%/18px no-repeat;
}

.property::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_house.svg) 50%/14px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_house.svg) 50%/14px no-repeat;
}

.education::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_book.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_book.svg) 50%/17px no-repeat;
}

.game::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_game.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_game.svg) 50%/16px no-repeat;
}

.science::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_rocket.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_rocket.svg) 50%/17px no-repeat;
}

.health_care::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_health.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_health.svg) 50%/17px no-repeat;
}

.lease::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_lease.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_lease.svg) 50%/17px no-repeat;
}

.game::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_game.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_game.svg) 50%/16px no-repeat;
}


.legend-pyeong dl {
    overflow: hidden;
    margin-bottom: 10px;
}

.legend-pyeong dl > * {
    display: inline-block;
    font-size: 13px;
    vertical-align: middle;
}

.legend-pyeong dt {
    width: 12px;
    height: 12px;
    margin-right: 2px;
    border-radius: 100%;
    text-indent: -9999px;
    background-color: #7080ad;
}

.legend-pyeong dd + dt {
    margin-left: 20px;
}

.legend-pyeong dt.being {
    background-color: #ff6c00;
}

.legend-pyeong dd {
    color: #7080ad;
}

.legend-pyeong dd.being {
    color: #ff6c00;
}

.option-pyeong {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

.option-pyeong button {
    position: relative;
    width: calc(20% + 1px);
    height: calc(30px + 1px);
    margin-left: -1px;
    margin-top: -1px;
    border: 1px solid #d9e0f7;
    color: #7080ad;
    font-size: 14px;
    background-color: #f3f6fb;
    cursor: pointer;
}

.option-pyeong .active {
    color: #fff;
    border-color: #7080ad;
    background-color: #7080ad;
}

.option-pyeong .being {
    color: #ff6c00;
}

.option-pyeong .being.active {
    color: #fff;
    border-color: #ff6c00;
    background-color: #ff6c00;
}

.map-legend-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 80px;
    left: 75px;
    width: 100px;
    height: 100px;
    border-radius: 100%;
    background-color: rgba(143, 85, 226, .7);
    z-index: 12;
}

.map-legend-circle > ul > li {
    position: relative;
    color: #fff;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    letter-spacing: -.5px;
    text-shadow: -2px 0 #4c39a3, 0 2px #4c39a3, 2px 0 #4c39a3, 0 -2px #4c39a3;
}

.map-legend-circle > ul > li:first-child {
    font-size: 16px;
    line-height: 120%;
}

.map-legend-circle > ul > li:nth-child(2) {
    margin: 5px 0;
}

.map-legend-circle > ul > li:last-child {
    font-size: 13px;
}

.map-legend-circle > ul > li span {
    display: inline-block;
    font-size: 14px;
    cursor: pointer;
}

.map-legend-circle > ul > li span::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    vertical-align: baseline;
    background: url(/res/img/component/icon_arrow03_up_white-74ac44f1258f4c3287a80a6f9f4d1104.svg) 50%/contain no-repeat;
    transform: rotate(-180deg);
    transition: .3s;
}

.map-legend-circle > ul > li span.active::after {
    transform: rotate(0);
}

.map-legend-circle > ul > li ul {
    display: none;
    position: absolute;
    top: 20px;
    left: 50%;
    right: 0;
    min-width: 100px;
    overflow: hidden;
    border: solid 1px #8f55e2;
    background-color: #fff;
    transform: translateX(-50%);
    z-index: 1;
}

.map-legend-circle > ul > li li {
    padding: 0 5px;
    color: #747d8d;
    font-size: 12px;
    text-align: left;
    letter-spacing: -.5px;
    text-shadow: none;
    cursor: pointer;
}

.map-legend-circle > ul > li li:hover {
    color: #fff;
    background-color: #9086dc;
}

.map-legend-circle > ul:hover span::after {
    transform: rotate(0);
}

.comparer.location {
    min-height: 58px;
    padding-left: 15px;
}

.marker-option.left {
    position: absolute;
    top: 80px;
    left: 75px;
    right: auto;
    bottom: auto;
    z-index: 11;
}

.marker-option.left.location {
    top: 220px;
}

.marker-option.left.location .map-pin.apt.option > .option-bt span {
    min-width: 60px;
}

.marker-option.location .map-pin.apt.option span {
    cursor: default;
}

.marker-option.location .map-pin.apt.option span::after {
    display: none;
}

.map-legend-list {
    position: absolute;
    top: 200px;
    left: 75px;
    width: 120px;
    border-radius: 5px;
    background-color: rgba(76, 57, 163, .8);
    transition: .3s;
    z-index: 11;
}

.map-legend-list.fold {
    left: -55px;
}

.legend-title * {
    color: #fff;
}

.legend-title p {
    padding: 10px;
    border-bottom: solid 1px rgba(255, 255, 255, .3);
    text-align: center;
}

.legend-title span {
    position: relative;
    display: block;
    margin: 10px 5px 5px 5px;
    padding: 3px 10px;
    border-radius: 3px;
    font-size: 13px;
    font-weight: 500;
    background-color: rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: .3s;
}

.legend-title span:hover, .legend-title span.active {
    background-color: rgba(0, 0, 0, .5);
}

.legend-title span::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    right: 10px;
    width: 9px;
    height: 6px;
    background-color: #fff;
    transform: translateY(-50%);
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
}

.legend-title span.active::after {
    transform: translateY(-50%) rotate(180deg);
}

.legend-title ul {
    display: none;
    position: absolute;
    top: 70px;
    left: 5px;
    right: 5px;
    padding: 5px 0;
    border: solid 1px #8f55e2;
    border-radius: 3px;
    background-color: #fff;
}

.legend-title li {
    padding: 2px 0;
    color: #747d8d;
    font-size: 13px;
    text-align: center;
    cursor: pointer;
}

.legend-title li:hover {
    color: #fff;
    background-color: #9086dc;
}

.legend-title button {
    position: absolute;
    top: 0;
    left: 0;
    width: 30px;
    height: 37px;
    font-size: 0;
    line-height: 0;
    color: transparent;
}

.legend-title button::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 5px;
    width: 12px;
    height: 12px;
    transform: rotate(90deg) translateX(-60%);
    transition: .3s;
    background-color: #fff;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
}

.legend-title button:hover::before {
    left: 0;
}

.map-legend-list.fold .legend-title button {
    left: auto;
    right: -23px;
    width: 23px;
    border-radius: 0 20px 20px 0;
    background-color: rgba(76, 57, 163, .8);
}

.map-legend-list.fold .legend-title button::before {
    left: 4px;
    transform: translateY(-50%) rotate(-90deg);
}

.map-legend-list.fold .legend-title button:hover::before {
    left: 8px;
}

.legend-list {
    margin: 3px;
    padding: 8px;
    background-color: #fff;
}

.legend-list li {
    font-size: 12px;
    line-height: 150%;
    font-weight: 500;
}

.legend-list li::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    margin-right: 5px;
}

.map-legend-list.location {
    top: 320px;
}

.map-legend-list.location .legend-title span {
    cursor: default;
}

.map-legend-list.location .legend-title span::after {
    display: none;
}

.map-legend-list.location .legend-title span:hover, .map-legend-list.location .legend-title span.active {
    background-color: rgba(0, 0, 0, .3);
}

.map-legend-list.decrepit {
    top: 212px;
    width: 125px;
}

.map-legend-list.decrepit .legend-decrepit dd {
    color: #fff;
}

.legend-decrepit dt {
    position: relative;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: bold;
}

.legend-decrepit dd {
    padding: 2px;
    font-size: 11px;
    text-align: center;
    font-weight: 500;
}

.legend-decrepit dd + dd {
    margin-top: 2px;
}

.legend-decrepit dd + dt {
    margin-top: 10px;
    padding-top: 10px;
    border-top: solid 1px #ddd;
}

.legend-decrepit .icon-tips::after {
    width: 14px;
    height: 14px;
    margin-left: 2px;
    line-height: 14px;
    font-size: 10px;
}

.legend-decrepit .tips-box {
    top: 0;
    left: 112px;
    right: auto;
    bottom: auto;
    width: 200px;
}

.legend-decrepit .tips-box p {
    padding-top: 10px;
    font-size: 12px;
    font-weight: normal;
}

.legend-decrepit .tips-box p + h6 {
    margin-top: 5px;
}

.legend-decrepit .tips-box h5 {
    margin-bottom: 15px;
}

.legend-decrepit .tips-box h6 {
    height: auto;
    margin-top: 0;
    padding-left: 15px;
    font-size: 14px;
    font-weight: bold;
    line-height: 100%;
}

.legend-decrepit .tips-box i {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 5px;
    border-radius: 100%;
    vertical-align: -1px;
}

.legend-quintile li:first-child {
    color: #ed6c69;
}

.legend-quintile li:first-child::before {
    background-color: #ed6c69;
}

.legend-quintile li:nth-child(2) {
    color: #e68035;
}

.legend-quintile li:nth-child(2)::before {
    background-color: #e68035;
}

.legend-quintile li:nth-child(3) {
    color: #fbca4d;
}

.legend-quintile li:nth-child(3)::before {
    background-color: #fbca4d;
}

.legend-quintile li:nth-child(4) {
    color: #5ecda2;
}

.legend-quintile li:nth-child(4)::before {
    background-color: #5ecda2;
}

.legend-quintile li:nth-child(5) {
    color: #80abd7;
}

.legend-quintile li:nth-child(5)::before {
    background-color: #80abd7;
}

.legend-quintile li:nth-child(6) {
    color: #999999;
}

.legend-quintile li:nth-child(6)::before {
    background-color: #999999;
}

.legend-price li:first-child {
    color: #ed6c69;
}

.legend-price li:first-child::before {
    background-color: #ed6c69;
}

.legend-price li:nth-child(2) {
    color: #e68035;
}

.legend-price li:nth-child(2)::before {
    background-color: #e68035;
}

.legend-price li:nth-child(3) {
    color: #fbca4d;
}

.legend-price li:nth-child(3)::before {
    background-color: #fbca4d;
}

.legend-price li:nth-child(4) {
    color: #5ecda2;
}

.legend-price li:nth-child(4)::before {
    background-color: #5ecda2;
}

.legend-price li:nth-child(5) {
    color: #80abd7;
}

.legend-price li:nth-child(5)::before {
    background-color: #80abd7;
}

.legend-ent li:first-child {
    color: #ed6c69;
}

.legend-ent li:first-child::before {
    background-color: #ed6c69;
}

.legend-ent li:nth-child(2) {
    color: #fbca4d;
}

.legend-ent li:nth-child(2)::before {
    background-color: #fbca4d;
}

.legend-ent li:nth-child(3) {
    color: #5ecda2;
}

.legend-ent li:nth-child(3)::before {
    background-color: #5ecda2;
}

.legend-ent li:nth-child(4) {
    color: #80abd7;
}

.legend-ent li:nth-child(4)::before {
    background-color: #80abd7;
}

.legend-unsold li:first-child {
    color: #ed6c69;
}

.legend-unsold li:first-child::before {
    background-color: #ed6c69;
}

.legend-unsold li:nth-child(2) {
    color: #fbca4d;
}

.legend-unsold li:nth-child(2)::before {
    background-color: #fbca4d;
}

.legend-unsold li:nth-child(3) {
    color: #80abd7;
}

.legend-unsold li:nth-child(3)::before {
    background-color: #80abd7;
}

.legend-year li:first-child {
    color: #f9b921;
}

.legend-year li:first-child::before {
    background-color: #f9b921;
}

.legend-year li:nth-child(2) {
    color: #7dc13a;
}

.legend-year li:nth-child(2)::before {
    background-color: #7dc13a;
}

.legend-year li:nth-child(3) {
    color: #4d6bd9;
}

.legend-year li:nth-child(3)::before {
    background-color: #4d6bd9;
}

.legend-year li:nth-child(4) {
    color: #8f55e2;
}

.legend-year li:nth-child(4)::before {
    background-color: #8f55e2;
}

.legend-year li:nth-child(5) {
    color: #98806c;
}

.legend-year li:nth-child(5)::before {
    background-color: #98806c;
}

.legend-year li:nth-child(6) {
    color: #5e6376;
}

.legend-year li:nth-child(6)::before {
    background-color: #5e6376;
}

.legend-year li:nth-child(7) {
    color: #999999;
}

.legend-year li:nth-child(7)::before {
    background-color: #999999;
}

.legend-redevelop li:first-child {
    color: #83abd6;
}

.legend-redevelop li:first-child::before {
    background-color: #83abd6;
}

.legend-redevelop li:nth-child(2) {
    color: #ecb751;
}

.legend-redevelop li:nth-child(2)::before {
    background-color: #ecb751;
}

.legend-redevelop li:nth-child(3) {
    color: #ec6969;
}

.legend-redevelop li:nth-child(3)::before {
    background-color: #ec6969;
}

.legend-work li:first-child {
    color: #6f88c1;
}

.legend-work li:first-child::before {
    background-color: #6f88c1;
}

.legend-work li:nth-child(2) {
    color: #3b91e6;
}

.legend-work li:nth-child(2)::before {
    background-color: #3b91e6;
}

.legend-work li:nth-child(3) {
    color: #da139f;
}

.legend-work li:nth-child(3)::before {
    background-color: #da139f;
}

.legend-decrepit dd:nth-child(2) {
    background-color: #ffb72f;
}

.legend-decrepit dd:nth-child(3) {
    background-color: #ec6969;
}

.legend-decrepit dd:nth-child(5) {
    background-color: #96c5c6;
}

.legend-decrepit dd:nth-child(6) {
    background-color: #a2badd;
}

.legend-decrepit dd:nth-child(8) {
    background-color: #999;
}

.legend-3d li:first-child {
    color: #f9b921;
}

.legend-3d li:first-child::before {
    background-color: #f9b921;
}

.legend-3d li:nth-child(2) {
    color: #7dc13a;
}

.legend-3d li:nth-child(2)::before {
    background-color: #7dc13a;
}

.legend-3d li:nth-child(3) {
    color: #4d6bd9;
}

.legend-3d li:nth-child(3)::before {
    background-color: #4d6bd9;
}

.legend-3d li:nth-child(4) {
    color: #98806c;
}

.legend-3d li:nth-child(4)::before {
    background-color: #98806c;
}

.remote-btn-area {
    position: absolute;
    bottom: 10px;
    left: -80px;
}

.btn-remote {
    width: 45px;
    height: 55px;
    padding-top: 36px;
    border: solid 1px rgba(137, 52, 250, .5);
    border-radius: 5px;
    color: #8934fa;
    font-size: 10px;
    font-weight: bold;
    background-color: #fff;
    transition: .3s;
}

.btn-remote:hover {
    border-color: #8934fa;
}

.btn-remote::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 50%;
    width: 34px;
    height: 34px;
    mask: url(/res/img/component/icon_remote-50b98a34387b46e58ea72b4fd79f4127.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_remote-50b98a34387b46e58ea72b4fd79f4127.svg) 50%/contain no-repeat;
    background-color: #8934fa;
    transform: translateX(-50%);
}

.btn-remote.active {
    border-color: #8934fa;
    box-shadow: 0 0 5px rgba(137, 52, 250, .9);
    color: #fff;
    background: linear-gradient(45deg, #303f9f, #7b1fa2);
}

.btn-remote.active::before {
    background-color: #fff;
}

.remote-area {
    display: none;
    position: absolute;
    top: 80px;
    right: 385px;
    width: auto;
    z-index: 100;
    border: 1px solid #8934fa;
    border-radius: 5px;
    background-color: #fff;
}

.remote-area.bottom {
    position: fixed;
    top: auto;
    bottom: 10px;
}

.remote-area.active {
    display: block;
}

.remote-area .title {
    padding: 8px 15px;
    line-height: 30px;
    background: linear-gradient(45deg, #303f9f, #7b1fa2);
}

.remote-area .title h4 {
    color: #fff;
}

.remote-area .btn-modal-close {
    top: 5px;
    right: 5px;
    font-size: 0;
    line-height: 0;
    color: transparent;
}

.remote-area .list {
    max-height: 550px;
    overflow-y: auto;
    border-radius: inherit;
    transition: all .5s;
}

.remote-area .list.remote {
    min-width: 300px;
}

.remote-area .list::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.remote-area .list.fold {
    max-height: 0;
}

.remote-area .icon-reset {
    margin-left: 10px;
    border-radius: 100%;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background-color: #fff;
    transition: .3s;
}

.remote-area .icon-reset:hover {
    background-color: #8934fa;
    background-image: url(/res/img/common/icon_reset_white-975c81a7abeb814407f2f7b9040baf86.svg);
}

.remote-area .map-category .flex-default li {
    font-size: 15px;
}

.remote-area .depth-set {
    display: flex;
    flex-flow: row nowrap;
}

.remote-area .depth-set.with-icon-add ul {
    flex: 1;
}

.remote-area .depth-set.with-icon-add li button {
    padding-left: 0;
    text-align: center;
}

.remote-area .depth-set.with-icon-add li .icon-add + button {
    padding-left: 35px;
    text-align: left;
}

.remote-area .depth-set.with-icon-add li .icon-add {
    top: 2px;
    width: 35px;
}

.remote-area .depth-set.with-icon-add.select-apt ul:not(.depth-4):not(.depth-5) > li .icon-add {
    display: none;
}

.remote-area .depth-set.with-icon-add.select-apt ul:not(.depth-4):not(.depth-5) > li button {
    padding-left: 15px;
}

.remote-area .comparer {
    margin-bottom: 0;
    border-bottom: 0;
}

.remote-area button.fold {
    position: absolute;
    left: 50%;
    bottom: -20px;
    width: 40px;
    height: 20px;
    border-radius: 0 0 20px 20px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background-color: rgba(76, 57, 163, .8);
    transform: translateX(-50%);
}

.remote-area button.fold::before {
    content: "";
    display: block;
    position: relative;
    top: 0;
    width: 12px;
    height: 12px;
    margin: 0 auto;
    transition: .3s;
    transform: rotate(180deg);
    background-color: #fff;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
}

.remote-area button.fold:hover::before {
    top: -3px;
}

.remote-area button.fold.open::before {
    top: -3px;
    transform: rotate(0);
}

.remote-area button.fold.open:hover::before {
    top: 0;
}

.remote-area .tab-panel {
    top: 43px;
}

.repeat-date {
    width: 280px;
}

.list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 15px;
    background-color: #f3f6fb;
}

.list-head h5 {
    position: relative;
    font-size: 15px;
}

.title-bullet {
    padding-left: 10px;
}

.title-bullet::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background-color: #712cce;
    transform: translateY(-50%);
}

.compare-set {
    border-top: solid 1px #dadce0;
    padding: 10px;
}

.compare-set li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px;
    color: #673ab7;
    font-size: 14px;
    font-weight: 500;
}

.compare-set li + li {
    border-top: solid 1px #eee;
}

.compare-btns {
    padding: 10px;
    border-color: #dadce0;
}

.compare-btns button {
    flex: 1;
    margin-left: 0;
}

.compare-btns button + button {
    margin-left: 5px;
}

.compare-set.info-detail {
    border: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}

.compare-set.info-detail .region::before, .compare-set.info-detail .region dd:last-child::before {
    display: none;
}

.compare-set.info-detail .region dd:last-child {
    position: absolute;
    top: 50%;
    left: 10px;
    margin: 0;
    transform: translateY(-50%);
}

.compare-set.info-detail .icon-compare-purple {
    width: 30px;
    height: 30px;
    margin: 0;
}

.no-list {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: 15px;
}

.no-list p {
    margin-bottom: 15px;
    padding: 0 20px;
    font-size: 14px;
    text-align: center;
    word-break: keep-all;
    line-height: 130%;
}

.no-list button {
    width: 60px;
    height: 60px;
    padding-top: 30px;
    border: solid 1px #a9b2c7;
    border-radius: 10px;
    color: #8934fa;
    letter-spacing: -1px;
}

.no-list .btn-radius {
    background-size: 45%;
    background-position: 50% 6px;
    background-repeat: no-repeat;
    transition: .3s;
}

.no-list .btn-radius:hover, .no-list .btn-radius:active, .no-list .btn-radius.active {
    color: #fff;
    border-color: #8934fa;
    background-color: #8934fa;
    background-image: url(/res/img/component/icon_radius_white-ec7354270242acb440df28b13b6b61a0.svg);
}

.dropdown.map {
    flex: 1;
    height: 50px;
}

.dropdown.map .dropdown-select {
    flex-flow: row wrap;
    justify-content: flex-start;
    height: 48px;
    padding: 0 18px 0 8px;
}

.dropdown.map > .dropdown-select:after {
    right: 10px;
}

.dropdown.map .dropdown-select > span {
    display: block;
    font-weight: bold;
}

.dropdown.map .dropdown-select > ins {
    display: block;
    width: 100%;
    margin-bottom: -10px;
    margin-left: 0;
    color: #747d8d;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}

.dropdown.map .dropdown-menu {
    z-index: 12;
}

.dropdown.map .dropdown-menu > li.grouping {
    padding-left: 18px;
}

.dropdown.map.first {
    flex: .7;
}

.dropdown.map.second {
    flex: .9;
}

.grouping.tit {
    position: relative;
    margin-top: 24px;
}

.grouping.tit::before {
    display: block;
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    padding: 4px 10px;
    color: #333;
    font-size: 13px;
    font-weight: 500;
}

.grouping.cost {
    background-color: rgba(143, 85, 226, .05);
}

.grouping.cost:hover, .marker-option.left .grouping.cost:hover {
    background-color: rgba(143, 85, 226, .1) !important;
}

.grouping.sale {
    background-color: rgba(105, 140, 211, .1);
}

.grouping.sale:hover, .marker-option.left .grouping.sale:hover {
    background-color: rgba(105, 140, 211, .15) !important;
}

.grouping.etc {
    background-color: rgba(0, 0, 0, .05);
}

.grouping.etc:hover, .marker-option.left .grouping.etc:hover {
    background-color: rgba(0, 0, 0, .07) !important;
}

.grouping.tit.cost::before {
    content: "시세";
    color: #8f55e2;
    background-color: rgba(143, 85, 226, .2);
}

.grouping.tit.sale::before {
    content: "매물";
    color: #698cd3;
    background-color: rgba(105, 140, 211, .2);
}

.grouping.tit.etc::before {
    content: "기타";
    color: #888;
    background-color: rgba(0, 0, 0, 0.1);
}

.marker-option.left .grouping:hover {
    color: #747d8d !important;
}

.marker-option.left .grouping.tit {
    margin-top: 20px;
}

.marker-option.left .grouping.tit::before {
    top: -20px;
    padding: 0 5px;
    font-size: 11px;
    line-height: 20px;
}

.map-legend-circle .grouping {
    padding: 0 10px 0 15px;
}

.map-legend-circle .grouping.tit {
    margin-top: 20px;
}

.map-legend-circle .grouping.tit::before {
    top: -20px;
    padding: 0 5px;
    line-height: 20px;
    font-size: 12px;
}

.map-legend-circle .grouping:hover {
    color: #747d8d;
}

.btn-center-close {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.btn-center-close button {
    width: 40px;
    height: 20px;
    border-radius: 0 0 20px 20px;
    border: solid 1px #d9e1ea;
    border-top: 0;
    font-size: 0;
    line-height: 0;
    color: transparent;
    background-color: #f3f6fb;
    transition: .3s;
}

.btn-center-close button::before {
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    margin: -1px auto 0 auto;
    background-color: #747d8d;
    mask: url(/res/img/component/icon_close-4ebc31a122220ca7144df216d7301860.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_close-4ebc31a122220ca7144df216d7301860.svg) 50%/contain no-repeat;
    transition: .3s;
}

.btn-center-close button:hover {
    border-color: #8934fa;
    background-color: #8934fa;
}

.btn-center-close button:hover::before {
    border-color: #8934fa;
    background-color: #fff;
}

.switch-radio.average {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: calc(100% - 180px);
    height: 10px;
    border-radius: 5px;
    margin: 35px 0 10px 35px;
}

.switch-radio.average::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 10px;
    background-color: #afb3bb;
    transform: translateX(-50%);
}

.switch-radio.average .switch-label {
    width: 70px;
    height: 60px;
    margin-top: -20px;
    color: #747d8d;
    font-weight: bold;
}

.switch-radio.average .switch-input:checked + .switch-label { /* color:#a98be6; */
    color: #9086ee;
}

.switch-radio.average .switch-input.left + .switch-label {
    margin-left: -25px;
}

.switch-radio.average .switch-input.right + .switch-label {
    margin-right: -25px;
}

.switch-radio.average .switch-toggle {
    top: -5px;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #9086ee;
    transition: left .25s cubic-bezier(.4, .0, .2, 1);
    z-index: 5;
}

.switch-radio.average .right:checked ~ .switch-toggle {
    left: calc(100% - 20px);
    border-radius: 100%;
}

.switch-radio.average .switch-label::before {
    content: "";
    display: block;
    position: absolute;
    top: 40px;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: #e3e7ec;
    transform: translate(-50%, -50%);
    z-index: 1;
    transition: .3s;
}

.switch-radio.average .switch-label:hover::before {
    background-color: #afb3bb;
}

.average-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    padding: 0 10px;
    transform: translateY(-50%);
}

.sub-btns .average-btn {
    font-size: 13px;
}

.options .sub-btns {
    margin-top: 0;
}

.sub-btns {
    position: relative;
    width: 100%;
    border: solid 1px #dee3eb;
    padding: 7px;
    background-color: #fff;
}

.sub-btns button {
    color: #9086ee;
    font-size: 14px;
    background-color: #f0f3fc;
}

.big-btns button {
    height: 50px;
    font-weight: 500;
}

.big-btns button small {
    display: block;
    font-weight: normal;
}

.table-gray {
    width: 100%;
}

.table-gray th, .table-gray td {
    padding: 6px 5px;
    font-size: 13px;
    text-align: center;
}

.table-gray th {
    color: #50649c;
    font-weight: 500;
    letter-spacing: -0.6px;
    border-right: solid 1px #d9e0f7;
    border-bottom: solid 1px #d9e0f7;
    background-color: #f0f3fc;
}

.table-gray td {
    border-right: solid 1px #eef0f9;
    border-bottom: solid 1px #eef0f9;
}

.table-gray th:last-child, .table-gray td:last-child {
    border-right: 0;
}

.table-gray tr:hover, .table-gray tr:focus, .table-gray tr:active, .table-gray tr.active {
    background-color: #ffeacd;
    cursor: pointer;
}

.table-gray tr:hover td, .table-gray tr:focus td, .table-gray tr:active td, .table-gray tr.active td {
    border-color: #ffe0b5;
}

.remote-btns {
    padding: 10px 0;
    text-align: center;
}

.remote-btns button {
    width: 60px;
    height: 30px;
    margin: 0;
    padding: 0;
    vertical-align: middle;
    color: #50649c;
    font-size: 13px;
    line-height: 30px;
    transition: .2s;
}

.remote-btns button:hover {
    background-color: #fff;
}

.remote-btns button + button {
    margin-left: 5px;
}

.remote-btns button::before, .remote-btns button::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    vertical-align: baseline;
    background-color: #50649c;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    transition: .2s;
}

.remote-btns button:hover {
    color: #7b1fa2;
}

.remote-btns button:hover::before, .remote-btns button:hover::after {
    background-color: #8934fa;
}

.remote-btns .btn-prev::before {
    margin-right: 3px;
    transform: rotate(90deg);
}

.remote-btns .btn-prev::after, .remote-btns .btn-next::before {
    display: none;
}

.remote-btns .btn-next::after {
    margin-left: 3px;
    transform: rotate(-90deg);
}

[data-tooltip-text] {
    position: relative;
}

[data-tooltip-text]::before {
    content: "";
    display: block;
    overflow: hidden;
    position: absolute;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: .3s ease-in-out
}

[data-tooltip-text]:hover::before {
    visibility: visible;
    opacity: 1;
}

[data-tooltip-text]::after {
    content: attr(data-tooltip-text);
    display: block;
    overflow: hidden;
    position: absolute;
    min-width: 120px;
    max-width: 200px;
    padding: 10px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .2);
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    white-space: pre-line;
    text-align: justify;
    background-color: rgba(0, 0, 0, .8);
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transition: .3s ease-in-out;
}

[data-tooltip-text]:hover::after {
    visibility: visible;
    opacity: 1;
}

[data-tooltip-direction=bottom]::before {
    left: 50%;
    transform: translateX(-50%);
    bottom: -5px;
    border-bottom: 7px solid rgba(0, 0, 0, .8);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 0;
}

[data-tooltip-direction=bottom]:hover::before {
    bottom: -8px;
}

[data-tooltip-direction=bottom]::after {
    top: 43px;
    left: 50%;
    transform: translateX(-50%);
}

[data-tooltip-direction=bottom]:hover::after {
    top: 44px;
}

[data-tooltip-direction=left]::before {
    top: 50%;
    transform: translateY(-50%);
    left: -7px;
    border-bottom: 7px solid transparent;
    border-left: 7px solid rgba(0, 0, 0, .8);
    border-right: 0;
    border-top: 7px solid transparent;
}

[data-tooltip-direction=left]:hover::before {
    left: -10px;
}

[data-tooltip-direction=left]::after {
    left: -227px;
    top: 50%;
    transform: translateY(-50%);
}

[data-tooltip-direction=left]:hover::after {
    left: -230px;
}

[data-tooltip-direction=top]::before {
    left: 50%;
    transform: translateX(-50%);
    top: -7px;
    border-top: 7px solid rgba(0, 0, 0, .8);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 0;
}

[data-tooltip-direction=top]:hover::before {
    top: -10px;
}

[data-tooltip-direction=top]::after {
    bottom: calc(100% - -7px);
    left: 50%;
    transform: translateX(-50%);
}

[data-tooltip-direction=top]:hover::after {
    bottom: calc(100% - -10px);
}

.top-filter {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    position: fixed;
    top: -65px;
    left: 65px;
    right: 350px;
    height: 65px;
    border-bottom: solid 1px #d9d9d9;
    background-color: #fff;
    transition: .3s;
}

.top-filter .btn-map-filter {
    color: #333;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: .3s;
}

.top-filter .btn-map-filter::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    vertical-align: -3px;
    background-color: #8934fa;
}

.top-filter .btn-map-filter b {
    color: #8934fa;
}

.top-filter > ul {
    display: flex;
    flex-flow: row wrap;
    flex: 1;
    align-items: center;
    padding: 0 10px;
}

.top-filter li {
    color: #999;
    font-size: 14px;
    font-weight: bold;
    line-height: 22px;
}

.top-filter .chip {
    max-width: none;
    min-width: auto;
    height: auto;
    padding: 0;
    margin: 0 10px;
    border: 0;
    color: #8934fa;
    background-color: transparent;
}

.top-filter .chip:hover {
    background-color: transparent;
}

.top-filter .chip:hover .delete {
    background-image: url(/res/img/component/icon_delete-11f0bbb57aab618c33ad6c0a39e78efc.svg);
}

.top-filter .chip .delete {
    position: relative;
    top: 1px;
    right: auto;
    margin-left: 5px;
    background-color: #f3f6fb;
}

.top-filter .chip .delete:hover {
    background-color: #9086ee;
    background-image: url(/res/img/component/icon_delete_white-0db95bcc861438e6c64c4443f506f2c7.svg);
}

.top-filter-btn {
    position: absolute;
    left: 50%;
    bottom: -21px;
    transform: translateX(-50%);
}

.top-filter-btn button {
    width: 42px;
    height: 21px;
    border: solid 1px #d9e1ea;
    border-radius: 0 0 21px 21px;
    text-indent: -9999px;
    background-color: #f3f6fb;
    transition: .3s;
}

.top-filter-btn button:hover, .top-filter-btn button.fold {
    border-color: #8934fa;
    background-color: #8934fa;
}

.top-filter-btn button::before {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 10px;
    height: 7px;
    transform: translate(-50%, -60%) rotate(180deg);
    background-color: #747d8d;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    transition: .3s;
}

.top-filter-btn button:hover::before {
    background-color: #fff;
    transform: translate(-50%, -80%) rotate(180deg);
}

.top-filter-btn button.fold::before {
    background-color: #fff;
    transform: translate(-50%, -60%) rotate(0);
}

.top-filter-btn button.fold:hover::before {
    background-color: #fff;
    transform: translate(-50%, -20%) rotate(0);
}

.top-filter {
    z-index: 15;
}

.top-filter.active {
    top: 5px;
}

.top-filter.active > span {
    width: 130px;
}

.top-filter.active > span:hover {
    box-shadow: none;
}

.top-filter .btn-map-filter.fold {
    position: absolute;
    bottom: -55px;
    left: 10px;
    width: auto;
    padding: 10px 12px 10px 10px;
    border: solid 1px #fff;
    border-radius: 18px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .2);
    background-color: #fff;
}

.top-filter .btn-map-filter.fold:hover {
    bottom: -53px;
    border-color: #8934fa;
    box-shadow: 0 0 6px rgba(137, 52, 250, .5);
}

/* 필터 저장 */
.btn-filter-save .icon-group-save, .btn-filter-reset::before {
    transition: .3s;
}

.btn-filter-save .icon-group-save {
    width: 32px;
    height: 32px;
    background-size: 18px;
    background-image: url(/res/img/component/icon_group_save_purple-550c8754858fd5cfb2a9032e465a8a9a.svg);
}

.btn-filter-save:hover .icon-group-save {
    border-color: #8934fa;
    background-color: #fff;
}

.top-filter .filter-save-area {
    position: relative;
    height: 32px;
}

.top-filter .filter-save-area fieldset {
    position: absolute;
    left: 0;
    bottom: -135px;
    display: none;
    min-width: 220px;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #717171;
    z-index: 10;
}

.top-filter .filter-reset-area {
    position: relative;
    margin-left: 5px;
}

.btn-filter-reset {
    width: 32px;
    height: 32px;
    color: transparent;
    font-size: 0;
    line-height: 0;
}

.btn-filter-reset::before {
    content: "";
    display: block;
    width: 18px;
    height: 18px;
    margin: 0 auto;
    background-color: #333;
    mask: url(/res/img/common/icon-reset-0680ecf0a1d9e0a43baa873a99ceebc1.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/common/icon-reset-0680ecf0a1d9e0a43baa873a99ceebc1.svg) 50%/contain no-repeat;
}

.btn-filter-reset:hover {
    border-color: #8934fa;
}

.btn-filter-reset:hover::before {
    background-color: #8934fa;
}

.filter-reset-area {
    position: relative;
    padding-right: 15px;
}

.filter-reset-area::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 1px;
    height: 17px;
    background-color: #dadce0;
}

.ongoing::after {
    content: "진행";
    background-color: #dc3535;
}

.maintenance {
    margin-top: 90px !important;
}

.chart-panel {
    display: none;
    position: relative;
}

.chart-panel.active {
    display: block;
}

.map-chart-wrap {
    width: 90px;
    height: 55px;
    padding: 3px;
    border: solid 1px #a9b2c7;
    border-radius: 3px;
    color: #50649c;
    text-align: center;
    background-color: #fff;
}

.map-chart-wrap p {
    margin-bottom: 3px;
    font-size: 11px;
    text-align: center;
    font-weight: 500;
    line-height: 100%;
}

.target-tooltip {
    padding: 6px 12px;
    border: solid 1px #a9b2c7;
    border-radius: 5px;
    color: #50649c;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
    text-indent: 0px;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: -0.2px;
    background-color: #fff;
}

.target-tooltip::before, .target-tooltip::after, .map-chart-wrap::before, .map-chart-wrap::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    border-bottom: 0;
    transform: translateX(-50%);
}

.target-tooltip::before, .map-chart-wrap::before {
    bottom: -5px;
    border-top: 6px solid #a9b2c7;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.target-tooltip::after, .map-chart-wrap::after {
    bottom: -4px;
    width: 0;
    height: 0;
    border-top: 5px solid #fff;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
}

.btn-roadview-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    color: transparent;
    font-size: 0;
    line-height: 0;
    border-radius: 100%;
    background-color: rgba(76, 57, 163, .8);
    cursor: pointer;
    transition: background-color .3s;
}

.btn-roadview-close:hover, .btn-roadview-close:active {
    background-color: #8934fa;
}

.btn-roadview-close::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    margin: -1px auto 0 auto;
    background-color: #fff;
    mask: url(/res/img/component/icon_close-4ebc31a122220ca7144df216d7301860.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_close-4ebc31a122220ca7144df216d7301860.svg) 50%/contain no-repeat;
    transition: .3s;
}

.map-radius-option {
    position: absolute;
    padding: 10px 12px;
    border: solid 1px #a9b2c7;
    border-radius: 5px;
    background-color: #fff;
    width: 200px;
}

.map-radius-option p {
    margin-bottom: 5px;
    font-size: 12px;
    font-weight: 500;
    line-height: 16px;
}

.map-radius-option button {
    position: relative;
    color: #333;
    font-size: 11px;
    font-weight: bold;
}

.map-radius-option button::before {
    content: "";
    display: inline-block;
    height: 14px;
    width: 14px;
    border-radius: 50%;
    border: 2px solid #ccd2eb;
    vertical-align: -5px;
    background-color: #fff;
    margin-right: 5px;
    transition-duration: 300ms;
}

.map-radius-option button:hover::before, .map-radius-option button.active::before {
    border-color: #8934fa;
}

.map-radius-option button.active::after {
    content: "";
    display: inline-block;
    position: absolute;
    left: 4px;
    top: 4px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #8934fa;
}

.map-radius-option button + button {
    margin-left: 8px;
}

/* 필터에 평형 버튼 css 추가 */
.filter .multi-set .checking-set {
    position: relative;
}

.btn-group2 {
    position: absolute;
    right: 5px;
    top: 14px;
}

.btn-group2 button {
    min-width: 40px;
    border-radius: 16px;
    font-size: 12px;
    color: #333;
    font-weight: 500;
    line-height: 20px;
    padding-right: 5px;
    padding-left: 5px;
    background-color: #f4f6f9;
    border: 2px solid #f4f6f9;
    outline: none;
    margin-right: 2px;
    transition-duration: 300ms;
}

.btn-group2 button.active, .btn-group2 button.active:hover {
    border: 2px solid #712cce;
    color: #fff;
    font-weight: 500;
    background-color: #712cce;
}


.mapboxgl-map {
    font-size: 16px;
}

.mapboxgl-popup-content {
    position: relative;
    background: transparent;
    border-radius: 0px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
    padding: 5px 5px 0px;
    pointer-events: auto;
}

.boxdraw {
    background: rgba(143, 85, 226, 0.1);
    border: 2px solid #8F55E2;
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
}

.MapWalker {
    position: absolute;
}

.MapWalker .figure {
    position: absolute;
    width: 25px;
    left: 38px;
    top: -2px;
    height: 39px;
    background: url(/res/img/map/map_route-b6a3294581ba607c8ca59b30eeed0089.png) -298px -114px no-repeat
}

.MapWalker .angleBack {
    width: 102px;
    height: 52px;
    background: url(/res/img/map/map_route-b6a3294581ba607c8ca59b30eeed0089.png) -834px -2px no-repeat;
}

.MapWalker.mr0 .figure {
    background-position: -298px -114px;
}

.MapWalker.mr1 .figure {
    background-position: -335px -114px;
}

.MapWalker.mr2 .figure {
    background-position: -372px -114px;
}

.MapWalker.mr3 .figure {
    background-position: -409px -114px;
}

.MapWalker.mr4 .figure {
    background-position: -446px -114px;
}

.MapWalker.mr5 .figure {
    background-position: -483px -114px;
}

.MapWalker.mr6 .figure {
    background-position: -520px -114px;
}

.MapWalker.mr7 .figure {
    background-position: -557px -114px;
}

.MapWalker.mr8 .figure {
    background-position: -2px -114px;
}

.MapWalker.mr9 .figure {
    background-position: -39px -114px;
}

.MapWalker.mr10 .figure {
    background-position: -76px -114px;
}

.MapWalker.mr11 .figure {
    background-position: -113px -114px;
}

.MapWalker.mr12 .figure {
    background-position: -150px -114px;
}

.MapWalker.mr13 .figure {
    background-position: -187px -114px;
}

.MapWalker.mr14 .figure {
    background-position: -224px -114px;
}

.MapWalker.mr15 .figure {
    background-position: -261px -114px;
}

.MapWalker.mr0 .angleBack {
    background-position: -834px -2px;
}

.MapWalker.mr1 .angleBack {
    background-position: -938px -2px;
}

.MapWalker.mr2 .angleBack {
    background-position: -1042px -2px;
}

.MapWalker.mr3 .angleBack {
    background-position: -1146px -2px;
}

.MapWalker.mr4 .angleBack {
    background-position: -1250px -2px;
}

.MapWalker.mr5 .angleBack {
    background-position: -1354px -2px;
}

.MapWalker.mr6 .angleBack {
    background-position: -1458px -2px;
}

.MapWalker.mr7 .angleBack {
    background-position: -1562px -2px;
}

.MapWalker.mr8 .angleBack {
    background-position: -2px -2px;
}

.MapWalker.mr9 .angleBack {
    background-position: -106px -2px;
}

.MapWalker.mr10 .angleBack {
    background-position: -210px -2px;
}

.MapWalker.mr11 .angleBack {
    background-position: -314px -2px;
}

.MapWalker.mr12 .angleBack {
    background-position: -418px -2px;
}

.MapWalker.mr13 .angleBack {
    background-position: -522px -2px;
}

.MapWalker.mr14 .angleBack {
    background-position: -626px -2px;
}

.MapWalker.mr15 .angleBack {
    background-position: -730px -2px;
}

label[for="mapbox-directions-profile-driving-traffic"], label[for="mapbox-directions-profile-cycling"] {
    display: none;
}

#mapbox-directions-profile-driving-traffic, #mapbox-directions-profile-cycling {
    display: none;
}

/* modal */
.modal-container .legend {
    margin: 10px 20px;
    margin-bottom: -10px;
}

.modal-container .alert {
    margin: 0;
}

.modal-container .title-area + .option-set {
    padding-top: 10px;
}

.modal-container .option-set.gap {
    margin-bottom: 20px;
}

.modal-container .option-set.gap .option {
    margin-top: 0;
}

.modal-container .option-set .option.right label + button {
    margin-left: 20px;
}

.modal-container .option-set .option.right label {
    margin-right: 0;
    margin-left: 10px;
    font-weight: normal;
}

.search-modal {
    top: 83px;
    left: 50%;
    width: 100%;
    max-width: 450px;
    box-shadow: none;
    background-color: transparent;
    transform: translateX(-50%);
}

.search-modal .title-area {
    min-height: auto;
    border: 0;
    background: none;
    background-color: transparent;
}

.search-modal .title-area h2 {
    padding-left: 10px;
    color: #fff;
    font-size: 24px;
    line-height: 50px;
    text-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

.search-modal .btn-modal-close {
    right: 10px;
}

.search-modal .btn-modal-close:hover {
    background: none;
}

.search-modal .btn-modal-close:before, .search-modal .btn-modal-close:after {
    width: 34px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
}

.input-group {
    width: 100%;
    height: 62px;
}

.input-group * {
    float: left;
}

.input-group input {
    width: calc(100% - 80px);
    height: 60px;
    line-height: 60px;
    color: #000;
    padding: 0 17px;
    box-shadow: none;
    font-size: 18px;
    border-top: 3px solid #8934fa;
    border-right: 0;
    border-bottom: 3px solid #8934fa;
    border-left: 3px solid #8934fa;
    border-top-left-radius: 30px;
    border-bottom-left-radius: 30px;
}

.input-group input::-webkit-input-placeholder {
    font-size: 16px;
}

.input-group input, .area-list {
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
}

.input-group button {
    position: relative;
    width: 80px;
    height: 60px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    color: #fff;
    text-indent: -9999px;
    background-color: #8934fa;
    border-top-right-radius: 30px;
    border-bottom-right-radius: 30px;
    border-bottom: 3px solid #8934fa;
    border-top: 3px solid #8934fa;
    border-right: 3px solid #8934fa;
}

.input-group button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 42px;
    height: 42px;
    mask: url(/res/img/component/icon_search-c0895c78def83afd19c3572f293e5c2e.svg) 50%/55% no-repeat;
    -webkit-mask: url(/res/img/component/icon_search-c0895c78def83afd19c3572f293e5c2e.svg) 50%/55% no-repeat;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

.area-list {
    padding: 15px 0;
    border-radius: 20px;
    background-color: rgba(255, 255, 255, .95);
}

.area-list ul {
    max-height: 240px;
    margin-right: 2px;
    overflow-y: auto;
}

.area-list li {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 8px 45px;
    color: #444;
    font-size: 14px;
    line-height: 24px;
    transition: .3s;
    cursor: pointer;
}

.area-list li.selected, .area-list li:hover {
    color: #712cce;
    background-color: #e7e5fb;
}

.area-list li::before, .area-list li::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.area-list li::before {
    left: 30px;
    width: 10px;
    height: 14px;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg) 50%/cover no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg) 50%/cover no-repeat;
    background-color: #999;
}

.area-list li.history::before {
    top: 8px;
    width: 13px;
    height: 13px;
    mask: url(/res/img/component/icon_history-76d30273895fcc37f49f252c0791c012.svg) 50%/cover no-repeat;
    -webkit-mask: url(/res/img/component/icon_history-76d30273895fcc37f49f252c0791c012.svg) 50%/cover no-repeat;
}

.area-list li::after {
    right: 30px;
    width: 23px;
    height: 23px;
    mask: url(/res/img/component/icon_search_check-f2764f73c43d582ffdf4e990e6639f24.svg) 50%/cover no-repeat;
    -webkit-mask: url(/res/img/component/icon_search_check-f2764f73c43d582ffdf4e990e6639f24.svg) 50%/cover no-repeat;
    background-color: #cecdde;
}

.area-list li:hover::before, .area-list li:hover::after {
    background-color: #8934fa;
}

.area-list button {
    padding: 5px 10px;
    border: solid 1px #e9edf3;
    border-radius: 5px;
    color: #3d3d3d;
    font-weight: 500;
    transition: .3s;
}

.area-list button:hover {
    border-color: #8f55e2;
    color: #8f55e2;
}

.area-list button::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 8px;
    margin-right: 5px;
    border: solid #afb8c5;
    border-width: 0 2px 2px 0;
    vertical-align: 2px;
    transform: rotate(45deg);
}

.area-list button:hover::before {
    border-color: #8f55e2;
}

.area-list ul::-webkit-scrollbar {
    width: 6px;
    background: #dadeea;
    border-radius: 6px;
}

.area-list ul::-webkit-scrollbar-thumb {
    background: #8f55e2;
    border: 0;
    border-radius: 6px;
}

.area-list ul::-webkit-scrollbar-track {
    background-color: transparent;
}

/* sidemenu */
.sidenav-contents .manual-link-list > li {
    flex-flow: column wrap;
    align-items: flex-start;
    padding: 0;
}

.sidenav-contents .manual-link-list > li strong.index {
    display: block;
    width: 100%;
    padding: 10px 18px 10px 15px;
    color: #333;
    font-size: 15px;
    font-weight: 600;
    background-color: #f3f6fb;
    cursor: pointer;
}

.manual-link-list .index {
    position: relative;
}

.manual-link-list .index::after {
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    right: 19px;
    width: 12px;
    height: 12px;
    margin-top: 6px;
    background: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    transform: rotate(180deg);
    transition: all .15s ease-in-out;
}

.manual-link-list .index.item::after {
    content: "";
    display: block;
    position: absolute;
    top: 6px;
    right: 16px;
    width: 16px;
    height: 16px;
    margin-top: 6px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new.svg) 50%/contain no-repeat;
    transform: rotate(0deg);
    transition: all .15s ease-in-out;
}

.manual-link-list .index.open::after {
    transform: rotate(0deg);
}

.manual-link-list ul {
    width: 100%;
    overflow: hidden;
}

.manual-link-list li li {
    background: url(/res/img/component/icon_bullet-ee434bab24b42f8a1e8dc281ee7b912d.png) 20px 14px/7px 9px no-repeat;
}

.manual-link-list li li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 15px 12px 32px;
    border-bottom: solid 1px #f0f3f7;
    font-size: 15px;
    font-weight: 500;
}

.manual-link-list li li a::after {
    content: "";
    display: inline-block;
    width: 20px;
    height: 18px;
    padding: 0;
    text-indent: -9999px;
    background-color: #bdc2cc;
    mask: url(/res/img/component/icon_download-e8b7f509d9491d7f24b56742e57b638a.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_youtube_symbol-7510cbbdbeffbb4bcbd13548c57df570.svg) 50%/contain no-repeat;
    transition: .3s;
}

.manual-link-list li li a:hover::after {
    background-color: #ff0000;
}

.manual-link-list li li a:hover {
    color: #8934fa;
}

.manual-link-list li li a:hover .icon-download {
    background-color: #8934fa;
}

.manual-link-list li li:last-child a {
    border-bottom: 0;
}

.manual-link-list li li li {
    background-position: 37px 13px;
}

.manual-link-list li li li a {
    padding: 10px 15px 10px 48px;
    font-weight: normal;
}

.manual-link-list li li ul {
    border-bottom: solid 1px #f0f3f7;
}

.manual-link-list .no-link {
    cursor: default;
}

.manual-link-list .no-link:hover {
    color: #333;
}

.manual-link-list .no-link::after {
    display: none;
}

.manual-link-list.script li li a::after {
    display: none;
}

.sidenav-contents .title-box .btn-download {
    float: right;
    border-color: #8934fa;
    color: #8934fa;
    font-weight: 500;
}

.sidenav-contents .title-box .btn-download:hover {
    color: #fff;
    background-color: #8934fa;
}

.sidenav-contents .title-box .btn-download::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-left: 3px;
    vertical-align: -3px;
    background-color: #8934fa;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
}

.sidenav-contents .title-box .btn-download:hover::after {
    background-color: #fff;
}

/* tab2 */
.nav-container.tab2 {
    padding-top: 0;
    background-color: #fff;
}

.nav-container.tab2 .nav-tabs {
    justify-content: flex-start;
    max-width: 100%;
}

.nav-container.tab2 .nav-tabs-wrap {
    padding: 0 20px;
    border: 0;
}

.nav-container.tab2 .nav-tabs li {
    flex: initial;
    width: fit-content;
    border: 0;
    margin: 2px 1px 0 1px;
}

.nav-container.tab2 .nav-tabs li a {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    height: fit-content /* calc(20% - 2px) */;
    padding: 10px; /* padding 옵션 추가 */
    border: solid 1px #dbe0ec;
    border-radius: 5px 5px 0 0;
    color: #888;
    background-color: #f3f6fb;
}

.nav-container.tab2 .nav-tabs li a span:first-child {
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
}

.nav-container.tab2 .nav-tabs li a span:last-child {
    font-weight: bold;
}

.nav-container.tab2 .nav-tabs li.active a {
    color: #fff;
    border-color: #673ab7;
    background-color: #673ab7;
}

.nav-container.tab2 .nav-tabs li.active::before {
    display: none;
}

/* bbs */
.pre {
    padding-left: 70px;
    background: url(/res/img/component/icon_bbs_pre-c0a2a881928a660cd9bd3fa0e2790a78.png) 0 50% no-repeat;
}

/* kakao category */
#category {
    position: absolute;
    top: 80px;
    right: 10px;
    border-radius: 5px;
    border: 1px solid #a9b2c7;
    box-shadow: 0 1px 2px 1px rgba(0, 0, 0, 0.1);
    background: #fff;
    overflow: hidden;
    z-index: 2;
}

#category li {
    float: left;
    width: 50px;
    height: 44px;
    border-right: 1px solid #a9b2c7;
    font-size: 12px;
    text-align: center;
    letter-spacing: -.5px;
    cursor: pointer;
}

#category li.on, #category li.on:hover {
    color: #8934fa;
    font-weight: 500;
    background-color: #f1e7ff;
}

#category li:hover {
    background-color: #f0f3fc;
    border-left-color: #a9b2c7;
}

#category li:last-child {
    margin-right: 0;
    border-right: 0;
}

#category li span {
    display: block;
    margin: 4px auto 2px auto;
    width: 27px;
    height: 20px;
}

#category li .category_bg {
    background: url(/res/img/component/places_category-49bb64949b136a0c6ac26345d0ad3ff0.png) 0/52px no-repeat;
}

#category li .bank {
    background-position: -1px 1px;
}

#category li .mart {
    background-position: -1px -24px;
}

#category li .pharmacy {
    background-position: -1px -50px;
}

#category li .oil {
    background-position: -1px -76px;
}

#category li .cafe {
    background-position: -1px -102px;
}

#category li .store {
    background-position: -1px -128px;
}

#category li.on .category_bg {
    background-position-x: -27px;
}

.placeinfo_wrap {
    position: absolute;
    bottom: 28px;
    left: -150px;
    width: 300px;
}

.placeinfo {
    position: relative;
    width: 100%;
    border-radius: 6px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ddd;
    padding-bottom: 10px;
    background: #fff;
}

.placeinfo:nth-of-type(n) {
    border: 0;
    box-shadow: 0px 1px 2px #888;
}

.placeinfo_wrap .after {
    content: "";
    position: relative;
    margin-left: -12px;
    left: 50%;
    width: 22px;
    height: 12px;
    background: url('https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')
}

.placeinfo a, .placeinfo a:hover, .placeinfo a:active {
    color: #fff;
    text-decoration: none;
}

.placeinfo a, .placeinfo span {
    display: block;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

.placeinfo span {
    margin: 5px 5px 0 5px;
    cursor: default;
    font-size: 13px;
}

.placeinfo .title {
    font-weight: bold;
    font-size: 14px;
    border-radius: 6px 6px 0 0;
    margin: -1px -1px 0 -1px;
    padding: 10px;
    color: #fff;
    background: #d95050;
    background: #d95050 url(https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;
}

.placeinfo .tel {
    color: #0f7833;
}

.placeinfo .jibun {
    color: #999;
    font-size: 11px;
    margin-top: 0;
}

#extentSwitch {
    position: absolute;
    top: 18px;
    left: 70px;
}

/* 개인정보재동의 관련 팝업 */
.agree-form {
    width: 700px;
    left: 50%;
    transform: translateX(-50%);
}

.agree-form > * {
    width: 90%;
    margin: 0 auto;
    line-height: 100%;
}

.agree-form .title {
    width: 100%;
    margin-top: 40px;
    margin-bottom: 20px;
    color: #333;
    font-size: 24px;
    justify-content: center;
}

.agree-form .paragraph {
    margin-bottom: 15px;
}

.agree-form .paragraph span {
    font-weight: 500;
}

.agree-form .paragraph p {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 130%;
    text-align: justify;
}

.agree-form .btn-set {
    margin-bottom: 20px;
    justify-content: center;
}

.agree-form .btn-set button {
    width: 240px;
    height: 50px;
}

.agree-form .btn-set button + button {
    margin-left: 10px;
}

.agree-form .btn-modal-close {
    right: -25px;
}

.agree-form .btn-modal-close:before, .agree-form .btn-modal-close:after {
    background-color: #333;
}

.agree-form .btn-modal-close:hover {
    background-color: #f0f3fc;
}

.form-area {
    border-top: solid 2px #8f55e2;
}

.form-area .title-area {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 10px;
    border-top: 0;
    border-bottom: solid 1px #e6e6e6;
}

.form-area .title-area h4, .form-area .title-area label {
    font-size: 15px;
    line-height: 30px;
}

.form-area .title-area h4 {
    margin-bottom: 0;
    font-weight: 500;
}

.form-area .title-area h4::before {
    top: 9px;
}

.form-area .title-area span {
    font-weight: normal;
}

.form-area .title-area > div {
    line-height: 100%;
}

.form-area .title-area input {
    margin-top: 0;
    margin-right: 5px;
    vertical-align: -1px;
}

.form-area .title-area label {
    float: left;
    margin-right: 10px;
    margin-bottom: 0;
    font-weight: normal;
}

.form-area .title-area::after {
    display: none;
}

.form-area .title-area h4 span {
    color: #d80000;
    font-size: 13px;
}

.form-area .title-area span.blue {
    color: #236dc8;
}

.form-area .btn-certify {
    width: 150px;
    height: 35px;
    padding: 0;
    line-height: 16px;
}

.form-area .btn-certify:focus, .form-area .btn-certify:active {
    border-color: #5e7be6;
    box-shadow: none;
    outline: none;
}

.sub-form {
    padding: 5px 20px 10px 20px;
    border: 0;
    background-color: #f8f8f8;
}

.sub-form .title-area {
    padding-left: 0;
    padding-right: 0;
    border-bottom: 0;
}

.sub-form .title-area > h4::before {
    top: 2px;
}

.sub-form .title-area h4, .sub-form .title-area label {
    margin-right: 0;
    line-height: 100%;
}

.sub-form .title-area label + label {
    margin-left: 30px;
}

.sub-form .terms-box {
    margin-bottom: 10px;
    border: solid 1px #dadada;
    text-align: justify;
    background-color: #fff;
}

.sub-form .terms-box h3 {
    font-size: 16px;
}

.sub-form .terms-box h4 {
    padding-left: 0;
}

.sub-form .terms-box h4::before {
    display: none;
}

.sub-form .terms-box .text {
    overflow-y: auto;
    max-height: 100px;
    padding: 5px 15px;
}

.sub-form .terms-box .text * {
    font-size: small;
}

.sub-form .terms-box .text.info {
    padding: 10px;
    text-align: center;
}

.sub-form .terms-box ol, .sub-form .terms-box ul {
    margin-bottom: 15px;
}

.sub-form .terms-table {
    margin-bottom: 10px;
}

.sub-form label + input[type=checkbox] {
    margin-left: 30px;
}

.purple {
    color: #6e42d9;
}

.pink {
    color: #ff4081;
}

.terms-table {
    display: table;
    width: 100%;
    margin-bottom: 15px;
    border-top: solid 1px #222;
}

.terms-table tr > * {
    padding: 5px;
    border-right: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    font-size: 13px;
    background-color: #fff;
}

.terms-table tr > *:first-child {
    border-left: solid 1px #ddd;
}

.terms-table th {
    border-bottom: solid 1px #ddd;
    font-weight: 500;
    text-align: center;
    background-color: #f8f8f8;
}

.terms-table td {
    text-align: left;
}

.terms-table td:first-child {
    text-align: center;
}

.input-pwd {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    border: solid 1px #444;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .3);
    background-color: #fff;
}

.input-pwd input {
    display: inline-block;
    height: 42px;
    width: 180px;
    color: #384047;
    font-size: 15px;
    font-weight: 400;
    padding: 5px 10px;
    border: solid 1px #a9b2c7;
    border-radius: 4px;
    outline: none;
    vertical-align: middle;
    text-indent: 0;
    background-color: #fff;
}

.input-pwd p {
    margin-bottom: 10px;
}

.input-pwd .btn-x {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    cursor: pointer;
}

.agree-form .btn-set .btn-leave {
    display: inline-block;
    margin-left: 5px;
    padding: 0 15px;
    width: auto;
    height: 42px;
    border: 0;
    border-radius: 4px;
    color: #fff;
    vertical-align: middle;
    background-color: #555;
    transition: .3s;
}

.agree-form .btn-set .btn-leave:hover, .btn-leave:active {
    background-color: #333;
}

/* 경매 */
.title-area.no-border {
    border-top: 0 !important;
}

.title-area .info {
    margin-left: 5px;
}

.filter-set > .filter > a.no-title {
    height: 46px;
    padding-top: 0;
}

.filter-set > .filter > a.input-text {
    height: 46px;
    cursor: default;
    padding: 16px 5px 0 40px
}

.filter-set > .filter > a.input-text input {
    padding: 0;
    border: 0;
    text-align: left;
    text-indent: 0;
    color: #333333;
    font-size: 15px;
    font-weight: 600;
    width: 120px;
}

.filter-set > .filter > a.input-text:hover input, .filter-set > .filter > a.input-text input:focus input {
    background-color: #f7f7f7;
}

.detail-set.filter {
    margin: 10px 0 20px 0;
    border: solid 1px #d5dae6;
    border-top-width: 2px;
}

.detail-set.filter.flex {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.detail-set.filter input[type=text] {
    width: 180px;
    margin-left: 0;
    text-indent: 0;
}

.detail-set.filter input.num {
    width: 60px;
}

.detail-set.filter .checking {
    margin: 0;
}

.detail-set.filter * + .checking {
    margin-left: 20px;
}

.detail-set.filter .dropdown {
    min-width: 130px;
}

.detail-set.filter .dropdown-menu {
    width: 100%;
}

.detail-set.filter .dropdown-select > span {
    color: #444;
}

.detail-set.filter .dropdown + .dropdown, .detail-set.filter .dropdown + input {
    margin-left: 10px;
}

.detail-set.filter span {
    margin: 0;
    line-height: 38px;
}

.detail-set.filter span:not(.item-title) {
    padding: 0 5px;
}

.detail-set.filter .item-title {
    min-width: 54px;
    margin-right: 10px;
    color: #50649c;
    text-align: center;
}

.detail-set.filter .item-title.ta{
    margin: 0 !important;
    font-size: 17px;
    font-weight: 500;
}

.detail-set.filter .item-title:not(:first-child) {
    margin-left: 30px;
}

.detail-set.filter .details.col2 {
    width: 50%;
}

.btn-set.center {
    justify-content: center;
}

.btn-set.center .btn {
    width: 200px;
}

.btn-set.center .btn-purple {
    background: -webkit-linear-gradient(45deg, #303f9f, #7b1fa2, #303f9f);
    background: linear-gradient(45deg, #303f9f, #7b1fa2, #303f9f);
    background-size: 300%;
}

.btn-set.center .btn-purple:hover, .btn-set.center .btn-purple:active {
    background-position: right;
}

.grid-auction-price {
    display: inline-block;
}

.grid-auction-price li {
    text-align: left;
    line-height: 180%;
}

.grid-auction-price li:not(:first-child) {
    font-weight: bold;
}

.grid-auction-price li::before {
    display: inline-block;
    margin-right: 5px;
    width: 25px;
    height: 15px;
    border-radius: 2px;
    vertical-align: 1px;
    color: #fff;
    font-family: Gulim, "굴림", Dotum, "돋움";
    font-size: 11px;
    font-weight: normal;
    line-height: 16px;
    text-align: center;
}
.rcept_dt::before {
    content: "접수";
    background-color: #454f5d;
}
.giil_dt::before {
    content: "입찰";
    background-color: #4985f2;
}
.price1::before {
    content: "감정";
    background-color: #454f5d;
}

.price2::before {
    content: "최저";
    background-color: #4985f2;
}

.price3::before {
    content: "낙찰";
    background-color: #ff5992;
}

.price4::before {
    content: "접수";
    background-color: #454f5d;
}

.price5::before {
    content: "개시";
    background-color: #4985f2;
}

.price6::before {
    content: "배당";
    background-color: #ff5992;
}


.as_js_flex_b {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
    justify-content: space-between;
}

.as_js_flex {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
    justify-content: flex-start;
}

.as_jc_flex {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
}

.as_je_flex {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
    justify-content: flex-end;
}

.ac_js_flex {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
    justify-content: flex-start;
}

.ac_js_flex_nw {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    justify-content: flex-start;
}

.ac_jc_flex {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
}

.ac_je_flex {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 5px;
    justify-content: flex-end;
}

.ac_je_flex_nw {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    gap: 5px;
    justify-content: flex-end;
}

.as_js_flex_c {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-start;
}

.as_jc_flex_c {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.as_je_flex_c {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-end;
}

.as_js_flex_c {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-start;
}

.as_jc_flex_c {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.as_je_flex_c {
    width: 100%;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-end;
}

.ac_js_flex_c {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-start;
}

.ac_jc_flex_c {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    justify-content: center;
}

.ac_je_flex_c {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 5px;
    justify-content: flex-end;
}

.ac_js_flex_b{
	display: flex;align-items: center; justify-content: space-between; flex-direction: row; gap: 5px; padding: 2.5px;
}

.no-flex-wrap {
    flex-wrap: initial
}

.stitle {
    font-weight: bold;
    text-align: left;
}

.stitle_c {
    font-weight: bold;
    text-align: center;
}

.stitle_e {
    font-weight: bold;
    text-align: right;
}

.price_color-set {
    display: block;
    width: 12px;
    height: 12px;
    line-height: 13px;
    background-color: #555;
    color: #fff;
    font-size: 10px !important;
    font-weight: bold;
    border-radius: 6px;
    margin-right: 3px;
}

.intro_price_color-set-map {
    background-color: #555;
    color: #ffffff00 !important;
    font-size: 4px;
    padding: 3px 5px;
    border-radius: 30px;
}

.intro_price_color-set {
    background-color: #555;
    color: #ffffff !important;
    font-size: 11px;
    padding: 3px 5px;
    border-radius: 30px;
}

.price_1::before {
    content: "";
    background-color: #80abd7;
}

.price_2::before {
    content: "";
    background-color: #5ecda2;
}

.price_3::before {
    content: "";
    background-color: #fbca4d;
}

.price_4::before {
    content: "";
    background-color: #e68035;
}

.price_5::before {
    content: "";
    background-color: #ed6c69;
}

.k-grid .blue {
    color: #4985f2 !important;
    font-weight: bold;
}

.k-grid .pink {
    color: #ff5992 !important;
    font-weight: bold;
}

.k-grid .red {
    font-weight: bold;
}

.title-area .right .switch-radio {
    margin-top: 0;
}

.btn-print, .btn-view {
    display: inline-block;
    height: 28px;
    margin-left: 20px;
    padding: 0 5px;
    border-radius: 5px;
    border: solid 1px #dadce0;
    color: #444;
    vertical-align: middle;
    transition: border-color .3s;
}

.btn-print:hover, .btn-print:active, .btn-view:hover, .btn-view:active {
    border-color: #444;
}

.btn-print::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    vertical-align: -2px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_print.svg) 50%/contain no-repeat;
}

.btn-view::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    vertical-align: -2px;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    background-color: #444;
}

.wide.head {
    margin-bottom: 0;
}

.wide > .sub-filter {
    margin-top: 0;
}

.wide > .sub-filter .dropdown {
    min-width: 150px;
}

.wide > .sub-filter .option .bullet:not(:first-child) {
    margin-left: 30px;
}

.wide > .sub-filter .checking-set {
    padding: 15px 16px;
}

.wide > .sub-filter .dropdown label {
    top: 0;
    left: 0;
    margin-right: 0;
}

.wide > .sub-filter .depth-set {
    display: flex;
    flex-flow: row nowrap;
}

.wide > .sub-filter.address .option.city + .option:not(.city) {
    margin-left: 20px;
}

.title-area .right .dropdown {
    min-width: 85px;
    height: 28px;
}

.title-area .right .dropdown + .dropdown {
    margin-left: 5px;
}

.title-area .right .dropdown-select {
    height: 26px;
}

.title-area .right .dropdown-select > span {
    font-size: 13px;
}

.depth-set ul::-webkit-scrollbar {
    width: 5px;
    height: 1px;
    background: rgba(0, 0, 0, .05);
}

.depth-set ul::-webkit-scrollbar-track {
    background-color: transparent;
}

.depth-set ul::-webkit-scrollbar-thumb {
    background: #dadeea;
    border: 0px none #ffffff;
}

.depth-set ul:hover::-webkit-scrollbar-thumb {
    background: #adb5ca;
}

.nav-container.tab .theme {
    position: relative;
    border-bottom: 0;
}

.nav-container.tab .theme li {
    position: relative;
}

.nav-container.tab .theme li::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #dadce0;
}

.nav-container.tab .theme li.tab-add {
    border: 0;
    width: auto;
}

.nav-container.tab .theme li.tab-add[data-tooltip]::before {
    margin-left: 25px;
}

.nav-container.tab .theme li.tab-add[data-tooltip]::after {
    left: 15px;
    background-color: transparent;
}

.btn-tab-add {
    position: absolute;
    top: 50%;
    right: -18px;
    width: 36px;
    height: 36px;
    border: solid 2px #8f55e2;
    border-radius: 50%;
    transform: translateY(-50%);
    text-indent: -9999px;
    background-color: #fff;
    z-index: 1;
    transition: background-color .3s;
}

.btn-tab-add::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 24px;
    height: 24px;
    mask: url(/res/img/component/icon_add_plus-9ca56ba3b638b8ec547da2ecf90199dc.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_add_plus-9ca56ba3b638b8ec547da2ecf90199dc.svg) 50%/contain no-repeat;
    background-color: #8f55e2;
    transform: translate(-50%, -50%);
}

.btn-tab-add:hover, .btn-tab-add:active {
    background-color: #8f55e2;
}

.btn-tab-add:hover::before, .btn-tab-add:active::before {
    background-color: #fff;
}

/* 경매상세정보 */
.modal-auction {
    max-width: 1520px;
    left: 50%;
    bottom: 20px;
    margin-bottom: 0;
    transform: translateX(-50%);
    overflow: hidden;
}

.modal-auction h3 {
    margin-top: 0;
    font-size: 24px;
    font-weight: bold;
}

.modal-auction h4 {
    font-weight: 500;
}

.modal-auction h5 {
    margin-bottom: 10px;
    color: #333;
    font-size: 16px;
    font-weight: 500;
}

.modal-auction .nav-fixed{
    display: flex;
    align-items: center;
    position: relative;
    float: left;
    width: 100%;
}

.modal-auction .nav-fixed h4{
    width: 130px;
    /*margin: auto 0;*/
}

.modal-auction .nav{
    border-top: 0;
    width: calc(100% - 130px);
}
.modal-auction .nav .ul-header{
    text-align: center;
    margin: 0;
    font-size: 12px;
    padding: 1px;
    width: 55px;
    background-color: #f4f8fd;
    border: 1px solid #ccd4e1;
    border-right: none;
    height: 37px;
    letter-spacing: -.5px;
}

.modal-auction .nav ul{
    width: calc(100% - 55px);
    margin: 10px 0 10px 0;
    background-color: #f4f8fd;
    background-clip: content-box;
    border: 1px solid #ccd4e1;
}

.modal-auction .nav ul li{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    float: left;
    width: 8%;
    height: 35px;
    letter-spacing: -.5px;
    cursor: pointer;
    background-color: #f4f8fd;

}

.modal-auction .nav ul li:last-child{
    border-right: none;
}

.modal-auction .nav ul li{
    border-right: 1px solid #ccd4e1;
}

.modal-auction .nav ul li.hide{
    display: none;
}
.modal-auction .nav ul li.active{
    background-color: white;
    outline: 1px solid white;
    border-left: 1px solid #ccd4e1;
    border-top: 1px solid #ccd4e1;
}

.modal-auction .nav ul li.active:before{
    position: absolute;
    top: -2px;
    display: block;
    content: '';
    width: calc(100% + 2px);
    height: 2px;
    background: #8f55e2;
    z-index: 1;
}

.modal-auction .nav .next{
    width: 10%;
    float: right;
}

.modal-auction .nav .prev{
    width: 10%;
}

.modal-auction .nav .next[disabled]::before, .modal-auction .nav .prev[disabled]::before {
    background-color: #c5c5c5;
}

.modal-auction .nav .next::before, .modal-auction .nav .prev::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 13px;
    height: 13px;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    background-color: #999;
    transform: translate(-50%, -50%) rotate(-90deg);
    transition: .3s;
}

.modal-auction .nav .prev::before {
    transform: translate(-50%, -50%) rotate(90deg);
}

.modal-auction .title-area.thick {
    display: flex;
    justify-content: space-between;
    min-height: auto;
    padding: 20px;
}

.modal-auction .title-area.thick .title-sub {
    display: flex;
}

.modal-auction .title-area.thick .title-sub button{
    width: 30px;
    height: 28px;
    border: solid 1px rgba(117, 52, 250, .2);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    transition: .3s;
    background-color: rgba(117, 52, 250, .1);
    margin-right: 5px;
}

.modal-auction .title-area.thick .title-sub ul{
    display: none;
    overflow-y: auto;
    position: absolute;
    width: 30px;
    max-height: 163px;
    top: 30px;
    z-index: 2;
    border: solid 1px rgba(117, 52, 250, .2);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    transition: .3s;
    background-color: rgb(255, 255, 255);
}

.modal-auction .title-area.thick .title-sub ul.active{
    display: block;
}
.modal-auction .title-area.thick .title-sub ul::-webkit-scrollbar {
    width: 2px;
}
.modal-auction .title-area.thick .title-sub ul li{
    text-align: center;
    margin: 5px 0px;
}
.modal-auction .title-area.thick .title-sub ul li:hover {
    cursor: pointer;
    background-color: #f5f5f5;
}

.modal-auction .title-area:after {
    display: none;
}

.modal-auction .col-2 {
    display: flex;
    flex-flow: row wrap;
    margin-bottom: 30px;
}

.modal-auction .col-2 > div + div {
    padding-left: 50px;
}

.modal-auction .col-2.btn-set > div + div {
    padding-left: 0;
}

.modal-auction .col-2 .table-basic {
    margin-bottom: 0;
}

.modal-auction .caution {
    padding: 10px 20px;
    border-bottom: 1px solid #dbe0ec;
    text-align: center;
    background-color: #f8faff;
}

.modal-auction .caution span {
    font-weight: 500;
}

.modal-auction .nav-container {
    margin-bottom: 20px;
    padding-top: 0;
}

.modal-auction .table-basic {
    margin-bottom: 30px;
    border-top: solid 2px #d5dae6;
}

.modal-auction .table-basic th, .info-area .table-basic td {
    font-size: 13px;
}

.modal-auction .table-basic th {
    height: auto;
    padding: 8px 0;
    color: #50649c;
}

.modal-auction .table-basic td {
    padding: 5px;
}

.modal-auction .table-basic .link {
    display: inline-block;
    color: #6e42d9;
    text-decoration: underline;
    font-weight: 500;
}

.modal-auction .table-basic .bid {
    color: #d80000;
    font-weight: bold;
    background-color: #ffeacd;
}

.modal-auction .table-basic .bid td {
    color: #d80000;
    font-weight: bold;
}

.modal-auction .nav-tabs li > a {
    height: auto;
    padding: 5px 0;
    font-size: 14px;
}

.modal-auction .icon-pin-purple {
    width: 15px;
    height: 15px;
    margin-left: 3px;
}

.modal-auction .alert {
    margin-bottom: 20px;
}

.modal-auction .alert span {
    padding-left: 5px;
}

.modal-auction .eval-div{
    padding: 20px 10px 10px 10px;
    border: 1px solid #ccd4e1;
}

.modal-auction .eval-title, .modal-auction .eval-ul .law_title {
    font-weight: 400;
    padding: 0 0 0 10px;
    color: #4fa2c0;
    margin: 5px 0;
}

.modal-auction .eval-content{
    padding: 0 20px !important;
    line-height: 20px;
    margin-bottom: 5px;
}

.modal-auction .eval-ul{
    margin-bottom: 10px;
}

.modal-auction .eval-ul ul li{
    padding-left: 20px;
}

.modal-auction .eval-ul ul li span{
    padding: 0 !important;
    line-height: 20px;
    margin-bottom: 5px;
}

.btn-onbid {
    display: inline-block;
    height: 30px;
    margin-left: 10px;
    padding: 0 10px 0 50px;
    border-radius: 40px;
    border: solid 1px rgba(10, 54, 132, .3);
    color: #0a3684;
    font-size: 13px;
    line-height: 28px;
    font-weight: bold;
    transition: .3s;
    background: #fff url(/res/img/component/logo_onbid-abca8528d3886dd5536364d7eb12d5bd.gif) 10px 50%/35px auto no-repeat;
}

.btn-onbid:hover, .btn-onbid:active {
    border-color: #0a3684;
}

.info-head {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-end;
}

.info-head > * {
    font-size: 14px;
}

.info-head dt {
    padding-left: 20px;
    font-weight: normal;
}

.info-head dt::before {
    content: "";
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 5px;
    vertical-align: 3px;
    background-color: #846fe6;
}

.info-head dd {
    padding-left: 5px;
}

.info-head strong {
    color: #5e35b1;
}

.info-area {
    display: flex;
    flex-flow: column nowrap;
    position: absolute;
    top: 54px;
    left: 0;
    right: 0;
    bottom: 0;
}

.info-area.public {
    top: 172px;
}

.icon-tel::before, .icon-mobile::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin: 0 3px;
    vertical-align: -3px;
    background-color: #666;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.auction-fixed {
    padding: 0 20px;
}

.auction-fixed .col-2 {
    margin-bottom: 25px;
}

.auction-scroll {
    flex-grow: 1;
    overflow-y: auto;
    padding: 25px 20px 10px 20px;
    border-top: solid 1px #eee;
}

.auction-photo {
    position: relative;
}

.auction-photo .btn-more {
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 0;
    font-size: 14px;
}

.auction-photo .btn-more::before {
    content: "";
    position: absolute;
    top: 1px;
    right: 1px;
    width: 17px;
    height: 17px;
    mask: url(/res/img/component/icon_add_plus-9ca56ba3b638b8ec547da2ecf90199dc.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_add_plus-9ca56ba3b638b8ec547da2ecf90199dc.svg) 50%/contain no-repeat;
    background-color: #444;
}

.auction-photo .btn-more::after {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    margin-left: 5px;
    border-radius: 100%;
    border: solid 1px #ccd4e1;
    vertical-align: -4px;
    background-color: #f4f8fd;
    transition: .3s;
}

.auction-photo .btn-more:hover {
    color: #6e42d9;
}

.auction-photo .btn-more:hover::before {
    background-color: #fff;
}

.auction-photo .btn-more:hover::after {
    border-color: #6e42d9;
    background-color: #6e42d9;
}

.auction-photo ul {
    display: flex;
    flex-flow: row wrap;
}

.auction-photo li {
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    height: 150px;
    border: 2px solid #ccd4e1;
    padding: 2px;
}

.auction-photo li + li {
    margin-left: 10px;
}

.auction-photo li img {
    width: 100%;
    cursor: pointer;
}

.auction-photo.public {
    overflow: hidden;
    margin-bottom: 30px;
}

.auction-photo.public li {
    height: 250px;
}

.auction-photo.public li + li {
    margin-left: 50px;
}

.auction-photo.public li img {
    width: auto;
    height: 100%;
}

.button-set {
    display: none;
    clear: both;
    overflow: hidden;
}
.button-set .button-row {
    width: 100%;
    display: inline-block;
}

.button-set.active {
    display: block;
}

.button-set button {
    float: left;
    width: calc(25% - 8px);
    height: 40px;
    margin: 5px 0;
    border: 1px solid #ccd4e1;
    box-shadow: 2px 2px 2px rgba(0, 0, 0, .05);
    color: #50649c;
    font-size: 14px;
    background-color: #f4f8fd;
    transition: .2s;
}

.button-set button + button {
    margin-left: 10px;
}

.button-set button:nth-child(4n+1) {
    margin-left: 0;
}

.button-set button:hover, .button-set button:focus, .button-set.blue button:hover {
    color: #fff;
    border-color: #8184dc;
    background-color: #8184dc;
}

.table-head {
    display: flex;
    justify-content: space-between;
}

.table-head .info {
    color: #7080ad;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: -0.5px;
    font-weight: 400;
}

.title-btns {
    position: absolute;
    top: 10px;
    right: 50px;
}

.title-btns > * {
    display: inline-block;
    height: 34px;
    margin-left: 5px;
    color: #fff;
    font-size: 14px;
    padding: 0 10px;
    border: solid 1px rgba(255, 255, 255, .3);
    border-radius: 5px;
    background-color: rgba(0, 0, 0, .2);
    vertical-align: middle;
    transition: .3s;
    cursor: pointer;
}

.title-btns > *:hover {
    border-color: #fff;
}

.title-btns .btn-print::before {
    vertical-align: -1px;
    background: none;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_print.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_print.svg) 50%/contain no-repeat;
    background-color: #fff;
}

.title-btns .star-on, .title-btns .star-off {
    margin-top: 5px;
    vertical-align: -4px;
}


.modal-auction .col-2.btn-set button {
    width: calc(20% - 9px);
}

/* 경매 팝업 */
.upper-title {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    min-width: 900px;
    height: 54px;
    padding: 0 20px;
    background: -webkit-linear-gradient(45deg, #303f9f, #7b1fa2);
    background: linear-gradient(45deg, #303f9f, #7b1fa2);
}

.upper-title > p {
    color: #fff;
    font-size: 18px;
}

.upper-title .title-btns {
    right: 20px;
}

.popup-title {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    min-width: 900px;
    height: 60px;
    padding: 0 20px;
    background-color: #f0f3fc;
}

.popup-title.fix {
    position: absolute;
    width: 100%;
    top: 0;
    z-index: 1;
}

.popup-title .title * {
    display: inline-block;
    vertical-align: middle;
    line-height: 100%;
}

.popup-title h1 {
    font-size: 22px;
    font-weight: bold;
}

.popup-title h1 + span {
    margin-left: 10px;
    color: #5e35b1;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: -1px;
}

.popup-title .title-info span {
    color: #454f5d;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -.5px;
}

.menu-tab {
    margin-bottom: 20px;
}

.menu-tab ul {
    overflow: hidden;
    display: flex;
    flex-flow: row wrap;
}

.menu-tab li {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    position: relative;
    height: 40px;
    border: solid 1px #bec7d5;
    border-radius: 3px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, .1);
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    background: linear-gradient(to top, #f7fafc, #fff);
    transition: .3s;
}

.menu-tab li + li {
    margin-left: 8px;
}

.menu-tab li:hover {
    background: linear-gradient(to top, #f7fafc, #ecf2f6);
}

.menu-tab li.active {
    border-color: #6609e2;
    color: #fff;
    font-weight: 500;
    background: #8934fa;
}

.popup-inner-content {
    height: 100%;
    overflow-y: scroll;
    padding-top: 60px;
}

.popup-content {
    clear: both;
    min-width: 900px;
    padding: 20px;
}

.popup-content h2 {
    width: 100%;
    margin-bottom: 15px;
    padding: 10px 10px 8px 5px;
    border-bottom: solid 3px #8934fa;
    font-size: 22px;
}

.popup-content h2 span {
    margin-left: 15px;
    color: #7080ad;
    font-size: 14px;
    letter-spacing: -.5px;
}

.popup-content h2 b {
    margin: 0 3px;
    color: #8934fa;
    font-weight: 500;
}

.popup-content .title-area > .right {
    display: flex;
    bottom: auto;
    top: 5px;
    right: 10px;
    z-index: auto;
}

.popup-content .title-area > .right > * + * {
    margin-left: 10px;
}

.popup-content .title-area > .right .map-filter-set .filter > a {
    height: 36px;
    padding-top: 0;
}

.popup-content .title-area > .right .topic-btns .map-filter-set {
    min-width: 160px;
    width: auto;
}

.popup-content .title-area > .right .topic-btns .map-filter-set .filter fieldset {
    top: 36px;
    left: 0;
}

.popup-content .title-area > .right .topic-btns .map-filter-set .filter > a .text {
    font-size: 14px;
}

.popup-content .title-area.no-border {
    min-height: 36px;
}

.popup-content .title-area.no-border .right {
    top: 50%;
    transform: translateY(-50%);
}

.popup-content .title-area.no-border .right p {
    color: #7e81a6;
    font-size: 14px;
}

.popup-content .title-area.no-border h2 + .right {
    top: 5px;
    transform: none;
}

.popup-content .apt-info {
    display: flex;
    flex-flow: row wrap;
    min-height: 85px;
    border-bottom: solid 2px #dbe0ec;
}

.popup-content .apt-info h3 {
    display: inline-block;
    height: 38px;
    line-height: 38px;
    font-weight: 400;
    padding-left: 45px;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 15px;
    background: url(/res/img/component/icon_logo_blue-25570bc3ada4fae199ca8ae489b1c5c5.svg) 0 50%/38px no-repeat;
}

.popup-content .apt-info h3 span {
    vertical-align: -2px;
}

.popup-content .apt-detail {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 20px;
    padding-top: 20px;
    padding-bottom: 10px;
    border-bottom: solid 2px #dbe0ec;
}

.popup-content .apt-detail .scroll-tbody {
    height: 180px;
}

.popup-content .btn-group {
    display: inline-block;
}

.popup-content .option-set {
    margin-top: -10px;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 15px;
    border-top: 0;
}

.popup-content .option-set label {
    margin-right: 5px;
}

.popup-content .option-set .option {
    margin-right: 10px;
    padding-right: 10px;
    border-right: 0;
}

.popup-content .option-set .btn-submit {
    margin-top: 10px;
}

.popup-content .legend {
    margin: 10px 0;
}

.popup-content .chart-area {
    margin-bottom: 20px;
}

.popup-content .table-basic th {
    color: #50649c;
}

.popup-content .table-basic .bold {
    font-size: 16px;
    font-weight: bold;
}

.popup-content .table-basic thead .bold {
    height: 50px;
}

.popup-content .table-basic .normal th {
    height: 30px;
    padding: 0;
}

.popup-content .contents-area {
    margin-bottom: 15px;
}

.popup-content .map {
    width: 100%;
    height: 660px;
    border: solid 1px #bec7d5;
}

.popup-content .loading {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    height: 500px;
    background-color: #f0f0f0;
}

.popup-content .loading::before {
    content: "";
    display: block;
    width: 50px;
    height: 50px;
    margin-bottom: 20px;
    border: 5px solid #cecdde;
    border-radius: 50%;
    border-top-color: #8934fa;
    animation: spin 1s ease-in-out infinite;
    -webkit-animation: spin 1s ease-in-out infinite;
}

.popup-content .loading p {
    font-size: 16px;
}

.popup-btns {
    position: absolute;
    top: 11px;
    right: 0;
}

.popup-btns .btn-print, .popup-btns .btn-view {
    margin-left: 5px;
}

.menu-content {
    display: none;
    position: relative;
    margin-bottom: 20px;
}

.menu-content.active {
    display: block;
    position: relative;
}

.menu-content [data-type-pdf-view] {
    height: 1200px;
}

.menu-content .filter-set {
    position: absolute;
    top: 0;
    right: 0;
}

.menu-content .filter-set > .filter > fieldset {
    top: 38px;
    left: auto;
    right: 0;
}

.menu-content .filter-set > .filter.save > a {
    width: auto;
    height: 38px;
    padding: 0 10px 0 33px;
    border: solid 1px #7970c8;
    border-radius: 5px;
    color: #fff;
    font-weight: 500;
    background-position: 10px 50%;
    background-color: #9086ee;
    background-image: url(/res/img/component/icon_save_white-a46301d92d5e518851308bc89139f3f6.svg);
    transition: background-color .3s;
}

.menu-content .filter-set > .filter.save > a:hover {
    background-color: #712cce;
}

.menu-content .filter-set > .filter.save > a.active {
    background-color: #712cce;
    border-color: #712cce;
}

.menu-content .filter-set > .filter > a > .legend-text {
    display: block;
    line-height: 38px;
}

.menu-content .filter-set > .dropdown + .filter.save {
    margin-left: 10px;
}

.menu-content .filter-set .input-field input {
    text-indent: 0;
}

.menu-content table.border-top{
    border-top: solid 1px #d5dae6;
}

.menu-content h4 {
    position: relative;
    color: #111;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.4px;
    padding-left: 12px;
    margin: 20px 0px;
}

.menu-content h4:before {
    position: absolute;
    top: 2px;
    left: 0;
    display: block;
    content: '';
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background: #7632c6;
}

.menu-content h5 {
    position: relative;
    color: #111;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.4px;
    padding-left: 12px;
    margin: 10px 0px;
}

.apt-title > * {
    vertical-align: middle;
}

.apt-title p {
    padding-top: 7px;
    color: #555;
    font-size: 13px;
}

.apt-title .btn-group button:hover {
    border-width: 1px;
}

.apt-title .icon-left {
    height: 26px;
    margin-right: 2px;
    padding-left: 20px;
    padding-right: 10px;
    font-size: 13px;
    line-height: 115%;
}

.apt-title .icon-left.pin-green::before, .apt-title .icon-left.pin-blue::before {
    width: 15px;
    height: 15px;
    left: 5px;
    top: 5px;
}

.apt-title .pin-radius {
    padding-left: 22px;
}

.apt-title .btn-sns {
    float: right;
}

.apt-title .btn-sns .btn-naver {
    float: right;
}

.apt-title .btn-sns .sns {
    clear: both;
    padding-top: 10px;
}

.apt-title .btn-sns .sns > li {
    float: left;
    margin: 5px;
}

.apt-title .btn-sns .sns a {
    display: block;
    width: 25px;
    height: 25px;
    border-radius: 3px;
    text-indent: -9999px;
    background-position: 50%;
    background-repeat: no-repeat;
}

.pin-radius::before {
    display: block;
    position: absolute;
    top: 5px;
    left: 5px;
    content: "";
    width: 14px;
    height: 14px;
    background: url(/res/img/component/icon_radius_17x17-8f104e00564e3a87cb66e4c18d1b5117.svg) center/contain no-repeat;
}

.icon-facebook {
    background-image: url(/res/img/component/icon_facebook-39efd665a9e3e79540fcf8a9fe63aff7.svg);
    background-color: #3b579d;
    background-size: 60%;
}

.icon-twitter {
    background-image: url(/res/img/component/icon_twitter-570ce483f66c9d4557da1a0db7839ea6.svg);
    background-color: #1da1f2;
    background-size: 60%;
}

.icon-kakao {
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_kakao_yellow.svg);
    background-size: contain;
}

.icon-band {
    background-image: url(/res/img/component/icon_band-3704733ba1298fcbc94934f00274a74a.svg);
    background-color: #17c920;
    background-size: 60%;
}

.icon-blog {
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_naver_blog.svg);
    background-size: contain;
}

.icon-naver {
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_naver.svg);
    background-color: #17c920;
    background-size: 60%;
}

.sub-tab ul {
    overflow: hidden;
    border-bottom: solid 2px #5e78d8;
}

.sub-tab li {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    width: calc(12.5% - 3px);
    height: 40px;
    border: solid 1px #dde8fc;
    border-bottom: 0;
    border-radius: 3px 3px 0 0;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.sub-tab li + li {
    margin-left: 3px;
}

.sub-tab li:not(.active):hover {
    background-color: #f5f9ff;
}

.sub-tab .being {
    color: #ff6c00;
}

.sub-tab .active {
    color: #5e78d8;
    font-weight: bold;
    background-color: #dde8fc;
}

.sub-tab [class^=btn-] {
    display: none;
}

.sub-tab.apt {
    margin-left: -10px;
    margin-right: -10px;
}

.sub-tab.apt ul, .sub-tab.apt li {
    border-radius: 0;
}

.sub-tab.apt li {
    font-size: 14px;
}

.sub-tab.apt li:nth-child(2) {
    border-left: 0;
}

.sub-tab.apt [class^=btn-] {
    display: none;
    flex: 0;
    padding: 0 15px;
}

.apt-dashboard {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
}

.apt-dashboard .term {
    padding: 0 15px;
    text-align: center;
}

.apt-dashboard dl {
    position: relative;
    flex: 1;
    text-align: right;
    line-height: 24px;
    padding: 0 15px 0 65px;
    border-left: 1px solid #e9edf3;
}

.apt-dashboard dl dt {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    float: left;
    width: 42px;
    height: 42px;
    color: #fff;
    font-weight: 400;
    line-height: 100%;
    border-radius: 7px;
}

.apt-dashboard dl dd {
    font-size: 14px;
}

.apt-dashboard .sale {
    background-color: #c0b3fe;
}

.apt-dashboard .rent {
    background-color: #fab3e7;
}

.apt-dashboard .difference {
    background-color: #98d0fb;
}

.btn-pdf {
    display: inline-block;
    position: relative;
    height: 28px;
    padding: 0 5px;
    border-radius: 5px;
    border: solid 1px #dadce0;
    color: #444;
    vertical-align: middle;
    transition: border-color .3s;
}

.btn-pdf:hover, .btn-pdf:active {
    border-color: #444;
}

.btn-pdf span::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    vertical-align: -2px;
    background: url(/res/img/component/icon_pdf-ee1eb8af99075020541da95f1994161a.svg) 50%/contain no-repeat;
}

.btn-pdf sup {
    position: absolute;
    top: 50%;
    width: 100%;
    left: -130px;
    font-weight: bold;
    transform: translateY(-50%);
}

.btn-pdf sup::before {
    content: "!";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 3px;
    border-radius: 100%;
    vertical-align: -1px;
    color: #fff;
    line-height: 12px;
    background-color: #444;
}

.print-view {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    height: 592px
}

.photo-thumb {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 170px;
    height: 592px;
}

.photo-thumb ul {
    position: absolute;
    top: 0;
    left: 0;
}

.photo-thumb li {
    position: relative;
    overflow: hidden;
    width: 152px;
    height: 140px;
    padding-top: 30px;
    border: solid 2px #ccc;
    transition: .3s;
    cursor: pointer;
}

.photo-thumb li + li {
    margin-top: 10px;
}

.photo-thumb li img {
    width: 100%;
}

.photo-thumb li:hover {
    border-color: #3d3d3d;
}

.photo-thumb li.active {
    border-color: #8934fa;
}

.photo-thumb li:hover img, .photo-thumb li.active img {
    opacity: 1;
}

.photo-thumb li .checking {
    position: absolute;
    top: 5px;
    left: 5px;
    margin: 0;
}

.photo-slide {
    position: relative;
    overflow-y: auto;
    height: 100%;
}

.photo-slide::-webkit-scrollbar-thumb {
    background: #8934fa;
}

.photo-view {
    position: relative;
    overflow: hidden;
    width: calc(100% - 180px);
    height: 592px;
    text-align: center;
}

.photo-view img {
    display: none;
    width: 100%;
    height: 100%;
}

.photo-view img.active {
    display: inline-block;
    animation: fade-in .5s;
}

.photo-view button {
    position: absolute;
    top: 50%;
    width: 40px;
    height: 80px;
    border-radius: 5px;
    text-indent: -9999px;
    background-color: #222;
    transform: translateY(-50%);
    opacity: .5;
    transition: .3s;
}

.photo-view button:hover {
    opacity: .8;
}

.photo-view button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    transform: translate(-50%, -50%);
    background-color: #fff;
    mask: url(/res/img/component/icon-gt-056a2432a1efd57b76abf471564cb403.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon-gt-056a2432a1efd57b76abf471564cb403.svg) 50%/contain no-repeat;
}

.photo-view button.active {
    opacity: 1;
}

.photo-view button.active::before {
    background-color: #8934fa;
}

.photo-view .btn-prev {
    left: 10px;
}

.photo-view .btn-prev::before {
    transform: rotate(-180deg) translate(50%, 50%);
}

.photo-view .btn-next {
    right: 10px;
}

.data-page {
    padding: 0 10px;
}

.data-page h3 {
    margin-bottom: 10px;
}

.data-page h3 .info {
    margin-left: 5px;
    font-size: 14px;
    line-height: 28px;
    color: #7080ad;
    font-weight: 400;
    letter-spacing: -0.5px;
}

.data-page h4 {
    margin-bottom: 10px;
}

.data-page > p {
    margin-bottom: 20px;
    padding-left: 10px;
}

.data-page .table-basic {
    margin-bottom: 20px;
    border-top: solid 2px #d5dae6;
}

.data-page .table-basic .list-basic {
    margin-bottom: 0;
}

.data-page .table-basic td {
    padding: 10px;
    line-height: 150%;
}

.data-page .real-price li div li {
    padding-right: 0;
    font-size: 13px;
    line-height: 18px;
    letter-spacing: -.5px;
}

.data-page .real-price li div li span {
    right: 3px;
    font-size: 13px;
}

.data-page .real-price .cancel::before {
    top: 8px;
}

.data-page .real-price .cancel b {
    right: 3px;
    bottom: 1px;
}

.bullet-stick {
    position: relative;
    margin-left: 5px;
    padding-left: 10px;
}

.bullet-stick::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 4px;
    height: 12px;
    border-radius: 2px;
    background-color: #712cce;
    transform: translateY(-50%);
}

.list-basic {
    margin-bottom: 20px;
}

.list-basic li {
    position: relative;
    padding-left: 20px;
    line-height: 150%;
}

.list-basic li::before {
    content: "";
    display: block;
    position: absolute;
    top: 9px;
    left: 10px;
    width: 3px;
    height: 3px;
    border-radius: 100%;
    background-color: #712cce;
}

h5.caution-text {
    margin-bottom: 10px;
    font-size: 14px;
}

.caution-text::before {
    content: "!";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    border-radius: 100%;
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    font-weight: bold;
    text-align: center;
    vertical-align: 1px;
    background-color: #dc3535;
}

.option-set .option.type {
    position: absolute;
    bottom: -47px;
    right: 0;
    margin: 0;
    padding-right: 0;
    border-right: 0;
}

.btn-more {
    margin-top: 20px;
    text-align: center;
}

.btn-more button {
    width: 100%;
    height: 40px;
    background-color: #f0f3fc;
}

.btn-more button::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin-left: 7px;
    background-color: #222;
    mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) 50%/contain no-repeat;
    vertical-align: -1px;
    transition: .3s;
}

.btn-more button:hover::after, .btn-more button:active::after {
    vertical-align: -2px;
}

.btn-more.close button:hover::after, .btn-more.close button:active::after {
    vertical-align: -2px;
}

.environment .list {
    position: relative;
    padding-left: 150px;
    border-bottom: solid 1px #dbe0ec;
}

.environment > .list:first-child {
    margin-top: -15px;
}

.environment .list h3 {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 150px;
    font-size: 14px;
}

.environment .list h3::before {
    content: "";
    display: block;
    margin-top: 5px;
    width: 30px;
    height: 30px;
    background-color: #333;
}

.environment .list h3::after {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
    right: 0;
    bottom: 15px;
    width: 1px;
    background-color: #edeff5;
}

.environment .school h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_school.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_school.svg) 50%/contain no-repeat;
}

.environment .move h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_apt.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_apt.svg) 50%/90% no-repeat;
}

.environment .subway h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_subway.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_subway.svg) 50%/contain no-repeat;
}

.environment .bus h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_bus.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_bus.svg) 50%/contain no-repeat;
}

.environment .bank h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_bank.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_bank.svg) 50%/contain no-repeat;
}

.environment .hospital h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_hospital.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_hospital.svg) 50%/contain no-repeat;
}

.environment .mart h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_mart.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_mart.svg) 50%/contain no-repeat;
}

.environment .store h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_store.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_store.svg) 50%/90% no-repeat;
}

.environment .park h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_park.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_park.svg) 50%/90% no-repeat;
}

.environment .public h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_public.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_public.svg) 50%/90% no-repeat;
}

.environment .commercial h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_commercial.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_commercial.svg) 50%/contain no-repeat;
}

.environment .article {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0;
}

.environment .article dl {
    width: calc(25% - 30px);
    margin: 10px 15px;
}

.environment .article dt {
    margin-bottom: 5px;
    color: #333;
    font-size: 16px;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.environment .article dt span {
    font-size: 14px;
}

.environment .article dd {
    position: relative;
    display: inline-block;
    padding-left: 10px;
    color: #666667;
    font-size: 13px;
}

.environment .article dd::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: #8934fa;
    transform: translateY(-50%);
}

.environment .article dd strong {
    color: #8934fa;
}

.environment .article dd:not(.distance) + dd::before {
    display: none;
}

.environment .article dd:not(.distance) + dd::after {
    content: "/";
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
}

.environment .article .category {
    position: relative;
    padding-top: 20px;
    width: calc(75% - 30px);
    margin: 0;
}

.environment .article .category dt {
    display: inline-block;
    position: absolute;
    top: -2px;
    left: 0;
    padding: 2px 5px;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    background-color: #7080ad;
}

.environment .article .category dd {
    color: #7080ad;
}

.environment .article .category dd:nth-child(2) {
    padding-left: 0;
}

.environment .article .category dd:nth-child(2)::before {
    display: none;
}

.environment .article .category dd:not(.distance) + dd::after {
    content: "";
    left: 3px;
    width: 1px;
    height: 12px;
    background-color: #ccc;
}

.environment .article .distance {
    display: block;
}

.environment .article .btn-close {
    position: absolute;
    bottom: 0;
    right: 0;
}

.environment .article .btn-close button {
    width: 30px;
    height: 30px;
    margin: 0;
    text-indent: -9999px;
    background-color: #dbe0ec;
    transition: .3s;
}

.environment .article .btn-close button:hover {
    background-color: #8934fa;
}

.environment .article .btn-close button::before, .environment .article .btn-close button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

.environment .more::before {
    width: 50%;
    height: 3px;
}

.environment .more::after {
    width: 3px;
    height: 50%;
}

.environment .fold::before {
    width: 50%;
    height: 3px;
}

.environment .fold::after {
    display: none;
}

.environment .col-2 {
    display: flex;
    flex-flow: row nowrap;
}

.environment .col-2 .article dl {
    width: auto;
    flex: 1;
}

.relative {
    position: relative;
}

.relative.data h3 {
    height: 36px;
}

.btn-annotate {
    position: absolute;
    top: 0;
    right: 0;
}

.btn-annotate button {
    font-size: 13px;
    font-weight: 500;
}

.btn-annotate .caution-text::before {
    content: "?";
}

.data-btns {
    position: absolute;
    top: 0;
    right: 0;
}

.data-btns > * {
    vertical-align: middle;
}

.data-btns > *:hover {
    border-color: #8934fa;
}

.data-btns .dropdown + .dropdown {
    margin-left: 5px;
}

.data-btns .option-text {
    font-size: 14px;
    line-height: 36px;
}

.data-btns .option-text.date {
    margin-left: 5px;
}

.data-btns button + .dropdown, .data-btns .dropdown + button {
    margin-left: 20px;
}

.data-btns button {
    display: inline-block;
    height: 36px;
    margin-left: 3px;
    padding: 0 10px;
    border-radius: 5px;
    border: solid 1px #dadce0;
    color: #444;
    font-size: 14px;
    font-weight: 500;
    vertical-align: middle;
    transition: border .2s ease-in-out;
}

.data-btns button.active {
    color: #fff;
    border-color: #8934fa;
    background-color: #8934fa;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes fade-out {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

/* 메인 매물 타입 표시 */
.heroine-body .apt-info > .address {
    line-height: 160%;
}

.apt-info .address .type {
    margin-right: 6px;
    padding: 1px 5px;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
}

.apt-info .address .apt {
    background-color: #8934fa;
}

.apt-info .address .ot {
    background-color: #4d79f6;
}

.apt-info .address .lease {
    background-color: #888;
}

/* 알림설정 */
.title-box .tip {
    margin-left: 4px;
    color: #ff4081;
    font-size: 12px;
    font-weight: bold;
}

.title-box .tip::before {
    content: "!";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 4px;
    border-radius: 100%;
    vertical-align: bottom;
    color: #fff;
    text-align: center;
    line-height: 15px;
    background-color: #ff4081;
}

.sidenav-contents .source-list.alarm > li:not(.index):not(.all-alarm) {
    padding: 10px;
}

.sidenav-contents .source-list.alarm .all-alarm strong {
    font-size: 16px;
}

.sidenav-contents .source-list.alarm .all-alarm p {
    margin-bottom: 0;
}

.sidenav-contents .source-list.alarm .index {
    font-size: 13px;
}

.sidenav-contents .source-list.alarm .switch {
    position: absolute;
    top: 50%;
    right: 10px;
    padding-left: 38px;
    padding-right: 0;
    transform: translateY(-50%);
}

.sidenav-contents .source-list.alarm .switch input:checked + .slider.region {
    background-color: rgba(144, 134, 220, .4);
}

.sidenav-contents .source-list.alarm .switch input:checked + .slider.region::before {
    background-color: #9086dc;
}

.sidenav-contents .source-list.alarm .switch input:checked + .slider.apt {
    background-color: rgba(131, 171, 214, .4);
}

.sidenav-contents .source-list.alarm .switch input:checked + .slider.apt::before {
    background-color: #83abd6;
}

.sidenav-contents .source-list.alarm .switch input:disabled + .slider {
    background-color: #e4e6e9 !important;
}

.sidenav-contents .source-list.alarm .switch input:disabled + .slider::before {
    background-color: #fff !important;
}

.all-alarm strong::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 18px;
    margin-right: 5px;
    vertical-align: -3px;
    mask: url(/res/img/component/icon_alarm-8486ee9a69d13624ad2d6593823d731f.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_alarm-8486ee9a69d13624ad2d6593823d731f.svg) 50%/contain no-repeat;
    background-color: #111;
}

.all-alarm.mail strong::before {
    -webkit-mask: url(/res/img/component/icon_mail-40fdb27e60a3f7eea1aae2be20db18c1.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_alarm-8486ee9a69d13624ad2d6593823d731f.svg) 50%/contain no-repeat;
}

.all-alarm.sms strong::before {
    -webkit-mask: url(/res/img/component/icon_message-2f4ca0f875f476e35edf89012206a2cd.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_message-2f4ca0f875f476e35edf89012206a2cd.svg) 50%/contain no-repeat;
}

/* 관심단지 */
.sidenav-contents .item-list .items-in-group {
    position: relative;
    padding: 0;
    padding-top: 10px;
}

.sidenav-contents .item-list .items-in-group:before {
    top: 24px;
    left: 6px;
}

/* 조회버튼 추가로 인해 주석 */
/* .sidenav-contents .item-list .items-in-group li button.delete{position:absolute;top:50%;right:-10px;transform:translateY(-50%);} */

/* 지도 팝업 */
.popup-option > div {
    padding: 10px 20px;
}
.popup-option > div.apt-group {
    padding: 0px;
}

.popup-option > div + div {
    border-top: 1px solid #dbe0ec;
}

.popup-option .topic-btns {
    justify-content: flex-start;
}

.popup-option .topic-btns.right {
    justify-content: flex-end;
}

.popup-option .topic-btns.right button {
    max-width: 200px !important;
    width: 170px;
    max-height: 30px;
}

.popup-option .topic-btns > * + *:not(button):not(label) {
    margin-left: 10px;
}

.popup-option .topic-btns > label + label {
    margin-left: 20px;
}

.popup-option .topic-btns button {
    max-width: 150px;
    border: solid 1px #9fa4af;
    color: #fff;
    background-color: #afb3bb;
    transition: .3s;
}

.popup-option .topic-btns button:hover {
    border-color: #616b7c;
    background-color: #747d8d;
}

.popup-option .topic-btns button.active {
    border-color: #7536cf;
    background-color: #8f55e2;
}

.popup-option .topic-btns .map-filter-set {
    width: 120px;
}

.popup-option .topic-btns .map-filter-set .filter fieldset {
    left: 0;
}

.popup-option .topic-btns .map-filter-set .tips-box {
    left: 166px;
    bottom: auto;
    top: 0;
    width: 430px;
    z-index: 1;
}

.popup-option .topic-btns div + .dropdown.map {
    margin-left: 10px;
}

.popup-option .dropdown.map {
    flex: none;
}

.popup-option .map-filter-set {
    width: auto;
    min-width: 160px;
}

.popup-option + .popup-content {
    border-top: 1px solid #dbe0ec;
}

.selecting-area {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
}

.selecting-area label + label {
    margin-left: 20px;
}

.menu-tab.data ul {
    display: flex;
    justify-content: space-between;
}

.menu-tab.data li {
    flex: 1;
    width: auto;
}

.select-basic {
    position: relative;
    height: 36px;
    padding: 0 24px 0 10px;
    border: 1px solid #dadce0 !important;
    border-radius: 3px;
    font-size: 15px;
    font-weight: 500;
    text-indent: 0;
    background: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg) calc(100% - 9px) 51%/9px no-repeat;
}

.red {
    color: #ed6c69;
}

.orange {
    color: #e68035;
}

.yellow {
    color: #ecb751;
}

.green {
    color: #5fcea4;
}

.blue {
    color: #83abd6;
}

.price_1 {
    color: #80abd7;
}

.price_2 {
    color: #5ecda2;
}

.price_3 {
    color: #fbca4d;
}

.price_4 {
    color: #e68035;
}

.price_5 {
    color: #ed6c69;
}
.kb-mind-week-color-0020   {color: #0ca678;}
.kb-mind-week-color-2040   {color: #12b886;}
.kb-mind-week-color-4060   {color: #20c997;}
.kb-mind-week-color-6080   {color: #38d9a9;}
.kb-mind-week-color-80100  {color: #63e6be;}
.kb-mind-week-color-100120 {color: #ffc078;}
.kb-mind-week-color-120140 {color: #ffa94d;}
.kb-mind-week-color-140160 {color: #ff922b;}
.kb-mind-week-color-160180 {color: #fd7e14;}
.kb-mind-week-color-180200 {color: #f76707;}

.color-set > *.kb-mind-week-color-0020:before {background-color: #0ca678;}
.color-set > *.kb-mind-week-color-2040:before {background-color: #12b886;}
.color-set > *.kb-mind-week-color-4060:before {background-color: #20c997;}
.color-set > *.kb-mind-week-color-6080:before {background-color: #38d9a9;}
.color-set > *.kb-mind-week-color-80100:before {background-color: #63e6be;}
.color-set > *.kb-mind-week-color-100120:before {background-color: #ffc078;}
.color-set > *.kb-mind-week-color-120140:before {background-color: #ffa94d;}
.color-set > *.kb-mind-week-color-140160:before {background-color: #ff922b;}
.color-set > *.kb-mind-week-color-160180:before {background-color: #fd7e14;}
.color-set > *.kb-mind-week-color-180200:before {background-color: #f76707;}

.kb-mind-tran-color-0020   {color: #15aabf;}
.kb-mind-tran-color-2040   {color: #22b8cf;}
.kb-mind-tran-color-4060   {color: #00d0e1;}
.kb-mind-tran-color-6080   {color: #66d9e8;}
.kb-mind-tran-color-80100  {color: #b2ebf2;}
.kb-mind-tran-color-100120 {color: #ffc9c9;}
.kb-mind-tran-color-120140 {color: #ffa8a8;}
.kb-mind-tran-color-140160 {color: #ff8787;}
.kb-mind-tran-color-160180 {color: #ff6b6b;}
.kb-mind-tran-color-180200 {color: #ff5252;}

.color-set > *.kb-mind-tran-color-0020:before   {background-color: #15aabf;}
.color-set > *.kb-mind-tran-color-2040:before   {background-color: #22b8cf;}
.color-set > *.kb-mind-tran-color-4060:before   {background-color: #00d0e1;}
.color-set > *.kb-mind-tran-color-6080:before   {background-color: #66d9e8;}
.color-set > *.kb-mind-tran-color-80100:before  {background-color: #b2ebf2;}
.color-set > *.kb-mind-tran-color-100120:before {background-color: #ffc9c9;}
.color-set > *.kb-mind-tran-color-120140:before {background-color: #ffa8a8;}
.color-set > *.kb-mind-tran-color-140160:before {background-color: #ff8787;}
.color-set > *.kb-mind-tran-color-160180:before {background-color: #ff6b6b;}
.color-set > *.kb-mind-tran-color-180200:before {background-color: #ff5252;}

.kb-mind-prc-color-0020   {color: #228be6;}
.kb-mind-prc-color-2040   {color: #339af0;}
.kb-mind-prc-color-4060   {color: #51b4ff;}
.kb-mind-prc-color-6080   {color: #74c0fc;}
.kb-mind-prc-color-80100  {color: #a5d8ff;}
.kb-mind-prc-color-100120 {color: #fcc2d7;}
.kb-mind-prc-color-120140 {color: #faa2c1;}
.kb-mind-prc-color-140160 {color: #f783ac;}
.kb-mind-prc-color-160180 {color: #f06595;}
.kb-mind-prc-color-180200 {color: #e74980;}

.color-set > *.kb-mind-prc-color-0020:before   {background-color: #228be6;}
.color-set > *.kb-mind-prc-color-2040:before   {background-color: #339af0;}
.color-set > *.kb-mind-prc-color-4060:before   {background-color: #51b4ff;}
.color-set > *.kb-mind-prc-color-6080:before   {background-color: #74c0fc;}
.color-set > *.kb-mind-prc-color-80100:before  {background-color: #a5d8ff;}
.color-set > *.kb-mind-prc-color-100120:before {background-color: #fcc2d7;}
.color-set > *.kb-mind-prc-color-120140:before {background-color: #faa2c1;}
.color-set > *.kb-mind-prc-color-140160:before {background-color: #f783ac;}
.color-set > *.kb-mind-prc-color-160180:before {background-color: #f06595;}
.color-set > *.kb-mind-prc-color-180200:before {background-color: #e74980;}

/* 관심경매 */
/*.sidenav-contents .item-list.auction > li {*/
/*    padding-left: 55px;*/
/*}*/

.sidenav-contents .item-list.auction > li::before {
    position: absolute;
    top: 50%;
    left: 20px;
    width: 30px;
    height: 30px;
    border-radius: 100%;
    text-align: center;
    color: #fff;
    line-height: 30px;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: 45%;
    transform: translateY(-50%);
}

.sidenav-contents .item-list.auction > li > strong {
    padding-right: 70px;
}

.sidenav-contents .item-list.auction li strong .btn-alarm {
    right: 20px;
}

.gyung::before {
    content: "경";
    background-color: #5b18f1;
}

.gong::before {
    content: "공";
    background-color: #8f55e2;
}

.mouse-right-list {
    padding: 5px;
    border: solid 1px #a9b2c7;
    border-radius: 3px;
    background-color: #fff;
}

.mouse-right-list li {
    padding: 5px 20px;
    font-size: 14px;
    cursor: default;
}

.mouse-right-list li:hover {
    color: #fff;
    background-color: #9086dc;
}

/* map box */
.mapboxgl-ctrl-top-left {
    top: auto;
    left: 120px;
    bottom: 136px;
    display: none;
}

.mapboxgl-ctrl-top-left .mapboxgl-ctrl {
    margin: 0 !important;
}

.mapbox-directions-step {
    color: #7080ad !important;
}

.mapbox-directions-instructions {
    overflow-y: auto;
}

.mapbox-directions-instructions-wrapper {
    max-height: 30vh !important;
}

.directions-control.directions-control-directions {
    margin-top: 0 !important;
    border: 1px solid #d9e1ea !important;
    border-radius: 0 0 3px 3px !important;
    box-shadow: 0 0 3px rgba(0, 0, 0, .1) !important;
    background: #fff !important;
}

.mapbox-directions-route-summary {
    background-color: #f3f6fb !important;
}

.mapbox-directions-component-keyline {
    box-shadow: none !important
}

.mapbox-directions-profile {
    padding: 10px !important;
    border-radius: 0 !important;
    border: 1px solid #d9e1ea !important;
    border-bottom: 0 !important;
    box-shadow: 0 0 3px rgba(0, 0, 0, .1) !important;
}

.mapbox-directions-profile input[type=radio]:checked + label {
    color: #fff !important;
    background-color: #9086dc !important;
}

.mapbox-directions-profile label {
    color: #7080ad !important;
    font-family: "Noto Sans KR", sans-serif;
}

.mapbox-directions-route-summary h1 {
    padding-left: 5px !important;
    color: #7080ad !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
}

.mapbox-directions-route-summary span {
    margin-left: 10px;
}

.mapbox-directions-route-summary > *::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: -3px;
    background-color: #7080ad;
}

.mapbox-directions-route-summary h1::before {
    mask: url(/res/img/component/icon_distance-69b473d41286cded2ef89a543f79c94d.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_distance-69b473d41286cded2ef89a543f79c94d.svg) 50%/contain no-repeat;
}

.mapbox-directions-route-summary span::before {
    mask: url(/res/img/component/icon_time-3ae35e4214193c62f8d6f6ac57c5daa1.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_time-3ae35e4214193c62f8d6f6ac57c5daa1.svg) 50%/contain no-repeat;
}

.mapbox-directions-step::after {
    border-left-color: #d9e1ea !important;
}

.mapbox-directions-step > div {
    letter-spacing: 0 !important;
}

.mapbox-directions-route-summary span {
    color: #7080ad !important
}

.mapbox-directions-instructions::-webkit-scrollbar {
    width: 5px !important;
    height: 1px !important;
    background: rgba(0, 0, 0, .05) !important;
}

.mapbox-directions-instructions::-webkit-scrollbar-track {
    background-color: transparent !important;
}

.mapbox-directions-instructions::-webkit-scrollbar-thumb {
    background: #dadeea !important;
    border: 0 none #ffffff !important;
}

.mapbox-directions-steps li span {
    background-image: none !important;
    background-color: #7080ad !important;
}

.mapbox-directions-origin, .directions-icon.directions-icon-reverse.directions-reverse.js-reverse-inputs, .mapbox-directions-destination {
    display: none;
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {
    border-color: transparent !important;
}

.mapboxgl-popup-content {
    padding: 0 !important;
    box-shadow: none !important;
    background-color: transparent !important;
}

.directions-icon-arrive {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgaWQ9InN2ZzUzMjciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIwIDIwIj48ZGVmcyBpZD0iZGVmczUzMjkiLz48bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNTMzMiIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyBpZD0iZzU5MzYiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgaWQ9Imc1OTMyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgaWQ9Imc2MDM4IiBmaWxsPSIjZmZmIi8+PGcgaWQ9InRleHQ2NjA2IiBzdHlsZT0iLWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjonT3BlbiBTYW5zIEJvbGQnO2Jsb2NrLXByb2dyZXNzaW9uOnRiO2NvbG9yOiNGRkY7ZGlyZWN0aW9uOmx0cjtkaXNwbGF5OmlubGluZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6I0ZGRjtmb250LWZhbWlseTonT3BlbiBTYW5zJztmb250LXNpemU6MTYuODE7Zm9udC13ZWlnaHQ6Ym9sZDtsZXR0ZXItc3BhY2luZzpub3JtYWw7bGluZS1oZWlnaHQ6MTI1O292ZXJmbG93OnZpc2libGU7dGV4dC1hbGlnbjpjZW50ZXI7dGV4dC1hbmNob3I6bWlkZGxlO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIj48cGF0aCBkPSJtMzIwNiA5OTYuMzYgMy43MyAwcTIuNTUgMCAzLjcgMC43MyAxLjE2IDAuNzIgMS4xNiAyLjMxIDAgMS4wOC0wLjUxIDEuNzYtMC41IDAuNjktMS4zNCAwLjgzbDAgMC4wOHExLjE0IDAuMjUgMS42NCAwLjk1IDAuNTEgMC43IDAuNTEgMS44NiAwIDEuNjQtMS4xOSAyLjU2LTEuMTggMC45Mi0zLjIyIDAuOTJsLTQuNDkgMCAwLTEyem0yLjU0IDQuNzUgMS40OCAwcTEuMDMgMCAxLjQ5LTAuMzIgMC40Ny0wLjMyIDAuNDctMS4wNiAwLTAuNjktMC41MS0wLjk4LTAuNS0wLjMtMS41OS0wLjNsLTEuMzQgMCAwIDIuNjd6bTAgMi4wMiAwIDMuMTMgMS42NiAwcTEuMDUgMCAxLjU1LTAuNCAwLjUtMC40IDAuNS0xLjIzIDAtMS40OS0yLjEzLTEuNDlsLTEuNTggMHoiIGlkPSJwYXRoMjcyMTIiLz48L2c+PC9nPjwvc3ZnPg==) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgaWQ9InN2ZzUzMjciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIwIDIwIj48ZGVmcyBpZD0iZGVmczUzMjkiLz48bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNTMzMiIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyBpZD0iZzU5MzYiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgaWQ9Imc1OTMyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgaWQ9Imc2MDM4IiBmaWxsPSIjZmZmIi8+PGcgaWQ9InRleHQ2NjA2IiBzdHlsZT0iLWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjonT3BlbiBTYW5zIEJvbGQnO2Jsb2NrLXByb2dyZXNzaW9uOnRiO2NvbG9yOiNGRkY7ZGlyZWN0aW9uOmx0cjtkaXNwbGF5OmlubGluZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6I0ZGRjtmb250LWZhbWlseTonT3BlbiBTYW5zJztmb250LXNpemU6MTYuODE7Zm9udC13ZWlnaHQ6Ym9sZDtsZXR0ZXItc3BhY2luZzpub3JtYWw7bGluZS1oZWlnaHQ6MTI1O292ZXJmbG93OnZpc2libGU7dGV4dC1hbGlnbjpjZW50ZXI7dGV4dC1hbmNob3I6bWlkZGxlO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIj48cGF0aCBkPSJtMzIwNiA5OTYuMzYgMy43MyAwcTIuNTUgMCAzLjcgMC43MyAxLjE2IDAuNzIgMS4xNiAyLjMxIDAgMS4wOC0wLjUxIDEuNzYtMC41IDAuNjktMS4zNCAwLjgzbDAgMC4wOHExLjE0IDAuMjUgMS42NCAwLjk1IDAuNTEgMC43IDAuNTEgMS44NiAwIDEuNjQtMS4xOSAyLjU2LTEuMTggMC45Mi0zLjIyIDAuOTJsLTQuNDkgMCAwLTEyem0yLjU0IDQuNzUgMS40OCAwcTEuMDMgMCAxLjQ5LTAuMzIgMC40Ny0wLjMyIDAuNDctMS4wNiAwLTAuNjktMC41MS0wLjk4LTAuNS0wLjMtMS41OS0wLjNsLTEuMzQgMCAwIDIuNjd6bTAgMi4wMiAwIDMuMTMgMS42NiAwcTEuMDUgMCAxLjU1LTAuNCAwLjUtMC40IDAuNS0xLjIzIDAtMS40OS0yLjEzLTEuNDlsLTEuNTggMHoiIGlkPSJwYXRoMjcyMTIiLz48L2c+PC9nPjwvc3ZnPg==) 50%/contain no-repeat;
}

.directions-icon-slight-left {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwNiA5OTYuNCAwIDcuNSAzLjEtMy4xIDIuOSAzIDAgNC42IDIgMCAwLTUuNC0zLjUtMy41IDMtM3oiIGZpbGw9IiNGRkYiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwNiA5OTYuNCAwIDcuNSAzLjEtMy4xIDIuOSAzIDAgNC42IDIgMCAwLTUuNC0zLjUtMy41IDMtM3oiIGZpbGw9IiNGRkYiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==) 50%/contain no-repeat;
}

.directions-icon-slight-right {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwNi41IDk5Ni40IDMgMy0zLjUgMy41IDAgNS40IDIgMCAwLTQuNiAyLjktMyAzLjEgMy4xIDAtNy41eiIgZmlsbD0iI0ZGRiIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSwtMikiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMjQuNzI0NCkiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwNi41IDk5Ni40IDMgMy0zLjUgMy41IDAgNS40IDIgMCAwLTQuNiAyLjktMyAzLjEgMy4xIDAtNy41eiIgZmlsbD0iI0ZGRiIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSwtMikiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMjQuNzI0NCkiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+) 50%/contain no-repeat;
}

.directions-icon-straight {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIxNS41IDEwMDEuNC01LjUtNS41LTUuNSA1LjUgNC41IDAgMCA3IDIgMCAwLTd6IiBmaWxsPSIjRkZGIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDA0LjcyNDQpIiBvcGFjaXR5PSIwLjUiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Im0zNDA3IDk0Ny40LTIgNiA3LjMgMC0yIDYgMiAwIDQtMTItMS4yIDB6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIxNS41IDEwMDEuNC01LjUtNS41LTUuNSA1LjUgNC41IDAgMCA3IDIgMCAwLTd6IiBmaWxsPSIjRkZGIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDA0LjcyNDQpIiBvcGFjaXR5PSIwLjUiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Im0zNDA3IDk0Ny40LTIgNiA3LjMgMC0yIDYgMiAwIDQtMTItMS4yIDB6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==) 50%/contain no-repeat;
}

.directions-icon-depart {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgaWQ9InN2ZzUzMjciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIwIDIwIj48ZGVmcyBpZD0iZGVmczUzMjkiLz48bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNTMzMiIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyBpZD0iZzU5MzYiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgaWQ9Imc1OTMyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgaWQ9Imc2MDM4IiBmaWxsPSIjZmZmIi8+PGcgaWQ9InRleHQ2NTkzIiBzdHlsZT0iLWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjonT3BlbiBTYW5zIEJvbGQnO2Jsb2NrLXByb2dyZXNzaW9uOnRiO2NvbG9yOiNGRkY7ZGlyZWN0aW9uOmx0cjtkaXNwbGF5OmlubGluZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6I0ZGRjtmb250LWZhbWlseTonT3BlbiBTYW5zJztmb250LXNpemU6MTYuNzQ7Zm9udC13ZWlnaHQ6Ym9sZDtsZXR0ZXItc3BhY2luZzpub3JtYWw7bGluZS1oZWlnaHQ6MTI1O292ZXJmbG93OnZpc2libGU7dGV4dC1hbGlnbjpjZW50ZXI7dGV4dC1hbmNob3I6bWlkZGxlO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIj48cGF0aCBkPSJtMzIxMy4wNCAxMDA4LjM2LTAuODctMi44NC00LjM2IDAtMC44NyAyLjg0LTIuNzMgMCA0LjIyLTEyIDMuMSAwIDQuMjMgMTItMi43MyAwem0tMS40Ny00Ljk3cS0xLjItMy44Ny0xLjM2LTQuMzctMC4xNS0wLjUxLTAuMjEtMC44LTAuMjcgMS4wNS0xLjU0IDUuMTdsMy4xMSAweiIgaWQ9InBhdGgyNzIwOSIvPjwvZz48L2c+PC9zdmc+) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgaWQ9InN2ZzUzMjciIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDIwIDIwIj48ZGVmcyBpZD0iZGVmczUzMjkiLz48bWV0YWRhdGEgaWQ9Im1ldGFkYXRhNTMzMiIvPjxnIGlkPSJsYXllcjEiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyBpZD0iZzU5MzYiIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgaWQ9Imc1OTMyIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgaWQ9Imc2MDM4IiBmaWxsPSIjZmZmIi8+PGcgaWQ9InRleHQ2NTkzIiBzdHlsZT0iLWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjonT3BlbiBTYW5zIEJvbGQnO2Jsb2NrLXByb2dyZXNzaW9uOnRiO2NvbG9yOiNGRkY7ZGlyZWN0aW9uOmx0cjtkaXNwbGF5OmlubGluZTtlbmFibGUtYmFja2dyb3VuZDphY2N1bXVsYXRlO2ZpbGwtcnVsZTpub256ZXJvO2ZpbGw6I0ZGRjtmb250LWZhbWlseTonT3BlbiBTYW5zJztmb250LXNpemU6MTYuNzQ7Zm9udC13ZWlnaHQ6Ym9sZDtsZXR0ZXItc3BhY2luZzpub3JtYWw7bGluZS1oZWlnaHQ6MTI1O292ZXJmbG93OnZpc2libGU7dGV4dC1hbGlnbjpjZW50ZXI7dGV4dC1hbmNob3I6bWlkZGxlO3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIj48cGF0aCBkPSJtMzIxMy4wNCAxMDA4LjM2LTAuODctMi44NC00LjM2IDAtMC44NyAyLjg0LTIuNzMgMCA0LjIyLTEyIDMuMSAwIDQuMjMgMTItMi43MyAwem0tMS40Ny00Ljk3cS0xLjItMy44Ny0xLjM2LTQuMzctMC4xNS0wLjUxLTAuMjEtMC44LTAuMjcgMS4wNS0xLjU0IDUuMTdsMy4xMSAweiIgaWQ9InBhdGgyNzIwOSIvPjwvZz48L2c+PC9zdmc+) 50%/contain no-repeat;
}

.directions-icon-roundabout {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIxMCA5OTUuNGMtMS41IDAtMy4xIDAuNi00LjIgMS43LTIuMyAyLjMtMi4zIDYuMiAwIDguNWwxLjQtMS40Yy0xLjYtMS42LTEuNi00LjEgMC01LjYgMS42LTEuNiA0LjEtMS42IDUuNiAwIDEuNiAxLjYgMS42IDQuMSAwIDUuNi0wLjggMC44LTEuOCAxLjItMi44IDEuMmwtMSAwIDAgNCAyIDAgMC0yLjFjMS4yLTAuMiAyLjQtMC44IDMuMy0xLjcgMi4zLTIuMyAyLjMtNi4yIDAtOC41LTEuMi0xLjItMi43LTEuNy00LjItMS43eiIgc3R5bGU9Ii1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246U2FucztiYXNlbGluZS1zaGlmdDpiYXNlbGluZTtibG9jay1wcm9ncmVzc2lvbjp0YjtkaXJlY3Rpb246bHRyO2ZpbGw6I0ZGRjtmb250LWZhbWlseTpTYW5zO2ZvbnQtc2l6ZTptZWRpdW07bGV0dGVyLXNwYWNpbmc6bm9ybWFsO2xpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtYW5jaG9yOnN0YXJ0O3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDA0LjcyNDQpIiBvcGFjaXR5PSIwLjUiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIxMCA5OTUuNGMtMS41IDAtMy4xIDAuNi00LjIgMS43LTIuMyAyLjMtMi4zIDYuMiAwIDguNWwxLjQtMS40Yy0xLjYtMS42LTEuNi00LjEgMC01LjYgMS42LTEuNiA0LjEtMS42IDUuNiAwIDEuNiAxLjYgMS42IDQuMSAwIDUuNi0wLjggMC44LTEuOCAxLjItMi44IDEuMmwtMSAwIDAgNCAyIDAgMC0yLjFjMS4yLTAuMiAyLjQtMC44IDMuMy0xLjcgMi4zLTIuMyAyLjMtNi4yIDAtOC41LTEuMi0xLjItMi43LTEuNy00LjItMS43eiIgc3R5bGU9Ii1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246U2FucztiYXNlbGluZS1zaGlmdDpiYXNlbGluZTtibG9jay1wcm9ncmVzc2lvbjp0YjtkaXJlY3Rpb246bHRyO2ZpbGw6I0ZGRjtmb250LWZhbWlseTpTYW5zO2ZvbnQtc2l6ZTptZWRpdW07bGV0dGVyLXNwYWNpbmc6bm9ybWFsO2xpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtYW5jaG9yOnN0YXJ0O3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDA0LjcyNDQpIiBvcGFjaXR5PSIwLjUiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=) 50%/contain no-repeat;
}

.directions-icon-error {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTMyMTAgOTk2LjRjLTAuNiAwLTEuMiAwLjMtMS41IDAuOGwtNC4zIDkuMmMtMC41IDAuOCAwIDIgMS4xIDJsNC43IDAgNC43IDBjMS4xIDAgMS42LTEuMiAxLjEtMmwtNC4zLTkuMmMtMC4zLTAuNS0wLjktMC44LTEuNS0wLjh6bTAgMyAxIDEgMCAzLTIgMCAwLTN6bS0xIDUgMiAwIDAgMi0yIDB6IiBmaWxsPSIjMDAwIi8+PC9nPjwvc3ZnPg==) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTMyMTAgOTk2LjRjLTAuNiAwLTEuMiAwLjMtMS41IDAuOGwtNC4zIDkuMmMtMC41IDAuOCAwIDIgMS4xIDJsNC43IDAgNC43IDBjMS4xIDAgMS42LTEuMiAxLjEtMmwtNC4zLTkuMmMtMC4zLTAuNS0wLjktMC44LTEuNS0wLjh6bTAgMyAxIDEgMCAzLTIgMCAwLTN6bS0xIDUgMiAwIDAgMi0yIDB6IiBmaWxsPSIjMDAwIi8+PC9nPjwvc3ZnPg==) 50%/contain no-repeat;
}

.directions-icon-reverse {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTMyMTAgOTk1LjktNC41IDQuNSAzLjUgMCAwIDQtMy41IDAgNC41IDQuNSA0LjUtNC41LTMuNSAwIDAtNCAzLjUgMC00LjUtNC41eiIgZmlsbD0iIzAwMCIvPjwvZz48L3N2Zz4=) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTMyMTAgOTk1LjktNC41IDQuNSAzLjUgMCAwIDQtMy41IDAgNC41IDQuNSA0LjUtNC41LTMuNSAwIDAtNCAzLjUgMC00LjUtNC41eiIgZmlsbD0iIzAwMCIvPjwvZz48L3N2Zz4=) 50%/contain no-repeat;
}

.directions-icon-sharp-left {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIxMy42IDk5Ni40LTYuNSA2LjUtMy0zIDAgNy41IDcuNSAwLTMuMS0zLjEgNC42LTQuNSAwIDUuNiAyIDAgMC04LTEuNC0xeiIgZmlsbD0iI0ZGRiIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSwtMikiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMjQuNzI0NCkiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIxMy42IDk5Ni40LTYuNSA2LjUtMy0zIDAgNy41IDcuNSAwLTMuMS0zLjEgNC42LTQuNSAwIDUuNiAyIDAgMC04LTEuNC0xeiIgZmlsbD0iI0ZGRiIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSwtMikiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMjQuNzI0NCkiIGZpbGw9IiNmZmYiLz48L2c+PC9zdmc+) 50%/contain no-repeat;
}

.directions-icon-sharp-right {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwNi40IDk5Ni40LTEuNCAxIDAgOCAyIDAgMC01LjYgNC42IDQuNS0zLjEgMy4xIDcuNSAwIDAtNy41LTMgMy02LjUtNi41eiIgZmlsbD0iI0ZGRiIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSwtMikiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMjQuNzI0NCkiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJtMzQwNyA5NDcuNC0yIDYgNy4zIDAtMiA2IDIgMCA0LTEyLTEuMiAweiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwNi40IDk5Ni40LTEuNCAxIDAgOCAyIDAgMC01LjYgNC42IDQuNS0zLjEgMy4xIDcuNSAwIDAtNy41LTMgMy02LjUtNi41eiIgZmlsbD0iI0ZGRiIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAwNC43MjQ0KSIgb3BhY2l0eT0iMC41Ii8+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMSwtMikiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMjQuNzI0NCkiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJtMzQwNyA5NDcuNC0yIDYgNy4zIDAtMiA2IDIgMCA0LTEyLTEuMiAweiIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=) 50%/contain no-repeat;
}

.directions-icon-left {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwOSA5OTUuOSAwIDQuNSA1IDAgMSAxIDAgNi0yIDAgMC01LTQgMCAwIDQuNS01LjUtNS41eiIgc3R5bGU9Ii1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246U2FucztiYXNlbGluZS1zaGlmdDpiYXNlbGluZTtibG9jay1wcm9ncmVzc2lvbjp0YjtkaXJlY3Rpb246bHRyO2ZpbGw6I0ZGRjtmb250LWZhbWlseTpTYW5zO2ZvbnQtc2l6ZTptZWRpdW07bGV0dGVyLXNwYWNpbmc6bm9ybWFsO2xpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtYW5jaG9yOnN0YXJ0O3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDA0LjcyNDQpIiBvcGFjaXR5PSIwLjUiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwOSA5OTUuOSAwIDQuNSA1IDAgMSAxIDAgNi0yIDAgMC01LTQgMCAwIDQuNS01LjUtNS41eiIgc3R5bGU9Ii1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246U2FucztiYXNlbGluZS1zaGlmdDpiYXNlbGluZTtibG9jay1wcm9ncmVzc2lvbjp0YjtkaXJlY3Rpb246bHRyO2ZpbGw6I0ZGRjtmb250LWZhbWlseTpTYW5zO2ZvbnQtc2l6ZTptZWRpdW07bGV0dGVyLXNwYWNpbmc6bm9ybWFsO2xpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtYW5jaG9yOnN0YXJ0O3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDA0LjcyNDQpIiBvcGFjaXR5PSIwLjUiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgZmlsbD0iI2ZmZiIvPjwvZz48L3N2Zz4=) 50%/contain no-repeat;
}

.directions-icon-right {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIxMSA5OTUuOSAwIDQuNS01IDAtMSAxIDAgNiAyIDAgMC01IDQgMCAwIDQuNSA1LjUtNS41eiIgc3R5bGU9Ii1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246U2FucztiYXNlbGluZS1zaGlmdDpiYXNlbGluZTtibG9jay1wcm9ncmVzc2lvbjp0YjtkaXJlY3Rpb246bHRyO2ZpbGw6I0ZGRjtmb250LWZhbWlseTpTYW5zO2ZvbnQtc2l6ZTptZWRpdW07bGV0dGVyLXNwYWNpbmc6bm9ybWFsO2xpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtYW5jaG9yOnN0YXJ0O3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDA0LjcyNDQpIiBvcGFjaXR5PSIwLjUiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Im0zNDA3IDk0Ny40LTIgNiA3LjMgMC0yIDYgMiAwIDQtMTItMS4yIDB6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIxMSA5OTUuOSAwIDQuNS01IDAtMSAxIDAgNiAyIDAgMC01IDQgMCAwIDQuNSA1LjUtNS41eiIgc3R5bGU9Ii1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246U2FucztiYXNlbGluZS1zaGlmdDpiYXNlbGluZTtibG9jay1wcm9ncmVzc2lvbjp0YjtkaXJlY3Rpb246bHRyO2ZpbGw6I0ZGRjtmb250LWZhbWlseTpTYW5zO2ZvbnQtc2l6ZTptZWRpdW07bGV0dGVyLXNwYWNpbmc6bm9ybWFsO2xpbmUtaGVpZ2h0Om5vcm1hbDt0ZXh0LWFsaWduOnN0YXJ0O3RleHQtYW5jaG9yOnN0YXJ0O3RleHQtZGVjb3JhdGlvbi1saW5lOm5vbmU7dGV4dC1kZWNvcmF0aW9uOm5vbmU7dGV4dC1pbmRlbnQ6MDt0ZXh0LXRyYW5zZm9ybTpub25lO3dvcmQtc3BhY2luZzpub3JtYWw7d3JpdGluZy1tb2RlOmxyLXRiIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDA0LjcyNDQpIiBvcGFjaXR5PSIwLjUiLz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLC0yKSIvPjxnIHRyYW5zZm9ybT0ibWF0cml4KDEsMCwwLC0xLDEsMjAyNC43MjQ0KSIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Im0zNDA3IDk0Ny40LTIgNiA3LjMgMC0yIDYgMiAwIDQtMTItMS4yIDB6IiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==) 50%/contain no-repeat;
}

.directions-icon-uturn {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwOSA5OTYuNGMtMS43IDAtMy4xIDAuNi0zLjkgMS42LTAuOCAxLTEuMSAyLjItMS4xIDMuNGwwIDYgMiAwIDAtNmMwLTAuOCAwLjItMS42IDAuNy0yLjEgMC40LTAuNSAxLjEtMC45IDIuMy0wLjkgMS4zIDAgMS45IDAuNCAyLjMgMC45IDAuNCAwLjUgMC43IDEuMyAwLjcgMi4xbDAgMi00LjUgMCA1LjUgNS41IDUuNS01LjUtNC41IDAgMC0yYzAtMS4yLTAuMy0yLjQtMS4xLTMuNC0wLjgtMS0yLjItMS42LTMuOS0xLjZ6IiBzdHlsZT0iLWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zO2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2Jsb2NrLXByb2dyZXNzaW9uOnRiO2RpcmVjdGlvbjpsdHI7ZmlsbDojRkZGO2ZvbnQtZmFtaWx5OlNhbnM7Zm9udC1zaXplOm1lZGl1bTtsZXR0ZXItc3BhY2luZzpub3JtYWw7bGluZS1oZWlnaHQ6bm9ybWFsO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1hbmNob3I6c3RhcnQ7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb246bm9uZTt0ZXh0LWluZGVudDowO3RleHQtdHJhbnNmb3JtOm5vbmU7d29yZC1zcGFjaW5nOm5vcm1hbDt3cml0aW5nLW1vZGU6bHItdGIiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48cGF0aCBkPSJtMzIwOSA5OTYuNGMtMS43IDAtMy4xIDAuNi0zLjkgMS42LTAuOCAxLTEuMSAyLjItMS4xIDMuNGwwIDYgMiAwIDAtNmMwLTAuOCAwLjItMS42IDAuNy0yLjEgMC40LTAuNSAxLjEtMC45IDIuMy0wLjkgMS4zIDAgMS45IDAuNCAyLjMgMC45IDAuNCAwLjUgMC43IDEuMyAwLjcgMi4xbDAgMi00LjUgMCA1LjUgNS41IDUuNS01LjUtNC41IDAgMC0yYzAtMS4yLTAuMy0yLjQtMS4xLTMuNC0wLjgtMS0yLjItMS42LTMuOS0xLjZ6IiBzdHlsZT0iLWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpTYW5zO2Jhc2VsaW5lLXNoaWZ0OmJhc2VsaW5lO2Jsb2NrLXByb2dyZXNzaW9uOnRiO2RpcmVjdGlvbjpsdHI7ZmlsbDojRkZGO2ZvbnQtZmFtaWx5OlNhbnM7Zm9udC1zaXplOm1lZGl1bTtsZXR0ZXItc3BhY2luZzpub3JtYWw7bGluZS1oZWlnaHQ6bm9ybWFsO3RleHQtYWxpZ246c3RhcnQ7dGV4dC1hbmNob3I6c3RhcnQ7dGV4dC1kZWNvcmF0aW9uLWxpbmU6bm9uZTt0ZXh0LWRlY29yYXRpb246bm9uZTt0ZXh0LWluZGVudDowO3RleHQtdHJhbnNmb3JtOm5vbmU7d29yZC1zcGFjaW5nOm5vcm1hbDt3cml0aW5nLW1vZGU6bHItdGIiLz48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PC9nPjwvc3ZnPg==) 50%/contain no-repeat;
}

.directions-icon-waypoint {
    mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTMyMTUgMTAwMS40YzAgMi44LTUgOC01IDggMCAwLTUtNS4yLTUtOCAwLTIuOCAyLjItNSA1LTUgMi44IDAgNSAyLjIgNSA1eiIgZmlsbD0iI0ZGRiIvPjwvZz48L3N2Zz4=) 50%/contain no-repeat;
    -webkit-mask: url(data:image/svg+xml;base64,PHN2ZyB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgMjAgMjAiPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMjAwLC05OTIuMzYyMTgpIj48ZyB0cmFuc2Zvcm09Im1hdHJpeCgxLDAsMCwtMSwxLDIwMDQuNzI0NCkiIG9wYWNpdHk9IjAuNSIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEsLTIpIi8+PGcgdHJhbnNmb3JtPSJtYXRyaXgoMSwwLDAsLTEsMSwyMDI0LjcyNDQpIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0ibTMyMTUgMTAwMS40YzAgMi44LTUgOC01IDggMCAwLTUtNS4yLTUtOCAwLTIuOCAyLjItNSA1LTUgMi44IDAgNSAyLjIgNSA1eiIgZmlsbD0iI0ZGRiIvPjwvZz48L3N2Zz4=) 50%/contain no-repeat;
}

.dot {
    overflow: hidden;
    float: left;
    width: 12px;
    height: 12px;
    background: url('http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/mini_circle.png');
}

.dotOverlay {
    position: relative;
    bottom: 10px;
    border-radius: 6px;
    border: 1px solid #ccc;
    border-bottom: 2px solid #ddd;
    float: left;
    font-size: 12px;
    padding: 5px;
    background: #fff;
}

.dotOverlay:nth-of-type(n) {
    border: 0;
    box-shadow: 0px 1px 2px #888;
}

.number {
    font-weight: bold;
    color: #00a0e9;
}

.dotOverlay:after {
    content: '';
    position: absolute;
    margin-left: -6px;
    left: 50%;
    bottom: -8px;
    width: 11px;
    height: 8px;
    background: url('http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white_small.png')
}

.distanceInfo {
    position: relative;
    top: 5px;
    left: 5px;
    list-style: none;
    margin: 0;
    padding: 15px 15px 10px 15px;
}

.distanceInfo .label {
    display: inline-block;
    width: 50px;
    color: #000;
    text-align: left;
}

.distanceInfo:after {
    content: none;
}

.mapboxgl-popup-content > .box-close {
    position: absolute;
    top: -2px;
    right: -15px;
    width: 30px;
    height: 30px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_close_tiny.svg) 50%/contain no-repeat;
    z-index: 1;
}

.star-off-ani {
    display: inline-block;
    width: 22px;
    height: 20px;
    cursor: pointer;
    background: url(/res/img/component/star_off_ani-feb197dcfe98c6413f3e41a309bd965f.png) no-repeat;
    background-position: 0 0;
    animation: fav 1.3s steps(56) infinite;
}

.star-off-ani:hover, .star-off-ani:active {
    background: url(/res/img/common/star-7cd60fa8eb0a3bb6735eefd471361a9d.png) 0 0 no-repeat;
    animation: none;
}

.modal-help {
    width: 1200px;
    overflow: hidden;
    background-color: #000;
}

.video-container {
    position: relative;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
}

.region-checking > span {
    color: #50649c;
    font-size: 14px;
    line-height: 30px;
}

.icon-kab {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-right: 4px;
    border-radius: 100%;
    vertical-align: super;
    color: #50649c;
    background-color: #ff7045;
}

.depth-set .icon-kab {
    top: 17px;
    right: 2px;
}

.tips-area, .k-link {
    position: relative;
}

.icon-tips::after {
    content: "?";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-left: 5px;
    border-radius: 100%;
    font-size: 14px;
    font-family: "Noto Sans KR", AppleSDGothicNeo, Dotum, Droid Sans, arial, sans-serif;
    font-weight: bold;
    font-style: normal;
    text-align: center;
    line-height: 20px;
    background-color: #edf1f6;
    cursor: pointer;
    transition: .3s ease;
}

.icon-tips:hover::after, .icon-tips:active::after {
    color: #fff;
    background-color: #8934fa;
}

.icon-tips:hover + .tips-box, .icon-tips:active + .tisp-box {
    opacity: 1;
    visibility: visible;
}

.icon-tips.color-tips::after {
    background-color: #acaebf;
}

.icon-tips.color-tips:hover::after, .icon-tips.color-tips:active::after {
    color: #fff;
    background-color: #3774c2;
}

.tips-box {
    position: absolute;
    bottom: 30px;
    right: 0;
    max-width: 500px;
    border: solid 1px #dfe6ef;
    border-radius: 3px;
    box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, .1);
    background-color: #fff;
    opacity: 0;
    visibility: hidden;
    transition: .2s ease;
    z-index: 10;
}

.tips-box.top {
    bottom: auto;
    top: 0;
}

.tips-box.left {
    right: auto;
    left: 30px;
}

.tips-box.right {
    left: auto;
    right: 0;
}

.tips-box.apt-top {
    bottom: auto;
    top: 36px;
    right: auto;
    width: 1000px;
}

.k-grid .icon-tips::after {
    color: #fff;
    background-color: #bdc1c8;
}

.k-grid .icon-tips:hover::after, .k-grid .icon-tips:active::after {
    background-color: #8934fa;
}

.tips-box > * {
    margin: 10px 0;
    padding: 0 10px;
    color: #666667;
}
.popup-option[data-auction] .tips-box p {
    margin: 0px;
}
.tips-box h5 {
    margin: 0;
    padding: 4px 15px 0 15px;
    border-bottom: solid 1px #d9e0e8;
    font-size: 16px;
    line-height: 36px;
    background-color: #edf1f6;
    text-align: center;
}

.tips-box h6 {
    height: auto;
    margin-top: 20px;
    font-size: 14px;
    font-weight: bold;
    line-height: 100%;
}

.tips-box p {
    padding: 10px;
    font-size: 13px;
    line-height: 16px;
    word-break: break-word;
    text-align: justify;
    background-color: #FFFFFF;
}

.tips-box p strong {
    display: block;
    margin-bottom: 10px;
}

.tips-box .table-small {
    width: 400px;
    margin: 0 10px 10px 10px;
}

.tips-box .table-small {
    width: 400px;
    margin: 0 10px 10px 10px;
}

.tips-box .list-basic {
    padding: 0;
}

.tips-box .list-basic li {
    font-size: 13px;
}

.tips-box .list-basic li p {
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0;
}

.tips-box .list-basic .text-purple {
    font-size: 12px;
}

.map-info .tips-box {
    top: 0;
    right: 166px;
    bottom: auto;
}

.map-info .tips-box.right {
    width: 410px;
    top: -1px;
}

.map-info .tips-box h5 {
    background-color: #f1f1f1;
}

.map-info .tips-box p {
    margin-bottom: 10px;
    font-weight: 400;
}

.map-info .sub-tab li .pre-span {
    position: absolute;
    top: -8px;
    right: 0px;
    width: 16px;
    height: 16px;
}

.map-info .sub-tab li .tips-box h5 {
    padding: 4px 15px 0 15px;
    border-bottom: solid 1px #d9e0e8;
    color: #666667;
    font-size: 16px;
    background-color: #edf1f6;
}

.map-info .sub-tab li h5 + p {
    position: static;
}

.map-info .sub-tab li p {
    padding: 0 10px;
    color: #666667;
    font-size: 13px;
    line-height: 16px;
}

.map-info .dropdown .tips-box {
    right: 170px;
}

.k-grid .tips-box {
    right: auto;
    bottom: 32px;
    max-width: 300px;
    z-index: 3;
}

.text-purple {
    color: #8934fa;
}

.switcher-set .switch .tips-box {
    bottom: 35px;
}

#save-list .switch {
    position: absolute;
    top: 50%;
    right: 20px;
    padding-left: 38px;
    padding-right: 0;
    transform: translateY(-35%);
}

#save-list .map-filter-span {
    position: absolute;
    right: 65px;
    top: 27px;
}

#save-list .tips-box .list-basic li::before {
    top: 11px;
}

#save-list .tips-box {
    left: 155px;
    top: 24px;
    bottom: auto;
    width: 400px;
    z-index: 2;
}

[class^=level]::after {
    display: inline-block;
    width: 36px;
    height: 16px;
    margin-left: 5px;
    border-width: 1px;
    border-style: solid;
    padding-top: 1px;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
}

[class^=level-edu] {
    display: inline-block;
    vertical-align: top;
}

[class^=level-edu]::after {
    margin-left: 0;
    margin-right: 5px;
}

.level-edu01::after {
    content: "예정";
    border-color: #23b3c6;
    background-color: #23c661;
}

.level-edu02::after {
    content: "접수";
    border-color: #00a0eb;
    background-color: #00a0eb;
}

.level-edu03::after {
    content: "마감";
    border-color: #f6546f;
    background-color: #f6546f;
}

[class^=level-event] {
    display: inline-block;
    vertical-align: top;
}

[class^=level-event]::after {
    margin-left: 0;
    margin-right: 5px;
}

.level-event01::after {
    content: "예정";
    border-color: #23b3c6;
    background-color: #23c661;
}

.level-event02::after {
    content: "진행중";
    border-color: #00a0eb;
    background-color: #00a0eb;
}

.level-event03::after {
    content: "마감";
    border-color: #f6546f;
    background-color: #f6546f;
}

/*교육메인 버튼*/
.level-edu01-title {
    position: absolute;
    z-index: 2;
    transform: rotate(317deg);
    top: 3px;
    left: -24px;
}

.level-edu02-title {
    position: absolute;
    z-index: 2;
    transform: rotate(317deg);
    top: 3px;
    left: -24px;
}

.level-edu03-title {
    position: absolute;
    z-index: 2;
    transform: rotate(317deg);
    top: 3px;
    left: -24px;
}

.level-edu01-title::after {
    content: "예정";
    border-color: #23c661;
    background-color: #23c661;
    width: 70px;
    border-radius: 0px;
    font-size: 11px;
    font-weight: bold;
}

.level-edu02-title::after {
    content: "접수";
    border-color: #00a0eb;
    background-color: #00a0eb;
    width: 70px;
    border-radius: 0px;
    font-size: 11px;
    font-weight: bold;
}

.level-edu03-title::after {
    content: "마감";
    border-color: #f6546f;
    background-color: #f6546f;
    width: 70px;
    border-radius: 0px;
    font-size: 11px;
    font-weight: bold;
}

.bbs-head [class^=level-edu]::after {
    height: 18px;
    font-size: 16px;
    line-height: 18px;
}

input.details-input[type="text"] {
    width: 60px;
    height: 30px;
    text-indent: 0;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
}

input.details-rate-input {
    width: 50px;
    height: 30px;
    text-indent: 0;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
}

input.details-rate-input.w100 {
    width: 100px;
}

input.details-rate-input::placeholder {
    color: #ccc;
}

input.details-rate-input:-ms-input-placeholder {
    color: #ccc;
}

input.details-rate-input::-ms-input-placeholder {
    color: #ccc;
}

input.details-rate-input:focus::-webkit-input-placeholder {
    color: transparent;
}

input.details-rate-input:focus::-moz-placeholder {
    color: transparent;
}

input.details-rate-input:focus:-ms-input-placeholder {
    color: transparent;
}

input.details-rate-input:focus::-ms-input-placeholder {
    color: transparent;
}

@keyframes fav {
    from {
        background-position: 0 0;
    }
    to {
        background-position: -1232px 0;
    }
}

.with-thumbnail.youtube li > a {
    padding: 32px 90px 32px 360px;
}

.with-thumbnail.youtube .img {
    width: 320px;
}

.with-thumbnail.youtube .img::before, .root-community .with-thumbnail.youtube .img::after {
    content: "";
    display: block;
    position: absolute;
    transition: opacity .3s;
}

.with-thumbnail.youtube .img::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: solid 6px #ce1312;
    opacity: 0;
    z-index: 2;
}

.with-thumbnail.youtube .img::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60px;
    height: 60px;
    background: url(/res/img/component/icon_youtube_red-bc48d989fa5d7c5eb3a8e4a12a4f72dd.svg) 50%/contain no-repeat;
    opacity: 0;
    z-index: 3;
}

.with-thumbnail.youtube a:hover .img::before, .root-community .with-thumbnail.youtube a:active .img::before,
.with-thumbnail.youtube a:hover .img::after, .root-community .with-thumbnail.youtube a:active .img::after {
    opacity: 1;
}

.with-thumbnail.youtube a:hover .img::before, .root-community .with-thumbnail.youtube a:active .img::before {
    background-color: rgba(255, 255, 255, .5);
}

/* 교욱 신청 */
.with-thumbnail li > a > .subject span {
    float: left;
}

.with-thumbnail .subject span[class^=level]::after {
    margin: 5px 10px 0 0;
    vertical-align: top;
}

.bbs-list.edu li > a::before, .bbs-list.coupon li > a::before, .bbs-list.report li > a::before,
.bbs-list.pay li > a::before {
    position: absolute;
    right: 60px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100px;
    height: 100px;
    padding: 0 15px;
    border-radius: 100%;
    font-size: 16px;
    font-weight: 600;
    text-align: center;
    word-break: keep-all;
    line-height: 120%;
    box-sizing: border-box;
}

.bbs-list.edu li > a::before {
    content: "수강 중";
    color: #fff;
    background: linear-gradient(120deg, #6f21a2, #4436a0, #7c3df1);
    z-index: 1;
}

.bbs-list.edu li > a:hover, .bbs-list.edu li > a:active {
    background-color: #f3f6fb;
}

.bbs-list.edu li > a:hover .img:before {
    display: none;
}

.bbs-list.edu .bbs-content-info .visited {
    display: none;
}

.bbs-list.edu .disabled > a::before {
    content: "수강 기간 만료";
}

.bbs-list.edu .disabled > a .img {
    background-color: #fff;
}

.bbs-list.edu-money li > a::before {
    content: "미정산";
}

.bbs-list.edu-money .disabled > a::before {
    content: "정산 완료";
}

.bbs-list .disabled > a::before {
    background: #aaa !important;
}

.bbs-list .disabled > a {
    cursor: default;
    background-color: #f9f9f9;
}

.bbs-list .disabled > a .img, .bbs-list .disabled > a .subject, .bbs-list .disabled > a::before, .bbs-list .disabled > a .bbs-content-info {
    opacity: .7;
}

.bbs-list .disabled > a .img img {
    mix-blend-mode: luminosity;
    opacity: .7;
}

.bbs-list .disabled > a .category {
    opacity: .7;
    color: #7e81a6;
}

.bbs-list .disabled > a:hover, .bbs-list .disabled > a:active {
    background-color: #f9f9f9 !important;
}

.bbs-list .disabled > a:hover .img img {
    transform: none;
}

.bbs-list .disabled > a:hover::after {
    display: none;
}

.bbs-list.coupon .expire > a::before {
    content: "쿠폰 기간 만료";
    color: #fff;
    background-color: #aaa;
}

.bbs-list.coupon .expire > a {
    opacity: .7;
    cursor: default;
    background-color: #f9f9f9;
}

.bbs-list.coupon .expire > a .img {
    background-color: #fff;
}

.bbs-list.coupon .expire > a .img img {
    mix-blend-mode: luminosity;
    opacity: .7;
}

.bbs-list.coupon .expire > a .category {
    color: #7e81a6;
}

.bbs-list.coupon .expire > a:hover, .bbs-list.report .disabled > a:active {
    background-color: #f9f9f9;
}

.bbs-list.coupon .expire > a:hover .img img {
    transform: none;
}

.bbs-list.coupon .expire > a:hover .img::before {
    display: none;
}

.bbs-list.coupon .expire > a:hover::after {
    display: none;
}

.bbs-list.coupon .expire .btn {
    color: #fff !important;
    background-color: #999 !important;
}

.bbs-list.coupon .expire .btn::before {
    background-color: #fff !important;
}

.modal-apt-info {
    display: flex;
    flex-flow: column nowrap;
    max-width: 1520px;
    left: 50%;
    bottom: 20px;
    overflow: hidden;
    transform: translateX(-50%);
}
.modal-apt-cmpet-info {
    display: flex;
    flex-flow: column nowrap;
    max-width: 1520px;
    left: 50%;
    bottom: 20px;
    transform: translateX(-50%);
}
.modal.root-modal.z200 {
    z-index: 200;
}
.modal-apt-info .menu-content {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 0;
    padding: 40px 20px;
}

.modal-apt-info .menu-content h3 {
    margin-bottom: 10px;
}

.modal-apt-info .menu-content .edu-info {
    margin-bottom: 20px;
}

.modal-invest-mng-info {
    display: flex;
    flex-flow: column nowrap;
    max-width: 1100px;
    left: 50%;
    bottom: 20px;
    overflow: hidden;
    transform: translateX(-50%);
}

.modal-invest-mng-info .menu-content {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 0;
    padding: 40px 20px;
}

.modal-invest-mng-info .menu-content h3 {
    margin-bottom: 10px;
}

.modal-invest-mng-info .menu-content .edu-info {
    margin-bottom: 20px;
}

.modal-invest-mng-info div.row {
    margin: 15px 0px -10px 0px;
}

#modal_type_history .hisrtoryGrid {
    height: 130px;
    width: 100%;
    border-top: 2px solid #8f55e2;
}

.edu-info {
    border-top: 2px solid #8934fa;
}

.edu-info thead th {
    background-color: #f0f3fc;
}

.edu-info tbody th {
    background-color: #f5f7f9;
}

.edu-info th {
    color: #333;
    font-weight: 600;
}

.edu-info th, .edu-info td {
    padding: 10px 0;
    line-height: 150%;
    border-right: solid 1px #dee3ef;
    border-bottom: solid 1px #dee3ef;
}

.edu-info th:last-child, .edu-info td:last-child {
    border-right: 0;
}

.edu-info td {
    padding: 10px;
    font-size: 16px;
    text-align: left;
    padding-left: 15px;
}

.edu-info td.sum {
    background-color: rgba(244, 86, 102, .05);
}

.edu-info td * {
    font-size: inherit;
    line-height: 150%;
}

.edu-info td strong {
    color: #8934fa;
}

.edu-info td .total-price {
    color: #444;
    font-family: Verdana;
    font-size: 20px;
    font-weight: 600;
}

.edu-info td .text-red .total-price {
    color: #dc3535 !important;
}

.edu-info td small {
    margin-left: 10px;
    color: #777;
    font-size: 15px;
    line-height: 18px;
    letter-spacing: -0.4px;
}

.edu-info td > div {
    display: flex;
    flex-flow: column wrap;
    align-items: flex-start;
    float: left;
    width: 50%;
}

.edu-info td > div .btn {
    margin: 2px 0px;
}

.edu-info td .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 130px;
    height: 36px;
    margin: 0 10px;
    line-height: 110%;
}

.edu-info td .icon-kakao::before {
    background-color: #333;
}

.edu-info td .icon-youtube-red {
    width: auto;
}

.edu-info td .ml0 {
    margin-left: 0;
}

.edu-info td .tips {
    font-size: 13px;
}

.edu-info td .index {
    overflow: visible;
}

.edu-info td .index-area {
    flex: 1;
}

.edu-info td p {
    color: #7e81a6;
}

.edu-info td p + p {
    margin-top: 15px;
}

.edu-info td.index {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
}

.edu-info td.user-date{
    flex-direction: column;
    display: flex;
}

.edu-info td.user-date div{
    display: block;
    margin-bottom: 5px;
    width: 100%;
}

.edu-info td.user-date span{
    font-family: GmarketSansM;
    font-weight: normal;
    letter-spacing: 0;
    font-size: 17px;
    line-height: 36px;
}

.edu-info td.user-date span.hoi{
    display: inline-block;
    width: 160px;
}

.edu-info td.user-date input{
    width: 130px;
    margin: 0 10px;
    border: 1px solid #a1a1a1;
}

.edu-info td.user-date input.user-date-end-time{
    width: 75px;
    margin: 0;
}

.edu-info td.user-date select{
    height: 25px;
    padding: 0 5px;
    width: 70px;
    border: 1px solid #d4d4d4 !important;
    border-radius: 0;
}

.edu-info td.user-date option{
    text-align: center;
}

.edu-info td.user-date .user-date-update-btn{
    margin-left: 10px;
    width: 65px;
    height: 25px;
    display: inline-block;
}

.edu-info .index-area .list-basic .btn {
    height: 25px;
    margin: 0;
    margin-left: 5px;
    font-size: 12px;
    vertical-align: middle;
}

.edu-info .index-area .icon-down {
    background-image: none;
}

.edu-info .index-area .icon-down::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 10px;
    vertical-align: middle;
    background-color: #fff;
    -webkit-mask: url(/res_root/img/common/icon_arrow_down-85f3af29ddc5c33cf9b376c6e161949a.svg) 50%/contain no-repeat;
    mask: url(/res_root/img/common/icon_arrow_down-85f3af29ddc5c33cf9b376c6e161949a.svg) 50%/contain no-repeat;
}

.edu-info .index-area .list-basic .btn {
    height: 30px;
    font-size: 12px;
}

.edu-type {
    display: inline-block;
    margin: 3px 3px 0 0;
    padding: 0 7px;
    border-width: 1px;
    border-style: solid;
    border-radius: 20px;
    font-size: 15px;
    line-height: 20px;
    font-weight: bold;
}

.edu-type.course1 {
    color: #ff4081;
    border-color: #ff4081;
}

.edu-type.course2 {
    color: #4756de;
    border-color: #4756de;
}

.index-area {
    display: block;
    position: relative;
}

.index-area .list-basic {
    display: none;
    top: 42px;
    left: 10px;
    max-height: 300px;
    padding: 15px 10px 15px 5px;
    overflow-y: auto;
    border: solid 1px #333;
    box-shadow: 0 0 20px rgba(0, 0, 0, .2);
    background-color: #fff;
    z-index: 1;
}

.index-area .list-basic li::before {
    top: 12px;
}

.index-area .list-basic li + li {
    margin-top: 10px;
}

.index-area .list-basic li strong {
    display: block;
    color: #333;
}

.index-area .list-basic li span {
    display: inline-block;
    vertical-align: middle;
    font-size: 13px;
}

.index-area .list-basic .page {
    position: relative;
    padding-right: 15px;
}

.index-area .list-basic .page::after {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    right: 4px;
    width: 1px;
    height: 12px;
    background-color: #ddd;
}

.index-area .list-basic .time {
    font-size: 13px;
    letter-spacing: 0;
}

.btn-border.icon-youtube-red::before {
    width: 16px;
    height: 16px;
    background-color: #fff;
}

.icon-youtube-red::before {
    background: url(/res/img/component/icon_youtube_red-bc48d989fa5d7c5eb3a8e4a12a4f72dd.svg) 50%/contain no-repeat;
}

.btn-primary {
    background-color: #673ab7;
}

.btn-primary:hover, .btn-primary:active {
    background-color: #6f21a2;
}

.btn-orange {
    background-color: #f08544;
}

.btn-bluegreen {
    background-color: #007681;
}

.btn-orange:hover, .btn-orange:active, .btn-bluegreen:hover, .btn-bluegreen:active {
    background-color: #4d79f6;
}

.btn-border {
    border: solid 1px #dfe6ef;
    color: #333;
    background-color: #fff;
}

.btn-border::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 5px;
    vertical-align: -2px;
    background-color: #333;
}

.btn-border:hover, .btn-border:active {
    border-color: #333;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
}

.btn-border.disabled, .btn-border:disabled {
    color: #babbcf !important;
    background-color: #edf1f6 !important;
    cursor: default;
}

.btn-border.disabled:hover, .btn-border:disabled:hover, .btn-border.disabled:active, .btn-border:disabled:active {
    border-color: #dfe6ef !important;
    box-shadow: none;
}

.btn-youtube {
    background-color: #c00;
}

.btn-youtube::before, .btn-zoom::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 5px;
    vertical-align: -4px;
    background-color: #fff;
}

.btn-youtube:hover, .btn-youtube:active {
    background-color: #ae0000;
}

.btn-zoom {
    background-color: #2d8cff;
}

.btn-zoom:hover, .btn-zoom:active {
    background-color: #006aea;
}

.icon-link-blank::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
}

.icon-file::before {
    -webkit-mask: url(/res/img/component/icon_save-1af5c753718c2d8793720a8aea24da73.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_save-1af5c753718c2d8793720a8aea24da73.svg) 50%/contain no-repeat;
}



.comment-btn-set .btn-border {
    background-color: #fff;
}

/* 댓글 이미지 */
.comment-wrap {
    padding: 20px;
    border: 1px solid #dfe6ef;
    border-radius: 4px;
    background-color: #f6faff;
}

.comment-wrap .attachment {
    margin: 10px 0 0 0;
    border: 0;
    padding: 0;
}

.comment-wrap .attachment dd {
    text-align: left;
}

.comment-wrap .attachment dd > * {
    display: inline-block;
}

.comment-wrap .attachment dd > ul {
    margin-left: 15px;
}

.comment-wrap .attachment .btn-attach {
    margin-top: 0;
}

.comment-wrap .attachment p input {
    position: absolute;
    top: 0;
    left: -9999px;
    width: 1px;
    height: 1px;
    line-height: 0;
    overflow: hidden;
}

.comment-wrap .attachment ul {
    margin-left: 15px;
}

.comment-wrap .attachment li {
    line-height: 36px;
}

.comment-wrap .attachment li button {
    width: 30px;
    height: 30px;
    margin: 0;
}

.comment-wrap > img, .root-community .comment-area img {
    max-width: 1000px;
    margin-bottom: 20px;
    border: solid 1px #dfe6ef;
}

div[class^=comment-] textarea:focus {
    border-width: 2px;
    border-color: #8f55e2;
}

div[class^=comment-] textarea {
    display: block;
    width: 100%;
    padding: 20px;
    border: 1px solid #333;
    font-family: "Noto Sans KR", "맑은 고딕", "돋움", AppleSDGothicNeo, Dotum, Droid Sans, arial, sans-serif;
    font-size: 16px;
    line-height: 160%;
    transition: .3s;
    outline: none;
}

.attachment .btn-attach {
    display: inline-block;
    width: 120px;
    height: 36px;
    padding: 0 10px;
    border: solid 1px #dfe6ef;
    border-radius: 3px;
    line-height: 34px;
    text-align: center;
    transition: .3s ease-in-out;
    background-color: #fff;
}

.attachment .btn-attach::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: -2px;
    background-color: #333;
    mask: url(/res/img/component/icon_clip-219d1cbbbdcbe59cd8c90723ca2ef760.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_clip-219d1cbbbdcbe59cd8c90723ca2ef760.svg) 50%/contain no-repeat;
}

.attachment .btn-attach:hover, .root-community .attachment .btn-attach:active {
    border-color: #333;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
}

.comment-list li img {
    max-width: 100%;
}

/* 교육 신청 모달 */
.title-wrapper.edu h1, .modal .title-wrapper .button-area {
    display: none;
}

.modal .dl-table-chubby > dd > strong.price, .modal .dl-table-chubby > dd > strong.total-price {
    letter-spacing: 0;
}

.modal .dl-table-chubby > dd.user-date{
    flex-direction: column;
    background: #f2eaff;
}

.modal .dl-table-chubby > dd.user-date div{
    margin-bottom: 5px;
}
.modal .dl-table-chubby > dd.user-date div.if{
    display: inline-flex;
    vertical-align: bottom;
    margin: 0;
}
.modal .dl-table-chubby > dd.user-date span{
    font-weight: 600;
    letter-spacing: 0;
    font-size: 17px;
    line-height: 36px;
}

.modal .dl-table-chubby > dd.user-date span.hoi{
    display: inline-block;
    width: 180px;
}

.modal .dl-table-chubby > dd.user-date input{
    width: 125px;
    margin: 0 10px;
}

.modal .dl-table-chubby > dd.user-date input.user-date-end-time{
    width: 70px;
    margin: 0;
}

.modal .dl-table-chubby > dd.user-date select{
    height: 25px;
    padding: 0 5px;
    width: 52px;
    border: 1px solid #333 !important;
    border-radius: inherit;
}

.modal .dl-table-chubby > dd.user-date option{
    text-align: center;
}

.modal .info-context p {
    line-height: 180%;
}

.modal .info-context span {
    font-size: 14px;
}

.bbs-top > .bbs-btn-set > .btn-dark {
    color: #fff;
    background: #4a4a4a;
}

.bbs-top > .bbs-btn-set > .btn-dark:hover {
    background: #111;
}

.title-wrapper > h1.logo {
    background-image: url(/res_root/img/common/logo_gin-286222e8fa2a02d21b492ea93d9d4909.svg);
}

.contents-wrapper.edu .tab-title > h3::before {
    display: none;
}

.contents-wrapper.edu .tab-box > .tab-list > li > a.active::before {
    background: #8934fa;
}

.contents-wrapper.edu .my-status > ul > li {
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
}

.contents-wrapper.edu .my-status > ul > li small {
    margin: 10px 0;
    color: #f45666;
    font-weight: 500;
    letter-spacing: 0;
}

.contents-wrapper.edu .my-status li > div input {
    height: 36px;
}

.contents-wrapper.edu .dl-table-chubby > dd > em {
    color: #8934fa;
    font-size: 18px;
}

.contents-wrapper.edu .dl-table-chubby > dd > em > span {
    border-color: #8934fa;
}

.contents-wrapper.edu .checking input:checked ~ .checkmark, .contents-wrapper.edu .checking input:hover:checked ~ .checkmark {
    background-color: #8934fa !important;
}

.contents-wrapper.edu .checking input:checked ~ .checkmark::after {
    display: block;
}

.contents-wrapper.edu .payment-info .checking .checkmark {
    width: 26px;
    height: 26px;
    border-radius: 100%;
}

.contents-wrapper.edu .payment-info .checking:hover input ~ .checkmark {
    background-color: #fff;
}

.contents-wrapper.edu .payment-info .checking-set .checkmark::after {
    border-color: #fff;
}

.contents-wrapper.edu .payment-info .checking-set .checkmark::after {
    top: 3px;
    left: 7px;
    width: 5px;
    height: 10px;
}

.contents-wrapper.edu .payment-info .button-area {
    text-align: center;
}

.contents-wrapper.edu .button-area > * {
    width: 200px;
    height: 60px;
    border-radius: 5px;
    font-size: 20px;
}

.contents-wrapper.edu .button-area button:hover, .contents-wrapper.edu .button-area a:hover {
    color: #fff;
}

.contents-wrapper.edu .my-status .checking {
    width: 180px;
    margin-bottom: 20px;
}

.contents-wrapper.edu .mail > input[type=text] {
    height: 50px;
    padding: 0 10px;
    border: 1px solid #dadce0;
    border-radius: 3px;
    vertical-align: middle;
    font-size: 20px;
    text-indent: 0;
    letter-spacing: 0;
    outline: none;
    transition: .3s;
}

.contents-wrapper.edu .mail > input:focus {
    border-color: #673ab7 !important;
}

.contents-wrapper.edu .btn-secondary {
    background-color: #673ab7;
}

.contents-wrapper.edu .btn-secondary:hover, .contents-wrapper.edu .btn-secondary:active {
    background-color: #6f21a2;
}

.my-status .btn:not([class*=btn-border]) {
    width: 180px;
    height: 50px;
    padding: 0 10px;
}

.my-status .btn-border {
    height: 40px;
    line-height: 38px;
}

.my-status .btn-border + .btn-border {
    margin-left: 5px;
}

.my-status .mail > .btn {
    margin-left: 20px;
    border-radius: 25px;
    font-size: 18px;
}

.my-status .mail .btn-border {
    font-size: 16px;
}

.my-status .mail .btn-border::before {
    display: none;
}

.my-status .mail > .btn-primary {
    background-color: #4a4a4a;
}

.my-status .mail > .btn-primary:hover, .my-status .mail > .btn-primary:active {
    background-color: #333;
}

.my-status .mail > .btn-secondary {
    font-size: 16px;
}

.my-status li > div {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
}

.my-status li > div .label {
    width: 140px;
    margin-right: 20px;
    color: #7e81a6;
}

.my-status li > div input {
    width: 220px;
}

.my-status li > div input + button {
    height: 36px;
    margin-left: 10px;
    padding: 0 20px;
    color: #fff;
    border-radius: 3px;
    transition: .3s ease-in-out;
    background-color: #0b99ac;
}

.my-status li > div input + button:hover, .my-status li > div input + button:active {
    background-color: #ff7240;
}

.my-status li > div input + button:disabled, .my-status li > div input + button:disabled:hover, .my-status li > div input + button:disabled:active {
    color: #babbcf;
    background-color: #edf1f6;
}

.my-status li > div .timeout {
    margin-left: 20px;
    color: #f45666;
    letter-spacing: 0;
    font-size: 16px;
}

.my-status .result-box {
    margin-top: 20px;
}

.result-box {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;
    padding: 50px 0;
    background: linear-gradient(to right, #d7f1fc, #f4e9ee);
}

.result-box p {
    color: #673ab7;
    font-weight: 600;
    font-size: 18px;
}

.modal .info-context .phone input:first-child {
    margin-left: 15px;
}

.modal .info-context .phone input {
    width: 53px;
    text-align: left;
    padding: 0;
}

/* 교육 마일리지 */
.title-wrapper {
    display: flex;
    background: url(/res/img/component/back_pattern_01-cd15822780f36a61792517e8df75d94e.png);
    padding-left: 20px;
    padding-right: 20px;
}

.title-wrapper > .title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px;
    margin: 0 auto;
}

.title-wrapper > .title > h2 {
    padding-left: 0;
    font-size: 46px;
    line-height: 50px;
    font-weight: 200;
    letter-spacing: -2px;
    background: none;
}

.title-wrapper > .title > p {
    position: relative;
    height: 42px;
    color: #555;
    font-size: 16px;
    line-height: 23px;
    letter-spacing: -.2px;
    padding-left: 80px;
}

.title-wrapper > .title > p:before {
    position: absolute;
    bottom: 0;
    left: 25px;
    display: block;
    content: '';
    width: 30px;
    height: 2px;
    background: #333;
}

.title-wrapper.edu > .title {
    width: 725px;
}

.contents-wrapper {
    background: #f9f9f9;
}

.tab-title {
    margin-bottom: 20px;
}

.tab-contents {
    padding: 30px 20px;
}

.tab-contents .tab-page {
    display: none;
    max-width: 1440px;
    min-height: 500px;
    margin: 0 auto;
}

.tab-contents .tab-page.active {
    display: block;
}

.mileage-total {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    padding: 30px 0;
    background: linear-gradient(90deg, #d7f2fd, #f4e9ee);
}

.mileage-total h3 {
    margin-bottom: 15px;
    font-size: 24px;
}

.mileage-total h3 strong {
    margin-left: 5px;
    color: #ff4081;
    font-family: Verdana;
    font-size: 30px;
}

.mileage-total p {
    font-size: 16px;
    line-height: 160%;
    text-align: center;
}

.mileage-area {
    position: relative;
    padding: 20px;
    border: 1px solid #dcdcdc;
    background-color: #fff;
}

.race ul {
    position: relative;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    align-items: center;
    margin: 0 50px;
    padding: 50px 200px;
}

.race ul + ul::after {
    content: "";
    display: block;
    position: absolute;
    top: -110px;
    left: 100px;
    width: 2px;
    height: 220px;
    background-color: #edf1f6;
}

.race ul:first-child {
    padding-left: 100px;
}

.race ul::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 100px;
    right: 100px;
    transform: translateY(-50%);
    height: 2px;
    background-color: #edf1f6;
}

.race ul:last-child {
    padding-right: 100px;
}

.race ul:last-child::before {
    right: 100px;
}

.race ul.reverse {
    flex-flow: row-reverse nowrap;
    padding-left: 200px;
}

.race ul.reverse::after {
    left: auto;
    right: 100px;
}

.race li {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 120px;
    height: 120px;
    border-radius: 100%;
    border: solid 6px #edf1f6;
    background-color: #fff;
}

.race li::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95px;
    height: 95px;
    border-radius: 100%;
    border: solid 2px #edf1f6;
}

.race li span {
    margin-bottom: 10px;
    color: #b0bdcc;
    font-size: 13px;
    font-weight: 500;
}

.race li strong {
    color: #b0bdcc;
    font-size: 20px;
}

.race li.start {
    width: 50px;
    height: 50px;
    border: 0;
    color: #fff;
    background-color: #8f55e2;
}

.race li.start::after {
    display: none;
}

.race li.active {
    color: #8f55e2;
    border-color: #8f55e2;
    transition: .3s;
    cursor: pointer;
}

.race li.active::after {
    border-color: #8f55e2;
}

.race li.active > * {
    color: #8f55e2;
}

.race li.active:hover {
    color: #fff;
    border-color: #e2ceff;
    background-color: #8f55e2;
}

.race li.active:hover::after {
    border-color: rgba(255, 255, 255, .3);
}

.race li.active:hover > * {
    color: #fff;
}

.race li.complete {
    border-color: #ffd0d5 !important;
    background-color: #f45666;
}

.race li.complete::after {
    border-color: rgba(255, 255, 255, .3) !important;
}

.race li.complete > * {
    color: #fff !important;
}

.ground-spot {
    position: absolute;
    top: 50%;
}

.ground-spot span {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    background-color: #8f55e2;
    border-radius: 50%;
    text-indent: -9999px;
    opacity: 0;
    transform: translate(-50%, -50%);
    animation: ground-spot2 2s .2s ease-in-out infinite;
}

.ground-spot span:first-child {
    width: 30px;
    height: 30px;
    animation: ground-spot3 2s .3s ease-in-out infinite;
}

.ground-spot span:last-child {
    width: 20px;
    height: 20px;
    animation: ground-spot1 2s ease-in-out infinite;
}

@keyframes ground-spot1 {
    0% {
        opacity: .5;
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: .5;
    }
}

@keyframes ground-spot2 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .2;
    }
    100% {
        opacity: 0;
    }
}

@keyframes ground-spot3 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: .1;
    }
    100% {
        opacity: 0;
    }
}

.title-wrap .bbs-btn-set {
    align-items: flex-end;
}

.title-wrap .bbs-btn-set .btn-purple {
    margin-right: 0;
    margin-bottom: 10px;
    color: #fff;
    background-color: #673ab7;
}

.title-wrap .bbs-btn-set .btn-purple:hover, .title-wrap .bbs-btn-set .btn-purple:active {
    background-color: #6f21a2;
}

.bbs-btn-set .btn-date {
    color: #fff;
    background-color: #9086ee;
}

.bbs-btn-set .btn-date::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: -2px;
    background-color: #fff;
    -webkit-mask: url(/res/img/component/icon_calendar-ebe3c49c89f42bb20e7e5185b31de11a.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_calendar-ebe3c49c89f42bb20e7e5185b31de11a.svg) 50%/contain no-repeat;
}

.bbs-btn-set .btn-date:hover, .bbs-btn-set .btn-date:active {
    background-color: #712cce;
}

.bbs-btn-set .btn-date[disabled], .bbs-btn-set .btn-date.disabled {
    color: #a6afc0;
    background-color: #f0f3fc;
    cursor: default;
}

.bbs-btn-set .btn-date[disabled]::before, .bbs-btn-set .btn-date.disabled::before {
    background-color: #a6afc0;
}

/* 결제 내역 */
.bbs-list.pay li > a {
    cursor: default;
    padding-right: 15px;
}

.bbs-list.pay li > a:hover {
    background-color: #fff;
}

.bbs-list.pay li > a:hover::after {
    display: none;
}

.bbs-list.pay .img::before {
    display: none;
}

.bbs-list.pay .img img, .bbs-list.pay li > a:hover .img img, .bbs-list.coupon .img img, .bbs-list.coupon li > a:hover .img img {
    transform: none;
}

.bbs-list.pay li button {
    margin-left: 20px;
}

.bbs-list.pay li .sum, .bbs-list.coupon li .sum {
    font-size: 16px;
}

.bbs-list.pay li .sum span, .bbs-list.coupon li .sum span {
    font-weight: bold;
    margin-right: 10px;
    color: #8934fa;
}

.bbs-list.pay li .sum strong, .bbs-list.coupon li .sum strong {
    position: relative;
    font-family: Verdana, sans-serif;
    font-weight: 600;
    font-size: 20px;
}

.bbs-list.pay li .text {
    display: none;
}

.bbs-list.pay li .bbs-content-info {
    bottom: 30px;
}

.bbs-list.pay li .bbs-content-info, .bbs-list.edu-info li .bbs-content-info {
    position: absolute;
    bottom: 30px;
}

.bbs-list.pay li .bbs-content-info + .bbs-content-info, .bbs-list.edu-info li .bbs-content-info + .bbs-content-info {
    bottom: 5px;
}

.bbs-list.pay li .bbs-content-info span {
    color: #7e81a6;
}

.bbs-list.pay li .bbs-content-info .category, .bbs-list.coupon li .bbs-content-info .category {
    color: #333;
    font-weight: 500;
}

.bbs-list.pay li .bbs-content-info .point::before {
    background-color: #7e81a6;
    mask: url(/res/img/component/icon_point-e12689dc1ed1d6cc148e9a4d52cec119.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_point-e12689dc1ed1d6cc148e9a4d52cec119.svg) 50%/contain no-repeat;
}

.bbs-list.pay li .bbs-content-info .date {
    padding-left: 23px;
}

.bbs-list.pay li .bbs-content-info .date::before {
    background-color: #7e81a6;
    mask: url(/res/img/component/icon_calendar-ebe3c49c89f42bb20e7e5185b31de11a.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_calendar-ebe3c49c89f42bb20e7e5185b31de11a.svg) 50%/contain no-repeat;
}

.bbs-list.pay li .bbs-content-info .method::before {
    background-color: #7e81a6;
    mask: url(/res/img/component/icon_transfer-982890d0b8aeb6cb1cd0cac6c5903cbd.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_transfer-982890d0b8aeb6cb1cd0cac6c5903cbd.svg) 50%/contain no-repeat;
}

.bbs-list.pay li.cancel::before {
    display: none;
}

.bbs-list.pay li.cancel .sum span {
    color: red;
}

.bbs-list.pay li.cancel .sum strong {
    color: #7e81a6;
}

.bbs-list.pay li.cancel .sum strong::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background-color: red;
}

.bbs-list.pay li.cancel .bbs-content-info .red {
    color: red !important;
}

.bbs-list.pay li > a:hover .premium::before {
    opacity: 1;
}

.bbs-list.pay li .word-possible {
    border-radius: 16px;
}

.bbs-list.pay .premium {
    overflow: hidden;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(31, 30, 47, .2);
    background-color: #fff;
}

.bbs-list.pay .refund > a::before {
    color: #fff;
}

.bbs-list.pay .refund.accept > a::before {
    content: "환불 신청";
    background: linear-gradient(120deg, #e82a45, #ff2972, #e679c3);
}

.bbs-list.pay .refund.possible > a::before {
    content: "환불 처리중";
    background: linear-gradient(120deg, #6f21a2, #4436a0, #7c3df1);
}

.bbs-list.pay .refund.all > a::before {
    content: "전액 환불 가능";
    background: linear-gradient(120deg, #6f21a2, #4436a0, #7c3df1);
}

.bbs-list.pay .refund.disabled > a::before {
    content: "환불 완료";
}

.bbs-list.pay .refund.impossible > a::before {
    content: "환불 불가";
    background-color: #333;
}

.bbs-list .icon-left.delete {
    width: auto;
    padding: 0 15px 0 30px;
}

.bbs-list .word-possible {
    height: 32px;
    padding: 0 15px;
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
    letter-spacing: -.4px;
    outline: none;
    background-color: #eee;
    cursor: default;
}

.bbs-list .word-possible.complete {
    color: #555;
}

.bbs-list .word-possible.complete::before {
    background-color: #555;
}

.bbs-list.coupon li > a {
    padding-right: 15px;
}

.bbs-list.coupon li > a::before {
    content: "쿠폰 사용 가능";
    color: #fff;
    background-color: #ff4081;
    z-index: 1;
}

.bbs-list.coupon .disabled > a::before {
    content: "쿠폰 사용 완료";
    color: #fff;
    background-color: #aaa;
}

.bbs-list.coupon .disabled > a::before {
    background-color: #aaa !important;
}

.bbs-list.coupon .disabled > a {
    opacity: .7;
    cursor: default;
    background-color: #f9f9f9;
}

.bbs-list.coupon .disabled > a .img {
    background-color: #fff;
}

.bbs-list.coupon .disabled > a .img img {
    mix-blend-mode: luminosity;
    opacity: .7;
}

.bbs-list.coupon .disabled > a .category {
    color: #7e81a6;
}

.bbs-list.coupon .disabled > a:hover, .root-community .bbs-list .disabled > a:active {
    background-color: #f9f9f9 !important;
}

.bbs-list.coupon .disabled > a:hover .img img {
    transform: none;
}

.bbs-list.coupon .disabled > a:hover .img::before {
    display: none;
}

.bbs-list.coupon .disabled > a:hover::after {
    display: none;
}

.bbs-list.coupon .disabled > a .sum span {
    color: #7e81a6 !important;
}

.comparer + .title-area {
    border-top: 0;
}

.comparer .info {
    position: relative;
    margin-right: 17px;
    font-size: 14px;
    line-height: 22px;
}

.comparer .right .info:after {
    content: "";
    display: block;
    position: absolute;
    top: 5px;
    right: -9px;
    width: 1px;
    height: 12px;
    background-color: #cbd2e2;
}

.icon-table-grid {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_table_grid.svg);
    background-position: center;
    background-repeat: no-repeat;
    vertical-align: -4px;
    cursor: pointer;
    margin-left: 5px;
}

.table-area {
    padding: 20px;
}

.table-area .table-basic td, .table-area .table-basic td * {
    line-height: 150%;
}

.table-area .table-basic td [class^=icon-]::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    vertical-align: middle;
    background-color: #5e35b1;
}

.table-area .scroll-tbody {
    width: 100%;
    max-height: 410px;
}

.icon-tel::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_tel.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_tel.svg) 50%/contain no-repeat;
}

.icon-mobile::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_mobile.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_mobile.svg) 50%/contain no-repeat;
}

/* 정비사업 노후도 분석 */
.map-wrap.decrepit {
    top: 128px;
}

.comparer.decrepit {
    flex-flow: row wrap;
    min-height: 58px;
    padding-left: 15px;
    background-color: #fff;
    z-index: 12;
}

.comparer.decrepit > div {
    display: flex;
    align-items: center;
}

.comparer.decrepit > div:last-child {
    flex: 1;
}

.comparer.decrepit > div:last-child h3 {
    margin-left: 20px;
    padding-left: 20px;
    border-left: solid 1px #dadce0;
}

.comparer.decrepit div > h3 {
    font-size: 16px;
    margin-right: 10px;
}

.comparer.decrepit .compare-save-area .input-field input[type=text] {
    width: 100%;
    margin-left: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
}
.comparer.decrepit .input-field [data-jibun] {
    width: 60px !important;
    text-align: left;
    padding: 0px;
}
.comparer.decrepit .btn-reset {
    height: 38px;
    padding: 0 12px;
    border: 1px solid #dadce0;
    color: #333;
    font-size: 14px;
    transition: .3s;
}
.comparer.decrepit .bldg-pk-area{
    display: none;
    position: absolute;
    width: 880px;
    height: 690px;
    right: 113px;
    top: 45px;
}
.comparer.decrepit .bldg-pk-area > div.card-title{
    position: relative;
    display: flex;
    height: 47px;
    align-items: center;
    border: 1px solid #dbe0ec;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    background-color: #fff6f3;
}
.comparer.decrepit .bldg-pk-area > div.card-content{
    width: 860px;
    height: 100%;
    background-color: #FFF;
    border-right: 1px solid #dbe0ec;
    border-left: 1px solid #dbe0ec;
    border-bottom: 1px solid #dbe0ec;
}
.comparer.decrepit .bldg-pk-area > div.card-content [data-bldg-pk-data]{
    width: 100%;
    margin : 5px 0px;
    /*border: 1px solid red;*/
}
.comparer.decrepit .sub-filter {
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
}

.comparer.decrepit .sub-filter .option {
    margin-right: 0;
}
.comparer.decrepit .sub-filter.set-year > h3 {
    font-size: 16px;
    margin: 0px 10px;
}

.comparer.decrepit .sub-filter.set-year .option {
    margin-right: 10px;
}

.comparer.decrepit .sub-filter.set-year .option > div {
    position: relative;
    padding-top: 13px;
}

.comparer.decrepit .sub-filter.set-year .option > div + div {
    position: relative;
    margin-left: 20px;
}

.comparer.decrepit .sub-filter.set-year .option > div + div::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -10px;
    width: 1px;
    height: 37px;
    border-left: dashed 1px #ccc;
    transform: translateY(-50%);
}

.comparer.decrepit .sub-filter.set-year .option > div small {
    position: absolute;
    top: -4px;
    left: 0;
    color: #666667;
    font-size: 11px;
    font-weight: 600;
}

.comparer.decrepit .sub-filter.set-year .option > div:first-child small {
    color: #8934fa;
}

.comparer.decrepit .sub-filter.set-year .option input[type=number] {
    width: 40px;
    height: 25px;
    padding: 10px 5px;
    border-radius: 3px;
    text-indent: 0;
    font-size: 14px;
}

.comparer.decrepit .sub-filter.set-year .option span {
    font-size: 12px;
}

.comparer.decrepit .sub-filter.set-year .option span + input {
    margin-left: 10px;
}

.comparer.decrepit .sub-filter.set-year .compare-save-area {
    margin-left: 5px;
}

.comparer.decrepit .sub-filter.set-year .btn-search {
    height: 38px;
    padding: 0 16px;
    border-radius: 5px;
    line-height: 38px;
    font-size: 15px;
    font-weight: 400;
    background-color: #3d3d3d;
    transition: .3s;
}

.comparer.decrepit .sub-filter.set-year .btn-strc {
    height: 38px;
    padding: 0 16px;
    border-radius: 5px;
    line-height: 38px;
    font-size: 15px;
    font-weight: 400;
    background-color: #7080ad;
    transition: .3s;
}

.comparer.decrepit .sub-filter.set-year .btn-search:hover {
    background-color: #5e35b1;
}

.comparer.decrepit .dropdown {
    min-width: 100px;
}

.comparer.decrepit .btn-blue {
    height: 38px;
    padding: 0 16px;
}

.comparer.decrepit .icon-pen::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    vertical-align: -1px;
    background-color: #fff;
    -webkit-mask: url(/res/img/component/icon_pen-ff733758012773c85ae9db6e7d5a5f88.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_pen-ff733758012773c85ae9db6e7d5a5f88.svg) 50%/contain no-repeat;
}

.comparer.decrepit .icon-reset {
    display: inline-block;
    width: 20px;
    vertical-align: -8px;
}

.comparer.decrepit .btn-purple {
    width: auto;
    padding: 0 16px;
    border-radius: 5px;
}

.comparer.decrepit .compare-save-area {
    margin-left: 20px;
}

.comparer.decrepit .btn-decrepit {
    margin-left: 0;
}

.comparer.decrepit .icon-group-save {
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    border: 0;
    border-radius: 0;
    background: none;
    background-color: #fff;
    vertical-align: -3px;
    -webkit-mask: url(/res/img/component/icon_save-1af5c753718c2d8793720a8aea24da73.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_save-1af5c753718c2d8793720a8aea24da73.svg) 50%/contain no-repeat;
}

.comparer.decrepit fieldset {
    top: 44px;
    left: 5px;
    bottom: auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
}
.comparer.decrepit .edit-polygon fieldset {
    width: 600px;
    top: 45px;
    left: 0px;
    bottom: auto;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
}
.comparer.decrepit .title-area{
    border: none;
}
/*건물구조 설정*/
.strc-area {
    position: absolute;
    top: 46px;
    left: 5px;
    width: 355px;
    height: 426px;
    border-radius: 3px;
    background-color: #fff;
    border: 1px solid #717171;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .3);
    z-index: 20;
}

.strc-area .strc-title {
    display: flex;
    align-items: center;
    padding: 0px 20px 10px 20px;
    margin: 0;
    border-top: 0;
    border-bottom: 2px solid #673ab7;
}

.strc-area .strc-multi-set {
    position: relative;
    display: flex;
    flex-direction: row;
    width: 100%;
    border-top: 1px solid #cbd0d8;
}

.strc-area .strc-option {
    font-size: 14px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 5px 0px 5px 10px;
    margin: 0;
    border-top: 0;
    border-bottom: 1px solid #cbcbcb25;
}

.strc-area .strc-option-title {
    width: calc(100% - 130px);
}

.strc-area .strc-option-value1 {
    width: 60px;
    margin-right: 0px;
    font-size: 14px;
}

.strc-area .strc-option-value2 {
    width: 70px;
    margin-right: 0px;
    font-size: 14px;
}

.strc-area .strc-year1 {
    color: #ec6969;
}

.strc-area .strc-year2 {
    color: #ffb72f;
}

@media all and (min-width: 5000px) {
    .strc-area {
        left: 1230px;
        top: 58px;
    }
}

.btn-reset:hover {
    background-color: #f7f7f7;
}

.remote-area.decrepit {
    right: 510px;
}

.remote-area.decrepit h4 {
    font-size: 14px;
    line-height: 160%;
}

.btn-decrepit, .btn-decrepit-period {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    margin-left: 0;
    font-size: 15px;
    font-weight: 500;
    border: none;
    background: #712cce;
    background-size: 200%;
    color: #fff;
    text-align: center;
    outline: none;
    cursor: pointer;
    transition: .5s;
}
.edit-polygon fieldset [data-area="update"] h4, .edit-polygon fieldset [data-area="insert"] h4{
    position: relative;
    display: flex;
    height: 47px;
    align-items: center;
    padding: 0 10px;
}
.edit-polygon fieldset [data-area="update"] h4.bullet::before, .edit-polygon fieldset [data-area="insert"] h4.bullet::before{
    top:18px;
}
.edit-polygon .card-title{
    height: 38px;
    padding: 0px 0px 0px 10px;
}
.edit-polygon .card-title.amber{
    background-color: #ffffff;
    border: 0px solid;
}
.edit-polygon .input-set{
    margin: 0px 0px 0px 10px;
}
.sub-filter.set-year .right fieldset .card-title > h4{
    padding: 0px 0px 0px 16px;
}
.edit-polygon .input-set .input-field{
    margin: 0px;
    border: 0px;
}
.comparer.decrepit .edit-polygon .input-field input{
    border: 1px solid #dbdbdb !important;
    width: 230px !important;
}
.comparer.decrepit .edit-polygon .input-field input[data-jibun]{
    border: 1px solid #dbdbdb !important;
    width: 60px !important;
}
.btn-decrepit:hover, .btn-decrepit-period:hover {
    background-color: #3d3d3d;
}

.sub-filter.set-year input[type=number].option1 {
    border-color: rgba(255, 183, 47, 1);
    background-color: rgba(255, 183, 47, .2);
}

.sub-filter.set-year input[type=number].option2 {
    border-color: rgba(236, 105, 105, 1);
    background-color: rgba(236, 105, 105, .2);
}

.sub-filter.set-year input[type=number].option3 {
    border-color: rgba(150, 197, 198, 1);
    background-color: rgba(150, 197, 198, .2);
}

.sub-filter.set-year input[type=number].option4 {
    border-color: rgba(162, 186, 221, 1);
    background-color: rgba(162, 186, 221, .2);
}

.sub-filter.set-year .option-text1 {
    color: #d08800;
}

.sub-filter.set-year .option-text2 {
    color: #ec6969;
}

.sub-filter.set-year .option-text3 {
    color: #5aaeb0;
}

.sub-filter.set-year .option-text4 {
    color: #6d8cb9;
}

.map-right.decrepit {
    top: 127px;
    width: 500px;
    z-index: 5;
}

.map-right.decrepit > div {
    flex: 1;
    position: relative;
    padding: 0 10px 0px 10px;
}

.comparer.decrepit .title-area {
    max-height: 60px;
    padding-bottom: 0;
}

.comparer.decrepit .title-area h3 {
    margin: 0;
    font-size: 18px;
}

.comparer.decrepit .title-area h3 b {
    color: #673ab7;
}

.map-right.decrepit h4 {
    margin-left: 5px;
}

.map-right.decrepit h4::before {
    content: "";
    display: inline-block;
    width: 4px;
    height: 12px;
    margin-right: 5px;
    vertical-align: baseline;
    border-radius: 2px;
    background-color: #712cce;
}

.decrepit .row .total-info {
    height: 40px;
    position: fixed;
    top: 77px;
    right: 20px;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: bold;
    background-color: #fff1f2;
    z-index: 14;
}
.decrepit #infoTxt{
    display: contents;
}
.decrepit #infoTxt h5{
    width: 100%;
}
.decrepit .row .total-info::before {
    content: "i";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 5px;
    border-radius: 100%;
    vertical-align: 1px;
    color: #fff;
    font-size: 11px;
    line-height: 14px;
    font-weight: bold;
    text-align: center;
    background-color: #8934fa;
}

.decrepit .row .total-info > div {
    position: relative;
    width: auto;
}

.decrepit .row .total-info b {
    margin: 0 3px;
    font-family: Muli, sans-serif;
    color: #ec6969;
    font-size: 14px;
    font-weight: bold;
}

.decrepit .row .total-info .tips-box.top {
    top: 5px;
}

.map-right.decrepit .unsold {
    position: absolute;
    top: 50px;
    bottom: 10px;
    left: 10px;
    right: 10px;
    margin-bottom: 10px;
}

.map-right.decrepit .scroll-tbody {
    max-height: calc(100% - 20px);
    overflow-y: auto;
}

.map-right.decrepit .k-grid td, .map-right.decrepit .k-grid th {
    padding: 5px;
    font-size: 12px;
    line-height: 130%;
}

.map-right.decrepit .k-grid td [class^=icon-] {
    vertical-align: -2px;
}

.map-tool-area.decrepit {
    bottom: auto;
    top: 140px;
}

.map-tool-area.decrepit .map-tool-list {
    bottom: auto;
    top: 0;
}

.address-depth2 {
    border-top: 1px solid #d9e0f7;
}

.table-decrepit {
    border-top: solid 1px #d9e0f7;
}

.table-decrepit th, .table-decrepit td {
    padding: 5px 1px;
    border-bottom: 1px solid #dee3eb;
    font-size: 11px;
    text-align: center;
}

.table-decrepit th {
    color: #50649c;
    border-color: #dee3eb;
    border-bottom: solid 2px #d9e0f7;
    background-color: #f0f3fc;
}

.table-decrepit a {
    display: inline-block;
    padding: 0 3px;
    text-decoration: underline;
    font-weight: 500;
    cursor: pointer;
}

.table-decrepit a:hover {
    color: #8934fa;
}

.table-decrepit td * {
    vertical-align: middle;
}

.table-decrepit span {
    font-weight: bold;
}

.table-decrepit b {
    margin-right: 2px;
    vertical-align: baseline;
    font-family: Muli, sans-serif;
}

.table-decrepit .text-right {
    padding-right: 10px;
}

.table-decrepit .text-left {
    padding-left: 10px;
}

.table-decrepit td[class^=bg-] {
    color: #fff;
}

.bg-orange {
    background-color: #ffb72f;
}

.bg-red {
    background-color: #ec6969;
}

.bg-green {
    background-color: #96c5c6;
}

.bg-blue {
    background-color: #a2badd;
}

.bg-gray {
    background-color: #999;
}

/* 리포트 결제 */
.title-wrapper.report > .title {
    width: auto;
}

.bbs-list.report li > a::before {
    content: "미열람";
    color: #fff;
    background: linear-gradient(120deg, #6f21a2, #4436a0, #7c3df1);
    z-index: 1;
}

.bbs-list.report li > a:hover, .root-community .bbs-list.edu li > a:active {
    background-color: #f3f6fb;
}

.bbs-list.report .bbs-content-info .visited {
    display: none;
}

.bbs-list.report .complete > a::before {
    content: "열람완료";
}

.bbs-list.report .complete > a::before {
    background: #aaa !important;
}

.bbs-list.report .complete > a {
    background-color: #f9f9f9;
}

.bbs-list.report .btn {
    height: 40px;
}

.bbs-list.report .btn-dark {
    background-color: #4d4d4d;
}

.bbs-list.report .btn-dark:hover {
    background-color: #111;
}

.bbs-list.report .btn::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: -2px;
}

.bbs-list.report .icon-youtube::before {
    background-color: #fff;
}

.bbs-list.report .icon-report::before {
    background-color: #fff;
    -webkit-mask: url(/res_root/img/common/icon_report-7de4598107698ce343d61e7bfd01ae1d.svg) 50%/contain no-repeat;
    mask: url(/res_root/img/common/icon_report-7de4598107698ce343d61e7bfd01ae1d.svg) 50%/contain no-repeat;
}

.bbs-list.report .icon-delete::before {
    width: 10px;
    height: 10px;
    vertical-align: middle;
    background-color: transparent;
    -webkit-mask: none;
    mask: none;
    background: url(/res/img/component/icon_delete_white-0db95bcc861438e6c64c4443f506f2c7.svg);
}

.bbs-list.report .btn-hotpink:hover {
    background-color: #333;
}

.bbs-list.report .disabled > a {
    opacity: .7;
    cursor: default;
    background-color: #f9f9f9;
}

.bbs-list.report .disabled > a .img {
    background-color: #fff;
}

.bbs-list.report .disabled > a .img img {
    mix-blend-mode: luminosity;
    opacity: .7;
}

.bbs-list.report .disabled > a .category {
    color: #7e81a6;
}

.bbs-list.report .disabled > a:hover, .bbs-list.report .disabled > a:active {
    background-color: #f9f9f9;
}

.bbs-list.report .disabled > a:hover .img img {
    transform: none;
}

.bbs-list.report .disabled > a:hover .img::before {
    display: none;
}

.bbs-list.report .disabled > a:hover::after {
    display: none;
}

.bbs-list.report .disabled .btn {
    background-color: #999 !important;
}

.bbs-view .event-info.report dt {
    width: 200px;
}

.bbs-view .event-info.report dd {
    width: calc(100% - 200px);
}

.bbs-view .event-info > dd .btn {
    display: inline-block;
    vertical-align: middle;
    line-height: 42px;
}

.bbs-view .event-info > dd .icon-youtube::before {
    background-color: #ce1312;
    -webkit-mask: url(/res/img/component/icon_youtube_white-560b6161e971c26d47744393e588a31c.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_youtube_white-560b6161e971c26d47744393e588a31c.svg) 50%/contain no-repeat;
}

.report-total {
    padding: 40px;
}

.report-total {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    background: linear-gradient(90deg, #d7f2fd, #f4e9ee);
}

.report-total p {
    font-size: 16px;
    line-height: 160%;
    text-align: center;
}

.report-total .step {
    width: 100%;
    margin-top: 50px;
}

.report-total .step ol {
    display: flex;
    gap: 50px;
}

.report-total .step li {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    flex: 1;
    position: relative;
    padding: 20px;
    border-radius: 15px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    font-weight: bold;
    font-size: 14px;
    text-align: center;
    line-height: 130%;
    word-break: keep-all;
    background-color: #fff;
}

.report-total .step li + li::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: -40px;
    transform: translateY(-50%) rotate(-45deg);
    width: 20px;
    height: 20px;
    border-bottom: 2px solid rgba(0, 0, 0, .2);
    border-right: 2px solid rgba(0, 0, 0, .2);
}

.report-total .step li::before {
    display: block;
    position: absolute;
    top: -10px;
    left: -10px;
    width: 30px;
    height: 30px;
    color: #fff;
    border-radius: 100%;
    font-weight: bold;
    text-align: center;
    line-height: 30px;
    background-color: #712cce;
}

.report-total .step li:first-child::before {
    content: "1";
}

.report-total .step li:nth-child(2)::before {
    content: "2";
}

.report-total .step li:nth-child(3)::before {
    content: "3";
}

.report-total .step li:nth-child(4)::before {
    content: "4";
}

.report-total .step li:nth-child(5)::before {
    content: "5";
}

.report-total .step li:nth-child(6)::before {
    content: "6";
}

.report-total .step span {
    font-family: inherit;
    line-height: inherit;
}

.report-total .step span::before {
    content: "";
    display: block;
    margin: 0 auto 15px auto;
    width: 50px;
    height: 50px;
    background-position: 50%;
    background-size: contain;
    background-repeat: no-repeat
}

.report-total .step li:first-child span::before {
    background-image: url(/res_root/img/common/icon_report_step1-1cac441202586f1c9981601ef53b914d.svg);
}

.report-total .step li:nth-child(2) span::before {
    background-image: url(/res_root/img/common/icon_report_step2-1371f2fe2443b3482bb2745d2a52f7ac.svg);
}

.report-total .step li:nth-child(3) span::before {
    background-image: url(/res_root/img/common/icon_report_step3-2fd3708510640dfd111b91051dca1fe5.svg);
}

.report-total .step li:nth-child(4) span::before {
    background-image: url(/res_root/img/common/icon_report_step4-bb0a174d7015bf945831c3c2c29fbe0b.svg);
}

.report-total .step li:nth-child(5) span::before {
    background-image: url(/res_root/img/common/icon_report_step5-89bb76e23a518e9fbe0335967de3b039.svg);
}

.report-total .step li:nth-child(6) span::before {
    background-image: url(/res_root/img/common/icon_report_step6-6a9e589239f6614a0d3c66aaf41a13b9.svg);
}

.bbs-top.member-info span {
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 30px;
    font-weight: 500;
    letter-spacing: -1.5px;
}

.bbs-top.member-info span.bullet:before {
    display: none;
}

.bbs-form.member-info > .dl-table > dd > input {
    float: left;
    width: 180px;
    margin-right: 0;
    font-size: 15px;
    font-weight: 500;
}

.bbs-form.member-info .required label::after {
    content: "*";
    display: inline-block;
    margin-left: 5px;
    color: #ff4081;
}

.bbs-form.member-info > .dl-table > dd > input {
    float: left;
    width: 180px;
    margin-right: 0;
    font-size: 15px;
    font-weight: 500;
}

.bbs-form.member-info > .dl-table > dd.long > input {
    width: 100%;
}

.bbs-form.member-info > .dl-table > dd.long > input + .tips {
    margin-left: 0;
    margin-top: 5px;
}

.bbs-form.member-info > .dl-table > dd > input[disabled] {
    background-color: #f0f3fc;
}

.bbs-form.member-info > .dl-table > dd > .btn {
    height: 38px;
    padding: 0 10px;
}

.bbs-form.member-info > .dl-table > dd .btn-purple {
    padding: 0 15px;
}

.bbs-form.member-info > .dl-table > dd > input + .btn, .bbs-form.member-info > .dl-table > dd > input + .dropdown, .bbs-form.member-info > .dl-table > dd > span + button {
    margin-left: 10px;
}

.bbs-form.member-info > .dl-table > dd > input + input {
    margin-left: 5px;
}

.bbs-form.member-info > .dl-table > dd .btn + .btn {
    margin-left: 10px;
}

.bbs-form.member-info > .dl-table > dd.phone > input {
    width: 80px;
}

.bbs-form.member-info > .dl-table > dd .icon-alarm::before {
    background-color: #fff;
}

.bbs-form.member-info > .dl-table > dd > .checking + button {
    margin-left: 15px;
}

.bbs-form.member-info dd > span {
    float: left;
    margin: 0 5px;
    text-align: center;
    line-height: 38px;
}

.bbs-form.member-info dd .tips {
    display: inline-block;
    font-size: 14px;
    font-weight: normal;
    margin-bottom: 0;
    margin-left: 15px;
    line-height: 130%;
}

.bbs-form.member-info .checking + .checking {
    margin-left: 30px;
}

.bbs-form.member-info dd .word-tip {
    margin-left: 30px;
    color: #8934fa;
}

.bbs-form.member-info dd.security {
    position: relative;
    padding-bottom: 40px;
}

.bbs-form.member-info dd.security .notes {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    position: absolute;
    bottom: 5px;
    left: 20px;
}

.bbs-form.member-info .certi-tel input {
    width: 80px !important;
}

.bbs-form.member-info .youtube-auth-time {
    color: red;
    font-size: 15px;
}

.bbs-form.member-info.teacher .terms-agree.contract{
    background-color: #f0f3fc;
}
.bbs-form.member-info.teacher .terms-agree.contract span.checkmark{
    border: 2px solid #7b7d85;
    background: #7b7d85;
}


.btn-border {
    font-weight: 500;
}

.icon-change-own::before {
    background-color: #fff;
    mask: url(/res/img/component/icon_exchange-ffabeea2974f3e5003de49d23bc3cb89.svg) 50%/16px no-repeat;
    -webkit-mask: url(/res/img/component/icon_exchange-ffabeea2974f3e5003de49d23bc3cb89.svg) 50%/16px no-repeat;
}

.btn-delete::before {
    vertical-align: -3px;
    background-color: #fff;
    mask: url(/res/img/component/icon_delete-11f0bbb57aab618c33ad6c0a39e78efc.svg) 50%/12px no-repeat;
    -webkit-mask: url(/res/img/component/icon_delete-11f0bbb57aab618c33ad6c0a39e78efc.svg) 50%/12px no-repeat;
}

.icon-locked::before {
    -webkit-mask: url(/res/img/component/icon_pw-239427838ad43d119079ede23b181725.svg) 0/contain no-repeat;
    mask: url(/res/img/component/icon_pw-239427838ad43d119079ede23b181725.svg) 0/contain no-repeat;
}

.modal-container .report-area .col-2 {
    display: flex;
    flex-flow: row nowrap;
    gap: 50px;
}

.modal-container .report-area .wide {
    width: 100%;
}

.modal-container .report-area .bbs-form > .dl-table > dt {
    width: 200px;
}

.modal-container .report-area .bbs-form > .dl-table > dd {
    width: calc(100% - 200px);
}

.modal-container .report-area .btn-attach {
    position: relative;
    margin-right: 10px;
    line-height: 34px;
    background-color: #ccd5e1;
    cursor: pointer;
}

.modal-container .report-area .number input {
    width: 60px !important;
}

.modal-container .report-area .btn-attach:hover {
    border-color: #f8f9fa;
    background-color: #e2e6ea;
}

.modal-container .report-area .btn-attach input[type=file] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.modal-container .report-area .button-area.report-add {
    padding-top: 20px;
}

.modal-container .report-area .button-area.report-add .icon-detail-view::before {
    width: 18px;
    height: 18px;
}

.modal-container .report-area .bbs-list li {
    position: relative;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
    padding: 30px;
    border-bottom: 1px solid #dee3eb;
    background-color: #f3f6fb;
}

.modal-container .report-area .bbs-list li > div:first-child {
    padding-left: 70px;
}

.modal-container .report-area .bbs-list li > div:first-child::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 28px;
    width: 45px;
    height: 45px;
    background-color: #333;
    -webkit-mask: url(/res/img/component/icon_report_time-19dba761f1ca42b0b1b3c26b0f1caed5.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_report_time-19dba761f1ca42b0b1b3c26b0f1caed5.svg) 50%/contain no-repeat;
}

.modal-container .report-area .bbs-list li > div.no-posts {
    width: 100%;
    padding-left: 0;
    padding-top: 190px;
    background-position: center -95px;
}

.modal-container .report-area .bbs-list li.complete {
    background-color: #fff;
}

.modal-container .report-area .bbs-list li.complete::before {
    -webkit-mask: url(/res/img/component/icon_report_complete-661aff67cd96dc9a166ee93d01d88ad5.svg) 50%/contain no-repeat;
    mask: url(/res/img/component/icon_report_complete-661aff67cd96dc9a166ee93d01d88ad5.svg) 50%/contain no-repeat;
}

.modal-container .report-area .bbs-list li .subject {
    margin-bottom: 10px;
    font-size: 18px;
    font-weight: 500;
    line-height: 130%;
}

.modal-container .report-area .bbs-list li .bbs-content-info {
    margin-bottom: 0;
}

.modal-container .report-area .bbs-list li .icon-detail-view::before {
    width: 14px;
    height: 14px;
}

.modal-container .report-area .bbs-list li .icon-link-blank::before {
    width: 15px;
    height: 15px;
}

.modal-container .report-area .bbs-list li .btn[disabled] {
    background-color: #999 !important;
}

.modal-container .report-area .bbs-list li .no-posts > span {
    background-color: #fff;
}

.modal-container .report-area .bbs-list li .no-posts::before {
    display: none;
}

.modal-container .row.full-size {
    height: calc(100vh - 100px);
    margin: 0;
    padding: 0;
}

.modal-container .row.full-size .wide {
    height: 100%;
    overflow-y: auto;
}

.modal-container .row.full-size .wide canvas {
    width: 100%;
    height: auto;
}

.modal-container .pdfobject-container {
    margin: 0;
}

.sub-title {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-bottom: 15px;
}

.report-area {
    position: relative;
    padding: 20px;
    border: 1px solid #dcdcdc;
    background-color: #fff;
}

.report-area .sub-title h2 {
    font-size: 20px;
}

.report-area .button-area .btn {
    transition: .3s;
}

.report-area .button-area .btn:hover {
    color: #fff !important;
}

.report-area .member-info dd div + input {
    margin-left: 5px;
}

.report-area .member-info dd.phone {
    gap: 5px;
}

.report-area .member-info dd.phone > div {
    margin-left: 10px;
}

.report-area .member-info dd.phone .btn + .btn {
    margin-left: 5px;
}

.report-area .member-info dd.phone span {
    width: auto;
    margin: 0;
}

.report-area .member-info dd.security .notes {
    bottom: 10px;
    right: 0;
    margin: 0;
}

.report-area .member-info dd.security .notes .tips {
    margin-left: 0;
}

.report-area .member-info dd.attachment button {
    font-size: 16px;
    font-weight: bold;
}

.report-area .member-info dd.attachment .btn-attach + ul li {
    color: #333;
    font-size: 13px;
}

.report-area .member-info dd.attachment .delete {
    vertical-align: -4px;
    background-color: #eee;
}

.report-area .btn {
    height: 38px;
    font-weight: 500;
}

.report-area .btn-border {
    border: 0;
    box-shadow: none;
    color: #fff;
    background-color: #4d4d4d;
}

.report-area .btn-border::before {
    background-color: #fff;
}

.report-area .btn-border:hover {
    background-color: #111;
}

.report-area .btn-secondary {
    background-color: #673ab7;
}

.report-area .btn-secondary:hover {
    background-color: #6f21a2;
}

.report-area .btn-blue {
    background-color: #39359f;
}

.report-area .btn-blue:hover, .report-area .member-info dd .btn-blue:active {
    background-color: #2d4eaf;
}

.report-area .member-info .terms-box {
    width: 100%;
    margin: 15px 0;
}

.report-area .member-info .terms-box + .checking {
    margin-bottom: 20px;
}

.report-area .bbs-content-info .waiting::before {
    mask: url(/res/img/component/icon_time-3ae35e4214193c62f8d6f6ac57c5daa1.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_time-3ae35e4214193c62f8d6f6ac57c5daa1.svg) 50%/contain no-repeat;
    background-image: none;
    background-color: #dc3535;
}

.report-area .bbs-content-info .complete {
    font-weight: 600;
}

.report-area .bbs-content-info .complete::before {
    mask: url(/res/img/component/icon_check-31d5ada4555f53dd28d6898074159c7c.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_check-31d5ada4555f53dd28d6898074159c7c.svg) 50%/contain no-repeat;
    background-image: none;
    background-color: #2b45d4;
}

.report-area .terms-agree {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-left: 0;
    margin-bottom: 15px;
    padding: 10px;
    background-color: #f3f6fb;
}

.report-area .terms-agree .checking span {
    font-weight: bold;
    font-size: 18px;
}

.report-area .terms-agree .checking .checkmark {
    top: 1px;
}

.terms-text {
    padding: 20px;
    border: 1px solid #dadada;
    max-height: 400px;
    overflow-y: auto;
}

.terms-text h3 {
    margin-bottom: 15px;
    padding-top: 10px;
    padding-left: 0;
    color: #712cce;
    font-weight: bold;
    background: none;
}

.terms-text h4 {
    margin-bottom: 5px;
    padding-left: 0;
    background: none;
}

.terms-text h4::before {
    display: none;
}

.terms-text h4 b {
    display: inline-block;
    padding: 3px;
    border-bottom: solid 1px #dc3535;
    font-weight: bold;
    font-size: 20px;
    background-color: #ffff00;
}

.terms-text p {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 160%;
    text-align: justify;
}

.terms-text ol, .terms-text ul {
    margin-bottom: 15px;
    padding-left: 15px;
}

.terms-text li {
    margin-bottom: 10px;
    font-size: 16px;
    line-height: 140%;
    text-align: justify;
}

.terms-text li ol, .terms-text li ul {
    margin-top: 15px;
}

.terms-text li li {
    margin-bottom: 10px;
    padding-left: 15px;
    color: #7e81a6;
    font-size: 15px;
}

.btn-impossible {
    position: relative;
    border: solid 1px #dfe6ef;
    color: #f45666;
}

.btn-impossible:hover {
    border-color: #f45666;
}

.btn-impossible::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 2px;
    vertical-align: -3px;
    background-color: #dc3535;
    mask: url(/res/img/component/icon_delete-11f0bbb57aab618c33ad6c0a39e78efc.svg) 50%/12px no-repeat;
    -webkit-mask: url(/res/img/component/icon_delete-11f0bbb57aab618c33ad6c0a39e78efc.svg) 50%/12px no-repeat;
}

.icon-detail-view {
    margin: 0;
}

.icon-detail-view::before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    vertical-align: -1px;
    background-color: #fff;
    mask: url(/res/img/component/icon_detail_view-95e3776c93e50ea5a680a7c163c38711.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_detail_view-95e3776c93e50ea5a680a7c163c38711.svg) 50%/contain no-repeat;
}

.icon-link-blank::before {
    content: "";
    display: inline-block;
    margin-right: 5px;
    vertical-align: -1px;
    background-color: #fff;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
}

.tab-contents .button-area, .report-area .button-area {
    padding: 30px 0;
    text-align: center;
}

.tab-contents .button-area button, .report-area .button-area button {
    width: 200px;
    height: 60px;
    border-radius: 5px;
    font-size: 20px;
}

.tab-contents .button-area .btn-secondary {
    background-color: #673ab7;
}

.tab-contents .button-area .btn-secondary:hover {
    background-color: #6f21a2;
}

.bbs-filter .search-box label {
    margin-left: 10px;
    font-weight: 500;
}

.bbs-filter .search-box input[disabled] {
    background-color: #f0f3fc;
}

/* 답변알림거부 */
.bbs-btn-set .btn-accept {
    color: #fff;
    background-color: #8f55e2;
}

.bbs-btn-set .btn-accept:hover {
    color: #8f55e2;
}

.bbs-btn-set .btn-reject {
    color: #fff;
    background-color: #f45666;
}

.bbs-btn-set .btn-reject:hover {
    color: #f45666;
}

.bbs-btn-set .btn-secondary:hover {
    color: #4d79f6;
}

/* 교육 이벤트 */
.modal-container.edu.event {
    max-width: 60%;
    left: 50%;
    transform: translateX(-50%);
    min-height: 250px;
}

.modal-container.edu.event li {
    padding: 15px 10px;
}

.modal-container.edu.event li .confirm {
    line-height: 30px;
    width: 100px;
    margin-left: 15px;
}

.modal-container.edu.event input {
    height: 42px;
    padding: 0 10px;
    border: 1px solid #dadce0;
    border-radius: 3px;
    transition: border-color .3s;
}

.modal-container.edu.event .button-area {
    padding: 10px 0 0 0;
    text-align: center;
}

.modal-container.edu.event .button-area button {
    width: 200px;
    height: 40px;
    border-radius: 5px;
    font-family: NotoSansM;
    font-size: 15px;
}

/* 쿠폰 이벤트 */
.coupon.event {
    width: 100%;
    padding: 20px;
    background-color: #f0f3fc;
}

.coupon.event > div {
    text-align: center;
}

.coupon.event > div p {
    margin-top: 15px;
    color: #555;
    font-size: 13px;
    line-height: 150%;
}

.coupon.event .label {
    width: 100px;
    margin-right: 10px;
    font-size: 14px;
    font-weight: 600;
}

.coupon.event .confirm {
    margin-left: 5px;
}

.coupon.event .code {
    width: 250px;
    height: 44px;
    padding: 0 10px;
    border: 1px solid #dadce0;
    border-radius: 3px;
    vertical-align: middle;
    font-family: Verdana;
    font-size: 18px;
    font-weight: bold;
    text-indent: 0;
    letter-spacing: 0;
    outline: none;
    transition: .3s;
}

.coupon.event .code::-webkit-input-placeholder {
    font-family: "Noto Sans KR";
    font-size: 15px;
}

.coupon.event .code::-webkit-input-placeholder:focus {
    color: transparent;
}

.coupon.event .code::-moz-input-placeholder {
    font-family: "Noto Sans KR";
    font-size: 15px;
}

.coupon.event .code::-ms-input-placeholder {
    font-family: "Noto Sans KR";
    font-size: 15px;
}

.coupon.event .code:focus::-webkit-input-placeholder {
    color: transparent;
}

.coupon.event .code:focus::-moz-placeholder {
    color: transparent;
}

.coupon.event .code:focus:-ms-input-placeholder {
    color: transparent;
}

.coupon.event .code:focus::-ms-input-placeholder {
    color: transparent;
}

.coupon.event .code-result {
    margin-top: 15px;
    padding-top: 15px;
    border-top: dashed 1px #dcdcdc;
}

.coupon.event .code-result input {
    width: 100%;
    border: 0;
    padding: 0;
    color: #333;
    font-weight: 600;
    font-size: 16px;
    background-color: #f0f3fc;
    text-align: center;
}

.coupon.event + .bbs-form {
    width: 100%;
}

.btn-accept {
    background-color: #673ab7;
}

.btn-accept:hover, .btn-accept:active {
    background-color: #6f21a2;
}

.btn-accept::before {
    content: "";
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 3px;
    background-color: #fff;
    vertical-align: -1px;
    mask: url(/res/img/component/icon_check-31d5ada4555f53dd28d6898074159c7c.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_check-31d5ada4555f53dd28d6898074159c7c.svg) 50%/contain no-repeat;
}

.btn-accept + span {
    margin-left: 5px;
    font-weight: 600;
    color: #8f55e2;
}

.fr-view img.fr-dib {
    margin: 0 auto;
}

/* 오픈채팅 톡방 */
.openChat-header li small {
    margin-top: 10px;
    color: #dc3535;
}

.openChat-header li span {
    width: 90px;
    margin-right: 8px;
    color: #6e42d9;
    font-size: 14px;
    line-height: 24px;
    font-weight: 500;
}

.openChat-header li .icon-talk-ex::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 40px;
    margin-right: 8px;
    vertical-align: middle;
    background: url(/res/img/component/icon_talk_ex-805c00fcaa1d466e09aab33e843fc0af.jpg) 50%/contain no-repeat;
}

.openChat-list {
    padding: 0 20px;
}

/* 지도 공인중개사 매물 정보 */
.realtor-box {
    width: 300px;
    padding-bottom: 15px;
    cursor: default;
}

.realtor-box .title span {
    max-width: 100%;
    margin-right: 0;
}

.realtor-box .title span::before {
    border-radius: 100%;
    background: none;
    background-color: #3f5856;
}

.realtor-box .title span::after {
    display: none;
}

.realtor-box .title i::before {
    left: 6px;
    width: 18px;
    height: 18px;
    transform: translateY(-58%);
}

.realtor-box .list {
    height: auto;
}

.realtor-box .list p {
    position: relative;
    padding-top: 10px;
    padding-left: 18px;
    color: #50649c;
    font-size: 12px;
}

.realtor-box .icon-map::before {
    position: absolute;
    top: 9px;
    left: 0;
}

.sale-state {
    display: flex;
    padding: 10px 0 5px 0;
}

.sale-state button {
    padding: 0 7px;
    color: #50649c;
    font-size: 12px;
    word-break: keep-all;
    line-height: 130%;
    transition: .2s;
}

.sale-state button + button {
    border-left: solid 1px #ddd;
}

.sale-state button b {
    font-family: Muli, sans-serif;
    font-size: 13px;
    font-weight: bold;
}

.sale-state .buy b {
    color: #007681;
}

.sale-state .buy:hover {
    color: #007681;
}

.sale-state .rent b {
    color: #ff7240;
}

.sale-state .rent:hover {
    color: #ff7240;
}

.sale-state .rent-monthly b {
    color: #7536cf;
}

.sale-state .rent-monthly:hover {
    color: #7536cf;
}

.sale-state .monthly b {
    color: #01529e;
}

.sale-state .monthly:hover {
    color: #01529e;
}

.ezip-count {
    position: absolute;
    top: -8px;
    right: -10px;
    width: 20px;
    height: 20px;
    color: #fff;
    border-radius: 100%;
    font-size: 11px;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
    background-color: #f08544;
}

.apt-title-area.realtor {
    background: linear-gradient(90deg, #f6efff, #e5f7ff);
}

.apt-title-area.realtor .apt-title h4::before {
    width: 16px;
    height: 16px;
    mask: url(/res/img/component/icon_map_realtor-5b0df8da8479429e9e3872f452098038.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_map_realtor-5b0df8da8479429e9e3872f452098038.svg) 50%/contain no-repeat;
}

.apt-title-area.realtor ~ .tab-panel.apt-tab.top-pad {
    padding-top: 70px;
}

.sale-dashboard {
    padding: 7px 0;
    border: solid 1px #e6eaf0;
    border-radius: 3px;
    background-color: #f3f6fb;
}

.sale-dashboard > dl {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sale-dashboard > dl > * {
    font-size: 12px;
}

.sale-dashboard dt {
    position: relative;
    margin-right: 5px;
    padding-top: 2px;
    font-weight: 500;
}

.sale-dashboard dd {
    padding-top: 2px;
}

.sale-dashboard dd + dt {
    padding-left: 10px;
    margin-left: 10px;
    border-left: solid 1px #ddd;
}

.sale-dashboard dd b {
    font-family: Muli, sans-serif;
    font-size: 13px;
    font-weight: bold;
}

.map-info .tab-panel.realtor {
    position: static;
    min-height: 250px;
    padding-top: 10px;
}

.map-info .tab-panel.realtor .title-area h4 {
    font-size: 15px;
}

.tab-panel.realtor .info-detail > dl::before {
    font-size: 11px;
}

.tab-panel.realtor .info-detail .item-info dt {
    width: 80px;
    font-size: 12px;
}

.tab-panel.realtor .info-detail .item-info dd {
    width: calc(100% - 80px);
}

.info-detail .price {
    margin-bottom: 5px;
    color: #111;
    font-size: 15px;
    font-weight: 600;
}

.info-detail > dl.apt-buy::after {
    background-color: #007681;
}

.info-detail > dl.apt-rent::after {
    background-color: #ff7240;
}

.info-detail > dl.apt-monthly::after {
    background-color: #01529e;
}

.info-detail > dl.apt-monthly-rent::after {
    background-color: #7536cf;
}

.info-detail > dl.apt-buy .price {
    color: #007681;
}

.info-detail > dl.apt-rent .price {
    color: #ff7240;
}

.info-detail > dl.apt-monthly .price {
    color: #01529e;
}

.info-detail > dl.apt-monthly-rent .price {
    color: #7536cf;
}

.info-detail > dl dt small {
    letter-spacing: -1px;
}

.result-area > .layer > .apt-sale-area {
    margin-top: 75px !important;
}

.result-area .apt-sale-area .options {
    padding: 5px 0;
    background-color: #fff;
}

.result-area .apt-sale-area .options > div {
    flex-flow: row nowrap;
}

.result-area .options > .realtor-filter {
    padding-top: 0;
}

.result-area .options .map-filter-set {
    width: calc(50% - 5px);
}

.result-area .map-filter-set .filter > a {
    flex-flow: row wrap;
    height: 45px;
    padding-top: 0;
    padding-right: 18px;
    border-right: 1px solid #dadce0;
    background-color: #fff;
    transition: .2s;
}

.result-area .map-filter-set .filter > a .filter-name {
    width: 100%;
    color: #747d8d;
    margin-top: -2px;
    font-size: 12px;
    font-weight: 500;
    line-height: normal;
}

.result-area .map-filter-set .filter > a .text {
    display: block;
    line-height: 100%;
    white-space: nowrap;
    width: 100%;
    margin-top: -10px;
    overflow: hidden;
    font-size: 14px;
    text-overflow: ellipsis;
}

.result-area .map-filter-set .filter > a .arrow {
    right: 7px;
}

.result-area .map-filter-set .filter > a.active {
    border-color: #7970c8;
    border-width: 2px;
}

.result-area .map-filter-set .filter fieldset {
    display: none;
    position: absolute;
    top: 45px;
    left: 0;
    right: 0;
    min-width: auto;
    padding-top: 0;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    background-color: #fff;
    z-index: 5;
    -webkit-box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
}

.result-area .map-filter-set .filter fieldset .checking-set {
    padding: 10px 5px;
}

.result-area .map-filter-set .filter fieldset .checking.input input[type=text],
.result-area .map-filter-set .filter fieldset .checking.input input[type=number] {
    width: calc(50% - 12px);
    height: 30px;
    padding: 0 5px;
}

.result-area .map-filter-set .filter fieldset .checking.input > div {
    width: auto;
    margin-left: 0;
}

.result-area .map-filter-set .filter fieldset .filter-title {
    padding: 0 10px;
}

.result-area .map-filter-set .filter fieldset .filter-title button {
    height: 25px;
    padding: 0 10px;
    border-radius: 3px;
    color: #666;
    font-size: 12px;
}

.result-area .map-filter-set .filter fieldset .filter-title button.active {
    color: #fff;
    background-color: #8934fa;
}

.result-area .map-filter-set .filter fieldset .filter-title button:nth-child(2) {
    margin-left: 5px;
}

.result-area .map-filter-set .filter fieldset .checking {
    margin-right: 10px;
}

.result-area .map-filter-set .filter fieldset .checking.input {
    margin-bottom: 2px;
}

.result-area .map-filter-set .filter fieldset .check-input-btn {
    width: 100%;
    padding: 0 10px;
}

.result-area .map-filter-set .filter fieldset .check-input-btn > .btn {
    width: 100%;
    height: 30px;
    color: #fff;
    font-size: 12px;
    background-color: #9086dc;
}

.result-area .map-filter-set .filter fieldset .check-input-btn > .btn:hover {
    background-color: #8934fa;
}

.icon-realtor::before {
    mask: url(/res/img/component/icon_map_realtor-5b0df8da8479429e9e3872f452098038.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_map_realtor-5b0df8da8479429e9e3872f452098038.svg) 50%/contain no-repeat;
}

.remote-content {
    display: flex;
    flex-flow: column nowrap;
    width: 100%;
    height: calc(100% - 46px);
}

.realtor-info {
    position: fixed;
    width: 400px;
    height: 700px;
}

.realtor-info .inner {
    width: 100%;
    padding: 0 20px;
}

.apt-default-area {
    position: relative;
    padding-bottom: 20px;
    background-color: #edf1f6;
}

.apt-default-img {
    position: relative;
    overflow: hidden;
    height: 120px;
    background: url(/res_ezip/img/img_apt_bg-cef5e62a61d86098aefe9d359d80e65c.jpg) 50% 20%/cover no-repeat;
}

.apt-default-img::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(10, 46, 79, .3);
}

.apt-default-img img {
    width: 100%;
    margin-top: -50%;
    transform: translateY(50%);
}

.apt-title-info {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -52px);
    width: 90%;
}

.apt-title-info > * {
    color: #fff;
    text-align: center;
    text-shadow: 0 0 5px rgba(0, 0, 0, .8);
}

.apt-title-info dt {
    margin-bottom: .3em;
    font-size: 20px;
    font-weight: bold;
    word-break: keep-all;
    line-height: 110%;
}

.apt-title-info dd {
    font-size: 12px;
}

.apt-title-info dd + dd {
    margin-top: 2px;
}

.apt-default-area .apt-major-info {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    min-height: 35px;
}

.apt-major-info {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    box-shadow: 0 0 3px #ccd2eb;
    background-color: #fff;
}

.apt-major-info > * {
    display: flex;
    height: 20px;
}

.apt-major-info dt {
    align-items: center;
    margin-right: 3px;
    padding-top: 1px;
    color: #666;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -.5px;
}

.apt-major-info dd + dt {
    margin-left: 10px;
}

.apt-major-info dd {
    align-items: flex-start;
    color: #333;
    font-size: 14px;
    font-weight: 600;
}

.apt-major-info dd b {
    margin-left: 5px;
    padding: 0 3px;
    border-radius: 3px;
    color: #fff;
    font-size: 10px;
    line-height: 20px;
}

.year-blue {
    background-color: #4d6bd9;
}

.year-type1 {
    background-color: #f9b921;
}

.year-type2 {
    background-color: #7dc13a;
}

.year-type3 {
    background-color: #4d6bd9;
}

.year-type4 {
    background-color: #98806c;
}

.apt-detail-area {
    flex: 1;
    overflow: hidden;
    overflow-y: auto;
}

.title-line {
    position: relative;
    padding: 15px 0;
    border-bottom: solid 1px #eee;
}

.item-area {
    position: relative;
    margin-bottom: 10px;
    padding: 1em 0;
}

.item-area::before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: -10px;
    width: 100%;
    height: 10px;
    background-color: #f1f1f1;
}

.item-info {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
}

.item-info > * {
    min-height: 30px;
    margin: 2.5px 0;
}

.item-info dt {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    border: solid 1px #eee;
    border-radius: 15px;
    font-size: 13px;
    font-weight: 500;
    background-color: #eee;
}

.item-info dt.highlight {
    border-color: #333;
    background-color: #fff;
}

.item-info dd.highlight {
    font-weight: bold;
}

.item-info dt.sale {
    border-color: #007681;
    color: #007681;
}

.item-info dt.rent {
    border-color: #ff7240;
    color: #ff7240;
}

.item-info dt.monthly {
    border-color: #01529e;
    color: #01529e;
}

.item-info dt.monthly-rent {
    border-color: #7536cf;
    color: #7536cf;
}

.item-info dd {
    display: flex;
    align-items: center;
    width: calc(100% - 90px);
    padding-left: 10px;
    font-size: 14px;
    line-height: 130%;
    word-break: break-all;
}

.item-info dd.sale {
    color: #007681;
}

.item-info dd.rent {
    color: #ff7240;
}

.item-info dd.monthly {
    color: #01529e;
}

.item-info dd.monthly-rent {
    color: #7536cf;
}

.item-info dd.highlight {
    font-size: 1em;
    font-weight: bold;
}

.item-info dd a {
    color: #8934fa;
    text-decoration: underline;
}

.info-detail .item-info {
    margin-bottom: 15px;
}

.apt-detail-area .option-form {
    margin-top: 10px;
}

.option-form {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    gap: .5em;
}

.option-form .btn {
    flex: 1;
    height: 40px;
    color: #fff;
}

.option-form .btn-secondary {
    color: #fff;
    background-color: #8f55e2;
}

.option-form .btn-secondary:hover {
    background-color: #7536cf;
}

.option-form .btn-tertiary {
    color: #fff;
    background-color: #333;
}

.option-form .btn-tertiary:hover {
    background-color: #303f9f;
}

.option-form .icon-map::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 5px;
    vertical-align: -3px;
    background-image: none;
    background-color: #fff;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_pre_17x17.svg) 50%/contain no-repeat;
}

.option-form .icon-link-blank::before {
    width: 16px;
    height: 16px;
    vertical-align: -2px;
}

.alert-message {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: 3px;
    background-color: rgba(0, 0, 0, .4);
    z-index: 99;
}

.alert-message.active {
    display: block;
}

.alert-message > div {
    overflow: hidden;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    right: 0;
    display: flex;
    flex-flow: column nowrap;
    max-height: 100%;
}

.alert-message > div .inner > * + *:not(.btn-close) {
    margin-top: 10px
}

.alert-message.photo .photo-slider {
    overflow-y: auto;
    padding: 10px 0;
    text-align: center;
}

.alert-message.photo .photo-slider img {
    display: inline-block;
    width: 95%;
    height: auto;
}

.alert-message.photo .photo-slider img + img {
    margin-top: 5px;
}

.alert-message.photo .btn-close {
    position: absolute;
    top: 18px;
    right: 15px;
    left: auto;
    width: 40px;
    height: 40px;
}

.alert-message.photo .btn-close button {
    position: relative;
    width: 30px;
    height: 30px;
    border-radius: 2px;
    border-radius: 100%;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background-color: rgba(0, 0, 0, .7);
    transition: .3s ease-in-out;
    transform: rotate(-45deg);
}

.alert-message.photo .icon-close::before, .alert-message.photo .icon-close::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
}

.alert-message.photo .icon-close:hover, .alert-message.photo .icon-close:active {
    transform: rotate(-225deg);
}

.alert-message.photo .icon-close::before {
    width: 20px;
    height: 2px;
}

.alert-message.photo .icon-close::after {
    width: 2px;
    height: 20px;
}

.brokerage {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    position: relative;
    min-height: 80px;
    padding-left: 100px;
}

.brokerage img {
    width: 80px;
    height: 80px;
}

.brokerage .btn-attach {
    position: absolute;
    top: 0;
    left: 0;
    width: 80px;
    height: 80px;
    background: url(/res_ezip/img/icon_chatbox_cha-93bcf4851c18e85b35a817b3445fe951.jpg) 50%/contain no-repeat;
    -webkit-mask: url(/res_ezip/img/bg_photo-fb0883d4fb95098b2a24480242ece497.svg) 50%/contain no-repeat;
    mask: url(/res_ezip/img/bg_photo-fb0883d4fb95098b2a24480242ece497.svg) 50%/contain no-repeat;
}

.brokerage strong {
    margin-bottom: 5px;
    color: #333;
    font-size: 18px;
}

.brokerage strong + p {
    margin-bottom: 5px;
    font-size: 16px;
    font-weight: 500;
}

.brokerage p {
    margin-top: .3em;
    font-size: 14px;
    text-align: left;
}

.brokerage .icon-mobile::before {
    margin-left: 0;
    background-color: #333;
    -webkit-mask: url(/res_ezip/img/icon_mobile-b7f470ff6f335ce9799572a022ceaaf5.svg) 50%/cover no-repeat;
    mask: url(/res_ezip/img/icon_mobile-b7f470ff6f335ce9799572a022ceaaf5.svg) 50%/cover no-repeat;
}

.brokerage-member {
    padding-top: 15px;
}

.brokerage-member + .brokerage-member {
    border-top: 1px dashed #ddd;
}

.brokerage-member .brokerage {
    min-height: 45px;
    padding-left: 60px;
}

.brokerage-member .brokerage strong {
    font-size: 16px;
}

.brokerage-member .btn-attach {
    left: 10px;
    width: 40px;
    height: 40px;
}

.brokerage-member .btn-attach img {
    width: 100%;
    height: auto;
}

/* 왼쪽 메뉴 빠른 메뉴 */
.sidenav-contents > div .item-list .sub-list {
    position: absolute;
    top: 0;
    right: -100px;
    width: 100px;
}

.sidenav-contents > div .option-search-box {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding: 10px 20px;
    background-color: #f3f6fb;
}

.sidenav-contents > div .option-search-box > label {
    margin-right: 8px;
    color: #555;
    font-size: 13px;
    letter-spacing: -.6px;
}

.sidenav-contents > div .option-search-box > input {
    flex: 1;
    height: 34px;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    font-size: 14px;
    text-indent: 0;
}

.sidenav-contents > div .option-search-box > .btn-search {
    margin-left: 5px;
    width: 40px;
    height: 34px;
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    background-color: #3d3d3d;
    transition: .3s;
}

.sidenav-contents > div .option-search-box > .btn-search:hover {
    background-color: #5e35b1;
}

.sidenav-contents .group-list > li a::before, .sidenav-contents .item-list.apt > li a::before,
.sidenav-contents .item-list.apt > li::before, .sidenav-contents .item-list.auction > li a::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 50px;
    height: 49px;
    background-image: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 7px;
    outline: none;
    z-index: 0;
}

.sidenav-contents .group-list > li.open a::before, .sidenav-contents .item-list.apt > li.open a::before,
.sidenav-contents .item-list.apt > li.open::before, .sidenav-contents .item-list.auction > li.open a::before {
    background-image: url(/res/img/component/icon_arrow03_up_black-380fb67bb9816ee92461d1d90e41f52a.svg);
}

.btn-quick {
    display: inline-block;
    width: 100%;
    height: 25px;
    border: solid 1px #ddd;
    border-radius: 3px;
    color: #111;
    font-size: 12px;
    vertical-align: middle;
    background-color: #f0f0f0;
    transition: .2s;
}

.btn-quick:hover {
    color: #fff;
    border-color: #9086ee;
    background-color: #9086ee;
}

.btn-quick:disabled {
    color: #babbcf !important;
    background-color: #edf1f6 !important;
    cursor: default;
}

.btn-quick:hover:disabled {
    border-color: #edf1f6 !important;
}


/* 리포트 정산 */
.report-money-master + .bbs-top.info {
    margin-top: 20px;
}

.bbs-top.info > label {
    font-size: 14px;
    color: #7080ad;
    font-weight: 400;
    letter-spacing: -.5px;
}

.modal-container.modal-apt-info .menu-content .edu-info {
    margin-bottom: 0;
}

.modal-container.modal-apt-info .menu-content .edu-info + .tips {
    margin-top: 10px;
    font-size: 14px;
}

.modal-container.modal-apt-info .menu-content > * + h3 {
    margin-top: 30px;
}

.switcher-set > .switcher > fieldset > .switch-set.box {
    flex-direction: row;
    flex-wrap: nowrap;
    position: absolute;
    right: 0;
    top: 16px;
    border: 0;
    padding: 0;
    background-color: transparent;
}

/* 시계열 */
.right a .arrow {
    position: relative;
    display: block;
    width: 45px;
    height: 45px;
    background-image: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 7px;
}

.right a.active .arrow {
    background-image: url(/res/img/component/icon_arrow03_up_black-380fb67bb9816ee92461d1d90e41f52a.svg);
}

.right .pulse-btn {
    height: 38px;
}

/* 아파트 시세차트 모달 가격 스위치 추가 */
.modal-container .price-slide {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    /*margin-top:30px;*/
    /*margin-bottom: 10px;*/
    margin-left: 20px;
}

.modal-container .price-slide .switch-radio {
    margin-left: 15px;
}

/* 마진 클래스 */
.mb-10 {
    margin-bottom: 10px;
}

/* 강의 후기 */
.with-thumbnail.edu-info li > a {
    padding-right: 170px;
}

.btn-review {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 60px;
}

.btn-review .btn {
    display: block;
    width: 200px;
    height: 35px;
    padding: 0;
    border-radius: 3px;
    font-weight: 600;
    font-size: 14px;
    line-height: 33px;
}

.btn-review .btn + .btn {
    margin: 0;
    margin-top: 10px;
}

.btn-review .btn-border::before {
    display: none;
}

.total-review {
    margin: 0 3px 0 5px;
    font-weight: 600;
}

.total-review::before {
    content: "";
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-right: 1px;
    vertical-align: -2px;
    background-color: #ffc500;
    mask: url(/res/img/common/star-7cd60fa8eb0a3bb6735eefd471361a9d.png) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/common/star-7cd60fa8eb0a3bb6735eefd471361a9d.png) 50%/contain no-repeat;
}

.map-score-title {
    text-align: center;
    padding-left: 15px;
}

.btn-report-list {
    border: 2px solid #6327a282;
}

.btn-report-list:hover {
    border: 2px solid #6327a2;
}

.total-report {
    margin: 0 3px 0 5px;
}

.total-report::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 1px;
    vertical-align: -2px;
    background-color: #6327a282;
    mask: url(/res/img/common/icon_menu-dfd622ce03c6010a98d5f391250245c6.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/common/icon_menu-dfd622ce03c6010a98d5f391250245c6.svg) 50%/contain no-repeat;
}

.edu-info .btn-review {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 60px;
}

.review-area {
    position: relative;
}

.modal-apt-info .contents-wrapper {
    height: 100%;
    background: #f9f9f9;
}

.contents-wrapper > .tab-box {
    height: 55px;
    border-top: 1px solid #eaeaea;
    border-bottom: 1px solid #eaeaea;
    background: #fff;
    padding-left: 20px;
    padding-right: 20px;
}

.tab-box > .tab-list {
    display: flex;
    flex-wrap: wrap;
    max-width: 1440px;
    margin: 0 auto;
}

.tab-box > .tab-list > li {
    width: calc(20% + 1px);
    border-left: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    margin-left: -1px;
}

.tab-box > .tab-list > li > a {
    position: relative;
    display: block;
    width: 100%;
    min-height: 53px;
    font-size: 18px;
    line-height: 53px;
    color: #111;
    text-align: center;
}

.tab-box > .tab-list > li > a.active {
    font-weight: 500;
}

.tab-box > .tab-list > li > a.active:before {
    position: absolute;
    bottom: 0;
    left: 0;
    display: block;
    content: '';
    width: 100%;
    height: 3px;
    background: #8f55e2;
}

.review-list {
    margin-bottom: 20px;
    border: 1px solid #dcdcdc;
    background-color: #fff;
}

.review-list thead {
    border-bottom: 1px solid #dcdcdc;
    background-color: #eeeff3;
}

.review-list thead th {
    position: relative;
    line-height: 50px;
}

.review-list thead th + th::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 1px;
    height: 20px;
    background-color: #ccc;
}

.review-list tbody td {
    border-bottom: solid 1px #eef0f9;
    text-align: center;
}

.review-list tbody td .number {
    color: #8f55e2;
    font-size: 14px;
}

.review-list tbody td:nth-child(2) {
    text-align: left;
}

.review-list tbody tr:hover {
    background-color: #ffeacd;
}

.review-list tbody tr:last-child td {
    border-color: #dcdcdc
}

.report-area .bbs-head h3 {
    font-weight: bold;
}

.report-area.review {
    overflow-y: auto;
}

.report-area.review .comment-btn-set > button {
    font-size: 12px;
}

.report-area.review .btn-border {
    height: auto;
    line-height: 28px;
}

.report-area.review .btn-secondary {
    color: #fff;
}

.bbs-list.edu li > a {
    padding-bottom: 10px;
}

.bbs-list .btn b, .bbs-list .btn b {
    color: #666;
    font-size: 13px;
}

.with-thumbnail.bbs-list .text {
    height: 76px;
}

.with-thumbnail.bbs-list.report .text {
    height: 45px;
    margin-bottom: 0px;
}

.with-thumbnail.bbs-list.report .text + .text {
    height: 60px;
    margin-bottom: 0px;
}

.bbs-list .text .btn {
    height: 35px;
    margin: 0 2px;
    padding: 0 10px;
    font-size: 14px;
    font-weight: 600;
    line-height: 33px;
}

.bbs-list .text .btn-border::before {
    display: none;
}

.bbs-list .text .btn span {
    margin-right: 2px;
}

.bbs-list .text .btn b {
    color: #666;
}

.bbs-list .text .tips {
    display: block;
    margin-top: 10px;
    font-size: 13px;
}

.bbs-list.report .text .tips {
    margin-top: 0px;
}

.bbs-list .text .btn-secondary {
    background-color: #666;
}

.bbs-list .text .btn-secondary:hover {
    background-color: #333;
}

.bbs-list .text .icon-link-blank::before {
    vertical-align: -2px;
    background-color: #333;
}

.bbs-list .text .icon-modify::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 3px;
    vertical-align: -1px;
    background-color: #fff;
    mask: url(/res/img/component/icon_pen-ff733758012773c85ae9db6e7d5a5f88.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/component/icon_pen-ff733758012773c85ae9db6e7d5a5f88.svg) 50%/contain no-repeat;
}

.bbs-list .text .icon-write::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    vertical-align: -1px;
    background-color: #fff;
    mask: url(/res/img/common/star-7cd60fa8eb0a3bb6735eefd471361a9d.png) 50%/contain no-repeat;
    -webkit-mask: url(/res/img/common/star-7cd60fa8eb0a3bb6735eefd471361a9d.png) 50%/contain no-repeat;
}

.text-count {
    display: flex;
    justify-content: flex-end;
    margin-top: 5px;
}

.text-count p {
    display: inline;
    font-size: 13px;
}

.text-count .textCount {
    color: #8f55e2;
    font-weight: 500;
}

.grade-star {
    display: flex;
}

.grade-star > span {
    display: inline-block;
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background-color: #c1ccda;
    background-size: auto 100%;
    cursor: pointer;
}

.grade-star > span + span {
    margin-left: 0;
}

.grade-star .active {
    background-color: #ffc500;
}

.icon-star {
    -webkit-mask: url(/res/img/common/star-7cd60fa8eb0a3bb6735eefd471361a9d.png) 50%/contain no-repeat;
    mask: url(/res/img/common/star-7cd60fa8eb0a3bb6735eefd471361a9d.png) 50%/contain no-repeat;
}

.location-select {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translate(-90%);
    z-index: 11;
    padding: 3px 10px 3px 15px;
    border-radius: 50px;
    background-color: rgba(76, 57, 163, .85);
    transition: .3s;
}

.location-select::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    background-color: rgba(255, 255, 255, .7);
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_solid_balck.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_solid_balck.svg) 50%/contain no-repeat;
}

.location-select.open {
    top: 100px;
}

.location-select .dropdown {
    border: 0;
}

.location-select .dropdown + .dropdown::before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: -3px;
    width: 1px;
    height: 15px;
    background-color: rgba(255, 255, 255, .3);
}

.location-select .dropdown-select::after {
    border-color: rgba(255, 255, 255, .7);
}

.location-select .dropdown-select span {
    color: #fff;
}

.location-select .dropdown.active, .location-select .dropdown.active:hover, .location-select .dropdown.active > .dropdown-select, .location-select .dropdown.active:hover > .dropdown-select {
    border: 0 !important;
}

.location-select .dropdown.active > .dropdown-select::after {
    border-color: #fff !important;
}

.location-select .dropdown:first-child > .dropdown-menu {
    min-width: 120px;
    margin-top: 0;
}

.location-select .dropdown:first-child .dropdown-select {
    padding-left: 0;
}

.location-select .location-move-btn {
    height: 30px;
    padding: 0 15px;
    border-radius: 15px;
    color: #fff;
    font-size: 14px;
    background-color: rgba(0, 0, 0, .3);
    transition: .3s;
}

.location-select .location-move-btn:hover {
    background-color: rgba(0, 0, 0, .5);
}

.location-select .dropdown > .dropdown-menu {
    width: 110px;
}

/*
* modal-filter
*/
.modal-filter {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px solid #dee3ef;
    background: #fff;
    padding-right: 20px;
    min-height: 55px;
}

.modal-filter h3 {
    font-size: 16px;
    margin: 0 20px;
}

.modal-filter ul {
    display: flex;
    flex-flow: row wrap;
    flex: 1;
    align-items: center;
    padding: 0 10px;
}

.modal-filter fieldset {
    position: absolute;
    display: none;
    min-width: 220px;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    padding: 10px;
    background-color: #fff;
    border: 1px solid #717171;
    z-index: 10;
}

.modal-filter .btn-filter-list {
    margin-left: auto;
    position: relative;
    height: 36px;
    line-height: 32px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    letter-spacing: -0.6px;
    background: rgba(94, 53, 177, .9);
    overflow: hidden;
    border-radius: 4px;
    outline: none;
    padding: 0 10px;
}

.modal-filter .btn-filter-list:hover {
    box-shadow: 0px 5px 10px 0px rgb(0 0 0 / 20%);
}

.filter-save-list {
    position: absolute;
    right: 20px;
    width: 400px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    background: white;
    height: 495px;
    z-index: 11;
}

.filter-save-list .group-list {
    padding-bottom: 50px;
}

.filter-save-list .group-list > li {
    position: relative;
}

.filter-save-list .group-list > li:after {
    position: absolute;
    display: block;
    bottom: 0;
    left: 20px;
    content: '';
    width: calc(100% - 40px);
    height: 1px;
    background-color: #e5e5e5;
}

.filter-save-list .group-list > li > a {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 16px 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    cursor: pointer;
}

.filter-save-list .group-list > li > a:hover {
    background-color: #f9f9f9;
}

.filter-save-list .group-list > li a::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 50px;
    height: 49px;
    background-image: url(/res/img/component/icon_arrow03_down-4161ee3a4fc74d90c063c4ec0e627bd4.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 7px;
    outline: none;
    z-index: 0;
}

.filter-save-list .group-list > li.open a::before {
    background-image: url(/res/img/component/icon_arrow03_up_black-380fb67bb9816ee92461d1d90e41f52a.svg);
}

.filter-save-list .group-list > li > a > strong {
    position: relative;
    font-size: 15px;
    font-weight: 600;
    line-height: 18px;
    color: #111;
    max-width: calc(100% - 100px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: break-all;
    margin-left: 35px;
}

.filter-save-list .group-list > li > a > .delete {
    background-color: rgba(0, 0, 0, .05);
    margin-left: 2px;
    z-index: 1;
}

.filter-save-list ul > li > a > .delete:hover {
    background-color: rgba(117, 52, 250, .2);
}
.filter-save-list .group-list > li > a > .icon-pen {
    width: 14px;
    height: 14px;
    background-color: #333;
    margin-left: 7px;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pen.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pen.svg) 50%/contain no-repeat;
}

.filter-save-list ul > li > a > .icon-pen:hover {
    background-color: #8934fa;
}
.filter-save-list > div .scroll-area {
    height: calc(100% - 220px);
    overflow-x: hidden;
    overflow-y: scroll;
    -ms-overflow-style: none;
}

.filter-save-list .group-name-adjust-area {
    display: none;
}

.filter-save-list .group-name-adjust-area .group-input-field {
    display: flex;
    border-bottom: 1px solid #e5e5e5;
    padding: 10px 20px;
    background-color: #f7f7f7;
}

.filter-save-list .group-input-field input {
    flex: 1;
    height: 34px;
    padding: 0 10px;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    font-size: 14px;
    text-indent: 0;
    caret-color: black;
}

.filter-save-list .group-name-adjust-area .group-input-field .btn-group-save {
    width: 40px;
    height: 34px;
    margin-left: 5px;
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    transition: .3s;
    background-color: #8591b1;
}
.filter-save-list .hidden-area {
    display: none;
}

.filter-save-list ul > li > .btn-search-bind {
    position: absolute;
    top: 10px;
    right: 45px;
    z-index: 1;
    height: 28px;
    padding: 0 5px;
    border: solid 1px rgba(117, 52, 250, .2);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 500;
    transition: .3s;
    background-color: rgba(117, 52, 250, .1);
}

.filter-save-list ul > li > .btn-search-bind::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    margin-right: 2px;
    vertical-align: -1px;
    background: url(/res/img/component/icon_search-c0895c78def83afd19c3572f293e5c2e.svg) 50%/contain no-repeat;
}

.filter-save-list ul > li > .btn-search-bind:hover {
    border-color: rgba(117, 52, 250, .5);
    background-color: rgba(117, 52, 250, .2);
}

.filter-save-list .map-filter-span {
    position: absolute;
    right: 65px;
    top: 27px;
}

.filter-save-list .switch {
    position: absolute;
    top: 50%;
    right: 20px;
    padding-left: 38px;
    padding-right: 0;
    transform: translateY(-35%);
}

.filter-save-list .sticker-st01 {
    position: relative;
    margin-left: 0;
    padding: 15px 20px;
}

.filter-save-list .sticker-st01::before {
    content: "";
    position: absolute;
    display: block;
    top: 0;
    left: 20px;
    width: calc(100% - 40px);
    height: 2px;
    border-top: dashed 1px #e5e5e5;
}

.filter-save-list .scroll-area {
    height: calc(100% - 94px);
    overflow-x: hidden;
    overflow-y: scroll;
}

.filter-save-list .scroll-area::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

.modal-filter .filter-reset-area {
    margin-left: 10px;
    padding-right: 10px;
}

.modal-filter > ul > li {
    color: #673ab7;
    font-size: 15px;
    font-weight: 500;
}

.modal-filter > ul > li + li {
    margin-left: 20px;
}

.modal-filter > ul > li .delete {
    margin-left: 0;
    background-color: #e1d0ff;
}

.modal-filter > ul > li .delete:hover {
    background-color: #8934fa;
    background-image: url(/res/img/component/icon_delete_white-0db95bcc861438e6c64c4443f506f2c7.svg);
}

.filter-save-list .tips-box {
    bottom: auto;
    top: 50px;
    right: auto;
    z-index: 2;
}

.title-box .icon-tips::after {
    margin-left: 0;
}

.icon-tips.dark::after {
    background-color: #a6afbb;
}

.title-box .icon-delete {
    font-size: 13px;
    transition: .3s;
}

.title-box .icon-delete::before {
    transition: .3s;
}

.title-box .icon-delete:hover::before {
    background-color: #8934fa;
}

.title-box .map-filter-span {
    font-size: 13px;
}

.title-box .map-filter-span::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -11px;
    width: 1px;
    height: 10px;
    background-color: #afb7cb;
    transform: translateY(-50%);
}

.tips-box.realtor-score {
    left: 0px !important;
    top: -50px !important;
    width: 100% !important;
}

.tips-box.realtor-score p {
    padding: 0px 10px;
}

.switcher-set .switcher fieldset legend {
    overflow: visible;
}

.switcher-set .switcher fieldset legend .tips-box.top {
    top: 32px;
    right: auto;
    left: 40px;
    width: 410px;
}

.switcher-set .switcher fieldset legend .tips-box p {
    white-space: normal;
}

.biz-badge {
    display: block;
    position: absolute;
    top: -8px;
    right: -2px;
    height: 16px;
    padding: 0 6px;
    border-radius: 8px;
    line-height: 16px;
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0;
    background-color: #ff4081;
}

.tab-in-tab {
    padding: 15px;
    background-color: #e9f3f4;
    margin: 10px 0;
}

.tab-in-tab ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
}

.tab-in-tab ul + ul {
    margin-top: 10px;
    padding-top: 10px;
    border-top: solid 1px #d9e9eb;
}

.tab-in-tab li {
    display: flex;
    flex: 1;
    justify-content: center;
}

.tab-in-tab li .switch span {
    font-weight: 500;
}

.alarm-compress-span {
    position: absolute;
    right: 55px;
}

/*메뉴소개*/
#lab {
    height: 90%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    flex-direction: column;
}

#lab .box {
    min-height: 100%;
    overflow-y: scroll;
}

/*#lab > .box > .box-chart {*/
/*	height: 2000px;*/
/*}*/
.modal-container.modal-menu {
    display: flex;
    flex-flow: column nowrap;
    max-width: 1200px;
    left: 50%;
    bottom: 20px;
    margin: 0;
    overflow: hidden;
    transform: translateX(-50%);
}

.modal-container.modal-manual {
    display: flex;
    flex-flow: column nowrap;
    max-width: 1200px;
    left: 50%;
    bottom: 20px;
    margin: 0;
    overflow: hidden;
    transform: translateX(-50%);
}

.modal-container.modal-manual .title-area h2 i {
    width: 25px;
    height: 25px;
    background-size: 25px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/icon_open_in_new_white.svg);
}

.manual-area {
    overflow-y: scroll;
}

.manual-area img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* 기능소개 커스텀 클래스 */
.customTooltip_center {
    left: 50% !important;
}

.customTooltip_left20 {
    left: 20% !important;
}

.customTooltip_left25 {
    left: 25% !important;
}

.customTooltip_left30 {
    left: 30% !important;
}

.customTooltip_left35 {
    left: 35% !important;
}

.customTooltip_right20 {
    right: 20% !important;
}

.customTooltip_right25 {
    right: 25% !important;
}

.customTooltip_right30 {
    right: 30% !important;
}

.customTooltip_right35 {
    right: 35% !important;
}

.customTooltipW300 {
    max-width: 300px !important;
    width: 300px;
}

.customTooltipW350 {
    max-width: 350px !important;
    width: 350px;
}

.customTooltipW400 {
    max-width: 400px !important;
    width: 400px;
}

.customTooltipW450 {
    max-width: 450px !important;
    width: 450px;
}

.customTooltipW500 {
    max-width: 500px !important;
    width: 500px;
}

.customTooltipW550 {
    max-width: 550px !important;
    width: 550px;
}

.customTooltipW600 {
    max-width: 600px !important;
    width: 600px;
}

.customTooltipW650 {
    max-width: 650px !important;
    width: 650px;
}

.customTooltipW700 {
    max-width: 700px !important;
    width: 700px;
}

.customTooltipW750 {
    max-width: 750px !important;
    width: 750px;
}

.customTooltipW800 {
    max-width: 800px !important;
    width: 800px;
}

.customTooltipW850 {
    max-width: 850px !important;
    width: 850px;
}

.customTooltipW900 {
    max-width: 900px !important;
    width: 900px;
}

.customTooltipW950 {
    max-width: 950px !important;
    width: 950px;
}

.customTooltipW1000 {
    max-width: 1000px !important;
    width: 1000px;
}

.customTooltipW1100 {
    max-width: 1100px !important;
    width: 1100px;
}

.customTooltipW1200 {
    max-width: 1200px !important;
    width: 1200px;
}

.customTooltipImg {
    max-width: 1370px !important;
    top: 25% !important;
    left: 20% !important;
}

.customTooltipImg_big {
    max-width: 1370px !important;
    top: 15% !important;
    left: 15% !important;
}

.customTooltipImg_popup {
    max-width: 1100px !important;
    top: 20% !important;
    left: 8% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.customTooltipImg_popup img {
    width: 90%;
}

.customTooltipMapLeft {
    max-width: 400px !important;
    top: 50% !important;
    left: 20% !important;
}

.customTooltipMapRight {
    max-width: 400px !important;
    top: 50% !important;
    left: 70% !important;
}

.introjs-tooltiptext {
    line-height: 130%;
    letter-spacing: 0.5px;
}

/* 정부정책 */

#gov-policy-list .manual-link-list li li a::after {
    content: "";
    display: inline-block;
    width: 0;
    height: 0px;
}

#modal_gov_policy .modal-container {
    height: calc(100% - 50px);
}

#modal_gov_policy .modal-container .content-area {
    height: calc(100% - 70px);
    overflow-y: auto;
}

#modal_gov_policy .modal-container .content-area::-webkit-scrollbar {
    display: none;
}

.policy-contents {
    margin: 10px;
}

.policy-contents [class^=col-] {
    float: left;
    position: relative;
}

.policy-contents .col-3 {
    width: 25%;
}

.policy-contents .col-9 {
    width: 75%;
}

.policy-contents .map-area {
    position: inherit;
    border: solid 1px #dfe6ef;
    border-right: 0;
    background-color: aliceblue;
}

.policy-contents:not(:first-child) {
    border-top: 3px solid #698cd3;
}

.policy-contents h3:before {
    content: '';
    width: 20px;
    height: 20px;
    background-image: url(https://aptgin.com/cdn/res/icon/common/svg/bullet_triangle_blue_svg.svg
);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 3px;
}

.policy-contents > h3:first-child {
    margin: 20px 10px 10px 10px;
}

.policy-contents > h3:not(:first-child) {
    margin: 50px 10px 10px 10px;
}

.policy-contents > p {
    margin: 0 0 22px 20px;
    font-size: 16px;
}

.policy-contents > p span {
    margin-right: 15px;
}

.policy-contents > p span:before {
    display: inline-block;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #698cd3;
    border-radius: 6px;
    margin-right: 3px;
    margin-bottom: 2px;
}

.policy-contents .legend-info {
    margin: 0px 10px;
}

.policy-contents .legend-text p {
    margin: 5px 0;
    font-size: 12px;
    font-weight: bold;
}

.policy-contents .legend-text p:before {
    display: inline-block;
    content: '';
    width: 3px;
    height: 3px;
    background-color: #000;
    border-radius: 6px;
    margin-right: 3px;
    margin-bottom: 2px;
}

.policy-contents .level-1 {
    background-color: #99a3bc;
    padding: 17px 15px 17px 0px;
    border-radius: 23px;
    margin: 5px;
    color: white;
    font-size: 13px;
}

.policy-contents .level-2 {
    background-color: #bca799;
    padding: 12px 12px 12px 0px;
    border-radius: 18px;
    margin: 5px 8px 5px 5px;;
    color: white;
    font-size: 13px;
}

.policy-contents .level-3 {
    background-color: #cb7362;
    padding: 8px;
    border-radius: 17px;
    margin: 5px 8px 5px 5px;;
    color: white;
    font-size: 13px;
}

.policy-contents i {
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
    margin-left: 5px;
}

.policy-contents .float-legend > p {
    margin: 3px 0px;
    width: 270px;
    text-align: right;
    font-weight: bold;
}

.policy-contents .as_js_flex_b {
    padding: 10px 20px 10px 10px;
}

.policy-contents .row {
    margin-top: 0;
}

.policy-contents .policy-flex {
    width: 49%;
    gap: 20px;
    padding: 0 20px;
}

.policy-contents .policy-flex .as_js_flex_c {
    gap: 10px;
}

.policy-contents .policy-flex .title {
    font-size: 18px;
    font-weight: bold;
}

.policy-contents .policy-flex span:before {
    display: inline-block;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #698cd3;
    border-radius: 6px;
    margin-right: 3px;
    margin-bottom: 2px;
}

.policy-contents .adjust-label {
    display: inline-block;
    padding: 5px;
    border-radius: 5px;
    color: #fff;
    font-size: 15px;
    line-height: 100%;
}

.policy-contents .policy-flex .loan-label {
    padding: 3px 5px;
    border: 1px solid #aeb0b4;
    color: #000;
    border-radius: 30px;
    margin-top: -3px;
}

.policy-contents .nowrap {
    flex-wrap: nowrap;
}

.policy-contents .wFull {
    width: 100%;
}

.policy-contents .wHalf {
    width: 50%;
}

.policy-contents .wHalf span {
    font-weight: bold;
}

.policy-contents .wHalf span:before {
    display: inline-block;
    content: '';
    width: 6px;
    height: 6px;
    background-color: #698cd3;
    border-radius: 6px;
    margin-right: 3px;
    margin-bottom: 2px;
}

.policy-contents .p10 {
    padding: 10px;
}

.policy-contents .mt30 {
    margin-top: 30px;
    /*border-top: 3px dashed #19a8bb;*/
    padding-top: 10px;
}

.policy-contents table, .policy-contents tr, .policy-contents td, .policy-contents th {
    border: 1px solid black;
    word-wrap: break-word;
}

.policy-contents th, .policy-contents td {
    vertical-align: middle;
    padding: 5px 10px;
    text-align: center;
    line-height: 20px;
    word-break: keep-all;
}

.policy-contents th {
    background: #d9ecff;
}

.policy-contents .sub-dot:before {
    display: inline-block;
    content: '';
    border-top: 4px solid transparent;
    border-left: 8px solid gray;
    border-bottom: 4px solid transparent;
    margin-bottom: 2px;
    margin-right: 4px;
}

.policy-contents.loan {
    margin-bottom: 20px;
}

.policy-contents.subscribe {
    margin-bottom: 375px;
}

.policy-contents.tax {
    margin-bottom: 455px;
}

.policy-contents.maintenance {
    margin-bottom: 475px;
}

.policy-contents img {
    width: 49%;
}

/* 아파트 세부정보 모달 */
.root-modal .modal-apt-info .popup-content .tab {
    margin-bottom: 20px;
}

.root-modal .modal-apt-info .tab ul {
    display: flex;
    flex-flow: row wrap;
}

.root-modal .modal-apt-info .tab li {
    position: relative;
    width: calc(20% + 1px);
    margin-top: -1px;
    margin-right: -1px;
    border-top: solid 1px #0a2e4f;
    padding: 0 5px;
    border-right: solid 1px #0a2e4f;
    line-height: 50px;
    /*font-family:NotoSansR;*/
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.root-modal .modal-apt-info .tab li:first-child {
    border-left: solid 1px #0a2e4f;
}

.root-modal .modal-apt-info .tab li:nth-child(5n) {
    border-right: solid 1px #0a2e4f;
}

.root-modal .modal-apt-info .tab li:nth-child(5n+1) {
    flex: none;
}

.root-modal .modal-apt-info .tab li:hover, .tab li:active {
    background-color: #f6faff;
}

.root-modal .modal-apt-info .tab li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #0a2e4f;
}

.root-modal .modal-apt-info .tab li.active {
    color: #fff;
    background-color: #0a2e4f;
}

.root-modal .modal-apt-info .tab .icon-point::before, .icon-kab {
    position: absolute;
    top: 12px;
    right: -14px;
}
.iconPrice::after {
    position: absolute;
    border-width: 1px;
    border-style: solid;
    color: #fff;
    font-family: Noto Sans KR;
    line-height: 23px;
    text-align: center;
    vertical-align: middle;
    padding: 1px 3px 0 3px;
    content: "";
    background-color: #000;
    border-radius: 5px;
    font-size: 11px;
    font-weight: bold;
    width: 50px;
    height: 25px;
}
.iconPrice.gin::after {
    left: 7px;
    content: "지인시세";
    background-color: #0b99acb3;
}
.iconPrice.sale::after {
    left: 67px;
    content: "매물시세";
    background-color: #8934fab3;
}
.iconPrice.gin.one::after {
    left: 7px;
}
.iconPrice.sale.one::after {
    left: 7px;
}
.iconPriceExtent::after {
    position: absolute;
    border-width: 1px;
    border-style: solid;
    color: #fff;
    font-family: Noto Sans KR;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    padding: 1px 3px 0 3px;
    content: "";
    border-radius: 5px;
    font-size: 10px;
    font-weight: bold;
    width: 20px;
    height: 20px;
    margin-top: 5px
}
.iconPriceExtent.gin::after {
    right: 32px;
    background-color: #0b99acb3;
}
.iconPriceExtent.sale::after {
    right: 3px;
    background-color: #8934fab3;
}
.iconPriceExtent.one::after {
    right: 3px;
}
.iconPriceExtent.both::after {
    content: "";
}
.iconPriceExtent.trade::after {
    content: "매매";
}
.iconPriceExtent.rent::after {
    content: "전세";
}


.root-modal .modal-apt-info .tab-panel {
    display: none;
}

.root-modal .modal-apt-info .tab-panel.active {
    display: block;
}

.root-modal .modal-apt-info .tab-panel > div + div:not([class^=tab]) {
    margin-top: 20px;
}

.root-modal .modal-apt-info .tab-panel > .sub-title {
    margin-top: 20px;
}

.root-modal .modal-apt-info .tab.wide li {
    flex: 1;
    margin: 0;
}

.root-modal .modal-apt-info .tab.wide li:last-child {
    border-right: solid 1px #0a2e4f;
}

.root-modal .modal-apt-info .tab.sub {
    margin-bottom: 15px;
}

.root-modal .modal-apt-info .tab.sub li {
    border-color: #0b99ac;
    font-size: 14px;
    line-height: 40px;
}

.root-modal .modal-apt-info .tab.sub li.active {
    color: #fff;
    border-color: #0b99ac;
    background-color: #23b3c6;
}

.root-modal .modal-apt-info .tab.sub li:first-child {
    border-color: #0b99ac;
}

.root-modal .modal-apt-info .tab.sub li::after {
    background-color: #0b99ac;
}

.root-modal .modal-apt-info .apt-title {
    display: flex;
    flex-flow: row nowrap;
    padding-bottom: 15px;
    border-bottom: solid 1px #dfe6ef;
}

.root-modal .modal-apt-info .apt-title > div {
    flex: 1;
}

.root-modal .modal-apt-info .apt-title > div h5 {
    border-bottom: 0;
}

.root-modal .modal-apt-info .apt-title h4 {
    margin-bottom: 10px;
}

.root-modal .modal-apt-info .apt-title h4::after {
    transform: translateY(-1px);
}

.root-modal .modal-apt-info .apt-title button {
    height: 30px;
    font-size: 13px;
}

.root-modal .modal-apt-info .apt-title .btn-group .icon-pin::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    margin-right: 3px;
    vertical-align: -2px;
    background-color: #fff !important;
}

.root-modal .modal-apt-info .apt-title .icon-naver {
    color: #17c920;
    border-color: #17c920;
    background-color: #FFF;
}

.root-modal .modal-apt-info .apt-title .icon-naver:hover, .apt-title .icon-naver:active {
    color: #fff;
    background-color: #17c920;
}

.root-modal .modal-apt-info .apt-title .icon-naver::before {
    width: 11px;
    height: 11px;
    background-color: #17c920 !important;
    vertical-align: -1px;
    transition: .3s;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_naver.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_naver.svg) 50%/contain no-repeat;
}

.root-modal .modal-apt-info .apt-title .icon-naver:hover::before, .apt-title .icon-naver:active::before {
    background-color: #fff !important;
}

.root-modal .modal-apt-info .apt-title .icon-share::before {
    width: 12px;
    height: 12px;
}

.root-modal .modal-apt-info .apt-title .info-lot-solid {
    display: flex;
    align-items: center;
    flex-flow: inherit;
    justify-content: inherit;
    padding: 0;
    border: none;
}

.root-modal .modal-apt-info .apt-title .info-lot-solid span {
    /*font-family: NotoSansM;*/
    font-size: 16px;
}

.root-modal .modal-apt-info .apt-title .info-lot-solid span + span {
    margin-left: 5px;
}

.root-modal .modal-apt-info .apt-title .info-lot-solid span + span::before {
    content: "/";
    display: inline-block;
    margin-right: 5px;
    color: #7e81a6;
}

.root-modal .modal-apt-info .apt-title .info-lot-solid span small {
    color: #7e81a6;
    /*font-family: NotoSansR;*/
    font-size: 14px;
}

.root-modal .modal-apt-info .apt-title .info-lot-solid .btn {
    height: 30px;
    margin-left: 10px;
}

.root-modal .modal-apt-info .apt-title p {
    padding-top: 0;
    color: #333;
    font-size: 15px;
}

.root-modal .modal-apt-info [class^=level-]::after {
    width: auto;
    padding: 1px 3px 0 3px;
}

.root-modal .modal-apt-info .level-apt::after {
    content: "아파트";
    border-color: #5e78d8;
    background-color: #5e78d8;
}

.root-modal .modal-apt-info .level-ot::after {
    content: "오피스텔";
    border-color: #ff4400;
    background-color: #ff7240;
}

.root-modal .modal-apt-info .popup-content {
    position: relative;
    height: calc(100% - 60px);
    padding: 20px;
}

.root-modal .modal-apt-info .popup-content .chart-area {
    width: 100%;
    margin: 20px 0;
}

.root-modal .modal-apt-info .popup-content .tab {
    margin-bottom: 20px;
}

.root-modal .modal-apt-info .popup-content .menu-content > h3 {
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: solid 2px #5e78d8;
    font-size: 22px;
    background-position: 0 1px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/symbol_aptgin_pre.svg) 0 2px/auto 22px no-repeat;
    padding-left: 27px;
}

.root-modal .modal-apt-info .popup-content .menu-content > h3 span {
    margin-left: 15px;
    color: #7e81a6;
    /*font-family: NotoSansL;*/
    font-size: 14px;
}

.root-modal .modal-apt-info .popup-content h4 {
    display: inline-block;
    padding-left: 24px;
    /*line-height: 24px;*/
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_bullet3.svg) 0 50%/auto 18px no-repeat;
}

.root-modal .modal-apt-info .popup-content h4:before {
    position: relative;
    content: none;
}

.root-modal .modal-apt-info .popup-content .btn-group {
    display: inline-block;
    margin-bottom: 10px;
    margin-left: 10px;
}

.root-modal .modal-apt-info .popup-content .btn-group button {
    padding-left: 10px;
    padding-right: 10px;
    background-image: none;
    border-radius: 3px;
}

.root-modal .modal-apt-info .popup-content .btn-group button::before {
    background-color: #0a2e4f;
    transition: .3s;
}

.root-modal .modal-apt-info .popup-content .apt-detail {
    margin: 20px 0;
    padding: 0;
}

.root-modal .modal-apt-info .popup-content .info {
    color: #7e81a6;
    font-size: 14px;
}

.root-modal .modal-apt-info .menu-content {
    display: none;
    position: absolute;
    top: 100px;
    left: 20px;
    right: 0;
    bottom: 0;
    overflow-y: auto;
    padding-right: 20px;
    padding-bottom: 20px;
}

.root-modal .modal-apt-info .menu-content h3 {
    margin-bottom: .5em;
}

.root-modal .modal-apt-info .menu-content.active {
    display: block;
    top: 70px;
    left: 0;
}

.root-modal .modal-apt-info .menu-content .data-page .more {
    width: 100%;
    height: 40px;
    margin-top: 15px;
    border: solid 1px #f1f4f8;
    border-radius: 3px;
    color: #0a2e4f;
    /*font-family: NotoSansR;*/
    background-color: #f1f4f8;
    transition: .3s ease-in-out;
}

.root-modal .modal-apt-info .menu-content .data-page {
    padding: 0;
}

.root-modal .modal-apt-info .menu-content .data-page .more::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 5px;
    vertical-align: -2px;
    background: url(/res_root/img/common/icon_arrow_down-85f3af29ddc5c33cf9b376c6e161949a.svg) 50%/12px 7px no-repeat;
}

.root-modal .modal-apt-info .menu-content .data-page .more:hover, .root-modal .modal-apt-info .menu-content .data-page .more:active {
    border-color: #0a2e4f;
}

.root-modal .modal-apt-info .menu-content .data-page .price-slide {
    margin-left: 0;
    margin-right: 0;
}

.root-modal .modal-apt-info .menu-content .data-page .price-slide h3 {
    margin-bottom: 0;
}

.root-modal .modal-apt-info .modal-apt-info {
    max-width: 1520px;
    left: 50%;
    bottom: 20px;
    overflow: hidden;
    transform: translateX(-50%);
}

.root-modal .modal-apt-info .modal-apt-info .row {
    padding-left: 0;
    padding-right: 0;
    justify-content: flex-start;
}

.root-modal .modal-apt-info .data-page h5 {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: solid 1px #dfe6ef;
}

.root-modal .modal-apt-info .data-page h5 span {
    display: inline-block;
    padding-left: 24px;
    padding-top: 4px;
    /*font-family: GmarketSansM;*/
    font-weight: normal;
    font-size: 18px;
    line-height: 24px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_bullet3.svg) 0 50%/auto 18px no-repeat;
}

.root-modal .modal-apt-info .data-page h5 .caution-text, .root-modal .modal-apt-info .data-page h5 .info {
    /*font-family: NotoSansL;*/
}

.root-modal .modal-apt-info .data-page .col-6:first-child {
    padding-right: 50px;
}

.root-modal .modal-apt-info .data-page table.text-right {
    border-top: solid 2px #dfe6ef;
}

.root-modal .modal-apt-info .data-page table.text-right th {
    /*font-family: NotoSansR;*/
    font-weight: normal;
    background-color: #edf1f6;
}

.root-modal .modal-apt-info .data-page table.text-right td {
    text-align: right;
}

.root-modal .modal-apt-info .apt-title h5 {
    margin-bottom: 10px;
    padding-bottom: 0;
    border-bottom: 0;
    justify-content: flex-start;
    font-size: 16px;
    line-height: 24px;
    padding-top: 3px;
}

.root-modal .modal-apt-info .apt-title h5 span {
    padding: 0;
    background: none;
    font-size: 12px;
    margin-left: 10px;
    line-height: 100%;
}

.icon-pin::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_solid_navy.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_pin_solid_navy.svg) 50%/contain no-repeat;
}

.root-modal .modal-apt-info .btn-secondary {
    background-color: #5e78d8;
    color: white;
}

.root-modal .modal-apt-info .row {
    padding: 0;
}

.root-modal .modal-apt-info .apt-detail .apt-feature {
    display: inherit;
    width: inherit;
    margin-right: 0;
    flex: 1;
    padding: 0 10px;
}

.root-modal .modal-apt-info .apt-feature ul {
    display: flex;
    flex-flow: row wrap;
}

.root-modal .modal-apt-info .apt-feature li {
    position: relative;
    width: 50%;
    min-height: 60px;
    margin-bottom: 20px;
    padding-left: 100px;
    padding-right: 20px;
    border-right: 1px solid #dae0e8;
}

.root-modal .modal-apt-info .apt-feature li:nth-child(even) {
    border-right: none;
}

.root-modal .modal-apt-info .apt-feature li:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 20px;
    width: 60px;
    height: 60px;
    background-repeat: no-repeat;
    background-position: 50%;
}

.root-modal .modal-apt-info .apt-feature li span {
    /*display: block;*/
    /*margin-bottom: 10px;*/
    /*color: #7e81a6;*/
    /*font-family: NotoSansR;*/
    /*font-size: 15px;*/
    /*line-height: 24px;*/
    color: #333;
    font-size: 15px;
    font-weight: 500;
    line-height: 25px;
}

.root-modal .modal-apt-info .apt-feature li strong {
    display: inline-block;
    align-items: baseline;
    /*font-family: GmarketSansM;*/
    font-size: 20px;
    letter-spacing: 0;
}

.root-modal .modal-apt-info .apt-feature li i {
    margin-left: 4px;
    margin-right: 5px;
    /*font-family: GmarketSansM;*/
    font-size: 18px;
}

.root-modal .modal-apt-info .apt-feature li:first-child:before {
    background-image: url(/res/img/component/apt-info-01-d8bc715bb20e6e664def5ebc90512e7b.png);
}

.root-modal .modal-apt-info .apt-feature li:nth-child(2):before {
    background-image: url(/res/img/component/apt-info-02-cfdd6f030a159b46dc32f07ccf72edaa.png);
}

.root-modal .modal-apt-info .apt-feature li:nth-child(3):before {
    background-image: url(/res/img/component/apt-info-03-23f66cc4c45157b6dab71c560deace21.png);
}

.root-modal .modal-apt-info .apt-feature li:nth-child(4):before {
    background-image: url(/res/img/component/apt-info-04-593df3b5ad993aebab89f3b6af4a5038.png);
}

.root-modal .modal-apt-info .apt-feature li:nth-child(5):before {
    background-image: url(/res/img/component/apt-info-05-534d420a1807f93c132df355a66d873e.png);
}

.root-modal .modal-apt-info .apt-feature li:nth-child(6):before {
    background-image: url(/res/img/component/apt-info-06-d0aedffb59643fca7c48999e4b51f5ee.png);
}

.root-modal .modal-apt-info .apt-detail .unsold {
    width: calc(50% - 10px);
}

.root-modal .modal-apt-info .sub-tab ul {
    display: flex;
    flex-flow: row wrap;
    padding-left: 1px;
    overflow: inherit;
    border-bottom: none;
}

.root-modal .modal-apt-info .sub-tab li {
    position: relative;
    width: calc(12.5% + 1px);
    margin-top: -1px;
    margin-left: -1px;
    border-top: solid 1px #5e78d8;
    padding: 0 5px;
    border-right: solid 1px #5e78d8;
    border-left: solid 1px #5e78d8;
    line-height: 50px;
    /*font-family: NotoSansR;*/
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 0;
}

.root-modal .modal-apt-info .sub-tab li:first-child {
    border-left: solid 1px #5e78d8;
}

.root-modal .modal-apt-info .sub-tab li:nth-child(8n+1) {
    flex: none;
    border-left: solid 1px #5e78d8;
}

.root-modal .modal-apt-info .sub-tab li:hover, .sub-tab li:active {
    background-color: #f6faff;
}

.root-modal .modal-apt-info .sub-tab li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 1px;
    background-color: #5e78d8;
}

.root-modal .modal-apt-info .sub-tab li.active {
    color: #fff;
    background-color: #5e78d8
}

.root-modal .modal-apt-info .sub-tab li + li {
    border-left: solid 1px #5e78d8;
}

.root-modal .modal-apt-info .sub-tab li span {
    vertical-align: -3px;
}

.root-modal .modal-apt-info .sub-tab .icon-point::before {
    position: absolute;
    top: 7px;
    right: 7px;
}

.root-modal .modal-apt-info [class^=col-] {
    float: left;
    position: relative;
}

.root-modal .modal-apt-info .col-6 {
    width: 50%;
}

.root-modal .modal-apt-info .provide {
    position: inherit;
    font-size: inherit;
    line-height: inherit;
}

.root-modal .modal-apt-info table.text-right td, .root-modal .modal-apt-info table.text-right th {
    text-align: center;
    border: solid 1px #dfe6ef;
    padding: 5px 10px;
}

.root-modal .modal-apt-info table.text-right td:first-child, .root-modal .modal-apt-info table.text-right th:first-child {
    border-left: 0;
}

.root-modal .modal-apt-info table.text-right td:last-child, .root-modal .modal-apt-info table.text-right th:last-child {
    border-right: 0;
}

.root-modal .modal-apt-info .environment .list {
    clear: both;
    position: relative;
    min-height: 95px;
    padding-left: 150px;
    border-bottom: solid 1px #dbe0ec;
}

.root-modal .modal-apt-info .environment > .list:first-child {
    margin-top: -15px;
}

.root-modal .modal-apt-info .environment .list h4 {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 150px;
    padding-left: 0;
    font-size: 14px;
    text-align: center;
    background-image: none;
}

.root-modal .modal-apt-info .environment .list h4::before {
    content: "";
    display: block;
    margin-bottom: 5px;
    width: 30px;
    height: 30px;
    background-color: #0a2e4f;
    position: relative;
}

.root-modal .modal-apt-info .environment .list h4::after {
    content: "";
    display: block;
    position: absolute;
    top: 15px;
    right: 0;
    bottom: 15px;
    width: 1px;
    background-color: #edeff5;
}

.root-modal .modal-apt-info .environment .school h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_school.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_school.svg) 50%/contain no-repeat;
}

.root-modal .modal-apt-info .environment .move h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_apt.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_apt.svg) 50%/90% no-repeat;
}

.root-modal .modal-apt-info .environment .subway h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_subway.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_subway.svg) 50%/contain no-repeat;
}

.root-modal .modal-apt-info .environment .bus h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_bus.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_bus.svg) 50%/contain no-repeat;
}

.root-modal .modal-apt-info .environment .bank h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/bank_i_2.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/bank_i_2.svg) 50%/contain no-repeat;
}

.root-modal .modal-apt-info .environment .hospital h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/hospital_3.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/hospital_3.svg) 50%/contain no-repeat;
}

.root-modal .modal-apt-info .environment .mart h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/mart_1_1.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/mart_1_1.svg) 50%/contain no-repeat;
}

.root-modal .modal-apt-info .environment .store h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/convenience_1.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/convenience_1.svg) 50%/90% no-repeat;
}

.root-modal .modal-apt-info .environment .park h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/park.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/park.svg) 50%/90% no-repeat;
}

.root-modal .modal-apt-info .environment .public h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/office_1.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/office_1.svg) 50%/90% no-repeat;
}

.root-modal .modal-apt-info .environment .commercial h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_commercial.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/common/svg/icon_outline_commercial.svg) 50%/contain no-repeat;
}

.root-modal .modal-apt-info .environment .station h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/railway_station.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/railway_station.svg) 50%/90% no-repeat;
}

.root-modal .modal-apt-info .environment .bigstore h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/big_store.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/big_store.svg) 50%/90% no-repeat;
}

.root-modal .modal-apt-info .environment .doroic h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/doro_ic.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/mapbox/svg/doro_ic.svg) 50%/90% no-repeat;
}

.root-modal .modal-apt-info .environment .article {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0;
}

.root-modal .modal-apt-info .environment .article dl {
    width: calc(25% - 30px);
    margin: 10px 15px;
}

.root-modal .modal-apt-info .environment .article dl > * {
    line-height: 130%;
}

.root-modal .modal-apt-info .environment .article dt {
    margin-bottom: 5px;
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.root-modal .modal-apt-info .environment .article dt span {
    font-size: 14px;
}

.root-modal .modal-apt-info .environment .article dd {
    position: relative;
    display: inline-block;
    padding-left: 10px;
    color: #7e81a6;
    font-size: 13px;
}

.root-modal .modal-apt-info .environment .article dd::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 2px;
    width: 4px;
    height: 4px;
    border-radius: 100%;
    background-color: #5e78d8;
    transform: translateY(-50%);
}

.root-modal .modal-apt-info .environment .article dd strong {
    color: #5e78d8;
}

.root-modal .modal-apt-info .environment .article dd:not(.distance) + dd::before {
    display: none;
}

.root-modal .modal-apt-info .environment .article dd:not(.distance) + dd::after {
    content: "/";
    position: absolute;
    top: 50%;
    left: 2px;
    transform: translateY(-50%);
}

.root-modal .modal-apt-info .environment .article .category {
    position: relative;
    padding-top: 20px;
    width: calc(75% - 30px);
    margin: 0;
}

.root-modal .modal-apt-info .environment .article .category dt {
    display: inline-block;
    position: absolute;
    top: -2px;
    left: 0;
    padding: 2px 5px;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
    background-color: #7080ad;
}

.root-modal .modal-apt-info .environment .article .category dd {
    color: #7080ad;
}

.root-modal .modal-apt-info .environment .article .category dd:nth-child(2) {
    padding-left: 0;
}

.root-modal .modal-apt-info .environment .article .category dd:nth-child(2)::before {
    display: none;
}

.root-modal .modal-apt-info .environment .article .category dd:not(.distance) + dd::after {
    content: "";
    left: 3px;
    width: 1px;
    height: 12px;
    background-color: #ccc;
}

.root-modal .modal-apt-info .environment .article .distance {
    display: block;
}

.root-modal .modal-apt-info .environment .article .btn-close {
    position: absolute;
    bottom: 0;
    right: 0;
}

.root-modal .modal-apt-info .environment .article .btn-close button {
    width: 30px;
    height: 30px;
    margin: 0;
    text-indent: -9999px;
    background-color: #dbe0ec;
    transition: .3s;
}

.root-modal .modal-apt-info .environment .article .btn-close button:hover {
    background-color: #5e78d8;
}

.root-modal .modal-apt-info .environment .article .btn-close button::before, .environment .article .btn-close button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
    transform: translate(-50%, -50%);
}

.root-modal .modal-apt-info .environment .more::before {
    width: 50%;
    height: 3px;
}

.root-modal .modal-apt-info .environment .more::after {
    width: 3px;
    height: 50%;
}

.root-modal .modal-apt-info .environment .fold::before {
    width: 50%;
    height: 3px;
}

.root-modal .modal-apt-info .environment .fold::after {
    display: none;
}

.root-modal .modal-apt-info .environment .col-6 {
    display: inline-flex;
    flex-flow: row nowrap;
}

.root-modal .modal-apt-info .environment .col-6 .article dl {
    width: auto;
    flex: 1;
}

.root-modal .modal-apt-info .info-current .list-basic {
    margin-bottom: 0;
}

.root-modal .modal-apt-info .utility-info {
    position: relative;
    overflow: hidden;
    margin-top: 20px;
}

.root-modal .modal-apt-info .utility-info dl {
    padding: 15px 0;
}

.root-modal .modal-apt-info .utility-info dl > * {
    width: 33.333%;
    padding: 5px 0;
    text-align: center;
}

.root-modal .modal-apt-info .utility-info dt {
    position: relative;
    margin-bottom: 15px;
    /*font-family: NotoSansR;*/
    font-size: 18px;
}

.root-modal .modal-apt-info .utility-info dt::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 3px;
    vertical-align: -2px;
    background-color: #0a2e4f;
}

.root-modal .modal-apt-info .utility-info dd {
    padding-top: 0;
    color: #7e81a6;
    font-size: 16px;
}

.root-modal .modal-apt-info .utility-info dd b {
    color: #0a2e4f;
    /*font-family: GmarketSansM;*/
    font-size: 24px;
}

.root-modal .modal-apt-info .utility-info dt:nth-child(3) {
    position: absolute;
    top: 16px;
    left: 33.333%;
}

.root-modal .modal-apt-info .utility-info dd:nth-child(4) {
    position: absolute;
    top: 58px;
    left: 33.333%;
}

.root-modal .modal-apt-info .utility-info dt:nth-child(5) {
    position: absolute;
    top: 16px;
    left: 66.666%;
}

.root-modal .modal-apt-info .utility-info dd:nth-child(6) {
    position: absolute;
    top: 58px;
    left: 66.666%;
}

.root-modal .modal-apt-info .utility-info dd + dt::after {
    content: "";
    position: absolute;
    top: -10px;
    left: 0;
    width: 1px;
    height: 90px;
    border-left: dashed 1px #dfe6ef;
}

.root-modal .modal-apt-info .utility-info .icon-calendar {
    background: none;
}

.root-modal .modal-apt-info.modal-popup {
    top: 115px;
    bottom: 0;
    left: 0;
    transform: initial;
    border-radius: inherit;
    width: 100%;
    margin-bottom: 0;
}

.root-modal .modal-apt-info.modal-popup .popup-content {
    height: 100%;
}

.sale-info-box .title a.no-deco {
    color: #333;
    font-size: 16px;
}

.sale-info-box .title a.no-deco::after {
    display: none;
}

.timeout.lm10 {
    margin-left: 10px;
}

.remote-area.bottom span.btn-fit::before, .remote-area.bottom span.btn-around::before {
    content: "";
    display: inline-block;;
    width: 20px;
    height: 20px;
    margin-right: 2px;
    vertical-align: -4px;
    background: white;
}

/*입주 폴리곤 팝업*/
.ent-box {
    width: 820px;
    padding-bottom: 0;
    cursor: default;
    position: absolute !important;
    top: -100px;
    right: 100px;
}

.ent-box .list dd {
    padding-left: 10px;
}

.ent-box .title {
    flex-flow: row wrap;
    height: 70px;
    padding: 10px 15px;
}

.ent-box .title i::before {
    left: 21px;
    width: 18px;
    height: 18px;
    transform: translateY(-53%);
}

.ent-box .title span {
    position: static;
    max-width: 90%;
    padding-left: 42px;
}

.ent-box .title span::before {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

.ent-box .title span b {
    color: #50649c;
    font-weight: normal;
}

.ent-box .title .list {
    width: 100%;
    height: auto;
    margin-left: 30px;
}

.ent-box .title .list dl {
    padding-top: 0;
    background-color: #fff;
}

.ent-box .title .list dt {
    width: 10%;
}

.ent-box .title .list dd {
    width: 15%;
    font-weight: 500;
}

.ent-box .col-2 {
    display: flex;
    flex-flow: row wrap;
}

.ent-box .col-2 > * {
    max-height: 542px;
    overflow-y: auto;
}

.ent-box .col-2 > *::-webkit-scrollbar {
    width: 5px;
    height: 1px;
    background: rgba(0, 0, 0, .05);
}

.ent-box .col-2 > *::-webkit-scrollbar-track {
    background-color: transparent;
}

.ent-box .col-2 > *::-webkit-scrollbar-thumb {
    background: #dadeea;
    border: 0 none #ffffff;
}

.ent-box .col-2 > *:hover::-webkit-scrollbar-thumb {
    background: #adb5ca;
}

.ent-box .col-2 .list-left {
    width: 40%;
    padding-left: 0;
    padding-right: 0;
    border-radius: 0 0 0 5px;
    border-right: solid 1px #eee;
    background-color: #fff;
}

.ent-box .col-2 .list-left dl {
    position: relative;
    padding: 15px;
    cursor: auto;
    transition: .3s;
}

.ent-box .col-2 .list-left dl:hover {
    background-color: rgba(255, 255, 255, .5);
}

.ent-box .col-2 .list-left dl + dl {
    border-top: solid 1px #ddd;
}

.ent-box .col-2 .list-left dl dt a {
    height: 20px;
}

.ent-box .col-2 .list-left dl dt a.w17 {
    width: 17px;
}

.ent-box .col-2 .list-left .active, .ent-box .col-2 .list-left .active:hover {
    background-color: #edf1f6;
}

.ent-box .col-2 .list-left .active .bold, .ent-box .col-2 .list-left dl:hover .bold {
    color: #333;
}

.ent-box .col-2 .list-left .active .bold {
    font-weight: bold;
}

.ent-box .col-2 .list-left .active .bold {
    font-size: 16px;
    background-color: transparent;
}

.ent-box .col-2 .list {
    height: auto;
    padding: 0;
}

.ent-box .col-2 .list dt {
    width: 20%;
    color: #a9b2c7;
    transition: color .3s;
}

.ent-box .col-2 .list dd {
    width: 80%;
}

.ent-box .col-2 .list .bold {
    width: 100%;
    margin-bottom: 10px;
    border: 0;
    border-radius: 0;
    color: #454f5d;
    font-size: 15px;
    font-weight: 400;
    text-align: left;
}

.ent-box .col-2 .list-right {
    width: 60%;
    padding: 15px;
}

.ent-box .col-2 .list-right dl {
    padding: 10px 5px;
}

.ent-box .col-2 .list-right dl + dl {
    border-top: dashed 1px #ddd;
}

.ent-box .col-2 .list-right dt {
    width: 25%;
    border-color: #9086ee;
    color: #9086ee;
}

.ent-box .col-2 .list-right dd {
    width: 75%;
}

.ent-box .col-2 .list-right h4 {
    position: relative;
    padding-left: 10px;
    color: #333;
    letter-spacing: -1px;
    font-size: 15px;
    font-weight: bold;
}

.ent-box .col-2 .list-right h4::before {
    content: "";
    display: block;
    position: absolute;
    top: 4px;
    left: 0;
    width: 4px;
    height: 13px;
    border-radius: 2px;
    background-color: #8934fa;
}

.old-3d-legend button.active:first-child {
    background-color: #f9b921;
}

.old-3d-legend button.active:nth-child(2) {
    background-color: #7dc13a;
}

.old-3d-legend button.active:nth-child(3) {
    background-color: #4d6bd9;
}

.old-3d-legend button.active:nth-child(4) {
    background-color: #98806c;
}

[data-tab-name="입주"] .filter-area {
    background-color: #fff
}

a.introjs-button.introjs-nextbutton {
    animation: pulse .6s infinite alternate;
    transform-origin: center;
    background: #08c;
    color: white;
    font-weight: bold;
    text-decoration: initial;
    text-shadow: none;
    box-shadow: none;
}

.popup-help {
    padding: 5px;
    border: solid 2px #7080ad;
    border-radius: 5px;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    background-color: #7080ad;
}

.popup-help:hover {
    border-color: #6274a4;
    background-color: #6274a4;
}

.marker-apt {
    width: 70px;
    height: 80px;
}

.marker-region {
    width: 100px;
    height: 100px;
}

.marker-region-large {
    width: 600px;
    height: 600px;
    border-radius: 600px;
}

.marker-direction {
    width: 800px;
    height: 400px;
}

.marker-cursor {
    width: 30px;
    height: 30px;
    background: url(/res/img/common/icon_cursor-d77ccbd04174df41d9dcb1a3d21bfbc6.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
/*단지비교 모달*/
.root-modal .modal-apt-info.pre-apt-info .menu-content.active{
    top:10px;
    left:20px;
    padding: 0 20px 0 0;
}
.root-modal .modal-apt-info.pre-apt-info .right {
    display: revert;
}
.root-modal .modal-apt-info.pre-apt-info tr {
    border-bottom: none;
}
.root-modal .modal-apt-info.pre-apt-info th,td {
    border: solid 1px #dfe6ef;
}

.mapboxgl-marker .box-close {
    position: absolute;
    top: 35px;
    right: 0px;
    width: 50px;
    height: 50px;
    text-indent: -9999px;
    background: url(https://aptgin.com/cdn/res/icon/common/svg/icon_close_tiny.svg) 50%/60% no-repeat;
    outline: none;
    z-index: 1;
}


/*3D상권 폴리곤 팝업*/
.busi-box {
    width: 930px;
    padding-bottom: 0;
    cursor: default;
    position: absolute !important;
    top: -200px;
    right: -200px;
}

.busi-box .list dd {
    padding-left: 10px;
}

.busi-box .title {
    flex-flow: row wrap;
    height: 70px;
    padding: 10px 15px;
}

.busi-box .title i::before {
    left: 21px;
    width: 18px;
    height: 18px;
    transform: translateY(-53%);
}

.busi-box .title span {
    position: static;
    max-width: 90%;
    padding-left: 42px;
}

.busi-box .title span::before {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
}

.busi-box .title span b {
    color: #0a2e4f;
    font-size: 14px;
    font-weight: normal;
}

.busi-box .title .list {
    width: 100%;
    height: auto;
    margin-left: 30px;
}

.busi-box .title .list dl {
    padding-top: 0;
    background-color: #fff;
}

.busi-box .title .list dt {
    width: 10%;
}

.busi-box .title .list dd {
    width: 10%;
    font-weight: 500;
}

.busi-box .info-current{
    padding: 10px;
    margin-bottom: 0;
}

.busi-box .info-current dl{
    justify-content: center;
}

.busi-box .info-current dl > *{
    border-top: none;
    border-bottom: solid 1px #eee;
}

.busi-box .info-current dl > *:not(:first-child):not(:nth-child(2)):not(:nth-child(3)) {
    border-top: none;
}

.busi-box .info-current dt, .busi-box .info-current dd {
    width: 50%;
}

.busi-box .category {
    padding: 0;
}


.busi-box .detail-list {
    display: flex;
}

.busi-box .detail-list > *{
    max-height: 372px;
    overflow-y: auto;
}

.busi-box .detail-list > *::-webkit-scrollbar {
    width: 5px;
    height: 1px;
    background: rgba(0, 0, 0, .05);
}

.busi-box .detail-list > *::-webkit-scrollbar-thumb {
    background: #dadeea;
    border: 0 none #ffffff;
}

.busi-box .detail-list div{
    width: 30%;
}

.busi-box .detail-list div:nth-child(3) {
    width: 40%;
}

.busi-box .detail-list .info-current{
    padding:0;
}

.busi-box .detail-list .info-current dl{
    position: relative;
    cursor: pointer;
    transition: .3s;
    padding: 0 15px;
    background: #F4F8FD;
}

.busi-box .detail-list .info-current dl.active{
    background: #fff;
}

.busi-box .detail-list .info-current dl.active::before {
    content: "";
    display: block;
    position: absolute;
    top: 11px;
    right: 4px;
    width: 4px;
    height: 16px;
    border-radius: 2px;
    background-color: #8934fa;
}

.busi-box .detail-list .info-current dt{
    width: 65%;
}

.busi-box .detail-list .info-current dd{
    width: 35%;
}

.busi-box .detail-list .info-current dt.no-icon::before{
    display: initial;
    margin: 0;
    vertical-align: 0;
}

.busi-box .detail-list .info-current .busi-detail{
    display: flex;
    flex-flow: row wrap;
    background: #fff;
    padding:10px;
    border-bottom: 1px dashed #ddd;
}
.busi-box .detail-list .info-current .busi-detail > *{
    margin: 2px 0;
}

.busi-box .detail-list .info-current .busi-detail dt{
    width: 25%;
    border: solid 1px #9086ee;
    color: #9086ee;
    border-radius: 18px;
    text-align: center;
    height: 20px;
    line-height: 18px;
    font-size: 11px;
}
.busi-box .detail-list .info-current .busi-detail > dt:not(:first-child):not(:nth-child(2)):not(:nth-child(3)){
    border-top: solid 1px #9086ee;
}
.busi-box .detail-list .info-current .busi-detail dd{
    width: 75%;
    border: 0;
    height: 20px;
    line-height: 18px;
    text-align: left;
    padding-left: 5px;
    font-size: 13px;
}

.busi-box .detail-list .info-current .busi-detail dt.bold{
    width: 100%;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: bold;
    text-align: left;
    border: 0;
    color: #0a2e4f;
}


.busi-box.corp-box {
    width: 800px;
}

.busi-box.corp-box .title .list dt, .busi-box.corp-box .title .list dd {
    width: 10%;
}

.busi-box.corp-box .info-current {
    padding: 10px;
}

.busi-box.corp-box .info-current h5{
    display: block;
    width: 100%;
    margin-top: 5px;
    position: relative;
    padding-left: 10px;
    font-size: 16px;
    line-height: 24px;
}

.busi-box.corp-box .info-current h5::before{
    content: "";
    display: block;
    position: absolute;
    top: 10px;
    left: 0;
    width: 5px;
    height: 5px;
    background-color: #8934fa;
}

.busi-box.corp-box .info-current > .ac_js_flex{
    padding: 10px 5px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

.busi-box.corp-box .info-current > div > .ac_js_flex{
    padding: 5px;
    font-size: 13px;
}

.check-option {
    display: flex;
    flex-direction: row;
    align-content: flex-start;
    border-radius: 24px;
}

.check-option .filter {
    position: relative;
    word-break: keep-all;
    width: 100%;
}
.check-option .filter > a {
    flex-flow: row wrap;
    position: relative;
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 15px 0 8px;
    border-radius: 5px;
    border: 1px solid #dadce0;
    font-size: 15px;
    transition: background 100ms ease-out;
}

.check-option .filter > a .filter-name {
    display: block;
    width: 100%;
    margin-bottom: -10px;
    margin-left: 0;
    color: #747d8d;
    font-size: 12px;
    font-weight: 500;
    text-decoration: none;
}
.check-option .filter > a .text {
    font-weight: bold;
    color: #4c4c4c;
    line-height: 100%;
    white-space: pre;
}

.check-option .filter > a .arrow {
    display: block;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%) rotate(-180deg);
    width: 12px;
    height: 7px;
    background-color: #000;
    mask: url(/res_root/img/common/icon_arrow_down-85f3af29ddc5c33cf9b376c6e161949a.svg) 50%/contain no-repeat;
    -webkit-mask: url(/res_root/img/common/icon_arrow_down-85f3af29ddc5c33cf9b376c6e161949a.svg) 50%/contain no-repeat;
}

.check-option .filter > a.active .arrow {
    transform: translateY(-50%);
}

.check-option .filter fieldset {
    display: none;
    position: absolute;
    top: 50px;
    left: auto;
    right: 0;
    min-width: 330px;
    padding-top: 0;
    border: 1px solid #2e2e2e;
    color: #666;
    font-size: 14px;
    line-height: 20px;
    font-weight: 300;
    background-color: #fff;
    z-index: 5;
}

.mapboxgl-popup-content .left-box{
    position: absolute !important;
    top: -200px !important;
    right: 200px !important;
    left: auto !important;
}

#page-navi, .right-banner {
    position: fixed;
    top: 50%;
    left: calc(50% + 615px);
    margin: 0;
    padding: 0;
    z-index: 5;
}

#page-navi li {
    position: relative;
    display: block;
    margin-top: -1px;
}

#page-navi a {
    display: block;
    width: 150px;
    height: 42px;
    padding: 0 10px;
    border: 1px solid #afbac7;
    color: #798490;
    text-align: left;
    line-height: 40px;
    text-transform: uppercase;
    background: #fff;
    transition: .2s ease;
}

#page-navi a::before {
    content: "";
    display: none;
    position: absolute;
    top: 10px;
    left: -20px;
    float: left;
    width: 0;
    height: 0;
    background-color: transparent;
    border-style: solid;
    border-width: 10px;
    border-color: transparent #8692b4 transparent transparent;
}

#page-navi a:hover, #page-navi a:active {
    color: #fff;
    background-color: #aeb8d4;
}

#page-navi .current a {
    color: #fff;
    border: 1px solid #8692b4;
    background-color: #8692b4;
}

#page-navi .current a:hover, #page-navi .curren a:active {
    color: #fff;
    border: 1px solid #8692b4;
    background-color: #8692b4;
}

#page-navi .current a::before {
    display: block;
}

.report-navi{
    top: 25% !important;
    left: calc(50% + 770px) !important;
}

.auction-info {
    padding-bottom: 5px;
    border-top: solid 2px #666667;
}

.auction-info dl {
    overflow: hidden;
    position: relative;
    padding: 0 10px;
}

.auction-info dl > * {
    height: 25px;
    border-bottom: dashed 1px #d9e1ea;
    line-height: 25px;
}

.auction-info dt {
    float: left;
    clear: both;
    width: 70%;
    padding-left: 10px;
    font-size: 14px;
}

.auction-info dd {
    float: right;
    width: 30%;
    padding-right: 10px;
    font-size: 12px;
    text-align: right;
}

.auction-info dd b {
    margin-right: 2px;
    color: #333;
    font-family: Muli, sans-serif;
    font-size: 15px;
}

.auction-info dt::before {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 5px;
    vertical-align: -4px;
    background-color: #666;
}

.auction-info .icon-circle::before {
    width: 12px;
    height: 12px;
    vertical-align: -1px;
    border-radius: 100%;
    background-color: var(--icon-circle-color);
}

.auction-title {
    display: flex;
    align-content: center;
    height: 30px;
    border-bottom: solid 1px #d9e0f7;
    background-color: #f3f6fb;
}

.auction-title span {
    display: inline-block;
    font-size: 13px;
    text-align: center;
    line-height: 28px;
}

.auction-title span:first-child {
    width: 60%;
}

.auction-title span:last-child {
    width: 40%;
}

.apt-env-label{
    display: inline-block;
    margin-right: 1px;
    /*padding-right: 1px;*/
    width: 15px;
    height: 15px;
    border-radius: 3px;
    color: #fff;
    font-family: Gulim, "굴림", Dotum, "돋움";
    font-size: 11px;
    font-weight: normal;
    line-height: 16px;
    text-align: center;
}

.price-slide-main{
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    margin-left: 20px;
    margin-bottom:10px;
}

.price-slide-main .switch-radio {
    margin-left: 15px;
}
.price-slide-main .switch-radio.triple{
    width: 189px;
}
.price-slide-main .apt-notice{
    margin-right: 0;
}
#main_apt_extent_list .real-price > li > div:first-child {
    width: 12%;
}
#main_apt_extent_list .real-price > li > div {
    width: 44%;
}
#main_apt_extent_list .real-price > li > div > .high-price, #main_apt_extent_list .real-price > li > div > .low-price {
    font-size:14px;
}
#main_apt_extent_list .real-price > li > div > ul > li{
    font-size:14px;
}
#main_apt_extent_list .real-price > li > div > ul > li span{
    font-size:13px;
}

#main_apt_extent_list .more{
    display: block;
    width: 100%;
    font-weight: 500;
    color: #fff;
    font-size: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
    background-color: #a8aec5;
    margin-top: 20px;
    outline: none;
}


.sale-box{
    border: 1px solid #dddddd;
    border-radius: 10px;
    padding: 8px;
    margin-bottom: 10px;
}

.compare-tag{
    text-align: left;
}
.compare-tag span.tag-nm i{
    font-style: normal;
    padding: 0 4px 2px 3px;
    border-radius: 3px;
    color: #fff;
    font-size: 11px;
    text-align: center;
    line-height: 21px;
    margin-right: 5px;
}
.compare-tag span.tag-nm.ib i{
    background-color: #555555;
}
.compare-tag span.tag-nm.gm i{
    background-color: #FF0060;
}
.compare-tag span.tag-nm.sag i{
    background-color: #0079FF;
}
.compare-tag span.tag-nm.ryd i{
    background-color: #FBA834;
}
.compare-tag span.tag-nm.sl i{
    background-color: #00DFA2;
}

.tippy-backdrop{border-radius:2px !important;}
.tippy-content{text-align: left}


.modal-region-tips{
    position: relative;
    margin-right: 10px;
}
.modal-region-tips .tips-box{
    z-index: 101;
}



.print-div {display: none;}

@media print{
    .no-print {
        display: none;
    }

    .print-div {
        display: block;
    }

    .print-div h4{
        margin: 10px 0;
    }
    /*.print-div {width:21cm;min-height:29.7cm;padding:2cm 1cm 0 1cm;margin:0 auto;background:#eee;}*/
    .print-div .title-area.thick {
        display: flex;
        justify-content: space-between;
        min-height: auto;
        padding: 20px;
    }

    .print-div .title-area.thick .title-sub {
        display: flex;
    }

    .print-div .col-2 {
        display: initial;
        margin-bottom: 30px;
    }
    .print-div .col-2 > *{
        width: 100%;
    }

    .print-div .col-2.btn-set > div + div {
        padding-left: 0;
    }

    .print-div .col-2 .table-basic {
        margin-bottom: 0;
    }

    .print-div .table-basic {
        width: 100%;
        margin-bottom: 30px;
        border-top: solid 2px #d5dae6;
    }

    .print-div .table-basic th, .print-div .info-area .table-basic td {
        font-size: 13px;
    }

    .print-div .table-basic th {
        height: auto;
        padding: 8px 0;
        color: #50649c;
    }

    .print-div .table-basic td {
        padding: 5px;
    }

}

@media only all and (max-width: 5000px) {
    .comparer.decrepit {
        flex-flow: column wrap;
        align-items: flex-start;
        padding-left: 0;
        padding-right: 0;
    }

    .comparer.decrepit > div {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .comparer.decrepit > div:last-child {
        margin-top: 10px;
        padding-top: 10px;
        border-top: solid 1px #eee;
    }

    .comparer.decrepit > div:last-child h3 {
        margin-left: 0;
        padding-left: 0;
        border-left: 0;
    }

    .comparer.decrepit > div:last-child .sub-filter.address + h3 {
        padding-left: 18px;
        border-left: solid 1px #dadce0;
    }

    .comparer.decrepit > div:last-child .sub-filter + h3 {
        margin-left: 20px;
    }

    .map-wrap.decrepit {
        top: 184px;
    }

    .map-right.decrepit {
        top: 184px;
    }

    .map-tool-area.decrepit {
        top: 195px;
    }

    .map-legend-list.decrepit {
        top: 260px;
    }
}

@media only all and (max-width: 1899px) {
    .report-navi:not(.popup-content .report-navi){
        display: none;
    }
}

@media only all and (max-width: 1600px) {
    .dropdown.map .dropdown-menu {
        max-height: 500px;
    }

    .auction-photo.public li {
        height: 200px;
    }

    .auction-photo.public li + li {
        margin-left: 30px;
    }
}

@media only all and (max-width: 1500px) {
    .switcher-set > .switcher > fieldset > .switch-set.box .switch {
        margin-right: 5px;
        font-size: 12px;
        padding-left: 32px;
    }

    .switcher-set > .switcher > fieldset > .switch-set.box .switch .slider {
        width: 20px;
        height: 10px;
    }

    .switcher-set > .switcher > fieldset > .switch-set.box .switch .slider::before {
        top: -2px;
        left: -5px;
        width: 14px;
        height: 14px;
    }
}

@media only all and (max-width: 1339px) {
    .map-info .filter-set > .filter.period > a > .text {
        max-width: 100%;
    }

    .modal-apt-info .tab-box > .tab-list > li {
        width: calc(25% + 1px);
    }

    .modal-apt-info .tab-box > .tab-list > li a {
        font-size: 16px;
    }
}

@media only all and (max-width: 1199px) {
    .switcher-set > .switcher > fieldset > .switch-set.box {
        right: 10px;
        top: 10px;
    }

    .wrapper.fixed .sidenav {
        top: 0;
    }

    .sidenav {
        top: 57px;
    }

    .title-area.bold {
        padding-top: 70px;
        border-top: 0;
    }

    .depth-set.loc-list ul {
        width: 100%;
    }

    .depth-set.loc-list li {
        width: calc(16.666% - 3px);
    }

    .depth-set .depth-4 > li {
        padding-left: 0;
        padding-right: 0;
    }

    .depth-set.with-icon-add button[disabled]::before {
        left: 9px;
    }

    .filter-set > .filter.save > fieldset > .input-set {
        flex-flow: row wrap;
        width: 100%;
    }

    .filter-set > .filter.save > fieldset > .input-set .selecting-set {
        flex: none;
        width: 100%;
        margin-bottom: 5px;
    }

    .filter-set .filter.save fieldset .input-set .selecting {
        flex-flow: row nowrap;
        width: 33.333333%;
        height: 34px;
    }

    .filter-set .filter.save fieldset .input-set .selecting span {
        font-weight: normal;
        font-size: 15px;
        text-align: left;
    }

    .filter-set > .filter > a > .text {
        display: block;
        height: 44px;
        line-height: 44px;
        font-size: 16px;
    }

    .filter-set > .filter > a > .legend-text {
        display: none;
    }

    .filter-set .filter.save fieldset .input-set {
        width: 100%;
    }

    .filter-set > .filter.save > a > .legend-text {
        display: block;
    }

    .filter-set > .filter.region > fieldset {
        width: 100%;
    }

    .filter-set > .filter .multi-set {
        display: block;
    }

    .filter-set > .filter .multi-set.demand .selecting-set {
        position: relative;
        padding-top: 25px;
    }

    .filter-set > .filter .multi-set.demand .selecting-name {
        position: absolute;
        top: 5px;
        left: 15px;
    }

    .filter > fieldset .input-set .selecting-set {
        flex-wrap: nowrap;
        width: 20%;
    }

    .map-info .filter-area {
        background-color: #fff;
    }

    .map-info .filter-set > .filter > a {
        border-left: 1px solid #dadce0;
    }

    .map-info .filter-set > .filter.period > fieldset {
        display: none;
        border: 1px solid #717171;
    }

    .map-info .filter-set > .filter > fieldset > .btn-group {
        position: absolute;
        padding-left: 0;
    }

    .map-filter-set .filter .multi-set {
        flex-direction: row;
    }

    .map-filter-set .checking-set > .checking, .map-filter-set .selecting-set > .selecting
    .above-area {
        height: auto;
    }

    .nav-container.tab .nav-tabs {
        border-bottom: 0;
        padding-left: 0;
        padding-right: 0;
    }

    .nav-container.tab .nav-tabs li {
        margin-bottom: 4px;
        border-bottom: solid 1px #dadce0;
    }

    .nav-container.tab .nav-tabs li.active::after {
        display: none;
    }

    .sale-detail-list li {
        padding: .6em 0;
    }

    .modal-auction h3 {
        margin-bottom: 10px;
    }

    .info-head dt {
        padding-left: 10px;
    }

    .info-head dt:first-child {
        padding-left: 0;
    }

    .modal-auction .col-2 > * {
        width: 100%;
    }

    .modal-auction .col-2 > div + div {
        margin-top: 20px;
        padding-left: 0;
    }

    .modal-auction .nav-container {
        margin-bottom: 5px;
    }

    .agree-form {
        width: 100%;
    }

    .agree-form .title-area {
        border-top: 0;
    }

    .agree-form .btn-set .btn-leave {
        width: 100%;
        margin-top: 10px;
        margin-left: 0;
    }

    .agree-form .btn-set button {
        width: calc(50% - 10px);
    }

    .btn-mobile-filter {
        left: 50%;
        transform: translateX(-50%);
        width: 130px;
        height: 40px;
        padding-right: 70px;
    }

    .btn-mobile-filter .icon-filter {
        left: 30px;
        width: 20px;
        height: 40px;
    }

    .filter-tip {
        position: absolute;
        right: 30px;
        color: #fff;
        font-size: 13px;
        font-weight: 500;
        line-height: 110%;
        transform: translateY(-50%); /*background-color:#fff;transform:translateX(-50%);animation:move-up-down 2s ease-in-out infinite; */
    }

    /* .filter-tip::before,.filter-tip::after{content:"";display:block;position:absolute;left:50%;border-bottom:0;transform:translateX(-50%);}
	.filter-tip::after{bottom:-6px;border-top:6px solid #fff;border-left:6px solid transparent;border-right:6px solid transparent;}
	.filter-tip::before{bottom:-8px;border-top:7px solid rgba(0,0,0,.1);border-left:7px solid transparent;border-right:7px solid transparent;} */
    .alarm .title-box {
        height: auto;
        padding-bottom: 15px;
    }

    .alarm .title-box .tip {
        display: block;
        margin-left: 0;
        margin-top: 5px;
    }

    .sidenav-contents .source-list > li > p {
        display: block;
    }

    .sidenav-contents .source-list.alarm > li:not(.all-alarm) .switch {
        top: 3px;
        transform: none;
    }

    .alarm-area {
        z-index: 210;
    }

    .bbs-form.info dd .word-tip {
        margin-left: 5px;
    }

    .detail-set.filter .details {
        padding-top: 30px;
    }

    .detail-set.filter .details > .fixed-title {
        width: auto;
        right: 4px;
        background-color: #e8eef9;
    }

    .detail-set.filter .details label {
        flex-flow: row nowrap;
        margin: 5px;
    }

    .detail-set.filter .details label span {
        line-height: 130%;
    }

    .detail-set.filter .details .selecting-set {
        flex-flow: row wrap;
    }

    .detail-set.filter .details .item-title {
        width: 100%;
        margin: 5px 0 3px 0;
        line-height: 130%;
        text-align: left;
    }

    .detail-set.filter .dropdown {
        min-width: 100%;
        margin: 5px 0;
    }

    .detail-set.filter .dropdown + .dropdown, .detail-set.filter .dropdown + input {
        margin-left: 0;
    }

    .detail-set.filter input.num, .detail-set.filter input[type=text] {
        width: calc(50% - 10px);
    }

    .detail-set.filter input + span {
        width: 20px;
    }

    .auction-photo.public li {
        height: 150px;
    }

    .edu-info td > div {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .edu-info td .btn, .edu-info td > div .btn {
        display: flex;
        margin-left: 0;
        margin-top: .5em;
    }

    .edu-info td > div + div {
        margin-top: 1em;
    }

    .edu-info td > div {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .edu-info td .btn, .edu-info td > div .btn {
        display: flex;
        margin-left: 0;
        margin-top: .5em;
    }

    .edu-info td .index {
        flex-flow: column wrap;
        align-items: flex-start;
    }

    .index-area .list-basic {
        top: 48px;
        left: 0;
        padding-left: 0;
    }

    .index-area .list-basic li::before {
        top: 11px;
    }

    .bbs-list.edu li > a::before, .bbs-list.coupon li > a::before, .bbs-list.report li > a::before {
        top: 60px;
        right: 1em;
    }

    .bbs-list.pay li > a::before {
        top: 10px;
        right: 10px;
        transform: none;
        width: 80px;
        height: 80px;
        padding: 0 5px;
        font-size: 13px;
    }

    .title-wrap {
        flex-flow: column nowrap;
    }

    .title-wrap .bbs-btn-set {
        justify-content: flex-end;
    }

    @keyframes move-up-down {
        0% {
            top: -22px;
        }
        50% {
            top: -26px;
        }
        100% {
            top: -22px;
        }
    }

    .race ul {
        margin: 0;
        padding: 50px 100px;
    }

    .race ul:first-child {
        padding-left: 50px;
    }

    .race ul::before {
        left: 50px;
        right: 50px;
    }

    .race ul + ul::after {
        left: 50px;
    }

    .race ul.reverse {
        padding-left: 100px;
    }

    .race ul.reverse::after {
        right: 50px;
    }

    .race ul:last-child {
        padding-right: 50px;
    }

    .main-tab .nav-tabs {
        margin-top: 60px;
    }

    .wrapper.fixed .btn-mobile-filter {
        left: auto;
        right: 10px;
        top: 10px;
        width: 50px;
        height: 50px;
        padding: 0;
        transform: none;
    }

    .wrapper.fixed .btn-mobile-filter .filter-tip {
        display: none;
    }

    .wrapper.fixed .btn-mobile-filter .icon-filter {
        left: 50%;
        width: 50px;
        height: 50px;
    }

    .sidenav-contents .source-list .all-alarm .switch {
        top: 0;
        transform: none;
    }

    .above-area .sub-filter .option {
        margin-bottom: 0;
    }

    .comparer.location {
        position: absolute;
        top: 144px;
        left: 65px;
        right: 0;
    }

    .comparer.decrepit {
        margin-left: 65px;
    }

    .comparer.decrepit > div > h3 {
        font-size: 13px;
        line-height: 130%;
    }

    .comparer.decrepit .sub-filter > .right {
        width: auto;
    }

    .comparer.decrepit .sub-filter .option {
        margin-bottom: 0;
    }

    .map-wrap.decrepit {
        top: 170px;
        left: 0;
    }

    .map-right.decrepit {
        top: 170px;
    }

    .map-right.decrepit .total-info {
        top: 64px;
    }

    .bbs-form.info dd .tips {
        margin-left: 0;
        margin-top: 5px;
    }

    .title-wrapper.report > div {
        width: 100%;
    }

    .title-wrapper.report > .title {
        padding-top: 20px;
    }

    .report-total {
        padding: 1em;
    }

    .report-total .step ol {
        flex-flow: column wrap;
        gap: 30px;
    }

    .report-total p {
        font-size: .8rem;
    }

    .report-total p b {
        font-size: inherit;
    }

    .report-total .step {
        max-width: 450px;
        margin-top: 1.5em;
    }

    .report-total .step li span::before {
        display: none;
    }

    .modal-container.modal-alert {
        bottom: auto;
    }

    .report-total .step li + li::after {
        left: 50%;
        top: -25px;
        transform: translateX(-50%) rotate(45deg);
        width: 10px;
        height: 10px;
    }

    .report-area .member-info dd .btn {
        font-size: .8rem;
    }

    .report-area .member-info dd.security > div {
        margin-left: 0;
    }

    .report-area .member-info dd.security .btn + .btn {
        margin-left: 0;
    }

    .report-area .member-info dd.mail > input {
        flex: 1;
        width: 50%;
    }

    .modal-container .report-area .bbs-form > .dl-table > dt {
        width: 30%;
    }

    .modal-container .report-area .bbs-form > .dl-table > dd {
        width: 70%;
    }

    .bbs-view .event-info.report dt {
        width: 30%;
    }

    .bbs-view .event-info.report dd {
        width: 70%;
    }

    .modal-container .report-area .col-2 {
        flex-flow: column wrap;
        gap: 20px;
    }

    .modal-container .report-area .col-2 > div {
        width: 100%;
    }

    .modal-container.slim .report-area .row {
        padding: 0;
    }

    .btn-group2 {
        top: 16px;
    }

    .openChat-header li .btn-copy {
        margin-right: 30px;
    }
}

@media only all and (max-width: 1100px) {
    .modal-auction .title-area.thick {
        flex-flow: column wrap;
        align-items: flex-start;
    }

    .info-area {
        top: 145px;
    }

    .info-area.public {
        top: 200px;
    }

    .info-head {
        justify-content: flex-start;
    }

    .wide > .sub-filter.address .option.city + .option:not(.city) {
        margin-left: 0;
    }

    .policy-contents [class^=col-], .policy-contents [class*=col-] {
        display: block;
        float: none;
        width: 100%;
    }
}

@media only all and (max-width: 991px) {
    .sidenav {
        top: auto;
        bottom: 0;
        width: 100%;
        height: 44px;
        border-right: 0;
        flex-direction: column;
        z-index: 300;
    }

    .wrapper.fixed .sidenav {
        top: auto;
    }

    .bbs-form.info dd.security input {
        width: calc(50% - 10px);
    }

    .comparer.decrepit {
        margin-left: 0;
    }

    .map-tool-area.decrepit {
        left: 10px;
    }

    .map-legend-list.decrepit {
        left: 10px;
    }

    .with-thumbnail.youtube li > a {
        padding: 1em 0;
    }

    .with-thumbnail.youtube .img {
        height: 180px;
    }

    .with-thumbnail.youtube .img img {
        width: 320px;
        height: 180px;
    }

    .with-thumbnail.youtube .bbs-content-info {
        position: static;
        width: 100%;
    }

    .with-thumbnail.youtube li > a {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 20px;
        height: auto;
    }

    .with-thumbnail.youtube li > a .img {
        position: relative;
        top: auto;
        left: auto;
        margin-bottom: 10px;
    }

    .with-thumbnail.youtube li > a .bbs-btn-set {
        right: 0;
        top: auto;
        bottom: 15px;
    }

    .with-thumbnail.youtube .bbs-content-info span {
        font-size: 12px;
    }

    .with-thumbnail.youtube .bbs-content-info .url {
        max-width: none;
    }

    .modal-container .report-area .member-info .terms-text h4 {
        font-size: .9rem;
    }

    .modal-container .report-area .member-info .terms-text h4 b {
        font-size: 1rem;
    }

    .modal-container.slim .report-area .row .wide {
        padding: 0;
    }

    .modal-container.slim .report-area .search-box {
        flex-flow: column wrap;
        align-items: flex-start;
    }

    .modal-container.slim .report-area .search-box > div + div {
        margin-top: .5em;
    }

    .modal-container.slim .report-area .search-box label {
        display: inline-block;
        width: 80px;
        margin-left: 0 !important;
        margin-right: 0;
        font-size: .8rem;
    }

    .modal-container.slim .report-area .search-box input:last-child {
        width: calc(100% - 220px);
    }

    .modal-container.slim .report-area .terms-box {
        margin-bottom: 1em;
    }

    .modal-apt-info .tab-box > .tab-list > li a {
        font-size: 14px;
    }

    .with-thumbnail.edu-info li > a > .subject {
        margin-bottom: 10px;
    }

    .with-thumbnail.edu-info li > a {
        padding-right: 30px;
    }

    .edu-info .btn-review {
        display: flex;
        flex-flow: row nowrap;
        gap: .5em;
        position: static;
        top: auto;
        right: auto;
        transform: none;
    }

    .edu-info .btn-review .btn {
        width: auto;
        margin: 0;
        padding: 0 12px;
    }

    .edu-info .btn-review .btn + .btn {
        margin-top: 0;
    }

    .bbs-list.edu-info .text {
        height: auto;
        min-height: 0;
        max-height: 24px;
        margin-bottom: 20px;
        -webkit-line-clamp: 1;
    }
}

@media only all and (max-width: 959px) {

    .container.fluid {
        margin-right: 0;
    }

    .sale-detail-info li {
        flex: 1;
        padding: 0;
        padding-left: 1em;
    }

    .sale-detail-info li:last-child {
        flex: 1.5;
    }

    .sale-detail-list ul {
        flex-flow: column wrap;
    }

    .sale-detail-list li + li {
        border-bottom: solid 1px #d9e0f7;
    }

    .sale-detail-list .title {
        border-radius: 0;
    }

    .filter > fieldset .input-set .selecting-set .selecting {
        flex: none;
    }

    .info-head > * {
        font-size: .9rem;
    }

    .modal-auction .table-basic th, .info-area .table-basic td, .button-set button {
        font-size: 12px;
    }

    .auction-photo.public li {
        height: 130px;
    }

    .auction-photo.public li + li {
        margin-left: 20px;
    }

}

@media only all and (max-width: 840px) {

    .chip-set {
        width: auto;
    }

    .sidenav-contents .link-list > li > a > small {
        padding-left: 8px;
        line-height: 1rem;
        word-break: keep-all;
        text-indent: 0;
    }

    .filter-set > .filter.save > fieldset > .input-set {
        display: block;
    }

    .filter > fieldset .input-set .selecting-set {
        width: 100%;
        margin: 0;
    }

    .filter-set .filter.save fieldset .input-set .selecting {
        width: 50%;
    }

    .filter.save fieldset > .input-set .dropdown {
        width: 100%;
        margin-left: 0;
    }

    .filter-set > .filter .input-set .selecting {
        margin-top: 0;
    }

    .sale-detail-info ul {
        display: block;
        height: auto;
    }

    .sale-detail-info li {
        margin: 2em 0;
        padding: 0 2em;
        font-size: 18px;
    }

    .sale-detail-info li + li {
        border-left: 0;
    }

    .sale-detail-info li span, .sale-detail-list li span {
        margin-bottom: .5em;
    }

    .sale-detail-info li p {
        padding-left: 65px;
    }

    .icon-loc-sale::before {
        left: 0;
        width: 40px;
        height: 40px;
    }

    .icon-household::before {
        width: 40px;
        height: 40px;
    }

    .icon-completion::before {
        top: 3px;
        width: 36px;
        height: 36px;
    }

    .above-area .btns-set h3 {
        float: none;
        margin-bottom: 1em;
    }

    .info-area .table-basic * {
        word-break: break-all;
    }

    .popup-content .title-area > .right {
        right: 0;
        bottom: auto;
        width: auto;
    }

    .modal-container.modal-login {
        top: 10px;
        bottom: auto;
        width: 90%;
        height: 360px;
        border-radius: 20px;
    }

    .info-area {
        display: block;
        overflow-y: auto;
    }

    .auction-photo.public li {
        height: 120px;
    }

    .auction-photo.public li + li {
        margin-left: 10px;
    }

    .modal-help {
        width: 100%;
        height: auto;
        bottom: auto;
    }

    .race ul {
        margin: 0;
        padding: 30px 50px;
    }

    .race ul:first-child {
        padding-left: 25px;
    }

    .race ul::before {
        left: 25px;
        right: 25px;
    }

    .race ul + ul::after {
        top: -90px;
        left: 25px;
        height: 180px;
    }

    .race ul.reverse {
        padding-left: 50px;
    }

    .race ul.reverse::after {
        right: 25px;
    }

    .race ul:last-child {
        padding-right: 25px;
    }

    .legend-info {
        display: none;
    }

    .bbs-form.member-info > .dl-table > dd > input + .btn {
        margin-left: 0;
        margin-top: .5em;
    }

    .bbs-list.report li > a {
        height: auto;
        min-height: 220px;
    }

    .bbs-list.report li > a .bbs-content-info {
        position: static;
        margin-top: 1em;
    }

    .modal-container .report-area .bbs-form > .dl-table > dd:not(.mail) {
        flex-flow: column nowrap;
        align-items: flex-start;
        justify-content: center;
    }

    .modal-container .report-area .bbs-form > .dl-table > dd:not(.mail) input {
        width: 100%;
    }

    .modal-container .report-area .bbs-form > .dl-table > dd:not(.mail) input + input {
        margin-top: .5em;
        margin-left: 0;
    }

    .modal-container.modal-apt-info {
        overflow-y: auto;
    }

    .modal-container.modal-apt-info .contents-wrapper {
        height: auto;
    }
}

@media only all and (max-width: 740px) {
    .info-head dt {
        padding-left: 0;
    }

    .info-head dd, .info-head dt:first-child {
        padding-right: 10px;
    }

    .info-area {
        top: 155px;
    }

    .bbs-form.info dd.security {
        padding-bottom: 60px;
    }

    .bbs-form.info dd.security.phone {
        padding-bottom: 40px;
    }

    .bbs-form.info dd.security .btn {
        width: 180px;
        margin-top: 5px;
        margin-left: 0;
    }

    .bbs-form.info dd.security .notes {
        bottom: 7px;
    }

    .bbs-form.info dd.security .checking span {
        line-height: 20px;
    }

    .bbs-form.member-info dd.security {
        padding-bottom: 60px;
    }

    .bbs-form.member-info dd.security .btn {
        width: 180px;
        margin-top: 5px;
        margin-left: 0;
    }

    .bbs-form.member-info dd.security .notes {
        bottom: 7px;
    }

    .bbs-form.member-info dd.security .checking span {
        line-height: 20px;
    }

    .modal-apt-info .tab-box > .tab-list > li {
        width: calc(50% + 1px);
    }

    .review-list colgroup col:first-child {
        width: 10% !important;
    }

    .review-list colgroup col:nth-child(2) {
        width: 50% !important;
    }

    .review-list colgroup col:nth-child(3) {
        width: 20% !important;
    }

    .bbs-list.edu .text {
        display: flex;
        flex-flow: column nowrap;
        gap: .5em;
        height: auto;
        margin-bottom: 20px;
    }

    .bbs-list.edu li > a {
        height: auto;
        min-height: 220px;
    }

    .bbs-list.edu li > a .bbs-content-info {
        position: static;
    }
}

@media only all and (max-width: 698px) {
    .popup-content .title-area > .right {
        position: absolute;
        width: auto;
    }

    .auction-photo li {
        height: 100px;
    }

    .modal-auction .caution span {
        display: block;
    }

    .btn-onbid {
        margin-top: 5px;
    }

    .info-area.public {
        top: 230px;
    }

    .modal-auction .caution {
        padding: 10px 0;
    }

    .modal-auction .caution span {
        font-size: 12px;
    }

    .bbs-list.pay li > a {
        height: auto;
        padding-left: 160px;
        align-items: flex-start;
    }

    .bbs-list.pay li > a .subject, .bbs-list.pay li > a .sum {
        margin-bottom: .5em;
    }

    .bbs-list.pay li > a::before {
        top: 5px;
        left: 0;
        right: auto;
        width: 50px;
        height: 50px;
        padding: 0 .5em;
        font-size: .6rem;
        line-height: 120%;
        z-index: 1;
    }

    .bbs-list.pay .img {
        position: absolute;
        top: 25px;
        left: 10px;
    }

    .bbs-list.pay .sum {
        height: auto;
    }

    .bbs-list.pay .img, .bbs-list.pay .img img {
        width: 120px;
        height: 120px;
    }

    .bbs-list.pay .bbs-content-info {
        position: static;
        align-items: flex-start;
        margin: 0;
    }

    .bbs-list.pay .bbs-content-info span {
        margin: 0;
        padding: 0;
    }

    .bbs-list.pay .bbs-content-info span:not(.category) {
        width: calc(100% - 100px);
        padding-left: 23px;
    }

    .bbs-list.pay .bbs-content-info span::after {
        display: none;
    }

    .bbs-list.pay .bbs-content-info .category {
        width: 115px;
    }

    .bbs-list.pay .premium {
        height: 120px;
    }

    .bbs-list.pay .premium::before {
        border-width: 40px 1411px 23px 399px;
    }

    .bbs-list.pay .premium::after {
        top: 10px;
        padding-top: 16px;
    }

    .with-thumbnail.edu-info li > a {
        height: auto;
        min-height: 220px;
        padding-right: 60px;
    }

    .with-thumbnail.edu-info li > a .bbs-content-info {
        position: static;
    }

    .edu-info .btn-review {
        flex-flow: column wrap;
        margin-bottom: 20px;
    }

    .title-wrapper > .title {
        width: auto;
        flex-direction: column;
        padding: 2em 0 1em 0;
    }

    .title-wrapper > .title > h2 {
        font-size: 2.5rem;
    }

    .title-wrapper > .title > p {
        height: auto;
        text-align: center;
        padding-top: 30px;
        padding-left: 0;
        padding-bottom: 20px;
    }

    .title-wrapper > .title > p::before {
        top: 14px;
        left: calc(50% - 15px);
    }

    .tab-page h3 {
        font-size: 1rem;
    }

    .research dt span {
        margin-left: 0;
        margin-top: .5em;
    }

    .research dt {
        font-size: 1rem;
    }

    .mileage-total {
        padding: 1em 2em;
    }

    .mileage-total h3 {
        padding-left: 0;
        background: none;
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
        font-size: 1rem;
        line-height: 200%;
    }

    .mileage-total p {
        font-size: .8rem;
    }

    .mileage-total p b {
        font-size: inherit;
    }

    .mileage-area {
        padding: 1em;
    }

    .race ul {
        margin: 0;
        padding: 0;
        flex-flow: column nowrap;
    }

    .race ul::before {
        left: 50%;
        right: auto;
        top: 0;
        transform: translateX(-50%);
        width: 1px;
        height: 100%;
    }

    .race ul + ul::after {
        display: none;
    }

    .race ul:first-child {
        padding-left: 0;
    }

    .race li {
        margin: 30px auto;
    }

    .race li.start {
        margin-top: 0;
    }

    .race ul.reverse {
        flex-flow: column wrap;
        padding-left: 0;
    }

    .race ul.reverse::after {
        right: 0;
    }

    .race ul:last-child {
        padding-right: 0;
    }

    .race ul:last-child::before {
        height: calc(100% - 30px);
    }

    .ground-spot {
        top: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .nav-container .nav-tabs.col-5 li {
        width: calc(25% + 1px);
    }
}

@media only all and (max-width: 599px) {

    .nav-tabs li > a {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .8rem;
        line-height: 120%;
        word-break: keep-all;
    }

    .filter-set > .filter.save > fieldset > .input-set {
        flex-flow: row wrap;
    }

    .filter-set > .filter.save > fieldset > .input-set > .btn-pink + .dropdown {
        margin-left: 0;
    }

    .title-area .info, .above-area .info {
        font-size: .8rem;
    }

    .bbs-form.info .dl-table > dt {
        padding: 6px 5px;
        font-size: .9rem;
    }

    .bbs-form.info dd .tips {
        display: block;
        margin-top: 5px;
        font-size: .8rem;
        line-height: 1rem;
    }

    .bbs-form > .dl-table > dd {
        flex-flow: row wrap;
    }

    .bbs-form.info > .dl-table > dd > input {
        text-indent: 0 !important
    }

    .bbs-form.info > .dl-table > dd.security input.tel-box {
        width: 60px;
        text-align: center;
    }

    .bbs-form.info > .dl-table > dd.e-mail > input {
        width: 42%;
    }

    .bbs-form.info > .dl-table > dd.phone > input {
        width: 27%;
    }

    .bbs-form.info > .dl-table > dd .btn {
        margin-left: 0;
    }

    .bbs-form .connect-sns .btn + .btn {
        margin-top: 5px;
    }

    .bbs-form.info dd .dropdown:first-child {
        margin-right: 5px;
    }

    .bbs-form.info dd .dropdown + .dropdown {
        margin-left: 0;
    }

    .bbs-form.info .dl-table > dt label {
        line-height: 130%;
        word-break: keep-all;
    }

    .sub-filter.address > .option > label.tit {
        width: 100%;
        text-align: left;
    }

    .sub-filter.address .option.city {
        width: calc(33.33% - 4px);
    }

    .sub-filter.address .option.city + .option.city {
        margin-left: 6px;
    }

    .sub-filter.address .option.date input[data-date-type] {
        width: 100%;
    }

    .sub-filter.address .option.date label:not(.tit) {
        position: absolute;
        left: 0;
        top: -25px;
    }

    .sub-filter.address .option.term {
        width: 100%;
        margin: 10px 7px 20px 7px;
        justify-content: center;
    }

    .sub-filter.address .option.term .btn-group {
        justify-content: center;
    }

    .sub-filter.address .option.pay-info {
        width: 100%;
    }

    .sub-filter.address .option.pay-info input {
        width: calc(100% - 95px);
    }

    .depth-set.loc-list li {
        width: calc(33.33% - 3px);
    }

    .legend .color-bar {
        width: 80px;
    }

    .depth-set.with-icon-add > ul > li > button {
        padding: 0;
        text-align: center;
    }

    .info-head {
        justify-content: flex-start;
    }

    .info-head > * {
        font-size: .8rem;
    }

    .info-head dt::before {
        margin-right: 3px;
    }

    .modal-auction h4 {
        margin-bottom: 10px;
        line-height: 110%;
    }

    .table-head {
        flex-flow: column wrap;
    }

    .table-head h4 {
        margin-bottom: 5px;
    }

    .table-head .info {
        margin-bottom: 10px;
        font-size: .8rem;
    }

    .auction-photo li {
        height: 80px;
    }

    .wide > .sub-filter.address .option.city + .option > label {
        margin: 10px 0;
        font-size: 18px;
    }

    .wide > .sub-filter.address .option.city + .option > label::before {
        display: none;
    }

    .above-area .right {
        margin-top: 1em;
    }

    .above-area .legend.right {
        margin-top: 0;
    }

    .above-area .sub-filter.address {
        width: 100%;
        margin-bottom: 0;
        margin-top: .5em;
        padding: 0;
        justify-content: flex-end;
    }

    .above-area .sub-filter.address .option {
        width: 100%;
    }

    .above-area .sub-filter.address .option input {
        margin-left: 0;
    }

    .table-area .table-basic td, .table-area .table-basic td * {
        font-size: .7rem;
        word-break: break-all;
    }

    .table-area .scroll-tbody {
        max-height: 80vh;
    }

    .table-area .list-basic li {
        padding-left: 5px;
    }

    .table-area .list-basic li::before {
        top: 6px;
        left: 0;
    }

    .bbs-form.member-info .dl-table > dt {
        padding: 6px 5px;
        font-size: .9rem;
    }

    .bbs-form.member-info > .dl-table > dd > input {
        text-indent: 0 !important
    }

    .bbs-form.member-info > .dl-table > dd.e-mail > input {
        width: 42%;
    }

    .bbs-form.member-info > .dl-table > dd.phone > input {
        width: 27%;
    }

    .bbs-form.member-info > .dl-table > dd .btn {
        margin-left: 0;
    }

    .bbs-form.member-info .dl-table > dt label {
        line-height: 130%;
        word-break: keep-all;
    }

    .bbs-form.member-info dd .tips {
        display: block;
        margin-left: 0;
        margin-top: 5px;
        font-size: .8rem;
        line-height: 1rem;
    }

    .bbs-list.report li .text {
        justify-content: center;
    }

    .coupon.event .label {
        display: block;
        width: 100%;
        margin-bottom: 10px;
    }

    .coupon.event .code {
        width: calc(100% - 80px);
    }

    .review-list th, .review-list td {
        font-size: .8rem;
    }

    .edu-info .btn-review {
        width: 100%;
    }

    .bbs-list.edu-info .text .btn {
        width: 100%;
    }

    .bbs-list.edu .text {
        width: 100%;
    }
}

@media only all and (max-width: 480px) {
    .bbs-form.info dd span {
        line-height: 130%;
    }

    .bbs-form.info .checking + .checking {
        margin-left: 0;
    }

    .bbs-form.info > .dl-table > dd > input + .btn, .bbs-form.info dd .dropdown + .dropdown {
        margin-top: 5px;
    }

    .bbs-form.info > .dl-table > dd > input + .btn {
        width: 180px;
        margin-left: 0;
    }

    .auction-photo li {
        height: 60px;
    }

    .title-btns {
        right: 45px;
        margin-right: 0;
    }

    .title-btns > * {
        padding: 0 5px;
        font-size: 12px;
        margin-left: 2px;
    }

    .auction-photo.public li {
        height: 130px;
        flex: none;
        width: calc(50% - 10px);
        margin: 5px;
    }

    .auction-photo.public li + li {
        margin-left: 5px;
    }

    .bbs-list.pay li > a {
        min-height: 120px;
        padding-bottom: 1em;
        padding-left: 100px;
    }

    .bbs-list.pay li > a .sum {
        height: auto;
        margin-bottom: 10px;
    }

    .bbs-list.pay li > a .subject {
        margin-bottom: 5px;
    }

    .bbs-list.pay .img, .bbs-list.pay .img img {
        width: 76px;
        height: 76px;
    }

    .bbs-list.pay .img.premium {
        height: 76px;
        padding-top: 0;
    }

    .bbs-list.pay .premium {
        top: 15px;
        height: 120px;
        padding-top: 80px;
        font-size: 1.2rem;
    }

    .bbs-list.pay .premium::before {
        border-width: 40px 1411px 23px 399px;
    }

    .bbs-list.pay .premium::after {
        top: 10px;
        padding-top: 20px;
    }

    .bbs-list.pay .bbs-content-info {
        position: static;
    }

    .bbs-list.pay .bbs-content-info span:not(.category) {
        width: calc(100% - 100px);
        font-size: .8rem;
    }

    .bbs-list.pay .bbs-content-info .category {
        width: 80px;
        font-size: .7rem;
    }

    .bbs-form.info > .dl-table > dd .btn + .btn {
        margin-left: 0;
    }

    .bbs-filter .search-box {
        display: flex;
        flex-flow: row wrap;
    }

    .bbs-filter .search-box button {
        width: 100%;
        margin-top: .5em;
        margin-left: 0;
    }

    .bbs-filter .search-box .checking {
        margin-left: 0;
        margin-top: .7em;
    }

    .bbs-filter .search-box .checking + .btn-purple {
        margin-left: 0;
    }

    .bbs-list.edu li > a::before {
        top: 1em;
        transform: none;
    }

    .bbs-list.report li > a::before {
        top: 1em;
        transform: none;
    }

    .bbs-list.pay li > a .sum button {
        margin-left: 0;
        margin-top: 1em;
        width: 100%;
    }

    .edu-info td .btn.icon-youtube-red {
        padding: .3em .5em;
        font-size: .8rem;
        word-break: keep-all;
    }

    .report-total .step {
        width: 100%;
    }

    .report-total .step span {
        font-size: .9rem;
    }

    .report-area .member-info dd.phone input {
        width: calc(33.333% - 10px);
    }

    .report-area .member-info dd.security .notes {
        bottom: 5px;
    }

    .bbs-form.member-info > .dl-table > dd .btn + .btn {
        margin-left: 0;
    }

    .bbs-form.member-info dd span {
        line-height: 130%;
    }

    .bbs-form.member-info .checking + .checking {
        margin-left: 0;
    }

    .bbs-form.member-info > .dl-table > dd > input + .btn {
        width: 180px;
        margin-top: 5px;
        margin-left: 0;
    }

    .bbs-top > .bbs-btn-set > button {
        font-size: .7rem;
    }

    .modal-container.slim .report-area .search-box label {
        width: 100%;
        line-height: 20px;
    }

    .modal-container.slim .report-area .search-box input:last-child {
        width: calc(100% - 110px);
    }

    .modal-container.slim .report-area .search-box > div + div input:nth-child(2) {
        width: 100% !important;
    }

    .comparer[class*=left-pad] {
        padding-right: 30px;
    }

    .comparer[class*=left-pad] .btn-arrow-count {
        display: none;
    }

    .filter-save-list {
        width: 100%;
        right: 0;
    }
	.fr-view img.fr-dib {width: 95% !important;}

    .modal .dl-table-chubby > dd.user-date input {
        margin: 0;
    }
}

@media only all and (max-width: 380px) {
    .info-head dt:nth-child(4) {
        padding-left: 0;
    }

    .with-thumbnail.youtube .bbs-content-info .url {
        width: calc(100% - 120px);
        margin-right: 0;
    }

    .coupon.event .code-result input {
        font-size: 14px;
    }
	.fr-view img.fr-dib {width: 95% !important;}
}

@media only all and (max-width: 340px) {
    .btn-set .icon-reset, .wrapper.fixed .btn-set .icon-reset {
        width: calc(50% - 40px);
        padding: 0;
    }

    .filter-set > .btn-set > .btn-submit, .wrapper.fixed .filter-set > .btn-set > .btn-submit {
        width: calc(50% - 40px);
        padding: 0;
    }

    .sidenav-contents {
        width: 300px;
        left: -300px;
    }

    .icon-menu > li > a {
        width: 40px;
    }

    .modal-auction .caution {
        padding: 10px;
    }

    .info-area.public {
        top: 260px;
    }

    .bbs-list.report .text {
        display: flex;
        width: 100%;
        gap: .5em;
    }

    .bbs-list.report .btn {
        flex: 1;
        padding: 0;
        font-size: .9rem;
    }

    .bbs-list.report .btn::before {
        display: none;
    }
	.fr-view img.fr-dib {width: 95% !important;}
}
.apt-extnet .sub-tab ul {
    padding: 5px;
    display: flex;
    flex-flow: row wrap;
}
.apt-extnet .sub-tab li {
    position: relative;
    width: calc(12.5% + 1px);
    margin-top: -1px;
    margin-left: -1px;
    border: solid 1px #6e42d9;
    padding: 0 5px;
    line-height: 50px;
    font-family: NotoSansR;
    font-size: 14px;
    line-height: 40px;
    text-align: center;
    cursor: pointer;
    transition: .3s;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color : '#343131';
    font-weight: bold;
    border-radius: unset !important;
}
.apt-extnet .sub-tab li:nth-child(8n+1) {
    flex: none;
    border-left: solid 1px #6e42d9;
}
.apt-extnet .sub-tab li.active {
    color: #fff;
    background-color: #6e42d9;
}

@media (max-height: 860px) {
    .map-filter {
        top: 10px;
        overflow-y: auto;
    }
}