@charset "utf-8";
/* CSS Document */

body{background:#f4f4f4; color:#4a4a4a; font-size:16px; font-family: 'Roboto', sans-serif;}
a, a:hover, a:focus{text-decoration:none;outline:none;color:inherit;}
img{ max-width:100%;}
ul, li{ margin:0;padding:0;list-style:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{  margin:0;}
p{ margin:0; padding:0; font-family: 'Roboto', sans-serif;}
h2{font-size:40px;}
h3{font-size:34px;}
h4{font-size:30px;}
h5{font-size:24px;}

.container{ max-width:642px;}
.wraper{max-width:770px; margin:0 auto; box-shadow:0 0 14px -7px rgba(0, 0, 0, 0.4);
background-color:#fff;}

/*banner css start */
header h1{ color:#0066a0; font-size:40px; padding:35px 0 33px; text-align:center; font-weight:700;}
#nowget_con{ background:#29b1ff; padding:40px 0;}
#nowget_con ul{padding:0 20px;}
#nowget_con ul li{color:#fff; font-size:17px; position:relative; padding:0 0 5px 25px; font-weight:500;}
#nowget_con ul li:before{content:'\f00c'; font-family:FontAwesome; position:absolute; left:0;}
#nowget_con ul h5{padding-top:10px; color:#343434;}
#second_part h4{ color:#0066a0; text-align:center; font-weight:700;}
#second_part .logo{ margin-top:34px;}
#second_part .logo p{ display:inline-block; font-size:18px;}
#second_part .man_icon{ margin:40px 0 32px;}
#second_part .mobile_img{ background-color:#e1f4fe; border:2px dotted #0066a0; padding:45px 0 18px;}
#second_part{padding:40px 0 0;}
#brand_logo{padding:40px 0;}
#brand_logo img{margin:35px 0 0;}
#spy_works{background:#d5eeff; padding:40px 0;}
#spy_works h3{text-align:center; margin-bottom:15px;}
#spy_works ul{padding:0 60px;}
#spy_works ul li, .spy_features ul li{font-size:17px; padding:6px 0; position:relative; text-align:left;}
#spy_works ul li::before, .spy_features ul li:before {color: #595959;  content: "";  font-family: "FontAwesome";  font-size: 22px;  left: -32px;  position: absolute;  top: 6px;}
.work_step{margin-top:30px;}
.step_bx {background: #66c7ff;  color: #fff;  display: inline-flex;  font-size: 14px;  line-height: 15px;  margin: 0 5px;  min-height: 77px;  padding: 6px 10px;  text-align: left;  vertical-align: top;  width: 37%;}
.step_bx:first-child {padding-top: 14px;}
.step_bx > img { height: 100%;  margin: 8px 10px 0 0;}
.step_bx h5{color:#043652;}
#include_part{padding:40px 0;}
.include_bx{border:2px solid #d1261f; border-radius:5px; padding:15px 5px 10px; margin:30px 0;}
.include_bx img{margin-bottom:10px;}
.main_part:first-child .include_bx h5{color:#d1261f;}
.main_part:nth-child(2) .include_bx{border-color:#baaf01;}
.main_part:nth-child(2) .include_bx h5{color:#baaf01;}
/*.main_part:last-child .include_bx {border-color:#34ca23;}
.main_part:last-child .include_bx h5{color:#34ca23;}*/
.top_head h2{color:#0066a0; font-weight:600;}
.button_area h3{font-weight:600;}
.button_area h2, .price_part h2{color:#d1261f; font-weight:600; margin:20px 0;}
.spy_features{padding:40px 0 0; font-weight:500; font-size:19px;}
.spy_features ul{padding:20px 0 40px;}
.stamp_part h2{color:#0066a0; font-weight:600; margin:20px 0 10px;}
.stamp_part h5{color:#0066a0; font-weight:600; margin:0 0 10px;}


.cerificate{margin:20px 0;}
.cerificate_box{ display: inline-block; }
#certified_part h4{font-size:20px; font-weight:600; padding:10px 0; display:inline-block;}
.copyright{padding:20px 0;}
.main_part:nth-child(3) .include_bx { border-color: #34ca23;}
.main_part:nth-child(4) .include_bx { border-color: #34ca23;}
.main_part:nth-child(4) .include_bx h5 { color:#2cb742;}
.main_part:nth-child(5) .include_bx { border-color: #3a559f;}
.main_part:nth-child(5) .include_bx h5 { color:#3a559f;}
.main_part:nth-child(6) .include_bx { border-color: #ffe100;}
.main_part:nth-child(6) .include_bx h5 { color:#ffe100;}
.main_part:nth-child(7) .include_bx { border-color: #7823bd;}
.main_part:nth-child(7) .include_bx h5 { color:#7823bd;}
.main_part:nth-child(8) .include_bx { border-color: #c17a09;}
.main_part:nth-child(8) .include_bx h5 { color:#c17a09;}
.main_part:nth-child(9) .include_bx { border-color: #14b2ea;}
.main_part:nth-child(9) .include_bx h5 { color:#14b2ea;}


/* responsive */

@media(max-width:767px){
header h1 {font-size: 34px; padding: 30px 15px;}	
#second_part h4 {font-size: 25px; padding: 0 15px;}	
#brand_logo {padding: 40px 15px;}
.spy_features ul {padding: 20px 15px 40px 50px;}
.step_bx{width:44%;}
.button_area h3, .button_area h2, .price_part h2, #brand_logo h3, #spy_works h3{font-size: 30px;}
.main_part {max-width: 33%;}
}

@media(max-width:543px){
header h1 {font-size: 20px;  padding: 20px 15px;}
#nowget_con ul {padding: 0;}
#nowget_con ul li{font-size:15px;}
#second_part h4 {font-size: 20px;}
.button_area h3, .button_area h2, .price_part h2, #brand_logo h3, #spy_works h3, .spy_features h3{font-size: 24px;}
#spy_works ul {padding: 0 10px 0 34px;}
#spy_works ul li, .spy_features ul li {font-size: 15px;}
.step_bx{width:100%; margin:5px 0;}
.main_part {max-width: 100%;}
.include_bx {margin: 30px 0 0;}
.button_area{margin-top:30px;}
.stamp_part h2{font-size:32px;}
.stamp_part {padding: 0 15px; font-size:14px;}
.stamp_part h5 {font-size: 20px;}
#certified_part h4 {font-size: 22px;}
}