.AlertBox {
    width: 280px;
    height: 120px;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border-radius: 5px;
    border: 1px solid #333;
    background-color: #000;
    color: #FFF;
    text-align: center;
    padding: 10px;
    box-shadow: 0 0 15px #000
}

.AlertBox>.inner {
    position: relative;
    width: 100%;
    height: 100%
}

.AlertBox>.inner>div {
    position: absolute;
    left: 0;
    right: 0
}

.AlertBox>.inner>div.top {
    top: 10px;
    height: 60px
}

.AlertBox>.inner>div.bottom {
    bottom: 0;
    height: 30px
}

.AlertBox .btn.ok {
    background-color: #333;
    width: 70px;
    margin: auto
}

.AlertBox .btn.ok:hover {
    background-color: #555
}

.AlertBox .error {
    color: red
}

.BannerView {
    background-repeat: no-repeat;
    background-position: center center;
    display: none
}

#mainTopBanner {
    width: 100%;
    height: 264px;
    text-align: center
}

@media screen and (max-width: 639px) {
    #mainTopBanner {
        height: 200px;
        background-size: 960px 200px
    }
}

#mainTopBanner img {
    width: 100%;
    margin: auto;
    max-width: 1004px;
    max-height: 264px
}

#mainContentBanner {
    text-align: center
}

#mainContentBanner img {
    width: 100%;
    margin: auto;
    max-width: 950px;
    max-height: 250px
}

#mainSideBanner {
    margin: 0px auto;
    text-align: center
}

#mainSideBanner img {
    width: 100%;
    margin: auto;
    max-width: 280px;
    max-height: 233px
}

.BottomBar {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    flex-flow: column
}

.BottomBar .top {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    width: 100%;
    background-color: #242424;
    padding-top: 50px;
    padding-bottom: 55px
}

.BottomBar .top .sitemap {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    width: 65%;
    margin: 0 15px
}

.BottomBar .top .sitemap .item {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    flex-flow: column;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 24%
}

.BottomBar .top .sitemap .item.hide {
    display: none !important
}

.BottomBar .top .sitemap .item strong {
    color: #dcdcdc;
    font-size: 1.2em;
    margin-bottom: 15px
}

.BottomBar .top .sitemap .item a {
    display: block;
    padding: 5px 0;
    font-size: 1.05em;
    color: #999
}

.BottomBar .top .sitemap .item a.hide {
    display: none
}

.BottomBar .top .sns {
    width: 35%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    flex-flow: column;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center
}

.BottomBar .top .sns .eigaland {
    display: block;
    text-indent: -9999px;
    background-repeat: no-repeat;
    background-position: center top;
    background-image: url(../images/logos/app-icon-168x168.png);
    height: 90px;
    width: 90px;
    background-size: 100% auto;
    margin-bottom: 15px
}

.BottomBar .top .sns .subTitle {
    font-size: 1.2em;
    margin: 0 0 15px 0;
    white-space: nowrap
}

.BottomBar .top .sns .external {
    width: 180px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between
}

.BottomBar .top .sns .external .logo {
    width: 40px;
    height: 40px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden
}

.BottomBar .top .sns .external .logo:hover {
    background-position: 0 -40px
}

.BottomBar .top .sns .external.facebook {
    background-image: url(../images/sns/facebook.png)
}

.BottomBar .top .sns .external.youtube {
    background-image: url(../images/sns/youtube.png)
}

.BottomBar .top .sns .external.twitter {
    background-image: url(../images/sns/twitter.png)
}

.BottomBar .top .sns .external.instagram {
    background-image: url(../images/sns/instagram.png)
}

.BottomBar .top .sns .external.google {
    background-image: url(../images/sns/google-play@2x.png)
}

.BottomBar .bottom {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    flex-flow: column;
    background-color: #000;
    width: 100%;
    padding: 10px 5px 5px 5px
}

.BottomBar .bottom .copyright {
    padding: 5px
}

.BottomBar .bottom .extraLinks {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    flex-wrap: wrap;
    padding: 5px
}

.BottomBar .bottom .extraLinks a {
    display: block;
    padding: 5px 0;
    font-size: 12px;
    color: #dbdbdb;
    margin-right: 15px
}

.BottomBar .bottom .license {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 5px
}

.BottomBar .bottom .license .licenseJasrac {
    background-image: url(../images/jasrac.jpg);
    height: 35px;
    width: 35px;
    background-size: 100% auto;
    margin-right: 5px
}

.BottomBar .bottom .license p {
    display: block;
    padding: 5px 0;
    font-size: 12px;
    line-height: 1.5;
    color: #dbdbdb
}

.backgroundsize .BottomBar .logo.facebook {
    background-image: url(../images/sns/facebook@2x.png);
    background-size: 40px 80px
}

.backgroundsize .BottomBar .logo.youtube {
    background-image: url(../images/sns/youtube@2x.png);
    background-size: 40px 80px
}

.backgroundsize .BottomBar .logo.twitter {
    background-image: url(../images/sns/twitter@2x.png);
    background-size: 40px 80px
}

.backgroundsize .BottomBar .logo.instagram {
    background-image: url(../images/sns/instagram@2x.png);
    background-size: 40px 80px
}

@media screen and (max-width: 639px) {
    .BottomBar .top {
        -webkit-flex-flow: column;
        -moz-flex-flow: column;
        flex-flow: column;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        padding-top: 30px;
        padding-bottom: 30px
    }
    .BottomBar .top .sitemap {
        -ms-flex-wrap: wrap;
        -moz-flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 100%;
        margin-bottom: 15px
    }
    .BottomBar .top .sitemap .item {
        width: 50%;
        margin-bottom: 30px
    }
    .BottomBar .top .appButton {
        margin: 0 auto;
        display: inherit
    }
    .BottomBar .top .appButton .googlePlay {
        display: block;
        background: url(../images/logos/google-play@2x.png);
        background-size: 100% auto;
        background-position: center center;
        background-repeat: no-repeat;
        width: 165px;
        height: 75px;
        margin-top: 10px;
        cursor: pointer;
        margin-right: 5px
    }
    .BottomBar .top .appButton .appStore {
        display: block;
        background-image: url(../images/logos/app-store@2x.png);
        background-size: 100% auto;
        background-position: center center;
        background-repeat: no-repeat;
        width: 165px;
        height: 75px;
        margin-top: 10px;
        cursor: pointer;
        margin-left: 5px
    }
}

.BusyIcon {
    width: 50px;
    height: 50px;
    margin: auto;
    left: 0;
    top: 0;
    bottom: 0;
    right: 0;
    border-radius: 5px;
    border: 1px solid #333;
    background: #000 url(../images/busy.gif) center center no-repeat
}

.backgroundsize .BusyIcon {
    background-image: url(../images/busy@2x.gif);
    background-size: 16px 16px
}

.DefaultLayout ::-webkit-scrollbar {
    width: 8px
}

.DefaultLayout ::-webkit-scrollbar-track {
    background-color: #333
}

.DefaultLayout ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 0;
    border-radius: 0;
    background: #666
}

.DefaultLayout * {
    -webkit-tap-highlight-color: transparent
}

.DefaultLayout body {
    font-family: "Open Sans Light", Helvetica, Arial, sans-serif;
    font-size: 14px
}

.DefaultLayout #page {
    width: 100%;
    overflow: hidden
}

.DefaultLayout #page>div {
    width: 100%;
    position: relative
}

.DefaultLayout #page>.top {
    height: 55px
}

.DefaultLayout .btn {
    display: block;
    border: 0;
    border-radius: 4px;
    color: #FFF;
    text-align: center;
    width: 100%;
    padding: 10px 5px;
    text-shadow: 1px 1px 1px #333;
    font-size: 12px;
    cursor: pointer
}

.DefaultLayout .btn:hover,
.DefaultLayout .btn:active {
    text-decoration: none
}

.DefaultLayout input[type=submit].btn {
    -webkit-appearance: none;
    -moz-appearance: none
}

.DefaultLayout .scrollable {
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch
}

.DefaultLayout #page .topBanner {
    width: 100%;
    max-width: 1004px;
    margin: auto;
    overflow: hidden;
    font-size: 0;
    text-align: center
}

.DefaultLayout #page .topBanner div {
    padding-bottom: calc(250 / 950 * 100%);
    height: 0;
    position: relative
}

.DefaultLayout #page .topBanner div iframe {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0
}

@media screen and (max-width: 799px) {
    .DefaultLayout #page>.banner {
        max-height: 80px
    }
}

.DefaultLayout select {
    border: none;
    border-radius: 0;
    border: 1px solid #222;
    background: #323232 url(../images/form/select.png) 5px center no-repeat;
    color: #777;
    cursor: pointer;
    text-indent: 20px;
    -webkit-appearance: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box
}

.DefaultLayout.backgroundsize select {
    background-image: url(../images/form/select@2x.png);
    background-size: 24px 13px
}

.DefaultLayout.firefox select {
    text-indent: 8px;
    text-overflow: ''
}

.DefaultLayout.ie select {
    background-position: right center
}

.DefaultLayout form .form-status>* {
    display: none;
    width: 100%;
    height: 24px
}

.DefaultLayout form.busy .form-status>.busy {
    display: block;
    background: url(../images/busy.gif) center center no-repeat
}

.DefaultLayout form.error .form-status>.error {
    display: block;
    color: #900
}

.DefaultLayout form.fail .form-status>.fail {
    display: block;
    color: #900
}

.DefaultLayout .dataStatus {
    width: 100%;
    overflow: hidden
}

.DefaultLayout .dataStatus.hide {
    display: none
}

.DefaultLayout .dataStatus>* {
    margin: 20px;
    color: #555;
    display: none
}

.DefaultLayout .dataStatus .busy {
    width: 26px;
    height: 26px;
    border-radius: 5px;
    background: #000 url(../images/busy.gif) center center no-repeat;
    margin: 10px 0
}

.DefaultLayout .busy .dataStatus .busy {
    display: block
}

.DefaultLayout .noData .dataStatus .noData {
    display: block
}

.DefaultLayout .noData>li {
    margin: 5px 0 5px 30px
}

.DefaultLayout .noData>p {
    margin: 5px 0
}

.DefaultLayout .notOpen .dataStatus .notOpen {
    display: block
}

.DefaultLayout.backgroundsize .dataStatus .busy {
    background-image: url(../images/busy@2x.gif);
    background-size: 16px 16px
}

@media screen and (max-width: 639px) {
    .DefaultLayout .dataStatus .busy {
        margin: 10px auto
    }
    .DefaultLayout .dataStatus .noData {
        text-align: center
    }
    .DefaultLayout .dataStatus .notOpen {
        text-align: center
    }
}

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box
}

body {
    position: relative;
    background-color: #000;
    color: #999
}

a {
    cursor: pointer;
    text-decoration: none
}

a:hover,
a:active {
    text-decoration: underline
}

.clear {
    clear: both
}

.template,
.seo {
    display: none
}

label {
    font-weight: normal
}

label.error {
    color: #900;
    display: block;
    margin-top: 3px
}

.placeholder {
    color: #666
}

.table {
    display: table;
    width: 100%
}

.table>.head {
    display: table-header-group
}

.table>.body {
    display: table-row-group
}

.table>.foot {
    display: table-footer-group
}

.table>.row {
    display: table-row
}

.table>.row>.cell {
    display: table-cell;
    overflow: hidden
}

.table>.row>.cell input,
.table>.row>.cell textarea,
.table>.row>.cell select {
    width: 100%;
    padding-right: 0
}

.head-table {
    display: table;
    width: 100%
}

.head-table>.head {
    display: table-header-group
}

.head-table>.body {
    display: table-row-group
}

.head-table>.foot {
    display: table-footer-group
}

.head-table>.head-row {
    display: table-row
}

.head-table>.head-row>.head-cell {
    display: table-cell;
    overflow: hidden
}

.head-table>.head-row>.head-cell input,
.head-table>.head-row>.head-cell textarea,
.head-table>.head-row>.head-cell select {
    width: 100%;
    padding-right: 0
}

select::-ms-expand {
    display: none
}

input[type=text],
input[type=search],
input[type=password],
input[type=email],
input[type=file],
input[type=number],
input[type=url],
input[type=date],
select,
textarea {
    -webkit-user-select: auto !important;
    user-select: auto !important
}

.hwa {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000
}

@-webkit-keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-webkit-keyframes fadeOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

