html,.hxs_body_b{ min-width: 1180px; }
.hxs_w1180{
  width: 1180px; margin:0 auto;
}
.hxsNav{position: fixed; width: 100%;
  height: 80px;
  background: #172835;
  opacity: 0.8; z-index: 10;
}
.hxsNav section,.hxsNav .hxs_w1180{ height: 100%; }
.hxsNav section a{ font-weight: bold; font-size: 16px; color: rgba(255,255,255,0.4); margin:0 20px;
  transition: all ease-in .3s;
}
.hxsNav section a:hover ,.hxsNav section a.active{ color: #fff; }
.banner_in{
  width: 100%; overflow: hidden;
  min-height: 100px;
}
.banner_in img{ max-width: 100%; }
.caseBox{
  background: url(../image/hxs-case-bg.jpg) no-repeat center center / cover;
}
.caseBox .hxsDesc{ line-height: 48px; padding-top: 40px; }
.containerBox footer{ background: #0E1820; 
  font-size: 14px;
  color: rgba(255,255,255,0.2);
  line-height: 24px;
}
.hxs_partner{ padding:0 156px 160px; }
.hxs_partner .title{ font-size:16px; padding-bottom: 20px; }
.hxs_partner ul{ flex-wrap: wrap; width: 100%; }
.hxs_partner ul li{ display: flex; justify-content: center; align-items: center; width: 120px; height: 60px;
  margin:20px 12px 0;
}
.hxs_partner ul li a{ display: flex; width: 100%; height: 100%;justify-content: center; align-items: center;}
.hxs_partner ul li img{ max-width: 100%; max-height: 100%; }
.fContactWay{ padding-bottom: 18px; }
.fContactWay .item{ margin-right: 20px; }
.fContactWay label{ color: rgba(255, 255, 255, 0.40); }
.fContactWay span{ color: rgba(255, 255, 255, 0.60); }
.footerBottom{ height: 64px; box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.1);
 color: rgba(255, 255, 255, 0.20);
}
.footerBottom ul li{ margin:0 4px; }
.footerBottom ul li:nth-child(2n){
  width: 1px; background: rgba(255, 255, 255, 0.20); height: 12px;
}
.footerBottom ul li:last-child{ display: none; }
.footerBottom ul a{ color: rgba(255, 255, 255, 0.2); }
.footerBottom ul a:hover{ color: rgba(255, 255, 255, 0.6);}
/* 业务介绍 */
.businessBox{ background: url(../image/hxs-business-bg.jpg) no-repeat center center / cover; }
.businessBox_in { padding:30px 0; }
.businessBox .item{ width: calc(100%/4 - 15px); min-height: 400px; overflow: hidden;
  transition: all ease-in-out 1s; opacity: 0.4
}
.businessBox .item_in{  
  z-index: 3; width: 100%; height: 100%; padding:80px 40px 20px;
  background: url(../image/hxs-business-list-bg02.png) no-repeat center center / cover;
}
.businessBox .item_in .bTitle{ padding-bottom: 20px; margin-bottom: 20px;
  font-weight: bold; box-shadow: inset 0px -1px 0px 0px rgba(255,255,255,0.1);
  font-size: 20px;
  color: #FFFFFF;
  line-height: 24px;
}
.businessBox .item .item_bg{ bottom: 0; right: 0; width: 100px; height: 100px; z-index: 4; 
  background-repeat: no-repeat; transition: all ease-in-out 0.4s; transform: translateX(50%); opacity: 0.2;
  background-size: 100% 100%;
  background-position: center center;
}
.businessBox .item:hover .item_bg{ transform: none; opacity: 0.9; }
.businessBox .item:first-child .item_bg{ background-image: url(../image/hxs-business-icon-recording-sel.png); }
.businessBox .item:nth-child(2) .item_bg{ background-image: url(../image/hxs-business-icon-behind-sel.png); }
.businessBox .item:nth-child(3) .item_bg{ background-image: url(../image/hxs-business-icon-words-sel.png); }
.businessBox .item:nth-child(4) .item_bg{ background-image: url(../image/hxs-business-icon-arranger-sel.png); }
.businessBox_in.bsShow .item{ transform: translateY(-30px); opacity: 1}
.businessBox_in.bsShow .item:nth-child(2n){ transform: translateY(30px); }

