/*----------------------------------------------------reset----------------------------------------------------*/

html {
    color: #000;
   /* background: #38B484;*/
}

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

ol, ul {
    list-style: none;
}

fieldset, img, button {
    border: 0;
}

input {
    border: 0;
    outline: none;
}

body * {
    /*font-family: "Microsoft YaHei";*/
    font-family: 'Source Sans Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: #191a1d;
}

table {
    border-collapse: separate;
}

body > div:first-child {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    display: flex;
}

select {
    background-color: rgba(0, 0, 0, 0);
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px white inset;
    -webkit-text-fill-color: #364A63;
}

input:disabled, select:disabled { /*    background-color: rgb(235, 235, 228) !important; color: rgb(84, 84, 84) !important;*/
}

input[warning], select[warning] {
    background-color: rgb(251, 230, 199) !important; /*color: rgb(84, 84, 84) !important;*/
}

a {
    text-decoration: none;
    display: block;
    text-align: center;
}

.company {
    display: none;
}

table { /*    border-collapse: collapse; border: none;*/
    border-collapse: collapse;border: none;
}

input::-webkit-input-placeholder {
    color: #adb6be;
}

input::-moz-placeholder { /* Mozilla Firefox 19+ */
    color: #adb6be;
}

input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
    color: #adb6be;
}

input:-ms-input-placeholder { /* Internet Explorer 10-11 */
    color: #adb6be;
}

.path1, .path2, .path3, .path4, .path5, .path6, .path7, .path8, .path9, .path10, .path11, .path12, .path13, .path14, .path15 {
    font-family: "h_icomoon";
}

.form-required {
    content: "*";
    display: inline-block;
    margin-right: 4px;
    color: #ff4d4f;
    font-size: 14px;
    line-height: 1;
}

i {
    color: #ff4d4f;
    font-size: 14px;
    line-height: 1;
    font-weight: bold;
}

::before,::after{
    font-family: 'sharp-light';
}
/*提示標籤*/
.tooltip {
    position: relative;
    display: inline-block;
    cursor: pointer;
}
.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    padding: 4px 8px;
    background: rgba(10, 24, 37, 0.75);
    color: #dce3ff;
    border-radius: 4px;
    white-space: nowrap;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}
