/*------------------------------------------------------------------
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;
}

.container {
  max-width: 1200px;
}

.container {
  padding-left: 10px;
  padding-right: 10px;
}

.row {
  margin-left: -10px;
  margin-right: -10px;
}

.col,
.col-md-1,
.col-md-2,
.col-md-3,
.col-md-4,
.col-md-5,
.col-md-6,
.col-md-7,
.col-md-8,
.col-md-9,
.col-md-10,
.col-md-11,
.col-md-12 {
  padding-left: 10px;
  padding-right: 10px;
}

body {
  color: #292929;
  font-family: "Microsoft JhengHei";
  font-size: 15px;
  font-weight: 300;
  line-height: 1.625em;
  position: relative;
}

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;
}

.btn-top {
  background-color: white;
}

.btn-top .number {
  color: white;
  font-size: 10px;
  line-height: 18px;
  height: 20px;
  position: absolute;
  display: block;
  padding: 1px 5px;
  border-radius: 10px;
  background-color: #815224;
  top: 0;
  right: 0;
}

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

.gray-bg {
  background: #f9f9ff;
}

.ic_bt_search {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  background-image: url(../img/search_icon.svg);
  background-size: cover;
}

.ic_bt_member {
  display: inline-block;
  width: 28px;
  height: 25px;
  vertical-align: middle;
  background-image: url(../img/member.svg);
  background-size: cover;
}

.ic_bt_favorite {
  display: inline-block;
  width: 28px;
  height: 25px;
  vertical-align: middle;
  background-image: url(../img/favorite.svg);
  background-size: cover;
}

.ic_bt_shopcar {
  display: inline-block;
  width: 26px;
  height: 25px;
  vertical-align: middle;
  background-image: url(../img/cart.svg);
  background-size: cover;
}

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-btn-slide {
  position: fixed;
  bottom: 96px;
  right: 10px;
  z-index: 999;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

.so-btn-slide a {
  line-height: 10px;
  width: 30px;
  height: 30px;
  display: block;
  margin: 0 25px 0 auto;
}

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


.so-1-slide {
  position: fixed;
  bottom: 250px;
  right: 10px;
  z-index: 999;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

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

.so-1-slide a img {
  width: 100%;
}


.so-2-slide {
  position: fixed;
  bottom: 188px;
  right: 10px;
  z-index: 999;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

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

.so-2-slide a img {
  width: 100%;
}


.so-3-slide {
  position: fixed;
  bottom: 130px;
  right: 10px;
  z-index: 999;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}

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

.so-3-slide a img {
  width: 100%;
}

.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.7));
  filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7))
}

.so-4-slide a {
  width: 30px;
  height: 30px;
  background-color: #815224;
}

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

.so-4-slide #gotop:after {
  color: white;
  content: "Top";
  position: absolute;
  bottom: -20px;
  left: 12px;
  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-full {
  padding: 100px 0;
}

.index-about-section {
  padding-top: 180px;
  padding-bottom: 10px;
}

.index-about-section .about-bg-img {
  width: 100%;
  height: 100%;
  background-image: url(../img/aboutimg.jpg);
  background-size: cover;
}

.about-title {
  color: #616161;
  font-family: "Marcellus, Helvetica, Arial, serif";
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 1px;
}

.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 
/* =================================== */
.section-gap {
  padding-bottom: 60px;
}

.offwhite-bg {
  background: white;
}

.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;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}

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

.pagination .page-link {
  color: #333;
  font-family: "Marcellus", Helvetica, Arial, serif;
  border-color: #eee !important;
}

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

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

.btn-search {
  font-size: 12px;
  border-radius: 0px;
  color: #ffffff;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-left: 0px;
  transition: all ease-in-out .15s;
  text-align: center;
}

.search-area {
  width: 280px;
}

.form-area .form-control {
  font-size: 14px;
  border-radius: 0px;
  border: 1px solid #ced4da;
  border-right: 0px;
}

.form-area {
  width: 90%;
  margin: 0 auto;
}


/* =================================== */
/*  Banner Styles 
/* =================================== */
.header-area {
  width: 100%;
}

.header-top {
  color: #999999;
  background-color: #FFF;
  padding: 15px 0px 10px;
}

.header-top2 {
  color: #eae8e2;
  background-color: #815224;
  padding: 15px 0px;
}

.header_top_info {
  display: inline-block;
}

.header_top_menu {
  display: inline-block;
  float: right;
}

.header_top_menu a {
  color: #999;
  line-height: 100%;
  padding: 2px 5px;
  display: inline-block;
}

.header_top_menu a:hover {
  text-decoration: underline;
}

.header_top_menu a:last-child {}

.nav-brand {}

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

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


.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;
  background-color: #f8f8f8;
  /* sticky */
}

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

.dope-nav-container .btn-top {
  margin: 0 6px;
}

.dope-nav-container.dope-sticky {
  position: fixed;
  z-index: 999;
  background-color: white;
  box-shadow: 0 4px 15px hsla(0, 0%, 44%, .2);
  width: 100%;
  top: 0;
  right: 0;
  left: 0;

}


.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%;
  padding: 0px 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}


.dope-navbar .nav-brand {
  font-family: "Microsoft JhengHei";
  font-size: 2.3rem;
  font-weight: 500;
  color: black;
  display: inline-block;
  margin-right: 30px;
  background-image: url(/public/img/logo.png);
  background-size: cover;
  width: 134px;
  height: 47px;
}

.dope-navbar .nav-brand:focus,
.dope-navbar .nav-brand:hover {
  font-size: 2.3rem;
  font-weight: 500;
}




