/* common */

    @font-face {
        font-family: "sans";
        /* src: url(../fonts/NotoSansCJKjp-Regular.otf); */
    }

    :root {
        --grey: #CCCCCC;
        --black: #0B0B0B;
        --dark-grey: #B3B3B3;
        --light-red: #ED7E7E;
        --blue: #009B8E;
        --light-blue: #E4F4F3;
        --header-height: 111px;
        --title-sec: 70px;
        --title-bar: 70px;
        --tool-bar: 70px;
    }

    @media (max-width: 2160px) {
        :root {
            --header-height: 5.1vw;
        }
    }

    @media (max-width: 1200px) {
        :root {
            --header-height: 60px;
            --title-sec: 60px;
            --title-bar: 60px;
            --tool-bar: 60px;
        }
    }

    @media (max-width: 992px) {
        :root {
            --header-height: 50px;
        }
    }

    @media (max-width: 768px) {
        :root {
            --title-sec: 100px;
            --title-bar: 50px;
            --tool-bar: 50px;
        }
    }

    html,
    body {
        font-family: 'sans';
        font-size: 14px;
        font-style: normal;
        color: #5A5A5A;
        margin: 0px;
        scroll-behavior: smooth;
        overflow-x: hidden;
        line-height: 1.5;
    }

    main {
        margin-top: calc(var(--header-height) + var(--title-sec));
    }

    * {
        box-sizing: border-box;
    }

    a {
        text-decoration: none;
        color: black;
    }

    a:hover {
        cursor: pointer;
        filter: brightness(80%);
    }

    button:hover {
        cursor: pointer;
        filter: brightness(80%);
    }

    button {
        border: none;
        font-family: 'sans';
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #277061;
        padding: 0.5em 1em;
        border-radius: 5px;
        margin: auto;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    a {
        padding: 0px;
        margin: 0px;
    }

    img {
        width: auto;
        max-width: 100%;
    }

    table,
    tr,
    td,
    input {
        box-sizing: border-box;
        border: 1px solid var(--grey);
        border-radius: 0px;
    }

    .table-box {
        overflow-x: auto;
    }

    table {
        border-collapse: collapse;
        border-radius: unset !important;
    }

    .cursor-pointer {
        cursor: pointer;
    }

    svg {
        width: 100%;
        height: 100%;
    }

    .zoom {
        transition: transform.3s;
        -webkit-transition: transform.3s;
        -moz-transition: transform.3s;
        -ms-transition: transform.3s;
        -o-transition: transform.3s;
    }

    .zoom:hover {
        transform: scale(1.2);
    }

    .d-none {
        display: none !important;
    }

    .opacity-0 {
        opacity: 0;
    }

    .pc {}

    .sp {
        display: none;
    }

    @media (max-width: 768px) {
        .pc {
            display: none;
        }

        .sp {
            display: block;
        }
    }

    @media (max-width: 576px) {
        .pc {
            display: none;
        }

        .sp-sm {
            display: block;
        }
    }

    /* custom-common */

    .container {
        max-width: 2160px;
        margin: auto;
    }

    /* common-element */

    .img-box,
    .text-box {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .title {
        font-weight: 700;
        color: var(--black);
    }

    .bg-yel {
        background: #FFFFA0;
    }

    .bg-dark-yel {
        background: #FFCC00;
    }

    .bg-d-yel {
        background: #FFF2CC;
    }

    .bg-red {
        background: #F98C84;
    }

    .bg-light-red {
        background: #FFC4BF;
    }

    .bg-orange {
        background: #FFBF8B;
    }

    .bg-grey {
        background: #DEDEDE;
    }

    .bg-dark-blue {
        background: #33CCFF;
    }

    .text-blue {
        color: #009689;
    }

    .text-light-blue {
        color: #79C0F9 !important;
    }

    .text-red {
        color: #ED7E7E;
    }

    .text-light-red {
        color: #F98C84 !important;
    }

    .text-black {
        color: var(--black) !important;
    }

    .text-grey {
        color: var(--grey);
    }

    .btn {
        padding: 0.5em 1em;
        border-radius: 5px;
        margin: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .btn .text {
        font-size: 16px;
        color: #fff;
        text-align: center;
        margin: 0 !important;
    }

    .btn-sm {
        padding: 0.5em 1em;
        border-radius: 5px;
        margin: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .btn-sm .text {
        font-size: 16px;
        color: #fff;
    }

    .btn-black {
        background-color: #5A5A5A;
    }

    .btn-blue {
        background-color: var(--blue);
    }

    .btn-red {
        background-color: var(--light-red);
    }

    @media (max-width: 1200px) {
        .btn {
            padding: 0.4em 1em;
            margin: 4px;
        }

        .btn .text {
            font-size: 14px;
        }

        .btn-sm {
            margin: 2px;
            border-radius: 4px;
        }

        .btn-sm .text {
            font-size: 14px;
        }
    }

    @media (max-width: 768px) {
        .btn {
            padding: 0.3em 1em;
            border-radius: 3px;
            margin: 2px;
        }

        .btn .text {
            font-size: 12px;
        }

        .btn-sm {}

        .btn-sm .text {}
    }

    @media (max-width: 576px) {
        .btn {
            padding: 0.3em 1em;
        }

        .btn .text {}

        .btn-sm {
            border-radius: 2px;
        }

        .btn-sm .text {}
    }

    /* page-common */

    .title-bar {
        position: fixed;
        top: var(--header-height);
        width: 100%;
        z-index: 1;
    }

    .title-bar .row {
        justify-content: space-between;
        height: 70px;
        display: flex;
        align-items: center;
        border-bottom: 2px solid var(--blue);
        background: #fff;
    }

    .title-bar .row .left {}

    .title-bar .row .left h2 {
        font-size: 16px;
        font-weight: 700;
        color: var(--black);
        padding: 0.5em 1em;
    }

    .title-bar .row .right {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 1em;
    }

    .title-bar .row .right img {
        width: 17px;
        margin-right: 4px;
    }

    .title-bar .row .right .time {}

    .title-bar .row .right .time.hour {}

    .title-bar .row .right .time.dots {}

    .title-bar .row .right .time.minute {}

    .tool-bar {
        height: 70px;
        background: var(--light-blue);
        display: flex;
        align-items: center;
        padding: 1em;
        /* border-top: 2px solid var(--blue); */
        border-bottom: 2px solid var(--grey);
        position: fixed;
        top: calc(var(--header-height) + var(--title-bar));
        width: 100%;
    }

    .tool-bar .left {}

    .tool-bar .left .text-1 {
        font-size: 14px;
        padding-bottom: 0.1em;
    }

    .tool-bar .left .text-2 {
        font-size: 16px;
        padding: 0.5em 0.5em;
        background: #fff;
        border: 1px solid var(--grey);
        border-radius: 5px;
        width: 130px;
        height: 35px;
        display: flex;
        align-items: center;
    }

    .tool-bar .right {
        display: flex;
        justify-content: end;
        flex-grow: 1;
        /* padding-right: 80px; */
    }

    @media (max-width: 1200px) {
        .title-bar {}

        .title-bar .row {
            height: 60px;
        }

        .title-bar .row .left {}

        .title-bar .row .left h2 {
            font-size: 14px;
        }

        .title-bar .row .right {}

        .title-bar .row .right .time {}

        .title-bar .row .right .time.hour {}

        .title-bar .row .right .time.dots {}

        .title-bar .row .right .time.minute {}

        .tool-bar {
            height: 60px;
            margin-top: -60px !important;
        }

        .tool-bar .left {}

        .tool-bar .left .text-1 {
            font-size: 12px;
        }

        .tool-bar .left .text-2 {
            font-size: 14px;
            width: 80px;
            height: 30px;
            padding: 10px;
        }

        .tool-bar .right {
            padding-right: 0;
        }
    }

    @media (max-width: 768px) {
        .title-bar {}

        .title-bar .row {
            height: 50px;
        }

        .title-bar .row .left {}

        .title-bar .row .left h2 {}

        .title-bar .row .right {}

        .title-bar .row .right .time {}

        .title-bar .row .right .time.hour {}

        .title-bar .row .right .time.dots {}

        .title-bar .row .right .time.minute {}

        .tool-bar {
            height: 50px;
            margin-top: -60px !important;
        }

        .tool-bar .left {}

        .tool-bar .left .text-1 {
            font-size: 10px;
        }

        .tool-bar .left .text-2 {
            font-size: 12px;
            height: 25px;
            width: 70px;
            border-radius: 3px;
        }

        .tool-bar .right {}
    }

    @media (max-width: 576px) {
        .title-bar {}

        .title-bar .row {}

        .title-bar .row .left {}

        .title-bar .row .left h2 {}

        .title-bar .row .right {}

        .title-bar .row .right .time {}

        .title-bar .row .right .time.hour {}

        .title-bar .row .right .time.dots {}

        .title-bar .row .right .time.minute {}

        .tool-bar {}

        .tool-bar .left {}

        .tool-bar .left .text-1 {}

        .tool-bar .left .text-2 {
            width: 60px;
        }

        .tool-bar .right {}
    }

    select {
        margin: 0;
        padding: 0.5em 1em;
        /* width: 100%; */
        /* text-align: center; */
        /* appearance: none; */
        /* border: none; */
    }

    select:focus {
        outline: none;
    }

    .selectdiv {
        position: relative;
        display: flex;
        align-items: center;
        width: fit-content;
        justify-content: space-between;
    }

    .selectdivsmal {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 47%;
    }

    .selectdiv:after {
        /* content: '\f0d7';
        font: normal normal normal 12px/1 FontAwesome;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translate(-7px, -42%);
        pointer-events: none; */
    }

    @media (max-width: 1200px) {
        .table select {
            height: 40px;
        }

        .selectdiv {}

        .selectdiv:after {
            transform: translate(-4px, -45%);
            font: normal normal normal 10px/1 FontAwesome;
        }
    }

    .pagination {
        display: inline-block;
        margin-top: 15px;
    }

    .pagination a {
        color: black;
        float: left;
        padding: 8px 16px;
        text-decoration: none;
        transition: background-color .3s;
        border: 1px solid #DEDEDE;
        margin: 0 4px;
        border-radius: 5px;
        background: #fff;
        font-size: 16px;
    }

    .pagination a.active {
        background-color: #FBF8F6;
        color: var(--black);
        border: 1px solid #FBF8F6;
    }

    .pagination a:hover:not(.active) {
        background-color: #ddd;
    }

    input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }

    @media (max-width: 1200px) {
        .pagination {
            margin-top: 10px;
        }

        .pagination a {
            font-size: 14px;
            margin-inline: 3px;
            padding: 3px 10px;
            border-radius: 4px;
        }

        .pagination a.active {}

        .pagination a:hover:not(.active) {}

        input[type="checkbox"] {
            width: 14px;
            height: 14px;
        }
    }

    @media (max-width: 768px) {
        .pagination {
            margin-top: 5px;
        }

        .pagination a {
            font-size: 12px;
            margin-inline: 2px;
            padding: 2px 8px;
            border-radius: 3px;
        }

        .pagination a.active {}

        .pagination a:hover:not(.active) {}

        input[type="checkbox"] {
            width: 12px;
            height: 12px;
        }
    }

    @media (max-width: 576px) {
        .pagination {}

        .pagination a {}

        .pagination a.active {}

        .pagination a:hover:not(.active) {}

        input[type="checkbox"] {}
    }

    .date-box {
        display: flex;
        align-items: center;
        justify-content: center;
        width: fit-content;
    }

    /* check box */

    form .check-box {
        position: relative;
    }

    form .check-box input {
        /* opacity: 0; */
    }

    form .check-box label {}

    form .check-box label::before {
        content: "";
        position: absolute;
        /* background-color: #eee; */
        top: 0px;
        left: 0px;
        width: 43px;
        height: 43px;
        border-radius: 3px;
        margin-right: 10px;
        border: 1px solid var(--grey);
        display: none;
    }

    form .check-box:hover label::before {
        /* background-color: #ccc; */
        width: 43px;
        height: 43px;
        border-radius: 3px;
    }

    form .check-box input[type="checkbox"]:checked+label::after {
        content: url(../img/icon-checkmark.png);
        color: var(--blue);
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
        position: absolute;
        /* top: 0px; */
        /* left: 5px; */
        left: 11px;
        top: -4px;
        font-size: 33px;
        display: none;
    }

    form .check-box input[type="checkbox"]:checked+label::before {
        /* background-color: red; */
        border: 1px solid #eee;
        width: 43px;
        height: 43px;
        border-radius: 3px;
    }

    @media (max-width: 1200px) {
        form .check-box label::before {
            width: 25px;
            height: 25px;
        }

        form .check-box:hover label::before {
            width: 25px;
            height: 25px;
        }

        form .check-box input[type="checkbox"]:checked+label::after {
            font-size: 20px;
            /* left: 3px; */
            left: 2px;
            top: 2px;
            width: 8px;
        }

        form .check-box input[type="checkbox"]:checked+label::before {
            width: 25px;
            height: 25px;
        }
    }

    @media (max-width: 768px) {
        form .check-box label::before {}

        form .check-box:hover label::before {}

        form .check-box input[type="checkbox"]:checked+label::after {
            content: url(../img/icon-checkmark-sp.png);
        }

        form .check-box input[type="checkbox"]:checked+label::before {}
    }

    @media (max-width: 576px) {
        form .check-box label::before {}

        form .check-box:hover label::before {}

        form .check-box input[type="checkbox"]:checked+label::after {}

        form .check-box input[type="checkbox"]:checked+label::before {}
    }

    /* week-picker */

    .selectdiv.week-picker {}

    .selectdiv.week-picker select {
        font-size: 16px;
        color: #5A5A5A;
        width: 230px;
        height: 50px;
        border: 2px solid var(--grey);
    }

    .selectdiv.week-picker select option {}

    .selectdiv.week-picker:after {
        right: 20px;
    }

    @media (max-width:1200px) {
        .selectdiv.week-picker {}

        .selectdiv.week-picker select {
            width: 190px;
            height: 40px;
            font-size: 14px;
            padding-block: 0;
        }

        .selectdiv.week-picker select option {}

        .selectdiv.week-picker:after {
            right: 14px;
        }
    }

    @media (max-width:768px) {
        .selectdiv.week-picker {}

        .selectdiv.week-picker select {
            font-size: 12px;
            width: 170px;
            height: 35px;
            border: 1px solid var(--grey);
        }

        .selectdiv.week-picker select option {}

        .selectdiv.week-picker:after {}
    }

    @media (max-width:576px) {
        .selectdiv.week-picker {}

        .selectdiv.week-picker select {
            height: 30px;
            width: 170px;
        }

        .selectdiv.week-picker select option {}

        .selectdiv.week-picker:after {}
    }

    /* responsive */

    .text,
    label,
    .dash,
    .date,
    .list,
    table tr td,
    table tr th {
        font-size: 16px;
    }

    table tr td,
    table tr th {
        height: 50px;
    }

    input[type=text],
    input[type=password],
    input[type=date],
    input[type=email],
    input[type=datetime],
    select {
        font-size: 16px;
        height: 50px;
        border: 1px solid #CCCCCC;
        border-radius: 5px;
        padding-left: 1em;
        box-sizing: border-box;
        font-family: 'sans';
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
    }

    input[type=submit] {
        font-family: 'sans';
        font-size: 16px;
    }

    @media (max-width: 1200px) {

        .text,
        label,
        .dash,
        .date,
        .list,
        table tr td,
        table tr th {
            font-size: 14px;
        }

        table tr td,
        table tr th {
            height: 40px;
        }

        input[type=text],
        input[type=password],
        input[type=date],
        input[type=email],
        input[type=datetime],
        select {
            font-size: 14px;
            height: 40px;
            border-radius: 4px;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            -ms-border-radius: 4px;
            -o-border-radius: 4px;
        }

        input[type=submit] {
            font-family: 'sans';
            font-size: 14px;
        }
    }

    @media (max-width: 768px) {

        .text,
        label,
        .dash,
        .date,
        .list,
        table tr td,
        table tr th {
            font-size: 12px;
        }

        table tr td,
        table tr th {
            height: 35px;
        }

        input[type=text],
        input[type=password],
        input[type=date],
        input[type=email],
        input[type=datetime],
        select {
            font-size: 12px;
            height: 35px;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
        }

        input[type=submit] {
            font-family: 'sans';
            font-size: 12px;
        }
    }

    @media (max-width: 576px) {

        .text,
        label,
        .dash,
        .date,
        .list,
        table tr td,
        table tr th {
            font-size: 10px;
        }

        table tr td,
        table tr th {
            height: 30px;
        }

        input[type=text],
        input[type=password],
        input[type=date],
        input[type=email],
        input[type=datetime],
        select {
            font-size: 10px;
            height: 30px;
            border-radius: 3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            -ms-border-radius: 3px;
            -o-border-radius: 3px;
        }

        input[type=submit] {
            font-family: 'sans';
            font-size: 10px;
        }
    }

    /* header */

    .topnav {
        /* overflow: hidden; */
        background-color: #fff;
        height: var(--header-height);
        /* border-bottom: 2px solid grey; */
        display: flex;
        align-items: center;
        box-shadow: inset 0 -10px 13px -13px var(--grey);
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10000;
    }

    .topnav a {
        float: left;
        display: block;
        color: #f2f2f2;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
        font-size: 17px;
    }

    .topnav a .logo-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .topnav a .logo-box .logo-icon {
        width: 90px;
        height: 90px;
    }

    .topnav .active {
        background-color: #dfe9e5;
        color: white;
    }

    .topnav .icon {
        display: none;
    }

    .topnav .dropdown {
        float: left;
        /* overflow: hidden; */
        margin-block: auto;
        background: #fff;
    }

    .topnav .dropdown .dropbtn {
        font-size: 24px;
        font-weight: 700;
        border: none;
        outline: none;
        color: #5A5A5A;
        padding: 14px 16px;
        background-color: inherit;
        font-family: inherit;
        margin: 0;
    }

    .topnav .dropdown-content {
        display: none;
        position: absolute;
        background-color: #f9f9f9;
        min-width: 160px;
        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
        z-index: 1;
        overflow-y: auto;
        max-height: 750px;
    }

    .topnav .dropdown-content a {
        float: none;
        color: #5A5A5A;
        padding: 12px 16px;
        text-decoration: none;
        display: block;
        text-align: left;
    }

    .topnav a:hover,
    .topnav .dropdown:hover .dropbtn {
        background-color: #555;
        color: white;
    }

    .topnav .dropdown-icon-right:hover .dropbtn {
        padding-block: 4px;
    }

    .topnav .dropdown-content a:hover {
        background-color: #ddd;
        color: #000;
    }

    .topnav .dropdown:hover .dropdown-content {
        display: block;
    }

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

        .topnav a:not(:first-child),
        .topnav .dropdown .dropbtn {
            display: none;
        }

        .topnav a.icon {
            float: right;
            display: block;
            margin-top: 7px;
            color: black;
            padding: 0 5px;
        }
    }

    @media screen and (max-width: 768px) {
        .topnav {
            display: unset;
        }

        .topnav.responsive {
            /* position: relative; */
        }

        .topnav.responsive .icon {
            position: absolute;
            right: 0;
            top: 0;
        }

        .topnav.responsive a {
            float: none;
            display: block;
            text-align: left;
        }

        .topnav.responsive .dropdown {
            float: none;
        }

        .topnav.responsive .dropdown-content {
            position: relative;
        }

        .topnav.responsive .dropdown .dropbtn {
            display: block;
            width: 100%;
            text-align: left;
        }
    }

    .topnav .right {
        display: flex;
        align-items: center;
        margin-left: auto;
        /* position: relative; */
    }

    .topnav .right .icon-user {
        width: 43px;
        height: 43px;
    }

    .topnav .right .user-name {
        font-size: 26px;
        color: #5A5A5A;
        font-weight: 700;
        margin-inline: 20px;
    }

    .topnav .right .dropdown-icon-right {}

    .topnav .right .dropdown-icon-right .dropbtn {
        color: #AFAFAF;
        font-size: 36px;
    }

    .topnav .right .dropdown-icon-right .dropdown-content {
        position: absolute;
        right: 0;
    }

    .topnav .right .dropdown-icon-right .dropdown-content a .row {
        display: flex;
        align-items: center;
        padding-right: 40px;
    }

    .topnav .right .dropdown-icon-right .dropdown-content a .row .icon-right {
        margin-right: 20px;
        width: 20px;
    }

    .topnav .right .dropdown-icon-right .dropdown-content a .row .text {
        font-size: 20px;
        color: #7E7E7E;
        font-weight: 700;
    }

    @media (max-width: 2160px) {
        .topnav {}

        .topnav a {
            padding: 0.65vw;
        }

        .topnav a .logo-box {}

        .topnav a .logo-box .logo-icon {
            width: 4.2vw;
            height: 4.2vw;
        }

        .topnav .dropdown .dropbtn {
            font-size: 1.11vw;
            padding: 0.65vw;
        }

        .topnav .right .icon-user {
            width: 2vw;
            height: 2vw;
        }

        .topnav .right .user-name {
            font-size: 1.2vw;
            margin-inline: 0.93vw;
        }

        .topnav .right .dropdown-icon-right {}

        .topnav .right .dropdown-icon-right .dropbtn {
            font-size: 1.7vw;
            padding: 0.65vw;
            padding-block: 0.3vw;
        }

        .topnav .right .dropdown-icon-right .dropdown-content a .row .icon-right {
            margin-right: 0.9vw;
            width: 1.5vw;
        }

        .topnav .right .dropdown-icon-right .dropdown-content a .row .text {}
    }

    @media (max-width: 1600px) {}

    @media (max-width: 1200px) {
        .topnav {}

        .topnav a {}

        .topnav a .logo-box {}

        .topnav a .logo-box .logo-icon {
            width: 50px;
            height: 50px;
        }

        .topnav .active {}

        .topnav .icon {}

        .topnav .dropdown {}

        .topnav .dropdown .dropbtn {
            font-size: 14px;
        }

        .topnav .dropdown-content a {
            font-size: 14px;
            padding: 8px 12px;
        }

        .topnav .right .icon-user {
            width: 25px;
            height: 25px;
        }

        .topnav .right .user-name {
            font-size: 14px;
        }

        .topnav .right .dropdown-icon-right {}

        .topnav .right .dropdown-icon-right .dropbtn {
            font-size: 23px;
        }

        .topnav .right .dropdown-icon-right .dropdown-content a .row .text {
            font-size: 14px;
        }
    }

    @media (max-width: 992px) {
        .topnav {}

        .topnav a {}

        .topnav a .logo-box {}

        .topnav a .logo-box .logo-icon {
            width: 40px;
            height: 40px;
        }

        .topnav .dropdown .dropbtn {
            font-size: 10px;
            padding-inline: 1vw;
        }

        .topnav .dropdown-content a {
            font-size: 12px;
            padding: 6px 8px;
        }

        .topnav .dropdown:hover .dropdown-content {
            min-width: 100px;
        }

        .topnav .right .icon-user {
            width: 20px;
            height: 20px;
        }

        .topnav .right .user-name {
            font-size: 10px;
        }

        .topnav .right .dropdown-icon-right .dropbtn {
            font-size: 18px;
        }

        .topnav .right .dropdown-icon-right .dropdown-content a .row .text {
            font-size: 12px;
        }
    }

    @media (max-width: 768px) {
        .topnav a .logo-box {
            width: fit-content;
        }

        .topnav.responsive .right {
            display: flex;
            background: #fff;
        }

        .topnav.responsive .right .dropdown-icon-right .dropdown-content {
            position: relative;
        }

        .topnav .right {
            display: none;
        }
    }

    @media (max-width: 576px) {}

    /* end header */
    /* p1*/

    #p1 {
        margin-top: -100px;
        margin-bottom: 100px;
    }

    .p1-body {
        background: #F6F6F6;
    }

    #p1 .row-1 {
        justify-content: center;
    }

    #p1 .row-1 .img-box img {
        max-width: 500px;
    }

    #p1 .row-2 {
        margin-top: 50px;
    }

    #p1 .row-2 .form {
        margin: auto;
        background: #fff;
        max-width: 800px;
        width: 800px;
        padding: 65px;
        border-radius: 5px;
        box-shadow: 0px 0px 15px #c3c3c3;
        height: auto;
    }

    #p1 .row-2 .form .line-1 {
        border-bottom: 1px solid var(--grey);
        padding-bottom: 25px;
    }

    #p1 .row-2 .form .line-1 .title {
        font-size: 20px;
        text-align: center;
        color: var(--black);
    }

    #p1 .row-2 .form .input-box {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    #p1 .row-2 .form .input-box label {
        font-size: 16px;
    }

    #p1 .row-2 .form .input-box input {
        height: 50px;
        font-size: 16px;
        margin: 0;
        margin-top: 20px;
        padding-left: 1em;
    }

    #p1 .row-2 .form .line-2 {
        margin-top: 45px;
    }

    #p1 .row-2 .form .line-3 {
        margin-top: 30px;
    }

    #p1 .row-2 .form .line-3 input {
        margin-top: 0;
        width: 100%;
    }

    #p1 .row-2 .form .line-3 .eye-box {
        position: relative;
        margin-top: 20px;
    }

    #p1 .row-2 .form .line-3 .icon-eye {
        width: 24px;
        position: absolute;
        top: 65%;
        right: 0;
        transform: translate(-20px, -50%);
    }

    #p1 .row-2 .form .line-4 .text {
        margin-top: 20px;
        font-size: 14px;
    }

    #p1 .row-2 .form .line-5 {
        margin-top: 30px;
        border-top: 1px solid var(--grey);
        padding-top: 30px;
        text-align: center;
    }

    #p1 .row-2 .form .line-5 .text {
        color: var(--light-red);
        font-size: 18px;
    }

    #p1 .row-2 .form .line-6 {
        display: flex;
        flex-direction: column;
    }

    #p1 .row-2 .form .line-6 .submit {
        background: var(--blue);
        width: 220px;
        height: 60px;
        margin: auto;
        margin-top: 20px;
        border: none;
        border-radius: 10px;
        color: #fff;
        font-size: 18px;
        font-weight: 700;
        cursor: pointer;
    }

    #p1 .row-2 .form .line-6 .submit:hover {
        background: #01756a;
    }

    #p1 .row-2 .form .line-6 .forgot-pass {
        font-size: 14px;
        text-align: center;
        text-decoration: underline;
        color: var(--black);
        margin-top: 30px;
    }

    @media (max-width: 1200px) {
        #p1 {
            margin-top: 80px;
            margin-bottom: 80px;
        }

        #p1 .row-1 {
            width: 90vw;
            margin: auto;
        }

        #p1 .row-1 .img-box img {
            width: 300px;
        }

        #p1 .row-2 .form {
            width: 80vw;
            padding: 40px;
            max-width: 600px;
        }

        #p1 .row-2 .form .line-1 {
            padding-bottom: 20px;
        }

        #p1 .row-2 .form .line-1 .title {
            font-size: 16px;
        }

        #p1 .row-2 .form .input-box label {
            font-size: 14px;
        }

        #p1 .row-2 .form .input-box input {
            font-size: 14px;
            height: 40px;
            margin-top: 10px;
        }

        #p1 .row-2 .form .line-2 {
            margin-top: 30px;
        }

        #p1 .row-2 .form .line-3 {
            margin-top: 20px;
        }

        #p1 .row-2 .form .line-3 input {
            margin-top: 0;
        }

        #p1 .row-2 .form .line-3 .eye-box {
            margin-top: 10px;
        }

        #p1 .row-2 .form .line-3 .icon-eye {
            transform: translate(-16px, -50%);
            width: 20px;
        }

        #p1 .row-2 .form .line-4 .text {
            font-size: 12px;
            margin-top: 10px;
        }

        #p1 .row-2 .form .line-5 {
            margin-top: 20px;
            padding-top: 20px;
        }

        #p1 .row-2 .form .line-5 .text {
            font-size: 16px;
        }

        #p1 .row-2 .form .line-6 .submit {
            width: 200px;
            height: 50px;
            font-size: 16px;
            border-radius: 5px;
        }

        #p1 .row-2 .form .line-6 .forgot-pass {
            font-size: 12px;
            margin-top: 20px;
        }
    }

    @media (max-width: 768px) {
        #p1 {
            margin-top: 10vw;
            margin-bottom: 10vw;
        }

        #p1 .row-1 .img-box img {
            width: 50vw;
        }

        #p1 .row-2 .form {
            padding: 9vw 5vw;
        }

        #p1 .row-2 .form .line-1 .title {
            font-size: 14px;
        }

        #p1 .row-2 .form .input-box label {
            font-size: 12px;
        }

        #p1 .row-2 .form .input-box input {
            font-size: 12px;
        }

        #p1 .row-2 .form .line-3 .icon-eye {
            width: 20px;
        }

        #p1 .row-2 .form .line-4 .text {
            font-size: 10px;
        }

        #p1 .row-2 .form .line-5 .text {
            font-size: 14px;
        }

        #p1 .row-2 .form .line-6 .submit {
            font-size: 14px;
        }

        #p1 .row-2 .form .line-6 .forgot-pass {
            font-size: 10px;
        }
    }

    @media (max-width: 576px) {
        #p1 .row-2 {
            margin-top: 40px;
        }

        #p1 .row-2 .form {
            width: 90vw;
        }

        #p1 .row-2 .form .line-3 .icon-eye {
            width: 16px;
        }

        #p1 .row-2 .form .line-5 .text {
            font-size: 12px;
        }
    }

    /* p2_p8*/

    #p2 .sec1 {
        padding: 50px;
        padding-top: 0;
    }

    #p2 .sec1 .row-1 {
        display: flex;
        justify-content: end;
        width: 100%;
        min-height: 40px;
        margin-block: 10px;
    }

    #p2 .sec1 .row-2 {
        background: var(--light-blue);
        border-radius: 10px;
        padding: 30px;
        padding-top: 40px;
        box-shadow: 0 0 10px #d2dddc;
    }

    #p2.p8 .sec1 .row-2 {
        padding-block: 100px;
    }

    #p2 .sec1 .row-2 .line-1 {
        display: flex;
        font-size: 16px;
    }

    #p2 .sec1 .row-2 .line-1 .left {
        display: flex;
        align-items: center;
        margin-right: 70px;
    }

    #p2 .sec1 .row-2 .line-1 .right .date {
        display: flex;
        align-items: center;
        background: #fff;
        width: 418px;
        height: 68px;
        border: 2px solid var(--grey);
        border-radius: 5px;
        padding: 1em;
    }

    #p2 .sec1 .row-2 .line-1 .right .date .fa-caret-down {
        margin-left: auto;
    }

    #p2 .sec1 .row-2 .line-2 {
        overflow-x: auto;
        margin-top: 30px;
    }

    #p2 .table {
        border-collapse: collapse;
        font-size: 16px;
        background: #fff;
        width: 100%;
    }

    #p2 .table td {
        border: 1.5px solid var(--grey);
        height: 40px;
        text-align: center;
        vertical-align: middle;
        border-radius: 0;
        font-size: 16px !important;
    }

    #p2 .table tr td>div {
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }

    #p2 .table thead {
        height: 45px;
        background: var(--light-yel);
    }

    #p2 .table thead tr .date {
        display: flex;
        align-items: center;
    }

    #p2 .table thead tr .day {
        color: var(--grey);
        position: absolute;
        left: 50%;
        transform: translate(1.5em, 0px);
        font-size: 12px !important;
        display: flex;
        align-items: center;
    }

    #p2 .table .td-0 {
        min-width: 110px;
    }

    @media (max-width: 1600px) {
        #p2 .table .td-0 {
            min-width: 84px;
        }
    }

    #p2 .td-row {
        height: 100%;
        justify-content: start !important;
    }

    #p2 .td-row .w-sm {
        width: 11%;
    }

    #p2 .td-row .w-md {
        width: 12%;
    }

    #p2 .td-row .w-lg {
        /* width: 324px; */
        width: 13%;
    }

    #p2 .table .td-01 {
        min-width: 50px;
    }

    #p2 .table .td-02 {
        border-right-style: dotted !important;
        min-width: 40px;
    }

    #p2 .table .td-03 {
        min-width: 40px;
    }

    #p2 .table select {
        margin: 0;
        padding: 0;
        width: 100%;
        text-align: center;
        appearance: none;
        border: none;
        height: 40px;
    }

    #p2 .table select:focus {
        outline: none;
    }

    #p2 .table .selectdiv {
        position: relative;
        width: auto;
    }

    #p2 .table .selectdiv:after {
        transform: translate(-7px, -42%);
    }

    @media (max-width: 1400px) {
        #p2 .table .selectdiv:after {
            transform: translate(-2px, -42%);
        }
    }

    #p2.p8 .table .selectdiv:after {
        content: '';
    }

    #p2 .table #p2 .td-row p {
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border-right: 1px solid var(--grey);
    }

    #p2 .table .tr-7 .text-5 {
        /* width: 230px; */
    }

    #p2 .table .tr-7 .text-8 {
        border-right: none;
    }

    #p2 .table .yyy,
    .yyy>* {
        background: #F2F2F2;
    }

    .yyy select {
        background: #f2f2f2;
    }

    #p2 .sec1 .row-3 {
        display: flex;
        justify-content: end;
        margin-top: 20px;
    }

    #p2 .sec1 .row-3 .btn {
        width: 200px;
    }

    @media (max-width: 1200px) {
        #p2 .sec1 {
            padding: 15px;
            padding-top: 0;
        }

        #p2 .sec1 .row-1 {
            min-height: 20px;
        }

        #p2 .sec1 .row-2 {
            padding: 15px;
        }

        #p2.p8 .sec1 .row-2 {
            padding-block: 50px;
        }

        #p2 .sec1 .row-2 .line-1 {
            font-size: 16px;
        }

        #p2 .sec1 .row-2 .line-1 .left {
            margin-right: 30px;
        }

        #p2 .sec1 .row-2 .line-1 .right .date {
            width: 220px;
            height: 34px;
        }

        #p2 .sec1 .row-2 .line-2 {
            margin-top: 15px;
        }

        #p2 .table {
            font-size: 16px;
        }

        #p2 .table td,
        #p2 .table td * {
            height: 35px;
            font-size: 12px !important;
        }

        #p2 .table thead {
            height: 40px;
        }

        #p2 .table thead tr .day {
            font-size: 10px !important;
        }

        #p2 .td-row .w-lg {
            /* width: 160px; */
        }

        #p2 .table .td-0 {
            min-width: 64px;
        }

        #p2 .table .td-01 {
            min-width: 40px;
        }

        #p2 .table .td-02 {
            min-width: 25px;
        }

        #p2 .table .td-03 {
            min-width: 26px;
        }

        #p2 .table select {
            height: 35px;
        }

        #p2 .table .selectdiv:after {
            transform: translate(1%, -45%);
        }

        #p2 .table .yyy,
        #p2 .sec1 .row-3 {
            margin-top: 15px;
        }

        #p2 .sec1 .row-3 .btn {
            width: 160px;
        }
    }

    @media (max-width: 768px) {
        #p2 .sec1 .row-1 {
            min-height: 10px;
        }

        #p2.p8 .sec1 .row-2 {
            padding-block: 30px;
        }

        #p2 .table td,
        #p2 .table td * {
            height: 30px;
            font-size: 10px !important;
        }

        #p2 .table thead {
            height: 35px;
        }

        #p2 .table thead tr .day {
            font-size: 9px !important;
        }

        #p2 .table .td-0 {
            min-width: 34px;
        }

        #p2 .table .td-01 {
            min-width: 25px;
        }

        #p2 .table .td-02 {
            min-width: 20px;
        }

        #p2 .table .td-03 {
            min-width: 20px;
        }

        #p2 .table .selectdiv:after {
            font: normal normal normal 8px/1 FontAwesome;
        }

        #p2 .table .yyy,
        #p2 .sec1 .row-3 .btn {
            width: 120px;
        }
    }

    @media (max-width: 576px) {
        #p2 .sec1 .row-2 .line-1 {
            display: flex;
            flex-direction: column;
        }

        #p2 .sec1 .row-2 .line-1 .left {
            margin-bottom: 8px;
        }

        #p2 .table td,
        #p2 .table td * {
            height: 30px;
        }

        #p2 .table thead tr .day {
            font-size: 8px !important;
        }

        #p2 .table .yyy,
        #p2 .sec1 .row-3 .btn {
            width: 100px;
            padding: 0.5em 0;
        }
    }

    #p2 .table tr td input[type=text] {
        margin: 0;
        padding: 0;
        text-align: center;
        width: 100%;
        height: 100%;
        background: none;
        border: none;
    }

    #p2 .table tr td input[type=text]:focus {
        border: none;
        outline: none;
    }

    #p2.p8 .table .selectdiv select:disabled {
        color: #5A5A5A;
    }

    /* p3*/

    #p3 {
        padding: 60px 60px 60px 220px;
    }

    #p3 .sec1 .row-1 {
        display: flex;
    }

    #p3 .sec1 .row-2 {
        display: flex;
        align-items: center;
        margin-top: 30px;
    }

    #p3 .sec1 .row-1 .selectdiv:after {
        right: 10px;
    }

    #p3 .sec1 .row-2 .selectdiv:after {
        right: 90px;
    }

    #p3 .sec1 .selectdiv label {
        margin-right: 40px;
    }

    #p3 .sec1 .selectdiv select {
        width: 390px;
    }

    #p3 .sec1 .selectdiv.sel-1 {
        margin-right: 90px;
    }

    #p3 .sec1 .selectdiv.sel-3 select {
        width: 213px;
    }

    #p3 .sec1 .selectdiv.sel-4 select {
        width: 130px;
    }

    #p3 .sec1 .row-2 label {
        margin-right: 40px;
    }

    #p3 .sec1 .row-2 .selectdiv label {
        margin-left: 1em;
    }

    #p3 .sec1 .row-2 .btn {
        width: 120px;
        height: 45px;
        padding: 0;
    }

    #p3 .sec2 {
        margin-top: 60px;
    }

    #p3 .sec2 table {
        max-width: 1880px;
    }

    #p3 .sec2 table tr th {
        border: 1px solid var(--grey);
        color: var(--black);
    }

    #p3 .sec2 table tr td {
        width: 270px;
        border: 1px solid var(--grey);
    }

    #p3 .sec3 {
        margin-top: 50px;
    }

    #p3 .sec3 table {
        max-width: 1880px;
    }

    #p3 .sec3 table tr td {
        width: 236px;
        text-align: center;
        border-right: none;
        border-left: none;
    }

    #p3 .sec3 table thead tr {
        font-weight: 700;
        color: var(--black);
    }

    @media (max-width: 1200px) {
        #p3 {
            padding: 30px 30px 30px 80px;
        }

        #p3 .sec1 .row-2 {
            margin-top: 10px;
        }

        #p3 .sec1 .row-2 .selectdiv:after {
            right: 56px;
        }

        #p3 .sec1 .selectdiv label {
            margin-right: 20px;
        }

        #p3 .sec1 .selectdiv select {
            width: 200px;
        }

        #p3 .sec1 .selectdiv.sel-3 select {
            width: 130px;
        }

        #p3 .sec1 .selectdiv.sel-4 select {
            width: 80px;
        }

        #p3 .sec1 .row-2 label {
            margin-right: 20px;
        }

        #p3 .sec1 .row-2 .btn {
            width: 80px;
            height: 30px;
        }

        #p3 .sec2 {
            margin-top: 30px;
        }

        #p3 .sec2 table tr td {
            width: 140px;
        }

        #p3 .sec3 {
            margin-top: 25px;
        }

        #p3 .sec3 table tr td {
            width: 120px;
        }
    }

    @media (max-width: 768px) {
        #p3 {
            padding: 4vw;
        }

        #p3 .sec1 .selectdiv select {
            width: 25vw;
        }

        #p3 .sec1 .selectdiv.sel-1 {
            margin-right: 5vw;
        }

        #p3 .sec1 .selectdiv.sel-3 select {
            width: 20vw;
        }

        #p3 .sec1 .selectdiv.sel-4 select {
            width: 13vw;
        }

        #p3 .sec1 .row-2 .btn {
            height: 26px;
            width: 50px;
        }
    }

    @media (max-width: 576px) {
        #p3 .sec1 .row-2 .selectdiv:after {
            right: 9vw;
        }

        #p3 .sec1 .selectdiv select {
            width: 30vw;
        }

        #p3 .sec1 .selectdiv.sel-1 {
            margin-right: 2vw;
        }

        #p3 .sec1 .selectdiv.sel-1 label {
            margin-right: 2vw;
        }

        #p3 .sec1 .selectdiv.sel-2 label {
            margin-right: 2vw;
        }

        #p3 .sec1 .row-2 label {
            margin-right: 2vw;
        }

        #p3 .sec2 {
            margin-top: 20px;
        }

        #p3 .sec3 {
            margin-top: 20px;
        }
    }

    /* p4*/

    #p4 {
        padding: 35px;
    }

    #p4 form {
        margin: auto;
    }

    #p4 .sec1 {
        /* width: 1718px; */
        /* width: 80vw; */
        margin: auto;
    }

    #p4 .sec1 .row-1 {
        display: flex;
        align-items: center;
    }

    #p4 .sec1 .row-1 input {
        width: 300px;
        font-size: 16px;
        margin-left: 0;
        height: 40px;
    }

    #p4 .sec1 .row-1 .btn {
        width: 120px;
        margin-left: 10px;
    }

    #p4 .sec1 .row-1 .btn .text {
        font-size: 16px;
    }

    #p4 .sec1 .row-2 {
        display: flex;
        align-items: center;
        margin-top: 20px;
    }

    #p4 .sec1 .row-2 label {
        font-size: 16px;
        color: var(--black);
        font-weight: 700;
        margin-left: 0.5em;
    }

    #p4 .sec2 {
        margin-top: 20px;
    }

    #p4 table {
        background: var(--light-blue);
        max-width: 1718px;
        width: 80vw;
        border-radius: 10px;
        margin: auto;
    }

    #p4 table tr td {
        height: 50px;
        font-size: 14px;
        text-align: center;
        /* border-inline: none; */
    }

    #p4 table thead tr td {
        color: var(--black);
        font-size: 14px;
        font-weight: 700;
    }

    #p4 table tr .td-01 {
        width: 60px;
    }

    #p4 table tr .td-08 {
        max-width: 90px;
    }

    #p4 table .btn-sm .text {
        font-size: 14px;
    }

    #p4 table tr .td-09 {
        max-width: 90px;
        padding-right: 4px;
    }

    #p4 .sec3 {
        max-width: 1718px;
        margin-inline: auto;
        width: 80vw;
    }

    @media (max-width: 1200px) {
        #p4 {
            padding: 20px;
        }

        #p4 .sec1 {
            width: auto;
        }

        #p4 .sec1 .row-1 input {
            font-size: 14px;
            width: 230px;
            height: 35px;
            border-radius: 4px;
        }

        #p4 .sec1 .row-1 .btn {
            width: 70px;
            padding: 0.2em 0.3em;
            margin-left: 10px;
        }

        #p4 .sec1 .row-2 {
            margin-top: 10px;
        }

        #p4 .sec1 .row-2 label {
            font-size: 14px;
        }

        #p4 .sec2 {
            margin-top: 10px;
        }

        #p4 table {
            width: 100%;
        }

        #p4 table tr td {
            font-size: 12px;
            height: 40px;
        }

        #p4 table thead tr td {
            font-size: 12px;
        }

        #p4 table tr .td-01 {
            width: 30px;
        }

        #p4 table .btn-sm {
            margin: 1px;
            padding-inline: 1em;
        }

        #p4 table .btn-sm .text {
            font-size: 12px;
        }

        #p4 .sec3 {
            width: 96vw;
        }
    }

    @media (max-width: 768px) {
        #p4 {
            padding: 10px;
        }

        #p4 .sec1 .row-1 input {
            width: 200px;
            font-size: 12px;
            height: 30px;
        }

        #p4 .sec1 .row-1 .btn {
            /* width: 30vw; */
            margin-left: 5px;
        }

        #p4 .sec1 .row-1 .btn .text {
            font-size: 12px;
        }

        #p4 .sec1 .row-2 label {
            font-size: 12px;
        }

        #p4 .sec2 {
            margin-top: 10px;
        }

        #p4 table tr td {
            font-size: 10px;
            height: 30px;
        }

        #p4 table thead tr td {
            font-size: 10px;
        }

        #p4 table tr .td-01 {
            width: 20px;
        }

        #p4 table tr .td-08 {
            min-width: 35px;
        }

        #p4 table .btn-sm {
            margin: 0;
            border-radius: 3px;
            padding: 2px 6px;
        }

        #p4 table .btn-sm .text {
            font-size: 10px;
        }

        #p4 table tr .td-09 {
            min-width: 38px;
        }
    }

    @media (max-width: 576px) {
        #p4 .sec1 .row-1 .btn {
            padding-inline: 3vw;
        }
    }

    /* p5*/

    #p5 {
        padding: 60px;
        font-size: 16px;
    }

    #p5 .sec1 .row-1 .selectdiv:after {
        transform: translate(-18px, -42%);
    }

    #p5 .sec1 .row-1 .selectdiv label {
        margin-right: 38px;
    }

    #p5 .sec1 .row-1 .selectdiv select {
        width: 199px;
    }

    #p5 .sec1 .row-2 {
        margin-top: 20px;
        display: flex;
        align-items: center;
    }

    #p5 .sec1 .row-2 label {
        margin-right: 23px;
    }

    #p5 .sec1 .row-2 .pro-input {
        margin-left: 0;
        width: 199px;
        margin-right: 20px;
    }

    #p5 .sec1 .row-2 .date-box {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #p5 .sec1 .row-2 .date {
        width: 116px;
    }

    #p5 .sec1 .row-2 .dash {
        margin-inline: 20px;
    }

    #p5 .sec1 .row-2 .btn-sm {
        margin-left: 20px;
    }

    #p5 .sec2 {
        margin-top: 10px;
    }

    #p5 table {
        max-width: 1535px;
        background: var(--light-blue);
        width: 100%;
    }

    #p5 table tr.end-tr {
        height: 50px;
    }

    #p5 table tr td {
        text-align: center;
        border: none;
        padding: 3px;
    }

    #p5 table tr td input[type="text"] {
        max-width: 138px;
        text-align: center;
        padding: 0;
    }

    #p5 table tr td .selectdiv {
        margin: auto;
    }

    #p5 table tr td .selectdiv:after {
        transform: translate(-20px, -42%);
    }

    #p5 table tr td .selectdiv select {
        max-width: 219px;
        min-width: 8vw;
        text-align: center;
    }

    #p5 table thead tr td {
        font-weight: 700;
        color: var(--black);
        position: relative;
    }

    #p5 table thead tr td .icon {
        position: absolute;
        left: 68%;
        width: 16px;
    }

    #p5 table thead tr .td-02 .icon-filter {
        top: 36%;
    }

    @media (max-width: 1200px) {
        #p5 {
            font-size: 14px;
            padding: 30px;
        }

        #p5 .sec1 .row-1 .selectdiv label {
            margin-right: 23px;
        }

        #p5 .sec1 .row-1 .selectdiv select {
            width: 100px;
        }

        #p5 .sec1 .row-2 {
            margin-top: 10px;
        }

        #p5 .sec1 .row-2 label {
            margin-right: 10px;
        }

        #p5 .sec1 .row-2 .pro-input {
            width: 100px;
        }

        #p5 .sec1 .row-2 .date {
            width: 105px;
        }

        #p5 .sec1 .row-2 .dash {
            margin-inline: 6px;
        }

        #p5 table tr.end-tr {
            height: 25px;
        }

        #p5 table tr td {
            padding-inline: 2px;
        }

        #p5 table tr td input[type="text"] {
            /* width: 70px; */
            width: 10vw;
        }

        #p5 table tr td .selectdiv:after {
            transform: translate(-8px, -45%);
        }

        #p5 table tr td .selectdiv select {
            width: 11vw;
        }

        #p5 table thead tr td .icon {
            width: 14px;
        }
    }

    @media (max-width: 768px) {
        #p5 .sec1 .row-1 .selectdiv label {
            margin-right: 22px;
        }

        #p5 .sec1 .row-2 .date-box {
            justify-content: start;
        }

        #p5 .sec1 .row-2 .date {
            width: 90px;
        }

        #p5 .sec1 .row-2 .dash {
            font-size: 10px;
            margin-inline: 3px;
        }

        #p5 .sec1 .row-2 .btn-sm {
            margin-left: 10px;
        }

        #p5 table tr td {
            padding-inline: 1px;
        }

        #p5 table tr .td-01 input[type="text"] {
            min-width: 65px;
        }

        #p5 table tr td input[type="text"] {
            width: 8vw;
        }

        #p5 table thead tr td .icon {
            width: 12px;
        }
    }

    @media (max-width: 576px) {
        #p5 {
            padding: 4vw;
        }

        #p5 .sec1 .row-1 .selectdiv:after {
            transform: translate(-6px, -42%);
        }

        #p5 .sec1 .row-1 .selectdiv label {
            margin-right: 20px;
        }

        #p5 .sec1 .row-1 .selectdiv select {
            width: 60px;
        }

        #p5 .sec1 .row-2 {
            flex-wrap: wrap;
        }

        #p5 .sec1 .row-2 .pro-input {
            width: 60px;
            margin-right: 5px;
        }

        #p5 .sec1 .row-2 .date-box {
            padding: 0;
        }

        #p5 .sec1 .row-2 .date {
            width: 60px;
            padding-left: 2px;
        }

        #p5 .sec1 .row-2 .btn-sm {
            padding: 0.3em 1em;
            margin-left: 5px;
        }

        #p5 table tr .td-01 input[type="text"] {
            min-width: 55px;
        }

        #p5 table thead tr td .icon {
            width: 10px;
        }
    }

    /* p6*/

    #p6 {
        padding: 80px 80px;
        overflow-x: auto;
    }

    #p6 form {
        /* border: 1px solid; */
        max-width: 1720px;
        margin: auto;
    }

    #p6 .btn {
        background: var(--blue);
        width: 257px;
        height: 71px;
        padding: 0;
        position: relative;
        margin: 8px;
    }

    #p6 .btn-02 {
        background: #fff;
        border: 1px solid var(--grey);
    }

    #p6 .btn-02 .text {
        color: #5B5B5B;
    }

    #p6 .btn-03 {
        width: 400px;
        border: 1px solid var(--grey);
        background: #fff;
    }

    #p6 .btn-03 .text {
        color: #5B5B5B;
    }

    #p6 .btn:before {
        content: "";
        width: 80px;
        height: 2px;
        left: 0;
        transform: translate(-100%, 0px);
        background: var(--grey);
        position: absolute;
    }

    #p6 .btn-001:before {
        width: 1px;
        height: 890px;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 100%);
    }

    #p6 .btn-002:after {
        content: "";
        width: 1px;
        height: 291px;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 100%);
        background: var(--grey);
        position: absolute;
    }

    #p6 .btn-003:after {
        content: "";
        width: 1px;
        height: 63px;
        left: 50%;
        bottom: 0;
        transform: translate(-50%, 100%);
        background: var(--grey);
        position: absolute;
    }

    #p6 .row {
        margin-left: 209px;
        margin-top: 25px;
    }

    #p6 .row-2 {
        margin-top: 40px;
    }

    #p6 .line-2 {
        margin-left: 207px;
    }

    #p6 .row-2 .line-2 {
        display: flex;
    }

    #p6 .row-2 .right {
        margin-left: -82px;
    }

    #p6 .row-3 .line-2 {
        margin-top: 25px;
    }

    #p6 .row-4 .line-2 {
        margin-top: 25px;
    }

    @media (max-width: 1200px) {
        #p6 {
            padding: 40px 30px;
        }

        #p6 .btn {
            width: 150px;
            height: 40px;
        }

        #p6 .btn-03 {
            width: 210px;
        }

        #p6 .btn:before {
            width: 40px;
        }

        #p6 .btn-001:before {
            width: 1px;
            height: 520px;
        }

        #p6 .btn-003:after {
            height: 37px;
        }

        #p6 .row {
            margin-top: 15px;
            margin-left: 114px;
        }

        #p6 .line-2 {
            margin-left: 114px;
        }

        #p6 .row-2 .right {
            margin-left: -37px;
        }

        #p6 .row-3 .line-2 {
            margin-top: 15px;
        }

        #p6 .row-4 .line-2 {
            margin-top: 15px;
        }
    }

    @media (max-width: 768px) {
        #p6 {
            padding: 30px 1vw;
        }

        #p6 .btn {
            width: 100px;
            height: 30px;
        }

        #p6 .btn-03 {
            width: 140px;
        }

        #p6 .btn-001:before {
            height: 424px;
        }

        #p6 .btn-003:after {
            height: 31px;
        }

        #p6 .row {
            margin-left: 90px;
        }

        #p6 .line-2 {
            margin-left: 90px;
        }

        #p6 .row-2 .right {
            margin-left: -17px;
        }
    }

    @media (max-width: 576px) {
        #p6 .btn {
            width: 70px;
        }

        #p6 .btn-03 {
            width: 140px;
        }

        #p6 .btn:before {
            width: 30px;
        }

        #p6 .btn-001:before {
            width: 1px;
        }

        #p6 .btn-003:after {
            height: 31px;
        }

        #p6 .row {
            margin-left: 65px;
        }

        #p6 .line-2 {
            margin-left: 65px;
        }

        #p6 .row-2 .right {
            margin-left: -57px;
        }
    }

    /* p7 */

    #p7 form {
        margin: auto;
        padding: 35px 35px 213px;
    }

    #p7 .sec1 {
        max-width: 1720px;
        margin: auto;
    }

    #p7 .sec1 .row {
        display: flex;
        align-items: center;
    }

    #p7 .sec1 .row label {
        margin-right: 30px;
    }

    #p7 .sec1 .row .date-box {
        margin-right: 10px;
    }

    #p7 .sec1 .row .date-box input {
        width: 191px;
    }

    #p7 .sec1 .row .date-box .dash {
        margin-inline: 0.5em;
    }

    #p7 .sec2 {
        padding: 75px 67px 300px;
        background: var(--light-blue);
        border-radius: 10px;
        max-width: 1720px;
        margin: auto;
        margin-top: 20px;
    }

    #p7 table {
        max-width: 1383px;
        text-align: center;
        background: #fff;
        width: 100%;
    }

    #p7 table tr .td-01 {
        padding-inline: 1em;
    }

    #p7 table tr .td-05 {
        text-align: start;
        padding-left: 1em;
    }

    #p7 table tr .td-06 .btn {
        padding: 0;
        margin: auto;
        margin-inline: 3px;
    }

    #p7 table thead tr {
        font-weight: 700;
        color: var(--black);
    }

    @media (max-width: 1200px) {
        #p7 form {
            padding: 20px;
        }

        #p7 .sec1 .row label {
            margin-right: 10px;
        }

        #p7 .sec1 .row .date-box input {
            width: 120px;
        }

        #p7 .sec2 {
            padding: 30px;
            border-radius: 5px;
        }

        #p7 table tr .td-05 {
            padding-left: 0.5em;
        }
    }

    @media (max-width: 768px) {
        #p7 form {
            padding: 10px;
        }

        #p7 .sec1 .row .date-box input {
            width: 90px;
        }

        #p7 .sec2 {
            padding: 10px;
            border-radius: 3px;
        }

        #p7 table tr .td-06 {
            padding-inline: 2px;
        }
    }

    @media (max-width: 576px) {
        #p7 .sec1 .row {
            display: flex;
        }

        #p7 .sec1 .row .date-box input {
            width: 75px;
        }

        #p7 table tr .td-06 {
            min-width: 40px;
        }
    }

    /* p9 */
    /* p4_reference*/

    #p9 {
        padding: 35px;
    }

    #p9 form {
        margin: auto;
    }

    #p9 .sec1 {
        width: 1718px;
        margin: auto;
    }

    #p9 .sec1 .row-2 {
        display: flex;
        align-items: center;
        margin-top: 30px;
    }

    #p9 .sec1 .row-2 label {
        color: var(--black);
        font-weight: 700;
        margin-left: 0.5em;
    }

    #p9 .sec2 {
        margin-top: 30px;
    }

    #p9 table {
        background: var(--light-blue);
        max-width: 1718px;
        border-radius: 10px;
        margin: auto;
        width: 100%;
        border-radius: 0;
    }

    #p9 table tr td {
        text-align: center;
        border-inline: none;
    }

    #p9 .sec3 {
        margin-top: 30px;
    }

    @media (max-width: 1200px) {
        #p9 {
            padding: 20px;
        }

        #p9 .sec1 {
            width: auto;
        }

        #p9 .sec1 .row-2 {
            margin-top: 10px;
        }

        #p9 .sec2 {
            margin-top: 20px;
        }

        #p9 .sec3 {
            margin-top: 20px;
        }
    }

    @media (max-width: 576px) {
        #p9 {
            padding-inline: 10px;
        }
    }

    /* p3 reference*/

    #p9 .sec1 .row-1 {
        display: flex;
    }

    #p9 .sec1 .row-2 {
        display: flex;
        align-items: center;
        margin-top: 30px;
    }

    #p9 .sec1 .row-1 .selectdiv:after {
        right: 10px;
    }

    #p9 .sec1 .row-2 .selectdiv:after {
        right: 90px;
    }

    #p9 .sec1 .selectdiv label {
        margin-right: 40px;
    }

    #p9 .sec1 .selectdiv select {
        width: 390px;
    }

    #p9 .sec1 .selectdiv.sel-1 {
        margin-right: 90px;
    }

    #p9 .sec1 .selectdiv.sel-3 select {
        width: 213px;
    }

    #p9 .sec1 .selectdiv.sel-4 select {
        width: 130px;
    }

    #p9 .sec1 .row-2 label {
        margin-right: 40px;
    }

    #p9 .sec1 .row-2 .selectdiv label {
        font-size: 19px;
        margin-left: 1em;
    }

    @media (max-width: 1200px) {
        #p9 .sec1 .row-2 {
            margin-top: 10px;
        }

        #p9 .sec1 .row-2 .selectdiv:after {
            right: 56px;
        }

        #p9 .sec1 .selectdiv label {
            margin-right: 20px;
        }

        #p9 .sec1 .selectdiv select {
            width: 200px;
        }

        #p9 .sec1 .selectdiv.sel-3 select {
            width: 130px;
        }

        #p9 .sec1 .selectdiv.sel-4 select {
            width: 80px;
        }

        #p9 .sec1 .row-2 label {
            margin-right: 20px;
        }

        #p9 .sec1 .row-2 .selectdiv label {
            font-size: 14px;
        }
    }

    @media (max-width: 768px) {
        #p9 .sec1 .selectdiv select {
            width: 25vw;
        }

        #p9 .sec1 .selectdiv.sel-1 {
            margin-right: 5vw;
        }

        #p9 .sec1 .selectdiv.sel-3 select {
            width: 20vw;
        }

        #p9 .sec1 .selectdiv.sel-4 select {
            width: 13vw;
        }
    }

    @media (max-width: 576px) {
        #p9 .sec1 .row-2 .selectdiv:after {
            right: 9vw;
        }

        #p9 .sec1 .selectdiv select {
            width: 28vw;
            padding-left: 0.3em;
        }

        #p9 .sec1 .selectdiv.sel-1 {
            margin-right: 2vw;
        }

        #p9 .sec1 .selectdiv.sel-1 label {
            margin-right: 2vw;
        }

        #p9 .sec1 .selectdiv.sel-2 label {
            margin-right: 2vw;
        }

        #p9 .sec1 .row-2 label {
            margin-right: 2vw;
        }
    }

    /* p9 */

    #p9 .sec1 .row-2 .check-row {
        display: flex;
        align-items: center;
    }

    #p9 .sec1 .row-2 .check-row .check-box {
        display: flex;
        align-items: center;
        position: relative;
    }

    @media (max-width: 576px) {
        #p9 #p9 {
            padding: 4vw;
        }

        #p9 .sec1 .row-2 .check-row .check-box label {
            margin: 1vw;
        }
    }

    /* p10 */

    #p10 .sec1 {
        padding: 150px 40px;
    }

    #p10 .sec1 form {
        max-width: 2080px;
        background: var(--light-blue);
        margin: auto;
        padding: 40px;
        border-radius: 10px;
    }

    #p10 .sec1 .line-1 {
        display: flex;
    }

    #p10 .sec1 .line-1 .left {
        display: flex;
        align-items: center;
        margin-right: 70px;
    }

    #p10 .sec1 .line-1 .right .date {
        display: flex;
        align-items: center;
        background: #fff;
        width: 418px;
        height: 50px;
        border: 2px solid var(--grey);
        border-radius: 5px;
        padding: 1em;
    }

    #p10 .sec1 .line-1 .right .date .fa-caret-down {
        margin-left: auto;
    }

    #p10 table {
        max-width: 1890px;
        width: 100%;
        background: #fff;
        margin-top: 25px;
        border-radius: 10px;
    }

    #p10 table tr td div {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #p10 table tr td {
        text-align: center;
        background: #fff;
    }

    #p10 table tr .td-2 {
        background: #F7F7F7;
    }

    #p10 table tr .td-3 {
        text-align: end;
        padding-right: 0.5em;
    }

    #p10 table tr td .day {
        font-size: 14px;
        margin-left: 1em;
    }

    #p10 table thead tr.tr-00 {
        background: #F7F7F7;
    }

    @media (max-width: 1200px) {
        #p10 .sec1 {
            padding: 50px 20px;
        }

        #p10 .sec1 form {
            padding: 20px;
            border-radius: 5px;
        }

        #p10 .sec1 .line-1 .left {
            margin-right: 30px;
        }

        #p10 .sec1 .line-1 .right .date {
            width: 220px;
            height: 40px;
        }

        #p10 table {
            margin-top: 13px;
        }

        #p10 table tr td .day {
            font-size: 12px;
            margin-left: 0.5em;
        }
    }

    @media (max-width: 768px) {
        #p10 .sec1 {
            padding: 4vw 2vw;
        }

        #p10 .sec1 .line-1 .left {
            margin-right: 20px;
        }

        #p10 .sec1 .line-1 .right .date {
            height: 35px;
        }

        #p10 table tr td .day {
            font-size: 10px;
        }
    }

    @media (max-width: 576px) {
        #p10 .sec1 .line-1 {
            display: flex;
        }

        #p10 .sec1 .line-1 .right .date {
            height: 30px;
        }

        #p10 table tr td .day {
            font-size: 9px;
        }
    }

    /* p11 */

    #p11 {
        margin-top: calc(-1 * var(--tool-bar));
    }

    #p11 .sec1 {
        background: #E4E4E4;
        padding: 50px;
    }

    #p11 .sec1 .box {
        width: 1200px;
        background: #fff;
        margin: auto;
        padding: 80px 50px;
        /* padding-bottom: 40px; */
        text-align: center;
    }

    #p11 .sec1 .row-1 {
        margin-bottom: 15px;
    }

    #p11 .sec1 .row-1 .date {
        font-weight: 700;
        font-size: 22px;
    }

    #p11 .sec1 .row-1 .time {
        font-size: 40px;
        color: var(--black);
    }

    #p11 .sec1 .row-2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    #p11 .sec1 .row-2 .btn-01 {
        font-size: 22px;
        width: 350px;
        height: 90px;
        border: 2px solid var(--grey);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--blue);
        font-weight: 700;
        border-radius: 5px;
        box-shadow: 0px 0px 10px #cdcdcd;
        margin: 10px;
    }

    @media (max-width: 1200px) {
        #p11 .sec1 .box {
            padding: 80px 40px;
            width: 100%;
            max-width: 800px;
        }

        #p11 .sec1 .row-1 .date {
            font-size: 18px;
        }

        #p11 .sec1 .row-1 .time {
            font-size: 30px;
        }

        #p11 .sec1 .row-2 .btn-01 {
            width: 300px;
            height: 80px;
            margin: 5px;
        }
    }

    @media (max-width: 768px) {
        #p11 .sec1 .box {
            width: 100%;
            max-width: 500px;
            padding: 50px;
        }
    }

    @media (max-width: 576px) {
        #p11 .sec1 {
            padding: 8vw;
        }

        #p11 .sec1 .box {
            max-width: 360px;
        }

        #p11 .sec1 .row-1 {
            margin-bottom: 10px;
        }

        #p11 .sec1 .row-2 .btn-01 {
            min-width: 300px;
        }
    }

    /* p12 */

    #p12 {
        margin-top: calc(var(--header-height) + var(--title-bar));
    }

    #p12 .row,
    #p12 .row>* {
        display: flex;
        align-items: center;
    }

    #p12 .title-bar .row {
        border-top: 2px solid var(--blue);
        padding-left: 60px;
        background: #E4F4F3;
    }

    #p12 .title-bar .left .text {
        color: var(--black);
    }

    #p12 .title-bar .right .btn {
        background: #5A5A5A;
    }

    #p12 .title-bar .right .time-box {
        display: flex;
        align-items: center;
        margin-left: 60px;
    }

    #p12 .title-bar .right .time-box .img-box img {
        margin-right: 8px;
    }

    #p12 .sec1 {
        /* overflow-x: auto; */
    }

    #p12 .sec1 .row {
        padding: 18px 60px;
    }

    #p12 .sec1 .row .left {
        min-width: fit-content;
    }

    #p12 .sec1 .row .left .date-box img {
        width: 11px;
    }

    #p12 .sec1 .row .left .date-box .date {
        margin-inline: 1em;
    }

    #p12 .sec1 .row .middle>* {
        display: flex;
        align-items: center;
    }

    #p12 .sec1 .row .middle .btn {
        width: 90px;
        height: 45px;
        padding: 0;
        border: 1px solid var(--grey);
        margin: 0;
        background: #fff;
    }

    #p12 .sec1 .row .middle .btn.active,
    #p12 .sec1 .row .middle .btn:hover {
        background: var(--blue);
    }

    #p12 .sec1 .row .middle .btn.active .text,
    #p12 .sec1 .row .middle .btn:hover .text {
        color: #fff;
    }

    #p12 .sec1 .row .middle .btn .text {
        color: #5D5D5D;
    }

    #p12 .sec1 .row .middle .btn-01-group {
        margin-inline: 15px;
    }

    #p12 .sec1 .row .middle .btn-01-group .btn-1 {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
        display: flex;
    }

    #p12 .sec1 .row .middle .btn-01-group .btn-2 {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        display: flex;
    }

    #p12 .sec1 .row .middle .btn-02-group .btn-1 {
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        display: flex;
    }

    #p12 .sec1 .row .middle .btn-02-group .btn-2 {
        border-radius: 0;
    }

    #p12 .sec1 .row .middle .btn-02-group .btn-3 {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        display: flex;
    }

    #p12 .sec1 .row .middle .btn-03-group .btn {
        width: 143px;
        background: var(--blue);
        margin-inline: 15px;
    }

    #p12 .sec1 .row .middle .btn-03-group .btn .text {
        color: #fff;
    }

    #p12 .sec1 .row .right .selectdiv {
        margin-inline: 5px;
    }

    #p12 .sec1 .row .right .selectdiv select {
        width: 200px;
        height: 45px;
        padding-block: 0;
        padding-left: 0.5em;
    }

    #p12 .sec2 .row {
        height: 60px;
        border: 1px dashed var(--grey);
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #p12 .sec2 .row .text {
        color: #DEDEDE;
    }

    #p12 .section-group {
        overflow-x: auto;
    }

    #p12 .sec3 .row .col-0 {
        width: 110px;
    }

    #p12 .sec3 .row .col-0 .btn {
        width: 90px;
        height: 50px;
        padding: 0;
        border-radius: 10px;
        margin-block: 0;
    }

    #p12 .sec3 .row .col {
        border: 1px solid var(--grey);
        height: 60px;
        width: calc(var(--td) * 6);
        padding-inline: 14px;
    }

    #p12 .sec3 .row .col .text-box .text {
        color: #8F8D8D;
    }

    #p12 .sec3 .row .col-3 {
        width: calc(var(--td) * 6 + 40px);
    }

    #p12 .sec3 .row-2 .col {
        border: none;
        width: calc(var(--td) * 6);
        padding: 0;
    }

    #p12 .sec3 .row-2 .col .text-box {
        display: flex;
        justify-content: space-between;
        width: 87%;
        align-items: baseline;
    }

    #p12 .sec3 .row-2 .col .text-box .num {
        font-size: 12px;
        color: #8F8D8D;
    }

    #p12 .sec3 .row-2 .col .text-box .num.lg-num {
        font-size: 16px;
    }

    #p12 .sec3 .row-2 .col-1 {
        margin-left: 18px;
    }

    #p12 .sec3 .row-2 .col-1 .text-box {
        /* margin-left: 33px; */
    }

    #p12 .sec4 {
        /* background: var(--light-blue); */
    }

    #p12 .sec4 .row-0 {
        background: var(--light-blue);
        height: 50px;
        display: flex;
        align-items: center;
        padding-inline: 12px;
        width: calc(218px + var(--td) * 18);
    }

    #p12 .sec4 .row-0 .text {
        width: 250px;
        height: 40px;
        border-radius: 7px;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
        background: linear-gradient(76deg, #009B8E, #69C4BC, #AADDD9, #e4f4f3, #e4f4f3);
        color: #fff;
        display: flex;
        align-items: center;
        padding-inline: 30px;
    }

    #p12 .sec4 .row {
        background: #fff;
    }

    #p12 .sec4 .row .left {
        min-width: 140px;
        width: 100px;
        border: 1px solid var(--grey);
        border-right: none;
        display: flex;
        align-items: center;
        height: 161px;
        position: relative;
    }

    #p12 .sec4 .row .left .text {
        margin-left: 35px;
    }

    #p12 .sec4 .row .left .img-box {
        position: absolute;
        top: 17px;
        right: 14px;
    }

    #p12 .sec4 .row .left .img-box img {
        width: 20px;
    }

    #p12 .sec4 .row .right {
        position: relative;
        overflow: hidden;
    }

    #p12 .sec4 table {
        background: #fff;
        min-width: calc(var(--td) * 18);
    }

    #p12 .sec4 table tr td {
        width: var(--td);
        height: 160px;
        border: 1px dashed var(--grey);
    }

    #p12 .sec4 table tr td.td-12,
    #p12 .sec4 table tr td.td-6 {
        border-right-style: solid;
    }

    #p12 .sec4 .chart-group {
        position: absolute;
        top: 0;
        display: flex;
        align-items: center;
        /* display: none; */
    }

    #p12 .sec4 .chart {
        height: 80px;
        display: flex;
        color: #fff;
        position: relative;
        /* border-radius: 5px; */
    }

    #p12 .sec4 .chart-red {
        background: #F98C84;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }

    #p12 .sec4 .chart-light-red {
        background: #FFC0BB;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }

    #p12 .sec4 .chart-grey {
        background: #A3B4BC;
        padding-left: 22px;
    }

    #p12 .sec4 .chart-blue {
        background: #79C0F9;
    }

    #p12 .sec4 .chart-light-blue {
        background: #A8D8FF;
    }

    #p12 .sec4 .chart .text {
        font-size: 14px;
    }

    #p12 .sec4 .chart .btn {
        width: 24px;
        height: 47px;
        letter-spacing: 2px;
        background: #F74D47;
        padding: 0;
        margin: 4px 8px;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #p12 .sec4 .chart .btn .text {
        text-align: center;
        writing-mode: tb-rl;
    }

    #p12 .sec4 .chart .btn-02 {
        height: 56px;
        position: absolute;
        top: 0px;
        right: 0;
    }

    #p12 .sec4 .chart .btn-02 .text {
        line-height: 1.2;
    }

    #p12 .sec4 .chart .btn-red {
        background: #F74D47;
    }

    #p12 .sec4 .chart .btn-black {
        background: #707070;
    }

    #p12 .sec4 .chart .btn-orange {
        background: #FFA65F;
    }

    #p12 .sec4 .chart .text-box {
        flex-direction: column;
        align-items: start;
    }

    #p12 .sec4 .chart .text-box .text {
        font-size: 14px;
        height: 1.5em;
        overflow: hidden;
    }

    #p12 .sec4 .chart-blue-two {
        background: #79C0F9;
    }

    #p12 .sec4 .chart-blue-two .text-box {
        z-index: 2;
        overflow: hidden;
        width: 74%;
        /* background: red; */
    }

    #p12 .sec4 .chart-blue-two .text-box .text {
        width: 343px;
    }

    #p12 .sec4 .chart-blue-two .bg-light-blue {
        background: #A8D8FF;
        height: 100%;
        width: 50%;
        position: absolute;
        right: 0;
        z-index: 0;
    }

    #p12 .sec4 .chart-blue-two .btn-02 {
        z-index: 3;
    }

    #p12 .sec4 .chart-group-2 {
        left: calc(var(--td) * 13);
    }

    #p12 .sec5 .chart-grey {
        opacity: 0;
    }

    #p12 .sec6 {
        margin: 35px 60px 25px;
        display: flex;
    }

    #p12 .sec6 .selectdiv.sel-4:after {
        display: none;
    }

    #p12 .sec6 .selectdiv label {
        display: none;
    }

    #p12 .sec6 .selectdiv select {
        width: 152px;
        color: #5A5A5A;
    }

    #p12 .sec6 .selectdiv.sel-4 select {
        opacity: 1;
        width: 236px;
        margin-left: 16px;
    }

    #p12 .sec7 {
        padding: 60px;
        padding-top: 0;
        overflow-x: auto;
    }

    #p12 .sec7 .row {
        flex-wrap: wrap;
    }

    #p12 .sec7 .row .group {
        min-width: 190px;
        width: 190px;
        margin-bottom: 10px;
    }

    #p12 .sec7 .row .group .box {
        min-width: 104px;
        height: 34px;
        margin-right: 10px;
        border-radius: 10px;
        background: #5C5C5C;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #p12 .sec7 .row .group .box .text {
        text-align: center;
        color: #fff;
        font-size: 12px;
    }

    #p12 .sec7 .row .group .text-box {
        height: 1em;
        overflow: hidden;
        align-items: baseline;
    }

    #p12 .sec7 .row .group .text-box .text {
        font-size: 12px;
    }

    #p12 .sec7 .row-1 .group .box {
        background: #D70101;
    }

    #p12 .sec7 .row-3 .group .box {
        background: #4575CF;
    }

    @media (max-width: 1200px) {
        #p12 .title-bar .row {
            padding-left: 30px;
        }

        #p12 .title-bar .right .time-box {
            margin-left: 30px;
        }

        #p12 .title-bar .right .time-box .img-box img {
            width: 25px;
        }

        #p12 .sec1 .row {
            padding: 13px 20px;
        }

        #p12 .sec1 .row .left .date-box img {
            width: 9px;
        }

        #p12 .sec1 .row .middle .btn {
            height: 30px;
            width: 50px;
        }

        #p12 .sec1 .row .middle .btn.active,
        #p12 .sec1 .row .middle .btn.active .text,
        #p12 .sec1 .row .middle .btn-01-group {
            margin-inline: 6px;
        }

        #p12 .sec1 .row .middle .btn-03-group .btn {
            width: 90px;
            margin-inline: 5px;
        }

        #p12 .sec1 .row .right .selectdiv {
            margin-inline: 2px;
        }

        #p12 .sec1 .row .right .selectdiv select {
            width: 200px;
            height: 30px;
        }

        #p12 .sec2 .row {
            height: 50px;
        }

        #p12 .sec3 .row .col-0 {
            width: 63px;
        }

        #p12 .sec3 .row .col-0 .btn {
            width: 80px;
            height: 40px;
            border-radius: 5px;
        }

        #p12 .sec3 .row .col-0 .btn .text {
            font-size: 12px;
        }

        #p12 .sec3 .row .col {
            height: 45px;
        }

        #p12 .sec3 .row-2 .col .text-box .num {
            font-size: 10px;
        }

        #p12 .sec3 .row-2 .col .text-box .num.lg-num {
            font-size: 16px;
        }

        #p12 .sec3 .row-2 .col-1 {
            margin-left: 3px;
        }

        #p12 .sec4 .row-0 {
            width: calc(120px + var(--td) * 18);
            height: 40px;
            padding-inline: 10px;
        }

        #p12 .sec4 .row-0 .text {
            height: 30px;
            border-radius: 5px;
        }

        #p12 .sec4 .row .left {
            min-width: 75px;
            width: 50px;
            height: 101px;
        }

        #p12 .sec4 .row .left .text {
            margin-left: 10px;
        }

        #p12 .sec4 .row .left .img-box img {
            width: 19px;
        }

        #p12 .sec4 table tr td {
            height: 100px;
        }

        #p12 .sec4 .chart {
            height: 50px;
        }

        #p12 .sec4 .chart-grey {
            padding-left: 10px;
        }

        #p12 .sec4 .chart .btn {
            width: 18px;
            height: 37px;
            margin: 3px 4px;
        }

        #p12 .sec4 .chart .btn .text {
            font-size: 11px;
        }

        #p12 .sec4 .chart .btn-02 {
            height: 43px;
        }

        #p12 .sec4 .chart .text-box .text {
            font-size: 10px;
        }

        #p12 .sec6 {
            margin: 20px;
        }

        #p12 .sec6 .selectdiv select {
            width: 92px;
        }

        #p12 .sec6 .selectdiv.sel-4 select {
            width: 163px;
            margin-left: 10px;
        }

        #p12 .sec7 {
            padding: 20px;
            padding-top: 0;
        }

        #p12 .sec7 .row .group {
            margin-bottom: 7px;
            min-width: 140px;
            width: 100px;
        }

        #p12 .sec7 .row .group-1 {
            /* min-width: 190px; */
        }

        #p12 .sec7 .row .group .box {
            width: 70px;
            height: 24px;
            border-radius: 5px;
            min-width: 70px;
        }

        #p12 .sec7 .row .group .box .text {
            font-size: 10px;
        }
    }

    @media (max-width: 768px) {
        #p12 .title-bar .right .time-box .img-box img {
            width: 20px;
            margin-right: 4px;
        }

        #p12 .sec1 .row .left .date-box img {
            width: 8px;
        }

        #p12 .sec1 .row .left .date-box .date {
            margin-inline: 0.4em;
        }

        #p12 .sec1 .row .middle .btn {
            height: 25px;
            width: 40px;
        }

        #p12 .sec1 .row .middle .btn.active,
        #p12 .sec1 .row .middle .btn.active .text,
        #p12 .sec1 .row .middle .btn-03-group .btn {
            width: 75px;
        }

        #p12 .sec1 .row .right .selectdiv select {
            height: 100px;
            width: 55px;
        }

        #p12 .sec2 .row {
            height: 40px;
        }

        #p12 .section-group {
            overflow-x: auto;
        }
    }

    @media (max-width: 576px) {
        #p12 .title-bar .row {
            padding-left: 4vw;
        }

        #p12 .title-bar .right .time-box {
            margin-left: 2vw;
        }

        #p12 .sec1 .row .left .date-box img {
            width: 7px;
        }

        #p12 .sec1 .row .left .date-box .date {
            font-size: 12px;
        }

        #p12 .sec1 .row .middle .btn {
            /* height: 20px; */
            width: 35px;
        }

        #p12 .sec1 .row .middle .btn.active,
        #p12 .sec1 .row .middle .btn.active .text,
        #p12 .sec1 .row .middle .btn .text {
            font-size: 10px;
        }

        #p12 .sec1 .row .middle .btn-03-group .btn {
            width: 60px;
        }

        #p12 .section-group {
            overflow-x: auto;
        }

        #p12 .sec4 .chart .btn .text {
            font-size: 10px;
        }
    }

    :root {
        --td: calc((100vw - 140px) / 18);
    }

    @media (max-width: 1200px) {
        :root {
            --td: calc((100vw - 75px) / 18);
        }
    }

    #p12 .l-td-0_9 {
        width: calc(var(--td) * 0.9);
    }

    #p12 .l-td-1 {
        width: calc(var(--td) * 1);
    }

    #p12 .l-td-2 {
        width: calc(var(--td) * 2);
    }

    #p12 .l-td-2_1 {
        width: calc(var(--td) * 2.1);
    }

    #p12 .l-td-3 {
        width: calc(var(--td) * 3);
    }

    #p12 .l-td-4 {
        width: calc(var(--td) * 4);
    }

    #p12 .l-td-4_1 {
        width: calc(var(--td) * 4.1);
    }

    #p12 .l-td-6 {
        width: calc(var(--td) * 6);
    }

    /* p13 */

    .p13_body {
        background: var(--dark-grey);
        padding-inline: 50px;
    }

    #p13 {
        background: #fff;
        max-width: 1000px;
        margin: auto;
        margin-top: 100px;
        /* padding: 100px; */
        overflow-x: auto;
    }

    #p13 form {
        border: 1px solid var(--grey);
        border-radius: 5px;
        padding: 25px;
    }

    #p13 .btn-02 {
        padding: 0.3em 0.8em;
        border-radius: 5px;
        display: inline-block;
        text-align: center;
        vertical-align: middle;
        margin: 10px 4px;
        border: 1px solid var(--grey);
    }

    #p13 .btn-02 .text {
        color: #5a5a5a;
        display: flex;
        align-items: center;
        /* height: 100%; */
    }

    #p13 .row-1 {
        display: flex;
        justify-content: space-between;
    }

    #p13 .row-2 {
        border: 1px solid var(--grey);
        border-radius: 5px;
        margin-top: 20px;
    }

    #p13 .row-2 .line-1 {
        border-bottom: 2px solid #ABABAB;
        padding-inline: 10px;
    }

    #p13 .row-2 .line-1 .btn-02 .text {
        color: #fff;
    }

    #p13 .row-2 .line-2 {
        padding-inline: 10px;
    }

    #p13 .row-2 .line-2 .btn-02 .text {
        color: #fff;
    }

    #p13 .row-3>.text {
        margin-block: 0.7em;
    }

    #p13 .row-3 .box {
        border: 1px solid var(--grey);
        border-radius: 5px;
        display: flex;
        padding-inline: 10px;
        flex-wrap: wrap;
    }

    #p13 .row-3 .box .btn-02 .text {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #p13 .row-3 .box .btn-02.active,
    #p13 .row-3 .box .btn-02:hover {
        border-color: #F98C84;
        background: #FFBF8B;
    }

    #p13 .row-3 .box .sel-box {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-grow: 1;
    }

    .sel-box .selectdiv:after {
        right: 10px;
    }

    #p13 .row-3 .box .sel-box select {
        width: 420px;
        color: #5a5a5a;
        padding-block: 0;
    }

    #p13 .row-4 {
        display: flex;
        justify-content: space-between;
        margin-top: 3px;
        align-items: center;
    }

    #p13 .row-4 .left {
        width: fit-content;
        margin-top: 15px;
        flex-direction: column;
    }

    #p13 .row-4 .left .btn-02 {
        width: 83px;
        margin-left: 0 !important;
    }

    #p13 .row-4 .right .btn {
        height: 50px;
        max-height: 50px;
        min-width: 100px;
    }

    #p13 .row-4 .right {
        display: flex;
        width: fit-content;
    }

    @media (max-width: 1200px) {
        .p13_body {
            padding-inline: 30px;
        }

        #p13 {
            padding: 30px;
            padding-block: 10vw;
            margin-block: 5vw;
            transform: none;
        }

        #p13 form {
            width: auto;
            max-width: 750px;
            margin: auto;
        }

        #p13 .btn-02 {
            margin: 8px 3px;
        }

        #p13 .row-2 {
            margin-top: 0px;
        }

        #p13 .row-3 .box .btn-02.active,
        #p13 .row-3 .box .sel-box {
            justify-content: start;
            margin-left: 30px;
        }

        #p13 .row-3 .box .sel-box select {
            height: 30px;
            width: 160px;
        }

        #p13 .row-4 .left {
            margin-top: 10px;
        }

        #p13 .row-4 .left .btn-02 {
            width: 60px;
        }

        #p13 .row-4 .right .btn {
            height: 40px;
        }
    }

    @media (max-width: 768px) {
        .p13_body {
            padding-inline: 3vw;
        }

        #p13 {
            padding: 3vw;
        }

        #p13 form {
            padding: 3vw;
        }

        #p13 .btn-02 {
            margin: 3px 2px;
            border-radius: 3px;
        }

        #p13 .row-3 .box .btn-02.active,
        #p13 .row-3 .box .sel-box {
            margin: 5px;
        }

        #p13 .row-3 .box .sel-box select {
            height: 24px;
            width: 125px;
        }

        #p13 .row-4 {
            display: flex;
            flex-wrap: wrap;
        }

        #p13 .row-4 .left {
            display: flex;
            margin-top: 8px;
        }

        #p13 .row-4 .left .btn-02 {
            width: 50px;
        }

        #p13 .row-4 .right {
            display: flex;
            align-items: center;
        }

        #p13 .row-4 .right .btn {
            height: 35px;
        }
    }

    @media (max-width: 576px) {
        #p13 .btn-02 {
            border-radius: 3px;
            margin: 3px 1px;
            padding-inline: 0.5em;
        }

        #p13 .row-3 .box .btn-02.active,
        #p13 .row-3 .box .sel-box select {
            width: 110px;
            height: 20px;
            margin-block: 0;
            padding-block: 0;
        }

        #p13 .row-4 {
            margin-top: 4px;
        }

        #p13 .row-4 .left {
            margin-top: 5px;
        }

        #p13 .row-4 .left .btn-02 {
            width: 40px;
        }
    }

    /* p14 */

    .p14_body {
        background: #B3B3B3;
        padding: 50px;
    }

    #p14 {
        max-width: 740px;
        /* height: 905px; */
        background: #fff;
        border-radius: 5px;
        margin: auto;
        margin-top: 100px;
    }

    #p14 form {
        padding: 25px;
    }

    #p14 .row-1 {
        height: 60px;
        background: var(--blue);
        border-radius: 5px 5px 0 0;
    }

    #p14 .row-2 {
        flex-direction: column;
        display: flex;
    }

    #p14 label {
        margin-block: 0.5em;
    }

    #p14 input[type=text],
    #p14 .datetime-box {
        display: flex;
        flex-direction: column;
    }

    #p14 .row-4 {
        display: flex;
        flex-direction: column;
    }

    #p14 .row-4 .min-box {
        border: 1px solid var(--grey);
        border-radius: 5px;
        padding: 16px;
    }

    #p14 .row-4 .min-box .btn-box {
        display: flex;
        flex-wrap: wrap;
    }

    #p14 .row-4 .min-box .btn-box .min-btn {
        border: 1px solid var(--grey);
        width: 60px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 4px;
        margin: 5px;
    }

    #p14 .row-4 .min-box .input-box {
        margin: 10px 5px;
    }

    #p14 .row-4 .min-box .input-box input[type=text] {
        width: 160px;
    }

    #p14 .row-5 {
        display: flex;
        justify-content: space-between;
        margin-top: 40px;
        margin-bottom: 20px;
    }

    #p14 .row-5 .del-btn {
        background: var(--light-red);
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        border-radius: 5px;
    }

    #p14 .row-5 input {
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 5px;
        font-size: 14px;
    }

    #p14 .row-5 input.reset-btn {
        background: #5A5A5A;
        margin-left: auto;
        margin-right: 5px;
    }

    #p14 .row-5 input.submit-btn {
        width: 140px;
        background: var(--blue);
    }

    @media (max-width:1200px) {
        #p14 {
            margin-top: 1vw;
            /* max-width: 430px; */
            max-width: 740px;
            margin-bottom: 50px;
        }

        #p14 form {
            padding: 15px;
        }

        #p14 .row-1 {
            height: 50px;
        }

        #p14 input[type=text],
        #p14 .row-4 .min-box {
            padding: 10px;
            border-radius: 3px;
        }

        #p14 .row-4 .min-box .btn-box .min-btn {
            height: 35px;
            width: 50px;
            margin: 4px;
        }

        #p14 .row-4 .min-box .input-box {
            display: flex;
            align-items: self-end;
            margin: 5px 2px;
        }

        #p14 .row-4 .min-box .input-box label {
            margin-left: 0.5em;
        }

        #p14 .row-5 {
            margin-top: 20px;
            margin-bottom: 10px;
        }

        #p14 .row-5 input.reset-btn {
            margin-right: 10px;
        }

        #p14 .row-5 input.submit-btn {
            width: 80px;
        }
    }

    @media (max-width:768px) {
        .p14_body {
            padding: 8vw;
        }

        #p14 {
            /* max-width: 380px; */
            max-width: 740px;
            margin-bottom: 50px;
        }

        #p14 form {
            padding-block: 10px;
        }

        #p14 .row-1 {
            height: 40px;
        }

        #p14 input[type=text],
        #p14 .row-4 .min-box .btn-box .min-btn {
            height: 30px;
            width: 40px;
            border-radius: 3px;
            margin: 3px;
        }
    }

    @media (max-width:576px) {
        .p14_body {
            padding: 3vw;
        }

        #p14 {
            max-width: 350px;
        }

        #p14 input[type=text],
        #p14 .row-4 .min-box .btn-box .min-btn {
            width: 35px;
            height: 25px;
            border-radius: 2px;
            margin: 2px;
        }
    }

    /* p15 */

    #p15 .wrapper {
        margin: 15px auto;
        max-width: 1720px;
        padding: 100px 80px;
        background: #fff;
    }

    #p15 .container-calendar {
        background: #ffffff;
        padding: 15px;
        margin: 0 auto;
        overflow: auto;
        position: relative;
        border: 1px solid var(--grey);
        border-radius: 5px;
        padding: 66px;
        padding-top: 40px;
        box-shadow: 0px 0px 7px #e7e7e7;
    }

    #p15 .button-container-calendar button {
        cursor: pointer;
        display: inline-block;
        zoom: 1;
        background: none;
        color: var(--blue);
        border-radius: 0;
        padding: 0;
        /* background: red; */
        margin: 0;
        font-size: 90px;
        /* position: absolute; */
        height: auto;
    }

    #p15 .table-calendar {
        border-collapse: collapse;
        width: 100%;
        font-size: 20px;
        border: none;
        margin-top: 40px;
    }

    #p15 .table-calendar td,
    #p15 .table-calendar th {
        /* padding: 5px; */
        border: 1px solid var(--grey);
        text-align: center;
        vertical-align: top;
        height: 114px;
    }

    #p15 .date-picker.selected {
        font-weight: bold;
        outline: 1px dashed #00BCD4;
    }

    #p15 .date-picker.selected span {
        border-bottom: 2px solid currentColor;
    }

    /* sunday */

    #p15 .date-picker:nth-child(7) {
        color: #ED7F7F;
    }

    /* friday */

    #p15 .date-picker:nth-child(6) {
        color: #10A8C2;
    }

    #p15 #monthAndYear {
        text-align: center;
        margin-top: 0;
        font-size: 45px;
    }

    #p15 .button-container-calendar {
        position: relative;
        /* overflow: hidden; */
        clear: both;
        height: 25px;
        display: flex;
        width: 420px;
        justify-content: space-between;
        align-items: center;
        position: absolute;
        top: 52px;
        left: 50%;
        transform: translate(-50%, 0px);
    }

    #p15 #previous {
        /* float: left; */
    }

    #p15 #next {
        /* float: right; */
    }

    #p15 .footer-container-calendar {
        margin-top: 1em;
        border-top: 1px solid #dadada;
        padding: 10px 0;
    }

    #p15 .footer-container-calendar select {
        cursor: pointer;
        display: inline-block;
        zoom: 1;
        background: #ffffff;
        color: #585858;
        border: 1px solid #bfc5c5;
        border-radius: 3px;
        padding: 5px 1em;
    }

    #p15 #thead-month {
        border: none;
    }

    #p15 #thead-month tr {
        border: none;
    }

    #p15 #thead-month tr th {
        border: none;
        height: 50px;
        vertical-align: middle;
    }

    #p15 #calendar-body tr td {
        background: #C2FFD6;
        border-radius: 0;
        padding: 0;
    }

    #p15 #calendar tr th:nth-child(6) {
        color: #10A8C2;
    }

    #p15 #calendar tr th:nth-child(7) {
        color: #ED7F7F;
    }

    #p15 #calendar tr .td {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        width: 100%;
    }

    #p15 #calendar tr .td .row-1 {
        display: flex;
        padding: 10px 12px;
    }

    #p15 #calendar tr .td .row-1 .num-red {
        margin-left: 1em;
    }

    #p15 #calendar tr .td .yel-bar {
        background: #FFFF68;
        height: 10px;
        width: 100%;
        margin-top: auto;
        border: 1px solid var(--grey);
    }

    #p15 #calendar tr .td .red-bar {
        background: #F98C84;
        height: 10px;
        width: 100%;
    }

    @media (max-width: 1200px) {
        #p15 .wrapper {
            padding: 50px 40px;
        }

        #p15 .container-calendar {
            padding: 30px;
        }

        #p15 .button-container-calendar button {
            font-size: 45px;
        }

        #p15 .table-calendar {
            font-size: 14px;
            margin-top: 20px;
        }

        #p15 .table-calendar td,
        #p15 .table-calendar th {
            height: 80px;
        }

        /* sunday */
        /* friday */
        #p15 #monthAndYear {
            font-size: 24px;
        }

        #p15 .button-container-calendar {
            width: 210px;
            top: 30px;
        }

        #p15 #thead-month tr th {
            height: 30px;
        }

        #p15 #calendar tr .td .row-1 {
            padding: 5px;
        }
    }

    @media (max-width: 576px) {
        #p15 .wrapper {
            padding: 3vw;
        }

        #p15 .container-calendar {
            padding: 2vw;
        }

        #p15 .table-calendar {
            font-size: 12px;
        }

        #p15 .table-calendar td,
        #p15 .table-calendar th {
            height: 50px;
        }

        /* sunday */
        /* friday */
        #p15 .button-container-calendar {
            top: 2vw;
        }

        #p15 #calendar tr .td .row-1 .num-red {
            margin-left: 1vw;
        }

        #p15 #calendar tr .td .yel-bar {
            height: 5px;
        }

        #p15 #calendar tr .td .red-bar {
            height: 5px;
        }
    }

    #p15 .mark-group {
        margin-top: 50px;
    }

    #p15 .mark-group .row {
        display: flex;
        margin-block: 40px;
    }

    #p15 .mark-group .row .mark {
        display: flex;
        align-items: center;
        min-width: 450px;
    }

    #p15 .mark-group .row .mark .mark-icon {
        width: 50px;
        height: 50px;
        border: 2px solid var(--grey);
    }

    #p15 .mark-group .row .mark .text {
        font-size: 25px;
        margin-left: 1em;
    }

    #p15 .mark-group .row .mark .mark-icon-1 {
        background: #F98C84;
    }

    #p15 .mark-group .row .mark .mark-icon-2 {
        background: #C2FFD6;
    }

    #p15 .mark-group .row .mark .mark-icon-3 {
        background: #FFFF68;
    }

    #p15 .mark-group .row .mark .mark-icon-4 {
        background: #79C0F9;
    }

    #p15 .mark-group .row .mark .mark-icon-6 {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 32px;
        color: var(--light-red);
        border: none;
    }

    @media (max-width: 1200px) {
        #p15 .mark-group {
            margin-top: 30px;
        }

        #p15 .mark-group .row {
            margin-block: 20px;
        }

        #p15 .mark-group .row .mark {
            min-width: 270px;
        }

        #p15 .mark-group .row .mark .mark-icon {
            width: 30px;
            height: 30px;
            border: 1px solid var(--grey);
        }

        #p15 .mark-group .row .mark .text {
            font-size: 16px;
        }

        #p15 .mark-group .row .mark .mark-icon-6 {
            border: none;
            font-size: 26px;
        }
    }

    @media (max-width: 768px) {
        #p15 .mark-group {
            margin-top: 20px;
        }

        #p15 .mark-group .row {
            margin-block: 10px;
        }
    }

    @media (max-width: 576px) {
        #p15 .mark-group .row .mark {
            min-width: 43vw;
        }

        #p15 .mark-group .row .mark .mark-icon {
            width: 20px;
            height: 20px;
            min-width: 20px;
        }

        #p15 .mark-group .row .mark .text {
            font-size: 12px;
            margin-left: 0.5em;
        }

        #p15 .mark-group .row .mark .mark-icon-6 {
            font-size: 15px;
        }
    }

    /* p16 */

    .p16_body {
        background: #B3B3B3;
        padding: 50px;
    }

    #p16 {
        max-width: 1720px;
        margin: auto;
        position: relative;
        padding: 170px 120px 100px;
        margin-top: 50px;
        background: #fff;
        border-radius: 5px;
    }

    #p16>.btn-01 {
        position: absolute;
        top: 25px;
        right: 32px;
        background: #5A5A5A;
    }

    #p16 .box .title {
        color: #5A5A5A;
    }

    #p16 .box .text {
        line-height: 2;
    }

    #p16 .box .sm-box {
        border: 1px solid var(--grey);
        border-radius: 5px;
        margin-top: 20px;
    }

    #p16 .box .sm-box .row.row-01 {
        margin: 0;
        margin-top: 20px;
        border: none;
        border-bottom: 2px solid #ABABAB;
        border-radius: 0;
    }

    #p16 .box .sm-box .row.row-01 .btn-02 {
        background: #DEDEDE;
        border: 1px solid #ABABAB;
        width: 197px;
        height: 63px;
        padding: 0;
        margin-bottom: -1px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        margin-right: 0;
    }

    #p16 .box .sm-box .row.row-01 .btn-02.active {
        background: var(--blue);
    }

    #p16 .box .sm-box .row {
        display: flex;
        border: 1px solid var(--grey);
        margin: 16px 13px;
        border-radius: 5px;
    }

    #p16 .box .sm-box .row .left {
        background: #ABABAB;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 60px;
        border-radius: 5px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    #p16 .box .sm-box .row .left img {
        max-width: 30px;
    }

    #p16 .box .sm-box .row .left img.icon-time {
        display: none;
    }

    #p16 .box .sm-box .row .right {
        padding-left: 8px;
    }

    #p16 .box .sm-box .row .right .line-2 {
        width: 285px;
        height: 63px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        border: 1px solid var(--grey);
        border-radius: 5px;
        border-left: 10px solid #F98C84;
        padding: 0 0.5em;
    }

    #p16 .box .sm-box .row .right .line-2 .icon-checkmark {
        display: none;
    }

    #p16 .box .sm-box .row .right .line-4 .fa-star {
        color: #F98C84;
        margin-left: 11px;
    }

    #p16 .box .sm-box .row.checked .left {
        background: var(--blue);
    }

    #p16 .box .sm-box .row.checked .left img.icon-minuse {
        display: none;
    }

    #p16 .box .sm-box .row.checked .left img.icon-time {
        display: block;
    }

    #p16 .box .sm-box .row.checked .right .line-2 {
        border-left-color: #79C0F9;
    }

    #p16 .box .sm-box .row.checked .right .line-2 .icon-checkmark {
        display: block;
    }

    @media (max-width:1200px) {
        #p16 {
            padding: 100px 50px;
        }

        #p16 .box .sm-box .row.row-01 {
            margin-top: 5px;
        }

        #p16 .box .sm-box .row.row-01 .btn-02 {
            width: 100px;
            height: 40px;
        }

        #p16 .box .sm-box .row {
            margin: 7px;
        }

        #p16 .box .sm-box .row .left {
            width: 40px;
            min-width: 40px;
        }

        #p16 .box .sm-box .row .left img {
            width: 20px;
        }

        #p16 .box .sm-box .row .right .line-2 {
            width: 200px;
            height: 40px;
        }

        #p16 .box .sm-box .row .right .line-2 .icon-checkmark {
            width: 14px;
        }
    }

    @media (max-width:768px) {
        .p16_body {
            padding: 4vw;
        }

        #p16 {
            padding: 15vw 4vw;
        }

        #p16>.btn-01 {
            top: 2vw;
            right: 3vw;
        }

        #p16 .box .sm-box {
            margin-top: 10px;
        }

        #p16 .box .sm-box .row.row-01 .btn-02 {
            height: 35px;
            width: 80px;
        }

        #p16 .box .sm-box .row .left {
            width: 30px;
            min-width: 30px;
        }

        #p16 .box .sm-box .row .right .line-2 {
            height: 30px;
            width: 150px;
        }

        #p16 .box .sm-box .row .right .line-2 .icon-checkmark {
            width: 12px;
        }
    }

    @media (max-width:576px) {
        #p16 .text {
            font-size: 14px;
        }

        #p16 .box .sm-box .row.row-01 .btn-02 {
            height: 30px;
        }
    }

    /* p17 */

    .p17_body {
        background: #B3B3B3;
        padding: 50px;
    }

    /* #p17 {
        background: #fff;
        max-width: 1720px;
        margin: auto;
        padding: 20px 120px;
        padding-top: 0;
        padding-bottom: 35px;
        border-radius: 5px;
    } */

    #p17 {
        background: #fff;
        max-width: 1100px;
        margin: auto;
        padding: 10px 40px;
        padding-top: 0;
        padding-bottom: 35px;
        border-radius: 5px;
    }

    #p17 .sec1 {
        display: flex;
        align-items: center;
        justify-content: end;
    }

    #p17 .sec1 .btn {
        margin: 20px 15px;
    }

    #p17 .sec1 .btn-01 {
        background: #01A7DF;
    }

    #p17 .sec1 .btn-02 {
        background: #01A7DF;
    }

    #p17 .sec1 .btn-03 {
        background: #5B5B5B;
    }

    #p17 .sec2 {
        border: 1px solid var(--grey);
        border-radius: 5px;
        margin-top: 10px;
    }

    #p17 .sec2 .row {
        display: flex;
        align-items: center;
        padding: 12px 14px;
    }

    #p17 .sec2 .row-1 {
        border-bottom: 2px solid var(--blue);
    }

    #p17 .sec2 .row-1 .box {
        border: 1px solid var(--grey);
        border-left: 14px solid #79C0F9;
        border-radius: 5px;
        width: 200px;
        height: 50px;
        display: flex;
        align-items: center;
    }

    #p17 .sec2 .row-1 .box .text-1 {
        margin-left: 0.5em;
    }

    #p17 .sec2 .row-1 .text-2 {
        margin-inline: 25px 50px;
    }

    #p17 .sec2 .row-1 .phone-num {
        display: flex;
        align-items: center;
    }

    #p17 .sec2 .row-2 .btn {
        background: var(--blue);
        margin: 0;
        margin-right: 18px;
    }

    #p17 .sec2 .row-2 .btn div {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #p17 .sec2 .row-2 .btn img {
        max-width: 20px;
    }

    #p17 .sec2 .row-2 .btn .text {
        margin-left: 0.5em;
    }

    #p17 .sec3 {
        border: 1px solid var(--grey);
        border-radius: 5px;
        margin-top: 15px;
        border-radius: 0px;
        /* margin-bottom: 10px; */
    }

    #p17 .sec3 .row-01 {
        padding: 13px 18px;
        border-bottom: 1px solid var(--grey);
        padding-bottom: 0;

    }

    #p17 .sec3 .row-01 .line-1 .title {
        color: #5A5A5A;
        font-weight: unset;
    }

    #p17 .sec3 .row-01 .line-2 {
        display: flex;
        align-items: center;
        margin-top: 16px;
        /* margin-bottom: 10px; */
    }

    #p17 .sec3 .row-01 .line-2 .btn {
        border: 1px solid var(--grey);
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin: 0;
        margin-right: 5px;
    }

    #p17 .sec3 .row-01 .line-2 .btn .text {
        color: #5B5B5B;
    }

    #p17 .sec3 .row-01 .line-2 .btn.active,
    #p17 .sec3 .row-01 .line-2 .btn:hover {
        background: var(--blue);
    }

    #p17 .sec3 .row-01 .line-2 .btn.active .text,
    #p17 .sec3 .row-01 .line-2 .btn:hover .text {
        color: #fff;
    }

    #p17 .sec3 .row {
        display: flex;
        margin: 12px 18px;
        border: 1px solid var(--grey);
        border-radius: 5px;
        /* max-width: 688px; */
    }

    #p17 .sec3 .row .left {
        background: var(--blue);
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        border-radius: 5px;
        border-bottom-right-radius: 0;
        border-top-right-radius: 0;
    }

    #p17 .sec3 .row .left img {
        max-width: 25px;
    }

    #p17 .sec3 .row .middle {
        padding: 10px;
        line-height: 2;
    }

    #p17 .sec3 .row .middle .line {
        display: flex;
    }

    #p17 .sec3 .row .middle .line .text-1 {
        width: 90px;
        text-align: end;
    }

    #p17 .sec3 .row .middle .line .fa-star {
        color: #F98C84;
    }

    #p17 .sec3 .row .right {
        display: flex;
        align-items: center;
        margin-left: auto;
    }

    #p17 .sec3 .row-1 {
        margin-top: 30px;
    }

    @media (max-width: 1200px) {
        .p17_body {
            padding: 30px;
        }

        #p17 {
            padding: 10px 50px;
            max-width: 800px;
        }

        #p17 .sec1 .btn {
            margin: 0;
            margin-left: 10px;
        }

        #p17 .sec2 {
            margin-top: 40px;
        }

        #p17 .sec2 .row {
            padding: 8px;
        }

        #p17 .sec2 .row-1 .box {
            width: 140px;
            height: 40px;
            border-left: 10px solid #79C0F9;
        }

        #p17 .sec2 .row-1 .text-2 {
            margin-inline: 15px 25px;
        }

        #p17 .sec2 .row-2 .btn {
            margin-right: 8px;
        }

        #p17 .sec2 .row-2 .btn img {
            max-width: 16px;
        }

        #p17 .sec2 .row-2 .btn .text {
            margin-left: 0.3em;
        }

        #p17 .sec3 {
            margin-top: 10px;
        }

        #p17 .sec3 .row-01 {
            padding: 8px 10px;
            padding-bottom: 0;
        }

        #p17 .sec3 .row-01 .line-2 {
            margin-top: 8px;
        }

        #p17 .sec3 .row-01 .line-2 .btn.active,
        #p17 .sec3 .row-01 .line-2 .btn.active .text,
        #p17 .sec3 .row {
            max-width: 500px;
            margin: 6px 8px;
        }

        #p17 .sec3 .row .left {
            width: 40px;
            min-width: 40px;
        }

        #p17 .sec3 .row .left img {
            max-width: 20px;
        }

        #p17 .sec3 .row .middle {
            padding: 5px;
        }

        #p17 .sec3 .row .middle .line .text-1 {
            width: 56px;
        }

        #p17 .sec3 .row-1 {
            margin-top: 15px;
        }
    }

    @media (max-width: 768px) {
        .p17_body {
            padding: 20px;
        }

        #p17 {
            padding: 10px 20px;
        }

        #p17 .sec2 .row-1 .box {
            height: 35px;
            border-left: 8px solid #79C0F9;
        }

        #p17 .sec2 .row-2 .btn img {
            max-width: 14px;
        }

        #p17 .sec3 .row-01 .line-2 .btn.active,
        #p17 .sec3 .row-01 .line-2 .btn.active .text,
        #p17 .sec3 .row .left {
            width: 30px;
            min-width: 30px;
        }

        #p17 .sec3 .row .left img {
            max-width: 18px;
        }
    }

    @media (max-width: 576px) {
        .p17_body {
            padding: 10px;
        }

        #p17 {
            padding: 5px 10px;
        }

        #p17 .sec1 .btn {
            margin-left: 5px;
        }

        #p17 .sec2 .row-1 .box {
            height: 30px;
            width: 90px;
        }

        #p17 .sec2 .row-1 .text-2 {
            margin-inline: 1em;
        }

        #p17 .sec2 .row-2 .btn img {
            max-width: 12px;
        }

        #p17 .sec3 .row-01 .line-2 .btn.active,
        #p17 .sec3 .row-01 .line-2 .btn.active .text,
        #p17 .sec3 .row .middle .line .text-1 {
            width: auto;
            text-align: start;
        }

        #p17 .sec3 .row-1 {
            margin-top: 10px;
        }
    }

    /* p18 */

    .p18_body {
        background: #B3B3B3;
        padding: 50px;
    }

    #p18 {
        background: #fff;
        max-width: 800px;
        margin: auto;
        border-radius: 5px;
        font-size: 25px;
        margin-top: 12%;
    }

    #p18 .sec1 {
        height: 50px;
        background: var(--blue);
        border-radius: 5px;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    #p18 .sec1 .row {
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #p18 .sec1 .row .text {
        color: #fff;
        font-weight: 700;
    }

    #p18 .sec2 {
        padding: 40px;
    }

    #p18 .sec2 .row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    #p18 .sec2 .row label {
        display: inline-block;
        width: 150px;
    }

    #p18 .sec2 .row input[type=text] {
        width: 447px;
        margin: 0px;
    }

    #p18 .sec2 .row .btn {
        color: #fff;
    }

    #p18 .sec2 .row .btn-01 {
        background: var(--blue);
    }

    #p18 .sec2 .row .btn-02 {
        background: var(--light-red);
    }

    #p18 .sec2 .row-2 .check-box label {
        display: flex;
    }

    #p18 .sec2 .row-2 .check-box input[type=checkbox] {
        /* width: 43px; */
        /* height: 43px; */
    }

    @media (max-width: 1200px) {
        #p18 {
            font-size: 16px;
            max-width: 600px;
        }

        #p18 .sec1 {
            height: 50px;
        }

        #p18 .sec2 {
            padding: 40px 60px;
        }

        #p18 .sec2 .row label {
            width: 80px;
        }

        #p18 .sec2 .row input[type=text] {
            width: 300px;
        }
    }

    @media (max-width: 768px) {
        .p18_body {
            padding: 5vw;
        }

        #p18 {
            max-width: 500px;
        }

        #p18 .sec1 {
            height: 40px;
        }

        #p18 .sec2 {
            padding: 30px 50px;
        }

        #p18 .sec2 .row label {
            width: 70px;
        }

        #p18 .sec2 .row input[type=text] {
            width: 200px;
        }
    }

    @media (max-width: 576px) {
        #p18 {
            max-width: 360px;
        }

        #p18 .sec2 {
            padding: 3vw;
        }

        #p18 .sec2 .row label {
            width: 58px;
        }

        #p18 .sec2 .row input[type=text] {
            width: 143px;
        }

        #p18 .sec2 .row .btn {
            min-width: 58px;
        }
    }

    #p18 form .check-box {
        display: flex;
    }

    #p18 form .check-box input {
        /* width: 0; */
        border: 0;
    }

    #p18 form .check-box label::before {
        left: 153px;
    }

    #p18 form .check-box input[type="checkbox"]:checked+label::after {
        content: "\f00c";
        color: var(--blue);
        font-family: "Font Awesome 5 Free";
        font-weight: 700;
        position: absolute;
        top: 0px;
        left: 159px;
        font-size: 33px;
    }

    @media (max-width: 1200px) {
        #p18 form .check-box label::before {
            left: 84px;
        }

        #p18 form .check-box input[type="checkbox"]:checked+label::after {
            font-size: 18px;
            left: 89px;
        }
    }

    /* p19 */

    #p19 .tool-bar {
        display: flex;
        padding-left: 100px;
        margin-inline: -44px;
    }

    #p19 .tool-bar .box {
        min-width: fit-content;
    }

    #p19 .tool-bar .box .list {
        margin-bottom: 1px;
    }

    #p19 .tool-bar .box .date {
        height: 35px;
        border: 1px solid #ABABAB;
        border-radius: 3px;
        display: flex;
        align-items: center;
        padding-inline: 1em;
        width: fit-content;
        min-width: fit-content;
        margin-right: 1em;
        background: #fff;
    }

    #p19 .tool-bar .box .date .text {
        min-width: fit-content;
    }

    #p19 .tool-bar .box-3 .date {
        border-left: 10px solid #79C0F9;
    }

    #p19 {
        padding: 44px;
    }

    #p19 form {
        max-width: 1720px;
        margin: auto;
        background: var(--light-blue);
        border-radius: 5px;
        padding: 42px 48px;
    }

    #p19 .sec1 .textarea-box textarea {
        width: 100%;
        height: 150px;
        border: 1px solid var(--grey);
        border-radius: 5px;
        margin-top: 30px;
        font-size: 14px;
    }

    #p19 .sec2 table {
        width: 100%;
        margin-top: 10px;
        border-radius: 5px;
    }

    #p19 .sec2 table tr td {
        text-align: center;
        border-inline: 0;
        min-width: fit-content;
        padding-inline: 0.5em;
    }

    #p19 .sec2 table thead tr td {
        min-width: fit-content;
        font-weight: 700;
        color: var(--black);
    }

    #p19 .sec3 {
        font-size: 22px;
        margin-top: 70px;
    }

    #p19 .sec3 .row {
        display: flex;
        align-items: center;
    }

    #p19 .sec3 .row .list {
        width: 166px;
    }

    #p19 .sec3 .row .input-box {
        display: flex;
        align-items: center;
        width: 300px;
    }

    #p19 .sec3 .row .input-box input[type=text] {
        margin-inline: 0;
        margin-block: 10px;
        width: 300px;
    }

    #p19 .sec3 .row .selectdiv {
        margin-block: 10px;
    }

    #p19 .sec3 .row .selectdiv:after {
        background: #F7F7F7;
        width: 50px;
        height: 100%;
        box-sizing: border-box;
        top: 0;
        right: 0;
        transform: translate(0px, 0px);
        border-radius: 5px;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 0;
        border: 1px solid #DEDEDE;
    }

    #p19 .sec3 .row .selectdiv select {
        width: 300px;
        border: 1px solid #DEDEDE;
    }

    #p19 .sec3 .row .radio-box {
        display: flex;
        align-items: center;
    }

    #p19 .sec3 .row .radio-box label {
        margin-left: 1em;
    }

    #p19 .sec3 .row .left {
        display: flex;
        align-items: center;
    }

    #p19 .sec3 .row .middle {
        display: flex;
        align-items: center;
        margin-left: 100px;
    }

    #p19 .sec3 .row .right {
        display: flex;
        align-items: center;
    }

    #p19 .sec3 .row-1 .left .input-box .birth {
        width: 67px;
        background: #DEDEDE;
    }

    #p19 .sec3 .row-1 .left .input-box .birth-year {
        width: 148px;
    }

    #p19 .sec3 .row-1 .left .input-box label {
        margin-inline: 0.5em;
    }

    #p19 .sec3 .row-1 .middle .list {
        width: fit-content;
        margin-right: 1em;
    }

    #p19 .sec3 .row-1 .middle .selectdiv select {
        width: 150px;
    }

    #p19 .sec3 .row-1 .right {
        margin-left: auto;
    }

    #p19 .sec3 .row-1 .right .setting-btn .img-box img {
        width: 30px;
    }

    #p19 .sec3 .row-2 .middle .confirm-btn {
        background: var(--blue);
    }

    #p19 .sec3 .row-3 .middle .selectdiv select {
        width: 200px;
    }

    #p19 .sec3 .row-5 .left .input-box {
        justify-content: space-between;
        width: 250px;
    }

    #p19 .sec3 .row-5 .right {
        margin-left: auto;
    }

    #p19 .sec3 .row-5 .right .btn {
        background: var(--dark-grey);
    }

    #p19 .sec3 .row-5 .right .btn-1 {
        background: #5B5B5B;
    }

    #p19 .sec3 .row-5 .right .btn-2 {
        background: var(--blue);
    }

    #p19 .sec3 .row-6 {
        margin-bottom: 10px;
    }

    #p19 .sec3 .row-6 .left .input-box {
        justify-content: space-between;
        width: 250px;
    }

    #p19 .sec4 {
        margin-top: 30px;
        font-size: 22px;
    }

    #p19 .sec4 .row {
        display: flex;
        margin-top: 20px;
    }

    #p19 .sec4 .row .left {
        width: 100px;
        min-width: 157px;
    }

    #p19 .sec4 .row .left .list {
        position: relative;
    }

    #p19 .sec4 .row .left .list:after {
        content: '\f0d7';
        font: normal normal normal 16px/1 FontAwesome;
        position: absolute;
        top: 50%;
        right: 10%;
        transform: translate(0px, -50%);
    }

    #p19 .sec4 .row .right .check-row {
        display: flex;
        flex-wrap: wrap;
    }

    #p19 .sec4 .check-box {
        width: 172px;
        display: flex;
        align-items: center;
        margin-bottom: 10px;
    }

    #p19 .sec4 .check-box input {
        margin-right: 0.5em;
    }

    #p19 .sec4 .check-box label {
        display: flex;
        align-items: center;
    }

    #p19 .sec4 .check-box label::before {
        background: #fff;
        border: 3px solid #DDDDDD;
        width: 40px;
        height: 40px;
    }

    #p19 .sec4 .check-box input[type="checkbox"]:checked+label::after {
        font-size: 25px;
        top: 4px;
        left: 9px;
    }

    #p19 .sec4 .input-row input[type=text] {
        width: 300px;
        margin: 0;
    }

    @media (max-width: 1200px) {
        #p19 .tool-bar {
            padding-inline: 30px;
            margin-inline: -30px;
        }

        #p19 .tool-bar .box .date {
            height: 25px;
            padding-inline: 0.5em;
            margin-right: 0.5em;
        }

        #p19 .tool-bar .box-3 .date {
            border-left: 5px solid #79C0F9;
        }

        #p19 {
            padding: 30px;
        }

        #p19 form {
            padding: 20px;
        }

        #p19 .sec1 .textarea-box textarea {
            margin-top: 10px;
            height: 100px;
        }

        #p19 .sec2 table tr .td-07 .btn {
            padding: 0.2em 0.5em;
            min-width: 43px;
        }

        #p19 .sec3 {
            font-size: 14px;
        }

        #p19 .sec3 .row .list {
            width: 70px;
        }

        #p19 .sec3 .row .input-box {
            width: fit-content;
        }

        #p19 .sec3 .row .input-box input[type=text] {
            width: 200px;
        }

        #p19 .sec3 .row .selectdiv:after {
            width: 40px;
        }

        #p19 .sec3 .row .selectdiv select {
            width: 200px;
        }

        #p19 .sec3 .row .radio-box label {
            margin-left: 0.5em;
        }

        #p19 .sec3 .row .middle {
            margin-left: 40px;
        }

        #p19 .sec3 .row-1 .left .input-box .birth {
            width: 50px;
        }

        #p19 .sec3 .row-1 .left .input-box .birth-year {
            width: 90px;
        }

        #p19 .sec3 .row-1 .middle .selectdiv select {
            width: 120px;
        }

        #p19 .sec3 .row-1 .right .setting-btn .img-box img {
            width: 25px;
            min-width: 25px;
        }

        #p19 .sec3 .row-3 .middle .selectdiv select {
            width: 130px;
        }

        #p19 .sec3 .row-5 .left .input-box {
            width: 130px;
        }

        #p19 .sec3 .row-5 .middle .list {
            width: fit-content;
            margin-right: 0.5em;
        }

        #p19 .sec3 .row-5 .middle .input-box input[type=text] {
            width: 120px;
        }

        #p19 .sec3 .row-6 .left .input-box {
            width: 130px;
        }

        #p19 .sec4 {
            font-size: 14px;
            margin-top: 20px;
        }

        #p19 .sec4 .row {
            margin-top: 30px;
        }

        #p19 .sec4 .row .left {
            min-width: 137px;
            width: 136px;
        }

        #p19 .sec4 .row .left .list:after {
            font: normal normal normal 14px/1 FontAwesome;
        }

        #p19 .sec4 .check-box {
            width: 151px;
        }

        #p19 .sec4 .check-box label::before {
            width: 20px;
            height: 20px;
            border: 2px solid #DDDDDD;
        }

        #p19 .sec4 .check-box input[type="checkbox"]:checked+label::after {
            font-size: 16px;
            top: 1px;
            left: 4px;
        }

        #p19 .sec4 .input-row input[type=text] {
            width: 200px;
        }
    }

    @media (max-width: 768px) {
        #p19 .tool-bar {
            padding-inline: 2vw;
            margin-inline: -3vw;
        }

        #p19 .tool-bar .box .date {
            height: 20px;
            margin-right: 2px;
        }

        #p19 {
            padding: 3vw;
        }

        #p19 form {
            padding: 3vw;
        }

        #p19 .sec1 .textarea-box textarea {
            height: 60px;
        }

        #p19 .sec2 table tr .td-07 .btn {
            min-width: 36px;
        }

        #p19 .sec3 {
            margin-top: 40px;
        }

        #p19 .sec3 .row {
            flex-direction: column;
            align-items: start;
        }

        #p19 .sec3 .row .list {
            min-width: 90px;
        }

        #p19 .sec3 .row .input-box input[type=text] {
            width: calc(88vw - 120px) !important;
            max-width: 400px;
        }

        #p19 .sec3 .row .selectdiv:after {
            width: 30px;
        }

        #p19 .sec3 .row .selectdiv select {
            width: calc(88vw - 120px) !important;
            max-width: 400px;
        }

        #p19 .sec3 .row .radio-box {
            height: 35px;
        }

        #p19 .sec3 .row .middle {
            margin-left: 0;
        }

        #p19 .sec3 .row-1 .left .input-box .birth {
            width: calc((63vw - 123px) / 3) !important;
        }

        #p19 .sec3 .row-1 .middle .list {
            margin-right: 0;
        }

        #p19 .sec3 .row-1 .right {
            margin: 0;
        }

        #p19 .sec3 .row-1 .right .setting-btn {
            margin: 0;
            padding: 0;
            margin-left: 1em;
        }

        #p19 .sec3 .row-1 .right .setting-btn .img-box {
            margin-left: 101px;
        }

        #p19 .sec3 .row-1 .right .setting-btn .img-box img {
            width: 20px;
            min-width: 20px;
        }

        #p19 .sec3 .row-2 .middle .confirm-btn {
            margin-left: 0;
        }

        #p19 .sec3 .row-5 .right {
            margin-left: 106px;
        }

        #p19 .sec4 {
            margin-top: 40px;
        }

        #p19 .sec4 .row {
            flex-direction: column;
            margin-top: 20px;
        }

        #p19 .sec4 .row .left {
            min-width: 120px;
            width: 100px;
        }

        #p19 .sec4 .row .left .list:after {
            font: normal normal normal 12px/1 FontAwesome;
        }

        #p19 .sec4 .row .right {
            margin-top: 10px;
        }

        #p19 .sec4 .check-box {
            margin-bottom: 5px;
        }

        #p19 .sec4 .input-row input[type=text] {
            width: 87vw;
        }
    }

    @media (max-width: 576px) {
        #p19 .sec2 table tr .td-07 .btn {
            min-width: 34px;
        }
    }

    /* p20 */

    #p20 {}

    #p20 .text,
    #p20 label {
        font-size: 16px;
    }

    #p20 .row label,
    #p20 .row .list {
        font-size: 16px;
        min-width: 180px;
        width: 180px;
    }

    #p20 .title-bar .row {
        background: var(--light-blue);
    }

    #p20 .title-bar .row .right .icon-time {
        width: 16px;
        margin-right: 5px;
    }

    #p20 form section {
        max-width: 1720px;
        background: var(--light-blue);
        margin-inline: auto;
        margin-block: 25px;
        border-radius: 5px;
        padding: 40px 60px;
        width: 90vw;
    }

    #p20 .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #p20 .row .input-box {
        display: flex;
        align-items: center;
        /* background: red; */
        width: 100%;
    }

    #p20 .row input[type=text],
    #p20 .row input[type=email],
    #p20 .row input[type=url],
    #p20 .row select {
        /* max-width: 510px; */
        width: 100%;
        height: 50px;
        margin: 0;
        margin-block: 5px;
        font-size: 16px;
        padding-left: 1em;
        color: #5A5A5A;
        border-radius: 5px;
    }

    #p20 .row .left {
        width: 47%;
        display: flex;
        align-items: center;
    }

    #p20 .row .right {
        width: 50%;
    }

    #p20 .row-full input[type=text] {
        width: 100%;
    }

    #p20 .row .selectdiv:after {
        /* right: 10px; */
    }

    #p20 .row .radio-row .radio-group {
        display: flex;
        align-items: center;
        width: 100%;
    }

    #p20 .row .radio-row .drop_down_flex {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    #p20 .row .radio-row .radio-group .radio-box {
        display: flex;
        align-items: center;
        width: 50%;
    }

    #p20 .row .radio-row .radio-group input[type=radio] {
        width: 18px;
        height: 18px;
        margin-right: 10px;
    }

    #p20 .row .radio-row .radio-group label {
        min-width: auto;
        width: fit-content;
    }

    #p20 .btn-row {
        display: flex;
        justify-content: end;
    }

    #p20 .btn-row-right {
        display: flex;
        justify-content: start;
    }

    #p20 .btn {
        background: #707070;
    }

    #p20 .btn-row .btn-02 {
        background: var(--blue);
    }

    #p20 .btn-sm {
        padding: 0;
        width: 69px;
        min-width: 70px;
        height: 38px;
        background: var(--blue);
    }

    #p20 .sec1 {
        margin-top: 100px;
    }

    #p20 .sec1 .row .input-btn-box input[type=email] {
        flex-grow: 1;
    }

    #p20 .sec1 .row .right {
        display: flex;
        justify-content: space-between;
        width: 47%;
    }

    #p20 .row-0 {
        margin-bottom: 50px;
    }

    #p20 .row-0.selectdiv:hover {
        cursor: pointer;
    }

    #p20 .row-0.selectdiv:after {
        transform: translate(25px, -45%);
    }

    #p20 .row-0.selectdiv select {
        background: none;
        border: none;
        font-size: 25px;
        color: #5A5A5A;
        padding-left: 0;
    }

    #p20 .sec2 .row {
        flex-wrap: wrap;
        margin-top: 20px;
    }

    #p20 .sec2 .row .line-1 {
        margin-block: 15px;
        width: 100%;
    }

    #p20 .sec2 .row .line-2 {
        display: flex;
        align-items: flex-start;
    }

    #p20 .sec2 .row .line-2 table tr td {
        width: 126px;
        text-align: center;
        background: #fff;
        border-radius: 0;
        height: 50px;
    }

    #p20 .sec2 .row .line-2 table tr td.td-sm {
        width: 76px;
    }

    #p20 .sec2 .row .line-2 table tr td input[type=text] {
        margin: 0;
        padding: 0;
        text-align: center;
        border: none;
        background: none;
        outline: none;
    }

    #p20 .sec2 .row-2 .check-box {
        display: flex;
        align-items: center;
        margin-left: 1em;
    }

    #p20 .sec2 .row-2 .check-box label {
        min-width: auto;
        width: auto;
        margin-right: 0.1em;
    }

    #p20 .sec3 .row .textarea-box {
        display: flex;
        width: 100%;
    }

    #p20 .sec3 .row .textarea-box textarea {
        width: 100%;
        outline: none;
        border: 1px solid #CCCCCC;
        border-radius: 5px;
        margin-bottom: 5px;
        padding: 0.5em;
        height: 120px;
        font-size: 16px;
    }

    #p20 .sec3 .row-4 {
        flex-direction: column;
        align-items: start;
    }

    #p20 .sec3 .row-4 label {
        margin-block: 40px;
    }

    #p20 .sec3 .row-4 .col-row {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #p20 .sec3 .row-4 .col {
        display: flex;
    }

    #p20 .sec3 .row-4 .col .col-left {
        min-width: 55%;
    }

    #p20 .sec3 .row-4 .col .col-right {
        min-width: 45%;
    }

    #p20 .sec3 .row-4 .col .col-right .btn {
        width: 198px;
        height: 59px;
        /* width: auto; */
        /* height: auto; */
        padding: 0.1vw 0.2vw;
    }

    #p20 .sec3 .row-4 .col .col-right .btn .text {
        font-size: 25px;
    }

    #p20 .sec3 .row-4 .col .col-right .del-btn {
        background: #F98C84;
    }

    #p20 .sec5 table {
        border: none;
        margin-inline: -60px;
        width: -webkit-fill-available;
    }

    #p20 .sec5 table tr {
        border-left: none;
        border-right: none;
    }

    #p20 .sec5 table tr td {
        border: none;
        text-align: center;
        height: 77px;
        font-size: 16px;
        height: 50px;
    }

    #p20 .sec5 table thead tr td {
        font-weight: 700;
        color: #0B0B0B;
    }

    #p20 .sec5 table .btn-box .btn {
        height: 40px;
        width: 249px;
        background: var(--blue);
    }

    #p20 .sec5 table .btn-sm-box {
        display: flex;
        align-items: center;
    }

    #p20 .sec5 table .btn-sm-box .btn-sm {
        width: 114px;
        margin-inline: 12px;
    }

    #p20 .sec5 table .btn-sm-box .btn-sm.btn-02 {
        background: #F98C84;
    }

    #p20 .sec6 .text {
        text-align: center;
    }

    #p20 .sec6 .row {
        margin-inline: -60px;
        border: 1px solid #E4E4E4;
        border-inline: 0;
        height: 60px;
        padding-left: 60px;
        justify-content: start;
    }

    #p20 .sec6 .row input[type=text] {
        background: #DEDEDE;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    #p20 .sec6 .row .left {
        width: 179px;
        text-align: center;
        display: flex;
        justify-content: center;
        margin-right: 60px;
    }

    #p20 .sec6 .row .left input[type=text] {
        width: 100%;
    }

    #p20 .sec6 .row .right {
        position: relative;
        width: 368px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #p20 .sec6 .row .right input[type=text] {
        width: 100%;
    }

    #p20 .sec6 .row .right .text.abs {
        position: absolute;
        right: -1em;
        top: 50%;
        transform: translate(100%, -50%);
        color: var(--blue);
    }

    @media (max-width: 1200px) {

        #p20 .text,
        #p20 label {
            font-size: 14px;
        }

        #p20 .row label,
        #p20 .row .list {
            font-size: 14px;
            min-width: 100px;
            width: 100px;
        }

        #p20 form section {
            padding: 30px 30px;
        }

        #p20 .row input[type=text],
        #p20 .row input[type=email],
        #p20 .row input[type=url],
        #p20 .row select {
            height: 40px;
            font-size: 14px;
            margin-block: 5px;
        }

        #p20 .row .radio-row .radio-group input[type=radio] {
            width: 13px;
            height: 13px;
            margin-right: 5px;
        }

        #p20 .btn .text {
            font-size: 16px;
        }

        #p20 .btn-sm {
            height: 35px;
            width: 40px;
            min-width: 60px;
        }

        #p20 .btn-sm .text {
            font-size: 15px;
        }

        #p20 .sec1 {
            margin-top: 50px;
        }

        #p20 .row-0 {
            margin-bottom: 20px;
        }

        #p20 .row-0.selectdiv:after {
            transform: translate(15px, -45%);
        }

        #p20 .row-0.selectdiv select {
            font-size: 16px;
            height: 50px;
        }

        #p20 .sec2 .row {
            margin-top: 10px;
        }

        #p20 .sec2 .row .line-2 {
            flex-direction: column;
        }

        #p20 .sec2 .row .line-2 table tr td {
            font-size: 16px;
            width: 80px;
            height: 40px;
        }

        #p20 .sec2 .row .line-2 table tr td.td-sm {
            width: 60px;
        }

        #p20 .sec2 .row-2 .check-box {
            margin-left: 0;
            margin-top: 8px;
        }

        #p20 .sec2 .row-2 .check-box label {
            font-size: 14px;
        }

        #p20 .sec3 .row .textarea-box textarea {
            height: 80px;
            font-size: 14px;
        }

        #p20 .sec3 .row-4 label {
            margin-block: 20px;
        }

        #p20 .sec3 .row-4 .col .col-right .btn {
            height: 30px;
            width: 90px;
        }

        #p20 .sec3 .row-4 .col .col-right .btn .text {
            font-size: 14px;
        }

        #p20 .sec5 table {
            margin-inline: -30px;
        }

        #p20 .sec5 table tr td {
            font-size: 14px;
            height: 40px;
        }

        #p20 .sec5 table .btn-box .btn {
            height: 35px;
            width: 160px;
        }

        #p20 .sec5 table .btn-sm-box .btn-sm {
            width: 80px;
            margin-inline: 3px;
        }

        #p20 .sec6 .text {
            text-align: center;
        }

        #p20 .sec6 .row {
            height: 50px;
            margin-inline: -30px;
            padding-left: 30px;
        }

        #p20 .sec6 .row .left {
            width: 140px;
            margin-right: 30px;
        }

        #p20 .sec6 .row .right {
            width: 300px;
        }
    }

    @media (max-width: 768px) {

        #p20 .text,
        #p20 label {
            font-size: 12px;
        }

        #p20 .row label,
        #p20 .row .list {
            font-size: 12px;
            min-width: 70px;
            width: 70px;
        }

        #p20 .title-bar .row .left h2 {
            font-size: 16px;
        }

        #p20 .title-bar .row .right .time {
            font-size: 16px;
        }

        #p20 form section {
            padding: 20px;
            margin-block: 15px;
        }

        #p20 .row input[type=text],
        #p20 .row input[type=email],
        #p20 .row input[type=url],
        #p20 .row select {
            font-size: 12px;
            height: 35px;
            margin-block: 3px;
            border-radius: 3px;
        }

        #p20 .row .left {
            width: 49%;
        }

        #p20 .row .right {
            width: 49%;
        }

        #p20 .row .radio-row .radio-group input[type=radio] {
            height: 11px;
            width: 12px;
            margin-right: 3px;
        }

        #p20 .btn .text {
            font-size: 12px;
        }

        #p20 .btn-sm {
            height: 20px;
            /* width: 30px; */
            min-width: 35px;
        }

        #p20 .btn-sm .text {
            font-size: 11px;
        }

        #p20 .sec1 {
            margin-top: 5vw;
        }

        #p20 .sec1 .row .right {
            width: 49%;
        }

        #p20 .row-0 {
            margin-bottom: 15px;
        }

        #p20 .row-0.selectdiv select {
            font-size: 12px;
            height: 30px;
        }

        #p20 .sec2 .row .line-1 {
            margin-block: 8px;
        }

        #p20 .sec2 .row .line-2 table tr td {
            font-size: 12px;
            height: 30px;
        }

        #p20 .sec2 .row .line-2 table tr td.td-sm {
            /* width: auto; */
        }

        #p20 .sec2 .row-2 .check-box label {
            font-size: 12px;
        }

        #p20 .sec3 .row .textarea-box textarea {
            height: 60px;
            font-size: 12px;
        }

        #p20 .sec5 table {
            margin-inline: -20px;
        }

        #p20 .sec5 table tr td {
            font-size: 12px;
            height: 35px;
        }

        #p20 .sec5 table .btn-box .btn {
            height: 30px;
            width: 106px;
            margin: 0;
            margin-inline: 1px;
        }

        #p20 .sec5 table .btn-sm-box .btn-sm {
            width: 50px;
            margin-inline: 2px;
        }

        #p20 .sec6 .text {
            text-align: center;
        }

        #p20 .sec6 .row {
            height: 45px;
            margin-inline: -20px;
            padding-left: 20px;
        }

        #p20 .sec6 .row .left {
            width: 13vw;
            margin-right: 20px;
        }

        #p20 .sec6 .row .right {
            width: 40vw;
        }
    }

    @media (max-width: 576px) {

        #p20 .text,
        #p20 .row label,
        #p20 .row .list {
            font-size: 10px;
        }

        #p20 form section {
            padding: 10px;
        }

        #p20 .row input[type=text],
        #p20 .row input[type=email],
        #p20 .row input[type=url],
        #p20 .row select {
            height: 30px;
            font-size: 10px;
        }

        #p20 .btn .text {
            font-size: 10px;
        }

        #p20 .row-0 {
            margin-bottom: 10px;
        }

        #p20 .sec2 .row .line-2 table tr td {
            height: 30px;
        }

        #p20 .sec2 .row .line-2 table tr td input[type=text] {
            font-size: 10px;
            height: 30px;
        }

        #p20 .sec3 .row .textarea-box textarea {
            height: 50px;
            font-size: 10px;
        }

        #p20 .sec3 .row-4 .col-row {
            /* flex-direction: column; */
        }

        #p20 .sec3 .row-4 .col {
            /* display: flex; */
            /* flex-direction: column; */
            /* margin: auto; */
            /* align-items: center; */
            /* width: 100vw; */
        }

        #p20 .sec5 table {
            margin-inline: -10px;
        }

        #p20 .sec5 table tr td {
            font-size: 10px;
            height: 30px;
        }

        #p20 .sec5 table .btn-box .btn {
            height: 25px;
        }

        #p20 .sec6 .text {
            text-align: center;
        }

        #p20 .sec6 .row {
            margin-inline: -10px;
            height: 35px;
        }
    }

    @media (max-width: 1720px) {
        #p20 .sec3 .row-4 .col .col-right .btn .text {
            font-size: 1.5vw;
        }

        #p20 .sec3 .row-4 .col .col-right .btn {
            width: auto;
            height: auto;
            padding: 0.1vw 0.2vw;
            margin: 1vw;
        }
    }

    /* u1 */

    @media (min-width: 1201px) {
        #u1 label {
            font-size: 47px;
        }
    }

    #u1 .sec1 {
        background: var(--u-green);
    }

    #u1 .sec2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        padding-top: 93px;
    }

    #u1 .sec2 input[type=text] {
        width: 100%;
    }

    #u1 .sec2 .input-box {
        width: 47%;
    }

    #u1 .sec3 .row-2 .input-row .input-box {
        display: flex;
        align-items: center;
        margin-top: 15px;
    }

    #u1 .sec3 .row-3 input[type=text],
    #u1 .sec3 .row-4 select,
    #u1 .sec3 .row-5 input[type=text] {
        width: 558px;
    }

    #u1 .sec3 .row {
        margin-top: 20px;
    }

    #u1 .sec3 .row-8 .text {
        font-size: 38px;
        font-weight: 700;
        color: var(--u-light-blue);
        margin-bottom: 30px;
        margin-top: 15px;
    }

    #u1 .sec5 .row {
        margin-block: 30px;
    }

    #u1 .sec-footer {
        border-radius: 10px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }

    @media (max-width: 1200px) {
        #u1 .sec2 {
            padding-top: 40px;
        }

        #u1 .sec2 .input-box {
            width: 47%;
        }

        #u1 .sec3 .row-3 input[type=text],
        #u1 .sec3 .row-4 select,
        #u1 .sec3 .row-5 input[type=text] {
            width: 400px;
        }

        #u1 .sec3 .row {
            margin-top: 15px;
        }

        #u1 .sec3 .row-8 .text {
            font-size: 20px;
            margin-bottom: 10px;
            margin-top: 10px;
        }
    }

    @media (max-width: 768px) {
        #u1 .sec3 .row-2 .input-row .input-box {
            margin-top: 10px;
        }

        #u1 .sec3 .row-3 input[type=text],
        #u1 .sec3 .row-4 select,
        #u1 .sec3 .row-5 input[type=text] {
            width: 100%;
        }

        #u1 .sec3 .row {
            margin-top: 10px;
        }

        #u1 .sec3 .row-8 .text {
            font-size: 14px;
        }
    }

    #u1 .sec3 .row-2 .input-row .selectdiv:after {
        transform: translate(-102px, -42%);
    }

    #u1 .sec3 .row-2 .input-row .selectdiv select {
        width: 190px;
    }

    #u1 .sec3 .row-2 .input-row .selectdiv label {
        margin-inline: 0.5em;
    }

    #u1 .sec3 .row-2 .input-row .selectdiv.selectdiv-year select {
        width: 276px;
    }

    @media (max-width: 1200px) {
        #u1 .sec3 .row-2 .input-row .selectdiv:after {
            transform: translate(-45px, -42%);
        }

        #u1 .sec3 .row-2 .input-row .selectdiv select {
            width: 100px;
        }

        #u1 .sec3 .row-2 .input-row .selectdiv.selectdiv-year select {
            width: 150px;
        }
    }

    @media (max-width: 768px) {
        #u1 .sec3 .row-2 .input-row .selectdiv {
            width: auto;
        }

        #u1 .sec3 .row-2 .input-row .selectdiv:after {
            transform: translate(-23px, -42%);
        }

        #u1 .sec3 .row-2 .input-row .selectdiv select {
            width: 55px;
        }

        #u1 .sec3 .row-2 .input-row .selectdiv.selectdiv-year select {
            width: 90px;
        }
    }

    /* u2 */

    #u2 .sec1 {
        background: var(--u-blue);
    }

    #u2 .check-group .row-last-1 {
        margin-top: -46px;
        margin-bottom: 0;
        /* background: red; */
        position: relative;
        display: block;
        height: 121px;
    }

    @media (max-width: 1200px) {
        #u2 .check-group .row-last-1 {
            height: 77px;
        }
    }

    @media (max-width: 768px) {
        #u2 .check-group .row-last-1 {
            height: 64px;
        }
    }

    #u2 .sec8 .card-body {
        display: flex;
    }

    #u2 .sec8 .card-body .person-box {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    #u2 .sec8 .card-body .person-box .btn {
        width: 368px;
        height: 120px;
        background: #79C0F9;
        border-radius: 10px;
        font-weight: 700;
        padding: 0;
    }

    #u2 .sec8 .card-body .left .btn {
        background: #79C0F9;
    }

    #u2 .sec8 .card-body .right .btn {
        background: #F98C84;
    }

    #u2 .sec8 .card-body .person-box .img-box {
        margin-top: 20px;
    }

    @media (max-width: 1200px) {
        #u2 .sec8 .card-body .person-box .btn {
            height: 80px;
            width: 240px;
        }
    }

    @media (max-width: 768px) {
        #u2 .sec8 .card-body .person-box .btn {
            width: 35vw;
            height: 60px;
        }
    }

    @media (max-width: 576px) {
        #u2 .sec8 .card-body .person-box .btn {
            /* width: 38vw; */
            margin: 1vw;
            text-align: center;
            padding-inline: 1vw;
        }
    }

    /* u3 */

    #u3 .sec1 {
        background: var(--u-orange);
    }

    #u3 .card-1 {
        padding: 40px;
    }

    #u3 .card-1 .text-2 {
        margin-top: 1em;
    }

    #u3 .check-group .row {
        height: auto !important;
        min-height: 140px;
    }

    #u3 .check-group .row .check-box {
        width: 97%;
    }

    #u3 .check-group .row.row-last-1 {
        display: block;
        height: 120px;
        margin-bottom: 0;
        margin: 0;
    }

    #u3 .check-group .input-box {
        margin: auto;
        width: 87%;
    }

    #u3 .check-group .input-box-sm input[type=text] {
        max-width: 200px;
    }

    #u3 .check-group .text-row {
        padding: 44px;
    }

    #u3 .check-group .text-row .text {
        font-size: 35px;
        color: var(--u-black);
        font-weight: unset;
        margin-top: 10px;
    }

    #u3 .btn-row {
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: space-between;
        margin-top: 40px;
    }

    #u3 .btn-row .check-btn {
        border: var(--u-boder-width) solid var(--u-grey);
        width: 48%;
        height: 120px;
    }

    #u3 .btn-row .check-btn .text {
        margin: 0;
    }

    #u3 .btn-row .check-btn.active {
        border: var(--u-boder-width) solid var(--u-green);
        background: var(--u-green);
    }

    #u3 .btn-row .check-btn.active .text {
        color: #fff;
    }

    #u3 .sec4 {
        margin-bottom: 150px;
        margin-top: 100px;
    }

    #u3 .sec4 .btn {
        border: var(--u-boder-width) solid var(--u-green);
        height: 120px;
    }

    #u3 .sec4 .btn div {
        display: flex;
        align-items: center;
        color: var(--u-green);
    }

    #u3 .sec4 .btn div .fa-pencil {
        margin-right: 20px;
        font-size: 40px;
    }

    #u3 .sec4 .btn div .text {
        color: var(--u-green);
        font-size: 40px;
        font-weight: 700;
    }

    @media (max-width: 1200px) {
        #u3 .card-1 {
            padding: 30px;
        }

        #u3 .check-group .row {
            min-height: 80px;
        }

        #u3 .check-group .input-box {
            width: 93%;
        }

        #u3 .check-group .text-row {
            padding: 30px;
        }

        #u3 .check-group .text-row .text {
            font-size: 24px;
        }

        #u3 .btn-row {
            margin-top: 30px;
        }

        #u3 .btn-row .check-btn {
            height: 80px;
        }

        #u3 .sec4 {
            margin-top: 60px;
            margin-bottom: 80px;
        }

        #u3 .sec4 .btn {
            height: 80px;
        }

        #u3 .sec4 .btn div .fa-pencil {
            font-size: 33px;
        }

        #u3 .sec4 .btn div .text {
            font-size: 30px;
        }
    }

    @media (max-width: 768px) {
        #u3 .card-1 {
            padding: 20px;
        }

        #u3 .check-group .row {
            min-height: 60px;
        }

        #u3 .check-group .text-row {
            padding: 20px;
        }

        #u3 .check-group .text-row .text {
            font-size: 16px;
        }

        #u3 .btn-row {
            margin-top: 20px;
        }

        #u3 .btn-row .check-btn {
            height: 60px;
        }

        #u3 .sec4 {
            margin-top: 40px;
            margin-bottom: 60px;
        }

        #u3 .sec4 .btn {
            height: 60px;
        }

        #u3 .sec4 .btn div .fa-pencil {
            font-size: 27px;
            margin-right: 10px;
        }

        #u3 .sec4 .btn div .text {
            font-size: 24px;
        }
    }

    @media (max-width: 576px) {
        #u3 .card-1 {
            padding: 3vw;
        }

        #u3 .btn-row .check-btn {
            height: 50px;
        }

        #u3 .sec4 {
            margin-top: 30px;
            margin-bottom: 40px;
        }

        #u3 .sec4 .btn {
            height: 50px;
        }

        #u3 .sec4 .btn div .text {
            font-size: 20px;
        }
    }

    /* u4 */

    #u4 .sec1 {
        background: var(--u-pink);
    }

    #u4 .sec2 {
        padding-block: 80px;
    }

    #u4 .sec2 .text-box {
        justify-content: start;
    }

    #u4 .sec2 .text-box .text {
        font-size: 45px;
        font-weight: 700;
    }

    #u4 .sec2 .btn {
        width: 450px;
        height: 160px;
        background: var(--u-green);
        margin: auto;
        border-radius: 10px;
        margin-top: 180px;
    }

    #u4 .sec2 .btn .text {
        font-size: 60px;
        font-weight: 700;
    }

    @media (max-width: 1200px) {
        #u4 .sec2 {
            padding-block: 50px;
        }

        #u4 .sec2 .text-box .text {
            font-size: 24px;
        }

        #u4 .sec2 .btn {
            width: 220px;
            height: 100px;
            margin-top: 100px;
        }

        #u4 .sec2 .btn .text {
            font-size: 30px;
        }
    }

    @media (max-width: 768px) {
        #u4 .sec2 {
            padding-block: 30px;
        }

        #u4 .sec2 .text-box .text {
            font-size: 20px;
        }

        #u4 .sec2 .btn {
            width: 180px;
            height: 70px;
            margin-top: 50px;
        }

        #u4 .sec2 .btn .text {
            font-size: 24px;
        }
    }

    /* u5 */

    #u5 .sec01 {
        padding-block: 50px;
        display: flex;
        padding-inline: 10px;
    }

    #u5 .sec01 .row-1 .title {
        font-size: 45px;
    }

    #u5 .sec01 .row-1 .text {
        font-weight: 700;
    }

    #u5 .sec01 .row-2 {
        display: flex;
    }

    #u5 .sec01 .row-2 .col .line {
        display: flex;
    }

    #u5 .sec01 .row-2 .col.right .line-4 {
        opacity: 0;
    }

    #u5 .sec01 .row-2 .col .line .text-1-box {
        background: var(--u-blue);
        width: 170px;
        min-width: 170px;
        height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 30px;
        margin: 12px 25px;
        padding-inline: 0.2em;
    }

    #u5 .sec01 .row-2 .col .line .text-1 {
        font-size: 18px;
        color: #fff;
        font-weight: 700;
        height: 1em;
        overflow: hidden;
        line-height: 1;
    }

    #u5 .sec01 .row-2 .col .line .text-2 {
        display: flex;
        align-items: center;
    }

    #u5 .sec01 .row-2 .col.right .line .text-2 {
        min-width: fit-content;
    }

    #u5 .card-1 .card-head {
        background: var(--u-green);
    }

    #u5 .card-1 .card-head h3 {
        color: #fff;
    }

    #u5 .card-1 .card-body .row {
        display: flex;
    }

    #u5 .card-1 .card-body .row .text-left {
        font-weight: 700;
        min-width: 225px;
    }

    #u5 .card-2 .card-head {
        background: var(--u-blue);
    }

    #u5 .card-2 .card-head h3 {
        color: #fff;
    }

    #u5 .card-2 .card-body .row-1 {
        display: flex;
    }

    #u5 .card-2 .card-body .row-1 .btn {
        width: 368px;
        height: 120px;
        background: var(--u-light-blue);
        border-radius: 10px;
        padding: 0;
    }

    #u5 .card-2 .card-body .row-1 .btn-2 {
        background: #F98C84;
    }

    #u5 .card-2 .card-body .row-1 .btn .text {
        font-weight: 700;
        font-size: 28px;
    }

    #u5 .card-2 .card-body .row-2 {
        display: flex;
        margin-top: 30px;
    }

    #u5 .sec03 {
        background: var(--u-bg-grey);
    }

    #u5 .sec03 .row-1 {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 180px;
    }

    #u5 .sec03 .row-1 .btn {
        width: 282px;
        height: 120px;
        border: var(--u-boder-width) solid var(--u-green);
        padding: 0;
        border-radius: 10px;
    }

    #u5 .sec03 .row-1 .btn .text {
        color: var(--u-green);
        font-weight: 700;
        font-size: 28px;
    }

    #u5 .sec03 .row-2 {
        margin-top: 50px;
    }

    #u5 .sec03 .row-2 .btn {
        width: 475px;
        height: 120px;
        background: var(--u-green);
        margin: auto;
        border-radius: 10px;
    }

    #u5 .sec03 .row-2 .btn .text {
        font-size: 60px;
        font-weight: 700;
    }

    @media (max-width: 1200px) {
        #u5 .sec01 {
            padding-bottom: 40px;
        }

        #u5 .sec01 .row-1 .title {
            font-size: 30px;
        }

        #u5 .sec01 .row-2 .col .line .text-1-box {
            width: 120px;
            min-width: 120px;
            height: 40px;
            margin: 6px 12px;
        }

        #u5 .sec01 .row-2 .col .line .text-1 {
            font-size: 14px;
        }

        #u5 .card-1 .card-body .row .text-left {
            min-width: 150px;
        }

        #u5 .card-2 .card-body .row-1 .btn {
            width: 250px;
            height: 80px;
        }

        #u5 .card-2 .card-body .row-1 .btn .text {
            font-size: 24px;
        }

        #u5 .card-2 .card-body .row-2 {
            margin-top: 20px;
        }

        #u5 .sec03 .row-1 {
            margin-top: 100px;
        }

        #u5 .sec03 .row-1 .btn {
            width: 200px;
            height: 80px;
        }

        #u5 .sec03 .row-1 .btn .text {
            font-size: 22px;
        }

        #u5 .sec03 .row-2 {
            margin-top: 30px;
        }

        #u5 .sec03 .row-2 .btn {
            width: 300px;
            height: 80px;
            border-radius: 5px;
        }

        #u5 .sec03 .row-2 .btn .text {
            font-size: 40px;
        }
    }

    @media (max-width: 768px) {
        #u5 .sec01 {
            padding-block: 30px;
        }

        #u5 .sec01 .row-1 .title {
            font-size: 20px;
        }

        #u5 .sec01 .row-2 .col .line .text-1-box {
            width: 107px;
            min-width: 107px;
            height: 30px;
        }

        #u5 .sec01 .row-2 .col .line .text-1 {
            font-size: 12px;
        }

        #u5 .card-1 .card-body .row .text-left {
            min-width: 90px;
        }

        #u5 .card-2 .card-body .row-1 .btn {
            width: 170px;
            height: 60px;
            border-radius: 5px;
        }

        #u5 .card-2 .card-body .row-1 .btn .text {
            font-size: 16px;
        }

        #u5 .card-2 .card-body .row-2 {
            margin-top: 10px;
        }

        #u5 .sec03 .row-1 {
            margin-top: 50px;
        }

        #u5 .sec03 .row-1 .btn {
            width: 150px;
            height: 60px;
            border-radius: 5px;
        }

        #u5 .sec03 .row-1 .btn .text {
            font-size: 20px;
        }

        #u5 .sec03 .row-2 {
            margin-top: 20px;
        }

        #u5 .sec03 .row-2 .btn {
            width: 200px;
            height: 60px;
        }

        #u5 .sec03 .row-2 .btn .text {
            font-size: 30px;
        }
    }

    @media (max-width: 576px) {
        #u5 .sec01 {
            flex-direction: column;
            padding-block: 20px;
        }

        #u5 .sec01 .row-1 {
            padding-left: 15px;
            margin-bottom: 10px;
        }

        #u5 .card-2 .card-body .row-1 .btn {
            width: 46%;
            height: 50px;
        }

        #u5 .card-2 .card-body .row-1 .btn .text {
            font-size: 3vw;
        }

        #u5 .sec03 .row-1 .btn {
            width: 130px;
            height: 50px;
        }

        #u5 .sec03 .row-2 .btn {
            height: 50px;
            width: 180px;
        }

        #u5 .sec03 .row-2 .btn .text {
            font-size: 24px;
        }
    }

    /* u6 */

    #u6 label,
    #u6 .text,
    #u6 input,
    #u6 .btn .text {
        font-size: 32px;
    }

    #u6 input[type=text],
    #u6 input[type=tel],
    #u6 input[type=file],
    #u6 input[type=search],
    #u6 input[type=rest] {
        max-width: 424px;
        height: 78px;
        width: 22vw;
    }

    #u6 input[type=submit] {
        background: none;
        border: none;
        color: #fff;
    }

    #u6 .btn-green {
        background: var(--u-green);
    }

    #u6 .btn-blue {
        background: var(--u-blue);
    }

    #u6 .btn-red {
        background: #F98C84;
    }

    #u6 .main-body {
        background: #B3B3B3;
    }

    #u6 .main-body form {
        max-width: 1413px;
        padding: 20px 45px;
        border-radius: 5px;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        border: none;
    }

    #u6 .header-bar {
        height: 110px;
        background: var(--u-green);
        max-width: 1413px;
        margin: auto;
        border-radius: 5px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    #u6 .row .input-box {
        display: flex;
        flex-wrap: wrap;
    }

    #u6 .row .input-box label {
        width: 100%;
    }

    #u6 .row .input-box .input-btn-box {
        display: flex;
        align-items: center;
    }

    #u6 .row .input-box .input-btn-box.right .btn {
        margin-right: 0;
    }

    #u6 .row .input-box .input-btn-box .btn {
        width: 155px;
        height: 70px;
        padding: 0;
        margin-inline: 40px;
    }

    #u6 .row-2 {
        display: flex;
    }

    #u6 .row-2 .input-box {
        flex-direction: column;
    }

    #u6 .row-2 .input-box label {
        width: fit-content;
    }

    #u6 .row-2 .input-box.right {
        margin-left: 50px;
    }

    #u6 .row-5 {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 20px;
    }

    #u6 .row-5 .btn {
        width: 183px;
        height: 73px;
    }

    @media (max-width: 1200px) {

        #u6 label,
        #u6 .text,
        #u6 input,
        #u6 .btn .text {
            font-size: 22px;
        }

        #u6 input[type=text],
        #u6 input[type=tel],
        #u6 input[type=file],
        #u6 input[type=search],
        #u6 input[type=rest] {
            height: 55px;
            width: 24vw;
        }

        #u6 .btn-green {
            background: var(--u-green);
        }

        #u6 .btn-blue {
            background: var(--u-blue);
        }

        #u6 .btn-red {
            background: #F98C84;
        }

        #u6 .header-bar {
            height: 80px;
        }

        #u6 .row .input-box .input-btn-box .btn {
            height: 50px;
            margin-inline: 20px;
            width: 80px;
        }

        #u6 .row-5 .btn {
            width: 120px;
            height: 55px;
        }
    }

    @media (max-width: 768px) {

        #u6 label,
        #u6 .text,
        #u6 input,
        #u6 .btn .text {
            font-size: 18px;
        }

        #u6 input[type=text],
        #u6 input[type=tel],
        #u6 input[type=file],
        #u6 input[type=search],
        #u6 input[type=rest] {
            width: calc(100vw - 160px);
            height: 50px;
        }

        #u6 .btn-green {
            background: var(--u-green);
        }

        #u6 .btn-blue {
            background: var(--u-blue);
        }

        #u6 .btn-red {
            background: #F98C84;
        }

        #u6 .main-body form {
            padding: 20px 20px;
        }

        #u6 .header-bar {
            height: 70px;
        }

        #u6 .row .input-box .input-btn-box .btn {
            height: 45px;
            margin-inline: 10px;
        }

        #u6 .row-2 {
            flex-direction: column;
        }

        #u6 .row-2 .input-box.right {
            margin-left: 0;
        }
    }

    @media (max-width: 576px) {

        #u6 label,
        #u6 .text,
        #u6 input,
        #u6 input[type=text],
        #u6 input[type=tel],
        #u6 input[type=file],
        #u6 input[type=search],
        #u6 .btn-green {
            background: var(--u-green);
        }

        #u6 .btn-blue {
            background: var(--u-blue);
        }

        #u6 .btn-red {
            background: #F98C84;
        }
    }

    /* #u7 */

    #u7 .main-body {
        background: #B3B3B3;
    }

    #u7 .main-body form {
        max-width: 1413px;
        padding: 20px 45px;
        border-radius: 5px;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        border: none;
    }

    #u7 .main-body .header-bar {
        height: 110px;
        background: var(--u-green);
        max-width: 1413px;
        margin: auto;
        border-radius: 5px;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
    }

    #u7 .main-body form .person-box {
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }

    #u7 .main-body form .btn {
        width: 180px;
        height: 70px;
        background: #5B5B5B;
        margin: auto;
        padding: 0;
        margin-block: 50px;
    }

    @media (max-width: 1200px) {
        #u7 .main-body .header-bar {
            height: 80px;
        }

        #u7 .main-body form .btn {
            width: 150px;
            height: 60px;
            margin-block: 40px;
        }
    }

    @media (max-width: 768px) {
        #u7 .main-body .header-bar {
            height: 70px;
        }

        #u7 .main-body form {
            padding: 20px 20px;
        }

        #u7 .main-body form .btn {
            margin-block: 30px;
            height: 50px;
            width: 120px;
        }
    }

    /* popup*/
    .pop_bg {
        background: #B3B3B3;
        width: 100vw;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pop {
        background: #fff;
        width: auto;
        /* max-width: 90vw; */
        margin: auto;
        border-radius: 5px;
        overflow: hidden;
        /* margin-inline: 5vw; */
        font-size: 22px;
        top: 50%;
        left: 50%;
        position: absolute;
        transform: translate(-50%, -50%);
    }

    .pop-header {
        height: 60px;
        background: #009B8E;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .pop-header .text {
        font-size: 22px;
        color: #fff;
    }

    .pop-body {
        padding: 10px;
    }

    .pop-body .text {
        text-align: center;
        margin-top: 30px;
        font-size: 22px;
        color: #5A5A5A;
    }

    .pop-btn-row {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 17%;
    }

    .pop-btn {
        margin: 0;
        width: 143px;
        height: 50px;
        font-size: 20px;
        padding: 0;
        margin-block: 25px 35px;
        border-radius: 5px;
        border: none;
        font-family: 'sans';
        color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .pop-btn-cancel {
        background: #5B5B5B;
    }

    .pop-btn-ok {
        background: #009B8E;
    }

    @media (max-width: 768px) {
        .pop_bg {}

        .pop {}

        .pop-header {}

        .pop-header .text {}

        .pop-body {}

        .pop-body .text {}

        .pop-btn-row {}

        .pop-btn {}

        .pop-btn-cancel {}

        .pop-btn-ok {}
    }

    @media (max-width: 576px) {
        .pop_bg {}

        .pop {}

        .pop-header {}

        .pop-header .text {}

        .pop-body {}

        .pop-body .text {}

        .pop-btn-row {}

        .pop-btn {}

        .pop-btn-cancel {}

        .pop-btn-ok {}
    }

    .pop-sm-1 {
        width: 777px;
    }

    .pop-sm-1 .pop-header {
        height: 77px;
    }

    .pop-sm-1 .pop-header .text {}

    .pop-sm-1 .pop-body {}

    .pop-sm-1 .pop-body .row-1 .text {
        margin-top: 25px;
        font-size: 22px;
    }

    .pop-sm-1 .pop-body .row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 20px;
        padding: 0;
        margin: 0;
        margin-block: 20px;
        width: 100%;
    }

    .pop-sm-1 .pop-body .row input {
        height: 60px;
        max-width: 405px;
        flex-grow: 1;
        font-size: 22px;
        padding-left: 0.7em;
        width: 100%;
    }

    .pop-sm-1 .pop-body .row .btn-box {
        display: flex;
        align-items: center;
        gap: 20px;
    }

    .pop-sm-1 .pop-body .row .btn-box .pop-btn {
        margin: 0;
    }

    .pop-sm-1 .pop-body .row .btn-box .pop-btn-1 {
        background: #79C0F9;
    }

    .pop-sm-1 .pop-body .row .btn-box .pop-btn-2 {
        background: #F98C84;
    }

    .pop-sm-1 .pop-body .pop-btn-row {
        justify-content: end;
        gap: 20px;
    }

    .pop-sm-1 .pop-body .pop-btn-row .pop-btn {}

    @media (max-width: 768px) {
        .pop-sm-1 {}

        .pop-sm-1 .pop-header {}

        .pop-sm-1 .pop-header .text {}

        .pop-sm-1 .pop-body {}

        .pop-sm-1 .pop-body .row-1 .text {}

        .pop-sm-1 .pop-body .row {}

        .pop-sm-1 .pop-body .row input {}

        .pop-sm-1 .pop-body .row .btn-box {}

        .pop-sm-1 .pop-body .row .btn-box .pop-btn {}

        .pop-sm-1 .pop-body .row .btn-box .pop-btn-1 {}

        .pop-sm-1 .pop-body .row .btn-box .pop-btn-2 {}

        .pop-sm-1 .pop-body .pop-btn-row {}

        .pop-sm-1 .pop-body .pop-btn-row .pop-btn {}
    }

    @media (max-width: 576px) {
        .pop-sm-1 {}

        .pop-sm-1 .pop-header {}

        .pop-sm-1 .pop-header .text {}

        .pop-sm-1 .pop-body {}

        .pop-sm-1 .pop-body .row-1 .text {}

        .pop-sm-1 .pop-body .row {
            flex-direction: column;
        }

        .pop-sm-1 .pop-body .row input {
            max-width: 100%;
        }

        .pop-sm-1 .pop-body .row .btn-box {
            width: 100%;
            justify-content: end;
        }

        .pop-sm-1 .pop-body .row .btn-box .pop-btn {
            max-width: calc((100% - 20px) / 2);
        }

        .pop-sm-1 .pop-body .row .btn-box .pop-btn-1 {}

        .pop-sm-1 .pop-body .row .btn-box .pop-btn-2 {}

        .pop-sm-1 .pop-body .pop-btn-row {}

        .pop-sm-1 .pop-body .pop-btn-row .pop-btn {}
    }

    .pop-sm-2 {
        width: 903px;
    }

    .pop-sm-2 .pop-body {}

    .pop-sm-2 .pop-body .row {
        justify-content: start;
    }

    .pop-sm-2 .pop-body .row input {}

    .pop-sm-2 .pop-body .row .btn-box {}

    .pop-sm-2 .pop-body .pop-btn-row {
        margin-top: 50px;
    }

    @media (max-width: 768px) {
        .pop-sm-2 {}

        .pop-sm-2 .pop-body {}

        .pop-sm-2 .pop-body .row {}

        .pop-sm-2 .pop-body .row input {}

        .pop-sm-2 .pop-body .row .btn-box {}

        .pop-sm-2 .pop-body .pop-btn-row {}
    }

    @media (max-width: 576px) {
        .pop-sm-2 {}

        .pop-sm-2 .pop-body {}

        .pop-sm-2 .pop-body .row {}

        .pop-sm-2 .pop-body .row input {}

        .pop-sm-2 .pop-body .row .btn-box {}

        .pop-sm-2 .pop-body .pop-btn-row {
            margin-top: 0;
        }
    }

    .pop-lg {
        width: 1230px;
    }

    .pop-lg .pop-header {}

    .pop-lg .pop-header .text {}

    .pop-lg .pop-body {}

    .pop-lg .pop-body .row {
        justify-content: start;
    }

    .pop-lg .pop-body .input-box {
        display: flex;
        align-items: center;
        width: 50%;
    }

    .pop-lg .pop-body .input-box label {
        font-size: 22px;
        min-width: 130px;
    }

    .pop-lg .pop-body .input-box input {
        /* max-width: 331px; */
        flex-grow: 1;
    }

    .pop-lg .pop-body .selectdiv {}

    .pop-lg .pop-body .selectdiv:after {
        font: normal normal normal 26px/1 FontAwesome;
        transform: translate(-20px, -42%);
    }

    @media (max-width: 1370px) {
        .pop-lg .pop-body .selectdiv:after {
            /* transform: translate(-16px, -42%); */
        }
    }

    .pop-lg .pop-body .selectdiv select {
        /* max-width: 331px; */
        /* width: 331px; */
        height: 60px;
    }

    .pop-lg .pop-body .selectdiv select option {}

    .pop-lg .pop-body .row-1 {}

    .pop-lg .pop-body .row-last {}

    @media (max-width: 992px) {
        .pop-lg .pop-body .row-last {
            flex-direction: column;
        }
    }

    .pop-lg .pop-body .row-last .left {}

    .pop-lg .pop-body .check-row {
        display: flex;
        flex-wrap: wrap;
        column-gap: 40px;
        row-gap: 30px;
    }

    .pop-lg .pop-body .check-box {
        display: flex;
        align-items: center;
    }

    .pop-lg .pop-body .check-box input {
        width: 43px;
        height: 43px;
        margin-right: 20px;
    }

    .pop-lg .pop-body .check-box label {
        width: fit-content;
        font-size: 22px;
    }

    .pop-lg .pop-body .row-last .right {}

    .pop-lg .pop-body .row-last .right .pop-btn-row {
        margin-top: 80px;
        margin-bottom: 17px;
    }

    .pop-lg .pop-body .row-last .right .pop-btn-row .pop-btn {
        margin: 0;
    }

    @media (max-width: 768px) {
        .pop-lg {}

        .pop-lg .pop-header {}

        .pop-lg .pop-header .text {}

        .pop-lg .pop-body {}

        .pop-lg .pop-body .row {}

        .pop-lg .pop-body .input-box {}

        .pop-lg .pop-body .input-box label {}

        .pop-lg .pop-body .input-box input {}

        .pop-lg .pop-body .selectdiv {}

        .pop-lg .pop-body .selectdiv:after {}

        .pop-lg .pop-body .selectdiv select {}

        .pop-lg .pop-body .selectdiv select option {}

        .pop-lg .pop-body .row-1 {
            margin-bottom: 32px;
        }

        .pop-lg .pop-body .row-last {
            flex-direction: column;
        }

        .pop-lg .pop-body .row-last .left {}

        .pop-lg .pop-body .check-row {}

        .pop-lg .pop-body .check-box {}

        .pop-lg .pop-body .check-box input {}

        .pop-lg .pop-body .check-box label {}

        .pop-lg .pop-body .row-last .right {}

        .pop-lg .pop-body .row-last .right .pop-btn-row {
            margin-top: 40px;
        }
    }

    @media (max-width: 576px) {
        .pop-lg {}

        .pop-lg .pop-header {}

        .pop-lg .pop-header .text {}

        .pop-lg .pop-body {}

        .pop-lg .pop-body .row {}

        .pop-lg .pop-body .input-box {
            width: 100%;
        }

        .pop-lg .pop-body .input-box label {}

        .pop-lg .pop-body .input-box input {}

        .pop-lg .pop-body .selectdiv {}

        .pop-lg .pop-body .selectdiv:after {}

        .pop-lg .pop-body .selectdiv select {}

        .pop-lg .pop-body .selectdiv select option {}

        .pop-lg .pop-body .row-1 {}

        .pop-lg .pop-body .row-last {}

        .pop-lg .pop-body .row-last .left {}

        .pop-lg .pop-body .check-row {}

        .pop-lg .pop-body .check-box {}

        .pop-lg .pop-body .check-box input {}

        .pop-lg .pop-body .check-box label {}

        .pop-lg .pop-body .row-last .right {}

        .pop-lg .pop-body .row-last .right .pop-btn-row {}
    }

    /* modal : pop_16 */
    .modal {
        display: none;
        position: fixed;
        z-index: 10001;
        padding-top: 100px;
        left: 0;
        top: 0;
        overflow: auto !important;
        background-color: rgb(0, 0, 0);
        background-color: rgba(0, 0, 0, 0.4);
    }
    .dataTables_length{
        margin-bottom: 8px;
    }