@charset "utf-8";
@import url("./base.css");
body{background: #FBF7ED url(../images/page_bg.jpg) center no-repeat;background-size: cover;background-attachment: fixed;}
/*loading*/
.loading-layer{z-index: -1;position: fixed;left: 0;right: 0;top: 0;bottom: 0;animation: loadingLayer 5s linear;}
.loading-layer:before{content: "";z-index: -1;position: absolute;left: 0;top: 0;width: 100%;height: 0;background-color: #fff;animation: loadingLayerItem 0.5s linear;animation-delay: 4s;}
.loading-layer:after{content: "";z-index: -1;position: absolute;left: 0;bottom: 0;width: 100%;height: 0;background-color: #fff;animation: loadingLayerItem 0.5s linear;animation-delay: 4s;}
.loading-layer .progress-bar{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 525px;height: 70px;margin: auto;background-color: #ccc;mask: url(../images/logo_two_museum.png);-webkit-mask: url(../images/logo_two_museum.png);animation: progressBarHide 0.5s ease-out;animation-delay: 4s;animation-fill-mode: forwards;}
.loading-layer .progress-bar:after{content: "";position: absolute;left: 0;top: 0;width: 0;height: 100%;background-image: linear-gradient(90deg,#B60A0A,#D8B67F,#B60A0A,#D8B67F,#B60A0A);background-size: 200% 100%;animation: bgp 1s infinite linear,loadingProgress 4s linear;animation-fill-mode: forwards;}
@keyframes loadingLayer{
    0%{z-index: 2;background-color: #000;}
    75%{background-color: #fff;}
    99.99%{z-index: 2;}
    100%{z-index: -1;}
}
@keyframes loadingLayerItem{
    0%{height: 50%}
    100%{height: 0;}
}
@keyframes bgp{
    0%{background-position: 0 0;}
    100%{background-position: -100% 0;}
}
@keyframes loadingProgress{
    20%{width: 40%;}
    80%{width: 60%;}
    100%{width: 100%;}
}
@keyframes progressBarHide{
    100%{opacity: 0;}
}

/*header*/
header{z-index: 3;position: fixed;left: 0;right: 0;top: 0;height: 50px;background-color: #fff;box-shadow: 0 2px 4px rgba(0,0,0,.1);}
header.nav-open{background-color: #D8B67F;box-shadow: none;}
header.nav-open .logo img{filter: brightness(0) invert(1);}
header.nav-open .menu-btn{color: #fff;}
header.nav-open .search-btn{filter: brightness(0) invert(1);}
/*logo*/
header .logo{position: absolute;left: 20px;top: 50%;transform: translateY(-50%);}
header .logo img{max-width: 110px;max-height: 30px;}
/*移动端导航按钮*/
header .menu-btn{z-index: 1;position: absolute;right: 20px;top: 50%;width: 20px;height: 18px;margin-top: -9px;color: #999;cursor: pointer;transition: 0.3s;}
header .menu-btn::after{content: '';position: absolute;right: 0;top: 50%;width: 6px;height: 12px;margin-top: -6px;background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMTUiIHZpZXdCb3g9IjAgMCAxMCAxNSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNNy4zNiAxNC42N0wuMzQyIDguMjU4QTEuMDExIDEuMDExIDAgMCAxIDAgNy41YzAtLjI4OC4xMjYtLjU2OC4zNDItLjc1N0w3LjM2LjMzYTEuMTkxIDEuMTkxIDAgMCAxIDIuMDA5Ljc1N3YxMi44MjhjLS4wMzYuNDYtLjMzMy44NDctLjc2NiAxLjAxLS40MzIuMTYxLS45MS4wNjItMS4yNDMtLjI1M3oiIGZpbGw9IiNGRkYiIGZpbGwtcnVsZT0ibm9uemVybyIvPjwvc3ZnPg==');background-size: 100% 100%;transform: scaleX(0);transform-origin: right;}
header .menu-btn span{display: block;height: 2px;background-color: currentColor;border-radius: 2px;}
header .menu-btn span:nth-child(2){margin: 6px 0;}
header .menu-btn.nav-open{box-sizing: border-box;padding-right: 8px;}
header .menu-btn.nav-open::after{transform: scaleX(1);transition: 0.3s;}
/*搜索按钮*/
header .search-btn{position: absolute;right: 60px;top: 50%;width: 20px;height: 20px;margin-top: -10px;background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIiIGhlaWdodD0iMjIiIHZpZXdCb3g9IjAgMCAyMiAyMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMS4yIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPjxwYXRoIGQ9Ik05Ljg1NCAxOC43MDhBOC44NTQgOC44NTQgMCAxIDAgOS44NTQgMWE4Ljg1NCA4Ljg1NCAwIDAgMCAwIDE3LjcwOHoiLz48cGF0aCBkPSJNMTIuOCA2LjM4N2E0LjE1NCA0LjE1NCAwIDAgMC0yLjk0Ni0xLjIyYy0xLjE1IDAtMi4xOTIuNDY2LTIuOTQ2IDEuMjJNMTYuMjIgMTYuMjJsNC40MTkgNC40MTkiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvZz48L3N2Zz4=') center no-repeat;background-size: 100% 100%;cursor: pointer;filter: brightness(0) invert(.4);transition: 0.3s;}
/*弹窗内容-搜索栏*/
.popup-top-search{position: relative;margin: 30px;}
.popup-top-search .text-input{box-sizing: border-box;width: 100%;height: 40px;padding: 0 50px 0 10px;border: 1px solid #eee;}
.popup-top-search .sub-btn{position: absolute;right: 0;top: 0;width: 40px;height: 40px;background: #B60A0A url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZyBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxwYXRoIHN0cm9rZT0iIzk3OTc5NyIgZmlsbD0iI0Q4RDhEOCIgb3BhY2l0eT0iLjAxIiBkPSJNLjUuNWgxOXYxOUguNXoiLz48Y2lyY2xlIHN0cm9rZT0iI0ZGRiIgc3Ryb2tlLXdpZHRoPSIyIiBjeD0iOSIgY3k9IjkiIHI9IjgiLz48cGF0aCBzdHJva2U9IiNGRkYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBkPSJNMTUgMTVsNCA0Ii8+PC9nPjwvc3ZnPg==') center no-repeat;background-size: 20px 20px;}

/*导航栏*/
.nav-box{display: none;z-index: 3;position: fixed;left: 0;right: 0;top: 50px;background-color: #D8B67F;box-shadow: 0 2px 8px rgba(0,0,0,.2);}
/*一级栏目*/
.nav-box .nav-1st{text-align: center;}
.nav-box .nav-1st li{border-top: 1px solid rgba(255,255,255,.2);}
.nav-box .nav-1st li a{position: relative;display: block;font-size: 16px;line-height: 40px;font-weight: bold;color: #fff;}
.nav-box .nav-1st li a::after{content: '';position: absolute;top: 50%;width: 24px;height: 8px;background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzMiIGhlaWdodD0iOSIgdmlld0JveD0iMCAwIDMzIDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTMwLjYxOCA2LjY0TDIzLjIxNi4xNDVsLTEuMjMzIDEuMDgyIDYuMTY3IDUuNDE1SC40ODR2MS41NDdIMzIuMzhMMzAuNjE4IDYuNjR6IiBmaWxsPSIjOUM5QzlDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=');background-size: 100% 100%;transform: translate(.5em,-50%);filter: brightness(0) invert(1);opacity: 0;transition: 0.3s;}
.nav-box .nav-1st li.on a::after{opacity: 1;}
/*分享栏*/
.nav-box .share-wrap{padding: 20px 0;border-top: 1px solid rgba(255,255,255,.2);text-align: center;}
.nav-box .share-wrap .item{margin: 0 10px;background-color: #fff;border-color: #fff;}
.nav-box .share-wrap .item .icon{width: 60%;height: 60%;filter: none;}

/*页面左侧区*/
.page-left-box{z-index: 2;position: fixed;left: 0;top: 50px;bottom: 0;width: 110px;box-sizing: border-box;padding: 10px;background: #fff url(../images/page_left_box_bg.jpg) center no-repeat;background-size: cover;display: flex;flex-direction: column;justify-content: space-between;transform: translateX(-100%);transition: 0.3s;}
.page-left-box::before{content: '';position: absolute;right: 0;top: 0;bottom: 0;width: 20px;background-image: linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.08));pointer-events: none;}
.page-left-box .fold-btn{position: absolute;right: 0;top: 50%;width: 20px;height: 60px;margin-top: -30px;overflow: hidden;transform: translateX(100%) rotateY(180deg);}
.page-left-box .fold-btn::before{content: '';position: absolute;left: 0;top: 0;width: 60px;height: 60px;background-color: rgba(0,0,0,.15);border-radius: 50%;pointer-events: none;}
.page-left-box .fold-btn::after{content: '';position: absolute;left: 6px;top: 50%;width: 10px;height: 10px;margin-top: -5px;background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxOSAyMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMi42NCAxMEwxMC4xOC4zNjZBLjIyNy4yMjcgMCAwIDAgMTAgMEg3LjgwNmEuNDYuNDYgMCAwIDAtLjM1OC4xNzNMLjE5NCA5LjQ0YS45MDkuOTA5IDAgMCAwIDAgMS4xMjNsNy4yNTMgOS4yNjRhLjQ1LjQ1IDAgMCAwIC4zNTguMTczSDEwYy4xOSAwIC4yOTUtLjIxOS4xNzktLjM2NkwyLjY0IDEwem04LjYzNiAwbDcuNTQtOS42MzRBLjIyNy4yMjcgMCAwIDAgMTguNjM3IDBoLTIuMTk2YS40Ni40NiAwIDAgMC0uMzU4LjE3M0w4LjgzIDkuNDRhLjkwOS45MDkgMCAwIDAgMCAxLjEyM2w3LjI1MyA5LjI2NGEuNDUuNDUgMCAwIDAgLjM1OC4xNzNoMi4xOTZjLjE5IDAgLjI5Ni0uMjE5LjE4LS4zNjZMMTEuMjc2IDEweiIgZmlsbD0iIzk5OSIgZmlsbC1ydWxlPSJub256ZXJvIi8+PC9zdmc+');background-size: 100% 100%;}
.page-left-box.open{box-shadow: 0 0 20px rgba(176,165,145,.5);transform: translateX(0);}
.page-left-box.open .fold-btn{transform: translateX(0) rotateY(0);}
/*纵向导航*/
.vertical-nav{}
.vertical-nav li{margin-top: 10px;transition: 0.3s;}
.vertical-nav li:first-child{margin-top: 0;}
.vertical-nav li a{display: block;line-height: 1;color: #666;}
.vertical-nav li .num{font-size: 16px;}
.vertical-nav li .cn{margin-top: 4px;font-size: 15px;}
.vertical-nav li .en{margin-top: 6px;font-size: 12px;text-transform: uppercase;opacity: .5;transform: scale(.8);transform-origin: left top;}
.vertical-nav li.on a{color: #B60A0A;}
/*语言*/
.page-left-box .language{font-size: 0;}
.page-left-box .language .item{display: inline-block;vertical-align: top;padding: 0 .3em;margin-left: .4em;background-color: #fff;border: 1px solid #aaa;border-radius: 2px;font-size: 14px;line-height: 22px;color: #aaa;transition: 0.3s;}
.page-left-box .language .item:first-child{margin-left: 0;}
.page-left-box .language .item:hover{transform: translateY(-.3em);}
.page-left-box .language .item.on{background-color: #B60A0A;border-color: #B60A0A;color: #fff;}
/*跳转按钮*/
.page-left-box .btn{position: absolute;left: 10px;bottom: 50px;padding: 0 .3em;background-color: #fff;border: 1px solid #D8B67F;border-radius: 2px;font-size: 14px;line-height: 22px;color: #D8B67F;transition: 0.3s;}
.page-left-box .btn:hover{background-color: #D8B67F;color: #fff;transform: translateY(-.3em);}

/*footer*/
.footer{z-index: 2;position: fixed;left: 0;right: 0;bottom: 8px;padding: 0 10px;text-align: center;}
/*版权*/
.footer .cr{font-size: 12px;line-height: 1;color: #999;}
.footer .cr span{display: inline-block;vertical-align: top;margin-left: .6em;}
.footer .cr span:first-child{margin-left: 0;}
.footer .cr a{color: #999;transition: 0.3s;}
.footer .cr .icon{vertical-align: middle;width: 16px;height: 16px;margin: -.25em .25em 0 0;}
.footer .cr a:hover{color: #B60A0A;text-decoration: underline;}


/*笔记本1920*1080显示放大比例为125%，实际分辨率为1920/1.25=1536*/
@media screen and (max-width: 1550px){
	body{max-width: 560px;margin: 0 auto;}
	header{max-width: 560px;margin: 0 auto;}
	.nav-box{max-width: 560px;margin: 0 auto;}
}

/*中屏PC，分辨率1366*/
@media screen and (max-width: 1440px){
	
}

/*小屏PC，分辨率1280*/
@media screen and (max-width: 1300px){
	
}

/*pad横屏，分辨率1024*/
@media screen and (max-width: 1024px){
	
}

/*phone和pad竖屏，分辨率820*/
@media screen and (max-width: 820px){
    /*loading*/
    .loading-layer .progress-bar{width: 300px;height: 40px;mask-size: contain;-webkit-mask-size: contain;}
}