*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}
/*header*/
        /*header-top*/
.header{
    height: 80vh;
}
.header .header-top{
    width: 80%;
    height: 12vh;
    margin: auto;
}
.header .header-top .header-top-left{
    float: left;
    width: 20%;
    height: 12vh;
    position: relative;
}
.header .header-top .header-top-left span{
    width: 10%;
    height: 26%;
    display: inline-block;
    margin: 14% 0%;
    border-radius: 3px;
    font-weight: bold;
}
.header .header-top .header-top-left #logo-1{
    background-color:#f58560;
    border-radius: 50px;
    display: inline-block;
}
.header .header-top .header-top-left #logo-2{
    background-color:#34b5df;
    display: inline-block;
}
.header .header-top .header-top-left #logo-3{
    width: 30%;
    display: inline-block;
    position: absolute;
    top: 0%;
    left: 23%;
    padding-top: 1%;
}
.header .header-top .header-top-middle{
    float: left;
    width: 60%;
    height: 12vh;
}
.header .header-top .header-top-middle nav ul li{
    list-style: none;
    float: right;
    margin: 4.8% 4%;
}
#blog{
    background-color: #f58560;
    padding: 4% 50%;
    color: white;
    border-radius: 2px;
}
.header .header-top .header-top-middle nav ul li a{
    text-decoration: none;
    font-size: 17px;
    color: black;
}
.header .header-top .header-top-right{
    width: 20%;
    height: 12vh;
    float: left;
}
.header .header-top .header-top-right span a{
    font-weight: bold;
   position: relative;
    top: 38%;
   left: 59%;
    color: black;
    text-decoration: none;
}
.header .header-top .header-top-right a img{
    width: 20%;
    background-color: #f58560;
    padding:2.5%;
    border-radius: 50%;
    float: right;
    margin-top: 8%;
}
            /*header-top*/
