@charset "utf-8";

@media (max-width:1280px) {
    #menuToggle {
        display: block;
        /*position: relative;*/
        position: fixed;
        top: 3.5vh;
        left: 50px;

        z-index: 70;

        -webkit-user-select: none;
        user-select: none;
    }

    #menuToggle a {
        text-decoration: none;
        color: #4c4948;

        transition: color 0.3s ease;
    }


    #menuToggle input {
        display: block;
        width: 40px;
        height: 32px;
        position: absolute;
        top: -7px;
        left: -5px;

        cursor: pointer;

        opacity: 0;
        /* hide this */
        z-index: 2;
        /* and place it over the hamburger */

        -webkit-touch-callout: none;
    }

    /*
 * Just a quick hamburger
 */
    #menuToggle span {
        display: block;
        width: 33px;
        height: 4px;
        margin-bottom: 5px;
        position: relative;

        background: #4c4948;
        border-radius: 3px;

        z-index: 1;

        transform-origin: 4px 0px;

        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0),
            opacity 0.55s ease;
    }

    #menuToggle span:first-child {
        transform-origin: 0% 0%;
    }

    #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%;
    }

    /*
 * Transform all the slices of hamburger
 * into a crossmark.
 */
    #menuToggle input:checked~span {
        opacity: 1;
        transform: rotate(45deg) translate(-2px, -1px);
        background: #7a6e6e;
    }

    /*
 * But let's hide the middle one.
 */
    #menuToggle input:checked~span:nth-last-child(3) {
        opacity: 0;
        transform: rotate(0deg) scale(0.2, 0.2);
    }

    /*
 * Ohyeah and the last one should go the other direction
 */
    #menuToggle input:checked~span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }

    .w_box {
        position: fixed;
        width: 50px;
        height: 50px;
        top: 1%;
        left: 5.6%;
        z-index: 34;
    }

    /*
 * Make this absolute positioned
 * at the top left of the screen
 */
    #menu {
        position: fixed;
        width: 88vw;
        height: 100vh;
        margin: -100px 0 0 -50px;
        padding: 50px;
        padding-top: 125px;

        background: #f2f2f2;

        list-style-type: none;
        -webkit-font-smoothing: antialiased;
        /* to stop flickering of text in safari */

        transform-origin: 0% 0%;
        transform: translate(-100%, 0);

        transition: transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1.0);
    }

    #menu li {
        padding: 10px 0;
        font-size: 22px;
    }

    /*
 * And let's slide it in from the left
 */
    #menuToggle input:checked~#menu {
        transform: none;
    }

    /*內容區*/
    .sp_nav_logo {
        position: absolute;
        width: 21.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        top: 7.5%;
        left: 62%;
    }

    .sp_nav_select_1 {
        position: absolute;
        width: 6.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        /*顏色標記*/
        top: 15.5%;
        left: 27%;
    }

    .sp_nav_select_1 p {
        font-size: 3vw;
        font-weight: 400;
    }

    .sp_nav_select_2 {
        position: absolute;
        width: 6.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        /*顏色標記*/
        top: 15.5%;
        left: 60%;
    }

    .sp_nav_select_2 p {
        font-size: 3vw;
        font-weight: 400;
    }

    .sp_nav_select_3 {
        position: absolute;
        width: 6.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        /*顏色標記*/
        top: 23.5%;
        left: 27%;
    }

    .sp_nav_select_3 p {
        font-size: 3vw;
        font-weight: 400;
    }

    .sp_nav_select_4 {
        position: absolute;
        width: 6.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        /*顏色標記*/
        top: 23.5%;
        left: 60%;
    }

    .sp_nav_select_4 p {
        font-size: 3vw;
        font-weight: 400;
    }

    .sp_nav_select_5 {
        position: absolute;
        width: 6.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        /*顏色標記*/
        top: 31.5%;
        left: 27%;
    }

    .sp_nav_select_5 p {
        font-size: 3vw;
        font-weight: 400;
    }

    .sp_nav_select_6 {
        position: absolute;
        width: 6.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        /*顏色標記*/
        top: 31.5%;
        left: 60%;
    }

    .sp_nav_select_6 p {
        font-size: 3vw;
        font-weight: 400;
    }

    .sp_nav_select_7 {
        position: absolute;
        width: 24.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        top: 41.5%;
        left: 48%;
        transform: translate(-50%, -50%);
    }

    .sp_nav_select_7 p {
        font-size: 3vw;
        font-weight: 400;
        text-align: center;
    }

    .sp_nav_line {
        position: absolute;
        width: 60%;
        height: 1px;
        background-color: #000000;
        top: 45.5%;
        left: 48%;
        transform: translate(-50%, -50%);
    }

    .sp_nav_sns_title {
        position: absolute;
        width: 24.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        top: 50.5%;
        left: 48%;
        transform: translate(-50%, -50%);
    }

    .sp_nav_sns_title p {
        font-size: 3vw;
        font-weight: 400;
        text-align: center;
    }

    .sp_nav_select_8 {
        position: absolute;
        width: 2.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        top: 55.5%;
        left: 31%;
        transform: translate(-50%, -50%);
    }

    .sp_nav_select_9 {
        position: absolute;
        width: 4.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        top: 55.5%;
        left: 48%;
        transform: translate(-50%, -50%);
    }

    .sp_nav_select_10 {
        position: absolute;
        width: 4.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        top: 55.5%;
        left: 65%;
        transform: translate(-50%, -50%);
    }

    .sp_nav_select_11 {
        position: absolute;
        width: 58.5%;
        height: auto;
        background-color: rgba(243, 122, 122, 0);
        top: 63.5%;
        left: 48%;
        transform: translate(-50%, -50%);
    }

    .sp_nav_select_11 p {
        font-size: 2vw;
        font-weight: 400;
        text-align: center;
    }
}

