@charset "utf-8";
.header,
body.fixed {
    position: fixed;
    left: 0
}
.d-flex{
    display: flex;
}

#about .bot .txt .logo svg path,
#index .banner .txt .logo-effect svg path {
    stroke-dasharray: 760;
    stroke-dashoffset: 760
}

#game-2 .list .item>a .pic,
#index .sec-1 .list .box .pic .img,
#news .list .item .pic img,
.header {
    -webkit-backface-visibility: hidden
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 300;
    src: url(../fonts/NotoSansSC-Light.woff2) format('woff2'), url(../fonts/NotoSansSC-Light.woff) format('woff'), url(../fonts/NotoSansSC-Light.otf) format('opentype')
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 400;
    src: url(../fonts/NotoSansSC-Regular.woff2) format('woff2'), url(../fonts/NotoSansSC-Regular.woff) format('woff'), url(../fonts/NotoSansSC-Regular.otf) format('opentype')
}
@font-face {
    font-family: 'Noto Sans SC';
    font-style: normal;
    font-weight: 700;
    src: url(../fonts/NotoSansSC-Medium.woff2) format('woff2'), url(../fonts/NotoSansSC-Medium.woff) format('woff'), url(../fonts/NotoSansSC-Medium.otf) format('opentype')
}
@font-face {
    font-family: Roboto;
    src: url(../fonts/Roboto-Regular.eot);
    src: url(../fonts/Roboto-Regular.eot?#iefix) format('embedded-opentype'), url(../fonts/Roboto-Regular.woff2) format('woff2'), url(../fonts/Roboto-Regular.woff) format('woff'), url(../fonts/Roboto-Regular.ttf) format('truetype'), url(../fonts/Roboto-Regular.svg#Roboto-Regular) format('svg');
    font-weight: 400
}
html {
    font-size: 16px
}
body {
    line-height: 26px;
    font-size: 1rem;
    font-family: 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif;
}
body.fixed {
    width: 100%
}
img {
    border: 0;
    vertical-align: bottom
}
a,
a:active,
a:focus,
a:hover,
a:visited {
    text-decoration: none
}
:active,
:focus {
    outline: 0
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 400
}
p {
    line-height: inherit
}
label {
    font-weight: inherit
}
button,
input,
optgroup,
option,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    outline: 0
}
textarea {
    resize: vertical
}
li.reset,
ol.reset,
ul.reset {
    margin: 0;
    padding: 0;
    list-style: none
}
article,
aside,
footer,
header,
main,
nav,
section {
    display: block
}
@media (min-width: 1280px) {
    .container {
        width: 1250px
    }
}
.roboto {
    font-family: Roboto, 'Noto Sans SC', 'Microsoft JhengHei UI', 'Microsoft JhengHei', Sans-serif
}
.light {
    font-weight: 300
}
.bold {
    font-weight: 700
}
.header {
    z-index: 100;
    width: 100%;
    height: 75px;
    border-top: 5px solid #ffce05;
    border-bottom: 1px solid #e1e1e1;
    background: #fff;
    top: -90px;
    opacity: 0;
    box-shadow: 0px 3px 10px rgba(0,0,0,.08);
    transition: top .6s, opacity .6s;
    -ms-transition: top .6s, opacity .6s;
    -moz-transition: top .6s, opacity .6s;
    -webkit-transition: top .6s, opacity .6s
}
.header.scroll-view {
    top: 0;
    opacity: 1
}
.header .logo {
    float: left;
    width: 120px;
    height: 60px;
    margin: 14px 0 0
}
.header .logo a {
    display: block;
    position: relative;
    width: 100%;
    height: 100%;
    font-size: 0
}
.header #language{
    display: none;
}
.header .logo a:after,
.header .logo a:before {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    content: ''
}
.header .logo a:before {
    width: 68px;
    height: 37px;
    background-image: url(../images/header_logo_1.jpg);
    top: 3px;
    left: 26px
}
.header .logo a:after {
    width: 116px;
    height: 16px;
    background-image: url(../images/header_logo_2.jpg);
    left: 2px;
    bottom: 0;
    display: none;
}
.header .lang {
    float: right;
    position: relative;
    margin-top: 15px;
    margin-left: 11px
}
.header .lang:before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 18px;
    background: #ccc;
    top: 9px;
    left: -1px
}
.header .lang a.lang-current {
    display: block;
    height: 36px;
    line-height: 24px;
    font-size: .875rem;
    color: #666;
    background-image: url(../images/header_lang.jpg);
    background-size: 20px 20px;
    background-repeat: no-repeat;
    background-position: 24px center;
    padding: 6px 18px 6px 54px
}
.header .lang .lang-select {
    display: none;
    position: absolute;
    background: rgba(0, 0, 0, .5);
    top: 100%;
    left: 50%;
    margin-top: 6px;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%)
}
.header .lang:hover .lang-select {
    display: inline-block;
    z-index: 2;
}
.header .lang .lang-select:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 6px;
    top: -6px;
    left: 0
}
.header .lang .lang-select:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 8px;
    border-color: transparent transparent rgba(0, 0, 0, .5);
    top: -8px;
    left: 50%;
    margin-left: -6px
}
.header .lang .lang-select>li>a {
    display: block;
    line-height: 26px;
    font-size: .9375rem;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    padding: 4px 20px
}
.header .lang .lang-select>li>a:hover {
    background: rgba(0, 0, 0, .25)
}
.header .nav-menu {
    float: right;
    font-size: 0;
    margin-top: 15px
}
.header .nav-menu .menu-main>li {
    display: inline-block;
    position: relative;
    vertical-align: top
}
.header .nav-menu .menu-main>li>a {
    display: block;
    line-height: 26px;
    font-size: 1rem;
    color: #333;
    padding: 5px 20px
}
.header .nav-menu .menu-main>li.current>a,
.header .nav-menu .menu-main>li>a:hover {
    color: #e2283f
}
@media (min-width: 768px) {
    .header .nav-menu .menu-sub:after,
    .header .nav-menu .menu-sub:before {
        content: '';
        position: absolute;
        display: block
    }
    .header .nav-menu .menu-sub {
        display: none;
        position: absolute;
        background: rgba(0, 0, 0, .5);
        top: 100%;
        left: 50%;
        margin-top: 6px;
        transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%)
    }
    .header .nav-menu .menu-main>li:hover>.menu-sub {
        display: inline-block
    }
    .header .nav-menu .menu-sub:before {
        width: 100%;
        height: 6px;
        top: -6px;
        left: 0
    }
    .header .nav-menu .menu-sub:after {
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 6px 8px;
        border-color: transparent transparent rgba(0, 0, 0, .5);
        top: -8px;
        left: 50%;
        margin-left: -6px
    }
    .header .nav-menu .menu-sub>li>a {
        display: block;
        line-height: 26px;
        font-size: .9375rem;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        padding: 4px 20px
    }
    .header .nav-menu .menu-sub>li>a:hover {
        background: rgba(0, 0, 0, .25)
    }
}
@media (max-width: 991px) {
    .header .lang a.lang-current {
        background-position: 14px center;
        padding-left: 44px
    }
    .header .nav-menu .menu-main>li>a {
        padding: 5px 15px
    }
}
@media (max-width: 767px) {
    .header {
        height: 60px;
        opacity: 1;
        top: 0
    }
    .header .logo {
        margin-top: 6px
    }
    .header .nav-switch {
        float: right;
        position: relative;
        width: 36px;
        height: 36px;
        margin-top: 10px;
        transition: background .4s;
        -ms-transition: background .4s;
        -moz-transition: background .4s;
        -webkit-transition: background .4s
    }
    .header .nav-switch.open {
        background: #eee
    }
    .header .nav-switch span {
        display: block;
        position: absolute;
        width: 16px;
        height: 2px;
        background: #555;
        left: 10px;
        transition: all .4s;
        -ms-transition: all .4s;
        -moz-transition: all .4s;
        -webkit-transition: all .4s
    }
    .header .nav-switch span:nth-child(1),
    .header .nav-switch span:nth-child(2) {
        top: 17px
    }
    .header .nav-switch span:nth-child(3) {
        top: 11px
    }
    .header .nav-switch span:nth-child(4) {
        top: 23px
    }
    .header .nav-switch.open span:nth-child(1),
    .header .nav-switch.open span:nth-child(2) {
        width: 18px;
        background: #e2283f;
        left: 9px;
        transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg)
    }
    .header .nav-switch.open span:nth-child(2) {
        transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg)
    }
    .header .nav-switch.open span:nth-child(3),
    .header .nav-switch.open span:nth-child(4) {
        width: 2px;
        top: 17px;
        left: 17px;
        opacity: 0
    }
    .header .lang {
        margin-top: 10px;
        margin-left: 0;
        margin-right: 11px
    }
    .header .lang:before {
        left: auto;
        right: -1px
    }
    .header .lang a.lang-current {
        background-position: 18px center;
        padding: 6px 24px 6px 48px
    }
    .header .nav-menu {
        float: none;
        position: absolute;
        width: 100%;
        max-height: calc(100vh - 80px);
        background: #555;
        top: 55px;
        left: 0;
        margin: 0;
        padding: 15px;
        opacity: 0;
        overflow-y: auto;
        transform: scale(0);
        -ms-transform: scale(0);
        -moz-transform: scale(0);
        -webkit-transform: scale(0);
        transition: opacity .4s, transform 0s .4s;
        -ms-transition: opacity .4s, transform 0s .4s;
        -moz-transition: opacity .4s, transform 0s .4s;
        -webkit-transition: opacity .4s, transform 0s .4s
    }
    .header .nav-menu .menu-sub:before,
    .header .nav-menu:before {
        content: '';
        width: 0;
        height: 0;
        border-style: solid
    }
    .header .nav-menu.open {
        opacity: 1;
        transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1);
        transition: opacity .4s, transform 0s;
        -ms-transition: opacity .4s, transform 0s;
        -moz-transition: opacity .4s, transform 0s;
        -webkit-transition: opacity .4s, transform 0s
    }
    .header .nav-menu:before {
        display: block;
        position: absolute;
        border-width: 0 6px 10px;
        border-color: transparent transparent #555;
        top: -10px;
        right: 27px
    }
    .header .nav-menu .menu-main>li {
        display: block
    }
    .header .nav-menu .menu-main>li>a {
        color: rgba(255, 255, 255, .75);
        padding: 5px 0;
        text-align: center
    }
    .header .nav-menu .menu-main>li.current>a,
    .header .nav-menu .menu-main>li>a:hover {
        color: #fff
    }
    .header .nav-menu .menu-sub {
        display: none;
        position: relative;
        background: rgba(0, 0, 0, .5);
        margin-top: 6px
    }
    .header .nav-menu .menu-main>li.open>.menu-sub {
        display: block
    }
    .header .nav-menu .menu-sub:before {
        display: block;
        position: absolute;
        border-width: 0 6px 8px;
        border-color: transparent transparent rgba(0, 0, 0, .5);
        top: -8px;
        left: 50%;
        margin-left: -6px
    }
    .header .nav-menu .menu-sub>li>a {
        display: block;
        line-height: 26px;
        font-size: .9375rem;
        color: #fff;
        text-align: center;
        white-space: nowrap;
        padding: 6px 20px
    }
    .header .nav-menu .menu-sub>li.current>a,
    .header .nav-menu .menu-sub>li>a:hover {
        background: rgba(0, 0, 0, .5)
    }
}
.footer {
    position: relative;
    z-index: 5;
    background: #ffce05;
    margin-top: -20px;
    padding: 45px 0;
    text-align: center
}
.footer .contact {
    font-size: 0
}
.footer .contact span {
    display: inline-block;
    position: relative;
    line-height: 28px;
    font-size: .875rem;
    background-image: url(../images/footer_ico.png);
    background-size: 28px 84px;
    background-repeat: no-repeat;
    vertical-align: top;
    margin-bottom: 6px;
    padding-left: 30px
}
.footer .contact span+span {
    margin-left: 37px
}
.footer .contact span.skype {
    background-position: 0 0
}
.footer .contact span.qq {
    background-position: 0 -28px
}
.footer .contact span.mail {
    background-position: 0 -56px
}
.footer .contact span+span:before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 14px;
    background: #b29003;
    top: 8px;
    left: -19px
}
.footer .contact span a {
    color: #333
}
.footer .contact span a:hover {
    color: #000
}
.footer .copy {
    line-height: 22px;
    font-size: .8125rem
}
.footer .copy a {
    color: #333
}
.footer .copy a:hover {
    color: #000
}
@media (max-width: 639px) {
    .footer {
        text-align: left;
        padding: 20px 0;
        margin-top: 0
    }
    .footer .contact span {
        display: block
    }
    .footer .contact span+span {
        margin-left: 0
    }
    .footer .contact span+span:before {
        display: none
    }
}
a.go-top {
    display: block;
    position: fixed;
    z-index: 50;
    width: 50px;
    height: 50px;
    line-height: 20px;
    font-size: .75rem;
    color: #fff;
    background: rgba(0, 0, 0, .5);
    border-radius: 100%;
    text-align: center;
    padding-top: 20px;
    right: 40px;
    bottom: 40px;
    opacity: 0;
    transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transition: opacity .2s, transform 0s .2s;
    -ms-transition: opacity .2s, transform 0s .2s;
    -moz-transition: opacity .2s, transform 0s .2s;
    -webkit-transition: opacity .2s, transform 0s .2s
}
a.go-top.scroll-view {
    opacity: .75;
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transition: opacity .2s, transform 0s;
    -ms-transition: opacity .2s, transform 0s;
    -moz-transition: opacity .2s, transform 0s;
    -webkit-transition: opacity .2s, transform 0s
}
a.go-top:hover {
    opacity: 1
}
a.go-top:before {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 5px;
    border-color: transparent transparent #fff;
    top: 14px;
    left: 20px
}
.loading-bar {
    position: fixed;
    z-index: 150;
    width: 100%;
    height: 100%;
    background: #fff;
    transition: opacity 1s;
    -ms-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s
}
.loading-bar.remove {
    opacity: 0
}
.loading-bar:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 10px;
    background: #ffce05;
    top: 50%;
    left: 0;
    margin-top: -5px;
    opacity: 0;
    transform: scale(0, 1);
    animation: loading 3s linear infinite
}
.p-ban,
.p-ban .p-ban-bg {
    position: relative;
    height: 705px;
}
@keyframes loading {
    0% {
        opacity: 0;
        transform: scale(0, 1)
    }
    60% {
        opacity: 1;
        transform: scale(.8, .28)
    }
    75% {
        opacity: 0;
        transform: scale(1, .1)
    }
}
.g-wrap {
    overflow-x: hidden
}
@media (max-width: 991px) {
    .g-wrap {
        padding-top: 90px
    }
}
.p-ban {
    overflow: hidden
}
.p-ban .p-ban-title {
    position: absolute;
    text-align: center;
    margin: 85px 0 0;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    transition: all .6s, text-shadow .6s .6s;
    -ms-transition: all .6s, text-shadow .6s .6s;
    -moz-transition: all .6s, text-shadow .6s .6s;
    -webkit-transition: all .6s, text-shadow .6s .6s
}
.p-ban.view .p-ban-title {
    text-shadow: 2px 2px 3px rgba(0, 0, 0, .75);
    margin-top: 45px;
    opacity: 1
}
.p-ban .p-ban-title:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 1px;
    background: #e2283f;
    left: 50%;
    bottom: -10px;
    opacity: 0;
    margin-left: 0;
    transition: all .6s .6s;
    -ms-transition: all .6s .6s;
    -moz-transition: all .6s .6s;
    -webkit-transition: all .6s .6s
}
.p-ban.view .p-ban-title:after {
    width: 30px;
    opacity: 1;
    margin-left: -15px
}
.p-ban .p-ban-title span {
    display: block
}
.p-ban .p-ban-title .ch {
    line-height: 44px;
    font-size: 2.25rem;
    color: #fff
}
.p-ban .p-ban-title .en {
    line-height: 36px;
    font-size: 1.875rem;
    color: #fff;
    text-transform: uppercase
}
.p-ban-mirror:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .15);
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity .4s;
    -ms-transition: opacity .4s;
    -moz-transition: opacity .4s;
    -webkit-transition: opacity .4s
}
.p-ban-mirror img {
    transition: filter .4s;
    -ms-transition: filter .4s;
    -moz-transition: filter .4s;
    -webkit-transition: filter .4s
}
.p-ban-mirror.scroll-view:after {
    opacity: 1
}
.p-ban-mirror.scroll-view img {
    filter: blur(2px)
}
@media (max-width: 1199px) {
    .p-ban,
    .p-ban .p-ban-bg {
        height: 480px
    }
}
@media (max-width: 991px) {
    .p-ban,
    .p-ban .p-ban-bg {
        height: 360px
    }
    .p-ban .p-ban-title {
        margin-top: 40px
    }
    .p-ban.view .p-ban-title {
        margin-top: 0
    }
    .p-ban .p-ban-title .ch {
        line-height: 36px;
        font-size: 1.75rem
    }
    .p-ban .p-ban-title .en {
        line-height: 30px;
        font-size: 1.25rem
    }
}
@media (max-width: 767px) {
    .g-wrap {
        padding-top: 80px
    }
    .p-ban,
    .p-ban .p-ban-bg {
        height: 320px
    }
}
@media (max-width: 639px) {
    .p-ban,
    .p-ban .p-ban-bg {
        height: 240px
    }
}
@media (max-width: 479px) {
    .p-ban,
    .p-ban .p-ban-bg {
        height: 200px
    }
    
    #game-1 .p-ban-mirror:after {
        content: '';
        display: block;
        position: absolute;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .15);
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .4s;
        -ms-transition: opacity .4s;
        -moz-transition: opacity .4s;
        -webkit-transition: opacity .4s
    }
    #game-1 .p-ban-bg{
        height: 200px !important;
        background-position:unset !important;
    }
