@charset "utf-8";
/* CSS Document */
body {font-size:18px; line-height:26px; margin:0 auto; padding: 0px; font-family:"微软雅黑";}
div,ul,li,h1,h2,h3,h4,h5,h6,img,p,dl,dt,dd,ol,input,select,table,tr,td{margin: 0px;padding: 0px;}
ul,li {list-style-type:none;}
a {color:#2a2626; text-decoration:none;}
a:hover { text-decoration:underline;}
img {border: 0;}
em{font-style:normal}
input:focus{outline:none;}
.clear{ clear:both;}
/*公用样式*/


.story { height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.3); border-bottom: 1px solid rgba(0,0,0,0.4); box-shadow: 0 0 50px rgba(0,0,0,0.8);}

/*first*/
#first .smashinglogo { background: url("../images/smashing-logob.png") 50% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#first article { width: 100%; top: 230px; position: absolute; text-align: center; }
#first .bannertit{-webkit-animation:zoomIn 0.5s 0.5s ease-out both;animation:zoomIn 0.5s 0.5s ease-out both;opacity:1;position: absolute;top:180px;left:0px;}
@-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); 	transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } 100% { opacity: 1; } }
@keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(.3, .3, .3); 	transform: scale3d(.3, .3, .3); } 50% { opacity: 1; } 100% { opacity: 1; } }
/*first*/


/*second*/
#second { background: url("../images/slidebg02.jpg") 50% 0 no-repeat fixed; padding: 50px 0;}
#second article { width: 100%; top:160px; position: absolute; text-align: center;}
#second .secondvideo{ width:1020px; height:572px; position:absolute; left:50%; margin-left:-510px; top:36%; z-index: 10; }
/*second*/


/*third*/
#third { background: url("../images/slidebg03.jpg") 50% 0 no-repeat fixed; }
#third article {}
#third .photograph { background: url("../images/thirdtit.png")  20% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
#imageFlow { position: absolute; width: 100%; height: 80%; left: 0%; top: 10%; }
#imageFlow .diapo { position: absolute; left:-1000px; cursor: pointer; -ms-interpolation-mode: nearest-neighbor; }
#imageFlow .link { border: dotted #fff 1px; margin-left: -1px; margin-bottom: -1px; }
#imageFlow .bank { visibility: hidden;}
#imageFlow .top { position: absolute; width: 100%; height: 40%; }
#imageFlow .text { position: absolute; left: 0px; width: 100%; bottom: 15%; text-align: center; color: #000; font-family: verdana, arial, Helvetica, sans-serif; z-index: 1000; }
#imageFlow .title { font-size: 24px; font-weight: bold; line-height:36px;}
#imageFlow .legend { font-size:18px; line-height:32px;}
#imageFlow .scrollbar { position: absolute; left: 10%; bottom: 10%; width: 80%; height: 16px; z-index: 1000; }
#imageFlow .arrow-left { position: absolute; }
#imageFlow .arrow-right { position: absolute; right: 0px; }
#imageFlow .bar { position: absolute; height: 16px; left: 25px; }
/*third*/

