@import url(reset.css);
/* @import url(font.css); */
@import url(/m/resources/css/ui.font.min.css);
@import url(normalize.css);
@import url(swiper-bundle.min.css);

*,
*:before,
*:after {
    box-sizing: border-box;
}

body,
html {
    color: #111;
    font-weight: 400;
    /* font-family: 'notokr'; */
    font-family: "Inter", "SpoqaHanSansNeo", "notokr";
}

.bgcolor01 {
    background: #f3f4f6;
    padding-top: 0 !important;
}

#header {
    /* position: fixed;
    top:0;
    left:0; */
    padding: 0 20px;
    width: 100%;
}

#header .header-inner {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 60px;
}
#header.bk-style {
    background: #fff;
}
#header .btn-back {
    /* position: absolute;
    top: 12px;
    left: 27px; */
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    z-index: 1;
}

#header .btn-back button {
    display: block;
    width: 16px;
    height: 16px;
    text-indent: -9999px;
    /* border: none;
    color: transparent;
    font-size: xx-small; */
}

#header .header-tit {
    color: #fff;
    font-size: 16px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#header .header-btn {
    z-index: 999;
}

#header .header-btn button {
    display: inline-block;
    color: transparent;
    font-size: xx-small;
    width: 24px;
    height: 24px;
    border: none;
    vertical-align: middle;
}

#header .header-btn .home {
    background: url(../images/ico-home.png) 0 0 no-repeat;
    background-size: cover;
    margin-right: 12px;
}

#header .header-btn .menu {
    background: url(../images/ico-menu.png) 0 0 no-repeat;
    background-size: cover;
}

#header.bk-style .btn-back button {
    background: url(../images/ico-back.png) 0 0 no-repeat;
    background-size: cover;
    width: 13px;
    height: 13px;
    border: none;
    color: transparent;
    font-size: xx-small;
}



#header.bk-style .header-btn .home {
    background: url(../images/ico-home-bk.png) 0 0 no-repeat;
    background-size: cover;
}

#header.bk-style .header-btn .menu {
    background: url(../images/ico-menu-bk.png) 0 0 no-repeat;
    background-size: cover;
}

#header.bk-style .header-tit {
    text-align: center;
    font-weight: 500;
    color: #111;
    width: 100%;
}

#conWrap {
    height: 100vh;
    /* padding-top: 60px; */    
}

#conWrap2 {
    display: flex;
    align-items: stretch;    
    flex-direction: column;
    height: calc(100vh - 254px);
}    

/*serviceMain kong*/
.con-box1 {
	padding: 32px 24px 0;
    height: auto;
    flex: 1 0 auto;
    background: #fff;
}
.con-box1.pt-m {
    padding-bottom: 40px;
}
.con-box3 {
	padding: 36px 24px;
    flex: 0 1 auto;
    background: #fff;
    border-top: 10px solid #F3F4F6;
}

#footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 90px;
    /* background: #fff; */
    padding: 20px;
}

.footer-btn {
    display: flex;
}

.footer-btn .style01 {
    height: 52px;
    border-radius: 8px;
    background: #1f78d0;
    padding: 15px 0;
    color: #fff;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    width: 100%;
    border: none;
    ;
}

.footer-btn .style02 {
    height: 52px;
    border-radius: 8px;
    padding: 15px 0;
    color: #999;
    background: none;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    width: 100%;
    border: none;
    text-align: left;
    font-weight: 500;
}

.bs-wrap .footer-btn {
    margin-top: 26px;
}

.basic-btn {
    margin-top: 25px;
}

.basic-btn.center {
    text-align: center;
}

.basic-btn .txt-style {
    border: none;
    background: none;
    font-size: 12px;
    text-decoration: underline;
}

.tab-wrap .tab-menu {
    width: 100%;
    display: flex;
    background: #fff;
}

.tab-wrap .tab-menu .btn-tab {
    background: none;
    border: none;
    height: 52px;
    width: 100%;
    border-bottom: 3px solid #fff;
    font-size: 14px;
}

.tab-wrap .tab-menu .btn-tab.current {
    border-bottom: 3px solid #111;
    font-weight: 500;
}

.tab-wrap .tab-cont {}

.tab-wrap .tab-cont .tab-panel {
    display: none;

}

.tab-wrap .tab-cont .tab-panel.current {
    display: block;
}

.tab-panel .top-area {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 10px;
    padding: 20px 20px 0;
}

.tab-panel .top-area .name {
    font-size: 18px;
}

.tab-panel .top-area .name span {
    color: #2c7fdf;
}

.tab-panel .top-area .btn-management {}

.tab-panel .top-area .btn-management button {
    background: none;
    border: none;
    font-size: 12px;
    text-decoration: underline;
}

.tab-panel .top-area .btn-management button::after {
    content: "";
    display: inline-block;
    background: url(../images/arrow-right.png) 0 0 no-repeat;
    background-size: cover;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-top: -2px;
}

.point-box {
    background: #fff;
    padding: 24px 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
    margin: 2px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
}

.point-box .score-dl {}

.point-box .score-dl dt {
    font-size: 13px;
}

.point-box .score-dl dd {
    text-align: center;
    margin-top: 10px;
}

.point-box .score-dl dd button,
.point-box .score-dl dd a {
    font-size: 20px;
    border: none;
    background: none;
}

.point-box .score-dl dd button span,
.point-box .score-dl dd a span {
    font-size: 21px;
    font-weight: 500;
}

.point-box .score-dl dd button::after,
.point-box .score-dl dd a::after {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(../images/arrow-right2.png) 0 0 no-repeat;
    background-size: cover;
    margin-top: -4px;
    vertical-align: middle;
}

.con-box {
    padding: 0 0 30px;
}

/*
.con-box1 {
	padding: 30px 20px 0;
}

.con-box3 {
    padding: 0 20px 30px;  
}
*/

#pointSlider.swiper-container .swiper-pagination-bullet {
    bottom: 0;
}

#pointSlider.swiper-container .swiper-pagination-bullet .swiper-pagination-bullet {
    margin-left: 4px;
    background: #a7a8aa;
    width: 6px;
    height: 6px;
}

#pointSlider.swiper-container .swiper-pagination-bullet .swiper-pagination-bullet :first-child {
    margin-left: 0;
}

#pointSlider.swiper-container .swiper-pagination-bullet .swiper-pagination-bullet-active {
    background: #313234;
}

/* #scoreSlide .score-view {height: 488px;} */

.score-view {
    min-height: 488px;
    background: #fff;
    padding: 22px 24px 24px;
    border-radius: 8px;
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
    /* margin-top: 32px; */
    margin: 32px 24px 0;
}

/* .score-view .txt-box {
    margin-top: 20px;
} */

.score-view .txt-box .tit {
    margin-bottom: 4px;
    font-size: 13px;
    color: #8D8E90;
    line-height: 20px;
}

.score-view .txt-box .desc {
    font-size: 23px;
    font-weight: 600;
    line-height: 32px;
}

.score-view .event-visual {
    margin: 20px 0 30px;
    position: relative;
}

.score-view .event-visual .event {
    width: 54px;
    height: 54px;
    background: #FF7802;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    font-size: 11px;
    line-height: 12px;
    padding-top: 15px;
    position: absolute;
    bottom: -15px;
    right: 50px;
}

.score-view .event-visual::before {
    content: '';
    display: block;
    width: 156px;
    height: 143px;
    background: url(../images/ico-driver.png) 0 0 no-repeat;
    background-size: cover;
    margin: 0 auto;
}

.score-view .con-txt {
    font-size: 12px;
    color: #8D8E90;
    line-height: 19px;
    text-align: center;
}

.score-view .btn-more + .bottom-btn {
    margin-top: 22px;
}

.score-view .bottom-btn {
    width: 100%;
    margin-top: 45px;
}

.score-view .bottom-btn button {
    width: 100%;
    height: 55px;
    color: #fff;
    background: #2C7FDF;
    text-align: center;
    border-radius: 4px;
    font-size: 15px;
}

.score-view .info-box {
    text-align: center;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #f3f4f6;
}

.score-view .info-box .data {
    font-size: 12px;
    color: #8d8e90;
}

