body, p, input, h1, h2, h3, h4, h5, h6, ul, li, dl, dt, dd, form {font-size: 16px; margin: 0; padding: 0; list-style: none; vertical-align: middle; font-weight:normal; } 
ul, ul li {
    list-style: none outside none;
}
.clear{    clear: both;}

 
@keyframes tag{
  0%{transform:scale(1);}
  50%{ transform:scale(0.95); -webkit-transform:scale(0.95); -moz-transform:scale(0.95); -ms-transform:scale(0.95); -o-transform:scale(0.95); }
  100%{transform:scale(1);}
}
@keyframes tags{
    0%{transform:scale(1);}
    50%{ transform:scale(1.2); -webkit-transform:scale(1.2); -moz-transform:scale(1.2); -ms-transform:scale(1.2); -o-transform:scale(1.2); }
    100%{transform:scale(1);}
}
@keyframes tag1{
    0%{transform:scale(1.1);}
    25%{transform:scale(0.95);}
    50%{transform:scale(0.75);}
    75%{transform:scale(0.95);}
    100%{transform:scale(1.1);}
}

 

 .banner{width: 100%;}
  .banner>.pic>img{width: 100%; }
 
  .line1{width: 100%}
  .line1 .content{width: 98%;margin:0 auto;}
  .line1 .content>h2{width: 60%;margin: 20px auto 20px;font-size: 16px;text-align: center;  position: relative;} 
 .line1 .content>h2:before  {
    content: "";
    display: block;
    position: absolute;
    width: 48px;
    height: 49px;
    transform: rotate(1deg) scale(0.8);
    opacity: 0.6;
    top: -29px;
    left: -23px;
    background: url(/course/UI2019/banner33.png) no-repeat center top;
    }

  .line1 .content>h2:after{
    content: "";
    display: block;
    position: absolute;
    width: 32px;
    height: 33px;
    transform: rotate(60deg) scale(0.7);
    top: 0px;
    right: -10px;
    opacity: 0.8;
    background: url( /course/UI2019/banner44.png) no-repeat center top;
    } 

  .line1 .contentimg{width: 99%;margin:0 auto;}
  .line1 .contentimg>.imgfr{width: 48%; float: right;     animation: 2s tag linear infinite;}
  .line1 .contentimg>.imgfl{width: 48%;float: right;     animation: 2s tag linear infinite;}
  .line2{width: 100%;    margin-top: 40px;}
  .line2 .content{width: 98%;margin:0 auto;}
  .line2 .content>h2{
    width: 60%;
    margin: 20px auto 20px;
    font-size: 16px;
    text-align: center;
    font-weight: normal; 
    position: relative;
  }  
  .line2 .content>h2:before  {
    content: "";
    display: block;
    position: absolute;
    width: 48px;
    height: 49px;
    transform: rotate(80deg) scale(0.6);
    top: -7px;
    left: -23px;
    background: url(/course/UI2019/banner33.png) no-repeat center top;
    }

  .line2 .content>h2:after{
    content: "";
    display: block;
    position: absolute;
    width: 32px;
    height: 33px;
    transform: rotate(0deg) scale(0.7);
    top: -18px;
    right: -10px;
    background: url( /course/UI2019/banner44.png) no-repeat center top;
    }
  .line2  .design2_con {
    width: 100%;
    /* height: 500px; */
    margin: 50px auto;
   }
    .line2  .design2_con>ul {
    width: 98%; 
    margin: 50px auto 0;
   }
    .line2  .design2_con>ul >li{width: 32%;float: left;margin-left: 1%;}
    .d_content {
    width: 100%; 
    float: left;
    background: #FFFFFF;
    border-radius: 10px; 
    position: relative;
    top: 0;
    left: 0;
    }
