@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(https://aptgin.com/cdn/res/icon/svg/icon_tutorial1.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial1.svg) 50%/contain no-repeat;
}

.icon-tutorial2::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial2.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial2.svg) 50%/contain no-repeat;
}

.icon-tutorial3::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial3.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial3.svg) 50%/contain no-repeat;
}

.icon-tutorial4::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial4.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial4.svg) 50%/contain no-repeat;
}

.icon-tutorial5::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial5.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial5.svg) 50%/contain no-repeat;
}

.icon-tutorial6::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial6.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial6.svg) 50%/contain no-repeat;
}

.icon-tutorial7::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial7.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial7.svg) 50%/contain no-repeat;
}

.icon-tutorial8::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial8.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial8.svg) 50%/contain no-repeat;
}

.icon-tutorial9::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial9.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tutorial9.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/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/svg/icon_main_arrow.svg) 50%/50% no-repeat;
}

/*
* 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/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/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/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/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/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/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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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-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(https://aptgin.com/cdn/res/icon/svg/icon_usb_white.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/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/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;
}

/* > .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/svg/icon_up_small.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_down_small.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_equal_small.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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/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/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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/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/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/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/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/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(https://aptgin.com/cdn/res/icon/svg/icon_add.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/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/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(https://aptgin.com/cdn/res/icon/svg/icon_quastion_line.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(https://aptgin.com/cdn/res/icon/svg/icon_modal_link_white.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(https://aptgin.com/cdn/res/icon/png/star_on.png) no-repeat center center;
    cursor: pointer;
}

.star-off {
    display: inline-block;
    width: 22px;
    height: 20px;
    background: url(https://aptgin.com/cdn/res/icon/png/star.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(https://aptgin.com/cdn/res/icon/svg/icon_search_c089.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(https://aptgin.com/cdn/res/icon/svg/icon-save.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(https://aptgin.com/cdn/res/icon/svg/icon_delete.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;
}

.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(https://aptgin.com/cdn/res/icon/svg/icon-ppt.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(https://aptgin.com/cdn/res/icon/svg/icon-excel.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/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(https://aptgin.com/cdn/res/icon/svg/icon_select_down_gray.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;
}

/*
* 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/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;
}

/*
* 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(https://aptgin.com/cdn/res/icon/svg/icon_delete_white.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(https://aptgin.com/cdn/res/icon/svg/icon_delete_purple.svg);
}

.chip.purple:hover .delete {
    background-color: rgba(255, 255, 255, .3);
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_delete_white.svg);
}

.icon-reset {
    display: block;
    width: 28px;
    height: 28px;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon-reset.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(https://aptgin.com/cdn/res/icon/svg/icon_reset_white.svg);
    border-radius: 16px;
    transition-duration: 300ms;
    margin: 4px;
}

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

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_gin_purple.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(https://aptgin.com/cdn/res/icon/svg/icon-gt_c0f1.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(https://aptgin.com/cdn/res/icon/svg/icon_gin_white.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;
}

/* 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/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/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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up.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 */

/*
*  .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/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/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/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/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;
}

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

.filter-set > .filter.period > a.active > .icon-calendar {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_calendar_white.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;
}

/*
*  .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;
}

/*
*  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/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/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;
}

/*
*  .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;
}

/*
*  filter.save
*/
.filter-set > .filter.save > a {
    width: 46px;
    height: 46px;
    padding-left: 0;
    padding-right: 0;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon-save.svg);
    background-size: 16px 16px;
    background-position: center;
    background-repeat: no-repeat;
}

.filter-set > .filter.save > a.active {
    color: #fff;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_save_white.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;
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up_black.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/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(https://aptgin.com/cdn/res/icon/svg/icon_apt_6daa.svg);
}

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

.aside .filter-set > .filter.period > a > .icon-calendar {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_calendar.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(https://aptgin.com/cdn/res/icon/svg/btn_close_white.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;
}

/*
*  .filter.price
*/
#priceTxt {
    max-width: 86px;
}

/*
*  .filter.yeardiff
*/
#yeardiffTxt {
    max-width: 86px;
}

/*
*  .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.terms-pop {
    background-color: rgba(0, 0, 0, .4);
}

.terms-pop .terms-pop__panel {
    overflow: hidden;
    position: fixed;
    top: 50%;
    left: 1em;
    right: 1em;
    transform: translateY(-50%);
    display: flex;
    flex-flow: column nowrap;
    max-width: 720px;
    max-height: 90%;
    margin: 0 auto;
    padding-top: 30px;
    border-radius: 10px;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    background-color: #fff;
}

.terms-pop .terms-pop__head {
    padding: 0 1.5em .5em;
}

.terms-pop .terms-pop__head h2 {
    width: auto;
    margin: 0;
    padding: 0 0 .5em;
    border: 0;
    background: none;
    color: #333;
    text-align: center;
    line-height: 130%;
    word-break: keep-all;
}

.terms-pop .terms-pop__head .btn-history {
    display: block;
    margin: .5em auto 0;
}

.terms-pop .terms-pop__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    z-index: 3;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0;
    line-height: 0;
    color: transparent;
    transform: rotate(-45deg);
}

.terms-pop .terms-pop__close::before,
.terms-pop .terms-pop__close::after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #333;
    border-radius: 2px;
    transform: translate(-50%, -50%);
}

.terms-pop .terms-pop__close::before {
    width: 20px;
    height: 2px;
}

.terms-pop .terms-pop__close::after {
    width: 2px;
    height: 20px;
}

.terms-pop .page-area {
    flex: 1;
    height: auto;
    overflow-y: auto;
    padding: 0 1.5em 2em;
    color: #333;
}

.terms-pop .page-area h3 {
    margin-bottom: 1em;
    padding: 1em 0 0;
    background: none;
    color: #333;
    font-size: .9rem;
    text-align: left;
    line-height: 130%;
}

.terms-pop .page-area h4 {
    display: flex;
    justify-content: center;
    margin-bottom: 1em;
    padding: 8px 1.5em 5px;
    border: solid 1px #ccc;
    border-radius: 30px;
    background: none;
    color: #333;
    font-size: .8rem;
    text-align: center;
}

.terms-pop .page-area p {
    margin-bottom: .5em;
    color: #333;
    line-height: 160%;
    text-align: left;
}

.terms-pop .page-area ol,
.terms-pop .page-area ul,
.terms-pop .page-area li {
    color: #333;
}

.terms-pop .page-area .table-blue thead {
    background-color: #f2f2f2;
}

.terms-pop .page-area .table-blue th,
.terms-pop .page-area .table-blue td {
    color: #333;
    border-color: #ddd;
}

.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(https://aptgin.com/cdn/res/icon/svg/icon_delete_gray.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(https://aptgin.com/cdn/res/icon/svg/icon_report.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_report.svg) 50%/contain no-repeat;
    height: 17px;
    top: 3px;
}
.modal-container.develop-map .btn-icon::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/dev_all.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/dev_all.svg) 50%/18px no-repeat;
}
.modal-container.develop-map .btn-road::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/road.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/road.svg) 50%/18px no-repeat;
}
.modal-container.develop-map .btn-rail::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/rail.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/rail.svg) 50%/18px no-repeat;
}
.modal-container.develop-map .btn-jigu::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/jigu.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/png/rail.png) 50%/contain no-repeat;
}
.modal-container.develop-map .manual-link-list > li li a.road::after {
    background: url(https://aptgin.com/cdn/res/icon/png/road.png) 50%/contain no-repeat;
}
.modal-container.develop-map .manual-link-list > li li a.jigu::after {
    background: url(https://aptgin.com/cdn/res/icon/png/jigu.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(https://aptgin.com/cdn/res/icon/png/img_dormant_error.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_box_close.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);
}

/*
*  .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(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up.svg);
}

/*
* 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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up_black.svg);
}

.switcher-set .open-total-switcher {
    display: block;
    position: absolute;
    top: 54px;
    right: -52px;
    width: 46px;
    height: 46px;
    background-color: #fff;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_filter_341a.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(https://aptgin.com/cdn/res/icon/svg/icon_filter_on.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(https://aptgin.com/cdn/res/icon/svg/icon_reset_blod.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% + 175px);
    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% + 175px);
}

.switcher-set > .switcher:first-child > fieldset {
    width: calc(100% + 175px);
}

.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;
}

/* 단지 상세 모달의 지표 6칸 — 화면이 좁아질수록 줄마다 개수를 고르게 줄인다.
   위 @media(max-width:1199px) 에서 3개씩으로 접었고, 여기서 2개 → 1개로 더 줄인다.
   이 파일은 미디어쿼리가 브레이크포인트 순서로 정렬돼 있지 않아, 반드시 1199 블록 '뒤'에 두어야
   950px 같은 폭에서 1199 규칙(33.33%)에 밀리지 않는다. */

/*
* 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(https://aptgin.com/cdn/res/icon/svg/icon_delete_brown.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(https://aptgin.com/cdn/res/icon/svg/icon_delete_purple.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/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;
    /* 연-월 목록이 12개월(li 40px x 12 = 480px) 을 담을 수 있어야 한다.
       240px 이던 탓에 월이 5개까지만 보였다.
       자기 height 를 가진 다른 목록(areaYear 240 / lvChange 120 / 기본 210)은 영향받지 않는다. */
    max-height: 480px;
    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%;
    /* 항목 수에 맞춰 늘어나게 둔다.
       예전에는 80px 고정 + overflow:hidden 이라 **항목 2개까지만 보이고 나머지는 잘렸다**.
       스크롤바도 안 나와서 목록이 짧은 것처럼 보였다 —
       경매 유형(6개)·주택구입부담지수 분류(5개)가 실제로 이렇게 잘려 있었다.
       2개짜리(시세 데이터·시세 구분)는 auto 여도 높이가 그대로다. */
    height: auto;
    max-height: 240px;
    overflow-y: auto;
}

.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;
}

/* 연-월(-일) 목록.
   공통 ul 의 height:210px 를 그대로 받아 **12개월 중 5개만 보였다**(li 40px x 5).
   월(12개)·일(3개)은 개수가 고정이라 잘릴 이유가 없으므로 높이를 내용에 맡기고,
   항목이 많은 연도만 자기 안에서 스크롤한다.
   .dropdown-menu 가 flex(row) 라 stretch 로 세 목록의 높이가 저절로 맞는다. */
.dropdown-multi > .dropdown-menu > ul.year,
.dropdown-multi > .dropdown-menu > ul.month,
.dropdown-multi > .dropdown-menu > ul.day {
    height: auto;
    overflow-y: auto;
}

.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;
}

/* 지금 고른 항목 표시.
   liSelect 는 pre.common.js 와 각 모달이 예전부터 붙여 온 클래스인데 **CSS 가 아예 없어서**
   어느 드롭다운도 선택한 값이 어디인지 보이지 않았다.
   색은 같은 역할을 하는 .date-set button.active 와 맞춘다. */