.score-view .info-box .middle-con {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.score-view .info-box .middle-con .car-num {
    font-size: 18px;
    font-weight: 500;
    margin-right: 7px;
}

.score-view .info-box .middle-con .btn {
    background: #111111;
    border: none;
    font-size: 12px;
    color: #fff;
    border-radius: 6px;
    padding: 0 15px;
    letter-spacing: -0.25px;
    height: 28px;
}

.score-view .progress-box {
    position: relative;
    margin: 0 auto;
    background: #fff;
}

.score-view .progress-box .circle-box.ico-basic:before {
    content: "";
    display: block;
    width: 172px;
    height: 174px;
    background: url(../images/img_cover_start.png) 0 0 no-repeat;
    background-size: cover;
    margin: 0 auto;
}

.progress-box .icon-box {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
}

.progress-box .icon-box .icon-dl {
    text-align: center;
}

.progress-box .icon-box .icon-dl dt {
    padding-bottom: 4px;
    font-size: 13px;
    color: #8d8e90;
    line-height: 20px;
}

.progress-box .icon-box .icon-dl dd {
    margin-top: 4px;
    font-size: 13px;
}
.progress-box .icon-box .icon-dl dd + dd {
    line-height: 20px;
}

.progress-box .icon-box .icon-dl dd img.ico_driever {
	width: 35px;
	height: 35px;
}

/*
.progress-box .icon-box .icon-dl dd::before {
    content: '';
    display: block;
    width: 30px;
    height: 30px;
    margin: 0 auto 15px;
}

.progress-box .icon-box .icon-dl:nth-child(1) dd {
    color: #d93448;
}

.progress-box .icon-box .icon-dl:nth-child(1) dd::before {
    background: url(../images/ico-driever01.png) center center no-repeat;
    background-size: cover;
}

.progress-box .icon-box .icon-dl:nth-child(2) dd {
    color: #1f78d0;
}

.progress-box .icon-box .icon-dl:nth-child(2) dd::before {
    background: url(../images/ico-driever02.png) center center no-repeat;
    background-size: cover;
}

.progress-box .icon-box .icon-dl:nth-child(3) dd {
    color: #861cc4;
}

.progress-box .icon-box .icon-dl:nth-child(3) dd::before {
    background: url(../images/ico-driever03.png) center center no-repeat;
    background-size: cover;
}

.progress-box .icon-box .icon-dl:nth-child(4) dd {
    color: #861cc4;
}

.progress-box .icon-box .icon-dl:nth-child(4) dd::before {
    background: url(../images/ico-driever04.png) center center no-repeat;
    background-size: cover;
}

.progress-box .icon-box.ico-basic .icon-dl dd {
    color: #111;
}

.progress-box .icon-box.ico-basic .icon-dl dd:before {
    background: url(../images/ico-driever00.png) center center no-repeat;
    background-size: cover;
}

.progress-box .icon-box.ico-basic .icon-dl:nth-child(4) dd::before {
    background: url(../images/ico-driever00-1.png) center center no-repeat;
    background-size: cover;
}
*/

#scoreView.swiper-container .swiper-slide {
    padding: 0 20px;
}

.circle-box {
    position: relative;
    /* width: 78%; */
    width: 220px;
    margin: 0 auto;
}

.circle-box .ico-point {
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 16px;
    font-weight: 500;
}

.circle-box .ico-point:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/ico-point.png) 0 0 no-repeat;
    background-size: cover;
    margin-right: 5px;
    vertical-align: middle;
    margin-top: -5px;
}

.circle-box svg {
    width: 100%;
    display: block;
    overflow: visible;
}

.circle-box path {
    stroke-linecap: round;
    stroke-width: 8;
}

.circle-box path.bg {
    stroke: #e7e7e8;
}

.circle-box path.cirCle {
    stroke: url(#gradient);    
    stroke-dasharray: 198;	   
    animation:dashCircle 3s ease-out forwards;
}

.circle-box .txt-f {
    font-size: 11px;
    font-weight: 500;
}

.circle-box .txt-f .style1 {
    font-size: 22px;
    font-weight: bold;  
    letter-spacing: -0.5px;  
}

.circle-box .txt-f .style2 {
    font-size: 7px;      
    fill: #545557;
    font-weight: 400;
}

.basic-section {
    padding: 0 24px;
    position: relative;
}

.mt35 {
    margin-top: 35px;
}

.basic-tit-box {
    margin-bottom: 20px;
    position: relative;
}

.basic-tit-box .m-tit {
    font-size: 20px;
    line-height: 26px;
    font-weight: 500;
}

.basic-tit-box .desc {
    font-size: 12px;
    color: #666;
    margin-top: 20px;
    line-height: 18px;
}

.basic-tit-box .checkbox-wrap {
    position: absolute;
    top: 0;
    right: 0;
}

.checkbox-wrap .custom-input {
    position: relative;
}

.checkbox-wrap .custom-input input {
    position: absolute;
    margin: -1px;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
}

.checkbox-wrap .custom-input label {
    border: 1px solid #dddddd;
    border-radius: 8px;
    height: 60px;
    display: flex;
    width: 100%;
    align-items: center;
    padding-left: 16px;
}

.checkbox-wrap .custom-input label span {
    font-size: 14px;
}

.checkbox-wrap .custom-input label .num {
    color: #1f78d0;
    margin-left: 2px;
}

.checkbox-wrap .custom-input input:checked+label {
    border-color: #007fe6;
    color: #007fe6;
}

.checkbox-wrap .custom-input input:disabled+label {
    background: #f5f5f5;
    border: 1px solid #f5f5f5;
    color: #a7a8aa;
}

.checkbox-wrap .custom-input input:disabled+label .num {
    color: #a7a8aa;
}

.checkbox-wrap .custom-input.toggle label {
    cursor: pointer;
    color: transparent;
    font-size: xx-small;
    width: 44px;
    height: 24px;
    background: #2c7fdf;
    display: block;
    border-radius: 100px;
    position: relative;
    border: none;
}

.checkbox-wrap .custom-input.toggle label:after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 100px;
    transition: 0.3s;
}

.checkbox-wrap .custom-input.toggle input:checked+label:after {
    left: calc(100% - 2px);
    transform: translateX(-100%);
}

.section-hr {
    height: 8px;
    background: #f5f5f5;
    border: none;
    margin: 30px 0;
}

.bluetooth-list {}

.bluetooth-list li {
    margin-top: 12px;
}

.bluetooth-list li:first-child {
    margin-top: 0;
}

.mt60 {
    margin-top: 60px;
}

.inp-txt-wrap .floating-label {
    position: relative;
    margin-top: 55px;
}

.inp-txt-wrap .floating-label:first-child {
    margin-top: 0;
}

.inp-txt-wrap .inp-box {
    position: relative;
}

.inp-txt-wrap .inp-box input {
    font-size: 16px;
    padding: 4px 0;
    display: block;
    width: 100%;
    height: 30px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #757575;
}

.inp-txt-wrap .inp-box input:focus,
.inp-txt-wrap .inp-box input.on {
    border-bottom: 1px solid #1f78d0;
}

.inp-txt-wrap .inp-box label {
    font-size: 16px;
    font-weight: normal;
    position: absolute;
    pointer-events: none;
    left: 0;
    top: 5px;
    transition: 0.2s ease all;
    -moz-transition: 0.2s ease all;
    -webkit-transition: 0.2s ease all;
}

.inp-txt-wrap .inp-box input:focus~label,
.inp-txt-wrap .inp-box input:not(:placeholder-shown)~label {
    top: -18px;
    font-size: 12px;
    color: #5264AE;
}

/* active state */
.inp-txt-wrap .inp-box input:focus~.bar:before,
.inp-txt-wrap .inp-box input:focus~.bar:after,
.inp-txt-wrap .inp-box input:focus~.bar:before,
.inp-txt-wrap .inp-box input:focus~.bar:after {
    width: 50%;
}

.inp-txt-wrap .err-txt {
    font-size: 12px;
    margin-top: 5px;
    color: #666;
    display: none;
    position: absolute;
    bottom: -25px;
    left: 0;
}

.inp-txt-wrap .inp-box .bt-clear {
    display: none;
    width: 20px;
    height: 20px;
    color: transparent;
    font-size: xx-small;
    background: url(../images/ico-clear.png) 0 0 no-repeat;
    background-size: cover;
    border: none;
    position: absolute;
    top: 0;
    right: 5px;
}

.inp-txt-wrap .inp-box .active {
    display: block;
}

.bs-wrap {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.59);
    display: none;

}

.bs-wrap.active {
    display: block;
}

.bs-wrap .btn-close {
    margin: 8px auto 30px;
    text-align: center;
}

.bs-wrap .btn-close button {
    width: 48px;
    height: 3px;
    color: transparent;
    font-size: xx-small;
    background: #c0c0c0;
    border: none;
}

