*{margin: 0;box-sizing: border-box;}
a{text-decoration: none;}
ul{list-style: none;padding: 0;}
img{vertical-align: bottom;}
iframe{border: 0;}
button{cursor: pointer;}
[abbr]{cursor: help;}
[disabled]{cursor: not-allowed;}

@font-face {
    font-family:grbold ;
    src: url(../fonts/Gotham-Rounded-Bold.woff);
}
@font-face {
    font-family:grm ;
    src: url(../fonts/Gotham-Rounded-Medium.woff);
}
@font-face {
    font-family:grbook ;
    src: url(../fonts/Gotham-Rounded-Book.woff);
}

body{font-family: sans-serif;}
.container{max-width: 1054px;margin: auto;padding: 0 15px;}
h1,h2,h3,h4,h5,h6,a{font-family: grbold;}
p{font-family: grm;}

.row{margin: 0 -15px;}
.row:after{content: "";display: block;clear: both;}
.col-1{width: 8.33%;float: left;padding: 0 15px;min-height: 1px;}
.col-2{width: 16.66%;float: left;padding: 0 15px;min-height: 1px;}
.col-3{width: 25%;float: left;padding: 0 15px;min-height: 1px;}
.col-4{width: 33.33%;float: left;padding: 0 15px;min-height: 1px;}
.col-5{width: 41.66%;float: left;padding: 0 15px;min-height: 1px;}
.col-6{width: 50%;float: left;padding: 0 15px;min-height: 1px;}
.col-7{width: 58.33%;float: left;padding: 0 15px;min-height: 1px;}
.col-8{width: 66.66%;float: left;padding: 0 15px;min-height: 1px;}
.col-9{width: 75%;float: left;padding: 0 15px;min-height: 1px;}
.col-10{width: 83.33%;float: left;padding: 0 15px;min-height: 1px;}
.col-11{width: 91.66%;float: left;padding: 0 15px;min-height: 1px;}
.col-12{width: 100%;float: left;padding: 0 15px;min-height: 1px;}

