.cf {
    zoom: 1
}
.cf:after {
    content: ".";
    display: block;
    clear: both;
    font-size: 0;
    height: 0;
    visibility: hidden;
    overflow: hidden
}
#example1{width: 100%;height: 640px;}
.nav1{justify-content:flex-start; align-items:center;display: flex;width: 55%;float: left;margin-bottom: 15px;flex-wrap: wrap;}
.nav1 img{width:100%;}
.nav1 i{width: 24px;display:inline-block;margin-right: 5px;}
.nav1 li{justify-content:flex-start; align-items:center;display: flex;font-size: 14px;margin-right: 15px;flex-wrap: wrap;}
.nav1 li:nth-child(1) a{color: #F74F00;font-weight: bold;}

.nav2{justify-content:flex-end; align-items:center;display: flex;width: 45%;float: left;margin-bottom: 15px;flex-wrap: wrap;}
.nav2 img{width:100%;}
.nav2 i{width: 24px;display:inline-block;margin-right: 5px}
.nav2 li{justify-content:flex-start; align-items:center;display: flex;font-size: 14px;margin-left: 15px;flex-wrap: wrap;}
@media (max-width: 780px) {
    .nav1,.nav2{width: 100%;justify-content:flex-start;}
    .nav2 li{margin-left: 0px;margin-right: 15px;}
    #example1{margin-bottom: 100px;}
}

@media (max-width: 480px) {
    .nav1 li,.nav2 li{font-size: 12px;}
}