@charset "utf-8";

.head-bar{ position:fixed;height: 70px;text-align: center; left: 0; top: -70px; z-index: 10;right:0;background:rgba(160,0,0,0.8); color: #fff; background-size: 100% 100%;padding:0 20px;font-size:18px;transition:all 0.5s ease-out 0s;}
.head-bar.s{top:0; text-decoration: none;}
.head-bar .logo img{width:310px;height:auto;}
.head-bar .h{margin-left:40px;border-left:1px dashed rgba(255,255,255,0.5);padding-left:40px;}
.head-bar .nav{ height:60px; line-height:60px;}
.head-bar .nav a{padding:10px 10px;position: relative;margin:0 20px; color:#fff; font-size:22px; font-family:"Microsoft Yahei";}
.head-bar .nav a:hover{ text-decoration:none;}
.head-bar .nav a:after{content:"";position: absolute;left:50%;top:100%;right:50%;border-top:2px solid #fff;transition:all 0.2s ease-out 0s;}
.head-bar .nav a:hover:after{left:0;right:0;}


.date_page{position:fixed;left:0;top:0;right:0;bottom:0;z-index:8;background:#fff;opacity: 0;pointer-events:none;transition:opacity 0.5s ease-out 0s;}
.date_page.showd{opacity:1;pointer-events:auto;transition:opacity 1s ease-out 0s;}
.date_page .cur1 {width:147px;height:60px;margin-left:-73px;background: url(../image/png6.png) center center no-repeat;background-size:contain;cursor: pointer;position: absolute;left:50%;bottom:0;z-index:1;color: #fff;line-height:68px;text-align: center;}
.tab-mod {position:fixed;left:0;width:180px;z-index:9;top:0;bottom:0;height1:500px;transform1:translateY(-50%);opacity: 0;visibility: hidden;transition:all 0.5s ease-out 0s;background:rgba(255,255,255,0.7);}
.tab-mod.s{opacity:1;visibility: visible;}
.tab-mod.act{opacity:1;visibility: visible;}
.tab-mod .cur1{position: absolute;left:50%;top:50%;margin-top:290px;width: 17px;height: 29px;background: url(../image/jjl/cur2.png) center top no-repeat;margin-left:-8px;}
.scroll-tab {position: absolute;left: 0;top: 50%;width: 100%;height:500px;margin-top:-250px;}
.scroll-tab:before {content: "";position: absolute;left: 50%;top: -20px;border-top: 1px dashed #cccccc;width: 26px;margin-left: -13px;z-index: 1;}
.scroll-tab:after {content: "";position: absolute;left: 50%;bottom: -20px;border-top: 1px dashed #cccccc;width: 26px;margin-left: -13px;z-index: 1;}
.scroll-box {overflow: hidden;height: 100%;position: relative;}
.scroll-track {min-height: 100%;}
.scroll-item {font-size: 16px;text-align: center;color: #999999;transition: all 0.3s ease;/*padding: 10px 0;*/padding: 15px 0;height: 60px;line-height: 60px;cursor: pointer;position: relative;}
.scroll-item.h{opacity:0;pointer-events:none;}
.scroll-item:before{content:"";top:0;left:50%;border-left:1px dashed #ccc;position: absolute;height:20px;}
.scroll-item:after{content:"";bottom:0;left:50%;border-left:1px dashed #ccc;position: absolute;height:20px;}
.scroll-item .ar {font-family: Arial;display: inline-block;}
.scroll-item.font1 {font-size: 32px;color: #555555;}
.scroll-item.font2 {font-size: 24px;color: #999999;}
.scroll-item.cur {color: #8e0302;font-size: 42px;height: 80px;line-height:80px;}
.scroll-item:hover{color: #8e0302;}
.scroll-item:last-child {padding-bottom: 20px;}


.building{position:relative;font-family:'shs';height:100%;}
.building .section{height:100%;position:absolute;overflow:hidden;left:0;top:0%;right:0;bottom:0;opacity:0;visibility:hidden;}
.building .section.in{opacity:1;visibility:visible;transform:none;}
.building .section.out{opacity:0;transition:all 0.5s cubic-bezier(1,0,1,1) 0s;}
.building .section.back{opacity:0;transition:all 0.5s cubic-bezier(1,0,1,1) 0s;}
.building .section .year{font-size:566px;color:#f7f7f7;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'pf';line-height:1;}
.building .section .year strong{display:block;font-weight:normal;transition:all 1s cubic-bezier(0,1,1,1) 0s;opacity:0;}
.building .section.before .year strong{transform:scale(0.5);opacity:0;}
.building .section.after .year strong{transform:scale(1.5);opacity:0;}
.building .section.in .year strong{transform:none;opacity:1;}
.building .section.out .year strong{transform:scale(0.5);transition-delay:0s;opacity: 0;}
.building .section.back .year strong{transform:scale(1.5);transition-delay:0s;opacity: 0;}
.building .section .text{position:absolute;left:50%;width:800px;margin-left:-400px;bottom:45%;text-align:center;z-index:1;opacity:0;}
.building .section.in .text{opacity:1;transition:all 1s ease-out 0.5s;}
.building .section.back .text{transition:all 0.5s ease-out 0s;opacity:0;}
.building .section.out .text{transition:all 0.5s ease-out 0s;opacity:0;}
.building .section .text.l{text-align:left;width:550px;margin-left:-450px;}
.building .section .text .h1{font-size:32px;line-height:1;}
.building .section .text .h2{font-size:40px;font-weight:bold;line-height:1;margin-top:10px;}
.building .section .text .h2 strong{color:#ab2b21;}
.building .section .text .p{font-size:22px;margin-top:30px;color: #666;}
.building .section .links{font-size: 20px;margin-top:30px;}
.building .section .links a +a {margin-left:50px;}
.building .section .text .more{font-size:20px;color:#8e0302;display:inline-block;}
.building .section .text .more img{margin-right:10px; transition:all 0.2s ease-out 0s;}
.building .section .text .more i{font-family:icon;margin-left:10px;}
.building .section .text .more:hover img{transform:rotate(90deg);}

.tagcloud{opacity:0;transition:all 1s ease-out 0s;}
.tagcloud { height: 100%; position: absolute; left: 0; width: 100%; bottom: 0%; }
.tagcloud span{ position: absolute; width:8vw;max-height:10vw;color: #fff; text-decoration: none; display: block;border:8px solid #fff;box-shadow:0 0 10px rgba(0,0,0,0.1);overflow: hidden;background:#fff;}
.tagcloud span img {width:100%;transition:transform 0.2s ease-out 0s;}
.tagcloud span:hover img{transform:scale(1.1);}
.tagcloud span.s:hover img{transform:none; transition:none;}
.tagcloud span.z{z-index:3;}
.tagcloud span.s{left:50% !important;top:50% !important;transform:translate(-50%,-50%);width:auto;height:auto;max-width:none;max-height:none;animation:tagcloud 0.5s ease-out 0s 1 both;text-align: center;box-shadow:0 0 20px rgba(0,0,0,0.15)}
.tagcloud span.s img{max-height:60vh;max-width:60vh;width:auto;height:auto;}
.tagcloud span .h{padding:10px 0 0;color: #333;display: none;}
.tagcloud span.s .h{display:block;}
@keyframes tagcloud{
0%{opacity:0;}
100%{opacity:1;}
}

.building .flex{height:100%;width:auto;margin-left:180px;padding:0 20px;box-sizing:border-box; justify-content:space-between; transform:scale(1);position: relative;z-index:1;}
.building .flex span{margin:0 7px;}
.building .flex .text{text-align:left;position:static;margin:0;width:auto;overflow: hidden;width:34%;margin:0 3%;}
.building .flex .text .p{width:100%;}
.building .flex .tagcloud{position:relative;left:auto;top:auto;bottom:auto;width:60%;height:90%;opacity:0;transition:all 1s ease-out 1s;}
.building .section.in .tagcloud{opacity:1;}
.building .out .flex .tagcloud{transition:all 0.5s ease-out 0s;opacity:0;}
.building .back .flex .tagcloud{transition:all 0.5s ease-out 0s;opacity:0;}
.s16 .flex .tagcloud{width:45%;margin:0 5%;}
.s16 .flex .text{width:40%;}
.s17 .flex span{max-height:50vh;width:auto;}
.s17 .flex span.s{max-height:none;}


.building .pic{position:absolute;bottom:-30%;opacity:0;transition:all 1s ease-out 1s;}
.building .in .pic{opacity:1;bottom:0;}
.building .out .pic{opacity:0;transition:all 0.5s ease-out 0s;}
.building .back .pic{opacity:0;transition:all 0.5s ease-out 0s;}
.building .s1{overflow:visible;}
.building .s1 .year{z-index:1;color:rgba(255,255,255,0.1);transform:translate(-50%,-50%);}
.building .s1 .text{color: #fff;bottom:50%;transform:translateY(50%) !important;}
.building .s1 .text .p{color: #fff;text-align: center;}
.building .s1 .pic{position:absolute;left:-200px;top:0;right:0;bottom:0;background:center center no-repeat;background-size:cover;transform:scale(1.2);}
.building .s1.in .pic{transform:scale(1);transition-duration:3s;}

.building .s2 .pic{left:0;width:100%;}
.building .s3 .pic{height:40%;left:50%;transform:translateX(-50%);}
.building .s4 .pic{width:55%;right:0;}
.building .s5 .pic{left:0;width:100%;}
.building .s6 .pic{left:0;width:100%;}
.building .s7 .pic{height:40%;left:50%;transform:translateX(-50%);}
.building .s8 .pic{width:65%;right:0;}
.building .s9 .pic{height:40%;left:50%;transform:translateX(-50%);}
.building .s10 .pic{left:0;width:100%;}
.building .s11 .pic{height:40%;left:50%;transform:translateX(-50%);}

/*
.building .s2 .pic{left:0;width:100%;transform:scale(1.5);transform-origin:center top;}
.building .s2.in .pic{transform:none;transition-timing-function:cubic-bezier(0,1,1,1);}
.building .s3 .pic{height:40%;left:50%;transform:translateX(-50%) translateY(30%);}
.building .s3.in .pic{transform:translateX(-50%) translateY(0%);}
.building .s4 .pic{width:55%;right:0;transform:translateX(18%) scaleX(0.9);}
.building .s4.in .pic{transform:none;}
.building .s5 .pic{left:0;width:100%;transform:scale(1.3);}
.building .s5.in .pic{transform:none;}
.building .s6 .pic{left:0;width:100%;transform:scale(1.1);transform-origin:center bottom;}
.building .s6.in .pic{transform:none;}
.building .s7 .pic{height:40%;left:50%;transform:translateX(-50%);filter:blur(10px);}
.building .s7.in .pic{filter:blur(0px);}
.building .s8 .pic{width:65%;right:0;transform:translateY(20%);}
.building .s8.in .pic{transform:none;}
.building .s9 .pic{height:40%;left:50%;transform:translateX(-50%) scale(0.8);transform-origin:center bottom;}
.building .s9.in .pic{transform:translateX(-50%) scale(1);}
.building .s10 .pic{left:0;width:100%;transform:translateY(20%);}
.building .s10.in .pic{transform:none;}
.building .s11 .pic{height:40%;left:50%;transform:translateX(-50%);filter:blur(10px);}
.building .s11.in .pic{filter:blur(0px);}
*/



.special1_1{position:relative;font-family:'shs';}
.special1_1 .section{position:relative;overflow:hidden;padding:80px 0;}
.special1_1 .section .year{font-size:566px;color:#f7f7f7;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-family:'pf';line-height:1;}
.special1_1 .section .year strong{display:block;font-weight:normal;}
.special1_1 .section .text{width:800px;text-align:center;position:relative;z-index:1;margin:auto;}
.special1_1 .section .text .h1{font-size:32px;line-height:1;}
.special1_1 .section .text .h2{font-size:40px;font-weight:bold;line-height:1;margin-top:10px;}
.special1_1 .section .text .h2 strong{color:#ab2b21;}
.special1_1 .section .text .p{font-size:22px;margin-top:30px;color: #666;}
.special1_1 .section .links{font-size: 20px;margin-top:30px;}
.special1_1 .section .links a +a {margin-left:50px;}
.special1_1 .section .text .more{font-size:20px;color:#8e0302;}
.special1_1 .section .text .more img{margin-right:10px;transition:all 0.2s ease-out 0s;}
.special1_1 .section .text .more:hover img{transform:rotate(90deg);}
.special1_1 .section .text .more i{font-family:icon;margin-left:10px;}
.special1_1 .pic{position: relative;width:100%;margin-top:50px; transform-origin:center bottom;}
.special1_1 .flex{height:100%;width:100%;padding:0 20px;box-sizing:border-box; justify-content:space-between;min-height:50vh;}
.special1_1 .flex span{margin:0 7px;}
.special1_1 .flex .text{text-align:left;position:static;margin:0;width:auto;overflow: hidden;width:34%;margin:0 3%;}
.special1_1 .flex .text .p{width:100%;}
.special1_1 .flex .tagcloud{position:relative;left:auto;top:auto;bottom:auto;width:60%;height:90%;opacity:1;transition:none;}
.special1_1 .showyears.lock{height:300vh;display: none;}
.special1_1 .s13{padding:110px 0;}
.special1_1 .s13 .tagcloud{width:50%;margin:0 5%;}
.special1_1 .s16{padding:110px 0;padding-left:200px;}

.viewall{display:none;}
.viewall em{display:none;}

@keyframes cur{
0%{transform:translateY(0);}
50%{transform:translateY(-10px);}
100%{transform:translateY(0px);}
}

@media screen and (max-width:1600px){
.building .section .year{font-size:450px;}
.building .section .text .h1{font-size:28px;}
.building .section .text .h2{font-size:40px;}
.building .section .text .p{font-size:18px;}
.building .section .links{font-size:20px;}
.head-bar .nav a{margin:0 10px;}
.tagcloud span{width:7vw;max-height:9vw;border-width:5px;}
}

/*1366*/
@media screen and (max-width:1400px){
.building .section .text .h1{font-size:28px;}
.building .section .text .h2{font-size:36px;}
.building .section .year{font-size:350px;}
.building .section .text.r{right:0;margin-right:0;}
.building .section .text{transform:translateY(0);}
.special1_1 .section .text .h1{font-size:28px;}
.special1_1 .section .text .h2{font-size:36px;}
.special1_1 .section .year{font-size:350px;}
.special1_1 .section .text .p{font-size:20px;}
.head-bar{font-size:16px;}
}
@media screen and (max-width:1200px){
.tab-mod{width:170px;}
.scroll-item{height:50px;line-height:50px;}
.scroll-item.font1{font-size:28px;}
.scroll-item.font2{font-size:22px;}
.scroll-item.cur{font-size:36px;height:65px;line-height:65px;}
.building .s1 .pic{left:-170px;}
.special1_1 .s16{padding-left:170px;}
.building .section .text{width:700px;margin-left:-350px;}
.building .section .text.l{width:500px;margin-left:-330px;}

.head-bar{font-size:14px;}
.head-bar .h{margin-left:15px;padding-left:15px;}
.head-bar .nav a{padding:0 10px;margin:0;}
}
/*1024*/
@media screen and (max-width:1023px){
.building .section{max-height:70vw;overflow: visible;border-left:1px solid #8e0302;}
.building .section .year{font-size:32vw;}
.building .section .text{width:auto;left:20px;right:20px;margin-left:0;transform:none;opacity:1;overflow: visible;}
.building .section .text.l{width:50%;margin-left:10px;text-align: center;}
.building .flex{display: block;padding:0;}
.building .flex .tagcloud{width:auto;opacity:1;}
.building .flex .tagcloud span{width:calc(33.33% - 10px);box-sizing:border-box;max-height:none;margin:0 5px;}
.building .section:before{content:"";width:10px;height:10px;border-radius:100%;border:1px solid #8e0302;background:#fff;position:absolute;left:-6px;top:57px;}
.building .section .text .h1{font-size:16px;position: absolute;right:100%;top:5px;margin-right:27px;white-space:nowrap;}

.special1_1 .section{padding:50px 0 0;overflow:visible;}
.special1_1 .section .year{font-size:36vw;top:150px;transform:translate(-50%,0);}
.special1_1 .section .text{width:auto;margin-left:0;transform:none;opacity:1;margin:0 15px;}
.special1_1 .section .text.l{text-align:left;width:50%;margin-left:0;}
.special1_1 .section .text .h1{margin-bottom:10px;font-size:20px;}
.special1_1 .section .links{font-size:18px;margin-top:20px;}
.special1_1 .pic{margin-top:30px;}
.special1_1 .flex{display:block;}
.special1_1 .flex .text{text-align: center;width:auto;position: relative;margin:0;overflow: visible;}
.special1_1 .section .text .p{margin-top:15px;}
.special1_1 .flex .tagcloud{width:auto;margin:15px 0 0; }
.special1_1 .flex .tagcloud span{width:calc(33.33% - 10px);margin:0 10px 0 0;box-sizing:border-box;max-height:none;}
.special1_1 .section.s16{padding-bottom:20px;}

.building .section .text .h2{font-size:30px;margin-top:0;}
.special1_1 .section .text .h2{font-size:24px;margin-top:0px;}
.special1_1 .section .text .p{font-size:16px;}
.showyears {display:none;}


.date_page{position:fixed;left:0;top:0;right:0;bottom:48px;pointer-events:none;z-index:9;margin-top:0px;padding-left:70px;transition:all 0.5s ease-out 0s;visibility: hidden;}
.date_page.show{opacity:1;visibility: visible;pointer-events:auto;overflow:auto;}
.building{height:auto;}
.tab-mod{display:none;}
.head-bar{height:auto;display: block;padding:10px;opacity: 0;position:fixed;top:0;visibility: hidden;}
.head-bar.s{opacity:1;visibility: visible;z-index: 10000;}
.head-bar .h{padding:0;margin:0;border: none;text-align: center;width:100%;border-bottom:1px dashed rgba(255,255,255,0.3);padding-bottom:5px;margin-bottom:5px;}
.head-bar .logo{display:none;}
.head-bar .nav a{margin:0;font-size:14px;}

.date_page .cur1{display:none;}

.building .section{height:auto;max-height:none;padding:50px 0 0px;position:relative;left:auto;top:auto;right:auto;bottom:auto;opacity:1;visibility: visible;background:#fff;}
.building .section.out{opacity:1;visibility: visible;}
.building .section.before{transform:none;opacity:1;}
.building .section.after{transform:none;opacity:1;}
.building .section .pic{transform:none;opacity: 1;}
.building .section .year{margin-top:0;top:60px;transform:translate(-50%,0);}
.building .section .year strong{transform:none !important;opacity:1 !important;}
.building .section .text{position:relative;margin:0 15px;left:auto;top:auto;right:auto;bottom:auto;transform:none;width:auto !important;text-align: center;}
.building .section.s1 .text{color:#333;}
.building .section.s1 .text .p{color:#999;}
.building .section .pic{position:relative;width:auto !important;height:auto !important;left:auto;top:auto;right:auto;bottom:auto;transform:none !important;filter:none !important;margin-top:25px;}
.building .section .text .h2{font-size:24px;}
.building .section .text .p{font-size:16px;margin-top:15px;}
.building .section .links{font-size:18px;margin-top:15px;}
.building .section .tagcloud{position:relative;margin-top:15px;}
.building .s1{padding-top:132px;}
.building .s1:before{top:139px;}
.building .s1 .text{transform:none !important;}
.building .s1 .year{color: #f9f9f9;}
.building .s1 .pic{width:100% !important;height:56vw !important; transform:none;}
/*
.building .s12{position:relative;top:auto !important;padding:30px 15px;}
.building .s13{position:relative;top:auto !important;padding:30px 15px;}
.building .s14{position:relative;top:auto !important;padding:30px 15px;}
.building .s15{position:relative;top:auto !important;padding:30px 15px;}
.building .s16{position:relative;top:auto !important;padding:30px 15px;}
.building .s17{position:relative;top:auto !important;padding:30px 15px;}
.building .s18{position:relative;top:auto !important;padding:30px 15px;}
*/
.special1_1 .flex .tagcloud span.s{position:fixed;width:auto;z-index:5;height:auto;box-shadow:0 0 20px rgba(0,0,0,0.3);}
.building .flex .tagcloud span.s{position:fixed !important;width:auto;z-index:5;height:auto;box-shadow:0 0 20px rgba(0,0,0,0.3);padding:5px;}
.tagcloud span.s img{max-width:70vw;max-height:60vh;}
.building .flex{margin:auto;}
.building .s17 .flex .tagcloud span{width:50%;}
.special6 .cont .r .b{font-size:20px;}
.special1_1 .section .text .more{font-size:18px;}
.building .section .text .more{font-size:18px;}

.viewall{display:block;text-align: center;background:#911c12;font-size:18px;padding:10px;color: #fff;}
.viewall.act{position:fixed;left:0;bottom:0;right:0;z-index:10;}
.viewall.act span{display:none;}
.viewall.act em{display:inline;}

.p-header.h{opacity:0;}

.building .flex .tagcloud span{height:150px;overflow: hidden;}
.building .section .links a + a{margin-left:20px;}
.building .section .text .more i{margin-left:0;}
}