body{
    display: flex;
    flex-direction: row;
    justify-content: center;
    /*background:url('../img/web.jpg');*/
    width: 100%;
	/* min-width: 1200px;
	min-height: 1200px; */
    /* font-family: Arial, Helvetica; */
}

.app{
   color: #777;
   padding: 10px;
   display: flex;
   flex-direction: column;
   max-width: 1100px;
   max-width: 1200px;
}
.app-header{
    width: 90%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    line-height: 60px;
    color: #076ce0;
    margin: 0 auto;
    font-size:x-large;
}
.app-header-right ul{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
	font-size:large;
}
.app-header-right ul li{
    margin: 0 10px;
    color: #777;
}

.app-banner{
    width: 85%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 50px auto 0px auto;
} 

.app-banner img{
 height: 300px;
 width: 400px;
}

.app-banner-left{
	align-items:center;
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* align-items: center; */
}

.app-banner-right{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
	align-items:center;
    /* align-items: center; */
}

.app-function{
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; 
    margin: 50px 0;
}
.app-function-top{
    text-align: center;
    line-height: 30px;
}
.app-function-top h1,.app-contact-top h1,.app-ex-top h1{
    color: #076ce0;
}
.app-function-bottom{
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-row-gap: 20px;
}
.app-function-bottom-item{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    line-height: 30px;
}


.app-ex{
    width: 90%;
    height: 700px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
}
.app-ex-top{
    margin-top: 30px;
    margin-bottom: 20px;
}
.app-ex-top,.app-ex-bottom{
    width: 100%;
    line-height: 30px;
}
.app-ex-bottom{
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}
.app-ex-bottom-left{
    width: 45%;
    position: relative;
}
.startVideo{
    position: absolute;
    top: 95px;
    left: 50%;
    width: 50px;
    height: 50px;
    transform: translateX(-50%);
    cursor: pointer;
}
.app-ex-bottom-left .videoImg{
width: 100%;
}
.app-ex-bottom-right{
    width: 45%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-row-gap: 20px;
    align-items: center;
}
.app-ex-bottom-right-item{
    width: 95%;
    display: flex;
    flex-direction: row;
}
.app-ex-bottom-right-item-top{
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.app-ex-bottom-right-item-top img{
    width: 95%;
}
.app-ex-bottom-right-item-bottom{
    margin-left: 5px;
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content:center;
    line-height: 15pt;
}
.app-contact{
    width: 90%;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 50px auto;
}
.app-contact-top{
    margin-bottom: 30px;
}
.app-contact-top,.app-contact-bottom{
    width: 100%;
    line-height: 30px;
}
.app-contact-bottom ul{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-row-gap: 20px;
    align-self: center;
    line-height: 30px;
}
.app-contact-bottom{
    margin-bottom: 40px;
    font-size: x-small;
}

.app-contact-bottom li{
    margin-top: 40px;
    margin-bottom: -25px;
    font-size: x-small;

}

.tf-copyright-text {
    border-top: 1px solid #d0d0e2;
    padding: 22px 0;
    text-decoration:none;
    text-align: center;
}