/* 메인 */

.section01{padding-bottom: 49px;}
.section01 ul{display: grid;grid-template-columns: repeat(2,1fr);grid-gap: 23px;}
.section01 ul li.v-box{border-radius: 33px;padding: 55px 0 59px;}
.section01 ul li.v-box a{display: flex;flex-direction: column;align-items: center;justify-content: center;}
.section01 ul li.v-box span{font-size: 28px;color: #fff;font-weight: bold;margin-top: 20px;font-family: 'paybooc';}
.section01 ul li.v-box1{background: transparent linear-gradient(180deg, #025EFF 0%, #004FD9 100%) 0% 0% no-repeat padding-box;box-shadow: 0px 11px 26px #025EFF4D;}
.section01 ul li.v-box1:hover{background: transparent linear-gradient(180deg, #0b57db 0%, #013693 100%) 0% 0%;}
.section01 ul li.v-box2{background: transparent linear-gradient(180deg, #1E2A52 0%, #0B1947 100%) 0% 0% no-repeat padding-box;box-shadow: 0px 11px 26px #1E2A524D;}
.section01 ul li.v-box2:hover{    background: transparent linear-gradient(180deg, #2441a3 0%, #041344 100%) 0% 0% ;}

.section02{background-color: #fff;border-radius: 30px 30px 0 0;padding: 55px 0 65px;}
.section02 .sec02-01{margin-bottom: 43px;}
.section02 .sec02-01 ul.notice-box{display: flex;align-items: center;background-color: #EFF4F8;border-radius: 24px;padding: 18px 20px;margin-bottom: 10px;}
.section02 .sec02-01 ul.notice-box02{margin-bottom: 0;}
.section02 .sec02-01 ul.notice-box li.calendar{background-color: #fff;border-radius: 12px;margin-right: 16px;}
.section02 .sec02-01 ul.notice-box li.calendar ul{padding: 11px 16px 12px;}
.section02 .sec02-01 ul.notice-box li.calendar ul li.d-01{font-size: 22px;line-height: 24px;color: #1E2A52;font-family: 'Roboto Mono';font-weight: 500;}
.section02 .sec02-01 ul.notice-box li.calendar ul li.d-02{font-size: 13px;line-height: 15px;color: #7E88A6;font-family: 'Roboto';font-weight: 500;}

.section02 .sec02-01 ul.notice-box li.info{text-align: left;}
.section02 .sec02-01 ul.notice-box li.info ul li{line-height: 33px;}
.section02 .sec02-01 ul.notice-box li.info ul li.info-txt{font-size: 21px;color: #1E2A52;font-weight: 500;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;word-break: break-all;width: 475px;}
.section02 .sec02-01 ul.notice-box li.info ul li.info-date{font-size: 15px;color: #7E88A6;font-family: 'Roboto Mono';font-weight: 400;}


.section02 .sec02-02 ul.stepBox{display: flex;align-items: center;justify-content: space-between;}
.section02 .sec02-02 ul.stepBox li.step{background-color: #EFF4F8;border-radius: 17px;width: 124px;height: 124px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.section02 .sec02-02 ul.stepBox li.step span{font-size: 18px;line-height: 23px;margin-top: 12px;font-weight: 700;font-family: 'paybooc';}


/* ***************** 사용자 화면 (로그인 후)***************** */
main.user-main{position: relative}

.login-user ul.user-top{display: flex;align-items: center;justify-content: flex-start;margin-bottom: 41px;}
.login-user ul.user-top li.user-name{font-size: 20px;font-weight: bold;color: #1E2A52;font-family: 'paybooc';}
.login-user ul.user-top li.user-name span{font-size: 27px;font-weight: 800;margin-right: 3px;}
.login-user ul.user-top li .user-icon{position: relative;background-color: #025EFF;width: 66px;height: 66px;border-radius: 50%;box-shadow: 0px 11px 26px #025EFF78;margin-right: 13px;}
.login-user ul.user-top li .user-icon::before{content: '';position: absolute;background: url('../img/user_ico.png') no-repeat center;width: 100%;height: 100%;top: 0;left: 0;}

.login-user ul.user-info{display: grid;grid-template-columns: repeat(3,1fr);grid-gap: 11px;position: absolute;width: calc(100% - 96px);}
.login-user ul.user-info li.u-box{border-radius: 24px;width: 100%;height: 193px;padding: 25px 24px 23px;transition: .5s;cursor: pointer;}
.login-user ul.user-info li.u-box1{background: url('../img/v-box-bg01.jpg') no-repeat center / cover;width: 100%;height: 193px;position: relative;}
.login-user ul.user-info li.u-box2{background: url('../img/v-box-bg02.jpg') no-repeat center / cover;width: 100%;height: 193px;position: relative;}
.login-user ul.user-info li.u-box3{background: url('../img/v-box-bg03.jpg') no-repeat center / cover;width: 100%;height: 193px;position: relative;}

.login-user ul.user-info li.box-hover01:hover{box-shadow: 0px 11px 14px #0050DC91;transform: translate(0, -10px);}
.login-user ul.user-info li.box-hover01::after{position: absolute;content: '';top: 0;left: 0;width: 100%;height: 100%;border-radius: 24px;box-sizing: border-box;border: 4px solid transparent;transition: .6s;}
.login-user ul.user-info li.box-hover01:hover::after{border: 4px solid #005DFF;}
.login-user ul.user-info li.box-hover02:hover{box-shadow: 0px 11px 14px #00A1F191;transform: translate(0, -10px);}
.login-user ul.user-info li.box-hover02::after{position: absolute;content: '';top: 0;left: 0;width: 100%;height: 100%;border-radius: 24px;box-sizing: border-box;border: 4px solid transparent;transition: .6s;}
.login-user ul.user-info li.box-hover02:hover::after{border: 4px solid #3DBFFF}
.login-user ul.user-info li.box-hover03:hover{box-shadow: 0px 11px 14px #1E2A5291;transform: translate(0, -10px);}
.login-user ul.user-info li.box-hover03::after{position: absolute;content: '';top: 0;left: 0;width: 100%;height: 100%;border-radius: 24px;box-sizing: border-box;border: 4px solid transparent;transition: .6s;}
.login-user ul.user-info li.box-hover03:hover::after{border: 4px solid #0035E1;}



.login-user ul.user-info li.u-box a{display: flex;flex-direction: column;align-items: flex-start;justify-content: space-between;}
.login-user ul.user-info li.u-box a h4{font-size: 25px;font-weight: bold;color: #fff;font-family: 'paybooc';margin-bottom: 44px;}
.login-user ul.user-info li.u-box a .num{align-self: flex-end;font-size: 22px;font-family: 'paybooc';color: #fff;}
.login-user ul.user-info li.u-box a .num span{font-size: 72px;font-family: 'Roboto';font-weight: 100;vertical-align: sub;line-height: 87px;}


.user-section{margin-top: 145px;padding-top: 136px;}
.user-section .visitBtn-wrap{padding-top: 87px;margin-bottom: 55px;}
.user-section .visitBtn-wrap button.visit-btn{width: 100%;height: 103px; background-color: #EFF4F8;border: 1px solid #025EFF;border-radius: 24px;font-size: 27px;font-weight: 800;font-family: 'paybooc';color: #0052E0;}
.user-section .visitBtn-wrap button.visit-btn a{display: flex;align-items: center;justify-content: center; }
.user-section .visitBtn-wrap button.visit-btn:hover{background-color: #025EFF;color: #fff;}
.user-section .visitBtn-wrap button.visit-btn img{margin-right: 13px;}
.user-section .visitBtn-wrap button.visit-btn img.img-hover{display: none;}
.user-section .visitBtn-wrap button.visit-btn:hover img.img-basic{display: none;}
.user-section .visitBtn-wrap button.visit-btn:hover img.img-hover{display: inline-block;}

.login-user ul.user-info li.current01{box-shadow: 0px 11px 14px #0050DC91;border: 4px solid #005DFF;transform: translate(0, -10px);}
.login-user ul.user-info li.current02{box-shadow: 0px 11px 14px #00A1F191;border: 4px solid #3DBFFF;transform: translate(0, -10px);}
.login-user ul.user-info li.current03{box-shadow: 0px 11px 14px #1E2A5291;border: 4px solid #0035E1;transform: translate(0, -10px);}


.user-section .cont-wrap .user-box{background-color: #EFF4F8;border-radius: 24px;padding: 32px 35px 35px;margin-bottom: 51px;}
.user-section .cont-wrap .user-box .contNum{font-size: 30px;font-weight: 500;font-family: 'Roboto Mono';text-align: left;margin-bottom: 8px;}
.user-section .cont-wrap .user-box ul.contInfo{display: flex;align-items: center;justify-content: space-between;}
.user-section .cont-wrap .user-box ul.contInfo li{font-size: 21px;line-height: 37px;}
.user-section .cont-wrap .user-box ul.contInfo li.info-tit{font-weight: 500;color: #1E2A52;}
.user-section .cont-wrap .user-box ul.contInfo li.info-cont{font-weight: 400;color: #7E88A6;}
.user-section .cont-wrap .user-box ul.contInfo li.info-point{color: #005DFF;font-weight: 500;}



@media (max-width: 800px) {

    /* 메인 */
    .section02 .sec02-01 ul.notice-box li.info ul li.info-txt{width: 370px;}

    /* 사용자 화면 (로그인 후) */
    .login-user ul.user-info li.u-box{height: 176px;}
    .login-user ul.user-info li.u-box a h4{font-size: 20px;}
    .login-user ul.user-info li.u-box a .num{font-size: 18px;}
    .login-user ul.user-info li.u-box a .num span{font-size: 58px;}

}

@media (max-width: 720px) {

    /* 사용자 화면 (로그인 후) */
    .user-section-mo{padding-top: 109px !important;}
    .login-user ul.user-top li .user-icon{width: 55px;height: 55px;}
    .login-user ul.user-top li.user-name{font-size: 18px;}
    .login-user ul.user-info li.u-box{padding: 20px 15px;height: 145px;}
    .login-user ul.user-info li.u-box a h4{font-size: 18px;margin-bottom: 22px;}
    .login-user ul.user-info li.u-box a .num{font-size: 15px;}
    .login-user ul.user-info li.u-box a .num span{font-size: 52px;}
    .user-section{padding-top: 38px;margin-top: 126px;}
    .user-section .visitBtn-wrap button.visit-btn{font-size: 23px;height: 76px;}
    .user-section .visitBtn-wrap button.visit-btn img{width: 18px;}
    .login-user ul.user-info li.u-box1::before{right: -74px;bottom: -54px;}
    .login-user ul.user-info li.u-box2::before{right: -70px;bottom: -49px;}
    .login-user ul.user-info li.u-box3::before{right: -44px;bottom: -49px;}

    .user-section .cont-wrap .user-box .contNum{font-size: 26px;}
    .user-section .cont-wrap .user-box ul.contInfo li{font-size: 18px;line-height: 34px;}

}

@media (max-width: 600px) {

    /* 메인 */
    .section01 ul{grid-gap: 15px;}
    .section01 ul li.v-box{padding: 35px 0 40px;}
    .section01 ul li.v-box span{font-size: 20px;}
    .section02 .sec02-01 ul.notice-box{padding: 10px 15px;}
    .section02 .sec02-01 ul.notice-box li.calendar ul{padding: 8px 14px;}
    .section02 .sec02-01 ul.notice-box li.info ul li{line-height: 27px;}
    .section02 .sec02-01 ul.notice-box li.calendar ul li.d-01{font-size: 19px;}
    .section02 .sec02-01 ul.notice-box li.calendar ul li.d-02{font-size: 11px;}
    .section02 .sec02-01 ul.notice-box li.info ul li.info-txt{width: 280px;font-size: 14px;}
    .section02 .sec02-01 ul.notice-box li.info ul li.info-date{font-size: 13px;}
    .section02 .sec02-02 ul.stepBox li.step{width: 70px; height: 90px;}
    .section02 .sec02-02 ul.stepBox li.step img.step_img01{width: 25px;}
    .section02 .sec02-02 ul.stepBox li.step img.step_img02{width: 23px;}
    .section02 .sec02-02 ul.stepBox li.step img.step_img03{width: 28px;}
    .section02 .sec02-02 ul.stepBox li.step img.step_img04{width: 30px;}
    .section02 .sec02-02 ul.stepBox li.step span{font-size: 13px;}

    /* 사용자 화면 (로그인 후) */
    .login-user ul.user-info{width: calc(100% - 60px);}
    .user-section{margin-top: 113px;}


}

@media (max-width: 500px) {

    /* 메인 */
    .section02 .sec02-01 ul.notice-box li.info ul li.info-txt{width: 220px;}
    .section02 .sec02-02 ul.stepBox li.step span{margin-top: 7px;}

    /* 사용자 화면 (로그인 후) */
    .login-user ul.user-top li .user-icon{width: 45px;height: 45px;}
    .login-user ul.user-top li .user-icon::before {width: 98%; height: 51%;background-size: contain;margin-top: 9px;}
    .login-user ul.user-top li.user-name span{font-size: 22px;}
    .login-user ul.user-top li.user-name{font-size: 16px;}
    .login-user ul.user-info {width: calc(100% - 40px);grid-gap: 8px;}
    .login-user ul.user-info li.u-box{height: 115px;border-radius: 20px;}
    .login-user ul.user-info li.u-box a h4{font-size: 15px;margin-bottom: 15px;}
    .login-user ul.user-info li.u-box a .num{font-size: 13px;}
    .login-user ul.user-info li.u-box a .num span{font-size: 40px;line-height: 59px;}
    .user-section .visitBtn-wrap button.visit-btn{font-size: 21px;height: 65px;}
    .user-section .visitBtn-wrap button.visit-btn img{width: 15px;}
    .user-section-mo{padding-top: 100px !important;}
    .user-section .cont-wrap .user-box{padding: 25px 23px;}
    .user-section .cont-wrap .user-box ul.contInfo li{font-size: 16px;line-height: 31px;}
    .user-section{margin-top: 98px;}

    .user-section .cont-wrap .user-box .contNum{font-size: 22px;}
}

@media (max-width: 420px) {

    /* 메인 */
    .section01 ul li.v-box{border-radius: 25px;}
    .section01 ul li.v-box {padding: 26px 0 30px;}
    .section01 ul li.v-box img.v-img01{width: 30px;}
    .section01 ul li.v-box img.v-img02{width: 37px;}
    .section01 ul li.v-box span{font-size: 16px;}
    .section02 .sec02-01 ul.notice-box{border-radius: 14px;padding: 10px;}
    .section02 .sec02-01 ul.notice-box li.calendar{border-radius: 11px;}
    .section02 .sec02-01 ul.notice-box li.info ul li.info-txt{width: 180px;}
    .section02 .sec02-02 ul.stepBox li.step{width: 66px;height: 86px;border-radius: 11px;}
    .section02 .sec02-02 ul.stepBox li img.arrow_img{width: 6px;}
    .section02 .sec02-02 ul.stepBox li.step span{font-size: 12px;}
    

    /* 사용자 화면 (로그인 후) */
    .login-user ul.user-info {width: calc(100% - 30px);}
    .login-user ul.user-info li.u-box{padding: 15px 10px;height: 100px;}
    .login-user ul.user-info li.u-box a h4{font-size: 13px;}
    .login-user ul.user-info li.u-box a .num{font-size: 12px;}
    .login-user ul.user-info li.u-box a .num span{font-size: 34px;}
    .login-user ul.user-info li.current01{border: 3px solid #005DFF;}
    .login-user ul.user-info li.current02{border: 3px solid #3DBFFF;}
    .login-user ul.user-info li.current03{border: 3px solid #0035E1;}
    .user-section{margin-top: 88px;}
    .user-section .visitBtn-wrap{padding-top: 65px;}
    .user-section .cont-wrap .user-box ul.contInfo li{font-size: 14px;line-height: 28px;}
    .user-section .visitBtn-wrap button.visit-btn{font-size: 18px;height: 60px;border-radius: 20px;}
    .user-section .visitBtn-wrap button.visit-btn img{width: 13px;}
    
}

@media (max-width: 390px) {
    .section02 .sec02-02 ul.stepBox li.step{width: 60px;height: 78px;}

    /* 사용자 화면 (로그인 후) */
    .login-user ul.user-top li .user-icon{width: 35px;height: 35px;margin-right: 10px;}
    .login-user ul.user-top li .user-icon::before{width: 1095;height: 47%;}
    .login-user ul.user-top li.user-name{font-size: 15px;}
    .login-user ul.user-top li.user-name span{font-size: 20px;}
    .login-user ul.user-info li.u-box{border-radius: 18px;}
    .login-user ul.user-info li.u-box a .num span{font-size: 30px;}
    .user-section{margin-top: 88px;}
    .user-section .cont-wrap .user-box ul.contInfo li{font-size: 13px;}
}