@charset "utf-8";
/* CSS Document */
html,body,ul,li,h1,h2,h3,h4,h5,h6,p{ margin:0; padding:0; list-style:none; font-weight:normal; font-family:"Microsoft YaHei"; }
html,body{ margin:0; padding:0; width:100%; height:100%; position:relative; background:#000; overflow:hidden; }
img,video{ margin:0; padding:0; max-width:100%; display:block;}

.header_parts { width:100%; height:68px; position:fixed;  z-index:99; top:0; left:0; overflow:hidden; }
.sony_header { width:1920px; position:absolute; top:-68px; left:50%; transition:all 0.4s ease; margin-left:-960px; min-width:1200px; }
.header_parts:hover .sony_header{ top:0; transition:all 0.4s ease;}

#wrap { overflow: hidden; width: 100%; height:100%; }
#main { position: relative; }
.page { width: 100%; height:100vh; margin: 0; overflow:hidden; position:relative;
        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;
	}

.pbox{ position:relative; width:100%;}

.qhBox1{ position:relative; width:100%; overflow:hidden;  }
.qhBox1 .boxUl{ width:100%; overflow:hidden; }
.qhBox1 .boxUl>li{ width:100%; position:absolute; left:0; top:0; width:100%; z-index:1; opacity:0.01; transition:all 1s ease; }
.qhBox1 .boxUl>li.active{ position:relative; z-index:2; opacity:1; }


.iMenuBg{ position:absolute; width:100%; left:0; bottom:0; z-index:2; }
.iMenuBg>li{ position:absolute; width:100%; left:0; bottom:0; display:none;}
.iMenuBg>li.active{ display:block; }

.iBtnUl{ position:absolute; width:100%; left:0; bottom:0; z-index:2; }
.iBtnUl>li{ position:absolute; bottom:0; }
.iBtnUl>li:first-child{ width:10.78%; left:21.35%; }
.iBtnUl>li:nth-child(2){ width:14.43%; left:35.78%; }
.iBtnUl>li:nth-child(3){ width:12.86%; left:53.07%; }
.iBtnUl>li:nth-child(4){ width:6.15%; left:68.91%; }

.iMenuBox{ position:absolute; width:0.1042vw; bottom:7.1875vw; background:#717171; transition:all 0.2s linear; cursor:pointer; z-index:3;}
/*
.imb01{ height:5.15625vw; left:11.5625vw; }
.imb02{ height:11.875vw; left:17.1875vw; }
.imb03{ height:6.5625vw; left:77.8125vw; }
.imb04{ height:12.8125vw; left:83.28125vw; }
.imb05{ height:5.46875vw; left:88.28125vw; }
*/
.imb01{ height:5.15625vw; left:11.5625vw; }
.imb02{ height:10.875vw; left:17.1875vw; }
.imb03{ height:6.5625vw; left:77.8125vw; }
.imb04{ height:11.8125vw; left:83.28125vw; }
.imb05{ height:5.46875vw; left:88.28125vw; }


.iMenuBox .tbox{ position:absolute; bottom:100%; left:50%; width:5vw; transform:translate3d(-50%,0,0); }
.iMenuBox .tbox .tit{ font-family:"Microsoft YaHei"; font-size:1.2vw; line-height:1.5em; color:#fff; padding-bottom:1.5vw; transition:all 0.2s linear;}
.iMenuBox .tbox .round{ position:absolute; left:50%; bottom:0; transform:translate3d(-50%,50%,0); width:1.5625vw; height:1.5625vw; background:rgba(255,255,255,0.2); border-radius:50%; transition:all 0.2s linear; }
.iMenuBox .tbox .round:before{ content:""; position:absolute; left:50%; top:50%; transform:translate3d(-50%,-50%,0); width:0.625vw; height:0.625vw; background:#fff; border-radius:50%;}
.iMenuBox .tbox .round2{ position:relative; left:50%; transform:translate3d(-50%,0%,0); width:0; border-radius:50%; transition:all 0.2s linear; }
.iMenuBox:hover{ background:#e92124; }
.iMenuBox:hover .tbox .tit{ color:#e92124; padding-bottom:1vw; }
.iMenuBox:hover .tbox .round{ opacity:0; }
.iMenuBox:hover .tbox .round2{ width:3.4375vw; }
/*
.imb01:hover{ height:3.4375vw; }
.imb02:hover{ height:10.15625vw; }
.imb03:hover{ height:4.84375vw; }
.imb04:hover{ height:11.09375vw; }
.imb05:hover{ height:3.75vw; }
*/
.imb01:hover{ height:3.4375vw; }
.imb02:hover{ height:9.15625vw; }
.imb03:hover{ height:4.84375vw; }
.imb04:hover{ height:10.09375vw; }
.imb05:hover{ height:3.75vw; }

.rMenuBox{ position:absolute; right:2vw; top:2vw; width:1.875vw; z-index:100;}
.rMenuBox .rMenuBtn{ width:1.875vw; cursor:pointer; cursor:pointer; }
.rMenuBox .rMenuBtn>li{ width:100%; height:0.208vw; margin-top:0.417vw; background:#fff;}
.rMenuBox .rMenuBtn>li:first-child{ margin-top:0; }
.rMenuBox .rMenuTit{ position:absolute; right:2vw; width:3.75vw; top:0; text-align:center; color:#fff; font-size:0.9375vw; line-height:1.75em; cursor:pointer; }
.rMenuBox .rMenuUl{ position:relative; width:2vw; margin-top:1vw; }
.rMenuBox .rMenuUl>li{ font-size:0.9375vw; line-height:1.2em; color:#fff; border-bottom:solid 1px #fff; padding:0.4vw 0; display:none; }
.rMenuBox .rMenuUl>li.active{ display:block; }
.rMenuBox .rMenuUl>li:first-child{ font-size:0.9375vw; line-height:2.4em; color:#fff; border-color:#fff; }


.rMenuBox.black .rMenuBtn>li{ background:#000;}
.rMenuBox.black .rMenuTit{ color:#000; }
.rMenuBox.black .rMenuUl>li{ color:#000; border-bottom:solid 1px #000; }
.rMenuBox.black .rMenuUl>li:first-child{ color:#000; border-color:#000; }



.rMenuArrow{ position:absolute; right:2vw; top:50%; margin:1.5vw auto 0; width:1.2vw; height:2vw; border-radius:1vw; border:solid 0.1vw #f00; z-index:100; transform:translate3d(0,50%,0); animation:UpDown 2s linear infinite;}
.rMenuArrow:before{ content:""; position:absolute; left:50%; transform:translate3d(-50%,0,0); top:0.5vw; width:0.3125vw; height:0.3125vw; background:#f00; border-radius:50%; }
.rMenuArrow:after{ content:""; position:absolute; left:50%; top:2.2vw; width:0.8vw; height:0.8vw; border-left:solid 0.1vw #f00; border-bottom:solid 0.1vw #f00; transform:translate3d(-50%,0,0) rotate(-45deg); }

.tMenuBox{ position:absolute; left:0; top:-6vw; width:100%; background:#000; z-index:101; }
.tMenuBox .tMenuUl{ float:left; width:93.75vw; overflow:hidden; }
.tMenuBox .tMenuUl>li{ width:15.625vw; float:left; font-size:1.4583vw; line-height:1.5em; padding:1.40625vw 0; color:#ccc; text-align:center; cursor:pointer; box-sizing:border-box; border-bottom:solid 0.15vw #000; position:relative; }
.tMenuBox .tMenuUl>li img{ display:inline-block; height:1.1em; opacity:0.8; vertical-align:middle; margin-right:0.3em;}
.tMenuBox .tMenuUl>li:hover{ border-color:#e92124; color:#fff; }
.tMenuBox .tMenuUl>li:hover img{ opacity:1; }
.tMenuBox .tMenuUl>li.active{ border-color:#e92124; color:#fff; }
.tMenuBox .tMenuUl>li.active img{ opacity:1; }
.tMenuBox .tMenuUl>li:after{ content:""; position:absolute; right:0; width:1px; height:2vw; top:50%; transform:translate3d(0,-50%,0); background:#575757; }
.tMenuBox .tMenuClose{ float:right; width:5vw; height:5vw; font-family:"宋体"; font-weight:normal; font-size:3vw; line-height:5vw; text-align:center; color:#fff; cursor:pointer;}



.familyBox{ position:relative; width:100%; height:56.25vw; background:url(../images/family/index_family_190725.jpg); background-size:100%; }
.familyBox .famUl{ position:absolute; left:0; top:9.375vw; width:100%; }
/* .familyBox .famUl{ position:absolute; left:0; top:9.4792vw; width:100%; } */
.familyBox .famUl>li{ height:9.375vw; cursor:pointer; background:url(../images/family/family_190725.jpg); background-size:100vw auto; transition:all .3s linear; }
.familyBox .famUl>li:nth-child(1){ height:13.54vw; background-position:0 0;}
.familyBox .famUl>li:nth-child(2){ background-position:0 -13.54vw;}
.familyBox .famUl>li:nth-child(3){ background-position:0 -22.915vw;}
.familyBox .famUl>li:nth-child(4){ background-position:0 -32.29vw}
.familyBox .famUl>li.active{ background-image:url(../images/family/family_on_190725.jpg); }

.familyBox .tbox{ position:absolute; left:9.375vw; top:7.1875vw; width:27.1875vw; opacity:0; }
.familyBox .tbox.active{ animation:fadeInRight .5s linear forwards; }
.familyBox .family_btn01{top:4.5%;left: 39.375%;width: 8.5%;height: 24.375%;position: absolute;}
.familyBox .family_btn02{top:4.5%;left: 51%;width: 8.125%;height: 24.375%;position: absolute;}
.familyBox .family_btn03{top:4.5%;left: 72.1875%;width: 8.125%;height: 24.375%;position: absolute;}
.familyBox .family_btn04{top:4.5%;left: 81.35%;width: 9.06%;height: 24.375%;position: absolute;}
.familyBox .family_btn05{top:37.75%;left: 56.98%;width: 21.25%;height: 12.5%;position: absolute;}
.familyBox .family_btn06{top:59.375%;left: 43.9%;width: 25.1%;height: 12.5%;position: absolute;}
.familyBox .family_btn07{top:82.5%;left: 29.3%;width: 27.6%;height: 12.5%;position: absolute;}
.familyBox .family_btn08{top:82.5%;left: 64.74%;width: 27%;height: 12.5%;position: absolute;}


.advantageBox{ position:relative; width:100%; height:56.25vw; background:url(../images/index_advantage.jpg) no-repeat; background-size:100%;}
.advantageBox .advUl{ position:absolute; left:10.625vw; top:0; width:83.75vw; height:100%; overflow:hidden; }
.advantageBox .advUl>li{ float:left; position:relative; width:25%; height:100%; overflow:hidden; box-sizing:border-box; border-right:solid 1px transparent; cursor:pointer; }
.advantageBox .advUl>li .pic{ position:absolute; width:100%; left:0; top:-28.125vw; transition:all 0.4s ease; }
.advantageBox .advUl>li .pic>img{ position:relative; z-index:2; transition:all 0.4s ease;}
.advantageBox .advUl>li .pic>img.active{ position:absolute; left:0; top:0; width:100%; z-index:1;}
.advantageBox .advUl>li:nth-child(3) .pic{ top:-25.52vw; }
.advantageBox .advUl>li>.tbox{ position:absolute; top:18vw; left:2.083vw; z-index:5; }
.advantageBox .advUl>li:nth-child(even)>.tbox{ top:12.8vw; }
.advantageBox .advUl>li>.tbox>h3{ font-size:2.083vw; line-height:1.3em; color:#333; }
.advantageBox .advUl>li>.tbox>h3>span{ display:block; font-weight:bold; }
.advantageBox .advUl>li>.tbox>.txtUL{ margin-top:0.5vw; }
.advantageBox .advUl>li>.tbox>.txtUL>li{ color:#333; font-size:1.042vw; line-height:1.5em; position:relative; padding-left:0.5em; }
.advantageBox .advUl>li>.tbox>.txtUL>li:after{ content:""; position:absolute; width:2px; height:2px; background:#575757; left:0; top:0.75em; transform:translate3d(0,-50%,0);}
.advantageBox .advUl>li>.tbox>.advArrow{ margin-top:1.5vw; width:3.6vw; opacity:0; }

.advantageBox .advUl>li:hover .pic{ top:0; }
.advantageBox .advUl>li:hover .pic>img.active{ z-index:3;}
.advantageBox .advUl>li:hover>.tbox>h3{ color:#fff; }
.advantageBox .advUl>li:hover>.tbox>.txtUL>li{ color:#fff; }
.advantageBox .advUl>li:hover>.tbox>.txtUL>li:after{ background:#fff; }
.advantageBox .advUl>li:hover>.tbox>.advArrow{ animation:fadeInRight .5s linear forwards; }

.advantageBox .advBot{ position:absolute; left:0; bottom:0; width:100%;}
.advantageBox .advTbox{ position:absolute; left:100%; bottom:0; width:100%; z-index:10; overflow:hidden; transition:all 0.4s ease; }
.advantageBox .advTbox.active{ left:0;}
.advantageBox .advTbox .boxUl{ width:99999px; overflow:hidden;}
.advantageBox .advTbox .boxUl>li{ float:left; width:100vw; position:relative; }
.advantageBox .advTbox .boxUl>li .advBox{ position:absolute; width:62.5%; left:18.75%; top:16%; }
.advantageBox .advTbox .boxUl>li .advBox>h3{ font-size:3.125vw; line-height:1.5em; color:#fff; border-bottom:solid 1px #999; padding:0.4em 0; }
.advantageBox .advTbox .boxUl>li .advBox>p{ color:#ccc; font-size:1.042vw; line-height:1.5em; margin:3vw 0 4vw; }
.advantageBox .advTbox .boxUl>li .advBox>ul{ overflow:hidden; margin-top:5vw; }
.advantageBox .advTbox .boxUl>li .advBox>ul>li{ float:left; }
.advantageBox .advTbox .boxUl>li .advBox>ul>li:first-child{ margin-left:0; }
.advantageBox .advTbox .boxUl>li .advBox>ul>li>h4{ font-size:1.75vw; line-height:1em; padding-left:0.5em; border-left:solid 2px #e92124; color:#fff; }
.advantageBox .advTbox .boxUl>li .advBox>ul>li>p{ color:#ccc; font-size:1.042vw; line-height:1.5em; margin:1.5vw 0 2vw; min-height:6em;}

.advantageBox .advTbox .boxUl>li .advBox>.ul01>li{ width:17.5vw; margin-left:5vw; }
.advantageBox .advTbox .boxUl>li .advBox>.ul02>li{ width:28vw; margin-left:3.125vw; }
.advantageBox .advTbox .boxUl>li .advBox>.ul02>li>p{ min-height:auto; }
.advantageBox .advTbox .boxUl>li .advBox>.ul03>li{ width:19.8vw; margin-left:1.55vw; }

.advantageBox .advTbox .btnLeft{ position:absolute; left:12.5%; top:50%; width:4vw; height:4vw; box-sizing:border-box; border-radius:50%; border:solid 0.1vw #fff; transform:translate3d(-50%,-50%,0); cursor:pointer; }
.advantageBox .advTbox .btnLeft:before{ content:''; position:absolute; left:50%; top:50%; width:1.2vw; height:1.2vw; border-left:solid 0.15vw #fff; border-bottom:solid 0.15vw #fff; transform:translate3d(-30%,-50%,0) rotate(45deg);}
.advantageBox .advTbox .btnRight{ position:absolute; right:12.5%; top:50%; width:4vw; height:4vw; box-sizing:border-box; border-radius:50%; border:solid 0.1vw #fff; transform:translate3d(50%,-50%,0); cursor:pointer; }
.advantageBox .advTbox .btnRight:before{ content:''; position:absolute; right:50%; top:50%; width:1.2vw; height:1.2vw; border-right:solid 0.15vw #fff; border-bottom:solid 0.15vw #fff; transform:translate3d(20%,-50%,0) rotate(-45deg);}
.advantageBox .advTbox .btnClose{ position:absolute; left:77.83vw; top:10.9375vw; width:4vw; height:4vw; box-sizing:border-box; border-radius:50%; border:solid 0.1vw #fff; font-family:"宋体"; font-size:1.5vw; line-height:4vw; overflow:hidden; text-align:center; color:#fff; cursor:pointer; }



.lifeBox{ position:relative; width:100%; height:56.25vw; }
.lifeBox.bg1{ background:#ebd7d7; }
.lifeBox.bg2{ background:#141414; }
.lifeBox.bg3{ background:#0c0c0c; }
.lifeBox.bg4{ background:#d6dade; }
.lifeBox .lifeUl{ position:absolute; left:0; top:4.53125vw; width:92.7083vw; overflow:hidden; }
.lifeBox .lifeUl>li{ position:absolute; left:0; top:0; width:100%; z-index:1; }
.lifeBox .lifeUl>li.active{ position:relative; z-index:3; animation:Up1 0.5s forwards; }
.lifeBox .lifeUl>li.active2{ z-index:2; }
/*
.lifeBox .lifeUl>li .txt01{ position:absolute; left:4.6875vw; top:16.5625vw; width:25vw; opacity:0; }
*/
.lifeBox .lifeUl>li .txt01{ position:absolute; left:4.6875vw; bottom:27.1875vw; width:50vw; opacity:0; }
.lifeBox .lifeUl>li .txt02{ position:absolute; left:4.6875vw; top:21.5625vw; width:25vw; opacity:0; }
.lifeBox .lifeUl>li .txt03{ position:absolute; left:4.6875vw; top:25.78125vw; width:50vw; opacity:0; }
.lifeBox .lifeUl>li .txt04{ position:absolute; left:4.6875vw; bottom:2vw; width:25vw; opacity:0; }
.lifeBox .lifeUl>li .btnBox{ position:absolute; left:4.6875vw; top:32.8125vw; width:5vw; cursor:pointer; opacity:0; }
.lifeBox .lifeUl>li .btnBox .btnMore{ width:5vw; height:5vw; border-radius:50%; border:solid 0.1vw #f00; font-family:Arial, Helvetica, sans-serif; font-size:3vw; line-height:5vw; text-align:center; color:#f00; cursor:pointer; transition:all 0.4s ease; }
.lifeBox .lifeUl>li .btnBox .btnMore:hover{ transform:scale(1.1); }
.lifeBox .lifeUl>li .btnBox .btnMore:after{ content:"+"; display:block; font-family:Arial, Helvetica, sans-serif; font-size:3vw; line-height:5vw; animation:Rotate 1s linear infinite;}
.lifeBox .lifeUl>li .btnBox>p{ text-align:center; width:4.375vw; min-width:72px; font-size:0.7292vw; color:#ccc; position:relative; left:50%; transform:translate3d(-50%,0,0); margin-top:0.8vw; }

.lifeBox .lifeUl>li.active .txt01{ animation:fadeInDown .5s linear forwards;}
.lifeBox .lifeUl>li.active .txt02{ animation:fadeInDown .5s linear .4s forwards; }
.lifeBox .lifeUl>li.active .txt03{ animation:fadeInDown .5s linear .8s forwards; }
.lifeBox .lifeUl>li.active .txt04{ animation:fadeInDown .5s linear 1.6s forwards; }
.lifeBox .lifeUl>li.active .btnBox{ animation:fadeInDown .5s linear 1.2s forwards;}

.lifeBox .lifeLine{ position:absolute; left:0; bottom:26.9271vw; width:68.5vw; height:1px; background:rgba(255,255,255,0.3); z-index:5;}
.lifeBox .lbtnUl{ position:absolute; bottom:26.875vw; left:69vw; overflow:hidden; z-index:5;}
.lifeBox .lbtnUl>li{ float:left; border-bottom:solid 0.15625vw #fff; margin-right:0.9375vw; font-size:0.9375vw; line-height:1.5em; color:#fff; text-align:center; cursor:pointer; }
.lifeBox .lbtnUl>li.active{ border-color:#f00; }
.lifeBox .lifeRx{ position:absolute; left:88.75vw; bottom:26.875vw; width:10.78125vw; z-index:5; opacity:0.3; }

.iframeBox{ position:absolute; left:100%; top:0; width:100%; height:100%; overflow:hidden; z-index:101; transition:all .5s linear; background:#000; }
.iframeBox>div{ display:none; position:relative; height:100%; }
.iframeBox>div.active{ display:block; }
.iframeBox.active{ left:0; }
.iframeBox iframe{ width:calc(100%); }
.btnCloseIframe{ position:absolute; right:-5vw; top:2vw; width:4vw; height:4vw; box-sizing:border-box; border-radius:50%; border:solid 0.1vw #fff; font-family:Arial, Helvetica, sans-serif; font-size:3vw; line-height:4vw; overflow:hidden; text-align:center; color:#fff; cursor:pointer; z-index:101; background:rgba(0,0,0,0.5); }
.btnCloseIframe.active{ right:2vw; transition:all .5s linear; }




.sampleBox{ position:relative; width:100%; height:56.25vw; background:url(../images/sample/index_sample.jpg); background-size:100%; overflow:hidden; }
.sampleBox .samTabUl{ position:absolute; width:76.5625vw; left:11.71875vw; top:10.42vw; overflow:hidden; }
.sampleBox .samTabUl>li{ float:left; width:25%; text-align:center; cursor:pointer; }
.sampleBox .samTabUl>li>span{ border-bottom:solid 2px transparent; font-size:1.042vw; display:inline-block; padding:0.6vw 0; color:#fff;}
.sampleBox .samTabUl>li.active>span{ border-bottom:solid 2px #fff;}
.sampleBox .samTabUl>li:hover>span{ border-bottom:solid 2px #fff;}
.sampleBox .samBox{ position:absolute; width:76.5625vw; left:11.71875vw; top:14vw; height:36.875vw; overflow:hidden;}
.samBox2{ width:105%; height:100%; overflow-x:hidden; overflow-y:auto;}
.sampleBox .samUlBox{ width:100%; overflow:hidden; display:none; }
.sampleBox .samUlBox.active{ display:block; }
.sampleBox .samUlBox .samUl{ width:100%; overflow:hidden; position:relative;}
.sampleBox .samUlBox .samUl>li{ width:18.4896vw; position:absolute; cursor:pointer; }
.sampleBox .samUlBox .samUl>li:hover:after{ content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(17,97,165,0.45); background:url(../images/sample/icon_fd.png) center center no-repeat rgba(17,97,165,0.45); background-size:3.4375vw; }
.sampleBox .samUlBox .samUl>li:nth-child(-n+4){ margin-top:0; }
.sampleBox .samScrollBox{ position:absolute; left:92.1875vw; width:1px; top:14vw; height:36.875vw; background:#fff;}
.sampleBox .samScrollBox>span{ position:absolute; left:-2px; top:0; width:5px; height:100px; background:#fff; border-radius:2px;}

.sampleBox .samTbox{ position:absolute; left:100%; top:0; width:100%; height:100%; z-index:5; background:#ccc; transition:all 0.4s ease;}
.sampleBox .samTbox.active{ left:0; }
.sampleBox .samTulBox{ position:relative; top:50%; height:90%; max-height:90vh; width:80%; max-width:80vw; margin:0 auto; overflow:hidden; transform:translate3d(0,-50%,0);}
.sampleBox .samTulBox .samTul{ display:block; width:100%; height:100%; position:relative;}
.sampleBox .samTulBox .samTul>li{ display:block; width:100%; height:100%; text-align:center; position:absolute; left:0; top:0; z-index:1; background:#ccc; overflow:hidden; }
.sampleBox .samTulBox .samTul>li>img{ display:block; max-width:100%; max-height:100%; position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); }
.sampleBox .samTulBox .samTul>li.active{ position:relative; z-index:3; animation:Up1 0.5s forwards; }
.sampleBox .samTulBox .samTul>li.active2{ position:relative; z-index:3; animation:Down1 0.5s forwards; }
.sampleBox .samTulBox .samTul>li.active3{ z-index:2; animation:fadeOut 0.1s 0.5s forwards; }
.sampleBox .samTbox .btnClose{ position:absolute; left:50%; top:2%; width:3.125vw; height:3.125vw; background:#fff; border-radius:50%; transform:translate3d(-50%,0,0); z-index:5; text-align:center; font-family:"宋体"; font-size:1.5vw; line-height:3.125vw; cursor:pointer; }
.sampleBox .samTbox .btnNext{ position:absolute; left:50%; bottom:2%; width:3.125vw; height:3.125vw; border:solid 0.15vw #fff; box-sizing:border-box;  border-radius:50%; transform:translate3d(-50%,0,0); z-index:5; }
.sampleBox .samTbox .btnNext:after{ content:""; position:absolute; left:50%; top:50%; display:inline-block; width:1vw; height:1vw; border-bottom:solid 0.15vw #fff; border-right:solid 0.15vw #fff; transform:translate3d(-50%,-70%,0) rotate(45deg); cursor:pointer;}

.sampleBox .samTtit{ position:absolute; right:2.9vw; width:0.075vw; background:#fff; height:10vw; top:50%; margin-top:10vw; z-index:6; color:#fff;}
.sampleBox .samTtit>p{ position:absolute; top:100%; left:50%; width:3em; text-align:center; transform:translate3d(-50%,0,0); color:#fff;}



.courseBox{ position:relative; width:100%; height:56.25vw; background-image:url(../images/course/index_course.jpg); background-size:100%; }
.courBtnBox{ position:absolute; width:36vw; left:5vw; top:12.1875vw; height:39.0625vw; overflow:hidden; }
.courBtnBox .courUlBox{ width:105%; height:100%; overflow-x:hidden; overflow-y:scroll; }
.courBtnBox .courScrollBox{ position:absolute; right:2px; top:0; height:100%; width:1px; background:#fff; }
.courBtnBox .courScrollBox>span{ position:absolute; left:-2px; top:0; width:5px; height:100px; background:#fff; border-radius:2px;}
.courBtnBox .courUl{ width:100%; overflow:hidden; position:relative;}
.courBtnBox .courUl>li{ float:left; width:16.5625vw; margin:0 1vw 0 0; cursor:pointer; position:relative; display:none;}
.courBtnBox .courUl>li.img{ display:block; }
.courBtnBox .courUl>li>div{ position:relative; }
.courBtnBox .courUl>li:hover>div:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; border:solid 0.26vw #e5e5e5; }
.courBtnBox .courUl>li.active>div:after { content:""; position:absolute; left:0; top:0; width:100%; height:100%; box-sizing:border-box; border:solid 0.26vw #e5e5e5; }
.courBtnBox .courUl>li h5{ text-align:right; font-size:0.918vw; line-height:1.5em; color:#fff; padding:0.5vw 0 1.5vw; font-weight:normal; }
.courBtnBox .courUl>li h5>span{ float:left; display:block; width:1.4vw; height:1.4vw; border-radius:50%; position:relative; background:#fff; }
.courBtnBox .courUl>li h5>span:before{ content:""; display:block; width:0; height:0; position:absolute; left:50%; top:50%; transform:translate3d(-20%,-50%,0); border-style:solid; border-width:0.3vw; border-left-width:0.6vw; border-color:transparent transparent transparent #000; }
.courVideoBox{ position:absolute; left:42.1875vw; top:50%; margin-top:-15.9375vw; width:47.25vw; height:35.3125vw; background:#eee; padding:1.875vw; z-index:99; }
.courVideoBox>div{ height:100%; }

.courLeftMenu{ position:absolute; left:-2.8vw; top:0; height:100%; width:2.8vw; background:rgba(55,55,55,0.4); cursor:pointer; transition:all 0.3s linear; }
.courLeftMenu.active{ left:0; }
.courLeftMenu>span{ display:block; position:absolute; left:50%; top:50%; text-align:center; font-family:"Microsoft YaHei"; font-size:0.9375vw; line-height:1.5em; color:#fff; transform:translate3d(-50%,-50%,0); }
.courLeftMenu>span:after{ content:""; display:inline-block; width:0.5vw; height:0.5vw; border-bottom:solid 0.1vw #fff; border-right:solid 0.1vw #fff; transform:rotate(-45deg) translate3d(-50%,0,0);}
.courLeftBox{ position:absolute; left:-22.1875vw; top:0; height:100%; width:22.1875vw; background:rgba(0,0,0,0.8); cursor:pointer; transition:all 0.3s linear;}
.courLeftBox.active{ left:0; }
.courLeftBox .btnClose{ position:absolute; right:1.5vw; top:7vw; width:2.5vw; height:2.5vw; box-sizing:border-box; border-radius:50%; border:solid 0.1vw #fff; font-family:Arial, Helvetica, sans-serif; font-size:2vw; line-height:2.5vw; overflow:hidden; text-align:center; color:#fff; background:rgba(0,0,0,0.5); cursor:pointer; }
.courLeftBox .btnVideo{ position:absolute; left:5vw; top:50%; width:16vw; background:#b6b6b6; color:#161616; font-family:"Microsoft YaHei"; font-size:1.25vw; line-height:1.5em; padding:1vw 0; text-align:center; border-radius:2vw; }
.courLeftBox .bV01{ transform:translate3d(0,-90%,0);}
.courLeftBox .bV02{ transform:translate3d(0,90%,0);}
.courLeftBox .btnVideo:hover{ color:#fff; background:#ff6429; }
.courLeftBox .btnVideo.active{ color:#fff; background:#ff6429; }


/* .xz{width: 475px;position: absolute;animation: zhuan 2s linear infinite;top:240px;left:720px;} */
/* .xz_box{width: 1920px;position: relative;}
.xz{width: 475px;position: absolute;animation: zhuan 2s linear infinite;top:312px;left:720px;} */

@keyframes zhuan{		
        from{-webkit-transform: rotate(0deg)}
        to{-webkit-transform: rotate(360deg)}
}

@keyframes Up1 {
	0% { transform:translate3d(0,100%,0);}
	100% { transform:translate3d(0,0,0);}
}
@keyframes Down1 {
	0% { transform:translate3d(0,-100%,0);}
	100% { transform:translate3d(0,0,0);}
}
@keyframes fadeOut {
	0% { opacity:1; }
	100% { opacity:0; }
}
@keyframes Rotate {
	0% { transform:rotate(0);}
	50% { transform:rotate(90deg);}
	100% { transform:rotate(90deg);}
}
@keyframes UpDown {
	0% { transform:translate3d(0,50%,0);}
	50% { transform:translate3d(0,-50%,0);}
	100% { transform:translate3d(0,50%,0);}
}
@keyframes fadeInDown {
	0% { transform:translate3d(0,100%,0); opacity:0; }
	100% { transform:translate3d(0,0,0); opacity:1; }
}
@keyframes fadeInRight {
	0% { transform:translate3d(50%,0,0); opacity:0; }
	100% { transform:translate3d(0,0,0); opacity:1; }
}



.swiper-container{ width:100%; height:100%; position:relative; background:#000;}
.swiper-container video{ width:100%; display:block;}
.swiper-container img{ display:block; width:100%;}
.swiper-container .swiper-slide{
	width:100%; overflow:hidden; position:relative;
        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;
}
.swiper-container .swiper-slide-active{ z-index:1;}
/* @media screen and (max-width:1366px){
        .xz{width: 24.7%;top:33%;left: 37.5%; }	
} */