.p-bot {
    position: relative;
    height: 460px;
    overflow: hidden
}}
@media (max-width: 991px) {
    .p-bot {
        height: 320px
    }
}
@media (max-width: 639px) {
    .p-bot {
        height: 260px
    }
}
.p-inner {
    background: #f6f6f6;
    padding: 80px 0
}
@media (max-width: 767px) {
    .p-inner {
        padding: 60px 0
    }
}
.p-pager {
    font-size: 0;
    text-align: center;
    margin-top: 30px
}
.p-pager .pagination {
    margin: 0
}
.p-pager .pagination>li {
    display: inline-block;
    width: 34px;
    height: 34px;
    margin: 0 4px;
    vertical-align: top
}
.p-pager .pagination>li>a {
    display: block;
    width: 34px;
    height: 34px;
    line-height: 32px;
    font-size: .875rem;
    color: #555;
    border: 1px solid transparent;
    background: 0 0;
    border-radius: 100%;
    padding: 0
}
.p-pager .pagination>li>a:hover {
    border-color: #e6e6e6;
    background: #e6e6e6
}
.p-pager .pagination>li.active>a {
    color: #fff;
    border-color: #e32d44;
    background: #e32d44
}
.p-pager .pagination>li>a.next,
.p-pager .pagination>li>a.prev {
    position: relative;
    font-size: 0;
    border-color: #ccc;
    background: #fff
}
.p-pager .pagination>li>a.next:before,
.p-pager .pagination>li>a.prev:before {
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    top: 11px;
    content: ''
}
.p-pager .pagination>li>a.prev:before {
    border-width: 5px 8px 5px 0;
    border-color: transparent #aaa transparent transparent;
    left: 11px
}
.p-pager .pagination>li>a.next:before {
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent #aaa;
    right: 11px
}
.p-pager .pagination>li>a.next:hover:before,
.p-pager .pagination>li>a.prev:hover:before {
    border-left-color: #e32d44;
    border-right-color: #e32d44
}
.p-pager .pagination>li.disabled>a.next,
.p-pager .pagination>li.disabled>a.prev {
    border-color: #e6e6e6
}
.p-pager .pagination>li.disabled>a.next:before,
.p-pager .pagination>li.disabled>a.prev:before {
    border-left-color: #e6e6e6;
    border-right-color: #e6e6e6
}
@media (max-width: 543px) {
    .p-pager .pagination>li {
        margin: 0 10px
    }
    .p-pager .pagination>li:nth-child(n+2):nth-last-child(n+2):not(.active) {
        display: none
    }
}
.p-back {
    text-align: center;
    margin-top: 40px
}
.p-back a {
    display: inline-block;
    height: 44px;
    border-radius: 2px;
    padding: 1px;
    vertical-align: top;
    background: rgba(255, 129, 146, 1);
    background: -moz-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0, rgba(255, 129, 146, 1)), color-stop(100%, rgba(226, 40, 62, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -o-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -ms-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: linear-gradient(to right, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff8192', endColorstr='#e2283e', GradientType=1)
}
#index .sec-3 .sub-title:after,
#index .sec-3 .sub-title:before {
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#32ffcd05', endColorstr='#32ffcd05', GradientType=1)
}
.p-back a span {
    display: block;
    position: relative;
    height: 42px;
    line-height: 42px;
    font-size: .9375rem;
    color: #fff;
    background: #e2283f;
    border-radius: 2px;
    padding: 0 25px;
    transition: background .2s;
    -ms-transition: background .2s;
    -moz-transition: background .2s;
    -webkit-transition: background .2s
}
.p-back a:hover span {
    background: #ff8191
}


.p-back2 {
    text-align: center;
    margin-top: 40px
}
.p-back2 a {
    display: inline-block;
    height: 44px;
    border-radius: 50px;
    padding: 1px;
    vertical-align: top;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9d0a+1,ffad0a+97 */
    background: rgb(255,157,10); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,157,10,1) 1%, rgba(255,173,10,1) 97%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,157,10,1) 1%,rgba(255,173,10,1) 97%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,157,10,1) 1%,rgba(255,173,10,1) 97%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9d0a', endColorstr='#ffad0a',GradientType=0 ); /* IE6-9 */
}
#index .sec-3 .sub-title:after,
#index .sec-3 .sub-title:before {
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#32ffcd05', endColorstr='#32ffcd05', GradientType=1)
}
.p-back2 a span {
    display: block;
    position: relative;
    height: 42px;
    line-height: 42px;
    font-size: 1rem;
    color: #fff;
    background: #e2283f;
    border-radius: 50px;
    padding: 0 25px;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff9d0a+1,ffad0a+97 */
    background: rgb(255,157,10); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,157,10,1) 1%, rgba(255,173,10,1) 97%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,157,10,1) 1%,rgba(255,173,10,1) 97%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,157,10,1) 1%,rgba(255,173,10,1) 97%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff9d0a', endColorstr='#ffad0a',GradientType=0 ); /* IE6-9 */
    transition: background .2s;
    -ms-transition: background .2s;
    -moz-transition: background .2s;
    -webkit-transition: background .2s
}
.p-back2 a:hover span {
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffb90a+1,ffb60c+99 */
    background: rgb(255,185,10); /* Old browsers */
    background: -moz-linear-gradient(top, rgba(255,185,10,1) 1%, rgba(255,182,12,1) 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, rgba(255,185,10,1) 1%,rgba(255,182,12,1) 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, rgba(255,185,10,1) 1%,rgba(255,182,12,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffb90a', endColorstr='#ffb60c',GradientType=0 ); /* IE6-9 */
}
#index .banner .ball i,
#index .banner .ico,
#index .banner .sun,
#index .banner .txt .light:before {
    background-size: cover;
    background-repeat: no-repeat
}
.p-back a span i.fa {
    margin-left: 10px
}

.p-back2 a span i.fa {
    margin-left: 10px
}
.text-edit {
    line-height: 30px;
    font-size: 1.125rem
}
.text-edit * {
    max-width: 100%
}
.text-edit img {
    height: auto!important
}
#index {
    padding-top: 100vh
}
#index .inner {
    position: relative;
    z-index: 10
}
#index .banner {
    position: fixed;
    z-index: 1;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    overflow: hidden
}
#index .banner .bg-wrap {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.4);
    -ms-transform: scale(1.4);
    -moz-transform: scale(1.4);
    -webkit-transform: scale(1.4);
    transition: opacity 3s cubic-bezier(.6, 0, 1, .6), transform 3s cubic-bezier(0, .4, .4, 1);
    -ms-transition: opacity 3s cubic-bezier(.6, 0, 1, .6), transform 3s cubic-bezier(0, .4, .4, 1);
    -moz-transition: opacity 3s cubic-bezier(.6, 0, 1, .6), transform 3s cubic-bezier(0, .4, .4, 1);
    -webkit-transition: opacity 3s cubic-bezier(.6, 0, 1, .6), transform 3s cubic-bezier(0, .4, .4, 1)
}
#index .banner.loaded .bg-wrap {
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1)
}
#index .banner .bg {
    display: block;
    position: absolute;
    width: auto;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%)
}
#index .banner .sun {
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/index_ban_sun.png);
    background-position: center;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 1s;
    -ms-transition: opacity 1s;
    -moz-transition: opacity 1s;
    -webkit-transition: opacity 1s
}
#index .banner .sun.loaded {
    opacity: 1;
    animation: sun 12s ease-in-out infinite;
    -moz-animation: sun 12s ease-in-out infinite;
    -webkit-animation: sun 12s ease-in-out infinite
}
@keyframes sun {
    0%, 100% {
        transform: scale(1) rotate(0);
        -ms-transform: scale(1) rotate(0)
    }
    50% {
        transform: scale(1.05) rotate(5deg);
        -ms-transform: scale(1) rotate(0)
    }
}
@-moz-keyframes sun {
    0%, 100%, 50% {
        -moz-transform: scale(1) rotate(0)
    }
}
@-webkit-keyframes sun {
    0%, 100%, 50% {
        -webkit-transform: scale(1) rotate(0)
    }
}
#index .banner .ball {
    position: absolute;
    width: 820px;
    height: 820px;
    top: 50%;
    left: 50%;
    margin-top: -410px;
    margin-left: -410px
}
#index .banner .ball i {
    display: block;
    position: absolute
}
#index .banner .ball i.ball-1 {
    width: 97.56%;
    height: 97.56%;
    background-image: url(../images/index_ban_ball1.png);
    top: 1.22%;
    left: 1.22%;
    opacity: 0;
    transform: scale(.94) rotate(-1.5deg);
    -ms-transform: scale(.94) rotate(-1.5deg);
    -moz-transform: scale(.94) rotate(-1.5deg);
    -webkit-transform: scale(.94) rotate(-1.5deg);
    transition: opacity 1s, transform 1s;
    -ms-transition: opacity 1s, transform 1s;
    -moz-transition: opacity 1s, transform 1s;
    -webkit-transition: opacity 1s, transform 1s
}
#index .banner .ball.loaded i.ball-1 {
    opacity: 1;
    transform: scale(1) rotate(0);
    -ms-transform: scale(1) rotate(0);
    -moz-transform: scale(1) rotate(0);
    -webkit-transform: scale(1) rotate(0);
    animation: ball1 240s linear infinite 1s;
    -moz-animation: ball1 240s linear infinite 1s;
    -webkit-animation: ball1 240s linear infinite 1s
}
@keyframes ball1 {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(360deg)
    }
}
@-moz-keyframes ball1 {
    0% {
        -moz-transform: rotate(0)
    }
    100% {
        -moz-transform: rotate(360deg)
    }
}
@-webkit-keyframes ball1 {
    0% {
        -webkit-transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(360deg)
    }
}
#index .banner .ball i.ball-2 {
    width: 82.926%;
    height: 82.926%;
    background-image: url(../images/index_ban_ball2.png);
    top: 8.537%;
    left: 8.537%;
    opacity: 0;
    transform: rotate(1.5deg);
    -ms-transform: rotate(1.5deg);
    -moz-transform: rotate(1.5deg);
    -webkit-transform: rotate(1.5deg);
    transition: opacity 1s, transform 1s;
    -ms-transition: opacity 1s, transform 1s;
    -moz-transition: opacity 1s, transform 1s;
    -webkit-transition: opacity 1s, transform 1s
}
#index .banner .ball.loaded i.ball-2 {
    opacity: 1;
    transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0);
    animation: ball2 240s linear infinite 1s;
    -moz-animation: ball2 240s linear infinite 1s;
    -webkit-animation: ball2 240s linear infinite 1s
}
@keyframes ball2 {
    0% {
        transform: rotate(0)
    }
    100% {
        transform: rotate(-360deg)
    }
}
@-moz-keyframes ball2 {
    0% {
        -moz-transform: rotate(0)
    }
    100% {
        -moz-transform: rotate(-360deg)
    }
}
@-webkit-keyframes ball2 {
    0% {
        -webkit-transform: rotate(0)
    }
    100% {
        -webkit-transform: rotate(-360deg)
    }
}
#index .banner .ball i.ball-3 {
    width: 100%;
    height: 100%;
    background-image: url(../images/index_ban_ball3.png);
    top: 0;
    left: 0;
    opacity: 0;
    transform: scale(1.05);
    -ms-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transition: opacity 1s, transform 1s;
    -ms-transition: opacity 1s, transform 1s;
    -moz-transition: opacity 1s, transform 1s;
    -webkit-transition: opacity 1s, transform 1s
}
#index .banner .ball.loaded i.ball-3 {
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    animation: ball3 10s linear infinite 1s;
    -moz-animation: ball3 10s linear infinite 1s;
    -webkit-animation: ball3 10s linear infinite 1s
}
@keyframes ball3 {
    0%, 100% {
        opacity: 1;
        transform: scale(1)
    }
    25%,
    75% {
        opacity: .75
    }
    50% {
        opacity: .6
    }
}
@-moz-keyframes ball3 {
    0%, 100% {
        opacity: 1;
        -moz-transform: scale(1)
    }
    25%,
    75% {
        opacity: .75
    }
    50% {
        opacity: .6
    }
}
@-webkit-keyframes ball3 {
    0%, 100% {
        opacity: 1;
        -webkit-transform: scale(1)
    }
    25%,
    75% {
        opacity: .75
    }
    50% {
        opacity: .6
    }
}
#index .banner .ico {
    position: absolute;
    opacity: 0;
    transform: scale(0) rotateY(180deg);
    -ms-transform: scale(0) rotateY(180deg);
    -moz-transform: scale(0) rotateY(180deg);
    -webkit-transform: scale(0) rotateY(180deg)
}
#index .banner .ico.loaded {
    opacity: .5;
    transform: scale(1) rotateY(0);
    -ms-transform: scale(1) rotateY(0);
    -moz-transform: scale(1) rotateY(0);
    -webkit-transform: scale(1) rotateY(0);
    transition: opacity 1s, transform 1s cubic-bezier(0, .4, .4, 1);
    -ms-transition: opacity 1s, transform 1s cubic-bezier(0, .4, .4, 1);
    -moz-transition: opacity 1s, transform 1s cubic-bezier(0, .4, .4, 1);
    -webkit-transition: opacity 1s, transform 1s cubic-bezier(0, .4, .4, 1)
}
#index .banner .ico-1 {
    width: 135px;
    height: 162px;
    background-image: url(../images/index_ban_ico1.png);
    top: 50%;
    left: 50%;
    margin-top: -280px;
    margin-left: -420px
}
#index .banner .ico-1.loaded {
    transition-delay: .5;
    -ms-transition-delay: .5s;
    -moz-transition-delay: .5s;
    -webkit-transition-delay: .5s
}
#index .banner .ico-2 {
    width: 80px;
    height: 89px;
    background-image: url(../images/index_ban_ico2.png);
    top: 50%;
    left: 50%;
    margin-top: -180px;
    margin-left: -600px
}
#index .banner .ico-2.loaded {
    transition-delay: 1s;
    -ms-transition-delay: 1s;
    -moz-transition-delay: 1s;
    -webkit-transition-delay: 1s
}
#index .banner .ico-3 {
    width: 160px;
    height: 116px;
    background-image: url(../images/index_ban_ico3.png);
    top: 50%;
    left: 50%;
    margin-top: -95px;
    margin-left: -540px
}
#index .banner .ico-4 {
    width: 175px;
    height: 149px;
    background-image: url(../images/index_ban_ico4.png);
    top: 50%;
    left: 50%;
    margin-top: -185px;
    margin-left: 300px
}
#index .banner .ico-4.loaded {
    transition-delay: .25s;
    -ms-transition-delay: .25s;
    -moz-transition-delay: .25s;
    -webkit-transition-delay: .25s
}
#index .banner .ico-5 {
    width: 100px;
    height: 121px;
    background-image: url(../images/index_ban_ico5.png);
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: 460px;
    opacity: .25!important
}
#index .banner .ico-5.loaded {
    transition-delay: 1.25s;
    -ms-transition-delay: 1.25s;
    -moz-transition-delay: 1.25s;
    -webkit-transition-delay: 1.25s
}
#index .banner .ico-6 {
    width: 50px;
    height: 71px;
    background-image: url(../images/index_ban_ico6.png);
    top: 50%;
    left: 50%;
    margin-top: -118px;
    margin-left: 555px
}
#index .banner .ico-6.loaded {
    transition-delay: .75s;
    -ms-transition-delay: .75s;
    -moz-transition-delay: .75s;
    -webkit-transition-delay: .75s
}
#index .banner .txt {
    position: absolute;
    width: 100%;
    max-width: 540px;
    top: 50%;
    left: 50%;
    margin-top: 20px;
    transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%)
}
#index .banner .txt>* {
    position: relative;
    z-index: 5
}
#index .banner .txt .light {
    display: block;
    position: absolute;
    z-index: 1;
    width: 720px;
    height: 540px;
    top: 50%;
    left: 50%;
    margin-top: -340px;
    margin-left: -360px;
    opacity: 0;
    transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transition: opacity 1s, transform 1s;
    -ms-transition: opacity 1s, transform 1s;
    -moz-transition: opacity 1s, transform 1s;
    -webkit-transition: opacity 1s, transform 1s
}
#index .banner .txt.loaded .light {
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1)
}
#index .banner .txt .light:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/index_ban_light.png);
    top: 0;
    left: 0;
    animation: light 10s linear infinite 1s;
    -moz-animation: light 10s linear infinite 1s;
    -webkit-animation: light 10s linear infinite 1s
}
@keyframes light {
    0%, 100% {
        opacity: 1;
        transform: scale(1) rotate(0)
    }
    25%,
    75% {
        opacity: .92;
        transform: scaleX(.92) scaleY(.97) rotate(2deg)
    }
    50% {
        opacity: .86;
        transform: scaleX(.86) scaleY(.95) rotate(4deg)
    }
}
@-moz-keyframes light {
    0%, 100% {
        opacity: 1;
        -moz-transform: scale(1) rotate(0)
    }
    25%,
    75% {
        opacity: .92;
        -moz-transform: scaleX(.92) scaleY(.97) rotate(2deg)
    }
    50% {
        opacity: .86;
        -moz-transform: scaleX(.86) scaleY(.95) rotate(4deg)
    }
}
@-webkit-keyframes light {
    0%, 100% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(0)
    }
    25%,
    75% {
        opacity: .92;
        -webkit-transform: scaleX(.92) scaleY(.97) rotate(2deg)
    }
    50% {
        opacity: .86;
        -webkit-transform: scaleX(.86) scaleY(.95) rotate(4deg)
    }
}
#index .banner .txt.loaded .light:before {
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1)
}
#index .banner .txt .light .light-1,
#index .banner .txt .light .light-2 {
    display: block;
    position: absolute;
    width: 400px;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0
}
#index .banner .txt .light .light-1 {
    height: 300px;
    background-image: url(../images/index_ban_light1.png);
    top: 12.037%;
    left: 14.583%;
    transition: opacity .6s;
    -ms-transition: opacity .6s;
    -moz-transition: opacity .6s;
    -webkit-transition: opacity .6s
}
#index .banner .txt .light .light-2 {
    height: 120px;
    background-image: url(../images/index_ban_light2.png);
    top: 16.667%;
    left: 27.083%;
    transition: opacity .6s;
    -ms-transition: opacity .6s;
    -moz-transition: opacity .6s;
    -webkit-transition: opacity .6s
}
#index .banner .txt.loaded .light .light-1,
#index .banner .txt.loaded .light .light-2 {
    opacity: 1
}
#index .banner .txt .logo-effect {
    position: relative;
    max-width: 290px;
    margin: auto
}
#index .banner .txt .logo-effect i,
#index .banner .txt .logo-effect:before {
    display: block;
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    content: ''
}
/*#index .banner .txt .logo-effect:before {
    width: 100%;
    height: 100%;
    background-image: url(../images/index_ban_logo_b.png);
    opacity: 0;
    transform: translate(-2%, -2%);
    -moz-transform: translate(-2%, -2%);
    -webkit-transform: translate(-2%, -2%);
    transition: opacity 1s, transform 1s;
    -moz-transition: opacity 1s, transform 1s;
    -webkit-transition: opacity 1s, transform 1s
}*/
#index .banner .txt .logo-effect.run:before {
    opacity: 1;
    transform: none;
    -moz-transform: none;
    -webkit-transform: none
}
#index .banner .txt .logo-effect i {
    width: 250px;
    height: 240px;
    background-image: url(../images/index_ban_logo_l.png);
    top: -92px;
    left: 10px;
    opacity: 0;
    transform: scale(.8) rotate(45deg);
    -moz-transform: scale(.8) rotate(45deg);
    -webkit-transform: scale(.8) rotate(45deg);
    transition: opacity 0s linear, transform 0s linear;
    -moz-transition: opacity 0s linear, transform 0s linear;
    -webkit-transition: opacity 0s linear, transform 0s linear
}
#index .banner .txt .logo-effect i.flash-1 {
    opacity: 1;
    transform: scale(1) rotate(405deg);
    -moz-transform: scale(1) rotate(405deg);
    -webkit-transform: scale(1) rotate(405deg);
    transition: opacity 2s linear, transform 2s linear;
    -moz-transition: opacity 2s linear, transform 2s linear;
    -webkit-transition: opacity 2s linear, transform 2s linear
}
#index .banner .txt .logo-effect i.flash-2 {
    opacity: 0;
    transform: scale(.8) rotate(621deg);
    -moz-transform: scale(.8) rotate(621deg);
    -webkit-transform: scale(.8) rotate(621deg);
    transition: opacity 1.2s linear, transform 1.2s linear;
    -moz-transition: opacity 1.2s linear, transform 1.2s linear;
    -webkit-transition: opacity 1.2s linear, transform 1.2s linear
}
#index .banner .txt .logo-effect i.flash-3 {
    animation: logo-flash 2s linear;
    -moz-animation: logo-flash 2s linear;
    -webkit-animation: logo-flash 2s linear
}
@keyframes logo-flash {
    0% {
        opacity: 0;
        transform: scale(.8) rotate(621deg)
    }
    50% {
        opacity: 1;
        transform: scale(1) rotate(801deg)
    }
    100% {
        opacity: 0;
        transform: scale(.8) rotate(981deg)
    }
}
@-moz-keyframes logo-flash {
    0% {
        opacity: 0;
        -moz-transform: scale(.8) rotate(621deg)
    }
    50% {
        opacity: 1;
        -moz-transform: scale(1) rotate(801deg)
    }
    100% {
        opacity: 0;
        -moz-transform: scale(.8) rotate(981deg)
    }
}
@-webkit-keyframes logo-flash {
    0% {
        opacity: 0;
        -webkit-transform: scale(.8) rotate(621deg)
    }
    50% {
        opacity: 1;
        -webkit-transform: scale(1) rotate(801deg)
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(.8) rotate(981deg)
    }
}
#index .banner .txt .title i,
#index .banner .txt .title:before {
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    display: block
}
#index .banner .txt .logo-effect svg {
    display: block;
    position: relative
}
#index .banner .txt .title {
    position: relative;
    font-size: 0;
    margin: 15px auto 0;
    perspective: 600px;
    -moz-perspective: 600px;
    -webkit-perspective: 600px
}
#index .banner .txt .title:before {
    content: '';
    height: 0;
    background-image: url(../images/index_ban_title.png);
    background-position: center;
    padding-bottom: 11.111%
}
#index .banner .txt .title i {
    position: absolute;
    height: 100%;
    top: 0
}
#index .banner .txt .title i:nth-child(1) {
    width: 9.815%;
    background-image: url(../images/index_ban_title_c.png);
    left: 27%;
    transform: scale(1.6) rotateY(360deg) translateX(-120%);
    -moz-transform: scale(1.6) rotateY(360deg) translateX(-120%);
    -webkit-transform: scale(1.6) rotateY(360deg) translateX(-120%)
}
#index .banner .txt .title i:nth-child(2) {
    width: 9.815%;
    background-image: url(../images/index_ban_title_c.png);
    left: 39%;
    transform: scale(1.4) rotateY(360deg) translateX(-80%);
    -moz-transform: scale(1.4) rotateY(360deg) translateX(-80%);
    -webkit-transform: scale(1.4) rotateY(360deg) translateX(-80%)
}
#index .banner .txt .title i:nth-child(3) {
    width: 9.5%;
    background-image: url(../images/index_ban_title_chi.png);
    left: 51%;
    transform: scale(1.2) rotateY(360deg) translateX(-40%);
    -moz-transform: scale(1.2) rotateY(360deg) translateX(-40%);
    -webkit-transform: scale(1.2) rotateY(360deg) translateX(-40%)
}
#index .banner .txt .title i:nth-child(4) {
    width: 9.9%;
    background-image: url(../images/index_ban_title_tuan.png);
    left: 63%;
    transform: scale(1) rotateY(360deg) translateX(0);
    -moz-transform: scale(1) rotateY(360deg) translateX(0);
    -webkit-transform: scale(1) rotateY(360deg) translateX(0)
}
/*#index .banner .txt .title i:nth-child(5) {
    width: 10.741%;
    background-image: url(../images/index_ban_title_m.png);
    left: 55.926%;
    transform: scale(1.2) rotateY(360deg) translateX(40%);
    -moz-transform: scale(1.2) rotateY(360deg) translateX(40%);
    -webkit-transform: scale(1.2) rotateY(360deg) translateX(40%)
}
#index .banner .txt .title i:nth-child(6) {
    width: 2.037%;
    background-image: url(../images/index_ban_title_i.png);
    left: 71.111%;
    transform: scale(1.4) rotateY(360deg) translateX(80%);
    -moz-transform: scale(1.4) rotateY(360deg) translateX(80%);
    -webkit-transform: scale(1.4) rotateY(360deg) translateX(80%)
}
#index .banner .txt .title i:nth-child(7) {
    width: 7.778%;
    background-image: url(../images/index_ban_title_n.png);
    left: 77.778%;
    transform: scale(1.6) rotateY(360deg) translateX(120%);
    -moz-transform: scale(1.6) rotateY(360deg) translateX(120%);
    -webkit-transform: scale(1.6) rotateY(360deg) translateX(120%)
}
#index .banner .txt .title i:nth-child(8) {
    width: 8.704%;
    background-image: url(../images/index_ban_title_g.png);
    left: 89.63%;
    transform: scale(1.8) rotateY(360deg) translateX(160%);
    -moz-transform: scale(1.8) rotateY(360deg) translateX(160%);
    -webkit-transform: scale(1.8) rotateY(360deg) translateX(160%)
}*/
#index .banner .txt.loaded .title i {
    opacity: 1;
    transition: opacity 1s 2.5s, transform 1s 2.5s;
    -moz-transition: opacity 1s 2.5s, transform 1s 2.5s;
    -webkit-transition: opacity 1s 2.5s, transform 1s 2.5s;
    transform: scale(1) rotateY(0) translateX(0);
    -moz-transform: scale(1) rotateY(0) translateX(0);
    -webkit-transform: scale(1) rotateY(0) translateX(0)
}
#index .banner .txt.loaded .title i:nth-child(1) {
    animation: title 6s infinite 9.5s;
    -moz-animation: title 6s infinite 9.5s;
    -webkit-animation: title 6s infinite 9.5s
}
#index .banner .txt.loaded .title i:nth-child(2) {
    animation: title 6s infinite 9.625s;
    -moz-animation: title 6s infinite 9.625s;
    -webkit-animation: title 6s infinite 9.625s
}
#index .banner .txt.loaded .title i:nth-child(3) {
    animation: title 6s infinite 9.75s;
    -moz-animation: title 6s infinite 9.75s;
    -webkit-animation: title 6s infinite 9.75s
}
#index .banner .txt.loaded .title i:nth-child(4) {
    animation: title 6s infinite 9.875s;
    -moz-animation: title 6s infinite 9.875s;
    -webkit-animation: title 6s infinite 9.875s
}
/*#index .banner .txt.loaded .title i:nth-child(5) {
    animation: title 6s infinite 10s;
    -moz-animation: title 6s infinite 10s;
    -webkit-animation: title 6s infinite 10s
}
#index .banner .txt.loaded .title i:nth-child(6) {
    animation: title 6s infinite 10.125s;
    -moz-animation: title 6s infinite 10.125s;
    -webkit-animation: title 6s infinite 10.125s
}
#index .banner .txt.loaded .title i:nth-child(7) {
    animation: title 6s infinite 10.25s;
    -moz-animation: title 6s infinite 10.25s;
    -webkit-animation: title 6s infinite 10.25s
}
#index .banner .txt.loaded .title i:nth-child(8) {
    animation: title 6s infinite 10.375s;
    -moz-animation: title 6s infinite 10.375s;
    -webkit-animation: title 6s infinite 10.375s
}*/
@keyframes title {
    0% {
        transform: rotateY(0)
    }
    20% {
        transform: rotateY(360deg)
    }
}
@-moz-keyframes title {
    0% {
        -moz-transform: rotateY(0)
    }
    20% {
        -moz-transform: rotateY(360deg)
    }
}
@-webkit-keyframes title {
    0% {
        -webkit-transform: rotateY(0)
    }
    20% {
        -webkit-transform: rotateY(360deg)
    }
}
#index .banner .txt .slogan {
    position: relative;
    max-width: 360px;
    line-height: 56px;
    font-size: 1.625rem;
    border-top: 1px solid rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    text-align: center;
    letter-spacing: 10px;
    margin: 25px auto 0;
    padding-left: 10px;
    opacity: 0;
    transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -webkit-transform: translateY(-40px)
}
#index .banner .txt.loaded .slogan {
    opacity: 1;
    transform: none;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none;
    transition: opacity 1s 2.5s, transform 1s 2.5s;
    -ms-transition: opacity 1s 2.5s, transform 1s 2.5s;
    -moz-transition: opacity 1s 2.5s, transform 1s 2.5s;
    -webkit-transition: opacity 1s 2.5s, transform 1s 2.5s
}
#index .banner .txt .slogan:before {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 6px;
    background: #333;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    margin-top: -3px;
    margin-left: -3px
}
#index .banner a.enter-down {
    display: none;
    position: absolute;
    width: 70px;
    height: 90px;
    line-height: 20px;
    font-size: .75rem;
    color: #666;
    background-image: url(../images/index_enter_down.png);
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 25px;
    left: 50%;
    bottom: 120px;
    margin-left: -35px;
    opacity: 0;
    transition: opacity .6s;
    -moz-transition: opacity .6s;
    -webkit-transition: opacity .6s
}
#index .banner a.enter-down.loaded {
	display: block;
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    /*animation: enter-down 1.5s ease-in-out infinite;
    -moz-animation: enter-down 1.5s ease-in-out infinite;
    -webkit-animation: enter-down 1.5s ease-in-out infinite*/
}
@media (max-width: 991px) {
    #index .banner a.enter-down {
        bottom: 60px
    }
    #index .banner .ico {
        display: none
    }
}
@media (max-width: 767px) {
    #index .banner a.enter-down {
        width: 50px;
        height: 64px;
        padding-top: 15px;
        bottom: 70px;
        margin-left: -25px
    }
}
@keyframes enter-down {
    0%, 100% {
        opacity: 0;
        transform: translateY(0)
    }
    20% {
        opacity: 1;
        transform: translateY(0)
    }
    60% {
        opacity: 1;
        transform: translateY(40%)
    }
    80% {
        opacity: 0;
        transform: translateY(40%)
    }
}
@-moz-keyframes enter-down {
    0%, 100% {
        opacity: 0;
        -moz-transform: translateY(0)
    }
    20% {
        opacity: 1;
        -moz-transform: translateY(0)
    }
    60% {
        opacity: 1;
        -moz-transform: translateY(40%)
    }
    80% {
        opacity: 0;
        -moz-transform: translateY(40%)
    }
}
@-webkit-keyframes enter-down {
    0%, 100% {
        opacity: 0;
        -webkit-transform: translateY(0)
    }
    20% {
        opacity: 1;
        -webkit-transform: translateY(0)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(40%)
    }
    80% {
        opacity: 0;
        -webkit-transform: translateY(40%)
    }
}
@media (min-aspect-ratio: 16/9) {
    #index .banner .bg {
        width: 100%;
        height: auto
    }
}
@media (max-width: 767px) {
    #index .banner .ball {
        width: 600px;
        height: 600px;
        margin-top: -300px;
        margin-left: -300px
    }
    #index .banner .txt {
        width: 420px
    }
    #index .banner .txt .light {
        width: 540px;
        height: 405px;
        margin-top: -240px;
        margin-left: -270px
    }
    #index .banner .txt .title {
        height: 56px;
        background-size: 414px 46px
    }
}
@media (max-width: 639px) {
    #index .banner .ball {
        width: 480px;
        height: 480px;
        margin-top: -240px;
        margin-left: -240px
    }
    #index .banner .txt {
        width: 100%;
        max-width: 290px
    }
    #index .banner .txt .logo-effect {
        transform: scale(.8)
    }
    #index .banner .txt .logo-new {
        max-width: 180px
    }
    #index .banner .txt .logo span:nth-child(1) {
        transform: translate(6.48%, 6.48%)!important;
        -ms-transform: translate(6.48%, 6.48%)!important;
        -moz-transform: translate(6.48%, 6.48%)!important;
        -webkit-transform: translate(6.48%, 6.48%)!important
    }
    #index .banner .txt .logo span:nth-child(2) {
        transform: translate(5.76%, 5.76%)!important;
        -ms-transform: translate(5.76%, 5.76%)!important;
        -moz-transform: translate(5.76%, 5.76%)!important;
        -webkit-transform: translate(5.76%, 5.76%)!important
    }
    #index .banner .txt .logo span:nth-child(3) {
        transform: translate(5.04%, 5.04%)!important;
        -ms-transform: translate(5.04%, 5.04%)!important;
        -moz-transform: translate(5.04%, 5.04%)!important;
        -webkit-transform: translate(5.04%, 5.04%)!important
    }
    #index .banner .txt .logo span:nth-child(4) {
        transform: translate(4.32%, 4.32%)!important;
        -ms-transform: translate(4.32%, 4.32%)!important;
        -moz-transform: translate(4.32%, 4.32%)!important;
        -webkit-transform: translate(4.32%, 4.32%)!important
    }
    #index .banner .txt .logo span:nth-child(5) {
        transform: translate(3.6%, 3.6%)!important;
        -ms-transform: translate(3.6%, 3.6%)!important;
        -moz-transform: translate(3.6%, 3.6%)!important;
        -webkit-transform: translate(3.6%, 3.6%)!important
    }
    #index .banner .txt .logo span:nth-child(6) {
        transform: translate(2.88%, 2.88%)!important;
        -ms-transform: translate(2.88%, 2.88%)!important;
        -moz-transform: translate(2.88%, 2.88%)!important;
        -webkit-transform: translate(2.88%, 2.88%)!important
    }
    #index .banner .txt .logo span:nth-child(7) {
        transform: translate(2.16%, 2.16%)!important;
        -ms-transform: translate(2.16%, 2.16%)!important;
        -moz-transform: translate(2.16%, 2.16%)!important;
        -webkit-transform: translate(2.16%, 2.16%)!important
    }
    #index .banner .txt .logo span:nth-child(8) {
        transform: translate(1.44%, 1.44%)!important;
        -ms-transform: translate(1.44%, 1.44%)!important;
        -moz-transform: translate(1.44%, 1.44%)!important;
        -webkit-transform: translate(1.44%, 1.44%)!important
    }
    #index .banner .txt .logo span:nth-child(9) {
        transform: translate(.72%, .72%)!important;
        -ms-transform: translate(.72%, .72%)!important;
        -moz-transform: translate(.72%, .72%)!important;
        -webkit-transform: translate(.72%, .72%)!important
    }
    #index .banner .txt .logo span:nth-child(10) {
        transform: translate(0, 0)!important;
        -ms-transform: translate(0, 0)!important;
        -moz-transform: translate(0, 0)!important;
        -webkit-transform: translate(0, 0)!important
    }
    #index .banner .txt .title {
        height: 32px;
        background-size: 290px 32px
    }
    #index .banner .txt .slogan {
        line-height: 46px;
        font-size: 1.25rem;
        letter-spacing: 5px;
        padding-left: 5px
    }
}
@media (orientation: landscape) {
    @media (max-width: 1024px) {
        #index .banner .txt {
            max-width: 290px
        }
        #index .banner .txt .logo-new {
            max-width: 180px
        }
        #index .banner .txt .title {
            height: 32px;
            background-size: 290px 32px
        }
        #index .banner .txt .slogan {
            line-height: 46px;
            font-size: 1.25rem;
            letter-spacing: 5px;
            padding-left: 5px
        }
    }
    @media (max-width: 768px) {
        #index .banner .txt {
            max-width: 290px
        }
        #index .banner .txt .logo-effect {
            top: -80px;
            transform: scale(.5)
        }
        #index .banner .txt .logo-new {
            max-width: 120px
        }
        #index .banner .txt .title {
            margin-top: -111px
        }
        #index .banner .txt .slogan {
            line-height: 36px;
            font-size: 1rem;
            letter-spacing: 3px;
            margin-top: 9px;
            padding-left: 3px
        }
    }
    @media (max-width: 639px) {
        #index .banner a.enter-down {
            display: none
        }
        #index .banner .txt .logo-new {
            max-width: 100px
        }
        #index .banner .txt .logo-effect {
            top: -20px
        }
        #index .banner .txt .title {
            margin-top: -51px
        }
    }
}
#index .sec-1 {
    position: relative;
    z-index: 11;
    background: #fff;
    text-align: center;
    padding: 90px 0 60px
}
#index .sec-1:after,
#index .sec-1:before {
    position: absolute;
    width: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    left: 0;
    display: block;
    content: ''
}
#index .sec-1:before {
    height: 57%;
    background-image: url(../images/index_sec1_bg_t.jpg);
    background-position: bottom center;
    bottom: 43%
}
#index .sec-1:after {
    height: 43%;
    background-image: url(../images/index_sec1_bg_b.jpg);
    background-position: top center;
    top: 57%
}
#index .sec-1 .container {
    position: relative;
    z-index: 12
}
#index .sec-1 .title {
    line-height: 54px;
    font-size: 2.25rem;
    margin: 0
}
#index .sec-1 .sub-title {
    position: relative;
    line-height: 38px;
    font-size: 1.25rem;
    margin: 0;
    padding-bottom: 14px
}
#index .sec-1 .sub-title:after {
    content: '';
    display: block;
    position: absolute;
    width: 30px;
    height: 1px;
    background: #e2283f;
    left: 50%;
    bottom: 0;
    margin-left: -15px
}
#index .sec-1 .list {
    font-size: 0;
    margin-top: 40px
}
#index .sec-1 .list .box {
    display: inline-block;
    position: relative;
    width: 200px;
    margin: 0 55px 40px 0;
    vertical-align: top;
    opacity: 0;
    transform: translateX(80px);
    -ms-transform: translateX(80px);
    -moz-transform: translateX(80px);
    -webkit-transform: translateX(80px);
    transition: opacity .6s, transform .6s;
    -ms-transition: opacity .6s, transform .6s;
    -moz-transition: opacity .6s, transform .6s;
    -webkit-transition: opacity .6s, transform .6s
}
#index .sec-1 .list .box:nth-child(2) {
    transition-delay: .1s;
    -ms-transition-delay: .1s;
    -moz-transition-delay: .1s;
    -webkit-transition-delay: .1s
}
#index .sec-1 .list .box:nth-child(3) {
    transition-delay: .2s;
    -ms-transition-delay: .2s;
    -moz-transition-delay: .2s;
    -webkit-transition-delay: .2s
}
#index .sec-1 .list .box:nth-child(4) {
    transition-delay: .3s;
    -ms-transition-delay: .3s;
    -moz-transition-delay: .3s;
    -webkit-transition-delay: .3s
}
#index .sec-1 .list .box:nth-child(5) {
    margin-right: 0;
    transition-delay: .4s;
    -ms-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -webkit-transition-delay: .4s
}
#index .sec-1.scroll-view .list .box {
    opacity: 1;
    transform: translateX(0);
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0)
}
#index .sec-1 .list .box .pic {
    position: relative
}
#index .sec-1 .list .box .pic:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 30px;
    background-image: url(../images/index_sec1_shadow.png);
    background-size: contain;
    background-repeat: no-repeat;
    left: 0;
    bottom: -12px
}
#index .sec-1 .list .box .pic .img {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    border-radius: 100%;
    overflow: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transition: transform .6s;
    -ms-transition: transform .6s;
    -moz-transition: transform .6s;
    -webkit-transition: transform .6s
}
#index .sec-1 .list .box .pic .img img,
#index .sec-1 .list .box .pic .img:before {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    position: absolute;
    display: block
}
#index .sec-1 .list .box:nth-child(2) .pic .img {
    transition-delay: .1s;
    -ms-transition-delay: .1s;
    -moz-transition-delay: .1s;
    -webkit-transition-delay: .1s
}
#index .sec-1 .list .box:nth-child(3) .pic .img {
    transition-delay: .2s;
    -ms-transition-delay: .2s;
    -moz-transition-delay: .2s;
    -webkit-transition-delay: .2s
}
#index .sec-1 .list .box:nth-child(4) .pic .img {
    transition-delay: .3s;
    -ms-transition-delay: .3s;
    -moz-transition-delay: .3s;
    -webkit-transition-delay: .3s
}
#index .sec-1 .list .box:nth-child(5) .pic .img {
    transition-delay: .4s;
    -ms-transition-delay: .4s;
    -moz-transition-delay: .4s;
    -webkit-transition-delay: .4s
}
#index .sec-1.scroll-view .list .box .pic .img {
    transform: rotate(0);
    -ms-transform: rotate(0);
    -moz-transform: rotate(0);
    -webkit-transform: rotate(0)
}
#index .sec-1 .list .box .pic .img:before {
    content: '';
    z-index: 13;
    background: rgba(0, 0, 0, .4)
}
#index .sec-1 .list .box .pic .img:after {
    content: '';
    display: block;
    position: absolute;
    z-index: 13;
    width: 150px;
    height: 80px;
    background-image: url(../images/index_sec1_ico.png);
    background-size: 150px 400px;
    background-repeat: no-repeat;
    top: 50%;
    left: 50%;
    margin-top: -40px;
    margin-left: -75px
}
#index .sec-1 .list .box:nth-child(2) .pic .img:after {
    background-position: 0 -80px
}
#index .sec-1 .list .box:nth-child(3) .pic .img:after {
    background-position: 0 -160px
}
#index .sec-1 .list .box:nth-child(4) .pic .img:after {
    background-position: 0 -240px
}
#index .sec-1 .list .box:nth-child(5) .pic .img:after {
    background-position: 0 -320px
}
#index .sec-1 .list .box .box-title {
    position: relative;
    line-height: 30px;
    font-size: 1.25rem;
    color: #e2283f;
    margin: 22px 0 10px
}
#index .sec-1 .list .box .box-title:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 4px 0;
    border-color: #e2283f transparent transparent;
    left: 50%;
    bottom: -9px;
    margin-left: -4px
}
#index .sec-1 .list .box .box-info {
    line-height: 26px;
    font-size: 1.0625rem;
    color: #555;
    margin: 0
}
@media (max-width: 1279px) {
    #index .sec-1 .list .box {
        margin-right: 35px
    }
}
@media (max-width: 1199px) {
    #index .sec-1 .list .box {
        margin: 0 55px 40px
    }
}
@media (max-width: 991px) {
    #index .sec-1 {
        padding-top: 60px;
        padding-bottom: 40px
    }
    #index .sec-1 .title {
        line-height: 40px;
        font-size: 1.75rem
    }
    #index .sec-1 .sub-title {
        line-height: 32px;
        font-size: 1rem
    }
    #index .sec-1 .list .box {
        margin: 0 20px 40px
    }
    #index .sec-1 .list .box .box-title {
        line-height: 28px;
        font-size: 1rem
    }
    #index .sec-1 .list .box .box-info {
        font-size: .9375rem
    }
}
@media (max-width: 767px) {
    #index .sec-1 .list .box {
        margin: 0 30px 30px
    }
}
#index .sec-2 {
    position: relative;
    overflow: hidden;
    background: #000;
    margin: -40px 0;
    padding-top: 225px;
    padding-bottom: 195px;
    transition: background .5s;
    -moz-transition: background .5s;
    -webkit-transition: background .5s
}
#index .sec-2.scroll-view {
    background: rgba(0, 0, 0, .7)
}
#index .sec-2 .bg {
    position: absolute;
    width: 900px;
    height: 100%;
    background-image: url(../images/index_sec2_bg2.png);
    background-repeat: no-repeat;
    background-position: center;
    top: -13px;
    left: 50%;
    margin-left: -300px;
    opacity: 0;
    transition: opacity .4s;
    -ms-transition: opacity .4s;
    -moz-transition: opacity .4s;
    -webkit-transition: opacity .4s
}
#index .sec-2.scroll-view .bg {
    opacity: 1
}
#index .sec-2 .pic {
    display: block;
    position: absolute;
    width: 800px;
    top: 50%;
    left: 50%;
    margin-left: -100px;
    opacity: 0;
    transform: translateY(-50%) scale(.5);
    -ms-transform: translateY(-50%) scale(.5);
    -moz-transform: translateY(-50%) scale(.5);
    -webkit-transform: translateY(-50%) scale(.5);
    transition: opacity .4s .1s, transform .4s .1s;
    -ms-transition: opacity .4s .1s, transform .4s .1s;
    -moz-transition: opacity .4s .1s, transform .4s .1s;
    -webkit-transition: opacity .4s .1s, transform .4s .1s
}
#index .sec-2 .txt,
#index .sec-3 .pic .pic-1 {
    transition: opacity .4s .2s, transform .4s .2s
}
#index .sec-2.scroll-view .pic {
    opacity: 1;
    transform: translateY(-50%) scale(1);
    -ms-transform: translateY(-50%) scale(1);
    -moz-transform: translateY(-50%) scale(1);
    -webkit-transform: translateY(-50%) scale(1)
}
#index .sec-2 .txt {
    position: relative;
    width: 50%;
    min-width: 340px;
    opacity: 0;
    transform: translateX(-80px);
    -ms-transform: translateX(-80px);
    -moz-transform: translateX(-80px);
    -webkit-transform: translateX(-80px);
    -ms-transition: opacity .4s .2s, transform .4s .2s;
    -moz-transition: opacity .4s .2s, transform .4s .2s;
    -webkit-transition: opacity .4s .2s, transform .4s .2s
}
#index .sec-2.scroll-view .txt {
    opacity: 1;
    transform: translateX(0);
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0)
}
#index .sec-2 .txt .title {
    height: 40px;
    font-size: 0;
    background-image: url(../images/index_sec2_ti.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    margin: 0
}
#index .sec-2 .txt .sub-title {
    line-height: 30px;
    font-size: 1.25rem;
    color: #fff;
    padding: 8px 0
}
#index .sec-2 .txt .sub-title:after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #e2283f;
    margin: 10px 0
}
#index .sec-2 .txt p {
    line-height: 32px;
    font-size: 1.25rem;
    color: #fff;
    margin: 0
}
#index .sec-2 .txt .item {
    color: #ffce05;
    margin: 10px 0 0
}
#index .sec-2 .list li {
    position: relative;
    line-height: 26px;
    font-size: 1.125rem;
    color: #fff;
    padding: 4px 0 4px 15px
}
#index .sec-2 .list li:before {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    background: #fff;
    border-radius: 100%;
    top: 50%;
    left: 0;
    margin-top: -4px
}
#index .sec-3,
#index .sec-3 .container,
#index .sec-3 .txt {
    position: relative
}
@media (max-width: 991px) {
    #index .sec-2 {
        padding-top: 120px;
        padding-bottom: 100px
    }
    #index .sec-2 .pic {
        width: 600px
    }
    #index .sec-2 .txt .sub-title:after {
        margin-bottom: 0
    }
    #index .sec-2 .txt .item {
        font-size: 1.125rem;
        margin-top: 10px
    }
    #index .sec-2 .list li {
        line-height: 24px;
        font-size: 1rem
    }
}
@media (max-width: 479px) {
    #index .sec-2 {
        padding-top: 100px;
        padding-bottom: 100px
    }
    #index .sec-2.scroll-view .bg {
        opacity: .5
    }
    #index .sec-2 .pic {
        display: none
    }
    #index .sec-2 .txt {
        width: 100%;
        max-width: 320px;
        margin: auto
    }
    #index .sec-2 .txt .sub-title:after {
        margin: auto
    }
    #index .sec-2 .txt .item {
        text-align: center
    }
}
#index .sec-3 {
    z-index: 11;
    background-image: url(../images/index_sec3_bg.jpg);
    background-size: cover, 1920px 10px;
    background-repeat: no-repeat, repeat-y;
    background-position: top center;
    padding-top: 90px;
    padding-bottom: 100px;
    overflow: hidden
}
#index .sec-3 .title span,
#index .sec-3 .title:before {
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    display: block
}
#index .sec-3 .txt {
    /* float: right; */
    z-index: 12;
    width: 450px;
    padding-top: 50px;
    margin: auto;
    /* margin-right: 30%;*/
    text-align: center; 
    opacity: 0;
    transform: translateY(80px);
    -ms-transform: translateY(80px);
    -moz-transform: translateY(80px);
    -webkit-transform: translateY(80px);
    transition: opacity .4s .4s, transform .4s .4s;
    -ms-transition: opacity .4s .4s, transform .4s .4s;
    -moz-transition: opacity .4s .4s, transform .4s .4s;
    -webkit-transition: opacity .4s .4s, transform .4s .4s
}
#index .sec-3.scroll-view .txt {
    opacity: 1;
    transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0)
}
#index .sec-3 .title {
    position: relative;
    margin: 0
}

