@charset "UTF-8";
body { margin: 0; padding: 0; }

a { color: #000;}

input:focus { outline: none; }

a:hover, a:active { text-decoration: none; }

input:focus::-webkit-input-placeholder { color: transparent; }

#gotop{display:none;width:50px;height:50px;position:fixed;right:50px;bottom:50px;border:2px solid rgba(255,255,255,0.6);border-radius: 5px;box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);text-align: center;}

.searchBox { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); z-index: 20; animation: zoomIn; animation-duration: 0.5s; }

.searchBox .search { margin-top: 10%; position: relative; }

.searchBox .search input { width: 100%; background-color: rgba(255, 255, 255, 0.5); color: #fff; padding: 20px 20px; border-radius: 20px; font-size: 20px; border: 1px solid rgba(255, 255, 255, 0.8); }

.searchBox .search button { background-color: rgba(0, 0, 0, 0); border: none; position: absolute; top: 25%; right: 5%; }

.searchBox ul { margin-top: 30px; list-style: none; overflow: auto; padding: 0; }

.searchBox ul li { font-size: 20px; float: left; width: 33%; text-align: center; margin: 15px 0; }

.searchBox ul li a { color: #fff; }

.searchBox ul::after { content: ""; display: inline-block; clear: both; }

.searchBox .close { position: absolute; top: 4%; right: 3%; opacity: 1; }

.searchBox .close:hover, .searchBox .close:focus { opacity: 0.5; }

.topBox { border-bottom: 1px solid #cebfb8; padding-bottom: 10px; }

.topBox p { float: left; color: rgba(255, 255, 255, 0.6); font-size: 16px; letter-spacing: 0.2em; margin-bottom: 0; margin-top: 5px; }

.topBox p .searchAccount { color: #ff9a8e; }

.topBox button { float: right; background-color: rgba(0, 0, 0, 0); border: none; margin-left: 20px; }

.topBox button img { width: 25px; }

.topBox .module:hover img { content: url("module_red.png"); }

.topBox .list:hover img { content: url("list_red.png"); }

.moduleBox { list-style: none; padding: 0; }

.moduleBox li .content { background-color: #fff; margin: 20px 0; padding: 0; border-radius: 5px; font-family: "Source Han Snas CN"; }

.moduleBox li .content a { display: block; }

.moduleBox li .content a img { width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; }

.moduleBox li .content div { padding: 10px 20px; position: relative; }

.moduleBox li .content div .title a { color: #333; font-size: 20px; font-weight: bolder; font-family: "SourceHanSansSC-Normal"; }

.moduleBox li .content div .title a span { position: absolute; left: 0; top: 16px; background-color: #743931; display: inline-block; width: 10px; height: 19px; border-radius: 0 10px 10px 0; line-height: 20px; }

.moduleBox li .content div .desc { font-size: 16px; line-height: 2em; color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; max-height: 7em; }

.listBox { list-style: none; padding: 0; margin-top: 30px; }

.listBox font { color: #743931; }

.listBox li { background-color: #fff; margin: 20px 0; padding: 20px 10px; border-radius: 5px; }

.listBox li a { display: block;}

.listBox li a img { width: 250px;height: 150px;object-fit: contain;}

.listBox li div .title a { color: #333; font-size: 20px; font-weight: bolder; }

.listBox li div .desc { font-size: 16px; line-height: 2em; color: #666; }

#listBox .verticalBox { margin: 0 11.4px; width: 23%; float: left; }

#listBox .verticalBox li { margin-top: 20px; background-color: #fff; padding: 0; border-radius: 5px; font-family: "Source Han Snas CN"; }

#listBox .verticalBox li a { display: block; }

#listBox .verticalBox li a img { width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; }

#listBox .verticalBox li div { padding: 10px 20px; position: relative; }

#listBox .verticalBox li div .title a { color: #333; font-size: 20px; font-weight: bolder; font-family: "Source Han Snas CN"; }

#listBox .verticalBox li div .title a span { position: absolute; left: 0; top: 15px; background-color: #743931; display: inline-block; width: 8px; height: 22px; border-radius: 0 5px 5px 0; line-height: 20px; }

#listBox .verticalBox li div .desc { font-size: 16px; line-height: 2em; color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; max-height: 7em; }

.pagesMain { float: left; position: relative; left: 50%; margin: 40px 0; }

.pagesMain .pagesBox { margin: 0 auto; list-style: none; display: inline-block; padding: 0; overflow: hidden; position: relative; float: left; left: -50%; }

.pagesMain .pagesBox a { text-decoration: none; }

.pagesMain .pagesBox:after { content: ''; display: inline-block; clear: both; }

.pagesMain .pagesBox li { float: left; border-radius: 5px; }

.pagesMain .pagesBox .number { margin: 0 5px; padding: 3px 10px; background-color: #fff; }

.pagesMain .pagesBox .number.active { background-color: #f7931d; }

.pagesMain .pagesBox .number.active a { color: #fff; }

.pagesMain .pagesBox #prev, .pagesMain .pagesBox #next { margin: 0 5px; padding: 3px 10px; border: 1px solid #e1e4e8; background: #fff; }

.pageName { font-size: 28px; margin: 20px 50px; }

.pageName img { height: 30px; }

#breadCrumb ul { margin-left: 50px; padding: 0; }

#breadCrumb ul li { float: left; list-style: none; color: #fff; font-size: 16px; }

#breadCrumb ul li a { color: rgba(255, 255, 255, 0.5); font-size: 16px; text-decoration: none; }

#breadCrumb ul li + li { margin-left: 5px; }

.bgImgSwitch .swiper-container .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; }

.bgImgSwitch .swiper-container .swiper-slide img { width: 100vw; }

.IndexcontentBox { position: absolute; background-color: rgba(0, 0, 0, 0.3); top: 0; left: 0; width: 100vw; height: 100vh; z-index: 10; }

.IndexcontentBox .nav { padding: 20px 50px; overflow: auto; }

.IndexcontentBox .nav .title { float: left; font-size: 30px; color: #fff; font-family: "汉仪中等线简"; letter-spacing: 0.2em; }

.IndexcontentBox .nav .title a{display: block;}

.IndexcontentBox .nav .title span { letter-spacing: 0; }

.IndexcontentBox .nav .search { float: right; position: relative; border: 2px solid #fff; height: 42px; border-radius: 20px; width: 150px; }

.IndexcontentBox .nav .search a{ display: block; width: 150px; height:42px;}

.IndexcontentBox .nav .search img { display: block; position: absolute; bottom: 3px; height: 30px; left: 10px; }

.IndexcontentBox .nav .search:hover, .IndexcontentBox .nav .search:focus { opacity: 0.8; }

.IndexcontentBox .nav::after { content: ""; display: inline-block; clear: both; }

.IndexcontentBox .sortBox { position: fixed; bottom: 0; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); margin-bottom: 50px; }

.IndexcontentBox .sortBox a { display: block; text-align: center; -webkit-text-decoration-line: none; text-decoration-line: none; }

.IndexcontentBox .sortBox a span, .IndexcontentBox .sortBox a img { display: block; }

.IndexcontentBox .sortBox a .image { position: relative; }

.IndexcontentBox .sortBox a .image .bg_img { margin: 0 auto; margin-bottom: 10px; width: 250px; }

.IndexcontentBox .sortBox a .image .element_img { position: absolute; left: 50%; -ms-transform: translateX(-50%); transform: translateX(-50%); }

.IndexcontentBox .sortBox a .image .nation_element { width: 110px; bottom: 20%; }

.IndexcontentBox .sortBox a .image .shunyi_element { width: 145px; bottom: 22%; }

.IndexcontentBox .sortBox a .image .appendix_element { width: 160px; bottom: 25%; }

.IndexcontentBox .sortBox a .title { color: #fff; font-size: 20px; }

.IndexcontentBox .sortBox a:hover .bg_img { animation: fadenum 15s linear infinite; -moz-animation: fadenum 15s linear infinite; -webkit-animation: fadenum 15s linear infinite; -o-animation: fadenum 15s linear infinite; }

.IndexcontentBox .commendBox { position: absolute; right: 0; top: 30%; width: 200px; }

.IndexcontentBox .commendBox .title { padding: 20px; text-align: center; }

.IndexcontentBox .commendBox .title img { width: 20px; }

.IndexcontentBox .commendBox .title span { padding-left: 10px; color: #fff; font-size: 18px; }

.IndexcontentBox .commendBox .swiper-container .swiper-slide { text-align: center; font-size: 18px; /* Center slide text vertically */ display: -ms-flexbox; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; }

.IndexcontentBox .commendBox .swiper-container .swiper-slide p { padding: 10px; border: 1px solid rgba(255, 255, 255, 0.6); border-right: 0; border-bottom-left-radius: 20px; border-top-left-radius: 20px; }

.IndexcontentBox .commendBox .swiper-container .swiper-slide p a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }

.IndexcontentBox .commendBox .swiper-container .swiper-slide p:hover { border: 1px solid white; border-right: 0; }

.IndexcontentBox .commendBox .swiper-container .swiper-slide p:hover a { color: white; }

#nationIndexContent { position: absolute; top: 50%; -ms-transform: translateY(-45%); transform: translateY(-45%); width: 100%; }

#nationIndexContent div { width: 10%; float: left;  padding: 0 20px; margin-bottom: 50px;}

#nationIndexContent div a { text-align: center; display: block;}

#nationIndexContent div a img { display: block; margin: 0 auto; width: 100%;}

#nationIndexContent div a span { display: block; color: #f0b87f; font-size: 20px; margin-top: 20px; }

#nationIndexContent div a:hover img { animation: pulse; animation-duration: 1s; }

#miniNationIndex .swiper-container .swiper-wrapper a{display: block;}

#miniNationIndex .swiper-container .swiper-wrapper span{display: block;color: #f0b87f; font-size: 16px;margin-top: 20px;}

#miniNationIndex .swiper-container .swiper-wrapper img{display: block; margin: 0 auto; width: 85%;}

.shunyiContentBox { list-style: none; padding: 0; margin-bottom: 50px; }

.shunyiContentBox .miniLi{  margin-top: 20px; background-color: #fff; padding: 0; border-radius: 5px; font-family: "Source Han Snas CN";  }

.shunyiContentBox .miniLi + .miniLi{margin-left: 10px;}

.shunyiContentBox .miniLi a img { width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; }

.shunyiContentBox .miniLi div { padding: 10px 20px; position: relative; }

.shunyiContentBox .miniLi div .title a { color: #333; font-size: 20px; font-weight: bolder; font-family: "Source Han Snas CN"; }

.shunyiContentBox .miniLi div .title a span { position: absolute; left: 0; top: 15px; background-color: #743931; display: inline-block; width: 8px; height: 22px; border-radius: 0 5px 5px 0; line-height: 20px; }

.shunyiContentBox .miniLi div .desc { font-size: 16px; line-height: 2em; color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; max-height: 7em; }

.shunyiContentBox .verticalBox { margin: 0 11.4px; width: 23%; float: left; }

.shunyiContentBox .verticalBox li { margin-top: 20px; background-color: #fff; padding: 0; border-radius: 5px; font-family: "Source Han Snas CN"; }

.shunyiContentBox .verticalBox li a { display: block; }

.shunyiContentBox .verticalBox li a img { width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; }

.shunyiContentBox .verticalBox li div { padding: 10px 20px; position: relative; }

.shunyiContentBox .verticalBox li div .title a { color: #333; font-size: 20px; font-weight: bolder; font-family: "Source Han Snas CN"; }

.shunyiContentBox .verticalBox li div .title a span { position: absolute; left: 0; top: 15px; background-color: #743931; display: inline-block; width: 8px; height: 22px; border-radius: 0 5px 5px 0; line-height: 20px; }

.shunyiContentBox .verticalBox li div .desc { padding:0; font-size: 16px; line-height: 2em; color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; max-height: 6em; }

.load { text-align: center; color: #fff; font-size: 22px; }

.appendixContent .tableName { text-align: center; }

.appendixContent .tableName P { font-size: 32px; color: #fff; letter-spacing: 0.2em; }

.appendixContent .selectBox { margin: 0 auto; padding: 0 5%; }

.appendixContent .selectBox .select { background-image: url(select_bg.png); background-repeat: no-repeat; background-size: contain; width: 200px; height: 50px; float: left; margin-right: 15px; padding: 0 25px; font-size: 16px; }

.appendixContent .selectBox select { width: 150px; height: 50px; background: transparent; border-style: none; color: #fff; }

.appendixContent .selectBox select option { color: #333; }

.appendixContent .selectBox .search { float: left; }

.appendixContent .selectBox .search .input { display: block; background-image: url(select_bg.png); background-repeat: no-repeat; background-size: 100% 100%; float: left; font-size: 16px; }

.appendixContent .selectBox .search .input input { background: transparent; border: none; padding-left: 20px; color: #fff; width: 220px; height: 50px; }

.appendixContent .selectBox .search button { display: block; background-image: url(search_bg.png); background-repeat: no-repeat; background-size: 100% 100%; background-color: transparent; border: none; margin-left: 10px; color: #fff; float: left; width: 145px; height: 50px; font-size: 16px; }

.appendixContent .selectBox .search button img { display: inline-block; width: 20px; margin-right: 20px; }

.appendixContent .listContent { width: 100%; margin-top: 50px; color: #f8f8f6; }

.appendixContent .listContent th, .appendixContent .listContent td { text-align: center; padding: 20px 10px; }

.appendixContent .listContent tr { height: 50px; }

.appendixContent .listContent tr:nth-child(2) { border: none; }

.appendixContent .listContent .tHead { background: #e08479; font-size: 18px; }

.appendixContent .listContent tr + tr { border-top: 1px dashed #ff9b8c; }

.appendixContent .listContent td { font-size: 16px; padding: 20px 10px; }

.appendixContent .listContent td:nth-child(1) { width: 70px; }

.appendixContent .listContent td:nth-child(2) { width: 170px; }

.appendixContent .listContent td:nth-child(3), .appendixContent .listContent td:nth-child(4), .appendixContent .listContent td:nth-child(5) { width: 140px; }

.appendixContent .listContent td:nth-child(6) { width: 220px; }

.appendixContent .listContent td:nth-child(7) { width: 350px; }

@keyframes fadenum { 100% { transform: rotate(360deg); } }

@keyframes im_icon { 0% { opacity: 0.8;
    transform: translate(0, 0); }
  50% { opacity: 1;
    transform: translate(0, 7px); }
  100% { opacity: 0.8;
    transform: translate(0, 0); } }

.picMusVidBox { margin-top: -50px; }

.picMusVidBox a { color: #333; text-decoration: none; }

.picMusVidBox #left { list-style: none; margin: 10px auto; background: rgba(255, 255, 255, 0.5); text-align: center; max-width: 25%; padding: 10px 0; border-radius: 15px; }

.picMusVidBox #left li { display: inline-block; height: 39px; line-height: 39px; padding: 0 20px; text-align: center; cursor: pointer; opacity: 0.7; }

.picMusVidBox #left li a { color: #fff; font-size: 20px; font-weight: bolder; }

.picMusVidBox #left .picLi.active img { content: url(pic_red.png); }

.picMusVidBox #left .videoLi.active img { content: url(video_red.png); }

.picMusVidBox #left .musicLi.active img { content: url(music_red.png); }

.picMusVidBox #left .active { opacity: 1; }

.picMusVidBox #left .active a { color: #66403d; font-size: 20px; font-weight: bolder; }

.picMusVidBox #left li + li { margin-left: 20px; }

.picMusVidBox #content { margin-top: 80px; margin-bottom: 80px; position: relative; }

.picMusVidBox #content .videoBox video { height: 500px; display: block; margin: 0 auto; }

.picMusVidBox #content .picBox .swiper-slide, .picMusVidBox #content .videoBox .swiper-slide { margin-top: 25px; text-align: center; font-size: 18px; width: auto !important;display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; }

.picMusVidBox #content .picBox .swiper-slide-active, .picMusVidBox #content .videoBox .swiper-slide-active { z-index: 2; margin-top: 0; }

.picMusVidBox #content .picBox .swiper-slide-active img, .picMusVidBox #content .videoBox .swiper-slide-active img { height: 350px; }

.picMusVidBox #content .swiper-container-horizontal > .swiper-pagination-bullets, .picMusVidBox #content .swiper-pagination-custom, .picMusVidBox #content .swiper-pagination-fraction { bottom: -30px; }

.picMusVidBox #content .swiper-pagination-bullet-active { opacity: 1; background: #fff; }

.picMusVidBox #content .swiper-pagination-bullet { width: 30px; height: 6px; display: inline-block; border-radius: 3px; background: rgba(255, 255, 255, 0.9); }

.picMusVidBox #content .swiper-button-next, .picMusVidBox #content .swiper-button-prev { top: auto; bottom: 25px;background-image:url("right.png") }

.picMusVidBox #content .swiper-button-next { top: auto; bottom: 25px;background-image:url("right.png") }

.picMusVidBox #content .picBox .swiper-button-next { top: auto; bottom: 50%;background-image:url("right.png") }

.picMusVidBox #content .picBox .swiper-button-prev { top: auto; bottom: 50%;background-image:url("left.png") }

.picMusVidBox #content .swiper-button-prev { top: auto; bottom: 25px;background-image:url("left.png") }

.picMusVidBox #content .videoBox { display: none; }

.picMusVidBox #content .musicBox { display: none; }

.picMusVidBox #content .musicBox #cvs { display: block; margin: 0 auto; }

.picMusVidBox #content .musicBox .buttonBoxAll { width: 80%; margin: 0 auto; overflow: hidden; }

.picMusVidBox #content .musicBox .swiper-slide { text-align: center; font-size: 18px; width: auto; /* Center slide text vertically */ display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; }

.picMusVidBox #content .musicBox li { list-style: none; display: inline-block; }

.picMusVidBox #content .musicBox .buttonBox { display: inline-block; }

.picMusVidBox #content .musicBox .buttonBox button { display: inline-block; position: relative; margin: 20px auto; height: 40px; border: none; font-size: 18px; border-radius: 20px; padding: 0 30px; }

.picMusVidBox #content .musicBox .buttonBox button img { display: block; position: absolute; width: 38px; height: 38px; bottom: 0px; left: -10px; animation: im_icon 1s linear infinite; }

.picMusVidBox #content .musicBox .play { color: #333; }

.picMusVidBox #content .musicBox .stop { background-color: #ff9b8e; color: #fff; }

.picMusVidBox .contentBox { background-color: rgba(191, 166, 162, 0.8); }

.picMusVidBox .contentBox .title { font-size: 26px; font-weight: bolder; padding: 50px 100px 30px 100px; }

.picMusVidBox .contentBox .content div { margin: 0 !important; width: 100% !important; padding: 50px 100px; }

.picMusVidBox .contentBox .content div p { text-indent: 2em; line-height: 2.5em; }

.attributeBox { width: 80%; margin: 0 auto; font-size: 16px; list-style: none; padding: 0; }

.attributeBox li { float: left; margin-top: 20px; }

.onlyContent_lg { width: 50%; position: absolute; top: 0; right: 25%; }

.onlyContent .title { font-size: 26px; font-weight: bolder; padding: 50px 100px 0 100px; text-align: center; margin-bottom: 20px;}

.onlyContent .content div { background-color: #cfbab7; margin: 0 !important; width: 100% !important; padding: 40px 100px; }

.onlyContent .content div p { text-indent: 2em; line-height: 2.5em; }

#bigImage {position: fixed;top: 0%;background-color: rgba(0, 0, 0, 0.7);padding:10% 0;z-index: 999;width: 100%;height: calc(100vh);display: none;text-align: center;}

#bigImage .picture {height: 80%;animation: bounceIn;animation-duration: 1s;align-self: center;}

#bigImage .prev {position:fixed;left:0;top:45%;animation: bounceIn;animation-duration: 1s; padding: 10px 0;background-color: rgba(0, 0, 0, 0.5);}

#bigImage .next {position:fixed;right:0;top:45%;animation: bounceIn;animation-duration: 1s; padding: 10px 0;background-color: rgba(0, 0, 0, 0.5);}

#bigImage .closed {position: absolute;right: 5px;top: 5px;}


.indexPh .nav{
    float: right;
    position: absolute;
    top: 20px;
    right: 20px;
}
.indexPh .nav .search {
    position: relative;
    border: 1px solid #ff9e7e;
    height: 15px;
    border-radius: 20px;
    width: 50px;
}

.indexPh .nav .search a{
    display: block;
    width: 50px;
    height: 15px;
}

.indexPh .nav .search img {
    display: block;
    position: absolute;
    top: 2px;
    height: 10px;
    left: 3px;
}

.indexPh .nav .search:hover,.nav .search:focus {
    opacity: 0.8;
}

.contentPh{
    margin: 20px 0;
}

.contentPh p {
    text-align: center;
}

.contentPh p a{
    color: #a01a0f;
}

.contentPh p a,.contentPh p a img,.contentPh p a span{
    display: block;
    margin: 10px auto;
}

.contentPh p a img {
    width: 120px;
}

.commendPh{
    padding: 0 30px 50px;
}

.commendPh .title span{
    color: #a01a0f;
    font-weight: bolder;
}

.commendPh .title img{
    height: 25px;
}

.commendPh .swiper-container{
    padding-bottom: 50px;
}

.commendPh .content .swiper-wrapper .swiper-slide .box{
    position: relative;
    border: 2px solid #a01a0f;
    border-radius: 22px;
    padding: 10px 20px;
    margin-top: 10px;
    text-align: center;
}

.commendPh .content .swiper-wrapper .swiper-slide .box img{
    position: absolute;
    top: 20%;
    height: 25px;
}

.commendPh .content .swiper-wrapper .swiper-slide .box a{
    color: #a01a0f ;
    font-size: 14px;
}

.commendPh .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
    bottom: 5px;
}

.commendPh  .swiper-pagination-bullet-active{
    background: #a01a0f;
}

.commendPh .content .swiper-wrapper .swiper-slide .box img.left{
    left: 10px;
}

.commendPh .content .swiper-wrapper .swiper-slide .box img.right{
    right: 10px;
}

.commendPh .swiper-container .swiper-slide { text-align: center; font-size: 18px; /* Center slide text vertically */ display: -ms-flexbox; -ms-flex-pack: center; justify-content: center; -ms-flex-align: center; align-items: center; }

.pageTitlePh{
    background: url("phTitleBg.png");
    position: relative;
    width: 100%;
    background-size: 100% 100%;
    padding: 20px 10px;
    text-align: center;
}
.pageTitlePh img{
    height: 15px;
}

.bigImageContent{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

/*响应式*/

@media screen and (max-width: 1660px) {

    .bgImgSwitch .swiper-container .swiper-slide img { width: auto; height: 100vh;}

}

@media screen and (max-width: 1200px){

    .IndexcontentBox .commendBox{top: 20%;}

    #nationIndexContent {top: auto;transform: none; margin-top: 50px;}

    #nationIndexContent div{width: 20%;}

    #nationIndexContent div:nth-child(3){margin-bottom: 0;}

    .shunyiContentBox .verticalBox{ margin: 0 9px;}

    .picMusVidBox .contentBox .content div{padding: 50px 0;}

    .attributeBox{width: 100%;}

    .picMusVidBox .contentBox .title{padding-left: 0;}

    .attributeBox li{padding-left: 0;}

    .appendixContent .selectBox{padding: 0;}

    .appendixContent .selectBox .select{width: 180px;padding: 0 5px;background-size: 100% 100%;}

    .appendixContent .selectBox select{width: 160px;}

    .appendixContent .selectBox .search .input{font-size: 14px;}

    .appendixContent .selectBox .search .input input{width: 200px;}

    .appendixContent .tableName p{font-size: 30px;}

    .picBox ul li img{height: 300px!important;}

    .picBox ul li.active img{height:400px!important;}

    #bigImage{padding: 15% 0;}

}

@media screen and (max-width: 991px){

    .IndexcontentBox .sortBox a .image .bg_img{width: 210px;}

    .IndexcontentBox .sortBox a .image .nation_element{width: 100px;}

    .IndexcontentBox .sortBox a .image .shunyi_element{width: 120px;}

    .IndexcontentBox .sortBox a .image .appendix_element{width: 140px;}

    .onlyContent .content div{padding: 40px;}

    .shunyiContentBox .verticalBox li div .title a{font-size: 16px;}

    .shunyiContentBox .verticalBox li div .desc{font-size: 14px;}

    .shunyiContentBox .verticalBox{margin: 0 7px;}

    .picMusVidBox{margin-top: 0;}

    .picMusVidBox #left li{padding: 0;}

    .picMusVidBox #left li+li{margin-left: 5px ;}

    .picMusVidBox #left li a,.picMusVidBox #left .active a{font-size: 18px;}

    .picMusVidBox #left .picLi.active img,.picMusVidBox #left .picLi. img{height: 20px;}

    .appendixContent .selectBox .select{width: 130px;margin-right: 5px;}

    .appendixContent .selectBox select{width: 110px;}

    .appendixContent .selectBox .search .input input{width: 170px;padding-left: 15px;}

    .appendixContent .selectBox .search button{width: 135px;}

    .appendixContent .tableName p{font-size: 28px;}

    .picMusVidBox #content .videoBox video{height: 400px;}

    .searchBox .search input{padding: 15px;font-size: 16px;}

    .searchBox ul li{font-size: 16px;}

    .searchBox .close{top: 2%;}

    .picMusVidBox #content .picBox .swiper-slide-active img, .picMusVidBox #content .videoBox .swiper-slide-active img{height: 200px;}

    .picBox ul li img{height: 190px!important;}

    .picBox ul li.active img{height: 250px!important;}

    #bigImage{padding: 5% 0;}
}

@media screen and (max-width: 767px) {

    .IndexcontentBox .nav .title a img{width: 200px}

    .IndexcontentBox .nav { padding: 10px; }

    .IndexcontentBox .nav .search { width: 100px!important; height: 30px!important;}

    .IndexcontentBox .nav .search a{ width: 100px!important; height: 30px!important;}

    .IndexcontentBox .nav .search img{height: 18px!important;}

    .IndexcontentBox .nav .title a{margin-top: -10px;}

    .IndexcontentBox .sortBox{margin-bottom: 20px!important;}

    .IndexcontentBox .sortBox a .image .bg_img{width:100px!important;}

    .IndexcontentBox .sortBox a .image .nation_element{width: 50px!important;}

    .IndexcontentBox .sortBox a .image .shunyi_element{width: 60px!important;}

    .IndexcontentBox .sortBox a .image .appendix_element{width: 65px!important;}

    .IndexcontentBox .sortBox a .title{font-size: 14px!important;}

    .IndexcontentBox .commendBox{width: 120px!important;top: 10% !important;}

    .IndexcontentBox .commendBox .title{padding: 10px 0!important;}

    .IndexcontentBox .commendBox .title span{font-size: 16px!important;padding-left:5px!important;}

    .IndexcontentBox .commendBox .title img{width: 15px!important;}

    .IndexcontentBox .commendBox .swiper-container .swiper-slide{font-size: 14px!important;}

    .IndexcontentBox .commendBox .swiper-container {width: 120px;margin-right: 0;}

    .IndexcontentBox .commendBox .swiper-container .swiper-slide p{margin-bottom: 5px;}

    .pageName{margin: 10px;}

    .pageName img{width: 200px;height: auto;}

    #breadCrumb ul{margin-left: 10px;}

    #breadCrumb ul li a,#breadCrumb ul li,#nationIndexContent div a span{font-size: 14px;}

    .listBox li a{text-align: center;}

    .attributeBox{margin-bottom: 20px;}

    .onlyContent .title{padding: 20px 0 0;margin: 0}

    .onlyContent .content div{padding: 15px;}

    .picMusVidBox .contentBox .content div{padding-top: 0;}

    .picMusVidBox .contentBox .title{padding: 50px 0 0; text-align: center;}

    .attributeBox li{clear: both;}

    .picMusVidBox #left{max-width: 50%; padding: 0;}

    .picMusVidBox #content{margin: 0 0 70px;}

    .picMusVidBox #left li a,.picMusVidBox #left .active a{font-size: 16px;}

    .picMusVidBox #left li.active img,.picMusVidBox #left li img{height: 15px;}

    .picMusVidBox #content .videoBox video{width: 100vw; height: auto;}

    .searchBox .search{margin-top: 25%;}

    .searchBox ul li{width: 50%;}

    .picMusVidBox #content .picBox .swiper-slide-active img, .picMusVidBox #content .videoBox .swiper-slide-active img{height: 200px;}

    .picBox ul li img{height: 190px!important;}

    .picBox ul li.active img{height: 250px!important;}

    .picBox button{height: 60px!important;top:30% !important;}

    .picBox button img{height: 30px;}

    .picBox .bottom span{width: 19px!important;}

    #gotop{right: 0;background-color: rgba(0,0,0,0.6);width: 40px;height: 40px;}

    #gotop img{width: 35px;}
}

@media screen and (max-width: 500px){

    #nationIndexContent{margin-top: 20px;}

    #nationIndexContent div{width: 50%;}

    .picMusVidBox #content .picBox .swiper-slide-active img, .picMusVidBox #content .videoBox .swiper-slide-active img{height: 140px!important;}

    /*.picMusVidBox #content .picBox img{height: 110px!important;}*/

}

@media screen and (max-width: 1450px){
    .picMusVidBox #content .picBox .swiper-slide-active img, .picMusVidBox #content .videoBox .swiper-slide-active img{height: 250px;}

    /*.picMusVidBox #content .picBox img{height: 200px;}*/

}


.hengping .IndexcontentBox .sortBox {left:5%;transform: none;width: 60%;margin-bottom: 5px;}

.hengping .IndexcontentBox .sortBox a .image .bg_img{width: 140px;}

.hengping .IndexcontentBox .sortBox a .image .appendix_element{width: 95px;}

.hengping .IndexcontentBox .sortBox a .image .shunyi_element{width: 85px;}

.hengping .IndexcontentBox .sortBox a .image .nation_element{width: 70px;}

.hengping .IndexcontentBox .sortBox a .title{font-size: 16px;}

.hengping .IndexcontentBox .commendBox .swiper-container .swiper-slide{font-size: 16px;}

.hengping .IndexcontentBox .commendBox .swiper-container .swiper-slide p{padding: 5px;}

.hengping .IndexcontentBox .commendBox .swiper-container .swiper-slide p a{color: rgba(255,255,255,0.8);}

.hengping .IndexcontentBox .commendBox .title{padding:10px;}

.hengping .bgImgSwitch .swiper-container .swiper-slide img{height: auto;width: 100vw;}

.hengping .IndexcontentBox .nav .title a img{height: 30px; width: auto;}

.hengping .IndexcontentBox .sortBox .mainContent{width: 33.33%;float: left;}

.hengping .IndexcontentBox .commendBox {top: 25%;}

/*.hengping .IndexcontentBox .sortBox .mainContent {position}*/



#gallery-wrapper { position: relative; margin: 30px 0 100px; width: 100%; }

.white-panel { position: absolute; box-sizing: border-box; background: white; border-radius: 5px; box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3); }

.white-panel:hover { box-shadow: 1px 1px 10px rgba(0, 0, 0, 0.5); margin-top: -5px; -webkit-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; }

.white-panel a { display: block; }

.white-panel a img { width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px; }

.white-panel div { padding: 10px 20px; position: relative; }

.white-panel div .title a { color: #333; font-size: 20px; font-weight: bolder; font-family: "Source Han Snas CN"; }

.white-panel div .title a { color: #333; font-size: 20px; font-weight: bolder; font-family: "Source Han Snas CN"; }

.white-panel div .desc { padding: 0; font-size: 16px; line-height: 2em; color: #666; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; max-height: 6em;}

.white-panel div .title a span { position: absolute; left: 0; top: 15px; background-color: #743931;display: inline-block; width: 8px; height: 22px; border-radius: 0 5px 5px 0; line-height: 20px;}