:root {
  --flat-blue: #3498db;
  --flat-blue-dark: #2980b9;
  --flat-green: #2ecc71;
  --flat-green-dark: #27ae60;
  --flat-cyan: #1abc9c;
  --flat-cyan-dark: #16a085;
  --flat-purple: #9b59b6;
  --flat-purple-dark: #8e44ad;
  --flat-orange: #e67e22;
  --flat-orange-dark: #d35400;
  --flat-yellow: #f1c40f;
  --flat-yellow-dark: #f39c12;
  --flat-red: #e74c3c;
  --flat-red-dark: #c0392b;
  --flat-milk: #ecf0f1;
  --flat-milk-dark: #bdc3c7;
  --flat-gray: #95a5a6;
  --flat-gray-dark: #7f8c8d;
  --flat-night: #34495e;
  --flat-night-dark: #2c3e50;

  --ocean-blue: rgb(7, 108, 224);
  --dark-gray: #646464;
  --light-gray: #aaa;
  --extra-light-gray: #ccc;
  --lightest-gray: #eee;
}

/*==============================*/
/*                              */
/*    Customize Style Begin     */
/*                              */
*,
*:before,
*:after {
  box-sizing: border-box;
}
html {
  font-size: 16px;
}

body {
  font-size: 1.0rem;
  line-height: 100%;
}
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

a:link,
a:visited {
  text-decoration: none;
  color: #000;
}
a:hover,
a:active {
  text-decoration: none;
  color: #aaa;
}
ul,
ol {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}
.dtbg {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: relative;
  background-image: attr('data-bg');
}
.dtbg img {
  display: none;
}
.dtbg.feature-img {
  width: 50%;
  height: 320px;
}
.shadow-text {
  text-shadow: 2px 2px 12px #aaa;
}
.for-pc {
  display: inherit;
}
.for-mb {
  display: none !important;
}
@media screen and (max-width: 767px) {
  .for-pc {
    display: none !important;
  }
  .for-mb {
    display: block !important;
  }
}
/* ----------- Shadow effects Begin ----------- */
.box-light-1 {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  transition: all 0.2s;
}
.box-light-1.box-hover:hover {
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.box-strong-1 {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}
.box-strong-1.box-hover:hover {
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
}

/* box shadow only bottom style 1 */
.box-one-edge-1 {
  box-shadow: 0 4px 8px -3px #aaa;
  transition: all 0.2s;
}
.box-one-edge-1.box-hover:hover {
  box-shadow: 0 4px 16px -1px #aaa;
}

/* box shadow only bottom style 2 */
.box-one-edge-2 {
  box-shadow: 0 10px 6px -6px #aaa;
  transition: all 0.2s;
}
.box-one-edge-2.box-hover:hover {
  box-shadow: 0 10px 24px -6px #aaa;
}

/* box shadow only bottom style 3: hover expand*/
.box-one-edge-3 {
  position: relative;
  transition: all 0.2s;
}
.box-one-edge-3:before,
.box-one-edge-3:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 15px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-3deg);
  transform: rotate(-3deg);
  transition: all 0.2s;
}
.box-one-edge-3:after {
  -webkit-transform: rotate(3deg);
  transform: rotate(3deg);
  right: 10px;
  left: auto;
}
.box-one-edge-3.box-hover:hover:before,
.box-one-edge-3.box-hover:hover:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  transform: rotate(-8deg);
}
.box-one-edge-3.box-hover:hover:after {
  -webkit-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}

/* box shadow only bottom style 4: stronger than style 3 */
.box-one-edge-4 {
  position: relative;
  transition: all 0.2s;
}
.box-one-edge-4:before,
.box-one-edge-4:after {
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 25px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width: 300px;
  background: #777;
  box-shadow: 0 35px 20px #777;
  -webkit-transform: rotate(-8deg);
  transform: rotate(-8deg);
  transition: all 0.2s;
}
.box-one-edge-4:after {
  -webkit-transform: rotate(8deg);
  transform: rotate(8deg);
  right: 10px;
  left: auto;
}
.box-one-edge-4.box-hover:hover:before,
.box-one-edge-4.box-hover:hover:after {
  box-shadow: 0 25px 50px -2px #777;
}

