@media only screen and (max-width : 1240px) {
	{}
	#section1 .list-on-first ul li:nth-child(1) {
	   width: 222px;
	}
    #section2 ul li {
        width: 33% !important;
    }
    #section3 ul li {
        width: 32% !important;
        
    }
    #section3 ul li > div {
        max-width: 100% !important;
    }
    #section3 ul li > div div.text p {
        font-size: 14px;
    }
    .footer .right,
    .footer .center,
    .footer .left {
        width: 33%;
    }
}

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

	#section1 .list-on-first ul li {
		width: 100% !important;
		margin-bottom: 14px;
		display: block;
	}
    .section5 .right-text {
        padding-left: 36px;
    }
    .footer .right {
        float: next;
        text-align: center;
        width: 100%;
    }
    .footer .left {
        text-align: center;
        width: 100%;
        margin-bottom: 20px;
    }
	#section1 .list-on-first {
		padding-bottom: 40px;
		padding-left: 40px;
	}
	#section1 .list-on-first ul li > div {
		width: auto !important;

	}
	
	#section2 ul li > div div.img,
	#section2 ul li > div div.text {
		width: 96% !important;
		padding-left: 0;
		margin-left: 0;
		margin-bottom: 10px;
		text-align: center;
		margin-left: 2%;
		margin-right: 2%;
	}
	#section4 ul li {
		width: 49%;
	}
	#section5 .colls ul li {
		width: 31%
	}
	#section6 .buy-product > div.cl2 {
		width: 520px;
	}
	#section6 .buy-product > div.cl2 p,
	#section6 .buy-product > div.cl2 li {
		font-size: 14px;
	}
	#section6 .buy-product > div.cl1 {
		padding: 14px;
	}
	#section6 .buy-product > div.cl3 .count {
		margin-bottom: 30px;
	}
    .footer .right,
    .footer .center,
    .footer .left {
        width: 33%;
        text-align: left;
    }
}

@media only screen and (max-width : 1140px) {
	#section6 .buy-product > div.cl3 {
		width: 190px;
		padding: 21px 15px
	}
    .section5 .left-img img  {
        width: 300px;
    }
    .section5 .right-text {
        width: calc(100% - 340px);
        padding-left: 30px;
    }
    .section5 .line p {
        margin-left: 330px;
    }
    
    
}

@media only screen and (max-width : 1100px) {
    
	#section6 .buy-product > div.cl2 {
	    width: calc(100% - 340px);
	}#section1 .inside .wrapper .left .form {
	   padding-left: 15px;
       padding-right: 15px;
	}
    #section1 .inside .wrapper .left .form .last label {
        width: 87%;
    }
	#section6 .buy-product > div.cl3 {
		width: 400px;
		display: block;
		margin: 20px auto;
	}
	#section8 h3 {
		font-size: 34px;
	}
	#section7 {
		margin-top: 100px;
	}

}

@media only screen and (max-width : 1024px) {
	#section7 ul li {
		width: 22%;
		text-align: center;
		margin-bottom: 10px;
	}
    
	#section7 ul li img {
		max-width: 100%;
	}
	#section7 h3 {
		margin-bottom: 50px;
	}
	#section8 p {
		font-size: 17px;
	}
	#section8 h3 {
		font-size: 30px;
	}
	#section5 .colls ul li {
		padding: 20px 14px;
	}
    #section3 ul li {
        width: 33%;
    }
}