.dropdown > .dropdown-menu > li.liSelect,
.dropdown > .dropdown-menu > li.liSelect:hover,
.dropdown-multi > .dropdown-menu > ul > li.liSelect,
.dropdown-multi > .dropdown-menu > ul > li.liSelect:hover {
    color: #712cce;
    background-color: #eae8ff;
    font-weight: 600;
}

.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;
}

/* 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;
}

/*
* 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;
}

/*
* 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);
}

/*
* 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;
}

/*
* 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 {
    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;
}

/*
* 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(https://aptgin.com/cdn/res/icon/svg/logo_ginpre_87ff.svg);
    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(https://aptgin.com/cdn/res/icon/svg/icon_clip_white.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;
}

/*
* 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;
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_filter_white.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 15px 14px;
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_full_screen.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(https://aptgin.com/cdn/res/icon/svg/icon_full_screen_exit.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 18px 18px;
    text-indent: -5000rem;
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_clip.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(https://aptgin.com/cdn/res/icon/svg/icon_full_screen.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(https://aptgin.com/cdn/res/icon/svg/icon_full_screen_exit.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);
}

/* 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);
}

/*
* 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;
}

/*
* 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;
}

/*
* 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;
}

/* 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;
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_pen.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(https://aptgin.com/cdn/res/icon/png/icon_board_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_bullhorn_st1.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;
}

/* 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;
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_profile_47b8.svg);
}

.bbs-content-info .visited:before {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_eye.svg);
}

.bbs-content-info .comment:before {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_message_gray.svg);
}

.bbs-content-info .lock:before {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_lock_dd85.svg);
}

.bbs-content-info .reply-no {
    color: #00bcd4;
}

.bbs-content-info .reply-no:before {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_reply_no.svg);
}

.bbs-content-info .reply-ed:before {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_reply_ed.svg);
}

.bbs-content-info .won::before {
    background-color: #7e81a6;
    mask: url(https://aptgin.com/cdn/res/icon/svg/won-sign-solid_4716.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/won-sign-solid_4716.svg) 50%/contain no-repeat;
}

.bbs-content-info .unconfirmed::before {
    background-color: #7e81a6;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_unconfirmed.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_unconfirmed.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;;
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_pagination_first.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(https://aptgin.com/cdn/res/icon/svg/icon_pagination_prev.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(https://aptgin.com/cdn/res/icon/svg/icon_pagination_next.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(https://aptgin.com/cdn/res/icon/svg/icon_pagination_last.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;
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_facebook.svg);
}

.sns-list-box > .twitter > .icon-twitter {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_twitter.svg);
}

.sns-list-box > .kakao > .icon-kakao {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_kakao.svg);
}

.sns-list-box > .naver > .icon-naver {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_naver.svg);
}

.sns-list-box > .band > .icon-band {
    width: 24px;
    height: 24px;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_band.svg);
}

.sns-list-box > .blog > .icon-blog {
    width: 30px;
    height: 30px;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_blog.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(https://aptgin.com/cdn/res/icon/png/bg_no_access.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(https://aptgin.com/cdn/res/icon/png/bg_no_posts.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;
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_clip.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(https://aptgin.com/cdn/res/icon/svg/icon_clip_white.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(https://aptgin.com/cdn/res/icon/png/icon_board_arrow_prev.png);
}

.bbs-page-move > li > a.prev.none:before {
    display: none;
}

.bbs-page-move > li > a.next:before {
    right: 20px;
    background-image: url(https://aptgin.com/cdn/res/icon/png/icon_board_arrow.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;
}

/*
* 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;
}

/* 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;
}

/*
* bbs-cafe
*/
.cafe-list-wrap {
    margin-bottom: 20px;
}

.cafe-list-wrap > h4 {
    height: 39px;
    background-image: url(https://aptgin.com/cdn/res/icon/png/text_cafe_list.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_black_prev.svg)
}

.cafe-list > label.next {
    right: 0;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow_black_next.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_gray_prev.svg)
}

#cafe_li_02:checked ~ label.next {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow_gray_next.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;
}

/* 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/svg/icon_my_account.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_my_account.svg) 50%/contain no-repeat;
}

.my-region-list::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fav_lawd.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fav_lawd.svg) 50%/contain no-repeat;
}

.my-region-group::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fav_lawd_multi.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fav_lawd_multi.svg) 50%/contain no-repeat;
}

.my-apt-list::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fav_apt.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fav_apt.svg) 50%/contain no-repeat;
}

.my-apt-group::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fav_apt_multi.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fav_apt_multi.svg) 50%/contain no-repeat;
}

.my-save-list::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_save.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_save.svg) 50%/contain no-repeat;
}

.source-info::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_source.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_source.svg) 50%/contain no-repeat;
}

.menu-info::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_menu.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_menu.svg) 50%/contain no-repeat;
}

.gov-policy-list::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_policy.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_policy.svg) 50%/contain no-repeat;
}

.manual-list:before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_manual_list.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_manual_list.svg) 50%/contain no-repeat;
}

.decrepit-list:before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_decrepit_list.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_decrepit_list.svg) 50%/contain no-repeat;
}

.glossary-info:before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_glossary.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_glossary.svg) 50%/contain no-repeat;
}

.recommended-by-gin:before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_recommended.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_recommended.svg) 50%/contain no-repeat;
}
.my-auction-list:before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_judge.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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;
}

/*
* 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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_left.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_right.svg);
}

.sidenav-contents > div {
    height: 100%;
}

/* 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(https://aptgin.com/cdn/res/icon/static/avatar_bg_male.png);
}

.account-box.female {
    background-image: url(https://aptgin.com/cdn/res/icon/static/avatar_bg_female.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(https://aptgin.com/cdn/res/icon/svg/icon_pen.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;
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_right.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;
}

/* 모두 접기 / 모두 펼치기. 전체삭제 왼쪽에 두고, 항목의 여닫힘과 같은 꺽쇠를 쓴다 */
.title-box > .icon-fold {
    display: inline-block;
    position: absolute;
    right: 106px;
    padding: 0;
    border: 0;
    background: none;
    font-size: 13px;
    transition: .3s;
    cursor: pointer;
}

.title-box > .icon-fold::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 7px;
    margin-right: 4px;
    vertical-align: 3px;
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up_black.svg) no-repeat center;
    background-size: 12px 7px;
}

.title-box > .icon-fold.closed::before {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg);
}

/* 전체삭제가 없는 목록(정비사업 노후도 등)에서는 그 자리에 붙인다 */
.title-box > .icon-fold:last-child {
    right: 20px;
}

.title-box > .icon-fold: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/svg/icon_pin_solid.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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);
}

/* 관심지역·지역비교·관심단지·단지비교는 위쪽 검색·선택 영역 높이가 서로 달라서,
   위 공용 규칙처럼 220px 을 고정으로 빼면 목록이 화면 아래로 삐져나간다
   (관심단지는 선택 줄이 세 줄이라 92px 넘쳤다). 남는 높이를 그대로 쓰게 한다 */
.sidenav-contents > #region-list,
.sidenav-contents > #region-group,
.sidenav-contents > #apt-list,
.sidenav-contents > #apt-group {
    display: flex;
    flex-direction: column;
}

.sidenav-contents > #region-list > .scroll-area,
.sidenav-contents > #region-group > .scroll-area,
.sidenav-contents > #apt-list > .scroll-area,
.sidenav-contents > #apt-group > .scroll-area {
    flex: 1 1 auto;
    height: auto;
    /* flex 항목은 내용 높이 아래로 줄지 않는 게 기본이라, 풀어 줘야 스크롤이 생긴다 */
    min-height: 0;
}

/* 맨 끝까지 내렸을 때 마지막 항목이 화면 바닥에 붙지 않도록 늘 빈 자리를 남긴다 */
.sidenav-contents > #region-list .scroll-area > ul,
.sidenav-contents > #region-group .scroll-area > ul,
.sidenav-contents > #apt-list .scroll-area > ul,
.sidenav-contents > #apt-group .scroll-area > ul {
    padding-bottom: 120px;
}

