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

 /* nav锚点 */
 .container-colour .nav-anchor {
     position: absolute;
     top: -150px;
     left: 0;
 }




 .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 .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
     }
 }

 @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
     }
 }

 @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
     }
 }

 .topics-colour-nav {
     position: fixed;
     left: 0;
     z-index: 4;
     width: 100%;
     background: rgba(245, 245, 245, 1);
     box-shadow: 0px 0px 5px 0px rgba(29, 36, 117, 0.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: rgba(51, 51, 51, .7);
     -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: rgba(255, 255, 255, 1);
     padding: 11px 12px;
     background: rgba(198, 164, 106, 1);
 }

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

     .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: 43px
     }

     .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: 70px
     }
 }









 @media (min-width:768px) {


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

 }

 @media (min-width:992px) {


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

 }

 @media (min-width:1200px) {

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

 }

 .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
     }
 }


 .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: rgba(198, 164, 106, 1)
 }

 .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
     }
 }

 /* 个人添加样式 */

 .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;
 }

 /* 公共样式 */
 .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
 }

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






 /* c2样式 */
 .c2 {
     background: url(https://assets-cdn.lanqb.com/true-ancient/img/c2-bg.png) no-repeat center center;
     background-size: 100% 100%;
     height: 1332px;

 }

 .colour-c2 {
     box-sizing: border-box;
 }

 .colour2-list {
     display: flex;
     justify-content: space-between;
     padding-top: 35px;
 }

 .colour2-list li {
     width: 23.14%;
 }

 .colour-c2 .little-logo {
     margin-right: 11px;
     height: 36px;
     vertical-align: -.4ex;
 }




 /* content */
 /* 背景 */
 .content-wrapper {
     position: relative;
     background: url(https://assets-cdn.lanqb.com/true-ancient/img/section-bg.png) no-repeat center center;
     background-size: 1903px 7793px;
     margin-top: 70px;
     padding-top: 228px;
 }

 .part {
     padding-top: 164px;
 }

 .part1 {
     background: url(https://assets-cdn.lanqb.com/true-ancient/img/section-bg1.png) no-repeat center center;
     padding-top: 409px;
     padding-bottom: 316px;
     background-size: 100% 100%;
 }

 .part2 {
     padding-top: 0;
     margin-top: -108px;
 }

 .part3 {
     background: url(https://assets-cdn.lanqb.com/true-ancient/img/imh-n.png) no-repeat center center;
     background-size: 100% 100%;
     padding-top: 443px;
     padding-bottom: 380px;
     margin-top: -216px;
 }

 .part.part4 {
     padding-top: 0;
     margin-top: -130px;
 }

 /* 标题图片 */
 .container-colour .colour-h2 {
     position: relative;
     text-align: center;
 }



 /* 具体内容项 */
 .mycontainer-wraper {
     margin-top: 57px;
     position: relative;
 }

 .c3-list {
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
 }

 .c3-list li {
     margin-top: 25px;
     width: 22.97%;
     /* background: url(https://assets-cdn.lanqb.com/true-ancient/img/item-bg.png) no-repeat center center; */
     /* background-size: 100% 100%; */
     border: 1px solid rgba(198, 164, 106, 1);
 }

 .download .c3-list li {
     width: 48.9%;

 }

 /* 内部内容佈局 */
 .c3-item {
     position: relative;
     z-index: 1;
 }

 /* 背景 */
 .course .c3-item:after {
     content: '';
     position: absolute;
     top: -5px;
     bottom: -5px;
     left: -5px;
     right: -5px;
     background: url(https://assets-cdn.lanqb.com/true-ancient/img/item-bg.png) no-repeat center center;
     background-size: 100% 100%;
     pointer-events: none;
 }

 .download .c3-item:after {
     content: '';
     position: absolute;
     top: -5px;
     bottom: -5px;
     left: -5px;
     right: -5px;
     background: url(https://assets-cdn.lanqb.com/true-ancient/img/item-bg-down.png) no-repeat center center;
     background-size: 100% 100%;
     pointer-events: none;
 }

 .c3-item-content {
     text-align: center;
     cursor: pointer;
     position: relative;
 }

 .c3-item-content img {
     width: 100%;
 }

 /* 描述 */
 .c3-list .c3-des {
     line-height: 73px;
     text-align: center;
     font-size: 16px;
     color: rgba(51, 51, 51, 1);
     background-color: #fff;
 }

 /* hover效果 */
 .list-mv:hover .mask1 {
     opacity: 1;
 }

 .list-mv .mask1:before {
     display: inline-block;
     width: 0;
     height: 100%;
     vertical-align: middle;
     content: '';
 }


 @media (min-width:768px) {
     .little-pic {
         width: 430px;
         height: 29px;
     }

     .part1 {
         padding-top: 253px;
         padding-bottom: 195px;
     }

     .part3 {
         padding-top: 274px;
         padding-bottom: 235px;
     }

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

     .c3-list .c3-des {
         font-size: 12px;
         white-space: nowrap;
     }
 }

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

     .part1 {
         padding-top: 339px;
         padding-bottom: 262px;
     }

     .part3 {
         padding-top: 367px;
         padding-bottom: 315px;
     }

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

     .c3-list .c3-des {
         font-size: 13px;
         white-space: nowrap;
     }
 }

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



     .c8 .little-pic {
         width: 706px;
         height: 47px;
     }

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

     }

     .des {
         padding: 21px 0;
     }


 }

 /* part1 */
 .colour-c1 {
     position: relative;
     height: 530px;
     overflow: hidden;
     background: #fff1f6 url(https://assets-cdn.lanqb.com/true-ancient/img/banner-bg.png) no-repeat center center;
     background-size: 1920px;
     margin-top: 130px;
 }

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

 .colour-c1 .colour1-con {
     margin-top: 106px;
     text-align: right;
 }

 .colour-c1 .colour1-con h1 {
     display: inline-block;
     height: 235px;
     width: 59.58%;
     overflow: hidden;
     background: url(https://assets-cdn.lanqb.com/true-ancient/img/c1-h1.png) no-repeat center center;
     background-size: 100% 100%;
     text-align: left;
     text-indent: -9999px;
     margin-right: -40px;
 }

 .colour-c1 .colour1-con h3 {
     display: inline-block;
     width: 59.58%;
     height: 54px;
     font-size: 20px;
     font-weight: bold;
     line-height: 30px;
     font-size: 18px;
     margin-top: 30px;
     text-align: center;
     color: rgba(42, 23, 21, .7);
     margin-right: -40px;
 }

 .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
 }


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

     .colour-c1 .colour1-con h1 {}

     .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
     }
 }

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

     .colour-c1 .colour1-con h1 {}

     .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
     }

 }

 @media (min-width:1200px) {}

 /* part2 */
 /* 热门推荐 */
 .container-colour .part0 {
     position: absolute;
     top: 41px;
     left: 50%;
     transform: translateX(-50%);
 }

 .part0 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; */
 }

 .part0 h2 img {
     margin-right: 11px;
     width: 32px;
     vertical-align: -0.4ex;
 }

 .part0 .colour2-item {
     cursor: pointer
 }

 .colour2-item img {
     width: 100%;
 }

 /* 文字描述 */
 .colour2-item .des {
     padding: 13px 0;
     text-align: center;
 }

 .des-text {
     display: inline-block;
     width: 61.17%;
     background: url(https://assets-cdn.lanqb.com/true-ancient/img/des-text-bg.png) no-repeat center center;
     background-size: 100% 100%;
     line-height: 48px;
 }

 .des-text .arrow {
     display: inline-block;
     height: 15px;
     width: 9px;
     margin-left: 10px;
     background: url(https://assets-cdn.lanqb.com/true-ancient/img/arrow.png) no-repeat center center;
     background-size: 100% 100%;
 }

 .des-text:hover {
     background: url(https://assets-cdn.lanqb.com/true-ancient/img/des-text-bg-active.png) no-repeat center center;
     background-size: 100% 100%;
     color: #fff;
 }

 .des-text:hover .arrow {
     background: url(https://assets-cdn.lanqb.com/true-ancient/img/arrow-active.png) no-repeat center center;
     background-size: 100% 100%;
 }

 /* 更多主题 */
 /* .colour-c8 .iconfont{
   color: #9B9B9B;
} */
 .c8 {
     position: relative;
     box-sizing: border-box;
     height: 859px;
     background: url(https://assets-cdn.lanqb.com/true-ancient/img/c8-bg.png) no-repeat center center;
     background-size: 100% 100%;
     padding-top: 413px;
 }

 .c8 .colour-h2 {
     margin-bottom: 99px;
 }

 .little-title img {
     width: 25px;
     vertical-align: -.1ex;
 }

 .little-title em {
     font-weight: bold;
 }

 .little-title span {
     color: rgba(102, 102, 102, 1);
     font-size: 17px;
 }

 [v-cloak] {
     display: none;
 }

 .tail {
     position: absolute;
     /* height: 182px; */
     width: 1180px;
     top: 51px;
     left: 50%;
     transform: translate(-50%);
 }