@media screen and (min-width: 768px) {

  :root {
    --body-max-width: 1293px;
    --body-min-width: 1293px;
    --primary-color: #007bff;
  }


}

@media (max-width: 768px) {
  :root {
    --body-max-width: 100%;
    --body-min-width: 100%;
    --primary-color: #007bff;
  }
}




a {
  color: #333;
  text-decoration: none;
  -webkit-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
  -moz-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
  -ms-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
  -o-transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease;
  transition: background-color .2s ease, border .2s ease, color .2s ease, opacity .2s ease-in-out, outline .2s ease
}

a:hover {
  text-decoration: none;
}

body {
  margin: 0;
  padding: 0;
  color: #636363;
  font: 15px/1.7 Microsoft YaHei, SimSun, Arial, Helvetica, sans-serif;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  color: #525252;
  background-color: #f3f5f7 !important;
}




.card,
.animate,
.animate-self {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}






/* .clear {
  clear: both;
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  width: 0
} */

/* .clearfix:after {
  clear: both;
  content: ' ';
  display: block;
  font-size: 0;
  height: 0;
  line-height: 0;
  visibility: hidden;
  width: 0
} */













.container {
  margin: 0 20px;
  padding: 0 30px;
  position: relative
}

.content-fixed {
  margin-bottom: -75px
}







html[xmlns] .slides {
  display: block
}

* html .slides {
  height: 1%
}






@media screen and (min-width: 768px) {
  .main {

    margin: auto;
    /* padding: 20px 0; */
    min-width: var(--body-min-width);
    width: 80%;
    /* background-color: #fff; */
    /* border: 1px solid #E4E3DF;
    box-shadow: 0 1px 6px #EEE;
    -moz-box-shadow: 0 1px 6px #EEE;
    -webkit-box-shadow: 0 1px 6px #EEE; */
    display: flex;
    justify-content: left;
    margin-top: auto;
    margin-bottom: auto;

    /* position: absolute; */
  }
}

@media (max-width: 768px) {
  .main {

    margin: auto;
    /* padding: 20px 0; */
    min-width: var(--body-min-width);
    width: 80%;
    /* background-color: #fff; */
    /* border: 1px solid #E4E3DF;
    box-shadow: 0 1px 6px #EEE;
    -moz-box-shadow: 0 1px 6px #EEE;
    -webkit-box-shadow: 0 1px 6px #EEE; */
    margin-top: auto;
    margin-bottom: auto;
  }
}


@media handheld and (max-width:767px),
screen and (max-device-width:767px),
screen and (max-width:767px) {
  nav {
    display: block;
    /* float: right; */
    /* margin: 24px 0 0; */
    position: relative;
    width: 100%
  }

  #main-nav-menu {
    display: none
  }

  #responsive-main-nav-menu {
    color: #666;
    font: 12px/1em 'Open Sans', Arial, Tahoma, sans-serif;
    display: block;
    float: right;
    margin: 30px 0;
    width: 100%
  }

  .sf-menu {
    float: none;
    margin-bottom: 40px
  }

  .sf-menu ul,
  .sf-menu ul ul {
    min-width: 100%;
    position: relative;
    left: 0 !important;
    top: 0 !important;
    padding: 0
  }

  .sf-menu li {
    float: none
  }

  .sf-menu>li.active,
  .sf-menu>li.sfHover,
  .sf-menu>li:hover {
    background: none repeat scroll 0 0 #D91700;
    box-shadow: 0 0 0 #eee;
    -webkit-box-shadow: 0 0 0 #eee;
    -moz-box-shadow: 0 0 0 #eee;
    behavior: url(js/PIE.htc)
  }

  .sf-sub-indicator {
    background: url(img/autoArrows.png) no-repeat scroll 0 0 transparent;
    display: inline-block;
    float: right;
    height: 3px;
    left: 0;
    position: relative;
    text-indent: -999em;
    top: 13px;
    width: 5px
  }

  .sf-menu>li li>a>.sf-sub-indicator {
    left: 0;
    top: 17px;
    display: inline-block;
    background: url(img/autoArrows-2.png) no-repeat
  }

  .sf-menu>li {
    margin-bottom: 0;
    background: none repeat scroll 0 0 #F7F7F7
  }

  .sf-menu>li>a {
    border-bottom: 1px solid #EEE;
    color: #999;
    font: 600 11px/32px 'Open Sans', Arial, Tahoma, sans-serif;
    height: 31px;
    margin-top: 0;
    padding: 2px 14px 0
  }

  .sf-menu>li li>a {
    font: 12px/24px OpenSansSemibold;
    padding-left: 20px
  }

  .sf-menu>li li li>a {
    padding-left: 40px
  }

  .sf-menu>li.active>a,
  .sf-menu>li.sfHover>a {
    color: #fff
  }
}