.sidenav-contents > div .scroll-area::-webkit-scrollbar {
    width: 0px;
    background: transparent;
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_plus.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(https://aptgin.com/cdn/res/icon/svg/sidenav_pin.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_search_c089.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(https://aptgin.com/cdn/res/icon/svg/icon_search_c089.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(https://aptgin.com/cdn/res/icon/svg/icon_pen.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_pen.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up_black.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up_black.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);
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up_black.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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;
}

/* 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;
}

/* 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;
}

/* 버튼은 네 칸씩 놓이는데, 오른쪽 끝 칸(3번째)의 목록을 여느 때처럼 버튼 오른쪽에 펼치면
   사이드바 밖으로 나가 잘린다. 목록이 들어 있는 상자가 가로 넘침을 잘라 버리기 때문이다
   (.scroll-area 의 overflow-x: hidden). 실제로 '매물추이·반경비교·매물보기' 의 목록에서
   세대수가 안 보였다. 그 칸만 버튼 왼쪽에 펼쳐 안쪽에 들어오게 하고, 말풍선 꼬리도 뒤집는다.
   네 번째 칸에는 목록이 달린 버튼이 없어 대상이 아니다. */
.sidenav-contents .quick-btns > li:nth-child(4n+3) > .apt-extent-ul,
.sidenav-contents .quick-btns-group > li:nth-child(4n+3) > .apt-extent-ul {
    left: auto;
    right: 100%;
    margin-right: 14px !important;
}

.sidenav-contents .quick-btns > li:nth-child(4n+3) > .apt-extent-ul::after,
.sidenav-contents .quick-btns-group > li:nth-child(4n+3) > .apt-extent-ul::after {
    left: auto;
    right: -14px;
    border-right: 7px solid transparent;
    border-left: 7px solid #fff;
}

.sidenav-contents .quick-btns > li:nth-child(4n+3) > .apt-extent-ul::before,
.sidenav-contents .quick-btns-group > li:nth-child(4n+3) > .apt-extent-ul::before {
    left: auto;
    right: -16px;
    border-right: 7px solid transparent;
    border-left: 7px solid #ddd;
}

.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/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/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(https://aptgin.com/cdn/res/icon/png/bg_not_found_01.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(https://aptgin.com/cdn/res/icon/png/bg_selected_01.png);
    background-repeat: no-repeat;
    background-size: 590px 360px;
    background-position: center;
}

.hero.not-found2:before {
    background-image: url(https://aptgin.com/cdn/res/icon/png/bg_not_found_03.png);
}

/* 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(https://aptgin.com/cdn/res/icon/svg/icon_hero_prev.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(https://aptgin.com/cdn/res/icon/svg/icon_hero_next.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(https://aptgin.com/cdn/res/icon/svg/icon_heroes_pin.svg);
    background-repeat: no-repeat;
    background-position: center;
}

.heroine .heroes-head .group-name:before {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_heroine_pin.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/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;
}

/* 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(https://aptgin.com/cdn/res/icon/png/btn_collapsed.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(https://aptgin.com/cdn/res/icon/svg/icon_up.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(https://aptgin.com/cdn/res/icon/svg/icon_down.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);
}

/*
* 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(https://aptgin.com/cdn/res/icon/png/bg_not_found_02.png);
    background-repeat: no-repeat;
    background-size: 590px 360px;
    background-position: center;
}

.heroine.not-found2:before {
    background-image: url(https://aptgin.com/cdn/res/icon/png/bg_not_found_04.png);
}

.heroine.selected:before {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block;
    content: '';
    width: 100%;
    height: 360px;
    background-image: url(https://aptgin.com/cdn/res/icon/png/bg_selected_02.png);
    background-repeat: no-repeat;
    background-size: 590px 360px;
    background-position: center;
}

/* 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(https://aptgin.com/cdn/res/icon/png/btn_collapsed.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/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/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(https://aptgin.com/cdn/res/icon/svg/icon_radius_17x17.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/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(https://aptgin.com/cdn/res/icon/svg/icon_information_16x16.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(https://aptgin.com/cdn/res/icon/svg/icon_apartment_16x16.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(https://aptgin.com/cdn/res/icon/png/apt-info-01.png) no-repeat center;
}

.apt-detail .apt-feature > li:nth-child(2):before {
    background: url(https://aptgin.com/cdn/res/icon/png/apt-info-02.png) no-repeat center;
}

.apt-detail .apt-feature > li:nth-child(3):before {
    background: url(https://aptgin.com/cdn/res/icon/png/apt-info-03.png) no-repeat center;
}

.apt-detail .apt-feature > li:nth-child(4):before {
    background: url(https://aptgin.com/cdn/res/icon/png/apt-info-04.png) no-repeat center;
}

.apt-detail .apt-feature > li:nth-child(5):before {
    background: url(https://aptgin.com/cdn/res/icon/png/apt-info-05.png) no-repeat center;
}

.apt-detail .apt-feature > li:nth-child(6):before {
    background: url(https://aptgin.com/cdn/res/icon/png/apt-info-06.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);
}

/*
* 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(https://aptgin.com/cdn/res/icon/svg/icon_width_max_grey.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(https://aptgin.com/cdn/res/icon/svg/icon_width_min_grey.svg);
}

.card-title > .right > .close {
    text-indent: -5000rem;
    width: 20px;
    height: 20px;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_delete_gray.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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;
}

/*
* 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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_right.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_left.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(https://aptgin.com/cdn/res/icon/svg/square_btn_01.svg);
}

.btn-square-set > button:hover.map-be-built:before {
    background: url(https://aptgin.com/cdn/res/icon/svg/square_btn_01_on.svg);
}

.btn-square-set > button.map-around:before {
    background: url(https://aptgin.com/cdn/res/icon/svg/square_btn_02.svg);
}

.btn-square-set > button:hover.map-around:before {
    background: url(https://aptgin.com/cdn/res/icon/svg/square_btn_02_on.svg);
}

.btn-square-set > button.link-naver:before {
    background: url(https://aptgin.com/cdn/res/icon/svg/square_btn_03.svg);
}

.btn-square-set > button:hover.link-naver:before {
    background: url(https://aptgin.com/cdn/res/icon/svg/square_btn_03_on.svg);
}

.btn-square-set > button.map-radius:before {
    background: url(https://aptgin.com/cdn/res/icon/svg/square_btn_04.svg);
}

.btn-square-set > button:hover.map-radius:before {
    background: url(https://aptgin.com/cdn/res/icon/svg/square_btn_04_on.svg);
}

.btn-square-set > button.map-chart:before {
    background-color: #3c3c3c;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_chart_pre.svg) 50%/contain no-repeat;
}

.btn-square-set > button:hover.map-chart:before {
    background-color: #8934fa;
}

/*
* 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;
}

/* 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;
}

/* 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;
}

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(https://aptgin.com/cdn/res/icon/svg/icon_refresh_fbf7.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(https://aptgin.com/cdn/res/icon/svg/icon_pw.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_up_gray.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(https://aptgin.com/cdn/res/icon/svg/icon_alarm.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_alarm.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(https://aptgin.com/cdn/res/icon/svg/icon_alarm_on.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_alarm_on.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/svg/icon_invest_mng.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_invest_mng.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_kakao.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/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/svg/icon_grid_pre.svg);}
.chart-type button[data-value="C"]{background-image:url(https://aptgin.com/cdn/res/icon/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/svg/icon_grid_white.svg);}
.chart-type button.active[data-value="C"]{background-image:url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_loc_all.svg);
}

.icon-loc-11::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_su.svg);
}

.icon-loc-26::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_bs.svg);
}

.icon-loc-27::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_dg.svg);
}

.icon-loc-28::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_ic.svg);
}

.icon-loc-29::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_gj.svg);
}

.icon-loc-30::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_dj.svg);
}

.icon-loc-31::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_us.svg);
}

.icon-loc-36::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_sj.svg);
}

.icon-loc-41::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_gg.svg);
}

.icon-loc-42::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_gw.svg);
}

.icon-loc-43::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_cb.svg);
}

.icon-loc-44::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_cn.svg);
}

.icon-loc-45::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_jb.svg);
}

.icon-loc-46::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_jn.svg);
}

.icon-loc-47::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_gb.svg);
}

.icon-loc-48::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_gn.svg);
}

.icon-loc-50::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_jj.svg);
}

.icon-loc-all.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_all_on.svg);
}

.icon-loc-11.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_su_on.svg);
}

.icon-loc-26.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_bs_on.svg);
}

.icon-loc-27.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_dg_on.svg);
}

.icon-loc-28.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_ic_on.svg);
}

.icon-loc-29.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_gj_on.svg);
}

.icon-loc-30.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_dj_on.svg);
}

.icon-loc-31.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_us_on.svg);
}

.icon-loc-36.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_sj.svg);
}

.icon-loc-41.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_gg_on.svg);
}

.icon-loc-42.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_gw_on.svg);
}

.icon-loc-43.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_cb_on.svg);
}

.icon-loc-44.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_cn_on.svg);
}

.icon-loc-45.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_jb_on.svg);
}

.icon-loc-46.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_jn_on.svg);
}

.icon-loc-47.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_gb_on.svg);
}

.icon-loc-48.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_gn_on.svg);
}

.icon-loc-50.active::before {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_loc_jj_on.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;
}

.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;
}


/* 「인증번호 발송」 앞이 휴대전화 행보다 5px 넓던 것 (2026-09-02 사용자 지적: 앞에 공간이 생긴다).
   @gmail.com span 의 margin-right 5px 에 버튼의 margin-left 10px 가 더해져 15px 가 됐다.
   휴대전화는 앞이 input(여백 0)이라 10px 그대로였다.
   ⚠ 버튼 쪽은 건드리지 않는다 — 그 10px 는 .btn-purple 자체에 걸려 있어 다른 화면까지 바뀐다.
      span + button 으로도 안 잡힌다(사이에 숨은 「이메일 변경」 버튼이 형제로 끼어 있다).
      그래서 이 행의 span 여백만 없앤다. 휴대전화의 「-」 구분자는 .phone 이라 해당 없다. */
.bbs-form.info > .dl-table > dd.security:not(.phone) > span,
.bbs-form.member-info > .dl-table > dd.security:not(.phone) > span {
    margin-right: 0;
}
/* 줄이 바뀌면 위에 딱 붙던 것 (2026-09-02 사용자 지적).
   인증 버튼(「인증번호 발송」·「취소」)이 좁은 폭에서 아랫줄로 내려가는데 세로 간격이 0 이었다.
   ⚠ row-gap 은 **줄바꿈될 때만** 작동한다 — 한 줄로 들어가는 행에는 아무 영향이 없어
      dd 전체에 걸어도 안전하다. 실측으로 확인했다.
   ⚠ dd.e-mail 은 아래에서 .5em 으로 따로 잡는다(더 구체적이라 이 규칙을 덮는다). */
.bbs-form.info > .dl-table > dd,
.bbs-form.member-info > .dl-table > dd {
    row-gap: 5px;
}
/* 이메일 칸이 줄바꿈될 때의 정렬·간격 (2026-09-02 사용자 지적).
   도메인 고르기 칸이 새로 생기면서 한 줄에 다 안 들어가는 폭이 생겼는데,
   그때 ① 위 줄에 딱 붙고 ② 앞칸보다 10px 오른쪽으로 밀려 시작했다.
   ⚠ 위 input + .dropdown 의 margin-left:10px 를 column-gap 으로 옮긴다 —
      margin 은 줄이 바뀌어도 남지만 column-gap 은 같은 줄일 때만 벌린다.
   ⚠ row-gap 은 한 줄일 때 아무 영향이 없다. 줄바꿈될 때만 세로 간격이 된다. */
.bbs-form.info > .dl-table > dd.e-mail,
.bbs-form.member-info > .dl-table > dd.e-mail {
    /* ⚠ 5px 다. 10px 로 뒀더니 @ 좌우가 5px → 15px 로 벌어졌다 —
          .bbs-form.info dd > span 의 margin 0 5px 위에 gap 이 더해지기 때문이다.
          그래서 아래에서 그 span 여백을 0 으로 두고 gap 하나로만 벌린다. */
    column-gap: 5px;
    row-gap: .5em;
}

.bbs-form.info > .dl-table > dd.e-mail > span,
.bbs-form.member-info > .dl-table > dd.e-mail > span {
    margin-left: 0;
    margin-right: 0;
}

.bbs-form.info > .dl-table > dd.e-mail > input + .dropdown,
.bbs-form.member-info > .dl-table > dd.e-mail > input + .dropdown {
    margin-left: 0;
}
.bbs-form.info > .dl-table > dd .btn + .btn {
    margin-left: 10px;
}

/* 인증 버튼 묶음 — 데스크톱에서는 **없는 것과 같다.**
   좁은 폭에서만 의미를 갖는다(pre.responsive.css 740px 블록).
   ⚠ display:contents 라 이 div 자신에게는 폭·여백을 걸 수 없다 — 자식 버튼이 dd 의 직접 항목처럼 배치된다. */
.bbs-form.info > .dl-table > dd.security > .auth-btns {
    display: contents;
}

/* 프리미엄 마이페이지의 변경 버튼은 입력 영역과 10px 간격을 둔다. */
@media only all and (min-width: 741px) {
    .bbs-form.info > .dl-table > dd.security.phone > .auth-btns > #telChange,
    .bbs-form.info > .dl-table > dd.security:not(.phone) > .auth-btns > #mailChange {
        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;
}

/* ⚠ column-gap 은 「기본 e-mail로 등록하기」와 「* 교육신청 이메일에만 적용됩니다.」 사이 간격이다
      (2026-09-01 사용자 지시 「프리미엄 마이페이지에도 같이 적용해」).
      1199px 이하에서 .bbs-form.info dd .tips{margin-left:0}(pre.responsive.css:2515)이 데스크톱의
      30px 을 지워 둘이 간격 0 으로 붙는다. 부동산지인 쪽도 같은 원인이었다(home.responsive.css).
      ⚠ margin 이 아니라 gap 인 이유 — 폭이 좁아 안내문구가 다음 줄로 내려가면 margin 은 그대로
         들여쓰기로 남아 체크박스와 왼쪽 줄이 어긋난다. gap 은 같은 줄에만 걸린다. */
.bbs-form.info dd.security .notes {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    column-gap: 10px;
    position: absolute;
    bottom: 5px;
    left: 20px;
}

.icon-change-own::before {
    background-color: #fff;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_exchange.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_exchange.svg) 50%/16px no-repeat;
}

.btn-delete::before {
    vertical-align: -3px;
    background-color: #fff;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_delete.svg) 50%/12px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_delete.svg) 50%/12px no-repeat;
}

.connect-sns button {
    width: 200px;
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    opacity: .5;
    /* 안내 문구까지 같은 줄을 차지하면 버튼이 밀려 글자가 두 줄로 끊긴다. */
    flex: 0 0 auto;
    white-space: nowrap;
}

/* 안내 문구는 버튼 옆이 아니라 다음 줄에 한 줄로 놓는다. */
.connect-sns > .word-tip {
    flex: 0 0 100%;
    margin-top: 8px;
}

.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;
}

/* 버튼 사이 간격은 gap 으로 준다 (2026-09-01 사용자 지시)
   ⚠ 전에는 .connect-sns button+button{margin-left:10px} 하나였다. 그러면 폭이 좁아 4개가 2×2 로
      접힐 때 **둘째 줄 첫 버튼까지 10px 밀려** 윗줄과 왼쪽 줄이 어긋나고, 세로 간격을 주는 규칙은
      599px 이하에만 있어(pre.responsive.css:3435) 600~740px 구간은 줄 사이가 0 이라 붙어 보였다
      (사용자 화면 702px). column-gap 은 같은 줄에만, row-gap 은 줄 사이에만 걸려 둘 다 해결된다. */
.connect-sns {
    column-gap: 10px;
    row-gap: 5px;
}

.connect-sns button + button {
    margin-left: 0;
}

/* ⚠ 위 .connect-sns button+button 만으로는 부족하다 (2026-09-01).
      .bbs-form.info > .dl-table > dd .btn + .btn{margin-left:10px}(같은 파일 위쪽)이 명시도 (0,5,1) 로
      (0,1,2) 인 그 규칙을 이겨, 4개가 2×2 로 접힐 때 **둘째 줄 첫 버튼까지 10px 밀렸다**
      (실측 1000·800px — 윗줄 x=20 vs 아랫줄 x=30). 같은 형태로 (0,6,1) 을 만들어 되돌린다.
      간격은 .connect-sns 의 column-gap/row-gap 이 대신한다 — gap 은 줄바꿈된 첫 요소를 밀지 않는다. */
.bbs-form.info > .dl-table > dd.connect-sns .btn + .btn {
    margin-left: 0;
}

/* 「비밀번호 변경 시 입력해 주세요.」 처럼 입력칸과 **같은 줄**에 오는 안내문구의 간격 (2026-09-01 사용자 지적 「붙어 있어」)
   1199px 이하에서 .bbs-form.info dd .tips{margin-left:0}(pre.responsive.css:2515)이 데스크톱 값을 지워
   입력칸 오른쪽 끝과 안내문구 왼쪽이 정확히 같아졌다(실측 800px — 둘 다 200).
   ⚠ input 바로 뒤 tips 에만 준다 — 「* 임시 비밀번호 발급 시…」처럼 다음 줄로 내려가는 tips 는
      왼쪽을 입력칸에 맞춰야 하므로 간격을 주면 안 된다(실측 x=20 으로 이미 정렬돼 있다). */
.bbs-form.info > .dl-table > dd > input + .tips {
    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/svg/icon_naver.svg);
}