.bs-wrap .bs-cont {
    width: 100%;
    position: absolute;
    bottom: 0;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 0 24px 20px;
    -webkit-animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.bs-wrap .bs-cont .bs-tit {
    font-size: 20px;
    font-weight: 500;
    letter-spacing: -0.25px;
    margin-bottom: 24px;
    line-height: 28px;
}

.bs-wrap .bs-cont .bs-tit span {
    color: #007fe6;
    font-weight: 500;
}

.bs-wrap .bs-cont .mycar-list {}

.bs-wrap .bs-cont .mycar-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

.bs-wrap .bs-cont .mycar-list li:first-child {
    margin-top: 0;
}

.bs-wrap .bs-cont .mycar-list li .name {
    font-size: 16px;
    letter-spacing: -0.25px;
}

.bs-wrap .bs-cont .mycar-list li .name span {
    font-size: 14px;
    color: #007fe6;
    letter-spacing: -0.22px;
}

.bs-wrap .bs-cont .mycar-list li .btn {}

.bs-wrap .bs-cont .mycar-list li .btn button {
    border: none;
    color: transparent;
    font-size: xx-small;
    width: 24px;
    height: 24px;
}

.bs-wrap .bs-cont .mycar-list li .btn .modify {
    background: url(../images/ico-modi.png) 0 0 no-repeat;
    background-size: cover;
}

.bs-wrap .bs-cont .mycar-list li .btn .delete {
    background: url(../images/ico-delete.png) 0 0 no-repeat;
    background-size: cover;
    margin-left: 5px;
}

.bs-wrap.active .on-slide {
    -webkit-animation: slide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both;
    animation: slide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both;
}


@-webkit-keyframes slide-up {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}

@keyframes slide-up {
    0% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }

    100% {
        -webkit-transform: translateY(0%);
        transform: translateY(0%);
    }
}

@-webkit-keyframes slide-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

@keyframes slide-bottom {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(100%);
        transform: translateY(100%);
    }
}

@-webkit-keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


.full-popup {
    padding: 60px 0 0;
}

.full-popup .popup-article {
    padding: 0 24px;
}

.full-popup .btn-close {
    height: 60px;
    background: #fff;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 999;
}

.full-popup .btn-close.active {
    opacity: 0.95;
}

.full-popup .btn-close button {
    position: absolute;
    top: 18px;
    right: 16px;
    width: 24px;
    height: 24px;
    background: url(../images/ico-close.png) 0 0 no-repeat;
    background-size: cover;
    border: none;
    color: transparent;
    font-size: xx-small;
}

.full-popup .m-tit {
    margin-top: 40px;
}

.full-popup .search-box {
    margin-top: 30px;
    display: flex;
    height: 52px;
    border: 1px solid #dddddd;
    border-radius: 8px;
}

.full-popup .search-box .input {
    flex: 1 auto;
}

.full-popup .search-box .input input {
    border: none;
    height: 100%;
    background: transparent;
    width: 100%;
    padding-left: 16px;
}

.full-popup .search-box .input input::placeholder {
    font-size: 14px;
    color: #cccc;
    font-weight: 500;
}

.full-popup .search-box .btn {
    height: 100%;
    flex: 0 15%;
}

.full-popup .search-box .btn button {
    width: 100%;
    height: 100%;
    background: url(../images/ico-search.png) center center no-repeat;
    background-size: 24px 24px;
    color: transparent;
    font-size: xx-small;
    border: none;
    display: block;
}

.full-popup .result-tit {
    font-size: 14px;
    margin-bottom: 19px;
}

.car-select-list {
    margin-top: 64px;
}

.car-select-list .select-list {
    margin-top: 60px;
}

.car-select-list .select-list:first-child {
    margin-top: 0;
}

.car-select-list .select-list .tit {
    font-size: 14px;
    font-weight: 500;
}

.car-select-list .select-list .list {
    margin-top: 12px;
}

.car-select-list .select-list .list li {}

.car-select-list .select-list .list li button {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 12px 0;
    display: block;
    position: relative;
    font-size: 14px;
}

.car-select-list .select-list .list li button::after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    background: url(../images/arrow-right3.png) center center no-repeat;
    background-size: cover;
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

.car-select-list .select-list .list li button .name {
    font-weight: 500;
}

.car-select-list .select-list .list li button .option {
    color: #666;
    margin: 8px 0;
}

.fc01 {
    color: #1f78d0
}

