/* 大标题 */
@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/banner.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
/*bananr样式*/
.banan_boxs{
    text-align: left;
    margin: 150px 0 0 130px;
    color:#fff;
}
.banner_text{
	position: absolute;
	top: 0;
	right:0;
	left:0;
	bottom:0;
	color: #000;
}
.bananer_title{
	font-size: 41px;
	font-weight: bold;
	font-family: Roboto-Bold-title;
}
.titleImg{
	position: relative;
	top: -3px;
	width: 100px;
}
.bananer_title2{
	font-size: 23px;
	font-family: Roboto-Regular-blackRule;
}
.bananer_describe{
	margin:20px 0;
	font-size: 16px;
	font-family:Roboto-Light-whiteDesc;
}
.banner-icon{
	display: none;
}
.banan_btn_shop{
	width: 500px;
}
.banan_btn_shop a{
	margin: auto;
}
.titleSty{
	font-size: 39px;
    font-weight: bold;
    color: #333333;
    text-align: center;
    font-family: Roboto-Bold-title;
}
.titleSty-desc{
	font-size: 17px;
	color: #333;
	text-align: center;
	padding: 40px 0;
	width: 750px;
	margin: auto;
	font-family:Roboto-Light-whiteDesc;
}
.blockSize{
	width: 1200px;
	margin: auto;
	padding: 120px 0;
}
/*lookBaner*/
.lookBaner{
	background-image: url(../img/look.webp?v=111);
	height: 850px;
	background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff;
}
.lookBaner .titleSty,.lookBaner .titleSty-desc{
	color: #fff;
}
.looking-box{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: 720px;
    margin: auto;
}
.looking-icon{
	text-align: center;
	width:120px;
}
.looking-icon p{
	margin-top:16px;
	font-size: 13px;
	color: #fff;
	font-family: Roboto-Light-whiteDesc;
}
.xsad .displayArea{
	width: 1200px;
}
/*shop now*/
.shopBtn{
    background: #FFF;
    width: 214px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    color: #000;
    border-radius: 3px;
    margin-top: 90px;
    font-size: 17px;
    display: block;
    font-family: Roboto-Bold-3;
    display: inline-block;
    margin-right: 30px;
}
.youtobe{
    width: 214px;
    height: 56px;
    line-height: 56px;
    text-align: center;
    border-radius: 3px;
    margin-top: 90px;
    font-size: 17px;
    display: block;
    font-family: Roboto-Bold-3;
    display: inline-block;
    border: 1px solid #fff;
	color: #fff;
}
.youtobe:hover{
	color: #fff;
}
.swiper {
    width: 100%;
    height:530px;
}

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* 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;
  }

  .swiper-slide img {
    display: block;
    width: 85%;
    object-fit: cover;
  }

  .swiper {
    margin-left: auto;
    margin-right: auto;
  }
  /*Personalize your daily morning*/
 .personalize{
 	display: flex;
 }
 .personalize-left{
 	width: 48%;
 	padding-right: 50px;
 }
 .personalize-right{
 	width: 52%;
 	overflow: hidden;
 }
 .ipone-show{
 	display: none;
 }
 .personalize-title{
 	width: 477px;
	height: 99px;
	font-size: 39px;
	font-family: Roboto-Bold-title;
	font-weight: bold;
	color: #333333;
	line-height: 52px;
	margin-top:40px;
 }
 .personalize-ul{
 	list-style: disc;
 	margin-top:30px;
 	padding-left:20px;
 	font-size:17px;
 	color: #333;
 }
 .personalizeTwo-desc,.personalize-ul li,.personalize-icon p,.customize div p,.Enjoy-icon p{
 	font-family:Roboto-Light-whiteDesc ;
 }
 .personalize-ul li:first-child{
 	margin-bottom:20px;
 }