/* 카카오는 브랜드 규정대로 노란 바탕에 검은 심볼·글자를 쓴다. */
.connect-sns .link-kakao {
    color: #000;
    background-color: #fee500;
}

/* 아이콘 svg 가 흰색 단색이라 노란 바탕에서는 보이지 않는다. filter 로 검게 만든다. */
.connect-sns .link-kakao::before {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_kakao.svg);
    filter: brightness(0);
}

.connect-sns .link-kakao:hover, .connect-sns .link-kakao:focus {
    color: #000;
}

.connect-sns .link-apple {
    background-color: #000;
}

/* 네이버·카카오와 같이 단색 svg 를 쓴다. 원형 png 는 버튼 배경색 위에 흰 원이 겹쳐 보였다. */
.connect-sns .link-apple::before {
    width: 14px;
    height: 14px;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_apple.svg);
}

.connect-sns .link-google {
    color: #333;
    background-color: #fff;
    border: 1px solid #e0e0e0;
}

/* 구글 버튼만 배경이 흰색이라 로고도 브랜드 4색 그대로 쓴다. */
.connect-sns .link-google::before {
    width: 14px;
    height: 14px;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_google_color.svg);
}

.connect-sns .link-google:hover, .connect-sns .link-google:focus {
    color: #333;
}

.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/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(https://aptgin.com/cdn/res/icon/svg/icon_mobile.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_mobile.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(https://aptgin.com/cdn/res/icon/svg/icon_check_31d5.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_check_31d5.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(https://aptgin.com/cdn/res/icon/svg/icon_tip.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tip.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(https://aptgin.com/cdn/res/icon/svg/icon_delete_white.svg);
}

/* input 달력 아이콘  */
input[data-date-type] {
    width: 130px;
    padding-left: 26px;
    background: #fff url(https://aptgin.com/cdn/res/icon/svg/icon_calendar.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/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_grid_pre.svg) 50%/17px no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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/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/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(https://aptgin.com/cdn/res/icon/svg/icon_compare_purple2.svg) 50% 50%/contain no-repeat;
}

.icon-change {
    background-color: #8934fa;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_exchange.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_exchange.svg) 50%/16px no-repeat;
}

.icon-delete-blue {
    width: 20px;
    height: 20px;
    text-indent: -9999px;
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_delete_blue.svg) 50% 50%/contain no-repeat;
}

.icon-into-map {
    width: 16px;
    height: 16px;
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_into_map.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(https://aptgin.com/cdn/res/icon/svg/icon_zigbang.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/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/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/svg/icon_share.svg) 50%/14px no-repeat;
    -webkit-mask:url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_group_save.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(https://aptgin.com/cdn/res/icon/svg/icon_group_save_purple.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(https://aptgin.com/cdn/res/icon/svg/icon-gt_c0f1.svg) 50%/50% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon-gt_c0f1.svg) 50%/50% no-repeat;
    background-color: #8088d2;
}

.icon-detail {
    width: 22px;
    height: 22px;
    text-indent: -9999px;
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_detail.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_down_white.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/gif/bg_logo.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/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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_up_purple.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.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(https://aptgin.com/cdn/res/icon/svg/icon_fit.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fit.svg) 50%/contain no-repeat;
}

.btn-hide::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_hide.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_hide.svg) 50%/contain no-repeat;
}

.btn-scale1::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_scale1.svg) 50%/22px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_scale1.svg) 50%/22px no-repeat;
}

.btn-scale2::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_scale2.svg) 50%/22px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_scale2.svg) 50%/22px no-repeat;
}

.btn-scale3::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_scale3.svg) 50%/22px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_scale3.svg) 50%/22px no-repeat;
}

.btn-map-apt::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_apt.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_apt.svg) 50%/16px no-repeat;
}

.btn-map::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_pin_pre_17x17.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_pin_pre_17x17.svg) 50%/18px no-repeat;
}

.btn-land::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_land.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_land.svg) 50%/contain no-repeat;
}

.btn-airplane::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_airplane.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_airplane.svg) 50%/17px no-repeat;
}

.btn-street::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_cam.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_cam.svg) 50%/18px no-repeat;
}

.btn-house::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_house.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_house.svg) 50%/17px no-repeat;
}

.btn-school::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_cho.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_cho.svg) 50%/contain no-repeat;
}

.btn-subway::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_subway.svg) 50%/14px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_subway.svg) 50%/14px no-repeat;
}

.btn-bus::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_bus.svg) 50%/14px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_bus.svg) 50%/14px no-repeat;
}

.btn-job::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_job.svg) 50%/14px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_job.svg) 50%/18px no-repeat;
}

.btn-shop::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_shop.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_shop.svg) 50%/18px no-repeat;
}

.btn-academy::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_book.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_book.svg) 50%/18px no-repeat;
}

.btn-mart::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_cart.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_cart.svg) 50%/18px no-repeat;
}

.btn-hospital::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_hospital_d4a8.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_hospital_d4a8.svg) 50%/16px no-repeat;
}

.btn-cafe::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_cup.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_cup.svg) 50%/18px no-repeat;
}

.btn-store::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_store_6e1f.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_store_6e1f.svg) 50%/18px no-repeat;
}

.btn-bank::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/won-sign-solid_4716.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/won-sign-solid_4716.svg) 50%/18px no-repeat;
}

.btn-gas::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_gas.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_gas.svg) 50%/18px no-repeat;
}

.btn-refresh::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_rotate.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_rotate.svg) 50%/18px no-repeat;
}

.btn-gps::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_gps.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_gps.svg) 50%/18px no-repeat;
}

.btn-dev-all::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/dev_all.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/dev_all.svg) 50%/18px no-repeat;
}

.btn-dev-rail::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/rail.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/rail.svg) 50%/18px no-repeat;
}

.btn-dev-road::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/road.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/road.svg) 50%/18px no-repeat;
}

.btn-dev-jigu::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/jigu.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/jigu.svg) 50%/18px no-repeat;
}

.btn-mountain::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/mountain.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/mountain.svg) 50%/contain no-repeat;
}

.btn-around::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_around.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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;
}

.btn-map-normal::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_normal.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_normal.svg) 50%/18px no-repeat;
}

.btn-map-fire::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fire.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fire.svg) 50%/contain no-repeat;
}

.btn-map-filter::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_filter.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_filter.svg) 50%/contain no-repeat;
}

.btn-apt-filter::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_apt.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_apt.svg) 50%/16px no-repeat;
}

.btn-distance {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_distance.svg);
}

.btn-distance.active {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_distance_white.svg);
}

.btn-directions {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_directions.svg);
    background-size: auto 16px !important;
}

.btn-directions.active {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_directions_white.svg);
}

.btn-radius {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_radius.svg);
}

.btn-radius.active {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_radius_white.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/svg/symbol_gin_white.svg) 50% 45%/80% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_up_purple.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(https://aptgin.com/cdn/res/icon/svg/icon_box_close.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(https://aptgin.com/cdn/res/icon/svg/icon_loc_sale.svg);
}

.icon-household::before {
    top: 0;
    left: 0;
    width: 55px;
    height: 50px;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_household.svg);
}

