@charset "utf-8";
@import url("./base.css");

/*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: 345px;height: 69px;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;}
}

/*页面左侧区*/
.page-left-box{z-index: 2;position: fixed;left: 0;top: 0;bottom: 0;width: 260px;box-sizing: border-box;padding: 30px;background: #fff url(../images/page_left_box_bg.jpg) center no-repeat;background-size: cover;display: flex;flex-direction: column;justify-content: space-between;box-shadow: 0 0 60px rgba(176,165,145,.8);}
.page-left-box::before{content: '';position: absolute;right: 0;top: 0;bottom: 0;width: 30px;background-image: linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.1));}
/*logo*/
.page-left-box .logo{text-align: center;}
.page-left-box .logo img{max-width: 140px;max-height: 40px;}
/*语言*/
.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;right: 30px;bottom: 30px;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);}
/*纵向导航*/
.vertical-nav{}
.vertical-nav li{margin-top: 20px;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: 22px;}
.vertical-nav li .cn{margin-top: 10px;font-size: 16px;}
.vertical-nav li .en{margin-top: 6px;font-size: 12px;text-transform: uppercase;opacity: .6;}
.vertical-nav li:hover{transform: translateX(.3em);}
.vertical-nav li.on a{color: #B60A0A;}
/*二维码列表*/
.page-left-box .qrcode-list{}
.page-left-box .qrcode-list li{margin-top: 15px;text-align: center;}
.page-left-box .qrcode-list li:first-child{margin-top: 0;}
.page-left-box .qrcode-list li .pic{width: 100px;height: 100px;}
.page-left-box .qrcode-list li .tit{margin-top: .2em;line-height: 20px;}

/*导航栏*/
.nav-box{z-index: 3;position: fixed;right: 0;top: 0;bottom: 0;width: 56px;}
.nav-box .slide-content{position: relative;height: 100%;box-sizing: border-box;padding-top: 80px;background-color: #B60A0A;color: #fff;transform: translateY(-100%);transition: 0.8s;}
.nav-box .slide-content::before{content: '';position: absolute;left: 0;right: 0;top: 0;height: 4px;background-color: #FFE9C5;box-shadow: 0 0 6px rgba(0,0,0,.6);}
.nav-box .slide-content::after{content: '';position: absolute;left: 50%;top: 15px;width: 6px;height: 6px;margin-left: -3px;background-color: #fff;border-radius: 50%;}
.nav-box:hover .slide-content{transform: translateY(0);}
/*装饰*/
.nav-box .slide-content .nav-decoration-elem{position: absolute;top: 100%;}
/*一级栏目*/
.nav-box .nav-1st{text-align: center;}
.nav-box .nav-1st li{margin-top: 20px;overflow: hidden;}
.nav-box .nav-1st li:first-child{margin-top: 0;}
.nav-box .nav-1st li a{position: relative;display: block;padding: 0 1em;line-height: 1.4;color: #fff;}
.nav-box .nav-1st li a::before{content: '';position: absolute;right: calc(50% + 1.2em);top: 50%;width: 100%;height: 1px;background-color: #FFDEB6;transform: scaleX(0);transform-origin: left;transition: 0.3s;}
.nav-box .nav-1st li a::after{content: '';position: absolute;left: calc(50% + 1.2em);top: 50%;width: 100%;height: 1px;background-color: #FFDEB6;transform: scaleX(0);transform-origin: right;transition: 0.3s;}
.nav-box .nav-1st li:hover a::before{transform: scaleX(1);}
.nav-box .nav-1st li:hover a::after{transform: scaleX(1);}
.nav-box .nav-1st li.on a{font-weight: bold;color: #FFDEB6;}
.nav-box .nav-1st li.on a::before{transform: scaleX(1);}
.nav-box .nav-1st li.on a::after{transform: scaleX(1);}
/*分享栏*/
.nav-box .share-box{position: absolute;left: 0;right: 0;bottom: 10px;text-align: center;}
.nav-box .share-box .item{position: relative;display: inline-block;vertical-align: top;margin-bottom: 20px;color: #fff;}
.nav-box .share-box .item .icon{position: relative;display: inline-block;vertical-align: top;width: 30px;height: 30px;background-color: #fff;border-radius: 50%;}
.nav-box .share-box .item .icon img{position: absolute;left: 0;right: 0;top: 0;bottom: 0;width: 66%;height: 66%;margin: auto;}
.nav-box .share-box .item .name{margin-top: .4em;line-height: 1;}
.nav-box .share-box .item .hidden-wrap{position: absolute;right: 100%;top: 50%;transform: translateY(-60%);padding-right: 10px;visibility: hidden;opacity: 0;transition: 0.5s;}
.nav-box .share-box .item .hidden-wrap > .content{background-color: #fff;box-shadow: 0 0 10px rgba(0,0,0,.2);}
.nav-box .share-box .item .hidden-wrap .qrcode{text-align: center;}
.nav-box .share-box .item .hidden-wrap .qrcode .pic{max-width: 100px;}
.nav-box .share-box .item .hidden-wrap .qrcode .tit{font-size: 14px;line-height: 20px;white-space: nowrap;}
.nav-box .share-box .item .hidden-wrap .phone{padding: 10px 15px;font-size: 16px;font-weight: bold;color: #B60A0A;white-space: nowrap;}
.nav-box .share-box .item:hover .hidden-wrap{visibility: visible;opacity: 1;}
/*弹窗内容-搜索栏*/
.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;}

/*footer*/
.footer{z-index: 2;position: fixed;right: 30px;bottom: 30px;}
/*版权*/
.footer .cr{font-size: 12px;line-height: 20px;text-align: right;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: 20px;height: 20px;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){
	.page-left-box{width: 200px;padding: 20px;}
    .page-left-box .btn{right: 20px;bottom: 20px;}
    .footer{right: 20px;bottom: 20px;}
}

/*中屏PC:<=1440px(针对1366*650)*/
@media screen and (max-width: 1440px){
	
}

/*小屏PC:>=1025px && <=1300px*/
@media screen and (max-width: 1300px){
	
}

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

/*phone:<=768px*/
@media screen and (max-width: 768px){
	
}