body {
        font: "Lucida Grande", Helvetica, Arial, sans-serif;
        scroll-behavior: smooth;
        overflow: auto;
        moz-user-select: none;
        -webkit-user-select: none;
    }
    
    * {
        border: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    
    .myMOUSE {
        cursor: pointer;
    }
    
    h1 {
        color: #FB8360;
        font-size: 28px
    }
    
    div {
        display: block;
    }
    
    .seaBlueBg {
        background-color: #0D4966;
    }
    
    .fa-angle-right {
        font-size: 1.3em;
        position: relative;
        top: 3px;
        margin-right: 6px;
        display: none;
    }
    
    .yellowBg {
        background-color: #fff9dc
    }
    
    .grayBg {
        background-color: #D0CECE;
    }
    
    .backgroundimg {
        position: absolute;
        top: 20vh;
        width: 45vw;
        right: 1vw;
        z-index: -1;
    }
    /*--------------------------------------------------------index------------------------------------------------------*/
    
    .container {
        border: 0px;
        padding: 0px;
        right: 0px;
        left: 0px;
        position: absolute;
        top: 20vh;
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: Space-around;
    }
    
    .container2 {
        position: absolute;
        top: 55vh;
        left: 20vw;
        width: 60%;
        text-align: center;
        display: flex;
        justify-content: Space-around;
    }
    
    .character {
        position: relative;
        display: inline-block;
        vertical-align: top;
        color: white;
        text-align: center;
    }
    
    .buttonimg {
        height: 15vw;
        border: #D0CECE 5px;
        transition: all 1s;
    }
    
    .buttonimg:hover {
        transform: scale(1.4);
    }
    
    a.indexa {
        color: white;
        font-size: 2.5vw;
        text-decoration: none;
        cursor: pointer;
        transition: all 0.6s;
    }
    /*-----------------------------------------------------------title------------------------------------------------------*/
    
    .title_bar {
        background-color: white;
        height: 85px;
        width: 100%;
    }
    
    .title {
        position: relative;
        left: 105px;
        margin: 5px 10px 30px 10px;
        float: left;
        width: 150px;
    }
    
    .line {
        position: relative;
        left: 102px;
        top: 8.5px;
        height: 80%;
        width: 0px;
        border-right: 5px solid #7CA7BC;
        float: left;
        margin: auto;
        align-items: center;
    }
    
    .small_title {
        color: #767171;
        font-size: 17px;
    }
    
    .cuttingline {
        width: 60vw;
        position: absolute;
        top: 45px;
        left: 15vw;
    }
    
    a.nava {
        position: absolute;
        color: #0D4966;
        font-size: 1.2vw;
        text-decoration: none;
        cursor: pointer;
        text-align: center;
        transition: all 0.6s;
        top: 3px;
    }
    
    a.nava:hover {
        transform: scale(1.1);
    }
    
    .a {
        left: 11vw;
    }
    
    .b {
        left: 26.5vw;
    }
    
    .c {
        left: 43vw;
    }
    
    .d {
        left: 59.25vw;
    }
    
    .e {
        left: 76vw;
    }
    
    .navimg {
        height: 50px;
    }
    /*----------------------------------------------------listbar-------------------------------------------------------------*/
    
    .sidebar {
        left: 2.5vw;
        position: absolute;
        height: auto;
        width: auto;
        padding-left: 2vw;
        font-size: 2vw;
        color: rgb( 32, 56, 100);
        overflow: auto;
        font-weight: lighter;
    }
    
    .sidebar2 {
        left: 22vw;
        position: absolute;
        height: auto;
        width: auto;
        font-size: 2vw;
        color: rgb( 32, 56, 100);
        overflow: auto;
        font-weight: lighter;
    }
    
    ul {
        display: block;
        list-style-type: none;
    }
    
    .sideli {
        line-height: 40px;
        margin-top: 2vh;
        font-weight: lighter;
        padding-left: 1vw;
        padding-right: 1vw
    }
    
    .sideli:hover {
        background-color: rgb(251, 217, 185)
    }
    
    .fa-angle-right {
        font-size: 1.3em;
        position: relative;
        top: 0.2vw;
        margin-right: 6px;
        display: none;
    }
    
    #stu_mob {
        display: none
    }
    
    #others_mob {
        display: none
    }
    /*---------------------------------------------edit---------------------------------------------------*/
    
    .buttons {
        position: absolute;
        bottom: 5vh;
        left: 5vw;
        font-size: 2vw;
        z-index: 10
    }
    /*--------------------------------------------info--------------------------------------------------------*/
    
    .de-info {
        font-size: 3vw;
        position: absolute;
        width: 50vw;
        top: 30vh;
        right: 1vw;
        text-align: center;
        height: 60vh
    }
    
    .info {
        position: absolute;
        width: 60vw;
        height: 75vh;
        top: 175px;
        right: 10vw;
        background-color: #FFFDF1;
        overflow: auto;
    }
    
    .content {
        position: relative;
        top: 20px;
        font-size: 1.5vw;
        width: 90%;
        margin: 0 auto;
        line-height: 5vh;
    }
    
    .content_pic {
        position: relative;
        top: 4vh;
        width: 85%;
        margin: 0 auto;
        height: 35vh;
    }
    
    .info-line {
        width: 20vw;
        height: 0.5vh;
        background-color: #0D4966;
        position: relative;
        left: 15vw;
        top: 1vh;
    }
    
    .info_title {
        text-align: center;
        position: relative;
        top: 2vh;
        color: #0D4966;
        font-size: 3vw
    }
    
    .cutline {
        width: 20vw;
    }
    
    .linkimg {
        position: relative;
        width: 13vw;
        margin: auto;
        top: 0;
    }
    
    .de-en {
        font-size: 1.5vw;
    }
    
    .linkbuttons {
        position: relative;
        top: 5vh;
    }
    
    .linkhover {
        position: relative;
        width: 100%;
        height: 20vh;
        top: 0;
    }
    
    .shell a .link {
        left: calc(50% - 50vw);
        width: 100%;
        text-decoration: none;
        color: #0D4966;
        font-size: 2vw;
    }
    
    .shell {
        position: relative;
        display: inline-block;
        width: 14vw;
        vertical-align: top;
    }
    
    .stu_img {
        height: 60vh;
    }
    /* eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee*/
    
    #com_alert {
        position: absolute;
        width: 40%;
        left: 30vw;
        top: 40vh
    }
    
    #snap {
        position: absolute;
        top: 60px;
        left: 10px;
        height: 90px;
        z-index: 30;
        display: none;
    }
    
    #sign {
        position: absolute;
        top: 115px;
        left: 5px;
        width: 100px;
        display: none;
    }
    
    .snap_btn {
        position: absolute;
        top: 85px;
        left: 10px;
        z-index: 40;
        display: none;
    }
    
    .infinity {
        width: 5vh;
    }
    
    .snap_so {
        position: absolute;
        z-index: 3000;
        top: 100px;
        left: 20vh;
        display: none;
    }
    
    .snap_m {
        position: absolute;
        display: none;
        z-index: 3000;
        top: 80vh;
        left: 30vw
    }
    
    .snap_p {
        display: none;
        z-index: 3000;
        position: absolute;
        top: 20vh;
        left: 15vw
    }
    
    .snap_t {
        position: absolute;
        display: none;
        z-index: 3000;
        top: 15vh;
        left: 80vw
    }
    
    .snap_s {
        position: absolute;
        display: none;
        z-index: 3000;
        top: 93vh;
        left: 20vw
    }
    
    .snap_r {
        position: absolute;
        display: none;
        z-index: 3000;
        top: 75vh;
        left: 80vw;
    }
    
    @media screen and (max-width:1050px) {
        .cuttingline {
            display: none
        }
        .navbar {
            display: flex;
            width: 60vw;
            left: 17vw
        }
        a.nava {
            position: static;
        }
        .buttonimg {
            height: 25vw;
            width: inherit;
        }
        .backgroundimg {
            position: absolute;
            top: 30vh;
            z-index: -10;
        }
    }
    /*%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%phone%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%*/
    
    @media screen and (max-width: 850px) and (orientation: landscape) {
        /*手機橫放排版*/
        .backgroundimg {
            position: absolute;
            top: 40vh;
            z-index: -10;
        }
        .buttonimg {
            height: 30vh;
        }
        .de-info {
            top: 50vh;
        }
    }
    /*---------------------------------------------------------------ipad-------------------------------------------------------------*/
    
    @media screen and (max-width: 1030px) and (orientation: portrait) {
        /*ipad排版*/
        .snap_so {
            display: flex
        }
        .backgroundimg {
            position: absolute;
            top: 25vh;
            z-index: -10;
        }
        #de_pic {
            display: none;
        }
        #ass_pic,
        #com_pic,
        #others_pic {
            width: 100vw;
            left: calc(50% - 50vw);
        }
        .sidebar {
            left: 10vw;
            top: 15vh;
            position: absolute;
            height: auto;
            width: auto;
            padding-left: 2vw;
            font-size: 5vw;
            color: rgb( 32, 56, 100);
            overflow: auto;
            font-weight: lighter;
        }
        .sidebar2 {
            left: 10vw;
            top: 15vh;
            position: absolute;
            height: auto;
            width: auto;
            font-size: 5vw;
            color: rgb( 32, 56, 100);
            overflow: auto;
            font-weight: lighter;
        }
        #stu_com {
            display: none;
        }
        #stu_mob {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            width: 100vw;
            position: absolute;
            top: 18vh;
            font-size: 4.5vw
        }
        .stu_side {
            text-align: center;
        }
        #others_com {
            display: none;
        }
        #others_mob {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            width: 100vw;
            position: absolute;
            top: 18vh;
            font-size: 3vw
        }
        .other_side {
            text-align: center;
        }
        .sideli {
            margin-top: 3vh;
            font-weight: lighter;
            padding-left: 1vw;
            padding-right: 1vw
        }
        .horizontal {
            display: inline;
            position: relative;
        }
        .navbar {
            position: absolute;
            left: calc(50% - 50vw);
            top: 85vh;
            display: flex;
            flex-direction: row;
            width: 100vw;
            z-index: 100;
            justify-content: Center;
        }
        a.nava {
            position: static;
            z-index: 100;
            font-size: 4vw;
        }
        .navimg {
            height: 13vw;
        }
        a.nava:hover {
            transform: scale(1);
        }
        .buttonimg:hover {
            transform: scale(1);
        }
        .info {
            position: absolute;
            font-size: 3vw;
            width: 90vw;
            left: calc(50% - 45vw);
            height: 60vh;
            top: 25vh;
            background-color: #FFFDF1;
            overflow: auto;
        }
        .info_title {
            font-size: 7vw;
        }
        .content_pic {
            top: 5vh;
            width: 90%;
        }
        .stu_img {
            height: 40vh;
        }
        .content {
            font-size: 3vw;
            top: 3vh;
        }
        .de-info {
            position: absolute;
            top: 25vh;
            width: 100vw;
            font-size: 7vw;
        }
        .cutline {
            width: 50vw;
        }
        .de-en {
            font-size: 3vw;
        }
        .shell a .link {
            font-size: 5vw
        }
        .shell {
            position: relative;
            display: inline-block;
            width: 30vw;
            vertical-align: top;
        }
        .linkbuttons {
            position: relative;
            top: 8vh;
        }
        .linkimg {
            position: relative;
            width: 30vw;
            margin: auto;
            top: 0;
        }
        /*eeeeee*/
        #com_alert {
            position: absolute;
            width: 90vw;
            left: calc(50% - 45vw);
        }
        #snap {
            position: absolute;
            top: 70px;
            right: 1px;
            height: 95px;
            display: none;
        }
        .snap_btn {
            position: absolute;
            top: 85px;
            right: 100px;
            display: none;
        }
    }
    
    @media screen and (max-width: 700px) and (orientation: portrait) {
        .snap_so {
            display: flex
        }
        .container {
            border: 0px;
            padding: 0px;
            right: 0px;
            left: 0px;
            position: absolute;
            top: 10vh;
            width: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
        }
        .container2 {
            position: relative;
            top: 90vh;
            left: 0px;
            width: 100%;
            text-align: center;
            display: flex;
            flex-direction: column;
        }
        .character {
            position: relative;
            vertical-align: top;
            color: white;
            text-align: center;
        }
        .buttonimg {
            height: 25vh;
            width: inherit;
            border: #D0CECE 5px;
        }
        a.indexa {
            color: white;
            font-size: 6vw;
            text-decoration: none;
            cursor: pointer;
            transition: all 0.6s !important;
        }
        .backgroundimg {
            position: absolute;
            top: 35vh;
            z-index: -10;
        }
        #de_pic {
            display: none;
        }
        #ass_pic,
        #com_pic,
        #others_pic {
            width: 100vw;
            left: calc(50% - 50vw);
        }
        .buttons {
            display: none;
        }
        /*-%%%%%%%%%%%%%%%%%%%%%%%%%%%-listbar-%%%%%%%%%%%%%%%%%%%%%%%%%*/
        .sidebar {
            left: 10vw;
            top: 24vh;
            position: absolute;
            height: auto;
            width: auto;
            padding-left: 2vw;
            font-size: 5vw;
            color: rgb( 32, 56, 100);
            overflow: auto;
            font-weight: lighter;
        }
        .sidebar2 {
            left: 10vw;
            top: 24vh;
            position: absolute;
            height: auto;
            width: auto;
            font-size: 5vw;
            color: rgb( 32, 56, 100);
            overflow: auto;
            font-weight: lighter;
        }
        #stu_com {
            display: none;
        }
        #stu_mob {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            width: 100vw;
            position: absolute;
            top: 25vh;
            font-size: 4.5vw
        }
        .stu_side {
            text-align: center;
        }
        #others_com {
            display: none;
        }
        #others_mob {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            width: 100vw;
            position: absolute;
            top: 25vh;
            font-size: 3vw
        }
        .other_side {
            text-align: center;
        }
        .sideli {
            margin-top: 1vh;
            font-weight: lighter;
            padding-left: 1vw;
            padding-right: 1vw
        }
        .horizontal {
            display: inline;
            position: relative;
        }
        /*%%%%%%%%%%%%%%%%%%%%%title-%%%%%%%%%%%%%%%%%%%%%%%%-*/
        .title {
            position: relative;
            left: 20px;
            margin: 5px 10px 30px 10px;
            float: left;
            width: 150px;
        }
        .line {
            position: relative;
            left: 15px;
            top: 8.5px;
            height: 80%;
            width: 0px;
            border-right: 5px solid #7CA7BC;
            float: left;
            margin: auto;
            align-items: center;
        }
        .cuttingline {
            display: none;
        }
        .navbar {
            position: absolute;
            left: calc(50% - 50vw);
            top: 85vh;
            display: flex;
            flex-direction: row;
            width: 100vw;
            z-index: 100;
            justify-content: Center;
        }
        a.nava {
            position: static;
            z-index: 100;
            font-size: 4vw;
        }
        .navimg {
            height: 13vw;
        }
        a.nava:hover {
            transform: scale(1);
        }
        .buttonimg:hover {
            transform: scale(1);
        }
        /*--%%%%%%%%%%%%%%%%%%%%--info--%%%%%%%%%%%%%%%%%%%%-*/
        .info {
            position: absolute;
            font-size: 4vw;
            width: 90vw;
            left: calc(50% - 45vw);
            height: 50vh;
            top: 32vh;
            background-color: #FFFDF1;
            overflow: auto;
        }
        .info_title {
            font-size: 8vw;
        }
        .content_pic {
            top: 5vh;
            width: 90%;
        }
        .stu_img {
            height: 30vh;
        }
        .content {
            font-size: 4vw;
            top: 3vh;
        }
        .de-info {
            position: absolute;
            top: 30vh;
            width: 100vw;
            font-size: 7vw;
        }
        .cutline {
            width: 50vw;
        }
        .de-en {
            font-size: 3vw;
        }
        .shell a .link {
            font-size: 5vw
        }
        .shell {
            position: relative;
            display: inline-block;
            width: 30vw;
            vertical-align: top;
        }
        .linkbuttons {
            position: relative;
            top: 8vh;
        }
        .linkimg {
            position: relative;
            width: 30vw;
            margin: auto;
            top: 0;
        }
        /*eeeeee*/
        #com_alert {
            position: absolute;
            width: 90vw;
            left: calc(50% - 45vw);
        }
        #snap {
            position: absolute;
            top: 60px;
            left: 10px;
            height: 90px;
            z-index: 30;
            display: none;
        }
        #sign {
            position: absolute;
            top: 115px;
            left: 5px;
            width: 100px;
            display: none;
        }
        .snap_btn {
            position: absolute;
            top: 85px;
            left: 10px;
            z-index: 40;
            display: none;
        }
    }