.icon-completion::before {
    top: 0;
    left: 0;
    width: 55px;
    height: 50px;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_completion.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(https://aptgin.com/cdn/res/icon/svg/icon_symbol_white.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_down_white.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/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(https://aptgin.com/cdn/res/icon/svg/icon_subway_white.svg);
}

.map-pin.bus::after {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_bus_white.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(https://aptgin.com/cdn/res/icon/svg/icon_cho.svg);
}

.meter.cho::before {
    background-color: #ffc333;
}

.meter.subway span {
    border-color: #d968f1;
    color: #d968f1;
}

.meter.subway span::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_subway.svg) no-repeat 50% 50%;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_subway.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(https://aptgin.com/cdn/res/icon/svg/icon_bus.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(https://aptgin.com/cdn/res/icon/svg/icon_radius_red.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(https://aptgin.com/cdn/res/icon/svg/marker_bt_gray.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(https://aptgin.com/cdn/res/icon/svg/marker_bt_brown.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(https://aptgin.com/cdn/res/icon/svg/marker_bt_purple.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(https://aptgin.com/cdn/res/icon/svg/marker_bt_blue.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(https://aptgin.com/cdn/res/icon/svg/marker_bt_green.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(https://aptgin.com/cdn/res/icon/svg/marker_bt_yellow.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(https://aptgin.com/cdn/res/icon/svg/marker_bt_lightgray.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up.svg);
}

.map-pin.apt.option > .option-bt span::after {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up_black.svg);
}

.map-pin.apt.option > .option-top span.down::after, .marker-legend .btn-year.down::after {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow_down_white.svg);
}

.map-pin.apt.option > .option-bt span.down::after {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_down_white.svg);
}

.marker-legend .btn-year::after, .marker-legend .btn-legend.down::after {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up.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(https://aptgin.com/cdn/res/icon/png/icon_marker_legend.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(https://aptgin.com/cdn/res/icon/png/map_legend_border.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(https://aptgin.com/cdn/res/icon/svg/icon_users.svg);
    mask-image: url(https://aptgin.com/cdn/res/icon/svg/icon_users.svg);
}

i.icon-home {
    -webkit-mask-image: url(https://aptgin.com/cdn/res/icon/svg/icon_home.svg);
    mask-image: url(https://aptgin.com/cdn/res/icon/svg/icon_home.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(https://aptgin.com/cdn/res/icon/svg/icon_box_close.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_box_close.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/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/svg/icon_outline_bus.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_exchange.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_exchange.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(https://aptgin.com/cdn/res/icon/svg/icon_box_close.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(https://aptgin.com/cdn/res/icon/png/img_dormant_error.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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;
}

/* 기본 이미지는 데이터가 없을 때만(.is-empty) 보인다 — 로딩 중에 이미지와 겹쳐 보이는 것을 막는다 */
.map-right .chart-area.is-empty {
    background: url(https://aptgin.com/cdn/res/icon/svg/icon_chart_pre.svg) 50%/100px no-repeat;
}

/* 영역 로딩(reverse) 브랜드 색 — 구조는 res/css/all.common.css.
   프리미엄 지도 레이아웃(templates/layouts/map/css.html)은 pre.map.css 를 읽지 않으므로
   여기에 둔다. pre.map.css 에 두면 pre.common.css 의 전체 로딩 스타일(흰 글자·흰 테두리)이
   그대로 남아 흰 배경에 아무것도 안 보인다. */
.area-loading.reverse .loading-inner::before {
    background-color: #8934fa;
}
.area-loading.reverse .loading-img {
    border-color: #e2d6fb;
    border-right-color: #8934fa;
}
/* 프리미엄 지도에는 GmarketSansM(무료 지도의 home.common.css 에서 정의) 폰트가 없어 기본 글꼴로
   렌더된다. 폰트가 다른 건 그대로 두고, 밋밋해 보이지 않도록 두께만 준다. */
.area-loading.reverse .loading-text {
    color: #673ab7;
    font-weight: 600;
}
/* 데이터 없음(.is-empty) 문구 브랜드 색 */
.map-right .chart-area.is-empty::after,
.traffic-box.subway .chart-area.is-empty::after {
    color: #673ab7;
    font-weight: 600;
}

.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_map_filter.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_filter.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_calendar.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    transform: translate(-50%, -50%) rotate(90deg);
}

.map-info .sub-tab .btn-next::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_calendar.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/svg/icon_chart_pre.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_grid_pre.svg) 50%/17px no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_history.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_history.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(https://aptgin.com/cdn/res/icon/svg/icon_download.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_download.svg) 50%/contain no-repeat;
}

.icon-popup::after {
    content: "";
    margin-left: 5px;
    background-color: #fff;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_up.svg);
}

.fall::before {
    content: "";
    vertical-align: -2px;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_down.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 {
    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/svg/icon_my_account.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_my_account.svg) 50%/contain no-repeat;
}

.population-info .icon-family::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fav_apt_multi.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_fav_apt_multi.svg) 50%/contain no-repeat;
}

.population-info .icon-apt::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_apt.svg) 50%/80% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_apt.svg) 50%/80% no-repeat;
}

.population-info .icon-shop::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_apt_6daa.svg) 50%/95% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_apt_6daa.svg) 50%/95% no-repeat;
}

.population-info .icon-member::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_member.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_member.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(https://aptgin.com/cdn/res/icon/svg/icon_calendar.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_calendar.svg) 50%/contain no-repeat;
}

.icon-summer::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_sun.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_sun.svg) 50%/contain no-repeat;
}

.icon-winter::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_snow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_snow.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/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_map_apt.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_exchange.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_exchange.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(https://aptgin.com/cdn/res/icon/svg/icon_share_32a7.svg) 50%/70% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_share_32a7.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(https://aptgin.com/cdn/res/icon/svg/icon_box_close.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_box_close.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/no_data.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/no_data.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(https://aptgin.com/cdn/res/icon/svg/icon_edit.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_edit.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;
}

@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(https://aptgin.com/cdn/res/icon/svg/icon_subway_white.svg);
}

.info-detail > dl.bus::before {
    content: "";
    background-color: #5f9dd5;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_bus_white.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/svg/icon_map_apt.svg) 50%/45% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_map_apt.svg) 50%/45% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/png/mart_1.png);
    background-size: 90%;
}

.info-detail > dl.mart.small::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/mart_0.png);
    background-size: 90%;
}

.info-detail > dl.store::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/convenience_1.png);
    background-size: 90%;
}

.info-detail > dl.bank::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/bank_i.png);
    background-size: 90%;
}

.info-detail > dl.bank.atm::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/bank_o.png);
    background-size: 90%;
}

.info-detail > dl.park::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/park.png);
    background-size: 90%;
}

.info-detail > dl.public.office1::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/office_1.png);
    background-size: 90%;
}
.info-detail > dl.public.office2::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/office_2.png);
    background-size: 90%;
}
.info-detail > dl.public.office3::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/office_3.png);
    background-size: 90%;
}
.info-detail > dl.public.office4::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/office_4.png);
    background-size: 90%;
}
.info-detail > dl.public.office5::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/office_5.png);
    background-size: 90%;
}
.info-detail > dl.public.office6::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/office_6.png);
    background-size: 90%;
}
.info-detail > dl.public.office7::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/office_7.png);
    background-size: 90%;
}

.info-detail > dl.hospital::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/hospital_1.png);
    background-size: 90%;
}
.info-detail > dl.hospital.small::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/hospital_2.png);
    background-size: 90%;
}

.info-detail > dl.business::before {
    content: "";
    background-color: #9086ee;
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_bg_business.svg);
    background-size: 65%;
}
.info-detail > dl.bigstore::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/big_store.png);
    background-size: 90%;
}
.info-detail > dl.station::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/png/railway_station.png);
    background-size: 90%;
}
.info-detail > dl.doroic::before {
    content: "";
    background-image: url(https://aptgin.com/cdn/res/icon/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 > 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/svg/icon_pin_pre_17x17.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_pin_pre_17x17.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_open_in_new_blue.svg) center/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/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/svg/icon_wallet.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_wallet.svg) 50%/16px no-repeat;
}

.service::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_service.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_service.svg) 50%/18px no-repeat;
}

.sports::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_football.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_football.svg) 50%/16px no-repeat;
}

.hotel::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_hotel.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_hotel.svg) 50%/17px no-repeat;
}

.food::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_food.svg) 50%/18px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_food.svg) 50%/18px no-repeat;
}

.property::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_house.svg) 50%/14px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_house.svg) 50%/14px no-repeat;
}

.education::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_book.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_book.svg) 50%/17px no-repeat;
}

.game::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_game.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_game.svg) 50%/16px no-repeat;
}

.science::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_rocket.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_rocket.svg) 50%/17px no-repeat;
}

.health_care::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_health.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_health.svg) 50%/17px no-repeat;
}

.lease::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_lease.svg) 50%/17px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_lease.svg) 50%/17px no-repeat;
}

.game::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_game.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_remote.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_remote.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(https://aptgin.com/cdn/res/icon/svg/icon_reset_white.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_radius_white.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(https://aptgin.com/cdn/res/icon/svg/icon_close.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_close.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_delete.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(https://aptgin.com/cdn/res/icon/svg/icon_delete_white.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_group_save_purple.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(https://aptgin.com/cdn/res/icon/svg/icon-reset.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon-reset.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(https://aptgin.com/cdn/res/icon/svg/icon_close.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_close.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(https://aptgin.com/cdn/res/icon/static/map_route.png) -298px -114px no-repeat
}

.MapWalker .angleBack {
    width: 102px;
    height: 52px;
    background: url(https://aptgin.com/cdn/res/icon/static/map_route.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(https://aptgin.com/cdn/res/icon/svg/icon_search_c089.svg) 50%/55% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_search_c089.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/svg/icon_pin_pre_17x17.svg) 50%/cover no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_history.svg) 50%/cover no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_history.svg) 50%/cover no-repeat;
}

.area-list li::after {
    right: 30px;
    width: 23px;
    height: 23px;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_search_check.svg) 50%/cover no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_search_check.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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/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(https://aptgin.com/cdn/res/icon/png/icon_bullet.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(https://aptgin.com/cdn/res/icon/svg/icon_download.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_youtube_symbol_1985.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/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/png/icon_bbs_pre.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(https://aptgin.com/cdn/res/icon/png/places_category.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/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/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_add_plus.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_add_plus.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/gif/logo_onbid.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(https://aptgin.com/cdn/res/icon/svg/icon_add_plus.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_add_plus.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/svg/icon_print.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/symbol_aptgin_admin.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(https://aptgin.com/cdn/res/icon/svg/icon_save_white.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(https://aptgin.com/cdn/res/icon/svg/icon_radius_17x17.svg) center/contain no-repeat;
}

.icon-facebook {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_facebook.svg);
    background-color: #3b579d;
    background-size: 60%;
}

.icon-twitter {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_twitter.svg);
    background-color: #1da1f2;
    background-size: 60%;
}

