@font-face {
    font-family: 'Source Han Sans Cn';
    font-style: normal;
    font-weight: 400;
    src: url('fonts/NotoSansSC-Regular.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Source Han Sans Cn';
    font-style: normal;
    font-weight: 500;
    src: url('fonts/NotoSansSC-Medium.woff2') format('woff2');
    font-display: swap;
}
@font-face {
    font-family: 'Source Han Sans Cn';
    font-style: normal;
    font-weight: 700;
    src: url('fonts/NotoSansSC-Bold.woff2') format('woff2');
    font-display: swap;
}

* {box-sizing:border-box;}
html,body {margin:0;border:0;padding:0;font:12px work-sans,'Source Han Sans Cn';color:#222;background:#001832;height:100%; position: relative;}


body .bgleft {position: fixed;z-index: 0;width:40%;height:60%;left:0;bottom:0; background:url(img/bgleft.svg) right top no-repeat;background-size:100% auto;opacity: 0.4;}
body .bgleft::after {content: ''; position: fixed;z-index: 0;width:40%;height:60%;left:0;bottom:0; background:url(img/bodyshow.png) right top no-repeat;background-size:100% auto; }
body .bgright {content: ''; position: fixed;z-index: 0;width:40%;height:60%;right:0;top:0; background:url(img/bgright.svg) right bottom no-repeat;background-size:100% auto;opacity: 0.4;}
body .bgright::after {content:'';position: fixed;z-index: 1;width:40%;height:60%;right:0;top:0; background:url(img/bodyshow.png) right bottom no-repeat;background-size:100% auto; }




a {text-decoration:none;color: #111;}
.clearfix {clear:both;}
dl,dt,dd,ul,li {padding:0;margin:0; list-style: none}
input:focus-visible {outline-offset: 0;}
input,select,textarea,button{outline:none;}

input::placeholder {color:#999;}
textarea::placeholder {color:#999;}




/**login**/

.login-box {
    width: 904px;
    height: 440px;
    border-radius:10px;
    color: #616161;
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    transform:translate(-50%,-50%);
    padding-bottom:10px;
    background: rgba(0,0,0,0.1);
    backdrop-filter:blur(5px);

}

.content {
    padding:60px 50px;
    display: flex;
    flex-direction: row;
    width:100%;
}
.leftmain {
    width: 35%;
}

.leftmain .logo  img {
    width:111px;

}
.leftmain .ma {
    padding: 10px;
    display: inline-block;
    background: #fff;
    margin: 20px 0;
    border-radius: 10px;
}

.leftmain .ma img {
    width:200px;
    border-radius: 10px;
}
.leftmain .info {
    font-size:14px;
    color:rgba(255,255,255,0.6);
    line-height:24px;
}
    

.rightform {
    width:65%;
    
}

.rightform .cont {
    margin:0 20px 0 70px;
    border-left:1px solid rgba(255,255,255,0.2);
    padding-left:70px;
}


.rightform .cont dl {
    display: flex;
    flex-direction: row;
    width:100%;
}

.rightform .cont dl dt {
    text-align:left;
    font-size:36px;
    color:#fff;
}
.rightform .cont dl dd {
    width: 20%;
    text-align: right;
    align-content: center;
    position: relative;
}
.rightform .cont dl dd .ma {
    position: absolute;
    left:120%;
    top:0;
    display: none;
}

.rightform .cont dl dd:hover .ma {
    display: block;
}

.rightform .cont ul {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top:20px;
}

.rightform .cont ul li {
    width:100%;
    background:#fff;
    height:60px;
    border-radius:30px;
    margin-top:15px;
}

.rightform .cont ul li label {
    float:left;
    width:60px;
    height:22px;
    text-align: center;
    margin-top:19px;
    border-right:1px solid #E8E8E8;
}

.rightform .cont ul li input {
    display: block;
    box-sizing:border-box;
    width:calc(100% -60px);
    font-size:18px;
    padding:16px 20px;
    border:0;
    line-height: 28px;
}

.rightform .cont ul li button {
    display: block;
    width:100%;
    text-align: center;
    background: #DFDD47;
    font-size:16px;
    border:0;
    height:60px;
    border-radius: 30px;
    letter-spacing: 2px;
    color:#001832;
    cursor: pointer;
    font-weight: 200;
    transition: background 0.5s;
}


.rightform .cont ul li button:hover {
    background: #42A3DE;
}






/**work**/
.w1550 {
    max-width: 1550px;
    margin:0 auto;
}


span.icon {
    width:17px;
    height:17px;
    border-radius: 50%;
    display: inline-block;
}
span.icon.icon-workday {
    background: url(img/icon-normal.svg) no-repeat center center #B6C2CC;
    background-size:50% 50%
}

span.icon.icon-normal {
    background: url(img/icon-normal.svg) no-repeat center center #DFDD47;
    background-size:50% 50%
}
span.icon.icon-half-day {
    background: url(img/icon-half-day.svg) no-repeat center center #D0285C;
    background-size:50% 50%
}
span.icon.icon-no {
    background: url(img/icon-no.svg) no-repeat center center #EA5D33;
    background-size:40% 40%
}
span.icon.icon-annual {
    background: url(img/icon-annual.svg) no-repeat center center #42A3DE;
    background-size:50% 50%
}
span.icon.icon-sick {
    background: url(img/icon-sick.svg) no-repeat center center #14D1CA;
    background-size:50% 50%
}
span.icon.icon-wedding {
    background: url(img/icon-wedding.svg) no-repeat center center #DE42A2;
    background-size:50% 50%
}
span.icon.icon-maternity1 {
    background: url(img/icon-maternity1.svg) no-repeat center center #1058CB;
    background-size:50% 50%
}
span.icon.icon-maternity2 {
    background: url(img/icon-maternity2.svg) no-repeat center center #7242DE;
    background-size:50% 50%
}
span.icon.icon-bereavement {
    background: url(img/icon-bereavement.svg) no-repeat center center #1E1E1E;
    background-size:50% 50%
}
span.icon.icon-statutory {
    background: url(img/icon-statutory.svg) no-repeat center center #3FAC46;
    background-size:50% 50%
}








/**header**/
.header {
    padding-top:45px;
    position: relative;
    z-index: 1;
}
.header .logo {
    float:left;
}
.header .nav {
    float: right;
}
.header .nav .btn {
    float:left;
    position: relative;
}

.header .nav .btn .ma {
    position: absolute;
    left:40px;
    top:0;
    display:none;
}
.header .nav .btn .ma img {
    border-radius: 10px;
}
.header .nav .btn:hover .ma {
    display: block;
}

.header .nav .icon-smallprogram {
    float:left;
    width:34px;
    height:34px;
    border:1px solid #DFDD47;
    border-radius: 50%;
    background: url(img/icon-smallprogram.svg) no-repeat center center;
    background-size:14.27px 13.38px;

}
.header .nav .logout {
    font-size:16px;
    color:rgba(255,255,255,0.5);
    float:left;
    background: url(img/icon-logout.svg) no-repeat right center;
    background-size:18.39px 19.63px;
    padding-left:30px;
    padding-right:30px;
    margin-left:30px;
    border-left:1px solid rgba(255,255,255,.4);
    line-height:20px;
    margin-top:7px;
}
.header .nav .logout:hover {
    color:#DFDD47;
}





/**main**/

.main {
    display: flex;
    flex-direction: row;
    width:100%;
    z-index: 1;
    position: fixed;
    top:52%;
    left:50%;
    transform:translate(-50%,-50%);
}

.main .left {
    width:380px;
    display: flex;
    flex-direction: column;
}
.main .work-cont {
    width:760px;
}
.main .right {
    width:410px;
    text-align: center;
}


.main .left .title h2 {
    font-size:40px;
    color:#fff;
    margin:0 0 10px 0;
    font-weight: 400;
}

.main .left .title p {
    font-size:14px;
    color:rgba(255,255,255,.6); 
    margin:0;
}

.main .left .list {
    margin-top:30px;
    position: relative;
    height:100%;
}
.main .left .list ul {
    display: block;
    margin:0;
}
.main .left .list ul li {
    color:rgba(255,255,255,.6);
    font-size:14px;
    line-height:25px;
    padding:7px 0;
}

.main .left .list ul li span.icon {
    width:25px;
    height:25px;
    float:left;
    margin-right:15px;
}

.main .left .list dl {
    font-size:14px;
    position: relative;
    margin-top: 20px;
    left:0;
    bottom:0;
    width:100%;
}
.main .left .list dl dt {
    display:block;
    color:#fff;
    line-height:30px;
}
.main .left .list dl dd {
    display:block;
    color:rgba(255,255,255,.6);
    line-height: 24px;
    padding-left:20px;
    position: relative;
}
.main .left .list dl dd::after {
    display: block;
    content: '';
    width:10px;
    height:10px;
    border-radius:50%;
    position: absolute;
    left:0;
    top:7px;
    background:#42A3DE;
}







.work-cont .title {
    display: flex;
    flex-direction: row;
    width:100%;
}
.work-cont .title .name {
    font-size:24px;
    color:#fff;
    text-align: left;
    width: 560px;
    line-height: 40px;
    position: relative;
    padding-left:40px;

}
.work-cont .title .name img {
    margin-right:10px;
    position: absolute;
    left:0;
    top:50%;
    transform: translateY(-50%);
}
.work-cont .title .dateselect {
    text-align:right;
    position: relative;
    width: 200px;
}



.work-cont .title .dateselect .selected {
    border:1px solid rgba(255,255,255,.4);
    border-radius:6px;
    width:200px;
    height:40px;
    line-height:40px;
    text-align: left;
    background:url(img/icon-arrow.svg) no-repeat 170px center;
    font-size:14px;
    color:#fff;
    padding-left:20px;
    cursor: pointer;
}

.work-cont .title .dateselect ul {
    position: absolute;
    left:0;
    top:40px;
    width:100%;
    background:rgba(66,163,222,0.9);
    border-radius: 6px;
    box-shadow: 0 5px 5px rgba(0,0,0,.2);
    padding:10px 0;
    display: none;
    max-height: 300px;
    overflow-y:auto;

}
.work-cont .title .dateselect:hover ul {
    display: block;
}
.work-cont .title .dateselect ul li {
    display: block;
    line-height:30px;
    font-size:14px;
    color:#fff;
    text-align: left;
    padding-left:20px;
    cursor: pointer;
    transition: background 0.5s;
    cursor: pointer;
    margin-left: 20px;
}
.work-cont .title .dateselect ul li.optgroup {
    cursor: default;
    margin-left: 0;
    font-weight: bold;
}
.work-cont .title .dateselect ul li.option:hover,
.work-cont .title .dateselect ul li.active {
    background:rgba(223,221,71,0.9);
}


.table {
    border:1px solid #33465B;
    border-radius: 6px;
    margin-top:30px;
}
.table table {
    width:100%;
}

.table table tr td {
    border-right:1px solid #33465B;
    border-bottom:1px solid #33465B;
    font-size:20px;
    color:#fff;
    text-align: center;
    padding:12px 0;
    width: 14.2857%;
    vertical-align: top;
}
.table table tr td:last-child {
    border-right:0;
}
.table table tbody tr:last-child td {
    border-bottom:0;
}
.table table tbody tr:last-child td:nth-child(1) {
    border-radius: 0 0 0 6px;
}
.table table tbody tr:last-child td:nth-child(7) {
    border-radius: 0 0 6px 0;
}

.table table tr td:nth-child(6),
.table table tr td:nth-child(7) {
    color:#42A3DE;
}

.table table tr td:nth-child(6) span.lunar ,
.table table tr td:nth-child(7) span.lunar  {
    color:#42A3DE;
}


.table table tr td span {
    display: block;
}

.table table tr td span.lunar {
    font-size:10px;
    color:rgba(255,255,255,0.5);
}

.table table tr td span.icon {
    width:18px;
    height:18px;
    margin:0 auto;
    margin-top:10px;
}

.table table tr td.festival {
    background:rgba(63,172,70,0.3);
}

.table table tr td.festival .date {
    color:#fff;
}
.table table tr td.festival .lunar {
    color:rgba(255,255,255,0.5) !important;
}






/*right 圆环svg*/
.right .attendance {
    float:right;
    width:320px;
}

.right .number {
    float:right;
    width:320px;
}

.right .attendance .name,
.right .number .name {
    font-size:14px;
    color:#fff;
    margin:20px 0 50px 0;
}


.right .btn-confirm {
    display: block;
    border:0;
    height: 60px;
    line-height: 60px;
    background:#DFDD47;
    border-radius:30px;
    color:#001832;
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: bold;
    float: right;
    width:320px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.5s;
}
.right .btn-confirm:hover {
    background:#42A3DE;
}

/* 确认后加 .clicked */
.right .btn-confirm.clicked {
    background: #667484;
}

.progress-circle {
  --percent: 0;  /* 百分数 */
  --size: 180px;  /* 尺寸大小 */
  --border-width: 15px;  /* 环宽（粗细） */
  --gap-degree: 0;  /* 缺口夹角 */
  --color: #DFDD47;  /* 主色 */
  --color2: #42A3DE;  /* 主色2 */
  --inactive-color: rgba(255,255,255,0.2);  /* 辅助色 */
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  margin:0 auto;
}

.progress-circle .icon {
    width:42px;
    height:42px;
    position: absolute;
    top:-15px;
    left:50%;
    transform: translateX(-50%);
    z-index: 9
}

.progress-circle .setp {
    position: absolute;
    top:50%;
    left:50%;
    z-index: 3;
    transform: translate(-50%,-50%);
}
.progress-circle .setp .done {
    color:#fff;
    font-size:52px;
    display: block;
}

.progress-circle .setp .all {
    font-size:16px;
    color:rgba(255,255,255,.5);
    display: inline-block;
    border-top:1px solid rgba(255,255,255,.5);
    margin-top:5px;
    padding-top:10px;
}


/* SVG 容器 */
.progress-circle > svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

/* 进度条圆环 */
.progress-circle circle {
  --r: calc((var(--size) - var(--border-width)) / 2);
  --active-degree: calc(360 - var(--gap-degree));
  cx: calc(var(--size) / 2);
  cy: calc(var(--size) / 2);
  r: var(--r);
  fill: none;
  stroke-linecap: round;  
}

.progress-value {
  opacity: var(--percent);
  transition: stroke-dasharray .4s linear, stroke .3s;
}


@media screen and (max-width:1920px) {
    body {zoom: 0.9;}
}

@media screen and (max-width:1440px) {
    .w1550 {max-width: 1440px;}
}



/**mobile css**/

@media screen and (max-device-width:480px) {
    body {zoom: 1;}
    
    .login-box{
        width:100%;

    }


    .content {
        padding:40px;
        text-align: center;
    }
    
    .leftmain {
        width: 100%;
    }

	
    .leftmain .ma img {
        opacity: 1;
    }


    .rightform {
        display: none;
    }

}

@media screen and (max-device-width: 480px) {
	

}