@charset "utf-8";
/* CSS Document */

/******************************
本项目属于大屏优先适配小屏幕，但同时也需要适配超超超大屏
[Table of Contents]

1. min-width
2. max-width

******************************/

/************
1. min-width(以上) 小屏优先 小的放上面
************/
@media only screen and (min-width: 1920px){
	body,html
	{
		font-size: 16px;
	}
}
@media only screen and (min-width: 2560px){
	body,html
	{
		font-size: 21px;
	}
}
@media only screen and (min-width: 3840px){
	body,html
	{
		font-size: 31px;
	}
}
@media only screen and (min-width: 5120px){
	body,html
	{
		font-size: 42px;
	}
}
@media only screen and (min-width: 6240px){
	body,html
	{
		font-size: 63px;
	}
}

/************
2. max-width(以下) 大屏优先 大的放上面
************/
@media only screen and (max-width: 1600px)
{
	body,html
	{
		font-size: 14px;
	}
	/**ylisi-albums-album**/
	.vip-modal{
		font-size: 1.2rem;
		width: 70%;
		height:75%;
	}
	.vip-modal .top{
		font-size: 3rem;
		padding-bottom: 1rem;
	}
	.vip-modal .mid1{
		margin-top: 1rem;
	}
	.vip-modal .mid2{
		margin-top: 1rem;
	}
	.vip-modal .mid3{
		margin-top: 2.5rem;
		font-size: 1.5rem;
	}

	.vip-modal button{
		margin-top: 1.5rem;
		padding: .5rem 4rem;
	}

	.vip-modal .mid4{
		margin-top: 2rem;
		font-size: 1rem;
	}

	.product6
	{
		width: calc((100% - 5.8em)/6);
	}
	.product8
	{
		width: calc((100% - 7.8em)/8);
	}
}

@media only screen and (max-width: 1199px)
{
	/**ylisi-albums-album**/
	.vip-modal{
		font-size: 1rem;
		width: 60%;
		height:75%;
	}
	.vip-modal .top{
		font-size: 2.5rem;
		padding-bottom: .5rem;
	}
	.vip-modal .mid1{
		margin-top: .5rem;
	}
	.vip-modal .mid2{
		margin-top: .5rem;
	}
	.vip-modal .mid3{
		margin-top: 1.5rem;
		font-size: 1rem;
	}

	.vip-modal button{
		margin-top: 1rem;
		padding: .5rem 3rem;
	}

	.vip-modal .mid4{
		margin-top: 1.5rem;
		font-size: 1rem;
	}
	.album-info{
		display: flex;
		padding: 2rem 6rem;
	}
	.album-info .left{
		padding-right: 4rem;
	}

	.header_container .container
	{
		max-width: 100%;
	}
	.main_nav
	{
		margin-left: 50px;
	}
	.search
	{
		margin-left: 25px;
	}
	.main_nav > ul > li:not(:last-child)
	{
		margin-right: 40px;
	}
	.products .dd-up{
		font-size: .5rem;
	}
}

@media only screen and (max-width: 1024px)
{
	.logo-wrap {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 10%;
	}

	/**ylisi-models-model**/
	.models-part-one{
		flex-direction: column;
	}
	.models-part-one > div{
		flex-direction: column;
		margin: 0.3rem 0;
	}
	.model-info .detail-mid span{
		margin-right: 2rem;
	}
	.model-info .right .content{
		font-size: 1rem;
		color: #7e7e7e;
		margin: 1em 0;
	}
	.model-avs .title{
		font-size: 1.2rem;
		margin-top: 1rem;
	}
	.model-info .right .link .next{
		float: right;
		margin-right: 0;
	}
	.model-info .right .link .back{
		display: block;
		text-align: center;
		margin-right: 0;
		margin-top: 1rem;
	}

	.model-info .right .link .innerback{
		display: none;
	}
}

