/*-----------------------------------320px-479px--------------------------------------*/
@media screen and (min-width:320px) and (max-width:479px)
{
.container{width: 80%; margin: 0 auto; padding: 0;}


#header_bg{	background-size: 1500px auto; height: 620px;clear: both;}
#header_bg .logo_bg a.logooo{background-size: 170px auto;height: 52px;width: 115px;}
#header_bg .logo_bg a:hover.logooo { width:160px;}
#header_bg .logo_bg nav ul { display: none;}
#header_bg .logo_bg .manu {background: url(../img/click_icon.gif) no-repeat; height: 25px; margin-top: 18px;position: absolute; right: 16px; width: 29px;}
#header_bg .logo_bg .submanu{ background-image: url(../img/nav.png); height: 124px;margin-top: 42px; padding: 3px 5px 3px 10px;position: absolute;right: 0px;width: 100px; top: 10px;}
#header_bg .logo_bg .submanu li a {font-size:16px; color:#fff; line-height: 28px; }
#header_bg .logo_bg .submanu li a:hover {color:#f06739;}
#header_bg .logo {background-size:240px auto;height: 245px;width: 234px; margin-top: -30px;}
#header_bg h2{font-size: 28px;margin-top: 46px;}

#contain_1 p{	font-size: 18px; clear: both;}
#contain_1 .all {display: none;}

#contain_2 {height: 670px; clear: both;}
#contain_2 h1 {font-size: 34px;  padding-top: 80px;}
#contain_2 p{	font-size: 18px;  margin: 30px 0;}
#contain_2 #ser {width: 280px; margin: 45px auto;}

#contain_2 #ser .dev { float: none; width: 213px; margin: 0 auto;}
#contain_2 #ser .dev h2{font-size: 18px;text-align: center;}
#contain_2 #ser .dev p {font-size: 14px; line-height: 24px;}
#contain_2 #ser .desg{ float: none; width: 238px; margin: 0 auto;}
#contain_2 #ser .desg h2{font-size: 18px; text-align: center;}
#contain_2 #ser .desg p {font-size: 14px; line-height: 24px;}

#contain_3 {height: 823px;clear: both;}
#contain_3 h1 {font-size: 34px;  padding-top: 80px;}
#contain_3 .left_banner { float: none; width: 100%; margin: 0 auto;}
#contain_3 .left_banner a .img1 {background-size: 217px auto;height: 118px;width: 216px;}
#contain_3 .left_banner a .img3{background-size: 217px auto;height: 118px;width: 216px;}
#contain_3 .right_banner{ float: none; width: 100%; margin: 35px auto;}
#contain_3 .right_banner a .img2{background-size: 217px auto;height: 118px;width: 216px;}
#contain_3 .right_banner a .img4{background-size: 217px auto;height: 118px;width: 216px;}

#contain_4 {height: 760px;clear: both;}
#contain_4 h1 {font-size: 34px;  padding-top: 80px;}
#contain_4 #con {	width: 100%; margin: 0 auto;}
#contain_4 #con .quick_contact {float: none; margin: 0 auto; width: 145px;}
#contain_4 #con .quick_contact h2 {font-size: 22px; text-align: center;}
#contain_4 #con .quick_contact a {	font-size: 15px;line-height: 24px;text-align: center!important; margin: 0 auto;}
#contain_4 #con .quick_contact .link {float: none;width: 96px; margin: 0 auto;}
#contain_4 #con .intant_quote {width: 204px;float: none; margin: 110px auto;}
#contain_4 #con .intant_quote h2 {font-size: 22px; text-align: center;}
#contain_4 #con .intant_quote input { width: 88px;padding: 7px 0 7px 10px; margin: 2px 0;font-size: 12px}
#contain_4 #con .intant_quote textarea{width: 192px;height: 65px;margin: 2px 0;font-size: 12px;}
}


