html,body{width: 100%;overflow-x: hidden;}
/*product*/
#product{position: relative;}
#product .productbg{position: absolute;z-index: 3;background: rgba(0,0,0,.6);width: 100%;height: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,1) 10%,rgba(0,0,0,0.5)20%, rgba(0,0,0,0.2)40%,rgba(0,0,0,0)100%);}
#product .newBox{width: 100%; height:auto;overflow: hidden;}
#product .newBox>ul{width: 600%; height: 100%; position: relative; left: 0px; top: 0px;}
#product .newBox>ul>li{width: 100%; height: 100%; float: left; position: relative;overflow-x: hidden; overflow-y:auto;}
#product .newBox>ul>li .box{ width: 100%; height: 100%; position: relative; left: 0px; top: 0px; overflow: hidden; background: #000; -webkit-transition-duration: 1s;transition-duration: 1s; }
#product .newBox>ul>li .newBoxBg{ width: 100%; height: 100%; position: absolute; left: 0px; top: 0px;
	background-size: cover; opacity: .8; -webkit-transition-duration: 2s;transition-duration: 2s; }
#product .newBox>ul>li .newBoxBg img{display: block;}
#product .titleList{ width: 40%; height: 100%; position: absolute; left: 10%; overflow: hidden; top:0;z-index: 2;}
#product .titleList ul{ width: 600%; height: 100%; position: absolute; left: 0px; top: 0px;}
#product .titleList li{ width: calc(100%/6); height: 100%; float: left; background: #009572; position: relative;}
#product .titleList li .title{ position: absolute; left: 10%; top: 40%; font-size: 24px; color: #ffffff;font-family: fz;font-size: 60px;}
#product .titleList li .detle{ position: absolute; left: 10%; top: 40%; font-size: 24px; color: #ffffff;font-family: fz;font-size: 60px;}
#product .nameList{ width: 100%; height: 100%; position: absolute; left: 0px; top: 0px; overflow: hidden;}
#product .nameList ul{ width:600%; position: absolute; left: 0px; top: 0px; height: 100%;}
#product .nameList ul li{ width: calc(100%/6); height: 100%; float: left; position: relative;}
#product .nameList ul li .name{ width: 1000px; height: 155px; position: absolute; left: 20%; top:20%; z-index: 15;color: #fff;}
#product .nameList ul li .name img{position: absolute;z-index: 3;top:160%;left:45%;}
#product .nameList ul li .name span{display: block;line-height: 160px;font-size: 90px;font-family: monospace}
#product .nameList ul li .name b{display: block;font-weight: normal;font-size: 22px;letter-spacing: 1px;margin:2% 0 4% 0;font-family:serif}
#product .nameList ul li .name p{line-height: 30px;color: rgba(255,255,255,.94); }
#product .nameList ul li .name a{display: block; border: 1px solid rgba(255,255,255,.7);text-align: center;width: 180px;line-height: 45px;background: #fff;color: #9a150e;border-radius: 60px;margin-top: 8%;transition:.4s;}
#product .nameList ul li .name a:hover{background: #9a150e;color: #fff;}

#product .cn{ width:13%; height: 35px; position: absolute;  top: 30%; z-index: 15;cursor: pointer;color: #fff;}
#product .cn span{font-size: 15px;transition:.4s;font-weight: 100;}
#product .cn:hover span{color: #d10000}
#product .cn:hover i{color: #d10000}
#product .cn span i{font-size: 32px;font-family: serif;color: rgba(255,255,255,.6);transition:.4s;}
#product .cnL{left: 0px;text-align:right;}
#product .cnL:after{ position: absolute; height: 1px; width: 30%; bottom: 4px; left: 0; background: #fff; content: '';}
#product .cnR{right: 0px;}
#product .cnR:after{ position: absolute; height: 1px; width: 30%; bottom: 4px; right: 0; background: #fff; content: '';}
#product .newBox>ul>li .IpadAndphone_pic{display: none;}