@CHARSET "UTF-8";

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, dl, dt, dd, ol, ul, li, fieldset, form, label, input, button, select, textarea, img, table, th, td, article, aside, footer, header, hgroup, menu, nav, output, section, summary, time, mark, audio, video, p{padding:0;margin:0;border: 0 none;font: 16px Helvetica Neue,Helvetica,PingFang SC,Tahoma,Arial,sans-serif;color: #6C440F;list-style:none;}
input, textarea, a{outline: none;resize: none;}
a{text-decoration: none;
  -moz-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  -webkit-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  -o-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  -ms-transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out;
  transition: background 0.4s ease-in-out, opacity 0.4s ease-in-out, border 0.4s ease-in-out, color 0.4s ease-in-out，box-shadow 0.4s ease-in-out, border-radius 0.4s ease-in-out;}
.clr{clear: both;}
@font-face{font-family: syht;src:url(../fonts/SourceHanSansCN-Regular.otf);}
@font-face{font-family: imp;src:url(../fonts/Impact.ttf);}
@font-face{font-family: hylgx;src:url(../fonts/汉仪李国兴行楷.ttf);}
html, body{width: 5760px;height: 1080px;}

/*container*/
.container{width: 5760px;height: 1080px;background: url(../images/bg.jpg) no-repeat;}

/*left*/
.left{width: 392px;height: 1080px;position: absolute;left: 0;top: 0;bottom: 0;z-index: 99;}
.left .years{width: 392px;margin: -188px 0 0;}
.left .years .animate{font-size: 18px;color: #fadbb7;text-align: center;}
.left .years .pentagram{margin: 12px auto 0;text-align: center;}
.left .years .pentagram img{width: 13px;display: inline-block;}
.left .years .animate span{display: inline-block;}
.animate span:nth-of-type(2){animation-delay: .05s;}
.animate span:nth-of-type(3){animation-delay: .1s;}
.animate span:nth-of-type(4){animation-delay: .15s;}
.animate span:nth-of-type(5){animation-delay: .2s;}
.animate span:nth-of-type(6){animation-delay: .25s;}
.animate span:nth-of-type(7){animation-delay: .3s;}
.animate span:nth-of-type(8){animation-delay: .35s;}
.animate span:nth-of-type(9){animation-delay: .4s;}
.animate span:nth-of-type(10){animation-delay: .45s;}
.animate span:nth-of-type(11){animation-delay: .5s;}
.animate span:nth-of-type(12){animation-delay: .55s;}
.animate span:nth-of-type(13){animation-delay: .6s;}
.animate span:nth-of-type(14){animation-delay: .65s;}
.four span{color: #fadbb7;opacity: 0;transform: translate(0, -100px) rotate(360deg) scale(0);animation: an_tw 4s infinite;}
.left .years .pentagram img:nth-of-type(2){animation-delay: .2s;}
.left .years .pentagram img:nth-of-type(3){animation-delay: .4s;}
.left .years .pentagram img:nth-of-type(4){animation-delay: .6s;}
.left .years .pentagram img:nth-of-type(5){animation-delay: .8s;}
.six img{color: #ddb40f;opacity: 0;transform: rotate(-180deg) translate(150px, 0);animation: an_th 4s infinite;}
.tam{position: absolute;bottom: 0;left: 22px;animation: an_fo 8s infinite;}
.tam img{display: block;}

/*animate*/
.animate{margin: auto;}
.animate svg g:nth-of-type(2){animation-delay: .2s;}
.animate svg g:nth-of-type(3){animation-delay: .4s;}
.animate svg g:nth-of-type(4){animation-delay: .6s;}
.animate svg g:nth-of-type(5){animation-delay: .8s;}
.animate svg g:nth-of-type(6){animation-delay: 1s;}
.seven svg{width: 400px;height: 800px;margin: 48px 0 0 101px;}
.seven svg g{background: #fbddac;opacity: 1;transform: translate(-150px, 0) scale(.2);animation: an_on 8s infinite;font-size: 100px;}

/*bubble*/
ul.bubble{position: absolute;width: 392px;bottom: 0;}
ul.bubble li{width: 20px;height: 20px;border-radius: 100%;background: rgba(252,222,147,1);position: absolute;bottom: 0;animation: an_fi 8s infinite;opacity: 0;left: 30px;}
ul.bubble li:nth-of-type(2){animation-delay: .15s;left: 80px;}
ul.bubble li:nth-of-type(3){animation-delay: .3s;left: 330px;}
ul.bubble li:nth-of-type(4){animation-delay: .45s;left: 250px;}
ul.bubble li:nth-of-type(5){animation-delay: .6s;left: 180px;}
ul.bubble li:nth-of-type(6){animation-delay: .75s;left: 90px;}
ul.bubble li:nth-of-type(7){animation-delay: 0.9s;left: 70px;}
ul.bubble li:nth-of-type(8){animation-delay: 1.05s;left: 110px;}
ul.bubble li:nth-of-type(9){animation-delay: 1.2s;left: 190px;}
ul.bubble li:nth-of-type(10){animation-delay: 1.35s;left: 210px;}
ul.bubble li:nth-of-type(11){animation-delay: 1.5s;left: 310px;}
ul.bubble li:nth-of-type(12){animation-delay: 1.65s;left: 290px;}
ul.bubble li:nth-of-type(13){animation-delay: 1.8s;left: 50px;}
ul.bubble li:nth-of-type(14){animation-delay: 1.95s;left: 100px;}
ul.bubble li:nth-of-type(15){animation-delay: 2.1s;left: 200px;}
ul.bubble li:nth-of-type(16){animation-delay: 2.25s;left: 240px;}
ul.bubble li:nth-of-type(17){animation-delay: 2.4s;left: 80px;}
ul.bubble li:nth-of-type(18){animation-delay: 2.55s;left: 160px;}
ul.bubble li:nth-of-type(19){animation-delay: 2.7s;left: 80px;}
ul.bubble li:nth-of-type(20){animation-delay: 2.65s;left: 220px;}
ul.bubble li:nth-of-type(21){animation-delay: 3.1s;left: 140px;}
ul.bubble li:nth-of-type(22){animation-delay: 3.3s;left: 260px;}
ul.bubble li:nth-of-type(23){animation-delay: 3.45s;left: 150px;}
ul.bubble li:nth-of-type(24){animation-delay: 3.6s;left: 320px;}
ul.bubble li:nth-of-type(25){animation-delay: 3.75s;left: 30px;}
ul.bubble li:nth-of-type(26){animation-delay: 3.9s;left: 170px;}
ul.bubble li:nth-of-type(27){animation-delay: 4.05s;left: 270px;}
ul.bubble li:nth-of-type(28){animation-delay: 4.2s;left: 280px;}
ul.bubble li:nth-of-type(29){animation-delay: 4.35s;left: 310px;}
ul.bubble li:nth-of-type(30){animation-delay: 4.5s;left: 120px;}
ul.bubble li:nth-of-type(31){animation-delay: 4.65s;left: 110px;}
ul.bubble li:nth-of-type(32){animation-delay: 4.8s;left: 290px;}
ul.bubble li:nth-of-type(33){animation-delay: 4.95s;left: 50px;}
ul.bubble li:nth-of-type(34){animation-delay: 5.1s;left: 70px;}
ul.bubble li:nth-of-type(35){animation-delay: 5.25s;left: 160px;}
ul.bubble li:nth-of-type(36){animation-delay: 5.4s;left: 250px;}
ul.bubble li:nth-of-type(37){animation-delay: 5.55s;left: 310px;}
ul.bubble li:nth-of-type(38){animation-delay: 5.7s;left: 80px;}
ul.bubble li:nth-of-type(39){animation-delay: 5.85s;left: 270px;}
ul.bubble li:nth-of-type(40){animation-delay: 6.1s;left: 100px;}
ul.bubble li:nth-of-type(41){animation-delay: 6.25s;left: 300px;}
ul.bubble li:nth-of-type(42){animation-delay: 6.4s;left: 280px;}
ul.bubble li:nth-of-type(43){animation-delay: 6.55s;left: 90px;}
ul.bubble li:nth-of-type(44){animation-delay: 4.8s;left: 150px;}
ul.bubble li:nth-of-type(45){animation-delay: .1s;left: 220px;}
ul.bubble li:nth-of-type(46){animation-delay: 4s;left: 160px;}
ul.bubble li:nth-of-type(47){animation-delay: 3.2s;left: 70px;}
ul.bubble li:nth-of-type(48){animation-delay: 2.5s;left: 110px;}
ul.bubble li:nth-of-type(49){animation-delay: 1.6s;left: 190px;}
ul.bubble li:nth-of-type(50){animation-delay: .7s;left: 40px;}
ul.bubb{position: absolute;width: 392px;bottom: 0;}
ul.bubb li{width: 20px;height: 20px;border-radius: 100%;background: rgba(252,222,147,1);position: absolute;bottom: 0;animation: an_si 8s infinite;opacity: 0;left: 30px;}
ul.bubb li:nth-of-type(2){animation-delay: .4s;left: 110px;}
ul.bubb li:nth-of-type(3){animation-delay: .8s;left: 240px;}
ul.bubb li:nth-of-type(4){animation-delay: 1.2s;left: 190px;}
ul.bubb li:nth-of-type(5){animation-delay: 1.6s;left: 10px;}
ul.bubb li:nth-of-type(6){animation-delay: 2.0s;left: 120px;}
ul.bubb li:nth-of-type(7){animation-delay: 2.4s;left: 80px;}
ul.bubb li:nth-of-type(8){animation-delay: 2.8s;left: 310px;}
ul.bubb li:nth-of-type(9){animation-delay: 3.2s;left: 210px;}
ul.bubb li:nth-of-type(10){animation-delay: 3.6s;left: 150px;}
ul.bubb li:nth-of-type(11){animation-delay: 4.0s;left: 180px;}
ul.bubb li:nth-of-type(12){animation-delay: 4.4s;left: 90px;}
ul.bubb li:nth-of-type(13){animation-delay: 4.8s;left: 40px;}
ul.bubb li:nth-of-type(14){animation-delay: 5.2s;left: 320px;}
ul.bubb li:nth-of-type(15){animation-delay: 5.6s;left: 70px;}
ul.bubb li:nth-of-type(16){animation-delay: 6s;left: 120px;}
ul.bubb li:nth-of-type(17){animation-delay: 6.4s;left: 260px;}
ul.bubb li:nth-of-type(18){animation-delay: 6.8s;left: 60px;}

/* right */
.bg_lf{width: 980px;height: 1080px;position: absolute;left: 0;top: 0;z-index: 2;}
.bg_rg{width: 680px;height: 1080px;position: absolute;right: 0;top: 0;z-index: 2;}
.marqueeleft{width: 5352px;margin: 0 0 0 408px;overflow:hidden;position: relative;z-index: 1;}
.marqueeleft .wid{width: 58880px;height: 1080px;display: flex;background: url(../images/line.png) center center repeat-x;}
.marqueeleft .wid ul.mul{display: flex;flex-wrap: wrap;}
.marqueeleft .wid ul.mul li:nth-child(odd){flex-grow: 1;position: relative;margin: 161px 0 0 0;width: 575px;}
.marqueeleft .wid ul.mul li:nth-child(odd) .yea{width: 180px;height: 64px;position: absolute;left: -196px;background: url(../images/icon_star.png) no-repeat;font-family: imp;font-size: 48px;text-align: center;line-height: 64px;}
.marqueeleft .wid ul.mul li:nth-child(odd) .s_line{width: 1px;height: 360px;background: #F7B500;border-radius: 1px;position: relative;}
.marqueeleft .wid ul.mul li:nth-child(odd) .s_line img{position: absolute;bottom: 0;bottom: -32px;left: -5px;}
.marqueeleft .wid ul.mul li:nth-child(odd) .tit{margin: 0 0 0 32px;position: absolute;width: 540px;top: -54px;}
.marqueeleft .wid ul.mul li:nth-child(odd) .tit h4{font-size: 30px;font-family: hylgx;}
.marqueeleft .wid ul.mul li:nth-child(odd) .tit .txt{margin: 15px 0 0;font-family: syht;height: 220px;background: rgba(255,255,255,0.45);border-radius: 25px;border: 1px solid rgba(247,181,0,0.45);box-shadow: 0 20px 32px rgba(83,61,0,0.1);padding: 18px 24px;}
.marqueeleft .wid ul.mul li:nth-child(even){flex-grow: 1;position: relative;margin: 557px 0 0 0;width: 575px;}
.marqueeleft .wid ul.mul li:nth-child(even) .yea{width: 180px;height: 64px;position: absolute;left: -196px;top: 157px;background: url(../images/icon_star.png) no-repeat;font-family: imp;font-size: 48px;text-align: center;line-height: 64px;}
.marqueeleft .wid ul.mul li:nth-child(even) .s_line{width: 1px;height: 415px;background: #F7B500;border-radius: 1px;position: relative;}
.marqueeleft .wid ul.mul li:nth-child(even) .s_line img{position: absolute;bottom: 0;top: 0;left: -5px;}
.marqueeleft .wid ul.mul li:nth-child(even) .tit{margin: 0 0 0 32px;position: absolute;width: 540px;top: 103px;}
.marqueeleft .wid ul.mul li:nth-child(even) .tit h4{font-size: 30px;font-family: hylgx;}
.marqueeleft .wid ul.mul li:nth-child(even) .tit .txt{margin: 15px 0 0;font-family: syht;height: 220px;background: rgba(255,255,255,0.45);border-radius: 25px;border: 1px solid rgba(247,181,0,0.45);box-shadow: 0 20px 32px rgba(83,61,0,0.1);padding: 18px 24px;}

@keyframes an_on {
  2.5%{transform: translate(50px, 0) scale(.7);opacity: 1;}
    5%{transform: translate(100px, 100px);}
  7.5%{transform: translate(0) scale(2); opacity: 0;}
   10%{transform: translate(0) scale(1); opacity: 1;} 
  100%{transform: translate(0) scale(1); opacity: 1;}   }

@keyframes an_tw {
    4%{transform: translate(0, -50px) rotate(180deg) scale(1);}
    8%{transform: translate(0, 20px) scale(.8) rotate(0deg);}
   12%{transform: translate(0) scale(1) rotate(0deg);opacity: 1;}
  100%{transform: translate(0) scale(1) rotate(0deg);opacity: 1;}   }

@keyframes an_th{
    3%{opacity: 1;}
   30%{transform: rotate(0deg) translate(0);opacity: 1;}
  100%{transform: rotate(0deg) translate(0);opacity: 1;}   }

@keyframes an_fo{
    0%{bottom: -350px;opacity: 0;}
   30%{bottom: 0;opacity: 1;}
  100%{bottom: 0;}   }

@keyframes an_fi {
   1.5%{bottom: 0;margin: 0;opacity: 0;}
   3%{bottom: 15px;margin: 0 0 0 3px;opacity: 0.8;}
   4.5%{bottom: 28px;margin: 0 4px 0 0;opacity: 0.7;}
   6%{bottom: 42px;margin: 0 0 0 7px;opacity: 0.4;}
   7.5%{bottom: 59px;margin: 0 5px 0 ;opacity: 0.6;}
   9%{bottom: 73px;margin: 0 0 0 6px;opacity: 0.3;}
   10.5%{bottom: 91px;margin: 0 2px 0 0;opacity: 0.2;}
   12%{bottom: 114px;margin: 0 0 0 0;opacity: 0;} 
  100%{bottom: 0;margin: 0; opacity: 0;}   }

@keyframes an_si {
   2%{bottom: 0;margin: 0;opacity: 0;}
   4%{bottom: 15px;margin: 0 0 0 1px;opacity: 0.5;}
   6%{bottom: 30px;margin: 0 1px 0 0;opacity: 0.6;}
   8%{bottom: 45px;margin: 0 0 0 1px;opacity: 0.7;}
   10%{bottom: 60px;margin: 0 1px 0 ;opacity: 0.4;}
   12%{bottom: 75px;margin: 0 0 0 1px;opacity: 0.5;}
   14%{bottom: 90px;margin: 0 1px 0 0;opacity: 0.3;}
   16%{bottom: 105px;margin: 0 0 0 1px;opacity: 0.1;} 
   18%{bottom: 120px;margin: 0 0 0 0;opacity: 0;} 
  100%{bottom: 0;margin: 0; opacity: 0;}   }