@charset "utf-8";
/* CSS Document */

@font-face {
    font-family: 'STFANGSO';
    src: url('fonts/STFANGSO.eot');
    src: url('fonts/STFANGSO.eot') format('embedded-opentype'),
         url('fonts/STFANGSO.woff2') format('woff2'),
         url('fonts/STFANGSO.woff') format('woff'),
         url('fonts/STFANGSO.ttf') format('truetype'),
         url('fonts/STFANGSO.svg#STFANGSO') format('svg');
}


html { overflow: hidden; font-size:10px; }
body { line-height:2rem; -webkit-text-size-adjust:100%; }
body, input, textarea, select { color:#C9A364; font-family: 'PingFangSC-Regular', 'Microsoft YaHei', '微软雅黑', sans-serif; }
body, ul, dl, dd, form, textarea, input, ol, figure { margin:0; }
h1, h2, h3, h4 { font-weight: normal; margin: 0; }
ul, ol, td, th { padding:0; list-style:none outside; }
a { color:#C9A364; text-decoration:none; }
a, button { -webkit-tap-highlight-color:transparent; }
i, strong, em { font-style:normal; font-weight:normal; }
a:focus, input, textarea, select, button { outline:none; }
textarea { overflow:auto; resize:none; }
input, textarea, select { font-size:100%; }
img { border:0; vertical-align:middle; }
table { border-collapse:collapse; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button,
input[type=submit], input[type=reset], input[type=number], input[type=tel],
input[type=text], input[type=password], button, textarea { -webkit-appearance: none !important; margin: 0; }
input[type=number] { -moz-appearance:textfield; }
input, textarea, button { border-radius:0; }

/*::-webkit-scrollbar { height: 0; width: 5px; }
	::-webkit-scrollbar-thumb { background-color: #b9b9b9; border-radius: 0;}
	::-webkit-scrollbar-track { background-color: #fff; }*/

.clear:after { display:block; clear:both; content:''; visibility:hidden; height:0; }.clear { zoom:1; }
.breakall { word-break:break-all; word-wrap:break-word; }
.float-left { float:left; display:inline; } .float-right { float:right; display:inline; }
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; }
.text-justify { text-align:justify; text-justify:inter-ideograph; }
.nowrap, .nowrap li { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.auto715 { max-width: 715px; padding-left: 20px; padding-right: 20px; margin: auto; }
.visible-xs { display: none; }
.hidden-xs { display: block; }

.jspContainer { overflow:hidden; position:relative; }
	.jspPane { position:absolute; }
	.jspVerticalBar { position:absolute; top:0; right:0; width: 6px; height:100%; }
		.jspCap { height: 10px; }
		.jspTrack { background:none; position:relative; }
			.jspDrag { background: #C9A364; position:relative; top:0; left:0; cursor:pointer; border-radius: 4px; }
		.jspArrow { background:#50506d; text-indent:-20000px; display:block; cursor:pointer; padding:0; margin:0; }
		.jspArrow.jspDisabled { cursor:default; background:#80808d; }
			.jspVerticalBar .jspArrow { height:16px; }
	.jspHorizontalBar { position:absolute; bottom: 60px; left:0; width:100%; height: 6px; }
		.jspHorizontalBar .jspTrack { background-color: #645132; border-radius: 4px; }
		.jspHorizontalBar .jspCap { float:left; }
			.jspCapLeft, .jspCapRight { width: calc(50% - 150px); }
			.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag { float:left; height:100%; }
			.jspHorizontalBar .jspDrag { height: 32px; border-radius: 16px; transform: translateY(-13px); }
		.jspCorner { background:none; float:left; height:100%; }
		.jspHorizontalBar .jspArrow { width:16px; float:left; height:100%; }
h1, .navigation, .menu, .line, .arrowdown { position: fixed; z-index: 99; }
h1 { font-family: 'STFANGSO'; font-weight: bold; left: 168px; top: 268px; font-size: 28px; writing-mode: vertical-rl; line-height: 40px; transition: top 0.8s cubic-bezier(0.19, 1, 0.22, 1), transform 0.8s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.3s; }
	h1.top { top: 45px; }
	h1.hide { opacity: 0; }
	h3.eventitle { font-family: 'STFANGSO'; font-weight: bold; position: absolute; left: 168px; top: 45px; writing-mode: vertical-rl; font-size: 20px; line-height: 30px; }
.menu { width: 30px; height: 32px; position: fixed; left: 60px; top: 45px; background: url(../image/menu.svg) no-repeat 50%; background-size: contain; }
.line { width: 1px; height: 500px; position: fixed; left: 150px; top: 0; background-color: #C9A364; transition: height 0.3s; }
	.line.mini { height: 200px; }
.navigation { font-family: 'STFANGSO'; font-weight: bold; visibility: hidden; opacity: 0; transition: opacity 0.3s; left: 0; top: 0; width: 100%; height: 100%; font-size: 20px; padding: 45px 0 0 168px; letter-spacing: 1.43px; line-height: 32px; box-sizing: border-box; background: url(../image/1.png) no-repeat 100% 50% #323333; background-size: auto 100%; }
	.close { width: 16px; height: 16px; display: block; margin: 26px 0 0 34px; background: url(../image/close.svg) no-repeat 50%; background-size: contain; }
	body.showmenu .navigation { visibility: visible; opacity: 1; }
.arrowdown { left: 50%; bottom: 20px; width: 24px; height: 16px; background: url(../image/arrow-down.svg) no-repeat; background-size: contain; transform: translate(-50%, 0); transition: opacity 0.3s; }
	.arrowdown.hide { opacity: 0; }
.swiper-home { height: 100vh; width: 100%; overflow: hidden; }
	.parallax-bg { position: absolute; left: 0; top: 0; width: 100%; height: 200%; background: url(../image/bg.jpg) 50% 0 #000; background-size: auto 100%; }
	.swiper-home > .swiper-wrapper { transition-timing-function: cubic-bezier(0.19, 1, 0.22, 1); z-index: 0; }
		.swiper-slide.home { background: url(../image/1.png) no-repeat 100% 50%; background-size: contain; }
	.swiper-container-vertical>.swiper-pagination-bullets { right: 38px; width: 18px; }
		.swiper-pagination-bullet { width: 10px; height: 10px; background-color: #645132; opacity: 1; outline: none; }
			.swiper-pagination-bullet-active { width: 14px; height: 14px; background-color: #C9A364; }
		.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 10px 0; display: inline-block; vertical-align: top; }
	.scroll-words { width: 742px; max-width: calc(100% - 40px); height: 70vh; margin: 15vh auto 0; font-size: 16px; line-height: 32px; }
		.scroll-words h2 { font-size: 20px; text-align: center; font-family: 'STFANGSO'; font-weight: bold; margin-bottom: 22px; }
			.scroll-words h2:before, .scroll-words h2:after { content: ''; display: inline-block; vertical-align: top; border-left: 1px solid #C9A364; height: 20px; margin: 6px 21px 0; }
.works-gallery { margin: 50vh auto 0; width: 900px; max-height: 90vh; transform: translateY(-50%); }
	.works-gallery figure { overflow: hidden; float: left; margin: 0 5px; width: 170px; }
		.works-gallery a { position: relative; display: block; height: 130px; }
			.works-gallery img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
			.works-gallery figcaption { margin-top: 8px; text-align: center; font-size: 14px; }
.huying .works-gallery { margin: 50vh auto 0; width: 570px; transform: translateY(-50%); }
	.huying .works-gallery figure { display: none; width: 570px; margin: 0; }
		.huying .works-gallery a { height: auto; max-height: 90vh; }
			.huying .works-gallery img { position: static; transform: none; max-width: 100%; height: auto!important; }
	.huying .works-gallery figure:nth-of-type(1) { display: block; }
		.huying .works-gallery figcaption { font-family: 'STFANGSO'; font-weight: bold; }
.timeline { margin: calc(50vh - 232px) 0 0; font-size: 14px; padding: 0 0 0 238px; position: relative; }
	.timeline:before { position: absolute; left: 0; top: 223px; width: 100%; height: 2px; content: ''; display: block; background-color: #C9A364; }
	.timeline li { position: relative; float: left; height: 147px; margin-right: -75px; }
		.timeline li:before { position: absolute; left: 0; top: 130px; content: ''; width: 2px; height: 90px; background-color: #C9A364; }
		.timeline li:after { position: absolute; left: -11px; top: 212px; content: ''; width: 24px; height: 24px; border-radius: 50%; background-color: #C9A364; }
		.timeline .time { width: 110px; text-align: center; position: absolute; left: -55px; top: 255px; }
		.timeline .text-justify { background-color: #C9A364; padding: 12px 12px 15px; color: #FFF; }
	.timeline li:nth-of-type(odd) { display: flex; align-items: flex-end; }
	.timeline li:nth-of-type(even) { margin-top: 316px; }
	.timeline li:nth-of-type(even):before { top: -90px; }
	.timeline li:nth-of-type(even):after { top: -103px; }
	.timeline li:nth-of-type(even) .time { top: -134px; }
.swiper-exhibition { max-width: 800px; overflow: hidden; margin: calc(50vh - 300px) auto 0; }
	.swiper-exhibition-button-next, .swiper-exhibition-button-prev { position: absolute; top: 50%; left: 50%; transform: translate(-442px, -50%); width: 22px; height: 24px; background: url(../image/arrow-left.svg) 50% no-repeat; background-size: contain; }
	.swiper-exhibition-button-next { background-image: url(../image/arrow-right.svg); left: auto; right: 50%; transform: translate(442px, -50%); }
	.swiper-lazy { height: 600px; background-size: cover; }
.read dl, .media dl { width: 845px; margin: 50vh auto 0; transform: translateY(-50%); }
	.read dt, .media dt { float: left; width: 400px; }
		.read dt a, .media dt a { display: block; width: 100%; position: relative; background-color: #C9A364; height: 300px; margin-bottom: 30px; overflow: hidden; }
			.read img, .media img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: 100%; }
		.media dt a { margin-bottom: 0; }
	.read dd, .media dd{ font-size: 16px; line-height: 32px;  }
		.read .scroll-pane { height: 630px; }
			.read dd a, .media dd a { display: block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
		.links a:hover { text-decoration: underline; }
	.media dd { margin-top: 70px; }
.weibo iframe { width: 980px; height: 860px; max-height: 91vh; display: block; margin: 4.5vh auto 0; }
.scroll-pane-h { height: 100vh; }
.logo2 {position: fixed;bottom: 20px;left: 20px;z-index: 1;}

@media screen and (max-width: 900px){
	.visible-xs { display: block; }
	.hidden-xs { display: none; }
	.menu { left: 20px; top: 20px; }
	.line { left: 70px; height: 90%; z-index: 100; }
	h1 { left: 86px; top: 0; transform: translateY(calc(90vh - 100%)); }
	h1.top, h3.eventitle { left: 70px; top: 20px; transform: translateY(0); font-size: 20px; line-height: 32px; writing-mode: initial; }
		h1.top br, h3.eventitle br { display: none; }
		h1.top + .line { height: 0; }
		.showmenu .line { height: 370px!important; }
	.jspVerticalBar { width: 0; }
	.jspHorizontalBar { height: 2px; }
		.jspHorizontalBar .jspDrag { height: 11px; transform: translateY(-5px); }
	.swiper-slide.home { background: url(../image/1_3.png) no-repeat; background-size: 100% auto; }
	.swiper-container-vertical>.swiper-pagination-bullets { width: 7px; right: 6px; }
		.swiper-pagination-bullet { width: 5px; height: 5px; }
			.swiper-pagination-bullet-active { width: 8px; height: 8px; }
			.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet { margin: 3px 0; }
	.scroll-words { font-size: 15px; line-height: 1.5; height: 80vh; margin-top: 13vh; }
		.scroll-words h2 { font-size: 18px; line-height: 20px; margin-bottom: 10px; }
			.scroll-words h2:before, .scroll-words h2:after { margin: 0 10px; }
			.timeline .text-justify { font-size: 13px; }
		.jspCapTop, .jspCapBottom { height: 0; }
	.works-gallery { margin: 13vh 0 0; transform: none; width: auto; max-height: none; }
		.works-gallery figure { width: calc((100% - 60px) / 2); margin: 0 0 12px 20px; }
		.works-gallery figcaption { margin-top: 4px; font-size: 12px; }
	.huying .works-gallery { width: calc(100% - 40px); margin: calc(50vh - 170px) auto; transform: none; }
		.huying .works-gallery figure { width: 100%; }
	.timeline { padding-left: 70px; }
	.swiper-exhibition { margin: 15vh 20px 0; }
		.swiper-lazy { height: 70vh; background-size: auto 100%; background-position: 50%; background-repeat: no-repeat; }
	.read dl, .media dl { width: auto; transform: none; margin: 10vh 20px 0; }
		.read dt, .media dt { float: none; width: 100%; display: flex; justify-content: space-between; }
			.read dt a, .media dt a { width: 49%; height: auto; margin: 0; }
				.read img, .media img { position: static; transform: none; }
			.read dd, .media dd { float: none; width: 100%; margin-top: 20px; font-size: 15px; line-height: 18px; }
				.read dd li, .media dd li { margin-bottom: 1.2em; }
				.read dd a, .media dd a { display: inline; white-space: normal; }
		.read .scroll-pane, .media .scroll-pane { height: 400px; }
	.weibo iframe { max-width: calc(100% - 40px); max-height: 80vh; margin: 12vh 20px 0; }
	.navigation { background: #323333; font-size: 16px; padding: 187px 0 0 85px; }
		.close { margin: 0; position: absolute; right: 20px; top: 20px; width: 24px; height: 24px; background-size: 16px auto; }
	.contact { text-align: center; margin-top: 20vh; font-size: 14px; }
		.contact li.logo { margin-top: 50px; }
		.icon-weibo, .icon-weixin { width: 40px; height: 40px; margin: 0 20px; display: inline-block; vertical-align: top; background: url(../image/weibo.svg?1) 50% no-repeat; background-size: contain; }
		.icon-weixin { background-image: url(../image/weixin.svg?1); }
		.copy { font-size: 16px; line-height: 28px; margin-bottom: 132px; }
	.logo2 { display: none; }
	.qrcode { background: #323333; z-index: 100; font-size: 1.6rem; width: 100%; height: 100%; position: fixed; left: 0; top: 0; display: flex; transition: opacity 0.3s; opacity: 0; visibility: hidden; flex-direction: column; justify-content: center; text-align: center; }
		.qrcode.show { opacity: 1; visibility: visible; }
}