@charset "UTF-8";
body, html {
    margin: 0px;
    border: 0px;
    padding: 0px;
    font-family: 'Roboto', sans-serif;
}
#logo_tittle {
    width: 200px;
    height: 233px;
    background-image: url(../../src/image/logo.jpg);
    background-size: cover;
    margin-top: 30px;
    margin-bottom: 40px;
    float: right;
}
.column {
    z-index: 1000;
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-width: 1000px) {
    .column {
        width: 223px;
        height: 100%;
        text-align: left;
        float: right;
        position: relative;
        right: 0px;

    }
    #logo_tittle h1 {
        font-size: 21px;
        opacity: 0;
    }
    .column div.butten {
        margin-top: 25px;
        margin-bottom: 15px;
        margin-left: 45px;
    }
    /*按鈕文字變色*/
    .column a {
        text-decoration: none;
        color: #696973;
    }
    .column a:hover {
        text-decoration: none;
        color: #DD5C5E;/*	-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera *//*	animation: mymove 5s infinite;*/
    }
}

/* #### Tablets Portrait or Landscape #### */
@media screen and (min-width: 920px) and (max-width: 1000px) {
    #logo_tittle {
        height: 0px;
        background-image: url(../../src/image/logo.jpg);
        background-size: cover;
        visibility: hidden;
        position: absolute;

    }
    .column {
        width: 100%;
        height: 50px;
        text-align: left;
        margin: 0 auto;
        z-index: 1000;
        position: fixed;
        background: white;
        top: 0;
        line-height: 30px;
    }
    #logo_tittle h1 {
        font-size: 18px;
        opacity: 0;
    }
    .column div.butten {
        margin: 13px;
        float: left;
    }
    /*按鈕文字變色*/
    .column a {
        font-size: 18px;
        text-decoration: none;
        color: #696973;
    }
    .column a:hover {
        text-decoration: none;
        color: #DD5C5E;/*	-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera *//*	animation: mymove 5s infinite;*/
    }

}

@media screen and (min-width: 268px) and (max-width: 468px) {
    #logo_tittle {
        display:none;
    }
    .column {
        width: 100%;
        height: 50px;
        text-align: left;
        margin: 0 auto;
        z-index: 1000;
        position: fixed;
        background: white;
        top: 0;
        line-height: 30px;
    }
    /*按鈕文字變色*/
    .column a {
        font-size: 18px;
        text-decoration: none;
        color: #696973;
    }
    .column a:hover {
        text-decoration: none;
        color: #DD5C5E;/*	-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera *//*	animation: mymove 5s infinite;*/
    }
}
/* #### Tablets Portrait or Landscape #### */
@media screen and (min-width: 468px) and (max-width: 920px) {
    #logo_tittle {
        height: 0px;
        background-image: url(../../src/image/logo.jpg);
        background-size: cover;
        visibility: hidden;
        position: absolute;
    }
    .column {
        width: 100%;
        height: 50px;
        text-align: left;
        margin: 0 auto;
        z-index: 1000;
        position: fixed;
        background: white;
        top: 0;
    }
    #logo_tittle h1 {
        font-size: 18px;
        opacity: 0;
    }
    .column div.butten {
        margin: 13px;
        float: left;
    }
    /*按鈕文字變色*/
    .column a {
        font-size: 18px;
        text-decoration: none;
        color: #696973;
    }
    .column a:hover {
        text-decoration: none;
        color: #DD5C5E;/*	-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera *//*	animation: mymove 5s infinite;*/
    }
    .menu_nav{
        -moz-box-shadow:0px 8px 12px -6px rgba(0%,0%,0%,0.2);
        -webkit-box-shadow:0px 8px 12px -6px rgba(0%,0%,0%,0.2);
        box-shadow:0px 8px 12px -6px rgba(0%,0%,0%,0.2);
    }
    .column>li>.language{
        font-size: 8px;
        width: 55px;
        margin: 0px;
        float: left;


    }
}


/* #### iPhone 6 and 6 plus Portrait or Landscape #### */
@media (min-device-height: 667px) and (min-device-width: 375px) and (-webkit-min-device-pixel-ratio: 3) {
    #logo_tittle {
        height: 0px;
        background-image: url(../../src/image/logo.jpg);
        background-size: cover;
        visibility: hidden;
        position: absolute;
    }
    .column {
        width: 700px;
        height: 7%;
        text-align: left;
        margin: 0 auto;
    }
    #logo_tittle h1 {
        font-size: 18px;
        opacity: 0;
    }
    .column div.butten {
        margin: 13px;
        float: left;
    }
    /*按鈕文字變色*/
    .column a {
        font-size: 18px;
        text-decoration: none;
        color: #696973;
    }
    .column a:hover {
        text-decoration: none;
        color: #DD5C5E;/*	-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera *//*	animation: mymove 5s infinite;*/
    }
    .menu_nav{
        -moz-box-shadow:0px 8px 12px -6px rgba(0%,0%,0%,0.2);
        -webkit-box-shadow:0px 8px 12px -6px rgba(0%,0%,0%,0.2);
        box-shadow:0px 8px 12px -6px rgba(0%,0%,0%,0.2);
    }
}