#index .sec-3 .title span {
    position: relative;
    z-index: 13;
    font-size: 0;
    background-image: url(../images/index_sec3_ti.png);
    background-position: center
}
#index .sec-3 .sub-title {
    position: relative;
    line-height: 33px;
    font-size: 1.25rem;
    color: #ffce05;
    text-align: center;
    margin-top: 8px
}
#index .sec-3 .sub-title:after,
#index .sec-3 .sub-title:before {
    content: '';
    display: block;
    position: absolute;
    width: 90px;
    height: 1px;
    top: 17px
}
#index .sec-3 .sub-title:before {
    left: 5%;
    background: rgba(255, 205, 5, .5);
    background: -moz-linear-gradient(left, rgba(255, 205, 5, 0) 0, rgba(255, 205, 5, .5) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0, rgba(255, 205, 5, 0)), color-stop(100%, rgba(255, 205, 5, .5)));
    background: -webkit-linear-gradient(left, rgba(255, 205, 5, 0) 0, rgba(255, 205, 5, .5) 100%);
    background: -o-linear-gradient(left, rgba(255, 205, 5, 0) 0, rgba(255, 205, 5, .5) 100%);
    background: -ms-linear-gradient(left, rgba(255, 205, 5, 0) 0, rgba(255, 205, 5, .5) 100%);
    background: linear-gradient(to right, rgba(255, 205, 5, 0) 0, rgba(255, 205, 5, .5) 100%)
}
#index .sec-3 .sub-title:after {
    right: 5%;
    background: rgba(255, 205, 5, .5);
    background: -moz-linear-gradient(left, rgba(255, 205, 5, .5) 0, rgba(255, 205, 5, 0) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0, rgba(255, 205, 5, .5)), color-stop(100%, rgba(255, 205, 5, 0)));
    background: -webkit-linear-gradient(left, rgba(255, 205, 5, .5) 0, rgba(255, 205, 5, 0) 100%);
    background: -o-linear-gradient(left, rgba(255, 205, 5, .5) 0, rgba(255, 205, 5, 0) 100%);
    background: -ms-linear-gradient(left, rgba(255, 205, 5, .5) 0, rgba(255, 205, 5, 0) 100%);
    background: linear-gradient(to right, rgba(255, 205, 5, .5) 0, rgba(255, 205, 5, 0) 100%)
}
#index .sec-3 .more,
#index .sec-6 .submit {
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff8192', endColorstr='#e2283e', GradientType=1)
}
#index .sec-3 p {
    line-height: 36px;
    font-size: 1.125rem;
    color: #fff;
    margin: 18px 0 32px
}
#index .sec-3 .more {
    display: inline-block;
    height: 44px;
    border-radius: 2px;
    padding: 1px;
    background: rgba(255, 129, 146, 1);
    background: -moz-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0, rgba(255, 129, 146, 1)), color-stop(100%, rgba(226, 40, 62, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -o-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -ms-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: linear-gradient(to right, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%)
}
/* #index .sec-3 .more span {
    display: block;
    position: relative;
    height: 42px;
    line-height: 42px;
    font-size: .9375rem;
    color: #fff;
    background: #e2283f;
    border-radius: 2px;
    padding: 0 45px 0 25px;
    transition: background .2s;
    -ms-transition: background .2s;
    -moz-transition: background .2s;
    -webkit-transition: background .2s
}
#index .sec-3 .more span:after,
#index .sec-3 .more span:before {
    position: absolute;
    display: block;
    content: ''
}
#index .sec-3 .more:hover span {
    background: #ff8191
} */
#index .sec-3 .more span:before {
    width: 18px;
    height: 18px;
    border: 1px solid rgba(255, 255, 255, .75);
    border-radius: 100%;
    top: 12px;
    right: 16px
}
#index .sec-3 .more span:after {
    width: 4px;
    height: 4px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    top: 19px;
    right: 24px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}