.d_contenta{    background: linear-gradient(154deg,#f79ac0 0%, #ef2f3d 100%);}
.d_contentb{      background: linear-gradient(154deg,#7cd9fd 0%, #508df7 100%);}
.d_contentc{    background: linear-gradient(154deg,#c863f7 0%, #793eff 100%);}

.de2_ico {
    width: 40%;
    /* height: 113px; */
    margin: 33px auto 19px;
}
.de2_ico img {
    width: 100%;
}
.design2_con .div_word1 {
    font-size: 14px;
    /* font-weight: bold; */
    color: #fff6f6;
    text-align: center;
}
.design2_con .div_word2 {
      padding-top: 5px;
    line-height: 20px;
    color: #e4e0e0; 
    text-align: center;
    font-size: 12px;
    margin-bottom: 25px;

}
.d_content:hover{animation:dt .6s linear both;}


.design2_con>.banniu{
    width: 230px;
    height: 35px;
    line-height: 35px;
    animation: .8s tag linear infinite;
    border-radius: 30px;
    text-align: center;
    background: linear-gradient(154deg,#46c8ff 0%, #2b7afd 100%);
    color: #fff;
    margin: 30px auto;
    overflow: hidden;
    position: relative;
    -webkit-animation: .8s tag linear infinite;
}
    .design2_con>.banniu:hover{background:#954bfc}
.design2_con>.banniu>a{color: #fff;height: 35px;line-height: 35px;font-size: 16px;letter-spacing: 1px;}
.design2_con>.banniu :after {content: "";background: #d8e0fd;position: absolute;width: 230px;height: 100px;left: 0px;left: 0;top: 0;bottom: 0;opacity: 0;margin: auto;border-radius: 50%;transform: scale(1);animation: 2s btn ease-in-out infinite;}
  @keyframes btn {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
  @-webkit-keyframes btn {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
  @-moz-keyframes btn {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }

  @-o-keyframes btn {
    0% {
      transform: scale(0);
      opacity: 1;
    }
    100% {
      transform: scale(1);
      opacity: 0;
    }
  }

@-webkit-keyframes dt{from{height:100%;position:relative;top:0;left:0;}to{height:110%;position:relative;top:-2%;left:0;}}

.bannius{
  width: 222px;
  height: 35px;
  line-height: 35px;
  animation: .8s tags linear infinite;
  border-radius: 30px;
  text-align: center;
  background:linear-gradient(154deg,#46c8ff 0%, #2b7afd 100%);
  color: #fff;
  margin: 30px auto;
  overflow: hidden;
  position: relative;
  -webkit-animation: .8s tags linear infinite;
}
.bannius:hover{background:#954bfc}
.bannius>a{color: #fff;height: 35px;line-height: 35px;font-size: 16px;letter-spacing: 1px;}
.bannius :after {content: "";background: #d8e0fd;position: absolute;width: 222px;height: 100px;left: 0px;left: 0;top: 0;bottom: 0;opacity: 0;margin: auto;border-radius: 50%;transform: scale(1);animation: 2s btn ease-in-out infinite;}

.line3{width: 100%}
  .line3 .content{width: 98%;margin:0 auto;}
  .line3 .content>h2{width: 80%;margin: 20px auto 20px;font-size: 16px;text-align: center;position: relative;} 
 .line3 .content>h2:before  {
    content: "";
    display: block;
    position: absolute;
    width: 48px;
    height: 49px;
    transform: rotate(1deg) scale(0.8);
    opacity: 0.6;
    top: -29px;
    left: -23px;
    background: url(/course/UI2019/banner33.png) no-repeat center top;
    }

  .line3 .content>h2:after{
    content: "";
    display: block;
    position: absolute;
    width: 32px;
    height: 33px;
    transform: rotate(60deg) scale(0.7);
    top: 0px;
    right: -10px;
    opacity: 0.8;
    background: url( /course/UI2019/banner44.png) no-repeat center top;
    } 

.line3 .ruanjian{width: 98%;margin: 0 auto;}
.line3 .ruanjian .UL01,.line3 .ruanjian .UL01{width: 100%;}
.line3 .ruanjian .UL01 li{width:22%;float: left;margin-left: 8.6% }
/*.line3 .ruanjian .UL01 li:nth-child(1){margin-left: 0px;}*/
.line3 .ruanjian .UL01 li>img{width: 100%}
.line3 .ruanjian .UL02 li{width:20%;float: left;margin-left: 3.9% }
/*.line3 .ruanjian .UL01 li:nth-child(1){margin-left: 0px;}*/
.line3 .ruanjian .UL02 li>img{width: 100%}
.line3 .ruanjian .UL02 li {
  -webkit-animation:  3s tag linear infinite;  
  -o-animation:  3s tag linear infinite;
  animation:  3s tag linear infinite;  
 
  }

 .line3 .ruanjian .UL01 li{
  -webkit-animation:  2s tag linear infinite;  
  -o-animation:  2s tag linear infinite;
  animation:  2s tag linear infinite;  
 
  }
.ruanjian>.banniu1{
    width: 220px;
    height: 35px;
    line-height: 35px;
    animation: .8s tag linear infinite;
    border-radius: 30px;
    text-align: center;
    background: linear-gradient(149deg,#e82263 0%, #ab17d0 100%);
    color: #fff;
    margin: 30px auto;
    overflow: hidden;
    position: relative;
    -webkit-animation: .8s tag linear infinite;
}
.ruanjian>.banniu1:hover{background:#954bfc}
.ruanjian>.banniu1>a{color: #fff;height: 35px;line-height: 35px;font-size: 16px;letter-spacing: 1px;}
.ruanjian>.banniu1 :after {content: "";background: #d8e0fd;position: absolute;width: 220px;height: 100px;left: 0px;left: 0;top: 0;bottom: 0;opacity: 0;margin: auto;border-radius: 50%;transform: scale(1);animation: 2s btn ease-in-out infinite;}
 

@-webkit-keyframes float {
  0% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  25% {
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px); }
  50% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  75% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px); }
  100% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@-moz-keyframes float {
  0% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  25% {
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px); }
  50% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  75% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px); }
  100% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }
@keyframes float {
  0% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  25% {
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px); }
  50% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); }
  75% {
    -webkit-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px); }
  100% {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    -o-transform: translateY(0px);
    transform: translateY(0px); } }



  .line4{    width: 100%;  background: linear-gradient(180deg, #8041f9 0%,#ff4700 100%);   padding-top: 10px;  padding-bottom: 10px;}
  .line4 .content{width: 98%;margin:0 auto;}
  .line4 .content>h2{width: 80%;margin: 20px auto 20px;font-size: 16px;text-align: center;position: relative;color: #fff;} 
 .line4 .content>h2:before  {
    content: "";
    display: block;
    position: absolute;
    width: 32px;
    height: 33px;
    transform: rotate(1deg) scale(0.8);
    opacity: 0.6;
    top: 0px;
    left: -23px;
    background: url(/course/UI2019/banner44.png) no-repeat center top;
    }

  .line4 .content>h2:after{
    content: "";
    display: block;
    position: absolute;
    width: 48px;
    height: 49px;
    transform: scale(0.6);
    top: -17px;
    right: -17px;
    opacity: 0.8;
    background: url( /course/UI2019/banner33.png) no-repeat center top;
    } 


 
    .threeC { padding: 0.17rem; }
    .threeC ul  {
    text-align: center;
    font-size: 0; }
    .threeC ul li {
    display: inline-block;
    vertical-align: top;
}
    .threeC ul li{width: 35.2%;height: 30PX;border: 1PX solid #c7b3b8;border-radius: 30px;font-size: 14PX;color: #fff;line-height: 30PX;margin: 2% 2% 0;}
.threeC>.banniu2{
    width: 222px;
    height: 35px;
    line-height: 35px;
    animation: .8s tag linear infinite;
    border-radius: 30px;
    text-align: center;
    background:linear-gradient(154deg,#46c8ff 0%, #2b7afd 100%);
    color: #fff;
    margin: 30px auto;
    overflow: hidden;
    position: relative;
    -webkit-animation: .8s tag linear infinite;
}
.threeC>.banniu2:hover{background:#954bfc}
.threeC>.banniu2>a{color: #fff;height: 35px;line-height: 35px;font-size: 16px;letter-spacing: 1px;}
.threeC>.banniu2 :after {content: "";background: #d8e0fd;position: absolute;width: 222px;height: 100px;left: 0px;left: 0;top: 0;bottom: 0;opacity: 0;margin: auto;border-radius: 50%;transform: scale(1);animation: 2s btn ease-in-out infinite;}
 
 /*5*/

 .coursemain>.banniu3{
    width: 193px;
    height: 35px;
    line-height: 35px;
    animation: .8s tag linear infinite;
    border-radius: 30px;
    text-align: center;
    background:linear-gradient(154deg,#46c8ff 0%, #2b7afd 100%);
    color: #fff;
    margin: 30px auto 10px;
    overflow: hidden;
    position: relative;
    -webkit-animation: .8s tag linear infinite;
}
 .coursemain>.banniu3:hover{background:#954bfc}
 .coursemain>.banniu3>a{color: #fff;height: 35px;line-height: 35px;font-size: 16px;letter-spacing: 1px;}
 .coursemain>.banniu3 :after {content: "";background: #d8e0fd;position: absolute;width: 193px;height: 100px;left: 0px;left: 0;top: 0;bottom: 0;opacity: 0;margin: auto;border-radius: 50%;transform: scale(1);animation: 2s btn ease-in-out infinite;}
 
.parallax {
    background-color: transparent;
    background-attachment: fixed;
    background-position: 50% 0;
    background-repeat: no-repeat;
    overflow: hidden;
}
.editorial {
    display: block;
    width: 100%;
    height: 30px;
    margin: 0;
}
.parallax > use{
  animation: move-forever 4s linear infinite;
}
.parallax > use:nth-child(1){animation-delay:-2s}
.parallax > use:nth-child(2){animation-delay:-4s; animation-duration:5s}

@keyframes move-forever{
  0%{transform: translate(-90px , 0%)}
  100%{transform: translate(85px , 0%)} 
}

   .line5{width: 100%;padding-top: 10px;/* padding-bottom: 10px; */}
  .line5 .content{width: 98%;margin:0 auto;}
  .line5 .content>h2{width:56%;margin: 20px auto 20px;font-size: 16px;text-align: center;position: relative; } 
 .line5 .content>h2:before  {
    content: "";
    display: block;
    position: absolute;
    width: 32px;
    height: 33px;
    transform: rotate(1deg) scale(0.8);
    opacity: 0.6;
    top: 0px;
    left: -23px;
    background: url(/course/UI2019/banner44.png) no-repeat center top;
    }

  .line5 .content>h2:after{
    content: "";
    display: block;
    position: absolute;
    width: 48px;
    height: 49px;
    transform: scale(0.6);
    top: -17px;
    right: -17px;
    opacity: 0.8;
    background: url( /course/UI2019/banner33.png) no-repeat center top;
    } 
    .coursemain{background: background-image: linear-gradient(154deg, #FF9A44 0%, #FC6076 100%);background-image: linear-gradient(180deg, #5e7df1 0%,#9641f3 50%, #ff6642 100%);padding-top: 20px;/* padding-bottom: 20px */}

   .kc1 { width: 98%; margin: 0 auto; }
    .kc1 p{font-size: 15px; text-align: center; color: #fff;}
    .kc1 .kc_q{width: 98%;margin: 0px auto 10px;font-size: 12px;line-height: 20px;text-align: left;color: #dedbdb;}
    .kc1 .kctp{width: 100%;margin-bottom: 26px;}
    .kc1 .kctp>img{width: 48%;float: left;margin-left: 1%;    border-radius: 4px;    animation: 2s tag linear infinite;} 
    .kc1 .kctp>img:nth-child(2){margin-left: 2%;}


.line6{width: 100%;padding-top: 10px;padding-bottom: 10px;background: linear-gradient(0deg, #fa644c 0%, #fb9684 100%);}
  .line6 .content{width: 98%;margin:0 auto;}
  .line6 .content>h2{width:75%;margin: 20px auto 20px;font-size: 16px;text-align: center;position: relative;color: white;} 
 .line6 .content>h2:before  {
    content: "";
    display: block;
    position: absolute;
    width: 32px;
    height: 33px;
    transform: rotate(1deg) scale(0.8);
    opacity: 0.6;
    top: 0px;
    left: -23px;
    background: url(/course/UI2019/banner44.png) no-repeat center top;
    }

  .line6 .content>h2:after{
    content: "";
    display: block;
    position: absolute;
    width: 48px;
    height: 49px;
    transform: scale(0.6);
    top: -17px;
    right: -17px;
    opacity: 0.8;
    background: url( /course/UI2019/banner33.png) no-repeat center top;
    } 


     .line6>.banniu4{
    width: 193px;
    height: 35px;
    line-height: 35px;
    animation: .8s tag linear infinite;
    border-radius: 30px;
    text-align: center;
    background:linear-gradient(154deg,#46c8ff 0%, #2b7afd 100%);
    color: #fff;
    margin: 0px auto 10px;
    overflow: hidden;
    position: relative;
    -webkit-animation: .8s tag linear infinite;
}
 .line6>.banniu4:hover{background:#954bfc}
 .line6>.banniu4>a{color: #fff;height: 35px;line-height: 35px;font-size: 16px;letter-spacing: 1px;}
 .line6>.banniu4 :after {content: "";background: #d8e0fd;position: absolute;width: 193px;height: 100px;left: 0px;left: 0;top: 0;bottom: 0;opacity: 0;margin: auto;border-radius: 50%;transform: scale(1);animation: 2s btn ease-in-out infinite;}
 


/*m_two*/
.m_two{padding: 0.18rem 0;}
.twoC{width: 80%;margin: 0 auto;padding-top: 0.23rem;}
.twoC dl{ background: #1b1c5d;border-radius: 100px;margin-top: 0.18rem;}
.twoC dl dt{width: 30%; margin-right: 2%;}
.twoC dl dt>img{width:100%;margin-right: 0.06rem;}
.twoC dl dd{padding-top: 0.05rem;}
.twoC dl dd .p2{font-size: 0.13rem;line-height: 0.28rem;color: #999999;}
.twoC dl dd h3{font-size: 0.13rem;line-height: 0.21rem;color: #fff;margin-top: 0.08rem;}
.twoC dl dd .p3{font-size: 0.12rem;line-height: 0.22rem;color: #fff;}
.twoC dl dd span{width: 0.25rem;display: block;height: 0.015rem;background: #f11a4c;}
.Panniu{text-align: center;}

.c6 {
  padding-bottom: 0.88rem; 
  background-size: 100%;
  }
  .c6 .ctit {
    color: #fff;
    margin-bottom: 0.4rem; }
    .c6 .ctit span {
      color: #fff; }
  .c6 .c6_list {
    width: 60%;
    /* height: 0.7466666667rem; */
    margin: 0 auto 20px;
    height: 50px;
    }
    .c6 .c6_list li {
      float: left;
      margin-right: 5%;
      width: 20%;
      position: relative;
      box-sizing: border-box;
      text-align: center;
      opacity: .8;
     }
    .c6 .c6_list li>img{width: 100%}
      
      .c6 .c6_list li.active {
        /* color: #d93660; */
        /* background: #fff; */
        opacity: 1;
        }
        .c6 .c6_list li.active:after {
          display: block; }
  .c6 .c6_cont {
    margin-bottom: 0.6rem;     height: 142px;}
   .c6 .c6_cont div {
      display: none;
      width: 90%;
      height: 170px;
      margin: 0 auto;
      }
      .c6 .c6_cont div img {
        width: 30%;
        float: left;
        /* margin-bottom: 0.4666666667rem; */
        }
      .c6 .c6_cont div p {
        width: 65%;
        margin: 0 auto;
        font-size: 12px;
        color: #dcdcdc;
        line-height: 21px;
        float: right;
        text-align: left;
        }
        .c6 .c6_cont div p span {
          font-size: 16px;
          display: block;
          margin-bottom: 10px;
          color: #fff;
          }
      .c6 .c6_cont div:nth-child(1) {
        display: block; }


/*sss*/

  .line7{width: 100%;padding-top: 10px;padding-bottom: 10px;}
  .line7 .content{width: 98%;margin:0 auto;}
  .line7 .content>h2{width:75%;margin: 20px auto 20px;font-size: 16px;text-align: center;position: relative;} 
 .line7 .content>h2:before  {
    content: "";
    display: block;
    position: absolute;
    width: 32px;
    height: 33px;
    transform: rotate(1deg) scale(0.8);
    opacity: 0.6;
    top: 0px;
    left: -23px;
    background: url(/course/UI2019/banner44.png) no-repeat center top;
    }

  .line7 .content>h2:after{
    content: "";
    display: block;
    position: absolute;
    width: 48px;
    height: 49px;
    transform: scale(0.6);
    top: -17px;
    right: -17px;
    opacity: 0.8;
    background: url( /course/UI2019/banner33.png) no-repeat center top;
    } 


     .line7>.banniu4{
    width: 193px;
    height: 35px;
    line-height: 35px;
    animation: .8s tag linear infinite;
    border-radius: 30px;
    text-align: center;
    background:linear-gradient(149deg,#e82263 0%, #ab17d0 100%);
    color: #fff;
    margin: 30px auto 10px;
    overflow: hidden;
    position: relative;
    -webkit-animation: .8s tag linear infinite;
}
 .line7>.banniu4:hover{background:#954bfc}
 .line7>.banniu4>a{color: #fff;height: 35px;line-height: 35px;font-size: 16px;letter-spacing: 1px;}
 .line7>.banniu4 :after {content: "";background: #d8e0fd;position: absolute;width: 193px;height: 100px;left: 0px;left: 0;top: 0;bottom: 0;opacity: 0;margin: auto;border-radius: 50%;transform: scale(1);animation: 2s btn ease-in-out infinite;}
 

.c7 {
  padding-bottom: 0.88rem;
  background: #ddd;
  background-size: 100%; }
  .c7 .ctit {
    color: #fff;
    margin-bottom: 0.4rem; }
    .c7 .ctit span {
      color: #fff; }
  .c7 .c7_list {
    width: 9.4266666667rem;
    height: 0.7466666667rem;
    margin: 0 auto 0.8rem; }
    .c7 .c7_list li {
      float: left;
      margin-right: 0.0133333333rem;
      width: 1.8666666667rem;
      height: 0.7466666667rem;
      position: relative;
      box-sizing: border-box;
      text-align: center;
      border-radius: 0.3733333333rem;
      font-size: 0.3733333333rem;
      color: #fff;
      border: 0.0266666667rem solid #fff;
      line-height: 0.6666666667rem; }
      .c7 .c7_list li:after {
        content: "";
        position: absolute;
        display: none;
        width: 0;
        height: 0;
        border-style: solid;
        border-color: #fff transparent transparent transparent;
        border-width: 0.24rem 0.2rem;
        left: 50%;
        top: 0.72rem;
        margin-left: -0.24rem; }
      .c7 .c7_list li.active {
        color: #d93660;
        background: #fff; }
        .c6 .c6_list li.active:after {
          display: block; }
  .c7 .c7_cont {
    margin-bottom: 0.6rem; }
    .c7 .c7_cont div {
      display: none;
      width: 100%; }
      .c7 .c7_cont div img {
        width: 100%;
        margin-bottom: 0.4666666667rem; }
      .c7 .c7_cont div p {
        width: 8.5333333333rem;
        margin: 0 auto;
        font-size: 0.3466666667rem;
        color: #fff;
        line-height: 0.4266666667rem;
        text-align: center; }
        .c7 .c7_cont div p span {
          font-size: 0.4533333333rem;
          display: block;
          margin-bottom: 0.2rem; }
      .c7 .c7_cont div:nth-child(1) {
        display: block; }


          .line8{width: 100%;padding-top: 10px;padding-bottom: 10px;}
  .line8 .content{width: 98%;margin:0 auto;}
  .line8 .content>h2{width:75%;margin: 20px auto 20px;font-size: 16px;text-align: center;position: relative;} 
 .line8 .content>h2:before  {
    content: "";
    display: block;
    position: absolute;
    width: 32px;
    height: 33px;
    transform: rotate(1deg) scale(0.8);
    opacity: 0.6;
    top: 0px;
    left: -23px;
    background: url(/course/UI2019/banner44.png) no-repeat center top;
    }

  .line8 .content>h2:after{
    content: "";
    display: block;
    position: absolute;
    width: 48px;
    height: 49px;
    transform: scale(0.6);
    top: -17px;
    right: -17px;
    opacity: 0.8;
    background: url( /course/UI2019/banner33.png) no-repeat center top;
    } 


     .line8>.banniu5{
    width: 193px;
    height: 35px;
    line-height: 35px;
    animation: .8s tag linear infinite;
    border-radius: 30px;
    text-align: center;
    background:linear-gradient(154deg,#46c8ff 0%, #2b7afd 100%);
    color: #fff;
    margin: 30px auto 10px;
    overflow: hidden;
    position: relative;
    -webkit-animation: .8s tag linear infinite;
}
 .line8>.banniu5:hover{background:#954bfc}
 .line8>.banniu5>a{color: #fff;height: 35px;line-height: 35px;font-size: 16px;letter-spacing: 1px;}
 .line8>.banniu5 :after {content: "";background: #d8e0fd;position: absolute;width: 193px;height: 100px;left: 0px;left: 0;top: 0;bottom: 0;opacity: 0;margin: auto;border-radius: 50%;transform: scale(1);animation: 2s btn ease-in-out infinite;}
 
 .line8>.lis8{width: 100%}
  .line8>.lis8>img{width: 100%}



          .line9{width: 100%;padding-top: 10px;}
  .line9 .content{width: 98%;margin:0 auto;}
  .line9 .content>h2{width:75%;margin: 20px auto 20px;font-size: 16px;text-align: center;position: relative;} 
 .line9 .content>h2:before  {
    content: "";
    display: block;
    position: absolute;
    width: 32px;
    height: 33px;
    transform: rotate(1deg) scale(0.8);
    opacity: 0.6;
    top: 0px;
    left: -23px;
    background: url(/course/UI2019/banner44.png) no-repeat center top;
    }

  .line9 .content>h2:after{
    content: "";
    display: block;
    position: absolute;
    width: 48px;
    height: 49px;
    transform: scale(0.6);
    top: -17px;
    right: -17px;
    opacity: 0.8;
    background: url( /course/UI2019/banner33.png) no-repeat center top;
    } 
 
 .line9>.lis9{width: 100%}
  .line9>.lis9>img{width: 100%}


@media screen and (max-width: 320px){
     #kzk {   margin-top: 87px!important; }
    
}

@media screen and (min-width: 321px) and (max-width: 480px) {
    
     #kzk {   margin-top: 103px!important; } 

    }    
@media screen and (min-width: 480px) and (max-width: 768px) {
      
      #kzk {   margin-top: 112px!important; }
   

    }   


  /*澶т簬绛変簬768*/
@media screen and (min-width: 768px) {
   
      #kzk {  margin: 0 auto;  max-width: 1000px;   margin-top: 120px; } 
 

}