@media screen and (min-width:480px) and (max-width:567px)
{
.container{width: 80%; margin: 0 auto; padding: 0;}
#header_bg{	background-size: 1250px auto; height: 570px;clear: both;}
#header_bg .logo_bg a.logooo{background-size: 170px auto;height: 52px;width: 115px;}
#header_bg .logo_bg a:hover.logooo { width:160px;}
#header_bg .logo_bg nav ul { display: none;}
#header_bg .logo_bg .manu {background: url(../img/click_icon.gif) no-repeat; height: 25px; margin-top: 18px;position: absolute; right: 16px; width: 29px;}
#header_bg .logo_bg .submanu{ background-image: url(../img/nav.png); height: 124px;margin-top: 42px; padding: 3px 5px 3px 10px;position: absolute;right: 0px;width: 100px; top: 10px;}
#header_bg .logo_bg .submanu li a {font-size:16px; color:#fff; line-height: 28px; }
#header_bg .logo_bg .submanu li a:hover {color:#f06739;}
#header_bg .logo {background-size:240px auto;height: 245px;width: 234px; margin-top: -30px;}
#header_bg h2{font-size: 28px;margin-top: 46px;}

#contain_1 p{	font-size: 18px; clear: both;}
#contain_1 .all {display: none;}

#contain_2 {height: 670px; clear: both;}
#contain_2 h1 {font-size: 34px;  padding-top: 80px;}
#contain_2 p{	font-size: 18px;  margin: 30px 0;}
#contain_2 #ser {width: 300px; margin: 45px auto;}
#contain_2 #ser .dev { float: none; width: 238px; margin: 0 auto;}
#contain_2 #ser .dev h2{font-size: 24px;text-align: center;}
#contain_2 #ser .dev p {font-size: 16px; line-height: 24px;}
#contain_2 #ser .desg{ float: none; width: 273px; margin: 0 auto;}
#contain_2 #ser .desg h2{font-size: 24px; text-align: center;}
#contain_2 #ser .desg p {font-size: 16px; line-height: 24px;}

#contain_3 {height:500px;clear: both;}
#contain_3 h1 {font-size: 34px;  padding-top: 80px; padding-bottom:40px; }
#contain_3 .left_banner { width:180px; margin: 0 auto;}
#contain_3 .left_banner a .img1 { background-size: 183px auto; height: 100px;width: 182px}
#contain_3 .left_banner a .img3{ background-size: 183px auto; height: 100px;width: 182px}
#contain_3 .right_banner{  width:180px; margin: 1px auto;}
#contain_3 .right_banner a .img2{ background-size: 183px auto; height: 100px;width: 182px}
#contain_3 .right_banner a .img4{ background-size: 183px auto; height: 100px;width: 182px}

#contain_4 {height: 500px;clear: both;}
#contain_4 h1 {font-size: 34px;  padding-top: 80px;}
#contain_4 #con {	width:100%; margin: 0 auto; }
#contain_4 #con .quick_contact {float:left; margin:-35px auto; width: 145px;}
#contain_4 #con .quick_contact h2 {font-size: 22px; text-align: center;}
#contain_4 #con .quick_contact a {	font-size: 14px;line-height: 24px;text-align: center!important; margin: 0 auto;}
#contain_4 #con .quick_contact .link {float: none;width: 96px; margin: 0 auto;}
#contain_4 #con .intant_quote {width: 204px;float: right; margin:-35px auto;}
#contain_4 #con .intant_quote h2 {font-size: 22px; text-align: center;}
#contain_4 #con .intant_quote input { width: 88px;padding: 7px 0 7px 10px; margin: 2px 0;font-size: 12px}
#contain_4 #con .intant_quote textarea{width: 192px;height: 65px;margin: 2px 0;font-size: 12px;}
}

