* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.header i{
  width: 72px;
  height: 35px;
  display: inline-block;
  vertical-align: middle;
  background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAkCAYAAAAq23xmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ4OCwgMjAyMC8wNy8xMC0yMjowNjo1MyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QjAzQjI5QzY3MkI0MTFFQzkyQkVCMjk4MkZENUMzQTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QjAzQjI5QzU3MkI0MTFFQzkyQkVCMjk4MkZENUMzQTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RkI5Q0FFQjEyMDI4MTFFQ0JCMzA5MzBBOUNFN0YxODgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RkI5Q0FFQjIyMDI4MTFFQ0JCMzA5MzBBOUNFN0YxODgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5nn8KOAAAFXElEQVR42uxaeYiVVRS/T6csW1wmHSFrQm0sxNKoqchQNNA0IhWiZTKVVCKzxaypqQZsxjbbiDBLM402tBjJVhUsNZHUmikptxQTwdKispwp9et33juvOXO699vfH+E78Hvf3b777ne+c+79nfNexvM8EyQj6n82YcU2nWfp0ONkXY/3/v2wlT0jmrKF/5a91rK7vzM+X0NlFKbci+tUtDW0M0XJyxPAVUAGOB14EygrKqhVLlX1E4ALigoy5iGgJ7DFsjN8V3KMK+dmYCZbywxgANAbOALUADvTUtBpwBjgb2AxcDCFOXsBVwM/AUuAlpSVMxh4mcvVwA/AucA5wI/APupIQ0HlwBdAN67fT76bUEmXAcuBE7k+BRgKHE5JObQJvw0cx3Xaaq4H5gNfy4Fp7EF3CuWQnA3UJ5zzAaEcksuBaSkph5TyLp1Qom0bMJo9wKStoCstbVOBypjzdWRr0fIIcFYK661Xa/uNj3cr2UuqIPLXvo555wkTjiLDeNO0Ke7FhOulue9RbROAra4bkiroGp++/sD0GHOO8ukbDtwYc62nAguYCOblOXY3UygF3RDQXwv0SVFBJM8ApTHW+ihwhqg3AfcF3ZREQReyleTF5sPkKnPVW/OT85m0+QkdCLNjnIq3ivph5kAthVTQeFV/EFhqGTfUMjaK9TQ7vntYyDnpGZ9XL2kW8FXYm+NIJ2CcqB8C3uDT63fL+NmKCmhpz9dBlr6xDv4z17GZG8smPFDUv2d3M4VU0CTgFFEn0vUrsIeJopauwLOOuTKC0T6t+tYDHzhcqjfvcX5CXKrOwtuaC6kgYt+3qzb5YHOAdY4NfYSlvZLfchWwwuRyMnlp4CvFSzss99KRfZ7PWmmdPUSd2Pl7UR42joImAmeK+gpFz48Ckx1uQTzmJNU2mq9PAV2Au4H93PaOcOEpjpc1T7iolJOBe1VbddSHjaqgDrwZa2aq5RvgMUfcNlO1jeFrd+BxVs50nmObGLcSeNUy50XAbY5tQNIBOkA2RVVQJmLK9S7lTp8CQ9okUbw2R3wjUKFSqJRKuBjVjUwTmtR9g1Bci4Yr2DplmrUUl29R7tbanv08iM9+uO7mNCpZ1nYUykVKdYBH6wlKycq1eNEsiN7ww6qtxmd8s8Mt2vOmXOJg4hXCdbUc4E3W5k4vKKssV9bXGOc0iqIg4g6dRZ0o+tqAe1YBr1jaB7I1jrVk8T4MmJPoxMeWdgo4rxXpEc2+Y0lYFyN+8pkgWy2cXNqpx1qm65JzC69MjWvhPU3eR3mlyhC/alBUv9mjALbtrxr7UBiJ8obsWnNuA97j9UHBC/hVI56LQTkdLUHekzblOOQXh1t0sLQtCznnLpPLJWuhl/CJWutCI3RSCBebpQLOLRbyFSRvMeELkigchSLxjZb2UuWyi5JE4+0CrIeSYXeoL7zFxMsPU7D4h0//3rDxkTgNJ/PVJZ+ztaWvICinp2K1+ZhqTczv2m3hUFLej+EKmwI24IaE6Ry7gqCc403u1wlprl8GPGAYoah6g6NvWcw5a332w6WpKwjKyfDRfIlopgj9OuCvhN93hF1Uu8UhB+8JI386+NZWxcRTsyD6RUGnNauMT942ojRaCGcdP2hcWc4xmYwHq9NYbJYHwWooLdCXTbWCT5MyEUnXhp0wwr87hnBWklIaq1P4dwdZ/kgUenm5EKgp4r87rDwoM7zuwGCOmkv5lBnHlJ5Y8OvATVE2z//x31+cRPElsRlTKmI+53NoQ534UU1XzxzDUiKCw7xQvNUDiplmipK1oPUWvrKnqJpWBVVxkEiymSJsWM/Rompy8o8AAwC+UMUpIq1ABgAAAABJRU5ErkJggg==");
  margin-right: 10px;
}

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  border-radius: 3px;
  background: transparent;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background: transparent;
}