@media only screen and (max-width: 800px)
{
	.lang{
		display: none;
	}
	.btn-custom{
		padding: 0.2rem;
	}
	.index-brand{
		margin-top: 1rem;
		height: 5rem;
		background: #e4e4e4;
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
	}

	.index-brand-des{
		font-size: 0.9rem;
	}
	.index-brand .index-brand-btn{
		padding: .2rem 6rem;
	}

	/**ylisi-models-model**/
	.model-info{
		display: block;
	}

	.model-info .detail-top{
		padding: 0 0.2rem;
	}

	.model-info .detail-top .detail-num{
		font-size: 1.5rem;
		line-height: 0.8rem;
	}

	.model-info .detail-top > div{
		padding-top: .2rem;
		flex:1;
		height:3rem;
		margin: 0.5rem;
		margin-top: 0;
		border-radius: 0.3rem;
	}

	.model-info .left{
		padding-right: 0;
	}

	.model-info .detail-left{
		flex: 1;
	}

	.model-info .detail-right{
		flex: 1.2;
	}

	.model-info .detail-mid span{
		margin-right: 1rem;
	}

	.model-info .detail-mid{
		padding: 0 1rem;
		padding-right: 0;
	}

	.model-info .detail-mid .detial-li{
		width: 6rem;
	}

	.model-info .detail-bottom{
		padding: 0 1rem;
		padding-right: 0;
	}

	/**ylisi-albums-album**/
	#gallery.gallery-inner{
		padding: 0;
		margin-top: 0;
	}
	.vip-modal{
		padding: 0;
		font-size: 1.2rem;
		width: 75%;
		height:80%;
		display: flex;
		flex-direction: column;
		justify-content:center;
		align-items: center;
	}
	.vip-modal .top{
		font-size: 2.5rem;
		padding-left: .5em;
		padding-right: .5em;
		padding-bottom: .8rem;
	}
	.vip-modal .mid1{
		margin-top: 1.5rem;
	}
	.vip-modal .mid2{
		margin-top: .5rem;
	}
	.vip-modal .mid3{
		margin-top: 1.5rem;
		font-size: 1.5rem;
	}

	.vip-modal button{
		margin-top: 1.5rem;
		padding: .5rem 3rem;
	}

	.vip-modal .mid4{
		margin-top: 1.5rem;
		font-size: 1.5rem;
	}
	.album-info{
		display: block;
		padding: 0;
	}
	.album-info .left{
		padding-right: 0;
	}

	.album-info .album-left{
		flex: 1;
	}

	.album-info .album-right{
		padding-left: 1rem;
		flex: 2;
	}

	.container-fluid{
		padding: 0 2rem;
	}

	.logo-wrap{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 45%
	}
	.logo-after a{
		font-size: 1.2rem;
	}
	.main_nav,
	.header_social
	{
		display: none;
	}
	.search
	{
		display: none;
	}
	.hamburger
	{
		display: inline-block;
	}
	.home_slider_container
	{
		padding-left: 30px;
		padding-right: 30px;
	}
	.home_slider_title
	{
		font-size: 48px;
	}
	.home_slider_dots_container
	{
		padding-left: 30px;
		padding-right: 30px;
	}
	.avds_container
	{
		height: auto;
		padding-left: 30px;
		padding-right: 30px;
	}
	.avds_small
	{
		width: 100%;
		height: 490px;
	}
	.avds_large
	{
		width: 100%;
		height: 490px;
		margin-top: 30px;
	}
	.product,.productt,.product0,.product6,.product8{
		width: calc((100% - 30px) / 2);
	}
	.products .product_image .dd{
		display: none;
	}
	.icon_box_col:not(:last-child)
	{
		margin-bottom: 60px;
	}
	.icon_box
	{
		padding-left: 80px;
		padding-right: 80px;
	}
	.footer_overlay
	{
		height: 150px;
	}
	.footer_content
	{
		height: 150px;
	}
	.footer_content a{
		margin: 3px;
	}
	.footer_logo,
	.copyright,
	.footer_social
	{
		text-align: center;
		width: 100%;
	}
	.copyright
	{
		margin-top: 15px;
	}
	.footer_social
	{
		margin-top: 21px;
	}
}


@media only screen and (max-width: 767px)
{
	.home_slider_content
	{
		max-width: 100%;
	}
	.home_slider_container
	{
		padding-left: 0px;
		padding-right: 0px;
	}
	.home_slider_dots_container
	{
		display: none;
	}
}