.icon-kakao {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_kakao_yellow.svg);
    background-size: contain;
}

.icon-band {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_band.svg);
    background-color: #17c920;
    background-size: 60%;
}

.icon-blog {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_naver_blog.svg);
    background-size: contain;
}

.icon-naver {
    background-image: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_pdf_5a1e.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(https://aptgin.com/cdn/res/icon/svg/icon-gt_c0f1.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon-gt_c0f1.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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/svg/icon_outline_school.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_school.svg) 50%/contain no-repeat;
}

.environment .move h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_apt.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_apt.svg) 50%/90% no-repeat;
}

.environment .subway h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_subway.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_subway.svg) 50%/contain no-repeat;
}

.environment .bus h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_bus.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_bus.svg) 50%/contain no-repeat;
}

.environment .bank h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_bank.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_bank.svg) 50%/contain no-repeat;
}

.environment .hospital h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_hospital.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_hospital.svg) 50%/contain no-repeat;
}

.environment .mart h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_mart.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_mart.svg) 50%/contain no-repeat;
}

.environment .store h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_store.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_store.svg) 50%/90% no-repeat;
}

.environment .park h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_park.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_park.svg) 50%/90% no-repeat;
}

.environment .public h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_public.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_public.svg) 50%/90% no-repeat;
}

.environment .commercial h3::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_outline_commercial.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_alarm.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_alarm.svg) 50%/contain no-repeat;
    background-color: #111;
}

.all-alarm.mail strong::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_mail.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_alarm.svg) 50%/contain no-repeat;
}

.all-alarm.sms strong::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_message_gray.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_message_gray.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;
}

/* 조회버튼 추가로 인해 주석 */

/* 지도 팝업 */
.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_distance.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_distance.svg) 50%/contain no-repeat;
}

.mapbox-directions-route-summary span::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_time.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_time.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;
}

/* 팝업 꼬리(삼각형 화살표)는 쓰지 않는다 (2026-08-24).
   원래는 anchor-bottom(팝업이 마커 위에 있을 때)에만 지우는 규칙이 걸려 있어서, 공간이
   부족해 팝업이 아래로 뒤집히면(anchor 가 top 계열) 위쪽에 화살표가 그대로 드러났다.
   방향을 가리지 않고 감춘다. */
.mapboxgl-popup-tip {
    display: none !important;
}

/* 모달이 스스로 그리던 꼬리도 함께 감춘다 (2026-08-29).
   `.sale-info-box .arrow` 는 `bottom:-10px; left:50%` 로 상자 **밖 하단 중앙**에
   회색 삼각형을, `::after` 가 그 위에 흰 삼각형을 덧그린다 — mapbox 의 tip 과 같은 역할을
   손으로 만든 것이다. 위에서 tip 만 감춰 두어 이쪽이 그대로 남아 있었다.
   ⚠ 규칙이 **`pre.component.css` 에만** 있어서 프리미엄 지도(map00)에서만 보였고,
   빅데이터지도(gin03, home.component.css)에서는 같은 마크업이 아무것도 그리지 않았다.
   그 탓에 「로컬에서는 재현이 안 된다」로 한참 헤맸다. **두 파일을 같이 고친다.**
   ⚠ 두 파일은 줄바꿈이 다르다(pre=CRLF · home=LF). 한쪽을 복사해 넣지 말 것. */
.sale-info-box .arrow,
.sale-info-box .arrow::after {
    display: none !important;
}

/* ⚠ 꼬리가 차지하던 10px 은 마커와 팝업 사이 간격 노릇을 하고 있었다. 감추기만 하면
   팝업이 마커 쪽으로 정확히 10px 붙어 아이콘을 덮는다 — 학교·시설 팝업은 anchor 가
   top 계열일 때 offset 이 [0,0] 이라(map.events.js 의 popupOffsets) 그대로 밀착한다.
   그래서 같은 값을 margin 으로 돌려준다. 꼬리만 사라지고 위치는 이전 그대로다. */
.mapboxgl-popup-anchor-top .mapboxgl-popup-content,
.mapboxgl-popup-anchor-top-left .mapboxgl-popup-content,
.mapboxgl-popup-anchor-top-right .mapboxgl-popup-content {
    margin-top: 10px;
}

.mapboxgl-popup-anchor-bottom .mapboxgl-popup-content,
.mapboxgl-popup-anchor-bottom-left .mapboxgl-popup-content,
.mapboxgl-popup-anchor-bottom-right .mapboxgl-popup-content {
    margin-bottom: 10px;
}

.mapboxgl-popup-anchor-left .mapboxgl-popup-content {
    margin-left: 10px;
}

.mapboxgl-popup-anchor-right .mapboxgl-popup-content {
    margin-right: 10px;
}


.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/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(https://aptgin.com/cdn/res/icon/static/star_off_ani.png) no-repeat;
    background-position: 0 0;
    animation: fav 1.3s steps(56) infinite;
}

.star-off-ani:hover, .star-off-ani:active {
    background: url(https://aptgin.com/cdn/res/icon/png/star.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(https://aptgin.com/cdn/res/icon/svg/icon_youtube_red.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_down.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow_down.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(https://aptgin.com/cdn/res/icon/svg/icon_youtube_red.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/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
}

.icon-file::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon-save.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon-save.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(https://aptgin.com/cdn/res/icon/svg/icon_clip.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_clip.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(https://aptgin.com/cdn/res/icon/svg/logo_gin.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(https://aptgin.com/cdn/res/icon/png/back_pattern_01.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(https://aptgin.com/cdn/res/icon/svg/icon_calendar.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_calendar.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(https://aptgin.com/cdn/res/icon/svg/icon_point.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_point.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(https://aptgin.com/cdn/res/icon/svg/icon_calendar.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_calendar.svg) 50%/contain no-repeat;
}

.bbs-list.pay li .bbs-content-info .method::before {
    background-color: #7e81a6;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_transfer.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_transfer.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/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/svg/icon_tel.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_tel.svg) 50%/contain no-repeat;
}

.icon-mobile::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_mobile.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_pen.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_pen.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(https://aptgin.com/cdn/res/icon/svg/icon-save.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon-save.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;
}

.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(https://aptgin.com/cdn/res/icon/svg/icon_report.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_report.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(https://aptgin.com/cdn/res/icon/svg/icon_delete_white.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(https://aptgin.com/cdn/res/icon/svg/icon_youtube_white.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_youtube_white.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(https://aptgin.com/cdn/res/icon/svg/icon_report_step1.svg);
}

.report-total .step li:nth-child(2) span::before {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_report_step2.svg);
}

.report-total .step li:nth-child(3) span::before {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_report_step3.svg);
}

.report-total .step li:nth-child(4) span::before {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_report_step4.svg);
}

.report-total .step li:nth-child(5) span::before {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_report_step5.svg);
}

.report-total .step li:nth-child(6) span::before {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_report_step6.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(https://aptgin.com/cdn/res/icon/svg/icon_exchange.svg) 50%/16px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_exchange.svg) 50%/16px no-repeat;
}

.btn-delete::before {
    vertical-align: -3px;
    background-color: #fff;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_delete.svg) 50%/12px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_delete.svg) 50%/12px no-repeat;
}

.icon-locked::before {
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_pw.svg) 0/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_pw.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(https://aptgin.com/cdn/res/icon/svg/icon_report_time.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_report_time.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(https://aptgin.com/cdn/res/icon/svg/icon_report_complete.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_report_complete.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(https://aptgin.com/cdn/res/icon/svg/icon_time.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_time.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(https://aptgin.com/cdn/res/icon/svg/icon_check_31d5.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_check_31d5.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(https://aptgin.com/cdn/res/icon/svg/icon_delete.svg) 50%/12px no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_delete.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(https://aptgin.com/cdn/res/icon/svg/icon_detail_view.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_detail_view.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/svg/icon_open_in_new_purple.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_check_31d5.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_check_31d5.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(https://aptgin.com/cdn/res/icon/jpg/icon_talk_ex.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(https://aptgin.com/cdn/res/icon/svg/icon_map_realtor.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_realtor.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(https://aptgin.com/cdn/res/icon/svg/icon_map_realtor.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_map_realtor.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(https://aptgin.com/cdn/res/icon/static/img_apt_bg.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/svg/icon_pin_pre_17x17.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/jpg/icon_chatbox_cha_93bc.jpg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/bg_photo.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/bg_photo.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(https://aptgin.com/cdn/res/icon/svg/icon_mobile_2d3d.svg) 50%/cover no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_mobile_2d3d.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 > div .quick-search-box {
    display: flex;
    /* 안내 문구가 입력칸 아래 줄로 내려가도록 줄바꿈을 허용한다 */
    flex-flow: row wrap;
    align-items: center;
    position: relative;
    /* [추가] 버튼은 아래 선택 상자 줄에만 놓이므로, 입력칸은 버튼 오른쪽 끝(20px)까지 넓힌다 */
    padding: 10px 20px 0 20px;
}

/* 선택 상자도 같은 값으로 맞춰 맨 오른쪽 상자와 [추가] 버튼이 붙지 않게 한다 */
.sidenav-contents > div .item-add-box {
    padding-right: 66px;
}

/* [추가] 버튼은 맨 아랫줄에만 걸린다. 그 위의 줄들은 버튼 자리를 비울 이유가 없으므로
   버튼 오른쪽 끝(20px)까지 넓혀 위 검색 입력칸과 끝을 맞춘다 */
.sidenav-contents > div .item-add-box > .add-region:not(:last-child),
.sidenav-contents > div .item-add-box > .add-apt:not(:last-child) {
    width: calc(100% + 46px);
}

/* '검색' 과 아래 줄 '선택' 의 글자 시작점을 맞추려고 폭을 고정한다 */
.sidenav-contents > div .quick-search-box > label,
.sidenav-contents > div .item-add-box > .add-region::before,
.sidenav-contents > div .item-add-box > .add-apt::before {
    flex: none;
    width: 30px;
    margin-right: 0;
    color: #555;
    font-size: 13px;
    letter-spacing: -.6px;
    white-space: nowrap;
}

.sidenav-contents > div .item-add-box > .add-region::before {
    content: '선택';
    align-self: center;
}

/* 단지명·면적 줄은 라벨 없이 자리만 비워 세로줄을 맞춘다 */
.sidenav-contents > div .item-add-box > .add-apt::before {
    content: '';
    align-self: center;
}

/* 지역비교는 선택 상자가 상자 안에 한 번 더 들어 있어 좌우 여백이 두 번 먹는다.
   안쪽 여백을 없애야 빠른 검색 입력칸과 아래 선택 상자의 끝이 나란히 떨어진다 */
/* 그룹 상자는 위 여백이 어딘가에서 0 으로 덮여 검색칸과 맞붙는다. 다시 세워 준다 */
.sidenav-contents > div .item-add-box.group {
    padding-top: 10px;
}

.sidenav-contents > div .item-add-box.group > .item-add-box {
    /* 위 여백은 바깥이 이미 갖고 있어 겹치면 안 되고, 아래 여백은 남겨야
       [추가] 버튼이 바닥에서 10px 띄워져 '읍/면/동' 줄보다 위로 떠오르지 않는다 */
    padding: 0 0 10px;
}

/* 비교 그룹은 상자가 겹쳐 있어 구분선이 두 번 그려진다. 그룹 안에서는 그룹 카드가
   이미 경계 역할을 하므로 이 선을 없앤다 */
.sidenav-contents > div .item-add-box.group::after,
.sidenav-contents > div .item-add-box.group > .item-add-box::after {
    display: none;
}

/* [추가] 버튼은 안쪽 상자를 기준으로 놓이는데, 안쪽은 바깥 여백(66px)만큼 좁다.
   그대로 두면 버튼이 '읍/면/동' 위로 올라타므로 그 폭만큼 오른쪽으로 내보낸다 */
.sidenav-contents > div .item-add-box.group > .item-add-box > .btn-add {
    right: -46px;
}

/* 맨 오른쪽 선택창에 붙은 3px 여백을 빼야 '읍/면/동'(단지 화면은 '면적') 끝이
   바로 위 검색 입력칸 끝과 정확히 만난다 */
.sidenav-contents > div .item-add-box .add-region > .dropdown:last-child,
.sidenav-contents > div .item-add-box .add-apt > .dropdown:last-child {
    margin-right: 0;
}

/* 앞에 라벨이 붙어 남는 폭이 줄면, 선택창은 기본값(min-width:auto) 탓에 더 줄지 못하고
   오른쪽으로 밀려 나간다. 줄어들 수 있게 해야 끝이 입력칸과 맞는다 */
.sidenav-contents > div .item-add-box .add-region > .dropdown,
.sidenav-contents > div .item-add-box .add-apt > .dropdown {
    min-width: 0;
}

/* 결과에 마우스를 올렸을 때 뜨는 말풍선. 목록은 스크롤 상자라 그 안에 두면 잘려서
   상자 기준으로 띄운다. 마우스를 가로채지 않도록 pointer-events 를 끈다 */
.sidenav-contents > div .quick-search-box > .quick-search-tip {
    display: none;
    /* 비교 그룹의 빠른 검색은 넘침을 자르는 스크롤 상자 안에 있다. 화면 기준으로 띄워야
       잘리지 않는다. 좌표는 마우스를 올릴 때 스크립트가 넣어 준다 */
    position: fixed;
    z-index: 30;
    transform: translateY(-50%);
    width: 200px;
    padding: 7px 10px;
    border-radius: 5px;
    color: #fff;
    font-size: 12px;
    line-height: 1.45;
    letter-spacing: -.4px;
    background-color: rgba(0, 0, 0, .82);
    pointer-events: none;
}

.sidenav-contents > div .quick-search-box > .quick-search-tip.on {
    display: block;
}

/* 고르고 나면 [추가](또는 [조회]) 버튼이 잠깐 들썩인다. 즐겨찾기 별표처럼 눈길을 끌기 위해서다 */
@keyframes quickAddAttention {
    0%, 10%, 14%, 18%, 100% {
        animation-timing-function: cubic-bezier(0.215, .61, .355, 1);
        transform: translate(0, 0);
    }
    5% {
        animation-timing-function: cubic-bezier(0.755, .050, .855, .060);
        transform: translate(0, -6px);
    }
    12% {
        animation-timing-function: cubic-bezier(0.755, .050, .855, .060);
        transform: translate(0, -3px);
    }
    16% {
        transform: translate(0, -2px);
    }
}

.sidenav-contents > div .item-add-box .btn-add.quick-attention,
.sidenav-contents > div .item-add-box .btn-inquiry.quick-attention {
    animation: quickAddAttention 1.6s ease infinite;
}

/* 고른 뒤 선택 상자가 채워지는 동안 덮는 회전 표시 */
.sidenav-contents > div .item-add-box > .quick-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    background-color: rgba(255, 255, 255, .65);
}