/* box shadow only bottom style 5 */
.box-one-edge-5 {
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
.box-one-edge-5:before,
.box-one-edge-5:after {
  content: "";
  position: absolute;
  z-index: -1;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  top: 50%;
  bottom: 0;
  left: 10px;
  right: 10px;
  border-radius: 100px / 10px;
}
.box-one-edge-5:after {
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}

/* box shadow top and bottom */
.box-top-bottom {
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  transition: all 0.2s;
}
.box-top-bottom:before,
.box-top-bottom:after {
  content: "";
  position: absolute;
  z-index: -1;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  top: 0;
  bottom: 0;
  left: 10px;
  right: 10px;
  border-radius: 100px / 10px;
  transition: all 0.2s;
}
.box-top-bottom:after {
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}
.box-top-bottom.box-hover:hover:before,
.box-top-bottom.box-hover:hover:after {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
}

/* box shadow left and right */
.box-left-right {
  position: relative;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
  transition: all 0.2s;
}
.box-left-right:before,
.box-left-right:after {
  content: "";
  position: absolute;
  z-index: -1;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.8);
  top: 10px;
  bottom: 10px;
  left: 0;
  right: 0;
  border-radius: 100px / 10px;
  transition: all 0.2s;
}
.box-left-right:after {
  right: 10px;
  left: auto;
  -webkit-transform: skew(8deg) rotate(3deg);
  transform: skew(8deg) rotate(3deg);
}
.box-left-right.box-hover:hover:before,
.box-left-right.box-hover:hover:after {
  box-shadow: 0 0 40px rgba(0, 0, 0, 0.4);
}

/* material design box shadow style 1 */
.box-mtd-1 {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.box-mtd-1:hover {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

/* material design box shadow style 2 */
.box-mtd-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

/* material design box shadow style 3 */
.box-mtd-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

/* material design box shadow style 4 */
.box-mtd-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

/* material design box shadow style 5 */
.box-mtd-5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.22);
}

/* ------------ Shadow effects End ------------ */

/* ----------- CSS patterns Begin ----------- */
.patterns-a {
  background: radial-gradient(black 1%, transparent 1%) 0 0,
    radial-gradient(black 1%, transparent 1%) 8px 8px,
    radial-gradient(rgba(255, 255, 255, .1) 1%, transparent 2%) 0 1px,
    radial-gradient(rgba(255, 255, 255, .1) 1%, transparent 12%) 8px 9px;
  background-color: #282828cc;
  background-size: 16px 16px;
}
/* ------------ CSS patterns End ------------ */
/* ----------- Clip path style Begin ----------- */
.clip-style-x {
  transition: all 0.2s;
  -webkit-clip-path: polygon(
    0 0,
    30% 0,
    50% 27%,
    70% 0,
    100% 0,
    62% 50%,
    100% 100%,
    70% 100%,
    50% 73%,
    30% 100%,
    0 100%,
    38% 50%
  );
  clip-path: polygon(
    0 0,
    30% 0,
    50% 27%,
    70% 0,
    100% 0,
    62% 50%,
    100% 100%,
    70% 100%,
    50% 73%,
    30% 100%,
    0 100%,
    38% 50%
  );
}
.clip-style-x.clip-hover:hover {
  -webkit-clip-path: polygon(
    0 0,
    30% 0,
    50% 0,
    70% 0,
    100% 0,
    100% 50%,
    100% 100%,
    70% 100%,
    50% 100%,
    30% 100%,
    0 100%,
    0 50%
  );
  clip-path: polygon(
    0 0,
    30% 0,
    50% 0,
    70% 0,
    100% 0,
    100% 50%,
    100% 100%,
    70% 100%,
    50% 100%,
    30% 100%,
    0 100%,
    0 50%
  );
}
/* ------------ Clip path style End ------------ */
/* ----------- Typography Style Begin ----------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 100%;
}
h1 {
  font-size: 2.5rem;
}
h2 {
  font-size: 2.0rem;
}
h3 {
  font-size: 1.5rem;
}
h4 {
  font-size: 1.25rem;
}
h5 {
  font-size: 1.0rem;
}
h6 {
  font-size: 0.75rem;
}
h1,
h2,
h3 {
  margin-top: 1.0rem;
  margin-bottom: 1.0rem;
}
h4,
h5,
h6 {
  margin: 0.5rem 0;
}
p,
span,
a {
  font-size: 1.0rem;
  line-height: 150%;
}
p {
  margin-bottom: 0;
}
h1.al-center,
h2.al-center,
h3.al-center,
h4.al-center,
h5.al-center,
h6.al-center,
p.al-center {
  text-align: center;
}
h1.al-right,
h2.al-right,
h3.al-right,
h4.al-right,
h5.al-right,
h6.al-right,
p.al-right {
  text-align: right;
}
h1.font-impact,
h2.font-impact,
h3.font-impact,
h4.font-impact,
h5.font-impact,
h6.font-impact,
p.font-impact,
span.font-impact {
  font-family: impact;
}
h1.mb-thin,
h2.mb-thin,
h3.mb-thin,
h4.mb-thin,
h5.mb-thin,
h6.mb-thin {
  margin-bottom: 1rem;
}

.clear-fix {
  clear: both;
}
/* ------------ Typography Style End ------------ */