/* 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;
  align-items: center;
}

.breakpoint-off .dopenav ul li .dropdown {
  width: 180px;
  position: absolute;
  background-color: #ffffff;
  top: 120%;
  left: 0;
  z-index: 999999;
  height: auto;
  -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: 10px 0;
}

.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 {
  height: 38px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
}

.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;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  z-index: 999999;
  background-color: #fbf5e7;
  background-position: center center;
  background-repeat: no-repeat;
  background-image: url(../img/icaku_animated.svg);
  background-size: 200px;
  background-origin: content-box;
}

#preloader {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  /* change if the mask should be a color other than white */
  z-index: 1000;
  /* 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: #333;
  opacity: 0.6;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: bounce2 2.0s infinite ease-in-out;
  animation: bounce2 2.0s infinite ease-in-out;
}

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

@-webkit-keyframes bounce2 {

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

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

@keyframes bounce2 {

  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-family: "Microsoft JhengHei";
  color: #222222;
  cursor: pointer;
  background-image: url(../img/go_back.png);
  background-repeat: no-repeat;
  background-position: center left;
  padding-left: 50px;
  background-size: 30px;
}

.next-btn {
  font-size: 1rem;
  font-family: "Microsoft JhengHei";
  color: #222222;
  cursor: pointer;
  background-image: url(../img/go_next.png);
  background-repeat: no-repeat;
  background-position: center right;
  padding-right: 50px;
  background-size: 30px;
}

.next-btn:hover {
  color: #222222;
}

.more-btn {
  font-size: 0.9rem;
  font-family: "Microsoft JhengHei";
  color: #222222;
  cursor: pointer;
  background-image: url(/public/img/go_back.png);
  background-repeat: no-repeat;
  display: inline-block;
  margin-top: 0px;
  padding: 8px 10px;
  padding-left: 50px;
  border: 1px solid #ccc;
  border-radius: 6px;
  background-position: 10px center;
  background-size: 25px;
}

.more-btn:hover {
  color: #222222;
}

.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 {}

.btn-register {
  font-size: 15px;
  color: rgb(53, 53, 53);
  background-color: #ebdbb6;
}

.btn-register:hover {
  color: rgb(53, 53, 53);
  background-color: #f5e8cc;
}

.btn-forget {
  font-size: 15px;
  color: rgb(53, 53, 53);
  background-color: #ebdbb6;
}

.btn-forget:hover {
  color: rgb(53, 53, 53);
  background-color: #f5e8cc;
}

.btn-login {
  font-size: 15px;
  color: white;
  background-color: #815224;
}

.btn-login:hover {
  color: rgb(250, 242, 204);
}

.btn-all {
  font-size: 15px;
  color: white;
  background-color: #815224;
}

.btn-all:hover {
  color: rgb(250, 242, 204);
}

/* =================================== */
/*  login drowp Styles
/* =================================== */
.login-drop {
  position: relative;
}

.dropdown-lr,
.dropdown-fa,
.dropdown-car {
  width: 300px;
  padding: 10px;
  top: 54px !important;
  left: -200px !important;
}

.dropdown-lr h3,
.dropdown-fa h3,
.dropdown-car h3 {
  font-size: 15px;
  padding: 15px 0px;
  padding-top: 8px;
}

.dropdown-fa .commodity,
.dropdown-car .commodity {
  font-size: 14px;
  padding: 5px 0px;
}

.dropdown-fa .comm-list {
  padding: 0px;
  margin: 0px
}

.dropdown-fa .comm-list li,
.dropdown-car .comm-list li {
  width: 31.6%;
  height: 68px;
  overflow: hidden;
  background-image: url(../img/produces/fav_null.svg);
  background-size: cover;
  display: inline-block;
}

.dropdown-fa .comm-info,
.dropdown-car .comm-info {
  font-size: 13px;
  color: rgb(53, 53, 53);
  padding: 6px 0px;
}

.dropdown-fa .commodity {
  font-size: 14px;
}

/*.dropdown.login:hover .dropdown-lr {display: block;}*/

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

.section-title h1 {
  color: #333;
  font-size: 1.9rem;
  padding: 20px 30px;
  max-width: 320px;
  background-color: white;
  text-transform: capitalize;
  text-align: center;
  margin: 0 auto;

}

.section-title:before {
  position: absolute;
  content: "";
  width: 100px;
  height: 2px;
  background-color: rgb(255, 234, 180);
  display: block;
  left: 50%;
  margin-left: -50px;
  bottom: 65px;
}

.section-title h1.pro-title {
  color: #815224;
  ;
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 3px;
  padding: 30px;
  max-width: 100%;
  background-color: white;
  text-transform: capitalize;
  text-align: center;
  margin: 0 auto;
}

.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%;
}

/* =================================== 
.cta-section .detail-line .row div:after {
  content: "";
  width: 1px;
  height: 12px;
  background-color: rgb(121, 121, 121);
  position: absolute;
  right: 0;
  top: calc(50% - 6px);
}

.cta-section .detail-line .row div:last-child:after {
  display: none;
}
*/

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

.banner-section {
  z-index: 999;
  background: url(../img/head.jpg);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  z-index: -1;
  /** 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);
  }
}

.title-main {
  font-family: "Marcellus", Helvetica, Arial, serif;
  font-size: 22px;
  color: rgb(51, 51, 51);
  overflow: hidden;
}

.pagescreen {
  height: 240px;
}

.pagescreen .page-title {
  color: white;
  font-family: "Marcellus", Helvetica, Arial, serif;
  font-size: 5rem;
  line-height: 50%;
  font-weight: 500;
  letter-spacing: 8px;
  text-align: left;
  position: absolute;
  /* top: 45%; */
  left: 5%;
  bottom: 0px;
}

.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;
}

.page-slogan {
  color: #616161;
  font-size: 24px;
  font-family: "Marcellus, Helvetica, Arial, serif";
  font-weight: 400;
  text-align: left;
  position: relative;
  z-index: 99;
  width: 50%;
  border: 0px;
  border-radius: 0rem;
  letter-spacing: 1px;
}