.sidenav-contents > div .item-add-box > .quick-loading > i {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid #e3e3e3;
    border-top-color: #8934fa;
    border-radius: 50%;
    animation: quickSpin .7s linear infinite;
}

@keyframes quickSpin {
    to {
        transform: rotate(360deg);
    }
}

.sidenav-contents > div .quick-search-box > label {
    margin-right: 0;
    color: #555;
    font-size: 13px;
    letter-spacing: -.6px;
    white-space: nowrap;
}

.sidenav-contents > div .quick-search-box > input {
    flex: 1;
    min-width: 0;
    height: 34px;
    border: 1px solid #e4e4e4;
    border-radius: 3px;
    font-size: 14px;
    text-indent: 0;
}

.sidenav-contents > div .quick-search-box > input:focus {
    border-color: #8934fa;
}

/* 눌렀을 때 안내 글자를 감춰 커서가 바로 보이게 한다(크롬은 그냥 두면 글자가 남는다) */
.sidenav-contents > div .quick-search-box > input:focus::placeholder {
    color: transparent;
}

.sidenav-contents > div .quick-search-box > input:focus::-webkit-input-placeholder {
    color: transparent;
}

.sidenav-contents > div .quick-search-box > .quick-search-list {
    display: none;
    position: absolute;
    top: 46px;
    /* 입력칸 바로 아래에 같은 폭으로 붙인다(왼쪽 20 + 라벨 30 = 50) */
    left: 50px;
    right: 20px;
    z-index: 20;
    /* 검색 결과는 최대 10건이다(검색 서버 MAX_SEARCH_RESULTS). 제목 줄까지 더해 10건이
       스크롤 없이 다 보이는 높이로 잡는다. 화면이 낮으면 그때만 스크롤이 생긴다. */
    max-height: 420px;
    overflow-y: auto;
    border: 1px solid #d5d5d5;
    border-radius: 3px;
    background-color: #fff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}

.sidenav-contents > div .quick-search-box > .quick-search-list > li {
    padding: 8px 12px;
    color: #333;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: -.5px;
    cursor: pointer;
}

.sidenav-contents > div .quick-search-box > .quick-search-list > li + li {
    border-top: 1px solid #f0f0f0;
}

/* 목록 맨 위 제목 줄. 스크롤해도 자리를 지키도록 붙여 둔다 */
.sidenav-contents > div .quick-search-box > .quick-search-list > li.list-title,
.sidenav-contents > div .quick-search-box > .quick-search-list > li.list-title:hover {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 7px 12px;
    border-bottom: 1px solid #e8e8e8;
    color: #888;
    font-size: 12px;
    font-weight: 500;
    background-color: #fafafa;
    cursor: default;
}

.sidenav-contents > div .quick-search-box > .quick-search-list > li.list-title > em {
    margin-left: 4px;
    color: #8934fa;
    font-style: normal;
    font-weight: 600;
}

/* 제목 줄이 이미 아래쪽에 선을 그으므로 바로 다음 항목의 윗선은 뺀다 */
.sidenav-contents > div .quick-search-box > .quick-search-list > li.list-title + li {
    border-top: 0;
}

/* 스크롤 막대는 아주 연한 회색으로 두어 목록을 방해하지 않게 한다 */
.sidenav-contents > div .quick-search-box > .quick-search-list {
    scrollbar-width: thin;
    scrollbar-color: #ececec transparent;
}

.sidenav-contents > div .quick-search-box > .quick-search-list::-webkit-scrollbar {
    width: 6px;
}

.sidenav-contents > div .quick-search-box > .quick-search-list::-webkit-scrollbar-track {
    background-color: transparent;
}

.sidenav-contents > div .quick-search-box > .quick-search-list::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background-color: #ececec;
}

.sidenav-contents > div .quick-search-box > .quick-search-list::-webkit-scrollbar-thumb:hover {
    background-color: #dcdcdc;
}

.sidenav-contents > div .quick-search-box > .quick-search-list > li:hover {
    color: #5e35b1;
    background-color: #f3f6fb;
}

.sidenav-contents > div .quick-search-box > .quick-search-list > li.empty,
.sidenav-contents > div .quick-search-box > .quick-search-list > li.empty:hover {
    color: #999;
    background-color: transparent;
    cursor: default;
}

.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up_black.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px 7px;
}

