/*Large Screen*/
/*主要解決Header 800px的問題*/

@media only screen and (min-width: 769px) and (max-width: 900px) {



    header{
        width: 50%;
        text-align: center;
        margin: auto auto 20px auto;
    }

    .logo {
        width: 110px;
        height: 128px;
        background-size: 110px 128px;
        text-align: center;
        margin-top: 25px;
    }

    .logo a {
        width: 110px;
        height: 128px;
        margin-right:20px;
        margin-top: 25px;
    }

    .logo_black {
        width: 110px;
        height: 128px;
        background-size: 110px 128px;
        text-align: center;
        margin-top: 25px;
    }

    .logo_black a {
        width: 110px;
        height: 128px;
        margin-right:20px;
        margin-top: 25px;
    }


    .menu_icon{
        width: 40px;
        height: 33px;
        background-size: 40px 33px;
        display: inline-block;
        margin-right:0;
        margin-top: 110px;

        vertical-align: top;
        float: right;
        opacity: 1;
    }



}




/*iPad*/

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




    .logo {
        width: 110px;
        height: 128px;
        background-size: 110px 128px;
        text-align: center;
        margin-top: 25px;
    }

    .logo a {
        width: 110px;
        height: 128px;
        margin-right:20px;
        margin-top: 25px;
    }

    .logo_black {
        width: 110px;
        height: 128px;
        background-size: 110px 128px;
        text-align: center;
        margin-top: 25px;
    }

    .logo_black a {
        width: 110px;
        height: 128px;
        margin-right:20px;
        margin-top: 25px;
    }


    .menu_icon{
        width: 40px;
        height: 33px;
        background-size: 40px 33px;
        display: inline-block;
        margin-right: 40px;
        margin-top: 110px;

        vertical-align: top;
        float: right;
        opacity: 1;
    }


    article{
        font-size: 14px;
    }


    .menu_icon{

        opacity: 1;
    }


    /*單獨設定*/
    h1{
        font-size: 24px;
    }





}


/* Smart Phone*/

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



    #topArea{
        text-align: center;

    }


    article{
        font-size: 12px;
        padding: 0;
    }


    /*單獨設定*/
    h1{
        font-size: 18px;
        margin: 0 auto 10px auto;
    }


    header{
        width: 70%;
        text-align: center;
        margin: auto auto 5px auto;

    }



    .logo {
        width: 110px;
        height: 128px;
        background-size: 110px 128px;
        text-align: center;
        margin: 25px auto 0 40px;

    }

    .logo a {
        width: 110px;
        height: 128px;
        margin-right:20px;
        margin-top: 25px;
    }

    .logo_black {
        width: 110px;
        height: 128px;
        background-size: 110px 128px;
        text-align: center;
        margin: 25px auto 0 40px;
    }

    .logo_black a {
        width: 110px;
        height: 128px;
        margin-right:20px;
        margin-top: 25px;
    }

    .menu_icon{
        width: 30px;
        height: 25px;
        background-image: url("../images/nav/menu.png");
        background-repeat:no-repeat;
        background-size: 30px 25px;
        display: inline-block;
        cursor: pointer;
        margin-right:25px;
        margin-top: -37px;

        vertical-align: top;
        float: right;
        opacity: 1;
    }



    /*mobile only*/
    .topChanged{
        width: 100%;
        height: 60px;
        background-color: rgba(255,255,255,0.6);
        text-align: center;
        padding: 15px 0 0 0;
        display: inline-block;

        -moz-box-shadow: -3px 2px 10px white;
        -webkit-box-shadow: -3px 2px 10px white;
        box-shadow: -3px 2px 10px white;

    }

    .topChanged img{
        margin-left: -10px;
    }

    .pc_only{
        display: none;
    }

    .mobile_only{
        display: block;
    }


    .mobi_lang{

        width: fit-content;
        height: 41px;
        display: block;
        margin: auto;
    }

    .mobi_lang .langSelect{
        width: 28px;
        height: 25px;
        padding: 3px 0 0 0 ;

        text-align: center;
        margin: auto 4px;
        display: inline-block;


        border: 1px solid #9526b1;

        transition: background 0.3s ease-in-out;
    }

    .mobi_lang .langSelect a{
        color: white;
        width: 28px;
        height: 25px;

        display: block;
        text-decoration: none;

    }


    .mobi_lang .langSelect:hover{
        background: #6c17b1;
    }

    /*被選定的語言*/
    .langSelected{
        background: #6c17b1;
    }
    .langSelected a{
        color: white !important;
    }


}