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

html { overflow-y:scroll; }
body { background:#FFF; font-size:14px; line-height:20px; -webkit-text-size-adjust:100%; }
body, input, textarea, select { color:#342F2B; font-family: 'PingFangSC-Regular', 'Microsoft YaHei', '微软雅黑', sans-serif; }
body, h1, h2, h3, p, ul, dl, dd, form, textarea, input, ol { margin:0; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
ul, ol, td, th { padding:0; list-style:none outside; }
a { color:#342F2B; text-decoration:none; -webkit-tap-highlight-color:transparent; transition: color 0.3s; }
button, input { -webkit-tap-highlight-color:transparent; }
i, strong, em { font-style:normal; font-weight:normal; }
a:focus, input, textarea, select { 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; }

.animate { transition:all 0.3s; -webkit-transition:all 0.3s; }
.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; }
.justify { text-align:justify; text-justify:inter-ideograph; }
.nowrap, .nowrap li { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.noright { margin-right:0!important; padding-right:0!important; }
.noborder { border:none!important; }

.header { position: fixed; width: 100%; left: 0; top: 0; z-index: 99; background-color: #342F2B; height: 70px; background-size: 100% 100%; letter-spacing: 1.88px; }
	.navigation { font-size: 24px; line-height: 70px; display: flex; text-shadow: 0 1px 2px #533107; justify-content: center; font-family: 'PingFangSC-Regular', 'Microsoft YaHei', '微软雅黑', sans-serif; }
		.navigation a { display: block; padding: 0 26px; color: #E1D8BC; }
		.navigation a:hover, .navigation a.current { background: url(../image/menu_over@2x.png) no-repeat 50% 54px; background-size: 100% 2px; }
.poster { padding-top: 70px; background: url(../image/banner@2x.jpg) 50% no-repeat; background-size: cover; height: 686px; }
	.poster dl { text-align: center; }
		.poster dt { padding: 112px 0 37px; }
		.poster dd { font-size: 14px; color: #FFF; text-shadow: 0 2px 3px #533107; }
.auto888 { margin-left: auto; margin-right: auto; max-width: 888px; padding: 0 20px; }
	.bgcolor { background-image: radial-gradient(50% 103%, #E1D8CD 48%, #E1D8CD 100%); }
	.bgcolor-light { background-image: radial-gradient(50% 100%, #D9C9BC 50%, #D9C9BC 100%); }
.auto960 { margin-left: auto; margin-right: auto; max-width: 960px; padding: 0 20px; }
.title { font-size: 24px; line-height: 30px; letter-spacing: 1.88px; text-align: center; padding: 60px 0; color: #342F2B; }
	/*.title:before, .title:after { content: ''; display: inline-block; vertical-align: top; width: 38px; height: 30px; background: url(../image/title-left.png) no-repeat; background-size: contain; margin-right: 18px; }
	.title:after { background-image: url(../image/title-right.png); margin: 0 0 0 18px; }*/
	.moreword { margin: 0 0 21px; height: 192px; overflow: hidden; font-size:16px; line-height:32px;}
		.moreword span { display: block; }
	.text-center { text-align: center; }
		.more { transition: none; width: 100px; display: inline-block; line-height: 22px; border: 1px solid #342F2B; border-radius: 12px; text-align: center; }
		.more:hover { color: #FFF; background-color: #342F2B; }
	#foreword { padding-bottom: 110px; }
/*.lesson1 { background: url(../image/bg1@2x.png) no-repeat 50%; background-size: 100% auto; }*/
.lesson2 { background: url(../image/lesson2@2x.png) no-repeat 50%; background-size: 499px auto; }
.lesson3 { background: url(../image/renwu3@2x.png) no-repeat 0 50%, url(../image/renwu4@2x.png) no-repeat 100% 50%; background-size: 206px auto; }
.lesson4 { background: url(../image/lesson4@2x.png) no-repeat 50%; background-size: auto 301px; }
.lesson5 { background: url(../image/bg2@2x.png) no-repeat 50%; background-size: 100% auto; }
.lesson6 { background: url(../image/lesson6.png) no-repeat 50% 100%; background-size: 1148px auto; }
.my-gallery { overflow: hidden; padding-bottom: 90px; }
	.gallery-column4 { padding-bottom: 70px; }
	figcaption { display: none; }
	.my-gallery figure { float: left; margin: 0 30px 30px 0; width: 300px; }
		.gallery-column4 figure { margin: 0 40px 40px 0; width: 210px; }
		.my-gallery:not(.gallery-column4) figure:nth-of-type(3n) { margin-right: 0; }
			.gallery-column4 figure:nth-of-type(4n) { margin-right: 0; }
		.my-gallery a { display: block; position: relative; width: 100%; padding-top: 100%; overflow: hidden; background-size: cover; background-repeat: no-repeat; background-position: 50%; }
			.gallery-column4 a { padding-top: 100%; }
			.my-gallery img { width: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
	.pswp__caption { transition: transform 0.3s; }
		.pswp--zoomed-in .pswp__caption { transform: translateY(100%); }
		.pswp__caption__center { max-width: 90%; }
.daolan { max-width: 675px; margin: auto; padding: 0 20px; position: relative; }
	.daolan dd { float: left; width: 370px; margin-right: 162px; padding-bottom: 70px; }
		.qrcode { display: inline-block; font-size: 12px; text-align: center; }
			.qrcode img { width: 118px; display: block; margin: auto; }
	.daolan dt { overflow: hidden; padding-top: 11px; }
.read { background-color: #D9C9BC; padding-bottom: 110px; }
	.read dl { display: flex; align-items: center; }
		.read dt { float: left; margin-right: 24px; }
		.read dd { overflow: hidden; line-height: 36px; font-size: 16px; }
			.read li:before { content: '❀ '; }
.virtual-bg { width: 998px; height: 637px; box-sizing: border-box; padding-top: 52px; background: url(../image/virtual.png) no-repeat 50%; background-size: contain; margin: auto; position: relative; }
	.virtual-box { width: 900px; height: 527px; margin: auto; background-color: #4B4139; border-radius: 10px; }
.weibo { padding-bottom: 80px; }
	.weibo iframe { width: 980px; height: 860px; margin: auto; display: block; }
.footer { padding: 70px 0 50px; background-color: #4B4139; }
	.logo { width: 165px; height: 62px; background: url(../image/logo.svg) no-repeat; background-size: contain; margin: 0 auto 35px; }
	.footer a { width: 34px; height: 34px; display: inline-block; vertical-align: top; margin: 0 5px; background-size: contain; }
		.icon-weibo { background-image: url(../image/weibo.svg); }
		.icon-weixin { background-image: url(../image/weixin.svg); position: relative; }
			.icon-weixin img { display: none; width: 86px; height: 86px; position: absolute; left: 48px; top: -25px; }
			.icon-weixin:hover img { display: block; }
	.copy { font-size: 12px; color: #E1D8BC; margin-top: 24px; line-height: 17px; }
@media (max-width: 1080px){
	.navigation { font-size: 20px; }
		.navigation a { padding: 0 24px; color: #342F2B; text-shadow: none; }
}
@media (max-width: 940px){
	body { font-size: 12px; line-height: 18px; }
	.virtual, .weibo, .navigation li:nth-of-type(6), .navigation li:nth-of-type(7) { display: none; }
	.header { background: none; height: 100vh; transform: translateX(-100%); background: url(../image/Mask@2x.jpg) 50%; background-size: cover; transition: transform 0.3s; }
		.header.show { transform: translateX(0); }
		.navigation { flex-direction: column; line-height: 52px; padding-top: 80px; }
	.icon-menu { position: fixed; z-index: 100; right: 24px; top: 24px; width: 32px; height: 32px; background: url(../image/icon_menu.svg) no-repeat 50%; background-size: 32px auto; }
		.icon-menu.close { background-image: url(../image/icon_close.svg); background-size: 24px auto; }
	.poster { height: 100vh; padding-top: 0; background-image: url(../image/banner@2x.jpg); }
		.poster dl { flex-direction: column; }
			.poster dt { padding: 20px 0 0; }
				.poster img { width: 100%; height: auto; margin: 240px 0 40px; }
			.poster dd { align-self: center; font-size: 12px; color: #FFF; text-shadow: none; padding-bottom: 18px; }
	.title { padding: 30px 0; font-size: 16px; line-height: 20px; }
		.title:before, .title:after { width: 26px; height: 20px; }
	.moreword { font-size: 12px; line-height: 24px; }
		.more { width: 80px; line-height: 20px; }
	#foreword, .read { padding-bottom: 20px; }
	.lesson1, .lesson2, .lesson3, .lesson4, .lesson5, .lesson6 { background: none; }
	.my-gallery { padding-bottom: 20px; }
		.my-gallery:not(.gallery-column4) figure { width: 30%; margin: 0 5% 5% 0; }
			.my-gallery:not(.gallery-column4) figure:nth-of-type(3n) { margin-right: 0; }
	.gallery-column4 { padding-bottom: 35px; }
		.gallery-column4 figure { width: 48%; margin: 0 4% 4% 0; }
			.gallery-column4 figure:nth-of-type(2n) { margin-right: 0; }
	.daolan dd { float: none; width: auto; margin-right: 0; padding-bottom: 40px; }
	.daolan dt { position: absolute; right: 20px; bottom: 40px; }
		.qrcode { font-size: 10px; text-align: center; }
		.daolan dt img { width: 120px; }
	.read dl { flex-direction: column-reverse; align-items: normal; }
		.read .nowrap li { width: 100%; }
		.read dt { float: none; margin-right: 0; }
			.read dt img { max-width: 100%; height: auto; }
		.read dd { font-size: 12px; line-height: 20px; }
	.footer { padding: 35px 0 25px; }
		.copy span { display: block; height: 0; overflow: hidden; }
}














/*首页前言展览介绍展览动态虚拟展厅参观导览微博热议古蜀华章四川古代文物菁华序章自然造物第一章伴月三星：三星堆文化时期第二章金沙光芒：十二桥文化时期展览动态虚拟展厅参观导览微博热议第三章马家风尚：青羊宫文化时期尾章水润天府*/