@charset "UTF-8";
.sys-container{width: 1200px;margin: 0 auto;}
p { margin-bottom: 0; }
ul{ margin-bottom: 0; }
html,body,.sys-bg{height:100%;}
.sys-bg { background: rgb(38, 109, 196)  url("../img/bg/index_page_bg.jpg") no-repeat center top; overflow: hidden;}
@media screen and (min-width: 2560px), (min-height: 1080px){
    .sys-bg{
        -webkit-background-size: 100% 100%;
        -moz-background-size: 100% 100%;
        background-size: 100% 100%;
    }
}

.sys-hd { margin-top: 11.66667%; margin-bottom: 10.41667%; text-align: center; font-size: 0; height: 50px; line-height: 50px; color: #fff; }
.sys-hd > span { vertical-align: top; display: inline-block; }
.sys-hd > .middle-circle { width: 8px; height: 8px; background-color: #fff; border-radius: 50%; vertical-align: middle; margin-left: 33px; margin-right: 33px; }
.sys-hd > span:last-of-type { font-size: 50px; }
.logo { height: 100%; width: 220px; background: url("../images/logo/logo.png") center no-repeat; }

.sys-entry-list { width: 1000px;}
.sys-entry-list li { overflow: hidden; position: relative; left: 0; right: 0; float: left; width: 211px; height: 327px; cursor: pointer; background-color: rgba(65, 188, 197, 0.4); border: 1px solid  rgba(255, 255, 255,.22); border-radius: 4px;  -webkit-transition: box-shadow 0.25s; -moz-transition: box-shadow 0.25s; -o-transition: box-shadow 0.25s; transition: box-shadow 0.25s; }
.sys-entry-list li + li { margin-left: 52px; }
.sys-entry-list li > em { position: absolute; left: 0; top: 0; -webkit-transition: opacity 0.25s; -moz-transition: opacity 0.25s; -o-transition: opacity 0.25s; transition: opacity 0.25s;opacity: 0;z-index: 10;}
.sys-entry-list li:hover{box-shadow: 0 5px 50px 0 rgba(13,9,7,.3);}
.sys-entry-list li:hover > em { opacity: 1; }
.sys-entry-list li:nth-of-type(1) {}
.sys-entry-list li:nth-of-type(1) > em { background: url("../img/bg/index_vidonmis_bg.png") no-repeat center; }
.sys-entry-list li:nth-of-type(1):hover > em { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); }
.sys-entry-list li:nth-of-type(1) > em:nth-of-type(1) {left: 8px;top: 60px;width: 46px;height: 46px;background-position: -8px -8px;}
.sys-entry-list li:nth-of-type(1) > em:nth-of-type(2) {left: 172px;top: 94px;width: 26px;height: 26px;background-position: -172px -42px;}
.sys-entry-list li:nth-of-type(1) > em:nth-of-type(3) {left: 15px;top: 239px;width: 12px;height: 12px;background-position: -15px -182px;}
.sys-entry-list li:nth-of-type(1) > em:nth-of-type(4) {left: 147px;top: 248px;width: 24px;height: 24px;background-position: -147px -191px;}
.sys-entry-list li:nth-of-type(1) > em:nth-of-type(5) {left: 140px;top: 265px;width: 15px;height: 15px;background-position: -140px -210px;}
.sys-entry-list li:nth-of-type(1) > em:nth-of-type(6) {left: 13px;top: 350px;width: 22px;height: 22px;background-position: -13px -295px;}

.sys-entry-list li:nth-of-type(2) { }
.sys-entry-list li:nth-of-type(2) > em { background: url("../img/bg/index_vip_bg.png") no-repeat center; }
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(1) {left: 11px;top: 83px;width: 11px;height: 11px;background-position: -11px -27px;}
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(2) {left: 130px;top: 81px;width: 28px;height: 28px;background-position: -130px -21px;}
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(3) {left: 155px;top: 105px;width: 16px;height: 16px;background-position: -157px -45px;}
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(4) {left: 50px;top: 125px;width: 33px;height: 33px;background-position: -50px -70px;}
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(5) { left: 166px; top: 174px; width: 21px; height: 21px; background-position: -168px -124px; }
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(6) {left: 2px;top: 209px;width: 26px;height: 26px;background-position: -6px -149px;}
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(7) { left: 183px; top: 200px; width: 9px; height: 9px; background-position: -184px -150px; }
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(8) {left: 112px;top: 233px;width: 17px;height: 17px;background-position: -114px -174px;}
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(9) {left: 44px;top: 270px;width: 17px;height: 17px;background-position: -44px -205px;}
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(10) {l;left: 135px;top: 295px;width: 10px;height: 10px;background-position: -146px -242px;}
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(11) {left: 2px;top: 318px;width: 13px;height: 13px;background-position: -2px -260px;}
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(12) {left: 17px;top: 341px;width: 24px;height: 24px;background-position: -17px -290px;}
.sys-entry-list li:nth-of-type(2) > em:nth-of-type(13) {left: 184px;top: 355px;width: 16px;height: 16px;background-position: -185px -300px;}

.sys-entry-list li:nth-of-type(3) {  }
.sys-entry-list li:nth-of-type(3) > em { background: url("../img/bg/index_pos_bg.png") no-repeat center; }
.sys-entry-list li:nth-of-type(3):hover > em { -webkit-transform: rotate(-360deg); -moz-transform: rotate(-360deg); -ms-transform: rotate(-360deg); -o-transform: rotate(-360deg); transform: rotate(-360deg); }
.sys-entry-list li:nth-of-type(3) > em:nth-of-type(1) {left: 160px;top: 79px;width: 37px;height: 37px;background-position: -158px -24px;}
.sys-entry-list li:nth-of-type(3) > em:nth-of-type(2) {left: 11px;top: 217px;width: 37px;height: 37px;background-position: -11px -152px;}
.sys-entry-list li:nth-of-type(3) > em:nth-of-type(3) {left: 145px;top: 248px;width: 26px;height: 26px;background-position: -145px -183px;}
.sys-entry-list li:nth-of-type(3) > em:nth-of-type(4) {left: 71px;top: 287px;width: 15px;height: 15px;background-position: -74px -233px;}
.sys-entry-list li:nth-of-type(3) > em:nth-of-type(5) {l;left: 183px;top: 296px;width: 17px;height: 17px;background-position: -183px -247px;}
.sys-entry-list li:nth-of-type(3) > em:nth-of-type(6) {left: 18px;to;top: 350px;width: 22px;height: 22px;background-position: -17px -295px;}
.sys-entry-list li:nth-of-type(3) > em:nth-of-type(7) {left: 97px;top: 120px;width: 30px;height: 30px;background-position: -99px -64px;}

.sys-entry-list li:nth-of-type(4) { }
.sys-entry-list li:nth-of-type(4) > em { background: url("../img/bg/index_movie_bg.png") no-repeat center; }
.sys-entry-list li:nth-of-type(4) > em:nth-of-type(1) {left: 72px;top: 51px;width: 42px;height: 46px;background-position: -73px 0;}
.sys-entry-list li:nth-of-type(4) > em:nth-of-type(2) {left: 7px;top: 158px;width: 22px;height: 24px;background-position: -7px -95px;}
.sys-entry-list li:nth-of-type(4) > em:nth-of-type(3) {left: 162px;top: 144px;width: 27px;height: 51px;background-position: -167px -96px;}
.sys-entry-list li:nth-of-type(4) > em:nth-of-type(4) {left: 50px;top: 206px;width: 23px;height: 32px;background-position: -50px -146px;}
.sys-entry-list li:nth-of-type(4) > em:nth-of-type(5) {left: 78px;top: 261px;width: 24px;height: 26px;background-position: -78px -204px;}
.sys-entry-list li:nth-of-type(4) > em:nth-of-type(6) {left: 151px;top: 279px;width: 22px;height: 26px;background-position: -160px -228px;}
.sys-entry-list li:nth-of-type(4) > em:nth-of-type(7) {left: 12px;top: 328px;width: 32px;height: 26px;background-position: -9px -274px;}


.sys-entry-item-mask {
    width: 100%;
    height: 166%;
    position: absolute;
    left: 0;
    top: 239px;
    border-radius: 4px;
}
.sys-entry-item-icon {
    position: absolute;
    left: 50%;
    top: 51px;
    margin-left: -68px;
    width: 136px;
    height: 136px;
    background-image: url("../img/icon/index_entry_icon.png");
    background-repeat: no-repeat;
}
.sys-entry-item-ft {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 5;
    width: 100%;
    height: 86px;
    line-height: 86px;
    font-size: 28px;
    color: #fff;
    text-align: center;
    background-color: #19444c;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}
li:hover .sys-entry-item-ft { background: transparent; }
/* 大icon animation动画 */
.sys-entry-item-icon.selected{
    -webkit-animation: big-icon-move 608ms cubic-bezier(0.13, 0.49, 0.86, 0.71) 60ms;
    -o-animation: big-icon-move 608ms cubic-bezier(0.13, 0.49, 0.86, 0.71) 60ms;
    animation: big-icon-move 608ms cubic-bezier(0.41, 0.56, 0.88, 0.61) 60ms;
}
/* 背景 animation动画上升 */
 .sys-entry-item-mask.selected{
    -webkit-animation: mask-move-up 290ms cubic-bezier(0.15, 1.07, 0.58, 1.25) 106ms normal running both;
    -o-animation: mask-move-up 290ms cubic-bezier(0.15, 1.07, 0.58, 1.25) 106ms normal running both;
    animation: mask-move-up 290ms cubic-bezier(0.14, 0.71, 0.71, 1.3) 106ms normal running both;
}
/* 背景 animation动画下降 */
.sys-entry-item-mask.selected2{
    -webkit-animation: mask-move-down 540ms cubic-bezier(0, 0, 0.56, 0.86) 0s normal running both;
    -o-animation: mask-move-down 540ms cubic-bezier(0, 0, 0.56, 0.86) 0s normal running both;
    animation: mask-move-down 540ms cubic-bezier(0, 0, 0.4, 1.15) 0s normal running both;
}

/* 文字 animation动画上升 */
.sys-entry-item-ft.selected{
    -webkit-animation: text-up 540ms  cubic-bezier(0.1, 0.62, 1, 0.81) 0s normal running both;;
    -o-animation: text-up 540ms  cubic-bezier(0.1, 0.62, 1, 0.81) 0s normal running both;;
    animation: text-up 540ms  cubic-bezier(0.1, 0.62, 1, 0.81) 0s normal running both;;
}
/* 文字 animation动画下降 */
.sys-entry-item-ft.selected2{
    -webkit-animation: text-down 410ms cubic-bezier(0, 0, 0.44, 0.96) 0s normal running both;;
    -o-animation: text-down 410ms cubic-bezier(0, 0, 0.44, 0.96) 0s normal running both;;
    animation: text-down 410ms cubic-bezier(0, 0, 0.44, 0.96) 0s normal running both;;
}

/* 小icon动画1 上升 */
.sys-entry-list li >em.selected{
    -webkit-animation: small-icon-up1 500ms cubic-bezier(0.1, 0.51, 0.88, 0.6) 125ms normal running both;;
    -o-animation: small-icon-up1 500ms cubic-bezier(0.1, 0.51, 0.88, 0.6) 125ms normal running both;;
    animation: small-icon-up1 500ms cubic-bezier(0.1, 0.51, 0.88, 0.6) 125ms normal running both;;
}
/* 小icon动画1 下降 */
.sys-entry-list li >em.selected2{
    -webkit-animation: small-icon-down1 410ms cubic-bezier(0, 0, 0.44, 0.96) 0s normal running both;
    -o-animation: small-icon-down1 410ms cubic-bezier(0, 0, 0.44, 0.96) 0s normal running both;
    animation: small-icon-down1 410ms cubic-bezier(0, 0, 0.3, 1.35) 0s normal running both;
}
.sys-entry-list li >em.selected3{
    -webkit-animation: small-icon-up1 500ms cubic-bezier(0.08, 0.39, 0.87, 0.57) 210ms normal running both;;
    -o-animation: small-icon-up1 500ms cubic-bezier(0.08, 0.39, 0.87, 0.57) 210ms normal running both;;
    animation: small-icon-up1 500ms cubic-bezier(0.08, 0.39, 0.87, 0.57) 210ms normal running both;;
}

.sys-entry-list li:nth-of-type(n) .sys-entry-item-mask.selected2{ background-color: #19444c;}
.sys-entry-list li:nth-of-type(1) .sys-entry-item-mask{background: #ff413d; }
.sys-entry-list li:nth-of-type(1) .sys-entry-item-icon { background-position: 0 0; }

.sys-entry-list li:nth-of-type(2) .sys-entry-item-mask{ background: #ecb100; }
.sys-entry-list li:nth-of-type(2) .sys-entry-item-icon { background-position: 0 -150px; }

.sys-entry-list li:nth-of-type(3) .sys-entry-item-mask{ background: #d95483; }
.sys-entry-list li:nth-of-type(3) .sys-entry-item-icon { background-position: 0 -300px; }

.sys-entry-list li:nth-of-type(4) .sys-entry-item-mask{ background: #32c693; }
.sys-entry-list li:nth-of-type(4) .sys-entry-item-icon { background-position: 0 -450px; }

.sys-content-bg { width: 1305px; margin-left: -52.5px; font-size: 0; padding-top: 14.16667%; background: url("../img/bg/index_content_bg.png") no-repeat center -40px; }



/* 大icon动画 */
@-webkit-keyframes big-icon-move {
    from{transform: translateY(0)}
    42%{transform: translateY(-46px)}
    to{transform: translateY(0)}
}
@-o-keyframes big-icon-move {
    from{transform: translateY(0)}
    42%{transform: translateY(-46px)}
    to{transform: translateY(0)}
}
@-moz-keyframes big-icon-move {
    from{transform: translateY(0)}
    42%{transform: translateY(-46px)}
    to{transform: translateY(0)}
}
@keyframes big-icon-move {
    from{transform: translateY(0)}
    42%{transform: translateY(-46px)}
    to{transform: translateY(0)}
}
/* 背景动画上升 */
@-webkit-keyframes mask-move-up {
    from{transform: translateY(0)}
        to{transform: translateY(-239px)}
}
@-o-keyframes mask-move-up {
    from{transform: translateY(0)}
        to{transform: translateY(-239px)}
}
@-moz-keyframes mask-move-up {
    from{transform: translateY(0)}
        to{transform: translateY(-239px)}
}
@keyframes mask-move-up {
    from{transform: translateY(0)}
        to{transform: translateY(-239px)}
}
/* 背景动画下降 */
@-webkit-keyframes mask-move-down {
    from{transform: translateY(-239px)}
        to{transform: translateY(0)}
}
@-o-keyframes mask-move-down {
    from{transform: translateY(-239px)}
        to{transform: translateY(0)}
}
@-moz-keyframes mask-move-down {
    from{transform: translateY(-239px)}
        to{transform: translateY(0)}
}
@keyframes mask-move-down {
    from{transform: translateY(-239px)}
        to{transform: translateY(0)}
}
/* 文本动画上升 */
@-webkit-keyframes text-up {
    from{transform: translateY(0)}
        47%{transform: translateY(-30px)}
        to{transform: translateY(-10px)}
}
@-o-keyframes text-up {
    from{transform: translateY(0)}
        47%{transform: translateY(-30px)}
        to{transform: translateY(-10px)}
}
@-moz-keyframes text-up {
    from{transform: translateY(0)}
        47%{transform: translateY(-30px)}
        to{transform: translateY(-10px)}
}
@keyframes text-up {
    from{transform: translateY(0)}
        47%{transform: translateY(-30px)}
        to{transform: translateY(-10px)}
}
/* 文本动画下降 */
@-webkit-keyframes text-down {
   from{transform: translateY(-10px)}
       to{transform: translateY(0px)}
}
@-o-keyframes text-down {
   from{transform: translateY(-10px)}
       to{transform: translateY(0px)}
}
@-moz-keyframes text-down {
   from{transform: translateY(-10px)}
       to{transform: translateY(0px)}
}
@keyframes text-down {
   from{transform: translateY(-10px)}
       to{transform: translateY(0px)}
}
/* 小icon动画1 上升 */
@-webkit-keyframes small-icon-up1 {
   from{transform: translateY(0)}
      50%{transform: translateY(-120px)}
      to{transform: translateY(-50px)}
}
@-o-keyframes small-icon-up1 {
   from{transform: translateY(0)}
      50%{transform: translateY(-120px)}
      to{transform: translateY(-50px)}
}
@-moz-keyframes small-icon-up1 {
   from{transform: translateY(0)}
      50%{transform: translateY(-120px)}
      to{transform: translateY(-50px)}
}
@keyframes small-icon-up1 {
   from{transform: translateY(0)}
      50%{transform: translateY(-120px)}
      to{transform: translateY(-50px)}
}
/* 小icon动画1 下降 */
@-webkit-keyframes small-icon-down1 {
   from{transform: translateY(-50px)}
       to{transform: translateY(50px)} 
}
@-o-keyframes small-icon-down1 {
   from{transform: translateY(-50px)}
       to{transform: translateY(50px)} 
}
@-moz-keyframes small-icon-down1 {
   from{transform: translateY(-50px)}
       to{transform: translateY(50px)} 
}
@keyframes small-icon-down1 {
   from{transform: translateY(-50px)}
       to{transform: translateY(50px)} 
}
 
.ft { padding-bottom: 7.0%; }
.ft p { font-size: 16px; color: #7bb4ee; text-align: center;  font-weight: normal;}
.ft p:first-of-type { margin-bottom: 25px; }