#index .sec-3 .pic {
    float: left;
    position: relative;
    width: 640px;
}
#index .sec-3 .pic img {
    display: block;
    position: relative;
    opacity: 0;
    transition: opacity .4s;
}
#index .sec-3.scroll-view .pic img {
    opacity: 1
}
#index .sec-3 .pic .pic-1 {
    position: absolute;
    top: 60px;
    right: -100px;
    opacity: 0;
    transform: translateX(80px);
    -ms-transform: translateX(80px);
    -moz-transform: translateX(80px);
    -webkit-transform: translateX(80px);
    -ms-transition: opacity .4s .2s, transform .4s .2s;
    -moz-transition: opacity .4s .2s, transform .4s .2s;
    -webkit-transition: opacity .4s .2s, transform .4s .2s;
}
#index .sec-3 .pic .pic-3 {
    position: absolute;
    top: -70px;
    left: -100px;
    opacity: 0;
    transform: translateX(-80px);
    -ms-transform: translateX(-80px);
    -moz-transform: translateX(-80px);
    -webkit-transform: translateX(-80px);
    transition: opacity .4s .2s, transform .4s .2s;
    -ms-transition: opacity .4s .2s, transform .4s .2s;
    -moz-transition: opacity .4s .2s, transform .4s .2s;
    -webkit-transition: opacity .4s .2s, transform .4s .2s;
}
#index .sec-3.scroll-view .pic .pic-1,
#index .sec-3.scroll-view .pic .pic-3 {
    opacity: 1;
    transform: translateX(0);
    -ms-transform: translateX(0);
    -moz-transform: translateX(0);
    -webkit-transform: translateX(0)
}
@media (max-width: 1199px) {
    #index .sec-3 .txt {
        width: 400px
    }
    #index .sec-3 .pic {
        width: 500px
    }
    #index .sec-3 .pic .pic-1 {
        width: 200px;
        right: -75px
    }
    #index .sec-3 .pic .pic-2 {
        width: 500px
    }
    #index .sec-3 .pic .pic-3 {
        width: 435px;
        top: -55px;
        left: -75px;
    }
}
@media (max-width: 991px) {
    #index .sec-3 {
        padding-top: 60px;
    }
    #index .sec-3 .txt {
        width: 320px;
    }
    #index .sec-3 .sub-title {
        line-height: 27px;
        font-size: 1.125rem;
    }
    #index .sec-3 .sub-title:after,
    #index .sec-3 .sub-title:before {
        width: 70px;
        top: 13px;
    }
    #index .sec-3 p {
        line-height: 32px;
        font-size: 1rem;
        margin: 10px 0 15px;
        text-shadow: 0px 4px 2px black, 1px -1px 2px black;
    }
    #index .sec-3 .pic {
        width: 360px;
        margin-top: 60px;
    }
    #index .sec-3 .pic .pic-1 {
        width: 145px;
        top: 35px;
        right: -55px;
    }
    #index .sec-3 .pic .pic-2 {
        width: 360px;
    }
    #index .sec-3 .pic .pic-3 {
        width: 315px;
        top: -40px;
        left: -55px;
    }
}
@media (max-width: 767px) {
    #index .sec-3 .txt {
        position: relative;
        z-index: 5;
        padding-top: 0
    }
    #index .sec-3 .title span {
        height: 40px;
    }
    #index .sec-3 .sub-title:after,
    #index .sec-3 .sub-title:before {
        width: 60px;
    }
    #index .sec-3 .pic {
        position: absolute;
        width: 240px;
        top: 50%;
        left: 10px;
        margin-top: -20px
    }
    #index .sec-3 .pic .pic-1 {
        width: 100px
    }
    #index .sec-3 .pic .pic-2 {
        width: 240px
    }
    #index .sec-3 .pic .pic-3 {
        width: 175px
    }
}
@media (max-width: 479px) {
    #index .sec-3 .txt {
        float: none;
        width: 100%;
        max-width: 320px;
        margin: auto;
    }
    #index .sec-3 .pic {
        display: none;
    }
}
#index .sec-4 {
    display: flex;
    height: 1080px;
    position: relative;
    background: #fff;
}

#index .sec-4 .myContainer{
    width: 100%;display: flex;
    flex-direction: row;
    justify-content:center;
}
#index .myContainer::before {
    content: "";
    position: absolute;
    height: 40px;
    width: 100vw;
    background: transparent linear-gradient(180deg, #ffffff6b 0%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
}
#index .myContainer::after {
    content: "";
    position: absolute;
    height: 40px;
    width: 100vw;
    bottom: 0;
    background: transparent linear-gradient(0deg, #ffffff6b 0%, #FFFFFF00 100%) 0% 0% no-repeat padding-box;
}

#index .sec-4 .myContainer .txt{
    font-family: Microsoft JhengHei;
    width: 46vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#index .sec-4 .myContainer .txt .title {
    color: #FFCE07;
    line-height: 54px;
    font-size:56px ;
    font-weight: bold;
    text-align: center;
    margin: 0
}
#index .sec-4 .myContainer .txt h3{
    font: normal normal bold 26px/38px Microsoft JhengHei;
    letter-spacing: 0px;
    color: #555555;
    margin-top: 24px;
    margin-bottom: 8px;
}
#index .sec-4 .myContainer .txt p{
    font: normal normal normal 24px/27px Microsoft JhengHei;
    letter-spacing: 0px;
    color: #8D8D8D;
}
#index .sec-4 .myContainer .txt .m{
    display: none;
}
#index .sec-4 .myContainer .txt .d{
    display:block;
}
#index .sec-4 .myContainer .txt .more p {
    line-height: 36px;
    font-size: 1.125rem;
    color: #fff;
    margin: 18px 0 32px
}
#index .sec-4 .myContainer .txt .more {
    display: inline-block;
    height: 44px;
    border-radius: 2px;
    padding: 1px;
    background: rgba(255, 129, 146, 1);
    background: -moz-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0, rgba(255, 129, 146, 1)), color-stop(100%, rgba(226, 40, 62, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -o-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -ms-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: linear-gradient(to right, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%)
}
#index .sec-4 .myContainer .txt .more span, #index .sec-3 .more span {
    display: block;
    position: relative;
    height: 42px;
    line-height: 42px;
    font-size: .9375rem;
    color: #fff;
    background: #e2283f;
    border-radius: 2px;
    padding: 0 39px;
    transition: background .2s;
    -ms-transition: background .2s;
    -moz-transition: background .2s;
    -webkit-transition: background .2s;
}
#index .sec-4 .myContainer .txt .more:hover span, #index .sec-3 .more:hover span {
    background: #ff8191;
}
#index .sec-4 .pic{
    width: 51vw;
    display: flex; 
}
#index .sec-4 .pic .gamelist_scroller{
    width: 100vw;
}
#index .sec-4 .pic .gamelist_scroller1{
    min-width: 250px;
    animation:gamelist_scroller1 linear infinite 106s;
}
#index .sec-4 .pic .gamelist_scroller2{
    min-width: 250px;
    background: url("../images/index_gamelist_scroller2.jpg")100% 15% repeat-y;
    animation:gamelist_scroller2 linear infinite 116s;
}
#index .sec-4 .pic .gamelist_scroller3{
    min-width: 250px;
    animation:gamelist_scroller3 linear infinite 106s;
}
#index .sec-4 .pic .gamelist_scroller4{
    min-width: 250px;
    animation:gamelist_scroller4 linear infinite 116s;
}
@keyframes gamelist_scroller1{
    0%{
        background: url("../images/index_gamelist_scroller.jpg")100% 0% repeat-y;    
    }
    100%{
        background: url("../images/index_gamelist_scroller.jpg")100% 101.6% repeat-y;
    }
}
@keyframes gamelist_scroller2{
    0%{
        background: url("../images/index_gamelist_scroller2.jpg")100% 3% repeat-y;    
    }
    100%{
        background: url("../images/index_gamelist_scroller2.jpg")100% 104.55% repeat-y;
    }
}
@keyframes gamelist_scroller3{
    0%{
        background: url("../images/index_gamelist_scroller3.jpg")100% 11% repeat-y;    
    }
    100%{
        background: url("../images/index_gamelist_scroller3.jpg")100% 112.55% repeat-y;
    }
}
@keyframes gamelist_scroller4{
    0%{
        background: url("../images/index_gamelist_scroller4.jpg")100% 3% repeat-y;    
    }
    100%{
        background: url("../images/index_gamelist_scroller4.jpg")100% 104.55% repeat-y;
    }
}
@media (max-width: 1245px) {
    #index .sec-4 .myContainer .txt div{
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        }
    #index .sec-4 .myContainer .txt .title,
    #index .sec-4 .myContainer .txt h3 {
    width:393px;
    }
}
@media (max-width: 768px) {
    #index .myContainer::after,
    #index .myContainer::before {
        display: none;
        }
    #index .sec-4 .myContainer .txt{
        width:100vw;
        justify-content: center;
        background: hsla(0, 0%, 0%, 0.5);
    }
  
    #index .sec-4 .myContainer .txt h3{
        text-align: center;
        font: normal normal bold 20px/24px Microsoft JhengHei;
        letter-spacing: 0px;
        color: #FFFFFF;
        text-shadow: 0px 1px 3px #000000;
    }
    #index .sec-4 .myContainer .txt .m{
        margin-top: 20px;
        margin-bottom: 60px;
      display:block;
    }
    #index .sec-4 .myContainer .txt .d{
      display: none;
    }

    #index .sec-4 .myContainer .txt .title {
        width: 220px;
        text-align: center;
        font: normal normal bold 32px/40px Microsoft JhengHei;
        letter-spacing: 0px;
        color: #FFCE07;
        text-shadow: 0px 1px 3px #000000D9;
    }
    #index .sec-4 .myContainer .pic{
        width:auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    #index .sec-4 {
        display: flex;
        height: 100vh;
        position: relative;
        background: #fff;
        
    }
    
    #index .sec-4 .pic .gamelist_scroller1,
    #index .sec-4 .pic .gamelist_scroller2,
    #index .sec-4 .pic .gamelist_scroller3,
    #index .sec-4 .pic .gamelist_scroller4{
        display: none;
    }

    #index .sec-4 .myContainer{
        background: url(../images/index_gamelist_scroller2.jpg) left 0 top 4546px repeat-y, url(../images/index_gamelist_scroller.jpg) left 245px top 4426px repeat-y, url(../images/index_gamelist_scroller3.jpg) left 490px top 4546px repeat-y, url(../images/index_gamelist_scroller4.jpg) left 635px top 4426px repeat-y ;
        animation: mobile_scrollerSmall linear infinite 106s;
        -ms-animation: mobile_scrollerSmall linear infinite 106s;
        -moz-animation: mobile_scrollerSmall linear infinite 106s;
        -webkit-animation: mobile_scrollerSmall linear infinite 106s;

    }

    @keyframes mobile_scrollerSmall {
        0% {
            background: url(../images/index_gamelist_scroller2.jpg) left 0 top 4546px repeat-y, url(../images/index_gamelist_scroller.jpg) left 245px top 4426px repeat-y, url(../images/index_gamelist_scroller3.jpg) left 490px top 4546px repeat-y, url(../images/index_gamelist_scroller4.jpg) left 635px top 4426px repeat-y ;
        }
        100% {
            background: url(../images/index_gamelist_scroller2.jpg) left 0 top 20px repeat-y,url(../images/index_gamelist_scroller.jpg) left 245px top -100px repeat-y, url(../images/index_gamelist_scroller3.jpg) left 490px top 20px repeat-y, url(../images/index_gamelist_scroller4.jpg) left 635px top -100px repeat-y ;
            
        }
    }
    
    
}
@media (max-width:543px) {
    #index .sec-4 .myContainer{
        background: url(../images/index_gamelist_scroller2.jpg) left 0 top 4546px repeat-y, url(../images/index_gamelist_scroller.jpg) left 245px top 4426px repeat-y, url(../images/index_gamelist_scroller3.jpg) left 490px top 4546px repeat-y, url(../images/index_gamelist_scroller4.jpg) left 635px top 4426px repeat-y;
        background-position: 0px 4546px, 245px 4426px, 490px 4546px, 635px 4426px;
        animation: unset;
        -ms-animation: unset;
        -moz-animation: unset;
        -webkit-animation: unset;

    }
    @keyframes mobile_scroller {
        0% {
            background: url(../images/index_gamelist_scroller2.jpg) left -40px top 4546px repeat-y, url(../images/index_gamelist_scroller.jpg) right -80px top 4426px repeat-y;
        }
        100% {
            background: url(../images/index_gamelist_scroller2.jpg) left -40px top 20px repeat-y,url(../images/index_gamelist_scroller.jpg) right -80px top -100px repeat-y;
        }
    }
}
#index .sec-5 {
    position: relative;
    height: 300px;
    overflow: hidden
}
#index .sec-5:after {
    content: '';
    display: block;
    position: absolute;
    width: 100vw;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    left: 0;
    bottom: 0;
    transition: opacity .6s, height .6s;
    -ms-transition: opacity .6s, height .6s;
    -moz-transition: opacity .6s, height .6s;
    -webkit-transition: opacity .6s, height .6s
}
#index .sec-5.scroll-view:after {
    height: 0;
    opacity: 0
}
#index .sec-5 .bg {
    display: block;
    position: absolute;
    width: auto;
    height: auto;
    min-width: 100%;
    min-height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%)
}
#index .sec-5 .txt {
    position: absolute;
    z-index: 12;
    width: 100%;
    text-align: center;
    padding: 0 15px;
    top: 50%;
    left: 0
}
#index .sec-5 .txt p {
    line-height: 32px;
    font-size: 1.25rem;
    color: #fec78a;
    margin: 0
}
#index .sec-5 .txt .play {
    display: block;
    position: relative;
    width: 50px;
    height: 50px;
    font-size: 0;
    background-color: transparent;
    background-image: url(../images/index_sec5_play1.png);
    background-size: 50px 50px;
    background-repeat: no-repeat;
    border-radius: 100%;
    outline: 0;
    margin: 24px auto 0;
    transition: background .2s;
    -ms-transition: background .2s;
    -moz-transition: background .2s;
    -webkit-transition: background .2s
}
#index .sec-5 .txt .play:after,
#index .sec-5 .txt .play:before {
    position: absolute;
    background-size: cover;
    background-repeat: no-repeat;
    display: block;
    content: ''
}
#index .sec-5 .txt .play:hover {
    background-color: rgba(255, 255, 255, .15)
}
#index .sec-5 .txt .play:before {
    width: 14px;
    height: 16px;
    background-image: url(../images/index_sec5_play2.png);
    top: 17px;
    left: 20px
}
#index .sec-5 .txt .play:after {
    width: 50px;
    height: 50px;
    background-image: url(../images/index_sec5_play3.png);
    top: 0;
    left: 0;
    transition: transform .2s;
    -ms-transition: transform .2s;
    -moz-transition: transform .2s;
    -webkit-transition: transform .2s
}
#index .sec-5 .txt .play:hover:after {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -webkit-transform: rotate(180deg)
}
@media (max-width: 767px) {
    #index .sec-5 .txt p {
        font-size: 1rem
    }
}
#index .sec-6 {
    margin-top: -40px;
    padding-top: 120px;
    padding-bottom: 115px
}
#index .sec-6 .title {
    line-height: 50px;
    font-size: 2.25rem;
    text-align: center;
    margin: 0
}
#index .sec-6 .title:after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #e2283f;
    margin: 12px auto 0
}
#index .sec-6 .input-wrap .input,
#index .sec-6 .input-wrap .select,
#index .sec-6 .input-wrap .textarea {
    background: rgba(0, 0, 0, 0);
    font-size: 1.125rem;
    width: 100%
}
#index .sec-6 .info {
    max-width: 690px;
    line-height: 32px;
    font-size: 1.125rem;
    text-align: center;
    margin: 10px auto 60px
}
#index .sec-6 form {
    font-size: 0
}
#index .sec-6 .input-wrap {
    display: inline-block;
    width: calc(50% - 15px);
    position: relative;
    margin: 0 0 10px;
    vertical-align: top
}
#index .sec-6 .input-wrap.full {
    width: 100%
}
#index .sec-6 .input-wrap.mg {
    margin-left: 30px
}
#index .sec-6 .input-wrap.style-2 {
    padding-left: 150px
}
#index .sec-6 .input-wrap .input {
    display: block;
    height: 46px;
    border: none;
    border-bottom: 1px solid #d1d1d1;
    border-radius: 0;
    padding: 0 10px 0 150px;
    transition: border .2s;
    -ms-transition: border .2s;
    -moz-transition: border .2s;
    -webkit-transition: border .2s
}
#index .sec-6 .input-wrap.style-2 .input {
    padding-left: 10px
}
#index .sec-6 .input-wrap .textarea {
    display: block;
    line-height: 24px;
    border: none;
    border-bottom: 1px solid #d1d1d1;
    border-radius: 0;
    padding: 11px 10px 11px 150px;
    transition: border .2s;
    -ms-transition: border .2s;
    -moz-transition: border .2s;
    -webkit-transition: border .2s
}
#index .sec-6 .input-wrap .input:focus,
#index .sec-6 .input-wrap .textarea:focus {
    border-bottom-color: #e2283f
}
#index .sec-6 .input-wrap .select {
    display: block;
    height: 46px;
    border: none;
    border: 1px solid #d1d1d1;
    border-radius: 0;
    padding: 0 6px;
    transition: color .2s, border .2s;
    -ms-transition: color .2s, border .2s;
    -moz-transition: color .2s, border .2s;
    -webkit-transition: color .2s, border .2s
}
#index .sec-6 .input-wrap .select:focus {
    color: #e2283f;
    border-color: #e2283f
}
#index .sec-6 .input-wrap.style-2 .select {
    position: absolute;
    width: 140px;
    top: 0;
    left: 0
}
#index .sec-6 .input-wrap .select option {
    color: #fff;
    background: rgba(0, 0, 0, .75)
}
#index .sec-6 .input-wrap span {
    display: block;
    position: absolute;
    line-height: 46px;
    font-size: 1.125rem;
    color: #555;
    top: 0;
    left: 10px;
    transition: color .2s;
    -ms-transition: color .2s;
    -moz-transition: color .2s;
    -webkit-transition: color .2s
}
#index .sec-6 .input-wrap .input:focus+span,
#index .sec-6 .input-wrap .textarea:focus+span {
    color: #e2283f
}
#index .sec-6 .input-wrap span i {
    font-style: normal;
    color: #aaa
}
#index .sec-6 .submit {
    display: block;
    width: 150px;
    height: 44px;
    border: none;
    border-radius: 2px;
    margin: 30px auto 0;
    padding: 1px;
    background: rgba(255, 129, 146, 1);
    background: -moz-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0, rgba(255, 129, 146, 1)), color-stop(100%, rgba(226, 40, 62, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -o-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -ms-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: linear-gradient(to right, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%)
}
#index .sec-6 .submit span {
    display: block;
    position: relative;
    height: 42px;
    line-height: 42px;
    font-size: .9375rem;
    color: #fff;
    background: #e2283f;
    border-radius: 2px;
    padding: 0 45px 0 25px;
    transition: background .2s;
    -ms-transition: background .2s;
    -moz-transition: background .2s;
    -webkit-transition: background .2s
}
#index .sec-6 .submit:hover span {
    background: #ff8191
}
#index .sec-6 .submit span:after {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    top: 15px;
    right: 30px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}