@keyframes fadeOut {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.ImageViewer {
    width: 90%;
    height: 90%;
    text-align: center;
    background-color: #000;
    border-radius: 5px;
    border: 1px solid #333
}

.ImageViewer>.inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.ImageViewer>.inner>div {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%
}

.ImageViewer>.inner>div.top {
    top: 0;
    height: 40px
}

.ImageViewer>.inner>div.mid {
    top: 40px;
    bottom: 60px
}

.ImageViewer>.inner>div.bottom {
    bottom: 0;
    height: 60px
}

.ImageViewer .icon.close {
    display: block;
    float: right;
    text-indent: -9999px;
    background: url(../images/close-overlay.png) center center no-repeat;
    width: 30px;
    height: 30px;
    margin: 5px 10px 0 0
}

.ImageViewer.loading .imgContainer {
    min-width: 50px;
    min-height: 50px;
    background: url(../images/busy.gif) center center no-repeat
}

.ImageViewer .imgContainer img {
    border: 1px solid #333;
    animation: fadeIn 0.5s;
    -webkit-animation: fadeIn 0.5s
}

.ImageViewer .imgContainer img {
    -webkit-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s;
    -ms-transition: all linear 0.2s;
    transition: all linear 0.2s
}

.ImageViewer .stacks {
    display: none;
    overflow: hidden
}

.ImageViewer.multiple .stacks {
    display: block;
    width: 100%;
    text-align: center
}

.ImageViewer.multiple .stacks img {
    margin: auto;
    text-align: center;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    border: 2px solid transparent;
    margin: 5px;
    cursor: pointer
}

.ImageViewer.multiple .stacks img {
    -webkit-transition: all linear 0.2s;
    -moz-transition: all linear 0.2s;
    -ms-transition: all linear 0.2s;
    transition: all linear 0.2s
}

.ImageViewer.multiple .stacks img.actived,
.ImageViewer.multiple .stacks img:hover {
    border-color: #CCC
}

.LoginBox {
    position: absolute;
    background-color: #000;
    width: 300px;
    height: 470px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #333;
    box-shadow: 0 0 15px #000
}

.LoginBox>.inner>.bottom {
    padding: 10px 20px
}

.LoginBox .icon.close {
    float: right;
    margin: 5px 10px 0 0
}

.LoginBox .btn.facebook {
    margin-bottom: 2px;
    background: #7db9e8;
    background: -moz-linear-gradient(top, #7db9e8 0%, #2989d8 10%, #1e5799 98%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7db9e8), color-stop(10%, #2989d8), color-stop(98%, #1e5799));
    background: -webkit-linear-gradient(top, #7db9e8 0%, #2989d8 10%, #1e5799 98%);
    background: -o-linear-gradient(top, #7db9e8 0%, #2989d8 10%, #1e5799 98%);
    background: -ms-linear-gradient(top, #7db9e8 0%, #2989d8 10%, #1e5799 98%);
    background: linear-gradient(to bottom, #7db9e8 0%, #2989d8 10%, #1e5799 98%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7db9e8', endColorstr='#1e5799', GradientType=0)
}

.LoginBox .btn.facebook:active,
.LoginBox .btn.facebook:hover {
    background: #8dc2eb;
    background: -moz-linear-gradient(top, #8dc2eb 0%, #256bbb 11%, #256bbb 97%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8dc2eb), color-stop(11%, #256bbb), color-stop(97%, #256bbb));
    background: -webkit-linear-gradient(top, #8dc2eb 0%, #256bbb 11%, #256bbb 97%);
    background: -o-linear-gradient(top, #8dc2eb 0%, #256bbb 11%, #256bbb 97%);
    background: -ms-linear-gradient(top, #8dc2eb 0%, #256bbb 11%, #256bbb 97%);
    background: linear-gradient(to bottom, #8dc2eb 0%, #256bbb 11%, #256bbb 97%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#8dc2eb', endColorstr='#256bbb', GradientType=0)
}

.LoginBox .btn.twitter {
    margin-bottom: 2px;
    background: #92d0ff;
    background: -moz-linear-gradient(top, #92d0ff 0%, #00ACEE 10%, #00ACEE 98%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #92D0FF), color-stop(10%, #00ACEE), color-stop(98%, #00ACEE));
    background: -webkit-linear-gradient(top, #92D0FF 0%, #00ACEE 10%, #00ACEE 98%);
    background: -o-linear-gradient(top, #92D0FF 0%, #00ACEE 10%, #00ACEE 98%);
    background: -ms-linear-gradient(top, #92D0FF 0%, #00ACEE 10%, #00ACEE 98%);
    background: linear-gradient(to bottom, #92d0ff 0%, #00acee 10%, #00acee 98%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#92D0FF', endColorstr='#00ACEE', GradientType=0)
}

.LoginBox .btn.twitter:active,
.LoginBox .btn.twitter:hover {
    background: #84B5DB;
    background: -moz-linear-gradient(top, #84B5DB 0%, #00A0DD 11%, #00A0DD 97%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #84B5DB), color-stop(11%, #00A0DD), color-stop(97%, #00A0DD));
    background: -webkit-linear-gradient(top, #84B5DB 0%, #00A0DD 11%, #00A0DD 97%);
    background: -o-linear-gradient(top, #84B5DB 0%, #00A0DD 11%, #00A0DD 97%);
    background: -ms-linear-gradient(top, #84B5DB 0%, #00A0DD 11%, #00A0DD 97%);
    background: linear-gradient(to bottom, #84b5db 0%, #00a0dd 11%, #00a0dd 97%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#84B5DB', endColorstr='#00A0DD', GradientType=0)
}

.LoginBox .description {
    color: #ffffff;
    line-height: 1.7em;
    font-size: 1.1em
}

.LoginBox .or {
    background: url(../images/666666.gif) center center repeat-x;
    text-align: center;
    padding: 5px;
    margin: 10px 0
}

.LoginBox .or label {
    padding: 0 8px;
    background-color: #000
}

.LoginBox .bottom a {
    display: block;
    height: 50px;
    line-height: 30px;
    background-size: 158px 50px;
    background-repeat: no-repeat;
    background-position: center
}

.LoginBox .bottom a.ios {
    background-image: url(../images/appstore.png)
}

.LoginBox .bottom a.android {
    background-image: url(../images/googleplay.png)
}

.LoginBox .row {
    margin: 10px 0
}

.LoginBox .input.text {
    width: 100%;
    border: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
    font-size: 14px;
    box-shadow: inset 1px 1px 3px #666
}

.LoginBox .btn.submit {
    margin-top: 12px;
    background: #ff5e61;
    background: -moz-linear-gradient(top, #ff5e61 0%, #8f0222 8%, #6d0019 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff5e61), color-stop(8%, #8f0222), color-stop(100%, #6d0019));
    background: -webkit-linear-gradient(top, #ff5e61 0%, #8f0222 8%, #6d0019 100%);
    background: -o-linear-gradient(top, #ff5e61 0%, #8f0222 8%, #6d0019 100%);
    background: -ms-linear-gradient(top, #ff5e61 0%, #8f0222 8%, #6d0019 100%);
    background: linear-gradient(to bottom, #ff5e61 0%, #8f0222 8%, #6d0019 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff5e61', endColorstr='#6d0019', GradientType=0)
}

.LoginBox .btn.submit:active,
.LoginBox .btn.submit:hover {
    background: #ff4144;
    background: -moz-linear-gradient(top, #ff4144 0%, #bb032e 8%, #a80027 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ff4144), color-stop(8%, #bb032e), color-stop(100%, #a80027));
    background: -webkit-linear-gradient(top, #ff4144 0%, #bb032e 8%, #a80027 100%);
    background: -o-linear-gradient(top, #ff4144 0%, #bb032e 8%, #a80027 100%);
    background: -ms-linear-gradient(top, #ff4144 0%, #bb032e 8%, #a80027 100%);
    background: linear-gradient(to bottom, #ff4144 0%, #bb032e 8%, #a80027 100%);
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ff4144', endColorstr='#a80027', GradientType=0)
}

.LoginBox .foot a {
    font-size: 12px;
    text-decoration: underline;
    color: #666;
    height: 30px;
    text-align: center
}

.LoginBox .foot a:hover {
    text-decoration: none;
    color: #CCC
}

.LoginBox .form-status .error,
.LoginBox .form-status .fail {
    margin-top: 5px
}

.LoginBox .registration {
    color: #FFFF00;
    text-decoration: underline;
    text-align: center;
    line-height: 20px !important;
    height: 20px
}

.LoginBox .registration:hover {
    cursor: pointer;
    text-decoration: none;
    color: #d3d300
}

@media screen and (max-width: 639px) {
    .LoginBox {
        margin: auto;
        left: 0 !important;
        top: 0 !important;
        bottom: 0;
        right: 0;
        -moz-border-radius-topleft: 5px;
        -webkit-border-top-left-radius: 5px;
        border-top-left-radius: 5px;
        -moz-border-radius-topright: 5px;
        -webkit-border-top-right-radius: 5px;
        border-top-right-radius: 5px;
        border-top: 1px solid #333
    }
}

.RegistrationBox {
    position: absolute;
    background-color: #000;
    width: 300px;
    height: 500px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #333;
    box-shadow: 0 0 15px #000
}

.RegistrationBox .inner .top {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    margin: 5px 0 20px 0
}

.RegistrationBox .inner .top .close {
    width: 100%
}

.RegistrationBox .inner .top h1 {
    width: 100%;
    color: #e2e2e2;
    text-align: center;
    font-size: 17px;
    line-height: 15px
}

.RegistrationBox .middle form {
    border-top: 1px solid #acb0ab
}

.RegistrationBox .middle form .form-error {
    color: #d6d227
}

.RegistrationBox .middle form .row {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    background-color: #414141;
    height: 50px;
    width: 100%
}

.RegistrationBox .middle form .row .label {
    width: 40%;
    line-height: 45px;
    border-bottom: 1px solid #acb0ab;
    margin-left: 10px;
    font-size: 10px
}

.RegistrationBox .middle form .row .input-holder {
    width: 60%;
    border-width: 0px 0px 1px 0px;
    border-style: solid;
    border-color: #acb0ab
}

.RegistrationBox .middle form .row .input-holder .input {
    width: 100%;
    float: right;
    line-height: 43px;
    border: none;
    text-align: right;
    background-color: #414141;
    padding-right: 7px;
    color: #959595
}

.RegistrationBox .middle form .row .nickname {
    border-bottom: 0
}

.RegistrationBox .middle form .row-1 {
    border-bottom: 1px solid #acb0ab
}

.RegistrationBox .middle form .row-2 {
    background-color: transparent;
    height: 25px
}

.RegistrationBox .middle .additional {
    margin-top: 25px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    font-size: 12px
}

.RegistrationBox .middle .additional label {
    width: 100%;
    margin-left: 5px
}

.RegistrationBox .middle .additional a {
    color: #d7dcd6;
    text-decoration: underline
}

.RegistrationBox .middle .submit {
    font-size: 14px;
    color: #FFD800;
    margin-top: 25px;
    margin-right: 15px;
    float: right
}

.RegistrationBox .middle .form-status .error,
.RegistrationBox .middle .form-status .fail {
    margin-top: 5px
}

.MoviePoster {
    width: 100%;
    height: 100%;
    border: 1px solid #363636;
    box-shadow: 0px 0px 2px 2px rgba(9, 9, 9, 0.75);
    background: url(../images/scrollpane/bg-normal.png) repeat;
    display: block;
    cursor: pointer
}

.MoviePoster .thumbnail {
    display: block;
    background: #636363 url(../images/scrollpane/watermark-68x68x34.png) center center no-repeat;
    width: 180px;
    height: 265px;
    margin: 7px auto 0 auto;
    border: none;
    position: relative
}

.MoviePoster .thumbnail img {
    width: 180px;
    height: 265px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s
}

.MoviePoster .thumbnail div.btnPlay {
    background: url(../images/btn-play.png) center center no-repeat;
    position: absolute;
    width: 29px;
    height: 29px;
    bottom: 10px;
    right: 10px;
    border: none;
    cursor: pointer;
    z-index: 1
}

.MoviePoster .promotion {
    background: url(../images/special_highlight_poster.png) no-repeat;
    display: none;
    width: 30px;
    height: 30px;
    z-index: 99;
    float: left;
    position: absolute;
    margin-left: 5px;
    margin-top: 3px
}

.MoviePoster .name {
    width: 100%;
    height: 52px;
    padding: 7px 15px;
    overflow: hidden;
    font-size: 1em;
    color: #FFF;
    line-height: 1.4em;
    text-align: center
}

.MoviePoster .counter {
    width: 100%;
    padding: 5px;
    height: 51px
}

.MoviePoster .counter.hide {
    display: none
}

.MoviePoster .counter .ratingWrapper {
    float: left;
    height: 40px;
    margin-top: 5px
}

.MoviePoster .counter .ratingWrapper .rating .icon {
    background: url(../images/scrollpane/star_white.png) left top no-repeat;
    display: block;
    width: 20px;
    height: 20px;
    vertical-align: text-top;
    margin-top: 5px;
    float: left
}

.MoviePoster .counter .ratingWrapper .rating .value {
    color: #FFD800;
    display: inline-block;
    margin-left: 10px;
    font-size: 32px;
    font-weight: bold;
    font-family: Helvetica, Arial, sans-serif
}

.MoviePoster .counter .commentWrapper {
    float: left;
    margin-right: 15px
}

.MoviePoster .counter .commentWrapper .comment .icon {
    background: url(../images/scrollpane/comment_white.png) left top no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 15px
}

.MoviePoster .counter .commentWrapper .comment .value {
    display: inline-block;
    margin-left: 10px;
    color: #FFD800
}

.MoviePoster .counter .commentWrapper .like .icon {
    background: url(../images/scrollpane/heart_white.png) left top no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 15px
}

.MoviePoster .counter .commentWrapper .like .value {
    display: inline-block;
    margin-left: 10px;
    color: #FFD800
}

.MoviePoster .open {
    width: 100%;
    padding: 5px 10px;
    text-align: center
}

.MoviePoster .open.hide {
    display: none
}

:hover>.MoviePoster {
    background: url(../images/scrollpane/bg-active.png) repeat
}

.backgroundsize .MoviePoster .promotion {
    background: url(../images/special_highlight_poster@2x.png) left top no-repeat;
    -moz-background-size: 30px 30px;
    -o-background-size: 30px 30px;
    -webkit-background-size: 30px 30px;
    background-size: 30px 30px
}

.backgroundsize .MoviePoster .counter .ratingWrapper {
    float: left
}

.backgroundsize .MoviePoster .counter .ratingWrapper .rating .icon {
    background: url(../images/scrollpane/star_white@2x.png) left top no-repeat;
    -moz-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px
}

.backgroundsize .MoviePoster .counter .commentWrapper {
    float: left;
    margin-right: 15px
}

.backgroundsize .MoviePoster .counter .commentWrapper .comment .icon {
    background: url(../images/scrollpane/comment_white@2x.png) left top no-repeat;
    -moz-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px
}

.backgroundsize .MoviePoster .counter .commentWrapper .like .icon {
    background: url(../images/scrollpane/heart_white@2x.png) left top no-repeat;
    -moz-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px
}

.backgroundsize .MoviePoster .thumbnail {
    background-image: url(../images/scrollpane/watermark-68x68.png);
    -moz-background-size: 68px 68px;
    -o-background-size: 68px 68px;
    -webkit-background-size: 68px 68px;
    background-size: 68px 68px
}

@media screen and (max-width: 639px) {
    .MoviePoster div.btnPlay {
        bottom: 25px !important;
        right: 13px !important
    }
    .counter {
        left: 30% !important;
        top: 43px !important
    }
}

#overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 99999
}

#overlay.hide {
    display: none
}

#overlay>.inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

#overlay>.inner>.back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: #000;
    opacity: 0.8;
    filter: alpha(opacity=80)
}

#overlay.transparent>.inner>.back {
    opacity: 0;
    filter: alpha(opacity=0)
}

#overlay>.inner>.front {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden
}

#overlay.defaultPosition>.inner>.front>* {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto
}

#overlay a.icon.close {
    display: block;
    text-indent: -9999px;
    background: url(../images/close-overlay.png) center center no-repeat;
    width: 30px;
    height: 30px
}

.backgroundsize #overlay a.icon.close {
    background-image: url(../images/close-overlay@2x.png);
    background-size: 19px 19px
}

.smartBanner {
    height: 80px
}

.smartBanner .downloadBanner {
    display: block;
    position: fixed;
    width: 100%;
    z-index: 999
}

.smartBanner .downloadBanner .container {
    height: 80px;
    width: 100%;
    background: #e0e0e0;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: space-evenly;
    -moz-justify-content: space-evenly;
    justify-content: space-evenly;
    align-items: center
}

.smartBanner .downloadBanner .container .close {
    line-height: 13px;
    width: 7%;
    height: 20px;
    display: inline-block;
    vertical-align: middle;
    font-family: 'ArialRoundedMTBold', Arial;
    font-size: 20px;
    text-align: center;
    color: #888;
    text-decoration: none;
    border: 0;
    border-radius: 14px;
    -webkit-font-smoothing: subpixel-antialiased
}

.smartBanner .downloadBanner .container .icon {
    background-image: url(../images/smart-app-banner/logo.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
    width: 57px;
    height: 57px;
    margin-right: 10px
}

.smartBanner .downloadBanner .container .bannerContent {
    width: 61%
}

.smartBanner .downloadBanner .container .bannerContent .title {
    font-weight: 900;
    font-size: 1em;
    line-height: 18px;
    color: #444444;
    letter-spacing: -1px;
    font-family: sans-serif
}

.smartBanner .downloadBanner .container .bannerContent .content {
    font-size: 0.8em;
    line-height: 16px;
    color: #444444;
    letter-spacing: -0.5px;
    text-decoration: none
}

.smartBanner .downloadBanner .container .bannerContent .rating {
    background-image: url(../images/smart-app-banner/rate-star.png);
    background-position: center center;
    background-size: 100% auto;
    background-repeat: no-repeat;
    width: 70px;
    height: 20px
}

.smartBanner .downloadBanner .container .open {
    text-align: center;
    width: 10%;
    font-weight: bold;
    color: dodgerblue;
    font-size: 1.1em;
    text-decoration: none
}

.TabBar {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    clear: both;
    -webkit-tap-highlight-color: transparent
}

.TabBar * {
    -webkit-tap-highlight-color: transparent
}

.TabBar>.item {
    display: block;
    float: left;
    color: #777;
    text-decoration: none;
    padding: 20px 20px 10px 20px;
    border-bottom: 3px solid #262626;
    font-size: 1.3em
}

.TabBar>.item:hover {
    color: #666;
    text-decoration: none;
    border-bottom: 3px solid #666
}

.TabBar>.item.selected {
    color: #FFD800;
    text-decoration: none;
    border-bottom: 3px solid #FFD800
}

.TabBar>.item.hide {
    display: none
}

@media screen and (max-width: 639px) {
    .TabBar {
        display: -webkit-flex;
        display: flex;
        width: 100%
    }
    .TabBar>.item {
        font-size: 1em;
        margin: auto;
        text-align: center;
        -webkit-flex: 1;
        flex: 1
    }
}

.TopBar {
    background-color: #000;
    width: 100%;
    height: 55px;
    border-bottom: 1px solid #333
}

.TopBar * {
    -webkit-user-select: none;
    user-select: none
}

.TopBar>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding-left: 10px;
    padding-right: 10px
}

.TopBar>.inner>div {
    position: absolute
}

.TopBar>.inner>.left {
    width: auto;
    white-space: nowrap
}

.TopBar>.inner>.left ul#nav {
    list-style: none
}

.TopBar>.inner>.left ul#nav li {
    float: left;
    position: relative;
    text-align: center;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.TopBar>.inner>.left ul#nav li.current a {
    background: #ddd
}

.TopBar>.inner>.left ul#nav li.current a:hover {
    background: #888
}

.TopBar>.inner>.left ul#nav li ul.sub {
    display: none;
    position: absolute;
    top: 54px;
    left: -3px;
    font-weight: normal;
    padding: 0;
    z-index: 1;
    border-bottom: 1px solid #333;
    border-left: 1px solid #333;
    border-right: 1px solid #333;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px
}

.TopBar>.inner>.left ul#nav li ul.sub li {
    color: #ccc;
    border-radius: 5px
}

.TopBar>.inner>.left ul#nav li ul.sub li div {
    height: 38px;
    background-color: #000
}

.TopBar>.inner>.left ul#nav li ul.sub li div a {
    display: block;
    width: 150px;
    margin: 0;
    padding: 2px 10px;
    line-height: 34px;
    text-align: left
}

.TopBar>.inner>.left ul#nav li ul.sub li div a:hover {
    background-color: #222;
    border-radius: 5px;
    width: 146px;
    margin: 0 2px;
    padding-left: 8px
}

.TopBar>.inner>.left ul#nav li ul.sub li:last-child div {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    height: 40px
}

.TopBar>.inner>.left ul#nav li:hover ul.sub,
.TopBar>.inner>.left ul#nav li.over ul.sub {
    display: block
}

.TopBar>.inner>.right {
    right: 0
}

.TopBar>.inner>.navdiv {
    display: none
}

.TopBar>.inner>.navdiv .navbar {
    background-color: #000;
    height: 50px
}

.TopBar>.inner>.navdiv .navbar .nav-list {
    z-index: 0;
    display: block;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s
}

.TopBar>.inner>.navdiv .navbar .nav-list li {
    list-style: none;
    float: left;
    margin-left: 30px;
    width: 100%
}

.TopBar>.inner>.navdiv .navbar .nav-list a {
    color: #ccc;
    line-height: 64px;
    text-decoration-line: none
}

.TopBar>.inner>.navdiv .navbar .nav-list a:hover {
    color: #fff
}

.TopBar>.inner>.navdiv .navbar .menu-icon div {
    width: 16px;
    height: 16px;
    background-size: cover
}

.TopBar>.inner>.navdiv .navbar .menu-icon-menu {
    background-image: url(../images/menu.svg)
}

.TopBar>.inner>.navdiv .navbar .menu-icon-search {
    background-image: url(../images/search.svg)
}

.TopBar>.inner>.navdiv .navbar input.nav-toggle:checked~label .menu-icon div {
    background-image: url(../images/cancel.svg) !important
}

.TopBar>.inner>.navdiv .navbar input.nav-toggle:checked~.nav-list {
    position: absolute;
    display: block;
    background-color: #000;
    z-index: 2;
    width: 100%;
    overflow: hidden
}

.TopBar>.inner>.navdiv .navbar input.nav-toggle:checked~.nav-list li {
    clear: both;
    background-color: #000
}

.TopBar>.inner>.navdiv .navbar .nav-menu {
    height: 100vh;
    padding: 32px 48px
}

.TopBar>.inner>.navdiv .navbar .nav-menu li a {
    display: flex;
    display: -webkit-flex;
    align-items: center
}

.TopBar>.inner>.navdiv .navbar .nav-menu li a img {
    height: 16px;
    width: 16px;
    margin-right: 24px
}

.TopBar>.inner>.navdiv .navbar .nav-menu li.sns {
    position: absolute;
    bottom: 150px;
    display: flex;
    display: -webkit-flex;
    align-items: center
}

.TopBar>.inner>.navdiv .navbar .nav-menu li.sns a img {
    margin-right: 40px
}

.TopBar>.inner>.navdiv .navbar .nav-menu .sub-menu label {
    display: flex;
    display: -webkit-flex;
    align-items: center;
    color: #ccc;
    line-height: 64px
}

.TopBar>.inner>.navdiv .navbar .nav-menu .sub-menu label img {
    width: 16px;
    height: 16px;
    margin-right: 24px
}

.TopBar>.inner>.navdiv .navbar .nav-menu .sub-menu label .caret {
    margin-left: auto;
    background-image: url(../images/caret.svg);
    background-size: cover;
    width: 16px;
    height: 16px;
    transform: rotate(90deg);
    -webkit-transition: transform .25s linear;
    -moz-transition: transform .25s linear;
    -o-transition: transform .25s linear;
    transition: transform .25s linear
}

.TopBar>.inner>.navdiv .navbar .nav-menu .sub-menu .sub-ul {
    display: none
}

.TopBar>.inner>.navdiv .navbar .nav-menu .sub-menu input#nav-toggle-submune:checked~.sub-ul {
    display: block;
    width: 100%;
    padding-left: 64px;
    -webkit-animation-name: fadeIn;
    -webkit-animation-duration: 0.5s;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-delay: 0s
}

.TopBar>.inner>.navdiv .navbar .nav-menu .sub-menu input#nav-toggle-submune:checked~label .caret {
    transform: rotate(180deg);
    -webkit-transition: transform .25s linear;
    -moz-transition: transform .25s linear;
    -o-transition: transform .25s linear;
    transition: transform .25s linear
}

.TopBar>.inner>.navdiv .navbar .nav-search {
    height: 60px;
    padding: 15px 5px 5px 15px
}

.TopBar>.inner>.navdiv .navbar .nav-search li form input {
    width: 70%;
    float: left
}

.TopBar>.inner>.navdiv .navbar .nav-search li form label {
    font-size: 1.1em;
    line-height: 31px;
    float: right;
    margin-right: 10px
}

.TopBar>.inner>.navdiv .navbar .nav-search li form label:hover {
    cursor: pointer
}

.TopBar>.inner>.navdiv .navbar label {
    display: none
}

.TopBar>.inner>.navdiv .navbar .nav-toggle {
    display: none
}

.TopBar .logo.eigaland {
    display: block;
    float: left;
    width: 200px;
    height: 50px;
    margin: 2px 10px 0px 0px;
    text-indent: -9999px;
    background: url(../images/logos/eigaland-top-logo.png) center center no-repeat
}

.TopBar .menu {
    display: inline-block
}

.TopBar .menu a {
    display: block;
    float: left;
    padding: 18px 14px;
    background-color: #000;
    color: #CCC;
    line-height: 18px;
    -moz-transition: background-color .3s linear;
    -o-transition: background-color .3s linear;
    -webkit-transition: background-color .3s linear;
    transition: background-color .3s linear
}

.TopBar .menu a:active,
.TopBar .menu a:hover {
    text-decoration: none;
    background-color: #222;
    color: #FFF
}

.TopBar .menu a.hide {
    display: none
}

.TopBar .menu a .more {
    margin-left: 2px
}

.TopBar .left .menu {
    margin-left: 10px
}

.TopBar .right .searchContainer {
    float: left;
    padding-top: 12px
}

.TopBar .right .menu {
    float: right
}

.TopBar .member {
    text-align: right;
    cursor: pointer;
    padding: 10px;
    float: right;
    display: none
}

.TopBar .member>* {
    display: inline-block;
    vertical-align: middle
}

.TopBar .member:active a,
.TopBar .member:hover a {
    text-decoration: none;
    color: #FFF
}

.TopBar .displayName {
    max-width: 100px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 17px
}

.TopBar .profilePic {
    width: 32px;
    height: 32px;
    background-color: #333;
    margin-left: 10px;
    background: url(../images/avatars/default-32x32.png) center center no-repeat;
    border: none;
    border-radius: 16px;
    background-size: 100% auto
}

.TopBar .more {
    display: inline-block;
    background: url(../images/more-10x10.png) center center no-repeat;
    width: 10px;
    height: 10px
}

.TopBar input {
    -webkit-appearance: none;
    appearance: none;
    font-size: 1em;
    color: #FFF;
    margin-top: -1px;
    padding: 7px 4px;
    background-color: #333;
    border: none;
    min-width: 160px;
    -moz-border-radius: 15px;
    -webkit-border-radius: 15px;
    border-radius: 15px;
    text-indent: 4px
}

.TopBar input::-webkit-input-placeholder,
.TopBar input::-moz-input-placeholder,
.TopBar input::input-placeholder {
    color: #666;
    font-family: "Open Sans Light", Helvetica, Arial, sans-serif
}

.TopBar.scrollup {
    transform: translate(0px, 0px);
    transition: transform 0.35s
}

.TopBar.scrolldown {
    transform: translate(0, -108px);
    transition: transform 0.35s
}

.loggedIn .TopBar .right .menu {
    display: none
}

.loggedIn .TopBar .member {
    display: inline-block
}

:focus {
    outline: none
}

.backgroundsize .TopBar .logo.eigaland {
    background-image: url(../images/logos/eigaland-top-logo.png);
    background-size: 170px 30px
}

.backgroundsize .TopBar .profilePic {
    background-image: url(../images/avatars/default-84x84.png) center center no-repeat;
    background-size: 32px 32px
}

.backgroundsize .TopBar .more {
    background-image: url(../images/more-20x20.png);
    background-size: 10px 10px
}

@media screen and (max-width: 799px) {
    .TopBar .right .searchContainer {
        display: none
    }
}

@media screen and (max-width: 639px) {
    .TopBar {
        position: fixed;
        z-index: 5
    }
    .TopBar .inner {
        padding-left: 0;
        padding-right: 0
    }
    .TopBar>.inner>div {
        position: inherit;
        width: auto !important;
        right: inherit
    }
    .TopBar>.inner>.left {
        display: none
    }
    .TopBar>.inner>.right {
        display: none
    }
    .TopBar>.inner>.navdiv {
        display: flex;
        display: -webkit-flex;
        justify-content: center;
        align-items: center
    }
    .TopBar>.inner>.navdiv .navbar label {
        display: block;
        z-index: 4
    }
    .TopBar>.inner>.navdiv .navbar label[for="nav-toggler"] {
        display: block;
        float: left;
        width: 36px;
        height: 36px;
        z-index: 2;
        cursor: pointer
    }
    .TopBar>.inner>.navdiv .navbar .nav-list {
        display: none;
        top: 55px;
        left: 0px
    }
    .TopBar>.inner>.navdiv .navbar .nav-list li {
        margin-left: 0px
    }
    .TopBar>.inner>.navdiv .navbar .menu-icon {
        display: block;
        float: left;
        width: 16px;
        height: 16px;
        margin: 17px 18px
    }
    .TopBar .menu {
        display: block;
        text-align: center;
        float: none !important
    }
    .TopBar .menu a {
        float: none;
        text-align: center;
        display: inline-block;
        padding: 5px 6px;
        border-radius: 6px
    }
    .TopBar .left .menu {
        margin: 10px auto
    }
    .TopBar .right .menu a {
        color: #666
    }
    .TopBar .right .searchContainer {
        display: block;
        float: none;
        padding: 0;
        margin-bottom: 5px
    }
    .TopBar .right .searchContainer input {
        max-width: inherit
    }
    .TopBar .logo.eigaland {
        float: none;
        margin: 2px auto
    }
    .TopBar .member {
        text-align: center;
        padding-top: 5px;
        float: inherit
    }
    .TopBar .profilePic {
        display: none
    }
    .eng .TopBar .menu a {
        font-size: 12px
    }
}

.hideQuickLogin .TopBar a.signin,
.hideQuickRegister .TopBar a.register {
    display: none !important
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    50% {
        opacity: 0
    }
    100% {
        opacity: 1
    }
}

.TopBarSubMenu {
    position: absolute;
    display: inline-block;
    width: 200px;
    height: auto;
    padding: 3px;
    background-color: #000;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #333;
    border-top: 1px solid #000;
    box-shadow: 0 0 15px #000
}

.TopBarSubMenu>a {
    display: block;
    padding: 10px 20px;
    border-radius: 5px;
    color: #CCC;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -webkit-transition: all .3s linear;
    transition: all .3s linear
}

.TopBarSubMenu>a:hover,
.TopBarSubMenu>a:active {
    text-decoration: none;
    background-color: #222;
    color: #FFF
}

@media screen and (max-width: 639px) {
    .TopBarSubMenu {
        margin: auto;
        left: 0 !important;
        top: 0 !important;
        bottom: 0;
        right: 0;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
        border-top: 1px solid #333;
        font-size: 1.3em;
        text-align: center;
        height: 90px
    }
    .TopBarSubMenu.movies {
        height: 86px;
        width: 280px
    }
    .TopBarSubMenu.member {
        height: 160px;
        width: 280px
    }
}

.YoutubePlayer {
    width: 90%;
    height: 90%;
    text-align: center;
    background-color: #000;
    border-radius: 5px;
    border: 1px solid #333
}

.YoutubePlayer>.inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.YoutubePlayer>.inner>div {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%
}

.YoutubePlayer>.inner>div.top {
    top: 0;
    height: 40px
}

.YoutubePlayer>.inner>div.mid {
    top: 40px;
    bottom: 0
}

.YoutubePlayer .icon.close {
    float: right;
    margin: 5px 10px 0 0
}

.YoutubePlayer iframe {
    margin: auto;
    width: 100%;
    height: 100%
}

.f {
    display: flex
}

.j-center {
    justify-content: center
}

.j-start {
    justify-content: flex-start
}

.j-end {
    justify-content: flex-end
}

.j-between {
    justify-content: space-between
}

.j-evenly {
    justify-content: space-evenly
}

.j-around {
    justify-content: space-around
}

.a-center {
    align-items: center
}

.a-start {
    align-items: flex-start
}

.a-end {
    align-items: flex-end
}

.a-stretch {
    align-items: stretch
}

.wrap {
    flex-wrap: wrap
}

.column {
    flex-flow: column
}

.xs1 {
    flex-basis: 8.33333%
}

.xs2 {
    flex-basis: 16.66667%
}

.xs3 {
    flex-basis: 25%
}

.xs4 {
    flex-basis: 33.33333%
}

.xs5 {
    flex-basis: 41.66667%
}

.xs6 {
    flex-basis: 50%
}

.xs7 {
    flex-basis: 58.33333%
}

.xs8 {
    flex-basis: 66.66667%
}

.xs9 {
    flex-basis: 75%
}

.xs10 {
    flex-basis: 83.33333%
}

.xs11 {
    flex-basis: 91.66667%
}

.xs12 {
    flex-basis: 100%
}

.AboutUs {
    background: none
}

.AboutUs>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.AboutUs .content {
    padding: 160px 10px
}

.AboutUs .content.hide {
    display: none
}

.AboutUs strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.AboutUs p {
    font-size: 1.3em;
    line-height: 1.9em
}

@media screen and (max-width: 639px) {
    .AboutUs .content {
        padding: 60px 20px
    }
    .AboutUs strong {
        font-size: 1.2em;
        line-height: 1.9em;
        color: #FFF
    }
    .AboutUs p {
        font-size: 1em;
        line-height: 1.5em
    }
}

.Activity {
    background: none
}

.Activity>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding: 30px 20px 100px 20px
}

.Activity strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.Activity .datas {
    margin-top: 40px;
    width: 100%
}

.Activity .datas .item {
    float: left;
    padding: 10px;
    margin: 0 10px 10px 0;
    width: 260px;
    height: 230px;
    position: relative;
    background: url(../images/scrollpane/bg-normal.png) repeat;
    border: 1px solid #333
}

.Activity .datas .item.running {
    cursor: pointer
}

.Activity .datas .item.running:hover {
    background: url(../images/scrollpane/bg-active.png) repeat
}

.Activity .datas .item.running:hover .name {
    color: #FFD800
}

.Activity .datas .item .name {
    color: #FFF;
    font-size: 1.2em;
    line-height: 1.4em;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.Activity .datas .item .thumbnail {
    width: 240px;
    height: 145px;
    margin-top: 10px
}

.Activity .datas .item .time {
    margin-top: 10px
}

.backgroundsize .Activity.busy .data-status {
    background-image: url(../images/busy@2x.gif);
    background-size: 16px 16px
}

@media screen and (max-width: 639px) {
    .Activity strong {
        display: block;
        text-align: center
    }
    .Activity .datas .item {
        float: none;
        margin: 20px auto
    }
}

.BookmarkManager {
    background: none;
    min-height: 400px
}

.BookmarkManager>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    margin: auto;
    padding: 50px 10px
}

.BookmarkManager strong {
    color: #FFF;
    font-size: 1.4em
}

.BookmarkManager .data {
    margin: 40px 0
}

.BookmarkManager .data .row {
    cursor: pointer
}

.BookmarkManager .data .row:nth-child(even) {
    background-color: #121212
}

.BookmarkManager .data .row:hover {
    -webkit-transition: background-color linear 0.3s;
    -moz-transition: background-color linear 0.3s;
    -ms-transition: background-color linear 0.3s;
    transition: background-color linear 0.5s;
    background-color: #333
}

.BookmarkManager .data .cell {
    vertical-align: top;
    padding: 10px;
    border-bottom: 1px solid #333
}

.BookmarkManager .data .row:last-child .cell {
    border-bottom: none
}

.BookmarkManager .data .cell.poster {
    width: 80px
}

.BookmarkManager .data .cell.info {
    width: auto
}

.BookmarkManager .data .cell.action {
    width: 120px
}

.BookmarkManager .thumbnail {
    width: 54px;
    height: 80px;
    background: #636363 url(../images/scrollpane/watermark-68x68x34.png) center center no-repeat
}

.BookmarkManager .name {
    color: #FFF;
    font-size: 1.3em
}

.BookmarkManager .data .row:hover .name {
    color: #FFD800
}

.BookmarkManager .btn.remove {
    background-color: #900
}

@media screen and (max-width: 639px) {
    .BookmarkManager .data .cell.poster {
        width: 60px
    }
    .BookmarkManager .data .cell.action {
        width: 80px
    }
    .BookmarkManager .name {
        font-size: 1em
    }
}

.backgroundsize .BookmarkManager .thumbnail {
    background-image: url(../images/scrollpane/watermark-68x68.png);
    background-size: 34px 34px
}

.CinemaDetail #page>.mid>.inner>.top {
    min-height: 120px
}

.CinemaDetail #page>.mid>.inner>.bottom {
    min-height: 300px
}

.CinemaDetail #page>.mid>.inner>.hide {
    display: none
}

.CinemaFilter {
    float: left;
    margin-right: 5px
}

.CinemaFilter select.regionList,
.CinemaFilter select.prefectureList,
.CinemaFilter select.cityList {
    display: inline-block;
    font-size: 1.2em;
    padding: 5px;
    margin: 10px 5px 0 0;
    width: 180px;
    cursor: pointer
}

.CinemaHead>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding: 50px 10px 0 10px
}

.CinemaHead .name {
    margin: 20px 0 0 10px;
    font-size: 1.5em;
    color: #FFF
}

.CinemaHead .address {
    margin: 20px 0 0 30px
}

.CinemaHead .actions {
    margin: 10px 0 20px 30px
}

.CinemaHead .actions a {
    display: inline-block;
    text-indent: 22px;
    line-height: 22px;
    vertical-align: middle
}

.CinemaHead .actions a.location {
    background: url(../images/location.png) no-repeat
}

.CinemaHead .actions a.bookmark {
    background: url(../images/bookmark.png) no-repeat;
    margin-left: 20px
}

.CinemaHead .actions a.hide {
    display: none
}

.backgroundsize .CinemaHead .actions a.location {
    background-image: url(../images/location@2x.png);
    background-size: 18px 18px
}

.backgroundsize .CinemaHead .actions a.bookmark {
    background-image: url(../images/bookmark@2x.png);
    background-size: 18px 18px
}

.CinemaContent {
    background: none
}

.CinemaContent .inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding: 20px 20px 100px 20px
}

.CinemaContent strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.CinemaContent .datas {
    margin-top: 20px;
    width: 100%
}

.CinemaContent .datas .row {
    cursor: pointer
}

.CinemaContent .datas .row:nth-child(even) {
    background: #121212
}

.CinemaContent .datas .row:hover {
    -webkit-transition: background-color linear 0.3s;
    -moz-transition: background-color linear 0.3s;
    -ms-transition: background-color linear 0.3s;
    transition: background-color linear 0.5s;
    background-color: #333
}

.CinemaContent .datas .row:hover .name {
    color: #FFD800
}

.CinemaContent .datas .row:last-child .cell {
    border-bottom: none
}

.CinemaContent .datas .cell {
    vertical-align: top;
    border-bottom: 1px solid #222
}

.CinemaContent .datas .cell.left {
    width: 100%;
    background: url(../images/scrollpane/arrow-right.png) 98% center no-repeat
}

.CinemaContent .datas .cell .name {
    color: #FFF;
    font-size: 1.3em;
    margin: 20px 10px 0 10px
}

.CinemaContent .datas .cell .address {
    color: #666;
    margin: 20px 30px 0 30px
}

.CinemaContent .datas .cell .actions {
    margin: 10px 10px 20px 30px
}

.CinemaContent .datas .cell .actions a {
    display: inline-block;
    text-indent: 22px;
    line-height: 22px;
    vertical-align: middle
}

.CinemaContent .datas .cell .actions a.location {
    background: url(../images/location.png) no-repeat
}

.CinemaContent .datas .cell .actions a.bookmark {
    background: url(../images/bookmark.png) no-repeat;
    margin-left: 20px
}

.CinemaContent .datas .cell .actions a:hover {
    color: #FFF
}

.CinemaContent .datas .cell .actions a.hide {
    display: none
}

.CinemaContent .btn.showtimes {
    background: #06C;
    width: 80px;
    margin: 20px 10px 0 0
}

.backgroundsize .CinemaContent .datas .cell .actions a.location {
    background-image: url(../images/location@2x.png);
    background-size: 18px 18px
}

.backgroundsize .CinemaContent .datas .cell .actions a.bookmark {
    background-image: url(../images/bookmark@2x.png);
    background-size: 18px 18px
}

.backgroundsize .CinemaContent .datas .cell.left {
    background-image: url(../images/scrollpane/arrow-right@2x.png);
    background-size: 15px 30px
}

@media screen and (max-width: 639px) {
    .CinemaContent .inner {
        padding-left: 10px;
        padding-right: 10px
    }
    .CinemaContent .datas .cell {
        border-bottom: 1px solid #333
    }
    .CinemaContent .datas .cell.left {
        width: 100%
    }
    .CinemaContent .datas .cell.right {
        display: none
    }
    .CinemaContent .datas .cell .name,
    .CinemaContent .datas .cell .address {
        margin: 10px 30px 0 10px
    }
    .CinemaContent .datas .cell .actions {
        margin: 10px 30px 10px 10px
    }
}

.CinemaShowtimes .center {
    margin: 0 auto
}

.CinemaShowtimes>.top {
    width: 100%;
    background: url(../images/section-bgs/1.png) repeat;
    border-top: 1px solid #222;
    z-index: 3;
    height: 0px
}

.CinemaShowtimes>.top>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    margin: auto;
    padding: 20px;
    color: #FFF;
    font-size: 1.3em
}

.CinemaShowtimes>.bottom>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    margin: auto;
    padding-bottom: 50px
}

.CinemaShowtimes>.bottom>.inner>div {
    width: 100%
}

.CinemaShowtimes>.bottom>.inner .mobileDateControl {
    position: relative
}

.CinemaShowtimes>.bottom>.inner .mobileDateControl.iscrollContainer {
    padding-top: 30px;
    overflow: hidden;
    width: 100%
}

.CinemaShowtimes>.bottom>.inner .mobileDateControl.iscrollContainer .selectedborder {
    height: 2px;
    border-bottom: 1px solid #FFD800
}

.CinemaShowtimes>.bottom>.inner .mobileDateControl.iscrollContainer .iscroll ul {
    list-style: none;
    font-size: 0;
    padding: 0;
    margin: 0
}

.CinemaShowtimes>.bottom>.inner .mobileDateControl.iscrollContainer .iscroll li {
    list-style: none;
    display: inline-block;
    font-size: 15px;
    padding: 0 30px;
    margin: 0;
    text-align: center;
    padding-bottom: 5px
}

.CinemaShowtimes>.bottom>.inner .mobileDateControl.iscrollContainer .iscroll li.picker {
    cursor: pointer
}

.CinemaShowtimes>.bottom>.inner .mobileDateControl.iscrollContainer .iscroll li.dateSelected {
    color: #FFD800
}

.CinemaShowtimes>.bottom>.inner .description {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    flex-flow: column;
    border: 1px #fff solid;
    padding: 10px;
    margin: 0 auto 5px auto;
    width: 95%
}

.CinemaShowtimes>.bottom>.inner .description .msg {
    width: 100%;
    color: #d3d3d3;
    font-size: 0.8em;
    line-height: 25px;
    text-space: 1px;
    margin-bottom: 15px
}

.CinemaShowtimes>.bottom>.inner .description .section {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    color: #fff
}

.CinemaShowtimes>.bottom>.inner .description .section span {
    width: 50px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    margin-right: 7px
}

.CinemaShowtimes>.bottom>.inner .description .section .green {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 33%;
    margin-bottom: 5px
}

.CinemaShowtimes>.bottom>.inner .description .section .green span {
    background-color: green
}

.CinemaShowtimes>.bottom>.inner .description .section .orange {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 33%;
    margin-bottom: 5px
}

.CinemaShowtimes>.bottom>.inner .description .section .orange span {
    background-color: #e38e00
}

.CinemaShowtimes>.bottom>.inner .description .section .red {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 33%;
    margin-bottom: 5px
}

.CinemaShowtimes>.bottom>.inner .description .section .red span {
    background-color: red
}

.CinemaShowtimes>.bottom>.inner .description .section .full {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 33%;
    margin-bottom: 5px
}

.CinemaShowtimes>.bottom>.inner .description .section .full span {
    background-color: darkred
}

.CinemaShowtimes>.bottom>.inner .description .section .gray {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 33%;
    margin-bottom: 5px
}

.CinemaShowtimes>.bottom>.inner .description .section .gray span {
    background-color: gray
}

.CinemaShowtimes>.bottom>.inner .caution p {
    font-size: 0.8em;
    margin: 10px 20px
}

.CinemaShowtimes>.bottom>.inner .caution img {
    margin: 0px 5px;
    height: 20px
}

.CinemaShowtimes .controls {
    width: 100%;
    padding: 20px 20px 0 20px;
    background-color: #000;
    display: none
}

.CinemaShowtimes.hasSchedule .controls {
    display: block
}

.CinemaShowtimes .item {
    background-color: #000;
    padding: 0 20px;
    margin: 20px auto;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s
}

.CinemaShowtimes .head {
    color: #FFF;
    font-size: 1.2em
}

.CinemaShowtimes .head .version {
    font-size: 70%;
    display: inline-block;
    margin-left: 5px;
    padding: 4px;
    border-radius: 4px;
    background-color: gray
}

.CinemaShowtimes .table {
    width: 100%;
    border-spacing: 2px;
    margin-top: 5px
}

.CinemaShowtimes .cell {
    width: 12.5%;
    height: 25px;
    text-align: center;
    background-color: #222;
    color: #FFF;
    vertical-align: middle;
    cursor: default
}

.CinemaShowtimes .cell.green {
    background-color: green
}

.CinemaShowtimes .cell.orange {
    background-color: #e38e00
}

.CinemaShowtimes .cell.red {
    background-color: red
}

.CinemaShowtimes .cell.grey {
    background-color: gray
}

.CinemaShowtimes .cell.full {
    background-color: #8b0000
}

.CinemaShowtimes .cell[data-url] {
    cursor: pointer
}

.CinemaShowtimes .cell[data-url]:hover {
    -webkit-animation: ticketPurchase 0.5s;
    animation: ticketPurchase 0.5s
}

.CinemaShowtimes select {
    display: inline-block;
    font-size: 1.2em;
    padding: 5px;
    margin: 10px 10px 0 0;
    min-width: 170px
}

.CinemaShowtimes .select-wrapper {
    width: 200px;
    overflow: hidden
}

@media screen and (max-width: 799px) {
    .CinemaShowtimes>.bottom>.inner>div {
        width: 100%
    }
    .CinemaShowtimes select {
        width: 100%;
        margin: 10px auto 0 auto
    }
    .CinemaShowtimes .cell {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.8em;
        height: 22px
    }
    .CinemaShowtimes .description {
        color: #d3d3d3;
        font-size: 0.8em;
        margin-top: 10px
    }
    .CinemaShowtimes .description .msg {
        line-height: 15px !important
    }
    .CinemaShowtimes .description .section {
        color: #d3d3d3 !important;
        white-space: nowrap
    }
    .CinemaShowtimes .description .section span {
        width: 35px !important
    }
}

@-webkit-keyframes ticketPurchase {
    0% {
        -webkit-filter: brightness(100%)
    }
    50% {
        -webkit-filter: brightness(130%)
    }
    100% {
        -webkit-filter: brightness(100%)
    }
}

@keyframes ticketPurchase {
    0% {
        filter: brightness(100%)
    }
    50% {
        filter: brightness(130%)
    }
    100% {
        filter: brightness(100%)
    }
}

.CommentViewer>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    margin: auto;
    padding-bottom: 50px
}

.CommentViewer>.inner>.showtime-button {
    visibility: hidden
}

.CommentViewer>.inner .movieInfo {
    position: relative;
    width: 100%
}

.CommentViewer>.inner .movieInfo>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 390px;
    margin: auto
}

.CommentViewer>.inner .movieInfo>.inner>div {
    position: absolute;
    top: 0;
    bottom: 0
}

.CommentViewer>.inner .movieInfo>.inner>div.left {
    left: 0;
    width: 50%
}

.CommentViewer>.inner .movieInfo>.inner>div.left>.inner {
    position: relative;
    width: 100%;
    height: 100%
}

.CommentViewer>.inner .movieInfo>.inner>div.left>.inner>div {
    position: absolute;
    top: 0;
    bottom: 0
}

.CommentViewer>.inner .movieInfo>.inner>div.left>.inner>div.left {
    left: 0;
    width: 50%
}

.CommentViewer>.inner .movieInfo>.inner>div.left>.inner>div.right {
    left: 50%;
    width: 50%;
    right: 0
}

.CommentViewer>.inner .movieInfo .poster {
    width: 224px;
    height: 321px;
    margin: 40px auto 0 auto;
    border: 1px solid #363636;
    box-shadow: 0px 0px 2px 2px rgba(9, 9, 9, 0.75);
    background: url(../images/scrollpane/bg-normal.png) repeat
}

.CommentViewer>.inner .movieInfo .thumbnail {
    width: 204px;
    height: 301px;
    background: #636363 url(../images/scrollpane/watermark-68x68.png) center center no-repeat;
    margin: 10px auto;
    border: none
}

.CommentViewer>.inner .movieInfo .thumbnail img {
    width: 100%;
    height: 100%;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s
}

.CommentViewer>.inner .movieInfo .fields {
    margin: 40px 0 0 0;
    text-align: center
}

.CommentViewer>.inner .movieInfo .name {
    color: #FFF;
    font-size: 1.4em;
    line-height: 1.6em
}

.CommentViewer>.inner .movieInfo .openDate {
    margin-top: 20px
}

.CommentViewer>.inner .movieInfo .rating {
    margin-top: 30px;
    color: #FFD800;
    font-size: 5em;
    font-family: Helvetica, Arial, sans-serif
}

.CommentViewer>.inner .movieInfo .stars {
    width: 143px;
    height: 24px;
    background-image: url(../images/star@2x.png);
    background-size: 143px 266px;
    margin: 10px auto 0 auto
}

.CommentViewer>.inner .movieInfo .stars.star-0 {
    background-position: center 0
}

.CommentViewer>.inner .movieInfo .stars.star-0-5 {
    background-position: center -24px
}

.CommentViewer>.inner .movieInfo .stars.star-1 {
    background-position: center -48px
}

.CommentViewer>.inner .movieInfo .stars.star-1-5 {
    background-position: center -72px
}

.CommentViewer>.inner .movieInfo .stars.star-2 {
    background-position: center -96px
}

.CommentViewer>.inner .movieInfo .stars.star-2-5 {
    background-position: center -120px
}

.CommentViewer>.inner .movieInfo .stars.star-3 {
    background-position: center -144px
}

.CommentViewer>.inner .movieInfo .stars.star-3-5 {
    background-position: center -168px
}

.CommentViewer>.inner .movieInfo .stars.star-4 {
    background-position: center -192px
}

.CommentViewer>.inner .movieInfo .stars.star-4-5 {
    background-position: center -216px
}

.CommentViewer>.inner .movieInfo .stars.star-5 {
    background-position: center -240px
}

.CommentViewer>.inner .movieInfo .commentCount {
    margin-top: 10px
}

.CommentViewer>.inner .mid {
    width: 100%;
    height: auto
}

.CommentViewer>.inner .mid>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    margin: auto
}

