@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700;900&display=swap');

body {
    font-size: 16px;
    font-family: 'Noto Sans TC', sans-serif;
    color: #333;
}

* {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body.logining {
    top: 0;
    left: 0;
    width: calc(100% - 16px);
    overflow-y: hidden;
}

.layer {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.layer--gray {
    background: #e9e9e9;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 25px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    background: rgba(255,255,255,.95);
    z-index: 999;
}

.header .logo {
    height: 25px;
}

.header > ul {
    display: flex;
    flex-direction: row;
    margin-right: -25px;
}

.header a {
    align-content: center;
}

.header > ul > li {
    position: relative;
    padding: 0 25px;
}

.header > ul > li > img {
    width: 35px;
}

.header > ul > li > a,
.header > ul > li > .list__head {
    line-height: 35px;
    color: #333;
    text-decoration: none;
}

.header > ul > li + li {
    margin-left: 25px;
}

.header > ul > li > ul {
    position: absolute;
    top: 35px;
    left: -25px;
    width: calc( 100% + 50px );
    height: 0;
    padding: 0;
    background: #333;
    overflow: hidden;
    transition: .3s;
}

.header > ul > li:hover > ul {
    height: auto;
    padding: 25px 0;
}

.header > ul > li > ul > li {
    padding: 10px 20px;
    font-size: 16px;
    opacity: 0;
    transition: .3s;
}

.header > ul > li:hover > ul > li {
    opacity: 1;
}

.header > ul > li > ul > li:hover {
    background: rgba(255,255,255,.15);
}

.header > ul > li > ul > li a {
    display: flex;
    width: 100%;
    color: white;
    text-decoration: none;
}

.openMenu {
    display: none;
}

.closeMenu {
    display: none;
}

.content {
    position: relative;
}

.container {
    padding: 50px;
}

.wrapper {
    width: calc( 100% - 50px );
    max-width: 1366px;
}

.sticky__bottom {
    position: sticky;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    width: 100%;
    height: 0;
    /*padding: 25px;*/
    padding-right: 25px;
}

.sticky__section {
    margin-bottom: 25px;
}

.sticky__section + .sticky__section {
    margin-left: 15px;
}

.sticky__section .button {
    line-height: 35px;
    border: #a9312f 1px solid;
    cursor: pointer;
}

.sticky__section .button--border {
    padding: 0px 10px;
    background: white;
}

.sticky__section .button--bg {
    border: #333 1px solid;
    background: #333;
}

.sticky__section .button--bg a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
}

.sticky__section .button img {
    width: 20px;
}

.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top: 50px;
}

.footer > .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 25px 0;
    border-top: #e98383 1px solid;
}

.footerList {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 300px;
}

.footerList > li {
    margin-right: 50px;
    margin-bottom: 15px;
}

.footerList__head {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 10px;
}

.footerList > li > ul > li {
    font-size: 16px;
    line-height: 35px;
}

.footerList > li > ul > li a {
    text-decoration: none;
    color: #666;
}

.footerInfo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.footerInfo__section {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    color: #666;
}

.footerInfo__section ul {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.footerInfo__section ul li img {
    height: 25px;
}

.footerInfo__section ul li + li {
    margin-left: 25px;
}

.footerInfo__section + .footerInfo__section {
    margin-top: 25px;
}

.footerInfo__point {
    font-size: 18px;
    font-weight: 400;
    color: #cf3c39;
}

* + .footerInfo__point {
    margin-top: 5px;
}

.footerInfo__point.bigger {
    font-size: 25px;
}

.footerBottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 25px;
    color: white;
    background: #a9312f;
}

.footerBottom .wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.footerBottom img {
    height: 25px;
    filter: brightness(1000);
}

.copyright {
    font-size: 12px;
    line-height: 20px;
}


.advisory__area, .details__area {
    position: fixed;
    top: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    z-index: 999;
}

.advisory__area.show, .details__area.show {
    display: flex;
}

.advisory__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.75);
    opacity: 0;
    transition-delay: .1s;
    transition: .3s;
}

.show .advisory__bg {
    opacity: 1;
}