/* 20220218 정재윤 추가 S */
.full-popup {position:fixed; left:0; top:0; right:0; bottom:0; background:#fff; z-index:3; animation: slide-bottom 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both;}
.full-popup:after {content:''; overflow:hidden; position:absolute; left:0; top:0; right:0; bottom:0; background:#fff; z-index:-1}
.full-popup.active {animation: slide-up 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.1s both;}
.full-popup .popup-article {overflow:auto; background:#fff; height:calc(100% - 90px)}
.full-popup .footer {background:#fff}

.__point-ani {padding:1rem; text-align:center}
.__point-ani img {min-width:50%; max-width:100%; max-height:300px}
.__point-cont {box-shadow:none}
.__point-cont .basic-tit-box {font-weight:500; font-size:20px; line-height:2rem; text-align:center}
.__point-cont .basic-tit-box dt {font-size:18px}
.__point-cont + .txt-area {position:fixed; left:0; bottom:90px; right:0; color:#111; font-size:14px; text-align:center}
.__point-cont .graph-box {margin:100px 0 50px}
.__point-cont .graph-box .txt {font-weight:500}
.__point-cont .graph-box .txt span {font-size:14px}
/* 20220218 정재윤 추가 E */

.full-popup .search-box2 {
    display: flex;
    align-items: center;
}

.full-popup .search-box2 .btn-search-txt {
    flex: 0 auto;
    word-break: keep-all;
}

.full-popup .search-box2 .btn-search-txt .btn-txt {
    height: 40px;
    background: #111;
    color: #fff;
    padding: 0 12px;
    font-size: 18px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    margin-right: 5px;
    margin-bottom: 8px;
}

.full-popup .search-box2 .btn-search-txt .btn-txt:last-child {
    margin-right: 0;
}

.full-popup .search-box2 .btn-search-txt .txt {
    font-size: 20px;
    font-weight: 500;
}

.full-popup .search-box2 .btn {
    height: 100%;
    flex: 1 auto;
}

.full-popup .search-box2 .btn button {
    width: 100%;
    height: 100%;
    background: url(../images/ico-search.png) center center no-repeat;
    background-size: 24px 24px;
    color: transparent;
    font-size: xx-small;
    border: none;
    display: block;
}

.full-popup .search-desc {
    font-size: 12px;
    margin-top: 15px;
}

.full-popup .search-desc .btn-info {
    background: none;
    border: none;
    font-size: 12px;
    text-decoration: underline;
    display: block;
    margin-top: 15px;
}

.full-popup .search-desc .btn-info::after {
    content: "";
    display: inline-block;
    background: url(../images/arrow-right.png) 0 0 no-repeat;
    background-size: cover;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-top: -2px;
}

.alert-box {
    background: #fff;
    border-radius: 16px;
    padding: 32px 20px 20px 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 320px;

}

.alert-box::before {
    content: '';
    display: block;
    width: 36px;
    height: 36px;
    background: url(../images/ico-alert.png) center center no-repeat;
    background-size: cover;
    margin: 0 auto 26px;
}

.alert-box .btn-close {
    margin: 0;
}

.alert-box .btn-close button {
    width: 24px;
    height: 24px;
    background: url(../images/ico-close.png) 0 0 no-repeat;
    background-size: cover;
    border: none;
    color: transparent;
    font-size: xx-small;
    position: absolute;
    top: 20px;
    right: 20px;
}

.alert-box .alert-tit {
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 15px;
}

.alert-box .alert-con {
    font-size: 14px;
    text-align: center;
    line-height: 20px;
}

.alert-box .car-info-list li {
    margin-top: 10px;
    padding: 0 20px;
}

.alert-box .car-info-list li dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alert-box .car-info-list li dl dt {
    font-size: 14px;
    color: #8d8e90
}

.alert-box .car-info-list li dl dd {
    font-size: 14px;
}

.bg-color {	
    background: rgb(87, 182, 241);
    background: linear-gradient(315deg, rgba(87, 182, 241, 1) 0%, rgba(44, 127, 223, 1) 100%);
}

.bg-color #header .btn-back button {
    background: url(../images/ico-back-w.png) 0 0 no-repeat;
    background-size: 16px auto;
    /* color: transparent;
    font-size: xx-small;
    border: none; */
}

.my-point-box {   
    position: relative;
    min-height: 125px;
    background: url(../images/img-point.png) 95% 0 no-repeat;
    background-size: 84px 84px;
    padding: 0 24px;
}

.my-point-box .point-dl {}

.my-point-box .point-dl dt {
    color: #fff;
    font-size: 16px;
    line-height: 26px;
}

.my-point-box .point-dl dd {
    display: flex;
    align-items: center;
    color: #fff;    
    font-weight: 500;
}

.my-point-box .point-dl dd #acumPoint {
	font-size: 32px;
	margin-right: 6px;
    line-height: 45px;
}

.my-point-box .point-dl dd span {
    font-size: 23px;   
    line-height: 33px;
}

.my-point-box .point-btn {
	/*
    position: absolute;
    bottom: 0;
    left: 0;
    */
    margin-top: 18px;
}

.my-point-box .point-btn button {
    position: relative;
    height: 46px;
    padding: 12px 20px;
    border: 1px solid #CFE3F7;
    border-radius: 100px;
    background: #fff;
    color: #445475;
    line-height: 20px;
    -webkit-box-shadow: 0px 5px 8px 0px rgba(40, 40, 40, 0.1);
    box-shadow: 0px 5px 8px 0px rgba(40, 40, 40, 0.1);
}

.my-point-box .point-btn button:before {
    content: '';
    display: inline-block;
    position: absolute;
    top: -8px;
    left: 30px;
    width: 9px;
    height: 8px;
    background: url(../images/ico-triangle.png) 0 0 no-repeat;
    background-size: cover;
}

.my-point-box .point-btn button:after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 6px;
    margin-top: 8px;
    margin-left: 6px;
    background: url(../images/arrow-right4.png) 0 0 no-repeat;
    background-size: cover;
    vertical-align: top;    
}

.main-point-slide .swiper-slide .score-view {    
    
}

.main-point-slide .swiper-slide .score-view .tit-dl {
    margin-bottom: 7px;
}

.main-point-slide .swiper-slide .score-view .tit-dl dt {
    margin-bottom: 4px;
    font-size: 13px;
    color: #8D8E90;
    line-height: 20px;
}

.main-point-slide .swiper-slide .score-view .tit-dl dd {
    font-size: 20px;
    font-weight: 500;
    line-height: 28px;
}

.main-point-slide .swiper-slide .score-view .txt-type {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #F3F4F6;
    text-align: center;
}

.main-point-slide .swiper-slide .score-view .txt-type p {
    font-size: 12px;
    color: #8D8E90;
    line-height: 20px;
}

.main-point-slide .swiper-slide .score-view .txt-type .bold {
    font-size: 15px;
    color: #111;
    line-height: 24px;
    /* margin-bottom: 5px; */
}

.main-point-slide .swiper-slide .score-view .btn-more {
    margin: 14px 0 12px;
    text-align: center;
}

.main-point-slide .swiper-slide .score-view .btn-more button {
    background: none;
    border: none;
    font-size: 13px;
    font-weight: 500;
    text-decoration: underline;
    color: #111;
}

.main-point-slide .swiper-pagination {
    position: relative;
    margin-top: 14px;
}

.main-point-slide .swiper-pagination .swiper-pagination-bullet {
    /* background: 1f4c80; */
    width: 6px;
    height: 6px;
}

.main-point-slide .swiper-pagination .swiper-pagination-bullet-active {
    background: #fff;
}

.swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 0;
}

.content-wrap.bg-w {
    /*padding-top: 0 !important;*/
    /*height: 100%;*/
}

.bg-w {
    background: #fff;       
}

.s-tit {
    margin-bottom: 30px;
    font-weight: 500;
    font-size: 20px;
}

.challenge-box {
    padding: 24px 20px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 5px 8px 0px rgba(40, 40, 40, 0.1);
    box-shadow: 0px 5px 8px 0px rgba(40, 40, 40, 0.1);
}

.challenge-box.type02 {
    padding: 0;
    box-shadow: none;
    margin: 0 20px;
}

.challenge-box .tit-area {
    position: relative;
    top: 0;
}

.challenge-box .tit-area:after {
    content: '';
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50px;
    background: #F3F4F6 url(../images/ico-challenge1.png) center center no-repeat;
    background-size: 26px 26px;
    position: absolute;
    top: 0;
    right: 0;
}

.challenge-box .tit-area .tit {
    font-size: 15px;
    color: #111;
    font-weight: 500;
}

.challenge-box .tit-area .con {
    font-size: 12px;
    margin: 5px 0 15px;
    color: #8D8E90;
}

.challenge-box .tit-area .point {
    font-size: 15px;
    color: #2C7FDF;
}

.challenge-box .tit-area .point span {
    font-weight: 500;
}

.challenge-box .graph-box {
    margin-top: 56px;
    position: relative;

}

.challenge-box .graph-box .layer {
    position: absolute;
    top: -35px;
}

.challenge-box .graph-box .layer span {
    background: #2C7FDF;
    border-radius: 4px;
    font-size: 10px;
    color: #fff;
    font-weight: 500;
    height: 20px;
    display: inline-block;
    padding: 0 4px;
    line-height: 2em;
    position: relative;
}

.challenge-box .graph-box .layer span::after {
    content: "";
    display: block;
    width: 7px;
    height: 4px;
    background: url(../images/ico-triangle2.png) 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    bottom: -4px;
    left: 50%;
    transform: translateX(-50%);
}

.challenge-box .graph-box .graph {
    background: #F3F4F6;
    border-radius: 50px;
    height: 12px;
    width: 100%;
}

.challenge-box .graph-box .graph .line {
    height: 12px;
    display: block;
    background: #2C7FDF;
    border-radius: 50px;
}

.challenge-box .graph-box .txt {
    text-align: right;
    margin-top: 10px;
    font-size: 12px;
    color: #8D8E90;
}

.challenge-box .graph-box .txt span {
    color: #111;
}

.challenge-box+.challenge-box {
    margin-top: 20px;
}

.challenge-box .ico1:after {
    background: #F3F4F6 url(../images/ico-challenge2.png) center center no-repeat;
    background-size: 30px 30px;
}
.challenge-box.popup-style {
    border: none;
    box-shadow:none;
    padding: 0;
}
.challenge-box.popup-style  .tit-area .tit {
    font-size:23px;
    font-weight: 600;
    line-height: 33px;
}
.challenge-box.popup-style .tit-area:after {
    width: 80px;
    height: 80px;
    background:  url(../images/ico-faile.png) center center no-repeat;
    background-size: cover;
}
.challenge-box.popup-style .graph-box {
    margin-top: 70px;
}
.challenge-box.popup-style .txt-area {
    text-align: center;
    font-size:13px;
    color:#111;
    margin: 30px 0 10px;
    line-height: 20px;
}

.challenge-box.popup-style .sheet-cont {
    font-size: 12px;
    color: #666;
    line-height: 20px;
}
.challenge-box.popup-style .sheet-cont > span {
    color: #2c7fdf;
}

.challenge-box.popup-style .box-wrap {
    padding: 18px 20px;
    line-height: 22px;
    border: 1px solid #cfe3f7;
    background: #f7fbff;
    border-radius: 8px;
    font-size: 14px;
}

.challenge-box.popup-style .box-wrap .color02 {
    color: #2c7fdf !important;
}

.footer-btn .style02 {
    color: #fff;
    text-align: center;
    background: #737476;
}
.footer-btn .style02 {
    height: 52px;
    border-radius: 8px;
    padding: 15px 0;
    color: #999;
    background: none;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    width: 100%;
    border: none;
    text-align: left;
    font-weight: 500;
}

.point-visual-txt {
    background: url(../images/img-point2.png) right 20px no-repeat;
    background-size: 100px 100px;
    position: relative;
    padding: 0 0 40px;
}

.point-visual-txt .txt {
    font-size: 23px;
    font-weight: 500;
    color: #fff;
    line-height: 32px;
}

.point-visual-txt .txt .bullet {
    position: relative;
    margin-top: 13px;
    /* padding-left: 11px; */
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    line-height: 20px;  
}

.point-visual-txt .txt .bullet::before {
    content: '';
    display: none;
    position: absolute;
    top: 50%;
    left: 4px;
    width: 2px;
    height: 2px;
    background: #fff;
    transform: translateY(-50%);
}

.point-visual-txt .point-txt {
    position: absolute;
    bottom: 22px;
    right: 0;
    width: 44px;
    height: 44px;
    background: #FF7802;
    border-radius: 50px;
    text-align: center;
    color: #fff;
    font-size: 10px;
    line-height: 12px;
    padding-top: 11px;
}

.s-tit2 {
    position: relative;
    margin-bottom: 22px;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px;
}

.s-tit2 span#challengeCnt {
    color: #2C7FDF;
}

.fs14 {
    font-size: 14px;
}

.s-tit2 .tool-tip {
    display: inline-block;
    position: absolute;
    top: -64px;
    left: 0;
    height: 46px;
    padding: 12px 20px;
    border: 1px solid #CFE3F7;
    border-radius: 100px;
    background: #fff;
    line-height: 17px;
    -webkit-box-shadow: 0px 5px 8px 0px rgb(40 40 40 / 10%);
    box-shadow: 0px 5px 8px 0px rgb(40 40 40 / 10%);
}

.s-tit2 .tool-tip span {
    position: relative;
    font-size: 12px;
    font-weight: 500;
    color: #445475;
}