@media (max-width:480px) {
    #menuToggle {
        top: 3vh;
        left: 50px;
    }
}

@media (max-width:414px) {
    #menuToggle {
        top: 2.8vh;
        left: 31px;
    }

    .sp_nav_select_1 {
        position: absolute;
        width: 10%;
        height: auto;
        top: 15.5%;
        left: 27%;
    }

    .sp_nav_select_1 p {
        font-size: 4vw;
        font-weight: 400;
    }

    .sp_nav_select_2 {
        position: absolute;
        width: 10%;
        height: auto;
        top: 15.5%;
        left: 60%;
    }

    .sp_nav_select_2 p {
        font-size: 4vw;
        font-weight: 400;
    }

    .sp_nav_select_3 {
        position: absolute;
        width: 10%;
        height: auto;
        top: 23.5%;
        left: 27%;
    }

    .sp_nav_select_3 p {
        font-size: 4vw;
        font-weight: 400;
    }

    .sp_nav_select_4 {
        position: absolute;
        width: 10%;
        height: auto;
        top: 23.5%;
        left: 60%;
    }

    .sp_nav_select_4 p {
        font-size: 4vw;
        font-weight: 400;
    }

    .sp_nav_select_5 {
        position: absolute;
        width: 10%;
        height: auto;
        top: 31.5%;
        left: 27%;
    }

    .sp_nav_select_5 p {
        font-size: 4vw;
        font-weight: 400;
    }

    .sp_nav_select_6 {
        position: absolute;
        width: 10%;
        height: auto;
        top: 31.5%;
        left: 60%;
    }

    .sp_nav_select_6 p {
        font-size: 4vw;
        font-weight: 400;
    }

    .sp_nav_select_7 {
        position: absolute;
        width: 24.5%;
        height: auto;
        top: 41.5%;
        left: 48%;
        transform: translate(-50%, -50%);
    }

    .sp_nav_select_7 p {
        font-size: 4vw;
        font-weight: 400;
        text-align: center;
    }

    .sp_nav_line {
        top: 47.5%;
        left: 48%;
        transform: translate(-50%, -50%);
    }

    .sp_nav_sns_title {
        top: 52.5%;
        left: 48%;
        transform: translate(-50%, -50%);
    }

    .sp_nav_select_8 {
        top: 57.5%;
        left: 31%;
        transform: translate(-50%, -50%);
    }

    .sp_nav_select_9 {
        top: 57.5%;
        transform: translate(-50%, -50%);
    }

    .sp_nav_select_10 {
        top: 57.5%;
        transform: translate(-50%, -50%);
    }
}