.personalize-box{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.personalize-icon{
	text-align: center;
	width:105px;
	margin: 30px 0px 0 0;
}
.personalize-two{
	padding-left: 20px;
}
.personalize-icon p{
	margin-top:5px;
	font-size: 13px;
	color: #333;
}
/* 第二个 */
.personalizeTwo{
 	margin-top: 80px;
}
.personalizeTwo .personalize-left{
	padding: 0 0 0 50px;
}
.personalizeTwo-desc{
	font-size: 17px;
	line-height: 21px;
	margin-top: 30px;
}
/*Customize the light settings*/
.customize-desc{
	width: 750px;
	margin: auto;
}
.customize{
	width: 1020px;
	height: 600px;
	text-align: center;
	margin: auto;
}
.customize-icon-box{
	display: flex;
	flex-wrap: wrap;
	padding-top: 40px;
	width: 100%;
}
.customize-icon-box div{
	width: 14%;
}
.customize div p{
	margin: 15px 0 32px 0;
	font-size: 15px;
	color: #666666;
}
.customize-icon-box img{
	width: 42px;
	margin-top: 20px;
}
.yujiabox{
	padding: 0px 10px;
}
.customize .yujiaIcon{
	width: 100%;
}
/*  Personalize  */
.changeBgcolor{
	height:700px;
	background: linear-gradient(180deg, rgba(41, 59, 130, 1) 0%, rgba(122, 92, 73, 1) 100%);
	color: #fff;
}
/*use alexa*/
.useAlexa{
	background: #000;
	color: #fff !important;
}
.useAlexa .titleSty,.useAlexa .titleSty-desc{
	color: #fff;
}
.useAlexa li:hover{
	color: #fff !important;
}
/*The ultimate sound machine with unlimited sound choices*/
.choices-desc{
	margin-top: 90px;
}

/*Which WiiM Product is right for you?*/
.which_three_boxs{
	display: flex;
}
.three_left_text{
	width: 300px;
	text-align: left;
	font-family: Roboto-Regular-blackRule;
}
.three_right_boxs{
	width: calc(100% - 300px);
}
.three_right_boxs .col-xs-3{
	font-family: Roboto-Bold-title;
}
.provided{
	text-align: center;
}
.compareTable{
	text-align: right;
	background: #fff;
	margin-bottom: 30px;
	margin-top:40px
}
.miniTable{
	display: none;
}
/*.twoHeader{
	display: block;
}*/
/* USE Alexa*/
.introduce{
	margin-top: 40px;
	font-family: Roboto-Light-whiteDesc;
	font-size: 16px;
	line-height: 27px;
	color: #ccc;
}
.hideOpacity{
	cursor: pointer;
	padding: 15px 0;
	font-family: Roboto-Bold-title;
	color: #666;
}
.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;
}
.pcBoxs{
	margin-top:30px;
}
.showOpacity{
	color: #fff;
	display: block;
}
.showOpacity .opacityDesc{
	/*display: block;*/
	display: none;
}
.introduce_text{
	width:50%;
}
.introduce_Img{
	width:50%;
}
.introduce_Img img{
	width: 100%;
}
.introduce_Img .opacityDesc{
	padding-top: 0px;
}
/* Enjoy */
.Enjoy{
	width: 1306px;
}
.Enjoy-border-boxs{
	display: flex;
    justify-content: space-between;
}
.col-xs-6-Enjoy{
	width: 508px;
}
.EnjoyUl{
	list-style:unset;
	padding-left: 20px;
	padding-right: 20px;
}
.EnjoyUl li{
	padding: 10px 0;
	font-family:Roboto-Light-whiteDesc;
	font-size: 17px;
	color: #333;
}
.Enjoy-icon-box{
	width: 748px;
}
.Enjoy-box{
	display: flex;
	flex-wrap:wrap;
	margin: auto;
}
.Enjoy-box .Enjoy-icon{
	width: 16%;
	text-align: center;
}
.Enjoy-box .Enjoy-icon img{
	width: 52px;
	margin-top: 0px;

}
.Enjoy-icon p{
	margin: 16px 0 40px;
	font-size: 17px;
	color: #666666;
}
.last-icon{
	display: flex;
}