.advisory__box {
    display: flex;
    flex-direction: column;
    max-width: 1000px;
    width: calc( 100% - 50px );
    padding: 25px;
    background: white;
    opacity: 0;
    transition-delay: .1s;
    transition: .3s;
    z-index: 999;
}

.advisory__box--done {
    display: none;
    max-width: 500px;
}

.advisory__box--done.done {
    display: flex;
}

.scroll_content {
    overflow-y: scroll;
    max-height: calc(100% - 50px);
}

.scroll_content::-webkit-scrollbar {
    width: 7.5px;
    background: transparent;
}
   
.scroll_content::-webkit-scrollbar-track {
    background: transparent;
}
   
.scroll_content::-webkit-scrollbar-thumb {
    background-color: #aaa;
    border-radius: 5px;
}

.advisory__content {
    margin: 25px 0;
}

.advisory__content p {
    line-height: 25px;
}

.advisory__content p a {
    color: #a9312f;
}

.show .advisory__box {
    opacity: 1;
}

.advisory__title {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding-left: 50px;
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 15px;
    background: url('../images/titleIcon.svg') center left no-repeat;
    background-size: 25px;
}

.advisory__title img {
    width: 25px;
    cursor: pointer;
}

.section__title {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    height: 12px;
    margin-bottom: 37.5px;
    border-bottom: #c3c3c3 1px solid;
}

.section__title span {
    padding: 0 15px;
    line-height: 25px;
    background: white;
}

.lanSelect {
    display: flex;
    flex-direction: row;
    margin-bottom: 25px;
}

.lanSelect li {
    position: relative;
    flex: 1;
    cursor: pointer;
    border-width: 5px;
    border-style: solid;
    transition: .3s;
}

.lanSelect li:not(.selected) {
    border-color: white;
}

.lanSelect li + li {
    margin-left: 15px;
}

.lanSelect li img {
    width: 100%;
}

.lanSelect li .text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: white;
}

.checkStatus {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 35px;
    height: 35px;
    transition: .3s;
    opacity: 0;
}

.selected .checkStatus {
    opacity: 1;
}

.checkStatus img {
    width: 20px !important;
}

.advisory__table__content {
    display: none;
}

.advisory__table__content.active {
    display: block;
}

.typeSelect {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 25px;
}

.typeSelect li {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    border-width: 5px;
    border-style: solid;
    color: white;
    cursor: pointer;
    transition: .3s;
}

.typeSelect li:not(.selected) {
    background-color: white;
    color: #333;
}

.typeSelect li + li {
    margin-left: 15px;
}

.advisory__type .advisory__table {
    display: none;
}

.advisory__type .advisory__table.active {
    display: block;
}

.advisory__table {
    display: flex;
    flex-direction: column;
}

