@charset "utf-8";

@media screen and (min-width:1201px) and (max-width:1919px){
   #wrapper{
		width:100%;
		margin:auto;
	}
	#contact-section{
		height: 545px;
	}
	.container, .container2 {
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
    }

}
@media screen and (min-width:1024px) and (max-width:1200px){
	#wrapper{
		width:100%;
		margin:auto;
	}
  	.container, .container2 {
      max-width: 90%;
      margin-left: auto;
      margin-right: auto;
    }
	.container2{
		max-width: 90%;
	}

	#contact-section{
		height: 465px;
	}
	#contact-section .container h1{
		margin-top:100px;

	}

}
@media screen and (min-width:981px) and (max-width:1023px){
#wrapper{
	width:100%;
	margin:auto;
}
#contact-section{
	height:445px;
}
main #sub_page > .container .section .text-container{
	width:100%;
}
.container, .container2 {
	max-width: 85%;
	margin-left: auto;
	margin-right: auto;
}
.container:after {
	content: " ";
	display: block;
	clear: both;
}
}

@media screen and (min-width:801px) and (max-width:980px){
	#wrapper{width:100%; margin:auto;}
	#contact-section{height:365px;}
	#contact-section .container{height:auto; padding-top:0;}
	#contact-section .container h1{padding-top: 40px;}
	main #sub_page{background: url(../images/background/bg_sub2.png) no-repeat; background-position:top; background-size:100%;}
	main #sub_page > .container .section .text-container{width:100%;}
	.container, .container2 {max-width: 85%; margin-left: auto; margin-right: auto;}
	.container:after {content: " "; display: block; clear: both;}
	#contact-section .container h1{margin-top:0;}
}

@media screen and (min-width:761px) and (max-width:800px){
	#wrapper{width:100%; margin:auto;}
	#contact-section{height:345px;}
	#contact-section .container{height:auto; padding-top:0;}
	#contact-section .container h1{padding-top: 40px; margin-top:0;}
	main #sub_page{background: url(../images/background/bg_sub2.png) no-repeat; background-position:top; background-size:100%;}
	main #sub_page > .container .section .text-container{width:100%;}
	.container, .container2 {max-width: 80%; margin-left: auto; margin-right: auto;}
	.container:after {content: " "; display: block; clear: both;}
	header nav ul li{text-align: center;}
	footer ul li{padding: 0;}
	
}

@media screen and (min-width:681px) and (max-width:760px){
 
	#wrapper{width:100%; margin:auto;}
	#contact-section{height:345px;}
	#contact-section .container{height:auto; padding-top:0;}
	#contact-section .container h1{padding-top: 40px; margin-top:0;}
	main #sub_page{background: url(../images/background/bg_sub2.png) no-repeat; background-position:top; background-size:100%;}
	main #sub_page > .container .section .text-container{width:100%;}
	.container, .container2 {max-width: 80%; margin-left: auto; margin-right: auto;}
	.container:after {content: " "; display: block; clear: both;}

	header nav ul li{text-align: center;}

	
	#contact-section{height:330px;background-size:cover;position: relative;}
	#contact-section .container{padding-top: 45px;}
	#contact-section .container h1{font-size: 40px;padding-top: 20px;}
	#contact-section .container p{text-align: center;font-size: 14px;color: #ffffff;font-weight: 400;letter-spacing: -1px;padding-top: 15px;}
	#contact-section .container a{margin: 20px auto;width: 60%;height: 50px;line-height: 50px;font-size:20px;}
	footer ul li{padding: 0;}
}

@media screen and (min-width:571px) and (max-width:680px){

	#wrapper{width:100%; margin:auto;}
	#contact-section{height:300px;background-size:cover;position: relative;}
	#contact-section .container{padding-top: 45px;height:auto;}
	#contact-section .container h1{font-size: 33px;padding-top: 20px;margin-top:0;}
	#contact-section .container p{text-align: center;font-size: 15px;color: #ffffff;font-weight: 400;letter-spacing: -1px;padding-top: 10px;}
	#contact-section .container a{margin: 10px auto; width: 70%;height: 40px;line-height: 35px;font-size:18px;}

	main #sub_page > .container{top:300px;}
	main #sub_page{background: url(../images/background/bg_sub2.png) no-repeat; background-position:top; background-size:100%;}
	main #sub_page > .container{margin-bottom: 400px;}
	main #sub_page > .container .section .text-container{width:100%;}
	.container {max-width: 80%; margin-left: auto; margin-right: auto;}
	.container2 {max-width: 100%;}
	.container:after {content: " "; display: block; clear: both;}
	footer ul li{padding: 0;}

	
}
 