/*                              */
/*     Customize Style End      */
/*                              */
/*==============================*/

/*==============================*/
/*                              */
/*      Color Style   Begin     */
/*                              */
/* ----------- background color Begin ----------- */
.flat.bg-blue {
  background-color: var(--flat-blue);
}
.flat.bg-blue-dark {
  background-color: var(--flat-blue-dark);
}
.flat.bg-green {
  background-color: var(--flat-green);
}
.flat.bg-green-dark {
  background-color: var(--flat-green-dark);
}
.flat.bg-cyan {
  background-color: var(--flat-cyan);
}
.flat.bg-cyan-dark {
  background-color: var(--flat-cyan-dark);
}
.flat.bg-purple {
  background-color: var(--flat-purple);
}
.flat.bg-purple-dark {
  background-color: var(--flat-purple-dark);
}
.flat.bg-orange {
  background-color: var(--flat-orange);
}
.flat.bg-orange-dark {
  background-color: var(--flat-orange-dark);
}
.flat.bg-yellow {
  background-color: var(--flat-yellow);
}
.flat.bg-yellow-dark {
  background-color: var(--flat-yellow-dark);
}
.flat.bg-red {
  background-color: var(--flat-red);
}
.flat.bg-red-dark {
  background-color: var(--flat-red-dark);
}
.flat.bg-milk {
  background-color: var(--flat-milk);
}
.flat.bg-milk-dark {
  background-color: var(--flat-milk-dark);
}
.flat.bg-gray {
  background-color: var(--flat-gray);
}
.flat.bg-gray-dark {
  background-color: var(--flat-gray-dark);
}
.flat.bg-night {
  background-color: var(--flat-night);
}
.flat.bg-night-dark {
  background-color: var(--flat-night-dark);
}
/* ------------ background color End ------------ */