.s-tit2 .tool-tip span#notGetPointCnt {
	color: #2C7FDF;
}

.s-tit2 .tool-tip:after {
    content: '';
    display: inline-block;
    position: absolute;
    left: 28px;
    bottom: -8px;
    width: 9px;
    height: 8px;
    background: url(../images/ico-triangle.png) 0 0 no-repeat;
    background-size: cover;
    transform: rotate(180deg);
    z-index: 10;
}

.hr-line {
    margin: 35px 0;
    border: 5px solid #F3F4F6;
}

.pt30 {
    padding-top: 30px;
}

.driver-list {
	margin-top: 26px;
    padding-left: 4px
}

.driver-list .noList {
    padding-top: 20px;
}

.driver-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 21px;
    padding-top: 19px;
    border-top: 1px solid #F3F4F6;
}

.driver-list li:first-child {
    padding-top: 0;
    margin-top: 0;
    border-top: none;
}

.driver-list li .cont {}

.driver-list li .cont::before {
    content: "";
    position: absolute;
    display: inline-block;
    width: 17px;
    height: 20px;
    margin-top: 2px;
    background: url(../images/img-point3.png) 0 0 no-repeat;
    background-size: cover;
    vertical-align: top;
}

.driver-list li .cont .txt-box {
    display: inline-block;
    padding:0 10px 0 36px;
}

.driver-list li .cont .txt1 {
    font-size: 15px;
    font-weight: 500;
    color: #111;
    line-height: 24px;
    word-break: keep-all;
}

.driver-list li .cont .txt2 {
    margin: 2px 0 4px;
    font-size: 12px;
    color: #8D8E90;
    line-height: 20px;
}

.driver-list li .cont .txt3 {
    font-size: 12px;
    color: #2C7FDF;
    line-height: 20px;
}

.driver-list li .btn {}

.driver-list li .btn button {
    min-width: 73px;
    height: 36px;
    padding: 0 8px;
    border: 1px solid #D9DADC;
    border-radius: 4px;
    font-weight: 500;
    font-size: 12px;
    color: #2C7FDF;
    line-height: 36px;
}

.driver-list li .btn button:disabled,
.driver-list li .btn button.disabled {
    background: #EAEBED;
    color: #8D8E90;
}

.driver-list-wrap .btn-asis {
    margin-top: 32px;
}

.driver-list-wrap .btn-asis button {
    width: 100%;
    display: block;
    border: 1px solid #EAEBED;
    border-radius: 5px;
    background: none;
    height: 45px;
    font-size: 13px;
}

.driver-list-wrap .btn-asis button span {
    font-weight: 500;
}

.driver-list-wrap .btn-asis button span:after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 13px;
    background: url(../images/arrow-bottom.png) 0 0 no-repeat;
    background-size: cover;
    margin-left: 5px;
}

.pb100 {
    padding-bottom: 100px;
}

.section-box {
    padding: 36px 24px 30px;
}

.section-box.main {
    padding: 36px 0;
}

.section-box.pdb-0 {
    padding-bottom: 0;
}

.bottom-txt-box {
    text-align: center;
}

.bottom-txt-box .txt1 {
    font-size: 20px;
    font-weight: 500;
    color: #111;
    line-height: 28px;
}

.bottom-txt-box .desc {
    position: relative;
    display: inline-block;
    padding-left: 17px;
    font-size: 12px;
    color: #0080E6;
    margin-top: 9px;
}
.bottom-txt-box .desc::before {
    content: '!';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    padding-top: 2px;
    border-radius: 50%;
    background: #2c7fdf;
    font-size: 10px;
    color: #fff;
}

.btn-wrap {
    margin-top: 30px;
}

.btn-wrap button {
    width: 100%;
    border-radius: 8px;
    height: 52px;
    font-size: 14px;
    font-weight: 600;
}

.btn-wrap button.style-blue {
    background: #2c7fdf;
    font-size: 14px;
    font-weight: 400;
    color: #fff;
}

.btn-wrap button.style-blue > a {
    color: #fff;
}

.btn-wrap button.style-bk {
    background: #111;
    color: #fff;
}

.agree-info-check {
    padding: 20px;
    background: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
}

.agree-info-check.pos-check {
    position: absolute;
    bottom: 100px;
    left: 0;
    width: auto;
    margin: 0 24px;
    width: 88%;
}

.agree-info-check .txt {
    font-size: 12px;
    font-weight: 600;
    color: #111;
    line-height: 18px;
}

.agree-info-check .check-wrap .check-box label {
    font-size: 12px;
    color: #ccc;
}

.agree-info-check .check-wrap .check-box label::before {
    border-width: 2px;
}

.check-wrap {}

.check-wrap .check-box {}

.check-wrap .check-box .inp-check {
    position: absolute;
    margin: -1px;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
}

.check-wrap .check-box label {
    font-size: 15px;
    color: #111;
    font-weight: 600;
    display: flex;
    align-items: center;
    position: relative;
}

.check-wrap .check-box label:before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #B8B9BB;
    border-radius: 4px;
    background: none;
    margin-right: 5px;
}

.check-wrap .check-box label:after {
    content: "";
    display: block;
    width: 10px;
    height: 8px;
    background: url(../images/bg-check.png) 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    top: 5px;
    left: 5px;
}

.check-wrap .check-box .inp-check:checked+label::before {
    background: #2C7FDF;
    border-color: #2C7FDF;
}

.check-wrap .check-box .inp-check:checked+label::after {
    background: url(../images/bg-check_on.png) 0 0 no-repeat;
    background-size: cover;
}


.total-agree-wrap {}

.total-agree-wrap .total-agree .check-wrap {
    border: 1px solid #111;
    height: 52px;
    border-radius: 8px;
    padding: 14px 12px;
}

.total-agree-wrap .total-agree .check-wrap .check-box {}

.total-agree-wrap .total-agree .check-wrap .check-box label {
    font-size: 14px;
    font-weight: 500;
}

.total-agree-wrap .total-agree .check-wrap .check-box label:before {
    border-radius: 50px;
    border-width: 2px;
}

.total-agree-wrap .agree-check-list {
    margin-top: 20px;
}

.total-agree-wrap .agree-check-list li {
    margin-top: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-agree-wrap .agree-check-list li .btn {
    margin-left: 5px;
    margin-top: -3px;
}

.total-agree-wrap .agree-check-list li .btn button {
    border: none;
    color: transparent;
    font-size: xx-small;
    width: 6px;
    height: 10px;
    background: url(../images/arrow-right5.png) 0 0 no-repeat;
    background-size: 6px 10px;
}

.total-agree-wrap .agree-check-list li .check {
    width: 100%;
}

.total-agree-wrap .agree-check-list li .check .check-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.total-agree-wrap .agree-check-list li .check .check-wrap .agree-txt {
    font-size: 12px;
    color: #DDDDDD;
}

.total-agree-wrap .agree-check-list li .check .check-wrap .check-box {}

.total-agree-wrap .agree-check-list li .check .check-wrap .check-box label {
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
    padding-left: 24px;
    color: #212121;
}

.total-agree-wrap .agree-check-list li .check .check-wrap .check-box label::before {
    display: none;
}

.total-agree-wrap .agree-check-list li .check .check-wrap .check-box label::after {
    border: none;
    width: 12px;
    height: 9px;
    background: url(../images/bg-check2.png) 0 0 no-repeat;
    background-size: cover;
    top: 50%;
    transform: translateY(-50%);
}

.total-agree-wrap .agree-check-list li .check .check-wrap .check-box .inp-check:checked+label::after {
    background: url(../images/bg-check2_on.png) 0 0 no-repeat;
    background-size: cover;
}

.car-list-box {
    margin-top: 45px;
}

.car-list-box li {
    margin-top: 12px;
}

.car-list-box li:first-child {
    margin-top: 0;
}

.car-list-box li .check-area {}

.car-list-box li .check-area .inp-check {
    position: absolute;
    margin: -1px;
    width: 1px;
    height: 1px;
    padding: 0;
    border: 0;
    white-space: nowrap;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
}

.car-list-box li .check-area .label-style {
    border: 1px solid #D9DADC;
    border-radius: 8px;
    padding: 22px 25px 25px;
    display: block;
    min-height: 120px;
}

.car-list-box li .check-area .label-style dl::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #B8B9BB;
    border-radius: 4px;
    background: none;
    margin-right: 5px;
    position: absolute;
    top: -2px;
    left: 0;
}

.car-list-box li .check-area .label-style dl::after {
    content: "";
    display: block;
    width: 10px;
    height: 8px;
    background: url(../images/bg-check.png) 0 0 no-repeat;
    background-size: cover;
    position: absolute;
    top: 3px;
    left: 5px;
}

