/* 大标题 */
@font-face{
	font-family: Roboto-Bold-3;
	src: url('../font/newRoboto/Roboto-Bold-3.ttf')
}
/* 新-标题 */
@font-face{
	font-family: Roboto-Bold-title;
	src: url('../font/roboto/Roboto-Bold-3.ttf')
}
/* 新-描述细体 */
@font-face{
	font-family: Roboto-Light-whiteDesc;
	src: url('../font/newRoboto/Roboto-Light-10.ttf')
}
/* */
@font-face{
	font-family: Roboto-Medium-12;
	src: url('../font/roboto/Roboto-Medium-12.ttf')
}
/* 黑背景下 描述 使用常规字体 */
@font-face{
	font-family: Roboto-Regular-blackRule;
	src: url('../font/roboto/Roboto-Regular-blackRule.ttf')
}


.topBananer{
	height: 760px;
	background-image:url(../img/overview/bananer.webp?v=123);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
.bananer_title{
    padding-top: 260px;
    line-height: 41px;
    font-weight: bold;
    font-size: 33px;
}
.bananer_describe{
    width: 600px;
    font-size: 27px;
    line-height: 33px;
    margin-top: 28px;
}
.allContents{
	text-align: center;
	/* width: 190px; */
	width: 145px;
	padding-top: 30px;
}
.allContents>p{
	padding-top:15px;
	font-family: Roboto-Light-whiteDesc;
}

.titleSty{
	font-size: 39px;
	font-weight: bold;
	color: #333333;
	text-align: center;
	font-family: Roboto-Bold-3;
}

@-webkit-keyframes opac{
    from {
        opacity: 1;
        width:0;
        height:0;
        top:50%;
        left:50%;
    }
    to {
        opacity : 0;
        width:100%;
        height:100%;
        top:0;
        left:0;
    }
}
.animate .w2{
    /*延迟1s*/
    -webkit-animation-delay:1s;
}
.animate .w3{
    -webkit-animation-delay:2s;
}
.animate .w4{
    -webkit-animation-delay:3s;
}
.wave{
    width:215px;
    height:83px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1;
    border-radius: 50%;
    overflow: hidden;
}
.wave *{
    border:4px solid #00AAE7;
    position:absolute;
    border-radius:50%;
    -webkit-animation:opac 4s infinite;
}

/*h2{
	height: 52px;
	font-size: 39px;
	color: #333333;
	line-height: 52px;
	text-align: center;
}
.displayArea{
	font-size:17px;
	color: #333;
}
.displayArea .textCen{
	text-align: center;
}*/

/*设备*/
.device{
    position: relative;
    margin-top: 30px;
    width: 100%;
    z-index: 2;
}

.iconP{
	margin-top:52px;
}

.iconP .col-md-2>p{
	margin-top: 16px;
	font-size: 17px;
	color: #666666;
}


.siriShow{
	margin-top:30px;
	text-align: center;
	padding-top:73px;
	opacity:1;
    transition: transform 400ms linear, opacity 500ms linear;
}	
/*body[data-h="2551"] .siriShow{
    opacity: 0.5;
    transition: transform 400ms linear, opacity 500ms linear;
}
body[data-h="2378"] .siriShow{
    opacity: 0.000;
    transition: transform 400ms linear, opacity 500ms linear;
}*/

.alexaHide{
	text-align: center;
	padding-top:73px;
	opacity: 0;
    transition: transform 400ms linear, opacity 500ms linear;
}

body[data-div="2449"] .alexaHide{
    opacity: 0.5;
    transition: transform 400ms linear, opacity 500ms linear;
}
body[data-div="2450"] .alexaHide{
    opacity:1;
    transition: transform 400ms linear, opacity 500ms linear;
} 

/*intelligent*/
.intelligent{
	/*height: 1650px;*/
}
.assistant{
	font-size:71px;
	line-height:80px;
}
.intelligent .stickyImg{
	position: sticky;
	top:600px;
	text-align: center;
	background: #fff;
}

.valueStyle{
    font-weight:600;
    margin-bottom:0px;
    background-image:linear-gradient(57deg, #F6814F 0%, #E265E7 12%, #61B3EE 38%, #1CD0B6 70%, #30EFD8 100%);
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
    font-family: Roboto-Bold-3;
}
.sound-listen{
    position: relative;
    overflow: hidden;
    padding-top: 0px;
    margin-top: -32px;
    padding-bottom: 38px;
}
.sound-listen-div{
	display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    width: 100%;
}
.overview-sound-handoff{
    position: relative;
    display: block;
    width: 1506px;
    height: 410px;
    position: relative;
    top: 40px;
    left: 50%;
    margin-left: -1095px;
    transform: translateX(587px);
    margin-bottom: 0px;
}

/*spotify Airplay2 Amazon_Alexa Tidal*/
.hideOpacity{
	cursor: pointer;
	opacity: 0.6;
	padding: 35px 0;
}
.hideOpacity:hover{
	color: #fff;
	opacity: 1;
}
.hideOpacity .imgIcon{
	width:32px;
}
.hideOpacity .deviceDesc{
	width: calc(100% - 50px);
}
.opacityTitle{
	font-size: 27px;
	font-family: Roboto-Medium-12;
}
.opacityDesc{
	display: none;
	padding-top: 20px;
	font-size: 17px;
	font-family: Roboto-Light-whiteDesc;
}
.showOpacity{
	opacity: 1;
	display: block;
}
.showOpacity .opacityDesc,.showOpacity .deviceDesc{
	display: block;
	font-family: Roboto-Light-whiteDesc;
}
.introduce_text{
	width: calc(100% - 260px);
	padding-right: 100px;
}
.introduce_Img{
	width:260px
}
/*faqs*/
.faqsText{
	width: 418px;
	padding-top: 25px;
}
.faqsText_title{
	font-size: 19px;
	font-weight: bold;
	line-height: 22px;
	font-family: Roboto-Bold-3;
}
.faqsText_desc{
	font-weight: lighter;
	margin-top: 8px;
	color:#848484;
	font-size: 17px;
	font-family: Roboto-Light-whiteDesc;
}
/*黑色区域*/
.h5Box{
	display: none;
}

@media (min-width: 768px) and (max-width: 1600px) {
	.intelligent .stickyImg{
		/*position: relative;*/
	}
}
@media (min-width: 768px) and (max-width: 979px) {
	.bananer_title{
		/*font-size: 24px;*/
	}
	.bananer_describe{
		width: 480px;
		/*font-size: 19px;*/
	}
	/*Hi-Res*/
	.animate{
		display: none;
	}
	/*FAQS*/
	.faqsText{
		width: 100%;
	}
}
@media (max-width: 767px) { 
	.bananer_title{
		font-size: 29px;
	}
	.bananer_describe{
		width: 473px;
		font-size: 21px;
	}
	
	.twoUlPad{
		padding-right:70px;
	} 
	
	.twoHeader ul{
		float:none;
		text-align: center;
	}
	.topBananer{
		height: 500px;
	}
	.bananer_title{
		padding-top: 144PX;
	}
	
	/*Intelligent assistant*/
	.assistant{
		font-size: 50px;
    	line-height: 48px;
	}
	.intelligent{
		/*height: 1100px;*/
	}
	.alexaHide{
		opacity: 1;
	}
	.stickyImg{
		/*display: none;*/
	}
	/*spotify Airplay2 Amazon_Alexa Tidal*/
	.opacityTitle{
		font-size: 23px;
	}
	.opacityDesc{
		font-size: 15px;
	}
	.introduce_text{
		padding-right: 0px;
	}
	.introduce_Img{
		width: 230px;
	}
	/*Hi-Res*/
	.animate{
		display: none;
	}
	/*FAQS*/
	.faqsText{
		width: 100%;
	}
}
@media (max-width: 600px) {
	.twoUlPad{
		padding-right: 45px;
	} 
	
	.twoHeader ul{
		float:none;
		text-align: center;
	}
	.bananer_title{
		padding-top:137PX;
	}
	
	/*Intelligent assistant*/
	.assistant{
		font-size: 50px;
    	line-height: 48px;
	}
	.intelligent{
		height: 600px;
	}
	.alexaHide{
		opacity: 1;
	}
	.stickyImg{
		/*display: none;*/
	}
}
@media only screen and (max-width: 480px){
	/*二级导航栏*/
	.twoHeader ul{
		float:none;
		text-align: center;
	}
	/*bananer 顶部背景图*/
	.topBananer{
		height: 520px;
		background-image:url(../img/overview/bananer-h5.webp?v=123);
	}
	.bananer_title{
		padding-top: 86px;
		font-size: 21px;
	}
	.bananer_describe{
		width: 350px;
		font-size: 19px;
		line-height: 21px;
	}
	
	/**/
	.overview-sound-handoff{
		left: 63%;
	}
	
	/*all Content*/
	.allContents{
		width: 50%;
	}
	/*Intelligent assistant*/
	.intelligent{

	}
	.assistant{
		font-size: 50px;
    	line-height: 48px;
	}
	.alexaHide{
		opacity: 1;
	}
	.stickyImg{
		/*display: none;*/
	}

	/*Hi-Res*/
	.animate{
		display: none;
	}
	
	/*spotify Airplay2 Amazon_Alexa Tidal*/
	.blackUl{
		display: flex;
	    flex-wrap: nowrap;
	    overflow-y: hidden;
	}
	.hideOpacity{
		opacity: 1;
		margin: 0 6px;
		padding: 0px;
	}
	.hideOpacity .imgIcon{
		display: none;
	}
	.opacityTitle{
		display: block;
		text-align: center;
	}
	.opacityDesc{
		font-size: 13px;
    	line-height: 19px;
	}
	.hideOpacity .deviceDesc{
		width: 100%;
		height: 380px;
		padding: 0px 10px 24px 10px;
		position: absolute;
    	bottom: 0px;
	}
	.deviceDescBox{
	    position: absolute;
    	bottom: 45px;
	}
	.opacityDesc{
		display: block;
	}
	.bg_phone1,.bg_phone2,.bg_phone3,.bg_phone4{
	    flex: 0 0 auto;
	    width: 300px;
	    height: 480px;
	    /*height: 288px;*/
	    position: relative;
        border-radius: 4px;
    	overflow: hidden;
	}
	.blackUl .bg_phone1{
		background: url(../img/overview/spotify.webp) no-repeat;
		background-size: 140px;
	    background-position: center;
        background-position-y: 21px;
	}
	.blackUl .bg_phone2{
		background: url(../img/overview/airplay.webp) no-repeat;
		background-size: 140px;
		background-position: center;
	    background-position-y: 21px;
	}
	.blackUl .bg_phone3{
		background: url(../img/overview/amazonAlexa.webp) no-repeat;
		background-size: 140px;
		background-position: center;
	    background-position-y: 21px;
	}
	.blackUl .bg_phone4{
		background: url(../img/overview/tidal@2x.webp) no-repeat;
		background-size: 140px;
		background-position: center;
	    background-position-y: 21px;
	}
	.bg_phone1 .deviceDesc{
		background: linear-gradient(180deg, rgba(115, 66, 39, 0) 0%, #3F1F11 100%);
	}
	.bg_phone2 .deviceDesc{
		background:  linear-gradient(180deg, rgba(30, 32, 80, 0) 0%, #1E2050 100%);
	}
	.bg_phone3 .deviceDesc{
		background: linear-gradient(180deg, rgba(0, 67, 54, 0) 0%, #004336 100%);
	}
	.bg_phone4 .deviceDesc{
		background: linear-gradient(180deg, rgba(50, 30, 78, 0) 0%, #321E4E 100%);
	}
	
	
	.introduce_text{
		width: 100%;
	}
	.introduce_Img{
		display: none;
	}
	
	/*黑色区域*/
	.pcBoxs{
		display: none;
	}
	.h5Box{
		display: flex;
	}
}