@charset "utf-8";

#banner{width:100%; height: 470px; background: #fafafa no-repeat center/cover;}
#banner .wrap{position: relative; top: 41.6%; left: -10px; font-size: 4.2rem; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei'; color: #2b2b2b;}
#banner .wrap>span{display: inline-block;}


#space{height: 100px;}

@media (max-width:1279px){ /*mp*/
  #mp-head{background: #1f53be; height: 80px;}
  #space{height: 120px;}
}


/* 鏍忕洰鑿滃崟 */
#child{background: none; padding: 0; position: relative; top: -40px;}
#child .wrap>a{width: 25%;}

@media (max-width:1279px){ /*mp*/
  #banner{display: none;}

  #child .wrap{height: 48px;}
  #child .wrap>a{line-height: 47px; font-size: 1.3rem;}
  #child .wrap>a::after{height: 1.3rem; top: 17px;}
}


/* 钀ラ攢鍖哄煙 */
#videos{padding: 30px 0 130px 0;}
#videos .wrap>.tit{font-size: 3.9rem; color: #2b2b2b; font-family: 'Microsoft Jhenghei', 'Microsoft YaHei';}
#videos .wrap>.tit-en{color: #bbb; font-size: 1.5rem; font-family: 'Montserrat'; margin-top: 12px;}


#videos .list{margin-top: 60px; display: flex; flex-wrap: wrap;}
#videos .list>a{display: block; width: calc((100% - 100px)/3); margin: 0 50px 50px 0; transition: all .35s; position: relative; top: 0;}
#videos .list>a:hover{top: -8px; background: #f6f7fb;}
#videos .list>a:nth-child(3n){margin: 0 0 50px 0;}
#videos .list>a .img{height: 0; padding-bottom: 40%; background: #eee no-repeat center/cover; position: relative;}
#videos .list>a .tit{font-size: 2.2rem; font-weight: 300; color: #2e2d3c; padding: 25px; line-height: 1.3; height: 32px;}
#videos .list>a .info{margin-top: 40px; border-top: 1px solid #eee; padding: 30px 25px 35px 25px; display: flex; justify-content: space-between; font-size: 1.5rem; color: #93abc3;}
#videos .list>a .info .counts::before{content: '\e64e'; font-family: 'iconfont'; display: inline-block; margin-right: 8px;}


#play{position: fixed; width: 100%; height: 100%; background: rgba(0,0,0, .8); z-index: 99999; left: 0; top: 0; display: none;}
#play .v{width: 760px; height: 600px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;}
#play .v i{position: absolute; right: -50px; top: -50px; color: #fff; font-size: 5rem; cursor: pointer; transition: all .35s;}
#play .v i:hover{transform: rotate(90deg);}

@media (max-width:1679px){ /*1440*/
  #videos .wrap>.tit{font-size: 3.8rem; }
  #videos .wrap>.tit-en{font-size: 1.4rem;}

  #videos .list>a{width: calc((100% - 90px)/3); margin: 0 45px 45px 0;}
  #videos .list>a .tit{font-size: 2rem;}
  #videos .list>a .info{font-size: 1.4rem;}
}
@media (max-width:1439px){ /*1366*/
  #banner{height: 450px;}

  #videos{padding: 20px 0 120px 0;}
  #videos .list{margin-top: 50px;}

  #videos .list>a{width: calc((100% - 80px)/3); margin: 0 40px 40px 0;}
  #videos .list>a .tit{font-size: 1.8rem;}
  #videos .list>a .info{margin-top: 30px; font-size: 1.3rem;}
}
@media (max-width:1365px){ /*1280*/
  #videos .list>a .tit{font-size: 1.7rem;}
  #videos .list>a .info{margin-top: 25px;}
}
@media (max-width:1279px){ /*mp*/
  #videos{padding: 0px 15px 60px 15px;}
  #videos .wrap>.tit{font-size: 2.4rem;}
  #videos .wrap>.tit-en{font-size: 1.2rem; margin-top: 6px;}

  #videos .list{margin-top: 40px; display: block;}
  #videos .list>a{width: 100%; margin: 0 0 15px 0;}
  #videos .list>a:hover{top: 0;}
  #videos .list>a:nth-child(3n){margin: 0 0 15px 0;}
  #videos .list>a .img{padding-bottom: 50%;}
  #videos .list>a .tit{font-size: 1.6rem; padding: 15px; height: 26px;}
  #videos .list>a .info{margin-top: 20px; padding: 15px 15px 25px 15px; font-size: 1.2rem;}
  #videos .list>a .info .counts::before{margin-right: 7px;}

  #play .v{width: 100%; height: 50%;}
  #play .v i{right: unset; top: unset; bottom: -50px; left: 50%; margin-left: -25px; font-size: 4rem;}
}