h1 {
    font-size: 25px;
    margin-bottom: 15px;
}

.mainBox > div {
    width: 391px;
    max-width: 100%;
    height: 384px;
    margin: 30px auto 0;
    padding: 60px 50px 0;
    border: solid 1px #d2d2d2;
}
.mainBox > div h1 {
    font-size: 26px;
    font-weight: normal;
    line-height: 1.38;
    letter-spacing: -0.24px;
    text-align: center;
    color: #000000;
    margin-bottom: 30px;
}
.mainBox > div h1 img {
    width: 40px;
    height: 40px;
    vertical-align: middle;
}
.mainBox > div input[type=text],
.mainBox > div input[type=password] {
    width: 100%;
    border: solid 1px #bbbec2;
    padding: 12px 14px;
    font-size: 16px;
    line-height: 26px;
    letter-spacing: -0.2px;
    color: #323538;
    background-color: #ffffff;
    margin-bottom: 10px;
}
.mainBox > div input[type=text]:focus,
.mainBox > div input[type=password]:focus {
    outline: none;
    border-color: #0665db;
}
.mainBox > div input[type=text].error,
.mainBox > div input[type=password].error {
    background-color: #fff7f7;
    border-color: #ff0000;
}



.mainBox > div button {
    width: 100%;
    height: 54px;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.75;
    letter-spacing: -0.15px;
    text-align: center;
    color: #ffffff;
    background-color: #24528b;
}
.mainBox .menus li {
    list-style: none;
    border: 1px rgba(222, 222, 222) solid;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: -0.15px;
    text-align: center;
    color: #000000;
    padding: 18px 0;
    margin-bottom: 12px;
    cursor: pointer;
    background: url('../img/btn-h-54-btn-choice@2x.png') left 14px center/26px 26px no-repeat;
}
.mainBox .menus li.on {
    background-image: url('../img/btn-h-54-btn-choice-active@2x.png');
    color: #ffffff;
    background-color: #24528b;
    border-color: #24528b;
}
@media only screen and (max-width: 768px) {
    .mainBox {
        width: 100%;
    }
    .mainBox > div {
        padding: 60px 20px 0;
    }
}