.CommentViewer .comment-title {
    padding: 20px 10px;
    font-size: 1.1em;
    line-height: 1.7em;
    border-top: 1px solid #222
}

.CommentViewer .comment-title a,
.CommentViewer .comment-title strong {
    color: #FFF;
    font-size: 1.3em
}

.CommentViewer .controls {
    width: 100%;
    padding: 20px;
    background-color: #000
}

.CommentViewer .controls a {
    float: right;
    margin-left: 10px;
    background: #06C;
    width: 100px
}

.CommentViewer .data {
    width: 100%;
    background-color: #000
}

.CommentViewer .datas {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    flex-flow: column
}

.CommentViewer .datas .item {
    width: 100%;
    border-bottom: 1px solid #333;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s
}

.CommentViewer .datas .item :last-child {
    border-bottom: none
}

.CommentViewer .datas .item .wrapper {
    padding: 10px 20px
}

.CommentViewer .datas .item .wrapper .userDetail {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    margin: 5px 0 10px 0
}

.CommentViewer .datas .item .wrapper .userDetail .picture {
    background: #444 url(../images/avatars/default-84x84.png) center center no-repeat;
    background-size: 108% auto;
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 24px;
    border: none;
    padding: 1px;
    cursor: pointer;
    margin-right: 13px
}

.CommentViewer .datas .item .wrapper .userDetail .default {
    background: #444 url(../images/avatars/default-84x84.png) center center no-repeat;
    background-size: 108% auto;
    width: 48px;
    min-width: 48px;
    height: 48px;
    border-radius: 24px;
    border: none;
    padding: 1px;
    cursor: pointer;
    margin-right: 13px
}

.CommentViewer .datas .item .wrapper .userDetail .userName {
    width: 100%;
    color: #FFD800;
    font-weight: bold;
    font-size: 1.2em
}

.CommentViewer .datas .item .wrapper .userDetail .spoiler {
    background: url(../images/avatars/comment_btn_spoiler_on_jp@3x.png) center center no-repeat;
    background-size: 100% auto;
    width: 88px;
    height: 28px
}

.CommentViewer .datas .item .wrapper .titleWrapper {
    width: 100%
}

.CommentViewer .datas .item .wrapper .titleWrapper .title {
    color: #fff;
    font-size: 1.25em;
    word-wrap: break-word;
    line-height: 1.5em;
    white-space: pre-wrap;
    overflow: hidden;
    margin: 5px;
    letter-spacing: 1px
}

.CommentViewer .datas .item .wrapper .commentDetail {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start
}

.CommentViewer .datas .item .wrapper .commentDetail .stars {
    width: 143px;
    height: 24px;
    background: url(../images/star.png) center top no-repeat
}

.CommentViewer .datas .item .wrapper .commentDetail .stars.star-0 {
    background-position: center 0
}

.CommentViewer .datas .item .wrapper .commentDetail .stars.star-0-5 {
    background-position: center -28px
}

.CommentViewer .datas .item .wrapper .commentDetail .stars.star-1 {
    background-position: center -50px
}

.CommentViewer .datas .item .wrapper .commentDetail .stars.star-1-5 {
    background-position: center -73px
}

.CommentViewer .datas .item .wrapper .commentDetail .stars.star-2 {
    background-position: center -98px
}

.CommentViewer .datas .item .wrapper .commentDetail .stars.star-2-5 {
    background-position: center -120px
}

.CommentViewer .datas .item .wrapper .commentDetail .stars.star-3 {
    background-position: center -146px
}

.CommentViewer .datas .item .wrapper .commentDetail .stars.star-3-5 {
    background-position: center -168px
}

