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

/* page */
#page { height: 100%; width: 100%; }
#page .login-panel { background-color: #f7f8f9; border-radius: 5px; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.25); bottom: 30px; height: 470px; position: absolute; left: 55%; top: 50px; width: 450px; z-index: 50; }
#page .login-panel .login-inner { margin: 0px auto; width: 400px; }
#page .login-panel .header { padding: 40px 0px 30px 0px; }
#page .login-panel .header .logo { background: url(/images/logo.png) no-repeat center; background-size: cover; display: none; float: left; height: 48px; margin: 3px 0px 10px 10px; width: 48px; }
#page .login-panel .header .name { color: #000; display: none; font-size: 19px; font-weight: bold; float: left; margin: 0px 0px 10px 10px; }
#page .login-panel .title { color: #000; font-size: 20px; font-weight: bold; height: 24px; padding: 10px 10px 20px 10px; }
#page .login-panel .title .loading-box { background: #fff url(/images/default/loading.gif) center no-repeat; height: 24px; width: 24px; }
#page .login-panel .apps { background-color: transparent; bottom: 10px; padding: 10px; position: absolute; width: 330px; }
#page .back-panel { background-size: cover; box-shadow: inset -10px -30px 30px rgba(0, 0, 0, 0.15); bottom: 0px; min-height: 500px; overflow: hidden; position: fixed; right: 0px; top: 0px; width: 100%; z-index: 20; }
#page .back-panel.picture-01 { background: #f7f8f9 url(/images/default/bg-front-01.jpg) no-repeat center; background-size: cover; }
#page .back-panel.picture-02 { background: #f7f8f9 url(/images/default/bg-front-02.jpg) no-repeat center; background-size: cover; }
#page .back-panel.picture-03 { background: #f7f8f9 url(/images/default/bg-front-03.jpg) no-repeat center; background-size: cover; }
#page .back-panel.picture-04 { background: #f7f8f9 url(/images/default/bg-front-04.jpg) no-repeat center; background-size: cover; }
#page .back-panel.picture-05 { background: #f7f8f9 url(/images/default/bg-front-05.jpg) no-repeat center; background-size: cover; }
#page .back-panel .play { background-size: cover; bottom: 0px; left: 0px; min-height: 100%; overflow: hidden; position: fixed; right: 0px; top: 0px; width: 100%; z-index: 30; }
#page .header-panel { background-color: rgba(255, 255, 255, 0.95); height: 40vh; left: 0px; position: fixed; right: 0px; top: 0px; width: 100%; z-index: 40; }
#page .header-panel .header-inner { left: 15%; position: absolute; top: 120px; }
#page .header-panel .header-inner .logo { background: url(/images/logo.png) no-repeat center; background-size: cover; float: left; height: 100px; width: 100px; }
#page .header-panel .header-inner .name { color: #000; font-size: 32px; font-weight: bold; float: left; margin: 5px 0px 0px 20px; }
#page .line-tp { border-top: solid 1px #b9b9b9; }

/* footer */
#footer { background-color: #f5f7f9; bottom: 0px; color: #777; font-size: 11px; left: 0px; padding: 20px 0px; position: absolute; right: 0px; width: 100%; z-index: 30; }
#footer .left { float: left; padding-left: 15%; }
#footer .right { float: right; padding-right: 10%; }
#footer .text { padding: 0px 5px; }
#footer .link { color: #777; font-size: 11px; margin: 0px 5px; transition: color 0.3s; }
#footer .link:hover { color: #3f51b5; }

@media (max-height: 550px)
{
    #page .back-panel { display: none; }
    #page .header-panel { background-color: #f5f7f9; }
    #page .login-panel { left: calc(50% - 225px); position: relative; right: calc(50% - 225px); }
    #page .login-panel .header .logo { display: inline; }
    #page .login-panel .header .name { display: inline; }
    #page .header-panel .header-inner { display: none; }
    #footer { background-color: #f5f7f9; bottom: -100px; color: #777; font-size: 11px; left: 0px; padding: 20px 0px; position: relative; right: 0px; width: 100%; z-index: 30; }
    #footer .left { float: left; padding-left: calc(50% - 425px); }
    #footer .right { float: right; padding-right: 5%; }
}

@media (max-width: 1250px)
{
    #page .back-panel { display: none; }
    #page .header-panel { background-color: #f5f7f9; }
    #page .login-panel { left: calc(50% - 225px); position: relative; right: calc(50% - 225px); }
    #page .login-panel .header .logo { display: inline; }
    #page .login-panel .header .name { display: inline; }
    #page .header-panel .header-inner { display: none; }
    #footer { background-color: #f5f7f9; bottom: -100px; color: #777; font-size: 11px; left: 0px; padding: 20px 0px; position: relative; right: 0px; width: 100%; z-index: 30; }
    #footer .left { float: left; padding-left: calc(50% - 425px); }
    #footer .right { float: right; padding-right: 5%; }
}

@media (max-width: 737px)
{
    #page .login-panel { bottom: 0px; box-shadow: none; left: 0px; height: 100%; right: 0px; top: 0px; width: 100%; }
    #page .login-panel .login-inner { margin: 0px auto; padding: 0px 20px; width: calc(100% - 40px); }
    #page .login-panel .header .logo { display: inline; }
    #page .login-panel .header .name { display: inline; }
    #page .back-panel { display: none; }
    #footer { display: none; }
}

@media (min-width: 2048px)
{
    #page .back-panel { display: none; }
    #page .header-panel { background-color: #f5f7f9; }
    #page .login-panel { left: calc(50% - 225px); position: relative; right: calc(50% - 225px); }
    #page .login-panel .header .logo { display: inline; }
    #page .login-panel .header .name { display: inline; }
    #page .header-panel .header-inner { display: none; }
    #footer { background-color: #f5f7f9; bottom: -100px; color: #777; font-size: 11px; left: 0px; padding: 20px 0px; position: relative; right: 0px; width: 100%; z-index: 30; }
    #footer .left { float: left; padding-left: calc(50% - 425px); }
    #footer .right { float: right; padding-right: 5%; }
}