@media only screen and (max-width : 760px) {
	#section3 ul li {
		width: 100% !important;
		margin-bottom: 40px;
	}
	#section3 ul li > div div.img {
		vertical-align: top;
		display: inline-block;
	}
	#section3 ul li > div {
		width: auto;
	}
    #section3 ul li img {
        display: inline-block;
        width: 280px;
    }
	#section3 ul li > div div.text {
		width: calc(100% - 320px);
		margin-left: 10px;
		display: inline-block;
		vertical-align: top;
	}
	#section3 ul li > div div.text h4 {
		margin-bottom: 6px;
	}
	#section8 .right img {
		width: 300px;
	}
	#section8 .left {
		padding-top: 40px;
	}
}
@media only screen and (max-width : 900px) {
    {}
    .footer .right,
    .footer .center {
        width: 37%;
    }
    
    .footer .left {
        width: 26%;
    }
}
@media only screen and (max-width : 860px) {
    {}
    .section5 .left-img img {
        width: 260px;
    }
    .section5 .right-text p {
        font-size: 18px;
    }
    .section5 .line p {
        margin-left: 290px;
    }
    .section5 .right-text {
        padding-left: 30px;
        padding-top: 0;
        width: calc(100% - 290px);
    }
}
@media only screen and (max-width : 800px) {
	#section4 ul li {
		width: auto;
		margin-bottom: 30px;
	}
  .footer .flex {
    justify-content: center;
  }
    .footer .center,
    .footer .left {
        width: 40%;
        padding: 20px 4%;
    }
    .footer .right {
        margin-top: 30px;
        width: auto;
    }
    #section1 .inside .wrapper .left .form .row {
        width: 49.5%;
        display: inline-block;
        vertical-align: top;
    }
    #section1 .inside .wrapper {
        padding-top: 0;
    }
    #section1 .inside .wrapper .left {
        width: 100%;
        box-sizing: border-box;
    }
	#section7 ul li {
		width: 48%
	}
    #section3 ul li > div img {
		width: 240px
    }
    #section3 ul li > div div.text {
		width: calc(100% - 290px);
    }
	#section5 .colls ul li {
		margin-bottom: 30px;
		width: auto;
	}
	#section1 h1 {
		width: auto;
		text-align: center;
		font-size: 30px;
	}
	#section1 h2 {
		text-align: center;
		max-width: 100%
	}
	#section1 .order {
		text-align: center;
	}
	#section2 ul li {
		margin-bottom: 20px;
		width: 100% !important;
	}
	#section2 ul li > div div.img {
		vertical-align: middle;
		width: auto !important;
		display: inline-block;
	}
	#section2 ul li > div div.text {
		vertical-align: middle;
		display: inline-block;
		width: calc(100% - 180px) !important;
		text-align: left;
	}
	#section2 ul li > div div.text h4 {
		margin-bottom: 4px;
	}
	#section1 {
		background-size: cover;
	}
	#section4 .title h3 {
		text-align: center;
	}
	#section4 .title p {
		text-align: center;
	}
	#section6 .buy-product > div.cl1 {
		width: 100%;
		text-align: center;
	}
	#section6 .buy-product > div.cl2 {
		width: 100%;

	}
    #section1 .inside .wrapper .right {
        width: 100%;
        margin-top: 20px;
        text-align: center;
    }
    #header {
        text-align: center;
    }
    .director > div {
        padding-right: 10px;
    }
    #slider .caption {
        max-width: 100%;
        width: 540px;
        text-align: right;
    }
    #slider {
        padding-top: 1px;
        height: 520px;
        background-size: cover;
    }
    
    #slider .caption h1 {
        font-size: 26px;
    }
    #slider .caption h2 {
        font-size: 20px;
    }
    #section1 .inside .wrapper .left .form .row input[type="text"] {
        height: 60px;
    }
    #section1 .inside .wrapper .left .form .row {
        margin-top: 0;
    }
}
@media only screen and (max-width : 700px) {
    {}
    .section5 .left-img {
        display: block;
        width: 100%;
        text-align: center;
    }
    .section5 .right-text {
        text-align: center;
        width: 100%;
        padding-left: 0;
        margin-top: 10px;
    }
    .section5 .line {
        margin-top: 20px;
    }
    .section5 .line p {
        margin-left: 20px;
        text-align: left;
    }
}
@media only screen and (max-width : 600px) {
    {}
    #slider .caption h1 {
        font-size: 26px;
    }
    #slider .caption h2 {
        font-size: 20px;
    }
    #section1 .inside .wrapper .left .form .row {
        width: 100%;
        display: block;
    }
    #slider {
        
        background-position: -180px 0 !important;
    }
    #section1 .inside .wrapper .left .form .last label {
        width: 86%;
    }
    #section3 ul li > div {
        text-align: center;
        justify-content: center;
    }
    #section3 ul li > div div.text {
        text-align: center;
        margin-left: 0;
        width: 100%;
    }
}
@media only screen and (max-width : 480px) {
	#section1 h1 {
		font-size: 26px;
	}
    #slider .caption h1 {
        margin-top: 306px;
    }
    #slider .caption h2 {
        background: rgba(140,190,47,0.6);
    }
    #section1 .inside .wrapper .left .form .last label {
        width: 85%;
    }
    #section1 .inside .wrapper .left .form {
        padding-left: 9px;
        padding-right: 9px;
    }
    #slider .caption h2 {
        padding: 20px 0;
        text-align: center;
    }
    #slider .caption h1 {
        text-align: center;
        margin-left: 0;
    }
    #section3 ul li > div img {
        width: auto;
    }
    .director > div {
        display: block;
        text-align: center;
        padding: 14px;
    }
    .director {
        text-align: center;
    }
    .director > div img {
        max-width: 100%;
    }
    #slider {
        background-position: -290px 0 !important;
    }
    #section1 .inside .wrapper .right p {
        margin-left: 0;
    }
	#section1 h2 {
		font-size: 15px;
	}
	#section1 .list-on-first {
		padding-left: 10px;
	}
	#section2 h3 {
		font-size: 24px;
	}
	#section3,
	#section2 {
		padding-bottom: 30px;
	}
	#section3 ul li > div div.text,
	#section3 ul li > div div.img,
	#section2 ul li > div div.img,
	#section2 ul li > div div.text {
		width: 100%  !important;
		margin-right:  0 !important;
		margin-left: 0 !important;
		text-align: center;
	}
	#section8 .left {
		text-align: center;
		margin-bottom: 15px;
	}
	#section8 p
	#section5 .inside .title h3,
	#section8 h3,
	#section7 h3,
	#section4 .title h3 {
		margin-bottom: 30px;
		text-align: center;
		font-size: 20px;
	}
	#section6 .buy-product > div.cl2 ul li {
		font-size: 14px;
	}
	#section4 ul li > div {
		padding: 20px
	}
	#section6 .buy-product > div.cl2 h4{
		font-size: 20px;
	}
	#section6 .buy-product > div.cl1 img {
		max-width: 100%;
		box-sizing: border-box;
	}
	#section8 .right {
		float: none;
		padding-right: 20px;
		text-align: center;
	}
	#footer p,
	#footer .call {
		float: none;
		display: block;
		text-align: center;
		padding-bottom: 10px;
	}
	#header .info p {
		font-size: 14px;
	}
	#header .info h5 {
		font-size: 14px;
	}
	#header .logo {
		display: block;
		text-align: center;
	}
	#header .info {
		display: block;
		float: none;
		text-align: center;
	}
    
    .footer .center, .footer .left, .footer .right {
        width: 96%;
        padding: 20px 2%;
        
    }
}