@charset "utf-8";
@import url('./reset.css') all;
@media screen, projection {
	body {
		color: #000;
		font: 85%/normal 'Open Sans', sans-serif;
		background: #fff url(../images/bg-body.png);
	}
	p, address {
		padding: 10px 0 0 0;
		line-height: 150%;
	}
	ul {
		padding: 10px 0 0 0;
	}
	ul li {
		padding: 0 0 0 20px;
		background: url(../images/list.png) no-repeat 0 4px;
	}
	ol {
		padding: 0 0 0 20px;
	}
	ol li {
		list-style-type: decimal;
		padding: 10px 0 0 0;
		font-weight: bold;
	}
	ol li span {
		font-weight: normal;
	}
	strong {
		font-weight: bold;
	}
	h1, h2, h3 {
		padding: 10px 0 0 0;
	}
	a, a:hover {
		color: #175296;
		font-weight: normal;
		text-decoration: none;
	}
	a:hover {
		color: #000;
	}
	.padd-list {
		padding: 0;
	}
	.padd-list li {
		padding-top: 10px;
		background: url(../images/list.png) no-repeat 0 14px;
	}
}
@media only screen and (min-width: 320px) {
	body {
		padding: 212px 0 0 0;
	}
	h1 {
		display: block;
		position: absolute;
		padding: 0 0 0 5px;
		top: 62px;
		width: 95px;
		height: 68px;
		overflow: hidden;
	}
	#subp h1 {
		top: 220px;
		width: auto;
	}
	h1 span {
		display: block;
		width: 95px;
		height: 68px;
		overflow: hidden;
		font-size: 190%;
	}
	#subp h1 span {
		width: auto;
		height: auto;
	}
	h2 {
		font-size: 160%;
	}
	h3 {
		font-size: 130%;
	}
	#how {
		border-top: 1px solid #175296;
		border-bottom: 1px solid #175296;
		background: #f5f5f5;
		padding: 0 0 10px 0;
	}
	#subp #how {
		border-bottom: none;
	}
	#how .in h2 {
		padding: 10px 0 0 0;
	}
	#how .in h2 span {
		color: #175296;
	}
	#how .in ul {
		padding: 10px 0 0 0;
	}
	#how .in ul li {
		padding: 5px 0 0 0;
		background: none;
		display: block;
		clear: both;
	}
	#how .in ul li strong {
		display: block;
		width: 30px;
		height: 26px;
		padding: 4px 0 0 0;
		text-align: center;
		font-size: 120%;
		color: #fff;
		background: url(../images/list-how.png);
	}
	#how .in ul li p {
		padding: 0;
		display: block;
		margin: -30px 0 0 40px;
		min-height: 30px;
	}
	#how .in ul li .arrow {
		display: none;
	}
	#reasons {
		padding: 0 0 10px 0;
	}
	#reasons .in h2 {
		padding: 10px 0 0 0;
	}
	#reasons .in h2 span {
		color: #e10116;
	}
	#reasons .in ul {
		padding: 0;
	}
	#reasons .in ul li {
		background: none;
		display: block;
		padding: 10px 0 0 40px;
		min-height: 35px;
	}
	#reasons .in ul .time {
		background: url(../images/icon-time.png) no-repeat 0 10px;
		background-size: 33px;
	}
	#reasons .in ul .notepad {
		background: url(../images/icon-notepad.png) no-repeat 0 10px;
		background-size: 33px;
	}
	#reasons .in ul .help {
		background: url(../images/icon-help.png) no-repeat 0 10px;
		background-size: 33px;
	}
	#reasons .in ul .tools {
		background: url(../images/icon-tools.png) no-repeat 0 10px;
		background-size: 33px;
	}
	#reasons .in ul .free {
		background: url(../images/icon-free.png) no-repeat 0 10px;
		background-size: 33px;
	}
	#reasons .in ul .hand {
		background: url(../images/icon-hand.png) no-repeat 0 10px;
		background-size: 33px;
	}
	#call, #call-thin {
		color: #fff;
		background: #e00116 url(../images/bg-call-thin.png) repeat-x 0 0;
	}
	#call .in p, #call-thin .in p {
		text-align: center;
		padding: 10px 0;
		font-size: 130%;
	}
	#call .in p br {
		display: none;
	}
	#call .in .helpdesk {
		display: none;
	}
	#beware {
		padding: 0 0 10px 0;
	}
	#beware .in h2 span {
		color: #e10116;
	}
	#ready {
		height: 200px;
		background: #fbfbfb url(../images/saycheese.png) no-repeat center 40px;
		background-size: cover;
	}
	#ready .in h2 {
		padding: 10px 0 0 0;
		text-align: center;
	}
	#ready .in h2 span {
		color: #175296;
	}
	#menu {
		background: #e00116 url(../images/bg-menu.png) repeat-x 0 0;
		color: #fff;
		height: 52px;
		position: absolute;
		top: 0;
		z-index: 2;
	}
	#menu .phone {
		padding: 10px 0 0 50px;
		background: url(../images/icon-phone.png) no-repeat 0 6px;
		height: 42px;
		font-size: 170%;
	}
	#menu .phone span {
		display: none;
	}
	#menu .toggle {
		position: absolute;
		right: 0;
		top: 0;
		height: 52px;
		width: 52px;
		background: #175296 url(../images/icon-menu.png) no-repeat 0 0;
	}
	#menu .menu {
		position: absolute;
		left: 0;
		width: 100%;
		top: 52px;
		display: none;
		z-index: 2;
	}
	#menu .menu ul {
		position: absolute;
		left: 0;
		padding: 0;
		background: #175296;
		width: 100%;
	}
	#menu .menu ul li {
		background: none;
		padding: 0;
		display: block;
		border-top: 1px solid #8daacc;
	}
	#menu .menu ul li:first-child {
		border-top: none;
	}
	#menu .menu ul li a {
		display: block;
		color: #fff;
		font-size: 120%;
		padding: 10px 5px;
		text-decoration: none;
	}
	#promo {
		height: 212px;
		color: #fff;
		background: url(../images/bg-promo-mobile.jpg) no-repeat center top;
		background-size: cover;
		position: absolute;
		top: 0;
	}
	#subp #promo {
		background: url(../images/bg-promo-subp.jpg) no-repeat center top;
		background-size: cover;
	}
	#promo .in .logo {
		position: absolute;
		width: 95px;
		margin: 62px 0 0 0;
		z-index: 1;
	}
	#promo .in .motto {
		background: url(../images/bg-motto.png);
		padding: 5px;
		position: absolute;
		margin: 142px 0 0 0;
		width: 80%;
		font-size: 90%;
		line-height: 130%;
		text-shadow: 1px 1px 2px #333;
	}
	#promo .in .call {
		display: none;
	}
	#footer {
		background: #333;
		color: #fff;
		text-align: center;
	}
	#footer .in {
		display: inline-block;
		margin: 0 auto;
		text-align: center;
	}
	#footer .in .box {
		float: left;
		padding: 0 10px;
		text-align: center;
		width: 120px;
		font-size: 90%;
	}
	#footer .in .box h3 {
		text-transform: uppercase;
		font-weight: bold;
		font-size: 100%;
	}
	#footer .in .box ul li {
		padding: 0;
		background: none;
	}
	#footer .in .box a, #footer .copyright a {
		color: #fff;
		text-decoration: none;
	}
	#footer .in .address {
		width: auto;
		padding: 0 0 10px 0;
	}
	#footer .in .address h3, #footer .in .social h3 {
		display: none;
	}
	#footer .in .address address br {
		display: none;
	}
	#footer .in .social {
		padding: 0 0 10px 0;
		text-align: center;
		width: 100%;
	}
	#footer .in .social ul {
		padding: 0;
	}
	#footer .in .social ul li {
		display: inline-block;
		padding: 0 3px;
	}
	#footer .in .social ul li a {
		display: inline-block;
		width: 24px;
		height: 24px;
	}
	#footer .in .social ul li a span {
		display: none;
	}
	#footer .in .social ul li .facebook {
		background: url(../images/icon-facebook.png);
	}
	#footer .in .social ul li .twitter {
		background: url(../images/icon-twitter.png);
	}
	#footer .in .social ul li .linkedin {
		background: url(../images/icon-linkedin.png);
	}
	#footer .copyright {
		background: #272727;
		padding: 0 0 10px 0;
		border-top: 1px solid #565656;
		font-size: 90%;
	}
	#footer .copyright span {
		display: block;
	}
	#footer .copyright .break {
		display: none;
	}
	.wrap {
		width: 100%;
	}
	.wrap .in {
		padding: 0 5px;
	}
	.content .in, .sub-content .in {
		padding: 35px 5px 10px 5px;
		border-top: 1px solid #175296;
	}
	.sub-content .in {
		padding-top: 0;
		border-bottom: 1px solid #175296;
	}
	.cleaner, .cleaner-last {
		height: 1px;
		clear: both;
		font-size: 1px;
	}
}
@media only screen and (min-width: 768px) {
	body {
		padding: 309px 0 0 0;
	}
	p, h2, h3 {
		padding: 15px 0 0 0;
	}
	h1 {
		padding: 0;
		top: 62px;
		width: 95px;
		height: 68px;
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}
	#subp h1 {
		top: 300px;
		height: auto;
		width: 100%;
	}
	h1 span {
		width: 160px;
		height: 115px;
		margin: 0 auto;
		padding: 0 588px 0 0;
		text-align: left;
		font-size: 200%;
	}
	#subp h1 span {
		width: 748px;
		display: block;
		height: auto;
		padding: 0;
	}
	h2 {
		font-size: 190%;
	}
	h3 {
		font-size: 150%;
	}
	#how {
		border: none;
		background: url(../images/bg-how.png) no-repeat center bottom;
		padding: 0 0 26px 0;
		background-size: 748px;
	}
	#how .in {
		border: 1px solid #175296;
		background: #fff url(../images/bg-how-in.png) repeat-y 0 center;
		background-size: 748px;
		position: relative;
		margin: -20px auto 0 auto;
		z-index: 1;
		width: 746px;
		padding: 0 0 15px 0;
	}
	#subp #how .in {
		margin-top: 20px;
	}
	#how .in h2 {
		background: url(../images/bg-title-arrow.png) no-repeat center bottom;
		padding: 15px 0 30px 0;
		text-align: center;
	}
	#how .in ul {
		padding: 10px 13px 0;
	}
	#how .in ul li {
		padding: 0 10px;
		float: left;
		clear: none;
		width: 160px;
		text-align: center;
		margin: 0 auto;
	}
	#how .in ul li strong {
		margin: 0 auto;
	}
	#how .in ul li p {
		padding: 120px 0 0 0;
		margin: 0;
		font-size: 90%;
		min-height: auto;
	}
	#how .in ul li .arrow {
		display: block;
		position: absolute;
		background: url(../images/arrow-process.png);
		background-size: cover;
		width: 40px;
		height: 16px;
		margin: 70px 0 0 158px;
	}
	#how .in ul .how-a p {
		background: url(../images/icon-how-a.png) no-repeat center top;
		background-size: 160px;
	}
	#how .in ul .how-b p {
		background: url(../images/icon-how-b.png) no-repeat center top;
		background-size: 160px;
	}
	#how .in ul .how-c p {
		background: url(../images/icon-how-c.png) no-repeat center top;
		background-size: 160px;
	}
	#how .in ul .how-d p {
		background: url(../images/icon-how-d.png) no-repeat center top;
		background-size: 160px;
	}
	#reasons .in {
		padding: 0 0 10px 0;
	}
	#reasons .in h2 {
		background: url(../images/bg-title-arrow.png) no-repeat center bottom;
		padding: 7px 0 30px 0;
		text-align: center;
	}
	#reasons .in ul {
		padding-top: 20px;
	}
	#reasons .in ul li {
		width: 295px;
		font-size: 110%;
		padding: 10px 38px 0 60px;
		min-height: 45px;
	}
	#reasons .in .left {
		float: left;
	}
	#reasons .in .right {
		float: right;
	}
	#reasons .in .right li {
		padding-right: 0;
	}
	#reasons .in ul .time {
		background-size: 40px;
	}
	#reasons .in ul .notepad {
		background-size: 40px;
	}
	#reasons .in ul .help {
		background-size: 40px;
	}
	#reasons .in ul .tools {
		background-size: 40px;
	}
	#reasons .in ul .free {
		background-size: 40px;
	}
	#reasons .in ul .hand {
		background-size: 40px;
	}
	#beware {
		padding: 50px 0 85px 0;
		background: #ebebeb url(../images/bg-beware.jpg) no-repeat center top;
		background-size: cover;
	}
	#beware .in {
		text-align: center;
		margin: 0 auto;
		padding: 10px 0 0 0;
	}
	#beware .in h2 {
		border: 2px solid #e10116;
		padding: 7px 25px;
		text-shadow: 1px 1px 2px #fff;
		display: inline;
		margin: 0 auto;
		font-size: 210%;
	}
	#beware .in h2 span {
		color: #e10116;
	}
	#beware .in p {
		font-size: 130%;
		padding: 40px 0 0 0;
		text-align: justify;
		text-shadow: 1px 1px 2px #fff;
	}
	#ready {
		height: 370px;
		background-position: center 90px;
	}
	#ready .in h2 {
		background: url(../images/bg-title-arrow.png) no-repeat center bottom;
		padding: 30px 0 30px 0;
	}
	#call-thin, #call {
		color: #fff;
		height: 52px;
	}
	#call {
		height: 110px;
		background: #e00116 url(../images/bg-call.png) repeat-x 0 0;
	}
	#call-thin .in p, #call .in p {
		padding: 0;
		height: 65px;
		z-index: 1;
		position: relative;
		font-size: 170%;
		background: url(../images/arrow-red-down.png) no-repeat center bottom;
	}
	#call .in p {
		height: 123px;
		line-height: 110%;
	}
	#call-thin .in p span, #call .in p span {
		background: url(../images/icon-phone.png) no-repeat 0 6px;
		display: inline-block;
		padding: 10px 0 0 50px;
		height: 42px;
	}
	#call .in p br {
		display: inline;
	}
	#call .in p span {
		background: url(../images/icon-phone.png) no-repeat center 6px;
		padding: 53px 0 0 0;
		height: 57px;
	}
	#call .in .helpdesk {
		display: block;
		background: url(../images/icon-helpdesk.png) no-repeat 0 0;
		background-size: cover;
		position: absolute;
		height: 120px;
		width: 116px;
		margin: -10px 0 0 80px;
	}
	#menu {
		background: url(../images/bg-menu-tablet.png) repeat-x center 0;
	}
	#menu .phone {
		margin: 0 0 0 210px;
		font-size: 150%;
	}
	#menu .phone span {
		display: inline;
		font-size: 75%;
	}
	#menu .toggle {
		display: none;
	}
	#menu .in {
		position: relative;
	} 
	#menu .menu {
		position: absolute;
		right: 0;
		left: auto;
		width: auto;
		top: 52px;
		display: block;
	}
	#menu .menu ul {
		position: relative;
		background: none;
		width: auto;
		padding: 10px 0 0 0;
	}
	#menu .menu ul li {
		float: left;
		border: none;
	}
	#menu .menu ul li a, #menu .menu ul li a:hover {
		display: block;
		color: #000;
		border: 1px solid #155094;
		background: url(../images/bg-menu-item.png);
		margin: 0 0 0 2px;
		padding: 9px 0 0 0;
		height: 29px;
		width: 100px;
		text-align: center;
		font-size: 110%;
	}
	#menu .menu ul li a:hover {
		color: #d30115;
	}
	#promo {
		background: url(../images/bg-promo.jpg) no-repeat center top;
		height: 320px;
		background-size: cover;
	}
	#subp #promo {
		height: 280px;
	}
	#promo .in .logo {
		position: absolute;
		width: 160px;
		margin: -120px 0 0 0;
	}
	#subp #promo .in .logo {
		margin-top: 40px;
	}
	#promo .in .motto {
		position: relative;
		width: 400px;
		margin: 160px auto 0;
		font-size: 120%;
		text-align: center;
		line-height: 130%;
	}
	#subp #promo .in .motto {
		float: right;
		margin-top: 140px;
		text-align: right;
	}
	#promo .in .call {
		display: block;
		width: 350px;
		margin: 0 auto;
		font-size: 120%;
		text-align: center;
		padding: 7px 0;
		text-shadow: 1px 1px 2px #333;
		background: url(../images/bg-call-promo.png);
	}
	#subp #promo .in .call {
		float: right;
		text-align: right;
		padding-right: 5px;
	}
	#footer .in {
		display: block;
		text-align: left;
		background: url(../images/logo.png) no-repeat 0 15px;
		background-size: 130px 93px;
	}
	#footer .in .box {
		float: left;
		padding: 0 0 15px 30px;
		text-align: left;
		width: auto;
	}
	#footer .in .box:first-child {
		padding-left: 160px;
	}
	#footer .in .box a:hover, #footer .copyright a:hover {
		text-decoration: underline;
	}
	#footer .in .address h3, #footer .in .social h3 {
		display: block;
	}
	#footer .in .address address br {
		display: block;
	}
	#footer .in .address p {
		padding: 0;
	}
	#footer .in .social {
		float: right;
		width: auto;
		padding-left: 0;
	}
	#footer .in .social ul {
		padding: 15px 0 0 0;
	}
	#footer .copyright {
		text-align: left;
	}
	#footer .copyright .in {
		background: none;
	}
	#footer .copyright .in p {
		padding: 10px 0 0 0;
	}
	#footer .copyright .in p span, #footer .copyright .in p .break {
		display: inline;
	}
	#footer .in .cleaner {
		display: none;
	}
	#footer .in .cleaner-last {
		display: block;
	}
	.wrap {
		text-align: center;
		margin: 0 auto;
	}
	.wrap .in {
		padding: 0;
		width: 748px;
		text-align: left;
		margin: 0 auto;
	}
	.content .in, .sub-content .in {
		padding-top: 25px;
		padding-bottom: 15px;
		border-top: none;
	}
	.sub-content .in {
		padding-top: 0;
		border-bottom: none;
	}
	.top-line {
		border-top: 1px solid #175296;
	}
}
@media only screen and (min-width: 1024px) {
	body {
		padding: 410px 0 0 0;
	}
	#subp {
		padding-top: 430px;
	}
	h1 {
		height: 124px;
	}
	#subp h1 {
		top: 420px;
	}
	h1 span {
		width: 173px;
		height: 124px;
		padding: 0 817px 0 0;
	}
	#subp h1 span {
		width: 990px;
	}
	h2 {
		font-size: 220%;
	}
	#how {
		padding: 0 0 34px 0;
		background-size: 990px;
	}
	#how .in {
		background-size: 988px;
		width: 988px;
		margin-top: 0;
	}
	#how .in ul {
		padding: 10px 14px 0;
	}
	#how .in ul li {
		width: 220px;
	}
	#how .in ul li p {
		padding: 165px 0 0 0;
	}
	#how .in ul li .arrow {
		width: 64px;
		height: 26px;
		margin: 120px 0 0 205px;
	}
	#how .in ul .how-a p {
		background: url(../images/icon-how-a.png) no-repeat center top;
		background-size: 220px;
	}
	#how .in ul .how-b p {
		background: url(../images/icon-how-b.png) no-repeat center top;
		background-size: 220px;
	}
	#how .in ul .how-c p {
		background: url(../images/icon-how-c.png) no-repeat center top;
		background-size: 220px;
	}
	#how .in ul .how-d p {
		background: url(../images/icon-how-d.png) no-repeat center top;
		background-size: 220px;
	}
	#reasons .in {
		padding: 0 0 40px 0;
	}
	#reasons .in ul li {
		width: 411px;
	}
	#call {
		height: 155px;
	}
	#call .in p {
		padding: 20px 0 0 0;
		height: 148px;
	}
	#call .in .helpdesk {
		height: 188px;
		width: 194px;
		margin: -33px 0 0 80px;
	}
	#ready {
		height: 470px;
		background-position: center 90px;
	}
	#beware {
		padding: 50px 0 135px 0;
	}
	#promo {
		height: 450px;
		background-size: auto;
	}
	#subp #promo {
		height: 400px;
	}
	#promo .in .logo {
		width: 173px;
		margin: -155px 0 0 0;
	}
	#subp #promo .in .logo {
		margin-top: 45px;
	}
	#promo .in .motto {
		width: 560px;
		margin: 210px auto 0;
		font-size: 160%;
		padding: 10px 20px;
	}
	#subp #promo .in .motto {
		margin-top: 160px;
	}
	#promo .in .call {
		width: 470px;
		padding: 20px 0;
		font-size: 160%;
	}
	#subp #promo .in .call {
		padding-right: 20px;
	}
	#menu {
		background: url(../images/bg-menu-desktop.png) repeat-x center 0;
	}
	#menu .phone {
		margin: 0 0 0 300px;
		font-size: 160%;
	}
	#menu .phone span {
		font-size: 85%;
	}
	#menu .menu ul li a, #menu .menu ul li a:hover {
		width: 135px;
	}
	#footer .in .box {
		padding-left: 80px;
	}
	#footer .in .box:first-child {
		padding-left: 220px;
	}
	.wrap .in {
		width: 990px;
	}
	
}