.CommentViewer .datas .item .wrapper .commentDetail .stars.star-4 {
    background-position: center -190px
}

.CommentViewer .datas .item .wrapper .commentDetail .stars.star-4-5 {
    background-position: center -212px
}

.CommentViewer .datas .item .wrapper .commentDetail .stars.star-5 {
    background-position: center -237px
}

.CommentViewer .datas .item .wrapper .commentDetail .time {
    font-size: 1.2em;
    line-height: 21px
}

.CommentViewer .datas .item .wrapper .generalComment {
    font-size: 1.15em;
    line-height: 22px;
    margin: 5px;
    letter-spacing: 1px
}

.CommentViewer .datas .item .wrapper .spoilerComment {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start
}

.CommentViewer .datas .item .wrapper .spoilerComment .signalMessage {
    margin: 5px;
    font-size: 1.25em
}

.CommentViewer .datas .item .wrapper .spoilerComment .clickToRead {
    color: #ffd633;
    margin: 5px;
    font-size: 1.15em;
    cursor: pointer
}

.CommentViewer .datas .item .wrapper .spoilerComment .hiddenComment {
    letter-spacing: 1px;
    display: none;
    font-size: 1.15em;
    line-height: 22px;
    margin: 5px
}

.CommentViewer .datas .item .wrapper .spoilerComment .show {
    display: block
}

.CommentViewer .datas .item .wrapper .spoilerComment .noShow {
    display: none
}

.CommentViewer .datas .showAll {
    display: block;
    color: #FFD800;
    font-size: 1.4em;
    width: 100%;
    text-align: center;
    margin-top: 1%;
    padding: 10px 20px
}

.CommentViewer .datas .more {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 1%;
    padding: 10px 20px;
    background-color: #333
}

.CommentViewer .datas .more:hover {
    color: #FFF;
    text-decoration: none
}

.CommentViewer .datas .more.hide {
    display: none
}

.CommentViewer .datas .more .icon {
    display: inline-block;
    background: url(../images/more-10x10.png) center center no-repeat;
    width: 10px;
    height: 10px;
    margin-left: 5px
}

.CommentViewer .datas .counter {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    margin-left: 5px
}

.CommentViewer .datas .counter .like {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    margin-right: 35px
}

.CommentViewer .datas .counter .like .icon {
    background: url(../images/avatars/icon_likes@3x.png) center center no-repeat;
    background-size: 100% auto;
    width: 22px;
    height: 22px;
    margin-right: 5px;
    cursor: pointer
}

.CommentViewer .datas .counter .like .value {
    font-size: 1.3em;
    line-height: 26px;
    color: #fff
}

.CommentViewer .datas .counter .commentValue {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    margin-right: 5px
}

.CommentViewer .datas .counter .commentValue .icon {
    background: url(../images/avatars/chatbox_white@3x.png) center center no-repeat;
    background-size: 100% auto;
    width: 22px;
    height: 26px;
    margin-right: 5px;
    cursor: pointer
}

.CommentViewer .datas .counter .commentValue .value {
    font-size: 1.3em;
    line-height: 26px;
    color: #fff
}

@media screen and (max-width: 799px) {
    .CommentViewer>.inner .movieInfo .inner {
        height: inherit
    }
    .CommentViewer>.inner .movieInfo .inner>div {
        position: inherit;
        top: inherit;
        bottom: inherit;
        height: inherit;
        width: 100%
    }
    .CommentViewer>.inner .movieInfo .inner>div.left {
        width: 100%;
        left: inherit
    }
    .CommentViewer>.inner .movieInfo .inner>div.left>.inner {
        height: 232px
    }
    .CommentViewer>.inner .movieInfo .inner>div.left>.inner>div.left {
        width: 150px;
        padding-left: 20px
    }
    .CommentViewer>.inner .movieInfo .inner>div.left>.inner>div.right {
        left: 150px;
        width: auto;
        padding: 0 20px
    }
    .CommentViewer>.inner .movieInfo .poster {
        width: 130px;
        height: 187px;
        margin-top: 20px
    }
    .CommentViewer>.inner .movieInfo .thumbnail {
        width: 120px;
        height: 177px;
        margin: 5px auto
    }
    .CommentViewer>.inner .movieInfo .fields {
        text-align: left;
        margin-top: 20px
    }
    .CommentViewer>.inner .movieInfo .name {
        font-size: 1.2em;
        max-height: 52px;
        overflow: hidden;
        text-overflow: ellipsis
    }
    .CommentViewer>.inner .movieInfo .rating {
        margin-top: 20px;
        font-size: 2em
    }
    .CommentViewer>.inner .movieInfo .stars {
        margin: 10px 0 0 0
    }
}

@media screen and (max-width: 639px) {
    .CommentViewer .comment-title {
        padding: 20px
    }
    .CommentViewer .controls a {
        float: none;
        margin: 20px auto 0 auto;
        width: 200px
    }
    .CommentViewer .item .wrapper .cell.who {
        width: 58px
    }
    .CommentViewer .item .wrapper .spoilerComment {
        -webkit-flex-flow: column;
        -moz-flex-flow: column;
        flex-flow: column
    }
}

.CommentWriter {
    position: relative;
    margin: auto;
    background-color: #000;
    width: 100%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    box-shadow: 0 0 15px #000;
    max-width: 100% !important
}

.CommentWriter .inner .top .movieName {
    display: block;
    margin-top: 30px;
    margin-bottom: 15px
}

.CommentWriter .inner .bottom {
    padding: 10px 20px
}

.CommentWriter .icon.close {
    float: right;
    margin: 10px 10px 0 0
}

.CommentWriter .title {
    color: #FFF;
    font-size: 1.3em;
    display: inline-block;
    padding: 10px 0 0 10px
}

.CommentWriter .row {
    margin: 10px 0 0 0
}

.CommentWriter .shareToFb {
    margin: 30px 0 0 0
}

.CommentWriter .shareToFb div.shareIcon {
    display: block;
    float: right;
    width: 20px;
    height: 20px;
    background: url(../images/sns/facebook.png) 0 0 no-repeat;
    background-size: 100% 200%
}

.CommentWriter .spoiler {
    display: inline-block;
    padding: 3px 10px;
    background-color: #636363;
    color: black;
    margin-left: 10px;
    border-radius: 2px;
    vertical-align: text-top;
    cursor: pointer
}

.CommentWriter .spoiler.true {
    background-color: #FFD800
}

.CommentWriter .ratings {
    display: inline-block
}

.CommentWriter .ratings .stars {
    vertical-align: bottom;
    width: 148px;
    height: 20px;
    background: url(../images/star.png) center top no-repeat;
    display: inline-block;
    vertical-align: bottom;
    margin: 0 auto 0 auto
}

.CommentWriter .ratings .stars.star-0 {
    background-position: center 0
}

.CommentWriter .ratings .stars.star-0-5 {
    background-position: center -30px
}

.CommentWriter .ratings .stars.star-1 {
    background-position: center -53px
}

.CommentWriter .ratings .stars.star-1-5 {
    background-position: center -76px
}

.CommentWriter .ratings .stars.star-2 {
    background-position: center -101px
}

.CommentWriter .ratings .stars.star-2-5 {
    background-position: center -122px
}

.CommentWriter .ratings .stars.star-3 {
    background-position: center -148px
}

.CommentWriter .ratings .stars.star-3-5 {
    background-position: center -172px
}

.CommentWriter .ratings .stars.star-4 {
    background-position: center -194px
}

.CommentWriter .ratings .stars.star-4-5 {
    background-position: center -216px
}

.CommentWriter .ratings .stars.star-5 {
    background-position: center -240px
}

.CommentWriter .ratings a {
    display: inline-block;
    text-indent: -9999px;
    width: 29px;
    height: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent
}

.CommentWriter .input.rating {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    width: 1px;
    height: 1px;
    opacity: 0;
    filter: alpha(opacity=0)
}

.CommentWriter .input.text {
    width: 100%;
    border: none;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    padding: 10px;
    font-size: 14px;
    box-shadow: inset 1px 1px 2px #222;
    color: #333
}

.CommentWriter .btn.submit {
    background-color: #06c;
    float: right;
    width: 80px;
    padding: 5px 8px
}

.CommentWriter textarea {
    height: 80px;
    resize: none
}

.CommentWriter .form-status .error,
.CommentWriter .form-status .fail {
    margin-top: 5px
}

@media screen and (max-width: 639px) {
    .CommentWriter {
        margin: auto;
        left: 0 !important;
        top: 0 !important;
        bottom: 0;
        right: 0;
        -moz-border-radius-topleft: 5px;
        -webkit-border-top-left-radius: 5px;
        border-top-left-radius: 5px;
        -moz-border-radius-topright: 5px;
        -webkit-border-top-right-radius: 5px;
        border-top-right-radius: 5px;
        border-top: 1px solid #333
    }
}

.backgroundsize .CommentWriter .stars {
    background-image: url(../images/star@2x.png);
    background-size: 143px 266px;
    background-position: center -7px
}

.stop_scroll {
    height: 100%;
    overflow: hidden
}

.contactUs {
    background: none
}

.contactUs>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.contactUs strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.contactUs p {
    font-size: 1.3em;
    line-height: 1.9em
}

.contactUs .table {
    width: 500px;
    margin-top: 40px
}

.contactUs .cell {
    padding: 5px;
    vertical-align: middle
}

.contactUs .cell.key {
    width: 124px
}

.contactUs .cell.top {
    vertical-align: top;
    padding-top: 12px
}

.contactUs .input.text {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #323232;
    box-shadow: inset 2px 2px 3px #000;
    color: #FFF
}

.contactUs .input.textarea {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #323232;
    box-shadow: inset 2px 2px 3px #000;
    color: #FFF;
    height: 80px;
    resize: none;
    font-size: 0.8em
}

.contactUs .actions {
    margin-top: 20px;
    width: 500px;
    padding-left: 130px
}

.contactUs .actions .btn {
    background-color: #06c;
    width: 120px
}

.contactUs .form-status {
    margin-top: 30px;
    width: 500px;
    padding-left: 130px
}

@media screen and (max-width: 639px) {
    .contactUs strong {
        font-size: 1.2em;
        line-height: 1.9em;
        color: #FFF
    }
    .contactUs p {
        font-size: 1em;
        line-height: 1.5em
    }
    .contactUs .table {
        display: block;
        width: 100%
    }
    .contactUs .table>.row {
        display: block;
        margin-top: 20px
    }
    .contactUs .table>.row>.cell {
        display: block
    }
    .contactUs .cell.key,
    .contactUs .cell.value {
        width: 100%
    }
    .contactUs .actions {
        width: 100%;
        padding-left: 0
    }
    .contactUs .actions .btn {
        margin: auto
    }
    .contactUs .form-status {
        width: 100%;
        padding-left: 0;
        text-align: center
    }
    .contactUs .note .value {
        text-align: center
    }
}

.disclaimer {
    background: none
}

.disclaimer>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.disclaimer .content {
    padding: 160px 10px
}

.disclaimer .content.hide {
    display: none
}

.disclaimer strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.disclaimer p {
    font-size: 1.2em;
    line-height: 1.9em
}

.disclaimer p.topic {
    color: #FFF;
    display: block;
    margin-top: 40px
}

.disclaimer a {
    color: #ccc
}

.disclaimer ul,
.disclaimer ol {
    list-style-type: disc;
    padding-left: 20px
}

.disclaimer li {
    line-height: 1.5em;
    font-size: 1.2em
}

@media screen and (max-width: 639px) {
    .disclaimer .content {
        padding: 60px 20px
    }
}

.faq {
    background: none
}

.faq>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.faq .content {
    padding: 30px 10px 100px 10px
}

.faq .content.hide {
    display: none
}

.faq strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.faq .section_header {
    cursor: pointer
}

.faq .section_header.question {
    color: #FFF;
    padding-top: 30px;
    font-size: 1.3em;
    line-height: 1.9em
}

.faq .section_header.answer {
    font-size: 1.1em;
    line-height: 1.4em;
    display: none
}

.faq .downtriangle {
    float: right;
    margin-top: 10px;
    width: 0;
    height: 0;
    border-bottom: 10px solid white;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent
}

.faq .uptriangle {
    float: right;
    margin-top: 10px;
    width: 0;
    height: 0;
    border-top: 10px solid white;
    border-right: 10px solid transparent;
    border-left: 10px solid transparent
}

.faq a {
    color: #ccc
}

.faq ul,
.faq ol {
    list-style-type: disc;
    padding-left: 40px
}

.faq li {
    line-height: 1.4em;
    font-size: 1.1em
}

.ForgetPassword {
    background: none
}

.ForgetPassword .inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding: 50px 50px 150px 50px
}

.ForgetPassword strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF;
    display: block;
    margin-top: 40px
}

.ForgetPassword .table {
    width: 500px;
    margin-top: 30px
}

.ForgetPassword .cell {
    padding: 5px;
    vertical-align: top
}

.ForgetPassword .cell.key {
    width: 120px
}

.ForgetPassword .input.text {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #323232;
    box-shadow: inset 2px 2px 3px #000;
    color: #FFF
}

.ForgetPassword .actions {
    margin-top: 30px;
    width: 500px;
    padding-left: 130px
}

.ForgetPassword .actions .btn {
    background-color: #06c;
    width: 120px
}

.ForgetPassword .actions .btn:hover {
    background-color: #0172e3
}

.ForgetPassword .form-status {
    margin-top: 30px;
    width: 500px;
    padding-left: 130px
}

@media screen and (max-width: 639px) {
    .ForgetPassword .inner {
        padding: 10px 10px 160px 10px
    }
    .ForgetPassword .table {
        display: block;
        width: 100%
    }
    .ForgetPassword .table>.row {
        display: block;
        margin-top: 20px
    }
    .ForgetPassword .table>.row>.cell {
        display: block
    }
    .ForgetPassword .cell.key,
    .ForgetPassword .cell.value {
        width: 100%
    }
    .ForgetPassword .actions {
        width: 100%;
        padding-left: 0
    }
    .ForgetPassword .actions .btn {
        margin: auto
    }
    .ForgetPassword .form-status {
        width: 100%;
        padding-left: 0;
        text-align: center
    }
}

.law {
    background: none
}

.law>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.law .content {
    padding: 30px 10px 100px 10px
}

.law .content.hide {
    display: none
}

.law strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.law .section_header {
    padding-top: 30px;
    font-size: 1.3em;
    line-height: 1.9em;
    color: #FFF
}

.law .section_header .dot {
    transform: translateY(-7%)
}

.law .section_content {
    font-size: 1.1em;
    line-height: 1.4em
}

.law a {
    color: #ccc
}

.law ul,
.law ol {
    list-style-type: disc;
    padding-left: 20px
}

.law li {
    line-height: 1.4em;
    font-size: 1.1em
}

@media screen and (max-width: 639px) {
    .termsOfUse .content {
        padding: 60px 20px
    }
}

.LoginPage #page>.mid {
    height: 440px;
    background: none
}

.LoginPage #page>.mid>.wrapper {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.LoginPage #page>.mid>.wrapper>.inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto
}

.LoginPage .LoginBox {
    margin: auto;
    left: 0 !important;
    top: 0 !important;
    bottom: 0;
    right: 0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-top: 1px solid #333
}

.MainBlog {
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 20px
}

.MainBlog.busy .dataStatus .busy {
    margin: 30px auto
}

.MainBlog .title strong {
    font-size: 1.3em;
    line-height: 2.2em;
    color: #FFF;
    margin-bottom: 10px;
    padding-left: 20px
}

.MainBlog .title .more {
    text-align: right;
    margin-top: 15px;
    color: #FFD800;
    font-size: 1em;
    padding-right: 20px;
    float: right
}

.MainBlog .datas {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}

.MainBlog .datas .blogItem {
    padding: 10px;
    margin: 0 0 20px;
    width: 100%;
    position: relative;
    background: url(../images/scrollpane/bg-normal.png) repeat;
    border: 1px solid #3f3f3f;
    cursor: pointer
}

.MainBlog .datas .blogItem:hover {
    background: url(../images/scrollpane/bg-active.png) repeat
}

.MainBlog .datas .blogItem .thumbnail {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto
}

.MainBlog .datas .blogItem .thumbnail img {
    width: 100%;
    border: 0;
    cursor: pointer
}

.MainBlog .datas .blogItem .caption {
    margin-top: 5px
}

.MainBlog .datas .blogItem .name {
    color: #CCC;
    font-size: 1.2em;
    width: 100%;
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 17px
}

.MainBlog .datas .blogItem:hover .name {
    color: #FFD800
}

.MainBlog .datas .blogItem .excerpt {
    line-height: 17px;
    margin-top: 5px
}

.MainBlog .margin {
    min-height: 128px
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    .MainBlog .datas .blogItem {
        float: left;
        margin: 0 10px 10px 0;
        padding: 10px;
        width: 210px;
        position: relative;
        background: url(../images/scrollpane/bg-normal.png) repeat;
        border: 1px solid #3f3f3f
    }
    .MainBlog .datas .blogItem:hover {
        background: url(../images/scrollpane/bg-active.png) repeat
    }
    .MainBlog .datas .blogItem .thumbnail {
        position: relative;
        width: 190px;
        height: 117px;
        overflow: hidden;
        margin: 0 auto
    }
    .MainBlog .datas .blogItem .thumbnail img {
        position: absolute;
        top: 0;
        width: 190px;
        height: 117px;
        border: 0;
        cursor: pointer
    }
}

@media screen and (max-width: 639px) {
    .MainBlog .datas {
        padding: 5px
    }
    .MainBlog .datas .blogItem {
        float: none;
        width: 100%;
        height: 92px;
        padding: 5px;
        margin: 0 0 1px;
        display: table;
        vertical-align: top
    }
    .MainBlog .datas .blogItem .thumbnail {
        width: 80px;
        height: 80px;
        margin: 0;
        display: table-cell
    }
    .MainBlog .datas .blogItem .thumbnail img {
        width: 80px;
        height: 80px
    }
    .MainBlog .datas .blogItem .caption {
        padding-left: 5px;
        display: table-cell;
        vertical-align: top
    }
    .MainBlog .datas .blogItem .name {
        font-size: 1em
    }
}

.mainComingWrapper strong,
.mainShowingWrapper strong,
.mainActivityWrapper strong {
    display: block;
    font-size: 1.3em;
    line-height: 2.2em;
    text-indent: 25px;
    color: #FFF
}

.mainComingWrapper .title_wrapper,
.mainShowingWrapper .title_wrapper,
.mainActivityWrapper .title_wrapper {
    display: block;
    line-height: 2.2em;
    padding: 15px 0
}

.mainComingWrapper .showing_title,
.mainShowingWrapper .showing_title,
.mainActivityWrapper .showing_title {
    text-align: left;
    float: left;
    margin-left: 10px
}

.mainComingWrapper .showing_subtitle,
.mainShowingWrapper .showing_subtitle,
.mainActivityWrapper .showing_subtitle {
    text-align: left;
    margin-left: 10px;
    margin-bottom: 20px
}

.mainComingWrapper .showing_subtitle>span,
.mainShowingWrapper .showing_subtitle>span,
.mainActivityWrapper .showing_subtitle>span {
    display: block;
    text-indent: 25px;
    font-size: 1.1em;
    line-height: 1.3em
}

.mainComingWrapper .actions,
.mainShowingWrapper .actions,
.mainActivityWrapper .actions {
    text-align: right;
    padding-right: 30px;
    padding-top: 4px;
    float: right
}

.mainComingWrapper .actions a,
.mainShowingWrapper .actions a,
.mainActivityWrapper .actions a {
    font-size: 1em;
    color: #FFD800
}

.mainComingWrapper .flexContainer,
.mainShowingWrapper .flexContainer,
.mainActivityWrapper .flexContainer {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    width: 100%
}

.mainComingWrapper .flexContainer .movie,
.mainShowingWrapper .flexContainer .movie,
.mainActivityWrapper .flexContainer .movie {
    display: inline-block;
    padding: 5px;
    width: 23%;
    height: auto;
    cursor: pointer;
    box-shadow: 0 0 2px 2px rgba(9, 9, 9, 0.75);
    background: url(../images/scrollpane/bg-normal.png) repeat;
    margin: 1%
}

.mainComingWrapper .flexContainer .movie:hover,
.mainShowingWrapper .flexContainer .movie:hover,
.mainActivityWrapper .flexContainer .movie:hover {
    background: url(../images/scrollpane/bg-active.png) repeat
}

.mainComingWrapper .flexContainer .movie .thumbnail,
.mainShowingWrapper .flexContainer .movie .thumbnail,
.mainActivityWrapper .flexContainer .movie .thumbnail {
    position: relative;
    background: #636363 url(../images/scrollpane/watermark-68x68.png) center center no-repeat;
    background-size: 25% auto;
    height: 0;
    padding-bottom: 140%;
    overflow: hidden
}

.mainComingWrapper .flexContainer .movie .thumbnail img,
.mainShowingWrapper .flexContainer .movie .thumbnail img,
.mainActivityWrapper .flexContainer .movie .thumbnail img {
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
    margin: auto
}

.mainComingWrapper .flexContainer .movie .thumbnail .btnPlay,
.mainShowingWrapper .flexContainer .movie .thumbnail .btnPlay,
.mainActivityWrapper .flexContainer .movie .thumbnail .btnPlay {
    background: url(../images/btn-play.png) center center no-repeat;
    position: absolute;
    width: 29px;
    height: 29px;
    bottom: 6px;
    right: 6px;
    border: none;
    cursor: pointer;
    z-index: 1
}

.mainComingWrapper .flexContainer .movie .promo-name,
.mainShowingWrapper .flexContainer .movie .promo-name,
.mainActivityWrapper .flexContainer .movie .promo-name {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    margin: 6px 0 5px 0
}

.mainComingWrapper .flexContainer .movie .promo-name .promotion,
.mainShowingWrapper .flexContainer .movie .promo-name .promotion,
.mainActivityWrapper .flexContainer .movie .promo-name .promotion {
    width: 10%
}

.mainComingWrapper .flexContainer .movie .promo-name .promotion .icon,
.mainShowingWrapper .flexContainer .movie .promo-name .promotion .icon,
.mainActivityWrapper .flexContainer .movie .promo-name .promotion .icon {
    width: 20px;
    height: 20px;
    background-image: url(../images/special_highlight_poster.png);
    background-position: center center;
    background-size: 100% auto
}

.mainComingWrapper .flexContainer .movie .promo-name .name,
.mainShowingWrapper .flexContainer .movie .promo-name .name,
.mainActivityWrapper .flexContainer .movie .promo-name .name {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
    overflow: hidden;
    font-size: 1em;
    color: #FFF;
    line-height: 1.4em;
    text-align: center
}