@media (max-width: 991px) {
    #index .sec-6 .input-wrap {
        width: 100%
    }
    #index .sec-6 .input-wrap.mg {
        margin-left: 0
    }
}
@media (max-width: 767px) {
    #index .sec-6 {
        padding-top: 100px;
        padding-bottom: 80px
    }
    #index .sec-6 .title {
        line-height: 40px;
        font-size: 1.75rem
    }
    #index .sec-6 .info {
        line-height: 28px;
        font-size: 1rem;
        margin-bottom: 30px
    }
    #index .sec-6 .input-wrap .input,
    #index .sec-6 .input-wrap .textarea {
        font-size: 1rem;
        padding-left: 140px
    }
    #index .sec-6 .input-wrap .select,
    #index .sec-6 .input-wrap span {
        font-size: 1rem
    }
}
@media (max-width: 479px) {
    #index .sec-6 .input-wrap.style-2 {
        padding-left: 110px
    }
    #index .sec-6 .input-wrap.style-3 {
        padding-top: 30px
    }
    #index .sec-6 .input-wrap .input {
        height: 64px;
        padding-top: 30px;
        padding-left: 10px;
        padding-bottom: 10px
    }
    #index .sec-6 .input-wrap .textarea {
        padding-top: 0;
        padding-left: 10px;
        padding-bottom: 10px
    }
    #index .sec-6 .input-wrap.style-2 .input {
        height: 46px;
        padding-top: 10px
    }
    #index .sec-6 .input-wrap.style-2 .select {
        width: 100px
    }
    #index .sec-6 .input-wrap span {
        line-height: 30px
    }
}
#about .p-ban .txt {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 35%;
    margin-top: 65px;
    opacity: 0;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transition: all .6s;
    -ms-transition: all .6s;
    -moz-transition: all .6s;
    -webkit-transition: all .6s
}
#about .p-ban.view .txt {
    opacity: 1;
    /* margin-top: 25px */
}
#about .p-ban .txt .title {
    width: 100%;
    max-width: 500px;
    font-size: 0;
    margin: auto
}
#about .p-ban .txt .title:after {
    content: '';
    display: block;
    height: 0;
    background: url(../images/about_ban_slogan.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: 20%
}
#about .p-ban .txt .txt-1 {
    line-height: 36px;
    font-size: 1.5rem;
    color:#ffce05;
    margin: 4px 0 0;
    font-weight: bold;
    
}
#about .p-ban .txt .txt-2 {
    max-width: 500px;
    line-height: 24px;
    font-size: 1.125rem;
    color: #ffffff;
    margin: 4px auto 0
}
#about .ti {
    line-height: 40px;
    font-size: 1.875rem;
    text-align: center;
    margin: 0
}
#about .ti:after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #e2283f;
    margin: 5px auto 0
}
#about .ti span {
    display: inline-block;
    width: 154px;
    height: 40px;
    font-size: 0;
    background: url(../images/about_inner_ti.jpg) no-repeat;
    vertical-align: middle;
    margin-bottom: 5px
}
#about .info {
    line-height: 32px;
    font-size: 1.125rem;
    color: #333;
    text-align: center;
    margin: 15px 0 60px
}
#about .info span {
    display: block
}
#about .intro {
    position: relative;
    font-size: 0;
    margin-top: 60px
}
#about .intro:after,
#about .intro:before {
    content: '';
    display: block;
    position: absolute;
    width: 1px;
    height: 100%;
    background: #ddd;
    top: 0;
    left: calc(33.333% - 13.33px)
}
#about .intro:after {
    left: auto;
    right: calc(33.333% - 13.33px)
}
#about .intro .box {
    display: inline-block;
    width: calc(33.333% - 53.33px);
    vertical-align: top
}
#about .intro .box+.box {
    margin-left: 80px
}
#about .intro .box .pic {
    position: relative
}
#about .intro .box .pic:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 20px;
    background: url(../images/about_pic_shadow.jpg) no-repeat;
    background-size: 100% 20px;
    top: 100%;
    left: 0
}
#about .intro .box .txt .box-ti {
    line-height: 30px;
    font-size: 1.25rem;
    color: #e2283f;
    margin: 25px 0 5px
}
#about .intro .box .txt .box-cont {
    line-height: 28px;
    font-size: 1rem;
    color: #666;
    margin: 0;
    text-align: justify
}
#about .bot {
    position: relative;
    height: 460px;
    background: url(../images/about_bot_bg.jpg) center no-repeat;
    background-size: cover
}
#about .bot .ball,
#about .bot .ico {
    width: 100%;
    height: calc(100% - 40px);
    top: 0;
    left: 0;
    opacity: 0;
    position: absolute
}
#about .bot .ico {
    background: url(../images/about_bot_ico.png) center no-repeat;
    background-size: cover;
    transition: opacity .5s;
    -moz-transition: opacity .5s;
    -webkit-transition: opacity .5s
}
#about .bot .ball {
    background: url(../images/about_bot_ball.png) center no-repeat;
    background-size: cover;
    transition: opacity .5s .25s;
    -moz-transition: opacity .5s .25s;
    -webkit-transition: opacity .5s .25s
}
#about .bot .txt .logo:before,
#about .bot .txt .title i {
    background-size: cover;
    background-repeat: no-repeat;
    display: block
}
#about .bot.loaded .ball,
#about .bot.loaded .ico {
    opacity: 1
}
#about .bot .txt {
    position: absolute;
    width: 410px;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    margin-left: -205px;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%)
}
#about .bot .txt .logo {
    position: relative;
    width: 290px;
    height: 160px;
    margin: auto;
    transform-origin: top center;
    -moz-transform-origin: top center;
    -webkit-transform-origin: top center;
    transform: scale(.78);
    -moz-transform: scale(.78);
    -webkit-transform: scale(.78)
}
/*#about .bot .txt .logo:before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../images/index_ban_logo_b.png);
    opacity: 0;
    transform: translate(-2%, -2%);
    -moz-transform: translate(-2%, -2%);
    -webkit-transform: translate(-2%, -2%);
    transition: opacity 1s, transform 1s;
    -moz-transition: opacity 1s, transform 1s;
    -webkit-transition: opacity 1s, transform 1s
}*/
#about .bot .txt .logo.run:before {
    opacity: 1;
    transform: none;
    -moz-transform: none;
    -webkit-transform: none
}
#about .bot .txt .logo svg {
    display: block;
    position: relative
}
#about .bot .txt .title {
    position: relative;
    font-size: 0;
    margin: -25px auto 0;
    perspective: 600px;
    -moz-perspective: 600px;
    -webkit-perspective: 600px
}
#about .bot .txt .title:before {
    content: '';
    display: block;
    height: 0;
    padding-bottom: 11.111%
}
#about .bot .txt .title i {
    position: absolute;
    height: 100%;
    top: 0;
    opacity: 0;
    transition: opacity 1s 3s, transform 1s 3s;
    -moz-transition: opacity 1s 3s, transform 1s 3s;
    -webkit-transition: opacity 1s 3s, transform 1s 3s
}
#about .bot .txt .title i:nth-child(1) {
    width: 9.815%;
    background-image: url(../images/index_ban_title_c.png);
    left: 27%;
    transform: scale(1.6) rotateY(360deg) translateX(-120%);
    -moz-transform: scale(1.6) rotateY(360deg) translateX(-120%);
    -webkit-transform: scale(1.6) rotateY(360deg) translateX(-120%)
}
#about .bot .txt .title i:nth-child(2) {
    width: 9.815%;
    background-image: url(../images/index_ban_title_c.png);
    left: 39%;
    transform: scale(1.4) rotateY(360deg) translateX(-80%);
    -moz-transform: scale(1.4) rotateY(360deg) translateX(-80%);
    -webkit-transform: scale(1.4) rotateY(360deg) translateX(-80%)
}
#about .bot .txt .title i:nth-child(3) {
    width: 9.5%;
    background-image: url(../images/index_ban_title_chi.png);
    left: 51%;
    transform: scale(1.2) rotateY(360deg) translateX(-40%);
    -moz-transform: scale(1.2) rotateY(360deg) translateX(-40%);
    -webkit-transform: scale(1.2) rotateY(360deg) translateX(-40%)
}
#about .bot .txt .title i:nth-child(4) {
    width: 10.3%;
    background-image: url(../images/index_ban_title_tuan.png);
    left: 63%;
    transform: scale(1) rotateY(360deg) translateX(0);
    -moz-transform: scale(1) rotateY(360deg) translateX(0);
    -webkit-transform: scale(1) rotateY(360deg) translateX(0)
}
/*#about .bot .txt .title i:nth-child(5) {
    width: 10.741%;
    background-image: url(../images/index_ban_title_m.png);
    left: 55.926%;
    transform: scale(1.2) rotateY(360deg) translateX(40%);
    -moz-transform: scale(1.2) rotateY(360deg) translateX(40%);
    -webkit-transform: scale(1.2) rotateY(360deg) translateX(40%)
}
#about .bot .txt .title i:nth-child(6) {
    width: 2.037%;
    background-image: url(../images/index_ban_title_i.png);
    left: 71.111%;
    transform: scale(1.4) rotateY(360deg) translateX(80%);
    -moz-transform: scale(1.4) rotateY(360deg) translateX(80%);
    -webkit-transform: scale(1.4) rotateY(360deg) translateX(80%)
}
#about .bot .txt .title i:nth-child(7) {
    width: 7.778%;
    background-image: url(../images/index_ban_title_n.png);
    left: 77.778%;
    transform: scale(1.6) rotateY(360deg) translateX(120%);
    -moz-transform: scale(1.6) rotateY(360deg) translateX(120%);
    -webkit-transform: scale(1.6) rotateY(360deg) translateX(120%)
}
#about .bot .txt .title i:nth-child(8) {
    width: 8.704%;
    background-image: url(../images/index_ban_title_g.png);
    left: 89.63%;
    transform: scale(1.8) rotateY(360deg) translateX(160%);
    -moz-transform: scale(1.8) rotateY(360deg) translateX(160%);
    -webkit-transform: scale(1.8) rotateY(360deg) translateX(160%)
}*/
#about .bot.loaded .txt .title i {
    opacity: 1;
    transform: scale(1) rotateY(0) translateX(0);
    -moz-transform: scale(1) rotateY(0) translateX(0);
    -webkit-transform: scale(1) rotateY(0) translateX(0)
}
#about .bot.loaded .txt .title i:nth-child(1) {
    animation: title 6s infinite 9.5s;
    -moz-animation: title 6s infinite 9.5s;
    -webkit-animation: title 6s infinite 9.5s
}
#about .bot.loaded .txt .title i:nth-child(2) {
    animation: title 6s infinite 9.625s;
    -moz-animation: title 6s infinite 9.625s;
    -webkit-animation: title 6s infinite 9.625s
}
#about .bot.loaded .txt .title i:nth-child(3) {
    animation: title 6s infinite 9.75s;
    -moz-animation: title 6s infinite 9.75s;
    -webkit-animation: title 6s infinite 9.75s
}
#about .bot.loaded .txt .title i:nth-child(4) {
    animation: title 6s infinite 9.875s;
    -moz-animation: title 6s infinite 9.875s;
    -webkit-animation: title 6s infinite 9.875s
}
#about .bot.loaded .txt .title i:nth-child(5) {
    animation: title 6s infinite 10s;
    -moz-animation: title 6s infinite 10s;
    -webkit-animation: title 6s infinite 10s
}
#about .bot.loaded .txt .title i:nth-child(6) {
    animation: title 6s infinite 10.125s;
    -moz-animation: title 6s infinite 10.125s;
    -webkit-animation: title 6s infinite 10.125s
}
#about .bot.loaded .txt .title i:nth-child(7) {
    animation: title 6s infinite 10.25s;
    -moz-animation: title 6s infinite 10.25s;
    -webkit-animation: title 6s infinite 10.25s
}
#about .bot.loaded .txt .title i:nth-child(8) {
    animation: title 6s infinite 10.375s;
    -moz-animation: title 6s infinite 10.375s;
    -webkit-animation: title 6s infinite 10.375s
}
#about .bot .txt .slogan {
    position: relative;
    max-width: 275px;
    line-height: 40px;
    font-size: 1.25rem;
    border-top: 1px solid rgba(0, 0, 0, .2);
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    text-align: center;
    letter-spacing: 4px;
    margin: 10px auto 0;
    padding-left: 4px;
    opacity: 0;
    transform: translateY(-40px);
    -ms-transform: translateY(-40px);
    -moz-transform: translateY(-40px);
    -webkit-transform: translateY(-40px);
    transition: opacity 1s 3s, transform 1s 3s;
    -ms-transition: opacity 1s 3s, transform 1s 3s;
    -moz-transition: opacity 1s 3s, transform 1s 3s;
    -webkit-transition: opacity 1s 3s, transform 1s 3s
}
#about .bot.loaded .txt .slogan {
    opacity: 1;
    transform: none;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none
}
#about .bot .txt .slogan:before {
    content: '';
    display: block;
    position: absolute;
    width: 4px;
    height: 4px;
    background: #333;
    border-radius: 100%;
    top: 50%;
    left: 50%;
    margin-top: -2px;
    margin-left: -2px
}
@media (max-width: 1190px) {
    #about .p-ban .txt {
        top: 25%;
    }
}    
@media (max-width: 991px) {
    #about .p-ban .txt {
        margin-top: 40px;
        top: 50%;
    }
    #about .p-ban.view .txt {
        margin-top: 0;
    }
    #about .intro:after,
    #about .intro:before {
        display: none
    }
    #about .intro .box {
        display: block;
        width: 100%
    }
    #about .intro .box+.box {
        border-top: 1px solid #ddd;
        margin-top: 30px;
        margin-left: 0;
        padding-top: 30px
    }
    #about .intro .box .pic {
        float: left;
        width: 300px
    }
    #about .intro .box .txt {
        float: right;
        width: calc(100% - 320px)
    }
    #about .intro .box .txt .box-ti {
        margin-top: 0
    }
    #about .bot {
        height: 380px
    }
    #about .bot .txt {
        width: 360px;
        margin-left: -180px
    }
    #about .bot .txt .logo {
        transform: scale(.7);
        -moz-transform: scale(.7);
        -webkit-transform: scale(.7)
    }
    #about .bot .txt .title {
        margin-top: -35px
    }
}
@media (max-width: 767px) {
    #about .p-ban .txt .title {
        max-width: 300px;      
    }
    #about .p-ban .txt .txt-1 {
        line-height: 32px;
        font-size: 1.25rem;
        font-size: 1.25rem;
        text-shadow: 0px 4px 2px #000000c4, 1px -1px 2px #000000c4;;       
        font-weight:bold;
    }
    #about .p-ban .txt .txt-2 {
        font-size: .9375rem;
        text-shadow: 0px 4px 2px black, 1px -1px 2px black;
    }
    #about .ti {
        line-height: 34px;
        font-size: 1.5rem
    }
    #about .ti span {
        height: 34px
    }
    #about .info {
        line-height: 28px;
        font-size: 1rem
    }
    #about .info span {
        display: inline
    }
    #about .intro {
        margin-top: 40px
    }
    #about .intro .box .txt .box-ti {
        line-height: 28px;
        font-size: 1.125rem
    }
    #about .intro .box .txt .box-cont {
        line-height: 26px;
        font-size: .9375rem
    }
    #about .bot {
        height: 320px
    }
    #about .bot .txt {
        width: 290px;
        margin-left: -145px
    }
    #about .bot .txt .logo {
        transform: scale(.55);
        -moz-transform: scale(.55);
        -webkit-transform: scale(.55)
    }
    #about .bot .txt .title {
        margin-top: -55px
    };
}
@media (max-width: 639px) {
    #about .intro {
        width: 100%;
        max-width: 350px;
        margin: 40px auto 0;
    }
    #about .intro .box .pic {
        float: none;
        width: 100%;
    }
    #about .intro .box .txt {
        float: none;
        width: 100%;
        margin-top: 25px;
    }
}
@media (max-width: 379px) {
    #about .bot {
        height: 280px;
      
    }
}
#solution .p-ban .txt {
    position: absolute;
    width: 100%;
    left: 0;
    /* bottom: 215px; */
    top:40%;
    opacity: 0;
    transform: translateY(40px);
    -ms-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -webkit-transform: translateY(40px);
    transition: all .6s;
    -ms-transition: all .6s;
    -moz-transition: all .6s;
    -webkit-transition: all .6s
}
#solution .p-ban.view .txt {
    opacity: 1;
    transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0)
}
#solution .p-ban .txt .title {
    position: relative;
    width: 100%;
    max-width: 450px;
    font-size: 0;
    margin: auto
}
#solution .p-ban .txt .title .ico {
    content: '';
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    background: url(../images/index_sec3_ti_light.png) no-repeat;
    background-size: contain
}
#solution .p-ban .txt .title .ico-1 {
    top: -17px;
    left: 135px
}
#solution .p-ban .txt .title .ico-2 {
    width: 38px;
    height: 38px;
    right: -10px;
    bottom: -10px
}
#solution .p-ban .txt .title:after {
    content: '';
    display: block;
    position: relative;
    height: 0;
    background: url(../images/pban_solution_ti.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: 11.111%
}
#solution .p-ban .txt .info {
    line-height: 30px;
    font-size: 1.25rem;
    color: #fff;
    text-align: center;
    margin: 10px 0 0
}
#solution .p-inner {
    background: #fff
}
#solution .sec-1 .info:after,
#solution .sec-1 .ti:after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #e2283f
}
#solution .sec-1 {
    padding: 0 0 80px
}
#solution .sec-1 .ti {
    line-height: 46px;
    font-size: 2.25rem;
    text-align: center;
    margin: 0
}
#solution .sec-1 .ti:after {
    margin: 15px auto 0
}
#solution .sec-1 .info {
    line-height: 30px;
    font-size: 1.25rem;
    text-align: center;
    margin: 10px 0 0
}
#solution .sec-1 .info:after {
    margin: 15px auto 0
}
#solution .sec-1 .cont {
    position: relative;
    font-size: 0;
    margin: 40px auto 0
}
#solution .sec-1 .cont:after,
#solution .sec-1 .cont:before {
    display: block;
    position: absolute;
    height: calc(100% - 130px);
    bottom: 0;
    content: '';
    pointer-events: none
}
#solution .sec-1 .cont:before {
    width: calc(50% + 36.67px);
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    left: calc(25% - 18.33px)
}
#solution .sec-1 .cont:after {
    width: 1px;
    background: #ddd;
    left: 50%
}
#solution .sec-1 .cont .box {
    display: inline-block;
    position: relative;
    width: 250px;
    vertical-align: top;
    perspective: 600px;
    -moz-perspective: 600px;
    -webkit-perspective: 600px
}
#solution .sec-1 .cont .box+.box {
    margin-left: 73.33px
}
#solution .sec-1 .cont .box .pic {
    position: relative;
    height: 0;
    padding-bottom: 60%;
    opacity: 0;
    transform: rotateX(90deg);
    -ms-transform: rotateX(90deg);
    -moz-transform: rotateX(90deg);
    -webkit-transform: rotateX(90deg);
    transition: all .6s;
    -ms-transition: all .6s;
    -moz-transition: all .6s;
    -webkit-transition: all .6s
}
#solution .sec-1 .cont .box.scroll-view .pic {
    opacity: 1;
    transform: rotateX(0);
    -ms-transform: rotateX(0);
    -moz-transform: rotateX(0);
    -webkit-transform: rotateX(0)
}
#solution .sec-1 .cont .box .pic img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}
#solution .sec-1 .cont .box .box-ti {
    position: relative;
    line-height: 26px;
    font-size: 1.125rem;
    color: #e2283f;
    margin: 10px 0 0;
    padding-left: 40px
}
#solution .sec-1 .cont .box .box-ti:before {
    content: '';
    display: block;
    position: absolute;
    width: 36px;
    height: 46px;
    background: url(../images/solution_sec1_no.png) no-repeat;
    background-size: 144px 46px;
    left: 0;
    bottom: 0
}
#solution .sec-1 .cont .box .box-ti.no-1:before {
    background-position: 0 0
}
#solution .sec-1 .cont .box .box-ti.no-2:before {
    background-position: -36px 0
}
#solution .sec-1 .cont .box .box-ti.no-3:before {
    background-position: -72px 0
}
#solution .sec-1 .cont .box .box-ti.no-4:before {
    background-position: -108px 0
}
#solution .sec-1 .cont .box .box-cont {
    line-height: 26px;
    font-size: 1rem;
    color: #555;
    margin: 4px 0 25px;
    text-align: justify
}
#solution .sec-1 .slogan {
    text-align: center;
    margin-top: 60px
}
#solution .sec-1 .slogan span {
    display: block;
    width: 100%;
    max-width: 320px;
    line-height: 0;
    font-size: 0;
    margin: auto
}
#solution .sec-1 .slogan span:after {
    content: '';
    display: block;
    height: 0;
    background: url(../images/solution_sec1_slogan.jpg) no-repeat;
    background-size: 100% 100%;
    padding-bottom: 9.375%
}
#solution .sec-2 {
    position: relative;
    height: 720px;
    background: #000
}
#solution .sec-2 .bg {
    position: relative;
    left: 50%;
    transform: translateX(-55%);
    -ms-transform: translateX(-55%);
    -moz-transform: translateX(-55%);
    -webkit-transform: translateX(-55%);
    transition: transform .5s;
    -ms-transition: transform .5s;
    -moz-transition: transform .5s;
    -webkit-transition: transform .5s
}
#solution .sec-2.after-lazy .bg {
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%)
}
#solution .sec-2 .txt {
    position: absolute;
    width: 100%;
    top: 50%;
    opacity: 0;
    transform: translate(100px, -50%);
    -ms-transform: translate(100px, -50%);
    -moz-transform: translate(100px, -50%);
    -webkit-transform: translate(100px, -50%);
    transition: opacity .5s, transform .5s;
    -ms-transition: opacity .5s, transform .5s;
    -moz-transition: opacity .5s, transform .5s;
    -webkit-transition: opacity .5s, transform .5s
}
#solution .sec-2.after-lazy .txt {
    opacity: 1;
    transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    -moz-transform: translate(0, -50%);
    -webkit-transform: translate(0, -50%)
}
#solution .sec-2 .txt .ti {
    width: 100%;
    max-width: 350px;
    font-size: 0;
    margin: 0
}
#solution .sec-2 .txt .ti:before {
    content: '';
    display: block;
    height: 0;
    background: url(../images/solution_sec2_ti.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: 10%
}
#solution .sec-2 .txt .ti:after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #e2283f;
    margin: 15px 0 0
}
#solution .sec-2 .txt .slogan:after,
#solution .sec-2-1 .ti:after {
    display: block;
    height: 0;
    content: ''
}
#solution .sec-2 .txt .cont {
    line-height: 26px;
    font-size: 1rem;
    color: #fff;
    margin: 30px 0 0
}
#solution .sec-2 .txt .cont strong {
    display: block;
    font-weight: 300;
    color: #f4dab0;
    margin-top: 6px
}
#solution .sec-2 .txt .slogan {
    width: 100%;
    max-width: 320px;
    line-height: 0;
    font-size: 0;
    margin-top: 12px
}
#solution .sec-2 .txt .slogan:after {
    background: url(../images/solution_sec2_slogan.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: 9.375%
}
#solution .sec-2-1 {
    position: relative;
    background: #000;
    overflow: hidden;
    padding: 80px 0 60px
}
#solution .sec-2-1 .bg {
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    transform: scale(0) translate(-50%, -50%);
    -ms-transform: scale(0) translate(-50%, -50%);
    -moz-transform: scale(0) translate(-50%, -50%);
    -webkit-transform: scale(0) translate(-50%, -50%);
    transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s
}
#solution .sec-2-1.scroll-view .bg {
    opacity: 1;
    transform: scale(1) translate(-50%, -50%);
    -ms-transform: scale(1) translate(-50%, -50%);
    -moz-transform: scale(1) translate(-50%, -50%);
    -webkit-transform: scale(1) translate(-50%, -50%)
}
#solution .sec-2-1 .txt {
    position: relative;
    text-align: center
}
#solution .sec-2-1 .txt .container {
    padding: 0
}
#solution .sec-2-1 .ti {
    max-width: 350px;
    line-height: 0;
    font-size: 0;
    margin: 0 auto 70px
}
#solution .sec-2-1 .ti:after {
    background: url(../images/solution_sec2_ti.png) no-repeat;
    background-size: cover;
    padding-bottom: 10%
}
#solution .sec-2-1 .list {
    font-size: 0
}
#solution .sec-2-1 .list .item {
    display: inline-block;
    width: 190px;
    vertical-align: top;
    margin: 0 2.5px 40px;
    perspective: 600px;
    -moz-perspective: 600px;
    -webkit-perspective: 600px
}
#solution .sec-2-1 .list .item:nth-child(even) {
    margin-top: 26px
}
#solution .sec-2-1 .list .item .pic {
    position: relative;
    padding: 1px;
    opacity: 0;
    transform: rotateY(30deg);
    -ms-transform: rotateY(30deg);
    -moz-transform: rotateY(30deg);
    -webkit-transform: rotateY(30deg);
    transition: all .6s;
    -ms-transition: all .6s;
    -moz-transition: all .6s;
    -webkit-transition: all .6s
}
#solution .sec-2-1 .list .item:nth-child(n+4) .pic {
    transform: rotateY(-30deg);
    -ms-transform: rotateY(-30deg);
    -moz-transform: rotateY(-30deg);
    -webkit-transform: rotateY(-30deg)
}
#solution .sec-2-1 .list .item.scroll-view .pic {
    opacity: 1;
    box-shadow: 0 0 20px rgba(160, 214, 255, .4);
    transform: rotateY(10deg);
    -ms-transform: rotateY(10deg);
    -moz-transform: rotateY(10deg);
    -webkit-transform: rotateY(10deg)
}
#solution .sec-2-1 .list .item:nth-child(n+4).scroll-view .pic {
    transform: rotateY(-10deg);
    -ms-transform: rotateY(-10deg);
    -moz-transform: rotateY(-10deg);
    -webkit-transform: rotateY(-10deg)
}
#solution .sec-2-1 .list .item .pic:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(52, 228, 255, 0);
    background: -moz-linear-gradient(top, rgba(52, 228, 255, 0) 0, rgba(0, 179, 255, 1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0, rgba(52, 228, 255, 0)), color-stop(100%, rgba(0, 179, 255, 1)));
    background: -webkit-linear-gradient(top, rgba(52, 228, 255, 0) 0, rgba(0, 179, 255, 1) 100%);
    background: -o-linear-gradient(top, rgba(52, 228, 255, 0) 0, rgba(0, 179, 255, 1) 100%);
    background: -ms-linear-gradient(top, rgba(52, 228, 255, 0) 0, rgba(0, 179, 255, 1) 100%);
    background: linear-gradient(to bottom, rgba(52, 228, 255, 0) 0, rgba(0, 179, 255, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#34e4ff', endColorstr='#00b3ff', GradientType=0)
}
#solution .sec-2-1 .list .item .pic img {
    position: relative
}
#solution .sec-2-1 .list .item .text {
    position: relative;
    margin-top: 20px;
    opacity: 0;
    transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    -moz-transform: translateY(-20px);
    -webkit-transform: translateY(-20px);
    transition: all .4s .6s;
    -ms-transition: all .4s .6s;
    -moz-transition: all .4s .6s;
    -webkit-transition: all .4s .6s
}
#solution .sec-2-1 .list .item.scroll-view .text {
    opacity: 1;
    transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0)
}
#solution .sec-2-1 .list .item .text .name {
    line-height: 30px;
    font-size: 1.25rem;
    color: #f4dab0;
    margin: 0
}
#solution .sec-2-1 .list .item .text .info {
    line-height: 26px;
    font-size: 1rem;
    color: #fff;
    margin: 0
}
#solution .sec-3 {
    padding-top: 80px;
    padding-bottom: 40px
}
#solution .sec-3 .box-1 .pic {
    float: left;
    position: relative;
    width: 490px
}
#solution .sec-3 .box-1 .pic:before {
    content: '';
    display: block;
    position: absolute;
    width: 95%;
    height: 88%;
    border: 6px solid #f2f2f2;
    top: 0;
    left: 0;
    opacity: 0;
    transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s
}
#solution .sec-3 .box-1 .pic.after-lazy:before {
    top: 20%;
    left: 10%;
    opacity: 1
}
#solution .sec-3 .box-1 .pic img {
    display: block;
    position: relative;
    transition: box-shadow .5s;
    -ms-transition: box-shadow .5s;
    -moz-transition: box-shadow .5s;
    -webkit-transition: box-shadow .5s
}
#solution .sec-3 .box-1 .pic.after-lazy img {
    box-shadow: 5px 5px 10px rgba(0, 0, 0, .25)
}
#solution .sec-3 .box-1 .txt {
    float: right;
    width: calc(100% - 590px);
    padding-top: 60px
}
#solution .sec-3 .box-1 .txt .box-ti {
    line-height: 42px;
    font-size: 2.25rem;
    margin: 0
}
#solution .sec-3 .box-1 .txt .box-ti:after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #e2283f;
    margin: 10px 0 0
}
#solution .sec-3 .box-1 .txt .box-list {
    margin-top: 25px
}
#solution .sec-3 .box-1 .txt .box-list li {
    position: relative;
    line-height: 26px;
    font-size: 1rem;
    color: #555;
    padding: 4px 0 4px 25px
}
#solution .sec-3 .box-1 .txt .box-list li:before {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    background: #e2283f;
    border-radius: 100%;
    top: 50%;
    left: 0;
    margin-top: -4px
}
#solution .sec-3 .box-1 .txt .box-cont {
    line-height: 32px;
    font-size: 1rem;
    color: #555;
    margin: 30px 0 0
}
#solution .sec-3 .box-1 .txt .box-cont strong {
    font-weight: 400;
    color: #e2283f
}
#solution .sec-3 .box-1 .txt .slogan {
    max-width: 420px;
    line-height: 0;
    font-size: 0;
    margin-top: 10px
}
#solution .sec-3 .box-1 .txt .slogan:after {
    content: '';
    display: block;
    height: 0;
    background: url(../images/solution_sec3_slogan1.jpg) no-repeat;
    background-size: 100% 100%;
    padding-bottom: 15.714%
}
#solution .sec-3 .box-2 {
    margin-top: 120px
}
#solution .sec-3 .box-2 .pic {
    float: right;
    position: relative;
    width: 490px
}
#solution .sec-3 .box-2 .pic:before {
    content: '';
    display: block;
    position: absolute;
    width: 95%;
    height: 88%;
    border: 6px solid #f2f2f2;
    top: 0;
    right: 0;
    opacity: 0;
    transition: all .5s;
    -ms-transition: all .5s;
    -moz-transition: all .5s;
    -webkit-transition: all .5s
}
#solution .sec-3 .box-2 .pic.after-lazy:before {
    top: 20%;
    right: 10%;
    opacity: 1
}
#solution .sec-3 .box-2 .pic img {
    display: block;
    position: relative;
    transition: box-shadow .5s;
    -ms-transition: box-shadow .5s;
    -moz-transition: box-shadow .5s;
    -webkit-transition: box-shadow .5s
}
#solution .sec-3 .box-2 .pic.after-lazy img {
    box-shadow: -5px 5px 10px rgba(0, 0, 0, .25)
}
#solution .sec-3 .box-2 .txt {
    float: left;
    width: calc(100% - 590px);
    padding-top: 60px
}
#solution .sec-3 .box-2 .txt .box-ti {
    line-height: 42px;
    font-size: 2.25rem;
    margin: 0
}
#solution .sec-3 .box-2 .txt .box-ti:after {
    content: '';
    display: block;
    width: 30px;
    height: 1px;
    background: #e2283f;
    margin: 10px 0 0
}
#solution .sec-3 .box-2 .txt .box-list {
    margin-top: 25px
}
#solution .sec-3 .box-2 .txt .box-list li {
    position: relative;
    line-height: 26px;
    font-size: 1rem;
    color: #555;
    padding: 4px 0 4px 25px
}
#solution .sec-3 .box-2 .txt .box-list li:before {
    content: '';
    display: block;
    position: absolute;
    width: 8px;
    height: 8px;
    background: #e2283f;
    border-radius: 100%;
    top: 50%;
    left: 0;
    margin-top: -4px
}
#solution .sec-3 .box-2 .txt .box-cont {
    line-height: 32px;
    font-size: 1rem;
    color: #555;
    margin: 30px 0 0
}
#solution .sec-3 .box-2 .txt .box-cont strong {
    font-weight: 400;
    color: #e2283f
}
#solution .sec-3 .box-2 .txt .slogan {
    max-width: 360px;
    line-height: 0;
    font-size: 0;
    margin-top: 10px
}
#solution .sec-3 .box-2 .txt .slogan:after {
    content: '';
    display: block;
    height: 0;
    background: url(../images/solution_sec3_slogan2.jpg) no-repeat;
    background-size: 100% 100%;
    padding-bottom: 8.333%
}
@media (max-width: 1279px) {
    #solution .sec-1 .cont:before {
        width: calc(50% + 23.33px);
        left: calc(25% - 11.67px)
    }
    #solution .sec-1 .cont .box+.box {
        margin-left: 46.67px
    }
}
@media (max-width: 1199px) {
    #solution .p-ban .txt .title .ico,
    #solution .sec-1 .cont:after,
    #solution .sec-1 .cont:before {
        display: none
    }
    #solution .sec-1 .cont .box {
        width: calc(50% - 80px);
        margin: 0 40px 40px!important
    }
    #solution .sec-1 .cont .box .pic {
        max-width: 250px;
        height: auto;
        margin: auto;
        padding-bottom: 0
    }
    #solution .sec-1 .cont .box .pic img {
        position: static;
        height: auto
    }
    #solution .sec-1 .cont .box .box-ti {
        max-width: 250px;
        margin: 10px auto 0
    }
    #solution .sec-1 .cont .box .box-cont {
        margin-top: 15px
    }
    #solution .sec-1 .slogan {
        margin-top: 20px
    }
    #solution .sec-2-1 .bg {
        width: auto;
        height: 100%
    }
    #solution .sec-2-1.scroll-view .bg {
        opacity: .5
    }
    #solution .sec-2-1 .list {
        padding: 0 80px
    }
    #solution .sec-2-1 .list .item {
        margin: 0 20px 40px
    }
    #solution .sec-2-1 .list .item:nth-child(n+4) .pic {
        transform: rotateY(30deg);
        -ms-transform: rotateY(30deg);
        -moz-transform: rotateY(30deg);
        -webkit-transform: rotateY(30deg)
    }
    #solution .sec-2-1 .list .item:nth-child(n+4).scroll-view .pic {
        transform: rotateY(10deg);
        -ms-transform: rotateY(10deg);
        -moz-transform: rotateY(10deg);
        -webkit-transform: rotateY(10deg)
    }
    #solution .sec-2-1 .list .item:nth-child(3n+2) .pic {
        transform: rotateY(-30deg);
        -ms-transform: rotateY(-30deg);
        -moz-transform: rotateY(-30deg);
        -webkit-transform: rotateY(-30deg)
    }
    #solution .sec-2-1 .list .item:nth-child(3n+2).scroll-view .pic {
        transform: rotateY(-10deg);
        -ms-transform: rotateY(-10deg);
        -moz-transform: rotateY(-10deg);
        -webkit-transform: rotateY(-10deg)
    }
    #solution .sec-3 .box-2 {
        margin-top: 80px
    }
    #solution .sec-3 .box-1 .pic,
    #solution .sec-3 .box-2 .pic {
        width: 400px
    }
    #solution .sec-3 .box-1 .txt,
    #solution .sec-3 .box-2 .txt {
        width: calc(100% - 460px);
        padding-top: 40px
    }
}
@media (max-width: 991px) {
    #solution .p-ban .txt {
        bottom: 20px
    }
    #solution .p-ban .txt .info {
        margin-top: 0
    }
    #solution .sec-2-1 .list {
        padding: 0
    }
    #solution .sec-3 .box-1 .pic,
    #solution .sec-3 .box-2 .pic {
        width: 320px
    }
    #solution .sec-3 .box-1 .txt,
    #solution .sec-3 .box-2 .txt {
        width: calc(100% - 360px);
        padding-top: 0
    }
    #solution .sec-3 .box-1 .txt .box-ti,
    #solution .sec-3 .box-2 .txt .box-ti {
        line-height: 40px;
        font-size: 1.5rem
    }
    #solution .sec-3 .box-1 .txt .box-list,
    #solution .sec-3 .box-2 .txt .box-list {
        margin-top: 15px
    }
    #solution .sec-3 .box-1 .txt .box-list li,
    #solution .sec-3 .box-2 .txt .box-list li {
        font-size: .9375rem;
        padding: 2px 0 2px 25px
    }
}
@media (max-width: 767px) {
    #solution .p-ban .txt .title {
        max-width: 300px
    }
    #solution .p-ban .txt .info {
        line-height: 26px;
        font-size: 1rem;
        text-shadow: 0px 4px 2px black, 1px -1px 2px black;
    }
    #solution .sec-1 {
        padding-bottom: 60px
    }
    #solution .sec-1 .ti {
        line-height: 34px;
        font-size: 1.5rem
    }
    #solution .sec-1 .info {
        line-height: 26px;
        font-size: 1.125rem;
        margin-top: 5px
    }
    #solution .sec-1 .cont .box {
        display: block;
        width: 100%;
        max-width: 400px;
        margin: 0 auto 30px!important
    }
    #solution .sec-1 .cont .box .box-cont {
        font-size: .9375rem
    }
    #solution .sec-2 {
        height: 576px
    }
    #solution .sec-2 .bg {
        width: 1536px;
        opacity: .5
    }
    #solution .sec-2 .txt .cont {
        font-size: .9375rem;
        margin-top: 15px
    }
    #solution .sec-2-1 {
        padding: 60px 0 40px
    }
    #solution .sec-2-1 .ti {
        max-width: 280px;
        margin-bottom: 30px
    }
    #solution .sec-2-1 .list .item .pic {
        transform: rotateY(30deg)!important;
        -ms-transform: rotateY(30deg)!important;
        -moz-transform: rotateY(30deg)!important;
        -webkit-transform: rotateY(30deg)!important
    }
    #solution .sec-2-1 .list .item.scroll-view .pic {
        transform: rotateY(10deg)!important;
        -ms-transform: rotateY(10deg)!important;
        -moz-transform: rotateY(10deg)!important;
        -webkit-transform: rotateY(10deg)!important
    }
    #solution .sec-2-1 .list .item .text .name {
        line-height: 26px;
        font-size: 1rem
    }
    #solution .sec-2-1 .list .item .text .info {
        line-height: 24px;
        font-size: .9375rem
    }
    #solution .sec-3 {
        padding-top: 60px;
        padding-bottom: 20px
    }
    #solution .sec-3 .box-2 {
        margin-top: 40px
    }
    #solution .sec-3 .box-1 .pic,
    #solution .sec-3 .box-2 .pic {
        float: none;
        width: 100%;
        max-width: 490px
    }
    #solution .sec-3 .box-1 .pic:before,
    #solution .sec-3 .box-2 .pic:before {
        display: none
    }
    #solution .sec-3 .box-2 .pic.after-lazy img {
        box-shadow: 5px 5px 10px rgba(0, 0, 0, .25)
    }
    #solution .sec-3 .box-1 .txt,
    #solution .sec-3 .box-2 .txt {
        float: none;
        width: 100%;
        margin-top: 20px
    }
    #solution .sec-3 .box-1 .txt .box-cont,
    #solution .sec-3 .box-2 .txt .box-cont {
        line-height: 26px;
        font-size: .9375rem;
        margin-top: 10px
    }
}
#game-1 .inner .info:after,
#game-1 .inner .info:after,
#game-2 .p-ban .title:after,
#game-2 .p-ban .title:after {
    display: block;
    content: ''
}
@media (max-width: 479px) {
    #solution .sec-2-1 .list .item {
        display: block;
        width: 100%;
        max-width: 260px;
        margin: 0 auto 30px
    }
    #solution .sec-2-1 .list .item .pic {
        float: left;
        width: 120px
    }
    #solution .sec-2-1 .list .item .text {
        float: right;
        width: 130px
    }
}
#game-1 .p-ban .txt{
    position: absolute;
    width: 100%;
    top: 40%;
    left: 35px;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transition: all .6s;
    -ms-transition: all .6s;
    -moz-transition: all .6s;
    -webkit-transition: all .6s
}
#game-2 .p-ban .txt {
    position: absolute;
    width: 100%;
    left: 0;
    margin-top: 10px;
    opacity: 0;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transition: all .6s;
    -ms-transition: all .6s;
    -moz-transition: all .6s;
    -webkit-transition: all .6s
}
#game-1 #filter::before {
    content: "";
    display: block;
    height:65px;
    margin: -65px 0 0;
}
#game-1 .p-ban.view .txt {
    opacity: 1;
    margin-top: -55px
}
#game-1 .p-ban .txt-inner {
    width: 750px;
    text-align: left;
}
#game-1 .p-ban .title {
    text-align: left;
    font: normal normal bold 56px/27px Microsoft JhengHei;
    letter-spacing: 0px;
    color: #FFCE07;
}
#game-1 .p-ban .title:after {
    height: 0;
    background: url(../images/pban_game1_ti.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: 10%
}
#game-1 .sec-1 {
    background: #fff;
    padding: 40px 0;
    position: relative;
    overflow: hidden;
}
#game-1 .p-ban .txt-1 {
    font-weight: bold;
    text-align: left;
    font-size: 28px;
    line-height: 38px;
    letter-spacing: 0px;
    color: #555555;
    padding-top:14px;
}