.tooltip:hover::after {
    opacity: 1;
}
button{
    cursor: pointer;
}
button:hover{
    opacity: 0.8;
}
/*彈出窗口動畫*/
@keyframes slideDown {
    from {
        top: -200px; /* Adjust according to your popup height */
        opacity: 0;
    }
    to {
        top: 20%;
        opacity: 1;
    }
}
/*全局颜色*/
:root { --color-deep: #d4f0cb;/*--color-deep: #4664a4;--color-deep: #38b484;*/ --color-light: #478059;  --color-font: #6D6D6D;   --color-light-gray: #d4f0cb; }
/*------------------------------------------全局框架----------------------------------------------------*/
/*----------------------------------------------------header----------------------------------------------------*/
main {
    background-color: #f5f5f5;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

section {
    flex: 1;
    overflow: auto;
    width: 100%;
    background-color: #f5f5f5;
    min-height: 100vh;
    display: flex;
    flex-direction: row;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;

}

section .g-m {
    margin: 0 auto;
    display: flex;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    width: calc(100% - 150px) !important;
    transition: all 0.3s ease;
    /*overflow-y: auto;
    -webkit-overflow-scrolling: touch;*/
}

/*全局外框架*/
section .g-t {
    text-align: center;
}

/*全局標題*/
section .g-t > div {
}

section .g-t > div > h1 {
    font-size: 22px;
    font-weight: normal;
    color: #3f85c6;
}

section .g-t > div > h1 > span {
    font-size: 22px;
    font-weight: normal;
    color: #32b5e5;
    margin: 0 5px;
}

section .g-c {
}

/*全局內容框架*/
.page {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 10px;
}

.page > div {
    display: flex;
    align-items: center;
    flex-direction: row;
}
.page > div >p {
    font-size: 13px;
}
.page > div >p>span {
    font-size: 13px;
}

.page > div > ul {
    display: flex;
    flex-wrap: wrap;
}

.page > div > ul > li {
    margin: 0 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.page > div > ul > li:nth-child(1) > a, .page > div > ul > li:nth-last-child(1) > span, .page > div > ul > li:nth-last-child(1) > a, .page > div > ul > li:nth-child(1) > span {
    background-color: #1c4398;
    width: 20px;
    height: 20px;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24px;
    line-height: 20px;
    padding: 0px 2px 4px 2px;
    box-shadow: 0 1px 5px 0 rgba(0,0,0,0.05);
    color: #fff;
}

.page > div > ul > li > span {
    background-color: #c6dde3;
    color: #fff;
    padding: 4px;
    line-height: 16px;
    border-radius: 15px;
    width: 15px;
    height: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}

.page > div > ul > li > a {
    font-size: 13px;
}

.page > div > div {
}

.page > div > div > span {
}

.g-search {
}

.g-search_m {
    display: flex;
    background-color: #fff6ef;
    justify-content: center;
    align-items: center;
}

.g-search_m form {
    display: flex;
    align-items: center;
}

.g-search ul {
    display: flex;
    padding: 10px 3px;
    justify-content: center;
}

.g-search ul > li {
    margin-left: 5px;
    display: flex;
}

.g-search ul > li > span {
    font-size: 12px;
    color: #535668;
    margin-right: 3px;
    line-height: 20px;
}

.g-search ul > li > input {
    border: 1px solid #d7d7d7;
    font-size: 14px;
    padding: 0 3px;
    width: 130px;
}

.g-search_but {
    display: flex;
}

.g-search_but button, .g-search_but a {
    background-color:  var(--color-deep);
    color: #fff;
    border-radius: 7px;
    padding: 2px 12px;
    margin-left: 12px;
}


/*-------------------------導航--------------------------*/
#myNavbar{
    background-color: #d4f0cb;
    overflow: auto;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    width: 150px !important;
}
/* 导航固定时的样式 */
#myNavbar.fixed {

    top: 0;
    width: 100%;
    z-index: 999; /* 确保导航在其他内容之上 */
    box-shadow: 0 1px 5px 0 #adefb2;
}
.logo {
    background-color: #97dca9;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px 0;
    transition: all 0.3s ease;
    width: 100%;
}

.logo>a{}
.logo>a>h1{
    font-size: 24px;
    font-family: "Times New Roman";
    font-weight: bold;
    text-align: center;
    line-height: 26px;
    color: #fff;
}

.logo img {
    width:110px;
}

.logo_display {
    display: none;
    transition: all .6s ease;
}

nav {
    position: relative;
    width: 100%;
    background-color: #d4f0cb;
    overflow: auto;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    width: 150px !important;
}

.menu{
    position: relative;
    width: 100%;
    /*margin-top: 30px;*/
}
.menu>ul {
    margin-top: 35px;
    width: calc(100% - 10px);
    margin-left: 10px;
}

.menu_display {
    display: none;
    transition: all .6s ease;
}

.menu>ul>li {
    padding: 8px 0;
    width: 100%;
    margin: 10px 0;
    position: relative;
}

.menu>ul>li:hover {
}
.menu>ul>li a:hover {
    color: #fd9b07;
}

.menu>ul>li a {
    background-repeat: no-repeat;
    background-size: 20px;
    background-position: center left;
    line-height: 29px;
    color: #478056;
    display: flex;
    justify-content: flex-start;
    margin: 0 8px;
    padding: 0 5px;
    font-size: 14px;
    font-weight: bold;
    align-items: center;
}
.menu>ul>li>a>p{
    font-size: 14px;
    line-height: 29px;
    color: #478056;
    transition: all 0.3s ease;
    margin-left: 10px;
    font-weight: bolder !important;
}

.menu>ul>li>a>span{
    background-color: #f5f5f5;
    display: flex;
    width: 28px;
    height: 28px;
    justify-content: center;
    align-items: center;
    border-radius: 11px;
}
.menu>ul>li>a>span:before{
    font-size: 13px;
    line-height: 29px;
    color: #478056;
    font-weight: bold;
}

.active > a > span{
    background-color: #d4f0cb !important;
}
.active > a > span:before{
    color: #478056!important;
}
.navbar {
}

.navbar > div {
    padding: 8px 7px;
    width: 26px;
}

.navbar > div > span {
    border-bottom: 2px solid #fff;
    width: 23px;
    display: block;
    margin: 3px 0;
}


.nav { /*display: none;width:0;min-width:0;*/
    transition: width 1s;
    display: flex;
}

nav .active {
    background-color: #f5f5f5;
    border-radius: 25px 0 0 25px;
    transition: all 0.3s ease;
}

.active > a {
    color: var(--color-light);
}
.active .element_top{
    position: absolute;
    top: -20px;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: #f5f5f5;
    overflow: hidden;
    display: block;
}
.active .element_top:before {
    background: var(--color-deep);
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-bottom-right-radius: 20px;
}
.active .element_bottom{
    position: absolute;
    bottom: -20px;
    right: 0;
    width: 20px;
    height: 20px;
    background-color: #f5f5f5;
    overflow: hidden;
    display: block;
}
.active .element_bottom:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 20px;
    height: 20px;
    border-top-right-radius: 20px;
    background: var(--color-deep);;
}
/**/
header {
    position: relative;
    width: 100%;
    margin-top: 30px;
}

header ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
    width: calc(100% - 10px);
    margin-left: 10px;
}

header .logut {
}


header .logut > ul > li {
    padding: 8px 0;
    width: 100%;
    margin: 10px 0;
    position: relative;
}

header .logut > ul > li > a >span {
    background-color: unset;
    border-radius: 6px;
    font-size: 16px;
    color: #333333;
    padding-right: 10px;
}

header .logut > ul > li > a, header .logut > ul > li > button {
    background-color: unset;
    border-radius: 6px;
    font-size: 12px;
    color: #333333;
     display: flex;
     flex-direction: row;
     align-items: center;
}
header .logut > ul > li > a{
    font-size: 14px;
}

header .logut > ul > li > button:before {
    content: "\e91d";
    font-size: 14px;
    font-family: "h_icomoon";
    margin-right: 5px;
}
header .logut > ul > li:hover  > a,header .logut > ul > li:hover  > a>span{
    color: var(--color-light);
}
.system_icon{
    border-radius: 31px;
    width: 25px;
    height: 25px;
}
.system_active{
    background-color:#ffeb3b;
    border-radius: 31px;
    width: 25px;
    height: 25px;
}
.system_active>a{

}
.system_active>a>span{
    color: #191a1d!important;
}

/*首頁*/
.h_main {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 100px;
}

.h_nav > ul {
}

.h_nav > ul li {
    margin-bottom: 20px;
}

.h_nav > ul li a {
    background-color: #ffffff;
    color: #17bbef;
    padding: 20px;
    width: 150px;
    border-radius: 15px;
    font-size: 20px;
}