@media screen and (min-width:421px) and (max-width:570px){
	#wrapper{width:100%; margin:auto;}
	#contact-section{height:345px;}
	#contact-section .container{height:auto; padding-top:0;}
	#contact-section .container h1{padding-top: 40px; margin-top:0;}

	
	main #sub_page > .container{top:250px;}
	main #sub_page{background: url(../images/background/bg_sub3.png) no-repeat; background-position:top; background-size:100%;}
	main #sub_page > .container{margin-bottom: 400px;}
	main #sub_page > .container .section .text-container{width:100%;}
	.container {max-width: 80%; margin-left: auto; margin-right: auto;}
	.container2 {max-width: 100%;}
	.container:after {content: " "; display: block; clear: both;}



	#contact-section{height:300px;background-size:cover;position: relative;}
	#contact-section .container{padding-top: 45px;}
	#contact-section .container h1{font-size: 33px;padding-top: 20px;}
	#contact-section .container p{text-align: center;font-size: 15px;color: #ffffff;font-weight: 400;letter-spacing: -1px;padding-top: 10px;}
	#contact-section .container a{margin: 10px auto; width: 70%;height: 40px;line-height: 35px;font-size:18px;}

	ul li{padding: 0;}

	
  /*footer*/
  
  footer .foot_menu{
    height: 60px;
    line-height: 60px;
  }
  footer .foot_menu ul{
    width: 170px;
    height: 60px;
  }
  footer .foot_menu ul li a{
    font-size: 14px;
  }
  footer .ad{
    font-size: 13px;
	height: 80px;
  }
  footer .ad span{
    display: block;
  }
  footer .foot_mark ul{
    width: 280px;
  }
  footer .foot_mark ul li{
    width: auto;
    margin-right: 20px;
  }
  footer .foot_mark ul li:first-child img{width: 90px;}
  footer .foot_mark ul li:last-child img{width: 170px;}

}

@media screen and (min-width:361px) and (max-width:420px){
	
	#wrapper{width:100%; margin:auto;}
	#contact-section{height:345px;}
	#contact-section .container{height:auto; padding-top:0;}
	#contact-section .container h1{padding-top: 40px; margin-top:0;}

	main #sub_page > .container{top:230px;}
	main #sub_page{background: url(../images/background/bg_sub2.png) no-repeat; background-position:top; background-size:100%;}
	main #sub_page > .container{margin-bottom: 300px;}
	main #sub_page > .container .section .text-container{width:100%;}
	.container {max-width: 85%; margin-left: auto; margin-right: auto;}
	.container2 {max-width: 100%;}
	.container:after {content: " "; display: block; clear: both;}



	#contact-section{height:280px;background-size:cover;position: relative;}
	#contact-section .container{padding-top: 0;}
	#contact-section .container h1{font-size: 38px;padding-top: 50px;}
	#contact-section .container p{text-align: center;font-size: 13px;color: #ffffff;font-weight: 400;letter-spacing: -1px;padding-top: 10px;}
	#contact-section .container a{margin: 15px auto; width: 70%;height: 40px; line-height: 35px; font-size:16px;}

  /*footer*/
  
  footer .foot_menu{
    height: 60px;
    line-height: 60px;
  }
  footer .foot_menu ul{
    width: 170px;
    height: 60px;
  }
  footer .foot_menu ul li a{
    font-size: 14px;
  }
  footer .ad{
    font-size: 11px;
  }
  footer .ad span{
    display: block;
  }
  footer .foot_mark ul{
    width: 240px;
  }
  footer .foot_mark ul li{
    width: auto;
    margin-right: 20px;
  }
  footer .foot_mark ul li:first-child img{width: 70px;}
  footer .foot_mark ul li:last-child img{width: 150px;}

	footer ul li{padding: 0;}
}