.page-slogan small {
  color: black;
  font-size: 0.8rem;
  letter-spacing: 5px;
}

.breadcrumb {
  color: rgb(255, 255, 255);
  font-size: 0.6rem;
  font-family: "Microsoft JhengHei";
  background-color: #4e341a;
  margin-bottom: 0;
  padding: .25rem 1rem;
  position: relative;
  z-index: 99;
  width: 100%;
  border: 0px;
  border-radius: 0rem;
}

.breadcrumb a {
  color: rgb(255, 255, 255);
}


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

.service-section h4,
.service-section h1,
.service-section p,
.service-section i {
  color: #fff;
}

.service-section .service-left h1 {
  padding: 20px 0px;
  margin-bottom: 20px;
  border-bottom: 1px solid #fff;
  text-transform: capitalize;
}

.service-section .service-left p:last-child {
  margin-bottom: 0px;
}

.service-section .service-right .single-service i {
  font-size: 45px;
  margin-bottom: 20px;
}

.service-section .service-right .single-service h4 {
  font-weight: 400;
}

/* =================================== */
/*  news Styles 
/* =================================== */
.news-section {
  text-align: left;
  background-color: white;
  padding: 60px 0px 80px 0px;
}

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

.news-title {
  padding: 30px;
}

.news-title h1 {
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 3px;
  margin-bottom: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.news-title h3 {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

.map-title {
  padding: 80px 15px 80px 15px;
}

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

.map-title h3 {
  color: rgb(221, 221, 221);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 4px;
  display: block;
  text-align: center;
}

.map-title2 h3 {
  color: black;
  font-size: 1.3rem;
  line-height: 180%;
  font-weight: 400;
  width: 100%;
  height: 220px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.map-box {
  padding-bottom: 30px;
}

.map-pic {
  padding-top: 80px;
  padding-bottom: 100px;
}

.map-info {
  color: white;
  font-size: 18px;
  line-height: 200%;
  letter-spacing: 1px;
  padding: 20px;
}

.map-text {
  color: white;
  font-size: 18px;
  line-height: 200%;
  letter-spacing: 1px;
  padding: 20px;
  padding-top: 100px;
}

.map-info h4 {
  color: white;
  font-size: 1rem;
  padding: 6px 20px;
  display: inline-block;
  background-color: #106797;
}

.map-info p {
  color: rgb(82, 82, 82);
  font-family: "Microsoft JhengHei";
  font-size: 1rem;
  line-height: 180%;
  font-weight: 300;
  background-color: white;
  padding: 10px;
}

/** =================================== */
/*  about Styles 
/* =================================== */
.index-about-box {
  background-color: #f1f1f1;
  padding: 50px;
}

.about-title {
  padding: 5px 0px 40px 0px;
  text-align: left;
}

.about-title h1 {
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: 3px;
  margin: 0px;
  width: 100%;
}

.about-title h3 {
  color: #a5a5a5;
  font-size: 0.7rem;
  font-weight: 400;
  padding-left: 3px;
  letter-spacing: 4px;
  display: block;
}

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


/* =================================== */
/*  Produce Us Styles 
/* =================================== */
.select-box {
  padding: 20px;
  margin: 0px -5px 20px -5px;
  background-color: #f9f9f9;
}

.search-title {
  font-size: 18px;
  font-weight: 400;
  padding-right: 10px;
}

.s-select {
  width: 150px !important;
  height: calc(2.25rem + 7px);
}

.select-page {
  margin-left: auto;
}

.select-page span {
  font-size: 15px;
  line-height: 120%;
  padding-right: 10px;
}

.btn-ws {
  font-size: 14px;
  padding: 10px;
  width: 100px;
}

.btn-ws-active {
  font-size: 14px;
  padding: 10px;
  width: 100px;
  background-color: #815224;
  color: white;
}

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

.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: 285px;
  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: 125px;
  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: 14px;
  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 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;
}

.ic_fa_off {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: middle;
  background-image: url(../img/produces/item_favorite_off.svg);
  background-size: cover;
}

.ic_fa_on {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: middle;
  background-image: url(../img/produces/item_favorite_on.svg);
  background-size: cover;
}

.ic_shcar_off {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: middle;
  background-image: url(../img/produces/item_shcar_off.svg);
  background-size: cover;
}

.ic_shcar_on {
  display: inline-block;
  width: 25px;
  height: 25px;
  vertical-align: middle;
  background-image: url(../img/produces/item_favorite_on.svg);
  background-size: cover;
}

/* =================================== */
/*  products pages 
/* =================================== */
.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: #815224;
}

.btn-solid-primary:hover {
  background: #97632f;
}

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

.btn-tinted {
  background: rgb(255 247 228);
  border: 1px solid #815224;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .03);
}

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

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

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

/* =================================== */
/*  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-p-section {
  background: url(../img/work/work-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; **/
}

.work-section {
  background-color: white;
  padding: 60px 0px 60px 0px;
}

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

.work-section p.work-text {
  color: rgb(82, 82, 82);
  font-family: "Microsoft JhengHei";
  font-size: 1.2rem;
  line-height: 180%;
  font-weight: 300;
  text-align: center;
  background-color: rgba(240, 236, 229, 0.3);
  padding: 40px;
}

.work-section h4.work-title {
  color: rgb(17, 17, 17);
  font-family: "Microsoft JhengHei";
  font-size: 2rem;
  letter-spacing: 3px;
  line-height: 180%;
  font-weight: 300;
  padding-left: 40px;
  padding-bottom: 20px;
}

.c-data {
  text-align: left;
  margin-right: -14px;
  margin-left: 62px;
  margin-bottom: 72px;
  padding-left: 20px;
  padding-right: 20px;
  width: 472px;
  box-sizing: content-box;
  box-shadow: 0 0 40px 40px rgba(0, 0, 0, 0.03);
}