@media only screen and (max-width: 575px)
{
	/**about**/
	.about{
		width: 90%;
	}
	/**ylisi-models-model**/
	.models-part-one{
		font-size: 1rem;
		margin: 1rem 0;
	}
	/**ylisi-albums-album**/
	.overlay-close-button {
		top: 0;
		right: 0;
	}
	.vip-modal{
		font-size: 0.8rem;
	}
	.vip-modal .top{
		font-size: 1.5rem;
		padding-left: .5em;
		padding-right: .5em;
		padding-bottom: .3rem;
	}
	.vip-modal .mid1{
		margin-top: 1rem;
	}
	.vip-modal .mid2{
		margin-top: .5rem;
	}
	.vip-modal .mid3{
		margin-top: 1rem;
		font-size: 0.8rem;
	}
	.vip-modal .mid5{
		font-size: 0.8rem;
		margin: .1rem;
		color: #00baff;
	}

	.vip-modal .mid5 img{
		cursor: pointer;
		width: 2rem;
	}

	.vip-modal button{
		margin-top: 1rem;
		padding: .3rem 2rem;
	}

	.vip-modal .mid4{
		margin-top: 1rem;
		font-size: 1rem;
	}
	#gallery .swipeimg{
		margin: .1rem .1rem;
		height: 5rem;
	}
	.album-info{
		display: block;
		padding: 0;
	}
	.album-info .left{
		padding-right: 0;
	}

	.album-info .album-left{
		flex: 1;
	}

	.album-info .album-right{
		padding-left: 1rem;
		flex: 2;
	}

	.container-fluid{
		padding: 0 5px;
	}
	.menu
	{
		width: 100vw;
		right: -100vw;
	}
	.menu_container
	{
		padding-top: 50px;
	}
	.page_menu_item > a,
	.page_menu_selection li a
	{
		font-size: 16px;
		height: 42px;
		line-height: 42px;
	}
	.header_container
	{
		padding-left: 0px;
		padding-right: 0px;
	}
	.header_content
	{
		height: 60px;
	}
	.logo a,
	.header.scrolled .logo a
	{
		font-size: 18px;
	}
	.home
	{
		height: 100vh;
	}
	.home_slider_container
	{
		padding-left: 0px;
		padding-right: 0px;
		padding-top: 0;
		padding-bottom: 0;
	}
	.home_slider_title
	{
		font-size: 24px;
	}
	.home_slider_subtitle
	{
		font-size: 13px;
		margin-top: 15px;
	}
	.button
	{
		width: 148px;
		height: 41px;
	}
	.button a
	{
		font-size: 13px;
		line-height: 37px;
	}
	.home_button
	{
		margin-top: 32px;
	}
	.copyright
	{
		font-size: 13px;
	}
	.footer_logo a
	{
		font-size: 24px;
	}
	.ylisi-title{
		font-size: 1.5rem;
		color: black;
	}
	.container-fluid{
		padding: 0 0.2rem;
	}
	.search-form .form-control{
		width: 15rem;
	}
	.search-btn{
		padding: 0.34rem 1.4rem;
	}
	.index-search {
		margin: 1rem auto;
		margin-bottom: 0;
	}
	.search-header{
		display: none;
	}
	.search-tags{
		display: none;
		margin-top: 0.8rem;
		size: 0.8rem;
	}
	.search-tags a{
		margin: 1rem 0.5rem;
	}
	/**products**/
	.product_grid{
		justify-content: space-between;
	}
	.product_grid > div{
		margin-bottom: .25rem;
	}
	.product1{
		width: 100%;
		margin-top: 1rem;
		margin-bottom: 0.8rem;
		margin-right: 0;
		margin-left: 0;
		display: inline-block;
	}
	.product,.productt,.product0,.product6,.product8
	{
		width: calc((100% - 0.3em)/2);
		margin-bottom: 0;
		margin-right: 0;
		margin-left: 0;
	}
	.product2
	{
		width: calc((100% - .5em)/3.28);
		margin-bottom: 0;
		margin-right: 0;
		margin-left: 0;
		display: inline-block;
	}
	.product3
	{
		width: calc((100% - .5em)/1.425);
		margin-bottom: 0;
		margin-right: 0;
		margin-left: 0;
		display: inline-block;
	}

	.products .product_image .d {
		padding-top: .2rem;
		height: 3rem;
	}
	.products .dd-up{
		font-size: .5rem;
	}

	/**ylisi-videos-video**/

	#video{
		padding: 0;
	}

	.tipcontent{
		font-size: 1rem;
	}

	.tipcontent a{
		font-size: 1rem;
	}

	/**个人中心**/
	.center{
		padding-top: 1rem;
	}
	.center-left{
		width: 80%;
		padding: 1rem;
		margin-right: 1rem;
	}

	.center-item{
		width:100%;
		margin-bottom: 1rem;
	}

	.center-top{
		padding: 0.5rem;
		text-align: center;
	}

	.center-top img{
		width: 3rem;
		height: 3rem;
		border-radius: 1.5rem;
	}

	.center-top >div{
		display: none;
	}

	.center-top > div{
		margin-top: 1rem;
	}

	.center-bottom{
		margin: 1rem;
		padding-top: 1rem;
	}

	.center-li{
		margin-left: -1rem;
		margin-right: -1rem;
		margin-bottom: 0;
		padding: 1rem 0;
		text-align: center;
	}

	.center-li span{
		display: none;
	}

	.center-li:before{
		width: 2rem;
		height: 2rem;
	}
	/**个人中心**/

}


/************
11. 539px
************/

@media only screen and (max-width: 539px)
{

}

/************
12. 480px
************/

@media only screen and (max-width: 480px)
{
	.icon_box
	{
		padding-left: 30px;
		padding-right: 30px;
	}
}

/************
13. 479px
************/

@media only screen and (max-width: 479px)
{
	.avds_xl_content
	{
		padding: 30px;
	}
}

/************
14. 400px
************/

@media only screen and (max-width: 320px)
{
	body
	{
		font-size: 12px;
	}

	.search-form .form-control{
		width: 13rem;
	}
	.search-btn{
		padding: 0.34rem 1.3rem;
	}
}