* {font-family: Verdana, Arial, LiHei Pro, Microsoft YaHei, Microsoft JhengHei, Noto Sans CJK TC, sans-serif; margin: 0px; padding: 0px; letter-spacing: 0.15em;}
body {background-image: url(../images/ui_bg.jpg);}
.mainContainer {vertical-align: top; width: 100%;}
.mainContainer .header {width: 100%; background-color:#FAFAFA; border-bottom:1px solid #AAA; }
    /*background-image: url(../images/ui_title_bg.png);*/
.mainContainer .header .logo {padding: 10px;}
.mainContainer .content {width: 100%; background:rgba(100%,100%,100%,0.3); vertical-align:top;}
.mainContainer .footer { width:100%; background-color: #DFDFDF; text-align: center; }
.mainContainer .footer_min { display :none;}
.mainContainer .footer p {color: #555; font-size: 14px; letter-spacing: 0.22em; margin-bottom:0px; }
.mainContainer .footer p a:link {color:#555;}
.mainContainer .footer p a:visited {color: #555;}
.mainContainer .footer p a:hover {text-decoration:none; color: #555;}
.mainContainer .footer p a:active {color: #555;}

/*=========================================================================*/
.memberbox {background: rgba(255,255,255,0.8) none repeat scroll !important; position: absolute; display: inline-block; top: 0px; right: 0px; height: 26px; z-index: 5; font-size: 16px; padding-left: 5px; padding-right: 5px;}
.memberbox a { margin: 0 5px 0 5px; letter-spacing: 2px; text-decoration: none;}
.memberbox a:link {color: #000;}
.memberbox a:visited {color: #000;}
.memberbox a:hover {color: red;}
.memberbox a:active {color: #000;}
.sitemap {font-size: 16px; color: #000; margin-left: 5px;}
.sitemap a {margin: 0 5px 0 5px; text-decoration: none;}
.sitemap a:link {color: #000;}
.sitemap a:visited {color: #000;}
.sitemap a:hover {color: #000;}
.sitemap a:active {color: #000;}
.sitemap img {margin-top: -4px;}
/*=========================================================================*/

@media screen and (min-width: 1px) and (max-width: 930px) {
.mainContainer .footer_ordinary {display:none;}
.mainContainer .footer_min{display:inherit;}
}

@media screen and (min-width: 1px) and (max-width: 1080px) {
.mainContainer #ui_desktop_menu {display:none;}
.mainContainer #ui_mobile_menu {display:inherit;}
}
@media screen and (min-width: 1px) and (max-width: 620px) {
.mainContainer #ui_mobile_menu button{ width:100%; margin: 0px; }
}

#ui_mobile_menu {
    text-align: center;
    padding: 3px;
    width: 99.8%;
    display: none;
}

    #ui_mobile_menu button{
        margin-top:0px;
    }
    #ui_mobile_menu button:hover, #ui_desktop_menu button:hover {
        background-color:#b6b6b6;
        margin-top: 0px;
    }

#ui_desktop_menu {
    position: absolute;
    display: inline-block;
    text-align: right;
    top: 25px;
    right: 15px;
}
.mainContainer #ui_desktop_menu button {
    margin: 2px 6px 2px 6px;
}
.mainContainer #ui_mobile_menu button{margin: 2px;}



.footer_ordinary, .footer_min {
    padding: 20px;
}