/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
a {text-decoration: none;color: #FFFFFF;outline: none;-webkit-tap-highlight-color: rgba(0,0,0,0);-webkit-tap-highlight-color: transparent;}
abbr,acronym{border:0;font-variant:normal}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline: none;}
.left{float: left;}
.pa{position: absolute;}
.pr-box{width: 100%;height: 100%;position: relative;}

@font-face{
  font-family: 'RZBG';
  src: url('../font/RZBG.TTF') format('truetype');
}

/* footer */
.foot-wrap {background: #000;padding: 25px 0 35px;}
.foot-wrap p{margin: 0;}
.foot-wrap a{text-decoration: none;}
.foot-wrap .center {width: 1200px;margin: 0 auto;text-align: center;overflow: hidden;}
.foot-wrap .center .f-logo {height: 90px;display: inline-block;vertical-align: middle;}
.foot-wrap .center .f-logo a {margin-right: 25px;width: 159px;height: 100%;line-height: 18px;float: left;color: #c5c5c5;position: relative;display: table; cursor: default;}
.foot-wrap .center .f-logo a span {display: table-cell;vertical-align: middle;text-align: center;}
.foot-wrap .center .f-logo img {width: auto;border: 0;}
.foot-wrap .center .copy-right {display: inline-block; vertical-align: middle; color: #c5c5c5; line-height: 22px; font-size: 16px; text-align: left;}

/* bg */
html,body{width: 100%; height: auto; font-family: 'Microsoft Yahei'; margin: 0 auto; position: relative; min-width: 1200px;}
html.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}
html::-webkit-scrollbar{width: 1px; border: none;}
html::-moz-progress-bar{display: none;}
h1,h2{font-size: 0; text-indent: -9999px;}
.wrapper {width: 100%; min-height: 100%; min-width: 1200px; max-width: 1920px; margin: 0 auto; position: relative; background: url('//res-horcrux.aojiaostudio.com/hqxy/website/bg-wallpaper.jpg') no-repeat center top; background-color: #000;}
.wrapper .cont {width: 100%; min-width: 1200px; max-width: 1920px; overflow: hidden;}
.cont-top {height: 400px; position: relative;}
.cont-top .title {display: block; width: 500px; height: 115px; position: absolute; top: 60%; right: 80px; transform: translateY(-50%); background: url('//res-horcrux.aojiaostudio.com/hqxy/website/wallpaper-title.png') no-repeat center right;}
.tab-wrap {height: 50px; color: #fff; text-align: center; line-height: 50px; font-family: 'RZBG'; font-size: 32px;}
.tab-wrap .tab {width: 100px; margin: 0 35px; ;}
.tab-wrap .tab:hover, .tab-wrap .tab.sel {color: #005aff;}
.wallpaper-wrap {width: 95%; height: 620px; min-width: 1200px; margin: 0 auto; border: 2px solid #405577; overflow-y: scroll;}
.wallpaper-wrap::-webkit-scrollbar {display: none;}
.wallpaper-list {display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-wrap: wrap;flex-wrap: wrap; -ms-flex-line-pack: center; align-content: center; width: 100%; height: auto; min-height: 100%; margin: 20px auto;}

/* horizontal */
.wallpaper-list.horizontal .wallpaper-content {width: 450px; height: 253px; background-color: #c5c5c5; margin: 25px; position: relative; overflow: hidden; border: 1px solid #788594;}
.wallpaper-list.horizontal .wallpaper {display: block; width: 450px; height: 253px;}

/* vertical */
.wallpaper-list.vertical .wallpaper-content {width: 286px; height: 510px; background-color: #c5c5c5; margin: 25px; position: relative; overflow: hidden; border: 1px solid #788594;}
.wallpaper-list.vertical .wallpaper {display: block; width:286px; height: 510px;}

.wallpaper-list .wallpaper img {display: block; width: 100%; height: 100%; height: -webkit-fill-available; transform: scale(1.1); transition: .3s;}
.wallpaper-list.vertical .wallpaper img {height: auto;}
.wallpaper-list .wallpaper-link {display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-wrap: wrap;flex-wrap: wrap; -ms-flex-line-pack: center; align-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; opacity: 0; transition: .5s; background-color: rgba(0,0,0,.6);}
.wallpaper-list.vertical .wallpaper-link {-webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;}
.wallpaper-list .wallpaper-link a {display: block; width: 120px; height: 32px; margin: 5px; border: 1px solid #00dcff; border-radius: 5px; color: #cdeaef; font-size: 18px; text-align: center; line-height: 32px;}
.wallpaper-list .wallpaper-link a:hover {color: #6dbcff;}
.wallpaper-content:hover img {transform: scale(1);}
.wallpaper-content:hover .wallpaper-link {opacity: 1;}

/* 弹窗 */
.pop-wrap {display: block; width: 100%; height: 100%; background-color: rgb(0, 0, 0, .7); position: fixed; z-index: 999; top: 0; left: 0;}
.pop-wrap .pop-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); overflow: hidden; position: relative; pointer-events: all; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.pop-wrap .pop-cont {text-align: center;  overflow: hidden;}
.pop-wrap .btn-close {position: absolute;}

.pop-wallpaper .pop-box {max-width: 1366px; height: auto; text-align: center; overflow: visible; top: 48%;}
.pop-wallpaper .wallpaper {display: block; max-width: 1366px; height: auto; max-height: 768px;}
.pop-wallpaper .wallpaper img{display: block; width: auto; height: 100%; height: -webkit-fill-available; margin: 0 auto;}

/* .pop-wallpaper .wallpaper-link {display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; -ms-flex-wrap: wrap;flex-wrap: wrap; -ms-flex-line-pack: center; align-content: center; width: 100%; height: auto;}
.pop-wallpaper .wallpaper-link a {display: block; width: 120px; height: 32px; margin: 5px; border: 1px solid #00dcff; border-radius: 5px; color: #cdeaef; font-size: 18px; text-align: center; line-height: 32px;}
.pop-wallpaper .wallpaper-link a:hover {color: #6dbcff;} */

.pop-wallpaper .btn-close {width: 45px; height: 45px; bottom: -60px; left: 50%; font-size: 45px; background-color: rgba(47, 77, 187, 0.6); color: #6dbcff; text-align: center; border-radius: 50%; line-height: 40px; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
.pop-wallpaper .btn-close:hover {background-color: rgba(47, 100, 187, 0.6);; color: #6dd7ff;}

@media screen and (max-width: 1440px) {
  .wrapper {width: 1440px; background-size: 1440px;}
  .cont-top {height: 300px;}
  .cont-top .title {transform: scale(.75) translateY(-50%); transform-origin: right top;}
  .tab-wrap {height: 40px; line-height: 40px; font-size: 28px;}
  .wallpaper-wrap {height: 560px;}
  .wallpaper-list.horizontal .wallpaper-content {width: 338px; height: 190px; margin: 20px;}
  .wallpaper-list.horizontal .wallpaper {width: 338px; height: 190px;}
  .wallpaper-list.vertical .wallpaper-content {width: 215px; height: 383px; margin: 15px;}
  .wallpaper-list.vertical .wallpaper {width:215px; height: 383px;}
  .pop-wallpaper .pop-box {max-width: 1280px;}
  .pop-wallpaper .wallpaper {max-width: 1280px; height: auto; max-height: 576px;}
  /* .pop-wallpaper .wallpaper-link a {width: 100px; height: 28px; margin: 3px; border: 1px solid #00dcff; border-radius: 3px; color: #cdeaef; font-size: 15px; text-align: center; line-height: 28px;} */
  .pop-wallpaper .btn-close {width: 35px; height: 35px; bottom: -56px; font-size: 38px; line-height: 30px;}
  .foot-wrap .center .copy-right {line-height: 20px; font-size: 14px;}
}

@media screen and (max-width: 1366px) {
  .wrapper {width: 1366px; background-size: 1366px;}
  .cont-top {height: 285px;}
  .cont-top .title {transform: scale(.6) translateY(-50%); transform-origin: right top;}
  .tab-wrap {height: 32px; line-height: 32px; font-size: 24px;}
  .wallpaper-wrap {height: 500px;}
  .wallpaper-list.horizontal .wallpaper-content {width: 320px; height: 180px; margin: 15px;}
  .wallpaper-list.horizontal .wallpaper {width: 320px; height: 180px;}
  .wallpaper-list.vertical .wallpaper-content {width: 203px; height: 363px; margin: 15px;}
  .wallpaper-list.vertical .wallpaper {width:203px; height: 363px;}
  .pop-wallpaper .pop-box {max-width: 960px;}
  .pop-wallpaper .wallpaper {max-width: 960px; height: auto; max-height: 540px;}
  /* .pop-wallpaper .wallpaper-link a {width: 80px; height: 24px; margin: 2px; border: 1px solid #00dcff; border-radius: 2px; color: #cdeaef; font-size: 12px; text-align: center; line-height: 24px;} */
  .pop-wallpaper .btn-close {width: 30px; height: 30px; bottom: -45px; font-size: 35px; line-height: 25px;}
  .foot-wrap .center .copy-right {line-height: 18px; font-size: 12px;}
}