body,

h1,

h2,

h3,

h4,

p,

dl,

dd,

ul,

ol,

form,

input,

textarea,

th,

td,

select {

  margin: 0;

  padding: 0;

}



em {

  font-style: normal;

}



li {

  list-style: none;

}



a {

  text-decoration: none;

}



img {

  border: none;

  vertical-align: top;

}



table {

  border-collapse: collapse;

}



input,

textarea {

  outline: none;

}



textarea {

  resize: none;

  overflow: auto;

}



body {

  font-size: 12px;

  font-family: arial;

  background: #f5f5f5;

}



.gb {

  width: 100%;

  height: 100vh;

  display: block;

  overflow: hidden;

  background: url(https://www.y977.com/tv/images/bg.png) repeat;

  background-size: 100%;

  position: relative;

}



.cont-box {

  max-width: 1400px;

  height: auto;

  display: flex;

  overflow: hidden;

  margin: 108px auto;

}



.left-box {

  display: block;

  overflow: hidden;

  margin: 10px 20px 0 0;

  padding: 0 0 20px 50px;

  box-sizing: border-box;

  flex: 3;

}



.left-box h2 {

  font-size: 52px;

  line-height: normal;

  font-weight: bold;

  color: #000;

  display: block;

  overflow: hidden;

}



.left-box h3 span {

  width: 6px;

  height: 6px;

  background: #333;

  border-radius: 100%;

  margin: 0 10px;

  display: block;

  overflow: hidden;

}



.left-box h3 {

  font-size: 28px;

  margin: 12px 0 26px;

  line-height: normal;

  font-weight: normal;

  color: #333;

  display: block;

  overflow: hidden;

  display: flex;

  align-items: center;

}



.left-box h3 b {

  line-height: normal;

  font-weight: normal;

}



.left-box .desc {

  font-size: 14px;

  margin: 5px 0 0;

  line-height: 24px;

  font-weight: normal;

  color: #777;

  display: block;

  overflow: hidden;

}



.left-box .info {

  width: 100%;

  height: auto;

  display: flex;

  overflow: hidden;

  margin: 97px 0 0;

  align-items: center;

}



.left-box .info dt {

  width: 94px;

  display: block;

  overflow: hidden;

}



.left-box .info dt img {

  width: 100%;

  display: block;

  overflow: hidden;

  border-radius: 10px;

}



.left-box .info dd {

  margin: 0 0 0 20px;

  display: block;

  overflow: hidden;

  flex: 1;

}



.left-box .info dd h1 {

  font-size: 26px;

  font-weight: normal;

  color: #333;

  display: block;

  overflow: hidden;

  margin: 0 0 12px;

}



.left-box .info dd p {

  font-size: 12px;

  font-weight: normal;

  color: #777;

  display: block;

  overflow: hidden;

  margin: 4px 0 0;

}



.left-box .btn {

  margin: 40px 0 0;

  display: block;

  /* overflow: hidden; */

}



.left-box .btn li {

  width: auto;

  height: auto;

  float: left;

  margin: 0 32px 0 0;

}



.left-box .btn li a {

  width: 200px;

  height: 52px;

  line-height: 52px;

  font-size: 18px;

  color: #fff;

  text-align: center;

  background: #2ea2ff;

  border-radius: 100px;

  display: block;

  overflow: hidden;

  /* box-shadow: 2px 2px 4px #999999; */

}



.left-box .btn li a.ck {

  background: none;

  border: 1px solid #2ea2ff;

  color: #2ea2ff;

  background: rgba(255, 255, 255, .7);

}

.tv-box{

  margin: 46px 0 0 0px;

  flex: 4;

  display: block;

}

.tv-cont{

  display: block;

  position: relative;

  overflow: hidden;

}

.tv-cont:hover .tv-pin{

  width: 18%;

}

.tv-cont .tv-pin{

  transition: width 0.3s ease, transform 0.3s ease; /* 娣诲姞杩囨浮鏁堟灉 */

  position: absolute;

  left: 0;

  top: 0;

  width: 0%;

  height: 100%;

  overflow: hidden;

  z-index: 5;

  background: rgba(0,0,0,.5);

  display: flex;

  flex-direction: column;  /* 瀛愬厓绱犲瀭鐩存帓鍒� */

  /* justify-content: space-between; */  /* 绛夊垎瀛愬厓绱犵殑楂樺害 */

  /* height: 400px; */  /* 瀹瑰櫒鐨勯珮搴� */

  /* border: 1px solid #ccc; */

}

.tv-pin li{

  cursor: pointer;

  display: flex;

  overflow: hidden;

  flex: 1;

  align-items: center;

  font-size: 16px;

  color: #fff;

  text-align: center;

  justify-content: center;

}

.tv-pin li.active{

  background: #2ea2ff;

}



.tv-video{

  width: 100%;

  height: auto;

  display: block;

  overflow: hidden;

}

.tv-video li{

  line-height: normal;

  font-size: 0px;

  cursor: pointer;

}

.tv-video video{

  width: 100%;

}



.nav-box{

  max-width: 1400px;

  height: auto;

  display: flex;

  overflow: hidden;

  margin: auto;

  align-items: center;

  justify-content: flex-end;

  color: #888;

  font-size: 16px;

}

.nav-box a{

  padding: 20px 12px;

  font-weight: normal;

  color: #333;

}



/* 鍏充簬鎴戜滑 */

.about-box{

  max-width: 1400px;

  background: rgba(255, 255, 255, .8);

  display: block;

  overflow: hidden;

  margin: auto;

  padding: 30px;

  box-sizing: border-box;

}

.about-box h1{

  font-size: 46px;

  font-weight: normal;

  color: #000;

  height: auto;

  width: 100%;

  display: block;

  overflow: hidden;

  text-align: center;

}



.about-box h3{

  font-size: 20px;

  font-weight: normal;

  color: #f00;

  margin: 0 0 8px 0;

  height: auto;

  width: 100%;

  display: block;

  overflow: hidden;

  float: left;

}



.about-box p{

  height: auto;

  width: 100%;

  font-size: 15px;

  font-weight: normal;

  color: #333;

  line-height: 26px;

  margin: 7px 0 0;

  display: block;

  overflow: hidden;

  float: left;

}



/* 浣跨敤璇存槑 */

.manual-box{

  max-width: 1400px;

  background: rgba(255, 255, 255, .8);

  display: block;

  overflow: hidden;

  margin: auto;

  padding: 30px;

  box-sizing: border-box;

}

.manual-box h1{

  font-size: 46px;

  font-weight: normal;

  color: #000;

  height: auto;

  width: 100%;

  display: block;

  overflow: hidden;

  text-align: center;

}

.manual-box .sm-list{

  margin: 20px 0 0;

  display: block;

  overflow: hidden;

}

.manual-box .sm-list dt{

  font-size: 20px;

  font-weight: normal;

  color: #000;

  display: block;

  overflow: hidden;

  cursor: pointer;



}

.manual-box .sm-list dt::before{

  content: "";

  width: 0;

  height: 0;

  border-left: 7px solid transparent;

  border-right: 7px solid transparent;

  border-top: 7px solid #000;

  transform: rotate(-90deg);

  float: left;

  margin: 10px 12px 0 0;

}

.manual-box .sm-list dd{

  margin: 20px 0 0;

  display: block;

  overflow: hidden;

  max-width: 100%;

  display: none;

  font-size: 16px;

}
.manual-box .sm-list dd p{
  display: block;
  margin-bottom: 12px;
}

.manual-box .sm-list dd img{

  width: 70%;

  display: block;

  overflow: hidden;

}

.manual-box .sm-list.active dt::before{

  transform: rotate(0);

}

.manual-box .sm-list.active dd{

  display: block;

}



/* 鍏充簬鎴戜滑 */

.log-box{

  max-width: 1400px;

  background: rgba(255, 255, 255, .8);

  display: block;

  overflow: hidden;

  margin: auto;

  padding: 30px;

  box-sizing: border-box;

}

.log-box h1{

  font-size: 46px;

  font-weight: normal;

  color: #000;

  height: auto;

  width: 100%;

  display: block;

  overflow: hidden;

  text-align: center;

}

.log-box h3{

  font-size: 20px;

  font-weight: normal;

  color: #f00;

  margin: 0 0 8px 0;

  height: auto;

  width: 100%;

  display: block;

  overflow: hidden;

  float: left;

}



.log-box p{

  height: auto;

  width: 100%;

  font-size: 15px;

  font-weight: normal;

  color: #333;

  line-height: 26px;

  margin: 7px 0 0;

  display: block;

  overflow: hidden;

  float: left;

}

.txt-1{
  width: 100%;
  height: auto;
  position: fixed;
  bottom: 20px;
  text-align: center;
  font-size: 14px;
  line-height: 24px;
  font-weight: normal;
  color: #777;
  display: block;
  overflow: hidden;
}

@media (min-width: 1px) and (max-width:580px) {

  .nav-box{

    font-size: 14px;

    width:100%;

    justify-content: center;

    position: fixed;

    left: 0;

    bottom: 0;

    

  }

  .nav-box a{

    padding: 12px;

  }

  .cont-box {

    display: block;

    margin: 0;

    width: 100%;

    max-width: 100%;

  }



  .tv-box {

    width: 100%;

    padding: 0 20px;

    box-sizing: border-box;

  }



  .left-box {

    width: 100%;

    margin: 0;

    padding: 20px;

    box-sizing: border-box;

  }



  .left-box h2 {



    font-size: 32px;



  }



  .left-box h3 {



    font-size: 22px;



  }



  .left-box .desc {



    font-size: 14px;



    display: none;



  }



  .left-box .info {



    margin: 0;



  }



  .left-box .info dt {

    width: 78px;

  }



  .left-box .info dd {



    margin: 0 0 0 12px;



  }



  .left-box .info dd h1 {



    font-size: 20px;



    margin: 0 0 8px;



  }



  .left-box .info dd p:nth-child(2) {

    display: none;

  }



  .left-box .info dd p {



    font-size: 14px;

  }



  .left-box .btn li{

    width: 100%;

  }

  .left-box .btn li a{

    width: 100%;

  }

  .left-box .btn li:nth-last-child(1){

    display: none;

  }



  .gb {

    background-size: 400%;

    background-position: center center;

  }

  .tv-cont .tv-pin{

    width: 24%;

  }

  .tv-pin li{

    font-size: 12px;

  }





}
释义
摘要