#game-1 .container {
    position: relative;
    padding: 0;
}

#game-1 .inner .ti,
#game-2 .inner .title {
    color:#1A234E;
    font-weight: bold;
    line-height: 40px;
    font-size: 1.875rem;
    text-align: center;
    margin-bottom: 20px;
}
#game-1 .inner .info {
    line-height: 27px;
    font-size: 18px;
    text-align: center;
    margin: 0
}

#game-1 .inner .list {
    font-size: 0;
    margin-top: 40px
}
#game-1 .inner .list .item {
    display: inline-block;
    width: 285px;
    vertical-align: top;
    margin: 0 13.55px 16px; 
}
#game-1 .inner .list .name {
    text-align: left;
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 0px;
    color: #333333; 
    margin-bottom: 6px;
}
#game-1 .list .item .pic:before {
    content: '';
    display: block;
    position: absolute;
    width: 80px;
    height: 1px;
    background: #fff;
    top: 50%;
    left: 50%;
    margin-top: 20px;
    margin-left: -40px;
    opacity: 0;
    transform: scaleX(0);
    -ms-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transition: all .4s;
    -ms-transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s;
}
#game-1 .list .item:hover .pic:before {
    width: 80px;
    height: 1px;
    opacity: 1;
    transform: scaleX(1);
    -ms-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -webkit-transform: scaleX(1)
}
#game-1 .list .item .pic:after {
    content: 'VIEW';
    border-bottom: #fff;
    border-width: 1px;
    display: block;
    position: absolute;
    line-height: 40px;
    font-size: 1rem;
    color: #fff;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    opacity: 0;
    transform: translate(-50%, 20px);
    -ms-transform: translate(-50%, 20px);
    -moz-transform: translate(-50%, 20px);
    -webkit-transform: translate(-50%, 20px);
    transition: all .4s;
    -ms-transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s
}
#game-1 .list .item .picZh:after{
    content: '游戏介绍'
}
#game-1 .list .item:hover .pic:after {
    opacity: 1;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0)
}
#game-1 .list .item:hover .pic img {
    opacity: .5!important
}
#game-1 .inner .list.scroll-view .item a {
    opacity: 1;
    transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0)
}
#game-1 .inner .list .item a .pic {
    position: relative;
    height: 0;
    border-radius: 10px;
    background: #000;
    padding-bottom: 150px;
    overflow: hidden
}