.selectBox {
    width: 100%;
    background: none;
}
.selectBox .selected {
    padding: 10px 49px 10px 15px;
    background: url('../img/ico-h-24-arrow-select-box@2x.png') right 15px center/24px 24px no-repeat;
}
.selectBox.on .selected { background-image: url('../img/ico-h-24-arrow-select-box-up@2x.png'); }
.selectBox ul { max-height: 220px; overflow-y: auto; }
.selectBox li {
    height: 48px; list-style: none; padding: 10px 15px;
    font-size: 16px; line-height: 1.75; letter-spacing: -0.2px;
}
.selectBox li:hover,
.selectBox li.on { color: #005df1; background-color: #eff6ff; }

@media only screen and (max-width: 768px) {
    .selectBox ul {
        position: fixed;
        left: 50%; margin-left: -149px;
        top: 50%; transform: translateY(-50%);
        width: 298px; max-height: 384px;
        overflow-y: auto;
        border: 0;
        z-index: 15;
    }
}

.search {
    border: solid 1px #d2d2d2;
    text-align: center;
    margin-bottom: 20px;
}
.search > div {
    padding: 13px;
}
.search label {
    display: block;
    font-size: 14px;
    line-height: 1.86;
    letter-spacing: -0.13px;
    color: #000000;
    padding: 7px 0;
    background-color: #f4f7fa;
}
.search .periodSearch {
    display: inline-block;
}
.search .periodSearch .datepicker {
    width: 135px;
    border: solid 1px #dedede;
    font-size: 14px;
    line-height: 1.86;
    letter-spacing: -0.13px;
    color: #000000;
    padding: 11px 48px 11px 10px;
    background: url('../img/ico-h-24-ico-calendar@2x.png') right 12px center/24px 24px no-repeat;
}
.search .periodSearch .tilde {
    padding: 0 5px;
}
.search .btn_search {
    width: 90px;
    height: 50px;
    background-color: #3c4856;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.86;
    letter-spacing: -0.13px;
    text-align: center;
    color: #ffffff;
    margin-left: 5px;
}

@media only screen and (max-width: 768px){
    .search .periodSearch { display: block; }
    .search .periodSearch .datepicker { width: calc(50% - 15px); }
    .search .btn_search { width: 100%; margin-top: 15px; margin-left: 0; }
}

.table3 { border-top: 1px solid #c0cbd8; }
.table3 tr {
    border-top: 0;
    border-bottom: 1px solid #d2d2d2;
}
.table3 th {
    background-color: #ebf0f6;
    font-size: 14px;
    line-height: 1.86;
    letter-spacing: -0.13px;
    color: #3e5063;
    padding: 9px 0;
    border-right-color: #c0cbd8;
    border-left-color: #c0cbd8;
}
.table3 th[colspan],
.table3 th[rowspan] {
    background-color: #dfe6ee;
}
.table3 td {
    font-size: 14px;
    line-height: 1.86;
    letter-spacing: -0.13px;
    color: #000000;
    padding: 8px 15px;
}

.table2 { border-top: 1px solid #c0cbd8; }
.table2 tr {
    border-top: 0;
    border-bottom: 1px solid #d2d2d2;
}
.table2 th {
    background-color: #dfe6ee;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.86;
    letter-spacing: -0.13px;
    color: #3e5063;
    padding: 9px 0;
}
.table2 td {
    font-size: 14px;
    line-height: 1.86;
    letter-spacing: -0.13px;
    color: #000000;
    border-left: 0;
    border-right: 0;
    padding: 8px 15px;
}

.table.blue th {
    background-color: #f5f8fd;
    border-bottom: 0;
    padding: 16px 0;
}
.table.blue th.header {
    background-color: #e6eefb;
}
.table td img { max-width: 100%; margin: 0 auto; }
.table td button {
    width: 100%;
    height: 34px;
    font-size: 14px;
    line-height: 1.86;
    letter-spacing: -0.13px;
    color: #ffffff;
}
.table td button.color1 {
    background-color: #24528b;
}
.table td button.color2 {
    background-color: #21426a;
}
.table td button.color3 {
    background-color: #1459ad;
}

.tableScroll {
    overflow-x: auto;
}
.tableScroll table {
    min-width: 950px;
}
@media only screen and (max-width: 700px){
    .tableScroll_768px {
        overflow-x: auto;
    }
    .tableScroll_768px table {
        min-width: 638px;
    }
}

.total { font-size: 14px; letter-spacing: -0.19px; margin-top: 14px; margin-bottom: 27px; line-height: 19px; }
.total .bar { padding: 0 10px; color: #bbbec2; }
.total .current { color: #ff0000; }

/* 팝업 */
.popup {
    display: none;
    width: 680px;
    max-width: calc(100% - 20px);
    max-height: calc(100vh - 20px);
    overflow-y: auto;
    border: solid 1px #000000;
    background-color: #ffffff;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    z-index: 20;
}
.popup .btn_close {
    font-size: 0;
    background: url('../img/ico-h-30-popup-colose@2x.png') center/cover no-repeat;
    width: 30px; height: 30px;
    position: absolute; top: 17px; right: 17px;
}

.popup_containter {
    overflow: hidden;
    padding: 20px;
}
.popup_containter .header {
    border-bottom: 3px #000000 solid;
    padding: 10px 0;
    margin-top: 20px;
    margin-bottom: 12px;
}
.popup_containter .header h3 {
    display: inline;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.33;
    letter-spacing: -0.22px;
    color: #000000;
    vertical-align: middle;
}
.popup_containter .header label {
    margin-right: 6px;
}
.popup_containter label {
    font-size: 14px;
    line-height: 17px;
    letter-spacing: -0.13px;
    color: #1459ad;
    padding: 4px 11px;
    border: solid 1px #90a4bd;
}
.icon_level {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}
.popup_containter .images {
    margin-top: 23px;
    position: relative;
}
.images label {
    position: absolute;
}
.popup_containter .images .slide {
    width: 430px;
    height: 288px;
    margin: 15px auto 0;
}
.images .slide .swiper-container,
.images .slide .swiper-wrapper,
.images .slide .swiper-slide {
    height: 100%;
}
.images .slide .swiper-slide {
    background-color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.images .slide img {
    display: block;
    margin: 0 auto;
    /* min-width: 100%; */
    height: 100%;
}
/* 슬라이드 이전/다음 버튼 */
.images .slide .swiper-container .btns {
    position: absolute; top: 119px; left: 0; z-index: 10;
    width: 100%; height: 56px;
}
.images .slide .swiper-container .btns .swiper-button-next {
    background: url('../img/btn-h-50-arrow-right-book-mobile@2x.png') center/cover no-repeat;
    background-color: #323538;
    border-radius: 25px;
    width: 50px; height: 50px;
    position: absolute;
    right: 10px;
    opacity: 0.6;
}
.images .slide .swiper-container .btns .swiper-button-prev {
    background: url('../img/btn-h-50-arrow-left-book-mobile@2x.png') center/cover no-repeat;
    background-color: #323538;
    border-radius: 25px;
    width: 50px; height: 50px;
    position: absolute;
    left: 10px;
    opacity: 0.6;
}
.images .slide .swiper-container .btns .swiper-button-next:hover,
.images .slide .swiper-container .btns .swiper-button-prev:hover {
    opacity: 1;
}
@media only screen and (max-width: 700px){
    .images label {
        position: static;
    }
    .images .slide {
        width: 100%;
        height: 211px;
        margin-top: 15px;
    }
    .images .slide .swiper-container .btns {
        top: 80px;
    }
}



/* 캘린더 */
.ui-datepicker {
    display: none;
    width: 312px;
    height: 316px;
    padding: 16px;
    border: solid 1px #000000;
    background-color: #ffffff;
}
.ui-datepicker-header {
    position: relative;
    margin-bottom: 20px;
}
.ui-icon-circle-triangle-w {
    font-size: 0; cursor: pointer;
    display: block; width: 24px; height: 24px;
    position: absolute; top: 5px; left: 0;
    background: url('../img/icon-arrow-left-1@2x.png') center/cover no-repeat;
}
.ui-icon-circle-triangle-e {
    font-size: 0; cursor: pointer;
    display: block; width: 24px; height: 24px;
    position: absolute; top: 5px; right: 0;
    background: url('../img/icon-arrow-right-1@2x.png') center/cover no-repeat;
}
.ui-datepicker-title {
    display: flex;
    justify-content: center;
}
.ui-datepicker-year {
    order: 0;
    margin-right: 8px;
}
.ui-datepicker-month {
    order: 1;
}
.ui-datepicker-year,
.ui-datepicker-month {
    width: 100px;
    height: 36px;
    padding: 0px 6px 2px;
    font-size: 14px;
    line-height: 1.29;
    color: #333333;
}
.ui-datepicker-calendar {
    width: 100%;
    border-collapse: collapse;
}
.ui-datepicker-calendar th {
    padding-bottom: 8px;
}
.ui-datepicker-calendar span[title] {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.33;
    display: inline;
    color: #333333;
}

.ui-datepicker-calendar td {
    height: 40px;
    text-align: center;
    border: 1px solid #e5e5e5;
    cursor: pointer;
}
.ui-datepicker-calendar td,
.ui-datepicker-calendar td a {
    font-size: 14px;
    line-height: 1;
    color: #212b36;
    text-decoration: none;
}
.ui-datepicker-calendar td:hover,
.ui-datepicker-calendar td.ui-datepicker-current-day {
    background-color: #0665db;
}
.ui-datepicker-calendar td:hover a,
.ui-datepicker-calendar td.ui-datepicker-current-day a {
    color: #ffffff;
}
.ui-datepicker-calendar td.ui-datepicker-unselectable,
.ui-datepicker-calendar td.ui-datepicker-unselectable:hover {
    cursor: default;
    background-color: transparent;
}

@media only screen and (max-width: 768px) {

    .ui-datepicker {
        width: calc(100% - 20px);
        position: fixed !important;
        left: 10px !important;
    }
    /* dimmed 처리 */
    body.dimmed_mo {
        touch-action:none;
    }
    body.dimmed_mo::after {
        content: '';
        width: 100%;
        height: 100vh;
        background-color: rgba(0,0,0,0.7);
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10;
    }
}