.c-data .c-data__container header {
  padding-top: 32px;
  padding-right: 24px;
  padding-bottom: 32px;
  padding-left: 24px;
}

.c-data .c-data__container {
  position: relative;
  z-index: 10;
  background-color: #fff;
}

.c-data .c-data__container header h1 {
  font-size: 40px;
  letter-spacing: 3px;

}

.c-data .c-data__container header {
  padding-top: 32px;
  padding-right: 24px;
  padding-bottom: 32px;
  padding-left: 24px;
}

.c-data .c-data__container header .c-data__ruby {
  font-size: 13px;
}

.c-data .c-data__container dl {
  font-size: 1.11111vw;
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  padding-bottom: 30px;
}

.c-data .c-data__container dl dt {
  width: 136px;
  font-weight: 400;
  padding-left: 24px;
  box-sizing: border-box;
  padding-top: .5em;
  padding-bottom: .5em;
}

.c-data .c-data__container dl dd {
  width: 312px;
  padding-right: 24px;
  padding-left: 24px;
  box-sizing: border-box;
  padding-top: .5em;
  padding-bottom: .5em;
}

@media screen and (max-width: 767px) {
  .c-data {
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    width: 100%;
  }
  .so-btn-slide {
    right: 20px;
    bottom: 76px;
  }
  .so-1-slide {
    right: 20px;
    bottom: 230px;
  }
  .so-2-slide {
    right: 20px;
    bottom: 168px;
  }
  .so-3-slide {
    right: 20px;
    bottom: 110px;
  }
  .so-4-slide {
    right: 20px;
  }


}


/* =================================== */
/*  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 
/* =================================== */
.latest-blog-section {
  padding: 6vh 0 12vh 0;
}

.single-latest-blog {
  text-align: left;
  padding: 10px;
  padding-bottom: 50px;
}

.single-latest-blog .news-img {
  display: block;
  width: 100%;
  height: 245px;
  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-latest-blog .news-img:hover {
  background-size: 120%;
}

.single-latest-blog p {
  font-size: 14px;
  color: black;
  height: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

}

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

.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-bottom: 10px;
}

.latest-blog-section .single-latest-blog .list-inline li {
  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: #815224;
  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;
  margin-top: 40px;
  border-bottom: 1px solid #eee;
}

.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 #f7f7f7;
}

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