html, body {
  width: 100%;
  height: 100%;
  position: relative;
}

body {
  background: url("img/xbg@1366.jpg") no-repeat;
  background-size: cover;
  overflow: hidden;
}

a {
  text-decoration: none;
}

button {
  outline: none;
}

ul {
  list-style-type: none;
}

.container {
  width: 100%;
  height: 100%;
}

.header {
  font-size: 32px;
  color: #1473d4;
  font-family: 'Microsoft Yahei';
  text-align: center;
  position: absolute;
  top: 50px;
  left: 50%;
  transform: translateX(-50%);
}

.footer {
  font-size: 14px;
  color: #77788e;
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
}

/* filterizr */
.nav:after {
  content: '';
  display: inline-block;
  vertical-align: middle;
  width: 0;
  height: 100%;
}
.nav {
  width: 100%;
  margin: 0 auto;
  text-align: left;
  font-size: 0;
  height: 72px;
  line-height: 72px;
  position: relative;
  padding-left: 36px;
}

.nav li {
  display: inline-block;
  vertical-align: middle;
  border-radius: 16px;
  background: #fff;
  padding: 0 25px;
  font-size: 14px;
  color: #686574;
  color: rgba(104, 101, 116, 1);
  border: 0;
  line-height: 32px;
  box-shadow: 0 3px 10px 3px rgba(197, 208, 232, .5);
  transition: all .5s;
  margin-right: 20px;
  cursor: pointer;
}

.nav li:hover {
  box-shadow: 0 2px 10px 2px rgba(49, 106, 238, .5);
  transition: all 1s;
  color: rgba(49, 106, 238, 1);
}

.nav .active {
  background-color: #4c7be8;
  color: #fff;
  color: rgba(255, 255, 255, 1);
  box-shadow: 0 2px 10px 2px rgba(49, 106, 238, .5);
  transition: all 1s;
}

.nav .active:hover {
  color: rgba(255, 255, 255, 1);
  transition: all 1s;
}

.inner {
  padding-top: 100px;
  padding-bottom: 50px;
  margin: 0 auto;
  height: 100%;
}
.list {
  width: 100%;
  height: 100%;
  overflow: auto;
}
.list ul {
  width: 100%;
  padding: 0 1em 1em 1em;
  height: 100%;
  overflow: auto;
}
.list ul:after{
  content: "";
  display: block;
  clear:both;
}
.list ul li {
  padding: 1em;
  float: left;
  width: 25%;
}
.list ul li a:hover {
  transform: scale(1.01);
}
.list ul li a {
  position: relative;
  display: block;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  width: 20.834em;
  width: 100%;
  height: 12.5em;
  background-color: #c6cddc;
  border-radius: 0.833334em;
  overflow: hidden;
  box-shadow: 10px 10px 30px 0px rgb(0 0 0 / 20%);
  transition: all 0.25s ease 0s;
}
.list ul li .name {
  position: absolute;
  bottom: 0;
  width: 100%;
  background: rgba(37,48,75,0.4);
  height: 2.6674em;
  line-height: 2.6674em;
  text-align: center;
  color: #fff;
  font-size: 1em;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 10px;
}

/* 1项 */
body[size="1"] .list ul {
  width: 60%;
  margin: 0 auto;
  height: 85%;
}
body[size="1"] .list li,
body[size="1"] .list li a {
  width: 100%;
  height: 100%;
  border-radius: 40px;
}
body[size="1"] .list li .name {
  height: 100px;
  line-height: 100px;
  font-size: 30px;
}
/* 2项 */
body[size="2"] .list ul {
  height: 80%;
}
body[size="2"] .list li {
  width: 50%;
  height: 100%;
}
body[size="2"] .list li a {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
body[size="2"] .list li .name {
  height: 80px;
  line-height: 80px;
  font-size: 30px;
}
/* 3项 */
body[size="3"] .list ul {
  height: 60%;
}
body[size="3"] .list li {
  width: 33%;
  height: 100%;
}
body[size="3"] .list li a {
  width: 100%;
  height: 100%;
  border-radius: 20px;
}
body[size="3"] .list li .name {
  height: 55px;
  line-height: 55px;
  font-size: 25px;
}

/* media */
@media screen and (min-width: 1366px) {
  body {
    font-size:12px;
  }
  .inner {
    width: 100em;
  }
}
@media screen and (min-width: 1440px) {
  body {
    font-size:14px;
  }
  .inner {
    width: 90em;
  }
}
@media screen and (min-width: 1600px) {
  body {
    font-size:16px;
  }
  .inner {
    width: 90em;
  }
}
@media screen and (min-width: 1920px) {
  body {
    background-image: url("img/xbg@1920.jpg");
    font-size:20px;
  }
  .inner {
    width: 90em;
  }
  .list ul li {
    width: 20%;
  }
  body[size="4"] .list li {
    width: 25%;
  }
  body[size="2"] .list ul {
    height: 70%;
    width: 90%;
    margin: 0 auto;
  }
  body[size="1"] .list li {
    width: 100%;
  }
  body[size="2"] .list li {
    width: 50%;
  }
  body[size="3"] .list li {
    width: 33%;
  }
}