/**
Theme Name:   KNL crowd
Theme URI:    http://fiscus.tech/
Author:       Studio Bloom - Webloom team
Author URI:   http://fiscus.tech/
Description:  KNL crowd 워드프레스 테마입니다.
Version:      1.0.0
Tags:         fiscus
*/
/* qtip */
.qtip.qtip-default.su-qtip {
    max-width: 160px !important;
    border: 0 !important;
}

.qtip .qtip-tip canvas {
    width: 0;
}
.qtip.qtip-default.su-qtip .qtip-titlebar {
    border-radius: 5px 5px 0 0;
    background-color: #fdd23e !important;
    color: #222222;
    font-size: 12px;
    font-weight: 400;
    padding: 8px 10px;
}

.qtip.qtip-default.su-qtip .qtip-content {
    padding: 8px 10px;
    border-radius: 5px;
    background-color: #f5f5f5;
    color: #222222;
    font-size: 12px;
    font-weight: 400;
    line-height: 19px;
}

/*== 예상수익금(schedule) ==*/
#schedule-layer {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

#schedule-layer .layer-bg {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(34, 34, 34, 0.5);
    z-index: 9998;
    transition: all .3s ease;
    -moz-transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

#schedule-layer .layer-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 160px);
    overflow-y: scroll;
    max-width: 738px;
    background: #fff;
    z-index: 9999;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transition: all 0.25s ease;
    -moz-transition: all 0.25s ease;
    -webkit-transition: all 0.25s ease;
}

#schedule-layer .layer-inner .title-wrap {
    padding: 40px 0;
    text-align: center;
    position: relative;
}

#schedule-layer .layer-inner .title-wrap .title {
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 44px;
}

#schedule-layer .layer-inner .close-button {
    z-index: 9;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-image: url(images/header/close@2x.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#schedule-layer .content-wrap {
    padding: 40px;
    background-color: #f5f5f5;
}

#schedule-layer .select-wrap {
    padding-bottom: 60px;
}

#schedule-layer .select-wrap .inner-wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 30px;
}

#schedule-layer .select-wrap .inner-wrap .input-wrap {
    width: 230px;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    margin-right: 15px;
}

#schedule-layer .select-wrap .inner-wrap .input-wrap input {
    width: 100%;
    border: 0;
    border-radius: 0;
    padding: 0 15px;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    line-height: 45px;
    background-color: #ffffff;
}

#schedule-layer .select-wrap .inner-wrap .btn {
    cursor: pointer;
    display: inline-block;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    padding: 7px 15px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    transition: all 0.25s ease;
}

#schedule-layer .select-wrap .inner-wrap .btn i {
    margin-left: 20px;
    color: #fdd23e;
    transition: all 0.25s ease;
}

#schedule-layer .select-wrap .inner-wrap .btn:hover {
    color: #ffffff;
    background-color: #fdd23e;
}

#schedule-layer .select-wrap .inner-wrap .btn:hover i {
    color: #ffffff;
}

#schedule-layer .select-wrap .text-wrap {
    margin: 0 auto;
    width: 440px;
    height: 78px;
    border-radius: 30px;
    background-image: linear-gradient(138deg, #ffee89 0%, #fdd23e 100%);
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

#schedule-layer .select-wrap .text-wrap .text {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    margin-right: 20px;
}

#schedule-layer .select-wrap .text-wrap .result {
    color: #222222;
    font-size: 26px;
    font-weight: 400;
}

#schedule-layer .table-wrap {
    position: relative;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.7);
    background-color: #ffffff;
    margin-bottom: 30px;
}

#schedule-layer .table-wrap .schedule-slider {}

#schedule-layer .table-wrap .schedule-slider .slide {}

#schedule-layer .table-wrap .schedule-slider .slide .name {
    background-color: #f0f0f0;
    color: #222222;
    text-align: left;
    padding: 20px 0;
    padding-left: 30px;
    border-bottom: 0;
}

#schedule-layer .table-wrap .schedule-slider .slide .total {
    color: #222222;
    background-color: rgba(253, 210, 62, 0.3);
    border-bottom: 0;
}

#schedule-layer .table-wrap .schedule-slider .slide div {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    padding: 30px 0;
    padding-left: 30px;
    border-bottom: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
}

#schedule-layer .table-wrap .schedule-slider .slide div.value {
    border: 0;
    padding: 0;
    margin: 0;
}

#schedule-layer .table-wrap .schedule-slider .left {
    float: left;
    width: 290px;
    font-size: 0;
}

#schedule-layer .table-wrap .schedule-slider .left .numb {
    width: 130px;
    display: inline-block;
    min-height: 67px;
    vertical-align: top;
}

#schedule-layer .table-wrap .schedule-slider .left .date {
    width: 160px;
    display: inline-block;
    min-height: 67px;
    vertical-align: top;
}

#schedule-layer .table-wrap .schedule-slider .left .value-wrap {
    border: 0;
    padding: 0;
    margin: 0;
    font-size: 0;
}

#schedule-layer .table-wrap .schedule-slider .left .value-wrap .value {
    display: inline-block;
    vertical-align: top;
    min-height: unset;
}

#schedule-layer .table-wrap .schedule-slider .right-wrap {
    float: left;
    width: calc(100% - 290px);
}

#schedule-layer .table-wrap .schedule-util {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

#schedule-layer .table-wrap .schedule-util .slider-nav {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
}

#schedule-layer .table-wrap .schedule-util .slider-nav .slick-arrow {
    cursor: pointer;
    position: absolute;
    top: 15px;
}

#schedule-layer .table-wrap .schedule-util .slider-nav .slick-arrow i {
    display: inline-block;
    font-size: 34px;
    width: 40px;
    height: 40px;
    color: #d8d8d8;
    line-height: 40px;
    text-align: center;
    transition: all 0.25s ease;
}

#schedule-layer .table-wrap .schedule-util .slider-nav .slick-arrow i:hover {
    color: #fdd23e;
    border-color: #fdd23e;
}

#schedule-layer .table-wrap .schedule-util .slider-nav .nav-prev {
    left: 10px;
}

#schedule-layer .table-wrap .schedule-util .slider-nav .nav-next {
    right: 10px;
}

#schedule-layer .notice-wrap {}

#schedule-layer .notice-wrap ul {}

#schedule-layer .notice-wrap ul li {
    position: relative;
    padding-left: 15px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

#schedule-layer .notice-wrap ul li:before {
    position: absolute;
    left: 0;
    top: 0;
    content: '※';
}

#schedule-layer .notice-wrap ul li:last-child {
    padding-bottom: 0;
}

#schedule-layer .table-wrap .schedule-slider .slide.mb-only {
    display: none !important;
}

@media all and (max-width: 767px) {
    #schedule-layer .layer-inner {
        width: calc(100% - 30px);
    }

    #schedule-layer .layer-inner .title-wrap {
        padding: 25px 0;
    }

    #schedule-layer .layer-inner .title-wrap .title {
        font-size: 20px;
        line-height: 30px;
    }

    #schedule-layer .layer-inner .close-button {
        right: 20px;
        width: 20px;
        height: 20px;
    }

    #schedule-layer .content-wrap {
        padding: 25px 20px;
    }

    #schedule-layer .select-wrap {
        padding-bottom: 25px;
    }

    #schedule-layer .select-wrap .inner-wrap {
        padding-bottom: 25px;
        justify-content: flex-end;
    }

    #schedule-layer .select-wrap .inner-wrap .input-wrap {
        margin-right: 0;
        width: 100%;
        margin-bottom: 10px;
    }

    #schedule-layer .select-wrap .inner-wrap .input-wrap input {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    #schedule-layer .select-wrap .inner-wrap .btn {
        font-size: 12px;
        line-height: 18px;
        padding: 5px 15px;
    }

    #schedule-layer .select-wrap .text-wrap {
        width: 100%;
        height: 48px;
    }

    #schedule-layer .select-wrap .text-wrap .text {
        font-size: 12px;
    }

    #schedule-layer .select-wrap .text-wrap .result {
        font-size: 16px;
    }

    #schedule-layer .table-wrap {
        margin-bottom: 75px;
    }

    #schedule-layer .table-wrap .schedule-util {
        position: absolute;
        top: unset;
        bottom: -48px;
        width: 100%;
    }

    #schedule-layer .table-wrap .schedule-util .slider-nav .slick-arrow {
        /*position: relative;*/
        top: 0;
        border: 0;
        background-color: transparent;
        text-indent: -9999px;
    }
    #schedule-layer .table-wrap .schedule-util .slider-nav .slick-prev {
        left: 20px;
        background-image: url('images/deal/arrow-left-gray.png');
        background-repeat: no-repeat;
        width: 25px;
        height: 25px;
    }
    #schedule-layer .table-wrap .schedule-util .slider-nav .slick-next {
        right: 20px;
        background-image: url('images/deal/arrow-right-yellow.png');
        background-repeat: no-repeat;
        width: 25px;
        height: 25px;
    }
    
   /* #schedule-layer .table-wrap .schedule-util .slider-nav .slick-arrow i {
        font-size: 20px;
        width: 23px;
        height: 23px;
        line-height: 21px;
        border: 1px solid #d8d8d8;
        border-radius: 50%;
    }*/

    #schedule-layer .table-wrap .schedule-util .slider-dot {}

    #schedule-layer .table-wrap .schedule-util .slider-dot ul {
        height: 23px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
    }

    #schedule-layer .table-wrap .schedule-util .slider-dot ul li {
        margin: 0 7.5px;
    }

    #schedule-layer .table-wrap .schedule-util .slider-dot ul li.slick-active button {
        background-color: #fdd23e;
    }

    #schedule-layer .table-wrap .schedule-util .slider-dot ul li button {
        display: block;
        cursor: pointer;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #d8d8d8;
        padding: 0;
        font-size: 0;
        border: 0;
        transition: all 0.25s ease;
    }

    #schedule-layer .table-wrap .schedule-slider .slide div {
        padding: 15px;
        padding-left: 15px;
        font-size: 14px;
        text-align: left;
        min-height: 51px;
    }

    #schedule-layer .table-wrap .schedule-slider .slide .name {
        padding: 15px;
        min-height: 50px;
    }

    #schedule-layer .table-wrap .schedule-slider .right-wrap {
        float: none;
        width: 100%;
    }

    #schedule-layer .table-wrap .schedule-slider .right.turn {}

    #schedule-layer .table-wrap .schedule-slider .right.turn .total {
        border-right: 0;
    }

    #schedule-layer .table-wrap .schedule-slider .right.dist-date {}

    #schedule-layer .table-wrap .schedule-slider .right.mb-only {
        display: block !important;
    }
    #schedule-layer .notice-wrap ul li {
        padding-left: 0;
    }
    #schedule-layer .notice-wrap ul li:before {
        margin-right: 3px;
        position: relative;
    }
}

/**
* admin
*/
.admin-bar #header {
    top: 32px !important;
}

.admin-bar #sideBar {
    top: 32px !important;
}

.admin-bar #sideBar .sidebar-header {
    top: 32px !important;
}

.admin-bar #deal #deal-content .deal-nav.fixed {
    top: 112px;
}


@media all and (max-width: 782px) {
    .admin-bar #header {
        top: 46px !important;
    }

    .admin-bar #sideBar {
        top: 46px !important;
    }

    .admin-bar #sideBar .sidebar-header {
        top: 46px !important;
    }

    .admin-bar #deal #deal-content .deal-nav.fixed {
        top: 106px;
    }
}

/**
 * common-wrap
 */
.common-wrap {
    padding-top: 80px;
}

@media all and (max-width: 1023px) {
    .common-wrap {
        padding-top: 60px;
    }
}

@media all and (max-width: 767px) {
    .common-wrap {
        padding-top: 50px;
    }
}

/**
 * common-header
 */
.common-header {
    padding: 90px 0;
    background-color: rgba(253, 210, 62, 0.15);
    background-image: url(images/common/common-bg.png);
    background-size: auto;
    background-position: right bottom;
    background-repeat: no-repeat;
}

.common-header .title {
    color: #222222;
    font-size: 36px;
    line-height: 52px;
    font-weight: 400;
    text-align: center;
}

@media all and (max-width: 767px) {
    .common-header {
        padding: 50px 0;
        background-size: 200px auto;
        background-position: right -50px bottom;
    }

    .common-header .title {
        font-size: 20px;
        line-height: 30px;
    }
}

/**
 * board
 */
.board-header {
    padding: 90px 0;
    background-color: rgba(253, 210, 62, 0.15);
    background-image: url(images/common/board-bg.png);
    background-position: right bottom;
    background-repeat: no-repeat;
}

.board-header .title {
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    text-align: center;
}

@media all and (max-width: 767px) {
    .board-header {
        padding: 50px 0;
        background-image: url(images/common/board-bg-m.png);
    }

    .board-header .title {
        font-size: 20px;
        line-height: 30px;
    }
}

.board-body {}

.board-body .no-list {
    /*padding: 160px 0;*/
    padding-bottom: 160px;
}

.board-body .no-list .icon {
    padding-bottom: 30px;
}

.board-body .no-list .icon img {
    display: block;
    margin: 0 auto;
    width: 100px;
}

.board-body .no-list .text {
    text-align: center;
    color: #c0c0c0;
    font-size: 26px;
    font-weight: 400;
}

@media all and (max-width: 767px) {
    .board-body .no-list {
        /*padding: 60px 0;*/
        padding-bottom: 60px;
    }

    .board-body .no-list .icon {
        padding-bottom: 15px;
    }

    .board-body .no-list .icon img {
        width: 50px;
    }

    .board-body .no-list .text {
        font-size: 14px;
    }
}


.board-util {
    /*position: relative;*/
    padding: 60px 0;
}

.board-util.fixed {
    position: fixed;
    left: 0;
    top: 80px;
    padding: 30px 0 57px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px #d8d8d8;
    z-index: 2;
}
/*이벤트*/
#event .board-util.fixed .category-wrap {
    padding: 3px 0;
}
#event .board-util.fixed {
    padding: 30px 0;
}

.board-util .common-board-search {
    position: relative;
    margin: 0 auto;
    width: 100%;
    padding: 0 15px;
    max-width: 1170px;
}
.board-util .search-input {
    float: right;
    position: relative;
    width: 414px;
    height: 45px;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
}

.board-util .search-input input {
    border: 0;
    border-radius: 0;
    padding: 0 10px;
    width: 100%;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    line-height: 45px;
}

.board-util .search-input input::placeholder {
    color: #c0c0c0 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
}

.board-util .search-input button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background-color: transparent;
    color: #c0c0c0;
    font-size: 26px;

    padding: 0;
}

.board-util .category-wrap {
    padding-top: 30px;
    padding-bottom: 60px;
}

.board-util .category-wrap .tab-wrap {
    width: 850px;
    margin: 0 auto;
    box-shadow: 0 1px 4px #d8d8d8;
    border-radius: 5px;
    background-color: #ffffff;
    overflow: hidden;
}

.board-util .category-wrap .tab-wrap .tab {
    float: left;
    width: 25%;
    line-height: 58px;
    text-align: center;
    color: #c0c0c0;
    font-size: 26px;
    font-weight: 400;
}

.board-util .category-wrap .tab-wrap .tab {
    position: relative;
    z-index: 99;
    cursor: pointer;
    float: left;
    width: 25%;
    text-align: center;
    line-height: 58px;
    color: #c0c0c0;
    font-size: 26px;
    font-weight: 400;
    transition: all 0.25s ease;
}

.board-util .category-wrap .tab-wrap .tab:before {
    z-index: -1;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 5px;
    transition: all 0.25s ease;
}

.board-util .category-wrap .tab-wrap .tab.active {
    color: #222222;
}

.board-util .category-wrap .tab-wrap .tab.active:before {
    opacity: 1;
    z-index: -1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}
.board-util .delete-btn {
    position: absolute;
    right: 15px;
    top: 60px;
}

.board-util .delete {
    /*position: absolute;
    right: 0;
    bottom: 21px;*/
    color: #c0c0c0;
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
}




@media all and (max-width: 1023px) {
    .board-util .category-wrap {
        overflow: scroll;
    }
}

@media all and (max-width: 767px) {
    .board-util {
        padding-top: 30px;
        padding-bottom: 50px;
    }

    .board-util .search-input {
        float: none;
        width: 248px;
        margin: 0 auto;
        height: 40px;
    }

    .board-util .search-input input {
        font-size: 14px;
        line-height: 40px;
    }

    .board-util .search-input input::placeholder {
        font-size: 14px !important;
    }

    .board-util .search-input button {
        font-size: 18px;
    }

    .board-util .category-wrap {
        overflow-x: scroll;
        padding-top: 20px;
        padding-bottom: 0;
    }

    .board-util .category-wrap .tab-wrap {
        width: 483px;
        box-shadow: unset;
    }

    .board-util .category-wrap .tab-wrap .tab {
        font-size: 14px;
        line-height: 40px;
    }
    .board-util .delete {
        right: 20px;
        bottom: 17px;
        font-size: 14px;
    }

}

.board-document {}

.board-document .document-header {
    position: relative;
    padding: 60px 0;
}

.board-document .document-header .navs {
    position: absolute;
    width: 100%;
}

.board-document .document-header .navs .nav-btn {
    cursor: pointer;
    z-index: 9;
    position: absolute;
    top: 0;
    width: 116px;
    height: 43px;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    text-align: center;
    line-height: 39px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    transition: all 0.25s ease;
}

.board-document .document-header .navs .nav-btn:hover {
    background-color: #fdd23e;
    color: #ffffff;
}

.board-document .document-header .navs .nav-btn i {
    color: #fdd23e;
    transition: all 0.25s ease;
}

.board-document .document-header .navs .nav-btn:hover i {
    color: #ffffff;
}

.board-document .document-header .navs .prev-nav {
    left: 0;
}

.board-document .document-header .navs .prev-nav i {
    margin-right: 10px;
}

.board-document .document-header .navs .next-nav {
    right: 0;
}

.board-document .document-header .navs .next-nav i {
    margin-left: 10px;
}

.board-document .document-header .title {
    position: relative;
    color: #222222;
    font-size: 26px;
    font-weight: 400;
    text-align: center;
}

.board-document .document-header .date {
    text-align: center;
    padding-top: 10px;
    color: #777777;
    font-size: 16px;
    font-weight: 400;
}

.board-document .document-content {
    padding: 60px 0;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;

}

.board-document .document-content .content {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
}

.board-document .document-control {
    padding: 60px 0;
    text-align: center;
}

.board-document .document-control .go-list {
    display: inline-block;
    color: #777777;
    font-size: 18px;
    line-height: 23px;
    font-weight: 400;
    border-radius: 23px;
    border: 2px solid #fdd23e;
    padding: 9px 25px;
    transition: all 0.25s ease;
}

.board-document .document-control .go-list:hover {
    color: #ffffff;
    background-color: #fdd23e;
}

@media all and (max-width: 767px) {
    .board-document .document-header {
        padding-top: 50px;
        padding-bottom: 30px;
    }

    .board-document .document-header .title {
        font-size: 20px;
        line-height: 30px;
    }

    .board-document .document-header .date {
        padding-top: 5px;
        font-size: 12px;
    }

    .board-document .document-content {
        padding: 30px 0;
    }

    .board-document .document-content .navs {
        padding-top: 30px;
    }

    .board-document .document-content .navs .nav-btn {
        width: 92px;
        height: 32px;
        border-radius: 21px;
        border: 2px solid #fdd23e;
        text-align: center;
        line-height: 28px;
        color: #777777;
        font-size: 12px;
        font-weight: 400;
        transition: all 0.25s ease;
    }

    .board-document .document-content .navs .nav-btn:hover {
        background-color: #fdd23e;
        color: #ffffff;
    }

    .board-document .document-content .navs .nav-btn i {
        color: #fdd23e;
        font-size: 18px;
        vertical-align: -2px;
        transition: all 0.25s ease;
    }

    .board-document .document-content .navs .nav-btn:hover i {
        color: #ffffff;
    }

    .board-document .document-content .navs .prev-nav {
        float: left;
    }

    .board-document .document-content .navs .prev-nav i {
        margin-right: 10px;
    }

    .board-document .document-content .navs .next-nav {
        float: right;
    }

    .board-document .document-content .navs .next-nav i {
        margin-left: 10px;
    }

    .board-document .document-control {
        padding: 30px 0;
    }

    .board-document .document-control .go-list {
        font-size: 12px;
        padding: 7px 15px;
        line-height: 14px;
    }

}

/**
 * pagination
 */
.board-pagination-wrap {}

.board-pagination {
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 90px;
}

.board-pagination li {
    color: #c0c0c0;
    font-size: 26px;
    font-weight: 400;
    line-height: 38px;
    margin: 0 15px;
    transition: all 0.25s ease;
}

.board-pagination li:hover {
    color: #222222;
}

.board-pagination li.active {
    color: #fdd23e;
    border-bottom: 1px solid #fdd23e;
}

.board-pagination li.prev-page {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.25s ease;
}

.board-pagination li.prev-page:hover {
    color: #fdd23e;
}

.board-pagination li.next-page {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.25s ease;
}

.board-pagination li.next-page:hover {
    color: #fdd23e;
}

@media all and (max-width: 767px) {
    .board-pagination {
        margin-bottom: 30px;
    }

    .board-pagination li {
        font-size: 16px;
        line-height: 24px;
        margin: 0 10px;
    }

}

/*== calendar ==*/
/* calendar */
#calendar {}

#calendar .year {
    background-color: rgba(253, 210, 62, 0.2);
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    letter-spacing: -0.5px;
    line-height: 20px;
    padding: 13px 20px;
}

#calendar .clndr-controls {
    position: relative;
    padding: 15px 20px 20px 20px;
}

#calendar .clndr-controls:after {
    content: "";
    display: block;
    clear: both;
}

#calendar .clndr-controls .btn {
    position: absolute;
    top: 30px;
    cursor: pointer;
    color: #fdd23e;
    width: 20px;
    height: 20px;
    border: 1px solid #fdd23e;
    border-radius: 50%;
    font-family: Ionicons;
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    letter-spacing: -0.5px;
}

#calendar .clndr-controls .clndr-previous-button {
    left: 20px;
}

#calendar .clndr-controls .clndr-next-button {
    right: 20px;
}

#calendar .clndr-controls .month {
    color: #333333;
    font-size: 24px;
    font-weight: 400;
    letter-spacing: -1.14px;
    text-align: center;
}

#calendar .clndr-grid {
    padding: 20px;
    padding-bottom: 30px;
    padding-top: 0;
    color: #c0c0c0;
    line-height: 15px;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.36px;
}

#calendar .clndr-grid .days-of-the-week {}

#calendar .clndr-grid .header {}

#calendar .clndr-grid .header:after {
    content: "";
    display: block;
    clear: both;
}

#calendar .clndr-grid .header-day {
    float: left;
    width: 14.285%;
    color: #a1a1a1;
    text-align: center;
}

#calendar .clndr-grid .separator {
    margin: 10px 0;
    width: 100%;
    height: 1px;
    background-color: #d8d8d8;
}

#calendar .clndr-grid .days {
    width: 100%;
}

#calendar .clndr-grid .days:after {
    content: "";
    display: block;
    clear: both;
}

#calendar .clndr-grid .days .day {
    float: left;
    display: table;
    width: 14.285%;
    text-align: center;
}

#calendar .clndr-grid .days .day .outer-wrap {
    display: table-cell;
    width: 100%;
    height: 100%;
    vertical-align: middle;
}

#calendar .clndr-grid .days .day .outer-wrap .inner-wrap {
    display: inline-block;
    width: 22px;
    height: 22px;
    line-height: 20px;
}

#calendar .clndr-grid .days .day.adjacent-month {
    color: #c0c0c0;
}

#calendar .clndr-grid .days .day.event {}

#calendar .clndr-grid .days .day.event .outer-wrap {}

#calendar .clndr-grid .days .day.event .outer-wrap .inner-wrap {
    border-radius: 50%;
    border: 1px solid #fdd23e;
    color: #222;
    font-weight: 780;
}

#calendar .clndr-grid .days .day.today {}

#calendar .clndr-grid .days .day.today .outer-wrap {}

#calendar .clndr-grid .days .day.today .outer-wrap .inner-wrap {
    border-radius: 50%;
}

/*== //calendar ==*/


/**
 * 자동투자
 */
#popup_wrap {}

#popup_wrap .popup_bg {
    display: none;
}

#popup_wrap .popup_content {
    display: none;
}

#popup_wrap .inner {
    background-color: #f5f5f5;
    padding: 40px;
}

#popup_wrap .content_01 {}

#popup_wrap .content_02 {
    display: none;
}

#popup_wrap .content_03 {
    display: none;

}

#popup_wrap .content_04 {
    display: none;
}

#popup_wrap .content_05 {
    display: none;
}

#popup_wrap .popup_bg {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9998;
    width: 100vw;
    height: 100vh;
    background-color: rgba(34, 34, 34, 0.5);
}

#popup_wrap .popup_content {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 9999;
    width: 500px;
    background-color: #ffffff;
}

#popup_wrap .header_wrap {
    position: relative;
    text-align: center;
    padding: 40px 0;
    background: #fff;
}

#popup_wrap .header_wrap .title {
    color: #222222;
    font-size: 30px;
    font-weight: 400;
}

#popup_wrap .header_wrap .exit {
    cursor: pointer;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    background-image: url(images/header/close@2x.png);
    -webkit-background-size: contain;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

#popup_wrap .step-wrap {
    position: relative;
    margin-bottom: 50px;
}

#popup_wrap .step-wrap:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 1px;
    background-color: #d8d8d8;
}

#popup_wrap .step-wrap .inner-wrap {
    position: relative;
    background-color: #f5f5f5;
    float: right;
    padding-left: 20px;
}

#popup_wrap .step-wrap .title {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding-right: 20px;
    line-height: 25px;
}

#popup_wrap .step-wrap .step {
    float: left;
}

#popup_wrap .step-wrap .step li {
    float: left;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    width: 25px;
    height: 25px;
    border: 1px solid #fdd23e;
    border-radius: 50%;
    text-align: center;
    line-height: 23px;
    margin: 0 3.5px;
}

#popup_wrap .step-wrap .step li:first-child {
    margin-left: 0;
}

#popup_wrap .step-wrap .step li:last-child {
    margin-right: 0;
}

#popup_wrap .step-wrap .step li.active {
    color: #222222;
    background-color: #fdd23e;
}

#popup_wrap .amount_wrap {
    text-align: center;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding-bottom: 40px;
}

#popup_wrap .amount_wrap .text {
    color: #777777;
    font-size: 22px;
    font-weight: 400;
}

#popup_wrap .amount_wrap .select-wrap {
    margin: 15px 0;
    margin-right: 15px;
    width: 157px;
    position: relative;
}

#popup_wrap .amount_wrap .select-wrap select {
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    width: 100%;
    border: 0;
    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
    height: 45px;
    line-height: 45px;
    padding-left: 15px;
}

#popup_wrap .amount_wrap .select-wrap .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

#popup_wrap .amount_wrap .hidden-div {
    position: relative;
}

#popup_wrap .amount_wrap .hidden-div input {
    border: 0;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    max-width: 180px;
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
}

#popup_wrap .amount_wrap .hidden-div .unit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}

#popup_wrap .amount_wrap .first {
    width: 100%;
}

#popup_wrap .description-wrap {
    border-radius: 15px;
    background-color: rgba(253, 210, 62, 0.3);
    padding: 20px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    word-break: keep-all;
}

#popup_wrap .next_btn {
    margin-top: 40px;
    text-align: center;
    font-size: 0;
}

#popup_wrap .next_btn button {
    background-color: #f5f5f5;
    cursor: pointer;
    display: inline-block;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    padding: 7px 15px;
    transition: all 0.25s ease;
}

#popup_wrap .next_btn button:last-child {
    margin-left: 20px;
}

#popup_wrap .next_btn button:hover {
    color: #ffffff;
    background-color: #fdd23e;
}

#popup_wrap .next_btn button i {
    color: #fdd23e;
    transition: all 0.25s ease;
}

#popup_wrap .next_btn button.popup_prev_btn i {
    padding-right: 15px;
}

#popup_wrap .next_btn button.popup_next_btn i {
    padding-left: 15px;
}

#popup_wrap .next_btn button:hover i {
    color: #ffffff;
}

#popup_wrap .return_splash {
    margin-bottom: 40px;
}

#popup_wrap .return_splash .splash_type {
    padding-bottom: 15px;
}

#popup_wrap .return_splash .splash_type input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#popup_wrap .return_splash .splash_type input:checked+.real_input_wrap {
    background-color: #222222;
}

#popup_wrap .return_splash .splash_type .real_input_wrap {
    display: inline-block;
    width: 12px;
    height: 12px;
    border: 2px solid #d8d8d8;
    background-color: #dddddd;
    border-radius: 50%;
}

#popup_wrap .return_splash .splash_type .splash_type_encourage {
    padding-left: 10px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#popup_wrap .return_splash .splash_type .splash_type_self {
    padding-left: 10px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#popup_wrap .return_splash .splash_type .encourage_wrap {
    padding-bottom: 10px;
}

#popup_wrap .return_splash .splash_type .self_wrap {}

#popup_wrap .return_splash .splash_value {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

#popup_wrap .return_splash .splash_value .min_value {
    position: relative;
    width: 68px;
    height: 38px;
    border-radius: 5px;
    border: 2px solid #fdd23e;
}

#popup_wrap .return_splash .splash_value .min_value input {
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    height: 100%;
    line-height: 34px;
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    padding-right: 30px;
    text-align: right;
}

#popup_wrap .return_splash .splash_value .min_value .per {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

#popup_wrap .return_splash .splash_value .min_value .month {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#popup_wrap .return_splash .splash_value .max_value {
    position: relative;
    width: 68px;
    height: 38px;
    border-radius: 5px;
    border: 2px solid #fdd23e;
}

#popup_wrap .return_splash .splash_value .max_value input {
    padding: 0;
    margin: 0;
    border: 0;
    width: 100%;
    height: 100%;
    line-height: 34px;
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    text-align: right;
    padding-right: 30px;
}

#popup_wrap .return_splash .splash_value .max_value .per {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
}

#popup_wrap .return_splash .splash_value .max_value .month {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

#popup_wrap .return_splash .splash_value .unit {
    margin: 0 15px;
    color: #777777;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
}

#popup_wrap .return_splash .splash_bar {
    margin-top: 10px;
}

#popup_wrap .return_splash .splash_bar .tooltip {
    display: none;
}

#popup_wrap .return_splash .splash_bar .slider.slider-horizontal {
    height: 10px;
}

#popup_wrap .return_splash .splash_bar .slider.slider-horizontal .slider-track {
    background-color: #dddddd;
    height: 5px;
}

#popup_wrap .return_splash .splash_bar .slider.slider-horizontal .slider-track .slider-selection {
    background-image: linear-gradient(to right, #fdd23e 0%, #a9860e 100%);
    height: 100%;
}

#popup_wrap .return_splash .splash_bar .slider.slider-horizontal .slider-track .slider-track-low,
#popup_wrap .return_splash .splash_bar .slider.slider-horizontal .slider-track .slider-track-high {
    height: 5px;
    background-color: #dddddd;
    border-radius: 0;
}

#popup_wrap .return_splash .splash_bar .min_value {
    float: left;
    color: #777777;
    font-size: 16px;
    font-weight: 400;
}

#popup_wrap .return_splash .splash_bar .max_value {
    float: right;
    color: #777777;
    font-size: 16px;
    font-weight: 400;
}

#popup_wrap .return_splash .slider.slider-horizontal .slider-tick,
.slider.slider-horizontal .slider-handle {
    width: 19px;
    height: 19px;
    border: 4px solid #fdd23e;
    background-color: #ffffff;
    top: -7px;
}

#popup_wrap .invest_term_wrap {
    margin-bottom: 40px;
}

#popup_wrap .invest_term.auto_invest {
    padding-top: 10px;
}

#popup_wrap .invest_term .name {
    float: left;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}

#popup_wrap .invest_term .arrow {
    float: right;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#popup_wrap .invest_term .arrow i {
    padding-left: 5px;
}

#popup_wrap .content_05 .description-wrap {
    background-color: #ebebeb;
    height: 220px;
    overflow-y: scroll;
}

#popup_wrap .content_05 .user_agree {
    margin-top: 20px;
    border-radius: 15px;
    background-color: rgba(253, 210, 62, 0.3);
}

#popup_wrap .content_05 .user_agree .text {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    line-height: 30px;
    height: 60px;
    padding-left: 20px;
}

#popup_wrap .content_05 .user_agree .text .bold {
    color: #222222;
    font-weight: 700;
}

#popup_wrap .content_05 .user_agree input {
    text-align: center;
    border-radius: 0 15px 15px 0;
    border: 0;
    width: 78px;
    height: 60px;
    float: right;
    background-color: #fdd23e;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#popup_wrap .content_05 .comment {
    padding-top: 20px;
    text-align: center;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

@media all and (max-width: 1023px) {
    #popup_wrap {}

    #popup_wrap .popup_content {
        width: 280px;
    }

    #popup_wrap .header_wrap {
        padding: 25px 0;
    }

    #popup_wrap .header_wrap .title {
        font-size: 20px;
    }

    #popup_wrap .header_wrap .exit {
        width: 20px;
        height: 20px;
        right: 20px;
    }

    #popup_wrap .inner {
        padding: 20px;
    }

    #popup_wrap .step-wrap {
        margin-bottom: 35px;
    }

    #popup_wrap .step-wrap:before {
        display: none;
    }

    #popup_wrap .step-wrap .inner-wrap {
        float: none;
        padding-left: 0;
    }

    #popup_wrap .step-wrap .title {
        font-size: 12px;
        line-height: 20px;
        padding-right: 0;
    }

    #popup_wrap .step-wrap .step {
        float: right;
    }

    #popup_wrap .step-wrap .step li {
        width: 20px;
        height: 20px;
        line-height: 18px;
        font-size: 11px;
        margin: 0 2.5px;
    }

    #popup_wrap .amount_wrap {
        padding-bottom: 35px;
    }

    #popup_wrap .amount_wrap .text {
        font-size: 14px;
    }

    #popup_wrap .amount_wrap .select-wrap {
        margin: 10px 0;
        margin-right: 10px;
        width: 100px;
    }

    #popup_wrap .amount_wrap .select-wrap select {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
    }

    #popup_wrap .amount_wrap .hidden-div input {
        height: 32px;
        line-height: 32px;
        font-size: 14px;
    }

    #popup_wrap .description-wrap {
        font-size: 12px;
        word-break: break-all;
    }

    #popup_wrap .next_btn {
        margin-top: 25px;
    }

    #popup_wrap .next_btn button {
        font-size: 12px;
    }

    #popup_wrap .return_splash {
        margin-bottom: 25px;
    }

    #popup_wrap .return_splash .splash_type {
        padding-bottom: 35px;
    }

    #popup_wrap .return_splash .splash_value input {
        font-size: 14px !important;
    }

    #popup_wrap .return_splash .splash_value .min_value .per {
        font-size: 14px;
    }

    #popup_wrap .return_splash .splash_value .min_value .month {
        font-size: 14px;
    }

    #popup_wrap .return_splash .slider.slider-horizontal .slider-tick,
    .slider.slider-horizontal .slider-handle {
        width: 13px;
        height: 13px;
        border-width: 3px;
        top: -4px;
    }

    #popup_wrap .return_splash .splash_bar .min_value {
        font-size: 12px;
    }

    #popup_wrap .return_splash .splash_bar .max_value {
        font-size: 12px;
    }

    #popup_wrap .content_05 .user_agree .text {
        width: 100%;
        text-align: center;
        font-size: 12px;
        line-height: 16px;
        padding: 0 10px;
        padding-top: 15px;
    }

    #popup_wrap .content_05 .user_agree input {
        width: 100%;
        border-radius: 0 0 15px 15px;
        height: 38px;
        line-height: 38px;
    }

    #popup_wrap .content_05 .comment {
        padding-top: 15px;
        font-size: 12px;
        text-align: left;
    }

}

/**
 * deal-card
 */
.deal-card {
    position: relative;
    display: block;
    box-shadow: 0 3px 7px rgba(216, 216, 216, 0.8);
    margin-bottom: 60px;
    transition: all 0.25s ease;
}

.deal-card:hover {
    box-shadow: 2px 3px 12px 1px #c0c0c0;
}

.deal-card .thumb {
    position: relative;
    background-color: #f1f1f1;
    height: 216px;
    border-radius: 0 0 0 60px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.deal-card .thumb .new {
    position: absolute;
    right: 15px;
    top: 15px;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    border-radius: 5px;
    background-color: #fdd23e;
    padding: 3px 14px;
}

.deal-card .content-wrap {
    padding: 25px;
}

.deal-card .content-wrap .badge-wrap {
    padding-bottom: 15px;
}

.deal-card .content-wrap .badge-wrap .status {
    margin-right: 15px;
}

.deal-card .content-wrap .badge-wrap .badge {
    float: left;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    padding-bottom: 3px;
    border-bottom: 3px solid #fdd23e;
}

.deal-card .content-wrap .badge-wrap .badge.temp {
    border-color: #fdd13e;
}

.deal-card .content-wrap .badge-wrap .badge.waiting {
    border-color: #fdd23e;
}

.deal-card .content-wrap .badge-wrap .badge.open {
    border-color: #a9860e;
}

.deal-card .content-wrap .badge-wrap .badge.success {
    border-color: #4a3a05;
}

.deal-card .content-wrap .badge-wrap .badge.repaying {
    border-color: #deb9ff;
}

.deal-card .content-wrap .badge-wrap .badge.done {
    border-color: #b055ff;
}

.deal-card .content-wrap .badge-wrap .badge.pause {
    border-color: #c33a15;
}

.deal-card .content-wrap .badge-wrap .badge.overdue {
    border-color: #ff8464;
}

.deal-card .content-wrap .badge-wrap .badge.cancel {
    border-color: #222222;
}

.deal-card .content-wrap .badge-wrap .badge.property {
    border-color: #99c3f8;
}

.deal-card .content-wrap .badge-wrap .badge.movables {
    border-color: #3e92fd;
}

.deal-card .content-wrap .badge-wrap .badge.business {
    border-color: #1655a4;
}

.deal-card .content-wrap .title {
    color: #222222;
    font-size: 26px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 30px;
}

.deal-card .content-wrap .data-wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 35px;
}

.deal-card .content-wrap .data-wrap .data {
    text-align: center;
    min-width: 85px;
}

.deal-card .content-wrap .data-wrap .data .name {
    color: #c0c0c0;
    font-size: 14px;
    line-height: 21px;
    font-weight: 400;
    padding-bottom: 5px;
}

.deal-card .content-wrap .data-wrap .data .value {
    color: #222222;
    font-size: 20px;
    font-weight: 400;
    line-height: 25px;
}

.deal-card .content-wrap .amount-wrap {
    padding: 7px 0;
    border-radius: 5px;
    background-color: #f5f5f5;
}

.deal-card .content-wrap .amount-wrap .no-open {
    text-align: center;
    color: #222222;
    font-size: 16px;
    font-weight: 400;
}

.deal-card .content-wrap .amount-wrap .no-open strong {
    font-weight: 700;
}

.deal-card .content-wrap .amount-wrap .amount {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

.deal-card .content-wrap .amount-wrap .amount .invested {
    color: #222222;
}

.deal-card .content-wrap .amount-wrap .amount .bar {}

.deal-card .content-wrap .amount-wrap .amount .request {}

.deal-card .graph {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
    background-color: #d8d8d8;
}

.deal-card .graph .bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

@media all and (max-width: 767px) {
    .deal-card {
        margin-bottom: 0;
    }

    .deal-card .thumb {
        height: 160px;
    }

    .deal-card .thumb .new {
        font-size: 14px;
    }

    .deal-card .content-wrap {
        padding: 20px;
    }

    .deal-card .content-wrap .badge-wrap {
        padding-bottom: 20px;
    }

    .deal-card .content-wrap .badge-wrap .badge {
        font-size: 14px;
        line-height: 21px;
        padding-bottom: 2px;
        border-width: 2px;
    }

    .deal-card .content-wrap .badge-wrap .status {
        margin-right: 10px;
    }

    .deal-card .content-wrap .title {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 20px;
    }

    .deal-card .content-wrap .data-wrap {
        margin-bottom: 20px;
    }

    .deal-card .content-wrap .data-wrap .data {
        min-width: 65px;
    }

    .deal-card .content-wrap .data-wrap .data .name {
        font-size: 12px;
        line-height: 18px;
        padding-bottom: 0;
    }

    .deal-card .content-wrap .data-wrap .data .value {
        font-size: 16px;
        line-height: 25px;
    }

    .deal-card .content-wrap .amount-wrap .no-open {
        font-size: 12px;
    }

    .deal-card .content-wrap .amount-wrap .amount {
        font-size: 12px;
    }

    .deal-card .graph {
        height: 2px;
    }
}

/**
 * pagination
 */
.pagination {
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 90px;
}

.pagination .page-numbers {
    color: #c0c0c0;
    font-size: 26px;
    font-weight: 400;
    line-height: 38px;
    margin: 0 15px;
    transition: all 0.25s ease;
}

.pagination .page-numbers:hover {
    color: #222222;
}

.pagination .page-numbers.last {
    display: none;
}

.pagination .page-numbers.first {
    display: none;
}

.pagination .page-numbers.current {
    color: #fdd23e;
    border-bottom: 2px solid #fdd23e;
}

.pagination .page-numbers.prev {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.25s ease;
}

.pagination .page-numbers.prev:hover {
    color: #fdd23e;
}

.pagination .page-numbers.next {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.25s ease;
}

.pagination .page-numbers.next:hover {
    color: #fdd23e;
}

@media all and (max-width: 767px) {
    .pagination {
        margin-bottom: 30px;
    }

    .pagination .page-numbers {
        font-size: 16px;
        line-height: 24px;
        margin: 0 10px;
    }

    .pagination .page-numbers.next,
    .pagination .page-numbers.prev {
        font-size: 22px;
        top: 2px;
    }
}

/**
 * popups
 */

/* layer */
.popup-layer {
    display: none;
    z-index: 9998;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(34, 34, 34, 0.5);
}

/****************************/
#alarm {
    display: none;
    z-index: 9999;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    background-color: #ffffff;
}

#alarm .title-wrap {
    padding: 40px 0;
    text-align: center;
    position: relative;
}

#alarm .title-wrap .title {
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 44px;
}

#alarm .title-wrap .close {
    z-index: 9;
    cursor: pointer;
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    width: 30px;
    height: 30px;
    background-image: url(images/header/close@2x.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

#alarm .content-wrap {
    padding: 40px 0;
    background-color: #f5f5f5;
}

#alarm .content-wrap .kakao {}

#alarm .content-wrap .sms {
    display: none;
    padding: 0 40px;
}

#alarm .content-wrap .button-wrap {
    max-width: 252px;
    margin: 0 auto;
    margin-bottom: 50px;
    box-shadow: 0 1px 4px #d8d8d8;
    border-radius: 5px;
    background-color: #ffffff;
}

#alarm .content-wrap .button-wrap .button {
    position: relative;
    float: left;
    width: 50%;
    color: #c0c0c0;
    font-size: 22px;
    font-weight: 400;
    border-radius: 5px;
    padding: 12px 0;
    text-align: center;
    z-index: 11;
    cursor: pointer;
}

#alarm .content-wrap .button-wrap .button:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 5px;
    opacity: 0;
    z-index: -1;
    transition: all 0.25s ease;
}

#alarm .content-wrap .button-wrap .button.active {
    color: #222222;
}

#alarm .content-wrap .button-wrap .button.active:before {
    opacity: 1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);

}

#alarm .content-wrap .desc {
    color: #777777;
    font-size: 22px;
    font-weight: 400;
    line-height: 33px;
    text-align: center;
    padding-bottom: 50px;
}

#alarm .content-wrap .data-wrap {}

#alarm .content-wrap .data-wrap .input-wrap {
    margin-bottom: 30px;
}

#alarm .content-wrap .data-wrap .input-wrap .name {
    color: #222222;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding-bottom: 10px;
}

#alarm .content-wrap .data-wrap .input-wrap input {
    border: 0;
    padding: 10px 15px;
    font-size: 18px;
    font-weight: 400;
    width: 100%;
    height: 47px;
    line-height: 47px;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
}

#alarm .content-wrap .data-wrap .input-wrap input::placeholder {
    color: #c0c0c0 !important;
    font-size: 18px !important;
}

#alarm .content-wrap .data-wrap .notice {
    position: relative;
    padding-left: 18px;
    color: #c0c0c0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    word-break: keep-all;
    padding-bottom: 30px;
}

#alarm .content-wrap .data-wrap .notice:before {
    content: '※';
    position: absolute;
    left: 0;
    top: 0;
}

#alarm .content-wrap .add-wrap {
    text-align: center;
}

#alarm .content-wrap .add-wrap a {
    text-align: left;
    display: inline-block;
    position: relative;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    padding: 8px 0;
    padding-left: 15px;
    width: 240px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#alarm .content-wrap .add-wrap a i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #fdd23e;
}

#alarm .content-wrap .sms .add-wrap a {
    width: 207px;
}

@media all and (max-width: 767px) {
    #alarm {
        width: calc(100% - 40px);
    }

    #alarm .title-wrap {
        padding: 25px 0;
    }

    #alarm .title-wrap .title {
        font-size: 20px;
        line-height: 30px;
    }

    #alarm .title-wrap .close {
        right: 20px;
        width: 20px;
        height: 20px;
    }

    #alarm .content-wrap {
        padding: 25px 0;
    }

    #alarm .content-wrap .sms {
        padding: 0 20px;
    }

    #alarm .content-wrap .button-wrap {
        max-width: 164px;
        margin-bottom: 25px;
    }

    #alarm .content-wrap .button-wrap .button {
        font-size: 14px;
        line-height: 20px;
        padding: 10px 0px;
    }

    #alarm .content-wrap .desc {
        font-size: 14px;
        line-height: 21px;
        padding-bottom: 25px;
    }

    #alarm .content-wrap .data-wrap .input-wrap {
        margin-bottom: 20px;
    }

    #alarm .content-wrap .data-wrap .input-wrap .name {
        font-size: 12px;
        line-height: 18px;
        padding-bottom: 5px;
    }

    #alarm .content-wrap .data-wrap .input-wrap input {
        line-height: 40px;
        height: 40px;
        font: 14px;
    }

    #alarm .content-wrap .data-wrap .input-wrap input::placeholder {
        font-size: 14px !important;
    }

    #alarm .content-wrap .data-wrap .notice {
        font-size: 14px;
        line-height: 21px;
    }

    #alarm .content-wrap .add-wrap a {
        width: 174px;
        font-size: 12px;
        line-height: 18px;
    }

    #alarm .content-wrap .add-wrap a i {
        font-size: 16px;
    }

    #alarm .content-wrap .sms .add-wrap a {
        width: 152px;
    }
}

/*
* Header
*/
#header {
    z-index: 9998;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
}

#header.none {
    display: none;
}

#header.hovered .gnb {
    box-shadow: 0 2px 5px rgba(216, 216, 216, 0.8);
    background-color: #ffffff;
}

#header .gnb {
    position: relative;
    height: 80px;
    z-index: 9998;
    transition: all 0.25s ease;

    background-color: transparent;
    box-shadow: unset;
}

body.scrolled #header .gnb {
    box-shadow: 0 2px 5px rgba(216, 216, 216, 0.8);
    background-color: #ffffff;
}

#header .gnb .header-logo {
    float: left;
    width: 106px;
    margin-top: 25px;
}

#header .gnb .header-logo img {
    display: block;
    width: 100%;
}

#header .gnb .header-logo .white {
    display: none;
}

#header .gnb .header-menu {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#header .gnb .header-menu #menu-main {
    font-size: 0;
    min-width: 536px;
}

#header .gnb .header-menu #menu-main>.menu-item {
    position: relative;
    display: inline-block;
    margin: 0 35px;
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    line-height: 80px;
}

#header .gnb .header-menu #menu-main>.menu-item>a {
    position: relative;
    line-height: 80px;
    display: block;
}

#header .gnb .header-menu #menu-main>.menu-item>a:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: #222222;
    transition: all 0.25s ease;
}

#header .gnb .header-menu #menu-main>.menu-item>a:hover {
    color: #222222;
    font-weight: 700;
}

#header .gnb .header-menu #menu-main>.menu-item>a:hover:before {
    width: 100%;
}

#header .gnb .header-menu #menu-main>.menu-item>a.active {
    color: #222222;
    font-weight: 700;
}

#header .gnb .header-menu #menu-main>.menu-item>a.active:before {
    width: 100%;
}

#header .gnb .header-menu #menu-main .sub-menu {
    position: absolute;
    left: 50%;
    top: 100px;
    width: 100%;
    min-width: 130px;
    transform: translateX(-50%);
    display: none;
}

#header .gnb .header-menu #menu-main .sub-menu>.menu-item {
    line-height: 20px;
    text-align: center;
    padding: 10px 0;
    font-size: 14px;
}

#header .gnb .header-menu #menu-main .sub-menu>.menu-item>a {
    display: block;
    line-height: 20px;
}

#header .gnb .header-menu #menu-main .sub-menu>.menu-item>a:hover {
    color: #222222;
    font-weight: 700;
}

#header .gnb .header-util {
    float: right;
}

#header .gnb .header-util ul {
    font-size: 0;
}

#header .gnb .header-util ul li {
    margin: 0 35px;
    display: inline-block;
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    line-height: 80px;
}

#header .gnb .header-util ul li a {
    position: relative;
    display: block;
    line-height: 80px;
}

#header .gnb .header-util ul li a:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background-color: #222222;
    transition: all 0.25s ease;
}

#header .gnb .header-util ul li a:hover {
    color: #222222;
    font-weight: 700;
}

#header .gnb .header-util ul li a:hover:before {
    width: 100%;
}

#header .gnb .toggle {
    display: none;
}

#header .menu-bg {
    position: absolute;
    left: 0;
    top: 80px;
    width: 100%;
    height: 0;
    box-shadow: 0 2px 5px rgba(216, 216, 216, 0.8);
    background-color: #ffffff;
    z-index: 9997;
}

@media all and (max-width: 1023px) {
    #header .gnb {
        height: 60px;
    }

    #header .gnb .col-12 {
        padding: 0 30px;
    }

    #header .gnb .header-logo {
        width: 86px;
        margin-top: 18px;
    }

    #header .gnb .header-menu {
        display: none;
    }

    #header .gnb .header-menu #menu-main {
        min-width: unset;
    }

    #header .gnb .header-util {
        display: none;
    }

    #header .gnb .toggle {
        display: block;
        max-width: 28px;
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translateY(-50%);
    }
}

@media all and (max-width: 767px) {
    #header .gnb {
        height: 50px;
    }

    #header .gnb .col-12 {
        padding: 0 15px;
    }

    #header .gnb .header-logo {
        width: 20px;
        margin-top: 11px;
    }

    #header .gnb .toggle {
        right: 15px;
        max-width: 18px;
    }
}

/*
* sideBar
*/
#sideBar {
    display: block;
    position: fixed;
    right: -100%;
    top: 0;
    width: 512px;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    transition: all 0.25s ease;
    background-image: url(images/header/sidebar-bg@2x.png);
    background-size: 405px 270px;
    background-repeat: no-repeat;
    background-position: right bottom;
}

#sidebar-bg {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(34, 34, 34, 0.5);
    z-index: 9998;
    transition: all 0.25s ease;
}

#sideBar.active {
    right: 0;
}

#sideBar .sidebar-top {
    padding: 24px 40px;
    border-bottom: 1px solid #ebebeb;
}

#sideBar .sidebar-top .home {
    line-height: 22px;
    float: left;
    color: #aaa;
    font-size: 20px;
}

#sideBar .sidebar-top .home i {
    vertical-align: top;
}

#sideBar .sidebar-top .close {
    float: right;
    width: 100%;
    max-width: 20px;
    text-align: center;
    vertical-align: top;
    font-size: 29px;
    line-height: 20px;
    color: #aaa;
}

#sideBar .sidebar-top .close i {
    vertical-align: top;
}

#sideBar .sidebar-top .close img {
    display: block;
    width: 100%;
}

#sideBar .sidebar-menu {
    padding: 40px;
}

#sideBar .sidebar-menu #sidebar-main>.menu-item {
    padding-bottom: 50px;
}

#sideBar .sidebar-menu #sidebar-main>.menu-item:last-child {
    padding-bottom: 0;
}

#sideBar .sidebar-menu #sidebar-main>.menu-item:after {
    content: '';
    display: block;
    clear: both;
}

#sideBar .sidebar-menu #sidebar-main>.menu-item>a {
    float: left;
    width: 110px;
    line-height: 24px;
    color: #222222;
    font-size: 16px;
    font-weight: 700;
}

#sideBar .sidebar-menu #sidebar-main .sub-menu {
    float: left;
}

#sideBar .sidebar-menu #sidebar-main .sub-menu>.menu-item {
    padding-bottom: 15px;
}

#sideBar .sidebar-menu #sidebar-main .sub-menu>.menu-item:last-child {
    padding-bottom: 0;
}

#sideBar .sidebar-menu #sidebar-main .sub-menu>.menu-item>a {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
}

#sideBar .sidebar-util {
    position: absolute;
    left: 40px;
    bottom: 40px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

#sideBar .sidebar-util a {
    min-width: 138px;
    margin: 0 10px;

    color: #777777;
    font-size: 16px;
    font-weight: 400;
    border-radius: 27px;
    line-height: 24px;

    border: 2px solid #fdd23e;
    padding: 10px 15px;
}

#sideBar .sidebar-util a:first-child {
    margin-left: 0;
}

#sideBar .sidebar-util a:last-child {
    margin-right: 0;
}

#sideBar .sidebar-util a:last-child i.arrow {
    color: #fdd23e;
}

#sideBar .sidebar-util a.register {
    border: 2px solid #c0c0c0;
}

#sideBar .sidebar-util a i:not(.arrow) {
    color: #777777;
    font-size: 16px;
    margin-right: 5px;
    line-height: 24px;
}

#sideBar .sidebar-util a i.arrow {
    float: right;
    line-height: 24px;
    padding-left: 15px;
}

#sideBar .sidebar-util a.mypage i.arrow {
    color: #fdd23e;
}

#sidebar-bg.active {
    opacity: 1;
    visibility: visible;
}

@media all and (max-width: 767px) {
    #sideBar .sidebar-util a i.arrow {
        padding-left: 10px;
    }

    #sideBar {
        width: 100%;
        background-image: unset;
    }

    #sideBar .sidebar-top {
        padding: 20px 25px;
        border-bottom: 0;
    }

    #sideBar .sidebar-menu {
        padding: 0;
        padding-top: 10px;
        padding-left: 25px;
        padding-bottom: 130px;
        overflow-y: scroll;
        height: 100%;
    }

    #sideBar .sidebar-menu #sidebar-main>.menu-item {
        padding-bottom: 30px;
    }

    #sideBar .sidebar-menu #sidebar-main>.menu-item>a {
        width: 85px;
        font-size: 14px;
        line-height: 21px;
    }

    #sideBar .sidebar-menu #sidebar-main .sub-menu>.menu-item {
        padding-bottom: 10px;
    }

    #sideBar .sidebar-menu #sidebar-main .sub-menu>.menu-item>a {
        font-size: 14px;
    }

    #sideBar .sidebar-util {
        padding: 15px 25px;
        background-color: rgba(253, 210, 62, 0.15);
        width: 100%;
        left: 0;
        bottom: 0;
    }

    #sideBar .sidebar-util a {
        padding: 5px 15px;
        font-size: 14px;
        line-height: 21px;
        width: 50%;
    }

    #sideBar .sidebar-util a i:not(.arrow) {
        font-size: 14px;
        line-height: 21px;
        margin-right: 5px;
    }

    #sideBar .sidebar-util a i.arrow {
        line-height: 21px;
    }
}

/*
* footer
*/
#footer {}

#footer .footer-top {
    padding: 20px 0;
    background-color: rgba(253, 210, 62, 0.15);
}

#footer .footer-top .footer-logo {
    float: left;
}

#footer .footer-top .footer-logo img {
    /*display: block;*/
}

#footer .footer-top .footer-nav {
    float: right;
}

#footer .footer-top .footer-nav ul {}

#footer .footer-top .footer-nav ul li {
    float: left;
    margin: 0 15px;
}

#footer .footer-top .footer-nav ul li:first-child {
    margin-left: 0;
}

#footer .footer-top .footer-nav ul li:last-child {
    margin-right: 0;
}

#footer .footer-top .footer-nav ul li a {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    line-height: 30px;
}

#footer .footer-bot {
    padding: 40px 0;
}

#footer .footer-bot ul {}

#footer .footer-bot ul li {
    display: table;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 15px;
}

#footer .footer-bot ul li:after {
    clear: both;
    content: '';
    display: table;
}

#footer .footer-bot ul li:last-child {
    padding-bottom: 0;
}

#footer .footer-bot ul li.name {
    color: #222222;
    display: block;
    font-size: 16px;
    font-weight: 700;
}

#footer .footer-bot ul li strong {
    color: #222222;
    padding-right: 15px;
    display: table-cell;
    min-width: 28px;
    box-sizing: content-box;
}

#footer .footer-bot ul li span {
    color: #777777;
    display: table-cell;
}

#footer .footer-bot .notice {
    position: relative;
}

#footer .footer-bot .notice #topBtn {
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 40px;
    border-radius: 21px;
    background-image: linear-gradient(227deg, #ffeb72 0%, #fdd23e 100%);
    text-align: center;
}

#footer .footer-bot .notice #topBtn i {
    font-size: 24px;
    line-height: 40px;
    color: #ffffff;
}

#footer .footer-bot .notice .link {
    display: inline-block;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    padding: 10px 15px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.25s ease;
}

#footer .footer-bot .notice .link i {
    margin-left: 30px;
    color: #fdd23e;
    transition: all 0.25s ease;
}

#footer .footer-bot .notice .link:hover {
    background-color: #fdd23e;
    color: #ffffff;
}

#footer .footer-bot .notice .link:hover i {
    color: #ffffff;
}

#footer .footer-bot .notice p {
    padding-top: 30px;
    line-height: 20px;
    color: #c0c0c0;
    font-size: 13px;
    font-weight: 400;
}

@media all and (max-width: 1023px) {
    #footer .footer-top .footer-logo {
        width: 83px;
    }

    #footer .footer-top .footer-nav ul li a {
        font-size: 14px;
        line-height: 20px;
    }

    #footer .footer-bot {
        padding-top: 30px;
    }

    #footer .footer-bot .notice {
        margin-top: 30px;
        padding-top: 30px;
        border-top: 1px solid #d8d8d8;
    }

    #footer .footer-bot .notice #topBtn {
        top: 30px;
    }
}

@media all and (max-width: 767px) {
    #footer .footer-top {}

    #footer .footer-top .footer-logo {
        width: 20px;
    }

    #footer .footer-top .footer-nav {
        margin-top: 3px;
        position: relative;
    }

    #footer .footer-top .footer-nav select {
        border: 0;
        border-radius: 0;
        background-color: transparent;
        min-width: 130px;
        color: #777777;
        font-size: 14px;
        font-weight: 400;
    }

    #footer .footer-top .footer-nav .arrow {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        color: #fdd23e;
        font-size: 16px;
    }

    #footer .footer-bot {
        position: relative;
        padding-top: 20px;
    }

    #footer .footer-bot ul li {
        font-size: 12px;
        padding-bottom: 10px;
    }

    #footer .footer-bot .company {
        padding-bottom: 20px;
        border-bottom: 1px solid #d8d8d8;
    }

    #footer .footer-bot .finance {
        padding-top: 20px;
        padding-bottom: 20px;
        border-bottom: 1px solid #d8d8d8;
    }

    #footer .footer-bot .notice {
        position: static;
        padding-top: 20px;
        margin-top: 0;
        border-top: 0;
    }

    #footer .footer-bot .notice #topBtn {
        top: 20px;
        right: 15px;
        width: 30px;
        height: 30px;
    }

    #footer .footer-bot .notice #topBtn i {
        font-size: 18px;
        line-height: 30px;
    }

    #footer .footer-bot .notice .link {
        padding-right: 50px;
        position: relative;
    }

    #footer .footer-bot .notice .link i {
        font-size: 26px;
        margin-left: 0;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }

    #footer .footer-bot .notice p {
        padding-top: 20px;
    }
}

/**
 * main
 */
#main {}

#main .main-slider {
    height: 900px;
    position: relative;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.6);
}

#main .main-slider .slider-wrap {
    padding-top: 200px;
    position: relative;
    box-sizing: content-box;
    height: 560px;
}

#main .main-slider .slider-wrap .container {
    position: relative;
    height: 560px;
}

#main .main-slider .slider-wrap .slider-bg {
    position: absolute;
    right: 0;
    top: 0;
    width: 605px;
    height: 710px;
    border-radius: 0 0 0 120px;
    background-image: url(images/main/bg01.png), linear-gradient(142deg, #ffee89 0%, #fdd23e 100%);
}

#main .main-slider .slider-index {
    width: 100%;
    max-width: 205px;
    position: absolute;
    right: 0;
    bottom: 220px;
}

#main .main-slider .slider-index .number {
    padding-left: 20px;
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    line-height: 38px;
    padding-bottom: 10px;
}

#main .main-slider .slider-index .bar {
    position: relative;
    width: 100%;
    height: 5px;
}

#main .main-slider .slider-index .bar .bar-bg {
    width: 100%;
    height: 100%;
    background-color: #ffee89;
    opacity: 0.6;
}

#main .main-slider .slider-index .bar .bar-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 20%;
    background-color: #ffffff;
    height: 100%;
    transition: all 0.25s ease;
}

#main .main-slider .slider-wrap .badge-wrap {
    margin-bottom: 15px;
}

#main .main-slider .slider-wrap .badge-wrap .badge {
    float: left;
}

#main .main-slider .slider-wrap .badge-wrap .new {
    margin-right: 15px;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    line-height: 33px;
    padding: 0 15px;
    border-radius: 5px;
    background-color: #fdd23e;
}

#main .main-slider .slider-wrap .badge-wrap .status {
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    padding-bottom: 3px;
    border-bottom: 3px solid #fdd23e;
}

/* status badge color */
#main .main-slider .slider-wrap .badge-wrap .status.temp {
    border-color: #fdd13e;
}

#main .main-slider .slider-wrap .badge-wrap .status.waiting {
    border-color: #fdd23e;
}

#main .main-slider .slider-wrap .badge-wrap .status.open {
    border-color: #a9860e;
}

#main .main-slider .slider-wrap .badge-wrap .status.success {
    border-color: #4a3a05;
}

#main .main-slider .slider-wrap .badge-wrap .status.repaying {
    border-color: #deb9ff;
}

#main .main-slider .slider-wrap .badge-wrap .status.done {
    border-color: #b055ff;
}

#main .main-slider .slider-wrap .badge-wrap .status.pause {
    border-color: #c33a15;
}

#main .main-slider .slider-wrap .badge-wrap .status.overdue {
    border-color: #ff8464;
}

#main .main-slider .slider-wrap .badge-wrap .status.cancel {
    border-color: #222222;
}

#main .main-slider .slider-wrap .title-wrap {
    margin-bottom: 60px;
}

#main .main-slider .slider-wrap .title-wrap .title {
    max-width: 600px;
    color: #222222;
    font-size: 44px;
    font-weight: 400;
    line-height: 66px;
    max-height: 132px;

    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#main .main-slider .slider-wrap .data-wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
}

#main .main-slider .slider-wrap .data-wrap .data {
    margin-right: 60px;
}

#main .main-slider .slider-wrap .data-wrap .data:last-child {
    margin-right: 0;
}

#main .main-slider .slider-wrap .data-wrap .data .name {
    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    padding-bottom: 10px;
}

#main .main-slider .slider-wrap .data-wrap .data .value {
    color: #222222;
    font-size: 26px;
    font-weight: 400;
    line-height: 38px;
}

#main .main-slider .slider-wrap .percent-wrap {
    margin-top: 160px;
    float: left;
    position: absolute;
    left: 15px;
    bottom: 30px;
}

#main .main-slider .slider-wrap .percent-wrap .percent {
    float: left;
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    margin-right: 30px;
}

#main .main-slider .slider-wrap .percent-wrap .percent .unit {
    font-size: 20px;
    padding-left: 3px;
}

#main .main-slider .slider-wrap .percent-wrap .people {
    float: left;
    margin-top: 10px;
    border-radius: 5px;
    background-color: #f5f5f5;
    padding: 5px 15px;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}

#main .main-slider .slider-wrap .percent-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
}

#main .main-slider .slider-wrap .percent-bar .bar-bg {
    width: 100%;
    height: 100%;
    background-color: #d8d8d8;
}

#main .main-slider .slider-wrap .percent-bar .bar-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    background-image: linear-gradient(142deg, #ffee89 0%, #fdd23e 100%);
}

#main .main-slider .slick-list {
    overflow: visible;
}

#main .main-slider .slider-wrap.banner {
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.7);
}

#main .main-slider .slider-wrap.banner .title-wrap {}

#main .main-slider .slider-wrap.banner .title-wrap .title {
    max-width: unset;
}

#main .main-slider .slider-wrap.banner .title-wrap .title strong {
    font-weight: 700;
}

#main .main-slider .slider-wrap.banner .desc {
    margin-top: 30px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

#main .main-slider .slider-wrap.banner .button-wrap {
    margin-top: 60px;
    font-size: 0;
}

#main .main-slider .slider-wrap.banner .button-wrap .button {
    position: relative;
    display: inline-block;
    width: 168px;
    padding: 7px 0;
    padding-left: 15px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    text-align: left;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    margin-right: 30px;
}

#main .main-slider .slider-wrap.banner .button-wrap .button:last-child {
    margin-right: 0;
}

#main .main-slider .slider-wrap.banner .button-wrap .button i {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #fdd23e;
}

#main .main-slider .slider-wrap.banner .slider-bg {
    background-image: url(images/main/toge-bg.png);
}

#main .main-slider .slider-wrap.banner .slider-bg:before {
    content: '';
    position: absolute;
    left: -65px;
    bottom: 0;
    background-image: url(images/main/toge@2x.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 638px;
    height: 566px;
}

#main .main-slider .slider-util-wrap {}

#main .main-slider .slider-util-wrap .slider-util {
    height: 140px;
    position: relative;
}

#main .main-slider .slider-util-wrap .slider-nav {}

#main .main-slider .slider-util-wrap .slider-nav .slick-arrow.slick-disabled {
    cursor: not-allowed;
}

#main .main-slider .slider-util-wrap .slider-nav .slick-arrow.slick-disabled i:hover {
    cursor: not-allowed;
    color: #d8d8d8;
    border-color: #d8d8d8;
}

#main .main-slider .slider-util-wrap .slider-nav .slick-arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#main .main-slider .slider-util-wrap .slider-nav .slick-arrow i {
    display: inline-block;
    font-size: 34px;
    width: 50px;
    height: 50px;
    color: #d8d8d8;
    line-height: 42px;
    text-align: center;
    border-radius: 50%;
    border: 3px solid #d8d8d8;
    transition: all 0.25s ease;
}

#main .main-slider .slider-util-wrap .slider-nav .slick-arrow i:hover {
    color: #fdd23e;
    border-color: #fdd23e;
}

#main .main-slider .slider-util-wrap .slider-nav .nav-prev {
    left: 0;
}

#main .main-slider .slider-util-wrap .slider-nav .nav-next {
    right: 0;
}

#main .main-slider .slider-util-wrap .slider-list {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 950px;
    width: 100%;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    transition: all 0.25s ease;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots.toRight {
    transform: translateX(-100%);
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li {
    width: 100%;
    max-width: 190px;
    min-width: 190px;
    margin: 0 30px;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li:first-child {
    margin-left: 0;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li:nth-last-child(2) {
    margin-right: 0;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button {
    cursor: pointer;
    border: 0;
    padding: 0;
    display: block;
    background-color: transparent;
    width: 100%;
    text-align: left;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-status {
    transition: all 0.25s ease;
    display: inline-block;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    padding-bottom: 3px;
    border-bottom: 3px solid #fdd23e;
}

/* status badge color */
#main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-status.temp {
    border-color: #fdd13e;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-status.waiting {
    border-color: #fdd23e;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-status.open {
    border-color: #a9860e;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-status.success {
    border-color: #4a3a05;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-status.repaying {
    border-color: #deb9ff;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-status.done {
    border-color: #b055ff;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-status.pause {
    border-color: #c33a15;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-status.overdue {
    border-color: #ff8464;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-status.cancel {
    border-color: #222222;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-title {
    transition: all 0.25s ease;
    margin-top: 15px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li.slick-active {}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li.slick-active .dot-button {}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li.slick-active .dot-button .dot-status {
    color: #222222;
}

#main .main-slider .slider-util-wrap .slider-list .slick-dots li.slick-active .dot-button .dot-title {
    color: #222222;
}

@media all and (max-width: 1023px) {
    #main .main-slider {
        height: 1024px;
    }

    #main .main-slider .slider-wrap {
        padding-top: 120px;
        height: 769px;
    }

    #main .main-slider .slider-wrap .container {
        height: 769px;
    }

    #main .main-slider .slider-wrap .col-12 {
        padding: 0 30px;
    }

    #main .main-slider .slider-wrap .title-wrap .title {
        max-width: 410px;
        max-height: 198px;
        -webkit-line-clamp: 3;
        word-break: keep-all;
    }

    #main .main-slider .slider-wrap .slider-bg {
        width: 433px;
        height: 810px;
        z-index: -1;
        background-position: center bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #main .main-slider .slider-wrap .data-wrap {
        display: block;
    }

    #main .main-slider .slider-wrap .data-wrap .data {
        margin-right: 0;
        margin-bottom: 30px;
    }

    #main .main-slider .slider-wrap .data-wrap .data:last-child {
        margin-bottom: 0;
    }

    #main .main-slider .slider-wrap .percent-wrap {
        margin-top: 90px;
    }

    #main .main-slider .slider-wrap.banner .title-wrap {
        margin-bottom: 30px;
    }

    #main .main-slider .slider-wrap.banner .desc {
        max-width: 210px;
        word-break: keep-all;
    }

    #main .main-slider .slider-wrap.banner .button-wrap {
        margin-top: 160px;
    }

    #main .main-slider .slider-wrap.banner .button-wrap .button {
        display: block;
        margin-right: 0;
        margin-bottom: 15px;
    }

    #main .main-slider .slider-wrap.banner .button-wrap .button:last-child {
        margin-bottom: 0;
    }

    #main .main-slider .slider-index {
        max-width: 180px;
        bottom: 244px;
    }

    #main .main-slider .slider-index .number {
        padding-left: 14px;
    }

    #main .main-slider .slider-util-wrap .col-12 {
        padding: 0 30px;
    }

    #main .main-slider .slider-util-wrap .slider-list {
        max-width: 588px;
    }

    #main .main-slider .slider-util-wrap .slider-nav .slick-arrow i {
        width: 30px;
        height: 30px;
        line-height: 26px;
        border-width: 2px;
        font-size: 20px;
    }

    #main .main-slider .slider-util-wrap .slider-list .slick-dots li {
        width: 25%;
        min-width: 124.5px;
        max-width: 124.5px;
        margin: 0 15px;
    }
}

@media all and (max-width: 767px) {
    #main .main-slider .slider-wrap.banner .slider-bg:before {
        left: 0;
        -webkit-background-size: cover;
        background-size: cover;
        width: 100%;
        height: 314px;
        border-radius: 0 0 0 60px;
    }

    #main .main-slider {
        height: 540px;
    }

    #main .main-slider .slider-wrap {
        padding-top: 70px;
        height: 390px;
    }

    #main .main-slider .slider-wrap .container {
        height: 390px;
    }

    #main .main-slider .slider-index {
        max-width: 70px;
        bottom: 247px;
    }

    #main .main-slider .slider-index .number {
        padding-left: 3px;
        font-size: 14px;
        line-height: 21px;
        padding-bottom: 0;
    }

    #main .main-slider .slider-index .bar {
        height: 2px;
    }

    #main .main-slider .slider-wrap .col-12 {
        padding: 0 20px;
    }

    #main .main-slider .slider-wrap .slider-bg {
        width: 140px;
        height: 314px;
        border-radius: 0 0 0 60px;
    }

    #main .main-slider .slider-wrap .badge-wrap .new {
        margin-right: 10px;
        font-size: 13px;
        padding: 0 11px;
        line-height: 25px;
    }

    #main .main-slider .slider-wrap .badge-wrap .status {
        font-size: 14px;
        line-height: 21px;
        padding-bottom: 2px;
        border-width: 2px;
    }

    #main .main-slider .slider-wrap .title-wrap {
        margin-bottom: 30px;
    }

    #main .main-slider .slider-wrap .title-wrap .title {
        font-size: 26px;
        line-height: 39px;
        max-width: 210px;
        max-height: 117px;
    }

    #main .main-slider .slider-wrap .data-wrap .data {
        margin-bottom: 20px;
    }

    #main .main-slider .slider-wrap .data-wrap .data .name {
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 0;
    }

    #main .main-slider .slider-wrap .data-wrap .data .value {
        font-size: 18px;
        line-height: 27px;
    }

    #main .main-slider .slider-wrap .percent-wrap {
        margin-top: 0;
        float: none;
        position: absolute;
        right: 20px;
        bottom: 20px;
        left: auto;
    }

    #main .main-slider .slider-wrap .percent-wrap .percent {
        float: none;
        margin-right: 0;
        font-size: 24px;
        padding-bottom: 3px;
        text-align: right;
    }

    #main .main-slider .slider-wrap .percent-bar {
        height: 2px;
    }

    #main .main-slider .slider-wrap .percent-wrap .percent .unit {
        font-size: 12px;
        padding-left: 2px;
    }

    #main .main-slider .slider-wrap .percent-wrap .people {
        float: none;
        margin-top: 0;
        padding: 5px 10px;
        font-size: 14px;
        line-height: 20px;
    }

    #main .main-slider .slider-wrap.banner .title-wrap .title {
        font-size: 22px;
        max-width: unset;
        -webkit-line-clamp: unset;
        max-height: unset;
        line-height: 33px;
        word-break: break-all;
    }

    #main .main-slider .slider-wrap.banner .desc {
        font-size: 12px;
        line-height: 18px;
        max-width: 140px;
        word-break: break-all;
    }

    #main .main-slider .slider-wrap.banner .desc br {
        display: none;
    }

    #main .main-slider .slider-wrap.banner .button-wrap {
        margin: 0 -20px;
        margin-top: 60px;
        overflow-x: scroll;
        padding-left: 20px;
    }

    #main .main-slider .slider-wrap.banner .button-wrap .inner-wrap {
        min-width: 370px;
    }

    #main .main-slider .slider-wrap.banner .button-wrap .button {
        display: inline-block;
        margin-right: 15px;
        margin-bottom: 0;
        width: unset;
        padding: 7px 15px;
        padding-right: 40px;
        font-size: 12px;
        line-height: 18px;
    }

    #main .main-slider .slider-wrap.banner .button-wrap .button i {
        font-size: 16px;
    }

    #main .main-slider .slider-util-wrap .col-12 {
        padding: 0 20px;
    }

    #main .main-slider .slider-util-wrap .slider-util {
        height: 80px;
    }

    #main .main-slider .slider-util-wrap .slider-nav .slick-arrow i {
        width: 23px;
        height: 23px;
        border-width: 1px;
        line-height: 21px;
        font-size: 16px;
    }

    #main .main-slider .slider-util-wrap .slider-list {
        max-width: 194px;
        overflow: hidden;
    }

    #main .main-slider .slider-util-wrap .slider-list .slick-dots li {
        width: 50%;
        max-width: 87px;
        min-width: 87px;
        margin: 0 10px;
    }

    #main .main-slider .slider-util-wrap .slider-list .slick-dots li:nth-child(even) {
        margin-right: 0;
    }

    #main .main-slider .slider-util-wrap .slider-list .slick-dots li:nth-child(odd) {
        margin-left: 0;
    }

    #main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-status {
        font-size: 14px;
        line-height: 21px;
        padding-bottom: 2px;
        border-width: 2px;
    }

    #main .main-slider .slider-util-wrap .slider-list .slick-dots li .dot-button .dot-title {
        margin-top: 6px;
        font-size: 14px;
        line-height: 21px;
    }

}

#main .main-live {
    padding: 120px 0;
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    -ms-overflow-x: hidden;
    -ms-overflow-y: visible;
    -ms-overflow-y: hidden;
    white-space: nowrap;
    margin: -10px 0;
    width: 100%;
}

#main .main-live .left {
    float: left;
    width: 400px;
    height: 386px;
    position: relative;
    z-index: 99;
}

#main .main-live .left:before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 110%;
    background-color: #ffffff;
    z-index: -1;
    transform: translateY(-50%);
}

#main .main-live .left .title {
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    line-height: 48px;
    padding-bottom: 20px;
}

#main .main-live .left .title b {
    font-weight: 700;
}

#main .main-live .left .date {
    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
}

#main .main-live .left .button-wrap {
    position: absolute;
    left: 0;
    bottom: 0;
}

#main .main-live .left .button-wrap .slick-arrow {
    display: inline-block;
    cursor: pointer;
    font-size: 34px;
    width: 50px;
    height: 50px;
    color: #d8d8d8;
    line-height: 42px;
    text-align: center;
    border-radius: 50%;
    border: 3px solid #d8d8d8;
    transition: all 0.25s ease;
}

#main .main-live .left .button-wrap .slick-arrow.slick-disabled {
    cursor: not-allowed;
}

#main .main-live .left .button-wrap .slick-arrow.slick-disabled:hover {
    cursor: not-allowed;
    color: #d8d8d8;
    border-color: #d8d8d8;
}

#main .main-live .left .button-wrap .slick-arrow:hover {
    color: #fdd23e;
    border-color: #fdd23e;
}

#main .main-live .left .button-wrap .nav-prev {
    margin-right: 30px;
}

#main .main-live .right {
    float: left;
    width: calc(100% - 400px);
    margin-top: -10px;
    margin-left: -30px;
}

#main .main-live .right .slick-list {
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    overflow: visible;
    /*padding-right: 53vw !important;*/
    /*padding-right: 63.90vw !important;*/
    /*padding-right: 1226px !important;*/
}

#main .main-live .right .slick-list .slick-track {
    min-width: 1662px !important;
}

#main .main-live .right .slick-list .slick-slide {
    margin: 0 30px;
}

#main .main-live .right .card {
    position: relative;
    float: left;
    height: 386px;

    box-shadow: 1px 2px 7px #d8d8d8;
    border-radius: 0 0 0 60px;
    background-color: #ffffff;
    background-image: url(images/main/card-bg.png);
    background-position: center bottom;
    background-repeat: no-repeat;

    transition: all 0.25s ease;
}

#main .main-live .right .card:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.25s ease;
    border-radius: 0 0 0 60px;
}

#main .main-live .right .card.slick-current:before {
    opacity: 1;
    z-index: 0;
    background-repeat: no-repeat;
    background-image: url(images/main/card-bg-active.png), linear-gradient(138deg, #ffee89 0%, #fdd23e 100%);
    background-position: center bottom;
}

#main .main-live .right .card .icon {
    position: absolute;
    left: 38px;
    top: 30px;
    width: 56px;
    height: 66px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}

#main .main-live .right .card .icon.icon01 {
    background-image: url(images/main/icon01@2x.png);
}

#main .main-live .right .card.slick-current .icon.icon01 {
    background-image: url(images/main/icon01-2@2x.png);
}

#main .main-live .right .card .icon.icon02 {
    background-image: url(images/main/icon02@2x.png);
}

#main .main-live .right .card.slick-current .icon.icon02 {
    background-image: url(images/main/icon02-2@2x.png);
}

#main .main-live .right .card .icon.icon03 {
    background-image: url(images/main/icon03@2x.png);
}

#main .main-live .right .card.slick-current .icon.icon03 {
    background-image: url(images/main/icon03-2@2x.png);
}

#main .main-live .right .card .icon.icon04 {
    background-image: url(images/main/icon04@2x.png);
}

#main .main-live .right .card.slick-current .icon.icon04 {
    background-image: url(images/main/icon04-2@2x.png);
}

#main .main-live .right .card .icon.icon05 {
    background-image: url(images/main/icon05@2x.png);
}

#main .main-live .right .card.slick-current .icon.icon05 {
    background-image: url(images/main/icon05-2@2x.png);
}

#main .main-live .right .card .icon.icon06 {
    background-image: url(images/main/icon06@2x.png);
}

#main .main-live .right .card.slick-current .icon.icon06 {
    background-image: url(images/main/icon06-2@2x.png);
}

#main .main-live .right .card .text {
    position: absolute;
    left: 50%;
    bottom: 60px;
    transform: translateX(-50%);
    width: calc(100% - 76px);
}

#main .main-live .right .card .text .name {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 10px;
}

#main .main-live .right .card .text .value {
    display: table-cell;
    vertical-align: middle;
    height: 80px;
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    word-break: normal;
    white-space: normal;
}

@media all and (max-width: 1023px) {
    #main .main-live {
        padding: 90px 0;
    }

    #main .main-live .left {
        float: none;
        width: 100%;
        height: unset;
        text-align: center;
        padding-bottom: 90px;
    }

    #main .main-live .left .title {
        font-size: 30px;
        line-height: 45px;
        padding-bottom: 10px;
    }

    #main .main-live .left .title b {
        padding-left: 5px;
    }

    #main .main-live .left .title br {
        display: none;
    }

    #main .main-live .left .button-wrap {
        position: static;
    }

    #main .main-live .left .button-wrap .slick-arrow {
        position: absolute;
        top: 0;
        width: 30px;
        height: 30px;
        line-height: 26px;
        border-width: 2px;
        font-size: 20px;
    }

    #main .main-live .left .button-wrap .nav-prev {
        margin-right: 0;
        left: 30px;
    }

    #main .main-live .left .button-wrap .nav-next {
        right: 30px;
    }

    #main .main-live .right {
        float: none;
        width: 100%;
        margin-left: 0;
    }
}

@media all and (max-width: 767px) {
    #main .main-live {
        padding: 50px 0;
    }

    #main .main-live .left {
        padding-bottom: 50px;
    }

    #main .main-live .left .title {
        font-size: 20px;
        line-height: 30px;
    }

    #main .main-live .left .title br {
        display: block;
    }

    #main .main-live .left .date {
        font-size: 14px;
        line-height: 20px;
    }

    #main .main-live .left .button-wrap .slick-arrow {
        top: 20px;
        width: 23px;
        height: 23px;
        border-width: 1px;
        line-height: 21px;
        font-size: 16px;
    }

    #main .main-live .left .button-wrap .nav-prev {
        left: 20px;
    }

    #main .main-live .left .button-wrap .nav-next {
        right: 20px;
    }

    #main .main-live .right .slick-list {
        padding-left: 20px;
    }

    #main .main-live .right .slick-list .slick-slide {
        margin: 0 10px;
    }

    #main .main-live .right .card {
        height: 209px;
        border-radius: 0 0 0 30px;
        background-size: contain;
    }

    #main .main-live .right .card:before {
        border-radius: 0 0 0 30px;
    }

    #main .main-live .right .card.slick-current:before {
        background-size: contain;
    }

    #main .main-live .right .card .icon {
        top: 20px;
        left: 15px;
        width: 31px;
        height: 35px;
    }

    #main .main-live .right .card .text {
        width: calc(100% - 30px);
        left: 15px;
        bottom: 27px;
        transform: unset;
    }

    #main .main-live .right .card .text .name {
        font-size: 14px;
        line-height: 20px;
    }

    #main .main-live .right .card .text .value {
        height: 44px;
        font-size: 18px;
        line-height: 22px;
    }
}

#main .main-banner {
    background-color: rgba(253, 210, 62, 0.15);
    position: relative;
}

#main .main-banner .banner-wrap {
    position: relative;
}

#main .main-banner .banner-wrap .banner {
    position: relative;
    height: 275px;
}

#main .main-banner .banner-wrap .banner .img {
    position: absolute;
    left: 65px;
    bottom: 0;
    width: 410px;
    height: 215px;
    background-image: url(images/main/banner01.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    background-size: contain;
}

#main .main-banner .banner-wrap .banner .text {
    position: absolute;
    right: 110px;
    top: 50%;
    transform: translateY(-50%);
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    text-align: right;

    width: 46%;
}

#main .main-banner .banner-wrap .banner .text strong {
    font-weight: 700;
}

#main .main-banner .banner-util {
    width: 100%;
    max-width: 1170px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#main .main-banner .banner-util .slider-nav {}

#main .main-banner .banner-util .slider-nav .slick-arrow {
    position: absolute;
    display: inline-block;
    cursor: pointer;
    font-size: 34px;
    width: 50px;
    height: 50px;
    color: #d8d8d8;
    line-height: 42px;
    text-align: center;
    border-radius: 50%;
    border: 3px solid #d8d8d8;
    transition: all 0.25s ease;

    top: 50%;
    transform: translateY(-50%);
}

#main .main-banner .banner-util .slider-nav .slick-arrow:hover {
    color: #fdd23e;
    border-color: #fdd23e;
}

#main .main-banner .banner-util .slider-nav .nav-prev {
    left: 0;
}

#main .main-banner .banner-util .slider-nav .nav-next {
    right: 0;
}

@media all and (max-width: 1023px) {
    #main .main-banner .col-12 {}

    #main .main-banner .banner-wrap .banner {
        height: 196px;
    }

    #main .main-banner .banner-wrap .banner .img {
        left: 5px;
        width: 220px;
        height: 114px;
    }

    #main .main-banner .banner-wrap .banner .text {
        right: 80px;
        font-size: 24px;
        width: 55%;
    }

    #main .main-banner .banner-util .slider-nav .slick-arrow {
        width: 30px;
        height: 30px;
        line-height: 26px;
        border-width: 2px;
        font-size: 20px;

        top: inherit;
        transform: inherit;
    }

    #main .main-banner .banner-util {
        transform: translateY(-15px);
    }

    #main .main-banner .banner-util .slider-nav .nav-prev {
        left: 15px;
    }

    #main .main-banner .banner-util .slider-nav .nav-next {
        right: 45px;
    }

}

@media all and (max-width: 767px) {
    #main .main-banner .banner-wrap .banner {
        height: 96px;
    }

    #main .main-banner .banner-wrap .banner .img {
        display: none;
    }

    #main .main-banner .banner-wrap .banner .text {
        right: unset;
        left: 50%;
        transform: translate(-50%, -50%);
        /*width: 100%;*/
        width: 70%;
        text-align: center;
        font-size: 12px;
        line-height: 18px;
    }

    #main .main-banner .banner-util {
        transform: translateY(-11px)
    }

    #main .main-banner .banner-util .slider-nav .slick-arrow {
        width: 23px;
        height: 23px;
        border-width: 1px;
        line-height: 21px;
        font-size: 16px;
    }

    #main .main-banner .banner-util .slider-nav .nav-prev {
        left: 5px;
    }

    #main .main-banner .banner-util .slider-nav .nav-next {
        right: 30px;
    }

}

#main .main-review {
    position: relative;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.6);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: auto;
}

#main .main-review:before {
    content: '';
    position: absolute;
    right: 190px;
    bottom: -195px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background-image: linear-gradient(128deg, #fdd23e 0%, #eba30a 100%);
    opacity: 0.07;
    z-index: -1;
}

#main .main-review:after {
    content: '';
    position: absolute;
    right: -457px;
    bottom: -282px;
    width: 820px;
    height: 820px;
    border-radius: 50%;
    background-image: linear-gradient(128deg, #fdd23e 0%, #eba30a 100%);
    opacity: 0.15;
    z-index: -1;
}

#main .main-review .title {
    margin-bottom: 90px;
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    text-align: center;
}

#main .main-review .title strong {
    font-weight: 700;
}

#main .main-review .review-wrap {
    position: relative;
    padding: 120px 0;
    height: 900px;
}

#main .main-review .review-slider {}

#main .main-review .review-slider .slider {
    position: relative;
    height: 636px;
}

#main .main-review .review-slider .slider .left {
    max-width: 500px;
}

#main .main-review .review-slider .slider .left .quote {
    margin-bottom: 60px;
}

#main .main-review .review-slider .slider .left .quote img {
    margin: 0 auto;
    display: block;
    max-width: 91px;
}

#main .main-review .review-slider .slider .left .badge-wrap {
    margin-bottom: 15px;
    text-align: center;
}

#main .main-review .review-slider .slider .left .badge-wrap .badge {
    display: inline-block;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 3px;
    border-bottom: 3px solid #fdd23e;
}

#main .main-review .review-slider .slider .left .rate-wrap {
    padding-bottom: 30px;
    text-align: center;
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
}

#main .main-review .review-slider .slider .left .rate-wrap strong {
    font-weight: 700;
}

#main .main-review .review-slider .slider .left .desc {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    word-break: break-all;
}

#main .main-review .review-slider .slider .right {
    position: absolute;
    right: 70px;
    bottom: 0;
}

#main .main-review .review-slider .slider .right img {
    max-width: 303px;
    display: block;
}

#main .main-review .review-util {
    position: absolute;
    left: 120px;
    bottom: 120px;
    width: 100%;
    max-width: 245px;
}

#main .main-review .review-util .slider-nav {}

#main .main-review .review-util .slider-nav .slick-arrow {
    cursor: pointer;
    position: absolute;
}

#main .main-review .review-util .slider-nav .slick-arrow i {
    display: inline-block;
    font-size: 34px;
    width: 50px;
    height: 50px;
    color: #d8d8d8;
    line-height: 42px;
    border: 3px solid #d8d8d8;
    border-radius: 50%;
    text-align: center;
    transition: all 0.25s ease;
}

#main .main-review .review-util .slider-nav .slick-arrow i:hover {
    color: #fdd23e;
    border-color: #fdd23e;
}

#main .main-review .review-util .slider-nav .nav-prev {
    left: 0;
}

#main .main-review .review-util .slider-nav .nav-next {
    right: 0;
}
#main .main-review .review-util .slider-dots {
    /*margin-top: 66px;*/
}
#main .main-review .review-util .slider-dots ul {
    height: 50px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

#main .main-review .review-util .slider-dots ul li {
    margin: 0 7.5px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

#main .main-review .review-util .slider-dots ul li button {
    cursor: pointer;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d8d8d8;
    padding: 0;
    font-size: 0;
    border: 0;
    transition: all 0.25s ease;
}

#main .main-review .review-util .slider-dots ul li.slick-active button {
    background-color: #fdd23e;
}

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

    #main .main-review:before,
    #main .main-review:after {
        display: none;
    }

    #main .main-review {
        background-image: url(images/main/review-bg-tb.png);
    }

    #main .main-review .review-wrap {
        padding-top: 90px;
        padding-bottom: 0;
        height: unset;
    }

    #main .main-review .title {
        font-size: 30px;
        line-height: 45px;
        margin-bottom: 60px;
    }

    #main .main-review .review-slider .slider {
        height: unset;
    }

    #main .main-review .review-slider .slider .left {
        max-width: 100%;
    }

    #main .main-review .review-slider .slider .left .quote {
        display: none;
    }

    #main .main-review .review-slider .slider .left .desc {
        max-width: 500px;
        margin: 0 auto;
        line-height: 26px;
        margin-bottom: 40px;
    }

    #main .main-review .review-slider .slider .right {
        /*position: relative;*/
        position: static;
    }

    #main .main-review .review-slider .slider .right {
        right: 42px;
    }

    #main .main-review .review-slider .slider .right img {
        max-width: 212px;
        float: right;
    }

    #main .main-review .review-util {
        max-width: 200px;
        bottom: 60px;
        left: 50%;
        transform: translateX(-50%);
    }

    #main .main-review .review-util .slider-nav .slick-arrow i {
        width: 30px;
        height: 30px;
        line-height: 26px;
        border-width: 2px;
        font-size: 20px;
    }

    #main .main-review .review-util .slider-dots ul {
        height: 30px;
    }

    #main .main-review .review-util .slider-dots ul li button {
        width: 8px;
        height: 8px;
    }
}

@media all and (max-width: 767px) {
    #main .main-review {
        background-image: url(images/main/review-bg-mb.png);
    }

    #main .main-review .container {
        padding: 0;
    }

    #main .main-review .container .row {
        margin: 0;
    }

    #main .main-review .container .row .col-12 {
        padding: 0;
    }

    #main .main-review .review-slider .slider {
        overflow: hidden;
    }

    #main .main-review .review-wrap {
        padding-top: 50px;
    }

    #main .main-review .title {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 50px;
    }

    #main .main-review .review-slider .slider .left .badge-wrap {
        margin-bottom: 10px;
    }

    #main .main-review .review-slider .slider .left .badge-wrap .badge {
        font-size: 14px;
        line-height: 21px;
        padding-bottom: 2px;
        border-width: 2px;
    }

    #main .main-review .review-slider .slider .left .rate-wrap {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 25px;
    }

    #main .main-review .review-slider .slider .left .desc {
        max-width: calc(100% - 60px);
        margin-bottom: 15px;
        font-size: 14px;
        line-height: 21px;
        -ms-word-break: break-all;
        word-break: break-all;
    }

    #main .main-review .review-slider .slider .right {
        width: 100%;
        height: 150px;
        position: relative;
        right: unset;
        bottom: unset;
        margin: 0 -15px;
    }

    #main .main-review .review-slider .slider .right img {
        max-width: 104px;
        float: none;
        position: absolute;
        right: -30px;
        top: 0;
    }

    #main .main-review .review-util {
        max-width: 150px;
        bottom: 25px;
    }

    #main .main-review .review-util .slider-dots ul {
        height: 23px;
    }

    #main .main-review .review-util .slider-nav .slick-arrow i {
        width: 23px;
        height: 23px;
        border-width: 1px;
        line-height: 21px;
        font-size: 16px;
    }

    #main .main-review .review-util .slider-dots ul li button {
        width: 5px;
        height: 5px;
    }
}

#main .main-advantage {
    padding: 120px 0;
    background-position: right top;
    background-repeat: no-repeat;
    background-size: auto;
}

#main .main-advantage .title-wrap {}

#main .main-advantage .title-wrap .title {
    margin-bottom: 120px;
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    text-align: center;
}

#main .main-advantage .advantage-wrap {}

#main .main-advantage .advantage-wrap .ad {
    margin-bottom: 125px;
}

#main .main-advantage .advantage-wrap .ad .img-wrap {
    margin-bottom: 30px;
}

#main .main-advantage .advantage-wrap .ad .img-wrap img {
    display: block;
    margin: 0 auto;
    max-width: 150px;
}

#main .main-advantage .advantage-wrap .ad .text-wrap {
    text-align: center;
}

#main .main-advantage .advantage-wrap .ad .text-wrap .main {
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    padding-bottom: 15px;
}

#main .main-advantage .advantage-wrap .ad .text-wrap .sub {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    max-width: 400px margin: 0 auto;
}

#main .main-advantage .card-wrap {}

#main .main-advantage .card-wrap .card {
    padding: 50px;
    border-radius: 0 0 0 60px;
}

#main .main-advantage .card-wrap .card.link {
    background-color: #f5f5f5;
    background-image: url(images/main/ad-card-bg.png);
    background-position: right bottom;
    background-repeat: no-repeat;
    background-size: auto;
}

#main .main-advantage .card-wrap .card.friend {
    background-color: rgba(253, 210, 62, 0.15);
}

#main .main-advantage .card-wrap .card .title {
    color: #222222;
    font-size: 26px;
    font-weight: 400;
    line-height: 38px;
    white-space: nowrap;
    padding-bottom: 10px;
}

#main .main-advantage .card-wrap .card .title strong {
    font-weight: 700;
}

#main .main-advantage .card-wrap .card .desc {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding-bottom: 40px;
}

#main .main-advantage .card-wrap .card .button {
    width: 132px;
    position: relative;
    display: inline-block;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    padding: 7px 10px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    transition: all 0.25s ease;
}

#main .main-advantage .card-wrap .card.friend .button {
    width: 140px;
}

#main .main-advantage .card-wrap .card .button i {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 22px;
    color: #fdd23e;
    transition: all 0.25s ease;
}

#main .main-advantage .card-wrap .card .button:hover {
    background-color: #fdd23e;
    color: #ffffff;
}

#main .main-advantage .card-wrap .card .button:hover i {
    color: #ffffff;
}

@media all and (max-width: 1023px) {
    #main .main-advantage {
        padding: 90px 0;
        background-image: url(images/main/advantage-bg-tb.png);
    }

    #main .main-advantage .title-wrap .title {
        font-size: 30px;
        line-height: 45px;
        margin-bottom: 90px;
    }

    #main .main-advantage .advantage-wrap {
        padding: 0 25px;
    }

    #main .main-advantage .advantage-wrap .ad {
        padding: 0 30px;
        width: 50%;
        margin-bottom: 95px;
    }

    #main .main-advantage .advantage-wrap .ad .text-wrap .sub {
        word-break: keep-all;
        letter-spacing: -0.6px;
        height: 130px;
    }

    #main .main-advantage .advantage-wrap .ad .text-wrap .sub br {
        display: none;
    }

    #main .main-advantage .card-wrap {
        padding: 0 22.5px;
    }

    #main .main-advantage .card-wrap .col-6 {
        padding: 0 7.5px;
        width: 50%;
    }

    #main .main-advantage .card-wrap .card {
        padding: 30px 20px 30px 30px;
    }

    #main .main-advantage .card-wrap .card.link {
        background-image: unset;
    }

    #main .main-advantage .card-wrap .card .title {
        white-space: normal;
        word-break: keep-all;
    }

    #main .main-advantage .card-wrap .card .desc {
        padding-bottom: 30px;
    }
}

@media all and (max-width: 767px) {
    #main .main-advantage {
        padding: 50px 0;
        background-image: unset;
    }

    #main .main-advantage .title-wrap {
        position: relative;
    }

    #main .main-advantage .advantage-util {}

    #main .main-advantage .advantage-util .slider-nav {}

    #main .main-advantage .advantage-util .slider-nav .slick-arrow {
        display: inline-block;
        position: absolute;
        top: 4px;
        width: 23px;
        height: 23px;
        border-width: 1px;
        line-height: 21px;
        font-size: 16px;
        border: 1px solid #d8d8d8;
        border-radius: 50%;
        color: #d8d8d8;
        text-align: center;
    }

    #main .main-advantage .advantage-util .slider-nav .nav-prev {
        left: 5px;
    }

    #main .main-advantage .advantage-util .slider-nav .nav-next {
        right: 5px;
    }

    #main .main-advantage .title-wrap .title {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 50px;
    }

    #main .main-advantage .advantage-wrap {
        float: left;
        width: 100%;
        padding: 0 20px;
        margin-bottom: 50px;
    }

    #main .main-advantage .advantage-wrap .ad {
        margin-bottom: 0;
        padding: 0;
    }

    #main .main-advantage .advantage-wrap .ad .img-wrap {
        margin-bottom: 15px;
    }

    #main .main-advantage .advantage-wrap .ad .img-wrap img {
        max-width: 90px;
    }

    #main .main-advantage .advantage-wrap .ad .text-wrap .main {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 10px;
    }

    #main .main-advantage .advantage-wrap .ad .text-wrap .sub {
        height: unset;
        font-size: 14px;
        line-height: 21px;
        word-break: break-all;
    }

    #main .main-advantage .card-wrap {
        padding: 0 20px;
    }

    #main .main-advantage .card-wrap .col-6 {
        padding: 0;
        width: 100%;
        margin-bottom: 25px;
    }

    #main .main-advantage .card-wrap .col-6:last-child {
        margin-bottom: 0;
    }

    #main .main-advantage .card-wrap .card {
        position: relative;
        padding: 20px 15px 20px 20px;
        height: 152px;
        border-radius: 0 0 0 30px;
    }

    #main .main-advantage .card-wrap .card .title {
        font-size: 20px;
        line-height: 30px;
    }

    #main .main-advantage .card-wrap .card .desc {
        font-size: 14px;
        line-height: 21px;
        padding-bottom: 0;
    }

    #main .main-advantage .card-wrap .card .button {
        position: absolute;
        right: 15px;
        bottom: 20px;
        border: 0;
        font-size: 0;
        padding: 0;
        width: 30px;
        height: 30px;
    }

    #main .main-advantage .card-wrap .card.friend .button {
        width: 30px;
    }

    #main .main-advantage .card-wrap .card .button i {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
}

#main .main-news {
    padding: 120px 0;
    background-color: #f5f5f5;
}

#main .main-news .title-wrap {
    padding-bottom: 60px;
}

#main .main-news .title-wrap .title {
    text-align: center;
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    line-height: 54px;
}

#main .main-news .tab-wrap {
    /* max-width: 428px; */
    max-width: 574px;
    margin: 0 auto;
    box-shadow: 0 1px 4px #d8d8d8;
    border-radius: 5px;
    background-color: #ffffff;
    overflow: hidden;
    margin-bottom: 120px;
}

#main .main-news .tab-wrap .tab {
    position: relative;
    z-index: 99;
    cursor: pointer;
    float: left;
    /* width: 33.3333%; */
    width: 25%;
    text-align: center;
    line-height: 58px;
    color: #c0c0c0;
    font-size: 26px;
    font-weight: 400;
    transition: all 0.25s ease;
}

#main .main-news .tab-wrap .tab:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 5px;
    transition: all 0.25s ease;
}

#main .main-news .tab-wrap .tab.active {
    color: #222222;
}

#main .main-news .tab-wrap .tab.active:before {
    opacity: 1;
    z-index: -1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

/* 2020-05-13 이성희 수정 */
#slider_section {
    position: relative;
}

#main .main-news .card-wrap.hide_me {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

#main .main-news .news-util .slider-nav {
    position: relative;
}

#main .main-news .news-util .slider-nav .nav-wrap {}

#main .main-news .news-util .slider-nav .nav-wrap.hide_me {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

#main .main-news .news-util .slider-dots .dots-wrap {}

#main .main-news .news-util .slider-dots .dots-wrap.hide_me {
    position: absolute;
    left: -9999px;
    top: -9999px;
}

/* 2020-05-13 이성희 수정 */

#main .main-news .card-wrap {
    margin: -10px -30px;
}

#main .main-news .card-wrap .card {
    max-width: 410px;

    padding: 0 30px;
    width: 33.333333%;
    float: left;
}

#main .main-news .card-wrap .card .inner-wrap {
    position: relative;
    background-color: #ffffff;
    box-shadow: 1px 2px 5px rgba(216, 216, 216, 0.6);
}

#main .main-news .card-wrap .card .thumb {
    width: 100%;
    height: 216px;
    border-radius: 0 0 0 60px;
    overflow: hidden;
    background-image: url(images/dummy.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

#main .main-news .card-wrap .card .badge-wrap {
    position: absolute;
    right: 15px;
    top: 15px;
    border-radius: 5px;
    color: #ffffff;
}

#main .main-news .card-wrap .card .badge-wrap.open {
    background-color: #a9860e;
}

#main .main-news .card-wrap .card .badge-wrap.end {
    background-color: #fdd23e;
    color: #222222;
}

#main .main-news .card-wrap .card .badge-wrap.announce {
    background-color: #4a3a05;
}

#main .main-news .card-wrap .card .badge-wrap .badge {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    padding: 5px 10px;
}

#main .main-news .card-wrap .card .text-wrap {
    padding: 30px;
}

#main .main-news .card-wrap .card .text-wrap .title {
    color: #222222;
    font-size: 26px;
    font-weight: 400;
    line-height: 38px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 10px;
}

#main .main-news .card-wrap .card .text-wrap .content {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    max-height: 72px;
    min-height: 72px;
    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 30px;
}

#main .main-news .card-wrap .card .text-wrap .category-wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
}

#main .main-news .card-wrap .card .text-wrap .category-wrap .category {
    color: #777777;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    margin-right: 15px;
}

#main .main-news .card-wrap .card .text-wrap .category-wrap .date {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

#main .main-news .card-wrap .slick-list {
    padding: 10px 0;
}

#main .main-news .news-util {
    margin-top: 90px;
    position: relative;
    width: 100%;
    height: 50px;
}

#main .main-news .news-util .slider-nav .slick-arrow {
    cursor: pointer;
    position: absolute;
}

#main .main-news .news-util .slider-nav .slick-arrow i {
    display: inline-block;
    font-size: 34px;
    width: 50px;
    height: 50px;
    color: #d8d8d8;
    line-height: 48px;
    text-align: center;
    transition: all 0.25s ease;
}

#main .main-news .news-util .slider-nav .slick-arrow i:hover {
    color: #fdd23e;
    border-color: #fdd23e;
}

#main .main-news .news-util .slider-nav .nav-prev {
    left: 0;
}

#main .main-news .news-util .slider-nav .nav-next {
    right: 0;
}

#main .main-news .news-util .slider-dots {}

#main .main-news .news-util .slider-dots ul {
    height: 50px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

#main .main-news .news-util .slider-dots ul li {
    margin: 0 7.5px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

#main .main-news .news-util .slider-dots ul li button {
    cursor: pointer;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #d8d8d8;
    padding: 0;
    font-size: 0;
    border: 0;
    transition: all 0.25s ease;
}

#main .main-news .news-util .slider-dots ul li.slick-active button {
    background-color: #fdd23e;
}

@media all and (max-width: 1023px) {
    #main .main-news .card-wrap .slick-list {
        padding-left: 15px;
    }

    #main .main-news .news-util .slider-nav .nav-prev {
        left: 15px;
    }

    #main .main-news .news-util .slider-nav .nav-next {
        right: 15px;
    }

    #main .main-news {
        padding-top: 90px;
        padding-bottom: 30px;
    }

    #main .main-news .title-wrap {
        padding-bottom: 50px;
    }

    #main .main-news .title-wrap .title {
        line-height: 45px;
        font-size: 30px;
    }

    #main .main-news .tab-wrap {
        margin-bottom: 90px;
    }

    #main .main-news .news-util {
        margin-top: 60px;
        height: 30px;
    }

    #main .main-news .news-util .slider-nav .slick-arrow i {
        width: 30px;
        height: 30px;
        font-size: 20px;
        line-height: 26px;
    }

    #main .main-news .news-util .slider-dots ul {
        height: 30px;
    }

    #main .main-news .news-util .slider-dots ul li button {
        width: 8px;
        height: 8px;
    }
}

@media all and (max-width: 767px) {
    #main .main-news {
        padding-top: 50px;
        padding-bottom: 30px;
    }

    #main .main-news .col-12 {
        padding: 0;
    }

    #main .main-news .title-wrap {
        padding-bottom: 30px;
    }

    #main .main-news .title-wrap .title {
        font-size: 20px;
        line-height: 30px;
    }

    #main .main-news .title-wrap .title strong {
        display: block;
    }

    #main .main-news .tab-wrap {
        padding-left: 20px;
        margin-bottom: 30px;
        max-width: 100%;
        overflow-x: scroll;
        background-color: transparent;
        box-shadow: unset;
    }

    #main .main-news .tab-wrap .inner-wrap {
        min-width: 328px;
        width: 100%;
    }

    #main .main-news .tab-wrap .tab {
        font-size: 14px;
        line-height: 40px;
    }

    #main .main-news .card-wrap {
        margin: 0;
        padding: 0 20px;
    }

    #main .main-news .card-wrap .card {
        padding: 0;
        width: 100%;
        float: none;
        margin-bottom: 15px;
    }

    #main .main-news .card-wrap .card:last-child {
        margin-bottom: 0;
    }

    #main .main-news .card-wrap .card .thumb {
        display: none;
    }

    #main .main-news .card-wrap .card .text-wrap {
        padding: 20px;
    }

    #main .main-news .card-wrap .card .badge-wrap {
        right: unset;
        left: 20px;
        top: 20px;
    }

    #main .main-news .card-wrap .card .badge-wrap .badge {
        font-size: 14px;
        line-height: 21px;
        padding: 2px 7px;
    }

    #main .main-news .card-wrap .card .text-wrap .category-wrap {
        position: absolute;
        right: 20px;
        top: 24px;
    }

    #main .main-news .card-wrap .card .text-wrap .category-wrap .category {
        font-size: 12px;
        line-height: 18px;
        margin-right: 10px;
    }

    #main .main-news .card-wrap .card .text-wrap .category-wrap .date {
        font-size: 12px;
        line-height: 18px;
    }

    #main .main-news .card-wrap .card .text-wrap .title {
        margin-top: 45px;
        font-size: 18px;
        line-height: 27px;
    }

    #main .main-news .card-wrap .card .text-wrap .content {
        margin-bottom: 0;
        font-size: 14px;
        line-height: 21px;
        max-height: 42px;
        min-height: 42px;
        -webkit-line-clamp: 2;
    }

    #main .main-news .news-util {
        height: unset;
        margin-top: 30px;
    }

    #main .main-news .news-util .button-wrap {
        text-align: center;
    }

    #main .main-news .news-util .more-btn {
        display: inline-block;
        color: #777777;
        font-size: 14px;
        font-weight: 400;
        line-height: 23px;
        text-align: center;
    }

    #main .main-news .news-util .more-btn span {
        vertical-align: middle;
        display: inline-block;
        margin-right: 10px;
        width: 23px;
        height: 23px;
        background-image: url(images/main/more@2x.png);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
}

#main .main-partner {
    padding: 100px 0;
}

#main .main-partner .title-wrap {
    margin-bottom: 60px;
}

#main .main-partner .title-wrap .title {
    text-align: center;
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    line-height: 54px;
}

#main .main-partner .slider-row {
    max-width: 930px;
    margin: 0 auto;
    position: relative;
}

#main .main-partner .slide-wrap {
    margin: 0 -30px;
}

#main .main-partner .slide-wrap .slide {
    float: left;
    width: 33.33333%;
    padding: 0 30px;
}

#main .main-partner .slide-wrap .slide .inner-wrap {
    height: 83px;
    position: relative;
    border-radius: 0 0 0 30px;
    background-color: rgba(253, 210, 62, 0.15);
}

#main .main-partner .slide-wrap .slide img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    margin: 0 auto;
    max-height: 37px;
}

#main .main-partner .partner-util {}

#main .main-partner .partner-util .slider-nav .slick-arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#main .main-partner .partner-util .slider-nav .slick-arrow i {
    display: inline-block;
    font-size: 34px;
    width: 50px;
    height: 50px;
    color: #d8d8d8;
    border: 3px solid #d8d8d8;
    border-radius: 50%;
    line-height: 42px;
    text-align: center;
    transition: all 0.25s ease;
}

#main .main-partner .partner-util .slider-nav .slick-arrow i:hover {
    color: #fdd23e;
    border-color: #fdd23e;
}

#main .main-partner .partner-util .slider-nav .nav-prev {
    left: -120px;
}

#main .main-partner .partner-util .slider-nav .nav-next {
    right: -120px;
}

@media all and (max-width: 1023px) {
    #main .main-partner {
        padding: 60px 0;
    }

    #main .main-partner .title-wrap .title {
        font-size: 30px;
        line-height: 45px;
    }

    #main .main-partner .slider-row {
        max-width: 588px;
    }

    #main .main-partner .slide-wrap {
        margin: 0 -15px;
    }

    #main .main-partner .slide-wrap .slide {
        padding: 0 15px;
    }

    #main .main-partner .partner-util .slider-nav .nav-prev {
        left: -60px;
    }

    #main .main-partner .partner-util .slider-nav .nav-next {
        right: -60px;
    }

    #main .main-partner .partner-util .slider-nav .slick-arrow i {
        width: 30px;
        height: 30px;
        font-size: 20px;
        line-height: 26px;
        border-width: 2px;
    }
}

@media all and (max-width: 767px) {
    #main .main-partner {
        padding-top: 40px;
        padding-bottom: 30px;
    }

    #main .main-partner .title-wrap {
        margin-bottom: 30px;
    }

    #main .main-partner .title-wrap .title {
        font-size: 20px;
        line-height: 30px;
    }

    #main .main-partner .slider-row {
        max-width: 226px;
    }

    #main .main-partner .slide-wrap {
        margin: 0;
    }

    #main .main-partner .slide-wrap .slide {
        padding: 0;
    }

    #main .main-partner .slide-wrap .slide .inner-wrap {
        height: 67px;
    }

    #main .main-partner .slide-wrap .slide img {
        max-height: 28px;
    }

    #main .main-partner .partner-util {
        position: relative;
        height: 23px;
        max-width: 150px;
        margin: 0 auto;
        margin-top: 30px;
    }

    #main .main-partner .partner-util .slider-nav {}

    #main .main-partner .partner-util .slider-nav .slick-arrow i {
        width: 23px;
        height: 23px;
        border-width: 1px;
        line-height: 21px;
        font-size: 16px;
    }

    #main .main-partner .partner-util .slider-nav .nav-prev {
        left: 0;
    }

    #main .main-partner .partner-util .slider-nav .nav-next {
        right: 0;
    }

    #main .main-partner .partner-util .slider-dots ul {
        height: 23px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
    }

    #main .main-partner .partner-util .slider-dots ul li {
        margin: 0 7.5px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }

    #main .main-partner .partner-util .slider-dots ul li button {
        cursor: pointer;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #d8d8d8;
        padding: 0;
        font-size: 0;
        border: 0;
        transition: all 0.25s ease;
    }

    #main .main-partner .partner-util .slider-dots ul li.slick-active button {
        background-color: #fdd23e;
    }

}


/**
 * deal-list
 */
/* end list */
.end-list {}

.end-list .deal-card .thumb:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(119, 119, 119, 0.7);
    border-radius: 0 0 0 60px;
}

.end-list .deal-card .content-wrap {
    opacity: 0.5;
}

#deal-list {}
#deal-list .common-header {
    margin-bottom: 60px;
}
#deal-list .new-list-header {
    position: relative;
}

#deal-list .header-utils {
    /*padding-top: 60px;*/
}
#deal-list .header-utils.fixed {
    padding: 30px 0;
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    background: #fff;
    box-shadow: 0 2px 5px #d8d8d8;
    z-index: 11;
}
#deal-list .header-utils .body-name {
    float: left;
    border-radius: 23px;
    border: 2px solid #fdd23e;
    width: 138px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    line-height: 27px;
    padding: 9px 0;
}

#deal-list .end-list-header .header-utils .body-name {
    border: 2px solid #c0c0c0;
}

#deal-list .header-utils .util-wrap {
    float: right;
    position: relative;
}

#deal-list .header-utils .util-wrap .delete {
    /*position: absolute;
    right: 0;
    bottom: -40px;*/
    color: #c0c0c0;
    font-size: 16px;
    font-weight: 400;
    text-decoration: underline;
}

#deal-list .header-utils .util-wrap .status-wrap {
    float: left;
    position: relative;
    margin-right: 30px;
}

#deal-list .header-utils .util-wrap .status-wrap .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #c0c0c0;
}

#deal-list .header-utils .util-wrap .status-wrap select {
    position: relative;
    z-index: 9;
    border: 0;
    width: 157px;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: transparent;

    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
}

#deal-list .end-list-header .header-utils .util-wrap .status-wrap {
    margin-right: 0;
}

#deal-list .header-utils .util-wrap .category-wrap {
    float: left;
    position: relative;
    margin-right: 30px;
}

#deal-list .header-utils .util-wrap .category-wrap .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #c0c0c0;
}

#deal-list .header-utils .util-wrap .category-wrap select {
    position: relative;
    z-index: 9;
    border: 0;
    width: 157px;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: transparent;

    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
}

#deal-list .header-utils .util-wrap .search-wrap {
    float: left;
    margin-bottom: 20px;
}

#deal-list .header-utils .util-wrap .search-wrap form {
    position: relative;
    width: 414px;
}

#deal-list .header-utils .util-wrap .search-wrap form input {
    border: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;

    font-size: 18px;
    font-weight: 400;
}

#deal-list .header-utils .util-wrap .search-wrap form input::placeholder {
    color: #c0c0c0 !important;
    font-size: 18px !important;
    font-weight: 400 !important;
}

#deal-list .header-utils .util-wrap .search-wrap form button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    color: #c0c0c0;
    font-size: 20px;
}

#deal-list .header-utils .util-wrap .delete-btn {
    text-align: right;
}
#deal-list .header-utils .util-wrap .delete-btn .delete {
    display: block;
}

#deal-list .new-list {
    margin-bottom: 60px;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.6);
}

#deal-list .deal-list {
    padding-top: 90px;
}

#deal-list .deal-list .container {
    padding-left: 30px;
    padding-right: 30px;
    max-width: 1230px;
}

#deal-list .deal-list .container .row {
    margin-left: -30px;
    margin-right: -30px;
}

#deal-list .deal-list .container .row .col-4 {
    padding-left: 30px;
    padding-right: 30px;
}

#deal-list .deal-list .noresult {
    /*padding: 70px 0;*/
    padding-bottom: 90px;
}

#deal-list .deal-list .noresult img {
    display: block;
    width: 99px;
    margin: 0 auto;
    margin-bottom: 30px;
}

#deal-list .deal-list .noresult p {
    text-align: center;
    color: #c0c0c0;
    font-size: 26px;
    font-weight: 400;
    line-height: 38px;
}

#deal-list .deal-list-paging {
    margin-top: 30px;
}

@media all and (max-width: 1023px) {
    #deal-list .header-utils .col-12 {
        padding-left: 20px;
        padding-right: 20px;
    }

    #deal-list .header-utils .util-wrap {
        max-width: 414px;
    }

    #deal-list .header-utils .util-wrap .status-wrap {
        margin-left: 70px;
    }

    #deal-list .header-utils .util-wrap .category-wrap {
        margin-right: 0;
    }

    #deal-list .header-utils .util-wrap .search-wrap {
        width: 100%;
        margin-top: 30px;
    }

    #deal-list .deal-list .container .row .col-4 {
        width: 50%;
        padding-left: 20px;
        padding-right: 20px;
    }

    #deal-list .deal-list .noresult {
        /*padding: 50px 0;*/
    }
}

@media all and (max-width: 767px) {
    #deal-list .common-header {
        margin-bottom: 50px;
    }
    #deal-list .header-utils {
        /*padding-top: 50px;*/
    }
    #deal-list .header-utils .body-name {
        float: none;
        margin: 0 auto;
        margin-bottom: 30px;
        width: 104px;
        font-size: 14px;
        padding: 8px 0;
        line-height: 20px;
    }

    #deal-list .header-utils .util-wrap {
        max-width: calc(100% - 30px);
        float: none;
        margin: 0 auto;
    }

    #deal-list .header-utils .util-wrap .delete {
        font-size: 14px;
        bottom: -32px;
    }

    #deal-list .header-utils .util-wrap .status-wrap {
        margin-left: 0;
        margin-right: 10px;
        width: calc(50% - 5px);
    }

    #deal-list .header-utils .util-wrap .status-wrap select {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
    #deal-list .new-list {
        margin-bottom: 50px;
    }
    #deal-list .end-list-header .header-utils .util-wrap .status-wrap {
        margin-right: 0;
        margin: 0 auto;
        float: none;
    }

    #deal-list .header-utils .util-wrap .category-wrap {
        width: calc(50% - 5px);
    }

    #deal-list .header-utils .util-wrap .category-wrap select {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    #deal-list .header-utils .util-wrap .search-wrap {
        margin-top: 15px;
    }

    #deal-list .header-utils .util-wrap .search-wrap form {
        width: 100%;
    }

    #deal-list .header-utils .util-wrap .search-wrap form input {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }

    #deal-list .header-utils .util-wrap .search-wrap form input::placeholder {
        font-size: 14px !important;
    }

    #deal-list .deal-list {
        padding-top: 50px;
    }

    #deal-list .deal-list .container {
        padding-left: 20px;
        padding-right: 20px;
    }

    #deal-list .deal-list .container .row {
        margin-left: -20px;
        margin-right: -20px;
    }

    #deal-list .deal-list .container .row .col-4 {
        padding-bottom: 20px;
        width: 100%;
    }
    #deal-list .deal-list .container .row .col-4:last-child {
        padding-bottom: 0;
    }
    #deal-list .deal-list .noresult {
        padding-top: 10px;
        /*padding-bottom: 60px;*/
        padding-bottom: 70px;
    }

    #deal-list .deal-list .noresult img {
        width: 50px;
        margin-bottom: 15px;
    }

    #deal-list .deal-list .noresult p {
        font-size: 14px;
        line-height: 21px;
    }
}

/**
 * invest-guide
 */
#invest-guide {}

#invest-guide .guide-body {
    padding: 120px 0;

    position: relative;
}

#invest-guide .guide-body .title {
    text-align: center;
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    line-height: 40px;
    padding-bottom: 30px;
}

#invest-guide .guide-body .desc {
    text-align: center;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    padding-bottom: 60px;
}

#invest-guide .guide-body .table-wrap {}

#invest-guide .guide-body .table-wrap table {}

#invest-guide .guide-body .table-wrap table thead {}

#invest-guide .guide-body .table-wrap table thead tr {}

#invest-guide .guide-body .table-wrap table thead tr th {
    background-color: #f5f5f5;
    padding: 20px 30px;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    border-right: 1px solid #d8d8d8;
    text-align: left;
}

#invest-guide .guide-body .table-wrap table thead tr th.divide {
    width: 180px;
}

#invest-guide .guide-body .table-wrap table thead tr th.require {
    width: 340px;
}

#invest-guide .guide-body .table-wrap table thead tr th.limit {
    width: 310px;
}

#invest-guide .guide-body .table-wrap table thead tr th.document {
    width: 340px;
    border-right: 0;
}

#invest-guide .guide-body .table-wrap table tbody {
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.7);
}

#invest-guide .guide-body .table-wrap table tbody tr {}

#invest-guide .guide-body .table-wrap table tbody tr:last-child td {
    border-bottom: 0;
}

#invest-guide .guide-body .table-wrap table tbody tr td {
    padding: 30px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    border-right: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
    letter-spacing: -0.45px;
}

#invest-guide .guide-body .table-wrap table tbody tr td:last-child {
    border-right: 0;
}

#invest-guide .guide-body .table-wrap table tbody tr td p {
    position: relative;
}

#invest-guide .guide-body .table-wrap table tbody tr td .pl {
    padding-left: 20px;
}

#invest-guide .guide-body .table-wrap table tbody tr td .one:before {
    content: '1.';
    position: absolute;
    left: 0;
    top: 0;
}

#invest-guide .guide-body .table-wrap table tbody tr td .two:before {
    content: '2.';
    position: absolute;
    left: 0;
    top: 0;
}

#invest-guide .guide-body .table-wrap table tbody tr td .three:before {
    content: '3.';
    position: absolute;
    left: 0;
    top: 0;
}

#invest-guide .guide-body .table-wrap table tbody tr td .four:before {
    content: '4.';
    position: absolute;
    left: 0;
    top: 0;
}

#invest-guide .guide-body .table-wrap table tbody tr td .colored {
    color: #222222;
    padding-left: 0;
}

#invest-guide .guide-body .table-desc {
    text-align: center;
}

#invest-guide .guide-body .table-desc .text {
    padding-top: 60px;
    padding-bottom: 30px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#invest-guide .guide-body .table-desc .text strong {
    color: #222222;
    font-size: 20px;
    font-weight: 700;
    line-height: 35px;
}

#invest-guide .guide-body .table-desc .button-wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

#invest-guide .guide-body .table-desc .button-wrap .btn {
    display: inline-block;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    padding: 7px 15px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    transition: all 0.25s ease;
}

#invest-guide .guide-body .table-desc .button-wrap .btn:first-child {
    margin-right: 15px;
}

#invest-guide .guide-body .table-desc .button-wrap .btn i {
    margin-right: 10px;
    line-height: 27px;
    transition: all 0.25s ease;
}

#invest-guide .guide-body .table-desc .button-wrap .btn .arrow {
    margin-right: 0;
    margin-left: 20px;
    color: #fdd23e;
}

#invest-guide .guide-body .table-desc .cs {
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
}

#invest-guide .guide-body .table-desc .cs span {
    font-weight: 700;
    padding-right: 15px;
}

#invest-guide .guide-form {
    padding: 120px 0;
    background-color: #f5f5f5;
}

#invest-guide .guide-form .title {
    text-align: center;
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    line-height: 40px;
    padding-bottom: 60px;
}

#invest-guide .guide-form .tab-wrap {
    max-width: 458px;
    margin: 0 auto;
    /*margin-bottom: 60px;*/
    box-shadow: 0 1px 4px #d8d8d8;
    border-radius: 5px;
    background-color: #ffffff;
}

#invest-guide .guide-form .tab-wrap.fixed {
    position: fixed;
    left: 0;
    top: 80px;
    width: 100%;
    /* text-align: center; */
    background: #fff;
    box-shadow: 0 2px 5px #d8d8d8;
    padding: 30px 0;
    max-width: inherit;
    z-index: 1;
    border-radius: 0;
}
#invest-guide .guide-form .tab-wrap .tab-inner {
    max-width: 458px;
    margin: 0 auto;
}
#invest-guide .guide-form .tab-wrap .tab {
    position: relative;
    z-index: 99;
    cursor: pointer;
    float: left;
    /*width: 50%;*/
    width: 224px;
    text-align: center;
    line-height: 58px;
    color: #c0c0c0;
    font-size: 26px;
    font-weight: 400;
    border-radius: 5px;
    transition: all 0.25s ease;
}
#invest-guide .guide-form .tab-wrap .tab:last-child {
    width: 234px;
}
#invest-guide .guide-form .tab-wrap .tab:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 5px;
    transition: all 0.25s ease;
}

#invest-guide .guide-form .tab-wrap .tab:hover {
    color: #222222;
    opacity: 1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

#invest-guide .guide-form .tab-wrap .tab.active {
    color: #222222;
}

#invest-guide .guide-form .tab-wrap .tab.active:before {
    color: #222222;
    opacity: 1;
    z-index: -1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

#invest-guide .guide-form .form-inner {
    margin-top: 60px;
}

@media all and (max-width: 1023px) {
    #invest-guide .guide-body .desc {
        max-width: 480px;
        margin: 0 auto;
        word-break: keep-all;
    }

    #invest-guide .guide-body .desc br {
        display: none;
    }

    #invest-guide .guide-body .table-wrap table thead tr th {
        padding: 20px;
        text-align: left;
    }

    #invest-guide .guide-body .table-wrap table thead tr th.divide {
        width: 17%;
    }

    #invest-guide .guide-body .table-wrap table thead tr th.require {
        width: 26%;
    }

    #invest-guide .guide-body .table-wrap table thead tr th.limit {
        width: 26%;
    }

    #invest-guide .guide-body .table-wrap table thead tr th.document {
        width: 26%;
    }

    #invest-guide .guide-body .table-wrap table tbody tr td {
        padding: 20px;
    }

    #invest-guide .guide-body .table-wrap table tbody tr td .one:before {
        position: static;
    }

    #invest-guide .guide-body .table-wrap table tbody tr td .two:before {
        position: static;
    }

    #invest-guide .guide-body .table-wrap table tbody tr td .three:before {
        position: static;
    }

    #invest-guide .guide-body .table-wrap table tbody tr td .pl {
        padding-left: 0;
    }
    #invest-guide .guide-form .tab-wrap.fixed {
        top: 60px;
    }
}

@media all and (max-width: 767px) {
    #invest-guide .guide-body {
        padding: 50px 0;
    }

    #invest-guide .guide-body .title {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 15px;
    }

    #invest-guide .guide-body .desc {
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 50px;
        word-break: keep-all;
    }

    #invest-guide .guide-body .desc br {
        display: none;
    }

    #invest-guide .guide-body .table-wrap {
        position: relative;
        box-shadow: 0 2px 4px rgba(216, 216, 216, 0.7);
    }

    #invest-guide .guide-body .table-wrap .left {
        float: left;
        width: 100px;
    }

    #invest-guide .guide-body .table-wrap .right-wrap {
        float: left;
        width: calc(100% - 100px);
    }

    #invest-guide .guide-body .table-wrap .right-wrap .right {}

    #invest-guide .guide-body .table-wrap .right-wrap .right .cell {
        border-right: 0;
    }

    #invest-guide .guide-body .table-wrap .right-wrap .right .cell b {
        font-weight: 400;
        color: #222222;
    }

    #invest-guide .guide-body .table-wrap .cell {
        color: #777777;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        padding: 15px;
        min-height: 70px;
        border-right: 1px solid #d8d8d8;
        border-bottom: 1px solid #d8d8d8;
        transition: all 0.25s ease;
    }

    #invest-guide .guide-body .table-wrap .cell:last-child {
        border-bottom: 0;
    }

    #invest-guide .guide-body .table-wrap .cell.head {
        background-color: #f5f5f5;
        color: #222222;
        border-bottom: 0;
        min-height: 50px;
    }

    #invest-guide .guide-body .table-util {
        margin: 0 auto;
        margin-top: 30px;
        position: relative;
        max-width: 150px;
    }

    #invest-guide .guide-body .table-util .slider-nav {}

    #invest-guide .guide-body .table-util .slider-nav .slick-arrow {
        position: absolute;
        top: 0;
    }

    #invest-guide .guide-body .table-util .slider-nav .slick-arrow i {
        display: inline-block;
        width: 23px;
        height: 23px;
        font-size: 16px;
        text-align: center;
        border: 1px solid #d8d8d8;
        border-radius: 50%;
        color: #d8d8d8;
        line-height: 23px;
        transition: all 0.25s ease;
    }

    #invest-guide .guide-body .table-util .slider-nav .slick-arrow i:hover {
        color: #fdd23e;
        border-color: #fdd23e;
    }

    #invest-guide .guide-body .table-util .slider-nav .slick-arrow.nav-prev {
        left: 0;
    }

    #invest-guide .guide-body .table-util .slider-nav .slick-arrow.nav-next {
        right: 0;
    }

    #invest-guide .guide-body .table-util .slider-dots ul {
        height: 23px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
    }

    #invest-guide .guide-body .table-util .slider-dots ul li {
        margin: 0 7.5px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }

    #invest-guide .guide-body .table-util .slider-dots ul li button {
        cursor: pointer;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #d8d8d8;
        padding: 0;
        font-size: 0;
        border: 0;
        transition: all 0.25s ease;
    }

    #invest-guide .guide-body .table-util .slider-dots ul li.slick-active button {
        background-color: #fdd23e;
    }

    #invest-guide .guide-body .table-desc .text {
        padding-top: 50px;
        padding-bottom: 10px;
        font-size: 14px;
        word-break: keep-all;
    }

    #invest-guide .guide-body .table-desc .text br {
        display: none;
    }

    #invest-guide .guide-body .table-desc .text strong {
        font-size: 18px;
        line-height: 30px;
    }

    #invest-guide .guide-body .table-desc .button-wrap {
        flex-wrap: wrap;
    }

    #invest-guide .guide-body .table-desc .button-wrap .btn {
        width: 200px;
        font-size: 12px;
        line-height: 18px;
        text-align: left;
    }

    #invest-guide .guide-body .table-desc .button-wrap .btn .arrow {
        float: right;
    }

    #invest-guide .guide-body .table-desc .button-wrap .btn i {
        line-height: 18px;
    }

    #invest-guide .guide-body .table-desc .button-wrap .btn:first-child {
        margin-right: 0;
        margin-bottom: 10px;
    }

    #invest-guide .guide-body .table-desc .cs span {
        display: block;
        padding-right: 0;
    }

    #invest-guide .guide-form {
        padding: 50px 0;
    }

    #invest-guide .guide-form .title {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 30px;
    }

    #invest-guide .guide-form .tab-wrap {
        max-height: 258px;
        /*margin-bottom: 30px;*/
        background-color: transparent;
        box-shadow: unset;
    }

    #invest-guide .guide-form .tab-wrap .tab:last-child {
        width: 50%;
    }

    #invest-guide .guide-form .tab-wrap .tab {
        font-size: 14px;
        line-height: 40px;
        width: 50%;
    }
    #invest-guide .guide-form .form-inner {
        margin-top: 30px;
    }
    #invest-guide .guide-form .tab-wrap.fixed {
        top: 50px;
    }
    #invest-guide .guide-form .tab-wrap .tab-inner {
        margin: 0 auto;
        width: calc(100% - 60px);
    }
}

/**
 * deal
 */
#deal {}

#deal .deal-header {
    height: 820px;
    position: relative;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.6);
}

#deal .deal-header .header-wrap {
    padding-top: 120px;
    position: relative;
    box-sizing: content-box;
    height: 700px;
}

#deal .deal-header .header-wrap .header-bg {
    position: absolute;
    right: 0;
    top: 0;
    width: 605px;
    height: 630px;
    border-radius: 0 0 0 120px;
    background-image: url(images/main/bg01.png), linear-gradient(142deg, #ffee89 0%, #fdd23e 100%);
}

#deal .deal-header .header-wrap .content-wrap {
    max-width: 600px;
}

#deal .deal-header .header-wrap .badge-wrap {
    margin-bottom: 15px;
}

#deal .deal-header .header-wrap .badge-wrap .date {
    float: right;
    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
    line-height: 33px;
}

#deal .deal-header .header-wrap .badge-wrap .badge {
    float: left;
}

#deal .deal-header .header-wrap .badge-wrap .new {
    margin-right: 15px;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    line-height: 33px;
    padding: 0 15px;
    border-radius: 5px;
    background-color: #fdd23e;
}

#deal .deal-header .header-wrap .badge-wrap .status {
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    padding-bottom: 3px;
    border-bottom: 3px solid #fdd23e;
}

/* status badge color */
#deal .deal-header .header-wrap .badge-wrap .status.temp {
    border-color: #fdd13e;
}

#deal .deal-header .header-wrap .badge-wrap .status.waiting {
    border-color: #fdd23e;
}

#deal .deal-header .header-wrap .badge-wrap .status.open {
    border-color: #a9860e;
}

#deal .deal-header .header-wrap .badge-wrap .status.success {
    border-color: #4a3a05;
}

#deal .deal-header .header-wrap .badge-wrap .status.repaying {
    border-color: #deb9ff;
}

#deal .deal-header .header-wrap .badge-wrap .status.done {
    border-color: #b055ff;
}

#deal .deal-header .header-wrap .badge-wrap .status.pause {
    border-color: #c33a15;
}

#deal .deal-header .header-wrap .badge-wrap .status.overdue {
    border-color: #ff8464;
}

#deal .deal-header .header-wrap .badge-wrap .status.cancel {
    border-color: #222222;
}

#deal .deal-header .header-wrap .title-wrap {
    margin-bottom: 60px;
}

#deal .deal-header .header-wrap .title-wrap .title {
    max-width: 600px;
    color: #222222;
    font-size: 44px;
    font-weight: 400;
    line-height: 66px;
    max-height: 132px;

    word-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#deal .deal-header .header-wrap .data-wrap {}

#deal .deal-header .header-wrap .data-wrap .data {
    margin-right: 60px;
    float: left;
}

#deal .deal-header .header-wrap .data-wrap .data.amount {
    margin-right: 0;
    width: 100%;
    margin-bottom: 40px;
}

#deal .deal-header .header-wrap .data-wrap .data:last-child {
    margin-right: 0;
}

#deal .deal-header .header-wrap .data-wrap .data .name {
    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    padding-bottom: 10px;
}

#deal .deal-header .header-wrap .data-wrap .data .value {
    color: #222222;
    font-size: 26px;
    font-weight: 400;
    line-height: 38px;
}

#deal .deal-header .header-wrap .percent-wrap {
    margin-top: 100px;
    float: left;
    width: 100%;
}

#deal .deal-header .header-wrap .percent-wrap .percent {
    float: left;
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    margin-right: 30px;
}

#deal .deal-header .header-wrap .percent-wrap .percent .unit {
    font-size: 20px;
    padding-left: 3px;
}

#deal .deal-header .header-wrap .percent-wrap .people {
    float: left;
    margin-top: 10px;
    border-radius: 5px;
    background-color: #f5f5f5;
    padding: 5px 15px;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}

#deal .deal-header .header-wrap .percent-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 5px;
}

#deal .deal-header .header-wrap .percent-bar .bar-bg {
    width: 100%;
    height: 100%;
    background-color: #d8d8d8;
}

#deal .deal-header .header-wrap .percent-bar .bar-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 30%;
    height: 100%;
    background-image: linear-gradient(142deg, #ffee89 0%, #fdd23e 100%);
}

#deal .deal-header .header-wrap .invest-btn {
    float: left;
    position: relative;
    margin-top: 40px;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    padding: 5px 15px;
    line-height: 28px;
    transition: all 0.25s ease;
}

#deal .deal-header .header-wrap .invest-btn:hover {
    background-color: #fdd23e;
    color: #fff;
}
#deal .deal-header .header-wrap .invest-btn:hover .arrow {
    color: #fff;
}

#deal .deal-header .header-wrap .invest-btn a {
    transition: all 0s;
}

#deal .deal-header .header-wrap .invest-btn .won {
    float: left;
    margin-right: 10px;
    width: 23px;
    height: 28px;
    background-image: url(images/deal/won@2x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: all 0.25s ease;
}

#deal .deal-header .header-wrap .invest-btn .txt {
    float: left;
    margin-right: 15px;
}

#deal .deal-header .header-wrap .invest-btn .arrow {
    float: left;
    font-size: 20px;
    color: #fdd23e;
    transition: all 0.25s ease;
}

#deal #simulators {
    position: relative;
    background-color: rgba(253, 210, 62, 0.15);
    height: 245px;
    padding: 60px 0;
}

#deal #simulators .left {}

#deal #simulators .left .txt01 {
    float: left;
    width: 100%;
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 44px;
    padding-bottom: 16px;
}

#deal #simulators .left .input-wrap {
    position: relative;
    float: left;
    padding: 10px 15px;
    width: 300px;
    height: 65px;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    width: 300px;
}

#deal #simulators .left .input-wrap input {
    padding: 0;
    width: calc(100% - 40px);
    border: 0;
    line-height: 45px;
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    text-align: right;
}

#deal #simulators .left .input-wrap input::placeholder {
    font-size: 30px !important;
}

#deal #simulators .left .input-wrap .unit {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #c0c0c0;
    font-size: 30px;
    font-weight: 400;
    line-height: 45px;
}

#deal #simulators .left .txt02 {
    float: left;
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    margin-left: 15px;
    line-height: 65px;
}

#deal #simulators .right {
    position: absolute;
    right: 0;
    top: 0;
    /*min-width: 756px;*/
    width: 50%;
    height: 245px;
    border-radius: 0 60px;
    background-image: linear-gradient(138deg, #ffee89 0%, #fdd23e 100%);
    padding-left: 60px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
}

#deal #simulators .right .more {
    position: absolute;
    right: 40px;
    top: 40px;
    width: 40px;
    height: 40px;
    background-image: url(images/deal/plus@2x.png);
    background-size: 24px;
    background-position: right 8px center;
    background-repeat: no-repeat;
    cursor: pointer;
    border-radius: 20px;
    background-color: #a9860e;
    transition: width 0.25s ease;
    font-size: 0;
    color: #ffffff;
    font-weight: 400;
    line-height: 40px;
    white-space: nowrap;
    overflow: hidden;
}

/*#deal #simulators .right .more:hover {
    background-position: right 8px center;
    width: 250px;
    padding-left: 15px;
    font-size: 16px;
}*/

#deal #simulators .right .more.on {
    background-position: right 8px center;
    width: 250px;
    padding-left: 15px;
    font-size: 16px;
}
#deal #simulators .right .more.on span {
    display: block;
}

#deal #simulators .right .box {
    float: left;
    min-width: 245px;
}

#deal #simulators .right .result {
    margin-right: 70px;
}

#deal #simulators .right .avergae {}

#deal #simulators .right .box .name {
    color: #777777;
    font-size: 20px;
    font-weight: 400;
    line-height: 30px;
    padding-bottom: 4px;
}

#deal #simulators .right .box .value {
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 44px;
}

#deal .deal-content {
    padding: 120px 0;
}

#deal .deal-content .content-nav {
    /*padding-bottom: 90px;*/
}

#deal .deal-content .content-nav.fixed {
    padding: 30px 0;
    position: fixed;
    left: 0;
    top: 80px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px #d8d8d8;
    z-index: 10;
}
#deal .deal-content .content-nav .tab-inner {
    margin: 0 auto;
    padding: 0 15px;
    max-width: 1170px;
    width: 100%;
}

#deal .deal-content .content-nav .tab-wrap {
    float: left;
    box-shadow: 0 1px 4px #d8d8d8;
    border-radius: 5px;
    background-color: #ffffff;
    width: 390px;
}

#deal .deal-content .content-nav .tab-wrap .tab {
    position: relative;
    z-index: 99;
    cursor: pointer;
    float: left;
    width: 50%;
    text-align: center;
    line-height: 58px;
    color: #c0c0c0;
    font-size: 26px;
    font-weight: 400;
    border-radius: 5px;
    transition: all 0.25s ease;
}

#deal .deal-content .content-nav .tab-wrap .tab:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 5px;
    transition: all 0.25s ease;
}

#deal .deal-content .content-nav .tab-wrap .tab:hover {
    color: #222222;
    opacity: 1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

#deal .deal-content .content-nav .tab-wrap .tab.active {
    color: #222222;
}

#deal .deal-content .content-nav .tab-wrap .tab.active:before {
    color: #222222;
    opacity: 1;
    z-index: -1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

#deal .deal-content .content-nav .invest-btn {
    float: right;
    position: relative;
    border-radius: 29px;
    border: 2px solid #fdd23e;
    color: #777777;
    font-size: 26px;
    font-weight: 400;
    padding: 10px 20px;
    line-height: 34px;
    transition: all 0.25s ease;
}
#deal .deal-content .content-nav .invest-btn:hover {
    background-color: #fdd23e;
    color: #fff;
}
#deal .deal-content .content-nav .invest-btn .arrow {
    transition: all 0.25s ease;
}
#deal .deal-content .content-nav .invest-btn:hover .arrow {
    color: #fff;
}

#deal .deal-content .content-nav .invest-btn a {
    transition: all 0s;
}

#deal .deal-content .content-nav .invest-btn .won {
    float: left;
    margin-right: 10px;
    width: 30px;
    height: 34px;
    background-image: url(images/deal/won@2x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#deal .deal-content .content-nav .invest-btn .txt {
    float: left;
    margin-right: 15px;
}
#deal .deal-content .content-nav .invest-btn .icon-won {
    display: none;
}
#deal .deal-content .content-nav .invest-btn .arrow {
    float: left;
    font-size: 22px;
    color: #fdd23e;
}

#deal .deal-content .content-wrap {
    padding-top: 90px;
}

#deal .deal-content .content-wrap.basic {}

#deal .deal-content .content-wrap.detail {
    display: none;
}

#deal .deal-content .graph-wrap {
    padding-bottom: 60px;
}

#deal .deal-content .graph-wrap .graph-total {
    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    padding-bottom: 40px;
    text-align: center;
}

#deal .deal-content .graph-wrap .graph-total strong {
    display: block;
    color: #222222;
}

#deal .deal-content .graph-wrap .shape {
    position: relative;
    border-left: 2px dashed #d8d8d8;
    border-right: 2px dashed #d8d8d8;
    height: 36px;
    background-color: transparent;
}

#deal .deal-content .graph-wrap .shape:before {
    position: absolute;
    content: '';
    width: 2px;
    height: 28px;
    border-right: 2px dashed #d8d8d8;
    left: 50%;
    transform: translateX(-50%);
}

#deal .deal-content .graph-wrap .shape.up {
    border-top: 2px dashed #d8d8d8;
}

#deal .deal-content .graph-wrap .shape.up:before {
    top: -30px;
}

#deal .deal-content .graph-wrap .shape.down {
    border-bottom: 2px dashed #d8d8d8;
}

#deal .deal-content .graph-wrap .shape.down:before {
    bottom: -30px;
}

#deal .deal-content .graph-wrap .graph {
    position: relative;
    height: 50px;
    margin: 20px 0;
}

#deal .deal-content .graph-wrap .graph .bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 30px;
}

#deal .deal-content .graph-wrap .graph .bar .txt {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #222222;
    font-size: 20px;
    font-weight: 400;
}

#deal .deal-content .graph-wrap .graph .bar01 {
    z-index: 1;
    background-image: linear-gradient(to right, #ffffff 0%, #fff0be 100%);
    width: 100%;
}

#deal .deal-content .graph-wrap .graph .bar02 {
    z-index: 2;
    background-image: linear-gradient(142deg, #fff3ac 0%, #ffe27c 100%);
}

#deal .deal-content .graph-wrap .graph .bar03 {
    z-index: 3;
    background-image: linear-gradient(142deg, #ffee89 0%, #ffd131 100%);
}

#deal .deal-content .graph-wrap .ltv {
    position: absolute;
    bottom: -67px;
    left: 50%;
    transform: translateX(-50%);
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

#deal .deal-content .graph-wrap .grade-wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
}

#deal .deal-content .graph-wrap .grade-wrap .grade {
    width: calc(10% - 5px);
    height: 50px;
    background-color: #fdd23e;
    opacity: 0.3;
    text-align: center;
    color: #222222;
    font-size: 20px;
    font-weight: 400;
    line-height: 50px;
}

#deal .deal-content .graph-wrap .grade-wrap .grade:first-child {
    border-radius: 100px 0 0 100px;
}

#deal .deal-content .graph-wrap .grade-wrap .grade:last-child {
    border-radius: 0 100px 100px 0;
}

#deal .deal-content .graph-wrap .grade-wrap .grade.active {
    color: #222222;
    opacity: 1;
}

#deal .deal-content .content-wrap .content {
    border-top: 1px solid #d8d8d8;
    padding-top: 90px;
    padding-bottom: 90px;
}

#deal .deal-content .content-wrap .content-title {
    color: #222222;
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
    text-align: center;
    padding-bottom: 90px;
}

#deal .deal-content .content-wrap .point-wrap {}

#deal .deal-content .content-wrap .point-content {
    padding: 0 60px;
}

#deal .deal-content .content-wrap .point-content .point {
    text-align: center;
    float: left;
    width: calc(50% - 45px);
}

#deal .deal-content .content-wrap .point-content .point01 {
    margin-right: 90px;
}

#deal .deal-content .content-wrap .point-content .point .icon {
    margin: 0 auto;
    margin-bottom: 30px;
    width: 82px;
    height: 82px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#deal .deal-content .content-wrap .point-content .point01 .icon {
    background-image: url(images/deal/point01@2x.png);
}

#deal .deal-content .content-wrap .point-content .point02 .icon {
    background-image: url(images/deal/point02@2x.png);
}

#deal .deal-content .content-wrap .point-content .point .text {
    color: #222222;
    font-size: 26px;
    font-weight: 400;
    line-height: 40px;
    padding-bottom: 10px;
}

#deal .deal-content .content-wrap .point-content .point .desc {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    word-break: keep-all;
}

#deal .deal-content .content-wrap .summary-wrap {}

#deal .deal-content .content-wrap .summary-content {
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.7);
    background-color: #ffffff;
}

#deal .deal-content .content-wrap .summary-content table {
    width: 100%;
    table-layout: fixed;
}

#deal .deal-content .content-wrap .summary-content table tbody {}

#deal .deal-content .content-wrap .summary-content table tbody tr {}

#deal .deal-content .content-wrap .summary-content table tbody tr td {
    padding: 30px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: left;
    border-top: 1px solid #d8d8d8;
}

#deal .deal-content .content-wrap .summary-content table tbody tr td.name {
    color: #222222;
    background-color: #f5f5f5;
    width: 132px;
}

#deal .deal-content .content-wrap .summary-content table tbody tr td.value {}

#deal .deal-content .content-wrap .structure-wrap {}

#deal .deal-content .content-wrap .structure-content {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

#deal .deal-content .content-wrap .scenario-wrap {}

#deal .deal-content .content-wrap .scenario-content {}

#deal .deal-content .content-wrap .scenario-content .title {
    color: #222222;
    font-size: 26px;
    font-weight: 400;
    line-height: 40px;
    padding-bottom: 30px;
}

#deal .deal-content .content-wrap .scenario-content .cont {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

#deal .deal-content .content-wrap .notice-wrap {
    padding-bottom: 0;
}

#deal .deal-content .content-wrap .notice-wrap .content-title i {
    font-size: 30px;
    margin-right: 15px;
}

#deal .deal-content .content-wrap .notice-content {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

#deal .deal-content .content-wrap .pawn-analysis-wrap {}

#deal .deal-content .content-wrap .pawn-analysis-content {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

#deal .deal-content .content-wrap .pawn-info-wrap {}

#deal .deal-content .content-wrap .pawn-info-content {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info {
    margin-top: 90px;
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .left {
    float: left;
    max-width: 670px;
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .left .title {
    color: #222222;
    font-size: 26px;
    font-weight: 400;
    line-height: 40px;
    padding-bottom: 30px;
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .left .cont {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    word-break: keep-all;
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .right {
    float: right;
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank {
    position: relative;
    padding-bottom: 20px;
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank:last-child {
    padding-bottom: 0;
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank .dot {
    position: absolute;
    left: 0;
    top: 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank.first .dot {
    background-image: linear-gradient(142deg, #ffee89 0%, #ffd131 100%);
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank.second .dot {
    background-image: linear-gradient(142deg, #fff3ac 0%, #ffe27c 100%);
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank.third .dot {
    background-image: linear-gradient(to right, #ffffff 0%, #fff0be 100%);
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank .rank-name {
    float: left;
    padding-left: 20px;
    padding-right: 30px;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank .rank-value {
    float: left;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank .rank-value .name {
    color: #777777;

}

#deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank .rank-value .value {
    color: #222222;
    font-weight: 700;
}

#deal .deal-content .content-wrap .location-wrap {}

#deal .deal-content .content-wrap .location-content {}

#deal .deal-content .content-wrap .location-content .address {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 30px;
}

#deal .deal-content .content-wrap .location-content .map {
    height: 450px;
    background-color: orange;
}

#deal .deal-content .content-wrap .raiting-wrap {}

#deal .deal-content .content-wrap .raiting-content {}

#deal .deal-content .content-wrap .raiting-content .graph-wrap {
    padding-bottom: 90px;
}

#deal .deal-content .content-wrap .raiting-content .raiting-info {}

#deal .deal-content .content-wrap .raiting-content .raiting-info table {
    width: 100%;
    table-layout: fixed;
}

#deal .deal-content .content-wrap .raiting-content .raiting-info table thead {}

#deal .deal-content .content-wrap .raiting-content .raiting-info table thead tr {}

#deal .deal-content .content-wrap .raiting-content .raiting-info table thead tr th {
    padding: 20px 30px;
    background-color: #f5f5f5;
    border-right: 1px solid #d8d8d8;
    color: #222222;
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
}

#deal .deal-content .content-wrap .raiting-content .raiting-info table thead tr th.name {
    width: 140px;
}

#deal .deal-content .content-wrap .raiting-content .raiting-info table thead tr th.desc {
    width: 435px;
}

#deal .deal-content .content-wrap .raiting-content .raiting-info table thead tr th:last-child {
    border-right: 0;
}

#deal .deal-content .content-wrap .raiting-content .raiting-info table tbody {
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.7);
    background-color: #ffffff;
}

#deal .deal-content .content-wrap .raiting-content .raiting-info table tbody tr {}

#deal .deal-content .content-wrap .raiting-content .raiting-info table tbody tr:last-child td {
    border-bottom: 0;
}

#deal .deal-content .content-wrap .raiting-content .raiting-info table tbody tr td {
    padding: 20px 30px;
    border-bottom: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    color: #777777;
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
    vertical-align: middle;
}

#deal .deal-content .content-wrap .raiting-content .raiting-info table tbody tr td:last-child {
    border-right: 0;
}


#deal .deal-content .content-wrap .raiting-content .raiting-info table tbody tr td.bar-wrap {}

#deal .deal-content .content-wrap .raiting-content .raiting-info table tbody tr td .bar {
    margin-right: 10px;
    display: inline-block;
    width: 98px;
    height: 25px;
    background-color: #fdd23e;
    opacity: 0.3;
}

#deal .deal-content .content-wrap .raiting-content .raiting-info table tbody tr td .bar:first-child {
    border-radius: 100px 0 0 100px;
    margin-left: 0;
}

#deal .deal-content .content-wrap .raiting-content .raiting-info table tbody tr td .bar:last-child {
    border-radius: 0 100px 100px 0;
    margin-right: 0;
}

#deal .deal-content .content-wrap .raiting-content .raiting-info table tbody tr td .bar.active {
    opacity: 1;
}

#deal .deal-content .content-wrap .creditor-info-wrap {}

#deal .deal-content .content-wrap .creditor-info-content {}

#deal .deal-content .content-wrap .creditor-info-content .creditor-table {}

#deal .deal-content .content-wrap .creditor-info-content .creditor-table table {
    width: calc(50% - 15px);
    float: left;
}

#deal .deal-content .content-wrap .creditor-info-content .creditor-table table.left {
    margin-right: 30px;
}

#deal .deal-content .content-wrap .creditor-info-content .creditor-table table thead {}

#deal .deal-content .content-wrap .creditor-info-content .creditor-table table thead tr {}

#deal .deal-content .content-wrap .creditor-info-content .creditor-table table thead tr th {
    text-align: left;
    padding: 20px 30px;
    background-color: #f5f5f5;
    color: #222222;
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
}

#deal .deal-content .content-wrap .creditor-info-content .creditor-table table tbody {
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.7);
    background-color: #ffffff;
}

#deal .deal-content .content-wrap .creditor-info-content .creditor-table table tbody tr {}

#deal .deal-content .content-wrap .creditor-info-content .creditor-table table tbody tr:last-child td {
    border-bottom: 0;
}

#deal .deal-content .content-wrap .creditor-info-content .creditor-table table tbody tr td {
    padding: 20px 30px;
    border-bottom: 1px solid #d8d8d8;
    border-right: 1px solid #d8d8d8;
    color: #777777;
    font-size: 18px;
    line-height: 27px;
    font-weight: 400;
    vertical-align: middle;
}

#deal .deal-content .content-wrap .creditor-info-content .creditor-table table tbody tr td:first-child {
    width: 180px;
}

#deal .deal-content .content-wrap .creditor-info-content .creditor-table table tbody tr td:last-child {
    border-right: 0;
}

#deal .deal-content .content-wrap .document-wrap {
    padding-bottom: 0;
    margin-bottom: -30px;
}

#deal .deal-content .content-wrap .document-content {
    margin: 0 -30px;
    padding: 0 75px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
}

#deal .deal-content .content-wrap .document-content .file {
    width: calc(33.333333% - 30px);
    margin: 0 30px;
    max-width: 300px;
    margin-bottom: 30px;
    padding: 12px 25px;
    border-radius: 29px;
    background-color: #fdd23e;
    text-align: left;
    color: #ffffff;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#deal .deal-content .content-wrap .document-content .file i {
    margin-right: 15px;
}

@media all and (max-width: 1023px) {
    #deal .deal-header {
        height: 964px;
    }

    #deal .deal-header .header-wrap {
        padding-top: 60px;
        height: 904px;
        position: relative;
    }

    #deal .deal-header .header-wrap .percent-wrap {
        position: absolute;
        bottom: 30px;
    }

    #deal .deal-header .header-wrap .content-wrap {
        max-width: 100%;
    }

    #deal .deal-header .header-wrap .col-12 {
        padding: 0 30px;
    }

    #deal .deal-header .header-wrap .title-wrap .title {
        max-width: 410px;
        max-height: 198px;
        -webkit-line-clamp: 3;
        word-break: keep-all;
    }

    #deal .deal-header .header-wrap .header-bg {
        width: 433px;
        height: 750px;
        z-index: -1;
        background-position: center bottom;
        background-size: cover;
        background-repeat: no-repeat;
    }

    #deal .deal-header .header-wrap .badge-wrap .date {
        display: none;
    }

    #deal .deal-header .header-wrap .data-wrap .data {
        float: none;
        margin-right: 0;
        margin-bottom: 30px;
    }

    #deal .deal-header .header-wrap .data-wrap .data:last-child {
        margin-bottom: 0;
    }

    #deal .deal-header .header-wrap .invest-btn {
        margin-top: 0;
        position: absolute;
        right: 30px;
        bottom: 41px;
    }

    #deal .deal-header .header-wrap .data-wrap {
        max-width: 245px;
        word-break: keep-all;
    }

    #deal #simulators {
        height: 335px;
    }

    #deal #simulators .left {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        text-align: center;
    }

    #deal #simulators .right {
        border-radius: 0 30px;
        width: calc(100% - 40px);
        height: 180px;
        top: unset;
        right: unset;
        bottom: -90px;
        left: 50%;
        transform: translateX(-50%);
        padding: 0 80px;
    }

    #deal #simulators .right .more {
        top: 15px;
        right: 15px;
    }

    #deal #simulators .left .input-wrap input {
        width: calc(100% - 65px);
    }

    #deal .deal-content {
        padding-top: 180px;
        padding-bottom: 100px;
    }

    #deal .deal-content .content-nav {
        /*padding-bottom: 60px;*/
    }

    #deal .deal-content .content-wrap {
        padding-top: 60px;
    }

    #deal .deal-content .content-wrap .content {
        padding-top: 60px;
        padding-bottom: 60px;
    }

    #deal .deal-content .content-wrap .content-title {
        padding-bottom: 60px;
    }

    #deal .deal-content .content-wrap .point-content .point {
        width: 100%;
    }

    #deal .deal-content .content-wrap .point-content .point01 {
        margin-right: 0;
        margin-bottom: 60px;
    }

    #deal .deal-content .content-wrap .scenario-content .title {
        text-align: center;
    }

    #deal .deal-content .content-wrap .notice-wrap {
        padding-bottom: 0;
    }

    #deal .deal-content .content-wrap .pawn-info-content .loan-info {
        margin-top: 60px;
    }

    #deal .deal-content .content-wrap .pawn-info-content .loan-info .left {
        max-width: 420px;
    }

    #deal .deal-content .content-wrap .location-content .map {
        height: 400px;
    }

    #deal .deal-content .content-wrap .raiting-content .graph-wrap {
        padding-bottom: 60px;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-info table thead tr th.name {
        width: 90px;
        padding: 20px;
        text-align: left;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-info table thead tr th.desc {
        width: 350px;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-info table tbody tr td {
        padding: 30px 20px;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-info table tbody tr td .bar {
        width: 45px;
    }

    #deal .deal-content .content-wrap .creditor-info-content .creditor-table table tbody tr td {
        padding: 30px 20px;
    }

    #deal .deal-content .content-wrap .creditor-info-content .creditor-table table tbody tr td:first-child {
        width: 160px;
    }

    #deal .deal-content .content-wrap .document-wrap {
        padding-bottom: 0;
    }

    #deal .deal-content .content-wrap .document-content {
        padding: 0 50px;
    }

    #deal .deal-content .content-wrap .document-content .file {
        width: calc(50% - 50px);
        margin: 0 25px;
        max-width: unset;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-info table tbody tr td .bar {
        margin: 0 4px;
    }
}

@media all and (max-width: 767px) {
    #deal .deal-header {
        /*height: 490px;*/
        height: auto;
        min-height: 380px;
    }

    #deal .deal-header .header-wrap {
        padding-top: 30px;
        /*height: 460px;*/
        height: auto;
        min-height: 380px;
    }

    #deal .deal-header .header-wrap .col-12 {
        padding: 0 20px;
    }

    #deal .deal-header .header-wrap .header-bg {
        display: none;
    }

    #deal .deal-header .header-wrap .badge-wrap .new {
        margin-right: 10px;
        font-size: 13px;
        padding: 0 11px;
        line-height: 25px;
    }

    #deal .deal-header .header-wrap .badge-wrap .status {
        font-size: 14px;
        line-height: 21px;
        padding-bottom: 2px;
        border-width: 2px;
    }

    #deal .deal-header .header-wrap .title-wrap {
        margin-bottom: 30px;
    }

    #deal .deal-header .header-wrap .title-wrap .title {
        font-size: 26px;
        line-height: 39px;
        max-width: 100%;
        max-height: 117px;
    }

    #deal .deal-header .header-wrap .data-wrap {
        max-width: 100%;
    }

    #deal .deal-header .header-wrap .data-wrap .data {
        float: left;
        margin-right: 20px;
        margin-bottom: 0;
    }

    #deal .deal-header .header-wrap .data-wrap .data.amount {
        margin-bottom: 20px;
    }

    #deal .deal-header .header-wrap .data-wrap .data .name {
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 0;
    }

    #deal .deal-header .header-wrap .data-wrap .data .value {
        font-size: 18px;
        line-height: 27px;
    }

    #deal .deal-header .header-wrap .percent-wrap {
        margin-top: 65px;

        /*position: absolute;*/
        position: relative;
        left: 0;
        bottom: 20px;
        width: unset;
        max-width: 140px;
    }

    #deal .deal-header .header-wrap .percent-wrap .percent {
        float: none;
        margin-right: 0;
        font-size: 24px;
        padding-bottom: 3px;
    }

    #deal .deal-header .header-wrap .percent-bar {
        height: 2px;
    }

    #deal .deal-header .header-wrap .percent-wrap .percent .unit {
        font-size: 12px;
        padding-left: 2px;
    }

    #deal .deal-header .header-wrap .percent-wrap .people {
        float: none;
        margin-top: 0;
        padding: 5px 10px;
        font-size: 14px;
        line-height: 20px;
    }

    #deal .deal-header .header-wrap .invest-btn {
        right: 20px;
        bottom: 20px;
        line-height: 18px;
        font-size: 12px;
    }

    #deal .deal-header .header-wrap .invest-btn .arrow {
        font-size: 16px;
    }

    #deal .deal-header .header-wrap .invest-btn .won {
        display: none;
    }

    #deal #simulators {
        height: 238px;
        padding: 30px 0;
    }

    #deal #simulators .left .txt01 {
        font-size: 18px;
        line-height: 27px;
        padding-bottom: 10px;
    }

    #deal #simulators .left .mb-flex {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
    }

    #deal #simulators .left .mb-flex .bridge {
        margin-left: 10px;
        line-height: 40px;
        color: #222222;
        font-size: 18px;
        font-weight: 400;
    }

    #deal #simulators .left .input-wrap {
        float: none;
        height: 40px;
        width: 100%;
        padding: 10px;
    }

    #deal #simulators .left .input-wrap .unit {
        line-height: 20px;
        font-size: 14px;
    }

    #deal #simulators .left .input-wrap input {
        width: calc(100% - 20px);
        line-height: 20px;
        font-size: 14px;
        float: left;
    }

    #deal #simulators .left .input-wrap input::placeholder {
        font-size: 14px !important;
    }

    #deal #simulators .left .txt02 {
        float: none;
        width: 100%;
        padding-top: 10px;
        margin-left: 0;
        color: #222222;
        font-size: 18px;
        font-weight: 400;
        line-height: 27px;
    }

    #deal #simulators .right {
        min-width: unset;
        width: calc(100% - 40px);
        height: 144px;
        bottom: -72px;
        padding: 20px 0;
        flex-wrap: wrap;
        justify-content: center;
    }

    #deal #simulators .right .more {
        width: 22px;
        height: 22px;
        background-size: 14px;
        background-position: right 4px center;
        line-height: 22px;
    }

    #deal #simulators .right .more:hover {
        font-size: 12px;
        width: 173px;
        padding-left: 8px;
    }

    #deal #simulators .right .box {
        float: none;
        min-width: unset;
        width: 100%;
        text-align: center;
    }

    #deal #simulators .right .result {
        margin-right: 0;
        margin-bottom: 15px;
    }

    #deal #simulators .right .box .name {
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 0;
    }

    #deal #simulators .right .box .value {
        font-size: 17px;
        line-height: 25px;
    }

    #deal .deal-content {
        padding-top: 120px;
        padding-bottom: 60px;
    }

    #deal .deal-content .content-nav {
        /*padding-bottom: 30px;*/
    }

    #deal .deal-content .content-nav .tab-wrap {
        width: 220px;
        background-color: transparent;
        box-shadow: unset;
    }

    #deal .deal-content .content-nav .tab-wrap .tab {
        font-size: 14px;
        line-height: 40px;
    }

    #deal .deal-content .content-nav .invest-btn {
        margin-top: 4px;
        border-radius: 50%;
        background-image: linear-gradient(136deg, #ffeb72 0%, #fdd23e 100%);
        border: 0;
        width: 32px;
        height: 32px;
        padding: 0;
        text-align: center;
    }

    #deal .deal-content .content-nav .invest-btn .won {
        display: none;
    }

    #deal .deal-content .content-nav .invest-btn .txt {
        display: none;

        margin-right: 0;
        float: none;
        color: #ffffff;
        font-size: 20px;
        font-weight: 700;
    }

    #deal .deal-content .content-nav .invest-btn .icon-won {
        display: block;
        color: #ffffff;
        font-size: 20px;
        font-weight: 700;
    }

    #deal .deal-content .content-nav .invest-btn .arrow {
        display: none;
    }
    
    #deal .deal-content .content-wrap {
        padding-top: 30px;
    }

    #deal .deal-content .content-wrap .content {
        padding-top: 50px;
        padding-bottom: 50px;
    }

    #deal .deal-content .content-wrap .content-title {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 50px;
    }

    #deal .deal-content .graph-wrap {
        padding-bottom: 40px;
    }

    #deal .deal-content .graph-wrap .graph-total {
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 25px;
    }

    #deal .deal-content .graph-wrap .shape {
        height: 20px;
        border-width: 1px;
    }

    #deal .deal-content .graph-wrap .shape:before {
        height: 18px;
        width: 1px;
        border-width: 1px;
    }

    #deal .deal-content .graph-wrap .shape.up {
        border-width: 1px;
    }

    #deal .deal-content .graph-wrap .shape.up:before {
        top: -18px;
    }

    #deal .deal-content .graph-wrap .shape.down {
        border-width: 1px;
        width: 100% !important;
    }

    #deal .deal-content .graph-wrap .shape.down:before {
        bottom: -18px;
    }

    #deal .deal-content .graph-wrap .graph {
        margin: 10px 0;
        height: 30px;
    }

    #deal .deal-content .graph-wrap .graph .bar .txt {
        font-size: 12px;
        right: 5px;
    }

    #deal .deal-content .graph-wrap .ltv {
        font-size: 14px;
        line-height: 20px;
        bottom: -43px;
    }

    #deal .deal-content .graph-wrap .grade-wrap {
        padding-top: 10px;
    }

    #deal .deal-content .graph-wrap .grade-wrap .grade {
        font-size: 12px;
        height: 30px;
        line-height: 30px;
    }

    #deal .deal-content .content-wrap .point-content {
        padding: 0;
    }

    #deal .deal-content .content-wrap .point-content .point01 {
        margin-bottom: 50px;
    }

    #deal .deal-content .content-wrap .point-content .point .icon {
        width: 70px;
        height: 70px;
        margin-bottom: 15px;
    }

    #deal .deal-content .content-wrap .point-content .point .text {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 10px;
    }

    #deal .deal-content .content-wrap .point-content .point .desc {
        font-size: 14px;
        line-height: 20px;
    }

    #deal .deal-content .content-wrap .summary-content table tbody tr td {
        padding: 15px;
        font-size: 14px;
        line-height: 21px;
    }

    #deal .deal-content .content-wrap .summary-content table tbody tr td.name {
        width: 85px;
    }

    #deal .deal-content .content-wrap .structure-content {
        font-size: 14px;
        line-height: 21px;
    }

    #deal .deal-content .content-wrap .scenario-content .title {
        text-align: left;
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 15px;
    }

    #deal .deal-content .content-wrap .scenario-content .cont {
        font-size: 14px;
        line-height: 21px;
    }

    #deal .deal-content .content-wrap .notice-wrap .content-title i {
        margin-right: 10px;
        font-size: 20px;
    }

    #deal .deal-content .content-wrap .notice-wrap {
        padding-bottom: 0;
    }

    #deal .deal-content .content-wrap .notice-content {
        font-size: 14px;
        line-height: 21px;
    }

    #deal .deal-content .content-wrap .pawn-analysis-content {
        font-size: 14px;
        line-height: 21px;
    }

    #deal .deal-content .content-wrap .pawn-info-content .loan-info {
        margin-top: 15px;
    }

    #deal .deal-content .content-wrap .pawn-info-content .loan-info .right {
        float: left;
    }

    #deal .deal-content .content-wrap .pawn-info-content .loan-info .left {
        padding-top: 50px;
    }

    #deal .deal-content .content-wrap .pawn-info-content .loan-info .left .title {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 15px;
    }

    #deal .deal-content .content-wrap .pawn-info-content .loan-info .left .cont {
        font-size: 14px;
        line-height: 21px;
    }

    #deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank .rank-name {
        padding-right: 0;
        float: none;
        padding-bottom: 8px;
    }

    #deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank .rank-value {
        float: none;
    }

    #deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank .rank-value .name {
        float: left;
    }

    #deal .deal-content .content-wrap .pawn-info-content .loan-info .right .rank .rank-value .value {
        float: left;
    }

    #deal .deal-content .content-wrap .location-content .address {
        font-size: 14px;
        line-height: 20px;
        padding-bottom: 15px;
    }

    #deal .deal-content .content-wrap .location-content .map {
        height: 300px;
    }

    #deal .deal-content .content-wrap .raiting-content .graph-wrap {
        padding-bottom: 30px;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-slider {
        box-shadow: 0 2px 4px rgba(216, 216, 216, 0.7);
        background-color: #ffffff;

        font-size: 0;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-slider .cell {
        border-top: 1px solid #d8d8d8;
        padding: 15px;
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-slider .left {
        background-color: #f5f5f5;
        width: 82px;
        float: left;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-slider .left .cell {
        color: #222222;
        transition: all 0.25s ease;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-slider .right-wrap {
        float: left;
        width: calc(100% - 82px);
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-slider .right {}

    #deal .deal-content .content-wrap .raiting-content .raiting-slider .right .cell {
        color: #777777;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-slider .cell.bar-wrap {
        height: 52px;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-slider .cell.bar-wrap .bar {
        margin-right: 3px;

        display: inline-block;
        width: 28px;
        height: 17px;
        background-color: #fdd23e;
        opacity: 0.3;
    }
    #deal .deal-content .content-wrap .raiting-content .raiting-slider .cell.bar-wrap .bar.active {
        opacity: 1;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-slider .cell.bar-wrap .bar:first-child {
        border-radius: 100px 0 0 100px;

    }

    #deal .deal-content .content-wrap .raiting-content .raiting-slider .cell.bar-wrap .bar:last-child {
        margin-right: 0;
        border-radius: 0 100px 100px 0;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-util {
        margin: 0 auto;
        margin-top: 30px;
        position: relative;
        max-width: 150px;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-util .slider-nav {}

    #deal .deal-content .content-wrap .raiting-content .raiting-util .slider-nav .slick-arrow {
        position: absolute;
        top: 0;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-util .slider-nav .slick-arrow i {
        display: inline-block;
        width: 23px;
        height: 23px;
        font-size: 16px;
        text-align: center;
        border: 1px solid #d8d8d8;
        border-radius: 50%;
        color: #d8d8d8;
        line-height: 21px;
        transition: all 0.25s ease;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-util .slider-nav .slick-arrow i:hover {
        color: #fdd23e;
        border-color: #fdd23e;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-util .slider-nav .slick-arrow.nav-prev {
        left: 0;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-util .slider-nav .slick-arrow.nav-next {
        right: 0;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-util .slider-dots ul {
        height: 23px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-util .slider-dots ul li {
        margin: 0 7.5px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-util .slider-dots ul li button {
        cursor: pointer;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #d8d8d8;
        padding: 0;
        font-size: 0;
        border: 0;
        transition: all 0.25s ease;
    }

    #deal .deal-content .content-wrap .raiting-content .raiting-util .slider-dots ul li.slick-active button {
        background-color: #fdd23e;
    }

    #deal .deal-content .content-wrap .creditor-info-content .graph-wrap {
        display: none;
    }

    #deal .deal-content .content-wrap .creditor-info-content .creditor-table table {
        width: 100%;
    }

    #deal .deal-content .content-wrap .creditor-info-content .creditor-table table.left {
        margin-right: 0;
        margin-bottom: 30px;
    }

    #deal .deal-content .content-wrap .creditor-info-content .creditor-table table thead tr th {
        padding: 15px;
        font-size: 14px;
        line-height: 21px;
    }

    #deal .deal-content .content-wrap .creditor-info-content .creditor-table table tbody tr td {
        padding: 15px;
        font-size: 14px;
        line-height: 21px;
        word-break: keep-all;
    }

    #deal .deal-content .content-wrap .creditor-info-content .creditor-table table tbody tr td:first-child {
        width: 85px;
    }

    #deal .deal-content .content-wrap .document-wrap {
        padding-bottom: 0;
        margin-bottom: -10px;
    }

    #deal .deal-content .content-wrap .document-content {
        padding: 0;
    }

    #deal .deal-content .content-wrap .document-content .file {
        position: relative;
        /*width: 100%;*/
        width: calc(100% - 122px);
        max-width: unset;
        /*margin-bottom: 10px;*/
        margin: 0 auto 10px;
        font-size: 12px;
        line-height: 18px;
        /*padding: 7px 15px;*/
        padding: 7px 45px 7px 15px;
    }
    #deal .deal-content .content-wrap .document-content .file i {
        margin-right: 7px;
    }
    #deal .deal-content .content-wrap .document-content .file .arrow {
        position: absolute;
        /*right: 15px;*/
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        font-size: 18px;

    }
}

/**
 * company
 */
#company {}

#company .company-top {
    padding-top: 170px;
    padding-bottom: 250px;
    background-image: url(images/company/company-top.png);
    background-position: right 80px center;
    background-repeat: no-repeat;
}

#company .company-top .title {
    color: #222222;
    font-size: 44px;
    font-weight: 400;
    line-height: 66px;
    padding-bottom: 30px;
}

#company .company-top .desc {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    word-break: keep-all;
    max-width: 600px;
}

@media all and (max-width: 1023px) {
    #company .company-top {
        padding: 90px 0;
        background-image: unset;
    }

    #company .company-top .img {}

    #company .company-top .img img {
        display: block;
        max-width: 260px;
        margin: 0 auto;
        margin-bottom: 45px;
    }

    #company .company-top .title {
        text-align: center;
    }

    #company .company-top .desc {
        margin: 0 auto;
        text-align: center;
    }
}

@media all and (max-width: 767px) {
    #company .company-top {
        padding: 40px 0;
    }

    #company .company-top .img img {
        max-width: 154px;
        margin-bottom: 25px;
    }

    #company .company-top .title {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 15px;
    }

    #company .company-top .desc {
        font-size: 14px;
    }

}

#company .company-desc {
    padding: 120px 0;
    background-color: rgba(253, 210, 62, 0.15);
}

#company .company-desc .title {
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    text-align: center;
    padding-bottom: 30px;
}

#company .company-desc .title strong {}

#company .company-desc .desc {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    text-align: center;
    padding-bottom: 120px;
}

#company .company-desc .card-wrap {}

#company .company-desc .card-wrap .card {
    overflow: hidden;
    cursor: pointer;
    float: left;
    width: 170px;
    height: 550px;
    margin-right: 30px;
    box-shadow: 1px 2px 7px #d8d8d8;
    border-radius: 0 0 0 90px;
    transition: all 0.25s ease;
}

#company .company-desc .card-wrap .card:last-child {
    margin-right: 0;
}

#company .company-desc .card-wrap .card.active {
    width: 770px;
}

#company .company-desc .card-wrap .card .img {
    float: left;
    width: 100%;
    height: 100%;
    border-radius: 0 0 0 90px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    transition: all 0.25s ease;
}

#company .company-desc .card-wrap .card01 .img {
    background-image: linear-gradient(155deg, rgba(255, 242, 165, 0.45) 0%, rgba(255, 198, 0, 0.45) 100%), url(images/company/card01@2x.png);
}

#company .company-desc .card-wrap .card02 .img {
    background-image: linear-gradient(155deg, rgba(255, 242, 165, 0.45) 0%, rgba(255, 198, 0, 0.45) 100%), url(images/company/card02@2x.png);
}

#company .company-desc .card-wrap .card03 .img {
    background-image: linear-gradient(155deg, rgba(255, 242, 165, 0.45) 0%, rgba(255, 198, 0, 0.45) 100%), url(images/company/card03@2x.png);
}

#company .company-desc .card-wrap .card .text-wrap {
    position: relative;
    display: none;
    float: left;
    width: 395px;
    height: 100%;
    background-color: #ffffff;
}

#company .company-desc .card-wrap .card .text {
    position: absolute;
    width: 100%;
    max-width: 275px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

#company .company-desc .card-wrap .card .text .title-wrap {
    padding-bottom: 30px;
    border-bottom: 1px solid #d8d8d8;
    text-align: center;
}

#company .company-desc .card-wrap .card .text .title-wrap .title {
    position: relative;
    display: inline-block;
    padding-bottom: 0;
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
}

#company .company-desc .card-wrap .card .text .title-wrap .title small {
    position: absolute;
    right: 0;
    top: -24px;
    color: #c0c0c0;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

#company .company-desc .card-wrap .card .text .desc {
    padding-top: 40px;
    padding-bottom: 0;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#company .company-desc .card-wrap .card.active .img {
    width: 375px;
}

#company .company-desc .card-wrap .card.active .text-wrap {
    display: block;
}

#company .company-desc .desc-util {
    position: relative;
    margin-top: 60px;
}
#company .company-desc .desc-util .slider-nav {}
#company .company-desc .desc-util .slider-nav .slick-arrow {}
#company .company-desc .desc-util .slider-nav .nav-prev {
    left: inherit;
}
#company .company-desc .desc-util .slider-nav .nav-next {
    right: inherit;
}
#company .company-desc .desc-util .slider-dots {}
#company .company-desc .desc-util .slider-dots .slick-dots {}

/* 20200520 company의 3가지 start */
    #company .company-desc .desc-util .slider-nav .slick-arrow {
        cursor: pointer;
        position: absolute;
    }

    #company .company-desc .desc-util .slider-nav .slick-arrow i {
        display: inline-block;
        font-size: 34px;
        width: 50px;
        height: 50px;
        color: #d8d8d8;
        line-height: 48px;
        text-align: center;
        transition: all 0.25s ease;
    }

    #company .company-desc .desc-util .slider-nav .slick-arrow i:hover {
        color: #fdd23e;
        border-color: #fdd23e;
    }

    #company .company-desc .desc-util .slider-nav .nav-prev {
        left: 0;
    }

    #company .company-desc .desc-util .slider-nav .nav-next {
        right: 0;
    }

    #company .company-desc .desc-util .slider-dots {}

    #company .company-desc .desc-util .slider-dots ul {
        height: 50px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
    }

    #company .company-desc .desc-util .slider-dots ul li {
        margin: 0 7.5px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }

    #company .company-desc .desc-util .slider-dots ul li button {
        cursor: pointer;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #d8d8d8;
        padding: 0;
        font-size: 0;
        border: 0;
        transition: all 0.25s ease;
    }

    #company .company-desc .desc-util .slider-dots ul li.slick-active button {
        background-color: #fdd23e;
    }
/* company의 3가지 end */


@media all and (max-width: 1023px) {
    #company .company-desc {
        padding-top: 90px;
        padding-bottom: 30px;
    }

    #company .company-desc .desc {
        padding-bottom: 90px;
    }

    #company .company-desc .card-wrap .slick-list {
        padding: 10px 0;
    }

    #company .company-desc .card-wrap .card {
        margin-right: 0;
    }

    #company .company-desc .card-wrap .card .img {
        width: 50%;
    }

    #company .company-desc .card-wrap .card.active .img {
        width: 50%;
    }

    #company .company-desc .card-wrap .card .text-wrap {
        width: 50%;
        display: block;
    }

    #company .company-desc .card-wrap .card.active .text-wrap {
        width: 50%;
    }

    #company .company-desc .desc-util {
        /*margin-top: 90px;*/
        margin-top: 21px;
        position: relative;
        width: 100%;
        height: 50px;
    }

    #company .company-desc .desc-util .slider-nav .slick-arrow {
        cursor: pointer;
        position: absolute;
    }

    #company .company-desc .desc-util .slider-nav .slick-arrow i {
        display: inline-block;
        font-size: 34px;
        width: 50px;
        height: 50px;
        color: #d8d8d8;
        line-height: 48px;
        text-align: center;
        transition: all 0.25s ease;
    }

    #company .company-desc .desc-util .slider-nav .slick-arrow i:hover {
        color: #fdd23e;
        border-color: #fdd23e;
    }

    #company .company-desc .desc-util .slider-nav .nav-prev {
        left: 0;
    }

    #company .company-desc .desc-util .slider-nav .nav-next {
        right: 0;
    }

    #company .company-desc .desc-util .slider-dots {}

    #company .company-desc .desc-util .slider-dots ul {
        height: 50px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
    }

    #company .company-desc .desc-util .slider-dots ul li {
        margin: 0 7.5px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }

    #company .company-desc .desc-util .slider-dots ul li button {
        cursor: pointer;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #d8d8d8;
        padding: 0;
        font-size: 0;
        border: 0;
        transition: all 0.25s ease;
    }

    #company .company-desc .desc-util .slider-dots ul li.slick-active button {
        background-color: #fdd23e;
    }
}

@media all and (max-width: 767px) {
    #company .company-desc {
        padding: 50px 0;
    }

    #company .company-desc .col-12 {
        padding: 0;
    }

    #company .company-desc .title {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 15px;
    }

    #company .company-desc .desc {
        font-size: 14px;
        padding-bottom: 50px;
    }

    #company .company-desc .card-wrap .card {
        border-radius: 0 0 0 60px;
        margin: 0 15px;
    }


    #company .company-desc .card-wrap .card .img {
        float: none;
        width: 100%;
        height: 262px;
        border-radius: 0;
    }

    #company .company-desc .card-wrap .card.active .img {
        width: 100%;
    }

    #company .company-desc .card-wrap .card .text-wrap {
        float: none;
        width: 100%;
        height: 288px;
    }

    #company .company-desc .card-wrap .card.active .text-wrap {
        width: 100%;
    }

    #company .company-desc .card-wrap .card .text {
        max-width: 220px;
    }

    #company .company-desc .card-wrap .card .text .title-wrap {}

    #company .company-desc .card-wrap .card .text .title-wrap .title {
        font-size: 20px;
        line-height: 30px;
    }

    #company .company-desc .card-wrap .card .text .title-wrap .title small {
        font-size: 12px;
        line-height: 18px;
        top: -18px;
    }

    #company .company-desc .card-wrap .card .text .desc {
        font-size: 14px;
        line-height: 20px;
        padding-top: 30px;
        word-break: keep-all;
    }

    #company .company-desc .card-wrap .card .text .desc br {
        display: none;
    }

    #company .company-desc .desc-util {
        margin-top: 20px;
        height: 23px;
    }
    #company .company-desc .desc-util .slider-dots ul {
        height: 23px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
    }

    #company .company-desc .desc-util .slider-dots ul li {
        margin: 0 7.5px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }

    #company .company-desc .desc-util .slider-dots ul li button {
        cursor: pointer;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #d8d8d8;
        padding: 0;
        font-size: 0;
        border: 0;
        transition: all 0.25s ease;
    }

    #company .company-desc .desc-util .slider-dots ul li.slick-active button {
        background-color: #fdd23e;
    }

    #company .company-desc .desc-util .slider-nav {}

    #company .company-desc .desc-util .slider-nav .slick-arrow i {
        display: inline-block;
        width: 23px;
        height: 23px;
        font-size: 16px;
        line-height: 23px;
    }

    #company .company-desc .desc-util .slider-nav .nav-prev {
        left: 7px;
    }

    #company .company-desc .desc-util .slider-nav .nav-next {
        right: 7px;
    }


}

#company .company-people {
    padding: 120px 0;
}

#company .company-people .title {
    text-align: center;
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    margin-bottom: 130px;
}

#company .company-people .people-wrap {
    margin: 0 auto;
    max-width: 970px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#company .company-people .people-wrap .people {
    width: 400px;
}

#company .company-people .people-wrap .people01 {
    min-height: 708px;
    margin-bottom: 120px;
}

#company .company-people .people-wrap .people02 {
    min-height: 708px;
    margin-bottom: 120px;
}

#company .company-people .people-wrap .people .img {
    margin-bottom: 30px;
}

#company .company-people .people-wrap .people .img img {
    display: block;
    margin: 0 auto;
    width: 190px;
}

#company .company-people .people-wrap .people .text-wrap {
    text-align: center;
    padding-bottom: 30px;
    border-bottom: 1px solid #d8d8d8;

}

#company .company-people .people-wrap .people .text-wrap .role {
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
    padding-bottom: 15px;
}

#company .company-people .people-wrap .people .text-wrap .name {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#company .company-people .people-wrap .people .text-wrap .name span {
    font-weight: 700;
}

#company .company-people .people-wrap .people .career {
    padding: 30px 0;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

#company .company-people .people-wrap .people .career .text {
    text-align: left;
}

#company .company-people .people-wrap .people .bubble {
    position: relative;
    padding: 20px;
    border-radius: 15px;
    background-color: rgba(253, 210, 62, 0.15);
    text-align: center;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#company .company-people .people-wrap .people .bubble .quote {
    position: absolute;
    width: 38px;
    height: 33px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#company .company-people .people-wrap .people .bubble .quote.left {
    left: -5px;
    top: -15px;
    background-image: url(images/company/left-quote@2x.png);
}

#company .company-people .people-wrap .people .bubble .quote.right {
    right: -5px;
    bottom: -15px;
    background-image: url(images/company/right-quote@2x.png);
}

@media all and (max-width: 1023px) {
    #company .company-people {
        padding: 90px 0;
    }

    #company .company-people .title {
        position: relative;
        margin-bottom: 100px;
    }

    #company .company-people .people-wrap .people {}

    #company .company-people .people-wrap .people01 {
        margin-bottom: 0;
        min-height: unset;
    }

    #company .company-people .people-wrap .people02 {
        margin-bottom: 0;
        min-height: unset;
    }

    #company .company-people .people-wrap .people .inner-wrap {
        max-width: 400px;
        margin: 0 auto;
        padding-bottom: 15px;
    }

    #company .company-people .people-util {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
    }

    #company .company-people .people-util .slider-nav {}

    #company .company-people .people-util .slider-nav .slick-arrow {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    #company .company-people .people-util .slider-nav .slick-arrow i {
        display: inline-block;
        width: 30px;
        height: 30px;
        font-size: 20px;
        line-height: 26px;
        border: 2px solid #d8d8d8;
        border-radius: 50%;
        color: #d8d8d8;
        text-align: center;
        transition: all 0.25s ease;
    }

    #company .company-people .people-util .slider-nav .slick-arrow i:hover {
        color: #fdd23e;
        border-color: #fdd23e;
    }

    #company .company-people .people-util .slider-nav .nav-prev {
        left: 0;
    }

    #company .company-people .people-util .slider-nav .nav-next {
        right: 0;
    }
}

@media all and (max-width: 767px) {
    #company .company-people {
        padding: 50px 0;
    }

    #company .company-people .title {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: 50px;
    }

    #company .company-people .people-util .slider-nav .slick-arrow i {
        width: 23px;
        height: 23px;
        font-size: 16px;
        line-height: 21px;
        border-width: 1px;
    }

    #company .company-people .people-wrap .people .img {
        margin-bottom: 20px;
    }

    #company .company-people .people-wrap .people .img img {
        width: 120px;
    }

    #company .company-people .people-wrap .people .text-wrap {
        padding-bottom: 20px;
    }

    #company .company-people .people-wrap .people .text-wrap .role {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 5px;
    }

    #company .company-people .people-wrap .people .text-wrap .name {
        font-size: 14px;
        line-height: 20px;
    }

    #company .company-people .people-wrap .people .career {
        padding: 20px 0;
        font-size: 14px;
    }

    #company .company-people .people-wrap .people .bubble {
        font-size: 14px;
    }

    #company .company-people .people-wrap .people .bubble .quote.left {
        left: 0;
    }

    #company .company-people .people-wrap .people .bubble .quote.right {
        right: 0;
    }
}

#company .company-desc2 {
    padding: 120px 0;
    background-color: #f5f5f5;
    background-image: url(images/company/desc2-bg.png);
    background-repeat: no-repeat;
    background-position: right bottom;
}

#company .company-desc2 .title {
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    text-align: center;
    padding-bottom: 90px;
}

#company .company-desc2 .bar-wrap {
    max-width: 660px;
    margin: 0 auto;
}

#company .company-desc2 .bar-wrap .bar {
    width: 100%;
    height: 96px;
    box-shadow: 0 2px 4px #d8d8d8;
    border-radius: 48px;
    background-image: linear-gradient(to right, #ffee89 0%, #fdd23e 100%);
    margin-bottom: 30px;
}

#company .company-desc2 .bar-wrap .bar:last-child {
    margin-bottom: 0;
}

#company .company-desc2 .bar-wrap .bar .index {
    float: left;
    width: 96px;
    height: 96px;
    border-radius: 48px;
    background-image: linear-gradient(to right, #fdd23e 0%, #fdd23e 100%);
    color: #ffffff;
    font-size: 44px;
    font-weight: 700;
    text-align: center;
    line-height: 96px;
    margin-right: 40px;
}

#company .company-desc2 .bar-wrap .bar .en {
    float: left;
    opacity: 0.4;
    color: #a9860e;
    font-size: 26px;
    font-weight: 400;
    line-height: 96px;
}

#company .company-desc2 .bar-wrap .bar .ko {
    padding-right: 40px;
    float: right;
    color: #222222;
    font-size: 26px;
    font-weight: 400;
    line-height: 96px;
}

@media all and (max-width: 1023px) {
    #company .company-desc2 {
        padding: 90px 0;
        background-image: unset;
    }
}

@media all and (max-width: 767px) {
    #company .company-desc2 {
        padding: 50px 0;
    }

    #company .company-desc2 .title {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 50px;
    }

    #company .company-desc2 .bar-wrap .bar {
        height: 40px;
        margin-bottom: 15px;
    }

    #company .company-desc2 .bar-wrap .bar .index {
        width: 40px;
        height: 40px;
        font-size: 20px;
        line-height: 40px;
        margin-right: 0;
    }

    #company .company-desc2 .bar-wrap .bar .en {
        display: none;
    }

    #company .company-desc2 .bar-wrap .bar .ko {
        padding-right: 20px;
        font-size: 14px;
        line-height: 40px;
    }
}

#company .company-partner {
    position: relative;
    padding: 100px 0;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.6);
    background-color: #ffffff;
}

#company .company-partner .title-wrap {
    margin-bottom: 60px;
}

#company .company-partner .title-wrap .title {
    text-align: center;
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    line-height: 54px;
}

#company .company-partner .slider-row {
    max-width: 930px;
    margin: 0 auto;
    position: relative;
}

#company .company-partner .slide-wrap {
    margin: 0 -30px;
}

#company .company-partner .slide-wrap .slide {
    float: left;
    width: 33.33333%;
    padding: 0 30px;
}

#company .company-partner .slide-wrap .slide .inner-wrap {
    height: 83px;
    position: relative;
    border-radius: 0 0 0 30px;
    background-color: rgba(253, 210, 62, 0.15);
}

#company .company-partner .slide-wrap .slide img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: block;
    margin: 0 auto;
    max-height: 37px;
}

#company .company-partner .partner-util {}

#company .company-partner .partner-util .slider-nav .slick-arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#company .company-partner .partner-util .slider-nav .slick-arrow i {
    display: inline-block;
    font-size: 34px;
    width: 50px;
    height: 50px;
    color: #d8d8d8;
    border: 3px solid #d8d8d8;
    border-radius: 50%;
    line-height: 42px;
    text-align: center;
    transition: all 0.25s ease;
}

#company .company-partner .partner-util .slider-nav .slick-arrow i:hover {
    color: #fdd23e;
    border-color: #fdd23e;
}

#company .company-partner .partner-util .slider-nav .nav-prev {
    left: -120px;
}

#company .company-partner .partner-util .slider-nav .nav-next {
    right: -120px;
}

@media all and (max-width: 1023px) {
    #company .company-partner {
        padding: 60px 0;
    }

    #company .company-partner .title-wrap .title {
        font-size: 30px;
        line-height: 45px;
    }

    #company .company-partner .slider-row {
        max-width: 588px;
    }

    #company .company-partner .slide-wrap {
        margin: 0 -15px;
    }

    #company .company-partner .slide-wrap .slide {
        padding: 0 15px;
    }

    #company .company-partner .partner-util .slider-nav .nav-prev {
        left: -60px;
    }

    #company .company-partner .partner-util .slider-nav .nav-next {
        right: -60px;
    }

    #company .company-partner .partner-util .slider-nav .slick-arrow i {
        width: 30px;
        height: 30px;
        font-size: 20px;
        line-height: 26px;
        border-width: 2px;
    }
}

@media all and (max-width: 767px) {
    #company .company-partner {
        padding-top: 40px;
        padding-bottom: 30px;
    }

    #company .company-partner .title-wrap {
        margin-bottom: 30px;
    }

    #company .company-partner .title-wrap .title {
        font-size: 20px;
        line-height: 30px;
    }

    #company .company-partner .slider-row {
        max-width: 226px;
    }

    #company .company-partner .slide-wrap {
        margin: 0;
    }

    #company .company-partner .slide-wrap .slide {
        padding: 0;
    }

    #company .company-partner .slide-wrap .slide .inner-wrap {
        height: 67px;
    }

    #company .company-partner .slide-wrap .slide img {
        max-height: 28px;
    }

    #company .company-partner .partner-util {
        position: relative;
        height: 23px;
        max-width: 150px;
        margin: 0 auto;
        margin-top: 30px;
    }

    #company .company-partner .partner-util .slider-nav {}

    #company .company-partner .partner-util .slider-nav .slick-arrow i {
        width: 23px;
        height: 23px;
        border-width: 1px;
        line-height: 21px;
        font-size: 16px;
    }

    #company .company-partner .partner-util .slider-nav .nav-prev {
        left: 0;
    }

    #company .company-partner .partner-util .slider-nav .nav-next {
        right: 0;
    }

    #company .company-partner .partner-util .slider-dots ul {
        height: 23px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -ms-align-items: center;
        align-items: center;
        justify-content: center;
    }

    #company .company-partner .partner-util .slider-dots ul li {
        margin: 0 7.5px;
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
    }

    #company .company-partner .partner-util .slider-dots ul li button {
        cursor: pointer;
        width: 5px;
        height: 5px;
        border-radius: 50%;
        background-color: #d8d8d8;
        padding: 0;
        font-size: 0;
        border: 0;
        transition: all 0.25s ease;
    }

    #company .company-partner .partner-util .slider-dots ul li.slick-active button {
        background-color: #fdd23e;
    }

}

#company .company-ask {
    position: relative;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.6);
    padding: 120px 0;
}

#company .company-ask .title {
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    text-align: center;
    padding-bottom: 90px;
}

#company .company-ask .card-wrap {
    padding-bottom: 90px;
}

#company .company-ask .card-wrap .card {
    height: 205px;
    padding: 50px;
    border-radius: 0 0 0 60px;
    width: calc(50% - 5px);
}

#company .company-ask .card-wrap .card.left {
    background-color: #f5f5f5;
    float: left;
}

#company .company-ask .card-wrap .card.right {
    background-color: rgba(253, 210, 62, 0.15);
    float: right;
}

#company .company-ask .card-wrap .card .card-title {
    color: #222222;
    font-size: 26px;
    font-weight: 400;
    padding-bottom: 10px;
}

#company .company-ask .card-wrap .card .card-desc {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
}

#company .company-ask .card-wrap .card .card-desc p {
    padding-bottom: 10px;
}

#company .company-ask .card-wrap .card .card-desc p:last-child {
    padding-bottom: 0;
}

#company .company-ask .card-wrap .card .card-desc p i {
    padding-right: 5px;
}

#company .company-ask .card-wrap .card .card-desc p span {
    padding-right: 30px;
}

@media all and (max-width: 1023px) {
    #company .company-ask {
        padding: 90px 0;
    }

    #company .company-ask .card-wrap .card {
        height: 264px;
    }
}

@media all and (max-width: 767px) {
    #company .company-ask {
        padding: 50px 0;
    }

    #company .company-ask .title {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 50px;
    }

    #company .company-ask .card-wrap {
        padding-bottom: 50px;
    }

    #company .company-ask .card-wrap .card {
        float: none;
        width: 100%;
        height: unset;
        padding: 20px;
        border-radius: 0 0 0 30px;
    }

    #company .company-ask .card-wrap .card.left {
        margin-bottom: 15px;
    }

    #company .company-ask .card-wrap .card .card-title {
        font-size: 20px;
        line-height: 30px;
    }

    #company .company-ask .card-wrap .card .card-desc {
        font-size: 14px;
        line-height: 20px;
    }

    #company .company-ask .card-wrap .card .card-desc p span {
        display: block;
        padding: 0;
    }

    #company .company-ask .card-wrap .card .card-desc p span.phone {
        padding-bottom: 10px;
    }
}

#company .company-map {
    padding: 120px 0;
}

#company .company-map .title {
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    text-align: center;
    padding-bottom: 90px;
}

#company .company-map .map {
    height: 500px;
    background-color: #d7d7d7;
}

@media all and (max-width: 1023px) {
    #company .company-map {
        padding: 90px 0;
    }

    #company .company-map .map {
        height: 400px;
    }
}

@media all and (max-width: 767px) {
    #company .company-map {
        padding: 50px 0;
    }

    #company .company-map .title {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 50px;
    }

    #company .company-map .map {
        height: 300px;
    }
}

/**
 * recruit
 */
#recruit {}

#recruit .title {
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    text-align: center;
}

#recruit .desc {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

@media all and (max-width: 767px) {
    #recruit .title {
        font-size: 20px;
        line-height: 30px;
    }

    #recruit .desc {
        font-size: 14px;
    }
}

#recruit .recruit-top {
    background-color: rgba(253, 210, 62, 0.15);
    background-image: url(images/recruit/top-shape.png);
    background-position: right top;
    background-repeat: no-repeat;
}

#recruit .recruit-top .title {
    padding-bottom: 70px;
}

#recruit .recruit-top .inner-wrap {
    position: relative;
    padding: 120px 0;
}

#recruit .recruit-top .left {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 266px;
    height: 458px;
    background-image: url(images/recruit/top-left@2x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#recruit .recruit-top .right {
    position: absolute;
    bottom: 0;
    right: -30px;
    width: 203px;
    height: 543px;
    background-image: url(images/recruit/top-right@2x.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

@media all and (max-width: 1023px) {
    #recruit .recruit-top .left {
        display: none;
    }

    #recruit .recruit-top .right {
        display: none;
    }
}

@media all and (max-width: 767px) {
    #recruit .recruit-top {
        -webkit-background-size: contain;
        background-size: contain;
    }

    #recruit .recruit-top .inner-wrap {
        padding: 50px 0;
    }

    #recruit .recruit-top .title {
        padding-bottom: 30px;
    }
}

#recruit .recruit-step {
    padding: 120px 0;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.6);
    position: relative;
}

#recruit .recruit-step .title {
    padding-bottom: 90px;
}

#recruit .recruit-step .step-wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

#recruit .recruit-step .step-wrap .step {}

#recruit .recruit-step .step-wrap .step .icon {
    padding-bottom: 30px;
}

#recruit .recruit-step .step-wrap .step .icon img {
    display: block;
    width: 150px;
}

#recruit .recruit-step .step-wrap .step .text {
    text-align: center;
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
}

#recruit .recruit-step .step-wrap .arrow {
    margin: 0 5.5%;
    margin-top: 45px;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
}

#recruit .recruit-step .step-wrap .arrow img {
    vertical-align: middle;
}

@media all and (max-width: 1023px) {
    #recruit .recruit-step .step-wrap {
        display: block;
        max-width: 482px;
        margin: 0 auto;
    }

    #recruit .recruit-step .step-wrap .step {
        float: left;
    }

    #recruit .recruit-step .step-wrap .arrow {
        float: left;
        margin: 0 61px;
        margin-top: 45px;
    }

    #recruit .recruit-step .step-wrap .arrow.right {
        width: 100%;
        margin: 60px 0;
        padding-right: 45px;
        text-align: right;
    }

    #recruit .recruit-step .step-wrap .arrow.right img {
        display: inline-block;
        /*width: 60px;*/
        /*height: 100%;*/
        text-align: center;
        transform: rotate(90deg);
    }

    #recruit .recruit-step .step-wrap .arrow.last img {
        display: inline-block;
        transform: rotate(180deg);
    }
}

@media all and (max-width: 767px) {
    #recruit .recruit-step {
        padding: 50px 0;
    }

    #recruit .recruit-step .title {
        position: relative;
        padding-bottom: 50px;
    }

    #recruit .recruit-step .step-util {
        position: absolute;
        top: 0;
        width: 100%;
        height: 30px;
    }

    #recruit .recruit-step .step-util .slider-nav {}

    #recruit .recruit-step .step-util .slider-nav .slick-arrow {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    #recruit .recruit-step .step-util .slider-nav .slick-arrow i {
        display: inline-block;
        width: 23px;
        height: 23px;
        font-size: 16px;
        line-height: 21px;
        border: 1px solid #d8d8d8;
        border-radius: 50%;
        color: #d8d8d8;
        text-align: center;
        transition: all 0.25s ease;
    }

    #recruit .recruit-step .step-util .slider-nav .slick-arrow i:hover {
        color: #fdd23e;
        border-color: #fdd23e;
    }

    #recruit .recruit-step .step-util .slider-nav .nav-prev {
        left: 0;
    }

    #recruit .recruit-step .step-util .slider-nav .nav-next {
        right: 0;
    }

    #recruit .recruit-step .step-wrap {
        max-width: 100%;
    }

    #recruit .recruit-step .step-wrap .arrow {
        display: none;
    }

    #recruit .recruit-step .step-wrap .step .icon {
        padding-bottom: 20px;
    }

    #recruit .recruit-step .step-wrap .step .icon img {
        width: 90px;
        margin: 0 auto;
    }

    #recruit .recruit-step .step-wrap .step .text {
        font-size: 20px;
        line-height: 30px;
    }

}

#recruit .recruit-benefit {
    padding: 120px 0;
    background-image: url(images/recruit/benefit-bg.png);
    background-position: right top;
    background-repeat: no-repeat;
}

#recruit .recruit-benefit .title {
    padding-bottom: 90px;
}

#recruit .recruit-benefit .box-wrap {
    max-width: 1020px;
    margin: 0 auto;
    margin-bottom: -90px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

#recruit .recruit-benefit .box-wrap .box {
    min-height: 152px;
    width: 280px;
    padding-bottom: 90px;
}

#recruit .recruit-benefit .box-wrap .box .sub {
    color: #c0c0c0;
    font-size: 22px;
    font-weight: 400;
    padding-bottom: 10px;
}

#recruit .recruit-benefit .box-wrap .box .main {
    color: #222222;
    font-size: 26px;
    font-weight: 400;
}

@media all and (max-width: 1023px) {
    #recruit .recruit-benefit {
        background-size: 442px 180px;
    }

    #recruit .recruit-benefit .box-wrap {
        max-width: 610px;
    }
}

@media all and (max-width: 767px) {
    #recruit .recruit-benefit {
        padding: 50px 0;
        -webkit-background-size: 201px auto;
        background-size: 201px auto;
    }

    #recruit .recruit-benefit .title {
        padding-bottom: 50px;
    }

    #recruit .recruit-benefit .box-wrap {
        max-width: 100%;
        text-align: center;
        margin-bottom: -50px;
    }

    #recruit .recruit-benefit .box-wrap .box {
        width: 100%;
        min-height: unset;
        padding-bottom: 50px;
    }

    #recruit .recruit-benefit .box-wrap .box .sub {
        font-size: 14px;
        padding-bottom: 3px;
    }

    #recruit .recruit-benefit .box-wrap .box .main {
        font-size: 18px;
        line-height: 27px;
        word-break: keep-all;
    }

    #recruit .recruit-benefit .box-wrap .box .main br {
        display: none;
    }
}

#recruit .recruit-way {
    padding: 120px 0;
    background-color: #f5f5f5;
}

#recruit .recruit-way .title {
    padding-bottom: 60px;
}

#recruit .recruit-way .desc {
    padding-bottom: 90px;
}

#recruit .recruit-way .card-wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: space-between;
}

#recruit .recruit-way .card-wrap .card {
    position: relative;
    width: calc(50% - 15px);
    padding: 50px;
}

#recruit .recruit-way .card-wrap .card.left {
    background-color: #ffffff;
    border-radius: 0 0 0 60px;
}

#recruit .recruit-way .card-wrap .card.right {
    background-color: rgba(253, 210, 62, 0.3);
    border-radius: 0 0 0 60px;
}

#recruit .recruit-way .card-wrap .card .btn {
    position: absolute;
    top: 50px;
    right: 50px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    line-height: 38px;
    width: 140px;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    padding: 0 12px;
    transition: all 0.25s ease;
}

#recruit .recruit-way .card-wrap .card .btn i {
    font-size: 22px;
    float: right;
    color: #fdd23e;
    transition: all 0.25s ease;
}

#recruit .recruit-way .card-wrap .card .btn:hover {
    color: #ffffff;
    background-color: #fdd23e;
}

#recruit .recruit-way .card-wrap .card .btn:hover i {
    color: #ffffff;
}

#recruit .recruit-way .card-wrap .card .main {
    color: #222222;
    font-size: 26px;
    font-weight: 700;
    padding-bottom: 10px;
}

#recruit .recruit-way .card-wrap .card .sub {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
}

@media all and (max-width: 1023px) {
    #recruit .recruit-way .desc {
        max-width: 560px;
        margin: 0 auto;
        word-break: keep-all;
    }

    #recruit .recruit-way .card-wrap .card {
        height: 242px;
        padding: 30px;
        width: calc(50% - 8px);
    }

    #recruit .recruit-way .card-wrap .card.left {
        border-radius: 0 0 0 30px;
    }

    #recruit .recruit-way .card-wrap .card.right {
        border-radius: 0 0 30px 0;
    }

    #recruit .recruit-way .card-wrap .card .btn {
        position: absolute;
        top: unset;
        right: unset;
        left: 30px;
        bottom: 30px;
    }
}

@media all and (max-width: 767px) {
    #recruit .recruit-way {
        padding: 50px 0;
    }

    #recruit .recruit-way .title {
        padding-bottom: 25px;
    }

    #recruit .recruit-way .desc {
        padding-bottom: 50px;
        word-break: keep-all;
    }

    #recruit .recruit-way .desc br {
        display: none;
    }

    #recruit .recruit-way .card-wrap {
        flex-wrap: wrap;
    }

    #recruit .recruit-way .card-wrap .card {
        width: 100%;
        padding: 20px;
        height: 152px;
    }

    #recruit .recruit-way .card-wrap .card.left {
        margin-bottom: 25px;
    }

    #recruit .recruit-way .card-wrap .card.right {
        border-radius: 0 0 0 30px;
    }

    #recruit .recruit-way .card-wrap .card .btn {
        width: auto;
        padding: 0;
        font-size: 0;
        line-height: normal;
        border: 0;
        left: unset;
        right: 15px;
        bottom: 20px;
    }

    #recruit .recruit-way .card-wrap .card .btn i {
        display: inline-block;
        font-size: 27px;
        width: 30px;
        height: 30px;
        text-align: center;
        line-height: 30px;
    }

    #recruit .recruit-way .card-wrap .card .main {
        font-size: 20px;
        line-height: 30px;
    }

    #recruit .recruit-way .card-wrap .card .sub {
        font-size: 14px;
        line-height: 21px;
    }
}


/*투자후기 시작*/
#review {}
#review .list-body {}
#review .list {}
#review .list:hover .list-wrap .text-wrap .badge {
    border-bottom: 2px solid #3e92fd;
    transition: all 0.25s ease;
}
#review .list:hover .list-wrap .text-wrap .content {
    color: #222;
    transition: all 0.25s ease;
}
#review .list:hover .list-wrap .img {
    opacity: 1;
    transition: all 0.25s ease;
}
#review .list:hover .list-wrap .img-none::before {
    opacity: 1;
    transition: all 0.25s ease;
}
#review .list .list-wrap {
    position: relative;
}
#review .list .list-wrap .img-none {}
#review .list .list-wrap .img-none::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    display: block;
    content: "";
    background: url('images/review/person-bg@2x.png')no-repeat;
    width: 75px;
    height: 75px;
    opacity: 0.7;
    transition: all 0.25s ease;
}

#review .list .list-wrap .img {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 75px;
    height: 75px;
    border-radius: 50%;
    background-position: center center;
    background-size: cover;
    opacity: 0.7;

    transition: all 0.25s ease;
}
#review .list .list-wrap .text-wrap {
    margin-left: 105px;
    width: calc(100% - 105px);
}
#review .list .list-wrap .text-wrap .badge {
    display: inline-block;
    margin-right: 30px;
    margin-bottom: 10px;
    padding: 0 7px 2px;
    border-bottom: 2px solid #99c3f8;
    color: #222222;
    font-size: 14px;
    font-weight: 400;

    transition: all 0.25s ease;
}
#review .list .list-wrap .text-wrap .rate-wrap {
    color: #777777;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.5px;
}
#review .list .list-wrap .text-wrap .rate-wrap strong {
    font-weight: 700;
}
#review .list .list-wrap .text-wrap .content {
    color: #777777;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.5px;
    white-space: normal;

    transition: all 0.25s ease;
}
/* // 투자후기 끝*/

/**
 * loan
 */
#loan {}

#loan .title-wrap {
    text-align: center;
    padding-bottom: 90px;
}

#loan .title-wrap .title {
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    line-height: 54px;
}

#loan .title-wrap .desc {
    padding-top: 10px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

@media all and (max-width: 767px) {
    #loan .title-wrap {
        padding-bottom: 50px;
        position: relative;
    }

    #loan .title-wrap .title {
        font-size: 20px;
        line-height: 30px;
    }

    #loan .title-wrap .desc {
        padding-top: 15px;
        font-size: 14px;
    }
}

#loan .loan-info {
    position: relative;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.7);
    padding: 120px 0;
}

#loan .loan-info .box-wrap {
    max-width: 780px;
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
}

#loan .loan-info .box-wrap .box {
    text-align: center;
}

#loan .loan-info .box-wrap .box .icon {
    padding-bottom: 30px;
}

#loan .loan-info .box-wrap .box .icon img {
    display: block;
    width: 150px;
    margin: 0 auto;
}

#loan .loan-info .box-wrap .box .text {
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
}

@media all and (max-width: 1023px) {
    #loan .loan-info .box-wrap {
        max-width: 670px;
    }
}

@media all and (max-width: 767px) {
    #loan .loan-info {
        padding: 50px 0;
    }

    #loan .loan-info .box-wrap {
        max-width: 240px;
        flex-wrap: wrap;
    }

    #loan .loan-info .box-wrap .box {}

    #loan .loan-info .box-wrap .box.box01 {
        width: 100%;
        margin-bottom: 30px;
    }

    #loan .loan-info .box-wrap .box.box02 {}

    #loan .loan-info .box-wrap .box.box03 {}

    #loan .loan-info .box-wrap .box .icon {
        padding-bottom: 15px;
    }

    #loan .loan-info .box-wrap .box .icon img {
        width: 70px;
    }

    #loan .loan-info .box-wrap .box .text {
        font-size: 20px;
        line-height: 30px;
    }
}

#loan .loan-process {
    padding: 120px 0;
}

#loan .loan-process .step-wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

#loan .loan-process .step-wrap .step {}

#loan .loan-process .step-wrap .step .icon {
    padding-bottom: 30px;
}

#loan .loan-process .step-wrap .step .icon img {
    display: block;
    width: 150px;
}

#loan .loan-process .step-wrap .step .text {
    text-align: center;
    color: #222222;
    font-size: 30px;
    font-weight: 400;
    line-height: 40px;
}

#loan .loan-process .step-wrap .arrow {
    margin: 0 5.5%;
    margin-top: 45px;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    font-size: 46px;
    color: #fdd23e;
}

@media all and (max-width: 1023px) {
    #loan .loan-process .step-wrap {
        display: block;
        max-width: 482px;
        margin: 0 auto;
    }

    #loan .loan-process .step-wrap .step {
        float: left;
    }

    #loan .loan-process .step-wrap .arrow {
        float: left;
        margin: 0 61px;
        margin-top: 45px;
    }

    #loan .loan-process .step-wrap .arrow.right {
        width: 100%;
        margin: 60px 0;
        padding-right: 45px;
        text-align: right;
    }

    #loan .loan-process .step-wrap .arrow.right i {
        display: inline-block;
        width: 60px;
        height: 100%;
        text-align: center;
        transform: rotate(90deg);
    }

    #loan .loan-process .step-wrap .arrow.last i {
        display: inline-block;
        transform: rotate(180deg);
    }
}

@media all and (max-width: 767px) {
    #loan .loan-process {
        padding: 50px 0;
    }

    #loan .loan-process .step-util {
        position: absolute;
        top: 19px;
        width: 100%;
        height: 23px;
    }

    #loan .loan-process .step-util .slider-nav {}

    #loan .loan-process .step-util .slider-nav .slick-arrow {
        cursor: pointer;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }

    #loan .loan-process .step-util .slider-nav .slick-arrow i {
        display: inline-block;
        width: 23px;
        height: 23px;
        font-size: 16px;
        line-height: 21px;
        border: 1px solid #d8d8d8;
        border-radius: 50%;
        color: #d8d8d8;
        text-align: center;
        transition: all 0.25s ease;
    }

    #loan .loan-process .step-util .slider-nav .slick-arrow i:hover {
        color: #fdd23e;
        border-color: #fdd23e;
    }

    #loan .loan-process .step-util .slider-nav .nav-prev {
        left: 0;
    }

    #loan .loan-process .step-util .slider-nav .nav-next {
        right: 0;
    }

    #loan .loan-process .step-wrap {
        max-width: 100%;
    }

    #loan .loan-process .step-wrap .arrow {
        display: none;
    }

    #loan .loan-process .step-wrap .step .icon {
        padding-bottom: 15px;
    }

    #loan .loan-process .step-wrap .step .icon img {
        width: 90px;
        margin: 0 auto;
    }

    #loan .loan-process .step-wrap .step .text {
        font-size: 20px;
        line-height: 30px;
    }

}

#loan .loan-form {
    background-color: #f5f5f5;
    padding: 120px 0;
}

@media all and (max-width: 767px) {
    #loan .loan-form {
        padding: 50px 0;
    }
}

/**
 * guide
 */
#guide {}
#guide .board-header {
    margin-bottom: 90px;
}
#guide .guide-header {
    /*padding: 90px 0;*/
    /*position: relative;*/
    top: 0;
    z-index: 9;
}
#guide .guide-header.fixed {
    padding: 30px 0;
    position: fixed;
    left: 0;
    top: 80px;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px #d8d8d8;
    z-index: 100;
}
#guide .guide-header .title {
    color: #333333;
    font-size: 28px;
    font-weight: 400;
    line-height: 40px;
    padding-bottom: 50px;
    text-align: center;
}

#guide .guide-header .tab-wrap {}

#guide .guide-header .tab-wrap .inner-wrap {
    max-width: 428px;
    margin: 0 auto;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;

    box-shadow: 0 1px 4px #d8d8d8;
    border-radius: 5px;
    background-color: #ffffff;
}

#guide .guide-header .tab-wrap .tab {
    position: relative;
    z-index: 99;
    cursor: pointer;
    float: left;
    width: 50%;
    text-align: center;
    line-height: 58px;
    color: #c0c0c0;
    font-size: 26px;
    font-weight: 400;
    border-radius: 5px;
    transition: all 0.25s ease;
}

#guide .guide-header .tab-wrap .tab:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 5px;
    transition: all 0.25s ease;
}

#guide .guide-header .tab-wrap .tab:hover {
    color: #222222;
    opacity: 1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

#guide .guide-header .tab-wrap .tab.active {
    color: #222222;
}

#guide .guide-header .tab-wrap .tab.active:before {
    color: #222222;
    opacity: 1;
    z-index: -1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

#guide .guide-content {
    margin-top: 90px;
}

#guide .guide-content.ready {}

#guide .guide-content.invest {
    display: none;
}

#guide .guide-content.withdraw {
    display: none;
}

#guide .guide-content .step01 {}

#guide .guide-content .step01 .content {
    margin-top: -120px;
}

#guide .guide-content .step02 {
    background-color: #f5f5f5;
}

#guide .guide-content .step03 {}

#guide .guide-content .step04 {
    background-color: #f5f5f5;
}

#guide .guide-content .step04 .content {
    border-bottom: 0;
}

#guide .guide-content .content {
    padding: 120px 0;
    position: relative;
}

#guide .guide-content .content .arrow {
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 31px;
    height: 60px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    transition: all 0.25s ease;
}

#guide .guide-content .content .arrow.next {
    right: 0;
    background-image: url(images/guide/next@2x.png);
}

#guide .guide-content .img-wrap {
    position: relative;
    height: 535px;
}

#guide .guide-content .img-wrap .img {
    width: 928px;
    height: 535px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
}

#guide .guide-content .text-wrap {
    position: relative;
    height: 535px;
}

#guide .guide-content .text-wrap .text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

#guide .guide-content .text-wrap .step {
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 20px;
}

#guide .guide-content .text-wrap .step span {
    display: inline-block;
    padding-bottom: 3px;
    border-bottom: 3px solid #fdd23e;
}

#guide .guide-content .text-wrap .title {
    color: #222222;
    font-size: 36px;
    font-weight: 400;
    padding-bottom: 15px;
}

#guide .guide-content .text-wrap .desc {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#guide .guide-content .text-wrap .desc .notice {
    color: #c0c0c0;
}

#guide .guide-content .text-wrap .desc .descs {
    display: none;
}

#guide .guide-content .text-wrap .desc .descs.active {
    display: block;
}

#guide .guide-content .text-wrap .btn {
    margin-top: 25px;
    display: inline-block;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    line-height: 24px;
    padding: 7px 15px;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    transition: all 0.25s ease;
}

#guide .guide-content .text-wrap .btn i {
    margin-left: 10px;
    color: #fdd23e;
    transition: all 0.25s ease;
}

#guide .guide-content .text-wrap .btn:hover {
    color: #ffffff;
    background-color: #fdd23e;
}

#guide .guide-content .text-wrap .btn:hover i {
    color: #ffffff;
}

/* 투자준비 */
#guide .guide-content.ready .step02 .text-wrap {
    height: auto;
    padding: 0;
    padding-bottom: 60px;
    max-width: 752px;
    position: relative;
}

#guide .guide-content.ready .step02 .text-wrap .text {
    position: static;
    top: 0;
    transform: translateY(0);
}

#guide .guide-content.ready .step02 .tab-wrap {
    position: absolute;
    right: 0;
    top: 0;
    box-shadow: 0 1px 4px #d8d8d8;
    border-radius: 5px;
    background-color: #ffffff;
    width: 216px;
}

#guide .guide-content.ready .step02 .tab-wrap .tab {
    position: relative;
    z-index: 99;
    cursor: pointer;
    float: left;
    width: 50%;
    text-align: center;
    line-height: 40px;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    border-radius: 5px;
    transition: all 0.25s ease;
}

#guide .guide-content.ready .step02 .tab-wrap .tab:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 5px;
    transition: all 0.25s ease;
}

#guide .guide-content.ready .step02 .tab-wrap .tab:hover {
    color: #222222;
    opacity: 1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

#guide .guide-content.ready .step02 .tab-wrap .tab.active {
    color: #222222;
}

#guide .guide-content.ready .step02 .tab-wrap .tab.active:before {
    color: #222222;
    opacity: 1;
    z-index: -1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

#guide .guide-content.ready .step02 .corporation {
    display: none;
}

/* 투자준비 이미지설정 */
#guide .guide-content.ready .step01 .img-wrap .img {
    right: 0;
    background-image: url(images/guide/prepare01.png);
}

#guide .guide-content.ready .step01 .img-wrap .img.active {
    background-image: url(images/guide/prepare01-2.png);
}

#guide .guide-content.ready .step02 .img-wrap .img {
    position: static;
}

#guide .guide-content.ready .step02 .personal .img-wrap .img {
    background-image: url(images/guide/prepare02-p.png);
}

#guide .guide-content.ready .step02 .corporation .img-wrap .img {
    background-image: url(images/guide/prepare02-c.png);
}

#guide .guide-content.ready .step02 .corporation .img-wrap .img.active {
    background-image: url(images/guide/prepare02-c2.png);
}

#guide .guide-content.ready .step03 .img-wrap .img {
    left: 0;
    background-image: url(images/guide/prepare03.png);
}

#guide .guide-content.ready .step04 .img-wrap .img {
    right: 0;
    background-image: url(images/guide/prepare04.png);
}

/* 투자하기 */
/* 투자하기 이미지설정 */
#guide .guide-content.invest .step01 .img-wrap .img {
    left: 0;
    background-image: url(images/guide/invest01.png);
}

#guide .guide-content.invest .step02 .img-wrap .img {
    right: 0;
    background-image: url(images/guide/invest02.png);
}

#guide .guide-content.invest .step02 .img-wrap .img.active {
    background-image: url(images/guide/invest02-2.png);
}

#guide .guide-content.invest .step03 .content {
    padding-bottom: 0;
}

#guide .guide-content.invest .step03 .img-wrap {
    height: 615px;
}

#guide .guide-content.invest .step03 .img-wrap .img {
    height: 615px;
    left: 50%;
    background-image: url(images/guide/invest03.png);
    transform: translateX(-50%);
}

#guide .guide-content.invest .step03 .img-wrap .img.active {
    background-image: url(images/guide/invest03-2.png);
}

#guide .guide-content.invest .step04 .img-wrap .img {
    left: 0;
    background-image: url(images/guide/invest04.png);
}

/* 출금하기 */
/* 출금하기 이미지설정 */
#guide .guide-content.withdraw .step01 .img-wrap .img {
    left: 0;
    background-image: url(images/guide/withdraw01.png);
}

#guide .guide-content.withdraw .step02 .content {
    padding-bottom: 0;
}

#guide .guide-content.withdraw .step02 .img-wrap {
    height: 615px;
}

#guide .guide-content.withdraw .step02 .img-wrap .img {
    height: 615px;
    right: 0;
    background-image: url(images/guide/withdraw02.png);
}

#guide .guide-content.withdraw .step02 .img-wrap .img.active {
    background-image: url(images/guide/withdraw02-2.png);
}

#guide .guide-content.withdraw .step03 .content {
    padding-bottom: 0;
}

#guide .guide-content.withdraw .step03 .img-wrap {
    height: 575px;
}

#guide .guide-content.withdraw .step03 .img-wrap .img {
    height: 575px;
    left: 50%;
    background-image: url(images/guide/withdraw03.png);
    transform: translateX(-50%);
}

#guide .guide-content.withdraw .step03 .img-wrap .img.active {
    background-image: url(images/guide/withdraw03-2.png);
}

#guide .guide-content.withdraw .step04 .img-wrap .img {
    right: 0;
    background-image: url(images/guide/withdraw04.png);
}

@media all and (min-width: 1024px) {
    #guide .guide-content .content .arrow.next:hover {
        right: -10px;
    }
}

@media all and (max-width: 1023px) {
    #guide .guide-content .content {
        padding: 90px 0;
    }

    #guide .guide-content .content .arrow {
        width: 24px;
        height: 45px;
        transform: unset;
        top: 243px;
    }

    #guide .guide-content .content .arrow.next {
        right: 50px;
    }


    #guide .guide-content .step01 .content {
        margin-top: -90px;
    }

    #guide .guide-content .img-wrap {
        height: 352px;
        overflow: hidden;
    }

    #guide .guide-content .img-wrap .img {
        height: 352px;
        width: 610px;
        margin: 0 auto;
        position: static;
    }

    #guide .guide-content .text-wrap {
        height: unset;
        padding-top: 60px;
    }

    #guide .guide-content .text-wrap .title {
        padding-bottom: 0;
    }

    #guide .guide-content .text-wrap .text {
        position: static;
        top: unset;
        transform: unset;
        max-width: 610px;
        margin: 0 auto;
    }

    #guide .guide-content .text-wrap .text .left {
        float: left;
    }

    #guide .guide-content .text-wrap .text .right {
        float: right;
        padding-top: 53px;
        max-width: 308px;
        word-break: break-all;
    }

    #guide .guide-content .text-wrap .desc .notice {
        display: block;
        word-break: break-all;
    }

    #guide .guide-content .text-wrap .desc .notice br {
        display: none;
    }

    #guide .guide-content .text-wrap .text .right br {
        display: none;
    }

    #guide .guide-content.ready .step02 .tab-wrap {
        position: static;
        max-width: 216px;
        margin: 0 auto;
        margin-bottom: 60px;
    }

    #guide .guide-content.ready .step02 .text-wrap {
        padding-bottom: 0;
        padding-top: 60px;
    }

    #guide .guide-content.ready .step02 .content .arrow.next {
        top: 343px;
    }

    #guide .guide-content.invest .step03 .content {
        padding-bottom: 90px;
    }

    #guide .guide-content.invest .step03 .img-wrap {
        height: 447px;
    }

    #guide .guide-content.invest .step03 .img-wrap .img {
        transform: unset;
        height: 447px;
    }

    #guide .guide-content.invest .step03 .img-wrap .img:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 83px;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    }

    #guide .guide-content.withdraw .step02 .content {
        padding-bottom: 90px;
    }

    #guide .guide-content.withdraw .step02 .img-wrap {
        height: 447px;
    }

    #guide .guide-content.withdraw .step02 .img-wrap .img {
        transform: unset;
        height: 447px;
    }

    #guide .guide-content.withdraw .step02 .img-wrap .img:before {
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 374px;
        height: 83px;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f5f5f5 100%);
        transform: translateX(-50%);
    }

    #guide .guide-content.withdraw .step03 .content {
        padding-bottom: 90px;
    }

    #guide .guide-content.withdraw .step03 .img-wrap {
        height: 447px;
    }

    #guide .guide-content.withdraw .step03 .img-wrap .img {
        transform: unset;
        height: 447px;
    }

    #guide .guide-content.withdraw .step03 .img-wrap .img:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 83px;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
        transform: translateX(-50%);
    }

}

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

    #guide .guide-content.invest .step03 .img-wrap .img,
    #guide .guide-content.withdraw .step03 .img-wrap .img {
        transform: translateX(-50%);
    }

    #guide .guide-content.ready .step02 .content .arrow.next {
        top: unset;
    }

    #guide .guide-content .text-wrap .text .left {
        float: none;
    }

    #guide .guide-content .text-wrap .text .right {
        float: none;
        max-width: unset;
        padding-top: 0;
        word-break: normal;
    }

    #guide .guide-content .content .arrow.next {
        margin-top: 10px;
    }
    #guide .board-header {
        margin-bottom: 50px;
    }
    #guide .guide-header {
        /*padding-top: 50px;*/
        padding-bottom: 0px;
    }

    #guide .guide-header .title {
        font-size: 20px;
        letter-spacing: -0.31px;
        padding-bottom: 30px;
        line-height: 30px;
    }

    #guide .guide-header .tab-wrap {}

    #guide .guide-header .tab-wrap .inner-wrap {
        max-width: 246px;
    }

    #guide .guide-header .tab-wrap .tab {
        font-size: 14px;
        line-height: 40px;
    }
    
    #guide .guide-content {
        margin-top: 0;
    }

    #guide .guide-content .step01 .content {
        margin-top: 0;
    }

    #guide .guide-content .content {
        padding: 50px 0;
        border: 0;
    }

    #guide .guide-content .content:before {
        content: '';
        position: absolute;
        width: calc(100% - 30px);
        height: 1px;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        background-color: #eff1f5;
    }

    #guide .guide-content .img-wrap {
        height: 215px;
        overflow: hidden;
        padding: 0 15px;
    }

    #guide .guide-content .img-wrap .img {
        position: absolute;
        height: 215px;
        width: 373px;
        margin: 0 auto;
    }

    #guide .guide-content .text-wrap {
        height: unset;
        padding-top: 30px;
    }

    #guide .guide-content .text-wrap .text {
        position: static;
        top: unset;
        transform: unset;
        max-width: unset;
        margin: unset;
    }

    #guide .guide-content .text-wrap .step {
        font-size: 14px;
        padding-bottom: 10px;
    }

    #guide .guide-content .text-wrap .step span {
        padding-bottom: 2px;
        border-width: 2px;
    }

    #guide .guide-content .text-wrap .title {
        font-size: 20px;
        line-height: 30px;
        padding-bottom: 20px;
    }

    #guide .guide-content .text-wrap .title br {
        display: none;
    }

    #guide .guide-content .text-wrap .desc {
        font-size: 14px;
        line-height: 20px;
        word-break: break-all;
    }

    #guide .guide-content .text-wrap .desc br {
        display: none;
    }

    #guide .guide-content .text-wrap .desc .notice {
        display: block;
    }

    #guide .guide-content .text-wrap .btn {
        margin-top: 20px;
        font-size: 12px;
        line-height: 14px;
    }

    #guide .guide-content .text-wrap .btn i {
        margin-left: 15px;
    }

    #guide .guide-content .img-box {}

    #guide .guide-content .img-box:after {
        content: "";
        display: block;
        clear: both;
    }

    #guide .guide-content .img-box .col-11 {
        padding: 0;
    }

    #guide .guide-content .step02 .text-wrap {
        padding-bottom: 0;
    }

    #guide .guide-content .content .arrow {
        transform: unset;
        position: static;
        float: right;
        margin-right: 15px;
        width: 15px;
        height: 30px;
    }

    #guide .guide-content.ready .step01 .img-wrap .img {
        right: unset;
        left: 50%;
        transform: translateX(-50%);
    }

    #guide .guide-content.ready .step02 .text-wrap {
        padding-bottom: 30px;
        padding-top: 30px;
        padding-left: 15px;
        padding-right: 15px;
    }

    #guide .guide-content.ready .step02 .tab-wrap {
        margin-bottom: 50px;
    }

    #guide .guide-content.ready .step02 .content {
        position: relative;
    }

    #guide .guide-content.ready .step02 .arrow {
        position: absolute;
        right: 15px;
        top: unset;
        bottom: 30px;
        z-index: 99;
        margin-right: 0;
    }

    #guide .guide-content.ready .step03 .img-wrap .img {
        right: unset;
        left: 50%;
        transform: translateX(-50%);
    }

    #guide .guide-content.ready .step04 .img-wrap .img {
        right: unset;
        left: 50%;
        transform: translateX(-50%);
    }

    #guide .guide-content.invest .step01 .img-wrap .img {
        right: unset;
        left: 50%;
        transform: translateX(-50%);
    }

    #guide .guide-content.invest .step02 .img-wrap .img {
        right: unset;
        left: 50%;
        transform: translateX(-50%);
    }

    #guide .guide-content.invest .step03 .img-wrap {
        height: 273px;
    }

    #guide .guide-content.invest .step03 .img-wrap .img {
        height: 100%;
    }

    #guide .guide-content.invest .step03 .img-wrap .img:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 56px;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    }

    #guide .guide-content.invest .step03 .content {
        padding-bottom: 30px;
    }

    #guide .guide-content.invest .step04 .img-wrap .img {
        right: unset;
        left: 50%;
        transform: translateX(-50%);
    }

    #guide .guide-content.withdraw .step01 .img-wrap .img {
        right: unset;
        left: 50%;
        transform: translateX(-50%);
    }

    #guide .guide-content.withdraw .step02 .content {
        padding-bottom: 30px;
    }

    #guide .guide-content.withdraw .step02 .img-wrap {
        height: 273px;
    }

    #guide .guide-content.withdraw .step02 .img-wrap .img {
        width: 100%;
        height: 100%;
    }

    #guide .guide-content.withdraw .step02 .img-wrap .img:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        transform: unset;
        width: 100%;
        height: 56px;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #f5f5f5 100%);
    }

    #guide .guide-content.withdraw .step03 .content {
        padding-bottom: 30px;
    }

    #guide .guide-content.withdraw .step03 .img-wrap {
        height: 273px;
    }

    #guide .guide-content.withdraw .step03 .img-wrap .img {
        width: 100%;
        height: 100%;
    }

    #guide .guide-content.withdraw .step03 .img-wrap .img:before {
        content: '';
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 56px;
        background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffffff 100%);
    }

    #guide .guide-content.withdraw .step04 .img-wrap .img {
        right: unset;
        left: 50%;
        transform: translateX(-50%);
    }

}

@media all and (max-width: 375px) {
    #guide .guide-content.ready .step01 .img-wrap .img {
        right: unset;
        left: unset;
        transform: unset;
    }

    #guide .guide-content.ready .step03 .img-wrap .img {
        left: 15px;
        transform: unset;
    }

    #guide .guide-content.ready .step04 .img-wrap .img {
        right: unset;
        left: unset;
        transform: unset;
    }

    #guide .guide-content.invest .step01 .img-wrap .img {
        right: unset;
        left: unset;
        transform: unset;
    }

    #guide .guide-content.invest .step02 .img-wrap .img {
        right: unset;
        left: unset;
        transform: unset;
    }

    #guide .guide-content.invest .step04 .img-wrap .img {
        right: unset;
        left: unset;
        transform: unset;
    }

    #guide .guide-content.withdraw .step01 .img-wrap .img {
        right: unset;
        left: unset;
        transform: unset;
    }

    #guide .guide-content.withdraw .step04 .img-wrap .img {
        right: unset;
        left: unset;
        transform: unset;
    }
}

/**
 * terms
 */
#terms {}

#terms .board-header {
    margin-bottom: 90px;
}

#terms .terms-header {
    /*padding: 90px 0;*/
}

#terms .terms-header.fixed {
    position: fixed;
    padding: 30px 0;
    left: 0;
    top: 80px;
    width: 100%;
    box-shadow: 0 2px 5px #d8d8d8;
    background-color: #fff;
}

#terms .terms-header .select-inner {
    margin: 0 auto;
    width: 100%;
    max-width: 1170px;
}
#terms .terms-header .select-wrap {
    float: right;
    position: relative;
    width: 200px;
}

#terms .terms-header select {
    z-index: 9;
    border: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: transparent;

    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
}

#terms .terms-header .select-wrap .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 15px;
    color: #c0c0c0;
}

#terms .terms-body {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 120px;

    padding-top: 90px;
}

#terms .terms-body b,
#terms .terms-body strong {
    color: #222222;
}

@media all and (max-width: 1023px) {
    #terms .board-header {
        margin-bottom: 60px;
    }
    #terms .terms-header {
        /*padding: 60px 0;*/
    }
    #terms .terms-body {
        padding-top: 60px;
    }

    #terms .terms-header .select-wrap {
        float: none;
        margin: 0 auto;
        width: 170px;
    }

    #terms .terms-header select {
        height: 40px;
        line-height: 40px;
        font-size: 14px;
    }
}

@media all and (max-width: 767px) {
    #terms .board-header {
        margin-bottom: 50px;
    }
    #terms .terms-header {
        /*padding: 50px 0;*/
    }
    #terms .terms-body {
        padding-top: 50px;
    }

    #terms .terms-body {
        font-size: 14px;
        padding-bottom: 60px;
    }
}

/**
 * mypage
 */

.error-msg {
    margin-top: 7px;
    color: #d0021b;
    font-size: 12px;
    font-weight: 400;
}
.mypage-wrap {
    background-color: #f5f5f5;
}

.mypage-nav {
    padding-top: 90px;
    padding-bottom: 60px;
}

.mypage-nav .nav-wrap {}

.mypage-nav .nav-wrap ul {
    box-shadow: 0 1px 4px #d8d8d8;
    border-radius: 5px;
    background-color: #ffffff;
}

.mypage-nav.is-loan .nav-wrap ul li {
    width: 33.3333%;
}

.mypage-nav .nav-wrap ul li {
    float: left;
    width: 25%;
}

.mypage-nav .nav-wrap ul li.active {}

.mypage-nav .nav-wrap ul li a {
    position: relative;
    z-index: 9;
    display: block;
    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
    line-height: 50px;
    text-align: center;
    transition: all 0.25s ease;
}

.mypage-nav .nav-wrap ul li a:before {
    z-index: -1;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 5px;
    transition: all 0.25s ease;
}

.mypage-nav .nav-wrap ul li.active a {
    color: #222222;
}

.mypage-nav .nav-wrap ul li.active a:before {
    opacity: 1;
    z-index: -1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

.mypage-box {
    padding: 30px;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.6);
    background-color: #ffffff;
}

.mypage-box .title {
    color: #222222;
    font-weight: 400;
    line-height: 27px;
    padding-bottom: 15px;
    font-size: 18px;
}

@media all and (max-width: 767px) {
    .mb-title {
        position: relative;
        padding-left: 22px;
        color: #a9860e;
        font-size: 14px;
        font-weight: 700;
        padding-bottom: 15px;
    }

    .mb-title:before {
        content: '';
        position: absolute;
        left: 0;
        top: 2px;
        width: 15px;
        height: 15px;
        background-color: #a9860e;
        border: 2px solid #dddddd;
        border-radius: 50%;
    }

    .mypage-wrap {
        padding: 50px 0 30px;
    }

    .mypage-nav {
        padding-top: 0;
        margin: 0 -15px;
        padding-bottom: 30px;
    }

    .mypage-nav .nav-wrap {
        overflow-x: scroll;
    }

    .mypage-nav .nav-wrap ul {
        border-radius: 0;
        min-width: 420px;
    }

    .mypage-nav .nav-wrap ul li a {
        font-size: 14px;
    }

    .mypage-nav .nav-wrap ul li a:before {
        border-radius: 0;
    }

    .mypage-box {
        padding: 20px;
    }
}

#mypage-dashboard {
    padding-bottom: 60px;
}

#mypage-dashboard .user-info {
    min-height: 228px;
}

#mypage-dashboard .user-info .title {
    font-size: 22px;
}

#mypage-dashboard .user-info .title span {
    padding-left: 5px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-dashboard .user-info {}

#mypage-dashboard .user-info .content {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

#mypage-dashboard .user-info .content i {
    color: #777777;
    font-size: 13px;
    padding-right: 10px;
}

#mypage-dashboard .user-info .content .email {
    padding-bottom: 10px;
}

#mypage-dashboard .user-info .content .change-password {}

#mypage-dashboard .investor-rate {
    padding-bottom: 0;
    min-height: 228px;
}

#mypage-dashboard .investor-rate .title {
    text-align: center;
    padding-bottom: 15px;
}

#mypage-dashboard .investor-rate .title span {
    color: #c0c0c0;
}

#mypage-dashboard .investor-rate .circle {
    margin: 0 auto;
    width: 100px;
    height: 100px;
    background-image: linear-gradient(135deg, #ffeb72 0%, #fdd23e 100%);
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    color: #ffffff;
    font-size: 30px;
    font-weight: 700;
}

#mypage-dashboard .investor-rate .desc {
    padding-top: 20px;
    color: #777777;
    font-size: 12px;
    font-weight: 400;
    text-align: center;
}

#mypage-dashboard .investor-rate .desc i {
    padding-left: 5px;
    font-size: 16px;
    vertical-align: -2px;
}

#mypage-dashboard .status-columns {
    margin-top: 30px;
}

#mypage-dashboard .status-columns .title {
    position: relative;
    padding-bottom: 30px;
}

#mypage-dashboard .status-columns .help {
    color: #c0c0c0;
}

#mypage-dashboard .status-columns .help i {
    color: #777777;
    transition: all 0.25s ease;
}

#mypage-dashboard .status-columns .help i:hover {
    color: #fdd23e;
}

#mypage-dashboard .status-columns .col-content {}

#mypage-dashboard .status-columns .col-content .graph {
    position: relative;
}

#mypage-dashboard .status-columns .col-content.change .graph.pre-tax {
    display: none;
}

#mypage-dashboard .status-columns .col-content.change .graph.after-tax {
    display: block;
}

#mypage-dashboard .status-columns .col-content .graph.pre-tax {}

#mypage-dashboard .status-columns .col-content .graph.after-tax {
    display: none;
}

#mypage-dashboard .status-columns .col-content .graph .labels {
    position: absolute;
    right: 0;
    top: 28px;
}

#mypage-dashboard .status-columns .col-content .graph .labels .label {
    padding-bottom: 10px;
}

#mypage-dashboard .status-columns .col-content .graph .labels .label:last-child {
    padding-bottom: 0;
}

#mypage-dashboard .status-columns .col-content .graph .labels .label .color {
    float: left;
    margin-top: 4px;
    margin-right: 8px;
    width: 12px;
    height: 12px;
    border-radius: 8px;
}

#mypage-dashboard .status-columns .col-content .graph .labels .label .text {
    float: left;
    min-width: 76px;
}

#mypage-dashboard .status-columns .col-content .graph .labels .label .text .name {
    float: left;
    width: 23px;
    color: #c0c0c0;
    font-size: 12px;
    font-weight: 400;
    margin-right: 10px;
}

#mypage-dashboard .status-columns .col-right .col-content .graph .labels {
    top: 9px;
}

#mypage-dashboard .status-columns .col-right .col-content .graph .labels .label .text .name {
    width: 48px;
}

#mypage-dashboard .status-columns .col-content .graph .labels .label .text .value {
    float: right;
    color: #777777;
    font-size: 12px;
    font-weight: 400;
}

#mypage-dashboard .status-columns .col-content .graph .labels .label .text .value i {
    color: #222222;
    font-style: normal;
}

#mypage-dashboard .status-columns .col-content .graph .percent {
    width: 130px;
    height: 130px;
    position: absolute;
    color: #222222;
    font-size: 20px;
    font-weight: 400;
    text-align: center;
    line-height: 130px;
}

#mypage-dashboard .status-columns .col-content .graph canvas {
    width: 130px !important;
    height: 130px !important;
}


#mypage-dashboard .status-columns .col-content .data {}

#mypage-dashboard .status-columns .col-content .data ul {}

#mypage-dashboard .status-columns .col-content .data ul li {
    padding-bottom: 10px;
}

#mypage-dashboard .status-columns .col-content .data ul li:last-child {
    padding-bottom: 0;
}

#mypage-dashboard .status-columns .col-content .data ul li.first {}

#mypage-dashboard .status-columns .col-content .data ul li.last {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-dashboard .status-columns .col-content .data ul li.total {
    padding-bottom: 0;
}

#mypage-dashboard .status-columns .col-content .data ul li.total .value {
    color: #a9860e;
}

#mypage-dashboard .status-columns .col-content .data ul li .name {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

#mypage-dashboard .status-columns .col-content .data ul li .value {
    float: right;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

#mypage-dashboard .status-columns .col-content .data ul li .value .unit {
    color: #777777;
}

#mypage-dashboard .status-columns .col-left {
    padding: 0;
    box-shadow: unset;
    background-color: unset;
}

#mypage-dashboard .status-columns .col-left .total-repay {
    position: relative;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.6);
    background-color: #ffffff;
}

#mypage-dashboard .status-columns .col-left .estimated-rate {
    padding: 30px;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.6);
    background-color: #ffffff;
}

#mypage-dashboard .status-columns .col-left .estimated-rate .col-title {
    position: relative;
}

#mypage-dashboard .status-columns .col-left .estimated-rate .toggle-switch {
    position: absolute;
    right: 0;
    top: 5px;
    width: 100px;
    height: 20px;
}

#mypage-dashboard .status-columns .col-left .estimated-rate .toggle-switch .before {
    float: left;
    color: #a9860e;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.25s ease;
}

#mypage-dashboard .status-columns .col-left .estimated-rate .toggle-switch.active .before {
    color: #c0c0c0;
}

#mypage-dashboard .status-columns .col-left .estimated-rate .toggle-switch .after {
    float: right;
    color: #c0c0c0;
    font-size: 13px;
    font-weight: 400;
    transition: all 0.25s ease;
}

#mypage-dashboard .status-columns .col-left .estimated-rate .toggle-switch.active .after {
    color: #a9860e;
}

#mypage-dashboard .status-columns .col-left .estimated-rate .toggle-switch .button {
    width: 36px;
    height: 18px;
    border-radius: 9px;
    border: 1px solid #d0d0d0;
    background-color: #f2f2f2;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

#mypage-dashboard .status-columns .col-left .estimated-rate .toggle-switch .button span {
    position: absolute;
    left: -1px;
    top: -1px;
    width: 18px;
    height: 18px;
    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.1);
    border: 1px solid #d0d0d0;
    background-color: #ffffff;
    border-radius: 50%;
    transition: all 0.25s ease;
}

#mypage-dashboard .status-columns .col-left .estimated-rate .toggle-switch.active .button span {
    left: 17px;
}

#mypage-dashboard .status-columns .col-right {
    padding: 0;
    box-shadow: unset;
    background-color: unset;
}

#mypage-dashboard .status-columns .col-right .remain-repay {
    position: relative;
    padding: 30px;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.6);
    background-color: #ffffff;
}

#mypage-dashboard .status-columns .col-right .repay-complate-rate {
    padding: 30px;
    box-shadow: 0 2px 4px rgba(216, 216, 216, 0.6);
    background-color: #ffffff;
}

#mypage-dashboard .default-data {
    padding: 0;
}

#mypage-dashboard .default-data .sector-common {
    padding: 30px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-dashboard .default-data .sector-common .title {}

#mypage-dashboard .default-data .sector-common .title .refresh {
    padding-left: 10px;
    color: #c0c0c0;
    font-size: 14px;
}

#mypage-dashboard .default-data .sector-common .content {
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}

#mypage-dashboard .default-data .sector-common .content .name {
    color: #777777;
    padding-right: 10px;
}

#mypage-dashboard .default-data .sector-common .content .account-name {
    padding-left: 10px;
    color: #777777;
}

#mypage-dashboard .default-data .sector-common .content .value {}

#mypage-dashboard .default-data .sector-common.sector03 .content {
    text-align: right;
    color: #a9860e;
    font-size: 22px;
    font-weight: 400;
}

#mypage-dashboard .default-data .sector-common.sector03 .content .unit {
    padding-left: 5px;
    color: #777777;
    font-size: 14px;
}

#mypage-dashboard .default-data .sector-common.sector04 {
    border-bottom: 0;
}

#mypage-dashboard .default-data .sector-common.sector04 .content {
    color: #222222;
    font-size: 12px;
    font-weight: 400;
}

#mypage-dashboard .default-data .sector-common.sector04 .content a {
    display: inline-block;
    color: #777777;
    padding-top: 5px;
}

#mypage-dashboard .default-data .sector-common.sector04 .content a i {
    padding-left: 5px;
}

#mypage-dashboard .invest-grade {
    margin-top: 30px;
    min-height: 269px;
}

#mypage-dashboard .invest-grade .title-wrap {
    position: relative;
    padding-bottom: 30px;
}

#mypage-dashboard .invest-grade .title-wrap .title {
    padding-bottom: 0;
}

#mypage-dashboard .invest-grade .title-wrap .change-grade {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    color: #777777;
    font-size: 12px;
    font-weight: 400;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    padding: 0 15px;
    line-height: 28px;
    height: 32px;
    transition: all 0.25s ease;
}

#mypage-dashboard .invest-grade .title-wrap .change-grade:hover {
    color: #ffffff;
    background-color: #fdd23e;
}

#mypage-dashboard .invest-grade .title-wrap .change-grade i {
    color: #fdd23e;
    font-size: 21px;
    padding-left: 10px;
    transition: all 0.25s ease;
    vertical-align: -3px;
    line-height: 28px;
    display: inline-block;
}

#mypage-dashboard .invest-grade .title-wrap .change-grade:hover i {
    color: #ffffff;
}

#mypage-dashboard .invest-grade .content {}

#mypage-dashboard .invest-grade .content .data {}

#mypage-dashboard .invest-grade .content .data ul {}

#mypage-dashboard .invest-grade .content .data ul li {
    padding-bottom: 10px;
}

#mypage-dashboard .invest-grade .content .data ul li:last-child {
    padding-bottom: 0;
}

#mypage-dashboard .invest-grade .content .data ul li.first {}

#mypage-dashboard .invest-grade .content .data ul li.last {
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-dashboard .invest-grade .content .data ul li.total {
    padding-bottom: 0;
}

#mypage-dashboard .invest-grade .content .data ul li.total .value {
    color: #a9860e;
}

#mypage-dashboard .invest-grade .content .data ul li .name {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}
#mypage-dashboard .invest-grade .content .data ul li .name span {}
#mypage-dashboard .invest-grade .content .data ul li .name span i {
    position: relative;
    top: 1px;
}
#mypage-dashboard .invest-grade .content .data ul li .value {
    float: right;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
}

#mypage-dashboard .invest-grade .content .data ul li .value .unit {
    color: #777777;
}

#mypage-dashboard .invest-grade .progress {
    margin-top: 30px;
}

#mypage-dashboard .invest-grade .progress .bar-bg {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 9px;
    background-color: #ebebeb;
}

#mypage-dashboard .invest-grade .progress .bar-bg .bar {
    float: left;
    height: 100%;
    border-radius: 9px;
    overflow: hidden;
}

#mypage-dashboard .invest-grade .progress .bar-bg .bar-01 {
    background-color: #deb9ff;
    border-radius: 9px 0 0 9px;
}

#mypage-dashboard .invest-grade .progress .bar-bg .bar-02 {
    background-color: #b055ff;
    /*border-radius: 0 9px 9px 0;*/
    border-radius: 9px;
}

#mypage-dashboard .invest-grade .progress .bar-bg .bar-03 {
    background-color: #ff8464;
    border-radius: 0 9px 9px 0;
}

#mypage-dashboard .invest-grade .progress .half {
    float: left;
    margin-top: 15px;
}

#mypage-dashboard .invest-grade .progress .half:first-child {
    float: left;
}

#mypage-dashboard .invest-grade .progress .half:last-child {
    float: right;
}
#mypage-dashboard .invest-grade .progress .half .subname span {
    margin-left: 5px;
}
#mypage-dashboard .invest-grade .progress .half .name {
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}

#mypage-dashboard .invest-grade .progress .half .name span {
    color: #777777;
}

#mypage-dashboard .invest-grade .progress .half .value {
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
}

@media all and (max-width: 1023px) {
    #mypage-dashboard .default-data {
        margin-top: 30px;
    }
}

@media all and (max-width: 767px) {
    #mypage-dashboard .user-info {
        min-height: unset;
        margin-bottom: 15px;
    }

    #mypage-dashboard .status-columns {
        margin-top: 15px;
    }

    #mypage-dashboard .status-columns .col-left {
        margin-bottom: 15px;
    }

    #mypage-dashboard .status-columns .col-left .total-repay {
        padding: 20px;
    }

    #mypage-dashboard .status-columns .col-left .estimated-rate {
        padding: 20px;
    }

    #mypage-dashboard .status-columns .col-left .estimated-rate .col-title {
        padding-bottom: 20px;
    }

    #mypage-dashboard .status-columns .col-left .estimated-rate .title {
        padding-bottom: 10px;
    }

    #mypage-dashboard .status-columns .col-left .estimated-rate .toggle-switch {
        position: relative;
    }

    #mypage-dashboard .status-columns .col-right {
        margin-bottom: 15px;
    }

    #mypage-dashboard .status-columns .col-right .remain-repay {
        padding: 20px;
    }

    #mypage-dashboard .status-columns .col-right .repay-complate-rate {
        padding: 20px;
    }

    #mypage-dashboard .default-data {
        margin-top: 0;
    }

    #mypage-dashboard .default-data .sector-common {
        padding: 20px;
    }

    #mypage-dashboard .default-data .sector-common .content .name {
        float: left;
        line-height: 20px;
    }

    #mypage-dashboard .default-data .sector-common .content .value {
        float: left;
        line-height: 20px;
    }

    #mypage-dashboard .default-data .sector-common .content .account-name {
        padding-left: 0;
    }

    #mypage-dashboard .invest-grade .title-wrap .title {
        padding-bottom: 10px;
    }

    #mypage-dashboard .invest-grade .title-wrap .change-grade {
        position: relative;
    }
}

#mypage-investment {
    padding-bottom: 60px;
}

#mypage-investment .pagination {
    margin-top: 60px;
    margin-bottom: 0;
}

#mypage-investment #total-invest-wrap {
    margin-bottom: 60px;
}

#mypage-investment .box-title {
    position: relative;
    padding-left: 28px;
    color: #a9860e;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 30px;
}

#mypage-investment .box-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background-color: #a9860e;
    border: 3px solid #dddddd;
    border-radius: 50%;
}

#mypage-investment .detail-wrap {}

#mypage-investment .detail-wrap .item-row {}

#mypage-investment .detail-wrap .item-row.is-total {
    padding-top: 15px;
}

#mypage-investment .detail-wrap .item-row .item-name {
    float: left;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}

#mypage-investment .detail-wrap .item-row .item-value {
    float: right;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#mypage-investment .detail-wrap .item-row .item-value span {
    color: #a9860e;
}

#mypage-investment .detail-wrap .item-row.is-total .item-name {
    float: none;
}

#mypage-investment .detail-wrap .item-row.is-total .item-value {
    float: none;
    padding-top: 15px;
    text-align: right;
}

#mypage-investment .detail-wrap .item-row.is-total .item-value span {
    font-size: 22px;
}

#mypage-investment .count-wrap {
    min-height: 177px;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

#mypage-investment .count-wrap .count-common {
    text-align: center;
    width: 25%;
}

#mypage-investment .count-wrap .count-common .value {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#mypage-investment .count-wrap .count-common .value span {
    color: #a9860e;
    font-size: 36px;
}

#mypage-investment .count-wrap .count-common .name {
    padding-top: 5px;
    color: #777777;
    font-size: 16px;
    font-weight: 400;
}

#mypage-investment #my-history {}

#mypage-investment #my-history .content-header {
    padding-bottom: 30px;
}

#mypage-investment #my-history .content-header .select-tab {
    float: left;
}

#mypage-investment #my-history .content-header .select-tab .tab-wrap {
    width: 260px;
    box-shadow: 0 1px 4px #d8d8d8;
    background-color: #ffffff;
    overflow: hidden;
}

#mypage-investment #my-history .content-header .select-tab .tab-wrap .tab {
    position: relative;
    z-index: 9;
    float: left;
    width: 50%;
    line-height: 45px;
    text-align: center;
    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
}

#mypage-investment #my-history .content-header .select-tab .tab-wrap .tab:before {
    z-index: -1;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.25s ease;
}

#mypage-investment #my-history .content-header .select-tab .tab-wrap .tab.active {
    color: #222222;
}

#mypage-investment #my-history .content-header .select-tab .tab-wrap .tab.active:before {
    opacity: 1;
    z-index: -1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

#mypage-investment #my-history .content-header .select-status {
    float: right;
    width: 200px;
    background-color: #fff;
    position: relative;
}

#mypage-investment #my-history .content-header .select-status select {
    z-index: 9;
    border: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: transparent;

    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
}

#mypage-investment #my-history .content-header .select-status .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #c0c0c0;
}

#mypage-investment #my-history .content-body {}

#mypage-investment #my-history .total-detail-history {}

#mypage-investment #my-history .total-detail-history .item {
    padding-bottom: 0;
    margin-bottom: 30px;
}

#mypage-investment #my-history .total-detail-history .item:last-child {
    margin-bottom: 0;
}

#mypage-investment #my-history .total-detail-history .item .float-wrap {
    margin: 0 -30px;
    padding: 0 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-investment #my-history .total-detail-history .item .float-wrap .left {
    float: left;
    width: 50%;
}

#mypage-investment #my-history .total-detail-history .item .float-wrap .right {
    float: right;
    width: 50%;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap {
    margin-bottom: 25px;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .type-badge {
    margin-right: 10px;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 2px;
    border-bottom: 2px solid #000000;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .type-badge.property {
    border-color: #99c3f8;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .type-badge.movables {
    border-color: #3e92fd;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .type-badge.business {
    border-color: #1655a4;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .status-badge {
    margin-right: 15px;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 2px;
    border-bottom: 2px solid #000000;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .status-badge.temp {
    border-color: #fdd13e;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .status-badge.waiting {
    border-color: #fdd23e;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .status-badge.open {
    border-color: #a9860e;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .status-badge.success {
    border-color: #4a3a05;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .status-badge.repaying {
    border-color: #deb9ff;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .status-badge.done {
    border-color: #b055ff;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .status-badge.pause {
    border-color: #c33a15;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .status-badge.overdue {
    border-color: #ff8464;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .status-badge.cancel {
    border-color: #222222;
}

#mypage-investment #my-history .total-detail-history .item .status-wrap .invest-code {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    line-height: 25px;
}

#mypage-investment #my-history .total-detail-history .item .title-wrap {}

#mypage-investment #my-history .total-detail-history .item .title-wrap .title {
    position: relative;
    top: 9px;
    padding-bottom: 0;
    color: #222222;
    font-size: 22px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mypage-investment #my-history .total-detail-history .item .data-wrap {}

#mypage-investment #my-history .total-detail-history .item .data-wrap ul {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    justify-content: space-between;
}

#mypage-investment #my-history .total-detail-history .item .data-wrap ul li {
    text-align: center;
}

#mypage-investment #my-history .total-detail-history .item .data-wrap ul li .name {
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;

}

#mypage-investment #my-history .total-detail-history .item .data-wrap ul li .value {
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}

#mypage-investment #my-history .total-detail-history .item .data-wrap ul li.repay {}

#mypage-investment #my-history .total-detail-history .item .data-wrap ul li.count {}

#mypage-investment #my-history .total-detail-history .item .data-wrap ul li.count .after {
    color: #777777;
}

#mypage-investment #my-history .total-detail-history .item .data-wrap ul li.rate {}

#mypage-investment #my-history .total-detail-history .item .data-wrap ul li.amount {}

#mypage-investment #my-history .total-detail-history .item .separator {}

#mypage-investment #my-history .total-detail-history .item .info-wrap {
    position: relative;
    padding-top: 20px;
    padding-bottom: 20px;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap .info-row {
    float: left;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap .info-row>div {
    float: left;
    margin-right: 60px;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap .info-row>div.info-04 {
    margin-right: 0;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .action {
    margin-right: 0;
    cursor: pointer;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #777777;
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    padding: 7px 15px;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    transition: all 0.25s ease;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .action i {
    padding-left: 25px;
    color: #fdd23e;
    transition: all 0.25s ease;
    font-size: 13px;
}

@media all and (min-width: 1024px) {
    #mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .action:hover {
        color: #ffffff;
        background-color: #fdd23e;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .action:hover i {
        color: #ffffff;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .action:hover i:before {
        transition: all 0.25s ease;
    }
}

#mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .action.active {
    right: 119px;
    color: #ffffff;
    background-color: #fdd23e;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .action.active i {
    color: #ffffff;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .action.active i:before {
    transform: rotate(180deg);
}


#mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .dropdown a {
    display: none;

    cursor: pointer;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #777777;
    font-size: 12px;
    line-height: 14px;
    font-weight: 400;
    padding: 7px 15px;
    border-radius: 21px;
    border: 2px solid #c0c0c0;
    transition: all 0.25s ease;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .dropdown i {
    padding-left: 25px;
    color: #c0c0c0;
    transition: all 0.25s ease;
    font-size: 13px;
}
#mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .dropdown i.cancel {
    font-size: 15px;
}
#mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .dropdown:hover a {
    color: #ffffff;
    background-color: #c0c0c0;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .dropdown:hover i {
    color: #ffffff;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .dropdown.active a {
    display: block;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap>div .label {
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    padding-right: 10px;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap>div .value {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-investment #my-history .total-detail-history .item .info-wrap .info-02 .value {
    color: #A9860E;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap {
    margin: 0 -30px;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .buttons {}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .buttons a {
    border: 1px solid #e0e0e0;
    position: relative;
    z-index: 9;
    float: left;
    width: 50%;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    line-height: 45px;
    transition: all 0.25s ease;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .buttons a:before {
    z-index: -1;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.25s ease;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .buttons a i {
    padding-left: 5px;
    transition: all 0.25s ease;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .buttons a i:before {
    transition: all 0.25s ease;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .buttons a.active:before {
    opacity: 1;
    z-index: -1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .buttons a.active {
    color: #222222;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .buttons a.active i {
    color: #222222;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .buttons a.active i:before {
    transform: rotate(180deg);
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details {
    padding: 0 30px 0 30px;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history {
    display: none;
    padding-top: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-title {
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 30px;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-title img {
    display: none;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content {
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table {
    table-layout: fixed;
    width: 100%;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table thead {}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table thead tr {}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table thead tr th {
    text-align: left;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody {}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody tr {}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody tr td {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody tr:nth-last-child(2) td {
    background-color: rgba(253, 210, 62, 0.08);
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody tr:nth-last-child(3) td {
    background-color: rgba(253, 210, 62, 0.08);
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody tr.total-row td {
    background-color: rgba(253, 210, 62, 0.2);
    color: #222222;
    border-bottom: 0;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody tr.no-data td {
    text-align: center;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .base {
    padding-top: 20px;
    padding-bottom: 10px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .base i {
    padding-right: 7px;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .base span {
    color: #222222;
    padding-left: 15px;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .note {
    float: left;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .total-remain-amount {
    float: right;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .total-remain-amount .name {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding-right: 15px;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .total-remain-amount .value {
    color: #a9860e;
    font-size: 22px;
    font-weight: 400;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .total-remain-amount .value span {
    color: #777777;
    font-size: 14px;
    padding-left: 5px;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan {
    padding-top: 30px;
    display: none;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-title {
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 30px;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-title img {
    display: none;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content {
    border-top: 1px solid #ebebeb;
    border-bottom: 1px solid #ebebeb;
    margin-bottom: 30px;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table {
    table-layout: fixed;
    width: 100%;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table thead {}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table thead tr {}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table thead tr th {
    text-align: left;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody {}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr {}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr td {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr.total-row td {
    background-color: rgba(253, 210, 62, 0.2);
    color: #222222;
    border-bottom: 0;
}

#mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr.no-data td {
    text-align: center;
}

@media all and (max-width: 1023px) {
    #mypage-investment .count-wrap {
        display: block;
    }

    #mypage-investment .count-wrap .count-common {
        width: 100%;
        padding-bottom: 10px;
    }

    #mypage-investment .count-wrap .count-common:last-child {
        padding-bottom: 0;
    }

    #mypage-investment .count-wrap .count-common .name {
        float: left;
        padding-top: 0;
        font-size: 14px;
    }

    #mypage-investment .count-wrap .count-common .value {
        float: right;
        font-size: 14px;
    }

    #mypage-investment .count-wrap .count-common .value span {
        font-size: 14px;
        color: #222222;
    }

    #mypage-investment #my-history .total-detail-history .item .float-wrap .left {
        float: none;
        width: 100%;
        margin-bottom: 25px;
    }

    #mypage-investment #my-history .total-detail-history .item .float-wrap .right {
        float: none;
        width: 100%;
    }

    #mypage-investment #my-history .total-detail-history .item .data-wrap ul {
        display: block;
    }

    #mypage-investment #my-history .total-detail-history .item .data-wrap ul li {
        float: left;
        margin-right: 30px;
    }

    #mypage-investment #my-history .total-detail-history .item .data-wrap ul li:last-child {
        margin-right: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .info-row {
        float: none;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .info-row.row02 {
        padding-top: 15px;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .info-row>div {
        margin-right: 40px;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .info-row>div:first-child {
        min-width: 185px;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .info-row>div:last-child {
        margin-right: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table thead tr th.num {
        padding-left: 0;
        width: 55px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table thead tr th.total {
        padding-right: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr td.num {
        padding-left: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr td.total {
        padding-right: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr td.date {
        padding-right: 0;
    }
}

@media all and (max-width: 767px) {
    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table thead tr th.num {
        width: auto;
        padding-left: 14px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table thead tr th.total {
        padding-right: 14px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr td.num {
        padding-left: 14px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr td.total {
        padding-right: 14px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr td.date {
        padding-right: 14px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table thead tr th {
        border-right: 1px solid #ebebeb;
        padding-right: 14px;
    }

    #mypage-investment .box-title {
        padding-left: 22px;
        font-size: 14px;
        padding-bottom: 15px;
    }

    #mypage-investment .box-title:before {
        top: 2px;
        width: 15px;
        height: 15px;
        border: 2px solid #dddddd;
    }

    #mypage-investment .detail-wrap {
        margin-bottom: 15px;
    }

    #mypage-investment #total-invest-wrap {
        margin-bottom: 30px;
    }

    #mypage-investment .count-wrap {
        min-height: unset;
        display: block;
    }

    #mypage-investment .count-wrap .count-common {
        width: 100%;
        padding-bottom: 10px;
    }

    #mypage-investment .count-wrap .count-common:last-child {
        padding-bottom: 0;
    }

    #mypage-investment .count-wrap .count-common .name {
        float: left;
        padding-top: 0;
        font-size: 14px;
    }

    #mypage-investment .count-wrap .count-common .value {
        float: right;
        font-size: 14px;
    }

    #mypage-investment .count-wrap .count-common .value span {
        font-size: 14px;
        color: #222222;
    }

    #mypage-investment #my-history .content-header .select-tab {
        float: none;
        margin-bottom: 15px;
    }

    #mypage-investment #my-history .content-header .select-tab .tab-wrap {
        width: 100%;
    }

    #mypage-investment #my-history .content-header .select-status {
        float: none;
        width: 100%;
    }

    #mypage-investment #my-history .total-detail-history .item .status-wrap {
        margin-bottom: 15px;
    }

    #mypage-investment #my-history .total-detail-history .item .status-wrap .invest-code {
        float: right;
    }

    #mypage-investment #my-history .total-detail-history .item .title-wrap {
        padding-bottom: 20px;
    }

    #mypage-investment #my-history .total-detail-history .item .title-wrap .title {
        position: static;
        font-size: 18px;
    }

    #mypage-investment #my-history .total-detail-history .item .float-wrap {
        margin: 0 -20px;
        padding: 0 20px;
        padding-bottom: 20px;
    }

    #mypage-investment #my-history .total-detail-history .item .float-wrap .left {
        float: none;
        width: 100%;
        margin-bottom: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .float-wrap .right {
        float: none;
        width: 100%;
    }

    #mypage-investment #my-history .total-detail-history .item .data-wrap ul {
        display: block;
    }

    #mypage-investment #my-history .total-detail-history .item .data-wrap ul li {
        padding-bottom: 10px;
        float: none;
        margin-right: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .data-wrap ul li:last-child {
        padding-bottom: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .data-wrap ul li .name {
        float: left;
    }

    #mypage-investment #my-history .total-detail-history .item .data-wrap ul li .value {
        float: right;
        font-size: 14px;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .info-row {
        float: none;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .info-row.row02 {
        padding-top: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .info-row>div:first-child {
        max-width: unset;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .info-row>div {
        float: none;
        margin-right: 0;
        padding-bottom: 10px;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .info-row>div.info-04 {
        padding-bottom: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap {
        position: relative;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .action {
        float: left;
        width: calc(50% - 7px);
        margin-top: 20px;
        position: static;
        transform: unset;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .dropdown a {
        display: block;
        opacity: 0;
        z-index: -99;
        float: left;
        width: calc(50% - 7px);
        margin-top: 20px;
        transform: unset;
        top: 0;
        left: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap .action-wrap .dropdown.active a {
        left: calc(100% - 118px);
        opacity: 1;
        z-index: 99;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap>div .label {
        float: left;
        padding-right: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .info-wrap>div .value {
        float: right;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap {
        margin: 0 -20px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details {
        padding: 0 20px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history {
        padding-top: 20px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-title {
        font-size: 14px;
        padding-bottom: 20px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table {
        display: block;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table:after {
        content: '';
        display: table;
        clear: both;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table thead {
        display: block;
        float: left;
        width: 75px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table thead tr {
        display: block;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table thead tr th {
        display: block;
        font-size: 12px;
        min-height: 49px;
        border-right: 1px solid #ebebeb;
        padding-right: 14px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table thead tr th.total {
        background-color: rgba(253, 210, 62, 0.2);
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody {
        display: block;
        float: left;
        width: calc(100% - 75px);
        font-size: 0;
        white-space: nowrap;
        overflow-x: auto;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody tr {
        display: inline-block;
        width: 100%;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody tr td {
        display: block;
        font-size: 12px;
        min-height: 49px;
        background-color: rgba(253, 210, 62, 0.08);
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody tr td.total {
        background-color: rgba(253, 210, 62, 0.2);
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody tr.total-row td {
        border-bottom: 1px solid #ebebeb;
        background-color: rgba(253, 210, 62, 0.08);
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .note {
        font-size: 12px;
        float: none;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .total-remain-amount {
        float: none;
        text-align: right;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .total-remain-amount .name {
        font-size: 12px;
        padding-right: 10px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .total-remain-amount .value {
        font-size: 18px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .total-remain-amount .value span {
        font-size: 12px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan {
        padding-top: 20px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-title {
        font-size: 14px;
        padding-bottom: 20px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table {
        display: block;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table:after {
        content: '';
        display: table;
        clear: both;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table thead {
        display: block;
        float: left;
        width: 75px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table thead tr {
        display: block;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table thead tr th {
        display: block;
        font-size: 12px;
        min-height: 49px;
        border-right: 1px solid #ebebeb;
        padding-right: 14px;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table thead tr th.total {
        background-color: rgba(253, 210, 62, 0.2);
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody {
        display: block;
        float: left;
        width: calc(100% - 75px);
        font-size: 0;
        white-space: nowrap;
        overflow-x: auto;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr {
        display: inline-block;
        width: 80%;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr td {
        display: block;
        font-size: 12px;
        min-height: 49px;
        background-color: rgba(253, 210, 62, 0.08);
        border-right: 1px solid #ebebeb;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr.total-row td {
        border-right: 0;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr td.total {
        background-color: rgba(253, 210, 62, 0.2) !important;
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-plan .plan-content table tbody tr.total-row td {
        border-bottom: 1px solid #ebebeb;
        background-color: rgba(253, 210, 62, 0.08);
    }

    #mypage-investment #my-history .total-detail-history .item .repay-detail-wrap .details .repay-history .history-content table tbody tr.no-data td {
        height: 392px;
        vertical-align: middle;
        align-items: center;
        justify-content: center;
        line-height: 362px;
    }
}

#mypage-investment #my-history .month-plan {}

#mypage-investment #my-history .month-plan .mypage-box {
    padding: 0;
    box-shadow: unset;
    border: 1px solid #ebebeb;
}

#mypage-investment #my-history .month-plan .mypage-box .aside {
    float: left;
    width: 285px;
    border-right: 1px solid #ebebeb;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .calendar-wrap {
    border-bottom: 1px solid #ebebeb;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap {
    border-bottom: 1px solid #ebebeb;
    padding: 20px;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap .title {
    padding-bottom: 20px;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap .content {}

#mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap .content ul {}

#mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap .content ul li {
    padding-bottom: 10px;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap .content ul li:last-child {
    padding-bottom: 0;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap .content ul li .name {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap .content ul li .name span {
    color: #222222;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap .content ul li .value {
    float: right;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap .content ul li .value span {
    color: #222222;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap {
    padding: 20px;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .title {
    padding-bottom: 20px;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .title i {
    vertical-align: middle;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .content {}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .content ul {}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .content ul li {
    padding-bottom: 10px;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .content ul li:last-child {
    padding-bottom: 0;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .content ul li .name {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .content ul li .name span {
    color: #222222;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .content ul li .value {
    float: right;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .content ul li .value span {
    color: #222222;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .total-amount {
    padding-top: 15px;
    margin-top: 15px;
    border-top: 1px solid #ebebeb;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .total-amount .name {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .total-amount .name span {
    color: #222222;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .total-amount .value {
    float: right;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .total-amount .value span {
    color: #a9860e;
}

#mypage-investment #my-history .month-plan .mypage-box .article {
    float: left;
    width: calc(100% - 285px);
    padding: 30px;
}

#mypage-investment #my-history .month-plan .mypage-box .article .title {
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    line-height: 27px;
    padding-bottom: 30px;
}

#mypage-investment #my-history .month-plan .mypage-box .article .content {
    border-top: 2px solid #ebebeb;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list {
    width: 100%;
    table-layout: fixed;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list .detail td {
    padding: 0;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list .detail-content {
    padding: 15px;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list thead {}

#mypage-investment #my-history .month-plan .mypage-box .article .list thead tr {}

#mypage-investment #my-history .month-plan .mypage-box .article .list thead tr th {
    text-align: left;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list thead tr th.code {
    width: 95px;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list thead tr th.date {
    width: 110px;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list thead tr th.name {
    width: 240px;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list thead tr th.number {
    width: 115px;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list thead tr th.amount {
    width: 135px;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list thead tr th.status {
    width: 85px;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list tbody {}

#mypage-investment #my-history .month-plan .mypage-box .article .list tbody tr {}

#mypage-investment #my-history .month-plan .mypage-box .article .list tbody tr td {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    border-bottom: 1px solid #ebebeb;
    /*overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;*/
    transition: all 0.25s ease;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list tbody tr td.active {
    color: #222222;
    background-color: rgba(253, 210, 62, 0.08);
}

#mypage-investment #my-history .month-plan .mypage-box .article .list tbody tr td.toggle {}

#mypage-investment #my-history .month-plan .mypage-box .article .list tbody tr td.toggle a {
    transition: all 0.25s ease;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list tbody tr td.toggle a i:before {
    transition: all 0.25s ease;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list tbody tr td.toggle a.active {
    color: #222222;
}

#mypage-investment #my-history .month-plan .mypage-box .article .list tbody tr td.toggle a.active i:before {
    transform: rotate(180deg);

}

#mypage-investment #my-history .month-plan .mypage-box .article .detail-data {
    width: 100%;
    table-layout: fixed;
}

#mypage-investment #my-history .month-plan .mypage-box .article .detail-data thead {}

#mypage-investment #my-history .month-plan .mypage-box .article .detail-data thead tr {}

#mypage-investment #my-history .month-plan .mypage-box .article .detail-data thead tr th {
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    padding: 15px 20px;
    background-color: #f5f5f5;
}

#mypage-investment #my-history .month-plan .mypage-box .article .detail-data tbody {}

#mypage-investment #my-history .month-plan .mypage-box .article .detail-data tbody tr {}

#mypage-investment #my-history .month-plan .mypage-box .article .detail-data tbody tr td {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding: 15px 20px !important;
}

@media all and (max-width: 1023px) {
    #mypage-investment #my-history .content-header {
        padding-bottom: 15px;
    }

    #mypage-investment #my-history .month-plan .mypage-box .aside {
        width: 100%;
        border-right: 0;
    }

    #mypage-investment #my-history .month-plan .mypage-box .aside .calendar-wrap {
        display: none;
    }

    #mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap {
        border-bottom: 1px solid #ebebeb;
        float: left;
        width: 50%;
        min-height: 248px;
        border-right: 1px solid #ebebeb;
    }

    #mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap {
        border-bottom: 1px solid #ebebeb;
        float: left;
        width: 50%;
        min-height: 248px;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article {
        width: 100%;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content {
        border-width: 0;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile {
        position: relative;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .item {
        margin-bottom: 15px;
        border-top: 1px solid #ebebeb;
        position: relative;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .item:last-child {
        margin-bottom: 0;
    }


    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .list {}

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .toggle {
        position: absolute;
        right: 15px;
        top: 15px;
        width: 20px;
        height: 20px;
        border: 1px solid #d8d8d8;
        border-radius: 50%;
        text-align: center;
        line-height: 18px;
        color: #d8d8d8;
        transition: all 0.25s ease;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .toggle i:before {
        transition: all 0.25s ease;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .toggle.active {
        color: #fdd23e;
        border-color: #fdd23e;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .toggle.active i:before {
        transform: rotate(180deg);
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .list.title {
        padding-bottom: 0;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .list .name {
        float: left;
        width: 90px;
        color: #222222;
        font-size: 12px;
        font-weight: 400;
        padding: 15px;
        border-right: 1px solid #ebebeb;
        border-bottom: 1px solid #ebebeb;

        line-height: normal;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .list .value {
        float: left;
        width: calc(100% - 90px);
        color: #777777;
        font-size: 12px;
        font-weight: 400;
        padding: 15px;
        /*overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;*/
        border-bottom: 1px solid #ebebeb;
        background-color: rgba(253, 210, 62, 0.08);

        line-height: normal;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .toggle-data {
        display: none;
        padding: 15px;
        border-bottom: 1px solid #ebebeb;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .toggle-data ul {
        border-top: 1px solid #ebebeb;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .toggle-data ul li {}

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .toggle-data ul li .name {
        float: left;
        width: 80px;
        color: #222222;
        font-size: 12px;
        font-weight: 400;
        padding: 15px;
        border-right: 1px solid #ebebeb;
        border-bottom: 1px solid #ebebeb;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .content .list-mobile .toggle-data ul li .value {
        float: left;
        width: calc(100% - 80px);
        color: #777777;
        font-size: 12px;
        font-weight: 400;
        padding: 15px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        border-bottom: 1px solid #ebebeb;
        background-color: #f5f5f5;
    }
}

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

    #mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap {
        width: 100%;
        min-height: unset;
        border-right: 0;
    }

    #mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap {
        width: 100%;
        min-height: unset;
    }

    #mypage-investment #my-history .month-plan .mypage-box .aside .status-wrap .title {
        padding-bottom: 30px;
    }

    #mypage-investment #my-history .month-plan .mypage-box .aside .amount-wrap .title {
        padding-bottom: 30px;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article {
        width: 100%;
        padding: 20px;
    }

    #mypage-investment #my-history .month-plan .mypage-box .article .title {
        padding-bottom: 20px;
    }
}

/**
 * mypage-balance
 */
#withdraw-spinner {
    display: none;
}

#mypage-balance {
    padding-bottom: 60px;
}

#mypage-balance .paging ul {
    margin-top: 60px;
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

#mypage-balance .paging ul .page-numbers {
    color: #c0c0c0;
    font-size: 26px;
    font-weight: 400;
    line-height: 38px;
    margin: 0 15px;
    transition: all 0.25s ease;
}

#mypage-balance .paging ul .page-numbers:hover {
    color: #222222;
}

#mypage-balance .paging ul .page-numbers.current {
    color: #fdd23e;
    border-bottom: 2px solid #fdd23e;
}

#mypage-balance .paging ul .page-numbers.prev {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.25s ease;
}

#mypage-balance .paging ul .page-numbers.prev:hover {
    color: #fdd23e;
}

#mypage-balance .paging ul .page-numbers.next {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.25s ease;
}

#mypage-balance .paging ul .page-numbers.next:hover {
    color: #fdd23e;
}

@media all and (max-width: 767px) {
    #mypage-balance .paging ul {
        margin-top: 30px;
    }

    #mypage-balance .paging ul .page-numbers {
        font-size: 16px;
        line-height: 24px;
        margin: 0 10px;
    }
}

#mypage-balance .box-title {
    position: relative;
    padding-left: 28px;
    color: #a9860e;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 30px;
}

#mypage-balance .box-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background-color: #a9860e;
    border: 3px solid #dddddd;
    border-radius: 50%;
}

#mypage-balance .account_wrap {
    min-height: 407px;
}

#mypage-balance .account_wrap .name {
    float: left;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}

#mypage-balance .account_wrap .value {
    float: right;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#mypage-balance .account_wrap .value .bank {
    padding-right: 10px;
}

#mypage-balance .account_wrap .parag01 {
    padding-bottom: 19px;
}

#mypage-balance .account_wrap .parag02 {
    padding-bottom: 20px;
}

#mypage-balance .account_wrap .parag03 {
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-balance .account_wrap .parag03 .name {
    float: none;
    padding-bottom: 15px;
}

#mypage-balance .account_wrap .parag03 .name .refresh {
    padding-left: 10px;
    color: #c0c0c0;
    font-size: 14px;
}

#mypage-balance .account_wrap .parag03 .value {
    float: none;
    text-align: right;
}

#mypage-balance .account_wrap .parag03 .value .en {
    color: #a9860e;
    font-size: 22px;
}

#mypage-balance .account_wrap .parag04 {
    padding-top: 20px;
}

#mypage-balance .account_wrap .parag04 .title {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 10px;
    line-height: 21px;
}

#mypage-balance .account_wrap .parag04 .title i {
    padding-right: 10px;
    color: #777777;
    font-size: 14px;
}

#mypage-balance .account_wrap .parag04 {}

#mypage-balance .account_wrap .parag04 ul {}

#mypage-balance .account_wrap .parag04 ul li {
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 5px;
}

#mypage-balance .account_wrap .parag04 ul li:last-child {
    padding-bottom: 0;
}

#mypage-balance .withdraw {}

#mypage-balance .withdraw .box-title {
    padding-bottom: 30px;
}

#mypage-balance .withdraw .withdraw-much-wrap {}

#mypage-balance .withdraw .withdraw-much-wrap .title {
    padding-bottom: 30px;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap {
    padding-bottom: 30px;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .input-radio {
    box-shadow: 0 1px 4px #d8d8d8;
    background-color: #ffffff;
    width: 170px;
    margin-bottom: 20px;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .input-radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .input-radio label {
    z-index: 9;
    position: relative;
    cursor: pointer;
    float: left;
    width: 50%;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    transition: all 0.25s ease;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .input-radio label:before {
    z-index: -1;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.25s ease;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .input-radio input:checked+label {
    color: #222222;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .input-radio input:checked+label:before {
    opacity: 1;
    z-index: -1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .input-box {
    float: left;
    width: calc(100% - 150px);
    position: relative;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .input-box input {
    width: 100%;
    border: 0;
    height: 45px;
    line-height: 45px;
    padding-right: 40px;
    padding-left: 15px;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    text-align: right;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .input-box span {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .withdraw-balance {
    float: right;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    width: 135px;
    padding: 7px 15px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    transition: all 0.25s ease;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .withdraw-balance:hover {
    color: #ffffff;
    background-color: #fdd23e;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .withdraw-balance i {
    color: #fdd23e;
    padding-left: 20px;
    transition: all 0.25s ease;
    font-size: 21px;
    vertical-align: -2px;
    display: inline-block;
    line-height: 26px;
}

#mypage-balance .withdraw .withdraw-much-wrap .input-wrap .withdraw-balance:hover i {
    color: #ffffff;
}

#mypage-balance .withdraw .withdraw-bank-wrap {
    padding-bottom: 30px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-balance .withdraw .withdraw-bank-wrap .name {
    float: left;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}

#mypage-balance .withdraw .withdraw-bank-wrap .value {
    float: right;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#mypage-balance .withdraw .withdraw-bank-wrap .value .bank {
    padding-right: 15px;
}

#mypage-balance .withdraw .withdraw-desc-wrap {
    padding-top: 20px;
    border-top: 1px solid #ebebeb;
}

#mypage-balance .withdraw .withdraw-desc-wrap .title {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 10px;
    line-height: 21px;
}

#mypage-balance .withdraw .withdraw-desc-wrap .title i {
    padding-right: 10px;
    color: #777777;
    font-size: 14px;
}

#mypage-balance .withdraw .withdraw-desc-wrap .content {}

#mypage-balance .withdraw .withdraw-desc-wrap .content li {
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 5px;
}

#mypage-balance .withdraw .withdraw-desc-wrap .content li:last-child {
    padding-bottom: 0;
}

#mypage-balance #balance-history-section {
    margin-top: 60px;
}

#mypage-balance #balance-history-section .section-content {
    border-top: 1px solid #ebebeb;
}

#mypage-balance #balance-history-section table {
    width: 100%;
    table-layout: fixed;
}

#mypage-balance #balance-history-section table thead {}

#mypage-balance #balance-history-section table thead tr {}

#mypage-balance #balance-history-section table thead tr th {
    text-align: left;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid #ebebeb;
}

#mypage-balance #balance-history-section table thead tr th.date {
    width: 170px;
}

#mypage-balance #balance-history-section table thead tr th.con {
    width: 730px;
}

#mypage-balance #balance-history-section table thead tr th.change_money {
    width: 135px;
}

#mypage-balance #balance-history-section table thead tr th.keep_money {
    width: 135px;
}

#mypage-balance #balance-history-section table tbody {}

#mypage-balance #balance-history-section table tbody tr {}

#mypage-balance #balance-history-section table tbody tr td {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid #ebebeb;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mypage-balance #balance-history-section table tbody tr td .hidden {
    display: none;
}

@media all and (max-width: 1023px) {
    #mypage-balance .account_wrap {
        min-height: 470px;
    }

    #mypage-balance .withdraw .mypage-box {
        /*min-height: 470px;*/
        height: 470px;
    }

    #mypage-balance .withdraw .withdraw-much-wrap .input-wrap {
        padding-bottom: 20px;
    }

    #mypage-balance .withdraw .withdraw-much-wrap .input-wrap .input-box {
        width: 100%;
    }

    #mypage-balance .withdraw .withdraw-much-wrap .input-wrap .withdraw-balance {
        width: 103px;
        margin-top: 15px;
        font-size: 12px;
        padding: 0 15px;
    }

    #mypage-balance .withdraw .withdraw-much-wrap .input-wrap .withdraw-balance i {
        padding-left: 10px;
    }

    #mypage-balance .account_wrap .value {
        font-size: 14px;
    }

    #mypage-balance .account_wrap .value .bank {
        /*display: block;*/
        padding-right: 0;
        /*text-align: right;*/
        display: inline-block;
        margin-right: 5px;
    }

    #mypage-balance .withdraw .withdraw-bank-wrap .value {
        font-size: 14px;
    }

    #mypage-balance .withdraw .withdraw-bank-wrap .value .bank {
        display: block;
        padding-right: 0;
        text-align: right;
    }

}

@media all and (max-width: 767px) {
    #mypage-balance {
        padding-bottom: 50px;
    }
    #mypage-balance .withdraw .mypage-box {
        height: inherit;
    }
    #mypage-balance .account_wrap {
        min-height: unset;
        margin-bottom: 30px;
    }

    #mypage-balance .account_wrap .name {
        float: none;
        padding-bottom: 5px;
    }

    #mypage-balance .account_wrap .value {
        float: none;
    }

    #mypage-balance .account_wrap .parag01 {
        padding-bottom: 20px;
    }

    #mypage-balance .account_wrap .parag02 {
        padding-bottom: 20px;
    }

    #mypage-balance .account_wrap .parag03 .name {
        padding-bottom: 10px;
    }

    #mypage-balance .account_wrap .parag04 ul li {
        font-size: 12px;
    }

    #mypage-balance .withdraw .withdraw-much-wrap .input-wrap .input-box {
        width: 100%;
    }

    #mypage-balance .withdraw .withdraw-much-wrap .input-wrap .withdraw-balance {
        width: 103px;
        margin-top: 15px;
        font-size: 12px;
    }

    #mypage-balance .withdraw .withdraw-much-wrap .input-wrap {
        padding-bottom: 20px;
    }

    #mypage-balance .withdraw .withdraw-bank-wrap {
        padding-bottom: 20px;
    }

    #mypage-balance .withdraw .withdraw-bank-wrap .name {
        float: none;
        padding-bottom: 5px;
    }

    #mypage-balance .withdraw .withdraw-bank-wrap .value {
        float: none;
        font-size: 14px;
    }

    #mypage-balance .withdraw .withdraw-desc-wrap .content li {
        font-size: 12px;
    }

    #mypage-balance #balance-history-section {
        margin-top: 30px;
    }

    #mypage-balance #balance-history-section table thead {
        display: none;
    }

    #mypage-balance #balance-history-section table tbody tr td {
        display: block;
        margin-bottom: 15px;
        padding: 20px;
    }

    #mypage-balance #balance-history-section table tbody tr td.date {
        display: none;
    }

    #mypage-balance #balance-history-section table tbody tr td.change_money {
        display: none;
    }

    #mypage-balance #balance-history-section table tbody tr td.keep_money {
        display: none;
    }

    #mypage-balance #balance-history-section table tbody tr td .hidden {
        display: block;
    }

    #mypage-balance #balance-history-section table tbody tr td .hidden.date {
        color: #c0c0c0;
        padding-bottom: 10px;
    }

    #mypage-balance #balance-history-section table tbody tr td .hidden.change_money {
        padding-bottom: 10px;
    }

    #mypage-balance #balance-history-section table tbody tr td .hidden.change_money:after {
        content: "";
        display: table;
        clear: both;
    }

    #mypage-balance #balance-history-section table tbody tr td .hidden.keep_money {}

    #mypage-balance #balance-history-section table tbody tr td .hidden.keep_money:after {
        content: "";
        display: table;
        clear: both;
    }

    #mypage-balance #balance-history-section table tbody tr td .hidden .name {
        float: left;
        display: inline-block;
        color: #777777;
    }

    #mypage-balance #balance-history-section table tbody tr td .hidden .value {
        float: right;
        color: #222222;
    }

    #mypage-balance #balance-history-section table tbody tr td .con_wrap {
        color: #777;
        padding-bottom: 0;
        margin-bottom: 20px;
        max-height: 40px;
        line-height: 20px;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #mypage-balance #balance-history-section table tbody tr td .con_wrap a {
        display: inline-block;
        color: #333333;
        line-height: 20px;
    }

}

/**
 * mypage-invest-settings
 */
#mypage-invest-settings {
    padding-bottom: 60px;
}

#mypage-invest-settings .mypage-box .title {
    padding-bottom: 30px;
}

#mypage-invest-settings .box-title {
    position: relative;
    padding-left: 28px;
    color: #a9860e;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 30px;
}

#mypage-invest-settings .box-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background-color: #a9860e;
    border: 3px solid #dddddd;
    border-radius: 50%;
}

#mypage-invest-settings .button-wrap {
    text-align: right;
}

/* 20200519 추천인코드 저장완료버튼 */
#save-success-btn {
    margin-top: 4px;
    display: inline-block;
    color: #777777;
    font-size: 12px;
    font-weight: 400;
    padding: 0 15px;
    line-height: 28px;
    height: 32px;
    border-radius: 21px;
    border: 2px solid #c0c0c0 !important;
    transition: all 0.25s ease;
}

#save-success-btn:hover {
    color: #ffffff;
    background-color: #c0c0c0 !important;
}

#save-success-arrow {
    color: #c0c0c0 !important;
}

#save-success-arrow:hover {
    color: #ffffff !important;
}

#mypage-invest-settings .button-wrap a {
    margin-top: 4px;
    display: inline-block;
    color: #777777;
    font-size: 12px;
    font-weight: 400;
    padding: 0 15px;
    line-height: 28px;
    height: 32px;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    transition: all 0.25s ease;
}

#mypage-invest-settings .button-wrap a i {
    padding-left: 15px;
    color: #fdd23e;
    transition: all 0.25s ease;
    font-size: 21px;
    display: inline-block;
    line-height: 28px;
    vertical-align: -3px;
}


#mypage-invest-settings .button-wrap a:hover {
    color: #ffffff;
    background-color: #fdd23e;
}

#mypage-invest-settings .button-wrap a:hover i {
    color: #ffffff;
}

#mypage-invest-settings .member-info {}

#mypage-invest-settings .member-info .mypage-box {
    min-height: 398px;
}

#mypage-invest-settings .member-info .id-wrap {
    padding-bottom: 10px;
}

#mypage-invest-settings .member-info .name {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-invest-settings .member-info .value {
    float: right;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}

#mypage-invest-settings .change-password {}

#mypage-invest-settings .change-password .mypage-box {
    min-height: 398px;
    max-height: 398px;
}

#mypage-invest-settings .change-password .old-password {
    padding-bottom: 15px;
}

#mypage-invest-settings .change-password .new-password {
    padding-bottom: 15px;
}

#mypage-invest-settings .change-password .confirm-password {
    padding-bottom: 30px;
}

#mypage-invest-settings .change-password .name {
    color: #777777;
    font-size: 12px;
    font-weight: 400;
    padding-bottom: 5px;
}

#mypage-invest-settings .change-password .value {}

#mypage-invest-settings .change-password .value input {
    border: 0;
    width: 100%;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    padding: 0 15px;
    line-height: 40px;
    height: 40px;
}

#mypage-invest-settings .change-password .value input::placeholder {
    font-size: 14px !important;
}

#mypage-invest-settings .sms-email {
    position: relative;
}

#mypage-invest-settings .sms-email .mypage-box {
    min-height: 398px;
    position: relative;
}

#mypage-invest-settings .sms-email .content {}

#mypage-invest-settings .sms-email .content .sms-wrap {
    padding-bottom: 10px;
}

#mypage-invest-settings .sms-email .content .email-wrap {
    padding-bottom: 30px;
}

#mypage-invest-settings .sms-email .content .name {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-invest-settings .sms-email .content .value {
    float: right;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-invest-settings .sms-email .list .value .values {
    float: left;
}

#mypage-invest-settings .sms-email .list .value .values:last-child {
    margin-left: 20px;
}

#mypage-invest-settings .sms-email .list .value input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#mypage-invest-settings .sms-email .list .value label {
    position: relative;
    display: block;
    cursor: pointer;
    padding-left: 21px;
}

#mypage-invest-settings .sms-email .list .value label:before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "\f3a6";
    color: #777777;
    font-family: Ionicons;
    font-size: 16px;
}

#mypage-invest-settings .sms-email .list .value input:checked+label:before {
    content: "\f120";
    color: #222222;
    font-family: Ionicons;
}

#mypage-invest-settings .sms-email .desc {
    position: relative;
    padding-left: 21px;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

#mypage-invest-settings .sms-email .desc i {
    position: absolute;
    left: 0;
    top: 0;
}

#mypage-invest-settings .sms-email .button-wrap {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

#mypage-invest-settings .investor-section {
    margin-top: 60px;
}

#mypage-invest-settings .investor-section .leave {
    text-align: right;
    padding-top: 30px;
    color: #aaaaaa;
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
}

#mypage-invest-settings .investor-section .personal-wrap {}

#mypage-invest-settings .investor-section .personal-wrap .mypage-box {
    min-height: 453px;
}

#mypage-invest-settings .investor-section .personal-wrap .name {
    float: left;
    width: 80px;
    margin-right: 60px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-invest-settings .investor-section .personal-wrap .value {
    float: right;
    width: calc(100% - 140px);
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}

#mypage-invest-settings .investor-section .personal-wrap .value .find-wrap {
    float: right;
    position: relative;
}
#mypage-invest-settings .investor-section .personal-wrap .value .find-wrap:before {
    position: absolute;
    z-index: 9;
    right: 15px;
    font-size: 21px;
    top: calc(50% + 2px);
    color: #fdd23e;
    transform: translateY(-50%);
    content: "\f30f";
    font-family: 'Ionicons';
}

#mypage-invest-settings .investor-section .personal-wrap .value input {
    border: 0;
    width: 100%;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
}

#mypage-invest-settings .investor-section .personal-wrap .value input[name='addr_postcode'] {
    float: left;
    width: calc(100% - 142px);
    pointer-events: none;
}

#mypage-invest-settings .investor-section .personal-wrap .value input[name='addr_postcode']::placeholder {
    font-size: 14px !important;
}

#mypage-invest-settings .investor-section .personal-wrap .value input[name='find_postcode'] {
    position: relative;
    text-align: left;
    margin-top: 4px;
    cursor: pointer;
    float: right;
    box-shadow: unset;
    width: 127px;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    height: 32px;
    line-height: 28px;
    font-size: 12px;
    color: #777777;
}

#mypage-invest-settings .investor-section .personal-wrap .value input[name='find_postcode']::placeholder {
    font-size: 14px !important;
}

#mypage-invest-settings .investor-section .personal-wrap .value input[name='addr_1'] {
    margin-top: 15px;
}

#mypage-invest-settings .investor-section .personal-wrap .value input[name='addr_1']::placeholder {
    font-size: 14px !important;
}

#mypage-invest-settings .investor-section .personal-wrap .value input[name='addr_2'] {
    margin-top: 15px;
}

#mypage-invest-settings .investor-section .personal-wrap .value input[name='addr_2']::placeholder {
    font-size: 14px !important;
}

#mypage-invest-settings .investor-section .personal-wrap .name-wrap {
    padding-bottom: 15px;
}

#mypage-invest-settings .investor-section .personal-wrap .kssn-wrap {
    padding-bottom: 15px;
}

#mypage-invest-settings .investor-section .personal-wrap .phone-wrap {
    padding-bottom: 30px;
}

#mypage-invest-settings .investor-section .personal-wrap .address-wrap {
    padding-bottom: 30px;
}

#mypage-invest-settings .investor-section .business-wrap {}

#mypage-invest-settings .investor-section .business-wrap .title {
    padding-bottom: 20px;
}

#mypage-invest-settings .investor-section .business-wrap .mypage-box {
    min-height: 453px;
}

#mypage-invest-settings .investor-section .business-wrap .name {
    float: left;
    width: 100px;
    margin-right: 40px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-invest-settings .investor-section .business-wrap .value {
    float: right;
    width: calc(100% - 140px);
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}

#mypage-invest-settings .investor-section .business-wrap .value .find-wrap {
    float: right;
    position: relative;
}

#mypage-invest-settings .investor-section .business-wrap .value .find-wrap:hover input {
    background-color: #fdd23e;
    color: #ffffff;
}

#mypage-invest-settings .investor-section .business-wrap .value .find-wrap:hover:before {
    color: #ffffff;
}

#mypage-invest-settings .investor-section .business-wrap .value .find-wrap:before {
    transition: all 0.25s ease;
    position: absolute;
    z-index: 9;
    right: 15px;
    top: calc(50% + 4px);
    color: #fdd23e;
    font-size: 21px;
    transform: translateY(-50%);
    content: "\f30f";
    font-family: 'Ionicons';
}

#mypage-invest-settings .investor-section .business-wrap .value input {
    border: 0;
    width: 100%;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    transition: all 0.25s ease;
}

#mypage-invest-settings .investor-section .business-wrap .value input[name='addr_postcode'] {
    float: left;
    width: calc(100% - 145px);
    pointer-events: none;
}

#mypage-invest-settings .investor-section .business-wrap .value input[name='find_postcode'] {
    position: relative;
    text-align: left;
    margin-top: 4px;
    cursor: pointer;
    float: right;
    box-shadow: unset;
    width: 135px;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    color: #777777;
}

#mypage-invest-settings .investor-section .business-wrap .value input[name='addr_1'] {
    margin-top: 10px;
}

#mypage-invest-settings .investor-section .business-wrap .value input[name='addr_2'] {
    margin-top: 10px;
}

#mypage-invest-settings .investor-section .business-wrap .number-wrap {
    padding-bottom: 10px;
}

#mypage-invest-settings .investor-section .business-wrap .name-wrap {
    padding-bottom: 10px;
}

#mypage-invest-settings .investor-section .business-wrap .person-wrap {
    padding-bottom: 10px;
}

#mypage-invest-settings .investor-section .business-wrap .phone-wrap {
    padding-bottom: 10px;
}

#mypage-invest-settings .investor-section .business-wrap .address-wrap {
    padding-bottom: 20px;
}

#mypage-invest-settings .investor-section .bank-virtual {}

#mypage-invest-settings .investor-section .bank-virtual #change_bank_acc {
    position: absolute;
    right: 30px;
    top: 34px;
    color: #a9860e;
    font-size: 14px;
    font-weight: 400;
}

#mypage-invest-settings .investor-section .bank-virtual #change_bank_acc i {
    padding-left: 5px;
}

#mypage-invest-settings .investor-section .bank-virtual .mypage-box {
    position: relative;
    min-height: 453px;
}

#mypage-invest-settings .investor-section .bank-virtual .button-wrap {
    position: absolute;
    right: 30px;
    top: 30px;
}

#mypage-invest-settings .investor-section .bank-virtual .content {
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-invest-settings .investor-section .bank-virtual .bank-wrap {
    padding-bottom: 10px;
}

#mypage-invest-settings .investor-section .bank-virtual .name-wrap {
    padding-bottom: 10px;
}

#mypage-invest-settings .investor-section .bank-virtual .address-wrap {}

#mypage-invest-settings .investor-section .bank-virtual .virtual-bank-wrap {
    padding-bottom: 10px;
}

#mypage-invest-settings .investor-section .bank-virtual .virtual-name-wrap {
    padding-bottom: 10px;
}

#mypage-invest-settings .investor-section .bank-virtual .virtual-account-wrap {}

#mypage-invest-settings .investor-section .bank-virtual .virtual-bank-account-wrap {
    padding-top: 20px;
}

#mypage-invest-settings .investor-section .bank-virtual .virtual-bank-account-wrap .content {
    padding-bottom: 0;
    border-bottom: 0;
}

#mypage-invest-settings .investor-section .bank-virtual .name {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-invest-settings .investor-section .bank-virtual .value {
    float: right;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}


#mypage-invest-settings .investor-section .bank-virtual .desc {
    position: relative;
    margin-top: 30px;
    padding-left: 21px;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

#mypage-invest-settings .investor-section .bank-virtual .desc i {
    position: absolute;
    left: 0;
    top: 0;
}

#mypage-invest-settings .investor-section .recommend-box {
    margin-top: 30px;
    min-height: 336px;
}

#mypage-invest-settings .investor-section .recommend-box .recommend-row {
    padding-bottom: 15px;
}

#mypage-invest-settings .investor-section .recommend-box .recommend-row:last-child {
    padding-bottom: 0;
}

#mypage-invest-settings .investor-section .recommend-box .recommend-name {
    color: #777777;
    font-size: 12px;
    font-weight: 400;
    padding-bottom: 5px;
}

#mypage-invest-settings .investor-section .recommend-box .recommend-value {
    position: relative;
}

#mypage-invest-settings .investor-section .recommend-box .recommend-value .copy-recommend-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #777777;
    font-size: 14px;
}

#mypage-invest-settings .investor-section .recommend-box .recommend-value input {
    border: 0;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
    padding-right: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mypage-invest-settings .investor-section .recommend-box .recommend-value .left {
    float: left;
    width: calc(100% - 115px);
}

#mypage-invest-settings .investor-section .recommend-box .recommend-value .right {
    float: right;
    width: 100px;
}

#mypage-invest-settings .investor-section .recommend-box .recommend-value .right.button-wrap a i {
    padding-left: 10px;
}

#mypage-invest-settings .investor-section .auto-invest .content {}

@media all and (max-width: 1023px) {
    #mypage-invest-settings .member-info .mypage-box {
        min-height: 398px;
    }

    #mypage-invest-settings .sms-email {
        margin-top: 30px;
    }

    #mypage-invest-settings .sms-email .mypage-box {
        min-height: 230px;
    }

    #mypage-invest-settings .investor-section .bank-virtual .mypage-box {
        min-height: unset;
    }

    #mypage-invest-settings .investor-section .bank-virtual {
        margin-top: 30px;
    }

    #mypage-invest-settings .investor-section .bank-virtual .bank-account-wrap {
        position: relative;
        float: left;
        width: 50%;
        padding-right: 30px;
    }

    #mypage-invest-settings .investor-section .bank-virtual #change_bank_acc {
        top: 0;
    }

    #mypage-invest-settings .investor-section .bank-virtual .content {
        border-bottom: 0;
        padding-bottom: 0;
    }

    #mypage-invest-settings .investor-section .bank-virtual .virtual-bank-account-wrap {
        float: left;
        width: 50%;
        padding-left: 30px;
        border-left: 1px solid #ebebeb;
    }
}

@media all and (max-width: 767px) {
    #mypage-invest-settings .investor-section .business-wrap .phone-wrap .value {
        padding-top: 10px;
    }

    #mypage-invest-settings .investor-section .bank-virtual .bank-account-wrap {
        padding-right: 0;
        width: 100%;
        padding-bottom: 20px;
        border-bottom: 1px solid #ebebeb;
    }

    #mypage-invest-settings .investor-section .bank-virtual .virtual-bank-account-wrap {
        padding-top: 20px;
        width: 100%;
        padding-left: 0;
        border-left: 0;
    }

    #mypage-invest-settings .investor-section .bank-virtual #change_bank_acc {
        right: 0;
        top: 0;
    }

    #mypage-invest-settings .box-title {
        padding-left: 22px;
        font-size: 14px;
        padding-bottom: 15px;
    }

    #mypage-invest-settings .box-title:before {
        top: 2px;
        width: 15px;
        height: 15px;
        border: 2px solid #dddddd;
    }

    #mypage-invest-settings .mypage-box .title {
        padding-bottom: 20px;
    }

    #mypage-invest-settings .member-info .mypage-box {
        min-height: unset;
        margin-bottom: 15px;
    }

    #mypage-invest-settings .change-password {
        margin-bottom: 15px;
    }
    #mypage-invest-settings .change-password .mypage-box {
        min-height: inherit;
        max-height: inherit;
    }
    #mypage-invest-settings .sms-email {
        margin-top: 0;
    }

    #mypage-invest-settings .sms-email .mypage-box {
        min-height: 251px;
    }

    #mypage-invest-settings .sms-email .content .email-wrap {
        padding-bottom: 20px;
    }

    #mypage-invest-settings .sms-email .button-wrap {
        bottom: 20px;
    }

    #mypage-invest-settings .investor-section {
        margin-top: 30px;
    }

    #mypage-invest-settings .investor-section .personal-wrap .mypage-box {
        min-height: unset;
        margin-bottom: 15px;
    }

    #mypage-invest-settings .investor-section .personal-wrap .name {
        margin-right: 50px;
    }

    #mypage-invest-settings .investor-section .personal-wrap .address-wrap .value {
        width: 100%;
        margin-top: 10px;
    }

    #mypage-invest-settings .investor-section .business-wrap .mypage-box {
        min-height: unset;
        margin-bottom: 15px;
    }

    #mypage-invest-settings .investor-section .business-wrap .address-wrap .value {
        width: 100%;
        margin-top: 10px;
    }


    #mypage-invest-settings .investor-section .bank-virtual .mypage-box {
        min-height: unset;
    }

    #mypage-invest-settings .investor-section .recommend-box {
        min-height: 250px;
        margin-top: 15px;
    }

    #mypage-invest-settings .investor-section .recommend-box .recommend-value .left {
        width: 100%;
    }

    #mypage-invest-settings .investor-section .recommend-box .recommend-value .right {
        margin-top: 10px;
    }
    #mypage-invest-settings .investor-section .recommend-box .recommend-value .button-wrap a {
        margin-top: 10px;
    }
}

#mypage-loan-dashboard {}

.mypage-box-title {
    position: relative;
    padding-left: 28px;
    color: #a9860e;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 30px;
}

.mypage-box-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background-color: #a9860e;
    border: 3px solid #dddddd;
    border-radius: 50%;
}

#mypage-loan-dashboard .text-wrap {}

#mypage-loan-dashboard .text-wrap .text-row-01 {
    padding-bottom: 15px;
}

#mypage-loan-dashboard .text-wrap .name {
    float: left;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}

#mypage-loan-dashboard .text-wrap .value {
    float: right;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#mypage-loan-dashboard .text-wrap .value span {
    color: #a9860e;
}

#mypage-loan-dashboard .text-wrap .text-row-02 .name {
    float: none;
    padding-bottom: 15px;
}

#mypage-loan-dashboard .text-wrap .text-row-02 .value {
    float: none;
    text-align: right;
}

#mypage-loan-dashboard .text-wrap .text-row-02 .value span {
    font-size: 22px;
}

#mypage-loan-dashboard .count-wrap {
    min-height: 177px;
    padding-left: 65px;
    padding-right: 65px;
}

#mypage-loan-dashboard .count-wrap .inner-wrap {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: space-between;
    height: 117px;
}

#mypage-loan-dashboard .count-wrap .count-common {
    text-align: center;
}

#mypage-loan-dashboard .count-wrap .count-common .name {
    color: #777777;
    font-size: 16px;
    font-weight: 400;
}

#mypage-loan-dashboard .count-wrap .count-common .value {
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 5px;
}

#mypage-loan-dashboard .count-wrap .count-common .value span {
    padding-right: 5px;
    color: #a9860e;
    font-size: 36px;
}

#mypage-loan-dashboard #loan-history-section {
    margin-top: 60px;
}

#mypage-loan-dashboard #loan-history-section .mypage-box-title {
    float: left;
}

#mypage-loan-dashboard #loan-history-section .content-header .select-status {
    float: right;
    width: 200px;
    background-color: #fff;
    position: relative;

    top: -9px;
}

#mypage-loan-dashboard #loan-history-section .content-header .select-status select {
    z-index: 9;
    border: 0;
    width: 100%;
    height: 45px;
    line-height: 45px;
    padding: 0 10px;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: transparent;

    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
}

#mypage-loan-dashboard #loan-history-section .content-header .select-status .arrow {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #c0c0c0;
}

#mypage-loan-dashboard #loan-history-section .content-body {}

#mypage-loan-dashboard #loan-history-section .content-body .no-account-inner {}

#mypage-loan-dashboard #loan-history-section .content-body .no-account-inner .desc {
   /* height: 160px;
    line-height: 160px;*/
    padding: 60px 0 90px;
    text-align: center;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#mypage-loan-dashboard #loan-history-section .content-body .no-account-inner .desc i {
    padding-right: 10px;
}

#mypage-loan-dashboard #loan-history-section .content-body .content {
    padding-bottom: 0;
    margin-bottom: 30px;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap {}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap {}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .title {
    color: #222222;
    font-size: 22px;
    font-weight: 400;
    padding-bottom: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-bottom: 0;
    margin-bottom: 30px;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap {}


/*마이페이지 대출자 대출내역 - 디자인 위해 css 재 작성함*/
#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap {}
#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: space-between;
}
#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table .box-wrap {}
#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table .box-wrap div {}
#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table .box-wrap div:first-child {
    margin-bottom: 2px;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
}
#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table .box-wrap div:last-child {
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}

@media all and (max-width: 1023px) {
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table {
        display: inherit;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table .box-wrap {
        float: left;
        width: calc(100% / 3);
        margin-bottom: 10px;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table .box-wrap:last-child {
        margin-bottom: 0;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table .box-wrap div:first-child {
        margin-right: 15px;
        display: inline-block;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table .box-wrap div:last-child {
        display: inline-block;
    }

}
@media all and (max-width: 767px) {
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table .box-wrap {
        float: none;
        width: 100%;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table .box-wrap div:first-child {
        float: left;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .product-table .box-wrap div:last-child {
        float: right;
        font-size: 14px;
    }
}

/* // 마이페이지 대출자 대출내역 - 디자인 위해 css 재 작성함*/




/*#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table {
    width: 100%;

    table-layout: fixed;
}

@media all and (max-width: 1023px) {
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table {
        table-layout: inherit;
        글자가 두줄이 되어 처리함
    }

}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table thead {}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table thead tr {}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table thead tr th {
    text-align: left;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table tbody {}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table tbody tr {}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table tbody tr td {
    text-align: left;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}*/

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .toggle-bar {
    border-top: 1px solid #ebebeb;
    cursor: pointer;
    text-align: center;
    margin: 0 -30px;
    margin-top: 30px;
    line-height: 45px;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.25s ease;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .toggle-bar i {
    padding-left: 5px;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .toggle-bar i:before {
    transition: all 0.25s ease;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .toggle-bar.active {
    background-image: linear-gradient(to right, #ffeb72 0%, #fdd23e 100%);
    color: #222222;
    border-bottom: 1px solid #ebebeb;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .toggle-bar.active i:before {
    transform: rotate(180deg);
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap {
    display: none;
    padding: 30px 0;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap .loan-title {
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    padding-bottom: 30px;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap .loan-title img {
    display: none;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap {}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap .inner-wrap {
    border-top: 2px solid #ebebeb;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table {
    width: 100%;
    table-layout: fixed;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table .amount {
    background-color: rgba(253, 210, 62, 0.15);
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table .real-amount {
    background-color: #f5f5f5;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody .result td {
    background-color: rgba(253, 210, 62, 0.2);
    color: #222222;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead {}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr {}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th {
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ebebeb;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody {}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr {}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr td {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #ebebeb;
}

#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr td.real-amount {
    text-align: right;
}

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

    .mypage-box-title {
        padding-left: 22px;
        font-size: 14px;
        padding-bottom: 15px;
    }

    .mypage-box-title:before {
        top: 2px;
        width: 15px;
        height: 15px;
        border: 2px solid #dddddd;
    }
    #mypage-loan-dashboard #loan-history-section .content-header .select-status {
        top: 0;
    }
    #mypage-loan-dashboard .text-content {
        margin-bottom: 15px;
    }

    #mypage-loan-dashboard .count-wrap {
        min-height: 177px;
        padding-left: 20px;
        padding-right: 20px;
    }

    #mypage-loan-dashboard .count-wrap .inner-wrap {
        display: block;
        height: unset;
    }

    #mypage-loan-dashboard .count-wrap .count-common {
        width: 100%;
        padding-bottom: 10px;
    }

    #mypage-loan-dashboard .count-wrap .count-common:last-child {
        padding-bottom: 0;
    }

    #mypage-loan-dashboard .count-wrap .count-common .name {
        float: left;
        padding-top: 0;
        font-size: 14px;
    }

    #mypage-loan-dashboard .count-wrap .count-common .value {
        float: right;
        font-size: 14px;
        padding-bottom: 0;
    }

    #mypage-loan-dashboard .count-wrap .count-common .value span {
        font-size: 14px;
        color: #222222;
    }

    #mypage-loan-dashboard #loan-history-section {
        margin-top: 30px;
        position: relative;
    }

    #mypage-loan-dashboard #loan-history-section .mypage-box-title {
        float: none;
        padding-bottom: 0;
        margin-bottom: 30px;
        line-height: 45px;
    }

    #mypage-loan-dashboard #loan-history-section .mypage-box-title:before {
        top: 14px;
    }

    #mypage-loan-dashboard #loan-history-section .content-header {
        width: 200px;
        position: absolute;
        right: 0;
        top: 0;
    }

    #mypage-loan-dashboard #loan-history-section .content-header .select-status {
        float: none;
        width: 100%;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .no-account-inner .desc {
        padding: 90px 0 120px;
        /*height: 100px;
        line-height: 100px;*/
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table .amount {
        background-color: #fff;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th.amount,
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th.real-date {
        padding-right: 0;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table .real-amount {
        background-color: #fff;
    }
    
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th.num {
        width: 75px;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th.repay {
        width: 92px;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th.real-date {
        width: 92px;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th:first-child,
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr td:first-child {
        padding-left: 0;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th:last-child,
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr td:last-child {
        padding-right: 0;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th,
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr td {
        padding: 15px 5px;
    }



}

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

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table .amount {
        width: 100px;
    }
}
@media all and (max-width: 767px) {
    #mypage-loan-dashboard #loan-history-section .mypage-box-title {
        margin-bottom: 15px;
    }
    #mypage-loan-dashboard #loan-history-section .content-header {
        margin-bottom: 30px;
        position: static;
        width: inherit;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content {
        /*margin-bottom: 0;*/
    }
    
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th:first-child,
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr td:first-child {
        padding-left: 15px;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th.num,
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th.repay, 
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th.real-date {
        width: inherit;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th.amount,
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th.real-date {
        padding-right: 15px;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th:last-child,
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr td:last-child {
        padding-right: 15px;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .title {
        margin-bottom: 25px;
        font-size: 18px;
        line-height: 25px;
        max-height: 50px;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }

    /*#mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table {
        display: block;
    }


    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table:after {
        content: '';
        clear: both;
        display: table;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table * {
        display: block;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table thead {
        float: left;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table thead tr {}

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table thead tr th {
        padding-bottom: 10px;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table thead tr th:last-child {
        padding-bottom: 0;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table tbody {
        float: right;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table tbody tr {}

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table tbody tr td {
        font-size: 14px;
        padding-bottom: 10px;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-product-wrap .product-table-wrap table tbody tr td:last-child {
        padding-bottom: 0;
    }
*/
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .toggle-bar {
        margin: 0 -20px;
        margin-top: 20px;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap {
        padding: 20px 0;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table:after {
        content: '';
        clear: both;
        display: table;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table {
        position: relative;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table * {
        display: block;
        word-break: keep-all;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table .amount {
        min-height: 71px;
        width: auto;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table .real-date {
        min-height: 71px;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table .real-amount {
        min-height: 71px;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead {
        float: left;
        width: 90px;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th {
        background-color: #fff !important;
        border-right: 1px solid #ebebeb;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody {
        overflow-x: auto;
        width: calc(100% - 90px);
        float: left;
        white-space: nowrap;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr {
        display: inline-block;
        width: 80%;
        vertical-align: top;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table thead tr th {
        padding: 15px;
        width: auto;
    }
    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr td {
        padding: 15px 5px 15px 15px;
        background-color: rgba(253, 210, 62, 0.08) !important;
        min-height: 51px;
        border-right: 1px solid #ebebeb;
        text-align: left;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr.result {}

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr.result td {
        background-color: #fff !important;
        color: #a9860e;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr td.real-amount {
        text-align: left;
    }

    #mypage-loan-dashboard #loan-history-section .content-body .content .inner-wrap .loan-table-wrap table tbody tr.result td.total {
        font-weight: 700;
        background-color: rgba(253, 210, 62, 0.25) !important;
    }

     #mypage-loan-dashboard #loan-history-section .content-body .no-account-inner .desc {
        padding: 46px 0 66px;
        font-size: 12px;
        /*height: 100px;
        line-height: 100px;*/
    }
}

#mypage-loan-balance {
    padding-bottom: 60px;
}

#mypage-loan-balance .paging ul {
    margin-top: 60px;
    position: relative;
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    -ms-align-items: center;
    align-items: center;
    justify-content: center;
}

#mypage-loan-balance .paging ul .page-numbers {
    color: #c0c0c0;
    font-size: 26px;
    font-weight: 400;
    line-height: 38px;
    margin: 0 15px;
    transition: all 0.25s ease;
}

#mypage-loan-balance .paging ul .page-numbers:hover {
    color: #222222;
}

#mypage-loan-balance .paging ul .page-numbers.current {
    color: #fdd23e;
    border-bottom: 2px solid #fdd23e;
}

#mypage-loan-balance .paging ul .page-numbers.prev {
    position: absolute;
    top: 0;
    left: 0;
    transition: all 0.25s ease;
}

#mypage-loan-balance .paging ul .page-numbers.prev:hover {
    color: #fdd23e;
}

#mypage-loan-balance .paging ul .page-numbers.next {
    position: absolute;
    top: 0;
    right: 0;
    transition: all 0.25s ease;
}

#mypage-loan-balance .paging ul .page-numbers.next:hover {
    color: #fdd23e;
}

@media all and (max-width: 767px) {
    #mypage-loan-balance .paging ul {
        margin-top: 30px;
    }

    #mypage-loan-balance .paging ul .page-numbers {
        font-size: 16px;
        line-height: 24px;
        margin: 0 10px;
    }
}

#mypage-loan-balance #balance-account-section {}

#mypage-loan-balance #balance-account-section .repay-account {
    margin-bottom: 30px;
}

#mypage-loan-balance #balance-account-section .repay-account .left {
    padding-right: 30px;
    border-right: 1px solid #ebebeb;
}

#mypage-loan-balance #balance-account-section .repay-account .select-wrap {
    position: relative;
    margin-bottom: 30px;
}

#mypage-loan-balance #balance-account-section .repay-account .select-wrap select {
    width: 100%;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    width: 100%;
    border: 0;
    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
    height: 45px;
    line-height: 45px;
    padding-left: 15px;
}

#mypage-loan-balance #balance-account-section .repay-account .select-wrap .arrow {
    color: #c0c0c0;
    font-size: 16px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

#mypage-loan-balance #balance-account-section .repay-account .account-inner {}

#mypage-loan-balance #balance-account-section .repay-account .account-inner .text-row-01 {
    padding-bottom: 15px;
}

#mypage-loan-balance #balance-account-section .repay-account .account-inner .text-row-02 {
    padding-bottom: 15px;
}

#mypage-loan-balance #balance-account-section .repay-account .account-inner .text-row-03 {}

#mypage-loan-balance #balance-account-section .repay-account .account-inner .name {
    float: left;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}

#mypage-loan-balance #balance-account-section .repay-account .account-inner .value {
    float: right;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#mypage-loan-balance #balance-account-section .repay-account .right {
    padding-left: 30px;
}

#mypage-loan-balance #balance-account-section .repay-account .right .inner-wrap {}

#mypage-loan-balance #balance-account-section .repay-account .right .notice {
    margin-top: 30px;
}

#mypage-loan-balance #balance-account-section .repay-account .right .notice .title {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 10px;
}

#mypage-loan-balance #balance-account-section .repay-account .right .notice .title i {
    padding-right: 5px;
}

#mypage-loan-balance #balance-account-section .repay-account .right .notice ul {}

#mypage-loan-balance #balance-account-section .repay-account .right .notice ul li {
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 5px;
}

#mypage-loan-balance #balance-account-section .repay-account .right .notice ul li:last-child {
    padding-bottom: 0;
}

#mypage-loan-balance #balance-account-section .account_wrap {
    min-height: 434px;
}

#mypage-loan-balance #balance-account-section .account_wrap .name {
    float: left;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}

#mypage-loan-balance #balance-account-section .account_wrap .value {
    float: right;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag01 {
    padding-bottom: 15px;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag02 {
    padding-bottom: 15px;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag03 {
    padding-bottom: 15px;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag04 {
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag04 .name {
    float: none;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag04 .name a {
    font-size: 14px;
    color: #c0c0c0;
    padding-left: 10px;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag04 .name i {
    font-size: 14px;
    vertical-align: middle;
    color: #c0c0c0;
    padding-left: 10px;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag04 .value {
    float: none;
    text-align: right;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag04 .value span {
    color: #a9860e;
    font-size: 22px;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag05 {
    padding-top: 20px;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag05 .title {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag05 .title i {
    padding-right: 5px;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag05 ul {}

#mypage-loan-balance #balance-account-section .account_wrap .parag05 ul li {
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 5px;
}

#mypage-loan-balance #balance-account-section .account_wrap .parag05 ul li:last-chidl {
    padding-bottom: 0;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap {}

#mypage-loan-balance #balance-account-section .withdraw_wrap .name {
    float: left;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .value {
    float: right;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .parag01 {
    padding-bottom: 15px;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .parag02 {
    padding-bottom: 15px;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .parag03 {
    padding-bottom: 30px;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .parag03 .name {}

#mypage-loan-balance #balance-account-section .withdraw_wrap .parag03 .name a {
    color: #a9860e;
    font-size: 14px;
    font-weight: 400;
    padding-left: 15px;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .parag03 .name a i {
    padding-left: 5px;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap {}

#mypage-loan-balance #balance-account-section .withdraw_wrap .title {
    padding-bottom: 30px;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap {
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .input-radio {
    box-shadow: 0 1px 4px #d8d8d8;
    background-color: #ffffff;
    width: 170px;
    margin-bottom: 20px;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .input-radio input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .input-radio label {
    z-index: 9;
    position: relative;
    cursor: pointer;
    float: left;
    width: 50%;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    transition: all 0.25s ease;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .input-radio label:before {
    z-index: -1;
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: all 0.25s ease;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .input-radio input:checked+label {
    color: #222222;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .input-radio input:checked+label:before {
    opacity: 1;
    z-index: -1;
    background-image: linear-gradient(138deg, #ffeb72 0%, #fdd23e 100%);
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .input-box {
    float: left;
    width: calc(100% - 225px);
    position: relative;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .total-balance {
    margin-left: 15px;
    float: left;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    border-radius: 21px;
    border: 2px solid #a9860e;
    padding: 7px 15px;

}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .input-box input {
    width: 100%;
    border: 0;
    height: 45px;
    line-height: 45px;
    padding-right: 40px;
    padding-left: 15px;
    color: #222222;
    font-size: 18px;
    font-weight: 400;
    text-align: right;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .input-box span {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #c0c0c0;
    font-size: 18px;
    font-weight: 400;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .withdraw-balance {
    float: right;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    width: 135px;
    padding: 7px 15px;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    transition: all 0.25s ease;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .withdraw-balance:hover {
    color: #ffffff;
    background-color: #fdd23e;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .withdraw-balance i {
    color: #fdd23e;
    padding-left: 20px;
    transition: all 0.25s ease;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .withdraw-balance:hover i {
    color: #ffffff;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .withdraw-desc-wrap {
    padding-top: 20px;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .withdraw-desc-wrap .title {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 10px;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .withdraw-desc-wrap .title i {
    padding-right: 5px;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .withdraw-desc-wrap ul {}

#mypage-loan-balance #balance-account-section .withdraw_wrap .withdraw-desc-wrap ul li {
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    padding-bottom: 5px;
}

#mypage-loan-balance #balance-account-section .withdraw_wrap .withdraw-desc-wrap ul li:last-chidl {
    padding-bottom: 0;
}


#mypage-loan-balance #balance-history-section {
    margin-top: 30px;
}

#mypage-loan-balance #balance-history-section .section-content {
    border-top: 1px solid #ebebeb;
}

#mypage-loan-balance #balance-history-section table {
    width: 100%;
    table-layout: fixed;
}

#mypage-loan-balance #balance-history-section table thead {}

#mypage-loan-balance #balance-history-section table thead tr {}

#mypage-loan-balance #balance-history-section table thead tr th {
    text-align: left;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    background-color: rgba(255, 255, 255, 0.3);
    border-bottom: 1px solid #ebebeb;
}

#mypage-loan-balance #balance-history-section table thead tr th.date {
    width: 170px;
}

#mypage-loan-balance #balance-history-section table thead tr th.con {
    width: 730px;
}

#mypage-loan-balance #balance-history-section table thead tr th.change_money {
    width: 135px;
}

#mypage-loan-balance #balance-history-section table thead tr th.keep_money {
    width: 135px;
}

#mypage-loan-balance #balance-history-section table tbody {}

#mypage-loan-balance #balance-history-section table tbody tr {}

#mypage-loan-balance #balance-history-section table tbody tr td {
    color: #777777;
    font-size: 14px;
    font-weight: 400;
    padding: 15px;
    background-color: #fff;
    border-bottom: 1px solid #ebebeb;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#mypage-loan-balance #balance-history-section table tbody tr.no-content td {}
#mypage-loan-balance #balance-history-section table tbody tr.no-content td i {
    margin-right: 10px;
    position: relative;
    top: 1px;
}
#mypage-loan-balance #balance-history-section table tbody tr.no-content td {
    padding: 60px 0;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
    text-align: center;
}

@media all and (max-width: 767px) {
    #mypage-loan-balance #balance-history-section table tbody tr.no-content td {
        font-size: 12px;
    }
    #mypage-loan-balance #balance-history-section table tbody tr.no-content td i {
        margin-right: 5px;
    }
}

#mypage-loan-balance #balance-history-section table tbody tr td .hidden {
    display: none;
}

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

    #mypage-loan-balance #balance-account-section .account_wrap,
    #mypage-loan-balance #balance-account-section .withdraw_wrap {
        min-height: 535px;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .box-wrap {
        position: relative;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .input-box {
        width: 100%;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .withdraw-balance {
        width: 103px;
        margin-top: 15px;
        font-size: 12px;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .withdraw-balance i {
        padding-left: 15px;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .total-balance {
        position: absolute;
        right: 115px;
        bottom: 0;
        font-size: 12px;
    }
    
    #mypage-loan-balance #balance-account-section .withdraw_wrap .withdraw-desc-wrap ul li {}

    #mypage-loan-balance #balance-account-section .withdraw_wrap .parag03 {
        padding-bottom: 40px;
        position: relative;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .parag03 .name a {
        padding-left: 0;
        position: absolute;
        right: 0;
        bottom: 20px;
        font-size: 12px;
    }

    #mypage-loan-balance #balance-account-section .repay-account .right .notice {
        margin-top: 0;
    }

    #mypage-loan-balance #balance-history-section table thead tr th.date {
        width: 170px;
    }

    #mypage-loan-balance #balance-history-section table thead tr th.con {
        width: 250px;
    }


}

@media all and (max-width: 767px) {
    #mypage-loan-balance {
        padding-bottom: 15px;
    }
    #mypage-loan-balance #balance-account-section .repay-account .select-wrap select {
        font-size: 14px;
        height: 40px;
        line-height: 40px;
    }

    #mypage-loan-balance #balance-account-section .account_wrap,
    #mypage-loan-balance #balance-account-section .withdraw_wrap {
        min-height: unset;
    }

    #mypage-loan-balance #balance-account-section .repay-account .left {
        padding-right: 15px;
        border-right: 0;
        padding-bottom: 20px;
        border-bottom: 1px solid #ebebeb;
    }

    #mypage-loan-balance #balance-account-section .repay-account .right {
        padding-left: 15px;
        padding-top: 20px;
    }

    #mypage-loan-balance #balance-account-section .repay-account .select-wrap {
        margin-bottom: 20px;
    }

    #mypage-loan-balance #balance-account-section .repay-account .right .notice {
        margin-top: 0;
    }

    #mypage-loan-balance #balance-account-section .repay-account .account-inner .name {
        font-size: 14px;
    }

    #mypage-loan-balance #balance-account-section .repay-account .account-inner .value {
        font-size: 14px;
    }

    #mypage-loan-balance #balance-account-section .repay-account .right .notice ul li {
        font-size: 12px;
    }

    #mypage-loan-balance #balance-account-section .account_wrap {
        min-height: unset;
        margin-bottom: 15px;
    }

    #mypage-loan-balance #balance-account-section .account_wrap .name {
        font-size: 14px;
    }

    #mypage-loan-balance #balance-account-section .account_wrap .value {
        font-size: 14px;
    }

    #mypage-loan-balance #balance-account-section .account_wrap .parag01 {
        padding-bottom: 10px;
    }

    #mypage-loan-balance #balance-account-section .account_wrap .parag02 {
        padding-bottom: 10px;
    }

    #mypage-loan-balance #balance-account-section .account_wrap .parag03 {
        padding-bottom: 10px;
    }

    #mypage-loan-balance #balance-account-section .account_wrap .parag05 ul li {
        font-size: 12px;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .name {
        font-size: 14px;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .value {
        font-size: 14px;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .parag01 {
        padding-bottom: 10px;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .parag02 {
        padding-bottom: 10px;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .parag03 {
        padding-bottom: 40px;
        position: relative;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .parag03 .name a {
        padding-left: 0;
        position: absolute;
        right: 0;
        bottom: 20px;
        font-size: 12px;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .box-wrap {
        position: relative;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .input-box {
        width: 100%;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .withdraw-balance {
        width: 103px;
        margin-top: 15px;
        font-size: 12px;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .withdraw-balance i {
        padding-left: 15px;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .input-wrap .total-balance {
        position: absolute;
        right: 115px;
        bottom: 0;
        font-size: 12px;
    }

    #mypage-loan-balance #balance-account-section .withdraw_wrap .withdraw-desc-wrap ul li {
        font-size: 12px;
    }

    #mypage-loan-balance #balance-history-section table thead {
        display: none;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td {
        display: block;
        margin-bottom: 15px;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td.date {
        display: none;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td.change_money {
        display: none;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td.keep_money {
        display: none;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td .hidden {
        display: block;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td .hidden.date {
        color: #c0c0c0;
        padding-bottom: 10px;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td .hidden.change_money {
        padding-bottom: 10px;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td .hidden.change_money:after {
        content: "";
        display: table;
        clear: both;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td .hidden.keep_money {}

    #mypage-loan-balance #balance-history-section table tbody tr td .hidden.keep_money:after {
        content: "";
        display: table;
        clear: both;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td .hidden .name {
        float: left;
        display: inline-block;
        color: #777777;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td .hidden .value {
        float: right;
        color: #222222;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td .con_wrap {
        padding-bottom: 0;
        margin-bottom: 20px;
        max-height: 40px;
        line-height: 20px;
        word-wrap: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #mypage-loan-balance #balance-history-section table tbody tr td .con_wrap a {
        display: inline-block;
        color: #333333;
        line-height: 20px;
    }

}

/**
 * mypage-invest-settings
 */
#mypage-loan-settings {
    padding-bottom: 60px;
}

#mypage-loan-settings .leave {
    text-align: right;
    padding-top: 30px;
    color: #aaaaaa;
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;
}

#mypage-loan-settings .mypage-box .title {
    padding-bottom: 30px;
}

#mypage-loan-settings .box-title {
    position: relative;
    padding-left: 28px;
    color: #a9860e;
    font-size: 18px;
    font-weight: 700;
    padding-bottom: 30px;
}

#mypage-loan-settings .box-title:before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 18px;
    height: 18px;
    background-color: #a9860e;
    border: 3px solid #dddddd;
    border-radius: 50%;
}

#mypage-loan-settings .button-wrap {
    text-align: right;
    margin-top: 30px;
}

#mypage-loan-settings .button-wrap a {
    display: inline-block;
    color: #777777;
    font-size: 12px;
    font-weight: 400;
    padding: 7px 15px;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    transition: all 0.25s ease;
}

#mypage-loan-settings .button-wrap a i {
    padding-left: 15px;
    color: #fdd23e;
    transition: all 0.25s ease;
}

#mypage-loan-settings .button-wrap a:hover {
    color: #ffffff;
    background-color: #fdd23e;
}

#mypage-loan-settings .button-wrap a:hover i {
    color: #ffffff;
}

#mypage-loan-settings .member-info {}

#mypage-loan-settings .member-info .mypage-box {
    min-height: 402px;
}

#mypage-loan-settings .member-info .id-wrap {
    padding-bottom: 10px;
}

#mypage-loan-settings .member-info .name {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-loan-settings .member-info .value {
    float: right;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}

#mypage-loan-settings .change-password {}

#mypage-loan-settings .change-password .old-password {
    padding-bottom: 15px;
}

#mypage-loan-settings .change-password .new-password {
    padding-bottom: 15px;
}

#mypage-loan-settings .change-password .confirm-password {}

#mypage-loan-settings .change-password .name {
    color: #777777;
    font-size: 12px;
    font-weight: 400;
    padding-bottom: 5px;
}

#mypage-loan-settings .change-password .value {}

#mypage-loan-settings .change-password .value input {
    border: 0;
    width: 100%;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    padding: 0 15px;
    line-height: 40px;
    height: 40px;
}

#mypage-loan-settings .change-password .value input::placeholder {
    font-size: 14px !important;
}

#mypage-loan-settings .sms-email {
    position: relative;
}

#mypage-loan-settings .sms-email .mypage-box {
    min-height: 402px;
    position: relative;
}

#mypage-loan-settings .sms-email .content {}

#mypage-loan-settings .sms-email .content .sms-wrap {
    padding-bottom: 10px;
}

#mypage-loan-settings .sms-email .content .email-wrap {
    padding-bottom: 30px;
}

#mypage-loan-settings .sms-email .content .name {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-loan-settings .sms-email .content .value {
    float: right;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-loan-settings .sms-email .list .value .values {
    float: left;
}

#mypage-loan-settings .sms-email .list .value .values:last-child {
    margin-left: 20px;
}

#mypage-loan-settings .sms-email .list .value input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#mypage-loan-settings .sms-email .list .value label {
    position: relative;
    display: block;
    cursor: pointer;
    padding-left: 21px;
}

#mypage-loan-settings .sms-email .list .value label:before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "\f3a6";
    color: #777777;
    font-family: Ionicons;
    font-size: 16px;
}

#mypage-loan-settings .sms-email .list .value input:checked+label:before {
    content: "\f120";
    color: #222222;
    font-family: Ionicons;
}

#mypage-loan-settings .sms-email .desc {
    position: relative;
    padding-left: 21px;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

#mypage-loan-settings .sms-email .desc i {
    position: absolute;
    left: 0;
    top: 0;
}

#mypage-loan-settings .sms-email .button-wrap {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

#mypage-loan-settings .loaner-section {
    margin-top: 60px;
}

#mypage-loan-settings .loaner-section .personal-wrap {}

#mypage-loan-settings .loaner-section .personal-wrap .mypage-box {
    min-height: 453px;
}

#mypage-loan-settings .loaner-section .personal-wrap .name {
    float: left;
    width: 80px;
    margin-right: 60px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-loan-settings .loaner-section .personal-wrap.business .name {
    width: 110px;
    margin-right: 30px;
}

#mypage-loan-settings .loaner-section .personal-wrap .value {
    float: right;
    width: calc(100% - 140px);
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}

#mypage-loan-settings .loaner-section .personal-wrap .value .find-wrap {
    float: right;
    position: relative;
}

#mypage-loan-settings .loaner-section .personal-wrap .value .find-wrap:before {
    position: absolute;
    z-index: 9;
    right: 15px;
    top: calc(50% + 4px);
    color: #fdd23e;
    transform: translateY(-50%);
    content: "\f30f";
    font-family: 'Ionicons';
}

#mypage-loan-settings .loaner-section .personal-wrap .value input {
    border: 0;
    width: 100%;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
}

#mypage-loan-settings .loaner-section .personal-wrap .value input[name='addr_postcode'] {
    float: left;
    width: calc(100% - 145px);
    pointer-events: none;
}

#mypage-loan-settings .loaner-section .personal-wrap .value .postcode-wrap {
    float: right;
    position: relative;
    margin-top: 4px;
    width: 135px;
    cursor: pointer;
}

#mypage-loan-settings .loaner-section .personal-wrap .value .postcode-wrap .arrow {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #fdd23e;
    font-size: 21px;
    transition: all 0.25s ease;
}

#mypage-loan-settings .loaner-section .personal-wrap .value input[name='find_postcode'] {
    cursor: pointer;
    text-align: left;
    box-shadow: unset;
    width: 100%;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    height: 32px;
    line-height: 28px;
    font-size: 12px;
    color: #777777;
    transition: all 0.25s ease;
}

#mypage-loan-settings .loaner-section .personal-wrap .value .postcode-wrap:hover input {
    background-color: #fdd23e;
    color: #ffffff;
}

#mypage-loan-settings .loaner-section .personal-wrap .value .postcode-wrap:hover .arrow {
    color: #ffffff;
}


#mypage-loan-settings .loaner-section .personal-wrap .value input[name='addr_1'] {
    margin-top: 15px;
}

#mypage-loan-settings .loaner-section .personal-wrap .value input[name='addr_2'] {
    margin-top: 15px;
}

#mypage-loan-settings .loaner-section .personal-wrap .name-wrap {
    padding-bottom: 15px;
}

#mypage-loan-settings .loaner-section .personal-wrap .kssn-wrap {
    padding-bottom: 15px;
}

#mypage-loan-settings .loaner-section .personal-wrap .phone-wrap {
    padding-bottom: 30px;
}

#mypage-loan-settings .loaner-section .personal-wrap .address-wrap {}

#mypage-loan-settings .loaner-section .business-wrap {}

#mypage-loan-settings .loaner-section .business-wrap .title {
    padding-bottom: 20px;
}

#mypage-loan-settings .loaner-section .business-wrap .mypage-box {
    min-height: 453px;
}

#mypage-loan-settings .loaner-section .business-wrap .name {
    float: left;
    width: 100px;
    margin-right: 40px;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-loan-settings .loaner-section .business-wrap .value {
    float: right;
    width: calc(100% - 140px);
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}

#mypage-loan-settings .loaner-section .business-wrap .value .find-wrap {
    float: right;
    position: relative;
}

#mypage-loan-settings .loaner-section .business-wrap .value .find-wrap:before {
    position: absolute;
    z-index: 9;
    right: 15px;
    top: calc(50% + 4px);
    color: #fdd23e;
    transform: translateY(-50%);
    content: "\f30f";
    font-family: 'Ionicons';
}

#mypage-loan-settings .loaner-section .business-wrap .value input {
    border: 0;
    width: 100%;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
}

#mypage-loan-settings .loaner-section .business-wrap .value input[name='addr_postcode'] {
    float: left;
    width: calc(100% - 145px);
    pointer-events: none;
}

#mypage-loan-settings .loaner-section .business-wrap .value input[name='find_postcode'] {
    position: relative;
    text-align: left;
    margin-top: 4px;
    cursor: pointer;
    float: right;
    box-shadow: unset;
    width: 135px;
    border-radius: 21px;
    border: 2px solid #fdd23e;
    height: 32px;
    line-height: 32px;
    font-size: 12px;
    color: #777777;
}

#mypage-loan-settings .loaner-section .business-wrap .value input[name='addr_1'] {
    margin-top: 10px;
}

#mypage-loan-settings .loaner-section .business-wrap .value input[name='addr_2'] {
    margin-top: 10px;
}

#mypage-loan-settings .loaner-section .business-wrap .number-wrap {
    padding-bottom: 10px;
}

#mypage-loan-settings .loaner-section .business-wrap .name-wrap {
    padding-bottom: 10px;
}

#mypage-loan-settings .loaner-section .business-wrap .person-wrap {
    padding-bottom: 10px;
}

#mypage-loan-settings .loaner-section .business-wrap .phone-wrap {
    padding-bottom: 10px;
}

#mypage-loan-settings .loaner-section .business-wrap .address-wrap {
    padding-bottom: 20px;
}

#mypage-loan-settings .loaner-section .bank-virtual {}

#mypage-loan-settings .loaner-section .bank-virtual #change_bank_acc {
    position: absolute;
    right: 30px;
    top: 34px;
    color: #a9860e;
    font-size: 14px;
    font-weight: 400;
}

#mypage-loan-settings .loaner-section .bank-virtual #change_bank_acc i {
    padding-left: 5px;
}

#mypage-loan-settings .loaner-section .bank-virtual .mypage-box {
    position: relative;
    min-height: 453px;
}

#mypage-loan-settings .loaner-section .bank-virtual.business .mypage-box {
    min-height: 488px;
}

#mypage-loan-settings .loaner-section .bank-virtual .mypage-box .bank-account-wrap {}

#mypage-loan-settings .loaner-section .bank-virtual .button-wrap {
    position: absolute;
    right: 30px;
    top: 30px;
}

#mypage-loan-settings .loaner-section .bank-virtual .content {
    padding-bottom: 20px;
    border-bottom: 1px solid #ebebeb;
}

#mypage-loan-settings .loaner-section .bank-virtual .bank-wrap {
    padding-bottom: 10px;
}

#mypage-loan-settings .loaner-section .bank-virtual .name-wrap {
    padding-bottom: 10px;
}

#mypage-loan-settings .loaner-section .bank-virtual .address-wrap {}

#mypage-loan-settings .loaner-section .bank-virtual .virtual-bank-wrap {
    padding-bottom: 10px;
}

#mypage-loan-settings .loaner-section .bank-virtual .virtual-name-wrap {
    padding-bottom: 10px;
}

#mypage-loan-settings .loaner-section .bank-virtual .virtual-account-wrap {}

#mypage-loan-settings .loaner-section .bank-virtual .virtual-bank-account-wrap {
    padding-top: 20px;
}

#mypage-loan-settings .loaner-section .bank-virtual .virtual-bank-account-wrap .content {
    padding-bottom: 0;
    border-bottom: 0;
}

#mypage-loan-settings .loaner-section .bank-virtual .virtual-bank-account-wrap .content .no-account {
    padding-top: 50px;
    text-align: center;
    color: #777777;
    font-size: 18px;
    font-weight: 400;
}

#mypage-loan-settings .loaner-section .bank-virtual .name {
    float: left;
    color: #777777;
    font-size: 14px;
    font-weight: 400;
}

#mypage-loan-settings .loaner-section .bank-virtual .value {
    float: right;
    color: #222222;
    font-size: 14px;
    font-weight: 400;
}


#mypage-loan-settings .loaner-section .bank-virtual .desc {
    position: relative;
    margin-top: 30px;
    padding-left: 21px;
    color: #c0c0c0;
    font-size: 14px;
    font-weight: 400;
    line-height: 21px;
}

#mypage-loan-settings .loaner-section .bank-virtual .desc i {
    position: absolute;
    left: 0;
    top: 0;
}

#mypage-loan-settings .loaner-section .recommend-box {
    margin-top: 30px;
    min-height: 336px;
}

#mypage-loan-settings .loaner-section .recommend-box .recommend-row {
    padding-bottom: 15px;
}

#mypage-loan-settings .loaner-section .recommend-box .recommend-row:last-child {
    padding-bottom: 0;
}

#mypage-loan-settings .loaner-section .recommend-box .recommend-name {
    color: #777777;
    font-size: 12px;
    font-weight: 400;
    padding-bottom: 5px;
}

#mypage-loan-settings .loaner-section .recommend-box .recommend-value {
    position: relative;
}

#mypage-loan-settings .loaner-section .recommend-box .recommend-value .copy-recommend-btn {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #777777;
    font-size: 14px;
}

#mypage-loan-settings .loaner-section .recommend-box .recommend-value input {
    border: 0;
    box-shadow: 0 1px 5px #d9d9d9;
    background-color: #ffffff;
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding: 0 15px;
}

#mypage-loan-settings .loaner-section .recommend-box .recommend-value .left {
    float: left;
    width: calc(100% - 115px);
}

#mypage-loan-settings .loaner-section .recommend-box .recommend-value .right {
    float: right;
    width: 100px;
}

#mypage-loan-settings .loaner-section .recommend-box .recommend-value .right.button-wrap a i {
    padding-left: 10px;
}

#mypage-loan-settings .loaner-section .auto-invest .content {}

@media all and (max-width: 1023px) {
    #mypage-loan-settings .member-info .mypage-box {
        min-height: 402px;
    }

    #mypage-loan-settings .sms-email {
        margin-top: 30px;
    }

    #mypage-loan-settings .sms-email .mypage-box {
        min-height: 230px;
    }

    #mypage-loan-settings .loaner-section .bank-virtual {
        margin-top: 30px;
    }

    #mypage-loan-settings .loaner-section .bank-virtual .mypage-box {
        min-height: unset;
    }

    #mypage-loan-settings .loaner-section .bank-virtual.business .mypage-box {
        min-height: unset;
    }

    #mypage-loan-settings .loaner-section .bank-virtual .mypage-box .bank-account-wrap {
        float: left;
        width: 50%;
        padding-right: 30px;
        position: relative;
    }

    #mypage-loan-settings .loaner-section .bank-virtual #change_bank_acc {
        top: 0;
    }

    #mypage-loan-settings .loaner-section .bank-virtual .virtual-bank-account-wrap .content .no-account {
        padding-top: 50px;
        padding-bottom: 50px;
        font-size: 14px;
        max-width: 152px;
        margin: 0 auto;
    }

    #mypage-loan-settings .loaner-section .bank-virtual .content {
        padding-bottom: 0;
        border-bottom: 0;
    }

    #mypage-loan-settings .loaner-section .bank-virtual .virtual-bank-account-wrap {
        border-left: 1px solid #ebebeb;
        padding-top: 0;
        padding-left: 30px;
        float: left;
        width: 50%;
    }
}

@media all and (max-width: 767px) {
    #mypage-loan-settings .sms-email {
        margin-top: 0;
    }

    #mypage-loan-settings .loaner-section .bank-virtual {
        margin-top: 0;
    }

    #mypage-loan-settings .loaner-section .bank-virtual .mypage-box {}

    #mypage-loan-settings .loaner-section .bank-virtual .mypage-box .bank-account-wrap {
        width: 100%;
        padding-right: 0;
        padding-bottom: 20px;
        border-bottom: 1px solid #ebebeb;
    }

    #mypage-loan-settings .loaner-section .bank-virtual #change_bank_acc {
        right: 0;
    }

    #mypage-loan-settings .loaner-section .bank-virtual .virtual-bank-account-wrap {
        width: 100%;
        padding-left: 0;
        border-left: 0;
        padding-top: 20px;
    }

    #mypage-loan-settings .loaner-section .bank-virtual .virtual-bank-account-wrap .content .no-account {
        padding-top: 30px;
    }

    #mypage-loan-settings .box-title {
        padding-left: 22px;
        font-size: 14px;
        padding-bottom: 15px;
    }

    #mypage-loan-settings .box-title:before {
        top: 2px;
        width: 15px;
        height: 15px;
        border: 2px solid #dddddd;
    }

    #mypage-loan-settings .mypage-box .title {
        padding-bottom: 20px;
    }

    #mypage-loan-settings .member-info .mypage-box {
        min-height: unset;
        margin-bottom: 15px;
    }

    #mypage-loan-settings .change-password {
        margin-bottom: 15px;
    }

    #mypage-loan-settings .sms-email .mypage-box {
        min-height: 251px;
    }

    #mypage-loan-settings .sms-email .content .email-wrap {
        padding-bottom: 20px;
    }

    #mypage-loan-settings .sms-email .button-wrap {
        bottom: 20px;
    }

    #mypage-loan-settings .loaner-section {
        margin-top: 30px;
    }

    #mypage-loan-settings .loaner-section .personal-wrap .mypage-box {
        min-height: unset;
        margin-bottom: 15px;
    }

    #mypage-loan-settings .loaner-section .personal-wrap .name {
        margin-right: 50px;
    }

    #mypage-loan-settings .loaner-section .personal-wrap .address-wrap .value {
        width: 100%;
        margin-top: 10px;
    }

    #mypage-loan-settings .loaner-section .business-wrap .mypage-box {
        min-height: unset;
        margin-bottom: 15px;
    }

    #mypage-loan-settings .loaner-section .business-wrap .address-wrap .value {
        width: 100%;
        margin-top: 10px;
    }

    #mypage-loan-settings .loaner-section .bank-virtual .mypage-box {
        min-height: unset;
    }

    #mypage-loan-settings .loaner-section .recommend-box {
        min-height: 250px;
        margin-top: 15px;
    }

    #mypage-loan-settings .loaner-section .recommend-box .recommend-value .left {
        width: 100%;
    }

    #mypage-loan-settings .loaner-section .recommend-box .recommend-value .right {
        margin-top: 10px;
    }
}