@charset "UTF-8";

  @font-face{font-family: 'itc';src: url('../font/AVGARDM.TTF');font-weight: normal;font-style: normal;}
  *{padding: 0;margin: 0;list-style: none;text-decoration: none;box-sizing: border-box;letter-spacing: 1px;}
  img{display: block;width: 100%;}
  h1,h2,h3,h4,h5,h6{font-weight: normal}
  input,button{outline: none;border: none;}
  .wid{width: 100%;}
  .ine-wid{width: 1500px;margin: 0 auto}
  .flex{display: flex;justify-content: center;align-items: center;}
  .flex-sb{display: flex;justify-content: space-between;align-items: center;}
  svg{width: 14px;fill: #afafaf;}
  video{width: 100%;border-color: transparent;outline-color: transparent;border-radius: 5px;}
  

/* header nav */
  header{width: 100%;}
  header .top{margin: 0 auto;height: 100px;}
  header .top>a{display: block;width: 150px;}
  header .top>a>svg{width: 100%;}
  header .top nav li{padding: 4px 10px;font-size: 15px;flex-shrink: 0;margin: 0 4px;}
  header .top nav li:not(.meb):hover{color: #c8161d;}
  header .top nav{margin-left: auto;}
  .sign-up,.login{border: 1px solid #bbb;border-radius: 5px;padding: 4px 10px;font-size: 15px;flex-shrink: 0;margin: 0 4px;}
  .login{background: #c8161d;border-color: #c8161d}
  .login a{color: #fff;}
  .login a svg path{fill: #fff;}
  header .top li>a>span{font-size: 14px;}
  header .top nav a{color: #555;}
  header .top nav a svg{vertical-align: -2px;}
  i.iconfont{font-size: 28px;font-weight: 600;display: none;color: #444}
  a.icon-code{display: none;}

/* banner */
  .banner{position: relative;overflow: hidden;}
  .banner .banner-txt{position: absolute;left: 50%;transform: translate(-50%);z-index: 100;flex-direction: column;align-items: flex-start;}
  .banner .banner-txt h2{font-size: 65px;color: #fff;font-weight: 300;}
  .banner .banner-txt p{font-size: 36px;color: #eee;font-weight: 300;margin-top: 1.2%;white-space: pre-line;}
  .banner .banner-txt a{width: 200px;height: 42px;color: #fff;margin-top: 1%;font-size: 13px;}
  .banner .banner-txt .ban-login{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap; width: 330px;margin-top: 1.6%;}
  .banner .banner-txt .registered,.banner .banner-txt .login{width: 48%;border-radius: 6px;}
  .banner .banner-txt .registered{background: #4ca1d6;}
  .banner .banner-txt .login{background: #c8161d;}
  .banner .banner-txt .forget-pwd{width: 100%;display: flex;justify-content: flex-end;align-items: center;height: auto;margin-top: 3%;color: #b5e3ff}
  .banner .banner-txt .forget-pwd span{width: 18px;height: 18px;border-radius: 50%;background: #4ca1d6;margin-left: 2%;}
/* main content */
  .main-cont .main-txt{margin: 0% auto;align-items: flex-start;padding: 3% 0;}
  .main-cont .second,.main-cont .fourth{background: #f7f7f7;}
  .main-cont .second h4{font-size: 40px;color: #444;font-weight: normal;text-align: center;margin: 0 0 3%}
  .main-cont .second a{display: block;width: 75%;margin: 0 auto;}

  .main-cont .main-txt.third{align-items: center;}
  .main-cont .main-txt.third header{margin: 0 auto 3%}
  .main-cont .main-txt.third header img{width: 40%;display: block;margin: 0 auto;}
  .main-cont .main-txt.third h3,.main-cont .main-txt.third p{color: #444;text-align: center;}
  .main-cont .main-txt.third h3{font-size: 42px;margin-bottom: 10px;}
  .main-cont .main-txt.third p{font-size: 40px;text-transform: uppercase;font-family: 'itc';font-weight: 600;}
  .main-cont .main-txt.third .book-items{align-items: flex-start;}
  .main-cont .main-txt.third .book-list{flex-shrink: 0;width: 19%;}
  .main-cont .main-txt.third .bl-cont{margin: 1.5rem 0;}
  .main-cont .main-txt.third .bl-cont h5{color: #444;}
  .main-cont .main-txt.third .bl-cont h5{font-size: 18px;margin-bottom: 2%}
  .main-cont .main-txt.third .bl-cont span{font-size: 14px;color: #999;}

  .main-cont .main-txt.fourth{padding-top: 0;}
  .main-cont .main-txt.fourth .video-hd{justify-content: space-between;;margin-bottom: 3%;position: relative;}
  .main-cont .main-txt.fourth .video-hd h3{font-size: 24px;color: #444;padding-top: 1%;}
  .main-cont .main-txt.fourth .video-hd h3:before{content:'';position: absolute;width: 100%;height: 25px;background: #97aacb;left: 0;bottom: 0;z-index: -1;}
  .main-cont .main-txt.fourth .video-hd a{padding: 12px; background: #ededed;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;font-size: 14px;color: #8b8b8b;position: absolute;top: 0;right: 0;}
  .main-cont .main-txt.fourth .video-hd a small{width: 100%;display: block;text-align: center;}
  .main-cont .main-txt.fourth .video-hd a span{display: block;width: 110px;margin-top: 10px;}
  .main-cont .main-txt.fourth .top-video{justify-content: flex-start;align-items: flex-start;}
  .main-cont .main-txt.fourth .left-video{width: 30%;position: relative;margin-right: 30px;border-radius: 5px;overflow: hidden;}
  .main-cont .main-txt.fourth .left-video>small{position: absolute;right: 10px;top: 10px;padding: 4px 10px;background: linear-gradient(to right, #ff791d, #fbc605);border-radius: 5px;color: #fff;font-size: 12px;}
  time{position: absolute;right: 10px;bottom: 10px;background: rgba(0,0,0,.8);padding: 4px 8px;border-radius: 20px;color: #fff;font-weight: 600;font-size: 12px;}
  .main-cont .main-txt.fourth .right-cont h5{font-size: 18px;font-weight: 500;color: #222;margin-bottom: 10px;}
  .main-cont .main-txt.fourth .right-cont p{font-size: 14px;color: #444;margin: 6px 0;}
  .main-cont .main-txt.fourth .right-cont p span{color: #aaa;}
  .main-cont .main-txt.fourth .other-video{margin: 3% 0;}
  .main-cont .main-txt.fourth .other-video h4{margin: 1% 0; font-size: 18px; color: #444;font-weight: 400;}
  .main-cont .main-txt.fourth .other-video h4>span{font-family: 'itc';text-transform: uppercase;}
  .main-cont .main-txt.fourth .other-video h4 a{font-size: 14px;color: #666;margin-left: 10px;}
  .main-cont .main-txt.fourth .other-video h4 a span{font-size: 12px;vertical-align: 2px;font-weight: 600;}
  .main-cont .main-txt.fourth .other-video h4 a svg{vertical-align: -1px;margin-left: -6px;fill: #444;width: 12px;}
  .main-cont .main-txt.fourth .video-pic{position: relative;border-radius: 5px;overflow: hidden;}
  .main-cont .main-txt.fourth .nv-items{align-items: flex-start;}
  .main-cont .main-txt.fourth .nv-list{width: 24%;flex-shrink: 0;}
  .main-cont .main-txt.fourth .nv-list p{margin: 13px 0;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;} 

  .contact_form{width:100%;}
  .contact_form {width: 100%;background-image: url(../images/contact_bg.png);background-repeat: no-repeat;background-size:cover;background-position:center}
  .contact_boc {padding: 60px 0;margin: auto;text-align: center;}
  .contact_boc h2 {font-size: 24px;color: #fff;font-weight: normal;}
  .contact_boc p {font-size: 17px;line-height: 25px;color: #fff;text-align: center;margin: auto;margin-bottom: 30px;}
  ul.contact{width:100%;margin-top: 3%;}
  ul.contact li{text-align:left;color:#444;font-size:15px;margin: 4px 0;}

/* form */
  .main-cont .meassage{margin: 0% auto;align-items: flex-start;padding: 3% 0 0;}
  .main-cont .meassage .msg-left,.main-cont .meassage form{/*width: 46%;*/margin: 2% 0}
  .main-cont .meassage .msg-left h3{font-size: 18px;font-weight: unset;color: #333;}
  p.country,.main-cont .meassage .msg-left a span{font-size: 15px;margin: 0 0 2% 0;color: #666;}
  p.country{margin-bottom: 0;}
  p.country span{display: block;color: #444;font-size: 15px;}
  /* .main-cont .meassage .msg-left a{display: block;width: 50%;} */
  .main-cont .meassage .msg-left a img{width: 100%;}
  .main-cont .meassage form{flex-direction: column;align-items: flex-start;}
  a.ewm{width: 110px;display: block;margin-bottom: 3%;}
  a.ewm span{color: #555;text-align: center;display: inline-block;width: 100%;font-size: 14px;}
  .main-cont .meassage form>div{width: 100%;margin: 3% 0;}
  .main-cont .meassage form label{font-size: 16px;color: #666;text-align: justify;width: 20%;}
  .main-cont .meassage form input{border: 1px solid #888;border-radius: 5px;width: 80%;padding: 0 1.6%;}
  .main-cont .meassage form button{margin-top: 2%; width: 40%;line-height: 2rem;border-radius: 5px;margin-left: 20%;background: #e5521e;color: #fff;}

/* footer */
  footer{background: #292b33;padding: 1rem 0}
  footer .footer{justify-content: flex-start;}
  footer .footer img{width: 300px;}
  footer .footer p{margin-left: 30px;color: #fff;font-size: 14px;}

/* media */

@media screen and (max-width: 1550px){

  .ine-wid,header .top{width: 92%;}

}
@media screen and (max-width: 1350px){

  .banner .banner-txt h2{font-size: 48px;}
  .banner .banner-txt p{font-size: 30px;}
  .main-cont .second h4{font-size: 32px;}
  .main-cont .second a{width: 70%;}

}
@media screen and (max-width: 1230px){

  /* .banner .banner-txt{width: 80%;} */
  .main-cont .meassage .msg-left, .main-cont .meassage form{width: auto;}

}
@media screen and (max-width: 1200px){

  .main-cont .main-txt.third .left {width: 100%;}
  .main-cont .main-txt.third .right {width: 64%;margin: 0 auto}

}
@media screen and (max-width: 1025px){

  .main-cont .main-txt .left,.main-cont .meassage .msg-left, .main-cont .meassage form {width: 100%;}
  .main-cont .main-txt .right {width: 60% !important;margin: 0 auto;}
  .main-cont .meassage {flex-direction: column;}

  header .top nav li{padding: 4px 8px;}
  .banner>a{overflow: hidden;}
  .banner>a>img{width: 140%;margin-left: -20%;}
  .banner .banner-txt h2{font-size: 40px;}
  .banner .banner-txt p{font-size: 24px;}
  .banner .banner-txt .ban-login{width: 220px;}
  .banner .banner-txt a{height: 32px;}
  .main-cont .second h4{font-size: 28px;}
  .main-cont .second a{width: 85%;}
  .main-cont .main-txt.third header img{width: 48%;}

  .main-cont .main-txt.fourth .top-video,.main-cont .main-txt.fourth .nv-items{flex-wrap: wrap;}
  .main-cont .main-txt.fourth .nv-list{width: 49%;margin-top: 3%;}
  .main-cont .main-txt.fourth .right-cont{width: 100%;margin-top: 3%;}
  .main-cont .main-txt.fourth .other-video h4{font-size: 21px;}
  .main-cont .main-txt.fourth .left-video{width: 70%;margin-right: 0;}
  
  .main-cont .main-txt.third .book-items{flex-wrap: wrap;justify-content: unset;}
  .main-cont .main-txt.third .book-list{width: 32%;margin-bottom: 3%;}
  .main-cont .main-txt.third .book-list:not(:nth-child(3n)){margin-right: 2%;}

  header .top{height: 70px;}
  header .top>a{width: 130px;}
  i.iconfont{display: block;}
  header{position: relative;}
  header nav.active{position: absolute;top: 100%;left: 0;z-index: 160;flex-direction: column;background: #fff;width: 100%;align-items: flex-start;padding: 2% 0;display: none;}
  header nav.active li{padding: 0;width: 92%;margin: 0 auto;margin-bottom: 2%;margin-bottom: 1.5%;}
  /* header nav.active li:nth-child(1),header nav.flex-sb li:nth-child(7){display: none;} */
  header nav.active li.meb{width: 100px;padding: 4px 8px;text-align: center;margin-left: 4%;}
  .icon-menu{margin-left: auto;}
  

}
@media screen and (max-width: 960px){

  /* .banner .banner-txt {width: 100%;} */
  .main-cont .main-txt .right{width: 80%!important;}
}
@media screen and (max-width: 800px){

  /* header .top a {width: 22%;} */
  .banner .banner-txt h2 {font-size: 36px;}
  .banner .banner-txt p {font-size: 28px;}
  .main-cont .main-txt .right{width: 100%!important;}
  /* .main-cont .main-txt {padding: 6% 0;} */
  footer .footer{flex-wrap: wrap;justify-content: center;}
  footer .footer p{width: 100%;margin-top: 2%;margin-left: 0;text-align: center;}
  .top-meb,.banner .banner-txt .forget-pwd{display: none;}
}
@media screen and (max-width: 700px){

  .banner .banner-txt h2{font-size: 30px;}
  .banner .banner-txt p{font-size: 20px;}
  .banner .banner-txt a{font-size: 12px}
  .main-cont .second h4,.main-cont .main-txt.fourth .video-hd h3{font-size: 22px;}
  .main-cont .second a{width: 100%;}
  .vewm{display: none;}
  .main-cont .main-txt.fourth .video-hd a.icon-code{display: block;background: linear-gradient(to right, #ff791d, #fbc605);color: #fff;border-bottom-left-radius: 8px;border-bottom-right-radius: 8px;padding: 8px;}
  .main-cont .main-txt.fourth .video-hd a.icon-code:before{font-size: 18px;}
  .main-cont .main-txt.fourth .left-video{width: 80%;}
  .main-cont .main-txt.fourth .video-hd h3{margin-top: 3%;}
  .main-cont .main-txt.fourth .left-video,.main-cont .main-txt.fourth .nv-list{width: 100%;}
  .main-cont .main-txt.third header img{width: 60%;margin-top: 3%;}
}
/* @media screen and (max-width: 600px){

  .banner .banner-txt h2 {font-size: 30px;}
  .banner .banner-txt p {font-size: 21px;}
} */
@media screen and (max-width: 600px){

  .banner .banner-txt h2 {font-size: 26px;}
  .banner .banner-txt p {font-size: 18px;}
}
@media screen and (max-width: 550px){

  .banner .banner-txt h2{font-size: 32px;margin-bottom: 1%;}
  .banner .banner-txt p{font-size: 20px;text-align: left;}
  .banner .banner-txt .ban-login{width: 240px;margin-top: 4%;}
  .main-cont .second h4, .main-cont .main-txt.fourth .video-hd h3{font-size: 16px;}
  .main-cont .main-txt.third .book-list{width: 49%;}
  .main-cont .main-txt.third .book-list:not(:nth-child(3n)){margin-right: 0;}
  .main-cont .main-txt.third .book-items{justify-content: space-between;}
  .banner .banner-txt{left: 65%;}
  a.ewm{margin: 0 auto 3%;}
}
@media screen and (max-width: 480px){

  .main-cont .meassage form label {width: 24%;}
  .main-cont .meassage form input {width: 76%;}
  .main-cont .meassage form button {margin-left: 24%;}
  .main-cont .meassage .msg-left a img {width: 70%;}

  .banner>a>img{width: 240%;margin-left: 0%;}
  /* .banner .banner-txt{align-items: center;} */
}
@media screen and (max-width: 440px){

  /* .banner .banner-txt h2 {font-size: 23px;margin-bottom: 3%;}
  .banner .banner-txt p{white-space: unset;text-align: center;} */
  .banner .banner-txt .ban-login{margin-top: 6%;}
  .main-cont .main-txt.third header img{width: 100%;margin-top: 3%;}
  .banner .banner-txt{left: 62%;}
}
@media screen and (max-width: 400px){

  .main-cont .main-txt .left h1 {font-size: 22px;}
  .main-cont .meassage form label {width: 30%;}
  .main-cont .meassage form input {width: 70%;}
  .main-cont .meassage form button {margin-left: 30%;}
  .main-cont .main-txt.third .book-list{width: 100%;}
  
}
@media screen and (max-width: 380px){

  /* .banner .banner-txt h2 {font-size: 21px;}
  .banner .banner-txt p {font-size: 16px;} */
  .main-cont .main-txt .left h1 {font-size: 20px;}
  .banner .banner-txt{left: 60%;}
}