.last-icon .Enjoy-icon:nth-child(2){
	padding-right: 30px;
}
.last-icon .Enjoy-icon:nth-child(3){
	padding-right: 40px;
}
.lightApp{
	background-image: url(../img/lightApp.webp);
    height: 800px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    color: #fff;
}
.lightApp-boxs{
	margin-top: 100px;
}
.lightApp .main{
	display: flex;
}
.lightApp-title{
	height: 54px;
	font-size: 39px;
	color: #333333;
	font-weight: bold;
	font-family: Roboto-Bold-title;
}
.lightApp-desc{
	height: 27px;
	font-size: 17px;
	color: #333333;
	margin-top: 20px;
	font-family: Roboto-Light-whiteDesc;
}
.down-logo{
	margin-top:150px
}
.down-logo img{
	width: 160px;
}
/*product is right for you*/
.provided{
	padding-bottom: 10px;
	margin-top:20px;
	border-bottom: 1px solid #e1e1e1;
}
.proBor{
	border:0px;
}
.provided div p{
	display: inline-block;
	font-size: 16px;
	color: #1A1A1A;
	text-align: left;
}
.provided::after{
	content: '';
	display: block;
	clear: both;
}
.pro_title{


}
.col-xs-5{
	width: 40%;
}
.col-xs-5{
	width: 40%;
}
.compareTable-h5{
	direction: none;
}
/* FAQ */
.flexBox{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.faqsText{
	width: 418px;
    padding-top: 25px;
    position: relative;
}
.faqsText_title {
    font-size: 19px;
    font-weight: bold;
    line-height: 22px;
    font-family: Roboto-Bold-title;
}
.faqsText_desc{
	margin-top:8px;
	font-family: Roboto-Light-whiteDesc;
	font-size: 17px;
    color: #848484;
	
}
/*faq*/
.faq-Box{
	padding:26px 43px 48px 41px ;
}

@media (max-width: 979px) { 
	/* FAQ */
	.faqsText{
   		width: 100%;
	}
}
@media (max-width: 767px) {
	/*bananr样式*/
	.bananer_title{
		font-size: 70px;
		padding-top:150px;
	}
	/*Which WiiM Product is right for you*/
	.three_right_boxs{
		width: 100%;
	}
	.three_left_text{
		width: 0px;
	}
	.miniTable{
		display: block;
	}
	.mini_three_left_text{
		width: 400px;
		text-align: left;
		font-family: Roboto-Bold-title;
	}
	.titleSty{
		font-size: 30px;
	}
    /* FAQ */
	.faqsText{
   		width: 100%;
	}
	.col-xs-6{
		width: 50%;
	}
}
@media (max-width: 600px) {
	/*bananr样式*/
	.bananer_title{
		font-size: 50px;
		padding-top:130px;
	}
	.bananer_describe{
		width: 100%;
		margin-top:20px;
	}
	.twoUlPad {
	    padding-right: 45px;
	}
		
	

}
@media only screen and (max-width: 480px){
	.topBananer{
		background-image: url(../img/iphone/banner.webp);
		height: 520px;
	}
	.titleSty{
		font-size: 26px;
		line-height: 30px;
	}
	.titleSty-desc{
		font-size: 14px;
		padding: 20px 0;
		line-height: 16px;
	}
	.blockSize{
		padding: 50px 0;
	}
	.youtobe{
		width: 121px;
	    height: 30px;
	    line-height: 30px;
	    font-size: 12px;
	    margin-top: 215px;
	}
	.shopBtn{
		width: 121px;
	    height: 30px;
	    line-height: 30px;
	    font-size: 12px;
	    margin-top: 215px;
	}
	/*bananr样式*/
	.banan_boxs{
		margin-top: 0px;
		height: 520px;
		width: 328px;
    	margin: auto;
    	text-align: center;
	}
	.bananer_title{
		font-size: 26px;
		padding-top:50px;
	}
	.titleImg{
		width: 70px;
	}
	.bananer_title2{
		font-size: 17px;
	}
	.bananer_describe{
		width: 100%;
		margin-top:20px;
		font-size: 14px;
	}
	.banner-icon{
		/*display: block;*/
		display: flex;
	    width: 328px;
	    justify-content:flex-end;
	    margin: auto;
	    position: relative;
    	bottom: 0px;
    	top:25px;
	}
	/* The wake-up light you've been looking for */
	.lookBaner{
		background-image: url(../img/iphone/lookingBg.webp);
		height: 580px;
	}
	.lookBaner .blockSize{
		padding: 50px 0;
	}
	.lookBaner .titleSty-desc{
		padding: 20px 0;
	}
	.blockSize,.titleSty-desc{
		width: 328px;
	}
	.lookBaner .look-top{
		margin-top: 15px;
	}
	.looking-box{
		width: 328px;
		flex-wrap: wrap;
		justify-content: space-evenly;
	}
	.looking-icon{
		width: 105px;
		font-size: 13px;
	}
	.looking-icon img{
		width:42px
	}
	.looking-icon p{
		margin-top: 10px;
	}
	/* Personalize your daily morning */
	.xsad .displayArea{
		width: 328px;
		max-width: 328px;
	}
	.xsad .titleSty-desc{
		padding: 20px 0 50px;
	}
	/* Wake-up refreshed */
	.personalize{
		flex-wrap: wrap;
	}
	.personalize-title{
		margin-top: 0px;
		font-size: 26px;
		width: 328px;
		text-align: center;
		margin: auto;
		line-height: 30px;
		height: auto;
	}
	.personalize-left,.personalize-right{
		width: 100%;
		padding-right:0px;
		margin-top: 18px;
	}
	.personalize-ul{
		margin-top: 18px;
		font-size: 14px;
	}
	.personalizeTwo{
		margin-top: 50px;
	}
	.personalize-left{
		margin-top: 0px;
	}
	.personalizeTwo .personalize-left{
		padding: 0px;
	}
	.personalize-two{
		padding-left: 0px;
	}
	.personalizeTwo-desc{
		font-size: 14px;
		margin-top: 18px;
	}
	.personalize-icon{
		margin-top:20px;
	}
	.personalize-box{
		justify-content: space-between;
	}
	.ipone-show{
		display: block;
	}
	.ipone-hide{
		display: none;
	}
	/* Comparison Chart */
	.compareTable{
		display: none;
	}
	.customize{
		width: 328px;
		height: 640px;
	}
	.customize-iphone-img{
		display: flex;
		height: 300px;
	}
	.col-xs-7{
		width: 100%;
	}
	.customize-icon-box{
		padding-top:0px;
		width: 100%;
	}
	.customize-icon-box::after{
		content: '';
		display: block;
		clear: both;
	}
	.customize-icon-box div{
		width: 25%;
	}
	.customize-icon-box img{
		margin-top: 0px;
	}
	.customize div p{
		margin: 10px 0 18px 0;
		font-size: 13px;
	}
	/*Use Alexa for seamless voice control*/
	.pcBoxs{
		margin-top: 0px;
	}
	.introduce_text,.introduce_Img{
		width: 100%;	
	}
	.introduce_Img{
		margin-top:15px;
		margin-bottom: 25px;
	}
	.introduce{
		margin-top: 0px;
		font-size: 14px;
		line-height: 19px;
	}
	.opacityTitle{
		font-size: 16px;
	}
	.hideOpacity{
		padding: 9px 0;
	}
	/*Enjoy all your favorite music*/
	.Enjoy-border-boxs{
	    flex-direction: column;
	}
	.col-xs-6-Enjoy,.Enjoy-icon-box{
		width: 100%;
	}
	.EnjoyUl{
		padding-right:0px;
	}
	.EnjoyUl li{
		font-size: 14px;
	}
	.Enjoy-box .Enjoy-icon{
		width: 25%;
	}
	.Enjoy-box .ipone-show img{
		width: 46px;
	}
	.Enjoy-icon p{
		font-size: 14px;
	    margin: 13px 0 24px;
	}
	
	.last-icon .Enjoy-icon:nth-child(2),.last-icon .Enjoy-icon:nth-child(3){
		padding-right: 0;
	}
	/*lightApp*/
	.lightApp{
	    background-image: url(../img/iphone/lightApp.webp?v=333);
		height: 848px;
	}
	.lightApp .blockSize{
		padding:0px;
	}
	.lightApp-title{
		font-size: 26px;
		height:auto;
		padding-bottom: 18px;
	}
	.lightApp-desc{
		font-size: 14px;
		height:auto;
		margin-top:0px;
	}
	.col-xs-6,.col-xs-5{
		width: 100%;
	}
	.lightApp-boxs{
		margin-top: 0px;
	}
	.down-logo{
		margin-top: 505px;
	}
	.ipone-brand{
		display: block;
    	text-align: center;
	}
	.ipone-brand:nth-child(2){
		margin:20px 0;
	}
	/*WiiM Wake-up Light Features*/
	.swiper{
		height: 230px;
	}
	.swiper-slide img{
		width: 100%;
	}
	/* Comparison Chart */
	.compareTable .displayArea{
		overflow: auto;
	}
	.provided{
		width: 530px;
	}
	.compareTable .col-xs-3{
		width: 25%;
	}
	.three_left_text{
		width: 120px;
		font-size: 13px;	
	}
	.compareTable-h5{
		display: block;
	}
	
	.table {
		width:100%;
		color:#242424;	
		overflow-x: scroll;
	}
	.fixedTable {
		width:524px;
		text-align: center;
		border-collapse: collapse;
	}
	.fixedTitle{
		width: 114px;
	    text-align: center;
	    line-height: 16px;
	    font-family: Roboto-Bold-title;
	}
	.fixedTable th{
		font-size: 14px;
	}
	.fixedTable td{
		font-size: 13px;
	}
	.fixedTable tr {
		border: 1px solid #ccc;
	    height: 50px;
	}
	.fixedTable tr:first-child {
		height: 50px;
		line-height: 40px;
		background-color:#e1e1e1;
	}
	.fixedTable td:first-child {
		position:absolute;
		width:114px;
		color:#242424;
		background-color:#e1e1e1;
		border: 1px solid #ccc;
		margin: -1px 0px 0px -1px;
		height: 50px;
		font-family: Roboto-Bold-title;
	}
	.fixedColumn {
		color: rgb(255 95 0);
		width:125px;
	}
	.table-empty{
		
	}
	
	.single-text{
		line-height: 50px;
	}
	.two-text{
		padding-top: 5px;
	}
	.icon-20{
		width: 20px;
	}
	
	/*faq*/
	.faq-Box{
		width: 328px;
		margin: auto;
		padding: 0;
	}
	.faq-Box .flexBox{
		padding-bottom:60px
	}
}