/* 联系我们 */
.contactUsBox{ background: #172835; }
.contactUsBox_in .rmapBox{ width: 680px; height: 400px; }
.contactUsBox_in .rmapBox img{ max-width: 100%; }
.contactUsBox_in .ctxtBox{ flex: 1; padding-right: 40px; }
.contactUsBox_in .ctxtBox ul{ padding-top: 20px; }
.contactUsBox_in .ctxtBox ul li{ margin-top: 20px; }
.contactUsBox_in .ctxtBox ul li label{ color: rgba(255, 255, 255, 0.40); }
.contactUsBox .hxs_w1180{ position: relative; overflow: hidden; }
.contactUsBox .hxs_w1180:after{ display: none; opacity: 0;
  position: absolute; right: 0; top: -136px; content: "";
  width: 480px; height: 240px; background: url(../image/hxs-cotact-bg-pic.png) no-repeat center center / cover;
}
/* 团队展示 */
.teamBox{ color: #fff;
  background: linear-gradient( 180deg, #192836 0%, #2D3147 34%, #482644 68%, #222B45 100%);
}
.musicTitleStyle .titleBar{ height: 25px; width: 100%; text-align: center; margin-top: 6px; }
.teamBoxList .item{ margin-top: 80px; }
.teamBoxList .item:nth-child(odd){
  flex-direction: row-reverse;
}
.teamBoxList .item .imgsBox{ width: 500px;  }
.teamBoxList .item .imgsBox .img{
 height: 280px; width: 100%; overflow: hidden;
 position: relative;
}
.teamBoxList .item .imgsBox .img .teamVideoBtn{ position: absolute; width: 100%; height: 100%; 
  display: flex; justify-content: center; align-items: center; z-index: 2; transition: all ease-in .4s;
  top: 0; left: 0; 
}
.teamBoxList .item .imgsBox .img .teamVideoBtn img{
  width: 48px; cursor: pointer;
  height: 48px;
  background: rgba(0,0,0,0.6);
  border: 1px solid #FFFFFF;
  border-radius: 100%; transform: none!important;
}
.teamBoxList .item .imgsBox .img img{ height: 100%; width: 100%; transition: all ease-in .4s; }
.teamBoxList .item .imgsBox .img:hover img{ transform: scale(1.1); }
.teamBoxList .item .imgsBox .img:hover .teamVideoBtn {transform: scale(1.1);}
.teamBoxList .item .txtBox{ flex: 1; padding-right: 40px; padding-left: 0; }
.teamBoxList .item:nth-child(odd) .txtBox{
  padding-right: 0; padding-left: 40px;
}
.teamBoxList .item .imgsBox .imgTitle{ text-align: center; color: rgba(255, 255, 255, 0.6); padding-top: 20px; font-weight: bold; }
.teamBoxList .item .txtBox .name{ font-weight: bold; font-size:20px; color:rgba(255, 235, 59, 1); padding-bottom: 20px; }
.teamBoxList .item .information{ text-align: justify; }
.teamBoxList .item .img video{ width: 100%; height: 100%; }
/* 关于我们 */
.aboutUsItem1>div{ width: 50%; }
.aboutUsItem1 .aboutUsDesc{color:#333; padding:120px 80px; line-height: 2; font-weight: bold; font-size:20px; }
.aboutUsItem2{ background: linear-gradient( 180deg, #20384A 0%, #20344A 100%); margin-bottom: 270px; padding-bottom: 208px; }
.aboutUsItem2 .item2Desc .title{ padding-bottom: 40px; }
.aboutUsSwiper{ width: 100%; height: 277px; bottom: -358px; left: 0; overflow: hidden; }
.aboutUsSwiper .swiper-container{ height: 253px; overflow: initial; }
.aboutUsSwiper .swiper-container .swiper-slide>div{ 
  overflow: hidden; width: 100%; height: 100%;
}
.aboutUsSwiper .swiper-pagination{ bottom: -30px; }
.aboutUsSwiper .swiper-pagination .swiper-pagination-bullet{ width: 20px; height: 4px; border-radius: 2px; 
  background: rgba(40,109,242,0.4); opacity: 1;
}
.aboutUsSwiper .swiper-pagination .swiper-pagination-bullet-active{
  background: #286DF2;
}
.productBox{
  background: #172835;
}
.productBox .list{
 margin-top: 40px; padding:80px 0; background: url(../image/hxs-work-video-bg.jpg) no-repeat center center / cover;
}
.productBox .list:first-child{ margin-top: 0; }
.productBox .list:nth-child(2){
  background-image: url(../image/hxs-work-muisc-bg.jpg) 
}
.productBox .list:nth-child(3){
  background-image: url(../image/hxs-work-soundtrac-bg.jpg) 
}
.productBox .list:nth-child(4){
  background-image: url(../image/hxs-work-voiceover-bg.jpg) 
}
.hxs_lgTitle .titleBox{ height: 140px; padding:10px 0; line-height: 1; }
.hxs_lgTitle .titleBox .en{  
  font-family: PoiretOne, PoiretOne;
  font-weight: 400;
  font-size: 120px;
  color: rgba(254,254,254,0.1);
  line-height: 140px;
  letter-spacing: 10px;
  text-align: justify;
  font-style: normal;
  text-align: center;
}
.hxs_lgTitle .titleBox .cn{ font-weight: bold;
  font-size: 40px; left: 50%; top: 58%; transform: translate(-50%, -50%);
  color: #FFFFFF;
  line-height: 1; 
}
.dataList{ margin-top: 40px; padding-left: 100px; height: 450px; padding-right: 40px; }
.dataList_in{ width: 100%; flex-wrap: wrap; }
.dataList_in .item{ cursor: pointer; 
  width: calc(50% - 40px); height: 90px; padding:13px 20px; 
}
.dataList_in .item .orderNumber{ width: 24px; height: 24px; display: flex; 
  justify-content: center; align-items: center; overflow: hidden;
}
.dataList_in .item .orderNumber span{
  font-weight: bold; transition: all ease-in .2s;
  font-size: 20px;
  color: rgba(255,255,255,0.6);
  line-height: 25px;
}
.dataList_in .item .orderNumber img{ width: 100%; height: 100%; overflow: hidden; 
 opacity: 1; position: absolute; left: 0; top: 0; transform: translateX(-100%);
 transition: all ease-in .3s;
}
.dataList_in .item .imgBox{
  width: 64px; margin-left: 20px;
  height: 64px;
  border-radius: 4px;
}
.dataList_in .item .imgBox .img{ position: absolute; 
  top: 0; left: 0; width: 100%; height: 100%; z-index: 2;
}
.dataList_in .item .imgBox .img img{ width: 100%; height: 100%; 
  border-radius: 4px;
}
.dataList_in .item .imgBox .imgBg{
  position: absolute; width: 100%; height: 100%; z-index: 1; 
  top: 0px; right: -20px; padding:5px;
}
.dataList_in .item .imgBox .imgBg img{
  width: 100%; height: 100%; border-radius: 100%;
}
.dataList_in .item .txtBox{padding-left: 40px; flex: 1;
  overflow: hidden;
}
.dataList_in .item .txtBox .name{
  font-size: 16px; padding-bottom: 10px;
  color: #FFFFFF;
  line-height: 24px;
}
.dataList_in .item .txtBox .msg{
  font-size: 12px;
  color: rgba(255,255,255,0.4);
  line-height: 20px;
}
.dataList_in .item .txtBox .msg .time{ width: 68px; text-align: right; }
.dataList_in .item:hover ,.dataList_in .item.active{
  background: rgba(255,255,255,0.1);
}
.dataList_in .item:hover .orderNumber img,.dataList_in .item.active .orderNumber img{
  transform: none;
}
.dataList_in .item:hover .orderNumber span,.dataList_in .item.active .orderNumber span{ opacity: 0; }
.dataList .mCustomScrollBox{ padding-right: 20px; }
/* 播放器 */
.audioBox{ height: 80px; position: fixed; bottom: 0; left: 0; width: 100%; 
  background: rgba(255,255,255,0.2);
  box-shadow: inset 0px 1px 0px 0px rgba(255,255,255,0.2);
  backdrop-filter: blur(10px); z-index: 100; transform: translateY(100%);
  transition: all ease-in-out .4s;
}
.audioBox.active{
  transform: none;
}
.audioBox .hxs_w1180{ height: 100%; }
/* 首页 */
.indexLastBg{
  background: linear-gradient( 180deg, #21394B 0%, #2D3147 34%, #482644 68%, #222B45 100%);
}
.indexbodyList .indexItem{
  padding:120px 0;
}
.indexbodyList .indexItem1{background: linear-gradient( 180deg, #201F33 0%, #172835 100%); padding:0;}
.indexbodyList .indexItem1 .indexItem_in{ padding:120px 0;
  background-image: url(../image/hxs-index-behind-bg.jpg);
}
.indexbodyList .indexItem2{background: linear-gradient( 180deg, #182735 0%, #20384B 100%);}
.indexTeamShow{ margin-top: 80px; }
.indexmusicTeam{ margin-top: 40px;
  background-image: url(../image/hxs-index-team-muisc-bg.png);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 92% auto;
}
.indexmusicTeam.inexDubTeamBox{
  background-image: url(../image/hxs-index-team-voiceover-bg.png);
}
.indexmusicTeam .teamTopTxt{ padding:0 100px; margin-top: 40px; }
.musicTeamMore{
  width: 180px;
  height: 56px;
  line-height: 56px; text-align: center;
  background: #286DF2;
  border-radius: 4px;display: block; margin:40px auto 0;
}
.indexItem4 .musicTeamMore{
  background: #B93790;
}

.videoCaseList {
  height: 480px; margin-top: 40px;
}
.videoCaseList .videoBox{ width: 720px; height: 480px; }
.videoCaseList .videoBox_in{ left: 0; top: 0; z-index: 2;
  width: 100%;
  height: 480px;
  background: linear-gradient( 222deg, #F35A0F 0%, #69123B 100%);
  border-radius: 8px;
}
.videoCaseList .videoBox_in_bg{
  z-index: 1; width: 540px; overflow: hidden; top: 0; right: 0;
  height: 540px;
  opacity: 0.9;
}
.videoCaseList .videoBox_in_bg img{ width: 100%; height: 100%; }
.videoCaseList .videoList{
  width: 380px;
  height: 480px;
  background: url(../image/indexcasebackground.png) no-repeat center center / cover;
  border-radius: 8px;
  /* border: 1px solid #fff; */
  opacity: 0.9;
  /* border-image: linear-gradient(360deg, rgba(97, 84, 98, 1), rgba(255, 255, 255, 0.1)) 1 1; */
}
.videoCaseList .videoListBox{ height: 385px; overflow: hidden; }
.videoCaseList .videoList .item{ padding:0 20px; cursor: pointer;
  height: 64px;  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.1);
  box-shadow: inset 0px -1px 0px 0px rgba(255,255,255,0.1);
}
.videoCaseList .videoList .item:hover,.videoCaseList .videoList .item.active{
  background: rgba(255,255,255,0.2);
  color: #fff;
  box-shadow: inset 0px -1px 0px 0px rgba(255,255,255,0.2);
}
.videoCaseList .videoList .item.active .name { color: #286DF2; font-weight: bold; }
.videoCaseList .videoList .item .vleft,.videoCaseList .videoList .item .vleft .name{ flex: 1; overflow: hidden; }
.videoCaseList .videoList .item .vleft .imgs{ margin:0 10px 0 16px; }
.videoCaseList .videoList .item .imgs{ width: 32px; height: 32px;overflow: hidden; }
.videoCaseList .videoList .item .imgs img{ width: 100%; height: 100%; border-radius: 100%; }
.videoCaseList .videoListName{ padding:28px 20px; line-height: 1; }
.videoCaseList .videoBox_in video{ width: 100%; height: 100%; 
  background: #000;border-radius: 8px;
}
.videoCaseList .videoPlayBtn{ width: 100%; height: 100%; overflow: hidden; cursor: pointer; border-radius: 8px;
  left: 0; top: 0; z-index: 2; display: flex; justify-content: center; align-items: center;
}
.videoCaseList .videoPlayBtn img{  width: 64px; height: 64px; }
.videoCaseList .videoList .item .order{ font-weight: bold; }
.hxs_teamShowList ul{ display: flex; flex-wrap: wrap; }
.hxs_teamShowList ul li{ width: 20%; overflow: hidden; }
.hxs_teamShowList ul li .imgs{ width: 50%; height: 0; padding-bottom: 50%; }
.hxs_teamShowList ul li .imgs .imgFix{ padding-bottom: 100%; }
.hxs_teamShowList ul:nth-child(2n) li{ display: flex; justify-content: flex-end; }

.hxs_teamShowList .swiper-container .imgs{ width: 50%; }
.hxs_teamShowList .swiper-container .imgFix{ width: 100%; padding-bottom: 50% }

.hxs_teamShowList ul li:nth-child(n+6){ display: flex; justify-content:flex-end; }
.hxs_teamShowList ul li:nth-child(n+11){ display: flex; justify-content:flex-start;}
.hxs_teamShowList ul li:nth-child(n+16){ display: flex; justify-content:flex-end; }

/*indexbanner*/
.indexBody{ height: 100%; overflow: hidden;}
.body_home{ height: 100vh;}
.ejIndexBanner{ height: 100%; background-color: #e8e8e8;}
@keyframes bb{
	0%{transform:translate(-50%,0);opacity:0;}
	20%{transform:translate(-50%,3px);opacity:1;}
	80%{transform:translate(-50%,10px);opacity:1;}
	90%{transform:translate(-50%,10px);opacity:0;}
	100%{transform:translate(-50%,10px);opacity:0;}
}
.body_home .bb{
  position: fixed;
  animation: bb 2s linear 0s infinite;
  cursor: pointer;
  bottom: 40px; left: 50%; margin-left: -30px; color: #fff;
  visibility: hidden; opacity: 0;
}
.body_home .bb i{ font-size:32px;}
.body_home .bb .pubMove{ height: 30px; text-align: center; margin-bottom: 12px; }
.body_home .bb .pubMove img{ height: 100% }
.body_home.showdiv .bb{
  z-index: 10;
  opacity: 1; visibility:visible;
}
.ejIndexBanner .swiper-container {
  width: 100%;
  height: 100%;
}

.ejIndexBanner .swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #999;
  font-size:64px; font-weight: bold; background-position: center center;
  background-repeat: no-repeat; background-size: cover;
  /* Center slide text vertically */
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.ejIndexBanner .swiper-pagination-bullet {
  width: auto;
  height: auto;
  background: none;
  color: #fff;
  opacity: 1;
  position: relative;
  display: inline-block;
  line-height: 40px;
}

.ejIndexBanner .swiper-pagination-bullet:after {
  content: '';
  height: 1px;
  background: #fff;
  width: 0;
  transition: all ease 0.4s;
  vertical-align: middle;
}

.ejIndexBanner .swiper-pagination-bullet-active.swiper-pagination-bullet:after {
  width: 48px;
  display: inline-block;
  margin: 0 10px 0 8px;
}

.ejIndexBanner .swiper-pagination-bullet-active {
  font-size: 24px;
}

.ejIndexBanner .swiper-container-horizontal>.swiper-pagination-bullets,
.ejIndexBanner .swiper-pagination-custom,
.ejIndexBanner .swiper-pagination-fraction {
  right: 0;
  width: 1180px;
  margin: 0 auto;
  text-align: right;
  bottom: 40px;
}
.ejIndexBanner .jumpTxt{
  font-weight: bold; padding-bottom: 30px;
  font-size: 24px;
  color: #0A5DFF;
  line-height: 31px;
}

.ejbody_b{
  position: fixed;
  left: 0%;
  top: 100%;
  bottom: 0;
  right: 0;
  background: #fff;
  overflow: hidden;
  transition: top 0.7s cubic-bezier(0.5,0,0.2,1) 0s;
  z-index: 1;
  overflow: auto;
  outline: none;
}
.ejbody_b.showdiv{ top: 0;}
.ejbody_b .indexItem1{ padding-top: 0px; padding-bottom: 0;}
.indexbodyList .indexItem3,.indexbodyList .indexItem4{ padding-top: 0;}

/* 首页动效 */
.index_animation{
  transition: all 1s ease-out 0s;
}
.index_animation:nth-child(2){
  transition: all 1s ease-out 0.3s;
}
.index_animation:nth-child(3){
  transition: all 1s ease-out 0.6s;
}

.animation_left{
  opacity: 0;
  transform: translate(120px, 0);
}
.animation_right{
  opacity: 0;
  transform: translate(-120px, 0);
}

.list .item.showdiv .animation_left,.list .item.showdiv .animation_right{
  opacity: 1;
  transform:none;
}
.indexItem2.showdiv .animation_left,.indexItem2.showdiv .animation_right{
  opacity: 1;
  transform:none;
}
.hxsContent .animation_left,.hxsContent .animation_right{
  opacity: 1;
  transform:none;
}


/* team show */
.pageTeamShow{ padding-top: 80px; background: #202434; }
.pImgBox{
  position: fixed;
  width: 600px; height: 600px; top: 50%; left: 50%;
  transform: translate(-50%, -50%); background: #000; z-index: 101;
}
.pImgBox_in{ width: 100%; height: 100%; display: flex; justify-content: center; 
  align-items: center; position: relative;
}
.pImgBox_in .imgCloseBtn{ width: 46px; height: 46px; overflow: hidden; 
 text-align: center; font-size:24px; color: #fff;position: absolute;
  top: -56px; right: 0; border-radius: 100%; border:1px solid #fff; cursor: pointer;
}
.pImgBox .swiper-container{ width: 100%; height: 100%;}
.pImgBox .swiper-container .swiper-slide{ width: 100%; height: 100%;}
.pImgBox .swiper-container .swiper-slide .imgFix{ padding-bottom: 100%; }
.pageTeamShow ul li .imgs{ cursor: pointer; }
.hxsLogo{ height: 48px; }
.hxsLogo a{ display: block;margin-right: 126px; height: 100%; }
.hxsLogo img{ line-height: 1; height:48px; width: auto;}