.right a.active .arrow {
    background-image: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up_black.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(https://aptgin.com/cdn/res/icon/png/star.png) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/png/star.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(https://aptgin.com/cdn/res/icon/svg/icon_menu.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_menu.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(https://aptgin.com/cdn/res/icon/svg/icon_pen.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_pen.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(https://aptgin.com/cdn/res/icon/png/star.png) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/png/star.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(https://aptgin.com/cdn/res/icon/png/star.png) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/png/star.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/svg/icon_pin_solid_balck.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_arrow.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(https://aptgin.com/cdn/res/icon/svg/icon_arrow03_up_black.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/svg/icon_pen.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_search_c089.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(https://aptgin.com/cdn/res/icon/svg/icon_delete_white.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/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/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/svg/icon_naver.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/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/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/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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_down.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/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/svg/icon_pin_solid.svg) 50%/contain no-repeat;
    mask: url(https://aptgin.com/cdn/res/icon/svg/icon_pin_solid.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(https://aptgin.com/cdn/res/icon/png/apt-info-01.png);
}

.root-modal .modal-apt-info .apt-feature li:nth-child(2):before {
    background-image: url(https://aptgin.com/cdn/res/icon/png/apt-info-02.png);
}

.root-modal .modal-apt-info .apt-feature li:nth-child(3):before {
    background-image: url(https://aptgin.com/cdn/res/icon/png/apt-info-03.png);
}

.root-modal .modal-apt-info .apt-feature li:nth-child(4):before {
    background-image: url(https://aptgin.com/cdn/res/icon/png/apt-info-04.png);
}

.root-modal .modal-apt-info .apt-feature li:nth-child(5):before {
    background-image: url(https://aptgin.com/cdn/res/icon/png/apt-info-05.png);
}

.root-modal .modal-apt-info .apt-feature li:nth-child(6):before {
    background-image: url(https://aptgin.com/cdn/res/icon/png/apt-info-06.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/svg/icon_outline_school.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_outline_apt.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_outline_subway.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_outline_bus.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/bank_i_2.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/hospital_3.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/mart_1_1.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/convenience_1.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/park.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/park.svg) 50%/90% no-repeat;
}

.root-modal .modal-apt-info .environment .public h4::before {
    mask: url(https://aptgin.com/cdn/res/icon/svg/office_1.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/icon_outline_commercial.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/railway_station.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/big_store.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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/svg/doro_ic.svg) 50%/90% no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/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(https://aptgin.com/cdn/res/icon/svg/icon_cursor.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/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(https://aptgin.com/cdn/res/icon/svg/icon_arrow_down.svg) 50%/contain no-repeat;
    -webkit-mask: url(https://aptgin.com/cdn/res/icon/svg/icon_arrow_down.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;}

.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;
}


/* ===== 아파트 HTML DOM 마커 (프리미엄 빅데이터지도) =====
   마커가 이미지(symbol) → HTML DOM 으로 바뀌면서 CSS 가 필수인데, 프리미엄 맵(layouts/map/css.html)이 로드하는 CSS 에
   이 블록이 없어 마커가 스타일 없이 텍스트만 나오던 문제 수정.
   무료맵 home.map.css 의 동일 블록 — 마커 스타일 변경 시 양쪽을 함께 동기화할 것. ===== */
/* ================= 아파트 HTML DOM 마커 (100세대 이상, 증감률) — 2겹 레이어 말풍선 ================= */
/* 색상은 마커마다 JS(map.func.js aptHtmlMarker.render)에서 --ahm-accent / --ahm-accent-rgb 변수로 주입 */
.apt-html-marker { cursor: pointer; line-height: 1; user-select: none; -webkit-user-select: none; }
.apt-html-marker .ahm-box { position: relative; width: 65px; height: 71px; font-weight: 800; }

/* 1. 뒤 배경 레이어 */
.apt-html-marker .ahm-back {
    position: absolute; top: 0; right: 5px; width: 52px; height: 58px;
    background: var(--ahm-accent, #4A72D4); border-radius: 2px; z-index: 1;
}

/* 4. 바닥 그라데이션 그림자 (꼬리에서 우측으로 번짐) */
.apt-html-marker .ahm-sh1 {
    position: absolute; bottom: 0px; left: -5.5px; width: 59px; height: 11px;
    background: linear-gradient(100deg, rgba(var(--ahm-accent-rgb, 74,114,212),1) 0%, rgba(var(--ahm-accent-rgb, 74,114,212),.6) 30%, rgba(var(--ahm-accent-rgb, 74,114,212),0) 80%);
    filter: blur(.75px); transform-origin: left top; transform: rotate(-24deg); z-index: 1;
    clip-path: polygon(8.5px 0%, 100% 0%, 100% 100%, 3px 100%);
}
.apt-html-marker .ahm-sh2 {
    position: absolute; bottom: 6.5px; left: 5px; width: 59px; height: 11px;
    background: linear-gradient(100deg, rgba(var(--ahm-accent-rgb, 74,114,212),.85) 0%, rgba(var(--ahm-accent-rgb, 74,114,212),.4) 60%, rgba(var(--ahm-accent-rgb, 74,114,212),0) 80%);
    filter: blur(.75px); transform-origin: left top; z-index: 1;
}

/* 2. 앞 흰 말풍선 */
.apt-html-marker .ahm-front {
    position: absolute; bottom: 10px; left: 0; width: 57px; height: 46px;
    background: #fff; border: 1.5px solid var(--ahm-accent, #4A72D4);
    border-radius: 2px 2px 2px 0; box-sizing: border-box; z-index: 2;
    /* ⚠ 좌하단만 각지게 (2026-08-23 확정). 여기는 꼬리가 붙는 모서리라 둥글면 안 된다 —
       라운드가 있으면 왼쪽 세로 테두리가 꼬리와 만나는 지점에서 안쪽으로 파여 선이 끊겨 보인다.
       작은 마커(.small)는 처음부터 좌하단이 0 이었다. 4방향 2px 로 되돌리지 말 것. */
}

/* 3. 꼬리: 파란 테두리(::before) + 흰 내부(::after)
   ⚠ left 는 -1px, ::after 의 bottom 은 -8px 이어야 한다 (2026-08-23 확정).
   말풍선 테두리 1.5px 는 브라우저가 정수 픽셀로 스냅해 실제로는 1px 로 그려진다(모바일 DPR3 실측).
   그래서 -1.5px 로 두면 꼬리가 테두리 바깥으로 0.5px 어긋나고, ::after 를 -9px 로 두면
   흰 속이 말풍선 밑변과 겹침 없이 딱 맞닿아, 꼬리와 바디가 만나는 곳에 얇은 선이 비쳤다.
   값을 되돌리지 말 것 — 모바일에서 다시 드러난다. */
.apt-html-marker .ahm-front::before {
    content: ""; position: absolute; bottom: -11.5px; left: -1.3px; width: 0; height: 0;
    border-top: 11.5px solid var(--ahm-accent, #4A72D4); border-right: 12.5px solid transparent;
}
.apt-html-marker .ahm-front::after {
    content: ""; position: absolute; bottom: -7px; left: 0; width: 0; height: 0;
    border-top: 9px solid #fff; border-right: 9px solid transparent;
}

/* 평(면적) — 흰색, 뒤쪽 accent 박스 상단에 배치 (별도 span) */
.apt-html-marker .ahm-head {
    position: absolute; top: 2px; left: 8px; width: 52px; text-align: center;
    color: #fff; font-size: 11px; z-index: 3; pointer-events: none; white-space: nowrap;
}

/* 값(증감·금액) — 흰 말풍선 안 */
.apt-html-marker .ahm-body {
    position: absolute; left: 0; top: 17px; width: 57px; height: 41px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    z-index: 3; pointer-events: none;
}
.apt-html-marker .ahm-pct { font-size: 12px; letter-spacing: -0.5px; line-height: 1.3; white-space: nowrap; }
/* 상승/하락 삼각형만 숫자보다 2px 작게 — 본문 12px 에 10px.
   color:inherit 는 home.common.css 의 전역 reset(div,p,span,... { color:#0a2e4f })이 span 에
   색을 직접 지정해 .ahm-pct 의 인라인 color 가 상속되지 않는 것을 되돌린다(상승 빨강/하락 파랑). */
.apt-html-marker .ahm-pct .ahm-tri { font-size: 10px; color: inherit; }
.apt-html-marker .ahm-money { font-size: 14px; letter-spacing: -0.5px; color: #000; line-height: 1.25; white-space: nowrap; }
.apt-html-marker .ahm-type { font-size: 14px; letter-spacing: -0.5px; color: #000; line-height: 1.25; white-space: nowrap; }
.apt-html-marker .ahm-ext { font-size: 12px; letter-spacing: -0.5px; color: #333; line-height: 1.3; white-space: nowrap; }
/* 3줄(면적거래비율·면적매물비율·입주예정)은 줄이 하나 더 있어 글자 크기는 2줄과 같은 14/12/12 를 쓰되
   줄 간격만 좁혀서 말풍선 안에 담는다. :has() 로 3줄 조합에만 한정한다. */
.apt-html-marker .ahm-body:has(.ahm-ext) > div { line-height: 1.05; }

/* 경매(경)·미분양(미) 원형 배지 (순수 CSS, PNG 미사용) */
.apt-html-marker .ahm-badge {
    position: absolute; top: -6px; width: 18px; height: 18px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    color: #fff; font-size: 10px; font-weight: 700;
    box-shadow: 0 1px 2px rgba(0,0,0,.4);
    pointer-events: none; z-index: 4;
}
.apt-html-marker .ahm-badge.auction { left: -8px; top: 4px; background: rgb(11,153,172); }
.apt-html-marker .ahm-badge.unsold  { right: -5px; top: -5px; background: rgb(230,60,50); }
/* HTML 마커는 z-index 없이 DOM 순서로 겹침 처리(map.func.js render) → 지도 UI(메뉴·범례·컨트롤) 위로 안 새어나감. 팝업만 그 위로 */
.mapboxgl-popup { z-index: 100001 !important; }
/* 지도 위 ECharts 차트 마커(상권/경제 파이 등)를 아파트 HTML 마커 위로 (마커 상한 ~99900) */
.mapboxgl-marker:has([_echarts_instance_]) { z-index: 100002; }


/* ===== 100세대 미만: 단일 말풍선(건물유형만) — 기존 symbol _s 아이콘 대체 =====
   색상은 큰 마커와 동일하게 JS 가 주입하는 --ahm-accent 를 그대로 사용(이미지 불필요).
   구조 재사용: .ahm-front = 단일 accent 말풍선, .ahm-sh1/2 = 꼬리 그림자, .ahm-body = 유형 글자
   목업(말풍선 60x30 / 글자 20px / 꼬리 16px) 비율을 마커 크기(40x20)로 환산(×0.667) */
.apt-html-marker.small .ahm-box { width: 46px; height: 32px; }
/* 뒤 배경 박스·평수 헤더는 미사용 */
.apt-html-marker.small .ahm-back,
.apt-html-marker.small .ahm-head { display: none; }
/* 단일 말풍선 (흰 배경/테두리 대신 accent 단색) */
.apt-html-marker.small .ahm-front {
    top: 0; bottom: auto; left: 0;
    width: 35px; height: 22px;
    background: var(--ahm-accent, #4A72D4);
    border: 0; border-radius: 4px 4px 4px 0;
}
/* 꼬리: 단색(accent) 삼각형 — 큰 마커의 2겹(테두리+흰속) 대신 1겹 */
.apt-html-marker.small .ahm-front::before {
    bottom: -9px; left: 0;
    border-top: 11px solid var(--ahm-accent, #4A72D4);
    border-right: 11px solid transparent;
}
.apt-html-marker.small .ahm-front::after { display: none; }
/* 유형 글자 (말풍선 정중앙, 흰색) */
.apt-html-marker.small .ahm-body {
    top: 0; left: 0; width: 35px; height: 22px;
}
.apt-html-marker.small .ahm-type {
    color: #fff; font-size: 12px; line-height: 1; letter-spacing: .3px;
}
/* 꼬리 끝에서 우측으로 번지는 2겹 그림자 (목업 좌표 ×0.667, 말풍선 top 기준) */
.apt-html-marker.small .ahm-sh1 {
    top: 25px; bottom: auto; left: -4px; width: 40px; height: 7px;
    background: linear-gradient(105deg, rgba(var(--ahm-accent-rgb, 74,114,212),.95) 0%, rgba(var(--ahm-accent-rgb, 74,114,212),.5) 40%, rgba(var(--ahm-accent-rgb, 74,114,212),0) 80%);
    filter: blur(1.7px); transform-origin: left top; transform: rotate(-30deg);
    clip-path: polygon(9px 0%, 100% 0%, 100% 100%, 2px 100%);
}
.apt-html-marker.small .ahm-sh2 {
    top: 21px; bottom: auto; left: 3px; width: 29px; height: 3px;
    background: linear-gradient(105deg, rgba(var(--ahm-accent-rgb, 74,114,212),.95) 50%, rgba(var(--ahm-accent-rgb, 74,114,212),.5) 80%, rgba(var(--ahm-accent-rgb, 74,114,212),0) 100%);
    filter: blur(1.7px); transform: none;
}
/* 배지도 작은 말풍선에 맞춰 축소 */
.apt-html-marker.small .ahm-badge { width: 14px; height: 14px; font-size: 8px; }
.apt-html-marker.small .ahm-badge.auction { left: -8px; top: -4px; }
.apt-html-marker.small .ahm-badge.unsold  { right: 3px; left: auto; top: -4px; }   /* 말풍선(35px) 우변 기준으로 auction 과 좌우 대칭 — 박스는 46px 라 right:3 이 말풍선 우변 +8px */