@charset "utf-8";
html{position:relative;}
html, body{height:100%; overflow:hidden;}
body{/*position:relative;*/}



/*pop*/
.pop{width:440px; height:550px; text-align:center;
       background:#fff;/*rgba(255,255,255,0.5);*/
       border:20px solid #fc0;/*#218e33;*/ /*#ffdfdf;*/
       box-sizing:border-box; 
       position:absolute; top:50%; left:50%;
       transform:translate(-50%,-50%);
       z-index:1000;}
.pop .text{/*border:20px solid #fc0;*/ cursor:pointer;
             margin:30px; font-size:18px; line-height:1.5em;}
.pop .text p mark{background:rgba(252,214,17,0.5);}
.pop .text p:nth-child(1){padding-top:10px;
                               margin-bottom:10px;}
.pop .text p:nth-child(2),
.pop .text p:nth-child(3),
.pop .text p:nth-child(4){font-weight:900;}
.pop .text p:nth-child(5){margin-top:10px;}
.pop .text p:nth-child(6){margin-bottom:10px;}
.pop .text p:nth-child(7){margin-bottom:10px;}
.pop .text p:nth-child(8){}
.pop .text p:nth-child(9){font-size:18px; font-weight:700;}
.pop .text p:nth-child(10){font-size:18px; font-weight:900;
                                color:#0e38e2; cursor:pointer;}
.pop .text p:nth-child(11){font-weight:500;}
.pop .text p:nth-child(12){margin:10px 0 12px 0;}
.pop .text p:nth-child(13),
.pop .text p:nth-child(14){font-weight:900;
                                 text-decoration: underline;}

/*close*/
.pop .close{width:30px; height:30px; 
               text-align:center; line-height:30px;
               font-size:20px; font-weight:800;
               cursor:pointer; /*border:3px solid #000;*/
               position:absolute; top:0; right:0;}



.pager{position:fixed; top:50%; left:50%;
         transform:translateY(-50%); z-index:500;
         margin-left:850px;}

.pager span{position:relative;
                background-color:transparent;
                display:block; width:25px; height:25px;
                opacity:1;
                border:2px solid #ccc; border-radius:0%;
                transition:all 0.6s; margin:5px 0;}



.pager .swiper-pagination-bullet:after{
    content:""; display: block; 
    width:25px; height:25px; background:#0e38e2;    
    border:none; opacity: 0; transition:all 0.3s;
}

.pager .swiper-pagination-bullet:nth-child(1):after{background:#eef0ef;}
.pager .swiper-pagination-bullet:nth-child(2):after{background:#fcd611;}
.pager .swiper-pagination-bullet:nth-child(3):after{background: #ec1c24;}
.pager .swiper-pagination-bullet:nth-child(4):after{background: #3472c5;}
.pager .swiper-pagination-bullet:nth-child(5):after{background: #eef0ef;}
.pager .swiper-pagination-bullet:nth-child(6):after{background: #fcd611;}
.pager .swiper-pagination-bullet:nth-child(7):after{background: #ec1c24;}
.pager .swiper-pagination-bullet:nth-child(8):after{background: #3472c5;}

 

/*pager active*/
.pager .swiper-pagination-bullet-active:after{
    position:absolute; top:-4px; right:-4px; opacity: 1;}


/*container*/
#container{width:100%; height:100%;
               min-width:1100px; overflow:hidden;}
#container section .inner{width:1100px; height:780px;
                                 /*background:rgba(0,0,255,0.3);*/
                                 position:absolute; top:50%; left:50%;
                                 transform:translate(-50%,-50%);}
/*1 intro*/
.intro{background-color:#000; 
       background-image:url(../img/intro02.gif);
       background-repeat:no-repeat;
        font-size:20px; line-height:1em;
        color:#fff;}

/*---------------------------------------------------------------------*/
/*2 introduce*/
.introduce{color:#000; position:relative;}

/*scroll*/
#container .introduce .scroll{font-size:30px; font-weight:900;
                                     line-height:1.2em;
                                     position:absolute; top:840px; left:200px;
                                     animation:scroll 1.2s linear infinite;}
#container .introduce .scroll:after{
    content:""; display:block; width:100%; height:15px; 
    background:rgba(0,0,255,0.2);  margin-top:-15px;
}

#container .introduce .scroll i{display:inline-block; width:30px; height:5px; 
                                       background:#000; margin-bottom:7px;}

#container .introduce .scroll span{display:inline-block; width:7px; height:7px; 
                                            border-top:5px solid #000;
                                            border-right:5px solid #000;
                                            transform:rotate(45deg);
                                            margin-left:-11px; margin-bottom:3.5px;}
@keyframes scroll{
    0%{}
    50%{left:230px;}
    100%{}
}

#container .introduce .inner{overflow-x:scroll; overflow-y: hidden;}
#container .introduce .inner .indsc{/*background:#ffdfdf;*/ width:1850px; }
#container .introduce .inner .indsc:after{display:block; content:""; clear:both;}



.ind1{width:550px; float:left; line-height:1em;}
.ind1 img{width:212px; height:auto; margin-bottom:24px;}
.ind1 ul{}
.ind1 ul li{}
.ind1 ul li span{display:block; font-size:35px; 
                    margin-bottom:236px;}

.ind1 ul .info{line-height:1.5em; font-weight:500;}
.ind1 ul .info p{font-size:18px; line-height:1.5em;}
.ind1 ul .info p:nth-child(1){font-size:25px; color:#0e38e2;}
.ind1 ul .info p:nth-child(4){font-size:25px; font-weight:900;}
.ind1 ul .info p:nth-child(5){font-size:25px; font-weight:900;}
.ind1 ul .info p mark{background:rgba(252,214,17,0.5);}

/*2 introduce*/
.introduce .tit{font-size:20px; font-weight:bold;}
.introduce .tit:after{content:""; display:block; 
                  width:530px; height:2px; background:#cecece;
                   margin:9px 0;}
.introduce .bar{}
.introduce .date{margin-right:56px;}
.introduce .institution{font-weight:bold;}
.introduce .department{}

/*2 introduce*/
.ind2{width:550px; float:left; margin-right:200px;
        font-size:15px; line-height:2em;}
.ind2 li{margin-bottom:40px;}

/*i21*/
.ind2 .i21 .date{margin-right:56px;}
.ind2 .i21 .deg1 .date{margin-right:49px;}
.ind2 .i21 .deg1 .institution{margin-right:18px;}
.ind2 .i21 .deg1 .department{letter-spacing:-1.5px;}

.ind2 .i21 .deg2 .department{margin:0 32px 0 75px;}
.ind2 .i21 .deg3 .department{margin-left:34px;}

/*i22*/
.ind2 .i22 .date{margin-right:49px;}
.ind2 .i22 .deg1 .institution{margin-right:37px;}
.ind2 .i22 .deg2 .institution{margin-right:23px;}

/*i23*/
.ind2 .i23 .date{margin-right:75px;}
.ind2 .i23 .deg1 .institution{margin-right:22px;}
.ind2 .i23 .deg2 .institution{margin-right:37px;}
.ind2 .i23 .deg3 .institution{margin-right:48px;}
.ind2 .i23 .deg4 .institution{margin-right:48px;}

/*i24*/
.ind2 .i24 .tool{}
.ind2 .i24 .figure{display:inline-block;}
.ind2 .i24 .figure .box{display:inline-block;
                             width:363px; height:10px;
                             border:1px solid #000;}/*365x12*/
.ind2 .i24 .figure .fill{position:absolute; left:685px;
                          display:inline-block; 
                           height:12px;
                           background:#000;}
/*i24*/
.ind2 .i24 .t1 .tool{margin-right:53px;}
.ind2 .i24 .t2 .tool{margin-right:63px;}
.ind2 .i24 .t3 .tool{margin-right:29px;}
.ind2 .i24 .t4 .tool{margin-right:80px;}
.ind2 .i24 .t5 .tool{margin-right:110px;}

.ind2 .i24 .t1 .fill{/*top:629px; */ top:599px; width:365px;}
.ind2 .i24 .t2 .fill{/*top:659px; */ top:629px; width:365px;}
.ind2 .i24 .t3 .fill{/*top:689px; */top:659px; width:365px;}
.ind2 .i24 .t4 .fill{/*top:719px;*/ top:689px; width:325px;}
.ind2 .i24 .t5 .fill{/*top:749px;*/ top:719px; width:345px;}

/*2 introduce*/
.ind3{ width:550px; float:left; 
       font-size:15px; line-height:2em;}
.ind3 li{margin-bottom:40px;}

/*i31*/
.ind3 .i31 .date{margin-right:75px;}
.ind3 .i31 .deg1 .institution{margin-right:22px;}
.ind3 .i31 .deg2 .institution{margin-right:37px;}
.ind3 .i31 .deg3 .institution{margin-right:48px;}
.ind3 .i31 .deg4 .institution{margin-right:48px;}
.ind3 .i31 .deg4 .awardName{letter-spacing:-1px;}

/*i32*/
.ind3 .i32{}

/*i33*/
.ind3 .i33 .deg1,
.ind3 .i33 .deg2{margin-left:-20px;}
.ind3 .i33 span{display:inline-block; width:130px; 
                   /*background:#ffdfdf;*/ text-align:center;
                   position:relative;}
.ind3 .i33 span:before{content:""; display:block; 
                          width:5px; height:5px; 
                          border-radius:50%; 
                          background:#c9c9c9;
                          position:absolute; top:50%; left:0;
                          transform:translateY(-50%);}
.ind3 .i33 span:nth-child(1):before{display:none;}
/*.ind3 .i33 .deg2 .mar{margin-right:55px;}
.ind3 .i33 .deg2 .gin{margin:0 10px 0 5px;}
.ind3 .i33 span:nth-child(1):before{display:none;}*/
/*.ind3 .i33 span:before{content:""; display:inline-block;
                             width:5px; height:5px; border-radius:50%; 
                             background:#c9c9c9; margin:2.5px 30px;}*/

/*i34*/
.ind3 .i34{line-height:1.8em;}
.ind3 .i34 a{color:#00aeef; text-decoration:underline;}

/*po*/
h3{font-size:20px;}
.index{}
.mainTit{font-size:24px; margin:20px 0 40px;
           font-weight:bold;}



/*colorSystem&keyword*/
.ck{}
.ck .colorSystem{float:left; margin-right:50px;}
.ck .keyword{float:left;}

/*colorSystem*/
.colorSystem{margin-bottom:28px; }
.colorSystem li{float:left; text-indent:-9999px;
                    width:25px; height:25px; 
                    border-radius:50%; margin-right:10px;}
.colorSystem li:nth-child(1){background:#fcd611;}
.colorSystem li:nth-child(2){background:#f48a3c;}
.colorSystem li:nth-child(3){background:#c58e58; 
                                   margin-right:0;}

.colorSystem .colorTxt{font-size:12px; line-height:12px;
                             margin-bottom:10px;}
.colorSystem .rgb{font-size:10px;}

.keyword{margin-right:15px;}
.keyword li{float:left; margin-right:10px;}
.keyword .k1{}
.keyword .k2{}
.keyword .k3{margin-right:0;}

.keyword li span:after{content:""; display::block;
                             width:15px; height:2px; 
                             background:#949091;}

/*mainUser*/
.mainUser{margin-bottom:28px;}

/*purpose*/
.purpose{margin-bottom:28px;}

/*work*/
.work{margin-bottom:28px;}

/*concept*/
.concept{margin-bottom:28px;}

/*epilogue*/
.epilogue{width:350px; height:110px; 
             padding:20px; border:1px solid #ccc;}
.epilogue .ep .bullet{float:left; margin-top:4px; 
                           margin-right:8px; color:#0e38e2;}
.epilogue .ep .subTit{float:left; margin-bottom:12px;}
.epilogue .subTit:after{display:none;}


/*rightNow*/
.rightNow{border:1px solid #000; padding:5px;
                    width:120px; height:70px;
                    position:absolute; top:0; right:10px;
                    box-shadow:5px 5px 2px #ddd;}
.rightNow ul{}
.rightNow li{float:left; width:10px; height:10px; 
                      border-radius:50%; border:1px solid #000;
                      margin-right:5px; text-indent:-9999px;}
.rightNow li:nth-child(1){background:#000;}
.rightNow li:nth-child(2){background:#fff;}
.rightNow li:nth-child(3){background:#fcd611;}
.rightNow span{display:block;  height:1px; 
                           margin:7px 0; background:#000;}
.rightNow a{display:block; /*width:60px; height:20px; */
                      /*padding:8px; margin:11.75px 20px;*/
                      color:#fff; background:#000;
                      text-align:center; border:1px solid #000;
                      /*box-shadow:5px 5px 1px #ddd;*/
                      transition:all 0.4s;}
.rightNow a:hover{color:#000; background:#fff;
                              border:1px solid #000;}

.rightNow p{font-size:14px; font-weight:900;
                       animation:click 0.9s ease infinite;
                       text-align:center;}

@keyframes click{
    0%{opacity:0;}
    50%{opacity:1;}
    100%{opacity:0;}
}

/*report*/
.report{position:absolute; top:20px; left:200px;}
.report a{display:block; width:100px; height:40px; 
            border:1px solid #000; 
            text-align:center; line-height:40px; font-size:16px;}


/*subTit*/
.subTit{font-size:16px; line-height:1.3em;
         font-weight:900;}
.subTit:after{content:""; display:block;
                width:14px; height:2px; background:#000;
                 margin:4px 0 12px;}

/*po1*/
.po1{font-size:14px;}
.po1 .bg{width:1070px; height:780px; 
            background:#fcd611;
            margin:150px 0 150px 850px;}

.po1 .left{float:left; width:440px; position:relative;}

.po1 .mainTit{color:#fcd611;}

.po1 .colorSystem{}
.po1 .colorSystem .subTit{}
/*.po1 .colorSystem li:nth-child(1){background:#fcd611;}
.po1 .colorSystem li:nth-child(2){background:#f48a3c;}
.po1 .colorSystem li:nth-child(3){background:#c58e58;}*/




/*po1 right*/
.po1 .right{float:left; width:550px; height:680px; /*background:#0f4;*/
              padding:50px 55px; overflow:hidden}/*660x780*/
.po1 .right .www{/*width:550px; height:680px;*/
                      /*background:url(../img/www1.png) no-repeat;*/
                      position:relative; overflow:hidden;}
.po1 .right .www .scBar{width:550px; height:69px; z-index:400;
                              position:absolute; top:0; left:0;
                              background:url(../img/scBar.png) no-repeat;}
.po1 .right .www .screen{width:550px; height:611px;
          background-color:#fff; 
          background-image:url(../img/wwwweb.jpg);
          background-repeat:no-repeat;
          margin-top:69px;
          /*background:url(../img/wwwweb11.jpg) no-repeat;*/
           /*position:absolute; top:119px; left:0;*/
           transition:all 0.6s; overflow:hidden;}
.po1 .right .www .screen .hidden{width:550px; height:611px; 
                                          overflow:hidden }
.po1 .right .www:hover .screen{width:550px; height:611px; 
                                        overflow:hidden;
                                        animation:screen 1s ease;}
/*hover*/
.po1 .right .www .screen a{display:block; 
                                  transition:all 0.6s; width:550px;
                                  overflow:hidden; height:611px;}
.po1 .right .www:hover .screen a{
    overflow:hidden;
    display:block; width:550px; height:611px; 
    background:rgba(255,255,255,0.9);
    transition:all 0.6s;
    }
/*text*/
.po1 .right .www .text{
    display:none;
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    transition:all 0.6s;
    font-size:18px; text-align:center;
    line-height:1.2em;}

.po1 .right .www:hover .text{display:block;}
.po1 .right .www .text .web1{font-size:22px; font-weight:700;}

.po1 .right .www .text span{
    display:block;
    width:30px; height:5px; 
    background:#fcd611; text-align:center;
    margin:15px 0 15px 73px;}

@keyframes screen{
    0%{}
    50%{transform:scale(1.1);}
    100%{}
}


/*po2*/
.po2{font-size:14px;}
.po2 .bg{width:1070px; height:780px; 
            background:#ec1c24;
            margin:150px 0;}

.po2 .left{width:660px; height:680px; float:left;
            /*padding:50px 55px;*/}
.po2 .left .project{position:relative;}

/*left mobile*/
.po2 .left .project .mobile{float:left; width:180px; height:390px;
                                  margin-top:340px; z-index:500;
                                  margin-left:-30px; cursor:pointer;
                                   position:relative; overflow:hidden;
                                   box-shadow:5px 5px 10px #777;}

.po2 .left .project .mobile .mscBar{width:180px; height:21px; 
    z-index:1000;
    position:relative;
    background:url(../img/mscBar.png) no-repeat;}

.po2 .left .project .mobile .mScreen{width:180px; height:390px; 
               background:url(../img/mpo2web1.jpg) no-repeat;
               position:absolute; top:21px; left:0;
               box-shadow:1px 1px 20px #ccc;}
.po2 .left .project .mobile .mScreen:hover{
          width:180px;
          height:647px; 
          overflow:hidden;
          animation:screen 1s ease;}
 
.po2 .left .project .mobile .mScreen a{transition:all 0.6s;
                                                position:relative;}
.po2 .left .project .mobile:hover .mScreen a{overflow:hidden;
               display:block; width:550px; height:611px; 
                background:rgba(255,255,255,0.9);
                transition:all 0.6s;}

/*text*/
.po2 .left .project .mobile .mScreen a .text{
    display:none; 
    width:110px; height:auto;
    position:absolute; top:100px; left:41px;
    transition:all 0.6s;
    font-size:14px; text-align:center;
    line-height:1.2em;}
.po2 .left .project .mobile:hover .mScreen a .text{display:block;}

.po2 .left .project .mobile .mScreen a .kind{}
.po2 .left .project .mobile .mScreen a span{
    display:block;
    width:30px; height:5px;
    /*position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);*/
    background:#ec1c24; text-align:center;
    margin:15px 0 15px 40px;
}
.po2 .left .project .mobile .mScreen a .web2{
    font-size:18px; font-weight:700;
}

/*left website*/
.po2 .left .project .www{float:left; width:550px; height:680px;
                               position:absolute; top:60px; right:50px; overflow:hidden;}

.po2 .left .project .www .scBar{width:550px; height:69px;
                                       background-image:url(../img/scBar.png);
                                       background-repeat:no-repeat;
                                       position:absolute; top:130px; right:0;}

.po2 .left .project .www .screen{margin-top:160px;}
.po2 .left .project .www .screen a{
    display:block; width:550px; height:auto;
}

.po2 .left .project .www .screen video{
        background:#0f4;
        width:170%; height:auto; margin-left:-33%;}

/*right des*/
.po2 .right{float:left; width:390px; height:780px;  
               /*overflow:hidden;*/ padding-left:50px;}/*440x780*/

/*po2*/
.po2 .mainTit{color:#ec1c24;}

.po2 .colorSystem li:nth-child(1){background:#ec1c24;}
.po2 .colorSystem li:nth-child(2){background:#6e0e07;}
.po2 .colorSystem li:nth-child(3){background:#470004;}

.po2 .rightNow li:nth-child(3){background:#ec1c24;}

/*po3*/
.po3{font-size:14px;}
.po3 .bg{width:1070px; height:780px; 
            background:#3472c5;
            margin:150px 0 150px 850px;}


.po3 .mainTit{color:#3472c5;}

.po3 .colorSystem li:nth-child(1){background:#3472c5;}
.po3 .colorSystem li:nth-child(2){background:#434188;}
.po3 .colorSystem li:nth-child(3){background:#00aeef;}

.po3 .rightNow li:nth-child(3){background:#3472c5;}
.po3 .rightNow .ppt{display:block; 
                      color:#fff; background:#000;
                      text-align:center; border:1px solid #000;
                      /*box-shadow:5px 5px 1px #ddd;*/
                      transition:all 0.4s; opacity:1;}
.po3 .rightNow a{opacity:0;}
.po3 .rightNow .ppt:hover{color:#000; background:#fff;
                              border:1px solid #000;}
.po3 .rightNow p{margin-top:-40px;}

.po3 .left{width:440px; float:left; position:relative;}
.po3 .right{width:660px; height:680px; float:left;
            /*padding:50px 55px;*/}
.po3 right .project{}

/*right website*/
.po3 .right .project .www{float:left; width:430px; height:680px; 
                                /*background:url(../img/www2.png) no-repeat;*/
                                margin-top:50px; margin-left:50px;
                                position:relative; overflow:hidden;}
.po3 .right .project .www .screen{width:430px; height:620px;
                                       background:url(../img/po3webb.jpg) no-repeat;
                                        /*overflow:hidden;*/
                                        position:absolute; top:60px; left:0;}
.po3 .right .project .www:hover .screen{animation:screen 1s ease;}
.po3 .right .project .www:hover .screen a{
    display:block;
    width:430px; height:620px;
    background:rgba(255,255,255,0.6);
    transition:all 0.6s;}

.po3 .right .project .www .scBar{
    width:430px; height:60px; z-index:400;
    position:absolute; top:0; left:0;
    background:url(../img/scBar2.png) no-repeat;}


.po3 .right .project .www .text{
    display:none;
    position:absolute; top:50%; left:50%;
    transform:translate(-50%,-50%);
    transition:all 0.6s;
    font-size:18px; text-align:center;
    line-height:1.2em;}

.po3 .right .project .www:hover .text{display:block;}
.po3 .right .project .www .text .web3{font-size:22px; font-weight:700;}

.po3 .right .project .www .text span{
    display:block;
    width:30px; height:5px; 
    background:#3472c5; text-align:center;
    margin:15px 0 15px 44.5px;}

/*right mobile*/
.po3 .right .project .mobile{float:left; width:180px; height:390px;
        margin-top:340px;
        margin-left:-70px;
        box-shadow:-5px 5px 10px #777;
        background:url(../img/mwww.jpg) no-repeat;
        position:relative; overflow:hidden;}
.po3 .right .project .mobile .mscBar{width:180px; height:21px; 
    z-index:1000;
    position:relative;
    background:url(../img/mscBar.png) no-repeat;}

.po3 .right .project .mobile .mScreen{
    width:180px; height:390px; 
    background:url(../img/mpo3web1.jpg) no-repeat;
    position:absolute; top:21px; left:0;}
.po3 .right .project .mobile .mScreen a{
    display:block; transition:all 0.6s;
    position:relative;}
.po3 .right .project .mobile .mScreen .text{
    display:none; 
    width:110px; height:auto;
    position:absolute; top:100px; left:41px;
    transition:all 0.6s;
    font-size:14px; text-align:center;
    line-height:1.2em;
}
.po3 .right .project .mobile .mScreen .text .kind{}
.po3 .right .project .mobile .mScreen .text span{
    display:block;
    width:30px; height:5px; 
    background:#3472c5; text-align:center;
    margin:15px 0 15px 40px;}
.po3 .right .project .mobile .mScreen .text .web3{
    font-size:18px; font-weight:700;}

/*po3 mobile hover*/
.po3 .right .project .mobile .mScreen:hover{
          width:180px;
          height:647px; 
          overflow:hidden;
          animation:screen 1s ease;}
.po3 .right .project .mobile:hover .mScreen a{overflow:hidden;
               display:block; width:550px; height:611px; 
                background:rgba(255,255,255,0.9);
                transition:all 0.6s;}
.po3 .right .project .mobile:hover .mScreen .text{display:block;}
/*po4 app*/
.po4{font-size:14px;}
.po4 .inner{/*background:#e0dfdf;*/}

.po4 .left{float:left; width:40%; position:relative;}
.po4 .right{float:left; width:60%; height:780px;
              background-image:url(../img/po4app.gif);
              background-repeat:no-repeat;
              /*background:url(../img/app.jpg) no-repeat;*/}

.po4 .mainTit{color:#61beff;}

.po4 .working{margin-bottom:28px;}
.po4 .colorSystem li:nth-child(1){background:#61beff;}
.po4 .colorSystem li:nth-child(2){background:#6cc73e;}
.po4 .colorSystem li:nth-child(3){background:#444444; 
                                          margin-right:0;}
.po4 .colorSystem .c1{background:#61beff;}
.po4 .colorSystem .c2{background:#6cc73e;}
.po4 .colorSystem .c3{background:#444444;}

.po4 .keyword{margin-bottom:28px;}

.po4 .rightNow li:nth-child(3){background:#61beff;}

/*Etc*/
.etc{background:#f0e4d6;}
.etc .index{margin-top:-40px; margin-bottom:22px; font-weight:900;}


.etc ul{/*display:-webkit-flex; display:flex;*/ 
        
        overflow:hidden;}
.etc ul li .hidden{width:330px; height:365px; overflow:hidden;}
.etc ul li{float:left; margin-right:5%; margin-bottom:50px;
           position:relative; width:330px; height:365px;
           overflow:hidden; overflow-y:hidden;}
.etc ul li a{width:330px; height:365px; overflow:hidden;}
.etc ul li a img{width:330px; height:365px; overflow:hidden;}

/*
.etc ul li:nth-child(1){animation:jump 0.3s linear; overflow:hidden;}
.etc ul li:nth-child(2){animation:jump 0.3s linear 0.5s;}
.etc ul li:nth-child(3){animation:jump 0.3s linear 1s;
                           margin-right:0;}
.etc ul li:nth-child(4){animation:jump 0.3s linear 1.5s;}
.etc ul li:nth-child(5){animation:jump 0.3s linear 2s;}
.etc ul li:nth-child(6){animation:jump 0.3s linear 2.5s;
                          margin-right:0;}
*/

.etc ul li:nth-child(3),
.etc ul li:nth-child(6){margin-right:0;}

.etc ul li:hover{display:block; width:330px; height:365px; 
                   overflow:hidden;}

.etc ul li .title{display:none; overflow:hidden;
                 position:absolute; top:0; left:0;
                 transition:all 0.5s;
                 width:330px; height:365px; 
                 background:rgba(255,255,255,0.8);}
.etc ul li .title p{display:none;
                    position:absolute; /*top:173.5px; left:102px;*/
                    top:50%; left:50%; 
                    transform:translate(-50%,-50%);
                    transition:all 0.5s;
                    font-size:18px; font-weight:900;}


.etc ul li:hover img{width:330px; height:365px;
                        overflow:hidden;
                        animation:screen 1s ease;}
.etc ul li:hover .title{display:block; z-index:300;}
.etc ul li:hover .title p{display:block;}

@keyframes jump{
    0%{}
    50%{margin-top:-30px;}
    100%{}
}

/*finish*/
.finish{/*background:#000; color:#fff;*/
        background-image:url(../img/finishmv.gif);
        background-repeat:no-repeat;
        background-position:center;}