/* default */
body { background-color: #f7f8f9; cursor: default; font-family: Arial; font-size: 11px; height: 100%; margin: 0px; width: 100%; }

/* page */
#page { height: 100%; width: 100%; }
#page .left-panel { background: #f7f8f9 url(/images/default/bg-front-01.jpg) no-repeat top; background-size: cover; box-shadow: inset -10px -30px 30px rgba(0, 0, 0, 0.15); bottom: 0px; left: 0px; min-height: 500px; overflow: hidden; position: fixed; top: 0px; width: calc(100% - 650px); z-index: 20; }
#page .left-panel.picture-02 { background: #f7f8f9 url(/images/default/bg-front-02.jpg) no-repeat center; background-size: cover; }
#page .left-panel.picture-03 { background: #f7f8f9 url(/images/default/bg-front-03.jpg) no-repeat center; background-size: cover; }
#page .left-panel.picture-04 { background: #f7f8f9 url(/images/default/bg-front-04.jpg) no-repeat center; background-size: cover; }
#page .left-panel.picture-05 { background: #f7f8f9 url(/images/default/bg-front-05.jpg) no-repeat center; background-size: cover; }
#page .left-panel.picture-06 { background: #f7f8f9 url(/images/default/bg-front-06.jpg) no-repeat center; background-size: cover; }
#page .left-panel.map { background: none !important; background-size: cover; box-shadow: inset -10px -30px 30px rgba(0, 0, 0, 0.15); bottom: 0px; left: 0px; min-height: 500px; overflow: hidden; position: fixed; top: 0px; width: calc(100% - 650px); z-index: 20; }
#page .right-panel { background-color: #f7f8f9; bottom: 0px; min-height: 500px; position: absolute; right: 0px; top: 0px; width: 650px; z-index: 10; }
#page .right-panel .inner { margin: 0px auto; width: 450px; }
#page .right-panel .header { padding: 40px 0px 30px 0px; }
#page .right-panel .header .logo { background: url(/images/logo.png) no-repeat center; background-size: cover; float: left; height: 48px; margin: 0px 0px 0px 10px; width: 48px; }
#page .right-panel .header .name { color: #000; font-size: 19px; font-weight: bold; float: left; margin: 2px 0px 10px 15px; }
#page .right-panel .title { color: #000; font-size: 20px; font-weight: bold; height: 24px; padding: 10px 10px 20px 10px; }
#page .right-panel .title .loading-box { background: #fff url(/images/default/loading.gif) center no-repeat; height: 24px; width: 24px; }
#page .right-panel .apps { background-color: #f7f8f9; bottom: 0px; padding: 10px 10px 20px 10px; position: fixed; width: 100%; }

@media (max-width: 737px)
{
    #page .left-panel { display: none; }
    #page .right-panel { padding: 0px 20px; width: calc(100% - 40px); }
    #page .right-panel .inner { margin: 0px auto; width: auto; }
    #footer { display: none; }
}

/* footer */
#footer { bottom: 0px; color: #fff; font-size: 11px; left: 10px; margin: 5px auto; padding: 5px 0px; position: fixed; text-shadow: 0px 0px 3px #000; width: 330px; z-index: 30; }
#footer .left { float: left; padding-left: 5px; }
#footer .right { float: right; padding-right: 5px; }
#footer .text { padding: 0px 5px; }
#footer .link { color: #777; font-size: 11px; margin: 0px 5px; transition: color 0.3s; }
#footer .link:hover { color: #3f51b5; }

@keyframes updown { 0% { background-position: top; } 50% { background-position: bottom; } 100% { background-position: top; } }