@media screen and (min-width:321px) and (max-width:360px){
   
	#wrapper{width:100%; margin:auto;}
	#contact-section{height:345px;}
	#contact-section .container{height:auto; padding-top:0;}
	#contact-section .container h1{padding-top: 40px; margin-top:0;}

	main #sub_page > .container{top:230px;}
	main #sub_page > .container{margin-bottom: 300px;}
	main #sub_page{background: url(../images/background/bg_sub3.png) no-repeat; background-position:top; background-size:100%;}
	main #sub_page > .container .section .text-container{width:100%;}
	
	.container {max-width: 80%; margin-left: auto; margin-right: auto;}
	.container2 {max-width: 100%;}
	.container:after {content: " "; display: block; clear: both;}

	main #sub_page > .container .section .text-container{width:100%;}
	main #sub_page > .container .section1 h1{font-size:28px; width:100px; height:50px; margin-bottom:10px;}
	main #sub_page > .container .section p{font-size:13px;}
	main #sub_page > .container .section1 br{display:none;}


	#contact-section{height:280px;background-size:cover;position: relative;}
	#contact-section .container{padding-top: 0;}
	#contact-section .container h1{font-size: 38px;padding-top: 50px;}
	#contact-section .container p{text-align: center;font-size: 13px;color: #ffffff;font-weight: 400;letter-spacing: -1px;padding-top: 10px;}
	#contact-section .container a{margin: 15px auto; width: 70%;height: 40px; line-height: 35px; font-size:16px;}

	
  /*footer*/
  
  footer .foot_menu{
    height: 60px;
    line-height: 60px;
  }
  footer .foot_menu ul{
    width: 170px;
    height: 60px;
  }
  footer .foot_menu ul li a{
    font-size: 14px;
  }
  footer .ad{
    font-size: 11px;
  }
  footer .ad span{
    display: block;
  }
  footer .foot_mark ul{
    width: 240px;
  }
  footer .foot_mark ul li{
    width: auto;
    margin-right: 20px;
  }
  footer .foot_mark ul li:first-child img{width: 70px;}
  footer .foot_mark ul li:last-child img{width: 150px;}
  footer ul li{padding: 0;}
}
@media screen and (min-width:0px) and (max-width:320px){
   
	#wrapper{width:100%; margin:auto;}
	#contact-section{height:345px;}
	#contact-section .container{height:auto; padding-top:0;}
	#contact-section .container h1{padding-top: 40px; margin-top:0;}

	main #sub_page > .container{top:230px;}
	main #sub_page > .container{margin-bottom: 300px;}
	main #sub_page{background: url(../images/background/bg_sub3.png) no-repeat; background-position:top; background-size:100%;}
	main #sub_page > .container .section .text-container{width:100%;}
	
	.container {max-width: 80%; margin-left: auto; margin-right: auto;}
	.container2 {max-width: 100%;}
	.container:after {content: " "; display: block; clear: both;}

	main #sub_page > .container .section .text-container{width:100%;}
	main #sub_page > .container .section1 h1{font-size:28px; width:100px; height:50px; margin-bottom:10px;}
	main #sub_page > .container .section p{font-size:13px;}
	main #sub_page > .container .section1 br{display:none;}


	#contact-section{height:280px;background-size:cover;position: relative;}
	#contact-section .container{padding-top: 0;}
	#contact-section .container h1{font-size: 38px;padding-top: 50px;}
	#contact-section .container p{text-align: center;font-size: 13px;color: #ffffff;font-weight: 400;letter-spacing: -1px;padding-top: 10px;}
	#contact-section .container a{margin: 15px auto; width: 70%;height: 40px; line-height: 35px; font-size:16px;}

	
  /*footer*/
  
  footer .foot_menu{
    height: 60px;
    line-height: 60px;
  }
  footer .foot_menu ul{
    width: 170px;
    height: 60px;
  }
  footer .foot_menu ul li a{
    font-size: 14px;
  }
  footer .ad{
    font-size: 11px;
  }
  footer .ad span{
    display: block;
  }
  footer .foot_mark ul{
    width: 240px;
  }
  footer .foot_mark ul li{
    width: auto;
    margin-right: 20px;
  }
  footer .foot_mark ul li:first-child img{width: 70px;}
  footer .foot_mark ul li:last-child img{width: 150px;}
  footer ul li{padding: 0;}
}





















@media (min-width: 0) {
    header .container {
      max-width: 100%;
      margin-left: auto;
      margin-right: auto;
    }
    header .container:after {
      content: " ";
      display: block;
      clear: both;
    }
}
@media (min-width: 576px) {
    header .container {
      max-width: 540px;
      margin-left: auto;
      margin-right: auto;
    }
    header .container:after {
      content: " ";
      display: block;
      clear: both;
    }
}
@media (min-width: 768px) {
    header .container {
      max-width: 720px;
      margin-left: auto;
      margin-right: auto;
    }
    header .container:after {
      content: " ";
      display: block;
      clear: both;
    }
}
@media (min-width: 992px) {
    header .container {
      max-width: 960px;
      margin-left: auto;
      margin-right: auto;
    }
    header  .container:after {
      content: " ";
      display: block;
      clear: both;
    }
}