.car-list-box li .check-area .inp-check:checked+label {
    border-color: #2C7FDF;
}

.car-list-box li .check-area .inp-check:checked+label dl::before {
    background: #2C7FDF;
    border-color: #2C7FDF;
}

.car-list-box li .check-area .inp-check:checked+label dl::after {
    background: url(../images/bg-check_on.png) 0 0 no-repeat;
    background-size: cover;
}

.car-list-box li .check-area .label-style dl {
    display: inline-block;
    position: relative;
    padding-left: 30px;
}

.car-list-box li .check-area .label-style dl dt {
    font-size: 15px;
    color: #111;
    font-weight: 500;
}

.car-list-box li .check-area .label-style dl dt .layer {
    border-radius: 6px;
    background: #A0A0A0;
    padding: 2px 5px 3px;
    color: #fff;
    font-size: 10px;
    font-weight: 600;
    margin-left: 5px;
    margin-top: -2px;
}

.car-list-box li .check-area .inp-check:checked+label dl .layer {
    background: #2c7fdf;
}

.car-list-box li .check-area .label-style dl dd {
    margin-top: 10px;
    font-size: 12px;
    color: #8D8E90;
}

.car-list-box li .check-area .label-style dl dd span {
    color: #111;
}

.car-list-box li .check-area .label-style dl dd span::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 11px;
    background: #EAEBED;
    margin: -3px 4px 0;
    vertical-align: middle;
}

.car-list-box li .plus-box {
    border: 1px solid #D9DADC;
    border-radius: 8px;
    padding: 22px 25px 25px;
    min-height: 120px;
    text-align: center;
    position: relative;
}

.car-list-box li .plus-box .btn-txt {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.car-list-box li .plus-box .btn-txt button {
    font-size: xx-small;
    color: transparent;
    width: 32px;
    height: 32px;
    background: url(../images/ico-btn-plus.png) 0 0 no-repeat;
    background-size: cover;
    border: none;
    display: inline-block;
}

.car-list-box li .plus-box .btn-txt .txt {
    font-size: 13px;
    margin-top: 10px;
}

.car-list-box li:focus-within .plus-box {
    border-color: #2c7fdf;
}

.month-progress-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
}

.month-progress-box .h-area {
    font-size: 14px;
    font-weight: 600;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.month-progress-box .h-area .tit {}

.month-progress-box .h-area .month {
    color: #0080EE;
}

.month-progress-box .h-area .month button {
    font-size: xx-small;
    color: transparent;
    border: none;
    width: 18px;
    height: 20px;
    background: url(../images/ico-cla.png) 0 0 no-repeat;
    background-size: cover;
    vertical-align: middle;
    margin-left: 5px;
}

.month-progress-box .progress-box {
    border-top: 1px solid #F3F4F6;
    margin-top: 20px;
    padding-top: 25px;
}

.month-progress-box .progress-box .box-inner {
    display: flex;
}

.month-progress-box .progress-box .circle-box {
    display: inline-block;
    width: 50%;
    margin: 0;
}

.month-progress-box .progress-box .info-box {
    margin-left: 25px;
    flex: 1 30%;
}

.month-progress-box .progress-box .icon-box {
    justify-content: space-evenly;
    margin-top: 30px;
}

.month-progress-box .progress-box .info-box .tit-p {
    font-size: 22px;
    font-weight: 500;
    margin-bottom: 34px;
}

.month-progress-box .progress-box .info-box .tit-p:before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background: url(../images/ico-point.png) 0 0 no-repeat;
    background-size: cover;
    vertical-align: middle;
    margin-right: 5px;
}

.month-progress-box .progress-box .info-box .tit-p span {
    font-size: 18px;
}

.month-progress-box .progress-box .info-box .con-k {
    font-size: 13px;
    color: #545557;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.month-progress-box .progress-box .info-box .con-k dt {}

.month-progress-box .progress-box .info-box .con-k dd {}

.month-progress-box .progress-box .info-box .con-k+.con-k {
    margin-top: 15px;
}

.month-area {}

.month-progress-box .inp-date {
	position: relative;
    /* flex: 0 1 auto; */
    flex: 0 1 0;
    min-height: 23px;
}

.month-progress-box .inp-date input {
	border: 0;
}

.month-progress-box .inp-date #searchDt {
    padding: 4px 0 2px;
	width: 90px;
	border-bottom: 1px solid #666;
	font-size: 14px;
    /* font-family:'notokr'; */
    font-family: "Inter", "SpoqaHanSansNeo", "notokr";
    box-sizing: border-box;
    color: #111;
}

.inp-date .btn-base:after {
	content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 24px;
    height: 24px;
    background: url(../images/ico_form.png) no-repeat -54px -115px;
    background-size: 200px auto;
    /* background: url(/m/resources/images/common/ico_form.png) no-repeat -3.5rem -7.6rem;
    background-size: 13rem; */
}


.month-progress-box .ui-datepicker #uiDrop6 {	
    position: absolute;
    top: 0;
    right: 0;
    width: 24px;
    /* border: none;
    color: transparent;
    background: none; */
}

.month-progress-box .ui-datepicker #uiDrop6 > span {
    display: block;
    position: relative;
    text-indent: -9999px;
}

.month-area .week {
    display: flex;
    padding: 0 24px;
    justify-content: space-around;
}

.month-area .week span {
    font-size: 14px;
    color: #A7A8AA;
    font-weight: 500;
    position: relative;
}

.month-area .week span.active::before {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50px;
    background: #111;
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
}

.month-area .month {
    white-space: nowrap;
    overflow-y: auto;
    padding: 20px 0;
}

.month-area .month button {
    border-radius: 50px;
    border: none;
    width: 40px;
    height: 40px;
    font-size: 14px;
    font-weight: 500;
    margin: 0 1px;
}

.month-area .month button.active {
    color: #fff;
    background: #007FE6;
}

.month-area .month button.hover {
    height: 70px;
    background: #007FE6;
    color: #fff;
}

.box-list-style {}

.box-list-style li.depth1 {
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 2px 8px 0 rgb(0 0 0 / 10%);
    padding: 22px 20px;
    border-radius: 8px;
    margin-top: 20px;
}

.box-list-style li.depth1:first-child {
    margin-top: 0;
}

.box-list-style li.depth1 .h-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.box-list-style li.depth1 .h-area .txt {
    font-size: 15px;
    color: #111;
}

.box-list-style li.depth1 .h-area .txt span {
    display: block;
    font-size: 12px;
    color: #8D8E90;
    margin-bottom: 5px;
}

.box-list-style li.depth1 .h-area .btn {}

.box-list-style li.depth1 .h-area .btn button {
    background: none;
    border: 1px solid #D9DADC;
    border-radius: 4px;
    font-weight: 600;
    font-size: 12px;
    color: #2C7FDF;
    height: 36px;
    padding: 0 10px;
}

.box-list-style li.depth1 .h-area .btn button:disabled,
.box-list-style li.depth1 .h-area .btn button.disabled {
    background: #EAEBED;
    color: #8D8E90;
    border-color: #EAEBED;
}

.box-list-style li.depth1 .f-box {
    border-top: 1px solid #F3F4F6;
    padding-top: 16px;
    margin-top: 16px;
    display: flex;
    justify-content: space-between;
}

.box-list-style li.depth1 .f-box dl {
    text-align: center;
}

.box-list-style li.depth1 .f-box dl dt {
    font-size: 14px;
    color: #111;
    margin-bottom: 10px;
}

.box-list-style li.depth1 .f-box dl dd {
    font-size: 14px;
    color: #111;
}

.address-list {}

.address-list li {
    font-size: 14px;
    color: #A7A8AA;
    padding-bottom: 23px;
    background: url(../images/bg-line.png) 6px 5px repeat-y;
    background-size: 1px 4px;
}

.address-list li::before {
    content: '';
    display: inline-block;
    background: #D8D8D8;
    width: 14px;
    height: 14px;
    border-radius: 50px;
    vertical-align: middle;
    margin-top: -3px;
    margin-right: 10px;
}

.address-list li.end {
    color: #111;
    background: none;
}

.address-list li.end:before {
    width: 13px;
    height: 16px;
    background: url(../images/ico-map.png) 0 0 no-repeat;
    background-size: cover;
}

.h0 {
    height: auto !important;
    padding-bottom: 100px;
}

.select-custom {}

.select-custom .scroll {
    display: inline-block;
}

.select-custom .scroll button {
    background: none;
    border: none;
}

.select-custom .scroll button.active {}

.select-custom .scroll .txt {
    display: inline-block;
}


.mobileSelect {
    position: relative;
    z-index: 0;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: opacity 0.4s, z-index 0.4s;
    transition: opacity 0.4s, z-index 0.4s;
}