/*fourth*/
#fourth { background: url("../images/slidebg04.jpg") 50% 0 no-repeat fixed; }
#fourth article { width:1200px; top:56px; position: absolute; left:50%; margin-left:-600px;}
#fourth .photograph { background: url("../images/fourthtit.png")  20% 100px no-repeat fixed; min-height: 1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
.lest{ width: 1200px; height:714px; position:absolute; left:50%; top:50%; margin-left:-600px; margin-top:-240px;}
.lest h3{ position:absolute; left:0; top:0; font-size:17px; padding:20px; color:#FF0000; }
.box1,.box2,.box3,.box4,.box5,.box7,.box6,.box8,.box9{ width: 390px; height: 228px; float: left; margin: 0 15px 15px 0; overflow: hidden; position: absolute;	}
.box1{ top: 0; left: 0;}
.box2{ top: 0; left: 405px;}
.box3{ top: 0; left: 810px;}
.box4{ top: 243px; left: 0;}
.box5{ top: 243px; left: 405px;}
.box6{ top: 243px; left: 810px;}
.box7{ top: 486px; left: 0;}
.box8{ top: 486px; left: 405px;}
.box9{ top: 486px; left: 810px;}
/*fourth*/

/*fifth*/
#fifth {}
#fifth article { width: 100%; top:4%; position: absolute; text-align: center; }
#fifth .bg { position: absolute; top:0; left:0; width:100%; height:100%;}
#fifth .bg-box-1{ background: url("../images/fifth19821203.jpg") no-repeat center/cover; }
#fifth .bg-box-2{ background: url("../images/fifth19840729.jpg") no-repeat center/cover; }
#fifth .bg-box-3{ background: url("../images/fifth20031015.jpg") no-repeat center/cover; }
#fifth .bg-box-4{ background: url("../images/fifth20080808.jpg") no-repeat center/cover; }
#fifth .bg-box-5{ background: url("../images/fifth20101112.jpg") no-repeat center/cover; }
#fifth .bg-box-6{ background: url("../images/fifth20160820.jpg") no-repeat center/cover; }
#fifth .bg-box-7{ background: url("../images/fifth20170910.jpg") no-repeat center/cover; }
#fifth .bg-box-8{ background: url("../images/fifth20180415.jpg") no-repeat center/cover; }
#fifthwrap{ position: absolute; left:50%; top:50%; margin-left:-600px; margin-top:-260px; overflow: hidden; width:1200px; height:600px;}
#fifthwrap > ul{ width:100%; list-style: none; }
#fifthwrap > ul > li{ float: left; width:80px; height: 600px; cursor:pointer; }
#fifthwrap > ul > li:nth-child(1){ background: url("../images/fifth19821203.jpg") no-repeat center/cover; }
#fifthwrap > ul > li:nth-child(2){ background: url("../images/fifth19840729.jpg") no-repeat center/cover; }
#fifthwrap > ul > li:nth-child(3){ background: url("../images/fifth20031015.jpg") no-repeat center/cover; }
#fifthwrap > ul > li:nth-child(4){ background: url("../images/fifth20080808.jpg") no-repeat center/cover; }
#fifthwrap > ul > li:nth-child(5){ background: url("../images/fifth20101112.jpg") no-repeat center/cover; }
#fifthwrap > ul > li:nth-child(6){ background: url("../images/fifth20160820.jpg") no-repeat center/cover; }
#fifthwrap > ul > li:nth-child(7){ background: url("../images/fifth20170910.jpg") no-repeat center/cover; }
#fifthwrap > ul > li:nth-child(8){ background: url("../images/fifth20180415.jpg") no-repeat center/cover; width:640px; }
#fifthwrap > ul > li > .text{ width: 80px; height:100%; background:#000; opacity: .5; }
#fifthwrap > ul > li > .text p{ padding: 20px 30px; font-family: 'Microsoft yahei'; color: #fff; font-size:16px;  -webkit-writing-mode:vertical-rl; writing-mode:tb-rl; writing-mode:vertical-rl;}
/*fifth*/

/*sixth*/
#sixth { background: url("../images/slidebg06.jpg") 50% 0 no-repeat fixed; }
#sixth .photograph{ background: url("../images/sixthtit.png") 20% 100px no-repeat fixed; min-height:1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
.millia{ width:1000px;height:600px; position:absolute; top:50%; left:50%; margin:-300px 0 0 -500px; z-index:1;}
.ht{position:absolute;width:650px;top:-16px;;right:0;z-index:10;}
.picshow {position:absolute; width:1000px; height:545px; left:0; top:50px; z-index:5;}
.picshow li{overflow:hidden; position:absolute; left:-1000px; top:-1000px;}
.picshow li span{ display:block; background:#000; opacity:0.5; filter:alpha(opacity=50); width:100%; height:100%; position:absolute; left:0; top:0; cursor:pointer; display:none;}
.picshow li p{ width:100%; height:60px; overflow:hidden; position:absolute; left:0; top:50%; margin:-30px 0 0 0; text-align:center;  display:none; cursor:pointer;}
.picshow li p a{ color:#fff; font-size:16px;}
.picshow li p a:hover{ text-decoration:none;}
.picshow li.pic01{ width:320px; height:210px;}
.picshow li.pic02{ width:210px; height:200px;}
.picshow li.pic03{ width:160px; height:130px;}
.picshow li.pic04{ width:215px; height:140px;}
.picshow li.pic05{ width:215px; height:140px;}
.picshow li.pic06{ width:510px; height:220px;}
.picshow li.pic07{ width:285px; height:240px;}
.picshow li.pic08{ width:195px; height:145px;}
/*sixth*/

/*seventh*/
#seventh { background: url("../images/slidebg07.jpg") 50% 0 no-repeat fixed; }
#seventh .photograph{ background: url("../images/seventhtit.png") 20% 100px no-repeat fixed; min-height:1000px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; margin: 0 auto; }
.wrapper{ width:1200px;height:980px; position:absolute; left:50%; top:50%; margin-left:-600px; margin-top:-490px;}
.wrapper .content{ display:flex; width:1200px; height:980px;align-items:center;justify-content:space-between;}
.wrapper .content .item{position:relative; width:140px; height:80%; color:#fff; background-color:#333; border-radius:20px; cursor:pointer; overflow:hidden; transition:height .5s ease-in .5s,width .5s ease-in; font-size:18px;  -webkit-writing-mode:vertical-rl; writing-mode:tb-rl; writing-mode:vertical-rl;}
.wrapper .content .item .inner{ width:100%; height:100%;position:relative}
.wrapper .content .item:nth-of-type(1) .inner{transition:transform .5s ease-in .1s}
.wrapper .content .item:nth-of-type(2) .inner{transition:transform .5s ease-in .2s}
.wrapper .content .item:nth-of-type(3) .inner{transition:transform .5s ease-in .3s}
.wrapper .content .item:nth-of-type(4) .inner{transition:transform .5s ease-in .4s}
.wrapper .content .item:nth-of-type(5) .inner{transition:transform .5s ease-in .5s}
.wrapper .content .item:nth-of-type(6) .inner{transition:transform .5s ease-in .6s}
.wrapper .content .item:nth-of-type(7) .inner{transition:transform .5s ease-in .7s}
.wrapper .content .item:nth-of-type(8) .inner{transition:transform .5s ease-in .8s}
.wrapper .content .item .inner .bjPic{width:100%;height:100%;border-radius:20px;opacity:.5}
.wrapper .content .item:nth-of-type(1) .inner .bjPic{ background: url("../images/seventh20170619.jpg") no-repeat center/cover; }
.wrapper .content .item:nth-of-type(2) .inner .bjPic{ background: url("../images/seventh20180201.jpg") no-repeat center/cover; }
.wrapper .content .item:nth-of-type(3) .inner .bjPic{ background: url("../images/seventh20180801.jpg") no-repeat center/cover; }
.wrapper .content .item:nth-of-type(4) .inner .bjPic{ background: url("../images/seventh20190101.jpg") no-repeat center/cover; }
.wrapper .content .item:nth-of-type(5) .inner .bjPic{ background: url("../images/seventh20190326.jpg") no-repeat center/cover; }
.wrapper .content .item:nth-of-type(6) .inner .bjPic{ background: url("../images/seventh20190408.jpg") no-repeat center/cover; }
.wrapper .content .item:nth-of-type(7) .inner .bjPic{ background: url("../images/seventh20190604.jpg") no-repeat center/cover; }
.wrapper .content .item:nth-of-type(8) .inner .bjPic{ background: url("../images/seventh20190819.jpg") no-repeat center/cover; }
.wrapper .content .item .inner .dir{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:opacity .5s linear .3s}
.wrapper .content .item:hover .inner .bjPic{opacity:1}
.wrapper .content .item:hover .inner .dir{font-size:18px;font-weight:700}
.wrapper .content .item .showBox{width:100%;height:100%;opacity:0}
.wrapper .content .item .showBox .showBox-dir{position:absolute;left:50px;top:50px}
.wrapper .content .item .showBox .close{width:30px;height:30px;position:absolute;right:50px;top:50px}
.wrapper .content .item .showBox .close::after,.wrapper .content .item .showBox .close::before{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);content:"";display:block;width:20px;height:2px;background-color:#fff}
.wrapper .content .item .showBox .close::before{transform:rotateZ(45deg)}
.wrapper .content .item .showBox .close::after{transform:rotate(-45deg)}
.init .content .item .inner{transform:translateY(100%)}
.startShowItem .content .item{transition:width .5s ease-in .5s,height .5s ease-in}
.startShowItem .content .item.active{width:100%}
.startShowItem .content .item:not(.active){height:0%;width:0%}
.startShowItem .content .item .inner .dir{opacity:0;transition:opacity .5s linear .2s}
.startShowItem .content .item .inner .showBox{opacity:1;transition:opacity .5s linear .5s}
/*seventh*/

/*eighth*/
#eighth{ background: url("../images/slidebg06.jpg") 50% 0 no-repeat fixed; }
#eighth .photograph{ background: url("../images/eighthtit.png") 20% 100px no-repeat fixed; min-height:360px; padding: 0; margin: 0; width: 100%; max-width: 1920px; position: relative; }
{margin:0; padding:0; border:0; -moz-box-sizing:border-box; box-sizing:border-box; position:relative;}
.demo-wrapper{padding:30px; padding-top:3px;}
.portfolio-eighthitems{ height:400px; overflow-x:scroll;overflow-y:hidden;white-space:nowrap;margin-bottom:30px;position:relative}
.portfolio-eighthitems>li{display:inline-block;vertical-align:top}
.eighthitem{ width:300px; height:202px;margin:150px 20px 0;padding:5px; border-radius:2px;background-color:#fff;font-size:14px;opacity:0;position:relative;top:-300px;box-shadow:0 10px 10px -5px rgba(0,0,0,.5);-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);-o-transform:rotate(-135deg);transform:rotate(-135deg);-webkit-transition:all .3s ease,opacity 2s ease,top 1s ease;-o-transition:all .3s ease,opacity 2s ease,top 1s ease;transition:all .3s ease,opacity 2s ease,top 1s ease}
.eighthitem:nth-child(even){margin-top:100px}
.eighthitem:hover{height:270px;padding:15px;-webkit-transform:translateY(-68px);-ms-transform:translateY(-68px);-o-transform:translateY(-68px);transform:translateY(-68px)}
.eighthitem:hover .date{-webkit-transform:translate3d(0,61px,0);-ms-transform:translate3d(0,61px,0);-o-transform:translate3d(0,61px,0);transform:translate3d(0,61px,0)}
.eighthitem:hover figcaption{-webkit-animation:show .25s ease-in .12s forwards;-o-animation:show .25s ease-in .12s forwards;animation:show .25s ease-in .12s forwards}
.eighthitem:hover p:nth-of-type(1) span{-webkit-animation:slideOut .25s ease-out .15s forwards;-o-animation:slideOut .25s ease-out .15s forwards;animation:slideOut .25s ease-out .15s forwards}
.eighthitem:hover p:nth-of-type(2) span{-webkit-animation:slideOut .2s ease-out .3s forwards;-o-animation:slideOut .2s ease-out .3s forwards;animation:slideOut .2s ease-out .3s forwards}
.eighthitem:hover .view{height:170px}
.eighthitem:hover .view img{top:-20px;left:-20px}
.falldown{top:0;opacity:1;-webkit-transform:rotate(0);-ms-transform:rotate(0);-o-transform:rotate(0);transform:rotate(0)}
figure{width:100%;height:100%}
.view{overflow:hidden;width:100%;height:190px;position:relative}
.view img{width:300px;height:190px;-webkit-transition:width .3s ease;-o-transition:width .3s ease;transition:width .3s ease;position:absolute}
figcaption{height:60px;width:100%;padding:0;position:absolute;bottom:0;overflow:hidden;opacity:0}
figcaption p{line-height:25px!important;font:bold 12px/18px Arial,sans-serif;text-transform:uppercase;padding:0 10px;margin:5px 0;width:100%;background-color:#f0f0f0;color:#333}
figcaption span{left:-100%;opacity:0}
figcaption a{color:#cc320f}
.date{z-index:1;width:50px;height:30px;line-height:30px;color:#fff;font-weight:700;text-align:center;border-radius:1px;background-color:#cc320f;position:absolute;bottom:30px;left:15px;-webkit-transition:-webkit-transform .5s cubic-bezier(.12,1.6,.91,.92);-o-transition:-o-transform .5s cubic-bezier(.12,1.6,.91,.92);transition:-webkit-transform .5s cubic-bezier(.12,1.6,.91,.92);transition:-ms-transform .5s cubic-bezier(.12,1.6,.91,.92);transition:-o-transform .5s cubic-bezier(.12,1.6,.91,.92);transition:transform .5s cubic-bezier(.12,1.6,.91,.92)}
@keyframes slideOut{0%{left:-100%;opacity:0}
95%{left:0;opacity:.2}
100%{opacity:1;left:0}
}
@-webkit-keyframes slideOut{0%{left:-100%;opacity:0}
95%{left:0;opacity:.2}
100%{opacity:1;left:0}
}
@-o-keyframes slideOut{0%{left:-100%;opacity:0}
95%{left:0;opacity:.2}
100%{opacity:1;left:0}
}
@-webkit-keyframes show{to{opacity:1}}
@-o-keyframes show{to{opacity:1}}
/*eighth*/


#theend { background: url("../images/puckered.jpg") 50% bottom no-repeat fixed;  }
#theend .byebye { background: url("../images/theend.png") 100% 100px no-repeat fixed; height: 900px; padding: 0; margin: 0; width: 100%; max-width:1920px; position: relative; margin: 0 auto; }
#theend .secondvideo{ width:600px; height:400px; position:absolute; left:18%; top:24%; z-index: 15; }