.animated {
     -webkit-animation-duration: 1s;
     -webkit-animation-fill-mode: both;
     animation-duration: 1s;
     animation-fill-mode: both
 }

 @-webkit-keyframes zoomIn {
     0% {
         -webkit-transform: scale3d(.3, .3, .3);
         opacity: 0;
         transform: scale3d(.3, .3, .3)
     }

     50% {
         opacity: 1
     }
 }

 @keyframes zoomIn {
     0% {
         -webkit-transform: scale3d(.3, .3, .3);
         opacity: 0;
         transform: scale3d(.3, .3, .3)
     }

     50% {
         opacity: 1
     }
 }

 .zoomIn {
     -webkit-animation-name: zoomIn;
     animation-name: zoomIn
 }

 @-webkit-keyframes fadeIn {
     0% {
         opacity: 0
     }

     to {
         opacity: 1
     }
 }

 @keyframes fadeIn {
     0% {
         opacity: 0
     }

     to {
         opacity: 1
     }
 }

 .fadeIn {
     -webkit-animation-name: fadeIn;
     animation-name: fadeIn
 }

 @-webkit-keyframes fadeInUp {
     0% {
         -webkit-transform: translate3d(0, 100%, 0);
         opacity: 0;
         transform: translate3d(0, 100%, 0)
     }

     to {
         -webkit-transform: translateZ(0);
         opacity: 1;
         transform: translateZ(0)
     }
 }

 @keyframes fadeInUp {
     0% {
         -webkit-transform: translate3d(0, 100%, 0);
         opacity: 0;
         transform: translate3d(0, 100%, 0)
     }

     to {
         -webkit-transform: translateZ(0);
         opacity: 1;
         transform: translateZ(0)
     }
 }

 .fadeInUp {
     -webkit-animation-name: fadeInUp;
     animation-name: fadeInUp
 }

 .container-colour {
     color: #333;
     /* background: url(https://assets-cdn.lanqb.com/topicsv3/colour/c-bg.png) no-repeat 50% 970px; */
     cursor: default
 }

 .container-colour .nav-anchor {
     position: absolute;
     bottom: 104px
 }

 .container-colour .colour-relative {
     position: relative
 }

 .container-colour .colour-h2 {
     text-align: center;
     margin-top: 40px;
 }

 .container-colour .colour-h2 h2 {
     position: relative;
     display: inline-block;
     vertical-align: top
 }

 .container-colour .colour-h2 h2 img {
     position: relative;
     z-index: 1
 }

 .container-colour .colour-h3 {
     position: relative;
     font-size: 24px;
     line-height: 32px
 }

 .container-colour .colour-h3 img {
     position: absolute;
     left: 0
 }

 .container-colour .colour-tips {
     position: relative;
     padding: 23px 30px 32px;
     background-color: #fdfdfd;
     background-repeat: no-repeat
 }

 .container-colour .colour-tips:before {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     background: url(https://assets-cdn.lanqb.com/topicsv3/colour/c4-img-bg.png) repeat center center;
     content: ''
 }

 .container-colour .colour-tips h3 {
     display: inline-block;
     padding-bottom: 10px;
     margin-bottom: 15px;
     border-bottom: 2px solid #ffcfcf;
     font-size: 26px;
     line-height: 39px;
     vertical-align: top
 }

 .container-colour .colour-tips p {
     min-height: 72px;
     line-height: 24px;
     color: #666
 }

 .container-colour .colour4-list li {
     float: left;
     width: 25%;
     padding-top: 16px
 }

 .container-colour .colour4-item {
     display: block;
     cursor: pointer
 }

 .container-colour .colour4-item .cover {
     position: relative;
     display: block;
     width: 100%
 }

 .container-colour .colour4-item .cover:before {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     border: 1px solid #f2f2f2;
     content: '';
     -ms-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     text-decoration-skip: objects
 }

 .container-colour .colour4-item .cover img {
     width: 100%;
     height: 100%
 }

 .container-colour .colour4-item .des {
     display: block;
     line-height: 32px;
     color: #333;
     background-color: #f9f9f9;
     text-align: center;
     white-space: nowrap;
     -ms-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     text-decoration-skip: objects
 }

 /*  
 .container-colour .colour4-item:hover .cover:before {
     border-color: #ff7d90
 }
 
 .container-colour .colour4-item:hover .des {
     color: #fff;
     background-color: #ff7d90
 } */

 .container-colour .colour5-list li {
     float: left;
     width: 50%
 }

 .container-colour .colour5-item {
     position: relative;
     display: block;
     cursor: pointer
 }

 .container-colour .colour5-item .cover {
     position: relative;
     display: block;
     width: 100%
 }

 .container-colour .colour5-item .cover:before {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     border: 1px solid #f2f2f2;
     content: '';
     -ms-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     text-decoration-skip: objects
 }

 .container-colour .colour5-item .cover img {
     width: 100%;
     height: 100%
 }

 .container-colour .colour5-item .des {
     display: block;
     padding-right: 10px;
     padding-left: 10px;
     line-height: 32px;
     color: #333;
     background-color: #f9f9f9;
     white-space: nowrap;
     -ms-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     text-decoration-skip: objects
 }

 /* .container-colour .colour5-item:hover .cover:before {
     border-color: #ff7d90
 }
 
 .container-colour .colour5-item:hover .des {
     color: #fff;
     background-color: #ff7d90
 } */

 @media (min-width:768px) {
     .container-colour .c2.colour-h2 {
         margin-top: 40px
     }

     .container-colour .colour-tips {
         margin-top: 46px
     }

     .container-colour .colour-tips p {
         max-width: 465px;
         font-size: 14px
     }

     .container-colour .colour4-list {
         margin-right: -6px;
         margin-left: -6px
     }

     .container-colour .colour4-list li {
         padding-right: 6px;
         padding-left: 6px
     }

     .container-colour .colour4-list.fz12 .colour4-item .des {
         font-size: 12px
     }

     .container-colour .colour4-item .cover {
         height: 134px
     }

     .container-colour .colour4-item .des {
         padding: 5px;
         font-size: 16px
     }

     .container-colour .colour4-item .des em {
         display: none
     }

     .container-colour .colour5-list {
         margin-right: -7px;
         margin-left: -7px
     }

     .container-colour .colour5-list li {
         padding-right: 7px;
         padding-left: 7px
     }

     .container-colour .colour5-item .cover {
         height: 118px
     }

     .container-colour .colour5-item .des {
         padding-top: 5px;
         padding-bottom: 5px;
         font-size: 16px
     }

     .container-colour .colour5-item .des em {
         display: none
     }
 }

 @media (min-width:992px) {
     .container-colour .c2.colour-h2 {
         margin-top: 50px
     }

     .container-colour .colour-tips {
         margin-top: 66px
     }

     .container-colour .colour-tips p {
         max-width: 565px;
         font-size: 16px
     }

     .container-colour .colour4-list {
         margin-right: -10px;
         margin-left: -10px
     }

     .container-colour .colour4-list li {
         padding-right: 10px;
         padding-left: 10px
     }

     .container-colour .colour4-list.fz12 .colour4-item .des {
         font-size: 16px
     }

     .container-colour .colour4-item .cover {
         height: 173px
     }

     .container-colour .colour4-item .des {
         padding: 10px 12px;
         font-size: 18px
     }

     .container-colour .colour5-list {
         margin-right: -10px;
         margin-left: -10px
     }

     .container-colour .colour5-list li {
         padding-right: 10px;
         padding-left: 10px
     }

     .container-colour .colour5-item .cover {
         height: 154px
     }

     .container-colour .colour5-item .des {
         padding-top: 12px;
         padding-bottom: 12px;
         font-size: 18px
     }

     .container-colour .colour5-item .des em {
         display: inline-block
     }
 }

 @media (min-width:1200px) {
     .container-colour  .c2.colour-h2 {
         margin-top: 66px
     }

     .container-colour .colour-tips {
         margin-top: 86px
     }

     .container-colour .colour-tips p {
         max-width: 615px;
         font-size: 18px
     }

     .container-colour .colour4-list.fz12 .colour4-item .des {
         font-size: 18px
     }

     .container-colour .colour4-item .cover {
         height: 210px
     }

     .container-colour .colour4-item .des {
         padding-top: 20px;
         padding-bottom: 20px
     }

     .container-colour .colour4-item .des em {
         display: inline-block
     }

     .container-colour .colour5-item .cover {
         height: 188px
     }

     .container-colour .colour5-item .des {
         padding-top: 20px;
         padding-bottom: 20px
     }
 }

 .topics-colour-nav {
     position: fixed;
     left: 0;
     z-index: 4;
     width: 100%;
     background-color: #D8A5FF;
     box-shadow: 0 0 5px 0 rgba(29, 36, 117, .15)
 }

 .topics-colour-nav .topics-nav-list {
     text-align: center
 }

 .topics-colour-nav .topics-nav-list li {
     position: relative;
     display: inline-block;
     vertical-align: top
 }

 .topics-colour-nav .topics-nav-list li a {
     display: inline;
     color: #F8F0F4;
     -webkit-border-radius: 5px;
     border-radius: 5px
 }

 /* .topics-colour-nav .topics-nav-list li.active {
    width:141px;
    height:43px;
    background:rgba(255,255,255,1);
    border-radius:5px;
 } */

 .topics-colour-nav .topics-nav-list li.active a {
     color: #8C4DBC;
     padding: 6px 16px;
     background-color: #fff;
 }

 @media (min-width:768px) {
     .topics-colour-nav .topics-nav-list li+li {
         margin-left: 76px
     }

     .topics-colour-nav .topics-nav-list li a {
         font-size: 16px;
         line-height: 54px
     }
 }

 @media (min-width:992px) {
     .topics-colour-nav .topics-nav-list li+li {
         margin-left: 116px
     }

     .topics-colour-nav .topics-nav-list li a {
         font-size: 18px;
         line-height: 70px
     }
 }

 @media (min-width:1200px) {
     .topics-colour-nav .topics-nav-list li+li {
         margin-left: 136px
     }
 }

 .colour-c1 {
     position: relative;
     height: 600px;
     overflow: hidden;
     background: #fff1f6 url(https://assets-cdn.lanqb.com/lightshadow/banner-bg.png) no-repeat center top
 }

 .colour-c1 .container {
     position: relative;
     z-index: 3;
     height: 100%;
     text-align: center
 }

 .colour-c1 .colour1-con {
     display: inline-block;
     margin-top: 316px
 }

 .colour-c1 .colour1-con h1 {
     height: 157px;
     width: 876px;
     overflow: hidden;
     background: url(https://assets-cdn.lanqb.com/lightshadow/c1-h1.png) no-repeat center center;
     text-align: left;
     text-indent: -9999px
 }

 .colour-c1 .colour1-con h3 {
     width: 457px;
     height: 54px;
     font-size: 20px;
     font-family: PingFang-SC-Medium;
     font-weight: bold;
     line-height: 32px;
     color: #fff;
     text-shadow: 0px 0px 14px rgba(84, 39, 66, 1);
     -webkit-text-stroke: 1px rgba(148, 74, 211, .5);
     margin: 0 auto;
 }

 .colour-c1 .colour-img {
     position: absolute;
     bottom: 0;
     -ms-transform-origin: center bottom;
     -o-transform-origin: center bottom;
     -webkit-transform-origin: center bottom;
     transform-origin: center bottom
 }

 .colour-c1 .colour-img.img1 {
     left: 50%
 }

 .colour-c1 .colour-img.img2 {
     right: 50%;
     margin-right: -681px
 }

 .colour-c1 .colour-label {
     position: absolute;
     background: url(https://assets-cdn.lanqb.com/topicsv3/colour/c1-label.png) no-repeat 0 0
 }

 .colour-c1 .colour-label.lab1 {
     top: 49px;
     left: 50%;
     width: 154px;
     height: 100px;
     background-position: 0 0
 }

 .colour-c1 .colour-label.lab2 {
     top: 374px;
     left: 50%;
     width: 155px;
     height: 86px;
     background-position: 0 -101px
 }

 .colour-c1 .colour-label.lab3 {
     top: 38px;
     left: 50%;
     width: 153px;
     height: 64px;
     background-position: 0 -200px
 }

 .colour-c1 .colour-label.lab4 {
     top: 46px;
     right: 50%;
     width: 152px;
     height: 61px;
     background-position: 0 -300px
 }

 .colour-c1 .colour-label.lab5 {
     top: 324px;
     right: 50%;
     width: 142px;
     height: 130px;
     background-position: 0 -400px
 }

 @media (min-width:768px) {
     .colour-c1 .colour1-con {
         margin-left: 200px
     }

     .colour-c1 .colour-img.img1 {
         margin-left: -510px;
         -ms-transform: scale(.8);
         -o-transform: scale(.8);
         -webkit-transform: scale(.8);
         transform: scale(.8)
     }

     .colour-c1 .colour-img.img2 {
         display: none
     }

     .colour-c1 .colour-label.lab1 {
         margin-left: -400px
     }

     .colour-c1 .colour-label.lab2 {
         margin-left: -375px
     }

     .colour-c1 .colour-label.lab3 {
         margin-left: -190px
     }

     .colour-c1 .colour-label.lab4 {
         margin-right: -382px
     }

     .colour-c1 .colour-label.lab5 {
         margin-right: -395px
     }
 }

 @media (min-width:992px) {
     .colour-c1 .colour1-con {
         margin-left: 0
     }

     .colour-c1 .colour-img.img1 {
         margin-left: -703px;
         -ms-transform: scale(1);
         -o-transform: scale(1);
         -webkit-transform: scale(1);
         transform: scale(1)
     }

     .colour-c1 .colour-img.img2 {
         display: block
     }

     .colour-c1 .colour-label.lab1 {
         margin-left: -400px
     }

     .colour-c1 .colour-label.lab2 {
         margin-left: -375px
     }

     .colour-c1 .colour-label.lab3 {
         margin-left: -190px
     }

     .colour-c1 .colour-label.lab4 {
         margin-right: -300px
     }

     .colour-c1 .colour-label.lab5 {
         margin-right: -360px
     }
 }

 @media (min-width:1200px) {
     .colour-c1 .colour-label.lab1 {
         margin-left: -838px
     }

     .colour-c1 .colour-label.lab2 {
         margin-left: -864px
     }

     .colour-c1 .colour-label.lab3 {
         margin-left: -290px
     }

     .colour-c1 .colour-label.lab4 {
         margin-right: -833px
     }

     .colour-c1 .colour-label.lab5 {
         margin-right: -858px
     }
 }








 .colour-c2 .colour2-item {
     cursor: pointer
 }

 .colour-c2 .colour2-item .cover {
     position: relative;
     display: block;
     width: 100%
 }



 .colour-c2 .colour2-item .cover img {
     width: 100%;
     height: 100%
 }



 .colour-c2 .colour2-item .des .iconfont {
     display: inline-block;
     margin-left: 8px;
     line-height: 34px;
     vertical-align: top
 }



 @media (min-width:768px) {


     .colour-c2 .cover {
         height: 138.8px
     }

     .colour-c2 .des .iconfont {
         font-size: 20px
     }
 }

 @media (min-width:992px) {


     .colour-c2 .cover {
         height: 178.5333px;
     }

     .colour-c2 .des .iconfont {
         font-size: 24px
     }
 }

 @media (min-width:1200px) {

     .colour-c2 .cover {
         height: 198px
     }

 }

 .colour-c3 .colour-h3 {
     padding-left: 42px;
     margin-top: 38px;
     color: #ffb84c
 }

 .colour-c3 .colour-h3 img {
     top: -2px;
     height: 32px
 }

 .colour-c3 .colour3-list li {
     float: left;
     width: 50%;
     padding-top: 17px
 }

 .colour-c3 .colour3-item {
     display: block;
     cursor: pointer
 }

 .colour-c3 .colour3-item .cover {
     position: relative;
     display: block;
     width: 100%
 }

 .colour-c3 .colour3-item .cover:before {
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
     z-index: 1;
     border: 1px solid transparent;
     content: '';
     -ms-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     text-decoration-skip: objects
 }

 .colour-c3 .colour3-item .cover img {
     width: 100%;
     height: 100%
 }

 .colour-c3 .colour3-item .des {
     display: block;
     padding-right: 16px;
     padding-left: 16px;
     line-height: 35px;
     color: #333;
     background-color: #f9f9f9;
     white-space: nowrap;
     -ms-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     text-decoration-skip: objects
 }

 /* .colour-c3 .colour3-item:hover .cover:before {
     border-color: #ff7d90
 }
 
 .colour-c3 .colour3-item:hover .des {
     color: #fff;
     background-color: #ff7d90
 } */

 @media (min-width:768px) {
     .colour-c3 .colour3-list {
         margin-right: -7px;
         margin-left: -7px
     }

     .colour-c3 .colour3-list li {
         padding-right: 7px;
         padding-left: 7px
     }

     .colour-c3 .colour3-item .cover {
         height: 118px
     }

     .colour-c3 .colour3-item .des {
         padding-top: 8px;
         padding-bottom: 8px;
         font-size: 16px
     }
 }

 @media (min-width:992px) {
     .colour-c3 .colour3-list {
         margin-right: -10px;
         margin-left: -10px
     }

     .colour-c3 .colour3-list li {
         padding-right: 10px;
         padding-left: 10px
     }

     .colour-c3 .colour3-item .cover {
         height: 154px
     }

     .colour-c3 .colour3-item .des {
         padding-top: 16px;
         padding-bottom: 16px;
         font-size: 18px
     }
 }

 @media (min-width:1200px) {
     .colour-c3 .colour3-list {
         margin-right: -17px;
         margin-left: -17px
     }

     .colour-c3 .colour3-list li {
         padding-right: 17px;
         padding-left: 17px
     }

     .colour-c3 .colour3-item .cover {
         height: 184px
     }
 }

 .colour-c4 .colour-h3 {
     color: #ff5e75
 }

 .colour-c4 .colour-h3.n1 {
     padding-left: 37px
 }

 .colour-c4 .colour-h3.n1 img {
     top: 1px;
     height: 27px
 }

 .colour-c4 .colour-h3.n2 {
     padding-left: 42px
 }

 .colour-c4 .colour-h3.n2 img {
     top: 5px;
     height: 23px
 }

 .colour-c4 .colour-h3.n3 {
     padding-left: 38px
 }

 .colour-c4 .colour-h3.n3 img {
     top: 1px;
     height: 29px
 }

 .colour-c4 .colour-tips {
     background-image: url(https://assets-cdn.lanqb.com/topicsv3/colour/c4-img.png)
 }

 @media (min-width:768px) {
     .colour-c4 .colour-h3 {
         margin-top: 35px
     }

     .colour-c4 .colour-tips {
         background-position: 250% 50%
     }
 }

 @media (min-width:992px) {
     .colour-c4 .colour-h3 {
         margin-top: 55px
     }

     .colour-c4 .colour-tips {
         background-position: 140% 50%
     }
 }

 @media (min-width:1200px) {
     .colour-c4 .colour-tips {
         background-position: 100% 50%
     }
 }

 .colour-c5 .colour-h3 {
     color: #67b0ff
 }

 .colour-c5 .colour-h3.n1 {
     padding-left: 37px
 }

 .colour-c5 .colour-h3.n1 img {
     top: 1px;
     height: 27px
 }

 .colour-c5 .colour-h3.n2 {
     padding-left: 35px
 }

 .colour-c5 .colour-h3.n2 img {
     top: 3px;
     height: 26px
 }

 .colour-c5 .colour-h3.n3 {
     padding-left: 38px
 }

 .colour-c5 .colour-h3.n3 img {
     top: 1px;
     height: 29px
 }

 .colour-c5 .colour-tips {
     background-image: url(https://assets-cdn.lanqb.com/topicsv3/colour/c5-img.png)
 }

 .colour-c5 .colour5-list li {
     padding-top: 16px
 }

 @media (min-width:768px) {
     .colour-c5 .colour-h3 {
         margin-top: 35px
     }

     .colour-c5 .colour-tips {
         background-position: 250% 0
     }
 }

 @media (min-width:992px) {
     .colour-c5 .colour-h3 {
         margin-top: 55px
     }

     .colour-c5 .colour-tips {
         background-position: 140% 0
     }
 }

 @media (min-width:1200px) {
     .colour-c5 .colour-tips {
         background-position: 100% 0
     }
 }

 .colour-c6 .colour-h3 {
     color: #7cd5b4
 }

 .colour-c6 .colour-h3.n1 {
     padding-left: 37px
 }

 .colour-c6 .colour-h3.n1 img {
     top: 1px;
     height: 27px
 }

 .colour-c6 .colour-h3.n2 {
     padding-left: 42px
 }

 .colour-c6 .colour-h3.n2 img {
     top: 5px;
     height: 23px
 }

 .colour-c6 .colour-h3.n3 {
     padding-left: 40px
 }

 .colour-c6 .colour-h3.n3 img {
     top: 1px;
     height: 29px
 }

 .colour-c6 .colour-tips {
     background-image: url(https://assets-cdn.lanqb.com/topicsv3/colour/c6-img.png)
 }

 @media (min-width:768px) {
     .colour-c6 .colour-h3 {
         margin-top: 35px
     }

     .colour-c6 .colour-tips {
         background-position: 250% 50%
     }
 }

 @media (min-width:992px) {
     .colour-c6 .colour-h3 {
         margin-top: 55px
     }

     .colour-c6 .colour-tips {
         background-position: 140% 50%
     }
 }

 @media (min-width:1200px) {
     .colour-c6 .colour-tips {
         background-position: 100% 50%
     }
 }

 .colour-c7 .colour-h2 {
     margin-bottom: 38px
 }

 .colour-c7 .colour-h3 {
     margin-bottom: 16px;
     color: #e096dd
 }

 .colour-c7 .colour-h3.n1 {
     padding-left: 38px
 }

 .colour-c7 .colour-h3.n1 img {
     top: 5px;
     height: 23px
 }

 .colour-c7 .colour-h3.n2 {
     padding-left: 37px
 }

 .colour-c7 .colour-h3.n2 img {
     top: 2px;
     height: 28px
 }

 .colour-c7 .colour5-list li {
     padding-bottom: 40px
 }

 .colour-c7 .colour5-item em {
     position: absolute;
     top: 0;
     right: 15px;
     z-index: 2;
     padding: 0 7px;
     line-height: 29px;
     color: #fff;
     background-color: #75caff;
     -webkit-border-radius: 0 0 10px 10px;
     border-radius: 0 0 10px 10px
 }

 .colour-c7 .colour7-list2 a {
     position: relative;
     display: block;
     width: 100%;
     height: 268px;
     overflow: hidden;
     cursor: pointer
 }

 .colour-c7 .colour7-list2 a img {
     position: absolute;
     top: 0;
     left: 50%;
     width: 1180px;
     height: 100%;
     margin-left: -590px;
     -ms-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     text-decoration-skip: objects
 }

 .colour-c7 .colour7-list2 a:hover img {
     filter: brightness(.95)
 }

 @media (min-width:768px) {
     .colour-c7 .colour5-item em {
         font-size: 14px
     }
 }

 @media (min-width:992px) {
     .colour-c7 .colour5-list {
         margin-bottom: 18px
     }

     .colour-c7 .colour5-item em {
         font-size: 16px
     }

 }

 @media (min-width:1200px) {
     .colour-c7 .colour5-item em {
         font-size: 18px
     }
 }

 .c8 {
     box-sizing: border-box;
 }

 .colour-c8 .colour-h2 {
     margin-bottom: 46px
 }

 .colour-c8 .colour-h2 h3 {
     position: relative;
     padding-top: 14px;
     padding-bottom: 25px;
     font-family: arial;
     font-size: 24px;
     line-height: 30px;
     text-transform: uppercase
 }

 .colour-c8 .colour-h2 h3:after {
     position: absolute;
     bottom: 0;
     left: 50%;
     width: 70px;
     height: 2px;
     margin-left: -35px;
     background-color: #333;
     content: ''
 }

 .topics-more {
     position: relative
 }

 .topics-more .swiper-slide {
     width: 180px
 }

 .topics-more .topics-more-item {
     position: relative;
     display: block;
     width: 180px;
     height: 180px;
     background-color: #fff;
     cursor: pointer
 }

 .topics-more .topics-more-item img {
     width: 100%;
     height: 100%;
     -ms-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     text-decoration-skip: objects
 }

 .topics-more .topics-more-item span {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     padding: 11px 14px;
     font-size: 18px;
     line-height: 24px;
     color: #fff;
     background-color: #D29EFF
 }

 .topics-more .topics-more-item span .iconfont {
     float: right;
     display: inline-block;
     font-size: 24px;
     line-height: 24px;
     vertical-align: top
 }

 .topics-more .topics-more-item.none {
     cursor: default
 }

 .topics-more .topics-more-item:hover img {
     -webkit-filter: brightness(.8);
     filter: brightness(.8)
 }

 .topics-more .topics-more-page {
     position: absolute;
     z-index: 2;
     width: 46px;
     height: 46px;
     text-align: center;
     color: #9b9b9b;
     cursor: pointer;
     opacity: 1;
     -ms-user-select: none;
     -o-user-select: none;
     -webkit-user-select: none;
     user-select: none;
     -ms-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     text-decoration-skip: objects
 }

 .topics-more .topics-more-page .iconfont {
     display: inline-block;
     font-size: 44px;
     line-height: 46px;
     vertical-align: middle
 }

 .topics-more .topics-more-page:hover {
     color: #333
 }

 .topics-more .topics-more-page.swiper-button-disabled {
     color: #9b9b9b;
     cursor: default
 }

 @media (min-width:768px) {
     .topics-more .topics-more-page {
         bottom: -52px
     }

     .topics-more .topics-more-page.prev {
         left: 0
     }

     .topics-more .topics-more-page.next {
         right: 0
     }
 }

 @media (min-width:1200px) {
     .topics-more .topics-more-page {
         bottom: 67px
     }

     .topics-more .topics-more-page.prev {
         left: -100px
     }

     .topics-more .topics-more-page.next {
         right: -100px
     }
 }

 /* 个人添加样式 */

 .schoolhome .sc-p3 .sc3-list li {
     padding: 26px 10px 0;
 }

 .schoolhome .sc-p3 .sc3-item:hover .sc3-des {
     background: #D29EFF;
 }

 .schoolhome .sc-p3 .sc3-item:hover .sc3-des h4 {
     opacity: 1;
     color: #fff;
 }

 .colour-c2.newsec {
     padding-top: 0px;
     margin-top: -26px;
 }

 .colour-c2 .colour-h2 h2 {
     margin-top: 0;
 }
 .littlecontent {
     color: #FFFFFF;
     font-size: 14px;
     opacity: 0.3;
     position: absolute;
     bottom: 19px;
     left: 15px;
 }

 /* 公共样式 */
 .des .iconfont {
     color: #944AD3;
 }

 .mask1 {
    background-color: rgba(40, 9, 27, 0.4);
    opacity: 0;
}

 .des {
     display: block;
     color: #333;
     background-color: #FBF6FF;
     white-space: nowrap;
     -ms-transition: all .2s ease-in-out;
     -o-transition: all .2s ease-in-out;
     -webkit-transition: all .2s ease-in-out;
     transition: all .2s ease-in-out;
     text-decoration-skip: objects
 }
 .hot-mjc .des {
    text-align: center;
 }

 .mvmore .des-text {
     width: auto;
 }
 .des-text {
    width: 86%;
    white-space: normal; 
    margin-left: 5.8%;
}
 .list-mv {
    box-shadow: 0 1px 2px rgba(0,0,0,0.15); 
    transition: box-shadow 0.3s ease-in-out;
    /* width: 266px; */
 }
 .list-mv .des {
    height:85px;
    font-size:16px;
    font-family:PingFang-SC-Regular;
    font-weight:400;
    padding-top: 13px;
    color:rgba(51,51,51,1);
 }
 .list-mv:hover .mask1{
    opacity: 1;
 }
 .list-mv:hover {
     /* box-shadow: -1px -1px 1px rgba(0,0,0,0.3); */
     box-shadow: 0 5px 15px rgba(0,0,0,0.3);
 }
 .list-mv:hover .mask1 .iconfont {
    font-size: 60px;
    line-height: 1;
    color: #fff;
    vertical-align: middle;
 }
 .list-mv:hover .des {
    background:rgba(210,158,255,1);
    color: #fff;
 }
 .list-mv .mask1:before {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: '';
}
.colour-c2 h2.book-title {
    margin-top: 40px;
}
 @media (min-width:768px) {
     .little-pic {
         width: 199px;
         height: 60px;
     }

     .des {
         padding: 13.44px 0;
         font-size: 16px;
     }
 }

 @media (min-width:992px) {
     .little-pic {
         width: 256px;
         height: 78px;
     }

     .des {
         padding: 17.3599px 0;
         font-size: 20px
     }
 }

 @media (min-width:1200px) {
     .little-pic {
         width: 311px;
         height: 95px;
     }

     
     .c3-list li {
        /* display: flex; */

     }

     .des {
         padding: 21px 0;
     }
    

 }
 .c3-list {
    display: flex;
    flex: 1 1 22.711864%;
    justify-content: space-between;
    padding-top: 24px;
}
 /* c2样式 */
 .c2 {
     background: url(https://assets-cdn.lanqb.com/lightshadow/c2-bg.png) no-repeat center center;
     background-size: 100% 100%;
     height: 1332px;
     
 }
 .colour-c2 {
    box-sizing: border-box;
 }

 .colour2-list {
     display: flex;
     flex: 1 1 22.711864%;
     justify-content: space-between;
     padding-top: 14px;
 }

 .colour2-list li {
     /* border: 1px #333 solid; */
 }

 .colour-c2 .little-logo {
    margin-right: 11px;
    height: 36px;
 }
 .colour-c2 h2 {
     position: relative;
     font-size: 30px;
     font-family: PingFang-SC-Medium;
     font-weight: 500;
     color: rgba(51, 51, 51, 1);
     line-height: 30px;
     margin-top: 24px;
     /* height: 30px; */
 }

 .colour-c2 h2 em {
     padding-left: 20px;
 }

 .c3-item-content {
     /* width: 266px;
     height: 200px; */
     text-align: center;
     cursor: pointer;
 }
 .item-content {
     position: relative;
 }
 .c3-item-content img {
     width: 100%;
     height: 100%;
 }

 .c3-item-content .c3-des {
     height: 85px;
     text-align: center;
 }

 /* c3样式 */
.c3 {
    background: url(https://assets-cdn.lanqb.com/lightshadow/c3-bg.png) no-repeat center center;
    background-size: 100% 100%;
    height: 1025px;
    padding-top: 58px;
}
 /* c4样式 */
 .c4 {
    background: url(https://assets-cdn.lanqb.com/lightshadow/c4-bg.png) no-repeat center center;
    background-size: 100% 100%;
    height: 1025px;
    padding-top: 58px;
    margin-top: -30px;
}
 /* c5样式 */
 .c5 {
    background: url(https://assets-cdn.lanqb.com/lightshadow/c5-bg.png) no-repeat center center;
    background-size: 100% 100%;
    height: 1025px;
    padding-top: 58px;
    margin-top: -30px;
}
/* 更多主题 */
/* .colour-c8 .iconfont{
   color: #9B9B9B;
} */
.c8 {
    height: 527px;
    background: url(https://assets-cdn.lanqb.com/lightshadow/c8-bg.png) no-repeat center center;
    background-size: 100% 100%;
    padding-top: 47px;
}
.c8 .colour-h2 {
    margin-bottom: 60px;
}
 @media (min-width:768px) {
     .c2 {
         padding-top: 6px;
         margin-top: 46px;
     }
 }

 @media (min-width:992px) {
     .c2 {
         padding-top: 10px;
         margin-top: 60px;
     }
 }

 @media (min-width:1200px) {
     .c2 {
         padding-top: 13px;
         margin-top: 70px;
     }

     .colour2-item .des {
        padding: 13px 0;
     }
     .schoolhome .sc-p3 {
         padding-top: 0px;
     }

     .colour-c2 h2 {}
 }