@media screen and (min-width:600px) and (max-width:767px)
{
.container{width: 80%; margin: 0 auto; padding: 0;}
#header_bg{	background-size: 1250px auto; height: 570px;clear: both;}
#header_bg .logo_bg a.logooo{background-size: 170px auto;height: 52px;width: 115px;}
#header_bg .logo_bg a:hover.logooo { width:160px;}
#header_bg .logo_bg nav ul { display: none;}
#header_bg .logo_bg .manu {background: url(../img/click_icon.gif) no-repeat; height: 25px; margin-top: 18px;position: absolute; right: 16px; width: 29px;}
#header_bg .logo_bg .submanu{ background-image: url(../img/nav.png); height: 124px;margin-top: 42px; padding: 3px 5px 3px 10px;position: absolute;right: 0px;width: 100px; top: 10px;}
#header_bg .logo_bg .submanu li a {font-size:16px; color:#fff; line-height: 28px; }
#header_bg .logo_bg .submanu li a:hover {color:#f06739;}
#header_bg .logo {background-size:240px auto;height: 245px;width: 234px; margin-top: -30px;}
#header_bg h2{font-size: 28px;margin-top: 46px;}

#contain_1 p{	font-size: 18px; clear: both;}
#contain_1 .all {display: none;}

#contain_2 {height: 670px; clear: both;}
#contain_2 h1 {font-size: 34px;  padding-top: 80px;}
#contain_2 p{	font-size: 18px;  margin: 30px 0;}
#contain_2 #ser {width: 300px; margin: 45px auto;}
#contain_2 #ser .dev { float: none; width: 238px; margin: 0 auto;}
#contain_2 #ser .dev h2{font-size: 24px;text-align: center;}
#contain_2 #ser .dev p {font-size: 16px; line-height: 24px;}
#contain_2 #ser .desg{ float: none; width: 273px; margin: 0 auto;}
#contain_2 #ser .desg h2{font-size: 24px; text-align: center;}
#contain_2 #ser .desg p {font-size: 16px; line-height: 24px;}

#contain_3 {height:560px;clear: both;}
#contain_3 h1 {font-size: 34px;  padding-top: 80px; padding-bottom:40px; }
#contain_3 .left_banner { width:230px; margin: 20px auto;}
#contain_3 .left_banner a .img1 { background-size: 230px auto; height: 126px; width: 230px;}
#contain_3 .left_banner a .img3{ background-size: 230px auto; height: 126px; width: 230px;}
#contain_3 .right_banner{  width:230px; margin: 21px auto;}
#contain_3 .right_banner a .img2{ background-size: 230px auto; height: 126px; width: 230px;}
#contain_3 .right_banner a .img4{ background-size: 230px auto; height: 126px; width: 230px;}

#contain_4 {height: 500px;clear: both;}
#contain_4 h1 {font-size: 34px;  padding-top: 80px;}
#contain_4 #con {	width:100%; margin: 0 auto; }
#contain_4 #con .quick_contact {float:left; margin:-35px auto; width: 170px;}
#contain_4 #con .quick_contact h2 {font-size: 22px; text-align: center;}
#contain_4 #con .quick_contact a {	font-size: 18px;line-height: 30px;text-align: center!important; margin: 0 auto;}
#contain_4 #con .quick_contact .link {float: left;width: 96px; margin: 0 auto;}
#contain_4 #con .intant_quote {width: 250px;float: right; margin:-35px auto;}
#contain_4 #con .intant_quote h2 {font-size: 22px; text-align: center;}
#contain_4 #con .intant_quote input { padding: 9px 0 9px 10px; width: 111px; margin: 2px 0;font-size: 12px}
#contain_4 #con .intant_quote textarea{width:239px;height: 45px;margin: 2px 0;font-size: 12px;}
}