.mobileSelect * {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.mobileSelect .grayLayer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.75);
    z-index: 888;
    display: block;
}

.mobileSelect .content {
    width: 100%;
    display: block;
    position: fixed;
    z-index: 889;
    color: black;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    bottom: -350px;
    left: 0;
    background: #fff;
    border-radius: 24px 24px 0 0;
    padding: 0 24px 20px;
}

.mobileSelect .content .fixWidth {
    width: 90%;
    margin: 0 auto;
    position: relative;
}

.mobileSelect .content .fixWidth:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.mobileSelect .content .btnBar {
    position: relative;
    padding: 8px 0 40px;
}

.mobileSelect .content .btnBar .cancel {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    color: transparent;
    font-size: xx-small;
    background: #c0c0c0;
    border: none;
}

.mobileSelect .content .btnBar .ensure {
    display: none;
}

.mobileSelect .content .btnBar .title {
    display: none;
}

.mobileSelect .content .panel:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.mobileSelect .content .panel .wheels {
    width: 100%;
    height: 200px;
    overflow: hidden;
}

.mobileSelect .content .panel .wheel {
    position: relative;
    z-index: 0;
    float: left;
    width: 50%;
    height: 200px;
    overflow: hidden;
    -webkit-transition: width 0.3s ease;
    transition: width 0.3s ease;
}

.mobileSelect .content .panel .wheel .selectContainer {
    display: block;
    text-align: center;
    -webkit-transition: -webkit-transform 0.18s ease-out;
    transition: -webkit-transform 0.18s ease-out;
    transition: transform 0.18s ease-out;
    transition: transform 0.18s ease-out, -webkit-transform 0.18s ease-out;
}

.mobileSelect .content .panel .wheel .selectContainer li {
    font-size: 15px;
    display: block;
    height: 60px;
    line-height: 60px;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.mobileSelect .content .panel .selectLine {
    height: 60px;
    width: 100%;
    position: absolute;
    top: 60px;
    pointer-events: none;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;

}

.mobileSelect .content .panel .selectLine span {
    border-top: 1px solid #111;
    border-bottom: 1px solid #111;
    display: inline-block;
    height: 60px;
    width: 30%;
    margin: 0 12% 0 11%;
    ;
    position: relative;
}

.mobileSelect .content .panel .selectLine span::before {
    content: '년';
    display: inline-block;
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translateY(-50%);
}

.mobileSelect .content .panel .selectLine span:nth-child(2) {
    width: 20%;
}

.mobileSelect .content .panel .selectLine span:nth-child(2)::before {
    content: '월';
}

.mobileSelect .content .panel .shadowMask {
    position: absolute;
    top: 0;
    width: 100%;
    height: 200px;
    background: -webkit-gradient(linear,
            left top,
            left bottom,
            from(#ffffff),
            color-stop(rgba(255, 255, 255, 0)),
            to(#ffffff));
    background: -webkit-linear-gradient(top,
            #ffffff,
            rgba(255, 255, 255, 0),
            #ffffff);
    background: linear-gradient(to bottom,
            #ffffff,
            rgba(255, 255, 255, 0),
            #ffffff);
    opacity: 0.9;
    pointer-events: none;
}

.mobileSelect-show {
    opacity: 1;
    z-index: 10000;
    visibility: visible;
}

.mobileSelect-show .content {
    bottom: 0;
}

.load-history {}

.load-history .tit-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
}

.load-history .tit-area button {
    font-size: xx-small;
    color: transparent;
    border: none;
}

.load-history .tit-area .btn-back {
    width: 9px;
    height: 14px;
    background: url(../images/btn-prev.png) 0 0 no-repeat;
    background-size: 9px 14px;

}

.load-history .tit-area .tit {
    font-size: 18px;
    font-weight: 600;
}

.load-history .tit-area .del {
    width: 14px;
    height: 16px;
    background: url(../images/btn-del.png) 0 0 no-repeat;
    background-size: 14px 16px;
}

.load-history .tit-area .btn-next {
    width: 9px;
    height: 14px;
    background: url(../images/btn-next.png) 0 0 no-repeat;
    background-size: 9px 14px;
}

.load-history .load-con {
    padding-left: 10px;
}

.load-history .load-con .km {
    font-size: 15px;
    color: #111;
    margin-bottom: 30px;
}

.bg-none {
    background: none !important;
}

.car-guide-list {}

.car-guide-list li {
    margin-bottom: 20px;
}

.car-guide-list li button,
.car-guide-list li a,
.car-guide-list li .box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 1px solid #D9DADC;
    text-align: left;
    background: none;
    width: 100%;
    border-radius: 8px;
    height: 90px;
    padding-left: 24px;
    position: relative;
}

.car-guide-list li .tit {
    font-size: 16px;
    color: #111;
    margin-bottom: 10px;
}

.car-guide-list li .desc {
    font-size: 12px;
    color: #8D8E90;
}

.car-guide-list li .box:focus-within,
.car-guide-list li .box:hover {
    border-color: #2c7fdf;
}

.car-guide-list li .box:after {
    content: '';
    display: block;
    width: 48px;
    height: 48px;
    position: absolute;
    top: 50%;
    right: 23px;
    transform: translateY(-50%);
}

.car-guide-list li .ico1:after {
    background: url(../images/ico-sos1.png) 0 0 no-repeat;
    background-size: 48px 48px;
}

.car-guide-list li .ico2:after {
    background: url(../images/ico-sos2.png) 0 0 no-repeat;
    background-size: 48px 48px;
}

.car-guide-list li .ico1:focus-within:after,
.car-guide-list li .ico1:hover:after {
    background: url(../images/ico-sos1_on.png) 0 0 no-repeat;
    background-size: 48px 48px;
}

.car-guide-list li .ico2:focus-within:after:focus-within:after,
.car-guide-list li .ico2:hover:after {
    background: url(../images/ico-sos2_on.png) 0 0 no-repeat;
    background-size: 48px 48px;
}

.mb85 {
    margin-bottom: 85px;
}

.radio-wrap .radio-box {
    position: relative;
    display: inline-block;
    margin-right: 15px;
}

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

.radio-wrap .radio-box .inp-radio,
.radio-wrap .radio-box input {
    left: 0;
    position: absolute;
    width: 22px;
    height: 22px;
    opacity: 0;
    z-index: 0;
    border-radius: 50px;
}

.radio-wrap .radio-box label,
.radio-wrap .radio-box .label-radio {
    display: block;
    font-size: 14px;
    padding-left: 30px;
    font-weight: 600;
}

.radio-wrap .radio-box label::before,
.radio-wrap .radio-box .label-radio::before {
    top: -3px;
    left: 0;
    position: absolute;
    content: "";
    display: block;
    width: 22px;
    height: 22px;
    background-color: transparent;
    border: 2px solid #CCCCCC;
    border-radius: 50px;
    z-index: 1;
}

.radio-wrap .radio-box label::after,
.radio-wrap .radio-box .label-radio::after {
    top: 4px;
    left: 7px;
    position: absolute;
    content: "";
    display: block;
    width: 8px;
    height: 8px;
    background: #eaebed;
    border-radius: 50px;
    z-index: 2;
}

.radio-wrap .radio-box .inp-radio:checked+.label-radio:before,
.radio-wrap .radio-box .inp-radio:checked+label:before,
.radio-wrap .radio-box input:checked+.label-radio:before,
.radio-wrap .radio-box input:checked+label:before {
    background-color: #2c7fdf;
    border-color: #2c7fdf;
}

.radio-wrap .radio-box .inp-radio:checked+.label-radio:after,
.radio-wrap .radio-box .inp-radio:checked+label:after,
.radio-wrap .radio-box input:checked+.label-radio:after,
.radio-wrap .radio-box input:checked+label:after {
    background: #fff;
}

.radio-wrap .radio-box .inp-radio:disabled+.label-radio:before,
.radio-wrap .radio-box .inp-radio:disabled+label:before,
.radio-wrap .radio-box input:disabled+.label-radio:before,
.radio-wrap .radio-box input:disabled+label:before {
    border-color: #eaebed;
}

.radio-wrap .radio-box .inp-radio:disabled+.label-radio:after,
.radio-wrap .radio-box .inp-radio:disabled+label:after,
.radio-wrap .radio-box input:disabled+.label-radio:after,
.radio-wrap .radio-box input:disabled+label:after {
    background: #f3f4f6;
    background: #eaebed;
}

.radio-wrap .radio-box .inp-radio:checked:disabled+.label-radio:before,
.radio-wrap .radio-box input:checked:disabled+.label-radio:before {
    background: #2c7fdf;
    border-color: #2c7fdf;
    opacity: 0.4;
}

.radio-wrap .radio-box .inp-radio:checked:disabled+.label-radio:after,
.radio-wrap .radio-box input:checked:disabled+.label-radio:after {
    background: #fff;
}

.service-list {
    border-top: 1px solid #eee;
}

.service-list li {
    border-bottom: 1px solid #eee;
    padding: 16px 0;
}

.table-style {
    width: 100%;
    border-top: 1px solid #111;

}

.table-style tbody td {
    font-size: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #D8D8D8;
    line-height: 18px;
}

.table-style tbody tr:last-child td {
    border-bottom: 1px solid #111;
}

.table-style tbody td.bold {
    font-weight: 600;
    color: #111;
}
.table-style tbody td .tel {
    display: inline-block;
    width: 22px;
    height: 22px;
    background: url(../images/ico-tel.png) 0 0 no-repeat;
    background-size: 22px 22px;
    font-size: xx-small;
    color: transparent;
    margin: -4px 0 0 5px;
    vertical-align: top;
}
.map-ico {
    font-size:14px;
    color:#111;
}
.map-ico::before {
    content:'';
    display: inline-block;
    width: 13px;
    height: 16px;
    background: url(../images/ico-map.png) 0 0 no-repeat;
    background-size: cover;
    vertical-align: middle;
    margin-right: 10px;
}
.map-area {
    margin-top: 16px;
}
.mb10 {
    margin-bottom: 10px !important;
}

.bs-wrap .bs-cont .bs-tit .refresh {
    background: none;
    width: 22px;
    height: 22px;
    background: url(../images/ico-refresh.png) 0 0 no-repeat;
    background-size: cover;
    font-size: xx-small;
    color: transparent;
    border: none;
    vertical-align: middle;
    margin: -5px 0 0 0;
}
.person-info {
    margin-bottom: 33px;
}
.person-info::before {
    content:'';
    display: inline-block;
    width: 80px;
    height: 80px;
    background: url(../images/img-men.png) 0 0 no-repeat;
    background-size: cover;
}
.person-info  .person-info-cont {
    display: inline-block;
    margin-left: 14px;
}
.person-info .tit {
    font-size:16px;
    color:#111;
}
.person-info .con {
    margin: 10px 0 13px;
    font-size:16px;
    color:#A7A8AA;
}
.person-info .tel {
    font-size:18px;
    font-weight: 500;
    color:#0080E6;
}
.bullet-list {}
.bullet-list li {
    font-size:12px;
    color:#A7A8AA;
    margin-top: 5px;
    display: flex;
}
.bullet-list li::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 1px;
    background: #A7A8AA;
    margin-right: 10px;
    margin-top: 5px;
}
.bullet-list li:first-child {
    margin-top: 0;
}

.urgent-layer {
    position: absolute;
    top:80px;
    right:20px;
    height: 30px;
    color:#fff;
    font-size:14px;
    background: #007FE6;
    border-radius: 14px;
    min-width: 70px;
    padding: 0 10px;
    line-height: 2em;
}
.urgent-layer::before {
    content:'';
    display: inline-block;
    width: 17px;
    height: 16px;
    background: url(../images/img-urgent.png) 0 0 no-repeat;
    background-size: cover;
    vertical-align: middle;
    margin-top: -5px;
}
.mb20 {
    margin-bottom: 20px !important;
}


#drvDayTerm {
	padding: 0 24px;
    display: flex;
    justify-content: space-around;
    margin-top: 20px;
}

#pointPage {
	font-size: 12px;
}

#pointPage span {
	color: #1f78d0;
    font-weight: 500;
}