/* ----------- gradient background color Begin ----------- */
.bggd-blue-cyan {
  background: linear-gradient(90deg, #0b8dc8, #00ad9d);
}
/* ------------ gradient background color End ------------ */

/* ----------- text color Begin ----------- */
/* custom color */
.text-gray-dark {
  color: #aaa;
}
/* flat color */
.flat.text-blue {
  color: var(--flat-blue);
}
.flat.text-blue-dark {
  color: var(--flat-blue-dark);
}
.flat.text-green {
  color: var(--flat-green);
}
.flat.text-green-dark {
  color: var(--flat-green-dark);
}
.flat.text-cyan {
  color: var(--flat-cyan);
}
.flat.text-cyan-dark {
  color: var(--flat-cyan-dark);
}
.flat.text-purple {
  color: var(--flat-purple);
}
.flat.text-purple-dark {
  color: var(--flat-purple-dark);
}
.flat.text-orange {
  color: var(--flat-orange);
}
.flat.text-orange-dark {
  color: var(--flat-orange-dark);
}
.flat.text-yellow {
  color: var(--flat-yellow);
}
.flat.text-yellow-dark {
  color: var(--flat-yellow-dark);
}
.flat.text-red {
  color: var(--flat-red);
}
.flat.text-red-dark {
  color: var(--flat-red-dark);
}
.flat.text-milk {
  color: var(--flat-milk);
}
.flat.text-milk-dark {
  color: var(--flat-milk-dark);
}
.flat.text-gray {
  color: var(--flat-gray);
}
.flat.text-gray-dark {
  color: var(--flat-gray-dark);
}
.flat.text-night {
  color: var(--flat-night);
}
.flat.text-night-dark {
  color: var(--flat-night-dark);
}
/* ------------ text color End ------------ */

/* ----------- border color Begin ----------- */

/* ------------ border color End ------------ */
/*                              */
/*       Color Style   End      */
/*                              */
/*==============================*/

/*==============================*/
/*                              */
/*     Background Style Begin     */
/*                              */
.bgpt-1 {
  background-color: #269;
  background-image: linear-gradient(
      rgba(255, 255, 255, 0.5) 2px,
      transparent 2px
    ),
    linear-gradient(90deg, rgba(255, 255, 255, 0.5) 2px, transparent 2px),
    linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

.bgpt-2 {
  background: radial-gradient(black 3px, transparent 4px),
    radial-gradient(black 3px, transparent 4px),
    linear-gradient(#fff 4px, transparent 0),
    linear-gradient(
      45deg,
      transparent 74px,
      transparent 75px,
      #a4a4a4 75px,
      #a4a4a4 76px,
      transparent 77px,
      transparent 109px
    ),
    linear-gradient(
      -45deg,
      transparent 75px,
      transparent 76px,
      #a4a4a4 76px,
      #a4a4a4 77px,
      transparent 78px,
      transparent 109px
    ),
    #fff;
  background-size: 109px 109px, 109px 109px, 100% 6px, 109px 109px, 109px 109px;
  background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}

.bgpt-3 {
  background: radial-gradient(
        1.5em 6.28571em at 1.95em,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.25) 55%,
        rgba(255, 255, 255, 0) 55%
      )
      0 0,
    radial-gradient(
        1.5em 6.28571em at -0.45em,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.25) 55%,
        rgba(255, 255, 255, 0) 55%
      )
      1.5em 5.5em,
    radial-gradient(
        2.3em 4.57143em at 2.99em,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.3) 55%,
        rgba(255, 255, 255, 0) 55%
      )
      0 0,
    radial-gradient(
        2.3em 4.57143em at -0.69em,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.3) 50%,
        rgba(255, 255, 255, 0.3) 55%,
        rgba(255, 255, 255, 0) 55%
      )
      2.3em 4em,
    radial-gradient(
        3.5em 6.28571em at 4.55em,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.25) 55%,
        rgba(255, 255, 255, 0) 55%
      )
      0 0,
    radial-gradient(
        3.5em 6.28571em at -1.05em,
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.25) 50%,
        rgba(255, 255, 255, 0.25) 55%,
        rgba(255, 255, 255, 0) 55%
      )
      3.5em 5.5em,
    radial-gradient(#15ffa5, #00ced1);
  background-color: mediumspringgreen;
  background-size: 1.5em 11em, 1.5em 11em, 2.3em 8em, 2.3em 8em, 3.5em 11em,
    3.5em 11em, 100% 100%;
  background-repeat: repeat;
}