@media screen and (min-width:768px) and (max-width:979px)
{
.container{width: 80%; margin: 0 auto; padding: 0;}
#header_bg{	background-size: 1250px auto; height: 570px;clear: both;}
#header_bg .logo_bg a.logooo{background-size: 200px auto; height: 58px; width: 150px; }
#header_bg .logo_bg a:hover.logooo { width:190px;}
#header_bg .logo_bg nav { padding: 28px 0 0;}
#header_bg .logo {background-size:240px auto;height: 245px;width: 234px; margin-top: -30px;}
#header_bg h2{font-size: 28px;margin-top: 46px;}

#contain_1 p{	font-size: 18px; clear: both;}
#contain_1 .all {display: none;}

#contain_2 {height: 670px; clear: both;}
#contain_2 h1 {font-size: 34px;  padding-top: 80px;}
#contain_2 p{	font-size: 18px;  margin: 30px 0;}
#contain_2 #ser {width:100%; margin: 45px auto;}
#contain_2 #ser .dev { float:left; width: 238px; margin: 0 auto;}
#contain_2 #ser .dev h2{font-size: 24px;text-align: center;}
#contain_2 #ser .dev p {font-size: 16px; line-height: 24px;}
#contain_2 #ser .desg{ float:right; width: 273px; margin: 0 auto;}
#contain_2 #ser .desg h2{font-size: 24px; text-align: center;}
#contain_2 #ser .desg p {font-size: 16px; line-height: 24px;}

#contain_3 {height:630px;clear: both;}
#contain_3 h1 {font-size: 34px;  padding-top: 80px; padding-bottom:40px; }
#contain_3 .left_banner { width:280px; margin: 20px auto;}
#contain_3 .left_banner a .img1 {background-size: 280px auto; height: 152px;width: 279px;}
#contain_3 .left_banner a .img3{background-size: 280px auto; height: 152px;width: 279px;}
#contain_3 .right_banner{  width:280px; margin: 21px auto;}
#contain_3 .right_banner a .img2{background-size: 280px auto; height: 152px;width: 279px;}
#contain_3 .right_banner a .img4{background-size: 280px auto; height: 152px;width: 279px;}

#contain_4 {height: 500px;clear: both;}
#contain_4 h1 {font-size: 34px;  padding-top: 80px;}
#contain_4 #con {	width:100%; margin: 0 auto; }
#contain_4 #con .quick_contact {float:left; margin: -35px auto -35px 40px; width: 170px;}
#contain_4 #con .quick_contact h2 {font-size: 22px; text-align: center;}
#contain_4 #con .quick_contact a {	font-size: 18px;line-height: 30px;text-align: center!important; margin: 0 auto;}
#contain_4 #con .quick_contact .link {float: left;width: 96px; margin: 0 auto;}
#contain_4 #con .intant_quote {width: 280px;float: right; margin:-35px auto;}
#contain_4 #con .intant_quote h2 {font-size: 22px; text-align: center;}
#contain_4 #con .intant_quote input { padding: 9px 0 9px 10px; width: 126px; margin: 2px 0;font-size: 12px}
#contain_4 #con .intant_quote textarea{width:269px;height: 45px;margin: 2px 0;font-size: 12px;}
}	


@media screen and (min-width:980px) and (max-width:1024px)
{
.container{width: 80%; margin: 0 auto; padding: 0;}
#header_bg{	background-size: 1250px auto; clear: both;}
#header_bg .logo_bg a.logooo{background-size: 250px auto;height: 75px;width: 164px;}
#header_bg .logo_bg a:hover.logooo { width:250px;}
#header_bg .logo_bg nav { padding: 36px 0 0;}
#header_bg .logo{ background-size: 300px auto; height: 282px; margin-top: -22px; width: 286px;}
#header_bg h2{font-size:34px;margin-top: 46px;}

#contain_1 p{	font-size: 20px; clear: both;}
#contain_1 .all {display: none;}


#contain_3 {height:750px;clear: both;}
#portfolio_bg {height: 1100px;}
#contain_3 h1 {font-size: 48px ;padding-top: 115px; padding-bottom:40px; }
#contain_3 .left_banner { width:100%; margin: 20px auto;}
#contain_3 .left_banner a .img1 {background-size: 340px auto; height: 185px;width: 339px;}
#contain_3 .left_banner a .img3{background-size: 340px auto; height: 185px;width: 339px;}
#contain_3 .right_banner{  width:339px; margin: 21px auto;}
#contain_3 .right_banner a .img2{background-size: 340px auto; height: 185px;width: 339px;}
#contain_3 .right_banner a .img4{background-size: 340px auto; height: 185px;width: 339px;}

#contain_4 {height:740px}
#footer_bg {height: 1000px;}
#contain_4 h1 {font-size: 48px ;padding-top: 115px; }
#contain_4 #con {	width:100%; margin: 0 auto; }
#contain_4 #con .quick_contact {float:left; margin: -35px auto -35px 40px; width: 250px;}
#contain_4 #con .quick_contact h2 {font-size: 26px;text-align: left;}
#contain_4 #con .quick_contact a {	font-size: 22px;line-height: 46px;text-align: left; margin: 0 auto;}
#contain_4 #con .quick_contact .link {float: left;width: 96px; margin: 0 auto;}
#contain_4 #con .intant_quote {width: 380px;float: right; margin:-35px auto;}
#contain_4 #con .intant_quote h2 {font-size: 26px;text-align: left;}
#contain_4 #con .intant_quote input { font-size: 14px; margin: 2px 0;padding: 12px 0 12px 10px;width: 176px;}
#contain_4 #con .intant_quote textarea{padding: 11px 8px;width: 363px;height: 85px;margin: 2px 0;font-size: 12px;}
}