.mainComingWrapper .flexContainer .movie .detail,
.mainShowingWrapper .flexContainer .movie .detail,
.mainActivityWrapper .flexContainer .movie .detail {
    padding-top: 5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-between;
    -moz-justify-content: space-between;
    justify-content: space-between;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end
}

.mainComingWrapper .flexContainer .movie .detail .comment,
.mainShowingWrapper .flexContainer .movie .detail .comment,
.mainActivityWrapper .flexContainer .movie .detail .comment {
    width: 33%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center
}

.mainComingWrapper .flexContainer .movie .detail .comment .icon,
.mainShowingWrapper .flexContainer .movie .detail .comment .icon,
.mainActivityWrapper .flexContainer .movie .detail .comment .icon {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/scrollpane/comment_white.png) left top no-repeat;
    background-size: contain;
    background-position: center center;
    width: 33%;
    height: 22px
}

.mainComingWrapper .flexContainer .movie .detail .comment .value,
.mainShowingWrapper .flexContainer .movie .detail .comment .value,
.mainActivityWrapper .flexContainer .movie .detail .comment .value {
    display: inline-block;
    line-height: normal;
    color: #FFD800;
    font-size: 16px
}

.mainComingWrapper .flexContainer .movie .detail .like,
.mainShowingWrapper .flexContainer .movie .detail .like,
.mainActivityWrapper .flexContainer .movie .detail .like {
    width: 35%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center
}

.mainComingWrapper .flexContainer .movie .detail .like .icon,
.mainShowingWrapper .flexContainer .movie .detail .like .icon,
.mainActivityWrapper .flexContainer .movie .detail .like .icon {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/scrollpane/heart_white.png) left top no-repeat;
    background-size: contain;
    background-position: center center;
    width: 33%;
    height: 22px
}

.mainComingWrapper .flexContainer .movie .detail .like .value,
.mainShowingWrapper .flexContainer .movie .detail .like .value,
.mainActivityWrapper .flexContainer .movie .detail .like .value {
    display: inline-block;
    line-height: normal;
    color: #FFD800;
    font-size: 16px
}

.mainComingWrapper .flexContainer .movie .detail .rating,
.mainShowingWrapper .flexContainer .movie .detail .rating,
.mainActivityWrapper .flexContainer .movie .detail .rating {
    width: 33%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center
}

.mainComingWrapper .flexContainer .movie .detail .rating .icon,
.mainShowingWrapper .flexContainer .movie .detail .rating .icon,
.mainActivityWrapper .flexContainer .movie .detail .rating .icon {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/scrollpane/star_white.png) left top no-repeat;
    background-size: contain;
    background-position: center center;
    width: 33%;
    height: 24px
}

.mainComingWrapper .flexContainer .movie .detail .rating .value,
.mainShowingWrapper .flexContainer .movie .detail .rating .value,
.mainActivityWrapper .flexContainer .movie .detail .rating .value {
    display: inline-block;
    line-height: 24px;
    color: #FFD800;
    font-size: 16px
}

.mainComingWrapper .flexContainer .movie .detail .rating .noValue,
.mainShowingWrapper .flexContainer .movie .detail .rating .noValue,
.mainActivityWrapper .flexContainer .movie .detail .rating .noValue {
    display: inline-block;
    line-height: 24px;
    color: #FFD800;
    font-size: 16px
}

.mainShowingWrapper {
    min-height: 660px
}

.mainShowingWrapper .movie:last-child {
    display: none
}

.mainComingWrapper {
    min-height: 680px
}

.clearfix {
    display: inline-block
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0
}

html[xmlns] .clearfix {
    display: block
}

* html .clearfix {
    height: 1%
}

@media screen and (max-width: 639px) {
    .mainComingWrapper,
    .mainShowingWrapper,
    .mainActivityWrapper {
        min-height: auto
    }
    .mainComingWrapper strong,
    .mainShowingWrapper strong,
    .mainActivityWrapper strong {
        text-indent: 0;
        text-align: center
    }
    .mainComingWrapper .actions,
    .mainShowingWrapper .actions,
    .mainActivityWrapper .actions {
        text-align: center;
        padding-right: 0
    }
    .mainComingWrapper .showing_title,
    .mainShowingWrapper .showing_title,
    .mainActivityWrapper .showing_title {
        text-align: left;
        float: left;
        margin-left: 30px
    }
    .mainComingWrapper .showing_subtitle,
    .mainShowingWrapper .showing_subtitle,
    .mainActivityWrapper .showing_subtitle {
        text-align: left;
        margin-left: 30px
    }
    .mainComingWrapper .showing_subtitle>span,
    .mainShowingWrapper .showing_subtitle>span,
    .mainActivityWrapper .showing_subtitle>span {
        text-indent: 0
    }
    .mainComingWrapper .actions a,
    .mainShowingWrapper .actions a,
    .mainActivityWrapper .actions a {
        margin-right: 30px
    }
    .mainComingWrapper .flexContainer .movie,
    .mainShowingWrapper .flexContainer .movie,
    .mainActivityWrapper .flexContainer .movie {
        width: 31%
    }
    .mainComingWrapper .flexContainer .movie .thumbnail .btnPlay,
    .mainShowingWrapper .flexContainer .movie .thumbnail .btnPlay,
    .mainActivityWrapper .flexContainer .movie .thumbnail .btnPlay {
        bottom: 0;
        right: 0
    }
    .mainComingWrapper .flexContainer .movie .promo-name .promotion .icon,
    .mainShowingWrapper .flexContainer .movie .promo-name .promotion .icon,
    .mainActivityWrapper .flexContainer .movie .promo-name .promotion .icon {
        width: 15px;
        height: 15px
    }
    .mainComingWrapper .flexContainer .movie .promo-name .name,
    .mainShowingWrapper .flexContainer .movie .promo-name .name,
    .mainActivityWrapper .flexContainer .movie .promo-name .name {
        font-size: 0.9em;
        display: -webkit-box;
        line-height: 16px;
        max-height: 32px;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical
    }
    .mainComingWrapper .flexContainer .movie .detail .rating .icon,
    .mainComingWrapper .flexContainer .movie .detail .like .icon,
    .mainComingWrapper .flexContainer .movie .detail .comment .icon,
    .mainShowingWrapper .flexContainer .movie .detail .rating .icon,
    .mainShowingWrapper .flexContainer .movie .detail .like .icon,
    .mainShowingWrapper .flexContainer .movie .detail .comment .icon,
    .mainActivityWrapper .flexContainer .movie .detail .rating .icon,
    .mainActivityWrapper .flexContainer .movie .detail .like .icon,
    .mainActivityWrapper .flexContainer .movie .detail .comment .icon {
        margin-right: 1px
    }
    .mainComingWrapper .flexContainer .movie .detail .rating .value,
    .mainComingWrapper .flexContainer .movie .detail .like .value,
    .mainComingWrapper .flexContainer .movie .detail .comment .value,
    .mainShowingWrapper .flexContainer .movie .detail .rating .value,
    .mainShowingWrapper .flexContainer .movie .detail .like .value,
    .mainShowingWrapper .flexContainer .movie .detail .comment .value,
    .mainActivityWrapper .flexContainer .movie .detail .rating .value,
    .mainActivityWrapper .flexContainer .movie .detail .like .value,
    .mainActivityWrapper .flexContainer .movie .detail .comment .value {
        font-size: 0.85em
    }
    .mainComingWrapper .flexContainer .movie .detail .rating,
    .mainShowingWrapper .flexContainer .movie .detail .rating,
    .mainActivityWrapper .flexContainer .movie .detail .rating {
        width: 30%
    }
    .mainComingWrapper .flexContainer .movie .detail .rating .icon,
    .mainShowingWrapper .flexContainer .movie .detail .rating .icon,
    .mainActivityWrapper .flexContainer .movie .detail .rating .icon {
        width: 35%;
        height: 24px
    }
    .mainComingWrapper .flexContainer .movie .detail .rating .value,
    .mainShowingWrapper .flexContainer .movie .detail .rating .value,
    .mainActivityWrapper .flexContainer .movie .detail .rating .value {
        line-height: 24px
    }
    .mainComingWrapper .flexContainer .movie .detail .like,
    .mainShowingWrapper .flexContainer .movie .detail .like,
    .mainActivityWrapper .flexContainer .movie .detail .like {
        width: 38%
    }
    .mainComingWrapper .flexContainer .movie .detail .like .icon,
    .mainShowingWrapper .flexContainer .movie .detail .like .icon,
    .mainActivityWrapper .flexContainer .movie .detail .like .icon {
        width: 30%;
        height: 22px
    }
    .mainComingWrapper .flexContainer .movie .detail .like .value,
    .mainShowingWrapper .flexContainer .movie .detail .like .value,
    .mainActivityWrapper .flexContainer .movie .detail .like .value {
        line-height: 20px
    }
    .mainComingWrapper .flexContainer .movie .detail .comment,
    .mainShowingWrapper .flexContainer .movie .detail .comment,
    .mainActivityWrapper .flexContainer .movie .detail .comment {
        width: 32%
    }
    .mainComingWrapper .flexContainer .movie .detail .comment .icon,
    .mainShowingWrapper .flexContainer .movie .detail .comment .icon,
    .mainActivityWrapper .flexContainer .movie .detail .comment .icon {
        width: 35%;
        height: 23px
    }
    .mainComingWrapper .flexContainer .movie .detail .comment .value,
    .mainShowingWrapper .flexContainer .movie .detail .comment .value,
    .mainActivityWrapper .flexContainer .movie .detail .comment .value {
        line-height: 22px
    }
    .mainShowingWrapper .movie:last-child {
        display: inline-block
    }
    .mainComingWrapper .movie:last-child,
    .mainComingWrapper .movie:nth-last-child(2) {
        display: none
    }
}

.MainTopTen {
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
    padding: 20px
}

.MainTopTen.busy .dataStatus .busy {
    margin: 30px auto 0
}

.MainTopTen strong {
    display: block;
    font-size: 1.3em;
    line-height: 2.2em;
    color: #FFF;
    padding-left: 20px
}

.MainTopTen .datas {
    margin-top: 20px;
    width: 100%
}

.MainTopTen .datas .row {
    cursor: pointer
}

.MainTopTen .datas .row.odd {
    background: #303030
}

.MainTopTen .datas .row:hover {
    -webkit-transition: background-color linear 0.3s;
    -moz-transition: background-color linear 0.3s;
    -ms-transition: background-color linear 0.3s;
    transition: background-color linear 0.5s;
    background-color: #444
}

.MainTopTen .datas .cell {
    vertical-align: top
}

.MainTopTen .datas .row:last-child .cell {
    border-bottom: none
}

.MainTopTen .datas .name {
    color: #CCC;
    font-size: 1em;
    margin: 20px 10px
}

.MainTopTen .datas .row:hover .name {
    color: #FFD800
}

.MainTwoColumns {
    width: 100%;
    max-width: 1004px;
    margin: 0 auto
}

.MainTwoColumns>.left {
    width: 100%;
    max-width: 700px;
    float: left
}

.MainTwoColumns>.left .MainShowing {
    background: url(../images/section-bgs/2.png) repeat
}

.MainTwoColumns>.left .MainComing {
    background: url(../images/section-bgs/1.png) repeat
}

.MainTwoColumns>.left .MainActivity {
    background: url(../images/section-bgs/2.png) repeat
}

.MainTwoColumns>.right {
    width: 100%;
    max-width: 300px;
    padding-top: 20px;
    float: right;
    background: url(../images/section-bgs/3.png) repeat
}

.MainTwoColumns>.right .rightBanner {
    text-align: center
}

@media screen and (max-width: 1023px) {
    .MainTwoColumns>.left {
        float: none;
        margin: 0 auto
    }
    .MainTwoColumns>.right {
        float: none;
        max-width: 700px;
        margin: 0 auto
    }
}

.MapViewer {
    width: 90%;
    height: 90%;
    text-align: center;
    background-color: #000;
    border-radius: 5px;
    border: 1px solid #333
}

.MapViewer>.inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.MapViewer>.inner>div {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%
}

.MapViewer>.inner>div.top {
    top: 0;
    height: 40px
}

.MapViewer>.inner>div.mid {
    top: 40px;
    bottom: 0
}

.MapViewer .icon.close {
    float: right;
    margin: 5px 10px 0 0
}

.MapViewer iframe {
    margin: auto;
    width: 100%;
    height: 100%
}

.MicroFilm #page>.mid {
    background: none
}

.MicroFilm #page>.mid>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding: 30px 20px 100px 20px
}

.MicroFilm strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.MicroFilm .layout {
    margin-top: 40px
}

.MicroFilm .layout>.left {
    float: left;
    width: 25%;
    padding-right: 20px;
    border-right: 1px solid #222
}

.MicroFilm .layout>.right {
    float: right;
    width: 75%;
    padding-left: 20px
}

.MicroFilm .miniFilters {
    width: 100%;
    padding: 10px 5px;
    display: none
}

.MicroFilm .miniFilters select {
    width: 100%;
    font-size: 1.2em;
    padding: 5px 10px
}

.MicroFilm .filterItem {
    margin: 0 auto 30px auto;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px
}

.MicroFilm .filterItem:hover {
    background-color: #222
}

.MicroFilm .filterItem.selected {
    background-color: #333
}

.MicroFilm .filterItem.selected .title {
    color: #FFD800
}

.MicroFilm .filterItem .banner {
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    background: #636363 url(../images/scrollpane/watermark-100x32.png) center center no-repeat
}

.MicroFilm .filterItem .banner img {
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.MicroFilm .filterItem .title {
    display: block;
    margin-top: 10px;
    color: #FFF
}

.MicroFilm .filterItem .count {
    display: inline-block;
    margin-left: 5px
}

.MicroFilm .filterItem .description {
    display: block;
    margin-top: 5px;
    max-height: 42px;
    overflow: hidden
}

.MicroFilm .datas {
    width: 100%
}

.MicroFilm .datas .movieItem {
    float: left;
    padding: 10px;
    margin: 0 10px 1px 0;
    width: 220px;
    height: 253px;
    position: relative;
    background: url(../images/scrollpane/bg-normal.png) repeat;
    border: 1px solid #333
}

.MicroFilm .datas .movieItem:hover {
    background: url(../images/scrollpane/bg-active.png) repeat
}

.MicroFilm .datas .movieItem:hover .name {
    color: #FFD800
}

.MicroFilm .datas .movieItem .video {
    position: relative;
    width: 200px;
    height: 150px;
    overflow: hidden;
    margin: 10px auto 0 auto
}

.MicroFilm .datas .movieItem .video img {
    position: absolute;
    top: -10px;
    width: 200px;
    height: 150px;
    border: 0
}

.MicroFilm .datas .movieItem .video img.thumbnail {
    background-color: #666
}

.MicroFilm .datas .movieItem .video img.play {
    background: url(../images/btn-play.png) center center no-repeat;
    cursor: pointer
}

.MicroFilm .datas .movieItem .caption {
    margin-top: 5px;
    width: 100%
}

.MicroFilm .datas .movieItem .name {
    color: #FFF;
    font-size: 1.2em;
    width: 100%;
    height: 35px
}

.MicroFilm .datas .movieItem .description {
    margin-top: 5px
}

.backgroundsize.MicroFilm.busy .data-status {
    background-image: url(../images/busy@2x.gif);
    background-size: 16px 16px
}

.backgroundsize.MicroFilm .filterItem .banner {
    background-image: url(../images/scrollpane/watermark-200x64.png);
    background-size: 100px 32px
}

.backgroundsize.MicroFilm .filterItem[data-id="0"] {
    display: none
}

.backgroundsize.MicroFilm .datas .movieItem .video img.play {
    background-image: url(../images/btn-play@2x.png);
    background-size: 24px 24px
}

@media screen and (max-width: 639px) {
    .MicroFilm strong {
        display: block;
        text-align: center
    }
    .MicroFilm .layout>.left {
        float: none;
        display: none
    }
    .MicroFilm .layout>.right {
        float: none;
        width: 100%;
        padding-left: 0
    }
    .MicroFilm .miniFilters {
        display: block;
        overflow: hidden
    }
    .MicroFilm .datas {
        padding: 5px;
        min-height: 300px
    }
    .MicroFilm .datas .movieItem {
        float: none;
        width: 100%;
        height: 82px;
        padding: 5px
    }
    .MicroFilm .datas .movieItem .video {
        width: 80px;
        height: 60px;
        margin: 0;
        float: left
    }
    .MicroFilm .datas .movieItem .video img {
        top: 10px;
        width: 80px;
        height: 60px
    }
    .MicroFilm .datas .movieItem .caption {
        margin-left: 5px;
        float: left;
        width: 65%
    }
    .MicroFilm .datas .movieItem .name {
        font-size: 1em;
        height: 30px
    }
}

.MicroFilmPlayer {
    width: 90%;
    height: 90%;
    text-align: center;
    background-color: #000;
    border-radius: 5px;
    border: 1px solid #333
}

.MicroFilmPlayer>.inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.MicroFilmPlayer>.inner>div {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%
}

.MicroFilmPlayer>.inner>div.top {
    top: 0;
    height: 40px
}

.MicroFilmPlayer>.inner>div.mid {
    top: 40px;
    bottom: 50%
}

.MicroFilmPlayer>.inner>div.bottom {
    bottom: 0;
    height: 50%;
    padding: 10px;
    text-align: left;
    overflow: auto;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch
}

.MicroFilmPlayer>.inner>div.bottom>.inner {
    margin: 20px auto 0 auto;
    width: 560px
}

.MicroFilmPlayer .icon.close {
    float: right;
    margin: 5px 10px 0 0
}

.MicroFilmPlayer iframe {
    margin: auto;
    width: 100%;
    height: 100%
}

.MicroFilmPlayer .name {
    color: #FFF;
    font-size: 1.2em;
    margin-top: 10px
}

.MicroFilmPlayer .synopsis {
    margin-top: 10px;
    line-height: 1.2em
}

.MicroFilmPlayer .infoDict {
    margin-top: 20px
}

.MicroFilmPlayer .infoDict .cell {
    padding: 3px 5px 3px 0
}

.MicroFilmPlayer .infoDict .cell.key {
    width: 80px
}

.MicroFilmPlayer .infoDict .cell.value {
    width: auto
}

@media screen and (max-width: 639px) {
    .MicroFilmPlayer>.inner>div.bottom>.inner {
        width: 100%
    }
}

.MovieDetail #page>.mid>.inner>.top {
    min-height: 300px
}

.MovieDetail #page>.mid>.inner>.bottom {
    min-height: 300px
}

.MovieDetail #page>.mid>.inner>.hide {
    display: none !important
}

#page .mid .inner .showtime-button {
    width: 160px;
    height: 160px;
    background: #FFD800;
    border-radius: 50%;
    position: fixed;
    right: 32px;
    bottom: 32px;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
    flex-flow: column;
    cursor: pointer;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    padding-top: 16px
}

#page .mid .inner .showtime-button .ticket-logo {
    background-image: url("../../../../assets/eigaland/images/ticket.svg");
    background-position: center center;
    background-size: contain;
    width: 48px;
    height: 48px;
    margin-top: 10px
}

@media screen and (max-width: 799px) {
    #page .mid .inner .showtime-button {
        width: 100%;
        height: 50px;
        border-radius: 0;
        left: 0;
        bottom: 0;
        flex-flow: row;
        flex-direction: row-reverse;
        flex-wrap: wrap;
        font-size: 1.3em;
        padding-top: unset;
        padding-left: 4px;
        font-weight: bold
    }
    #page .mid .inner .showtime-button .ticket-logo {
        width: 32px;
        height: 32px;
        margin: 0 5px
    }
}

.MovieDetailTab {
    width: 100%;
    border-bottom: 1px solid #444;
    z-index: 3;
    margin-top: 20px;
    height: 58px
}

.MovieDetailTab>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    margin: auto;
    padding: 0 20px;
    overflow: visible
}

.MovieDetailTab .item {
    position: relative;
    top: 8px;
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;
    background: url(../images/section-bgs/2.png) repeat;
    margin-right: 4px;
    border: 1px solid #444;
    border-bottom: none;
    padding: 15px 30px
}

.MovieDetailTab .item:hover {
    color: #AAA;
    border-bottom: none
}

.MovieDetailTab .item.selected {
    top: 0;
    background: none;
    padding: 19px 30px;
    border-bottom: 1px solid #000
}

@media screen and (max-width: 639px) {
    .MovieDetailTab .item {
        top: 7px
    }
    .MovieDetailTab .item.selected {
        top: 4px
    }
}

.MovieHead {
    background: none
}

.MovieHead .hide {
    display: none
}

.MovieHead>.top {
    position: relative;
    width: 100%
}

.MovieHead>.top>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 430px;
    margin: auto
}

.MovieHead>.top>.inner>div {
    position: absolute;
    top: 0;
    bottom: 0
}

.MovieHead>.top>.inner>div.left {
    left: 0;
    width: 50%
}

.MovieHead>.top>.inner>div.left>.inner {
    position: relative;
    width: 100%;
    height: 100%
}

.MovieHead>.top>.inner>div.left>.inner>div {
    position: absolute;
    top: 0;
    bottom: 0
}

.MovieHead>.top>.inner>div.left>.inner>div.left {
    left: 0;
    width: 50%
}

.MovieHead>.top>.inner>div.left>.inner>div.right {
    left: 50%;
    width: 50%;
    right: 0
}

.MovieHead>.top>.inner>div.right {
    left: 50%;
    width: 50%;
    right: 0;
    border-left: 1px solid #222
}

.MovieHead>.mid {
    width: 100%;
    height: auto
}

.MovieHead>.mid>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    margin: auto
}

.MovieHead>.bottom {
    width: 100%
}

.MovieHead>.bottom>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    margin: auto;
    padding: 40px 10px;
    border-top: 1px solid #222
}

.MovieHead>.bottom>.inner>.item {
    float: left;
    width: 190px;
    height: 130px
}

.MovieHead>.bottom .screenshot-template {
    padding: 20px
}

.MovieHead>.bottom .screenshot-template .inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    margin: auto;
    padding: 30px 0;
    border-top: 1px solid #222
}

.MovieHead>.bottom .screenshot-template .inner strong {
    color: #FFF;
    font-size: 1.3em;
    padding: 0 10px
}

.MovieHead>.bottom .screenshot-template .inner .ssHolder .item {
    margin: 10px 20px 0 10px
}

.MovieHead .poster {
    width: 224px;
    height: 321px;
    margin: 40px auto 0 auto;
    border: 1px solid #363636;
    box-shadow: 0px 0px 2px 2px rgba(9, 9, 9, 0.75);
    background: url(../images/scrollpane/bg-normal.png) repeat
}

.MovieHead .thumbnail {
    width: 204px;
    height: 301px;
    background: #636363 url(../images/scrollpane/watermark-68x68x34.png) center center no-repeat;
    margin: 10px auto;
    border: none
}