/*header-main*/
.header-main{
    height: 81vh;
    background-color: firebrick;
    background-image: url("../images/back.jpg");
    background-size:cover;
    text-align: center;
    position: relative;
}
.header-main h1{
    font-size: 41px;
    position: absolute;
    top: 10%;
    left: 29%;
    color: white;
}
.header-main h2 span{
    width: 47%;
    display: inline-block;
    margin: auto;
    margin-top: 1%;
    font-size: 15px;
    position: absolute;
    top: 16.5%;
    left:28%;
    color: #e9e9e9;
}
.header-main #link{
    background-color: #f58560;
    color: white;
    text-decoration: none;
    padding: 1% 5%;
    border-radius: 3px;
    position: absolute;
    top: 32%;
    left: 41%;
    font-weight: bold;
}
 .header-main .box{
    width: 8%;
    height: 5%;
     position: absolute;
     bottom: 0;
     right: 4%;
}
.header-main .box .link{
    width: 15%;
    height: 55%;
    background-color: #444444;
    display: inline-block;
    border-radius: 50px;
    margin: auto;
}
.header-main .box .link-2{
    width: 15%;
    height: 55%;
    background-color:blue;
    display: inline-block;
    border-radius: 50px;
    border: 3px solid #f58560;
}
.header-main h3 {
    background-color: #2395b9;
    display: inline-block;
    color: white;
    padding: 0.4% 0.8%;
    font-size: 18px;
    position: absolute;
    top: 97.3%;
    left: 44.5%;
    border-radius: 3px;
    text-align: center;
}
/*header-main*/
/*main*/
.main-top{
    width: 80%;
    height: 50vh;
    margin: auto;
}
.main-top-box{
    width: 24.999%;
    height: 50vh;
    float: left;
    margin: auto;
}
.main-top-box-item-top{
  height: 35vh;
}
.main-top-box-item-top img{
    width: 65%;
 margin:10% 19%;
}
.main-top-box-item-bottom{
    height:15vh;
    text-align: center;
}
.main-top-box-item-bottom p{
    width: 85%;
    margin: auto;
}
.main-top-box-item-bottom p span{
    color:#34b5df;
}
.main-middle{
    height: 65vh;
    background-color:#2e3e4e;
}
.main-middle-box-top{
    width: 80%;
    height: 15vh;
    margin: auto;
}
.main-middle-box-top-left{
    width: 50%;
    height: 15vh;
    float: left;
}
.main-middle-box-top-left h3{
    font-size: 30px;
    margin: 5% 0%;
    color: #f58560;
}
.main-middle-box-top-right{
    float: right;
    width: 50%;
    height: 15vh;
}
.main-middle-box-top-right a{
    float: right;
    color: white;
    background-color: #1997ca;
    text-decoration: none;
    padding: 1% 1%;
    border-radius: 3px;
    margin: 5% 7%;
}
.main-middle-box-bottom{
    width: 80%;
    height: 50vh;
    margin: auto;
}
.main-middle-box-bottom-box{
    width: 33.33%;
    height: 50vh;
    float: left;
    margin: auto;
}
.main-middle-box-bottom-item-top{
    width:90%;
    height: 35vh;
    background-color: gray;
    float: left;
    margin: auto;
    background-image: url("../images/camera.png");
    background-size: 15% 25%;
   background-repeat: no-repeat;
    background-position: center center;
    border: 9px solid white;
}
.main-middle-box-bottom-item-bottom{
    width: 100%;
    height:15vh;
    float: left;
}
.main-middle-box-bottom-item-bottom h4{
    color: #f58560;
    margin-top: 4%;
}
.main-middle-box-bottom-item-bottom p{
    color: white;
    margin-top: 2%;
}
.main-bottom-top{
    height: 45vh;
    border-bottom: 1px solid gray;
}
.main-bottom-top-box{
    width: 80%;
    height: 43vh;
    margin: auto;
}
.main-bottom-top-box-top{
    height: 19vh;
    text-align: center;
}
.main-bottom-top-box-top h3{
    font-size: 30px;
    color: #2395b9;
    padding-top: 2%;
}
.main-bottom-top-box-top p{
    font-size: 20px;
    padding-top: 1%;
}
.main-bottom-top-box-bottom{
    height: 25vh;
}
.main-bottom-top-box-bottom-item{
    width: 25%;
    height: 25vh;
    float: left;
    margin: auto;
}
.main-bottom-top-box-bottom-item h4{
font-size: 20px;
    color: #2395b9;
}
.main-bottom-top-box-bottom-item p{
    padding-top: 1%;
}
.main-bottom-top-box-bottom-item p #one{
    color: #2395b9;
}
.main-bottom-top-box-bottom-item p #two{
    color: #2395b9;
    font-weight: bolder;
    font-size: 17px;
}
.main-bottom-top-box-bottom-item a{
    background-color: #2395b9;
    text-decoration: none;
    color: white;
    padding: 1% 2%;
    float: right;
    margin:4% 9%;
    border-radius: 3px;
}
.main-bottom-bottom{
    height: 46vh;

}
.main-bottom-bottom-box{
    width: 80%;
    height: 46vh;

    margin: auto;
}
.main-bottom-bottom-box-top{
    height:28vh;
    text-align: center;
}
.main-bottom-bottom-box-top h3{
    font-size: 30px;
    color: #2395b9;
    padding-top: 2%;
}
.main-bottom-bottom-box-top p{
    font-size: 20px;
    padding-top: 1%;
}
.main-bottom-bottom-box-top #three{
    color: #f58560;
    padding-top: 3%;
    font-size: 24px;
}
.main-bottom-box-bottom{
    width: 21%;
height:  18vh;
    margin: auto;
}
.main-bottom-box-bottom-item{
    width: 32%;
    height: 18vh;
    float: left;
    margin: auto;
    margin-right: 1.3%;
}
.main-bottom-box-bottom-item img{
    width: 100%;
    margin: auto;
    margin-top: 20%;

}
.main-bottom-box-bottom-item img:hover{
    border-bottom: 6px solid  #f58560;
    padding-bottom: 39%;
}
/*main*/
/*footer*/
.footer{
    height: 51vh;
    background-color:#2e3e4e;
}
.footer-box{
    width: 80%;
    height: 51vh;
    background-color:#2e3e4e;
    margin: auto;
}
.footer-box-item{
    float: left;
    width: 23%;
    margin-right: 2%;
    height: 45vh;
}
.footer-box-item-top{
    height: 12vh;
}
.footer-box-item-top h3{
    color: #f58560;
    font-size: 25px;
    padding-top: 15%;
}
.footer-box-item-bottom{
    height:33vh;
}
.footer-box-item-bottom-one{
    height: 11vh;
    border-bottom: 1px solid gray;
}
.footer-box-item-bottom-one input{
  width: 100%;
    height: 50%;
    border:0;
    border-radius:3px;
    margin-top: 4.5%;
}
.footer-box-item-bottom-one input:focus{
    outline: 0;
}
.footer-box-item-bottom p{
    padding: 2% 0%;
    color: white;
}
.footer-box-item-bottom #four{
    color: #2395b9;
}
.footer-box-item-bottom a{
    text-decoration: none;
    color: #2395b9;
}
.footer-box-item-bottom-one #five{
    float: right;
    background-color: #2395b9;
    color: white;
    margin-top: 2.5%;
    padding: 1% 4%;
    border-radius: 3px;
}
.footer-box-item-bottom-one-left{
    width: 25%;
    height: 9vh;
    border-radius: 1px;
    background-color: white;
    float: left;
}
.footer-box-item-bottom-one-left-one{
    width: 25%;
    height: 9vh;
    border-radius: 1px;
    float: left;
    padding: 1%;
}
.footer-box-item-bottom-one-left-one img{
    width: 100%;
}
.footer-box-item-bottom-one-right{
    width: 71%;
    height: 9vh;
    float: right;
    margin-top: 1.5%;
}
.footer-box-item-bottom-one-right .six{
    font-size: 14px;
}
/*footer*/