.wrap-1{background: transparent;color: #fff;text-align: center;}
.wrap-1 nav ul{margin-top: 70px;}
.wrap-1 nav ul li{float: left;margin: 0 5px;display:block;width: 152px;}
.wrap-1 nav ul li a{display:inline-block;color: #fff;padding: 10px 20px;font-size: 16px;letter-spacing: 0.15em;}
.wrap-1 nav ul li a img{margin-top: -30px;}

.wrap-2{background: url(../img/bg.jpg) no-repeat center center/cover;height: 745px;margin-top:-115px;text-align: center;color: #fff;}
.wrap-2 .title{margin-top: 230px;}
.wrap-2 .title h1{font-size: 36px ;letter-spacing: 0.15em;}
.wrap-2 .title p{font-size: 16px;letter-spacing: 0.15em;margin: 10px 0;}
.wrap-2 .title a{display: inline-block;color: #fff;background-color: #16a085;font-size: 12px;border:2px solid #16a085;border-radius: 5px;
        width: 166px;line-height: 45px;margin: 15px 0;letter-spacing: 0.15em; }
.wrap-2 .social{color: #fff;margin-top:200px}
.wrap-2 .social ul li{display: inline-block;margin: 0 2px;}
.wrap-2 .social ul li a{color: inherit;display: inline-block;font-size: 25px;padding: 0 5px;}

.wrap-3{background: #f5f6f7;padding-top: 108px;}
.wrap-3 h2{font-size: 18px;color: #16a085;text-transform: uppercase;letter-spacing: 0.15em;}
.wrap-3 .para{font-family: grbook;font-size: 12px;line-height: 24px;color: #373737;letter-spacing: 0.15em;margin: 40px 0;}
.wrap-3 b{color: black;}
.wrap-3 a{display: inline-block;color: #fff;background-color: #16a085;font-size: 12px;border:2px solid #16a085;border-radius: 5px;
    width: 192px;line-height: 45px;text-align: center; letter-spacing: 0.15em;}
.wrap-3 img{height: 409px;float: right;}

.wrap-4{background: #fff;padding-top: 108px;}
.wrap-4 h2{font-size: 18px;color: #16a085;text-transform: uppercase;letter-spacing: 0.15em;line-height: 22px;}
.wrap-4 .para{font-family: grbook;font-size: 12px;line-height: 22px;color: #373737;letter-spacing: 0.15em;margin: 40px 0;}
.wrap-4 b{color: black;}
.wrap-4 a{display: inline-block;color: #fff;background-color: #16a085;font-size: 12px;border:2px solid #16a085;border-radius: 5px;
    width: 192px;line-height: 45px;text-align: center; letter-spacing: 0.15em;margin-bottom:42px ;}
.wrap-4 img{height: 414px;float: left;}
.wrap-4 span b{font-family: grbold;font-size: 12px;letter-spacing: 0.15em;}
.wrap-4 span.fa{font-size: 30px;}

.wrap-5{background: #f5f6f7;padding: 85px 0;}
.wrap-5 .angle{float: right;font-size: 30px;}
.wrap-5 .img{float: right;}
.wrap-5 .community{text-align: center;float: left;margin-top: 44px;}
.wrap-5 .community h3{font-size: 16px;line-height: 22px;letter-spacing: 0.15em;color: #373737;margin: 26px 0;}
.wrap-5 .community p{font-size: 10px;letter-spacing: 0.15em;color: #373737;}

.wrap-6{background: url(../img/bg1.jpg) no-repeat center center/cover;height:790px ;text-align: center;color: #fff;padding: 343px 0 0;}
.wrap-6 h4{font-size: 24px;letter-spacing: 0.15em;margin-bottom: 25px;}
.wrap-6 input{display: inline-block;border: none;padding: 20px 25px;font-size: 16px;font-family: grm;letter-spacing: 0.15em;
            width: 280px;height: 60px;}
.wrap-6 input::placeholder{font-family: grm;font-size: 16px;}
.wrap-6 label button{border: none;background: #16a085;display: inline-block;width: 63px;height: 60px;
        vertical-align: bottom;margin-left: -4px;}
.wrap-6 button span.fa{background: #16a085;color: #fff;font-size: 22px;}

.wrap-7{background: #f5f6f7;text-align: center;padding: 118px 0;}
.wrap-7 h5{font-size: 20px;color: #373737;letter-spacing: 0.15em;margin-bottom: 5px;}
.wrap-7 p{text-transform: uppercase;font-size: 12px;line-height: 22px;color: #373737;letter-spacing: 0.15em;margin-bottom: 40px;}
.wrap-7 .btn1{float: right}
.wrap-7 .btn1 button{background: #1abc9c;border: none;width: 240px;height: 56px;font-size: 16px;font-family: grbold;letter-spacing: 0.15em;color: #fff;text-align: left;padding: 0 22px;}
.wrap-7 .btn1 span{background: #16a085;width: 56px;line-height: 56px;vertical-align: bottom;color: #fff;font-size: 24px;}
.wrap-7 .btn2{float: left;}
.wrap-7 .btn2 button{background: #1abc9c;border: none;width: 240px;height: 56px;font-size: 16px;font-family: grbold;letter-spacing: 0.15em;color: #fff;text-align: left;padding: 0 22px;}
.wrap-7 .btn2 span{background: #16a085;width: 56px;line-height: 56px;vertical-align: bottom;color: #fff;font-size: 24px;}


.wrap-8{background: #fff;padding: 43px 0;}
.wrap-8 nav ul li{display: inline-block;}
.wrap-8 nav ul li a{display: inline-block;font-size: 14px;font-family: grbold;color: #373737;letter-spacing: 0.15em;
                    border-left: 2px solid #16a085;text-align: center;padding: 0 10px;}
.wrap-8 nav ul li:first-child a{border: none;padding:0 10px 0 0 ;}
.wrap-8 p{font-family: grbold;font-size: 14px;color: #373737;letter-spacing: 0.15em;margin-top: 20px;}
.wrap-8 img{float: right;}


/* media query */
/* tablet landscape*/
@media screen and (max-width:1220px){
	.container{width:960px}	
    .wrap-1 nav ul li{margin: 0 2px;width: 130px;}
    .wrap-1 nav ul li a{padding: 10px 2px;}
}

/* tablet portrait*/
@media screen and (max-width:980px){
	.container{width:760px}
    .col-t-3{width:25%}
    .col-t-4{width:33.33%}
    .col-t-5{width:41.66%}
    .col-t-6{width:50%}
    .col-t-9{width:75%}
    .col-t-12{width:100%}
    .wrap-1 nav ul{margin-top:20px;}
    .wrap-1 nav ul li a img{margin-top: -10px;width: 30px;padding: 0px;}
    .wrap-1 nav ul li{margin: 0 2px;width: 100px;}
    .wrap-1 nav ul li a{padding: 10px 2px;}
    .wrap-2 .title{margin-top: 150px;}
    .wrap-2 .title h1{font-size: 30px ;}
    .wrap-2 .social{margin-top:280px}
    .wrap-3 img{height: 300px;width: 400px;}
    /* .wrap-3 a{margin-bottom: 10px;} */
    .wrap-5 .img{width: 250px;height: 200px;}
    .wrap-5 .community{margin-top: 10px;}
    .wrap-6{height: 500px;padding: 170px 0 0;}
}

/* mobi landscape*/
@media screen and (max-width:767px){
	.container{width:100%}
    .col-m-4{width: 33.33%;}
    .col-m-6{width: 50%;}
    .col-m-12{width: 100%;}
    .wrap-1 nav ul li a{font-size: 12px;padding: 10px 20px;}
    .wrap-2{height: 400px;}
    .wrap-2 .title{margin-top: 60px;}
    .wrap-2 .title h1{font-size: 25px;}
    .wrap-2 .social{margin-top:40px}
    .wrap-2 .social ul li a{font-size: 20px;}
    .wrap-3 img{height: 270px;width: 350px;}
    /* .wrap-3 a{margin-bottom: 10px;} */
    .wrap-3 h2{font-size: 14px;}
    .wrap-3 a{ width: 130px;line-height: 35px;}
    .wrap-3 .para{font-size: 12px;line-height: 17px;margin: 20px 0;}
    .wrap-4 img{height: 330px;width: 200px;}
    .wrap-4 a{ width: 130px;line-height: 35px;}
    .wrap-4 h2{font-size: 14px;}
    .wrap-4 .para{font-size: 12px;line-height: 17px;margin: 20px 0; }
    .wrap-4 a{margin-bottom:20px}
    .wrap-5 {text-align: center;}
    .wrap-5 .angle{float: none;}
    .wrap-5 .img{float: none;}
    .wrap-5 .community{float: none;margin-bottom: 30px;}
    .wrap-5 .img{width: 290px;}
    .wrap-6 {height: 300px;padding: 90px 0 0;}
    .wrap-7 .btn1 button{width: 170px;height: 50px;font-size: 12px;}
    .wrap-7 .btn1 span{font-size: 20px;line-height: 50px;}
    .wrap-7 .btn2 button{width: 170px;height: 50px;font-size: 12px;}
    .wrap-7 .btn2 span{font-size: 20px;line-height: 50px;}
    .wrap-8 nav ul li a{font-size: 12px;}
}

/* mobi portrait*/
@media screen and (max-width:460px) {
    .col-mp-3{width:25%}
    .col-mp-6{width:50%}
    .col-mp-9{width:75%}
    .col-mp-12{width:100%}
    .wrap-1 nav ul li a img{width: 20px;height: 20px;}
    .wrap-1 nav ul li{width: 50px;text-align: center;margin-left: 10px;}
    .wrap-1 nav ul li a{font-size: 8px;padding: 0px;text-align: center;}
    .wrap-2 .title a{font-size: 12px;width: 140px;line-height: 33px; }
    .wrap-2 .social{margin-top:10px}
    .wrap-4 {text-align: center;}
    .wrap-4 img{height: 370px;width: 330px;}   
    .wrap-4 h2{text-align: center;margin-top: 20px;}
    .wrap-4 .para{text-align: left;}
    .wrap-4 a{font-size: 12px;width: 140px;line-height: 36px;text-align: center;}
    .wrap-5 {text-align: center;}
    .wrap-5 .angle{text-align: center;;font-size: 30px;}
    .wrap-5 .img{width: 330px;margin-bottom: 10px;}
    .wrap-6 h4{font-size: 16px;}
    .wrap-6 input{padding: 10px 10px;font-size: 16px;width: 230px;height: 50px;}
    .wrap-6 input::placeholder{font-size: 16px;}
    .wrap-6 label button{width: 63px;height: 50px;}
    .wrap-7 {text-align: center;}
    .wrap-7 .btn1{margin-bottom: 20px;float: none;}
    .wrap-7 .btn2{margin-bottom: 0px;float: none;}
    .wrap-7 .btn1 button{width: 170px;height: 50px;}
    .wrap-8 {text-align: center;}
    .wrap-8 nav ul li a{padding: 0 15px;}
    .wrap-8 p{margin-bottom: 30px;}
    .wrap-8 img{text-align: center;float: none;}

}