.MovieHead .thumbnail img {
    width: 100%;
    height: 100%;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s
}

.MovieHead .fields {
    margin: 40px 0 0 0;
    text-align: center
}

.MovieHead .name {
    color: #FFF;
    font-size: 1.4em;
    line-height: 1.6em
}

.MovieHead .openDate {
    margin-top: 20px
}

.MovieHead .rating {
    margin-top: 30px;
    color: #FFD800;
    font-size: 5em;
    font-family: Helvetica, Arial, sans-serif
}

.MovieHead .stars {
    width: 143px;
    height: 24px;
    background: url(../images/star.png) center top no-repeat;
    margin: 10px auto 0 auto
}

.MovieHead .stars.star-0 {
    background-position: center 0
}

.MovieHead .stars.star-0-5 {
    background-position: center -24px
}

.MovieHead .stars.star-1 {
    background-position: center -48px
}

.MovieHead .stars.star-1-5 {
    background-position: center -72px
}

.MovieHead .stars.star-2 {
    background-position: center -96px
}

.MovieHead .stars.star-2-5 {
    background-position: center -120px
}

.MovieHead .stars.star-3 {
    background-position: center -144px
}

.MovieHead .stars.star-3-5 {
    background-position: center -168px
}

.MovieHead .stars.star-4 {
    background-position: center -192px
}

.MovieHead .stars.star-4-5 {
    background-position: center -216px
}

.MovieHead .stars.star-5 {
    background-position: center -240px
}

.MovieHead .commentCount {
    margin-top: 10px
}

.MovieHead .infoDict {
    height: 100%;
    padding: 50px 20px 0 20px
}

.MovieHead .infoDict .fb-like {
    width: 100%;
    height: 22px;
    color: #FFF
}

.MovieHead .infoDict .data {
    overflow: auto;
    height: 100%;
    margin-top: 10px
}

.MovieHead .infoDict .cell {
    padding: 4px 0;
    line-height: 1.2em
}

.MovieHead .infoDict .cell.key {
    width: 80px;
    color: #CCC;
    padding-right: 10px
}

.MovieHead .infoDict .copyright {
    padding: 10px 0;
    line-height: 1.2em;
    font-size: 80%
}

.MovieHead .infoDict .officialPage {
    display: inline-block;
    padding: 20px 0;
    line-height: 1.2em;
    color: #CCC;
    border-radius: 4px
}

.MovieHead .actions {
    margin-top: 10px
}

.MovieHead .actions span {
    display: inline-block;
    line-height: 22px;
    vertical-align: middle
}

.MovieHead .actions .bookmark .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../images/bookmark.png) no-repeat;
    margin-right: 4px
}

.MovieHead .actions .bookmark .icon.on {
    background: url(../images/bookmark_on.png) no-repeat
}

.MovieHead .actions .notifyMe .icon {
    display: inline-block;
    width: 20px;
    height: 20px;
    background: url(../images/megaphone_off.png) no-repeat;
    margin-right: 4px
}

.MovieHead .actions .notifyMe .icon.on {
    background: url(../images/megaphone_on.png) no-repeat
}

.MovieHead .shares {
    margin-top: 50px;
    text-align: center
}

.MovieHead .shares .widget {
    width: 110px;
    margin: 10px auto 0 auto
}

.MovieHead .shares .widget a span {
    border-radius: 32px;
    text-indent: 1px
}

.MovieHead .promotion {
    top: 90% !important;
    left: 10px
}

.MovieHead .promotion .caption {
    color: #FFD800;
    font-size: 1.1em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.2em
}

.MovieHead .promotion .caption img {
    width: 14px;
    height: 14px
}

.MovieHead .synopsis {
    padding: 40px 10px;
    font-size: 1.1em;
    line-height: 1.7em;
    border-top: 1px solid #222
}

.MovieHead .synopsis strong {
    color: #FFF;
    font-size: 1.3em
}

.MovieHead .synopsis .value {
    margin-top: 5px
}

.MovieHead .extra strong {
    color: #FFF;
    font-size: 1.3em
}

.MovieHead .extra .content {
    display: block;
    width: 180px;
    height: 100px;
    margin: 10px auto;
    border: 2px solid #333;
    position: relative;
    overflow: hidden;
    background-color: #333;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover
}

.MovieHead .extra .content:hover {
    border-color: #666
}

.MovieHead .extra .content img {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border: none;
    cursor: pointer
}

.MovieHead .trailer .content img {
    background: url(../images/btn-play.png) center center no-repeat
}

.MovieHead .screenshot strong.hide {
    visibility: hidden
}

.MovieHead .related {
    width: 100%
}

.MovieHead .related .inner {
    max-width: 1004px;
    margin: auto;
    padding: 40px 10px;
    border-top: 1px solid #222
}

.MovieHead .related .inner strong {
    color: #FFF;
    font-size: 1.3em
}

.MovieHead .related .inner .posts {
    display: flex;
    display: -webkit-flex;
    margin: 20px 0 0 5px
}

.MovieHead .related .inner .posts div {
    flex: 1;
    max-width: 326px
}

.MovieHead .related .inner .posts div div {
    width: 100px;
    height: 70px;
    min-width: auto;
    float: left
}

.MovieHead .related .inner .posts div div img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.MovieHead .related .posts>div>a {
    position: absolute;
    width: 18%;
    max-width: 200px;
    margin: 0 0 0 110px;
    color: #999999;
    font-size: 1.1em;
    line-height: 1.7em;
    max-height: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical
}

.rgba .MovieHead .extra .content .caption {
    background-color: rgba(0, 0, 0, 0.8)
}

.chi .MovieHead .infoDict .cell.key {
    width: 100px
}

.chi .MovieHead .synopsis {
    letter-spacing: 3px
}

@media screen and (max-width: 799px) {
    .MovieHead>.top>.inner {
        height: inherit
    }
    .MovieHead>.top>.inner>div {
        position: inherit;
        top: inherit;
        bottom: inherit;
        height: inherit;
        width: 100%
    }
    .MovieHead>.top>.inner>div.left {
        width: 100%;
        left: inherit;
        height: 288px
    }
    .MovieHead>.top>.inner>div.left>.inner {
        height: 334px
    }
    .MovieHead>.top>.inner>div.left>.inner>div.left {
        width: 150px;
        padding-left: 20px
    }
    .MovieHead>.top>.inner>div.left>.inner>div.right {
        left: 150px;
        width: auto;
        padding: 0 20px
    }
    .MovieHead>.top>.inner>div.right {
        width: 100%;
        left: inherit;
        right: inherit;
        overflow: visible;
        border-left: none;
        border-top: 1px solid #222
    }
    .MovieHead>.bottom .screenshot-template {
        border-top: 1px solid #222
    }
    .MovieHead>.bottom .screenshot-template .inner {
        border: none
    }
    .MovieHead>.bottom .screenshot-template .inner strong {
        padding: 0
    }
    .MovieHead>.bottom .screenshot-template .inner .ssHolder {
        display: flex;
        overflow-x: scroll
    }
    .MovieHead>.bottom .screenshot-template .inner .ssHolder .content {
        margin: 10px 30px 10px 0
    }
    .MovieHead>.bottom .screenshot-template .inner ::-webkit-scrollbar {
        height: 0.1px
    }
    .MovieHead .poster {
        width: 130px;
        height: 187px;
        margin-top: 20px
    }
    .MovieHead .thumbnail {
        width: 120px;
        height: 177px;
        margin: 5px auto
    }
    .MovieHead .fields {
        text-align: left;
        margin-top: 20px
    }
    .MovieHead .name {
        font-size: 1.2em;
        max-height: 52px;
        overflow: hidden;
        text-overflow: ellipsis
    }
    .MovieHead .rating {
        margin-top: 20px;
        font-size: 2em
    }
    .MovieHead .stars {
        margin: 10px 0 0 0
    }
    .MovieHead .shares {
        margin-top: 20px;
        text-align: left
    }
    .MovieHead .shares .widget {
        width: 150px;
        margin: 10px 0 0 0
    }
    .MovieHead .promotion {
        left: 20px;
        top: 70% !important
    }
    .MovieHead .infoDict {
        padding: 20px
    }
    .MovieHead .infoDict .data {
        height: inherit
    }
    .MovieHead .infoDict .data .officialPage {
        border: 1px solid white;
        padding: 10px 80px;
        margin: 10px 20px
    }
    .MovieHead .synopsis {
        padding: 20px
    }
    .MovieHead .related .inner {
        padding: 20px 20px 0px 20px
    }
    .MovieHead .related .inner .posts {
        flex-flow: row wrap
    }
    .MovieHead .related .inner .posts div {
        min-width: 100%;
        margin-bottom: 15px
    }
    .MovieHead .related .posts>div>a {
        max-width: 100%;
        width: auto;
        padding-right: 20px
    }
}

@media screen and (max-width: 414px) {
    .MovieHead>.bottom>.inner>.item {
        margin: 10px auto 20px auto
    }
}

.backgroundsize .MovieHead .thumbnail {
    background-image: url(../images/scrollpane/watermark-68x68.png);
    background-size: 68px 68px
}

.backgroundsize .MovieHead .stars {
    background-image: url(../images/star@2x.png);
    background-size: 143px 266px
}

.backgroundsize .MovieHead .actions .bookmark .icon {
    background-image: url(../images/bookmark@2x.png);
    background-size: 20px 20px
}

.backgroundsize .MovieHead .actions .bookmark .icon.on {
    background-image: url(../images/bookmark_on@2x.png);
    background-size: 20px 20px
}

.backgroundsize .MovieHead .actions .notifyMe .icon {
    background-image: url(../images/megaphone_off@2x.png);
    background-size: 20px 20px
}

.backgroundsize .MovieHead .actions .notifyMe .icon.on {
    background-image: url(../images/megaphone_on@2x.png);
    background-size: 20px 20px
}

.backgroundsize .MovieHead .trailer .content img {
    background-image: url(../images/btn-play@2x.png);
    background-size: 24px 24px
}

.MovieScrollPane {
    width: 100%;
    height: 430px
}

.MovieScrollPane * {
    -webkit-tap-highlight-color: transparent
}

.MovieScrollPane .inner {
    width: 100%;
    height: 100%;
    position: relative
}

.MovieScrollPane .controls {
    position: absolute;
    width: 100%;
    z-index: 4;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent
}

.MovieScrollPane .controls>div {
    position: absolute;
    width: 60px;
    height: 400px;
    top: 0;
    bottom: 0
}

.MovieScrollPane .controls>div.left {
    left: 10px;
    background: url(../images/scrollpane/shadow-left.png) center right no-repeat;
    z-index: 5
}

.MovieScrollPane .controls>div.right {
    right: 10px;
    background: url(../images/scrollpane/shadow-right.png) center left no-repeat;
    z-index: 5
}

.MovieScrollPane .controls a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px
}

.MovieScrollPane .controls a.prev {
    background: url(../images/scrollpane/arrow-left.png) center left no-repeat
}

.MovieScrollPane .controls a.next {
    background: url(../images/scrollpane/arrow-right.png) center right no-repeat
}

.MovieScrollPane .controls .dataStatus {
    width: 100%;
    left: 0;
    right: 0;
    z-index: 1
}

.MovieScrollPane .controls .dataStatus .busy {
    margin: 180px auto
}

.MovieScrollPane .iscrollContainer {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 415px;
    padding: 10px 35px
}

.MovieScrollPane .iscroll {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -ms-touch-action: none
}

.MovieScrollPane .iscroll>.content {
    position: absolute;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    display: inline-block;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none
}

.MovieScrollPane .iscroll>.content>.item {
    width: 204px;
    height: 390px;
    float: left;
    overflow: hidden;
    padding: 10px 5px 5px 5px;
    list-style-type: none;
    -webkit-tap-highlight-color: transparent
}

.backgroundsize .MovieScrollPane .controls a.prev {
    background-image: url(../images/scrollpane/arrow-left@2x.png);
    background-size: 15px 30px
}

.backgroundsize .MovieScrollPane .controls a.next {
    background-image: url(../images/scrollpane/arrow-right@2x.png);
    background-size: 15px 30px
}

@media screen and (max-width: 639px) {
    .MovieScrollPane .iscroll>.content>.item {
        width: 204px;
        padding: 10px 5px 5px 5px
    }
    .MovieScrollPane .iscroll>.content>.item>.MoviePoster {
        width: 194px;
        margin: auto
    }
}

.MovieShowtimes .center {
    margin: 0 auto
}

.MovieShowtimes>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    margin: auto;
    padding-bottom: 50px
}

.MovieShowtimes .movie-name {
    font-size: 1.4em;
    line-height: 1.6em;
    margin: 1em 0 1em 1em
}

.MovieShowtimes .movie-name a {
    color: #fff
}

.MovieShowtimes .mobileDateControl {
    position: relative
}

.MovieShowtimes .mobileDateControl.iscrollContainer {
    padding-top: 30px;
    overflow: hidden;
    width: 100%
}

.MovieShowtimes .mobileDateControl.iscrollContainer .selectedborder {
    height: 2px;
    border-bottom: 1px solid #FFD800
}

.MovieShowtimes .mobileDateControl.iscrollContainer .iscroll ul {
    list-style: none;
    font-size: 0;
    padding: 0;
    margin: 0
}

.MovieShowtimes .mobileDateControl.iscrollContainer .iscroll li {
    list-style: none;
    display: inline-block;
    font-size: 15px;
    padding: 0 30px;
    margin: 0;
    text-align: center;
    padding-bottom: 5px
}

.MovieShowtimes .mobileDateControl.iscrollContainer .iscroll li.picker {
    cursor: pointer
}

.MovieShowtimes .mobileDateControl.iscrollContainer .iscroll li.dateSelected {
    color: #FFD800
}

.MovieShowtimes .controls {
    width: 100%;
    padding: 20px 20px 30px 20px;
    background-color: #000;
    display: none
}

.MovieShowtimes .label {
    padding: 15px 20px 0px 20px;
    display: inline-block
}

.MovieShowtimes .label span {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-right: 4px
}

.MovieShowtimes .label span.green {
    background-color: green
}

.MovieShowtimes .label span.gray {
    background-color: gray
}

.MovieShowtimes.hasSchedule .controls {
    display: block
}

.MovieShowtimes .item {
    background-color: #000;
    padding: 0 20px;
    margin: 20px auto;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s
}

.MovieShowtimes .head {
    color: #FFF;
    font-size: 1.2em
}

.MovieShowtimes .head .version {
    font-size: 70%;
    display: inline-block;
    margin-left: 5px;
    padding: 4px;
    border-radius: 4px;
    background-color: gray
}

.MovieShowtimes .data {
    padding-top: 20px
}

.MovieShowtimes .table {
    width: 100%;
    border-spacing: 2px;
    margin-top: 5px
}

.MovieShowtimes .cell {
    width: 12.5%;
    height: 25px;
    text-align: center;
    background-color: #222;
    color: #FFF;
    vertical-align: middle;
    cursor: default
}

.MovieShowtimes .cell.green {
    background-color: green
}

.MovieShowtimes .cell.orange {
    background-color: #e38e00
}

.MovieShowtimes .cell.red {
    background-color: red
}

.MovieShowtimes .cell.grey {
    background-color: gray
}

.MovieShowtimes .cell.full {
    background-color: #8b0000
}

.MovieShowtimes .cell[data-url] {
    cursor: pointer
}

.MovieShowtimes .cell[data-url]:hover {
    -webkit-animation: ticketPurchase 0.5s;
    animation: ticketPurchase 0.5s
}

.MovieShowtimes .description {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-flex-flow: column;
    -moz-flex-flow: column;
    flex-flow: column;
    border: 1px #fff solid;
    padding: 10px;
    margin: 0 auto 5px auto;
    width: 95%
}

.MovieShowtimes .description .msg {
    width: 100%;
    color: #d3d3d3;
    font-size: 0.8em;
    line-height: 25px;
    text-space: 1px;
    margin-bottom: 15px
}

.MovieShowtimes .description .section {
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    color: #fff
}

.MovieShowtimes .description .section span {
    width: 50px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    margin-right: 7px
}

.MovieShowtimes .description .section .green {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 33%;
    margin-bottom: 5px
}

.MovieShowtimes .description .section .green span {
    background-color: green
}

.MovieShowtimes .description .section .orange {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 33%;
    margin-bottom: 5px
}

.MovieShowtimes .description .section .orange span {
    background-color: #e38e00
}

.MovieShowtimes .description .section .red {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 33%;
    margin-bottom: 5px
}

.MovieShowtimes .description .section .red span {
    background-color: red
}

.MovieShowtimes .description .section .full {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 33%;
    margin-bottom: 5px
}

.MovieShowtimes .description .section .full span {
    background-color: darkred
}

.MovieShowtimes .description .section .gray {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    width: 33%;
    margin-bottom: 5px
}

.MovieShowtimes .description .section .gray span {
    background-color: gray
}

.MovieShowtimes .caution p {
    font-size: 0.8em;
    margin: 10px 20px
}

.MovieShowtimes .caution img {
    margin: 0px 5px;
    height: 20px
}

.MovieShowtimes select {
    font-size: 1.2em;
    padding: 5px;
    margin: 10px 10px 0 0;
    outline: none;
    width: 100%
}

.MovieShowtimes .select-wrapper {
    overflow: hidden;
    width: 180px;
    margin-right: 9px;
    float: left
}

@media screen and (max-width: 799px) {
    .MovieShowtimes>.inner>div {
        width: 95% !important
    }
    .MovieShowtimes .inner #showtimeScroll {
        width: 100% !important
    }
    .MovieShowtimes .inner .dataStatus {
        width: 100% !important
    }
    .MovieShowtimes .inner #div-hotmob-ad-eigaland_mobile_showtime_dynamic-1 {
        width: 100% !important
    }
    .MovieShowtimes select {
        width: 100%;
        margin: 10px auto 0 auto
    }
    .MovieShowtimes .cell {
        font-family: Arial, Helvetica, sans-serif;
        font-size: 0.9em;
        height: 26px
    }
    .MovieShowtimes .data {
        margin: 0 auto
    }
    .MovieShowtimes .data .item {
        padding: 0 5px
    }
    .MovieShowtimes .description {
        color: #d3d3d3;
        font-size: 0.8em;
        margin-top: 10px
    }
    .MovieShowtimes .description .msg {
        line-height: 15px
    }
    .MovieShowtimes .description .section {
        color: #d3d3d3;
        white-space: nowrap
    }
    .MovieShowtimes .description .section span {
        width: 35px
    }
    .MovieShowtimes .caution {
        line-height: 17px
    }
    .MovieShowtimes .caution p {
        margin: 0 -1px 0 20px
    }
    .MovieShowtimes .movie-name {
        font-size: 1.2em;
        max-height: 52px;
        overflow: hidden;
        text-overflow: ellipsis
    }
    .MovieShowtimes .label {
        display: none
    }
}

@-webkit-keyframes ticketPurchase {
    0% {
        -webkit-filter: brightness(100%)
    }
    50% {
        -webkit-filter: brightness(130%)
    }
    100% {
        -webkit-filter: brightness(100%)
    }
}

@keyframes ticketPurchase {
    0% {
        filter: brightness(100%)
    }
    50% {
        filter: brightness(130%)
    }
    100% {
        filter: brightness(100%)
    }
}

.NotFound {
    background: none;
    text-align: center
}

.NotFound>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.NotFound .content {
    padding: 160px 10px
}

.NotFound .content.hide {
    display: none
}

.NotFound strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.NotFound p {
    font-size: 1.3em;
    line-height: 1.9em
}

.NotFound a {
    color: #ccc;
    font-size: 0.8em
}

@media screen and (max-width: 639px) {
    .NotFound .content {
        padding: 60px 20px
    }
}

.NotifyMeManager {
    background: none;
    min-height: 400px
}

.NotifyMeManager>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    margin: auto;
    padding: 50px 10px
}

.NotifyMeManager strong {
    color: #FFF;
    font-size: 1.4em
}

.NotifyMeManager .data {
    margin: 40px 0
}

.NotifyMeManager .data .row {
    cursor: pointer
}

.NotifyMeManager .data .row:nth-child(even) {
    background-color: #121212
}

.NotifyMeManager .data .row:hover {
    -webkit-transition: background-color linear 0.3s;
    -moz-transition: background-color linear 0.3s;
    -ms-transition: background-color linear 0.3s;
    transition: background-color linear 0.5s;
    background-color: #333
}

.NotifyMeManager .data .cell {
    vertical-align: top;
    padding: 10px;
    border-bottom: 1px solid #333
}

.NotifyMeManager .data .row:last-child .cell {
    border-bottom: none
}

.NotifyMeManager .data .cell.poster {
    width: 80px
}

.NotifyMeManager .data .cell.info {
    width: auto
}

.NotifyMeManager .data .cell.action {
    width: 120px
}

.NotifyMeManager .thumbnail {
    width: 54px;
    height: 80px;
    background: #636363 url(../images/scrollpane/watermark-68x68x34.png) center center no-repeat
}

.NotifyMeManager .name {
    color: #FFF;
    font-size: 1.3em
}

.NotifyMeManager .data .row:hover .name {
    color: #FFD800
}

.NotifyMeManager .btn.remove {
    background-color: #900
}

@media screen and (max-width: 639px) {
    .NotifyMeManager .data .cell.poster {
        width: 60px
    }
    .NotifyMeManager .data .cell.action {
        width: 80px
    }
    .NotifyMeManager .name {
        font-size: 1em
    }
}

.backgroundsize .NotifyMeManager .thumbnail {
    background-image: url(../images/scrollpane/watermark-68x68.png);
    background-size: 34px 34px
}

.privacy {
    background: none
}

.privacy>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.privacy .content {
    padding: 30px 10px 100px 10px
}

.privacy .content.hide {
    display: none
}

.privacy strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.privacy .section_header {
    padding-top: 30px;
    font-size: 1.3em;
    line-height: 1.9em;
    color: #FFF
}

.privacy .section_content {
    font-size: 1.1em;
    line-height: 1.4em
}

.privacy a {
    color: #ccc
}

.privacy ul,
.privacy ol {
    list-style-type: disc;
    padding-left: 20px
}

.privacy li {
    line-height: 1.4em;
    font-size: 1.1em
}

@media screen and (max-width: 639px) {
    .privacy .content {
        padding: 60px 20px
    }
}

.Register {
    background: none
}

.Register .inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding: 50px 50px 150px 50px
}

.Register strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF;
    display: block
}

.Register .intro {
    line-height: 22px
}

.Register .table {
    width: 500px;
    margin-top: 40px
}

.Register .row.hide {
    display: none !important
}

.Register .cell {
    padding: 5px;
    vertical-align: middle
}

.Register .cell.key {
    width: 124px
}

.Register .input.text {
    padding: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: none;
    background-color: #323232;
    box-shadow: inset 2px 2px 3px #000;
    color: #FFF
}

