@font-face {
  font-family: 'Graphik 600';
  src: url('../fonts/graphik-semibold-webfont.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'Graphik 600 Italic';
  src: url('../fonts/graphik-semibolditalic-webfont.ttf') format('truetype');
  font-weight: 600;
  font-style: italic;
  font-display: auto;
}
@font-face {
  font-family: 'Graphik 400';
  src: url('../fonts/Graphik-400-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'Graphik 300';
  src: url('../fonts/Graphik-300-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'Graphik 700';
  src: url('../fonts/Graphik-700-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'Graphik 800';
  src: url('../fonts/Graphik-800-Black.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'Graphik 100';
  src: url('../fonts/Graphik-100-Thin.otf') format('opentype');
  font-weight: 100;
  font-style: normal;
  font-display: auto;
}
@font-face {
  font-family: 'Graphik 500';
  src: url('../fonts/Graphik-500-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: auto;
}

html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;height:100%}

body{margin:0;min-height:100%;height: 100%;background-color:#f4f1f6;font-family:'Graphik 400',Arial,sans-serif;color:#0c161a;font-size:16px;font-weight:400}

/* header */
.header {height: 100px; width: 100%; box-sizing: border-box; background-color: #d9d7df; display: flex; justify-content: center;}
.header .con {width: 100%; height: auto; padding: 0 20px; margin: 0 auto; display: flex; flex-flow: row wrap; align-items: center; justify-content: space-between;}

.header .navbar-header { height: auto; display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; }
.header .navbar-brand { display: block; height: auto;}

.header .navbar-brand .logo { float: left; display: block; height: auto; text-decoration: none;}
.header .navbar-brand svg{width: 72px; height: auto;}
.header .navbar-brand h1{font-size: 26px; color: #2b2b2b; float: right; padding-left: 15px; line-height: 65px; font-family: 'Graphik 400';}
.header .navbar-brand span { font-size: 12px; }
.header .nav{display: inline-block;}
.header .nav li { display: flex; align-items: center; padding-right: 32px; height: 40px; box-sizing: border-box; float: left;}
.header .nav li i{padding-right: 10px; display: flex; align-items: center; float: left;}
.header .nav li i svg{margin-top: -2px;}
.header .nav li i #svg4{margin-top: 0px;}

.header .nav li a { position: relative; font-size: 16px; color: #384558; line-height: 40px; box-sizing: border-box; text-decoration: none; display: inline-block;}
.header .nav li a::before{content: ""; position: absolute; width: 100%; height: 1px; bottom: 8px; margin-bottom: -4px; left: 0px; background-color: #384558; visibility: hidden; transform: scaleX(0); transition: all 0.2s ease-in-out 0s;}

/* .header .nav li a:hover { color: #384558;} */
.header .nav li a:hover::before{visibility: visible; transform: scaleX(1); transition: all 0.2s ease-in-out 0s;}

.header .navbar-toggle { display: none; height: 37px; background: rgba(0, 0, 0, 0); border: none; cursor: pointer; }
.header .navbar-toggle span { display: block; width: 30px; margin: 4px 0; border-bottom: 2px solid #fff; }

@media screen and (max-width: 1520px) {
  /* .header .con{justify-content: space-between;} */
}
@media screen and (max-width: 1279px) {
  .header .nav li { padding: 0 10px; }
}
@media screen and (max-width: 1000px) {
  .header .con { display: block; }
  .header .navbar-header { height: 100px; }
  .header .navbar-brand{position: static;}
  .header .navbar-toggle { display: flex; flex-flow: column; justify-content: center; align-items: center; }
  .header .collapse { display: none; }
}
@media screen and (max-width: 768px) {
  .header .navbar-header { height: 100px; }
  .header .navbar-brand h1{font-size: 20px;}
  .header .navbar-brand { margin: 0; }
  .header .navbar-brand span { display: none; }
}

@media screen and (max-width: 390px) {
  .header .con { padding: 0; }
  .header .navbar-brand h1 { font-size: 20px; }
}

.bottom{padding-top: 100px; padding-bottom: 100px;}
.bottom .box{background-image: linear-gradient(60deg, rgb(48, 226, 166)0%, rgb(47, 174, 227)100%); height: 420px; max-width: 1200px; margin: 0 auto; border-radius: 20px; padding-right: 80px; box-sizing: border-box;}
.bottom .width-500{-webkit-flex: 0 0 500px; -ms-flex: 0 0 500px; flex: 0 0 500px;}
.bottom .man{position: relative; top: -36px; left: -30px;}
.bottom .man img{display: block; width: 100%; height: auto;}
.bottom h3{font-size: 44px; text-align: center; color: #fff; padding-top: 88px;}
.bottom .btnbox{}
.bottom .btn{padding: 0 30px; height: 70px; background: #313734; border-radius: 35px; color: #fff; text-decoration: none; margin: 80px auto;}
.bottom .btn:hover{background: #000;}
.bottom .btn i{display: block; width: 32px; height: 28px; background: url(../images/ad-down-ico.png) center center no-repeat;}
.bottom .btn span{font-size: 24px; padding-left: 16px;}
@media (max-width: 1024px){
  .bottom .box{padding: 0 20px;}
  .bottom .width-500{-webkit-flex: 0 0 300px; -ms-flex: 0 0 300px; flex: 0 0 300px; display: flex; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}
  .bottom .man{position: static;}
  .bottom h3{font-size: 32px;}
  /* .bottom .btn span{font-size: 18px;} */
}
@media (max-width: 768px){
  .bottom .box{height: auto;}
  .bottom .btn{height: auto;}
  .bottom .btn span{font-size: 16px; padding: 10px 0;}
}

.sidebar-wrapper{position: relative; height: 100%; overflow: auto;}
#sidebar { background-color: #d9d7df;}
#sidebar .logo{padding-left: 10px;}
#sidebar .logo svg{margin: 10px 0;}
#sidebar .nav { margin-top: 20px; line-height: 40px; list-style-type: none; padding: 0;}
#sidebar .nav a { display: block; padding: 0 20px; color: #384558; text-decoration: none;}
#sidebar .nav a:hover { background-color: #b0aeb6;}
[data-simplersidebar='active'] { box-shadow: -3px 0 3px 0 rgba(0, 0, 0, 0.5);}
#toggle-sidebar{float: right; display: none;}
@media screen and (max-width: 1000px) {
  #toggle-sidebar{display: block;}
}


.footer{height: 40px; width: 100%; background-color: #0a0a0a; display: flex; justify-content: center; align-items: center;}
.footer p{font-size: 12px; color: #fff;}
.footer ul{padding: 11px 0;}
.footer ul li{padding: 0 5px; float: left; list-style: none; color: #fff; font-size: 12px; line-height: 18px;}
.footer ul a{color: #fff; font-size: 12px; text-align: center; text-decoration: none; line-height: 18px; padding: 0 2px;}
.footer ul a:hover{color: #16b6a8;}
@media screen and (max-width: 768px) {
  .footer{height: auto;}
}