/*------------------------------------------------------------------
Common Stylesheet

Project :  F4theme | Minimal Multipurpose Bootstrap4 Template
Build:     Bootstrap 4+
Author:    F4H3M

-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[Table of contents]

1.  Common Styles
	1.1	Variables
	1.2	Mixins
	1.3	Reset
2.  Menu
3.  Preloader 
4.  Buttons
5.  Section Title
6.  Cta
7.  Banner
8.  About
9.  Service
10. Feature
11. Facts
12. Work
13. Plan
14. Portfolio
15. Team
16. Testimonial
17. Brand
18. Countdown
19. Blog
20. Contact
20. Footer

-------------------------------------------------------------------*/
/* =================================== */
/*  Font Family and Colors Styles
/* =================================== */
/* =================================== */
/*  Basic Style 
/* =================================== */
::-moz-selection {
  /* Code for Firefox */
  background-color: #2cc6e6;
  color: #fff;
}

::selection {
  background-color: #2cc6e6;
  color: #fff;
}

::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #777777;
  font-weight: 300;
}

:-moz-placeholder {
  /* Mozilla Firefox 4 to 18 */
  color: #777777;
  opacity: 1;
  font-weight: 300;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: #777777;
  opacity: 1;
  font-weight: 300;
}

:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #777777;
  font-weight: 300;
}

::-ms-input-placeholder {
  /* Microsoft Edge */
  color: #777777;
  font-weight: 300;
}

body {
  color: #292929;
  font-family: "Microsoft JhengHei";
  font-size: 15px;
  font-weight: 300;
  line-height: 1.625em;
  position: relative;
  background-image: url(../img/bg1.png), url(../img/bg3.png), url(../img/pb.png);
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-size: 100%, 100%, 100%;
  background-position:
    top 400px right 0px,
    top 2000px left 0px,
    top 450px right 0px;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

select {
  display: block;
}

figure {
  margin: 0;
}

a {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

iframe {
  border: 0;
}

a,
a:focus,
a:hover {
  text-decoration: none;
  outline: 0;
}

.btn.active.focus,
.btn.active:focus,
.btn.focus,
.btn.focus:active,
.btn:active:focus,
.btn:focus {
  text-decoration: none;
  outline: 0;
}

.card-panel {
  margin: 0;
  padding: 60px;
}

/**
 *  Typography
 *
 **/
.btn i,
.btn-large i,
.btn-floating i,
.btn-large i,
.btn-flat i {
  font-size: 1em;
  line-height: inherit;
}

.gray-bg {
  background: #f9f9ff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Microsoft JhengHei";
  color: #222222;
  margin-bottom: 0;
  margin-top: 0;
  font-weight: 600;
}

h1,
.h1 {
  font-size: 36px;
}

h2,
.h2 {
  font-size: 30px;
}

h3,
.h3 {
  font-size: 24px;
}

h4,
.h4 {
  font-size: 18px;
}

h5,
.h5 {
  font-size: 16px;
}

h6,
.h6 {
  font-size: 14px;
}

td,
th {
  border-radius: 0px;
}

/**
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */
.clear::before,
.clear::after {
  content: " ";
  display: table;
}

.clear::after {
  clear: both;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.text-italic {
  font-style: italic;
}

.text-white {
  color: #fff;
}

.text-black {
  color: #000;
}

/*scrolldown */

.scrolldown {
  cursor: pointer;
  position: relative;
  width: 45px;
  height: 45px;
  border: 1px solid rgba(113, 113, 113, 0.31);
  border-radius: 50%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  -moz-transition: opacity 0.8s;
  -o-transition: opacity 0.8s;
  -webkit-transition: opacity 0.8s;
  transition: opacity 0.8s;
  z-index: 2;
}

.scrolldown.open {
  opacity: 1;
  pointer-events: auto;
}

.scrolldown:hover img {
  opacity: 1;
}

.scrolldown:hover:before {
  -moz-transform: scale(1.8);
  -ms-transform: scale(1.8);
  -webkit-transform: scale(1.8);
  transform: scale(1.8);
}

.scrolldown img {
  width: 15px;
  opacity: 0.8;
  -moz-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

.scrolldown:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  background-color: rgba(136, 136, 136, 0.2);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -webkit-transform: scale(0);
  transform: scale(0);
  -moz-transition: -moz-transform 0.3s;
  -o-transition: -o-transform 0.3s;
  -webkit-transition: -webkit-transform 0.3s;
  transition: transform 0.3s;
  z-index: -1;
  -moz-animation: c 1.5s infinite;
  -webkit-animation: c 1.5s infinite;
  animation: c 1.5s infinite;
}

@-moz-keyframes c {
  0% {
    -moz-transform: scale(0, 0);
    transform: scale(0, 0);
  }

  20% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  80% {
    -moz-transform: scale(1.6, 1.6);
    transform: scale(1.6, 1.6);
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes c {
  0% {
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }

  20% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  80% {
    -webkit-transform: scale(1.6, 1.6);
    transform: scale(1.6, 1.6);
  }

  100% {
    opacity: 0;
  }
}

@keyframes c {
  0% {
    -moz-transform: scale(0, 0);
    -ms-transform: scale(0, 0);
    -webkit-transform: scale(0, 0);
    transform: scale(0, 0);
  }

  20% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  80% {
    -moz-transform: scale(1.6, 1.6);
    -ms-transform: scale(1.6, 1.6);
    -webkit-transform: scale(1.6, 1.6);
    transform: scale(1.6, 1.6);
  }

  100% {
    opacity: 0;
  }
}

.so-1-slide {
  position: fixed;
  top: 410px;
  right: 10px;
  z-index: 999;
  padding: 5px;
  border-radius: 50%;
  background-color: #0084ff;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.so-1-slide a {
  line-height: 10px;
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
}

.so-1-slide a svg {
  fill: white;
}


.so-2-slide {
  position: fixed;
  top: 470px;
  right: 38px;
  z-index: 999;
  padding: 5px;
  border-radius: 50%;
  background-color: #66c6c3;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.so-2-slide a {
  line-height: 10px;
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
}

.so-2-slide a svg {
  fill: white;
}


.so-3-slide {
  position: fixed;
  top: 530px;
  right: 38px;
  z-index: 999;
  padding: 5px;
  border-radius: 50%;
  background-color: #66c6c3;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.so-3-slide a {
  line-height: 10px;
  width: 40px;
  height: 40px;
  display: block;
  margin: 0 auto;
}

.so-3-slide a svg {
  fill: white;
}

.so-4-slide {
  position: fixed;
  top: 590px;
  right: 10px;
  z-index: 9999;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.3))
}

.so-4-slide #gotop {
  position: relative;
  display: none;
}

.so-4-slide #gotop img {
  width: 100px;
}

.so-4-slide #gotop:after {
  color: white;
  content: "Top";
  position: absolute;
  bottom: -30px;
  left: 35px;
  font-weight: 600;
  text-shadow: 0px 0px 3px black;
}

.transition {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.section-news {
  padding: 0px 0px 80px 0px;
}

.section-map {
  padding: 0px 0px 80px 0px;
}

.section-contact {
  padding: 0px 0px 100px 0px;
}

.section-gap {
  padding: 120px 0px 80px 0px;
}

.section-gap2 {
  padding: 0px 0px 120px 0px;
}

.section-gap3 {
  padding: 0px 0px 120px 0px;
}

.section-full {
  padding: 100px 0;
}

.section-half {
  padding: 30px;
}

.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.display-table {
  display: table;
}

.light {
  color: #fff;
}

.dark {
  color: #222;
}

.relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}

.pb-40 {
  padding-bottom: 40px;
}

.pb-20 {
  padding-bottom: 20px;
}

.pt-20 {
  padding-top: 20px;
}