.table__section {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.table__section > * {
    flex: 1;
    margin-bottom: 15px;
    padding: 5px 10px;
    line-height: 25px;
    border: #c3c3c3 1px solid;
    border-radius: 0;
}

.table__section > * + * {
    margin-left: 15px;
}

.advisory__button {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

.sendButton {
    padding: 15px 35px;
    color: white;
    border: 0;
    background-color: #cf3c39;
    cursor: pointer;
}


.color_pcschool {
    background: #a9312f;
}

.color_abconline {
    background: #ff954d;
}

.color_soeasyedu {
    background: #4a407f;
}

.color_wincenter {
    background: #2794ba;
}

.color_work360 {
    background: #c45f5f;
}

.color_gsquare {
    background: #c77e3d;
}

.color_sp {
    background: #ee781f;
}

.border_pcschool {
    border-color: #a9312f;
}

.border_abconline {
    border-color: #ff954d;
}

.border_soeasyedu {
    border-color: #4a407f;
}

.border_wincenter {
    border-color: #2794ba;
}

.border_work360 {
    border-color: #c45f5f;
}

.border_gsquare {
    border-color: #c77e3d;
}

.border_sp {
    border-color: #ee781f;
}

@media screen and (min-width: 979px) and (max-width: 1680px) {

    .header {
        padding: 15px;
        align-items: center;
    }

}

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

    .app {
        padding-top: 50px;
    }

    .container {
        padding: 25px;
    }

    .header {
        padding: 15px 25px;
        background: white;
    }
    
    .header .logo {
        height: 20px;
    }

    .header > ul {
        position: fixed;
        top: 0;
        left: 0;
        width: 0;
        height: 100%;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        margin-right: 0;
        padding: 0;
        background: #333;
        overflow: auto;
        transition: .3s;
    }

    .header > ul.show {
        width: 100%;
        padding: 50px
    }

    .header > ul > li {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding: 15px 0;
        opacity: 0;
        transition: .3s;
    }

    .header > ul.show > li {
        opacity: 1;
    }

    .header > ul > li > img {
        width: 35px;
    }

    .header > ul > li > a,
    .header > ul > li > .list__head {
        text-align: center;
        color: white;
        border-bottom: white 1px solid;
    }

    .header > ul > li + li {
        margin-left: 0;
    }

    .header > ul > li > ul {
        position: static;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: auto;
        height: auto;
        padding: 0;
        margin-top: 15px;
        background: transparent;
    }

    .header > ul > li:hover > ul {
        padding: 0;
    }

    .header > ul > li > ul > li {
        padding: 7.5px 20px;
        font-size: 14px;
        opacity: 1;
        transition: .3s;
    }

    .header > ul > li > ul > li:hover {
        background: rgba(255,255,255,.15);
    }

    .header > ul > li > ul > li a {
        width: auto;
        color: rgba(255,255,255,.75);
    }

    .openMenu {
        display: block;
    }

    .openMenu img {
        width: 5px;
    }

    .header > ul > li.closeMenu {
        display: block;
        position: absolute;
        top: 10px;
        right: 25px;
        width: 25px;
    }

    .header > ul > li.closeMenu img {
        width: 25px;
    }

    .header > ul > li.member {
        position: absolute;
        bottom: 10px;
        right: 25px;
        width: 35px;
    }

    .header > ul > li.member img {
        width: 35px;
        border-radius: 35px;
        border: white 2px solid;
        overflow: hidden;
    }

    .footer > .wrapper {
        flex-direction: column;
    }
    
    .footerList {
        flex-direction: row;
        justify-content: center;
        height: auto;
    }
    
    .footerList > li {
        margin: 0 17.5px 50px;
    }
    
    .footerList__head {
        font-size: 18px;
    }
    
    .footerList > li > ul > li {
        font-size: 16px;
        line-height: 25px;
    }
    
    .footerInfo {
        align-items: center;
    }

    .footerInfo__section {
        align-items: center;
    }
    
    
    .footerBottom .wrapper {
        flex-direction: column;
    }
    
    .footerBottom img {
        height: 15px;
        margin-bottom: 10px;
    }

    .advisory__area {
        z-index: 9999;
    }

    .advisory__box {
        padding: 15px;
    }

    .advisory__title {
        padding-left: 35px;
        font-size: 18px;
        margin-bottom: 15px;
        background-size: 15px;
    }
    
    .advisory__title img {
        width: 15px;
    }

    .section__title {
        margin-bottom: 22.5px;
    }

    .lanSelect {
        flex-wrap: wrap;
        margin-bottom: 15px;
    }
    
    .lanSelect li {
        flex: none;
        width: calc( 100%/3 - 10px/3 );
        border-width: 2px;
    }

    .lanSelect li .text {
        padding: 5px 0;
        font-size: 14px;
        font-weight: 400;
    }

    .lanSelect li + li {
        margin-left: 5px;
    }

    .lanSelect li:nth-child(3n + 1) {
        margin-left: 0;
    }

    .typeSelect {
        margin-bottom: 15px;
    }

    .typeSelect li {
        font-size: 14px;
    }

    .typeSelect li + li {
        margin-left:  10px;
    }

    
    .table__section {
        flex-direction: column;
    }

    .table__section > * {
        flex: 1;
        margin-bottom: 10px;
    }

    .table__section > * + * {
        margin-left: 0;
    }
}