.bgpt-4 {
  background: linear-gradient(135deg, black 25%, transparent 25%) -50px 0,
    linear-gradient(225deg, black 25%, transparent 25%) -50px 0,
    linear-gradient(315deg, black 25%, transparent 25%),
    linear-gradient(45deg, black 25%, transparent 25%);
  background-size: 2em 2em;
  background-color: #232323;
}
/*                              */
/*      Background Style End      */
/*                              */
/*==============================*/

/*==============================*/
/*                              */
/*     Layout Style   Begin     */
/*                              */
.no-padding {
  padding: 0;
}
.no-margin {
  margin: 0;
}
.inline-block {
  display: inline-block;
}
/* ----------- Flex layout Begin ----------- */
.flex-wrapper {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
/* ------------ Flex layout End ------------ */

/*                              */
/*      Layout Style   End      */
/*                              */
/*==============================*/

/*==============================*/
/*                              */
/*       Components Begin       */
/*                              */

/* ----------- Border Style Begin ----------- */

/* Style 1 */
.bs-top-bottom {
  text-align: center;
  display: inline-block;
  padding: 1.2rem;
  position: relative;
  margin: 1.2rem 0;
}

.bs-top-bottom:before {
  position: absolute;
  height: 35%;
  width: 100%;
  left: 0;
  right: 0;
  bottom: 65%;
  border: 1px solid #ccc;
  content: "";
  border-bottom: none;
}

.bs-top-bottom:after {
  position: absolute;
  height: 35%;
  width: 100%;
  bottom: 0;
  left: 0;
  right: 0;
  top: 65%;
  border: 1px solid #ccc;
  content: "";
  border-top: none;
}

/* Style 2 */
.bs-lineThrough {
  position: relative;
  text-align: center;
}
.bs-lineThrough:before,
.bs-lineThrough:after {
  position: absolute;
  height: 1px;
  content: "";
  width: 33%;
  background-color: #aaa;
  top: calc(50% - 1px);
}
.bs-lineThrough:before {
  left: 0;
}
.bs-lineThrough:after {
  right: 0;
}
/* style 3 */
.bs-left,
.bs-right {
  display: inline-block;
  text-align: center;
  text-transform: capitalize;
}
.bs-left {
  padding: 0px 0px 0px 2.5rem;
  border-left: 5px solid rgb(1, 237, 201);
}
.bs-right {
  padding: 0px 2.5rem 0px 0px;
  border-right: 5px solid rgb(1, 237, 201);
}

/* ------------ Border Style End ------------ */

/* ----------- Overlay style Begin ----------- */
.overlay-darker:after {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  content: "";
  transition: background-color 300ms;
  background-color: rgba(65, 74, 82, 0.6);
  transition: all 0.2s;
}
.overlay-darker:hover:after {
  background-color: rgba(65, 74, 82, 0.8);
}
/* ------------ Overlay style End ------------ */

/*                              */
/*        Components End        */
/*                              */
/*==============================*/

/* TODO: 2018年最新编辑：*/
/* ----------- Owl-carousel setup Begin ----------- */
.banner-wrapper {
  padding-left: 0;
  padding-right: 0;
}
/* ------------ Owl-carousel setup End ------------ */

/* ----------- Bootstrap Setup Begin ----------- */
/* Navbar Style */
.navbar-default.bg-white {
  background-color: #fff;
}

/* tab-content */
.nav-tabs > li > a {
  margin-right: 0;
  line-height: 1.5;
  border-radius: 0;
  border: none;
}

.nav-tabs .dropdown-menu {
  padding: 0;
}

.dropdown-menu > li > a {
  padding: 10px 15px;
}

.nav-tabs.no-border {
  border-bottom: none;
}

.nav-tabs.block-style > li {
  float: none;
  margin-bottom: 0;
}

.nav-tabs.no-border > li.active > a,
.nav-tabs.no-border > li.active > a:focus,
.nav-tabs.no-border > li.active > a:hover {
  border: none;
}
/* ------------ Bootstrap Setup End ------------ */