.overlay {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.container.fullwidth {
  width: 100%;
}

.container.no-padding {
  padding-left: 0;
  padding-right: 0;
}

.no-padding {
  padding: 0;
}

.row.no-margin {
  margin-left: 0;
  margin-right: 0;
}

/* =================================== */
/*  Common Styles 
/* =================================== */

.black-bg {
  background: #333;
}

.go-top {
  display: block;
  z-index: 9999;
  width: 40px;
  height: 40px;
  line-height: 35px;
  text-align: center;
  font-size: 30px;
  position: fixed;
  bottom: -40px;
  right: 20px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
  background-color: #404040;
  color: #FFFFFF;
  text-decoration: none;
}

.go-top.show {
  bottom: 20px;
}

.go-top:hover {
  background-color: #333;
  color: #FFFFFF;
}

.testimonial-section .owl-dots,
.work-carusel-section .owl-dots {
  text-align: center;
  bottom: 5px;
  margin-top: 20px;
  width: 100%;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  backface-visibility: hidden;
}

.testimonial-section .owl-dot,
.work-carusel-section .owl-dot {
  height: 10px;
  width: 10px;
  display: inline-block;
  background: #333;
  margin-left: 5px;
  margin-right: 5px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.testimonial-section .owl-dot.active,
.work-carusel-section .owl-dot.active {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  background: #b9b9b9;
}

.notfound-content-section h1 {
  color: #f1f1f1;
  font-size: 21vw;
  position: absolute;
  top: 50px;
  z-index: -1;
}

.notfound-content-section h2 {
  padding-top: 120px;
  font-size: 45px;
}

.notfound-content-section p {
  padding-bottom: 120px;
}

.pagination {
  margin-top: 50px;
}

.pagination .page-item:first-child .page-link,
.pagination .page-item:last-child .page-link {
  border-radius: 50px;
}

.pagination .page-item {
  padding: 0px 8px;
}

.pagination .page-link {
  color: #6f6f6f;
  font-size: 16px;
  padding: .6rem .95rem;
  border-radius: 50px;
  border-color: #eee !important;
}

.pagination .page-link:hover {
  color: white;
  background-color: #66c7c4 !important;
}

.pagination .active .page-link {
  background: #66c7c4;
}


/* =================================== */
/*  search Styles 
/* =================================== */

.btn-search {
  background: #624D4A;
  border-color: #624D4A;
  border-radius: 0px;
  color: #ffffff;
  transition: all ease-in-out .15s;
  text-align: center;
}

.search-area {
  width: 280px;
}

.form-area .form-control {
  border-radius: 0px;
}

.form-area {
  margin: 0 auto;
}



/* =================================== */
/*  Banner Styles 
/* =================================== */
.header-area {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
}

.member-bar {
  display: flex;
  padding: 8px 0px;
}

.member-bar .login-btn {
  font-size: 0.9rem;
  color: black;
  line-height: 140%;
  background-color: white;
  border: 1px solid #d0eef5;
  border-radius: 30px;
  display: inline-flex;
  padding: 5px 16px;
  margin: 0 6px;
}

.member-bar .login-btn:hover {
  font-size: 0.9rem;
  color: rgb(75, 173, 173);
}

.member-bar .lang {
  font-size: 0.9rem;
  color: black;
  line-height: 140%;
  background-color: white;
  border: 1px solid #d0eef5;
  border-radius: 30px;
  display: inline-flex;
  padding: 5px 20px;
}


.dope-nav-container {
  background-color: transparent;
}

.dope-nav-container {
  background-color: transparent;
}

.nav-brand {}

.dope-btn {
  background-color: #4a7aec;
}

.dopenav ul li.megamenu-item>a::after,
.dopenav ul li.has-down>a::after {
  color: #fff;
}

.header-area {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
}

.dark.dope-nav-container {
  background-color: rgba(25, 42, 86, 0.3);
  -webkit-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
}

.dope-nav-container.dope-sticky {
  background-color: #f8f9faf0;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-box-shadow: 0px 9px 40px -13px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 9px 40px -13px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 9px 40px -13px rgba(0, 0, 0, 0.75);
}

.dope-nav-container.dope-sticky .dope-navbar {
  background-color: #ffffff00;
}


.dope-btn {
  background-color: #4a7aec;
}

.dopenav ul li.megamenu-item>a::after,
.dopenav ul li.has-down>a::after {
  color: #fff;
}

.bg-img {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

.bg-transparent {
  background-color: transparent !important;
}

.dope-nav-container {
  position: relative;
  z-index: 100;
  /* sticky */
}

.dope-nav-container * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.dope-nav-container a {
  -webkit-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
  text-decoration: none;
  outline: none;
  font-size: 1rem;
  font-weight: 400;
  color: #232323;
  display: inline-block;
}

.dope-nav-container a:hover,
.dope-nav-container a:focus {
  -webkit-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
  text-decoration: none;
  outline: none;
  font-size: 1rem;
  color: #333;
}

.dope-nav-container.dope-sticky {
  position: fixed;
  z-index: 999;
  width: 100%;
  top: 0;
  right: 0;
  left: 0;

}

.dope-nav-container.box-skins .dopenav>ul>li {
  background-color: #1abc9c;
}

.dope-nav-container.box-skins .dopenav>ul>li>a {
  color: #fff;
}

.justify-content-between {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.justify-content-center {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.dope-navbar {
  width: 100%;
  display: flex;
  padding: 0 20px;
  background-color: #ffffffc2;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
  justify-content: center;
}


.dope-navbar .nav-brand {
  display: inline-block;
  position: absolute;
  margin-right: 30px;
  background-image: url(../img/logo.png);
  background-repeat: no-repeat;
  background-size: cover;
  width: 98px;
  height: 112px;
  top: 5px;
}

.dope-navbar .nav-brand span {
  font-family: "Microsoft JhengHei";
  font-size: 1rem;
  color: #555555;
  position: absolute;
  position: absolute;
  width: 100px;
  right: -110px;
  bottom: 0;
}

.dope-sticky .dope-navbar .nav-brand {
  width: 75px;
  height: 84px;
  top: 15px;
}


.dope-navbar .nav-brand:focus,
.dope-navbar .nav-brand:hover {}

.dopenav ul li {
  font-size: 1rem;
  font-family: "Microsoft JhengHei";
  display: inline-block;
  clear: both;
  z-index: 999;
}

.dopenav ul li.cn-dropdown-item {
  font-size: 1rem;
  z-index: 999;
}

.dopenav ul li.cn-dropdown-item ul li {
  position: relative;
  z-index: 999;
}

.dopenav ul li ul li {
  display: block;
}

.dopenav ul li ul li a {
  font-size: 1rem;
  padding: 0 20px;
}

.dopenav ul li a {
  padding: 20px 13px;
  display: block;
  font-size: 1rem;
  line-height: 34px;
}

.dopenav ul li.active a {
  color: #02a0e9;
  border-bottom: 2px solid #02a0e9;
}

.dopenav ul li a:hover,
.dopenav ul li a:focus {
  font-size: 1rem;
  color: #02a0e9;
}

.dopenav ul li .megamenu li a {
  padding: 0 12px;
}

.dopenav ul li div.single-mega a {
  height: auto;
  line-height: 1;
}

/* Down Arrow Icon for Megamenu */
.icon-dope-nav-down-arrow {
  font-family: 'FontAwesome';
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-dope-nav-down-arrow:before {
  content: "\f107";
}

.dopenav ul li.megamenu-item>a:after,
.dopenav ul li.has-down>a:after {
  font-family: 'FontAwesome';
  content: "\f107";
  color: #000000;
  padding-left: 5px;
  -webkit-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
}

.breakpoint-on .dopenav ul li.megamenu-item>a:after,
.breakpoint-on .dopenav ul li.has-down>a:after {
  color: #fff;
}

.dopenav ul li ul li.has-down>a::after {
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  transform: rotate(-90deg);
  position: absolute;
  top: 3px;
  right: 10px;
  z-index: 3;
}

/* button css */
.dope-btn {
  position: relative;
  z-index: 1;
  min-width: 120px;
  padding: 0 25px;
  line-height: 42px;
  height: 42px;
  background-color: #1abc9c;
  border-radius: 50px;
  color: #fff !important;
  margin-left: 30px;
  text-align: center;
}

.dope-btn:hover,
.dope-btn:focus {
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

/* Dropdown Toggle */
.dd-trigger {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
  cursor: pointer;
  z-index: 500;
  border-radius: 0;
  display: none;
}

/* Close Icon */
.dopecloseIcon {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 12;
  display: none;
}

.dopecloseIcon .cross-wrap {
  width: 26px;
  height: 26px;
  cursor: pointer;
  position: relative;
}

.dopecloseIcon .cross-wrap span {
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 6px;
  background: #fff;
}

.dopecloseIcon .cross-wrap span.top {
  top: 12px;
  left: 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.dopecloseIcon .cross-wrap span.bottom {
  bottom: 12px;
  left: 0;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

/* navbarToggler */
.dope-navbar-toggler {
  border: none;
  background-color: transparent;
  cursor: pointer;
  display: none;
}

.dope-navbar-toggler .navbarToggler {
  display: inline-block;
  cursor: pointer;
}

.dope-navbar-toggler .navbarToggler span {
  position: relative;
  background-color: #222;
  border-radius: 3px;
  display: block;
  height: 2px;
  margin-top: 5px;
  padding: 0;
  -webkit-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
  width: 30px;
  cursor: pointer;
}

.dope-navbar-toggler .navbarToggler span:nth-of-type(1) {
  width: 20px !important;
}

.dope-navbar-toggler .navbarToggler span:nth-of-type(3) {
  width: 15px !important;
}

.dope-navbar-toggler .navbarToggler.active span:nth-of-type(1) {
  -webkit-transform: rotate3d(0, 0, 1, 45deg);
  transform: rotate3d(0, 0, 1, 45deg);
  top: 8px;
  width: 30px !important;
}

.dope-navbar-toggler .navbarToggler.active span:nth-of-type(2) {
  opacity: 0;
}

.dope-navbar-toggler .navbarToggler.active span:nth-of-type(3) {
  -webkit-transform: rotate3d(0, 0, 1, -45deg);
  transform: rotate3d(0, 0, 1, -45deg);
  top: -8px;
  width: 30px !important;
}

.dopenav ul li .megamenu {
  position: absolute;
  width: 100%;
  left: 0;
  right: 0;
  top: 100%;
  background-color: #ffffff;
  z-index: 200;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}

.dopenav ul li .megamenu .single-mega.cn-col-5 {
  width: 20%;
  float: left;
  padding: 15px;
  border-right: 1px solid #f2f4f8;
}

.dopenav ul li .megamenu .single-mega.cn-col-5:last-of-type {
  border-right: none;
}

.dopenav ul li .megamenu .single-mega.cn-col-4 {
  width: 25%;
  float: left;
  padding: 15px;
  border-right: 1px solid #f2f4f8;
}

.dopenav ul li .megamenu .single-mega.cn-col-4:last-of-type {
  border-right: none;
}

.dopenav ul li .megamenu .single-mega.cn-col-3 {
  width: 33.3333334%;
  float: left;
  padding: 15px;
  border-right: 1px solid #f2f4f8;
}

.dopenav ul li .megamenu .single-mega.cn-col-3:last-of-type {
  border-right: none;
}

.dopenav ul li .megamenu .single-mega .title {
  font-size: 14px;
  border-bottom: 1px solid #f2f4f8;
  padding: 8px 12px;
}

.dopenav ul li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li a {
  border-bottom: 1px solid rgba(242, 244, 248, 0.7);
}

.dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:last-child a {
  border-bottom: none;
}

/* Desktop Area CSS */
.breakpoint-off .dopenav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  justify-content: center;
  align-items: center;
}

.breakpoint-off .dopenav #nav {
  margin-left: 30%;
  width: 1200px;
}

.breakpoint-off .dopenav ul li .dropdown {
  width: 100%;
  position: absolute;
  background-color: #f7fdfec7;
  top: 100%;
  left: 0;
  z-index: 99;
  height: auto;
  text-align: center;
  -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
  -webkit-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
  opacity: 0;
  visibility: hidden;
  padding: 20px 0px 15px 0px;
}

.dopenav ul li ul.dropdown li {
  display: inline-block;
  margin: 0 10px;
}

.dopenav ul li ul.dropdown li a {
  width: 160px;
  height: auto;
  padding: 0px;
  background-image: none;
}

.dopenav ul li.cn-dropdown-item {
  font-size: 1rem;
  z-index: 999;
}

.dopenav ul li ul.dropdown li a .item-img {
  width: 160px;
  height: 110px;
  display: block;
  margin: 0 auto;
  background-color: #83d3cf;
  background-size: cover;
}

.dopenav ul li ul.dropdown li a .item-text {
  color: rgb(85, 85, 85);
  font-size: 1rem;
  font-weight: 400;
  width: 100%;
  padding-top: 6px;
  text-align: center;
  text-shadow: none;
}

.breakpoint-off .dopenav ul li .dropdown li .dropdown {
  top: 10px;
  left: 180px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
}

.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown {
  opacity: 0;
  visibility: hidden;
  top: 120%;
}

.breakpoint-off .dopenav ul li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  top: 100%;
}

.breakpoint-off .dopenav ul li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  top: -10px;
}

.breakpoint-off .dopenav ul li .megamenu {
  opacity: 0;
  visibility: hidden;
  position: absolute;
  width: 100%;
  left: 0;
  top: 120%;
  background-color: #ffffff;
  z-index: 200;
  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  -webkit-transition-duration: 300ms;
  -o-transition-duration: 300ms;
  transition-duration: 300ms;
}

.breakpoint-off .dopenav ul li.megamenu-item:hover .megamenu,
.breakpoint-off .dopenav ul li.megamenu-item:focus .megamenu {
  top: 100%;
  visibility: visible;
  opacity: 1;
}

/* Mobile/Tablet Nav CSS */
.breakpoint-on .dopecloseIcon {
  display: block;
}

.breakpoint-on .dope-navbar-toggler {
  display: block;
}

.breakpoint-on .dope-navbar .dope-menu {
  background-color: #333;
  position: fixed;
  top: 0;
  left: -310px;
  z-index: 1000;
  width: 300px;
  height: 100%;
  -webkit-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
  padding: 0;
  -webkit-box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
  display: block;
  overflow-x: hidden;
  overflow-y: scroll;
}

.breakpoint-on .dope-navbar .dope-menu.menu-on {
  left: 0;
}

.breakpoint-on .dopenav ul li {
  display: block;
  position: relative;
  clear: both;
  z-index: 10;
}

.breakpoint-on .dopenav ul li a {
  font-size: 1rem;
  padding: 0 10px;
  height: 38px;
  line-height: 38px;
  color: #fff;
}

.breakpoint-on .dopenav ul li .dropdown {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.breakpoint-on .dopenav ul li .dropdown li .dropdown {
  width: 100%;
  position: relative;
  top: 0;
  left: 0;
}

.breakpoint-on .dopenav ul li.megamenu-item {
  position: relative;
  z-index: 10;
}

.breakpoint-on .dd-trigger {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: transparent;
  cursor: pointer;
  z-index: 500;
  border-radius: 0;
  display: none;
}

.breakpoint-on .dopenav ul li .dropdown,
.breakpoint-on .dopenav ul li .megamenu {
  display: none;
}

.breakpoint-on .dopenav {
  padding-top: 70px;
  padding-left: 20px;
  padding-right: 20px;
}

.breakpoint-on .dopenav ul li .megamenu {
  position: relative;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 200;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.breakpoint-on .dopenav ul li .megamenu .single-mega.cn-col-5,
.breakpoint-on .dopenav ul li .megamenu .single-mega.cn-col-4,
.breakpoint-on .dopenav ul li .megamenu .single-mega.cn-col-3 {
  width: 100%;
  border-right: none;
  border-bottom: 1px solid #f2f4f8;
}

.breakpoint-on .dopenav>ul>li>a {
  color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.breakpoint-on .dopenav ul li ul.dropdown li ul li {
  margin-left: 15px;
}

.breakpoint-on .dope-btn {
  width: calc(100% - 30px);
  margin: 30px 15px;
}

.breakpoint-on .dopenav ul li.megamenu-item>a::after,
.breakpoint-on .dopenav ul li.has-down>a::after {
  position: absolute;
  top: 0;
  right: 20px;
  z-index: 5;
}

.breakpoint-on .dopenav ul li.has-down.active>a:after,
.breakpoint-on .dopenav ul li.megamenu-item.active>a:after {
  color: #fff;
}

/* Right Side Menu Open CSS */
.right.breakpoint-on .dope-navbar .dope-menu {
  left: auto;
  right: -310px;
}

.right.breakpoint-on .dope-navbar .dope-menu.menu-on {
  left: auto;
  right: 0;
}

/* Dropdown RTL CSS */
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown {
  left: auto;
  right: 0;
}

.dropdown-rtl .dopenav ul li a,
.dropdown-rtl .dopenav ul li .megamenu .single-mega .title {
  text-align: right;
}

.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown {
  right: 180px;
  left: auto;
  opacity: 0;
  visibility: hidden;
  top: 10px;
}

.dropdown-rtl.breakpoint-off .dopenav ul li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  top: 90%;
}

.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown,
.dropdown-rtl.breakpoint-off .dopenav ul li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li .dropdown li:hover .dropdown {
  opacity: 1;
  visibility: visible;
  top: 0;
}

.dropdown-rtl.breakpoint-on .dopenav ul li ul.dropdown li ul li {
  margin-left: 0;
  margin-right: 15px;
}

.event-header .dopenav #nav li a {
  color: #fff;
}

.event-header .dopenav ul li.megamenu-item>a:after,
.event-header .dopenav ul li.has-down>a:after {
  color: #fff;
}

.event-header .dropdown li>a:after {
  color: #222 !important;
}

.event-header .dropdown li a,
.event-header .single-mega li a {
  color: #222 !important;
}

.event-header .dope-sticky .dopenav #nav li a,
.event-header .dope-sticky .dopenav ul li.megamenu-item>a:after,
.event-header .dope-sticky .dopenav ul li.has-down>a:after {
  color: #222;
}

.event-header .dope-navbar-toggler .navbarToggler span {
  background-color: #fff !important;
}

.event-header .dope-sticky .dope-navbar-toggler .navbarToggler span {
  background-color: #222 !important;
}

/* =================================== */
/*  Preloader Styles 
/* =================================== */
#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #daf8fb;
  /* change if the mask should be a color other than white */
  z-index: 9999999;
  /* makes sure it stays on top */
}

.pre-container {
  z-index: 9999 !important;
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  text-align: center;
}

.spinner {
  width: 40px;
  height: 40px;
  position: relative;
  margin: 100px auto;
}

.double-bounce1,
.double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #02a0e9;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes bounce {

  0%,
  100% {
    -webkit-transform: scale(0);
  }

  50% {
    -webkit-transform: scale(1);
  }
}

@keyframes bounce {

  0%,
  100% {
    transform: scale(0);
    -webkit-transform: scale(0);
  }

  50% {
    transform: scale(1);
    -webkit-transform: scale(1);
  }
}

/* =================================== */
/*  Buttons Styles 
/* =================================== */
.primary-btn {
  font-family: "Josefin Sans", sans-serif;
  min-width: 150px;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 0px;
  color: #222222;
  cursor: pointer;
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.primary0-btn {
  font-family: "Josefin Sans", sans-serif;
  min-width: 100px;
  display: inline-block;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  padding: 4px 10px 1px 10px;
  color: white;
  ;
  border: 1px solid rgb(216, 216, 216);
  cursor: pointer;
  position: relative;
  z-index: 1;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.primary0-btn:hover {
  color: white;
}


.black-btn {
  font-size: 1rem;
  font-weight: 500;
  font-family: "Microsoft JhengHei";
  color: #474747;
  cursor: pointer;
  width: 206px;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #65c6c3;
  border-radius: 50px;
  position: relative;
}

.black-btn:after {
  color: #02a0e9;
  content: "\f104";
  font: normal normal normal 26px/1 FontAwesome;
  text-rendering: auto;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  top: 24%;
  left: 25%;
}

.black-btn:hover:after {
  left: 15%;
}

.next-btn {
  font-size: 1rem;
  font-weight: 500;
  font-family: "Microsoft JhengHei";
  color: #474747;
  cursor: pointer;
  width: 206px;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 2px solid #65c6c3;
  border-radius: 50px;
  position: relative;
}

.next-btn:after {
  color: #02a0e9;
  content: "\f105";
  font: normal normal normal 26px/1 FontAwesome;
  text-rendering: auto;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  top: 24%;
  right: 25%;
}

.next-btn:hover:after {
  right: 15%;
}

.next-btn:hover,
.black-btn:hover {
  color: #6ecac7;
}

.more-btn {
  font-size: 1rem;
  font-family: "Microsoft JhengHei";
  color: #222222;
  cursor: pointer;
  position: relative;
  display: inline-block;
  margin-top: 0px;
  padding: 8px 10px;
  padding-left: 50px;
  margin-bottom: 20px;
  margin-left: 20px;
  border: 1px solid #66c7c4;
  border-radius: 6px;
  background-position: 10px center;
  background-size: 25px;
}

.more-btn:after {
  color: #02a0e9;
  content: "\f105";
  font: normal normal normal 20px/1 FontAwesome;
  text-rendering: auto;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  top: 24%;
  left: 15%;
}

.more-btn:hover {
  color: #02a0e9;
}

.more-btn:hover:after {
  left: 25%;
}

.outline-btn {
  border: 1px solid transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}


.outline-btn:hover {}

/* =================================== */
/*  Section Title Styles 
/* =================================== */
.section-title {
  padding-bottom: 50px;
}

.section-title h1.ab-title {
  color: #333;
  font-size: 1.9rem;
  letter-spacing: 3px;
  padding: 50px 30px;
  max-width: 100%;
  background-color: white;
  text-transform: capitalize;
  text-align: left;
  margin: 0 auto;
}

.section-title h1.ab-title small {
  color: #a5a5a5;
  position: relative;
  letter-spacing: 4px;
  font-size: 0.9rem;
  padding-left: 6px;
}

.section-title h1.ab-title small::after {
  font-size: 1.1rem;
  color: gray;
  position: absolute;
  content: "|";
  display: block;
  left: -8px;
  top: -3px;
}

.section-title h1.ab-title:after {
  position: absolute;
  content: "";
  width: 20px;
  height: 4px;
  background-color: rgb(236, 236, 231);
  display: block;
  left: 12px;
  top: 71px;
}


.section-title h1.pro-title small {
  color: #a5a5a5;
  font-size: 0.7rem;
  line-height: 100%;
  letter-spacing: 4px;
  padding: 3px;
  display: block;
}

.section-title h3 {
  font-size: 1.3rem;
  line-height: 180%;
  font-weight: 300;
  text-align: center;
  margin-top: 50px;
  padding: 30px;

}


.black-section-title h1 {
  color: #333;
  border-color: #333;
}

.black-section-title h3 {
  color: #fff;
}

.work-title h1 {
  letter-spacing: 3px;
  font-weight: 400;
  background: #f3f3f3;
  color: #333;
  padding: 30px;
  border-color: #333;
  max-width: 100%;
  width: 100%;
  margin-top: -30px;
  box-shadow: 0 0 60px 5px rgba(0, 0, 0, 0.12);
}

.work-title h1 small {
  color: #a5a5a5;
  display: block;
  font-size: 0.7rem;
  letter-spacing: 4px;
  padding: 3px;
  line-height: 100%;
}


/* =================================== */
/*  Banner Styles 
/* =================================== */


.banner-section {
  z-index: 999;
  background: url(../img/head.jpg);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  /** animation: fade-in-scale-down 15s ease-out 1;
  -webkit-animation: fade-in-scale-down 15s ease-in-out 1;
  -moz-animation: fade-in-scale-down 15s ease-in-out 1;
  -o-animation: fade-in-scale-down 15s ease-in-out 1; **/
}

@keyframes fade-in-scale-down {
  0% {
    -webkit-transform: scale(1.07);
    -ms-transform: scale(1.07);
    transform: scale(1.07)
  }

  100% {
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
  }
}

.about-p-section,
.contact-p-section {
  background: url(../img/about/about-top.png);
  background-position: center 650px;
  background-size: cover;
  background-attachment: fixed;
  /**animation: fade-in-scale-down 15s ease-out 1;
  -webkit-animation: fade-in-scale-down 15s ease-in-out 1;
  -moz-animation: fade-in-scale-down 15s ease-in-out 1;
  -o-animation: fade-in-scale-down 15s ease-in-out 1;**/
}

.about-p-section .slide__content {
  position: absolute;
  bottom: 4%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.about-p-section .slide__content--headings h2 {
  color: #5e9b9b;
  font-size: 24px;
  font-weight: 400;
  padding: 10px 30px;
  text-align: center;
  margin: 8px 0;
  border: 3px solid #a0dfdf;
  border-radius: 50px;
  position: relative;
}

.about-p-section .slide__content--headings h2:before {
  content: "";
  width: 83px;
  height: 83px;
  position: absolute;
  background-image: url(../img/titleicon.png);
  background-repeat: no-repeat;
  left: -20px;
  top: -32px;
}

.about-p-section .slide__content--headings p {
  color: #5e9b9b;
  font-size: 22px;
  padding-left: 3px;
}

.about-p-section .about-slogan,
.contact-p-section .about-slogan {
  color: white;
  text-shadow: 0px 0px 50px #222222;
  padding: 20px 0;
  font-size: 2.2rem;
  line-height: 150%;
  font-weight: 500;
  letter-spacing: 8px;
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  position: absolute;
  top: 30%;
  left: 45%;
}

.produces-p-section {
  background: url(../img/produces/pro-top.jpg);
  background-position: center bottom;
  background-size: cover;
  background-attachment: fixed;
  /**animation: fade-in-scale-down 15s ease-out 1;
  -webkit-animation: fade-in-scale-down 15s ease-in-out 1;
  -moz-animation: fade-in-scale-down 15s ease-in-out 1;
  -o-animation: fade-in-scale-down 15s ease-in-out 1;**/
}

.produces-p-section .about-slogan {
  color: white;
  text-shadow: 0px 0px 50px #222222;
  padding: 20px 0;
  font-size: 2.2rem;
  line-height: 150%;
  font-weight: 500;
  letter-spacing: 8px;
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  position: absolute;
  top: 30%;
  left: 45%;
}

.map-p-section {
  background: url(../img/map/map-top.jpg);
  background-position: center bottom;
  background-size: cover;
  background-attachment: fixed;
  /**animation: fade-in-scale-down 15s ease-out 1;
  -webkit-animation: fade-in-scale-down 15s ease-in-out 1;
  -moz-animation: fade-in-scale-down 15s ease-in-out 1;
  -o-animation: fade-in-scale-down 15s ease-in-out 1;**/
}

.map-p-section .about-slogan {
  color: white;
  text-shadow: 0px 0px 30px #222222;
  padding: 20px 0;
  font-size: 2.2rem;
  line-height: 150%;
  font-weight: 500;
  letter-spacing: 8px;
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  position: absolute;
  top: 30%;
  left: 45%;
}

.news-p-section {
  background: url(../img/produces/pro-top.jpg);
  background-position: center bottom;
  background-size: cover;
  background-attachment: fixed;
  /**animation: fade-in-scale-down 15s ease-out 1;
  -webkit-animation: fade-in-scale-down 15s ease-in-out 1;
  -moz-animation: fade-in-scale-down 15s ease-in-out 1;
  -o-animation: fade-in-scale-down 15s ease-in-out 1;**/
}

.news-p-section .about-slogan {
  color: white;
  text-shadow: 0px 0px 50px #222222;
  padding: 20px 0;
  font-size: 2.2rem;
  line-height: 150%;
  font-weight: 500;
  letter-spacing: 8px;
  -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr;
  position: absolute;
  top: 30%;
  left: 45%;
}



.pagescreen {
  height: 400px;
}

.banner-section .overlay-bg {
  background: rgba(0, 0, 0, 0.1);
}

.banner-section .index-slogan {
  color: black;
  padding: 20px 0;
  font-size: 2rem;
  line-height: 150%;
  font-weight: 500;
  letter-spacing: 8px;
  text-align: left;
  /** -webkit-writing-mode: vertical-lr;
  writing-mode: vertical-lr; **/
  position: absolute;
  top: 45%;
  left: 5%;
}

.banner-section .index-slogan small {
  font-size: 1rem;
  line-height: 150%;
  display: block;
  padding-left: 5px;
  letter-spacing: 0px;
}

.banner-section p {
  color: #222222;
  font-size: 16px;
  max-width: 600px;
  margin: 0 auto;
  display: inline-block;
}

.banner-section .action-buttons {
  padding-top: 20px;
}

.banner-section .action-buttons .primary-btn {
  margin: 0px 10px;
}

.banner-two-section {
  background-position: bottom;
  background-size: cover;
}

.banner-two-section .overlay-bg {
  background: rgba(255, 255, 255, 0.3);
}

.banner-two-section h1 {
  padding: 20px 0px;
}

.banner-two-section p {
  color: #333;
  max-width: 550px;
  margin-bottom: 20px;
}

.banner-two-section .apps-button img {
  margin-right: 10px;
}

.banner-three-section {
  background: url(../img/banner3-bg.jpg);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

.banner-three-section .overlay-bg {
  background: rgba(0, 0, 0, 0.3);
}

.banner-three-section h4,
.banner-three-section h1,
.banner-three-section p {
  color: #fff;
}

.banner-three-section h1 {
  padding: 20px 0px;
}

.banner-three-section .apps-button .primary-btn {
  margin-right: 10px;
}

.breadcrumb {
  color: black;
  font-size: 1rem;
  font-family: "Microsoft JhengHei";
  background-color: white;
  padding: 30px;
  margin-top: -100px;
  position: relative;
  z-index: 99;
  width: 50%;
  border: 0px;
  border-radius: 0rem;
}

.breadcrumb a {
  color: black;
}


/* =================================== */
/*  About Us Styles 
/* =================================== */
.about-section {
  text-align: center;
  position: relative;
  -webkit-filter: drop-shadow(12px -12px 30px rgba(0, 0, 0, 0.1));
  filter: drop-shadow(12px -12px 30px rgba(0, 0, 0, 0.1))
}

.about-section .about-title {
  font-size: 24px;
  font-weight: 400;
  color: #66c7c4;
  background-image: url(../img/indexabpic.png);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.about-section .about-title:after {
  content: "";
  width: 100px;
  height: 2px;
  background-color: #dadada;
  position: absolute;
  left: 50%;
  bottom: 37%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.about-box {
  width: 100%;
  height: 220px;
  display: flex;
  background-color: #000;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.about-box:before {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
  transition: 0.5s;
  transform: scaleX(0);
  opacity: 0;
}

.about-box:hover:before {
  transform: scaleX(1);
  opacity: 1;
}

.about-box:after {
  content: '';
  position: absolute;
  top: 10px;
  left: 10px;
  right: 10px;
  bottom: 10px;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  transition: 0.5s;
  transform: scaleY(0);
  opacity: 0;
}

.about-box .imgBox {
  position: relative;
  z-index: 10;
}

.about-box:hover:after {
  transform: scaleY(1);
  opacity: 1;
}

.about-box .imgBox img {
  width: 100%;
  transition: 0.5s;
}

.about-box:hover .imgBox img {
  opacity: .5;
  transform: scale(1.2);
}

.about-box .ab-title {
  font-size: 24px;
  margin: 0 0 10px;
  padding: 0;
  color: #fff;
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 30;
  transform: translate(-50%, -50%);
}

.about-box:hover .ab-title {
  opacity: 1;
}

.ab-ft {
  font-size: 16px;
  color: white;
  width: 100%;
  height: 160px;
  background-color: #66c7c4;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ab-ft a {
  font-size: 16px;
  color: white;
  padding: 5px 50px;
  margin-left: 30px;
  border: 3px solid #abe9e7;
  border-radius: 50px;
}

.about2-section {
  padding: 50px 0px;
}

.about2-section .ab-con-1 .ab-tab {
  font-size: 20px;
  padding: 20px 0 40px 0;
  margin: 0px 0px 50px 0px;
  text-align: center;
  border-bottom: 1px solid #e4e4e4;
}

.about2-section .ab-con-1 .ab-tab li {
  display: inline-block;
  padding: 0 30px;
}

.about2-section .ab-con-1 .ab-tab li:nth-child(2) {
  border-left: 1px solid #a3a3a3;
}

.about2-section .ab-con-1 .ab-tab li a {
  color: #624D4A;
  padding: 12px 75px;
  border: 3px solid #51aeab;
  border-radius: 100px;
  background-image: url(../img/tabicon2.png);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 25px 12px;
}

.about2-section .ab-con-1 .ab-tab li.active a {
  color: #00a0e9;
  font-weight: 500;
  background-image: url(../img/tabicon1.png);
}

.about2-section .ab-con-1 .ab-title {
  color: #439b9b;
  font-size: 36px;
  font-weight: 400;
  text-align: center;
  width: 100%;
  position: relative;
}

.about2-section .ab-con-1 .ab-title .en {
  color: #439b9b;
  font-size: 14px;
  position: absolute;
  bottom: -20px;
  left: 50%;
}

.about2-section .ab-con-1 .mi-text {
  font-size: 18px;
  line-height: 150%;
  text-align: center;
  padding: 20px 20%;
  padding-top: 40px;
}

.about2-section .ab-con-1 .so-list {
  font-size: 18px;
  padding: 20px 0 40px 0;
  margin: 0px 0px 50px 0px;
  text-align: center;
}

.about2-section .ab-con-1 .so-list li {
  display: inline-block;
  padding: 0 40px;
}

.about2-section .ab-con-1 .so-list li {
  font-size: 20px;
  color: #624D4A;
  padding: 16px 55px;
  border: 3px solid #99dedc;
  border-radius: 100px;
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: 25px 7px;
}

.about-area2 {
  padding-bottom: 270px;
}

.about2-section .ab-con-2 {
  padding-top: 50px;
  position: relative;
}

.about2-section .ab-con-2 .ab-title {
  color: #439b9b;
  font-size: 36px;
  font-weight: 400;
  text-align: left;
  width: 100%;
  padding: 50px;
  position: relative;
}

.about2-section .ab-con-2 .ab-title .en {
  color: #439b9b;
  font-size: 14px;
  position: absolute;
  bottom: 30px;
  left: 13%;
}

.about2-section .ab-con-2 .mi-text-box {
  font-size: 18px;
  line-height: 170%;
  color: white;
  background-color: #66c7c4;
  padding: 50px;
  padding-top: 100px;
  padding-bottom: 80px;
  position: relative;
}

.about2-section .ab-con-2 .mi-text-box .ab-img2 {
  width: 693px;
  height: 209px;
  background-image: url(../img/about/aboutpic1.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  right: 40px;
  top: -150px;
}

.about2-section .ab-con-2 .mi-text-box .ab-img2:before {
  content: '';
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 30px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
  transition: 0.5s;
  transform: scaleX(1);
  opacity: 1;
}

.about2-section .ab-con-2 .mi-text-box .ab-img2:after {
  content: '';
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 30px;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  transition: 0.5s;
  transform: scaleY(1);
  opacity: 1;
}

.about2-section .ab-con-2 .mi-text2 {
  font-size: 18px;
  width: 902px;
  height: 236px;
  padding: 50px 80px;
  padding-right: 120px;
  box-sizing: border-box;
  background-image: url(../img/about/ab-img3.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  right: 105px;
  bottom: -200px;
}

.about2-section .ab-con-3 {
  position: relative;
}

.about2-section .ab-con-3 .ab-title {
  color: #439b9b;
  font-size: 36px;
  font-weight: 400;
  text-align: left;
  padding: 50px;
  padding-left: 70%;
  position: relative;
}

.about2-section .ab-con-3 .ab-title .en {
  color: #439b9b;
  font-size: 14px;
  position: absolute;
  bottom: 30px;
  right: 15%;
}

.about2-section .ab-con-3 .mi-text {
  width: 100%;
  background-color: white;
  position: relative;
  padding: 50px;
  padding-bottom: 10px;
  ;
}

.about2-section .ab-con-3 .mi-text p {
  font-size: 18px;
  padding-left: 55%;
  line-height: 170%;
}

.about2-section .ab-con-3 .mi-text .ab-img3 {
  width: 570px;
  height: 241px;
  background-image: url(../img/about/aboutpic3.png);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  left: 0px;
  top: -80px;
}

.about2-section .ab-con-3 .mi-text .ab-img3:before {
  content: '';
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 30px;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #fff;
  box-sizing: border-box;
  transition: 0.5s;
  transform: scaleX(1);
  opacity: 1;
}

.about2-section .ab-con-3 .mi-text .ab-img3:after {
  content: '';
  position: absolute;
  top: 30px;
  left: 30px;
  right: 30px;
  bottom: 30px;
  border-left: 1px solid #fff;
  border-right: 1px solid #fff;
  box-sizing: border-box;
  transition: 0.5s;
  transform: scaleY(1);
  opacity: 1;
}


.about2-section .ab-con-3 .so-list {
  display: block;
  padding: 40px 0px;
}

.about2-section .ab-con-3 .so-list li {
  display: inline-block;
  padding: 0 40px;
  width: 49%;
  text-align: center;
}

.about2-section .ab-con-3 .so-list li {
  font-size: 20px;
  color: #66c7c4;
  padding: 16px 55px;
  border: 3px solid #99dedc;
  border-radius: 100px;
  background-size: 15px;
  background-repeat: no-repeat;
  background-position: 25px 7px;
}

/*****join*****/
.join-section {
  padding: 50px 0px;
  padding-bottom: 100px;
}

.join-section .ab-con-1 .ab-tab {
  font-size: 20px;
  padding: 20px 0 60px 0;
  margin: 0px 0px 0px 0px;
  text-align: center;
  border-bottom: 1px solid #e4e4e4;
}

.join-section .ab-con-1 .ab-tab li {
  display: inline-block;
  padding: 0 30px;
}

.join-section .ab-con-1 .ab-tab li:nth-child(2),
.join-section .ab-con-1 .ab-tab li:nth-child(3),
.join-section .ab-con-1 .ab-tab li:nth-child(4) {
  border-left: 1px solid #a3a3a3;
}

.join-section .ab-con-1 .ab-tab li a {
  color: #624D4A;
  padding: 12px 75px;
  border: 3px solid #51aeab;
  border-radius: 100px;
  background-image: url(../img/tabicon2.png);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 25px 12px;
}

.join-section .ab-con-1 .ab-tab li.active a {
  color: #00a0e9;
  font-weight: 500;
  background-image: url(../img/tabicon1.png);
}

.j-list {
  border-bottom: 1px solid #e4e4e4;
  padding: 40px;
}

.j-list .j-number {
  color: #59afac;
  font-weight: 500;
  font-size: 40px;
}

.j-list .left-line {
  border-left: 1px solid #adadad
}

.j-list h2 {
  font-size: 26px;
  line-height: 170%;
  font-weight: 400;
  color: #59afac;
}

.j-list p {
  font-size: 16px;
  line-height: 170%;
}

/**join2**/
.sec {
  padding-top: 50px;
}

.g-title2 .title {
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 2;
  text-align: center;
  color: #70cbc8;
  margin: 0;
}

.g-title2 .en {
  color: #75654d;
  text-align: center;
  font-size: 1.25rem;
  display: block;
}

.g-title2 .en:before,
.g-title2 .en:after {
  content: "";
  width: 50px;
  height: 1px;
  background: #75654d;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
}

.g-title2 .en:before,
.g-title2 .en:after {
  content: "";
  width: 50px;
  height: 1px;
  background: #75654d;
  display: inline-block;
  vertical-align: middle;
  margin: 0 10px;
}

.process {
  position: relative;
  z-index: 2;
  line-height: 1.7;
  margin: 30px 0 0;
  padding: 80px 0 30px;
  counter-reset: my-badass-counter;
}

.process:before {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: -5px;
}

.process:after {
  height: 100%;
  width: 1px;
  z-index: -1;
}

.process:before,
.process:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  background: #51aeab;
}

.process li:nth-child(odd) {
  left: 50%;
}

.process li {
  position: relative;
  z-index: 2;
  display: block;
  margin-bottom: 40px;
  width: 50%;
  height: 200px;
}

.process li:nth-child(odd) .icon {
  float: left;
  margin-left: -5px;
  margin-top: 20px;
}

.process li .icon {
  width: 10px;
  height: 10px;
  background: #c8e4e3;
  border-radius: 50%;
  position: relative;
}

.process li .icon img {
  border-radius: 50%;
}

.process li .icon:before {
  content: "";
  position: absolute;
  top: 50%;
  width: 50px;
  height: 1px;
  background: #51aeab;
  z-index: -1;
}

.process li .text .step:after {
  content: counter(my-badass-counter, decimal-leading-zero);
  counter-increment: my-badass-counter;
  display: inline-block;
  font-weight: bold;
  margin-left: 10px;
  font-size: 2.25rem;
}

.process li:nth-child(odd) .icon:before {
  left: 100%;
}

.process li .icon:after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -5px;
  top: -5px;
  bottom: -5px;
  right: -5px;
  border-radius: 50%;
  background-color: #51aeab;
}

.process li .text {
  position: relative;
  color: #333;
  font-size: 1.125rem;
  width: calc(100% - 65px);
  float: left;
}

.process li:nth-child(odd) .text {
  padding-left: 55px;
}

.process li:nth-child(even) .icon {
  float: right;
  margin-right: -5px;
  margin-top: 20px;
}

.process li:nth-child(even) .text {
  text-align: right;
}

.process li:nth-child(even) .icon:before {
  right: 100%;
}

.process li .text .step {
  color: #02a0e9;
  line-height: 1;
  font-size: 0.937rem;
}

.process li .text p {
  margin: 0;
}

.process li .text .ti {
  font-size: 1.875rem;
  color: #333;
}

.process li .text .word {
  color: #555;
}

.end {
  max-width: 200px;
  margin: auto;
  padding-top: 20px;
  display: block;
  position: relative;
  text-align: center;
}

.end:before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  background: #51aeab;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-left: -5px;
  margin-top: -5px;
}

.contact-section {
  padding: 60px 0px 60px 0px;
}

.contact-p2-section {
  padding: 50px 0px 60px 0px;
}

.contact-p2-section .row {
  padding: 0px 0px 0px 0px;
}


.about-img {
  position: relative;
  width: 48%;
}

.about-img img {
  position: absolute;
  width: 100%;
  left: 0;
  top: -150px;
  z-index: 99;
  padding-top: 90px;
  background-color: white;
}

.about-img .text-box {
  color: white;
  font-size: 1.5rem;
  font-family: "Microsoft JhengHei";
  display: block;
  width: 50%;
  padding: 50px;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  z-index: 99;
  right: 0;
  bottom: -400px;
}

.about-img .text-box small {
  color: #c5c5c5;
  font-size: 0.5rem;
  display: block;
  letter-spacing: 3px;
}

.about2-img img {
  width: 100%;
  padding-top: 90px;
  background-color: white;
}

.about3-img img {
  width: 100%;
  padding-top: 50px;
  background-color: white;
}

.about-section img,
.about2-section img {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.about-section img:hover,
.about2-section img:hover {
  opacity: .6;
}

.about-section .about-details {
  text-align: center;
}

.about-section .about-details h4 {
  padding: 20px 0px;
}

.app-about-section .about-left {
  text-align: center;
}

.app-about-section .about-right p {
  color: #333;
  font-size: 16px;
  padding: 20px 0;
  margin-bottom: 0px;
}

.app-about-section .about-right ul li {
  list-style-type: square;
  color: #333;
  font-size: 16px;
  margin-left: 20px;
  margin-bottom: 8px;
}

.description-section {
  padding-bottom: 120px;
}

.service-section {
  margin-top: -150px;
  margin-bottom: 100px;
}

.service-section .s-box {
  position: relative;
  overflow: hidden;
  transition: all 0.5s ease-out;
  -webkit-filter: drop-shadow(12px 12px 20px rgba(0, 0, 0, 0.3));
  filter: drop-shadow(12px 12px 20px rgba(0, 0, 0, 0.3));
}

.service-section .s-box .sercice-title {
  font-size: 24px;
  font-weight: 500;
  color: white;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 30;
}

.service-section .s-box .sercice-title .en {
  font-size: 20px;
}

.service-section .s-box .img {
  overflow: hidden;
  width: 100%;
  height: 330px;
  background-size: cover;
}

.service-section .s-box.s1 .img:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #7ddbd8e1;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  transition: all 0.3s ease-in-out;
}

.service-section .s-box:hover.s1 .img:after {
  top: -240px;
  left: -80px;
  z-index: 10;
  transform: rotate(50deg);
}

.service-section .s-box.s2 .img:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #ecda69e0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  transition: all 0.3s ease-in-out;
}

.service-section .s-box:hover.s2 .img:after {
  top: -240px;
  left: -80px;
  z-index: 10;
  transform: rotate(50deg);
}

.service-section .s-box.s3 .img:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: #6ed27be0;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 10;
  transition: all 0.3s ease-in-out;
}

.service-section .s-box:hover.s3 .img:after {
  top: -240px;
  left: -80px;
  z-index: 10;
  transform: rotate(50deg);
}


/* =================================== */
/*  news Styles 
/* =================================== */
.news-section {
  text-align: left;
  padding: 20px 0px 150px 0px;
  position: relative;
}

.news-section .row {
  padding: 30px 0px 10px 0px;
}

.news-section .more {
  font-size: 15px;
  color: white;
  padding: 6px 20px;
  position: absolute;
  left: 50%;
  bottom: 55px;
  background-color: #66c7c4;
  transform: translate(-50%, -50%);
}

.news-title {
  color: #66c7c4;
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 3px;
  margin-bottom: 2px;
  padding: 50px 15px 50px 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.news-title:after {
  content: "";
  width: 100px;
  height: 2px;
  background-color: #dadada;
  position: absolute;
  left: 50%;
  bottom: 25%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.news-carousel .nav-btn {
  height: 52px;
  width: 52px;
  cursor: pointer;
  position: absolute;
  top: calc(50% - 26px) !important;
}

.news-carousel .owl-prev.disabled,
.news-carousel .owl-next.disabled {
  pointer-events: none;
  opacity: 0.2;
}

.news-carousel .prev-slide {
  background: url(../img/pro-prev.png) no-repeat;
  left: -60px;
}

.news-carousel .next-slide {
  background: url(../img/pro-next.png) no-repeat;
  right: -60px;
}

.news-carousel .prev-slide:hover {
  background: url(../img/pro-prev.png) no-repeat;
}

.news-carousel .next-slide:hover {
  background: url(../img/pro-next.png) no-repeat;
}


/* =================================== */
/*  map Styles 
/* =================================== */

.map-section {
  padding: 0px 0px 60px 0px;
}

.sort {
  position: relative;
  z-index: 1;
  padding: 20px 100px;
  text-align: center;
  *zoom: 1;
  background-size: 100%;
  background-image: -moz-linear-gradient(to right, rgba(242, 229, 216, 0) 0%, rgb(236 236 236 / 48%) 50%, rgb(226 226 226 / 50%) 52%, rgba(242, 229, 216, 0) 100%);
  background-image: -webkit-linear-gradient(to right, rgba(242, 229, 216, 0) 0%, rgb(236 236 236 / 48%) 50%, rgb(226 226 226 / 50%) 52%, rgba(242, 229, 216, 0) 100%);
  background-image: linear-gradient(to right, rgba(242, 229, 216, 0) 0%, rgb(236 236 236 / 48%) 50%, rgb(226 226 226 / 50%) 52%, rgba(242, 229, 216, 0) 100%);
}

.sort .title {
  color: #7ccfcc;
  width: 126px;
  height: 50px;
  line-height: 50px;
  font-size: 1.125rem;
  text-align: center;
  font-weight: bold;
  padding-right: 15px;
  display: inline-block;
  vertical-align: middle;
}

.sort .sort-list {
  display: inline-block;
  vertical-align: middle;
  padding: 0 30px;
}

.sort .sort-list .select-style {
  width: 180px;
  height: 40px;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 0;
  margin-left: 5px;
  display: inline-block;
}

.sort .sort-list .btn-s {
  background: #7ccfcc;
  vertical-align: top;
  color: #fff;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 0.937rem;
  height: 40px;
  margin-left: 5px;
}

.store-table {
  margin: 50px 0;
  width: 100%;
}

.store-table thead {
  background: #7ccfcc;
  color: #fff;
  text-align: center;
}

.store-table tbody tr {
  border-bottom: 1px dotted #ddd;
  color: #555;
}

.store-table thead td:after {
  content: "";
  display: block;
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 12px;
  margin-top: -6px;
  background: #fff;
}

.store-table thead td {
  position: relative;
}

.store-table td {
  padding: 10px;
  text-align: center;
}

.store-table tbody tr {
  border-bottom: 1px dotted #ddd;
  color: #555;
}

.store-table tbody tr:hover {
  background: #e6e6e6
}

.store-table a {
  display: block;
}

.store-table .btn-view {
  width: 35px;
  height: 35px;
  margin: auto;
  border-radius: 50%;
  color: #fff;
  background: #02a0e9;
  font-size: 1rem;
  position: relative;
}

.store-table .btn-view i {
  position: absolute;
  left: 50%;
  top: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.map-section .content {}

.map-section .content .ti {
  font-size: 2rem;
  color: #02a0e9;
  padding-bottom: 10px;
  display: inline-flex;
  /* justify-content: flex-start; */
  align-items: center;
}

.map-section .content .ti {
  font-size: 2rem;
  color: #02a0e9;
  padding-bottom: 10px;
  display: inline-flex;
  align-items: center;
}

.map-section .content .detail {
  border-top: 2px solid #02a0e9;
  padding: 20px;
  background: #fff;
}

.map-section .content .detail .rows {
  padding: 10px;
  border-bottom: 1px dotted #ddd;
  position: relative;
  padding-left: 100px;
}

.map-section .content .detail .rows .t {
  color: #999;
  width: 100px;
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px;
}

.map-section .map-wrap {
  border: 6px solid #FFF;
  box-shadow: 0 0 0 1px #ddd, 0 0 10px rgba(0, 0, 0, 0.2);
}

.g-title.scroll-view:before {
  height: 40px;
}

.g-title:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 1px;
  height: 0;
  background: #636363;
  -moz-transition: height 0.6s;
  -o-transition: height 0.6s;
  -webkit-transition: height 0.6s;
  transition: height 0.6s;
}

.g-title .tit {
  font-size: 2.25rem;
  font-weight: 400;
  line-height: 2;
  text-align: center;
  color: #70cbc8;
  margin: 0;
}

.g-title .en {
  color: #75654d font-size: 1rem;
  margin: 0;
  white-space: nowrap;
}

#store-view .map-wrap .map {
  display: block;
  width: 100%;
  max-width: 1400px;
  margin: 50px auto;
  height: 500px;
  border: 6px solid #FFF;
  box-shadow: 0 0 0 1px #ddd, 0 0 10px rgba(0, 0, 0, 0.2);
}


@media only screen and (max-width: 690px) {
  .store-table thead {
    display: none;
  }

  .store-table tbody tr {
    display: block;
    font-size: 0;
    padding: 15px;
  }


  .store-table tbody td {
    padding: 6px 10px;
    display: inline-block;
    vertical-align: top;
    width: 50%;
    position: relative;
    font-size: 1rem;
    text-align: left;
    padding-left: 100px;
  }



  .store-table tbody td {
    padding: 23px 10px 6px 10px;
  }

  .store-table tbody td:before {
    content: attr(data-tit);
    position: absolute;
    left: 0;
    top: 0;
    text-align: right;
    padding: 6px 10px;
    color: #75654d;
    font-size: 1rem;
    width: 90px;
  }

  .store-table tbody td:last-child {
    width: 100%;
    display: block;
    padding: 0;
  }

  .store-table tbody td:before {
    text-align: left;
    padding: 0 10px;
    color: #999;
    font-size: 0.812rem;
  }

  .store-table .btn-view {
    width: auto;
    border-radius: 5px;
    text-align: center;
    line-height: 40px;
    height: auto;
    margin-top: 15px;
  }

  .store-table .btn-view i {
    position: static;
    display: inline-block;
    -moz-transform: none;
    -ms-transform: none;
    -webkit-transform: none;
    transform: none;
  }

  .store-table .btn-view:after {
    content: "詳細內容";
    font-size: 0.812rem;
  }
}

/******shop*******/
.shop-section {
  padding: 60px 0px;
}

.shop-side-menu .nav-link[data-toggle].collapsed:before {
  color: #02a0e9;
  content: "\f107";
  font: normal normal normal 20px/1 FontAwesome;
  text-rendering: auto;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  left: 10px;
  top: 12px;
}

.shop-side-menu .nav-link[data-toggle]:not(.collapsed):before {
  color: #02a0e9;
  content: "\f106";
  font: normal normal normal 20px/1 FontAwesome;
  text-rendering: auto;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  left: 10px;
  top: 12px;
}

.shop-side-menu>.nav {
  width: 100%;
  border: solid 1px #73ccc9;
  border-radius: 6px;
  background-color: white;
}

.shop-side-menu .nav .nav-item {
  border-bottom: 1px solid #73ccc9;
  position: relative;
}

.shop-side-menu .nav .nav-item a {
  color: #232323;
  font-size: 15px;
  line-height: 170%;
  padding-left: 28px;
  padding-top: 10px;
  padding-bottom: 10px;
  ;
}

.shop-side-menu .nav .nav-item a:hover {
  color: #02a0e9;
}

.shop-side-menu .nav .nav-item .nav .nav-item {
  border-bottom: 1px solid #afafaf;
}

.shop-side-menu .nav .nav-item .nav .nav-item .nav-link[data-toggle].collapsed:before {
  left: 16px;
  top: 12px;
}

.shop-side-menu .nav .nav-item .nav .nav-item .nav-link[data-toggle]:not(.collapsed):before {
  left: 16px;
  top: 12px;
}

.shop-side-menu .nav .nav-item:last-child {
  border-bottom: 0px solid #afafaf;
}

.shop-side-menu .nav .nav-item .nav .nav-item:last-child {
  border-bottom: 0px solid #afafaf;
}

.shop-side-menu .nav .nav-item .nav .nav-item .nav .nav-item {
  border-bottom: 0px solid #afafaf;
}

.shop-side-menu .nav .nav-item .nav .nav-item .nav .nav-item a {
  color: #232323;
  font-size: 13px;
  line-height: 170%;
}

.shop-side-menu .nav .nav-item .nav {
  border: 0px;
  background-color: #efefef;
}

.single-produce {
  padding-bottom: 30px;
  padding-left: 10px;
  padding-right: 10px;
}

.single-produce img {
  width: 100%;
  height: 200px;
}

.single-produce>a {
  color: black;
  display: block;
  box-shadow: 0 0 13px 5px rgba(0, 0, 0, 0.03);
}

.single-produce a:hover {
  /*box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.2);*/
}

.single-produce .product-img {
  display: block;
  width: 100%;
  height: 200px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  -webkit-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}

.single-produce .product-img:hover {
  background-size: 120%;
}

.produce-details {
  height: 100px;
  background-color: white;
  padding: 15px;
  text-align: left;
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 0.03);
}

.produce-details h4 {
  font-size: 18px;
  font-weight: 400;
  line-height: 140%;
  margin-bottom: 10px;
  text-align: left;
  height: 57px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.produce-details a:hover h4 {
  color: #439b9b;
}

.produce-details p {
  color: #464646;
  font-size: 15px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.produce-details .price-box {
  color: #4f4f4f;
  font-family: "Microsoft JhengHei";
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  position: relative;
}

.produce-details .price-box .ic_fa {
  position: absolute;
  display: block;
  right: 0px;
  bottom: 0px;
}

.produce-section img:hover {
  opacity: .6;
}



.item_info_r_goods_name {
  font-size: 24px;
  line-height: 120%;
  margin: 10px 0px 20px 0px;
  font-weight: bold;
  text-align: justify;
}

.item_info_r_goods_price {
  font-family: Century Gothic;
  background-color: #f5f5f5;
  padding: 20px 20px 15px 20px
}

.item_info_r_goods_price ut {
  display: inline-block;
}

.item_info_r_goods_price ut[tp="selling"] {
  color: #c30d23;
  font-size: 30px;
  font-weight: bold;
}

.item_info_r_goods_price ut[tp="original"] {
  font-size: 16px;
  margin-left: 20px;
  font-family: 微軟正黑體;
  color: #a9a9a9;
  margin-bottom: 0px;
  text-decoration: line-through;
}

.item_info_r_goods_features {
  font-size: 14px;
}

.item_info_r_goods_infoitem {
  padding-bottom: 20px;
}

.item_info_r_goods_infoitem_row {
  text-align: left;
  margin: 10px 0px;
  padding-left: 20px;
}

.product-info-text {
  padding-top: 50px;
}

.item_info_r_goods_features_title {
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  padding: 10px 20px;
  text-align: left;
  background-color: #f0f0f0;
  margin-bottom: 20px;
}

.item_info_r_goods_infoitem_title,
.item_info_r_goods_infoitem_text {
  vertical-align: top;
  display: inline-block;
  font-weight: bold;
}

.item_info_r_goods_infoitem_text {
  width: 74%;
  text-align: justify;
}

.item_info_r_goods_infoitem_title {
  margin-right: 20px;
}

.item_info_r_additionalbuy {
  border-top: 1px solid #9d9d9d;
  margin: 10px 0px;
  font-size: 14px;
}

.item_info_r_info_title {
  font-size: 16px;
  font-weight: bold;
  width: 100%;
  padding: 10px 20px;
  text-align: left;
  background-color: #f0f0f0;
  margin-bottom: 20px;
}

.item_info_r_info_content {
  font-size: 14px;
  text-align: justify;
  padding-bottom: 25px;
}

.item_info_r_info_content dot {
  margin-right: 5px;
  top: 1px;
}

dot {
  display: inline-block;
  position: relative;
  width: 12px;
  height: 12px;
  border-radius: 12px;
  background: #3c474d;
}

.item_info_r_infobox {
  width: 100%;
}

.item_info_r_info_content table thead {
  background: #f0f0f0;
}

.item_info_r_info_content table {
  margin: 10px 0px;
  width: 100%;
  text-align: center;
  border: 1px solid #9d9d9d;
}

.item_info_r_info_content td {
  border: 1px solid #9d9d9d;
  padding: 5px 0px;
}

.item_info_r_info_content ut[tp="link"] {
  display: inline-block;
  margin: 5px 0px;
  cursor: pointer;
  color: #00a0e9;
  border-bottom: 1px solid #00a0e9;
}

.item_info_r_popup {
  width: 100%;
  margin: 10px 0px;
  padding: 15px 0px;
}

.item_info_r_popup ut {
  height: 50%;
  height: 25px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 400;
  padding: 10px 10%;
  box-sizing: content-box;
  display: inline-flex;
  align-items: center;
}

.item_info_r_popup dot_q {
  margin-right: 5px;
}

dot_q {
  display: inline-block;
  position: relative;
  width: 18px;
  height: 18px;
  border-radius: 15px;
  background: #3c474d;
}

dot_q:before {
  content: "?";
  font-size: 13px;
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-align: center;
  line-height: 18px;
}

._3DepLY {
  margin-top: 1.5625rem;
  padding: 6vh 1.25rem;
}

._3l3tbq {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
  -moz-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  max-width: 625px;
}

._2iNrDS {
  color: #757575;
  width: 110px;
  text-transform: capitalize;
  -webkit-flex-shrink: 0;
  -ms-flex-negative: 0;
  flex-shrink: 0;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

._2tmiIO {
  -webkit-transition: height .5s cubic-bezier(.4, 0, .2, 1), opacity .5s cubic-bezier(.4, 0, .2, 1);
  transition: height .5s cubic-bezier(.4, 0, .2, 1), opacity .5s cubic-bezier(.4, 0, .2, 1);
  height: auto;
  opacity: 1;
}

._3djNyJ {
  width: 32.1875rem;
}

._3Jt05G>.icon-free-shipping-line,
._3Jt05G>.icon-shipping-airplane {
  font-size: 1.25rem;
  margin-left: .3125rem;
  margin-right: .3125rem;
  stroke: #000;
}

._39oJVk:last-child {
  margin: 0;
}

.items-center {
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.flex,
.h-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

._3dRJGI:last-child {
  padding-bottom: 0;
}

._3a2wD- {
  padding-bottom: 15px;
}

._3dRJGI {
  padding-bottom: 25px;
  color: #222;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

svg:not(:root) {
  overflow: hidden;
}

.shopee-svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  position: relative;
}

.crl7WW {
  -webkit-flex-basis: 32.1875rem;
  -ms-flex-preferred-size: 32.1875rem;
  flex-basis: 32.1875rem;
  max-width: 32.1875rem;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.product-variation {
  cursor: pointer;
  min-width: 5rem;
  min-height: 2.125rem;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: .25rem .75rem;
  margin: 0 8px 8px 0;
  color: rgba(0, 0, 0, .8);
  text-align: left;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, .09);
  position: relative;
  background: #fff;
  outline: 0;
  word-break: break-word;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

.product-variation:hover,
.product-variation:focus {
  color: rgb(195 30 35);
  border: 1px solid rgb(195 30 35);
  background: #fff;
}

button:focus {
  outline: 0;
}

._1FzU2Y {
  color: #757575;
  margin-top: 16px;
}

._1FzU2Y {
  color: #757575;
  margin-top: 16px;
}

._1FzU2Y .shopee-input-quantity {
  background: #fff;
}

._1zT8xu:first-child {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

._1zT8xu {
  outline: none;
  cursor: pointer;
  border: none;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-transition: background-color .1s cubic-bezier(.4, 0, .6, 1);
  transition: background-color .1s cubic-bezier(.4, 0, .6, 1);
  border: 1px solid rgba(0, 0, 0, .09);
  border-radius: 2px;
  background: transparent;
  color: rgba(0, 0, 0, .8);
  width: 32px;
  height: 32px;
}

._19lAw4 {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

._18Y8Ul {
  width: 64px;
  height: 32px;
  border-left: none;
  border-right: none;
  font-size: 16px;
  font-weight: 400;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
  cursor: text;
  border-radius: 0;
  -webkit-appearance: none;
}

.OJJX3D {
  padding-left: 20px;
}

._2O0llP {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}

._3a6p6c {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
  -moz-box-orient: horizontal;
  -moz-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
}

.btn--l {
  font-size: 16px;
  height: 48px;
  padding: 0 20px;
}

.YtgjXY {
  margin-right: 15px;
  min-width: 11.25rem;
  padding: 0 .75rem;
  font-size: 14px;
}

.btn-solid-primary {
  color: #fff;
  background: #65c6c3;
}

.btn-solid-primary:hover {
  background: #65c6c3;
}

.btn-tinted,
.btn-tinted--link {
  color: #66c6c3;
}

.btn-tinted {
  background: white;
  border: 1px solid #66c6c3;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .03);
}

.btn-tinted:hover {
  background: rgb(255 252 244);
}

._343Jzb {
  margin-right: 10px;
  color: #66c6c3;
  stroke: #66c6c3;
  font-size: 1.25rem;
}

.shopee-svg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  fill: currentColor;
  position: relative;
  vertical-align: middle;
}

/** =================================== */
/*  contact Styles 
/* =================================== */

.contact-title {
  padding: 80px 15px 40px 15px;
}

.contact-title h1 {
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 3px;
  margin: 0px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact-title h3 {
  color: #a5a5a5;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 4px;
  display: block;
  text-align: center;
}

.contact-info {
  padding: 0px 15px 60px 15px;
  font-size: 18px;
  line-height: 200%;
  letter-spacing: 1px;
}


/* =================================== */
/*  Call to Action Styles 
/* =================================== */
.single-feature h3 {
  margin-bottom: 20px;
  font-weight: 400;
}

.single-feature .details p {
  padding-left: 15px;
  color: #333;
}

.single-feature .details:hover .icon span {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  background: transparent;
  border-color: #333;
  color: #333;
}

.single-feature .icon span {
  padding: 20px;
  display: inline-block;
  background: #333;
  color: #fff;
  text-align: center;
  font-size: 35px;
  border: 1px solid transparent;
}

/* Styling Pagination*/
.owl-theme .owl-controls .owl-page {
  display: inline-block;
  zoom: 1;
  *display: inline;
  /*IE7 life-saver */
}

.owl-pagination {
  text-align: center;
  padding-top: 10px;
}

.owl-theme .owl-controls .owl-page span {
  display: block;
  width: 12px;
  height: 12px;
  margin: 5px 7px;
  filter: Alpha(Opacity=50);
  opacity: 0.5;
  background: #333;
}

.owl-theme .owl-controls .owl-page.active span,
.owl-theme .owl-controls.clickable .owl-page:hover span {
  filter: Alpha(Opacity=100);
  /*IE7 fix*/
  opacity: 1;
}

/* If PaginationNumbers is true */
.owl-theme .owl-controls .owl-page span.owl-numbers {
  height: auto;
  width: auto;
  color: #FFF;
  padding: 2px 10px;
  font-size: 12px;
  -webkit-border-radius: 30px;
  -moz-border-radius: 30px;
  border-radius: 30px;
}

/* =================================== */
/*  Facts Styles 
/* =================================== */
.facts-section h1 {
  padding-bottom: 70px;
}

.single-fact {
  text-align: center;
}

.single-fact span {
  font-size: 35px;
  color: #fff;
}

.single-fact .counter {
  font-size: 18px;
  color: #fff;
  padding: 10px 0px;
}

.single-fact p {
  color: #fff;
}

/* =================================== */
/*  work pages 
/* =================================== */



.work-section {
  padding: 50px 0px;
  padding-bottom: 100px;
}

.work-section .ab-con-1 .ab-tab {
  font-size: 20px;
  padding: 20px 0 60px 0;
  margin: 0px 0px 0px 0px;
  text-align: center;
  border-bottom: 1px solid #e4e4e4;
}

.work-section .ab-con-1 .ab-tab li {
  display: inline-block;
  padding: 0 30px;
}

.work-section .ab-con-1 .ab-tab li:nth-child(2),
.work-section .ab-con-1 .ab-tab li:nth-child(3),
.work-section .ab-con-1 .ab-tab li:nth-child(4) {
  border-left: 1px solid #a3a3a3;
}

.work-section .ab-con-1 .ab-tab li a {
  color: #624D4A;
  padding: 12px 75px;
  border: 3px solid #51aeab;
  border-radius: 100px;
  background-image: url(../img/tabicon2.png);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: 25px 12px;
}

.work-section .ab-con-1 .ab-tab li.active a {
  color: #00a0e9;
  font-weight: 500;
  background-image: url(../img/tabicon1.png);
}

.work-section .work-box {
  padding: 50px 0px;
}

.work-section .work-menu .work-list ul {
  padding: 0;
  margin: 0;
  background-image: url(../img/work/leftmenuft.png);
  background-position: 6px bottom;
  background-repeat: no-repeat;
  background-size: 240px 70px;
  padding-bottom: 69px;
}

.work-section .work-menu .work-list ul li {}

.work-section .work-menu .work-list ul li a {
  font-size: 15px;
  font-weight: 500;
  color: #292929;
  padding: 18px;
  padding-left: 38px;
  box-sizing: border-box;
  display: block;
}

.work-section .work-menu .work-list ul li.active a {
  color: #00a0e9;
}

.work-section .work-menu .work-list ul li:nth-child(odd) {
  width: 250px;
  height: 60px;
  margin-top: -2px;
  background-image: url(../img/work/leftmenu1.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.work-section .work-menu .work-list ul li:nth-child(odd) a:hover {
  background-image: url(../img/work/leftmenu1-2.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.work-section .work-menu .work-list ul li.active:nth-child(odd) {
  background-image: url(../img/work/leftmenu1-2.png);
}

.work-section .work-menu .work-list ul li:nth-child(even) {
  width: 250px;
  height: 60px;
  margin-top: -2px;
  background-image: url(../img/work/leftmenu2.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.work-section .work-menu .work-list ul li.active:nth-child(even) {
  background-image: url(../img/work/leftmenu2-2.png);
}

.work-section .work-menu .work-list ul li:nth-child(even) a:hover {
  background-image: url(../img/work/leftmenu2-2.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.work-section .work-menu .work-add a {
  color: #00a0e9;
  font-size: 20px;
  font-weight: 500;
  padding: 20px 20px;
  padding-top: 55px;
  box-sizing: border-box;
  width: 240px;
  height: 137px;
  display: block;
  margin: 0 auto;
  margin-top: 20px;
  background-image: url(../img/addpic.png);
  background-size: cover;
  background-repeat: no-repeat;
}

.work-section .work-cont h2.work-title {
  color: #439b9b;
  font-size: 30px;
  font-weight: 500;
  padding: 10px 20px;
  margin-bottom: 30px;
  border-left: 3px solid #00a0e9;
}

.work-section .work-cont .work-cont-p {
  font-size: 18px;
  line-height: 170%;
  padding: 0px 20px;
}

.work-section .work-cont .work-cont-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 170%;
  display: block;
  padding: 10px 20px;
}

.timeline-me-bg {
  margin: 40px 0px;
  position: relative;
}

.movies-menu:after {
  content: "";
  display: block;
  border-bottom: 1px solid #dfdfdf;
  position: absolute;
  width: 100%;
  bottom: 8px;
  z-index: -1;
}

.movies-menu {
  text-align: center;
  white-space: nowrap;
  overflow: auto;
  flex-wrap: nowrap;
  justify-content: center;
  border: 0px solid transparent;
}

.movies-menu .item li a {
  color: #404040;
  font-weight: 500;
  display: inline-flex;
  position: relative;
  padding-bottom: 20px;
  border: 0px solid transparent;
  width: 160px;
  text-align: center;
  justify-content: center;
}

.movies-menu .item li a:hover {
  color: #66c7c4;
}

.movies-menu .item li a.active {
  color: #66c7c4;
  font-size: 20px;
  background-color: #fff0;
  border-color: #fff0;
}

.movies-menu .item li a.active:after {
  background-color: #66c7c4
}

.movies-menu .item li a:after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 8px;
  position: absolute;
  left: 50%;
  bottom: 1px;
  background-color: #adadad;
  transform: translate(-50%, -50%);
}

.movies-content {
  text-align: center;
  position: relative;
}

.movies-box {
  padding-bottom: 10px;
  position: inherit;
}

.movies-box>a {
  color: black;
  display: block;
  /* box-shadow: 0 0 13px 5px rgba(0, 0, 0, 0.03); */
}

.movies-box .movies-img {
  display: block;
  width: 100%;
  height: 160px;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  -webkit-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition: .2s;
  -o-transition: .2s;
  transition: .2s;
}

.movies-box .movies-img:hover {
  background-size: 120%;
}

.movies-details {
  padding: 15px 0px;
  padding-bottom: 0px;
  text-align: left;
  border-top: 1px solid #d3d5d3;
  margin-top: 15px;
}

.movies-details h4 {
  font-size: 18px;
  font-weight: 400;
  line-height: 170%;
  margin-bottom: 10px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.dropdiv {
  display: none;
}

.movies-box:hover>.dropdiv {
  display: block;
  position: absolute;
}

.movies-box>.dropdiv {
  color: white;
  font-size: 18px;
  line-height: 170%;
  width: 100%;
  padding: 30px;
  position: absolute;
  left: 0;
  z-index: 99;
  background-color: #51aeab;
}

.dropdiv.arrow1:before {
  left: 20%;
}

.dropdiv.arrow2:before {
  left: 50%;
}

.dropdiv.arrow3:before {
  left: 85%;
}

.dropdiv:before {
  position: absolute;
  top: -2rem;
  height: 0;
  width: 0;
  left: 50%;
  border: 1rem solid transparent;
  border-bottom-color: #51aeab;
  content: "";
}



.c-data {
  font-size: 18px;
  line-height: 170%;
  text-align: left;
  padding: 20px;
  box-sizing: content-box;
  box-shadow: 0 0 40px 40px rgba(0, 0, 0, 0.03);
}

.c-data h1 {
  color: #09a1e9;
  font-size: 26px;
  font-weight: 400;
  line-height: 170%;
  letter-spacing: 3px;

}

@media screen and (max-width: 767px) {
  .c-data {
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
  }
}


/* =================================== */
/*  Work Experience Styles 
/* =================================== */
.work-section .work-left h1 {
  padding-top: 20px;
}

.work-section .work-left .bar_group__bar.thin::before,
.work-section .work-left .bar_group__bar.thick::before {
  display: block;
  content: '';
  position: absolute;
  z-index: -1;
}

.work-section .work-left .bar_group__bar.thin::before {
  width: 100%;
  height: 4px;
  background: #E4E4E4;
}

.work-section .work-left .bar_group__bar.thin {
  width: 0%;
  height: 4px;
  background: #333;
  margin-bottom: 10px;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.work-section .work-left .bar_group__bar.thick::before {
  width: 100%;
  height: 12px;
  border-radius: 6px;
  background: #E4E4E4;
}

.work-section .work-left .bar_group__bar.thick {
  width: 0%;
  height: 12px;
  border-radius: 6px;
  background: red;
  margin-bottom: 10px;
  -webkit-transition: width 1s;
  -o-transition: width 1s;
  transition: width 1s;
}

.work-section .work-left .b_tooltip {
  -webkit-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
  position: relative;
  float: left;
  left: 100%;
  padding: 4px 10px 7px 10px;
  background-color: rgba(67, 66, 76, 0.81);
  -webkit-transform: translateX(-50%) translateY(-30px);
  -ms-transform: translateX(-50%) translateY(-30px);
  transform: translateX(-50%) translateY(-30px);
  line-height: 11px;
}

.work-section .work-left .b_tooltip span {
  color: white;
}

.work-section .work-left .b_tooltip--tri {
  width: 0;
  height: 0;
  position: absolute;
  content: '';
  bottom: -5px;
  left: 0;
  right: 0;
  margin: auto;
  display: block;
  border-style: solid;
  border-width: 5px 5px 0 5px;
  border-color: rgba(67, 66, 76, 0.81) transparent transparent transparent;
}

.work-section .work-left .bar_group {
  position: relative;
}

.work-section .work-left .bar_group .elastic {
  background: #FF3357;
  -webkit-transition-timing-function: cubic-bezier(0.5, 0.25, 0.375, 1.335);
  -o-transition-timing-function: cubic-bezier(0.5, 0.25, 0.375, 1.335);
  transition-timing-function: cubic-bezier(0.5, 0.25, 0.375, 1.335);
  -webkit-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.work-section .work-left .bar_group .gradient:after {
  content: '';
  display: block;
  background: -webkit-gradient(linear, left top, right top, color-stop(0%, transparent), color-stop(100%, rgba(255, 255, 255, 0.39)));
  height: 100%;
  width: 100%;
  border-radius: 100px;
}

.work-section .work-left .bar_group__bar .n_bg:before {
  display: none !important;
}

.work-section .work-right {
  text-align: center;
}

.work-section .work-right img {
  -webkit-box-shadow: -11px 10px 35px -1px rgba(0, 0, 0, 0.38);
  -moz-box-shadow: -11px 10px 35px -1px rgba(0, 0, 0, 0.38);
  box-shadow: -11px 10px 35px -1px rgba(0, 0, 0, 0.38);
}

/* =================================== */
/*  Plan Styles 
/* =================================== */
.single-plan {
  background: #333;
  color: #fff;
  padding: 30px;
}

.single-plan h3 {
  font-weight: 400;
}

.single-plan .price {
  padding: 15px 0px;
}

.single-plan h3,
.single-plan h4 {
  color: #fff;
}

.single-plan.middle {
  padding: 50px;
}

.single-plan:hover {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  background: rgba(51, 51, 51, 0.7);
}

.single-plan:hover .bar {
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 100%;
}

.single-plan .bar {
  background: #fff;
  margin-top: 10px;
  width: 45%;
  height: 2px;
  display: block;
}

/* =================================== */
/*  portfolio Styles 
/* =================================== */
.single-portfolio {
  background: #000;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  position: relative;
  margin-bottom: 20px;
}

.single-portfolio:after {
  content: "";
  background: rgba(255, 255, 255, 0.7);
  position: absolute;
  top: 0;
  left: -30%;
  bottom: 0;
  right: 70%;
  -webkit-transform: skew(20deg) translateX(-75%);
  -ms-transform: skew(20deg) translateX(-75%);
  transform: skew(20deg) translateX(-75%);
  -webkit-transition: all 0.35s ease 0s;
  -o-transition: all 0.35s ease 0s;
  transition: all 0.35s ease 0s;
}

.single-portfolio:hover:after {
  -webkit-transform: skew(20deg) translateX(0);
  -ms-transform: skew(20deg) translateX(0);
  transform: skew(20deg) translateX(0);
}

.single-portfolio img {
  width: 100%;
  height: auto;
  -webkit-transition: all 0.35s ease 0s;
  -o-transition: all 0.35s ease 0s;
  transition: all 0.35s ease 0s;
}

.single-portfolio:hover img {
  opacity: 0.5;
}

.single-portfolio .portfolio-content {
  padding: 20px;
  text-transform: uppercase;
  text-align: right;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 1;
}

.single-portfolio .title {
  color: #fff;
  margin: 0 0 10px 0;
  -webkit-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.35s ease 0s;
  -o-transition: all 0.35s ease 0s;
  transition: all 0.35s ease 0s;
}

.single-portfolio:hover .title {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.single-portfolio .post {
  display: inline-block;
  font-size: 14px;
  color: #fff;
  margin-bottom: 5px;
  opacity: 0;
  -webkit-transform: translateX(40px);
  -ms-transform: translateX(40px);
  transform: translateX(40px);
  -webkit-transition: all 0.35s ease 0s;
  -o-transition: all 0.35s ease 0s;
  transition: all 0.35s ease 0s;
}

.single-portfolio .icon {
  padding: 0;
  margin: 0;
  bottom: 20px;
}

.single-portfolio:hover .post {
  opacity: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
}

.single-portfolio .primary-btn {
  font-size: 10px;
  min-width: 100px;
  padding: 4px 0px;
}

.work-content-section {
  padding-bottom: 60px;
}

.work-content-section .project-title {
  padding-bottom: 30px;
}

.work-carusel-section {
  padding-top: 120px;
  padding-bottom: 40px;
}

.work-content-section .meta-content .table {
  margin-top: 65px;
}

.work-content-section .meta-content h5 {
  margin-bottom: 10px;
  font-weight: 300;
}

.work-content-section .meta-content h5:last-child {
  margin-bottom: 0px;
}

.work-content-section .meta-content h5 b {
  font-weight: 600;
}

.work-content-section .social_links li {
  display: inline-block;
  font-size: 25px;
}

.work-content-section .social_links li a {
  color: #333;
}

.work-content-section .table td,
.work-content-section .table th {
  font-family: "Josefin Sans", sans-serif;
  border-top: none !important;
  border-bottom: 1px solid #dee2e6;
}

/* =================================== */
/*  Team Details Styles 
/* =================================== */
.our-team {
  position: relative;
  margin: 35px 0;
}

.our-team img {
  width: 100%;
  height: auto;
  z-index: 1;
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition: all 0.50s ease;
  -o-transition: all 0.50s ease;
  transition: all 0.50s ease;
}

.our-team:hover img {
  -webkit-transform: translateY(-60px);
  -ms-transform: translateY(-60px);
  transform: translateY(-60px);
}

.our-team .team-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  color: #fff;
  padding: 20px 0;
  text-align: center;
  background: #333;
  -webkit-transform: translateY(0px);
  -ms-transform: translateY(0px);
  transform: translateY(0px);
  -webkit-transition: all 0.50s ease-in-out 0s;
  -o-transition: all 0.50s ease-in-out 0s;
  transition: all 0.50s ease-in-out 0s;
}

.our-team:hover .team-content {
  -webkit-transform: translateY(55px);
  -ms-transform: translateY(55px);
  transform: translateY(55px);
  opacity: 1;
}

.our-team .team-title {
  font-size: 19px;
  color: #fff;
  margin: 0;
  letter-spacing: 1px;
}

.our-team .team-title small {
  display: block;
  color: #fff;
  margin: 1% 0 3% 0;
  font-size: 12px;
  text-transform: capitalize;
}

.our-team .social-link {
  padding: 0;
  margin: 0;
  list-style: none;
}

.our-team .social-link li {
  display: inline-block;
  margin-right: 2%;
}

.our-team .social-link li a {
  color: #fff;
  -webkit-transition: all 0.50s ease;
  -o-transition: all 0.50s ease;
  transition: all 0.50s ease;
}

.our-team .social-link li a:hover {
  color: #fff;
}

@media screen and (max-width: 767px) {
  .our-team {
    margin-bottom: 15%;
  }
}

/* =================================== */
/*  Testimonial Styles 
/* =================================== */
.single-testimonial {
  background: #333;
  color: #fff;
  text-align: center;
  padding: 30px;
}

.single-testimonial .block cite {
  color: #8c8d9e;
}

.single-testimonial .block cite:before {
  content: '\2014 \00A0';
}

/* =================================== */
/*  Brands Styles 
/* =================================== */
.single-brand {
  text-align: center;
}

/* =================================== */
/*  Countdown Styles 
/* =================================== */
.single-countdown {
  text-align: center;
  background: #333;
  padding: 30px;
  -webkit-box-shadow: 7px 9px 5px 1px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 7px 9px 5px 1px rgba(0, 0, 0, 0.25);
  box-shadow: 7px 9px 5px 1px rgba(0, 0, 0, 0.25);
}

.single-countdown h3,
.single-countdown h4 {
  color: #fff;
}

.single-countdown h3 {
  font-size: 45px;
}

/* =================================== */
/*  Blog Styles 
/* =================================== */
.single-latest-blog {
  text-align: left;
  margin-bottom: 30px;
  background-color: white;
  border: 1px solid #bdbdb9;
}

.single-latest-blog p {
  height: 72px;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

}

.news-section .single-latest-blog img {
  width: 100%;
  height: 225px;
}

.news-section .single-latest-blog h4 {
  color: #6f6f6f;
  font-size: 20px;
  font-weight: 500;
  margin: 20px 0px;
  margin-top: 10px;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.latest-blog-section .single-latest-blog h4 {
  color: #6f6f6f;
  font-size: 20px;
  font-weight: 500;
  margin: 20px 0px;
  padding: 0 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.news-section .single-latest-blog:hover h4 {
  color: #66c7c4;
}

.latest-blog-section .single-latest-blog .category-list li {
  display: inline-block;
}

.latest-blog-section .single-latest-blog .category-list li a {
  font-size: 14px;
  font-family: "Josefin Sans", sans-serif;
}

.latest-blog-section .single-latest-blog .category-list span,
.latest-blog-section .single-latest-blog .category-list a {
  color: #333;
}

.latest-blog-section .single-latest-blog .list-inline {
  margin: 10px 0;
  padding: 0px 20px;
}

.latest-blog-section .single-latest-blog .list-inline li {
  color: #45a9a6;
  font-size: 15px;
  font-family: "Microsoft JhengHei";
  display: inline-block;
  margin-right: 10px;
}

.latest-blog-section .single-latest-blog .list-inline a {
  color: #333;
}

.blog-head-section {
  background: url(../img/head.jpg);
  background-size: cover;
  background-attachment: fixed;
}

.blog-head-section .paginations {
  margin-top: 15px;
}

.blog-head-section .paginations a {
  font-weight: 600;
  margin: 6px;
  color: #333;
}

.blog-head-section .paginations span {
  font-weight: 800;
}

.single-post {
  margin-bottom: 50px;
}

.single-post:last-child {
  margin-bottom: 0px;
}

.meta-info {
  font-family: "Microsoft JhengHei";
  padding: 20px 0px;
  margin-bottom: 20px;
  border-bottom: 1px solid #eee;
}

.meta-info h2 {
  color: #02a0e9;
  letter-spacing: 3px;
  padding-bottom: 3px;
}

.meta-info .category li {
  font-family: "Microsoft JhengHei";
}

.meta-info .category li a {
  color: #333;
}

.meta-info .list-inline li {
  font-family: "Microsoft JhengHei";
  display: inline-block;
  margin-right: 10px;
}

.meta-info .list-inline li a {
  color: #333;
}

#isotope-link .list-inline {
  margin-bottom: 50px;
  text-align: center;
}

#isotope-link .list-inline li a {
  font-size: 1.3em;
  font-family: "Microsoft JhengHei";
  font-weight: 400;
}

.single-widget {
  margin-bottom: 50px;
}

.single-widget h2 {
  padding-bottom: 20px;
}

.search-widget .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.search-widget .form-control,
.search-widget .btn {
  border-radius: 0px;
  font-family: "Josefin Sans", sans-serif;
}

.search-widget .btn {
  z-index: 1;
  background: #333;
  color: #fff;
}

.category-widget ul li a {
  color: #333;
  font-size: 18px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.category-widget ul li a:hover {
  border-color: #333;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.category-widget ul li span {
  font-family: "Josefin Sans", sans-serif;
}

.recent-widget .details {
  padding-left: 20px;
}

.recent-widget .details p {
  margin-bottom: 0px;
}

.recent-widget .single-recent {
  margin-bottom: 15px;
}

.recent-widget .single-recent .f-img img {
  width: 100%;
}

.tag-widget ul li {
  display: inline-block;
  font-family: "Josefin Sans", sans-serif;
}

.tag-widget ul li a {
  padding: 10px 8px;
  background: #333;
  color: #fff;
  display: block;
  margin-right: 5px;
  margin-bottom: 5px;
}

.archive-widget ul li {
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

.archive-widget ul li:hover {
  border-color: #333;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.archive-widget ul li a {
  font-family: "Josefin Sans", sans-serif;
  color: #333;
  font-size: 18px;
}

.blog-details {
  padding-bottom: 50px;
}

.blog-details h4 {
  font-size: 1.3rem;
  padding-bottom: 20px;
}

.blog-details blockquote {
  background: #f7f7f7 none repeat scroll 0 0;
  border-left: 5px solid #333;
  font-family: "Josefin Sans", sans-serif;
  font-size: 17px;
  font-style: italic;
  margin: 0 22px 22px 22px;
  padding: 20px 20px;
  margin-top: 25px;
}

.bottom-tags ul li {
  display: inline-block;
  font-family: "Josefin Sans", sans-serif;
  background: #333;
  margin-right: 8px;
}

.bottom-tags ul li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
}

.nxt-prev {
  padding-bottom: 40px;
  padding-right: 40px;
  padding-left: 40px;
  margin-top: 40px;
}

.author-info {
  margin-top: 40px;
  background: #333;
  padding: 20px;
  color: #fff;
}

.author-info h4 {
  color: #fff;
  margin-bottom: 10px;
}

.author-info .social_links li {
  display: inline-block;
}

.author-info .social_links li a {
  color: #fff;
  font-size: 25px;
  margin-right: 8px;
}

.author-info .author-details {
  padding: 0px 20px;
}

.author-info .author-img img {
  border-radius: 80px;
}

.comment-wrap {
  padding-top: 50px;
}

.comment-wrap h3 {
  border-bottom: 1px solid #eee;
  margin-bottom: 15px;
  padding-bottom: 8px;
}

.comment-wrap .media {
  border-bottom: 1px solid #eee;
  padding-bottom: 20px;
}

.comment-wrap .media img {
  width: 90px;
  border-radius: 50px;
}

.comment-wrap .replay-comment {
  border-bottom: none;
  border-top: 1px solid #eee;
  padding: 20px;
  margin-bottom: 0px !important;
}

.comment-wrap .comments {
  margin-bottom: 30px;
}

.comment-wrap .black-btn {
  min-width: 80px !important;
}

.comment-wrap .media-body h5 {
  margin-bottom: 10px;
}

.comment-form h3 {
  margin-bottom: 30px;
}

.comment-form .form-control {
  border-radius: 0px;
  margin-bottom: 20px;
}

.comment-form .form-control:focus {
  -webkit-box-shadow: none;
  box-shadow: none;
  border-color: #eee;
}

/* =================================== */
/*  Contact Styles 
/* =================================== */
#contact_form {
  margin-top: 0px;
  padding-top: 40px;
}

.contact-section input[type="text"],
.contact-section input[type="email"],
.contact-section textarea {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  background: #fff;
  border: 1px solid #66c7c4;
}

.contact-section textarea {
  width: 100%;
  height: 121px;
}

.contact-section .contact-map {
  border: 6px solid #FFF;
    box-shadow: 0 0 0 1px #ddd, 0 0 10px rgba(0, 0, 0, 0.2);
}

.contact-section .send_btn {
  width: 100%;
  border: none;
  float: right;
  padding: 16px 50px;
  font-size: 15px;
  font-family: "Josefin Sans", sans-serif;
  background-color: #66c7c4;
  color: #ffffff;
}

.contact-section .send_btn:hover {
  text-decoration: none;
  color: #ffffff;
}

.contact-section .success {
  background: #00A243;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #B9ECCE;
  border-radius: 5px;
  font-weight: normal;
  color: #fff;
}

.contact-section .error {
  background: #F44C4C;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #FFCACA;
  border-radius: 5px;
  font-weight: normal;
  color: #fff;
}

/* =================================== */
/*  Footer Styles 
/* =================================== */
.footer-section {
  background-color: #ffffffbd;
  padding-top: 30px;
}

.footer-section dl {
  display: inline-block;
  vertical-align: top;
  padding-right: 50px;
}

.footer-section dt {
  font-weight: 400;
  padding: 10px 0px;
}

.footer-section dt en {
  color: #51aeab;
  font-size: 24px;
  margin-right: 5px;
}

.footer-section dd {
  color: #494949;
  font-size: 15px;
}

.footer-section dd a {
  color: #494949;
}

.footer-section dd a:hover {
  color: #66c7c4;
}

.footer-section .social_links {
  text-align: right;
  vertical-align: top;
}

.footer-section .social_links li {
  display: inline-block;
}

.footer-section .social_links li a {
  color: #fff;
  font-size: 30px;
  margin-right: 10px;
}

.footer-section .social_links li a:hover {
  color: #f3f3f3;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.footer-section .social_links .google-btn {
  width: 40px;
  height: 40px;
  display: block;
  background-image: url(../img/google.png);
  background-repeat: no-repeat;
}

.footer-section .social_links .fb-btn {
  width: 40px;
  height: 40px;
  display: block;
  background-image: url(../img/ftfb.png);
  background-repeat: no-repeat;
}

.footer-section .social_links .pinterest-btn {
  width: 40px;
  height: 40px;
  display: block;
  background-image: url(../img/pinterest.png);
  background-repeat: no-repeat;
}

.footer-section .copyright-wrap {
  color: white;
  padding: 20px 0px;
  background-color: #66c7c4;
  position: relative;
  margin-top: 30px;
}

.copyright-wrap:before {
  content: "";
  width: 100%;
  height: 70px;
  background-image: url(../img/fticon.png);
  background-repeat: repeat-x;
  display: block;
  position: absolute;
  top: -74px;
}




* * @subsection Isotope */ [data-isotope-layout] {
  position: relative;
  display: block;
  transition: .4s all ease;
  min-height: 160px;
}

[data-isotope-layout]:after {
  content: '';
  position: absolute;
  width: 64px;
  height: 64px;
  top: 50%;
  left: 50%;
  background-position: -1152px 0;
  animation: 0.7s sprite-animation steps(18) infinite;
  transition: .4s all ease;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

[data-isotope-layout] [class*="col-"] {
  display: block;
  opacity: 0;
  transition: .4s opacity ease;
  overflow: hidden;
  will-change: opacity, transform;
}

[data-x-mode="design-mode"] [data-isotope-layout] [class*="col-"],
[data-isotope-layout].isotope--loaded [class*="col-"] {
  opacity: 1;
}

[data-x-mode="design-mode"] [data-isotope-layout]:after,
[data-isotope-layout].isotope--loaded:after {
  opacity: 0;
  visibility: hidden;
}

.isotope-gutter-default {
  position: relative;
  -webkit-transform: translateY(-30px);
  transform: translateY(-30px);
  margin-bottom: -30px;
}

.isotope-gutter-default [class*="col-"] {
  margin-top: 30px;
}

.isotope-gutter-default:after {
  margin-top: 15px;
}

.isotope-filters>* {
  margin-top: 0;
  vertical-align: middle;
}

.isotope-filters .list-inline {
  position: relative;
  -webkit-transform: translateY(-10px);
  transform: translateY(-10px);
  margin: 0;
  margin-bottom: -10px;
  z-index: 100;
}

.isotope-filters .list-inline li {
  display: inline-block;
  margin-top: 10px;
}

.isotope-filters .list-inline a {
  position: relative;
  transition: .3s;
}

@media (min-width: 992px) {
  .isotope-filters .isotope-filters-trigger {
    display: none;
  }
}

.isotope-filters-minimal .list-inline>li {
  padding: 0;
}

@media (min-width: 992px) {
  .isotope-filters-minimal .list-inline {
    word-spacing: 0;
  }

  .isotope-filters-minimal .list-inline>li:not(:last-child) {
    margin-right: 35px;
  }

  .isotope-filters-minimal .list-inline a {
    position: relative;
    padding-bottom: 5px;
    font: 700 14px/24px "Montserrat", Helvetica, Arial, sans-serif;
  }

  .isotope-filters-minimal .list-inline a:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 100%;
    height: 2px;
    transition: .33s all ease;
    background: black;
  }

  .isotope-filters-minimal .list-inline a,
  .isotope-filters-minimal .list-inline a:active,
  .isotope-filters-minimal .list-inline a:focus {
    color: #000;
  }

  .isotope-filters-minimal .list-inline a:hover,
  .isotope-filters-minimal .list-inline a.active {
    color: black;
  }

  .isotope-filters-minimal .list-inline a.active:after {
    right: 0;
  }
}

.isotope-filters-responsive {
  position: relative;
  z-index: 10;
}

.isotope-filters-responsive *:focus {
  outline: none;
}

@media (max-width: 767px) {
  .isotope-filters-responsive {
    max-width: 370px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 991px) {
  .isotope-filters-responsive {
    vertical-align: middle;
  }

  .isotope-filters-responsive .isotope-filters-toggle {
    padding-left: 10px;
    padding-right: 10px;
  }

  .isotope-filters-responsive .isotope-filters-toggle .caret {
    margin-left: 5px;
  }

  .isotope-filters-responsive>li {
    vertical-align: middle;
    padding: 0;
  }

  .isotope-filters-responsive>li p {
    display: none;
  }

  .isotope-filters-responsive>li:first-child {
    margin-right: 8px;
  }

  .isotope-filters-responsive>li+li {
    margin-top: 8px;
  }

  .isotope-filters-responsive .isotope-filters {
    position: absolute;
    top: 49px;
    left: 0;
    z-index: 10;
    width: 100%;
    min-width: 210px;
    padding: 15px;
    background: #fff;
    border-radius: 3px;
    text-align: left;
    visibility: hidden;
    opacity: 0;
    transition: .33s all ease;
    border: 1px solid #f2f2f2;
  }

  .isotope-filters-responsive .isotope-filters.active {
    visibility: visible;
    opacity: 1;
  }

  .isotope-filters-responsive .isotope-filters .list-inline {
    width: 100%;
  }

  .isotope-filters-responsive .isotope-filters .list-inline a {
    display: inline-block;
    width: 100%;
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 2px;
    color: #000;
    border: 0;
    background-color: transparent;
  }

  .isotope-filters-responsive .isotope-filters .list-inline a.active,
  .isotope-filters-responsive .isotope-filters .list-inline a:hover {
    color: #217ED3;
    background-color: rgba(88, 196, 167, 0.1);
  }

  .isotope-filters-responsive .isotope-filters li {
    display: block;
    width: 100%;
  }

  .isotope-filters-responsive .isotope-filters li+li {
    margin-top: 6px;
  }
}

@media (max-width: 991px) and (min-width: 480px) {
  .isotope-filters-responsive>li {
    display: inline-block;
    margin: 0;
  }

  .isotope-filters-responsive>li+li {
    margin-top: 0;
  }
}

@media (max-width: 991px) and (min-width: 768px) {
  .isotope-filters-responsive .isotope-filters {
    min-width: 250px;
  }

  .isotope-filters-responsive .isotope-filters .list-inline a {
    padding: 5px 10px;
  }
}

@media (min-width: 992px) {
  .isotope-filters-responsive>li:first-child {
    display: none;
  }
}

.isotope-filters-toggle {
  display: block;
  border: 0;
  outline: 0;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 992px) {
  .isotope-filters-toggle {
    display: none;
  }
}

@media (min-width: 992px) {
  .isotope-style-inverse .list-inline>li>a:after {
    background: #217ED3;
  }

  .isotope-style-inverse .list-inline>li>a,
  .isotope-style-inverse .list-inline>li>a:active,
  .isotope-style-inverse .list-inline>li>a:focus {
    color: #fff;
  }

  .isotope-style-inverse .list-inline>li>a:hover,
  .isotope-style-inverse .list-inline>li>a.active {
    color: #217ED3;
  }
}

.isotope-item-width-33p,
.isotope-item-width-66p {
  width: 100%;
}

.isotope-item-width-33p>*,
.isotope-item-width-66p>* {
  position: relative;
  -webkit-transform: scale(1.002);
  -ms-transform: scale(1.002);
  -o-transform: scale(1.002);
  transform: scale(1.002);
}

@media (min-width: 768px) {

  .isotope-item-width-33p,
  .isotope-item-width-66p {
    width: 50%;
  }
}

@media (min-width: 992px) {
  .isotope-item-width-33p {
    width: 33.33333%;
  }

  .isotope-item-width-66p {
    width: 66.66666%;
  }
}

.isotope-condensed .isotope-item {
  overflow: hidden;
}

@media (min-width: 992px) {
  .isotope-condensed .isotope-item {
    margin: -1px;
  }
}


.animation {
  -webkit-animation: open 0.3s;
  animation: open 0.3s;
  opacity: 1;
}

@-webkit-keyframes open {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes open {
  0% {
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
  }

  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.top {
  position: fixed;
  left: 50%;
  bottom: 3%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: rgba(255, 255, 255, 0.7);
  color: #000;
  padding: 15px;
  cursor: pointer;
}


/* =================================== */
/*  gallery Styles 
/* =================================== */

.gallery-slider {
  position: relative;
  overflow: hidden;
  background-color: #ffffff;
}

.gallery-slider__images {
  margin: 0;
  position: relative;
}

.gallery-slider__images .item {
  padding: 0;
}

.gallery-slider__images .item .img-fill {
  text-align: center;
  padding: 10px;
  height: 200px;
}

@media screen and (min-width: 576px) {
  .gallery-slider__images .item .img-fill {
    height: 300px;
  }
}

@media screen and (min-width: 720px) {
  .gallery-slider__images .item .img-fill {
    height: 450px;
  }
}

.gallery-slider__images .item .img-fill img {
  display: inline-block;
  position: relative;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.gallery-slider__images .next-arrow,
.gallery-slider__images .prev-arrow {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.7);
  border: 0 none;
  text-align: center;
  color: #FFF;
  z-index: 5;
  opacity: 0;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  outline: 0;
}

.gallery-slider__images .next-arrow svg,
.gallery-slider__images .prev-arrow svg {
  top: 4px;
}

.gallery-slider__images .next-arrow {
  right: 25px;
}

.gallery-slider__images .prev-arrow {
  left: 25px;
}

.gallery-slider__images:hover .next-arrow,
.gallery-slider__images:hover .prev-arrow {
  opacity: 0;
} 
/**上方arrow**/

.gallery-slider__images .caption {
  font-family: "Microsoft JhengHei";
  width: 100%;
  position: relative;
  text-align: center;
  display: block;
  opacity: 1;
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
}

.gallery-slider__images .caption.hide {
  opacity: 0;
}

.gallery-slider__thumbnails {
  position: relative;
  top: auto;
  left: 0px;
  width: 100%;
  z-index: 4;
  -webkit-transition: all 0.8s;
  transition: all 0.8s;
  margin: 0;
  padding: 13px 0;
}

.gallery-slider__thumbnails:before,
.gallery-slider__thumbnails:after {
  content: '';
  display: block;
  width: 100px;
  height: 100%;
  position: absolute;
  top: 0;
  z-index: 10;
  pointer-events: none;
}

.gallery-slider__thumbnails:before {
  left: 0;
  background: -webkit-gradient(linear, left top, right top, from(#e6e6e6), to(rgba(230, 230, 230, 0)));
  background: linear-gradient(to right, #e6e6e6 0%, rgba(230, 230, 230, 0) 100%);
}

.gallery-slider__thumbnails:after {
  right: 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(230, 230, 230, 0)), to(#e6e6e6));
  background: linear-gradient(to right, rgba(230, 230, 230, 0) 0%, #e6e6e6 100%);
}

.gallery-slider__thumbnails .item .img-fill {
  height: 70px;
  background: white;
  cursor: pointer;
  border: 5px solid white;
  text-align: center;
}

.gallery-slider__thumbnails .item .img-fill img {
  opacity: 0.5;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  display: inline-block;
  position: relative;
  max-width: 100%;
  max-height: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

.gallery-slider__thumbnails .item:hover .img-fill img {
  opacity: 1;
}

.gallery-slider__thumbnails .item.slick-center img {
  opacity: 1;
}

.gallery-slider__thumbnails .next-arrow,
.gallery-slider__thumbnails .prev-arrow {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: #FFF;
  border: 0 none;
  z-index: 15;
}

.gallery-slider__thumbnails .next-arrow svg,
.gallery-slider__thumbnails .prev-arrow svg {
  top: 2px;
}

.gallery-slider__thumbnails .next-arrow {
  right: 0px;
}

.gallery-slider__thumbnails .prev-arrow {
  left: 0px;
}

.gallery-slider .next-arrow,
.gallery-slider .prev-arrow {
  cursor: pointer;
}

.gallery-slider .next-arrow svg,
.gallery-slider .prev-arrow svg {
  width: 18px;
  height: 18px;
  position: relative;
}

.gallery-slider .img-fill {
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  text-align: center;
}

.gallery-slider .slick-slider {
  margin: 0 -7.5px;
  padding: 0 !important;
}

.gallery-slider .slick-slide {
  float: left;
  padding: 0 7.5px;
  outline: none;
}


.login-content {
  color: #3c474d;
  max-width: 100%;
  width: 100%;
  margin: 0px auto;
  font-size: 16px;
}

.login-content h2 {
  width: 100%;
  font-size: 22px;
  text-align: center;
  font-weight: 400;
}

.login-box {
  border: 1px solid #66c7c4;
  height: 300px;
  padding: 30px;
  padding-top: 80px;
  margin: 50px 0px 50px 0px;
  border-radius: 6px;
}

.login-box label, .forget-box label, .join-box label {
  font-size: 16px;
  color: #6d6d6d;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 400;
}

.form-control-login {
  display: block;
  width: 100%;
  padding: .375rem .75rem !important;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  margin-bottom: 0px !important;
  background-color: #fff;
  border: 1px solid #ced4da !important;
  border-radius: .25rem;
  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-login-forget {
  color: #6d6d6d;
  background: #e4e4e4;
  padding: .55rem 1.2rem;
  font-size: 14px;
}

.btn-login2 {
  color: #fff;
  background: #65c6c3;
  padding: .6rem 2.75rem;
  font-size: 14px;
}


#share-block{
  background-color: orange;
  border-radius: 18px;
}