.Register textarea {
    height: 70px
}

.Register .actions {
    margin-top: 20px;
    width: 500px;
    padding-left: 130px
}

.Register .actions .btn {
    background-color: #06c;
    width: 120px
}

.Register .actions .btn:hover {
    background-color: #0172e3
}

.Register .form-status {
    margin-top: 30px;
    width: 500px;
    padding-left: 130px
}

.Register .note .value {
    line-height: 22px;
    padding-top: 20px
}

.Register .note a {
    text-decoration: underline
}

.Register .note a:hover {
    color: #fff
}

@media screen and (max-width: 639px) {
    .Register .inner {
        padding: 10px 10px 160px 10px
    }
    .Register .table {
        display: block;
        width: 100%
    }
    .Register .table>.row {
        display: block;
        margin-top: 20px
    }
    .Register .table>.row>.cell {
        display: block
    }
    .Register .cell.key,
    .Register .cell.value {
        width: 100%
    }
    .Register .actions {
        width: 100%;
        padding-left: 0
    }
    .Register .actions .btn {
        margin: auto
    }
    .Register .form-status {
        width: 100%;
        padding-left: 0;
        text-align: center
    }
    .Register .note .value {
        text-align: center
    }
}

.reply.busy {
    background-image: url(../images/busy@2x.gif);
    background-size: 16px 16px;
    width: 26px;
    height: 26px;
    border-radius: 5px;
    position: absolute;
    top: calc(50% - 13px);
    left: calc(50% - 13px);
    background-repeat: no-repeat;
    background-position: center
}

.hide {
    display: none
}

.replyContainer .top .movieName {
    display: block;
    margin-bottom: 15px
}

.replyContainer .mid {
    margin: 0 10px
}

.replyContainer .mid .userInfo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    margin-top: 10px
}

.replyContainer .mid .userInfo div {
    display: inline-block
}

.replyContainer .mid .userInfo div:nth-child(2) {
    vertical-align: top
}

.replyContainer .mid .userInfo .picture {
    background: #444 url(../images/avatars/default-84x84.png) center center no-repeat;
    background-size: 108% auto;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    border: none;
    padding: 1px;
    cursor: pointer;
    margin-right: 13px
}

.replyContainer .mid .userInfo .default {
    background: #444 url(../images/avatars/default-84x84.png) center center no-repeat;
    background-size: 108% auto;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    border: none;
    padding: 1px;
    cursor: pointer;
    margin-right: 13px
}

.replyContainer .mid .userInfo .userName {
    width: 100%;
    color: #FFD800;
    font-weight: bold;
    font-size: 1.2em
}

.replyContainer .mid .commentInfo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center
}

.replyContainer .mid .commentInfo .moment {
    font-size: 1.2em;
    line-height: 21px
}

.replyContainer .mid .commentInfo .stars {
    width: 148px;
    height: 24px;
    background: url(../images/star.png) center top no-repeat
}

.replyContainer .mid .commentInfo .stars.star-0 {
    background-position: center 0
}

.replyContainer .mid .commentInfo .stars.star-0-5 {
    background-position: center -28px
}

.replyContainer .mid .commentInfo .stars.star-1 {
    background-position: center -50px
}

.replyContainer .mid .commentInfo .stars.star-1-5 {
    background-position: center -73px
}

.replyContainer .mid .commentInfo .stars.star-2 {
    background-position: center -98px
}

.replyContainer .mid .commentInfo .stars.star-2-5 {
    background-position: center -120px
}

.replyContainer .mid .commentInfo .stars.star-3 {
    background-position: center -146px
}

.replyContainer .mid .commentInfo .stars.star-3-5 {
    background-position: center -168px
}

.replyContainer .mid .commentInfo .stars.star-4 {
    background-position: center -190px
}

.replyContainer .mid .commentInfo .stars.star-4-5 {
    background-position: center -212px
}

.replyContainer .mid .commentInfo .stars.star-5 {
    background-position: center -237px
}

.replyContainer .mid .subject {
    margin-top: 4px;
    margin-left: 5px;
    width: auto;
    color: #FFF;
    font-size: 1.2em;
    line-height: 1.5em;
    text-wrap: suppress;
    word-wrap: break-word;
    overflow: hidden;
    padding-bottom: 10px
}

.replyContainer .mid .content {
    font-size: 1.15em;
    line-height: 22px;
    margin: 5px;
    letter-spacing: 1px
}

.replyContainer .mid .actions {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    padding-bottom: 30px;
    margin-left: 5px
}

.replyContainer .mid .actions a {
    text-decoration: none
}

.replyContainer .mid .actions .thumb {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    padding-right: 10px;
    cursor: default
}

.replyContainer .mid .actions .thumb .icon {
    display: inline-block;
    width: 22px;
    text-indent: -9999px;
    background-position: center center;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 5px
}

.replyContainer .mid .actions .thumb.up .icon {
    height: 22px;
    background-size: 100% auto;
    background-image: url(../images/avatars/icon_likes@3x.png)
}

.replyContainer .mid .actions .thumb.down .icon {
    background-image: url(../images/comments/thumb-down@2x.png)
}

.replyContainer .mid .actions .thumb.comment .icon {
    height: 26px;
    background-size: 100% auto;
    background-image: url(../images/avatars/chatbox_white@3x.png)
}

.replyContainer .mid .actions .thumb .value {
    font-size: 1.3em;
    line-height: 26px;
    color: #fff;
    margin-right: 10px
}

.replyTemplate {
    padding: 30px 0;
    border-top: 1px solid #333;
    padding-left: 15px
}

.replyTemplate .userInfo {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center
}

.replyTemplate .userInfo .picture {
    background: #444 url(../images/avatars/default-84x84.png) center center no-repeat;
    background-size: 108% auto;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    border: none;
    padding: 1px;
    cursor: pointer;
    margin-right: 13px
}

.replyTemplate .userInfo .default {
    background: #444 url(../images/avatars/default-84x84.png) center center no-repeat;
    background-size: 108% auto;
    width: 48px;
    height: 48px;
    border-radius: 24px;
    border: none;
    padding: 1px;
    cursor: pointer;
    margin-right: 13px
}

.replyTemplate .userInfo .userName {
    margin: 3px auto;
    width: 100%;
    color: #FFD800;
    font-weight: bold;
    font-size: 1.2em
}

.replyTemplate .userInfo .moment {
    font-size: 1.1em;
    line-height: 21px
}

.replyTemplate .content {
    font-size: 1.15em;
    line-height: 22px;
    margin: 5px;
    letter-spacing: 1px
}

@media screen and (max-width: 639px) {
    .replyContainer.inner .bottom {
        padding: 10px 10px
    }
}

.ResetPassword {
    background: none
}

.ResetPassword .inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding: 50px 50px 150px 50px
}

.ResetPassword strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF;
    display: block;
    margin-top: 40px
}

.ResetPassword .table {
    width: 500px;
    margin-top: 10px
}

.ResetPassword .row.hide {
    display: none !important
}

.ResetPassword .cell {
    padding: 5px;
    vertical-align: top
}

.ResetPassword .cell.key {
    width: 120px
}

.ResetPassword .input.text {
    padding: 10px;
    border-radius: 5px;
    border: none;
    background-color: #323232;
    box-shadow: inset 2px 2px 3px #000;
    color: #FFF
}

.ResetPassword textarea {
    height: 70px
}

.ResetPassword .actions {
    margin-top: 30px;
    width: 500px;
    padding-left: 130px
}

.ResetPassword .actions .btn {
    background-color: #06c;
    width: 120px
}

.ResetPassword .actions .btn:hover {
    background-color: #0172e3
}

.ResetPassword .form-status {
    margin-top: 30px;
    width: 500px;
    padding-left: 130px
}

@media screen and (max-width: 639px) {
    .ResetPassword .inner {
        padding: 10px 10px 160px 10px
    }
    .ResetPassword .table {
        display: block;
        width: 100%
    }
    .ResetPassword .table>.row {
        display: block;
        margin-top: 20px
    }
    .ResetPassword .table>.row>.cell {
        display: block
    }
    .ResetPassword .cell.key,
    .ResetPassword .cell.value {
        width: 100%
    }
    .ResetPassword .actions {
        width: 100%;
        padding-left: 0
    }
    .ResetPassword .actions .btn {
        margin: auto
    }
    .ResetPassword .form-status {
        width: 100%;
        padding-left: 0;
        text-align: center
    }
}

.Search {
    background: none
}

.Search>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding: 30px 20px 100px 20px
}

.Search strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.Search .datas {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    width: 100%
}

.Search .datas .movie {
    display: inline-block;
    padding: 5px;
    width: 23%;
    height: auto;
    cursor: pointer;
    box-shadow: 0 0 2px 2px rgba(9, 9, 9, 0.75);
    background: url(../images/scrollpane/bg-normal.png) repeat;
    margin: 5px 0.5%
}

.Search .datas .movie:hover {
    background: url(../images/scrollpane/bg-active.png) repeat
}

.Search .datas .movie .thumbnail {
    position: relative;
    background: #636363 url(../images/scrollpane/watermark-68x68.png) center center no-repeat;
    background-size: 25% auto;
    height: 0;
    padding-bottom: 140%;
    overflow: hidden
}

.Search .datas .movie .thumbnail img {
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
    margin: auto
}

.Search .datas .movie .thumbnail div.btnPlay {
    background: url(../images/btn-play.png) center center no-repeat;
    position: absolute;
    width: 29px;
    height: 29px;
    bottom: 6px;
    right: 6px;
    border: none;
    cursor: pointer;
    z-index: 1
}

.Search .datas .movie .promo-name {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    margin: 6px 0 5px 0
}

.Search .datas .movie .promo-name .promotion {
    width: 15%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center
}

.Search .datas .movie .promo-name .promotion .icon {
    width: 20px;
    height: 20px;
    background-image: url(../images/special_highlight_poster.png);
    background-position: center center;
    background-size: 100% auto
}

.Search .datas .movie .promo-name .name {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
    overflow: hidden;
    font-size: 1em;
    color: #FFF;
    line-height: 1.4em;
    text-align: center
}

.Search .datas .movie .detail {
    padding-top: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end;
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1
}

.Search .datas .movie .detail .comment {
    width: 33%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start
}

.Search .datas .movie .detail .comment .icon {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/scrollpane/comment_white.png) left top no-repeat;
    background-size: contain;
    background-position: center center;
    width: 33%;
    height: 22px
}

.Search .datas .movie .detail .comment .value {
    display: inline-block;
    line-height: normal;
    color: #FFD800;
    font-size: 16px
}

.Search .datas .movie .detail .like {
    width: 33%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center
}

.Search .datas .movie .detail .like .icon {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/scrollpane/heart_white.png) left top no-repeat;
    background-size: contain;
    background-position: center center;
    width: 33%;
    height: 22px
}

.Search .datas .movie .detail .like .value {
    display: inline-block;
    line-height: normal;
    color: #FFD800;
    font-size: 16px
}

.Search .datas .movie .detail .rating {
    width: 33%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end
}

.Search .datas .movie .detail .rating .icon {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/scrollpane/star_white.png) left top no-repeat;
    background-size: contain;
    background-position: center center;
    width: 33%;
    height: 22px
}

.Search .datas .movie .detail .rating .value {
    display: inline-block;
    line-height: 24px;
    color: #FFD800;
    font-size: 16px
}

.Search .datas .movie .detail .rating .noValue {
    display: inline-block;
    line-height: 24px;
    color: #FFD800;
    font-size: 16px
}

.Search .datas .more {
    display: block;
    width: 100%;
    text-align: center;
    margin: 1%;
    padding: 10px 20px;
    background-color: #333
}

.Search .datas .more:hover {
    color: #FFF;
    text-decoration: none
}

.Search .datas .more.hide {
    display: none
}

.Search .datas .more .icon {
    display: inline-block;
    background: url(../images/more-10x10.png) center center no-repeat;
    width: 10px;
    height: 10px;
    margin-left: 5px
}

.Search .noData {
    padding: 20px;
    border: 1px solid #333;
    border-radius: 5px;
    margin-top: 10px
}

.Search .noData.hide {
    display: none
}

.Search .keyword {
    margin: 10px auto;
    font-size: 1.2em
}

.Search .keyword .value {
    color: #F90
}

.Search .moreMovieBtn {
    display: block;
    text-align: center;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: #333;
    width: 832px
}

.Search .moreMovieBtn:hover {
    color: #FFF;
    text-decoration: none
}

.Search .moreMovieBtn.hide {
    display: none
}

.Search .moreMovieBtn span.icon {
    display: inline-block;
    background: url(../images/more-10x10.png) center center no-repeat;
    width: 10px;
    height: 10px;
    margin-left: 5px
}

.backgroundsize .Search.busy .data-status {
    background-image: url(../images/busy@2x.gif);
    background-size: 16px 16px
}

@media screen and (max-width: 639px) {
    .Search strong {
        display: block;
        text-align: center
    }
    .Search .content {
        padding: 60px 20px
    }
    .Search .datas .movie {
        margin-bottom: 5px;
        width: 31.3%
    }
    .Search .datas .movie .promo-name .promotion {
        width: 17%;
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        align-items: flex-start
    }
    .Search .datas .movie .promo-name .promotion .icon {
        height: 18px
    }
    .Search .datas .movie .promo-name .name {
        font-size: 12px;
        color: #FFF;
        line-height: 20px;
        text-align: center;
        height: 40px;
        max-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }
    .Search .datas .movie .detail {
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between
    }
    .Search .datas .movie .detail .rating {
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        width: 30%
    }
    .Search .datas .movie .detail .rating .icon {
        width: 13px;
        height: 15px
    }
    .Search .datas .movie .detail .rating .value {
        font-size: 12px;
        line-height: 22px
    }
    .Search .datas .movie .detail .rating .noValue {
        line-height: 25px
    }
    .Search .datas .movie .detail .like {
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        width: 40%
    }
    .Search .datas .movie .detail .like .icon {
        width: 13px;
        height: 22px
    }
    .Search .datas .movie .detail .like .value {
        font-size: 12px;
        line-height: 22px
    }
    .Search .datas .movie .detail .comment {
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        width: 30%
    }
    .Search .datas .movie .detail .comment .icon {
        width: 13px;
        height: 17px
    }
    .Search .datas .movie .detail .comment .value {
        font-size: 12px;
        line-height: 21px
    }
    .backgroundsize .Search .MoviePoster .thumbnail {
        background-image: url(../images/scrollpane/watermark-68x68.png);
        background-size: 34px 34px
    }
}

@media screen and (max-width: 883px) and (min-width: 675px) {
    .Search .moreMovieBtn {
        width: 621px
    }
}

@media screen and (max-width: 674px) and (min-width: 639px) {
    .Search .moreMovieBtn {
        width: 415px
    }
}

@media screen and (max-width: 638px) {
    .Search .moreMovieBtn {
        width: 100%
    }
}

.Settings {
    background: none
}

.Settings .inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding: 50px 50px 150px 50px
}

.Settings strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF;
    display: block;
    margin-top: 40px
}

.Settings .table {
    width: 500px;
    margin-top: 10px
}

.Settings .row.hide {
    display: none !important
}

.Settings .cell {
    padding: 5px;
    vertical-align: middle
}

.Settings .cell.key {
    width: 175px
}

.Settings .cell.key.top {
    vertical-align: top;
    padding-top: 10px
}

.Settings .input.text {
    padding: 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: none;
    background-color: #323232;
    box-shadow: inset 2px 2px 3px #000;
    color: #FFF
}

.Settings textarea {
    height: 70px
}

.Settings .actions {
    margin-top: 30px;
    width: 500px;
    padding-left: 130px
}

.Settings .actions .btn {
    background-color: #06c;
    width: 120px;
    margin-left: 55px
}

.Settings .actions .btn:hover {
    background-color: #0172e3
}

.Settings .form-status {
    margin-top: 30px;
    width: 500px;
    padding-left: 130px
}

@media screen and (max-width: 639px) {
    .Settings .inner {
        padding: 10px 10px 160px 10px
    }
    .Settings .table {
        display: block;
        width: 100%
    }
    .Settings .table>.row {
        display: block;
        margin-top: 20px
    }
    .Settings .table>.row>.cell {
        display: block
    }
    .Settings .cell.key,
    .Settings .cell.value {
        width: 100%
    }
    .Settings .actions {
        width: 100%;
        padding-left: 0
    }
    .Settings .actions .btn {
        margin: auto
    }
    .Settings .form-status {
        width: 100%;
        padding-left: 0;
        text-align: center
    }
}

.MovieList {
    background: none
}

.MovieList>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding: 30px 20px 100px 20px
}

.MovieList strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.MovieList .datas {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: wrap;
    -moz-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start;
    width: 100%
}

.MovieList .datas .movie {
    display: inline-block;
    padding: 5px;
    width: 23%;
    height: auto;
    cursor: pointer;
    box-shadow: 0 0 2px 2px rgba(9, 9, 9, 0.75);
    background: url(../images/scrollpane/bg-normal.png) repeat;
    margin: 5px 0.5%
}

.MovieList .datas .movie:hover {
    background: url(../images/scrollpane/bg-active.png) repeat
}

.MovieList .datas .movie .thumbnail {
    position: relative;
    background: #636363 url(../images/scrollpane/watermark-68x68.png) center center no-repeat;
    background-size: 25% auto;
    height: 0;
    padding-bottom: 140%;
    overflow: hidden
}

.MovieList .datas .movie .thumbnail img {
    width: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
    margin: auto
}

.MovieList .datas .movie .thumbnail div.btnPlay {
    background: url(../images/btn-play.png) center center no-repeat;
    position: absolute;
    width: 29px;
    height: 29px;
    bottom: 6px;
    right: 6px;
    border: none;
    cursor: pointer;
    z-index: 1
}

.MovieList .datas .movie .bottomWrapper .promo-name {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    margin: 6px 0 5px 0
}

.MovieList .datas .movie .bottomWrapper .promo-name .promotion {
    width: 15%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center
}

.MovieList .datas .movie .bottomWrapper .promo-name .promotion .icon {
    width: 20px;
    height: 20px;
    background-image: url(../images/special_highlight_poster.png);
    background-position: center center;
    background-size: 100% auto
}

.MovieList .datas .movie .bottomWrapper .promo-name .name {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    align-items: center;
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1;
    overflow: hidden;
    font-size: 1em;
    color: #FFF;
    line-height: 1.4em;
    text-align: center
}

.MovieList .datas .movie .bottomWrapper .detail {
    padding-top: 10px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-align-items: flex-end;
    -moz-align-items: flex-end;
    align-items: flex-end;
    -webkit-flex: 1;
    -moz-flex: 1;
    flex: 1
}

.MovieList .datas .movie .bottomWrapper .detail .comment {
    width: 33%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-start;
    -moz-justify-content: flex-start;
    justify-content: flex-start
}

.MovieList .datas .movie .bottomWrapper .detail .comment .icon {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/scrollpane/comment_white.png) left top no-repeat;
    background-size: contain;
    background-position: center center;
    width: 33%;
    height: 22px
}

.MovieList .datas .movie .bottomWrapper .detail .comment .value {
    display: inline-block;
    line-height: normal;
    color: #FFD800;
    font-size: 16px
}

.MovieList .datas .movie .bottomWrapper .detail .like {
    width: 33%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center
}

.MovieList .datas .movie .bottomWrapper .detail .like .icon {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/scrollpane/heart_white.png) left top no-repeat;
    background-size: contain;
    background-position: center center;
    width: 33%;
    height: 22px
}

.MovieList .datas .movie .bottomWrapper .detail .like .value {
    display: inline-block;
    line-height: normal;
    color: #FFD800;
    font-size: 16px
}

.MovieList .datas .movie .bottomWrapper .detail .rating {
    width: 33%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: -moz-box;
    display: flex;
    -ms-flex-wrap: nowrap;
    -moz-flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: flex-end;
    -moz-justify-content: flex-end;
    justify-content: flex-end
}

.MovieList .datas .movie .bottomWrapper .detail .rating .icon {
    display: inline-block;
    vertical-align: middle;
    background: url(../images/scrollpane/star_white.png) left top no-repeat;
    background-size: contain;
    background-position: center center;
    width: 33%;
    height: 22px
}

.MovieList .datas .movie .bottomWrapper .detail .rating .value {
    display: inline-block;
    line-height: 24px;
    color: #FFD800;
    font-size: 16px
}

.MovieList .datas .movie .bottomWrapper .detail .rating .noValue {
    display: inline-block;
    line-height: 24px;
    color: #FFD800;
    font-size: 16px
}

.MovieList .datas .more {
    display: block;
    width: 94%;
    text-align: center;
    margin: 10px 1%;
    padding: 10px 20px;
    background-color: #333
}

.MovieList .datas .more:hover {
    color: #FFF;
    text-decoration: none
}

.MovieList .datas .more.hide {
    display: none
}

.MovieList .datas .more .icon {
    display: inline-block;
    background: url(../images/more-10x10.png) center center no-repeat;
    width: 10px;
    height: 10px;
    margin-left: 5px
}

.MovieList .datas .ad_hotmob {
    display: none;
    width: 100%
}

.backgroundsize .Showing.busy .data-status {
    background-image: url(../images/busy@2x.gif);
    background-size: 16px 16px
}

@media screen and (max-width: 639px) {
    .MovieList strong {
        display: block;
        text-align: center
    }
    .MovieList .content {
        padding: 60px 20px
    }
    .MovieList .datas .movie {
        margin-bottom: 5px;
        width: 32.3%
    }
    .MovieList .datas .movie .bottomWrapper .promo-name .promotion {
        width: 17%;
        -webkit-align-items: flex-start;
        -moz-align-items: flex-start;
        align-items: flex-start
    }
    .MovieList .datas .movie .bottomWrapper .promo-name .promotion .icon {
        height: 18px
    }
    .MovieList .datas .movie .bottomWrapper .promo-name .name {
        font-size: 12px;
        color: #FFF;
        line-height: 20px;
        text-align: center;
        height: 40px;
        max-height: 40px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2
    }
    .MovieList .datas .movie .bottomWrapper .detail {
        -webkit-justify-content: space-between;
        -moz-justify-content: space-between;
        justify-content: space-between
    }
    .MovieList .datas .movie .bottomWrapper .detail .rating {
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        width: 35%
    }
    .MovieList .datas .movie .bottomWrapper .detail .rating .icon {
        width: 13px;
        height: 15px
    }
    .MovieList .datas .movie .bottomWrapper .detail .rating .value {
        font-size: 12px;
        line-height: 22px
    }
    .MovieList .datas .movie .bottomWrapper .detail .rating .noValue {
        line-height: 25px
    }
    .MovieList .datas .movie .bottomWrapper .detail .like {
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        width: 40%
    }
    .MovieList .datas .movie .bottomWrapper .detail .like .icon {
        width: 13px;
        height: 22px
    }
    .MovieList .datas .movie .bottomWrapper .detail .like .value {
        font-size: 12px;
        line-height: 22px
    }
    .MovieList .datas .movie .bottomWrapper .detail .comment {
        -webkit-justify-content: center;
        -moz-justify-content: center;
        justify-content: center;
        -webkit-align-items: center;
        -moz-align-items: center;
        align-items: center;
        width: 34%
    }
    .MovieList .datas .movie .bottomWrapper .detail .comment .icon {
        width: 13px;
        height: 23px
    }
    .MovieList .datas .movie .bottomWrapper .detail .comment .value {
        font-size: 12px;
        line-height: 21px
    }
    .MovieList .datas .ad_hotmob {
        display: block
    }
    .backgroundsize .Showing .MoviePoster .thumbnail {
        background-image: url(../images/scrollpane/watermark-68x68.png);
        background-size: 34px 34px
    }
}

