﻿
@media only screen and (max-width: 1680px){
	.program-info-box{
		padding-left: 15%;
	}
	.question-list-box{
		width: 80%;
	}
}
@media only screen and (max-width: 1366px){

}
@media only screen and (max-width: 1200px){
	.about-box{
		width: 95%;
	}
	.footer-box{
		width: 95%;
	}
	.header-logo{
		width: 270px;
		font-size: 30px;
	}
	.header-menu{
		width: calc(100% - 270px);
	}
	.header-box{
		width: 95%;
	}
}
@media only screen and (max-width: 1024px){
	.program-box, .question-box{
		width: 100%;
		display: block;
		padding: 50px 0;
	}
	.program-box{
		background-color: #FFF;
	}
	.question-box{
		height: 400px;
	}
	.problem-separated-box{
		display: none;
	}
	#problem{
		padding: 0;
	}
	.header-menu li{
		padding-left: 20px;
	}
	.header-logo {
		width: 255px;
	}
	.header-logo span{
		width: 25px;
	}
	.header-menu {
		width: calc(100% - 255px);
	}
}
@media only screen and (max-width: 800px){
	.header-menu{
		display: flex;
		position: fixed;
		width: 250px;
		max-width: 100%;
		top: calc(50% - 135px);
		left: calc(50% - 125px);
		flex-direction:column;
		background-color: rgba(0,0,0,0.7);
		text-align: center;
		padding: 20px 0;
		border-radius: 10px;
	}
	.header-menu li:hover{
		color: #FFF;
	}
	.header-menu li a:after{
		display: none;
	}
	.header-menu li{
		padding-top: 10px;
		font-size: 24px;
	}
	.rwd-menu{
		display: block;
	}
	
	.header-menu li{
		width: 100%;
		display: block;
		padding-left: 0;
	}
	.about-img-box, .about-info-box{
		width: 100%;
		float: none;
	}
	.about-title-box{
		left: 0;
	}
	.about-info-box{
		padding: 0;
	}
	.about-img-box{
	
		box-sizing: border-box;
		width: 600px;
		max-width:100%;
	}
	.about-box{
		padding: 0 30px;
		box-sizing: border-box;
	}
	#about{
		padding: 50px 0;
	}
	.guarantee-info-box{
		float: none;
		width: 520px;
		padding-left: 0;
		margin: 0 auto;
	}
	.program-line-bottom{
		right: 0;
		width: 70%;
	}
	.line-link{
		width: 45px;
	}
	.footer-link-box,
	.footer-info{
		float: none;
	}
	.footer-link-box{
		text-align: left;
	}
	.footer-box li:last-child{
		padding-bottom: 10px;
	}
	.footer-link{
		padding-bottom: 10px;
		width: 100%;
		display: block;
	}
}
@media only screen and (max-width: 768px){
	.traffic-list4-box,
	.about-info-title,
	.about-info-p,
	.guarantee-title,
	.guarantee-title span,
	.guarantee-list-box li,
	.program-title-box,
	.program-info-box li,
	.question-title-box,
	.question-list-box li,
	.contact-title,
	.contact-ps,
	.contact-list li{
	 opacity: 1;
	 animation: none!important;
	}

	.about-title-box span,
	.program-line-top,
	.program-line-bottom,
	.contact-line{
	  transform: scale(1);
	  animation: none!important;
	}
	.guarantee-title span {
    transform: scale(1);
	}
	header{
		background-color: #000;
	}
	.header-line-icon-box{
		background-color: #000;
		width: 100vw;
		left: -2.5vw;
		box-sizing: border-box;
		padding: 5px 2.5vw;
		top: 100%;
		transition: all .3s linear;
	}
	.header2 .header-line-icon-box{
		background-color: rgba(0, 0, 0, 0.6);
	}
	.index-banner-box{
		margin-top: 135px;
	}
	.rwd-menu span {
		width: 30px;
	}
	.rwd-menu span:nth-child(even) {
		margin: 6px auto;
		transition: all .4s linear;
	}

}
@media only screen and (max-width: 750px){
	.banner-arrow{
		width: 20px;
		left: calc(50% - 10px);
	}
	.footer-box{
		padding-left: 25px;
		box-sizing: border-box;
	}
	.guarantee-info-box{
		width: 410px;
	}
	.size-title{
		font-size: 65px;
	}
	.guarantee-title{
		font-size: 30px;
	}
	.program-info-box{
		padding-left: 40px;
	}
	.size-list-num{
		margin-right: 0;
	}
	.guarantee-list-box li{
		letter-spacing: 1px;
	}
	.size-list-num{
		font-size: 24px;
	}
	.guarantee-list-box li span:nth-child(2){
		font-size: 16px;
	}
}
@media only screen and (max-width: 480px){
	.footer-box li{
		display: block;
		width: 100%;
	}
	.about-title-box{
		margin: 0 auto;
	}
	.index-banner-box, 
	.index-banner-img, 
	.index-banner-slong-box, 
	.index-video-box, 
	.index-video, 
	.index-video-bg{
		height: 280px;
	}
	.banner-arrow{
		width: 15px;
		left: calc(50% - 7.5px);
	}
	.index-banner-slong, .index-video-slong{
		font-size: 16px;
	}
	.about-info-p-box{
		padding-top: 20px;
	}
	.about-img-box{
		width: 300px;
		height: 200px;
		margin: 0 auto;
	}
	.line-link{
		bottom: 0;
		width: 25px;
	}
	.guarantee-box{
		width: 95%;
		display: block;
		margin: 0 auto;
	}
	.program-title-box{
		padding-left: 0;
		text-align: center;
	}
	.program-line-top{
		width: 80%;
	}
	.program-info-box{
		padding-left: 0;
		width: 95%;
		display: block;
		margin: 0 auto;
	}
	.contact-box{
		width: 95%;
		display: block;
		margin: 0 auto;
	}
	.contact-title{
		font-size: 30px;
	}
	.contact-ps{
		padding-bottom: 10px;
	}
	.contact-demo-box{
		display: block;
	}
	.contact-demo3-2{
		width: 100%;
	}
	.left{
		width: 100%;
		float: none;
	}
	.right{
		width: 100%;
		float: none;
	}
	.demo--radioInput:after{
		left: 0.72px;
	}
	.button-box{
		float: none;
		margin: 0 auto;
		margin-top: 20px;
	}
	.footer-box{
		padding-left: 0;
	}
	.footer-info span{
		display: block;
	}
	#about-anchor,
	#guarantee-anchor,
	#contact-anchor,
	#problem-anchor{
		position: relative;
		top: -30px;
	}
	.question-box{
		height: inherit;
   		 min-height: 400px;
	}
	.question-list-box{
		padding-bottom: 150px;

	}
	.line-link{
		transform: rotate(270deg);
		left: 23px;
	}
	.header-logo{
		font-size: 28px;
		line-height: 52px;
	}
	.header-logo span:first-child {
   		margin-right: 5px;
	}
	.header-logo span:last-child {
    	margin-left: 5px;
	}
	.rwd-menu span:nth-child(even){
		margin: 6px auto;
	}
	.rwd-menu span{
		width: 32px;
	}
	.rwd-menu span:nth-child(4){
		top: -21px;
	}

}
@media only screen and (max-width: 320px){
	.header2 .header-logo{
		font-size: 28px;
	}
	.header-phone-box{
		font-size: 22px;
	}
}