#game-1 .inner .list .item a .pic img {
    display: block;
    border-radius: 10px;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-backface-visibility: hidden;
    transition: opacity .2s, transform .2s;
    -ms-transition: opacity .2s, transform .2s;
    -moz-transition: opacity .2s, transform .2s;
    -webkit-transition: opacity .2s, transform .2s
}
#game-1 .inner .list .item a:hover .pic img {
    /* opacity: .75;
    transform: scale(1.2) rotate(-5deg);
    -ms-transform: scale(1.2) rotate(-5deg);
    -moz-transform: scale(1.2) rotate(-5deg);
    -webkit-transform: scale(1.2) rotate(-5deg) */
}
#game-1 .inner .list .item a .name {
    line-height: 24px;
    font-size: 1rem;
    color: #333;
    text-align: left;
    margin: 10px 0;
    padding: 0 10px;
    transition: color .2s;
    -ms-transition: color .2s;
    -moz-transition: color .2s;
    -webkit-transition: color .2s
}
#game-1 .inner .list .item a:hover .name {
    color: #e2283f
}
#game-1 .inner .list .item i.shadow {
    display: block;
    height: 20px;
    background: url(../images/game1_shadow.png) no-repeat;
    background-size: 100% 100%;
    opacity: 0;
    transform: translateY(10px);
    -ms-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -webkit-transform: translateY(10px);
    transition: opacity .4s, transform .4s;
    -ms-transition: opacity .4s, transform .4s;
    -moz-transition: opacity .4s, transform .4s;
    -webkit-transition: opacity .4s, transform .4s
}
#game-1 .inner .list.scroll-view .item i.shadow {
    opacity: 1;
    transform: translateY(0);
    -ms-transform: translateY(0);
    -moz-transform: translateY(0);
    -webkit-transform: translateY(0)
}
#game-1 .bot {
    position: relative;
    height: 510px;
    background: url(../images/game1_bot_bg.jpg) center no-repeat;
    background-size: cover
}
#game-1 .bot .txt {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 0;
    opacity: 0;
    margin-top: 40px;
    padding-top: 104px;
    transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    transition: opacity .6s, margin .6s;
    -ms-transition: opacity .6s, margin .6s;
    -moz-transition: opacity .6s, margin .6s;
    -webkit-transition: opacity .6s, margin .6s
}
#game-1 .bot.scroll-view .txt {
    opacity: 1;
    margin-top: 0
}
#game-1 .bot .txt .ti {
    max-width: 360px;
    position: relative;
    line-height: 0;
    font-size: 0;
    margin: auto
}
#game-1 .bot .txt .ti:before {
    content: '';
    display: block;
    position: absolute;
    width: 100px;
    height: 100px;
    background: url(../images/game1_bot_ico.png) no-repeat;
    top: -104px;
    left: 50%;
    margin-left: -50px
}
#game-1 .bot .txt .ti:after {
    content: '';
    display: block;
    height: 0;
    background: url(../images/game1_bot_ti.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: 13.333%
}
#game-1 .bot .txt .ti i {
    display: block;
    position: absolute;
    width: 50px;
    height: 50px;
    background: url(../images/index_sec3_ti_light.png) no-repeat;
    top: -104px;
    left: 50%
}
#game-1 .bot .txt .info {
    line-height: 32px;
    font-size: 1.25rem;
    color: #fff;
    text-align: center
}
#game-1 .bot .txt .pic {
    display: block;
    margin: 10px auto 0
}
@media (max-width: 1279px) {
    #game-1 .inner .list .item {
        margin: 0 4px 20px
    }
}
@media (max-width: 1199px) {
    #game-1 .inner .list .item {
        margin: 0 7.5px 20px
    }
}
@media (max-width: 991px) {
    #game-1 .p-ban .txt {
        top: auto;
        bottom: -20px;
        margin-top: 0;
        transform: translateY(0);
        -ms-transform: translateY(0);
        -moz-transform: translateY(0);
        -webkit-transform: translateY(0)
    }
    #game-1 .p-ban.view .txt {
        bottom: unset;
        top: 0;
        margin-top: 0
    }
    /* #game-1 .p-ban .txt-inner {
        width: 100%
    } */
    #game-1 .p-ban .title {
        margin-top: 10px;
        font-size:32px;
        font-weight: bold;
        max-width: 300px
    }
    #game-1 .p-ban .txt-2 {
        max-width: 400px;
        line-height: 24px;
        font-size: 1rem;
        margin-top: 0
    }
    #game-1 .sec-1{
        padding: 40px 0
    }
    #game-1 .inner .ti {
        line-height: 37px;
        font-size: 28px
    }
    #game-1 .bot .txt .info,
    #game-1 .inner .info {
        line-height: 26px;
        font-size: 1rem
    }
    #game-1 .inner .list .item {
        margin: 0 10px 26px
    }
    #game-1 .bot {
        height: 400px
    }
    #game-1 .bot .txt {
        padding-top: 84px
    }
    #game-1 .bot .txt .ti {
        max-width: 300px
    }
    #game-1 .bot .txt .ti:before {
        width: 80px;
        height: 80px;
        background-size: cover;
        margin-left: -40px;
        top: -84px
    }
    #game-1 .bot .txt .ti i {
        width: 40px;
        height: 40px;
        background-size: cover;
        top: -84px
    }
}
@media (max-width: 767px) {
    #game-1{
        padding-top:88px;
    }
    #game-1 .p-ban .txt {
        top: auto;
        bottom: 20px;
        transform: translateY(40px);
        -ms-transform: translateY(40px);
        -moz-transform: translateY(40px);
        -webkit-transform: translateY(40px)
    }
    #game-1 .p-ban.view .txt {
        top: -10px;
        left: 10px;
        transform: none;
        -ms-transform: none;
        -moz-transform: none;
        -webkit-transform: none
    }
    #game-1 .p-ban .txt-1 {
        width: 40%;
        padding-top: 0;
        line-height: 23px;
        font-size: 16px
    }
    #game-1 .p-ban .txt-2 {
        font-size: 1rem
    }
    #game-1 .inner .list {
        width: 480px;
        margin: 30px auto 0
    }
    #game-1 .inner .list .name {
        margin-bottom: 26px;
    }
}
@media (max-width: 543px) {
    #game-1 .inner .list {
        width: 300px
    }
}
#game-2 {
    overflow-x: initial
}
#game-2 .p-ban .img {
    display: block;
    position: absolute;
    width: auto;
    height: 100%;
    top: 0;
    left: 50%;
    opacity: 0;
    transform: translateX(-50%) scale(0);
    -ms-transform: translateX(-50%) scale(0);
    -moz-transform: translateX(-50%) scale(0);
    -webkit-transform: translateX(-50%) scale(0);
    transition: opacity .6s, transform .6s;
    -ms-transition: opacity .6s, transform .6s;
    -moz-transition: opacity .6s, transform .6s;
    -webkit-transition: opacity .6s, transform .6s
}
/* #game-2 .p-ban .txt .subti:after, */
#game-2 .p-ban .txt .ti:after {
    height: 0;
    content: '';
    display: block
}
#game-2 .p-ban.view .img {
    opacity: 1;
    transform: translateX(-50%) scale(1);
    -ms-transform: translateX(-50%) scale(1);
    -moz-transform: translateX(-50%) scale(1);
    -webkit-transform: translateX(-50%) scale(1)
}
#game-2 .p-ban .txt {
    position: absolute;
    width: 100%;
    text-align: center;
    left: 0;
    /* bottom: 400px; */
    top:40%;
    opacity: 0;
    transform: translateY(40px);
    -ms-transform: translateY(40px);
    -moz-transform: translateY(40px);
    -webkit-transform: translateY(40px);
    transition: all .6s .6s;
    -ms-transition: all .6s .6s;
    -moz-transition: all .6s .6s;
    -webkit-transition: all .6s .6s
}
#game-2 .p-ban.view .txt {
    opacity: 1;
    transform: none;
    -ms-transform: none;
    -moz-transform: none;
    -webkit-transform: none
}
#game-2 .p-ban .txt .ti {
    max-width: 500px;
    line-height: 0;
    font-size: 0;
    margin: auto
}
#game-2 .p-ban .txt .ti:after {
    background: url(../images/pban_game2_ti.png) no-repeat;
    background-size: cover;
    background-size: 100% 100%;
    padding-bottom: 11%
}
#game-2 .p-ban .txt .subti {
    max-width: 310px;
    line-height: 36px;
    font-size: 1.5rem;
    color: #ffce05;
    font-weight: bold;
    margin:auto;
}
#game-2 .p-ban .txt .subti:after {
    background: url(../images/pban_game2_subti.png) no-repeat;
    background-size: 100% 100%;
    padding-bottom: 12.258%
}
#game-2 .p-ban .txt .info {
    line-height: 26px;
    font-size: 1.125rem;
    color: #ffffff;
}
#game-2 .inner {
    background: #fff;
    padding: 40px 0
}

#game-2 .inner .info {
    line-height: 32px;
    font-size: 1.125rem;
    color: #333;
    text-align: center;
    margin: 15px 0 60px
}
#game-2 .inner .info span {
    display: block
}
#game-1 .inner .filter-wrap,
#game-2 .inner .filter-wrap {
    font-size: 0;
    text-align: center;
    margin: 20px 0 30px
}
/* for Chrome, Safari and Opera */
.filter-wrap::-webkit-scrollbar {
    display: none;
  }
  /* for IE, Edge and Firefox */
  #game-1 .inner .filter-wrap {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  } 


#game-1 .inner .filter-current,
#game-2 .inner .filter-current {
    display: none
}

#game-1 .inner .filter-tab>li,
#game-2 .inner .filter-tab>li {
    border-radius:5px;
    display: inline-block;
    position: relative;
    vertical-align: top;
    background-color:#F6F7F9;
    margin: 0 6px
}
#game-1 .inner .filter-tab>li:first-child,
#game-2 .inner .filter-tab>li:first-child {
    margin-left: 0
}
#game-1 .inner .filter-tab>li:last-child,
#game-2 .inner .filter-tab>li:last-child {
    margin-right: 0
}
#game-1 .inner .filter-tab>li>a,
#game-2 .inner .filter-tab>li>a {
    border-radius:5px;
    display: block;
    line-height: 27px;
    font-size: 16px;
    color: #555;
    padding: 10px 20px;
    font-weight: bold
}
#game-1 .inner .filter-tab>li>a:hover,
#game-2 .inner .filter-tab>li>a:hover {
    background: #e5e5e5
}
#game-1 .inner .filter-tab>li>a.current,
#game-2 .inner .filter-tab>li>a.current {
    color: #ffce05;
    background: #000
}
#game-2 .list {
    width: 1201px;
    min-height: 144px;
    margin: 0 auto;
    padding-top: 1px;
    padding-left: 1px;
    background: url(../images/game2_list_line.jpg) top repeat-x, url(../images/game2_list_line.jpg) left repeat-y, url(../images/game2_list_block_150.jpg) 1px 1px
}
#game-2 .list .item {
    float: left;
    width: 149px;
    height: 149px;
    margin-right: 1px;
    margin-bottom: 1px
}
#game-2 .list .item>a {
    display: block;
    position: relative;
    cursor: default
}
#game-2 .list .item>a:before {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% + 2px);
    height: calc(100% + 2px);
    border: 1px solid #e2283f;
    top: -1px;
    left: -1px;
    opacity: 0;
    transition: opacity .2s;
    -ms-transition: opacity .2s;
    -moz-transition: opacity .2s;
    -webkit-transition: opacity .2s
}
#game-2 .list .item>a:hover:before {
    opacity: 1
}
#game-2 .list .item>a .pic {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%;
    -webkit-transform: translateZ(0) scale(1, 1)
}
#game-2 .list .item>a .pic img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}
#game-2 .list .item>a .name {
    position: absolute;
    line-height: 26px;
    font-size: .9375rem;
    color: #fff;
    background: rgba(0, 0, 0, .75);
    margin: 0;
    padding: 2px 10px;
    top: -15px;
    left: 50%;
    white-space: nowrap;
    opacity: 0;
    transform: translate(-50%, 30px);
    -ms-transform: translate(-50%, 30px);
    -moz-transform: translate(-50%, 30px);
    -webkit-transform: translate(-50%, 30px);
    transition: all .2s;
    -ms-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s
}
#game-2 .list .item>a:hover .name {
    opacity: 1;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0)
}
#game-2 .list .item>a:hover .name:after {
    content: '';
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 6px 5px 0;
    border-color: rgba(0, 0, 0, .75) transparent transparent;
    top: 100%;
    left: 50%;
    margin-left: -5px
}
@media (max-width: 1279px) {
    #game-1 .list,
    #game-2 .list {
        width: 1051px
    }
}
@media (max-width: 1199px) {
    #game-1 .list,
    #game-2 .list {
        width: 901px
    }
}
@media (max-width: 991px) {
    #game-2 .p-ban .txt {
        bottom: 150px;
    }
    #game-1 .inner .filter-wrap{
        display: flex;
        justify-content: center;
    }
    #game-2 .inner .filter-wrap {
        position: relative;
        text-align: left;
        overflow-x: scroll;
        margin: 30px auto
    }
    
    #game-1 .inner .filter-current:hover,
    #game-1 .inner .filter-wrap.open .filter-current,
    #game-2 .inner .filter-current:hover,
    #game-2 .inner .filter-wrap.open .filter-current {
        border-color: #000
    }
    #game-1 .inner .filter-current:before ,
    #game-2 .inner .filter-current:before {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 6px 5px 0;
        border-color: #333 transparent transparent;
        top: 16px;
        right: 10px
    }
    #game-1 .inner .filter-tab,
    #game-2 .inner .filter-tab {
        display: flex;
        justify-content: space-between;
        width:max-content;
        
    }
    #game-1 .inner .filter-wrap.open .filter-tab,
    #game-2 .inner .filter-wrap.open .filter-tab {
        display: block
    }
    #game-1 .inner .filter-tab>li:after,
    #game-1 .inner .filter-tab>li:before,
    #game-2 .inner .filter-tab>li:after,
    #game-2 .inner .filter-tab>li:before {
        display: none
    }
    #game-1 .inner .filter-tab>li>a,
    #game-2 .inner .filter-tab>li>a {
        line-height: 24px;
        padding: 8px 15px
    }
    #game-1 .list{
        width: 610px;
        margin: 0 auto 0 auto ;

    }
    #game-2 .list {
        width: 751px;
        margin: 0 -15.5px
    }
}
@media (max-width: 767px) {
    #game-2 .p-ban .txt {
        bottom: 80px;
    }
    #game-1 .p-ban .txt .ti,
    #game-2 .p-ban .txt .ti {
        max-width: 300px
    }
    #game-1 .p-ban .txt .subti,
    #game-2 .p-ban .txt .subti {
        max-width: 240px
    }
    #game-1 .p-ban .txt .info,
    #game-2 .p-ban .txt .info {
        font-size: 1rem;
        margin-top: 0;
        text-shadow: 0px 4px 2px black, 1px -1px 2px black;
    }
    #game-1 .inner{
        padding: 20px 0

    }
    #game-2 .inner {
        padding: 60px 0
    }
    #game-1 .inner .title,
    #game-2 .inner .title {
        line-height: 34px;
        font-size: 1.5rem
    }
    #game-1 .inner .info ,
    #game-2 .inner .info {
        text-align: left;
        line-height: 27px;
        font-size: 18px;
        margin: 15px 15px 30px
    }
    #game-1 .inner .info span,
    #game-2 .inner .info span {
        display: inline
    }
    #game-1 .list ,
    #game-2 .list {
        width: 601px;
        margin: 0 auto
    }
    #game-2 .p-ban .txt .subti {
        font-size: 1.25rem;
        text-shadow: 0px 4px 2px #000000c4, 1px -1px 2px #000000c4;
        font-weight: bold;
    }
}
@media (max-width: 653px) {
    #game-1 .list ,
    #game-2 .list {
        width: 451px
    }
}
@media (max-width: 499px) {
    #game-1 .list,
    #game-2 .list {
        width: 301px
    }
}
@media (max-width: 349px) {
    #game-1 .list,
    #game-2 .list {
        width: 151px
    }
}

#game_eg_page{
    display: flex;
    flex-direction:column;
    font-family:Microsoft JhengHei;
}

#game_eg_page .backBtn{
    margin: 40px auto 80px auto;
}

#game_eg_page .backBtn a {
    color: #fff;
    position: relative;
    display: inline-block;
    height: 46px;
    border-radius: 2px;
    padding: 1px;
    background: rgba(255, 129, 146, 1);
    background: -moz-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -webkit-gradient(left top, right top, color-stop(0, rgba(255, 129, 146, 1)), color-stop(100%, rgba(226, 40, 62, 1)));
    background: -webkit-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -o-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: -ms-linear-gradient(left, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
    background: linear-gradient(to right, rgba(255, 129, 146, 1) 0, rgba(226, 40, 62, 1) 100%);
}
#game_eg_page .backBtn a .fa{
    position: absolute;
    right:26px;
    top: 16px;
}

#game_eg_page .backBtn a span {
    display: block;
    position: relative;
    height: 44px;
    line-height: 46px;
    font-size: 15px;
    background: #e2283f;
    border-radius: 2px;
    font-weight: normal;
    padding: 0 48px 0 38px ;
    transition: background .2s;
    -ms-transition: background .2s;
    -moz-transition: background .2s;
    -webkit-transition: background .2s;
}
@media(hover: hover) and (pointer: fine) {
    #game_eg_page .backBtn a:hover span {
        background: #ff8191
    }
}
#game_eg_page .playImgWrapper{
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
#game_eg_page .playImgWrapper img{
    border-radius:12px;
    width: 250px;
    height: 444px;
    margin: 20px 17.5px;
}

/*youtube*/
.videoBox {
    width: 50%;
    border-radius: 12px;
    margin: 0 auto;
    box-shadow: 0 10px 10px rgba(0, 0, 0, .3);
    margin-top: 100px;
    margin-bottom: 80px;
}
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 宽高比 */
  }
  
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 12px;
  }

#game_eg_page .gameInfoWrapper{
    /* min-height: 870px; */
    display: flex;
    /* align-items: start; */
    margin-top: 125px;
    flex-direction:row;
}

#game_eg_page .gameInfoWrapper .gameCover{
    position: relative;
    display: flex;
    justify-content: end;
    align-items: start;
    /* width: 30%; */
    /* min-width:400px; */
}

#game_eg_page .gameInfoWrapper .gameCover .phoneView{
    position: absolute;
    right: 39px;
}
#game_eg_page .gameInfoWrapper .gameCover .portrait{
    width: 400px;
}
#game_eg_page .gameInfoWrapper .gameCover .horizontal{
    width: 680px;
}
#game_eg_page .gameInfoWrapper .gameCover .portraitImg{
    width: 322px;
    padding-top: 70px;
}
#game_eg_page .gameInfoWrapper .gameCover .horizontalImg{
    width: 514px;
    transform: translate(-20px,36px);
}

#game_eg_page .gameInfoWrapper .infoWrapper{
    height: 100%;
    /* width: 63%; */
    padding-left: 60px;
}

#game_eg_page .gameInfoWrapper .infoWrapper .info{
    /* max-width: 735px; */
    height: 100%;
    display: flex;
    flex-direction: column;
    /* padding-bottom: 40px; */
}

#game_eg_page .gameInfoWrapper .infoWrapper h1{
    text-align: left;
    font-weight: bold;
    font-size: 40px;
    line-height: 53px;
    letter-spacing: 0px;
    color: #1A234E;
    margin-top: 0;
}

#game_eg_page .gameInfoWrapper .infoWrapper .info .descripion{
  margin-top: 30px;
}

#game_eg_page .gameInfoWrapper .infoWrapper .info>.descripion:nth-child(2){
  margin-top: 30px;
}
#game_eg_page .gameInfoWrapper .infoWrapper .info>.descripion:last-child{
  margin-top: 18px;
}
#game_eg_page .gameInfoWrapper .infoWrapper .descripion .gameData{
    color: #333333;
   letter-spacing: 0px;
}

#game_eg_page .infoWrapper .descripion .gameData .dataItem{
    margin-bottom: 27px;
    /* max-width: 184px; */
}

#game_eg_page .infoWrapper .descripion .gameData .col-lg-6{
    margin-bottom: 27px;
    max-width: 490px; 
}
#game_eg_page .infoWrapper .descripion .gameData .dataItem h3{
    font-size: 14px;
    line-height: 19px;
    font-weight: normal;
    margin: 0 auto 5px auto;
}
#game_eg_page .gameFeature~.playImgWrapper{
    margin-top: 0;
    margin-bottom: 20px;
}
#game_eg_page .gameFeature{
    margin: 20px auto 20px auto ;
}
#game_eg_page .gameInfoWrapper~.gameFeature{
    width: 63%;
    margin: 80px auto 20px auto ;
}
#game_eg_page .gameFeature ul{
    padding-left:12px;
}
#game_eg_page .gameFeature ul li{
    list-style-type: " • ";
    line-height: 30px;
   
}
#game_eg_page .gameInfoWrapper .infoWrapper .info .descripion p{
    line-height: 30px;
    }
#game_eg_page .gameFeature h2,
#game_eg_page .gameInfoWrapper .infoWrapper .descripion .gameData .dataItem p{
    font-weight:bold;
    font-size: 28px;
    line-height: 38px;
    min-width:157px;
    margin-bottom: 15px;
}
#game_eg_page .gameInfoWrapper .infoWrapper .descripion h2{
    font-size: 20px;
    line-height: 27px;
    font-weight: normal;
    letter-spacing: 0px;
    color: #878787;
    opacity: 1;
    margin-bottom: 20px;
}

#game_eg_page .gameInfoWrapper .infoWrapper .platforms img{
   width: 40px;
   margin:0 5px ;
}
#game_eg_page .gameInfoWrapper .infoWrapper .platforms img:first-child{
   margin-left:0;
}



/* 橫封面 */

#game_eg_page .horizontalWrapper {
    justify-content: center;
}
#game_eg_page .horizontalWrapper .infoWrapper{
    /* top: 50px; */
    /* position: absolute; */
    width: unset;
    padding-left:15px;
}
#game_eg_page .horizontalWrapper .infoWrapper .descripion .gameData{
    width: 736px;
}
#game_eg_page .horizontalWrapper .gameCover{
    /* position: absolute;
    left: 890px; */
}

#game_eg_page .horizontalWrapper .gameCover .phoneView{
    position: absolute;
    right:82px;
}
#game_eg_page .horizontalWrapper .infoWrapper .info{
    padding-bottom: unset;
}
#game_eg_page .horizontalWrapper .info .d-flex{
   justify-content: space-between;
}
#game_eg_page .horizontalWrapper .info p{
    width: 466px;
    margin-bottom: 15px;
}

#game_eg_page .gameInfoWrapper~.horizontal img,
#game_eg_page .horizontalWrapper~.playImgWrapper img{
    border-radius:12px;
    width: 374px;
    height: 212px;
    margin: 20px 12px;
}