.company {
    background: none
}

.company>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.company .content {
    padding: 30px 10px 100px 10px
}

.company .section_header {
    padding-top: 30px;
    font-size: 1.3em;
    line-height: 1.9em;
    color: #FFF
}

.company .section_content {
    font-size: 1.1em;
    line-height: 1.4em
}

.company .section_content dd {
    margin-left: 10%
}

@media screen and (min-width: 800px) {
    .company .section_content dt {
        float: left
    }
}

.company a {
    color: #ccc
}

.termsOfUse {
    background: none
}

.termsOfUse>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.termsOfUse .content {
    padding: 30px 10px 100px 10px
}

.termsOfUse .content.hide {
    display: none
}

.termsOfUse strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.termsOfUse .section_header {
    padding-top: 30px;
    font-size: 1.3em;
    line-height: 1.9em;
    color: #FFF
}

.termsOfUse .section_content {
    font-size: 1.1em;
    line-height: 1.4em
}

.termsOfUse a {
    color: #ccc
}

.termsOfUse ul,
.termsOfUse ol {
    list-style-type: disc;
    padding-left: 20px
}

.termsOfUse li {
    line-height: 1.4em;
    font-size: 1.1em
}

@media screen and (max-width: 639px) {
    .termsOfUse .content {
        padding: 60px 20px
    }
}

.thankYouForEnquiry {
    background: none
}

.thankYouForEnquiry>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.thankYouForEnquiry .content {
    padding: 160px 10px
}

.thankYouForEnquiry .content .wrapper {
    border: 2px solid #333;
    padding: 30px 10px;
    text-align: center;
    border-radius: 10px
}

.thankYouForEnquiry .content .wrapper strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF;
    letter-spacing: 2px
}

.thankYouForEnquiry .content .wrapper p {
    font-size: 1.3em;
    line-height: 1.9em;
    letter-spacing: 2px
}

.thankYouForEnquiry .content .wrapper a {
    margin: 40px auto
}

.thankYouForEnquiry .content .wrapper .btn {
    background-color: #06c;
    width: 120px;
    text-align: center
}

@media screen and (max-width: 639px) {
    .thankYouForEnquiry .content {
        padding: 60px 20px
    }
    .thankYouForEnquiry strong {
        font-size: 1.2em;
        line-height: 1.9em;
        color: #FFF
    }
    .thankYouForEnquiry p {
        font-size: 1em;
        line-height: 1.5em
    }
}

.Trailer {
    background: none
}

.Trailer>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding: 30px 20px 100px 20px
}

.Trailer strong {
    font-size: 1.7em;
    line-height: 2.2em;
    color: #FFF
}

.Trailer .datas {
    margin-top: 40px;
    width: 100%
}

.Trailer .datas .item {
    float: left;
    padding: 10px;
    margin: 0 10px 10px 0;
    width: 260px;
    height: 200px;
    position: relative;
    background: url(../images/scrollpane/bg-normal.png) repeat;
    border: 1px solid #333
}

.Trailer .datas .item:hover {
    background: url(../images/scrollpane/bg-active.png) repeat
}

.Trailer .datas .item .name {
    color: #FFF;
    font-size: 1.2em;
    line-height: 1.2em;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.Trailer .datas .item:hover .name {
    color: #FFD800
}

.Trailer .datas .item .video {
    position: relative;
    width: 240px;
    height: 120px;
    overflow: hidden;
    margin: 10px auto 0 auto
}

.Trailer .datas .item .video img {
    position: absolute;
    top: -30px;
    width: 240px;
    height: 180px;
    border: 0
}

.Trailer .datas .item .video img.thumbnail {
    background-color: #666
}

.Trailer .datas .item .video img.play {
    background: url(../images/btn-play.png) center center no-repeat;
    cursor: pointer
}

.Trailer .datas .item .counter {
    margin-top: 8px
}

.Trailer .datas .item .counter .rating .icon {
    background: url(../images/scrollpane/star_white.png) left top no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: text-top;
    -moz-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px
}

.Trailer .datas .item .counter .rating .value {
    color: url(../images/scrollpane/star_yellow.png) left top no-repeat;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 5px
}

.Trailer .datas .item .counter .comment .icon {
    background: url(../images/scrollpane/comment_white.png) left top no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 20px;
    -moz-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px
}

.Trailer .datas .item .counter .comment .value {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 3px
}

.Trailer .datas .item .counter .like .icon {
    background: url(../images/scrollpane/heart_white.png) left top no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 20px;
    -moz-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px
}

.Trailer .datas .item .counter .like .value {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 3px
}

.backgroundsize .Trailer.busy .data-status {
    background-image: url(../images/busy@2x.gif);
    background-size: 16px 16px
}

.backgroundsize .Trailer .datas .item .video img.play {
    background-image: url(../images/btn-play@2x.png);
    background-size: 24px 24px
}

.backgroundsize .Trailer .counter .rating .icon {
    background: url(../images/scrollpane/star_white@2x.png) left top no-repeat;
    -moz-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px
}

.backgroundsize .Trailer .counter .comment .icon {
    background: url(../images/scrollpane/comment_white@2x.png) left top no-repeat;
    -moz-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px
}

.backgroundsize .Trailer .counter .like .icon {
    background: url(../images/scrollpane/heart_white@2x.png) left top no-repeat;
    -moz-background-size: 20px 20px;
    -o-background-size: 20px 20px;
    -webkit-background-size: 20px 20px;
    background-size: 20px 20px
}

@media screen and (max-width: 639px) {
    .Trailer strong {
        display: block;
        text-align: center
    }
    .Trailer .datas .item {
        float: none;
        margin: 20px auto
    }
}

.TrailerPlayer {
    width: 90%;
    height: 90%;
    text-align: center;
    background-color: #000;
    border-radius: 5px;
    border: 1px solid #333
}

.TrailerPlayer>.inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.TrailerPlayer>.inner>div {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%
}

.TrailerPlayer>.inner>div.top {
    top: 0;
    height: 40px
}

.TrailerPlayer>.inner>div.mid {
    top: 40px;
    bottom: 120px
}

.TrailerPlayer>.inner>div.bottom {
    bottom: 0;
    height: 120px
}

.TrailerPlayer .icon.close {
    float: right;
    margin: 5px 10px 0 0
}

.TrailerPlayer iframe {
    margin: auto;
    width: 100%;
    height: 100%
}

.TrailerPlayer .movie {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: pointer
}

.TrailerPlayer .movie:hover {
    background-color: #222
}

.TrailerPlayer .movie>div {
    position: absolute;
    top: 0;
    bottom: 0
}

.TrailerPlayer .poster {
    left: 0;
    width: 80px;
    padding: 20px 0 0 10px
}

.TrailerPlayer .info {
    left: 80px;
    width: auto;
    padding: 20px 10px 0 10px;
    right: 0;
    text-align: left;
    background: url(../images/scrollpane/arrow-right.png) 98% center no-repeat
}

.TrailerPlayer .thumbnail {
    width: 54px;
    height: 80px;
    background: #636363 url(../images/scrollpane/watermark-68x68x34.png) center center no-repeat
}

.TrailerPlayer .name {
    color: #FFF;
    font-size: 1.2em
}

.TrailerPlayer .counter {
    margin-top: 10px
}

.TrailerPlayer .counter .rating .icon {
    background: url(../images/scrollpane/icon-star.png) left top no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: text-top
}

.TrailerPlayer .counter .rating .value {
    color: #FFD800;
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 5px
}

.TrailerPlayer .counter .comment .icon {
    background: url(../images/scrollpane/icon-comment.png) left top no-repeat;
    display: inline-block;
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-left: 20px
}

.TrailerPlayer .counter .comment .value {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 3px
}

.backgroundsize .TrailerPlayer .info {
    background-image: url(../images/scrollpane/arrow-right@2x.png);
    background-size: 15px 30px
}

.backgroundsize .TrailerPlayer .counter .rating .icon {
    background: url(../images/scrollpane/icon-star@2x.png) left top no-repeat;
    background-size: 20px 20px
}

.backgroundsize .TrailerPlayer .counter .comment .icon {
    background: url(../images/scrollpane/icon-comment@2x.png) left top no-repeat;
    background-size: 20px 20px
}

.backgroundsize .TrailerPlayer .thumbnail {
    background-image: url(../images/scrollpane/watermark-68x68.png);
    background-size: 34px 34px
}

.UserComment>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    margin: auto;
    padding: 50px 10px
}

.UserComment strong {
    color: #FFF;
    font-size: 1.2em;
    display: block;
    margin-left: 26px
}

.UserComment .data {
    width: 100%;
    background-color: #000
}

.UserComment .item {
    margin: 20px auto;
    padding: 10px 20px;
    border-bottom: 1px solid #333;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s
}

.UserComment .item:last-child {
    border-bottom: none
}

.UserComment .item .table {
    width: 100%;
    table-layout: fixed
}

.UserComment .item .cell {
    vertical-align: top
}

.UserComment .item .cell.movie {
    width: 68px
}

.UserComment .item .cell .poster {
    cursor: pointer;
    width: 54px;
    height: 80px;
    border: none;
    padding: 1px
}

.UserComment .item .subject {
    width: auto;
    color: #FFF;
    font-size: 1.2em;
    line-height: 1.5em;
    text-wrap: suppress;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow: hidden
}

.UserComment .item .rating {
    width: 60px;
    text-align: right
}

.UserComment .item .rating .icon {
    display: inline-block;
    background: url(../images/comments/icon-star.png) no-repeat;
    width: 20px;
    height: 20px;
    vertical-align: middle
}

.UserComment .item .rating .value {
    display: inline-block;
    color: #FFD800;
    font-size: 1.2em;
    vertical-align: middle
}

.UserComment .item .content {
    padding: 10px 0;
    line-height: 1.3em;
    text-wrap: suppress;
    word-wrap: break-word;
    white-space: pre-wrap;
    overflow: hidden
}

.chi .UserComment .item .content {
    letter-spacing: 2px
}

.UserComment .item .actions {
    width: 90px;
    white-space: nowrap
}

.UserComment .item .actions .thumb {
    margin-right: 10px
}

.UserComment .item .actions .thumb:hover {
    text-decoration: none
}

.UserComment .item .actions .thumb .icon {
    display: inline-block;
    width: 22px;
    height: 25px;
    text-indent: -9999px;
    background-position: center center;
    background-repeat: no-repeat;
    vertical-align: middle
}

.UserComment .item .actions .thumb.up .icon {
    background-image: url(../images/comments/thumb-up.png)
}

.UserComment .item .actions .thumb.down .icon {
    background-image: url(../images/comments/thumb-down.png)
}

.UserComment .item .actions .thumb.disable {
    opacity: .5;
    -ms-filter: "alpha(opacity=50)";
    filter: alpha(opacity=50);
    cursor: default
}

.UserComment .item .when {
    width: auto;
    color: #666;
    text-align: right
}

.UserComment .more {
    display: block;
    text-align: center;
    margin: 20px;
    padding: 10px 20px;
    background-color: #333
}

.UserComment .more:hover {
    color: #FFF;
    text-decoration: none
}

.UserComment .more.hide {
    display: none
}

.UserComment .more .icon {
    display: inline-block;
    background: url(../images/more-10x10.png) center center no-repeat;
    width: 10px;
    height: 10px;
    margin-left: 5px
}

@media screen and (max-width: 639px) {
    .UserComment .item {
        padding: 10px 10px
    }
    .UserComment .item .cell.who {
        width: 58px
    }
}

.backgroundsize .UserComment .item .cell .profilePicture {
    background-image: url(../images/avatars/default-84x84.png);
    background-size: 48px 48px
}

.backgroundsize .UserComment .item .rating .icon {
    background-image: url(../images/comments/icon-star@2x.png);
    background-size: 20px 20px
}

.backgroundsize .UserComment .item .actions .thumb.up .icon {
    background-image: url(../images/comments/thumb-up@2x.png);
    background-size: 22px 25px
}

.backgroundsize .UserComment .item .actions .thumb.down .icon {
    background-image: url(../images/comments/thumb-down@2x.png);
    background-size: 22px 25px
}

.backgroundsize .UserComment .more .icon {
    background-image: url(../images/more-20x20.png);
    background-size: 10px 10px
}

.UserHead {
    background: none
}

.UserHead>.inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto;
    padding: 50px 20px
}

.UserHead .layout .cell {
    vertical-align: top
}

.UserHead .layout .cell.left {
    width: 120px
}

.UserHead .layout .cell.right {
    width: auto
}

.UserHead .profilePicture {
    width: 84px;
    height: 84px;
    background: #444 url(../images/avatars/default-84x84.png) center center no-repeat;
    border: none;
    padding: 1px;
    -webkit-animation: fadeIn 0.5s;
    animation: fadeIn 0.5s;
    border-radius: 42px;
    background-size: 100% auto
}

.UserHead .community .communityLeft {
    float: left
}

.UserHead .community .communityLeft .name {
    color: #FFF;
    font-size: 1.5em;
    line-height: 1.7em
}

.UserHead .community .communityLeft .bio {
    line-height: 1.5em
}

.UserHead .community .communityRight {
    float: right
}

.UserHead .community .communityRight .follow {
    background: url("../images/btn_following_off.png") no-repeat 0 0;
    width: 50px;
    height: 24px;
    display: block
}

.UserHead .community .communityRight .follow.on {
    background: url("../images/btn_following_on.png") no-repeat 0 0
}

.UserHead .counter {
    margin-top: 20px;
    width: 150px
}

.UserHead .counter .cell {
    padding: 10px 0;
    vertical-align: middle
}

.UserHead .counter .cell.value {
    color: #FFF;
    font-size: 1.3em
}

.backgroundsize .UserHead .follow {
    background: url("../images/btn_following_off@2x.png") no-repeat 0 0;
    background-size: 50px 24px
}

.backgroundsize .UserHead .follow.on {
    background: url("../images/btn_following_on@2x.png") no-repeat 0 0
}

.UserMovie {
    padding: 40px 0;
    background: url(../images/section-bgs/2.png) repeat
}

.UserMovie .inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.UserMovie strong {
    color: #FFF;
    font-size: 1.2em;
    display: block;
    margin-left: 26px
}

.UserMovie .scrollPaneContainer.hide {
    display: none
}

.UserMovie .noData {
    padding: 20px;
    border: 1px solid #333;
    border-radius: 5px;
    margin-top: 20px;
    margin-left: 20px
}

.UserMovie .noData.hide {
    display: none
}

.UserNotifyMeMovie {
    padding: 40px 0;
    background: url(../images/section-bgs/2.png) repeat
}

.UserNotifyMeMovie .inner {
    position: relative;
    width: 100%;
    max-width: 1004px;
    height: 100%;
    margin: auto
}

.UserNotifyMeMovie strong {
    color: #FFF;
    font-size: 1.2em;
    display: block;
    margin-left: 26px
}

.UserNotifyMeMovie .scrollPaneContainer.hide {
    display: none
}

.UserNotifyMeMovie .noData {
    padding: 20px;
    border: 1px solid #333;
    border-radius: 5px;
    margin-top: 20px;
    margin-left: 20px
}

.UserNotifyMeMovie .noData.hide {
    display: none
}

.MainActivity {
    position: relative;
    width: 100%;
    height: 100%;
    margin: 0 auto 1px;
    border-top: 1px solid #333
}

.MainActivity.busy .dataStatus .busy {
    margin: 30px auto
}

.MainActivity .datas {
    width: 100%
}

.MainActivity .datas .item {
    float: left;
    padding: 10px;
    margin: 0 10px 10px 0;
    width: 260px;
    height: 230px;
    position: relative;
    background: url(../images/scrollpane/bg-normal.png) repeat;
    border: 1px solid #333;
    cursor: pointer
}

.MainActivity .datas .item:hover {
    background: url(../images/scrollpane/bg-active.png) repeat
}

.MainActivity .datas .item:hover .name {
    color: #FFD800
}

.MainActivity .datas .item .name {
    color: #FFF;
    font-size: 1.2em;
    line-height: 1.4em;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.MainActivity .datas .item .thumbnail {
    width: 240px;
    height: 145px;
    margin-top: 10px
}

.MainActivity .datas .item .time {
    margin-top: 10px
}

.MainActivity .margin {
    min-height: 128px
}

@media screen and (min-width: 640px) and (max-width: 1023px) {
    .MainActivity .datas .blogItem {
        float: left;
        margin: 0 10px 10px 0;
        padding: 10px;
        width: 210px;
        height: 213px;
        position: relative;
        background: url(../images/scrollpane/bg-normal.png) repeat;
        border: 1px solid #3f3f3f
    }
    .MainActivity .datas .blogItem:hover {
        background: url(../images/scrollpane/bg-active.png) repeat
    }
    .MainActivity .datas .blogItem .thumbnail {
        position: relative;
        width: 190px;
        height: 117px;
        overflow: hidden;
        margin: 0 auto
    }
    .MainActivity .datas .blogItem .thumbnail img {
        position: absolute;
        top: 0;
        width: 190px;
        height: 117px;
        border: 0;
        cursor: pointer
    }
}

@media screen and (max-width: 639px) {
    .MainActivity .datas {
        padding: 5px;
        min-height: 300px
    }
    .MainActivity .datas .blogItem {
        float: none;
        width: 100%;
        height: 92px;
        padding: 5px;
        margin: 0 0 1px;
        display: table;
        vertical-align: top
    }
    .MainActivity .datas .blogItem .thumbnail {
        width: 80px;
        height: 80px;
        margin: 0;
        display: table-cell
    }
    .MainActivity .datas .blogItem .thumbnail img {
        width: 80px;
        height: 80px
    }
    .MainActivity .datas .blogItem .caption {
        padding-left: 5px;
        display: table-cell;
        vertical-align: top
    }
    .MainActivity .datas .blogItem .name {
        font-size: 1em
    }
}

.ActivityScrollPane {
    width: 100%;
    height: 285px
}

.ActivityScrollPane * {
    -webkit-tap-highlight-color: transparent
}

.ActivityScrollPane .inner {
    width: 100%;
    height: 100%;
    position: relative
}

.ActivityScrollPane .controls {
    position: absolute;
    width: 100%;
    z-index: 4;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent
}

.ActivityScrollPane .controls>div {
    position: absolute;
    width: 60px;
    height: 260px;
    top: 10px;
    bottom: 0
}

.ActivityScrollPane .controls>div.left {
    left: 10px;
    background: url(../images/scrollpane/shadow-left-small.png) center right no-repeat;
    z-index: 5
}

.ActivityScrollPane .controls>div.right {
    right: 10px;
    background: url(../images/scrollpane/shadow-right-small.png) center left no-repeat;
    z-index: 5
}

.ActivityScrollPane .controls a {
    display: block;
    width: 100%;
    height: 100%;
    text-indent: -9999px
}

.ActivityScrollPane .controls a.prev {
    background: url(../images/scrollpane/arrow-left.png) center left no-repeat
}

.ActivityScrollPane .controls a.next {
    background: url(../images/scrollpane/arrow-right.png) center right no-repeat
}

.ActivityScrollPane .controls .dataStatus {
    width: 100%;
    left: 0;
    right: 0;
    z-index: 1
}

.ActivityScrollPane .controls .dataStatus .busy {
    margin: 120px auto 0 auto
}

.ActivityScrollPane .controls .dataStatus .no-data {
    color: #666;
    font-size: 0.8em;
    text-align: center;
    display: block;
    margin: 110px auto 0 auto
}

.ActivityScrollPane .iscrollContainer {
    position: absolute;
    z-index: 3;
    width: 100%;
    height: 280px;
    padding: 5px 35px
}

.ActivityScrollPane .iscroll {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    -ms-touch-action: none
}

.ActivityScrollPane .iscroll>.content {
    position: absolute;
    -webkit-tap-highlight-color: transparent;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    display: inline-block;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
    -o-text-size-adjust: none;
    text-size-adjust: none;
    padding-left: 7px
}

.ActivityScrollPane .iscroll>.content>.item {
    float: left;
    width: 300px;
    height: 270px;
    position: relative;
    padding: 10px
}

.ActivityScrollPane .iscroll>.content>.item>.ActivityPoster {
    padding: 10px;
    background: url(../images/scrollpane/bg-normal.png) repeat;
    border: 1px solid #333;
    box-shadow: 0px 0px 2px 2px rgba(9, 9, 9, 0.75);
    cursor: pointer;
    width: 100%;
    height: 100%
}

.ActivityScrollPane .iscroll>.content>.item:hover>.ActivityPoster {
    background: url(../images/scrollpane/bg-active.png) repeat
}

.ActivityScrollPane .iscroll>.content>.item .name {
    color: #FFF;
    font-size: 1.2em;
    line-height: 1.4em;
    width: 100%;
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.ActivityScrollPane .iscroll>.content>.item:hover .name {
    color: #FFD800
}

.ActivityScrollPane .iscroll>.content>.item .thumbnail {
    width: 250px;
    height: 159px;
    margin: 10px auto 0 auto;
    background: #636363 url(../images/scrollpane/watermark-100x32.png) center center no-repeat;
    overflow: hidden
}

.ActivityScrollPane .iscroll>.content>.item .thumbnail>img {
    width: 100%;
    height: 100%
}

.ActivityScrollPane .iscroll>.content>.item .time {
    margin-top: 10px
}

.backgroundsize .ActivityScrollPane .controls a.prev {
    background-image: url(../images/scrollpane/arrow-left@2x.png);
    background-size: 15px 30px
}

.backgroundsize .ActivityScrollPane .controls a.next {
    background-image: url(../images/scrollpane/arrow-right@2x.png);
    background-size: 15px 30px
}

.backgroundsize .ActivityScrollPane .iscroll>.content>.item .thumbnail {
    background: #636363 url(../images/scrollpane/watermark-100x32.png) center center no-repeat
}

#sp_article_undertitle {
    height: auto !important;
}