/*工程全局*/
/*h1 {
    text-align: center;
    font-size: 20px;
    color: #191a1d;
    font-weight: normal;
    !*margin-bottom: 10px;*!
}

.works_g_footer_but {
    display: flex;
    justify-content: center;
    margin: 30px 0;
}

.works_g_footer_but button {
    background-color: #17bbef;
    color: #fff;
    border-radius: 7px;
    padding: 2px 12px;
    margin-left: 12px;
}

.works_g_footer_but a {
    background-color: #ff5722;
    color: #fff;
    border-radius: 7px;
    padding: 2px 12px;
    margin-left: 12px;
}

.works_g_top_header {
    display: flex;
    justify-content: space-between;
    background-color: #dffbae;
    align-items: center;
    padding: 5px 10px;
}

.works_g_top_header h2 {
    font-size: 15px;
}

.works_g_top_but {
    display: flex;
    justify-content: end;
}

.works_g_top_but a {
    background-color: #17bbef;
    color: #fff;
    border-radius: 7px;
    padding: 2px 12px;
    margin-left: 12px;
}

.works_g_top_but span {
    color: #ef1717;
    font-size: 12px;
}

.works_g_top_but button {
    background-color: #17bbef;
    color: #fff;
    border-radius: 7px;
    padding: 2px 12px;
    margin-left: 12px;
}

.works_g_t {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.works_g_t table {
    width: 100%;
    margin: 10px 0;
}

.works_g_t table thead {
}

.works_g_t table thead th {
}

.works_g_t table thead td {
}

.works_g_t table tbody tr {
    background-color: #fff;
}

.works_g_t table tbody tr td {
}

.works_g_t label {
    margin-left: 10px;
    line-height: 28px;
}

.works_g_t input[type=text], .works_g_t input[type=date], .works_g_t select {
    width: 100%;
    box-sizing: border-box;
    border: none;
    font-size: 16px;
    background-color: #fff6e9;
    color: #051c61;
    padding: 0 10px;
    line-height: 28px;
}

.works_g_t_h {
    width: 100%;
}

.works_g_t_h table {
    text-align: center;
    width: 100%;
}

.works_g_t_h table th, .works table td {
    padding: 5px
}

.works_g_t_h table > thead {
    background-color: #fff;
}

.works_g_t_h table > thead > tr {
}

.works_g_t_h table > thead > tr > th {
    padding: 6px 6px;
    font-size: 13px;
    color: #17bbef;
}

.works_g_t_h table > tbody {
    background-color: white;
}

.works_g_t_h table > tbody > tr {
    background-color: #f2fcff;
}

.status_end {
    background-color: #fddddd !important;
}

.works_g_t_h table > tbody > tr:nth-child(odd) {
    background-color: #fff8f2;
}

.works_g_t_h table > tbody > tr > td {
}

.works_g_t_h table > tbody > tr > td > span {
    font-size: 14px;
    line-height: 28px;
}

.works_g_t_h table > tbody > tr > td:nth-last-child(1) {
    display: flex;
    justify-content: center;
    align-items: center;
}

.works_g_t_h table > tbody > tr > td:nth-last-child(1) > a, .works_g_t_h table > tbody > tr > td:nth-last-child(1) > button {
    font-size: 14px;
    margin-right: 8px;
    background: unset;
    cursor: pointer;
}*/

/*工程頁面*/
/*.worksp_nav {
    margin-bottom: 20px;
    width: 100%;
}

.worksp_nav ul {
    display: flex;
    justify-content: center;
}

.worksp_nav ul li {
    width: 50%;
}

.worksp_nav ul li a {
    font-size: 20px;
    line-height: 42px;
    color: #3093b2;
    background-color: #bbdde7;
}

.works_action a {
    color: #3093b2 !important;
    background-color: #f9eabb !important;
}

.worksp {
    margin-top: 20px;
    width: 96%;
    margin: 20px;
}

.worksp > div:nth-child(1) {
    display: flex;
    margin: 10px 0;
    justify-content: end;
}

.worksp > div:nth-child(1) > a {
    background-color: #17bbef;
    color: #fff;
    border-radius: 7px;
    padding: 2px 12px;
    margin-left: 12px;
}

.worksp > div:nth-child(1) > button {
    background-color: #17bbef;
    color: #fff;
    border-radius: 7px;
    padding: 2px 12px;
    margin-left: 12px;
}*/

/*工程詳情*/
/*.works_info {
    width: 96%;
    max-width: 980px;
}

.works_info_cont {
    background-color: #fff;
    padding: 10px;
}

.works_info_cont ul {
}

.works_info_cont ul li {
    width: 100%;
}

!*工程單列表*!
.works_single {
    width: 96%;
    max-width: 980px;
    margin-bottom: 10px;
}

!*添加工程*!
.works_add {
    margin-top: 20px;
    width: 96%;
}

.works_add ul {
    width: 100%;
}

.works_add ul > li {
}

.works_add ul > li > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.works_add ul > li > div > h2 {
    line-height: 40px;
}

.works_add ul > li > div > span {
    font-size: 12px;
    color: #17bbef;
}

.works_add ul > li > div > ul {
    display: flex;
    background-color: #fff6e9;
    padding: 15px;
    width: 100%;
}

.works_add ul > li > div > ul > li {
    margin-right: 20px;
}

.works_add ul > li > div > ul > li > input {
}

.works_add ul > li > div > ul > li > label {
    margin-left: 5px;
}


@media screen and (max-width: 480px) {
    .works_g_t table tbody tr {
        display: flex;
        flex-wrap: wrap;
    }

    .works_g_t table tbody tr td {
        width: 50%;
    }

    .works_g_t_h table > tbody > tr {
        display: table-row;
    }

    .works_g_t_h table > tbody > tr > td {
        width: auto;
    }
}*/