.contact-section .send_btn {
  width: 100%;
  border: none;
  float: right;
  padding: 16px 50px;
  font-size: 15px;
  font-family: "Josefin Sans", sans-serif;
  background-color: #333;
  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 {
  padding: 40px 0 50px 0;
  background-color: #f8f8f8;
}

.footer-section .footer-logo-info {
  display: inline-block;
  vertical-align: top;
}


.footer-section .footer-logo-info .flogo {
  width: 200px;
  font-size: 23px;
  font-weight: 400;
  fill: green;
  padding-bottom: 5px;
}

.footer-section .footer-logo-info li {
  color: rgb(44, 44, 44);
  font-size: 14px;
  letter-spacing: 1px;
  padding: 3px 0;
}

.footer-section .footer-logo-info li i {
  width: 20px;
  text-align: center;
}

.footer-fb {}

.footer-menu li {
  padding: 3px 0;
}

.footer-menu li:before {
  content: "\f105";
  color: white;
  font-family: 'FontAwesome';
  font-size: 14px;
  padding-right: 5px;
}

.footer-menu a {
  color: white;
  font-size: 15px;
  letter-spacing: 1px;
}

.ft-item {
  vertical-align: top;
  display: inline-block;
  margin-right: 6%;
}

.ft-item .ft-title {
  font-size: 18px;
  font-weight: 400;
  padding-bottom: 5px;
}

.ft-item li a {
  font-size: 14px;
  font-weight: 400;
  color: #727272;
}

.footerbg2 {
  background-color: #815224;
}

.Copyright {
  color: #ffffff;
  font-size: 13px;
  padding: 10px;
  background-color: #333;
}

.cbg2 {
  color: #ffffff;
  font-size: 13px;
  padding: 10px;
  border-top: 1px solid #a26f3c;
  background-color: #815224;
}

/* @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: #fafaf7;
}

.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: 1;
}

.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 Styles 
/* =================================== */
.content-bg {
  background-color: #f1f1f1;
  padding: 10px;
}

.member-section {
  padding: 2vh 10px 12vh 10px;
}

.member-content {
  color: #3c474d;
  max-width: 100%;
  width: 100%;
  margin: 0px auto;
  font-size: 16px;
}

.member-content h2 {
  width: 100%;
  font-size: 22px;
  text-align: left;
  font-weight: 400;
}

.login-content {
  color: #3c474d;
  max-width: 100%;
  width: 100%;
  margin: 0px auto;
  font-size: 16px;
}

.required:before {
  content: "*";
  position: absolute;
  left: -5px;
  top: 1px;
  color: #c30d23;
  font-size: 20px;
}

.login-content h2 {
  width: 100%;
  font-size: 22px;
  text-align: center;
  font-weight: 400;
}

.login-box {
  border: 1px solid #d0be97;
  height: 300px;
  padding: 30px;
  padding-top: 80px;
  margin: 50px 0px 50px 0px;
  border-radius: 6px;
}

.forget-box,
.join-box {
  border: 1px solid #d0be97;
  max-width: 800px;
  padding: 50px;
  margin: 50px auto;
  border-radius: 6px;
}

.join-box .note,
.card-body .note {
  display: block;
  font-size: 13px;
  color: #c30d23;
  padding-top: 3px;
}

.login-box label,
.forget-box label,
.join-box label {
  font-size: 16px;
  color: #6d6d6d;
  text-align: center;
  letter-spacing: 1px;
  font-weight: 400;
}

.btn-login2 {
  color: #fff;
  background: #815224;
  padding: .6rem 2.75rem;
  font-size: 14px;
}

.btn-login-forget {
  color: #6d6d6d;
  background: #ebdcce;
  padding: .55rem 1.2rem;
  font-size: 14px;
}

.btn-login-forget:hover {
  color: #6d6d6d;
  background: #faece0;
}

.login_content_box_row {
  width: 300px;
  margin: 0 auto;
}

.go_login_fb {
  display: block;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
megamenu.js STYLE STARTS HERE
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Screen style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.menu-container {}

.menu-dropdown-icon:before {
  content: "\f489";
  font-family: "Ionicons";
  display: none;
  cursor: pointer;
  float: right;
  padding: 1.5em 2em;
  background: #fff;
  color: #333;
}

.nav-menu>ul {
  margin: 0 auto;
  width: 100%;
  list-style: none;
  padding: 0;
  position: relative;
  /* IF .nav-menu position=relative -> ul = container width, ELSE ul = 100% width */
  box-sizing: border-box;
}

.nav-menu>ul:before,
.nav-menu>ul:after {
  content: "";
  display: table;
}

.nav-menu>ul:after {
  clear: both;
}

.nav-menu>ul>li {
  float: left;
  padding: 0;
  margin: 0;
}

.nav-menu>ul>li a {
  color: #525252;
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  padding: 25px 20px;
  display: block;
  position: relative;
}

.nav-menu>ul>li a.mu-arrow:after {
  content: "";
  display: block;
  width: 8px;
  height: 7px;
  background-image: url(../img/up1.png);
  position: absolute;
}

.nav-menu>ul>li a:hover.mu-arrow:after {
  background-image: url(/public/img/up2.png);
}

.nav-menu>ul>li:hover {
  background: #f7f7f7;
}

.nav-menu>ul>li>ul {
  display: none;
  width: 760px;
  background: white;
  border: 1px solid #8c8d9e;
  position: absolute;
  z-index: 99;
  left: 0;
  margin: 0px;
  padding: 0px;
  list-style: none;
  box-sizing: border-box;
}

.nav-menu>ul>li>ul:before,
.nav-menu>ul>li>ul:after {
  content: "";
  display: table;
}

.nav-menu>ul>li>ul:after {
  clear: both;
}

/**** nav #***/
.tab-content>.tab-pane.parlor:after {
  content: "";
  display: block;
  background-image: url(../img/nav/nav-bg1-1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.tab-content>.tab-pane.restaurant:after {
  content: "";
  display: block;
  background-image: url(../img/nav/nav-bg1-2.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.tab-content>.tab-pane.bedroom:after {
  content: "";
  display: block;
  background-image: url(../img/nav/nav-bg1-3.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.tab-content>.tab-pane.study:after {
  content: "";
  display: block;
  background-image: url(../img/nav/nav-bg1-4.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 400px;
  height: 300px;
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: -1;
}

.tab-pane>ul>li {
  margin: 0;
  padding-bottom: 0;
  list-style: none;
  width: 20%;
  padding-right: 0.5%;
  box-sizing: border-box;
  background: none;
  float: left;
}

.tab-pane>ul>li .p-title {
  font-size: 15px;
  color: #777;
  font-weight: 600;
  padding: 4px 8px;
  display: block;
  position: relative;
  border-radius: 6px;
  margin-bottom: 5px;
}

.tab-pane>ul>li .p-title:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background-color: rgb(85, 85, 85);
  position: absolute;
  bottom: -4px;
  left: 0;
}

.tab-pane>ul>li a:hover {
  background-color: #f5e7c5;
}

.tab-pane>ul>li>ul>li {
  border-bottom: 1px solid #eaeaea;
  padding: 1px 0px;
}

.tab-pane>ul>li>ul>li a {
  font-size: 13px;
  font-weight: 400;
  color: #777;
  line-height: 120%;
  padding: 8px 8px;
  border-radius: 6px;
  display: block;
}

.tab-pane>ul>li>ul>li a:hover {
  background-color: #ececec;
}


.tab-paneul>li>ul {
  display: block;
  float: left;
  padding: 0;
  margin: 5px 0 0;
  list-style: none;
  box-sizing: border-box;
}

.tab-pane>ul>li>ul>li>ul:before,
.tab-paneul>li>ul>li>ul:after {
  content: "";
  display: table;
}

.tab-pane>ul>li>ul>li>ul:after {
  clear: both;
}

.tab-pane>ul>li>ul>li>ul>li {
  float: left;
  width: 100%;
  padding: 10px 0;
  margin: 0;
  font-size: 0.8em;
}

.tab-pane>ul>li>ul>li>ul>li a {
  border: 0;
}

/*******/
.nav-menu>ul>li>ul.normal-sub {
  width: 200px;
  left: auto;
  padding: 0px;
}

.nav-menu>ul>li>ul.normal-sub>li {
  width: 100%;
  border-bottom: 1px solid #eae8e2;
}

.nav-menu>ul>li>ul.normal-sub>li a {
  border: 0;
  padding: 0.5em 20px;
}

.nav-menu>ul>li>ul.normal-sub>li a:hover {
  color: #a26f3c;
}

/* ––––––––––––––––––––––––––––––––––––––––––––––––––
Mobile style's
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media only screen and (max-width: 959px) {
  .menu-container {
    width: 100%;
  }

  .menu-dropdown-icon:before {
    display: block;
  }

  .nav-menu>ul {
    display: none;
  }

  .nav-menu>ul>li {
    width: 100%;
    float: none;
    display: block;
  }

  .nav-menu>ul>li a {
    padding: 10px;
    width: 100%;
    display: block;
  }

  .nav-menu>ul>li>ul {
    position: relative;
  }

  .nav-menu>ul>li>ul.normal-sub {
    width: 100%;
  }

  .nav-menu>ul>li>ul>li {
    float: none;
    width: 100%;
    margin-top: 20px;
  }

  .nav-menu>ul>li>ul>li:first-child {
    margin: 0;
  }

  .nav-menu>ul>li>ul>li>ul {
    position: relative;
  }

  .nav-menu>ul>li>ul>li>ul>li {
    float: none;
  }

  .nav-menu .show-on-mobile {
    display: block;
  }
}


.top-text-wrapper {
  margin-bottom: 30px;
}

.top-text-wrapper code {
  font-size: .8em;
  background: linear-gradient(90deg, #fce3ec, #ffe8cc);
  background: linear-gradient(90deg, #fce3ec 10%, #ffe8cc 100%);
  padding: .1rem .3rem .2rem;
  border-radius: .2rem;
}

.tab-section-wrapper {
  padding: 0px;
}

.tab-content {
  margin-top: 20px;
}

.tab-horizontal .tab-content {
  margin-top: 20px;
}

.tab-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  border: none;
}

.tab-nav-item {
  list-style: none;
}

.tab-nav-link {
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  text-align: left;
  color: #1f2949;
}

.tab-horizontal .tab-nav-item {
  margin: 0px 28px;
}

.tab-vertical .nav-tabs li a {
  font-size: 0.9rem;
  color: #999;
  height: 45px;
  display: flex;
  align-items: center;
  padding: 10px 20px;
  box-sizing: content-box;
}

.tab-nav-link.active {
  color: #fff !important;
}

.tab-nav-item:first-child {
  margin-left: 0;
}

.tab-nav-item:last-child {
  margin-right: 0;
}

/* Tab (Vertical menu) */
.tab-vertical .tab-wrapper {
  display: flex;
  align-items: flex-start;
}

.tab-vertical .nav-tabs {
  flex-basis: 126px;
  flex-direction: column;
  justify-content: start;
  height: 500px;
  background-color: #663300;
  border: 0;
}

.tab-vertical .tab-content {
  flex-basis: calc(100% - 126px);
  padding: 15px;
  margin-top: 0px;
}

.tab-coninfo>.active {
  display: block;
}



.tab-vertical .nav-tabs li:not(:first-child) {
  margin-top: 2px;
}

.tab-vertical .tab-nav-item {}

.nav-tabs2 .nav-item {
  width: 50%;
  text-align: center;
}

.nav-tabs2 .nav-item .nav-link {
  color: #999;
  padding: 10px 10px;
  background-color: #f8f8f8;
}

.nav-tabs2 .nav-item .nav-link:hover {
  color: #000;
}

.nav-tabs2 .nav-item .nav-link.active {
  color: #000;
}

.tab-coninfo {
  height: 400px;
  flex-basis: calc(100% - 126px);
  padding: 15px;
  overflow: hidden;
}

.tab-coninfo a {
  padding: 10px !important;
}

@media screen and (max-width:767px) {
  .tab-vertical .tab-content {
    margin-top: 3px;
  }

  .tab-vertical .tab-wrapper {
    display: block;
  }

  .footer-fb img{
    width:100%;
    margin:0px auto;
  }
}

.products-slider .slick-list {
  padding: 30px 0px;
}

.products-slider .slick-slide {
  padding: 0px;
  margin: 0 10px;
}

.products-slider .slick-slide:hover {
  box-shadow: 3px 3px 20px rgba(66, 66, 66, 0.315);
}

.products-slider .slick-slide:hover .pro-title {
  opacity: 1;
}

.products-slider .slick-slide img {
  display: block;
  width: 100%;
}

.products-slider .slick-slide .pro-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 170%;
  text-align: left;
  padding: 10px;
  opacity: 0;
}

.products-slider .slick-slide .pro-title a {
  color: #000;
}

.products-slider .slick-slide .pro-s-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

.products-slider .slick-slide .pro-s-text a {
  color: #fab012;
}

.products-slider .slick-slide .pro-s-text a.ic_fa {
  float: right;
  margin-left: 5px;
}

.products-slider .slick-dots {
  text-align: center;
  margin: 0 0 10px 0;
  padding: 0;
  bottom: -50px;
}

.products-slider .slick-dots li {
  display: inline-block;
  margin-left: 4px;
  margin-right: 4px;
}

.products-slider .slick-dots li.slick-active button {
  background-color: black;
}

.products-slider .slick-dots li button {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-color: #999;
  border: none;
  width: 15px;
  height: 15px;
  border-radius: 20%;
}

.products-slider .slick-dots li :hover {
  background-color: black;
}


.products-popular-slider .slick-list {
  padding: 30px 0px;
}

.products-popular-slider .slick-slide {
  padding: 0px;
  margin: 0 10px;
}

.products-popular-slider .slick-slide:hover {
  box-shadow: 3px 3px 20px rgba(66, 66, 66, 0.315);
}

.products-popular-slider .slick-slide:hover .pro-title {
  opacity: 1;
}

.products-popular-slider .slick-slide img {
  display: block;
  width: 356px;
}

.products-popular-slider .slick-slide .pro-title {
  font-size: 18px;
  font-weight: 500;
  line-height: 170%;
  text-align: left;
  padding: 10px;
  opacity: 0;
}

.products-popular-slider .slick-slide .pro-title a {
  color: #000;
}

.products-popular-slider .slick-slide .pro-s-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 150%;
}

.products-popular-slider .slick-slide .pro-s-text a {
  color: #fab012;
}

.products-popular-slider .slick-slide .pro-s-text a.ic_fa {
  float: right;
  margin-left: 5px;
}

.products-popular-slider .slick-dots {
  text-align: center;
  margin: 0 0 10px 0;
  padding: 0;
  bottom: -50px;
}

.products-popular-slider .slick-dots li {
  display: inline-block;
  margin-left: 4px;
  margin-right: 4px;
}

.products-popular-slider .slick-dots li.slick-active button {
  background-color: black;
}

.products-popular-slider .slick-dots li button {
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background-color: #999;
  border: none;
  width: 15px;
  height: 15px;
  border-radius: 20%;
}

.products-popular-slider .slick-dots li :hover {
  background-color: black;
}

/* Custom Arrow */
.products-prev {
  color: #fff;
  position: absolute;
  top: 30%;
  left: -2em;
  font-size: 1.5em;
  padding: 18px;
  background-color: #805224;
}

.products-prev :hover {
  cursor: pointer;
  color: black;
}

.products-next {
  color: #fff;
  position: absolute;
  top: 30%;
  right: -2em;
  font-size: 1.5em;
  padding: 18px;
  background-color: #805224;
}

.products-next :hover {
  cursor: pointer;
  color: black;
}

@media screen and (max-width: 800px) {
  .products-next {
    display: none !important;
  }
}

/************hot-pro****************/
.ld-box {}

.ld-box a {
  position: relative;
  display: block;
}

.ld-box .ld-text {
  color: #5e3d1d;
  font-size: 18px;
  font-weight: 500;
  text-align: center;
}

.ld-box .hot-text {
  color: rgb(255, 255, 255);
  font-size: 15px;
  font-weight: 400;
  width: 100%;
  padding: 10px;
  display: block;
  position: absolute;
  bottom: 0;
  background-color: #524e4e42;
}

.ld-box .hot-text-sm {
  width: 100%;
  display: block;
}

.ld-box .hot-img img {
  width: 100%;
}

.ld-box:hover .ld-text {
  color: #a26f3c;
}

/************hot-pro****************/
.bg-cover {
  background-size: cover;
  background-position: center center;
}

.products2 .card {
  border: 0px solid rgba(0, 0, 0, .125);
  border-radius: 0px;
}

.products2 .even-title {
  color: white;
  font-size: 15px;
  text-align: center;
  padding: 5px 2px;
  background-color: #77351d;
}

.products2 .even-box a {
  display: block;
}

.products2 .even-box a img {
  height: 132px;
}

.products2 .card-title {
  margin-bottom: .25rem;
}

.products2 .card-info {
  text-align: center;
  line-height: 170%;
  padding: 30px;
  display: block;
  width: 480px;
  position: absolute;
  top: 40%;
  left: calc(50% - 240px);
  background-color: rgb(239 239 239 / 82%);
}

.products2 .card-info .card-title {
  font-size: 24px;
}

.products2 .card-info .card-text {
  font-size: 18px;
}

.products2 .card-text {
  color: #000;
}

.item-slick.slick-slide.slick-current.slick-active {
  outline: none !important;
}

.indexslider-for {
  margin-bottom: 30px;
}

.indexslider-for img {
  width: 100%;
  min-height: 100%;
}

.indexslider-nav {
  margin: auto;
}

.indexslider-nav .item-slick {
  max-width: 240px;
  margin-right: 15px;
  outline: none !important;
  cursor: pointer;
}

.indexslider-nav .item-slick img {
  max-width: 100%;
  height: 118px;
  background-size: cover;
  background-position: center;
}

.indexslider-nav .slick-arrow {
  position: absolute;
  top: 50%;
  z-index: 50;
  margin-top: -12px;
}

.indexslider-nav .slick-prev {
  left: 0;
}

.indexslider-nav .slick-next {
  right: 0;
}

/*因spacing推移方式是用rem為單位，所以會和 .form-row 的間距會有些為落差，可在此作調整。10px 為.form-row 空間*/
.mb-gutter-s {
  margin-bottom: 20px;
}

.mb-gutter-s0 {
  margin-bottom: 0px;
}

.products2 .form-row>.col,
.products2 .form-row>[class*=col-] {
  padding-right: 10px;
  padding-left: 10px;
}

.products3 .form-row>.col,
.products2 .form-row>[class*=col-] {
  padding-right: 20px;
  padding-left: 20px;
}

.products3 .card {
  height: 300px;
  border: 0px solid rgba(0, 0, 0, .125);
  border-radius: 0px;
}

.products3 .card-text {
  color: #000;
}

.products3 .card-footer {
  border-top: 0px solid rgba(0, 0, 0, .125);
  background-color: rgba(0, 0, 0, 0);
}

.products3 .card-footer .btn {
  color: #815224;
  font-size: 19px;
  letter-spacing: 2px;
  border-radius: 0px;
  border: 1px solid #debd68;
  background-color: #ffffffeb;
  padding: 10px 70px;
  margin-bottom: -50px;
  box-shadow: 10px 0px 30px #eee;
}

.products3 .card-footer .cf-btn-right {
  margin-right: -50%;
  z-index: 10;
}


/*****  checkout  *****/

.checkout-container {
  padding: 15px 0 80px 0;
}


.checkout {
  background: #fff;
  border-radius: 6px;
}

.checkout-header {
  background: #f9f3e5;
  -webkit-border-radius: 6px 6px 0 0;
  -moz-border-radius: 6px 6px 0 0;
  border-radius: 6px 6px 0 0;
}

.step:after,
.step:before {
  content: '';
  display: table;
  clear: both;
}

.step a {
  color: #c1c1c1;
  font-weight: 500;
  display: block;
  text-decoration: none;
}

.step.active .number,
.step.active .title {
  color: #805224;
}

.step .number {
  float: left;
  font-size: 24px;
  font-weight: 300;
  width: 30px;
  height: 24px;
  text-align: center;
  line-height: 24px;
  margin-top: 5px;
  margin-bottom: 5px;
  position: relative;
}

.step .title {
  font-size: 16px;
}

.step .desc {
  font-size: 13px;
  color: #6d6d6d;
}

.header-cart .total,
.step.active .number:before {
  background: #00acac;
}

.step .info {
  margin-left: 40px;
}

.checkout-body,
.checkout-footer,
.checkout-header {
  padding: 25px 30px;
}

.table-responsive {
  min-height: .01%;
  overflow-x: auto;
}

.table>thead:first-child>tr:first-child>th {
  border-top: 0;
}

.table.table-cart th:last-child {
  width: 100px;
}

.table.table-cart th {
  border: none;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 20px 5px;
}

.table.table-cart td {
  padding: 15px 20px;
}

.table.table-cart .cart-product .product-info {
  margin-left: 130px;
}

.product-info {
  padding: 20px 30px;
  margin-bottom: 20px;
  font-size: 13px;
}

.product-image,
.product-info {
  display: table-cell;
  vertical-align: top;
}

.carousel .bg-cover-img,
.cart-item-image img,
.footer .list-product .image img,
.page-header-cover img,
.product-image img,
.product-thumbnail-list>li a img,
.promotion-image img,
.section-container.has-bg .cover-bg img,
.table.table-cart .cart-product .product-img img,
.table.table-payment-summary .product-summary .product-summary-img img {
  max-width: 100%;
}

.table.table-cart .cart-product .product-img {
  float: left;
  width: 120px;
}

.cart-qty {
  width: 160px;
}

.cart-qty-input .form-control,
.cart-qty-input .qty-control {
  display: table-cell;
  float: none;
}

.cart-qty-input {
  display: table;
  width: 100%;
}

.cart-qty-input .qty-control {
  color: #212121;
  width: 34px;
  border-radius: 34px;
}

.cart-qty-input .form-control {
  width: 34px;
  margin: 0 5px;
  padding-left: 5px;
  padding-right: 5px;
  text-align: center;
}

.cart-qty-input .qty-control {
  color: #212121;
  width: 34px;
  border-radius: 34px;
}

.cart-qty .qty-desc {
  font-size: 12px;
  color: #9c9c9c;
  margin-top: 5px;
}

.summary-container {
  float: right;
  width: 360px;
  text-align: right;
}

.summary-container .summary-row {
  display: table;
  width: 100%;
}

.summary-container .summary-row+.summary-row {
  margin-top: 5px;
}

.summary-container .field,
.summary-container .value {
  display: table-cell;
  width: 40%;
}

.text-danger {
  color: #ff5b57 !important;
}

.btn.btn-white {
  font-size: 16px;
  font-weight: 400;
  color: #333;
  background: #fff;
  border-color: #e2e7eb;
}

.btn.btn-inverse {
  font-size: 16px;
  color: #fff;
  background: #2d353c;
  border-color: #2d353c;
}

.summary-container .summary-row.total {
  border-top: 1px solid #c5ced4;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: -20px;
}

.checkout-footer {
  text-align: right;
  background: #d0be97;
  -webkit-border-radius: 0 0 6px 6px;
  -moz-border-radius: 0 0 6px 6px;
  border-radius: 0 0 6px 6px;
}

.checkout-footer .btn.btn-white {
  border-color: #fff;
}

.btn.btn-inverse {
  color: #fff;
  background: #2d353c;
  border-color: #2d353c;
}

.form-horizontal .control-label {
  padding-top: 7px;
  margin-bottom: 0;
  text-align: right;
}

.control-label {
  font-weight: 500;
}

.checkout .payment-type {
  font-size: 28px;
  margin: 0;
}

.row.row-space-0>[class*=col-] {
  padding: 0;
}

.checkout .payment-type>li {
  float: left;
  line-height: 34px;
  padding: 0;
}

.checkout-title {
  font-size: 14px;
  margin: 0 0 30px;
}

.f-s-12 {
  font-size: 12px !important;
}

.p-t-2 {
  padding-top: 2px !important;
}

.m-t-5 {
  margin-top: 5px !important;
}

.width-100 {
  width: 100px !important;
}

.checkout .payment-type>li a {
  color: #9c9c9c;
}

.checkout .payment-type li {
  margin-right: 10px;
}

.checkout-title {
  font-size: 14px;
  margin: 0 0 30px;
}

.m-b-15 {
  margin-bottom: 15px !important;
}

.m-t-30 {
  margin-top: 30px !important;
}

.checkout .payment-type>li.active a,
.checkout-question-list .question,
.checkout-question-list .question a {
  color: #212121;
}

.checkout-question-list .question a {
  display: block;
  text-decoration: none;
  line-height: 20px;
}

.m-r-10 {
  margin-right: 10px !important;
}

.col-xs-5 {
  width: 41.66666667%;
}

.col-xs-2 {
  width: 16.66666667%;
}

.checkout-question-list {
  list-style-type: none;
  margin: 0;
  padding: 0;
  font-size: 14px;
}

.checkout-message {
  padding: 20px 40px;
}

.checkout-message h1 {
  margin: 0 0 30px;
  font-size: 36px;
  font-weight: 300;
  text-align: center;
  letter-spacing: 1px;
}

.checkout-message h1 small {
  display: block;
  font-size: 18px;
  line-height: 24px;
  font-weight: 300;
  margin-top: 5px;
}

.table.table-payment-summary {
  border-bottom: 1px solid #ddd;
  margin-bottom: 30px;
}

.table.table-payment-summary .field {
  font-weight: 600;
  text-align: right;
  width: 50%;
}

.table.table-payment-summary td,
.table.table-payment-summary th {
  padding: 10px 15px;
  font-size: 16px;
}

.table.table-payment-summary .product-summary .product-summary-img {
  float: left;
  width: 120px;
  margin-right: 10px;
}

.table.table-payment-summary .product-summary .product-summary-info .title {
  font-weight: 600;
  font-size: 16px;
}

.table.table-payment-summary .product-summary .product-summary-info .desc {
  font-size: 14px;
  color: #9c9c9c;
}