.driver-list-wrap .month-progress-box .select-type {
    flex: 0 1 0;
}

.driver-list-wrap .month-progress-box .select-type #cdSelect {
    height: 40px;
    padding: 5px 18px 0 0;
    border: 0;
    /* font-family:'notokr'; */
    font-family: "Inter", "SpoqaHanSansNeo", "notokr";
    font-size: 13px;
    font-weight: 500;
    box-sizing: border-box;
    background: url(../images/arrow-bottom.png) no-repeat 100% 50%;
    background-size: 12px auto;
    /* background: transparent; */
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    color: #111;
}

.driver-list-wrap .calendar-wrap #searchMon {
	border: 1px solid #eee;
	padding: 6px;
	box-sizing: border-box;
	width: 150px;
	font-size: 14px;
}

.driver-list-wrap .calendar-wrap #searchMonPop {
	width: 20px;   
    height: 20px;
    border: none;
    color: transparent;
    background: none;
    background-image: url(../images/ico-cla.png);   
    background-size: 20px 20px;
    background-repeat: no-repeat;
    display: inline-block;  
}  

#scoreSlide .swiper-pagination-bullet:only-child {
	display: inline-block !important;
}




/* loading */
.ui-loading{position:fixed; z-index:10000; width:100%; height:100%; }
.ui-loading-wrap{position:absolute; width:57px; height:95px; top:50%; left:50%; margin:-60px 0 0 -27px; display:table-cell; vertical-align: middle; cursor:default}
.ui-loading-bar{display:block; position:absolute; top:0; background:#a1adb7; width:9px; height:45px; margin:0; border-radius:2px;}
.ui-loading-bar.n2{left:12px}
.ui-loading-bar.n3{left:24px}
.ui-loading-bar.n4{left:36px}
.ui-loading-bar.n5{left:48px}
.ui-loading-txt{display:none !important; font-size:14px; color:#a1adb7; width:134px; position:absolute; bottom:20px; left:-35px; }
.ui-loading-txt span{display:block; padding:2px; background:#fff; }
	
/* calendar */
.l-calendar-open {position:absolute; right: 20px; top: 374px; display:inline-block;line-height:1.2;border:1px solid #666666; width: 55%; box-shadow:0px 2px 2px -1px rgba(0, 0, 0, 0.2); background:#fff; z-index:9999;}
.calendar-top {position:relative; border-bottom:1px solid #b8b8b8;height:40px;overflow:hidden;width:100%;display:table;table-layout:fixed}

.l-calendar-open .calendar-prev,
.l-calendar-open .calendar-next {display:table-cell; width:40px; background:#fff; cursor:pointer}
.l-calendar-open .calendar-prev {border-right:1px solid #b8b8b8;}
.l-calendar-open .calendar-next {border-left:1px solid #b8b8b8;}

.l-calendar-open .calendar-prev:hover,
.l-calendar-open .calendar-next:hover {background:#f2f2f2}
.calendar-open-input {display:table-cell;font-size:16px;text-align:center;border:none; font-weight:bold; vertical-align:middle;color:rgba(0,0,0,0.9)}

.l-calendar-open .calendar-prev:before,
.l-calendar-open .calendar-next:before {
	content:''; 
	display:inline-block; 
	position:absolute; 
	top:14px; 
	width:18px; height:28px;	
}

.l-calendar-open .calendar-prev:before {left:14px; background:url(../images/btn-prev.png) no-repeat 0 0; background-size: 9px;}
.l-calendar-open .calendar-next:before {right:6px;  background:url(../images/btn-next.png) no-repeat 0 0; background-size: 9px;}

.calendar-content {overflow:hidden; padding:10px;}
.calendar-active {color:#fff; background:#82c8e9}

.l-calendar-open.today {height:313px}
.l-calendar-open.today .calendar-content {height:calc(100% - 40px - 42px)}
.calendar-btm {border-top:1px solid #b2b2b2; height:42px}
.calendar-btm a {display:block; color:#222; font-size:16px; font-weight:bold; line-height:41px; letter-spacing:2px; text-align:center; border-width:1px 0 0; border-color:#b8b8b8; width:100%; height:100%}
.calendar-btm a:hover {background:#e5e5e5}

.pcalendar {width:100%;height:100%}
.pcalendar thead th {text-align:center;height:25px;color:rgba(0,0,0,0.9);}
.pcalendar thead th:first-child {color:#EB6663}
.pcalendar tbody td {text-align:center;vertical-align:middle;border-radius:50%;color:rgba(0,0,0,0.9)}
.pcalendar tbody td a {display:inline-block;font-size:14px;text-align:center;line-height:28px;width:30px;height:30px;vertical-align:middle;border-radius:50%}
.pcalendar tbody td a:hover {background:#e5e5e5}
.pcalendar tbody td a.calendar-active:hover {background:#82c8e9}
.pcalendar tbody td:nth-child(1) {color:#eb6663}
.pcalendar.month tbody td, .pcalendar.year tbody td {padding:8px 0px;}
.pcalendar.month tbody td a, .pcalendar.year tbody td a {line-height:40px;width:40px;height:40px}
.pcalendar.month tbody td:nth-child(1), .pcalendar.year tbody td:nth-child(1) {color:rgba(0,0,0,0.9)}
.prev-next {opacity:.4}

@media only screen and (min-height: 812px) and (max-height:1366px) {
    body {height:100vh;}
}