@media (max-width: 1199px) {
    #game_eg_page{
        overflow-x: hidden;
    }
    #game_eg_page .gameInfoWrapper{
        height:auto;
        margin-top: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction:column;
        max-width: 100vw;
    }
    #game_eg_page .gameInfoWrapper .infoWrapper{
        padding-left: unset;
        width: unset;
    }
  
    #game_eg_page .gameInfoWrapper~.gameFeature{
        width: unset;
        margin: 20px auto 20px auto ;
    }
    
    #game_eg_page .gameInfoWrapper .infoWrapper h1{
        margin-bottom: -10px;
    }
    #game_eg_page .gameInfoWrapper .infoWrapper .info{
        padding-bottom:40px;
        padding-top: 45px;
    }

    #game_eg_page .playImgWrapper{
        margin-top: 20px;
        flex-direction: column;
        align-items: center;
    }
    #game_eg_page .gameInfoWrapper .gameCover{
      margin-top: 30px;
      justify-content: center;
    }
    #game_eg_page .gameInfoWrapper .gameCover .phoneView{
        position: absolute;
        right: unset;
    }
    #game_eg_page .videoBox{
        width: 90%;
    }
    
    /* 橫封面 */
    #game_eg_page .horizontalWrapper {
        margin-top: unset;
        display: flex;
        flex-direction: column-reverse;

    }
    #game_eg_page .horizontalWrapper .infoWrapper {
        position: unset;
        /* padding-left: 15px; */
    }
    #game_eg_page .horizontalWrapper .infoWrapper h1{
        margin-bottom: -20px;
    }
    #game_eg_page .horizontalWrapper .infoWrapper .info .descripion:first-child{
        margin-top: 10px ;
    }
    
    #game_eg_page .horizontalWrapper .gameCover {
    position: unset;
    margin: 51px auto 45px auto;
    }
    #game_eg_page .horizontalWrapper .info .d-flex{
        flex-direction:column-reverse;
     }
    #game_eg_page .horizontalWrapper .info p{
    width: unset;
    }
    
    #game_eg_page .horizontalWrapper .infoWrapper .info{
        padding-bottom: unset;
        padding-bottom: 40px;
        padding-left: 25px;
    }
}
@media (max-width: 767px) {
    #game_eg_page .horizontalWrapper~.playImgWrapper {
        margin-top: 60px;
    }
    #game_eg_page .gameInfoWrapper .gameCover .portraitImg{
        padding-top: 61px;
    }
    #game_eg_page .gameInfoWrapper~.horizontal img,
    #game_eg_page .horizontalWrapper~.playImgWrapper img{
        width: 345px;
        height: 195px;
    }
    #game_eg_page .gameInfoWrapper .infoWrapper .descripion .gameData{
        width:unset;
    }
   
    #game_eg_page .gameInfoWrapper .gameCover .portrait {
        width: 345px;
    }
    #game_eg_page .gameInfoWrapper .gameCover .portraitImg {
        width: 280px;
    }
    #game_eg_page .gameInfoWrapper .gameCover .horizontal{
        width: 345px;
    }
    #game_eg_page .gameInfoWrapper .gameCover .horizontalImg{
        width: 260px;
        transform: translate(-9px,18px);
    }
    #game_eg_page .videoBox{
        width: 90%;
    }
}

#news .list {
    font-size: 0
}
#news .list .item {
    display: inline-block;
    width: calc(33.333% - 26px);
    background: #fff;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
    margin-right: 39px;
    margin-bottom: 40px;
    vertical-align: top
}
#news .list .item:nth-child(3n) {
    margin-right: 0
}
#news .list .item .pic {
    position: relative;
    overflow: hidden;
    height: 0;
    background: #000;
    padding-bottom: 71.05%
}
#news .list .item .pic:before {
    content: '';
    display: block;
    position: absolute;
    width: 80px;
    height: 1px;
    background: #fff;
    top: 50%;
    left: 50%;
    margin-top: 20px;
    margin-left: -40px;
    opacity: 0;
    transform: scaleX(0);
    -ms-transform: scaleX(0);
    -moz-transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transition: all .4s;
    -ms-transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s
}
#news .list .item:hover .pic:before {
    opacity: 1;
    transform: scaleX(1);
    -ms-transform: scaleX(1);
    -moz-transform: scaleX(1);
    -webkit-transform: scaleX(1)
}
#news .list .item .pic:after {
    content: 'VIEW';
    display: block;
    position: absolute;
    line-height: 40px;
    font-size: 1rem;
    color: #fff;
    top: 50%;
    left: 50%;
    margin-top: -20px;
    opacity: 0;
    transform: translate(-50%, 20px);
    -ms-transform: translate(-50%, 20px);
    -moz-transform: translate(-50%, 20px);
    -webkit-transform: translate(-50%, 20px);
    transition: all .4s;
    -ms-transition: all .4s;
    -moz-transition: all .4s;
    -webkit-transition: all .4s
}
#news .list .item:hover .pic:after {
    opacity: 1;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0)
}
#news .list .item:hover .pic img {
    opacity: .5!important
}
#news .list .item .pic img {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    -webkit-transform: translateZ(0) scale(1, 1);
    transition: opacity .4s;
    -ms-transition: opacity .4s;
    -moz-transition: opacity .4s;
    -webkit-transition: opacity .4s
}
#news .list .item .date {
    display: block;
    position: absolute;
    width: 60px;
    height: 50px;
    line-height: 16px;
    font-size: .875rem;
    color: #333;
    background: #ffce05;
    text-align: center;
    top: 0;
    left: 0;
    padding-top: 9px
}
#news .list .item .txt {
    padding: 25px
}
#news .list .item .txt .title {
    line-height: 30px;
    font-size: 1.25rem;
    color: #333;
    margin: 0
}
#news .list .item .txt .summary {
    height: 52px;
    line-height: 26px;
    font-size: 1rem;
    color: #666;
    margin: 4px 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical
}
@media (max-width: 991px) {
    #news .list .item,
    #news .list .item:nth-child(3n) {
        margin-right: 40px
    }
    #news .list .item {
        width: calc(50% - 20px)
    }
    #news .list .item:nth-child(even) {
        margin-right: 0
    }
}
@media (max-width: 767px) {
    #news .list .item .txt {
        padding: 15px
    }
    #news .list .item .txt .title {
        line-height: 26px;
        font-size: 1rem
    }
    #news .list .item .txt .summary {
        font-size: .9375rem
    }
}
@media (max-width: 543px) {
    #news .list .item {
        width: 100%;
        margin-right: 0!important
    }
}
#news .in-view {
    padding: 50px 0 20px
}
#news .in-view .title {
    text-align: center;
    margin: 0
}
#news .in-view .title span {
    display: block
}
#news .in-view .title .ch {
    line-height: 44px;
    font-size: 2.25rem
}
#news .in-view .title .en {
    line-height: 26px;
    font-size: 1.25rem;
    color: #666;
    text-transform: uppercase
}
#news .in-view .view-inner {
    position: relative;
    background: #fff;
    margin-top: 45px;
    padding: 25px 25px 60px
}
#news .in-view .view-inner:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 5px;
    background: url(../images/news_view_line.png);
    top: -5px;
    left: 0
}
#news .in-view .view-inner .head {
    position: relative;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px
}
#news .in-view .view-inner .view-title {
    line-height: 70px;
    font-size: 1.625rem;
    margin: 0;
    padding-left: 90px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}
#news .in-view .view-inner .date {
    position: absolute;
    width: 70px;
    height: 70px;
    line-height: 20px;
    font-size: 1rem;
    background: #ffce05;
    text-align: center;
    top: 0;
    left: 0;
    padding-top: 16px
}
#news .in-view .view-inner .date:before {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
    border: 1px solid #ffd732;
    top: 4px;
    left: 4px;
    pointer-events: none
}
#news .in-view .view-inner .date span {
    display: block;
    font-size: 1.125rem
}
#news .in-view .view-inner .content {
    margin-top: 45px
}
@media (max-width: 991px) {
    #news .in-view {
        margin-top: -40px;
        padding-top: 0
    }
    #news .in-view .title .ch {
        line-height: 36px;
        font-size: 1.75rem
    }
    #news .in-view .title .en {
        font-size: 1rem
    }
    #news .in-view .view-inner .head {
        padding-top: 44px
    }
    #news .in-view .view-inner .view-title {
        line-height: 34px;
        font-size: 1.25rem;
        padding-left: 0
    }
    #news .in-view .view-inner .date {
        width: auto;
        height: auto;
        padding: 10px 16px
    }
    #news .in-view .view-inner .date span {
        display: inline;
        font-size: 1rem
    }
    #news .in-view .view-inner .date span:after {
        content: '/'
    }
}
@media (max-width: 767px) {
    #news .in-view {
        margin-top: -30px
    }
}
#contact {
    min-height: 100vh;
    background: url(../images/contact_bg.jpg) center no-repeat;
    background-size: cover;
    padding: 200px 0 150px
}
#contact .txt {
    max-width: 720px;
    color: #fff;
    margin: auto;
    padding: 0 15px
}
#contact .txt form dl dd,
#contact .txt form dl dt {
    border-bottom: 1px solid rgba(255, 255, 255, .5);
    padding: 12px 0
}
#contact .txt .ti {
    line-height: 50px;
    font-size: 2.25rem;
    text-align: center;
    margin: 0
}
#contact .txt .info {
    line-height: 32px;
    font-size: 1.125rem;
    text-align: center;
    margin: 5px 0 0
}
#contact .txt form {
    margin-top: 20px
}
#contact .txt form dl {
    margin: 0
}
#contact .txt form dl.style2 {
    border-bottom: 1px solid rgba(255, 255, 255, .5)
}
#contact .txt form dl dt {
    float: left;
    width: 150px;
    line-height: 36px;
    font-size: 1.125rem;
    font-weight: 300;
    color: #ddd
}
#contact .txt form dl dt.none {
    width: 0
}
#contact .txt form dl dt span {
    color: #666
}
#contact .txt form dl dd {
    float: right;
    width: calc(100% - 150px)
}
#contact .txt form dl dt.none+dd {
    width: 100%
}
#contact .txt form dl.style2 dd,
#contact .txt form dl.style2 dt {
    border-bottom: none
}
#contact .txt form dl dd.w2 {
    width: calc(100% - 165px);
    margin-left: 15px
}
#contact .txt form dl .input {
    display: block;
    width: 100%;
    height: 36px;
    font-size: 1.125rem;
    color: #fff;
    border: none;
    background: rgba(0, 0, 0, 0);
    border-radius: 0;
    padding: 0 10px;
    transition: background .4s;
    -ms-transition: background .4s;
    -moz-transition: background .4s;
    -webkit-transition: background .4s
}
#contact .txt form dl .select,
#contact .txt form dl .textarea {
    display: block;
    width: 100%;
    font-size: 1.125rem;
    border: none;
    color: #fff
}
#contact .txt form dl .textarea {
    line-height: 26px;
    background: rgba(0, 0, 0, 0);
    border-radius: 0;
    padding: 5px 10px;
    transition: background .4s;
    -ms-transition: background .4s;
    -moz-transition: background .4s;
    -webkit-transition: background .4s
}
#contact .txt form dl .input:focus,
#contact .txt form dl .textarea:focus {
    background: rgba(0, 0, 0, .25)
}
#contact .txt form dl .select {
    height: 36px;
    background: rgba(0, 0, 0, 0);
    border-radius: 0;
    padding: 0 10px 0 0;
    transition: background .4s;
    -ms-transition: background .4s;
    -moz-transition: background .4s;
    -webkit-transition: background .4s
}
#contact .txt form dl .select:focus {
    background: rgba(0, 0, 0, .25)
}
#contact .txt form dl .select option {
    background: rgba(0, 0, 0, .75)
}
#contact .txt form .btn-box {
    text-align: center;
    margin-top: 25px
}
#contact .txt form .btn-box .btn-style {
    display: inline-block;
    position: relative;
    width: 150px;
    height: 44px;
    font-size: 1rem;
    color: #fff;
    border: none;
    border-radius: 2px;
    vertical-align: top;
    margin: 0 4px;
    padding: 0
}
#contact .txt form .btn-box .btn-style.reset {
    background: #333
}
#contact .txt form .btn-box .btn-style.submit {
    background: #e2283f
}
#contact .txt form .btn-box .btn-style span {
    display: inline-block;
    vertical-align: top;
    position: relative;
    transition: transform .2s;
    -ms-transition: transform .2s;
    -moz-transition: transform .2s;
    -webkit-transition: transform .2s
}
#contact .txt form .btn-box .btn-style:hover span {
    transform: translateX(-8px);
    -ms-transform: translateX(-8px);
    -moz-transform: translateX(-8px);
    -webkit-transform: translateX(-8px)
}
#contact .txt form .btn-box .btn-style i {
    display: block;
    position: absolute;
    width: 16px;
    height: 16px;
    top: 14px;
    right: 30px;
    opacity: 0;
    transform: scale(0);
    -ms-transform: scale(0);
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transition: all .2s;
    -ms-transition: all .2s;
    -moz-transition: all .2s;
    -webkit-transition: all .2s
}
#contact .txt form .btn-box .btn-style:hover i {
    opacity: 1;
    transform: scale(1);
    -ms-transform: scale(1);
    -moz-transform: scale(1);
    -webkit-transform: scale(1)
}
#contact .txt form .btn-box .btn-style.reset i:after,
#contact .txt form .btn-box .btn-style.reset i:before {
    content: '';
    display: block;
    position: absolute;
    width: 12px;
    height: 2px;
    background: #fff;
    top: 7px;
    left: 2px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}
#contact .txt form .btn-box .btn-style.reset i:after {
    transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}
#contact .txt form .btn-box .btn-style.submit i:before {
    content: '';
    display: block;
    position: absolute;
    width: 6px;
    height: 10px;
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    top: 2px;
    left: 5px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg)
}
#contact a.back {
    display: block;
    width: 120px;
    height: 40px;
    line-height: 38px;
    font-size: 1rem;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 3px;
    text-align: center;
    margin: auto;
    padding: 0
}
#contact a.back:hover {
    background: rgba(255, 255, 255, .15)
}
@media (max-width: 991px) {
    #contact {
        padding: 140px 0 80px
    }
    #contact .txt .ti {
        line-height: 40px;
        font-size: 1.5rem
    }
    #contact .txt .info {
        line-height: 28px;
        font-size: 1rem
    }
    #contact .txt form dl dt {
        width: 140px;
        font-size: 1rem
    }
    #contact .txt form dl dd {
        width: calc(100% - 140px)
    }
    #contact .txt form dl .input,
    #contact .txt form dl .select,
    #contact .txt form dl .textarea {
        font-size: 1rem
    }
    #contact .txt form .btn-box .btn-style span {
        transform: translateX(-8px);
        -ms-transform: translateX(-8px);
        -moz-transform: translateX(-8px);
        -webkit-transform: translateX(-8px)
    }
    #contact .txt form .btn-box .btn-style i {
        opacity: 1;
        transform: scale(1);
        -ms-transform: scale(1);
        -moz-transform: scale(1);
        -webkit-transform: scale(1)
    }
}
@media (max-width: 479px) {
    #contact .txt form dl {
        border-bottom: 1px solid rgba(255, 255, 255, .5);
        padding: 10px 0
    }
    #contact .txt form dl dt {
        float: none;
        width: 100%;
        line-height: 30px;
        border-bottom: none;
        padding: 0 10px
    }
    #contact .txt form dl dd {
        float: none;
        width: 100%;
        border-bottom: none;
        padding: 0
    }
    #contact .txt form dl dd.w2 {
        width: 100%;
        margin-left: 0
    }
    #contact .txt form .select.style-2 {
        width: calc(100% - 20px);
        margin: 0 10px
    }
    #contact .txt form .btn-box .btn-style {
        display: block;
        margin: 0 auto
    }
    #contact .txt form .btn-box .btn-style+.btn-style {
        margin-top: 10px
    }
}
/*



/* CCGaming Modify */

.inner-more {
    display: block;
    width: 100%;
    vertical-align: top;
    position: relative;
}
a.btn-more {
    display: block;
    height: 28px;
    line-height: 26px;
    font-size: .75rem;
    color: #888;
    border: 1px solid #e8e8e8;
    background: #fff;
    border-radius: 14px;
    padding: 0 18px;
    width: auto;
    float: right;
    margin-right: 15px;
}
@media (max-width: 991px) {
    a.btn-more {
        float: none;
        width: 120px;
        margin: 20px auto -20px;
        text-align: center;
    }
}
/*最新消息5*/

.news_view_5 {
    list-style-type: none;
    padding: 0;
}
.news_view_5_li {
    width: 20%;
    margin: 0;
    position: relative;
    float: left;
    padding: 0 5px;
}
.news_view_5_li img {
    width: 100%;
}



/*CC集團贊助消息刊登*/

#pop_AD{
    z-index: 1000000001;
    position: fixed;
    right: 0;
    bottom: 280px;
    margin-right: 350px;
}
/*瘋狂猴子動動*/
.carzymonkey img {
    position: relative;
    width: 336px;
    height: 198px;
}
.pop_AD_close{
    position: absolute;
    right: -45px;
    top: 15px;
    color: #ffc207;
    display: table;
    text-align: center;
    /*letter-spacing: 4px;*/
    background-color:#520000;
    width:26px;
    height:26px;
    border-radius:50px;
    font-size: 18px;
    line-height: 25px;

}
.hidden_AD{
	display: none;
}

/*POP Window test*/
#pop_full_page_AD{
	position: fixed;
	bottom: 0;
	z-index: 1000000002;
}
.pop_wrap{
    width: 100vw;
    height: 100vh;
    background-color: rgba(220, 181, 34, 0.8);
    /*opacity: 0.6;*/
}
.pop_wrap .Level1{
    position: relative;
    width: 790px;
    height: 765px;
    top:50%;
    transform:translateY(-50%);
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    display: block;
    background: url(../images/pop_window/carzymonkey/crazyMonkey.png)center center no-repeat;
    background-size: contain;
}


.pop_wrap .close_btn img{
    position:absolute;
    width: 51px;
    top: 0;
    right: 20px;
    bottom: 550px;
    margin:auto;
    cursor: pointer;
}

.pop_wrap .questionnaire_btn img{
    position:absolute;
    transform: translateX(20%);
    width: 196px;
    right:0;
    top: 640px;
    left:0px;
    margin:auto;
}

.item-fixed{
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}
.issue {position:relative;}
.issue img {
    width: 265px;
    position:absolute;
    /* CSS3淡出淡入效果,1秒 */  -webkit-transition: opacity 0.5s ease-in-out;
    -moz-transition: opacity 0.5s ease-in-out;
    -o-transition: opacity 0.5s ease-in-out;
    transition: opacity 0.5s ease-in-out;
}

.issue img:nth-of-type(2):hover{
    opacity:0; /*滑鼠滑入時，透明度變0*/}


@media (max-width: 1199px) {
    .pop_wrap .Level1{
        position: relative;
        width: 650px;
        height: 629px;
        top:50%;
        transform:translateY(-50%);
        right:0;
        bottom:0;
        left:0;
        margin:auto;
        display: block;
        background: url(../images/pop_window/carzymonkey/crazyMonkey.png)center center no-repeat;
        background-size: contain;
    }

    .pop_wrap .close_btn img{
        position:absolute;
        width: 45px;
        top: 0;
        right: 5px;
        bottom: 305px;
        margin:auto;

    }

    .pop_wrap .questionnaire_btn img{
        position:absolute;
        width: 175px;
        right:15px;
        top: 465px;
        bottom:0px;
        left:0px;
        margin:auto;
    }
}
    @media (max-width: 991px) {
        .pop_wrap .Level1{
            position: relative;
            width: 460px;
            height: 533px;
            top:50%;
            transform:translateY(-50%);
            right:0;
            bottom:0;
            left:0;
            margin:auto;
            display: block;
            background: url(../images/pop_window/carzymonkey/crazyMonkey.png)center center no-repeat;
            background-size: contain;
        }

        .pop_wrap .close_btn img{
            position:absolute;
            width: 38px;
            top: 0;
            right: 20px;
            bottom: 300px;
            margin:auto;

        }

        .pop_wrap .questionnaire_btn img{
            position:absolute;
            width: 135px;
            right:0px;
            bottom:0px;
            top: 330px;
            left:0px;
            margin:auto;
        }
    }
        @media (max-width: 479px) {
            .pop_wrap .Level1{
                position: relative;
                width: 362px;
                height: 364px;
                top:50%;
                transform:translateY(-50%);
                right:0;
                bottom:0;
                left:0;
                margin:auto;
                display: block;
                background: url(../images/pop_window/carzymonkey/crazyMonkey.png)center center no-repeat;
                background-size: contain;
            }

            .pop_wrap .close_btn img{
                position:absolute;
                width: 35px;
                top: 5px;
                right: 235px;
                bottom: 180px;
                margin:auto;

            }

            .pop_wrap .questionnaire_btn img{
                position:absolute;
                width: 110px;
                right:0px;
                bottom:0px;
                top: 255px;
                left:0px;
                margin:auto;
            }
        }
            @media (max-width: 415px) {
                .pop_wrap .Level1{
                    position: relative;
                    width: 280px;
                    height: 270px;
                    top:50%;
                    transform:translateY(-50%);
                    right:0;
                    bottom:0;
                    left:0;
                    margin:auto;
                    display: block;
                    background: url(../images/pop_window/carzymonkey/crazyMonkey.png)center center no-repeat;
                    background-size: contain;
                }

                .pop_wrap .close_btn img{
                    position:absolute;
                    width: 30px;
                    top: 0px;
                    right: 10px;
                    bottom: 170px;
                    margin:auto;

                }

                .pop_wrap .questionnaire_btn img{
                    position:absolute;
                    width: 95px;
                    right:9px;
                    bottom:0px;
                    top: 202px;
                    left:0px;
                    margin:auto;
                }
                /*瘋狂猴子動動*/
                .carzymonkey img {
                    position: relative;
                    width: 100px;
                    height: 130px;
                }



                #pop_AD{
                    z-index: 1000000001;
                    position: fixed;
                    right: 150px;
                    bottom: 200px;
                    margin-right: 17px;
                }
                .issue img {
                  width: 150px;
                }
            }

            @media screen and (max-height: 500px) and (min-height: 230px) and (max-width: 850px) and (min-width: 360px) and (orientation: landscape)  {
                #pop_AD{
                    right: 27%;
                    bottom: 56%;
                    margin-right: 0;
                }

                .issue img {
                    width: 150px;
                  }
                  
                  a.go-top.scroll-view{
                      display: none;
                  }
            }