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

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

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

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

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

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

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

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

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

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

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

body {
  color: #292929;
  font-family: "sans-serif";
  font-size: 15px;
  font-weight: 300;
  line-height: 1.625em;
  position: relative;
  background-image: url(../img/bg-pic2.png), url(../img/bg-pic1.png),
    url(../img/bg-pic3.png),
    url(../img/bg2.png),
    url(../img/bg.jpg);

  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat;

  background-size: auto, auto, auto, 100%;

  background-position: top 1900px right 0px, top 900px left 0px,
    top 500px right 0px,
    top 20% left 0%,
    top;
}

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

select {
  display: block;
}

figure {
  margin: 0;
}

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

iframe {
  border: 0;
}

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

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

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

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

.gray-bg {
  background: #f9f9ff;
}

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

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

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

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

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

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

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

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

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

.clear::after {
  clear: both;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

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

.text-white {
  color: #fff;
}

.text-black {
  color: #000;
}

@font-face {
  font-family: menufont;
  font-weight: normal;
  src: url('../fonts/隸書體w7.woff') format('WOFF');
}

/*scrolldown */

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

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

.scrolldown:hover img {
  opacity: 1;
}

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

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

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

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

  20% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

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

  100% {
    opacity: 0;
  }
}

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

  20% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

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

  100% {
    opacity: 0;
  }
}

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

  20% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

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

  100% {
    opacity: 0;
  }
}

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

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

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


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

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

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


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

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

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

.so-4-slide {
  position: fixed;
  top: 590px;
  right: 10px;
  z-index: 999;
  -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 #gotop {
  position: relative;
  display: none;
}

.so-4-slide #gotop:after {
  color: white;
  content: "Top";
  position: absolute;
  bottom: -5px;
  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-news {
  padding: 0px 0px 80px 0px;
}

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

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

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

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

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

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

.display-table {
  display: table;
}

.light {
  color: #fff;
}

.dark {
  color: #222;
}

.relative {
  position: relative;
}

.overflow-hidden {
  overflow: hidden;
}

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

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

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

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

.container.fullwidth {
  width: 100%;
}

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

.no-padding {
  padding: 0;
}

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

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

.black-bg {
  background: #333;
}

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

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

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

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

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

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

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

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

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

.pagination {
  margin-top: 50px;
}

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

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

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

.pagination .page-link:hover {
  background-color: rgb(255, 244, 214) !important;
}

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

/* =================================== */
/*  search Styles 
/* =================================== */
.search {
  padding: 50px;
}

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

.search-area {
  width: 280px;
}

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

.form-area {
  margin: 0 auto;
}



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

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

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



.dope-nav-container.dope-sticky {
  background-color: #192a56;

}


.nav-brand {}

.m-nav-brand {
  display: none;
}

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

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

.headtitle {
  color: #e50000;
  font-family: 'Noto Serif TC', serif;
  font-size: 3rem;
  letter-spacing: 5rem;
  text-indent: 5rem;
  text-align: center;
  position: absolute;
  padding: 35px 15px;
  z-index: 10;
  width: 100%;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white, 1px 1px 9px rgb(253, 217, 13), 1px 1px 10px rgb(253, 217, 13), 1px 3px 12px rgb(253, 217, 13);
}

.header-area {
  position: absolute;
  z-index: 9999;
  left: 0;
  bottom: 50px;
  width: 100%;
}

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

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

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


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

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

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

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

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

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

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

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

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

}

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

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

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

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

.dope-navbar {
  width: 100%;
  padding: 0px 3rem;
  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;
  vertical-align: middle;
  background-image: url(../img/logo.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 200px;
  height: 119px;
}

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

.dope-menu {
  width: 100%;
}

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

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

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

.dopenav ul li a {
  font-family: menufont;
  color: #008aff;
  font-size: 1.3rem;
  text-shadow: -1px 0 white, 0 1px white,
    1px 0 white, 0 -1px white;
  width: 130px;
  height: 129px;
  padding: 10px 13px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: url(../img/menu-bg1.png);
  background-size: contain;
  background-repeat: no-repeat;
  position: relative;
}

.dopenav ul li a:hover,
.dopenav ul li a:focus {
  color: #008aff;
  font-size: 1.3rem;
  background-image: url(../img/menu-bg2.png);
}

.dopenav ul li ul.dropdown li {
  display: inline-block;
}

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

.dopenav ul li ul.dropdown li a .item-img {
  width: 120px;
  height: 120px;
  display: block;
  border-radius: 100%;
  margin: 0 auto;
  border: 1px solid #a70000;
  background-color: #2b0000;
  background-size: cover;
}

.dopenav ul li ul.dropdown li a .item-img:hover {
  background-color: #a70000;
  border: 1px solid #f83333;
}

.dopenav ul li ul.dropdown li a .item-img img {
  width: 100%;
}

.dopenav ul li ul.dropdown li a .item-text {
  color: white;
  font-size: 1rem;
  font-family: 'Noto Serif TC', serif;
  font-weight: 400;
  width: 100%;
  padding-top: 6px;
  text-align: center;
  text-shadow: none;
}

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

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

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

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

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

.dopenav ul li.has-down>a:after {
  font-family: 'FontAwesome';
  content: "\f107";
  color: #000000;
  padding-left: 5px;
  -webkit-transition-duration: 500ms;
  -o-transition-duration: 500ms;
  transition-duration: 500ms;
  position: absolute;
  bottom: 20px;
  right: 45%;
  z-index: 3;
}

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

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

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

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

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

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

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

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

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

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

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

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

.dope-navbar-toggler .navbarToggler span {
  position: relative;
  background-color: rgb(255, 255, 255);
  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 {}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.dope-sticky .dopenav ul li a {
  width: 100px;
  height: 99px;
  font-size: 1.1rem;
}

.dope-sticky .dope-navbar .nav-brand {
  width: 159px;
  height: 99px;
}

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

/* 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;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #f5f5f5;
  /* change if the mask should be a color other than white */
  z-index: 9999999;
  /* makes sure it stays on top */
}

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

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

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

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

@-webkit-keyframes bounce {

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

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

@keyframes bounce {

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

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

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

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

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


.black-btn {
  font-size: 1rem;
  font-family: "Microsoft JhengHei";
  color: #b40000;
  cursor: pointer;
  background-image: url(../img/produces/arrowbg.png);
  background-repeat: no-repeat;
  width: 206px;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.next-btn {
  font-size: 1rem;
  font-family: "Microsoft JhengHei";
  color: #b40000;
  cursor: pointer;
  background-image: url(../img/produces/arrowbg.png);
  background-repeat: no-repeat;
  width: 206px;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.next-btn:hover,
.black-btn:hover {
  color: #ffffff;
  background-image: url(../img/produces/arrowbg2.png);
}

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

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

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

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

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

.outline-btn:hover {}

/* =================================== */
/*  Section Title Styles 
/* =================================== */


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

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



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


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

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

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

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

.about-p-section {
  position: relative;
}

.about-p-section::before {
  height: 220px;
  background: -moz-linear-gradient(top, rgba(82, 0, 0, 0) 0%, rgba(82, 0, 0, 0) 1%, rgba(82, 0, 0, 1) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgba(82, 0, 0, 0) 0%, rgba(82, 0, 0, 0) 1%, rgba(82, 0, 0, 1) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgba(82, 0, 0, 0) 0%, rgba(82, 0, 0, 0) 1%, rgba(82, 0, 0, 1) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.about-p-section::before {
  position: absolute;
  z-index: 5;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  content: '';
  transition-duration: .6s;
  pointer-events: none;
}

.about-p-section .slide__content .slide__img {
  width: 100%;
  opacity: 1 !important;
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

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

.about-p-section .slide__content .slide__content--headings h2 {
  color: white;
  font-family: 'Noto Serif TC', serif;
  font-size: 33px;
  font-weight: 400;
  text-align: center;
  padding-bottom: 20px;
  margin-bottom: 20px;
  margin: 5px 0;
  position: relative;
  text-shadow: -2px 0 #c41700, 0 2px #c41700, 2px 0 #c41700, 0 -2px #c41700;
}

.about-p-section .slide__content .slide__content--headings h2:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  position: absolute;
  bottom: 10px;
  border-bottom: 1px solid #fff;
}

.about-p-section .slide__content .slide__content--headings p {
  font-family: menufont;
  color: white;
  font-size: 28px;
  text-align: center;
  letter-spacing: 0.5rem;
  padding-left: 3px;
  text-shadow: -2px 0 #0084fc, 0 2px #0f7cea, 2px 0 #0084fc, 0 -2px #0084fc;
}

.about-p-section .slide__content .slide__content--headings .animated {
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}



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

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

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

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

.pagescreen {
  height: 490px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.breadcrumb {
  color: black;
  font-size: 1rem;
  font-family: "Microsoft JhengHei";
  padding: 60px 50px 50px 30px;
  margin-right: 50px;
  border-radius: 0rem;
  box-sizing: border-box;
  display: inline-block;
  background-color: #fdfcf900;
  position: relative;
}

.breadcrumb:before {
  content: "";
  background-image: url(../img/breadicon.png);
  width: 23px;
  height: 23px;
  display: block;
  position: absolute;
  left: 0;
  top: 60px;
}

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

/* =================================== */
/*  About Us Styles 
/* =================================== */
.about-section {
  padding: 60px 20px;
  position: relative;
}

.about-section .ab-m-title {
  float: right;
  width: 70%
}

.about-section .ab-m-cont {
  float: left;
  width: 30%
}

.about-section .ab-title {
  color: black;
  font-family: 'Noto Serif TC', serif;
  font-size: 30px;
  letter-spacing: 3px;
  padding-left: 30px;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: inline-flex;
  border-left: 1px #000 solid;
  padding-left: 5px;
}

.about-section .ab-cont1 {
  width: 80%;
  margin: .67em 0;
  justify-content: center;
  align-self: center;
  display: inline-flex;
}

.about-section .ab-cont1 .ac-c-t1 {
  font-size: 30px;
  font-family: 'Noto Serif TC', serif;
  color: #bc0000;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: inline-flex;
  justify-content: center;
  position: relative;
}


.about-section .ab-cont1 .ac-c-t1:before {
  content: "";
  background-color: #bc0000;
  width: 25px;
  height: 2px;
  display: block;
  position: absolute;
  top: 100px;
  left: 0px;
}

.about-section .ab-cont1 .ac-c-t1:after {
  content: "";
  background-color: #bc0000;
  width: 25px;
  height: 2px;
  display: block;
  position: absolute;
  bottom: 100px;
  left: 0px;
}

.about-section .ab-cont1 .ac-c-img {
  display: block;
  justify-content: center;
  padding: 0 59px;
}

.about-section .ab-cont1 .ac-c-t2 {
  font-size: 30px;
  font-family: 'Noto Serif TC', serif;
  color: #171717;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
  display: inline-flex;
  justify-content: center;
  position: relative;
}

.about-section .ab-cont1 .ac-c-t2:before {
  content: "";
  background-color: #bc0000;
  width: 25px;
  height: 2px;
  display: block;
  position: absolute;
  top: 100px;
  left: 0px;
}

.about-section .ab-cont1 .ac-c-t2:after {
  content: "";
  background-color: #bc0000;
  width: 25px;
  height: 2px;
  display: block;
  position: absolute;
  bottom: 100px;
  left: 0px;
}

.about-section .ab-cont2 {
  height: 347px;
  padding-top: 20px;
  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: vertical-rl;
  position: relative;
  float: right
}

.about-section .ac-c-text {
  font-family: 'Noto Serif TC', serif;
  font-size: 18px;
  text-decoration: underline;
  line-height: 180%;
  letter-spacing: 2px;
  font-style: normal;
}

.about-section .ab-cont2 a.more {
  width: 55px;
  height: 55px;
  box-sizing: border-box;
  display: block;
  border: 5px solid #bc0000;
  position: absolute;
  bottom: 3%;
  padding: 0px;
  margin: 0px;
}

.about-section .ab-cont2 a span {
  font-family: 'Noto Serif TC', serif;
  font-size: 16px;
  line-height: 100%;
  color: #bc0000;
  display: block;
  position: absolute;
  top: 16%;
  left: 16%;
}

.about-section .ab-cont2 a.more:before {
  content: "";
  width: 40px;
  height: 40px;
  border: 1px solid #bc0000;
  display: block;
  position: absolute;
  bottom: 2px;
  left: 2px;
}

.about-page-section {
  position: relative;
  padding-bottom: 100px;
}

.page-title {
  position: relative;
  padding-left: 100px;
}

.page-title .title-box {
  color: white;
  font-size: 24px;
  font-family: 'Noto Serif TC', serif;
  letter-spacing: 0.8rem;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #bc0000;
  width: 65px;
  height: 120px;
  padding-left: 10px;
}

.page-title .title-box2 {
  color: rgb(44, 44, 44);
  font-size: 24px;
  font-family: 'Noto Serif TC', serif;
  letter-spacing: 0.8rem;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 65px;
  height: 120px;
  padding-left: 10px;
}

.page-title .pt-en {
  font-size: 14px;
  font-family: 'Noto Serif TC', serif;
  padding-top: 5px;
  padding-left: 8px;
}

.ab-conbg {
  width: 100%;
  background-color: #762527;
  margin-top: 100px;
}

.ab-conbg .ab2-title {
  color: white;
  font-family: 'Noto Serif TC', serif;
  font-size: 26px;
  letter-spacing: 0.5rem;
  text-align: center;
  padding-top: 60px;
  position: relative;
}

.ab-conbg .ab2-title:after {
  content: "";
  display: block;
  width: 200px;
  height: 1px;
  background-color: white;
  position: absolute;
  left: calc(50% - 100px);
  bottom: -10px;
}

.ab-conbg .about-text {
  color: white;
  font-family: 'Noto Serif TC', serif;
  font-size: 1rem;
  line-height: 180%;
  padding: 50px;
  padding-top: 40px;
  padding-right: 60px;
}



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

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

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

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


.about-img {
  position: relative;
}

.about2-img img {
  width: 250px;
  position: absolute;
  top: -15%;
  left: 20%;
}

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

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

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

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

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

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

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

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

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

.service-section 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;
  padding: 0px 0px 60px 0px;
}

.news-section .news-title {
  width: 65px;
  position: relative;
  margin: 0 auto;
  text-align: center;
  z-index: 50;
}

.news-section .news-title h4 {
  color: white;
  font-size: 24px;
  font-family: 'Noto Serif TC', serif;
  letter-spacing: 0.8rem;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #bc0000;
  width: 65px;
  height: 120px;
  padding-left: 10px;
}

.news-section .news-title span {
  color: white;
  font-size: 14px;
  font-family: 'Noto Serif TC', serif;

}

.news-section .news-container {
  position: relative;
  margin-top: -90px;

}

.news-section .news-container .news-bg {
  position: relative;
  display: flex;
  width: 90%;
  height: 540px;
  background-color: #762527;
}

.news-section .news-container .news-more {
  position: absolute;
  top: 0;
  right: 0;
  width: 90px;
  height: 90px;
  display: inline-flex;
  justify-content: center;
  align-self: center;
  background-color: #000000;
  padding-top: 35px;
  box-sizing: border-box;
}

.news-section .news-container .news-more img {
  width: 12px;
  height: 21px;
  display: block;
  -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;
}

.news-section .news-container .news-more:hover img {
  margin-right: -10px
}

.news-section .news-container .news-img {
  position: relative;
  display: inline-flex;
  width: 45%;
  height: 540px;
  left: 0;
  top: -10%;
  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: all .5s;
  -o-transition: all .5s;
  transition: all .5s;
}

.news-section .news-container .news-img:hover {
  background-size: 105%;
}

.news-section .news-container .news-img h4 {
  color: white;
  font-size: 24px;
  font-family: 'Noto Serif TC', serif;
  position: absolute;
  display: block;
  width: 64px;
  height: auto;
  padding: 20px 0px 20px 18px;
  box-sizing: border-box;
  right: 15%;
  top: 15%;
  border: 1px solid #fff;
}

.news-section .news-container .news-con {
  display: inline-flex;
  width: 45%;
  height: 540px;
  overflow: hidden;
  margin-left: 8.5%;
}

.news-section .news-container .news-con ul {
  padding: 0px;
  padding-top: 110px;
  margin: 0px
}

.news-section .news-container .news-con ul li {
  padding: 10px 0px;
}

.news-section .news-container .news-con ul li a {
  color: white;
  font-size: 16px;
  font-family: 'Noto Serif TC', serif;
}

.news-section .news-container .news-con ul li a .date {
  font-size: 13px;
}

.news-section .news-container .news-con ul li a:hover {
  color: #e5ca95;
}


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

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

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

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

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

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


/* =================================== */
/*  Produce Us Styles 
/* =================================== */
.products-section .pro-title {
  width: 65px;
  position: relative;
  margin: 0 auto;
}

.products-section .pro-title h4 {
  color: white;
  font-size: 24px;
  font-family: 'Noto Serif TC', serif;
  letter-spacing: 0.8rem;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #bc0000;
  width: 65px;
  height: 120px;
  padding-left: 10px;
}

.products-section .pro-title span {
  font-size: 14px;
  font-family: 'Noto Serif TC', serif;
  margin-left: -5px;
}

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

.other-pr-box {
  background-color: #f7f1eb6e;
  padding-top: 80px;
  padding-bottom: 80px;
}

.produces-top {
  padding: 0px 0px 80px 0px;
}

.work-top {
  padding: 0px 0px 80px 0px;
}

.produces-section .pro-title {
  width: 200px;
  font-size: 30px;
  font-family: 'Noto Serif TC', serif;
  position: relative;
  text-align: center;
  margin: 0 auto;
}

.produces-section .pro-title .pro-title-en {
  color: #a40000;
  width: 200px;
  font-size: 15px;
  font-family: 'Noto Serif TC', serif;
  position: relative;
  text-align: center;
  padding-top: 5px;
  margin: 0 auto;
}

.produces-section .pro-title h4 {
  color: white;
  font-size: 24px;
  font-family: 'Noto Serif TC', serif;
  letter-spacing: 0.8rem;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #bc0000;
  width: 65px;
  height: 120px;
  padding-left: 10px;
}

.produces-section .pro-title span {
  font-size: 14px;
  font-family: 'Noto Serif TC', serif;
  margin-left: -5px;
}

.pro-con-text {
  padding: 30px 0px 30px 0px;
}

.pro-carousel {
  padding: 50px 50px;
}

.pro-carousel .pro-item .pro-box {
  width: 265px;
  height: 415px;
  margin: 0 auto;
  background-color: #842d2d;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.pro-carousel .pro-item .pro-box:after {
  content: "";
  display: block;
  border: 21px solid transparent;
  width: 245px;
  height: 395px;
  -moz-border-image: url(../img/pro_border.png) 25 25 round;
  /* 給 Firefox 看*/
  -webkit-border-image: url(../img/pro_border.png) 25 25 round;
  /* 給 Safari 與 Chrome 看*/
  -o-border-image: url(../img/pro_border.png) 25 25 round;
  /* 給 Opera 看*/
  border-image: url(../img/pro_border.png) 25 25 round;
  position: absolute;
  top: 10;
  left: 10;
}

.pro-carousel .pro-item .pro-box h4 {
  color: rgb(3, 3, 3);
  font-size: 16px;
  font-family: 'Noto Serif TC', serif;
  letter-spacing: 0.8rem;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  position: absolute;
  background-color: #faf8f4;
  border: 1px solid #222222;
  width: 45px;
  height: auto;
  padding: 15px 0 15px 13px;
  top: 20px;
  left: -30px;
  z-index: 10;
}


.pro-carousel .pro-item .pro-box .img {
  width: 180px;
  height: auto;
  margin: 0 auto;
}

.pro-carousel .pro-item .pro-box .img img {
  width: 100%;
}

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

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

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

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

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

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

.produce-menu {
  margin: 0px;
  padding: 50px 0px 20px 0px;
  display: flex;
  justify-content: center;
}

.produce-menu li {
  display: inline-flex;
  margin: 0 10px;
}

.produce-menu li a {
  font-size: 1rem;
  font-family: "Microsoft JhengHei";
  color: rgb(136, 0, 0);
  cursor: pointer;
  background-image: url(../img/produces/arrowbg.png);
  background-repeat: no-repeat;
  width: 206px;
  height: 58px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.produce-menu li.active a {
  color: #ffffff;
  background-image: url(../img/produces/arrowbg2.png);
}

.produce-menu li a:hover {
  color: #ffffff;
  background-image: url(../img/produces/arrowbg2.png);
}

.produce-list {
  padding: 50px 0px 0px 0px;
}

.produce-box {
  margin-bottom: 30px;
}

.produce-box>a {
  display: block;
}

.produce-box .produce-details {
  padding: 15px;
  text-align: center;
  position: relative;
}

.produce-box .produce-details h4 {
  color: rgb(3, 3, 3);
  font-size: 18px;
  font-family: 'Noto Serif TC', serif;
  letter-spacing: 0.8rem;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  position: absolute;
  background-color: #faf8f4;
  border: 1px solid #222222;
  width: 45px;
  height: auto;
  padding: 15px 0 15px 13px;
  top: 60px;
  left: 0%;
  z-index: 10;
}

.produce-box .produce-details .pro-more {
  color: white;
  font-size: 15px;
  position: absolute;
  padding: 5px 10px;
  width: 120px;
  border-radius: 50px;
  background-color: #841001;
  top: 45%;
  left: calc(50% - 60px);
  opacity: 0;
  -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;
}

.produce-box a:hover .pro-more {
  opacity: 1;
}


.produce-details:after {
  content: "";
  display: blck;
  width: 240px;
  height: 240px;
  border-radius: 100%;
  position: absolute;
  left: calc(50% - 120px);
  z-index: -1;
  background: -moz-radial-gradient(center, ellipse cover, rgba(218, 190, 172, 1) 30%, rgba(218, 190, 172, 0) 76%, rgba(218, 190, 172, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(218, 190, 172, 1) 30%, rgba(218, 190, 172, 0) 76%, rgba(218, 190, 172, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, rgba(218, 190, 172, 1) 30%, rgba(218, 190, 172, 0) 76%, rgba(218, 190, 172, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.produce-box a:hover .produce-details:after {
  background: -moz-radial-gradient(center, ellipse cover, rgba(234, 39, 4, 1) 30%, rgba(223, 138, 114, 0) 76%, rgba(218, 190, 172, 0) 100%);
  /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, rgba(234, 39, 4, 1) 30%, rgba(223, 138, 114, 0) 76%, rgba(218, 190, 172, 0) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, rgba(234, 39, 4, 1) 30%, rgba(223, 138, 114, 0) 76%, rgba(218, 190, 172, 0) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}

.produce-box .produce-details img {
  width: auto;
  height: 230px;
}




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

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

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

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

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

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

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


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

.work-p-section {
  padding: 0px 0px 80px 0px;
}

.work-p-section .work-title {
  width: 200px !important;
  font-size: 30px;
  font-family: 'Noto Serif TC', serif;
  position: relative;
  text-align: center;
  margin: 0 auto;
}

.work-p-section .work-title .wk-title-en {
  color: #a40000;
  width: 200px;
  font-size: 15px;
  font-family: 'Noto Serif TC', serif;
  position: relative;
  text-align: center;
  padding-top: 5px;
  margin: 0 auto;
}

.work-p-section .wk-con-text {
  padding: 30px 0px 30px 0px;
}

.single-work-blog {
  text-align: left;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #fdfcf8;
  border: 1px solid #bb1b03;
  border-radius: 6px;
}

.single-work-blog a {
  color: black;
}

.single-work-blog a:hover,
.single-work-blog a:hover h4 {
  color: rgb(117, 0, 0);
}

.single-work-blog .work-details {
  color: black;
}

.single-work-blog .work-details h4 {
  font-size: 24px;
  font-weight: 500;
  margin: 20px 0px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  margin-bottom: 9px;
}

.single-work-blog .img {
  height: 160px;
  overflow: hidden;
  margin-bottom: 20px;
}

.single-work-blog .img img {
  transform: scale(1);
  -webkit-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.single-work-blog .img:hover img {
  transform: scale(1.2);
}

.single-work-blog .work-details p {
  height: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.work-section .work-title {
  width: 65px;
  position: relative;
  margin: 0 auto;
  text-align: center;
}

.work-section .work-title h4 {
  color: white;
  font-size: 24px;
  font-family: 'Noto Serif TC', serif;
  letter-spacing: 0.8rem;
  text-align: center;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  position: relative;
  background-color: #bc0000;
  width: 65px;
  height: 120px;
  padding-left: 10px;
}

.work-section .work-title span {
  font-size: 14px;
  font-family: 'Noto Serif TC', serif;
  margin-left: -5px;
}

.work-section .work-carousel {
  padding-top: 70px;
}

.work-section .work-carousel .work-item {
  position: relative;
}

.work-section .work-carousel .work-item .work-box {
  position: relative;
  display: block;
}

.work-section .work-carousel .work-item .work-box:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 450px;
  background-color: rgba(0, 0, 0, 0.651);
  z-index: 11;
  top: 0;
  left: 0;
  -webkit-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition: all .2s;
  -o-transition: all .2s;
  transition: all .2s;
}

.work-section .work-carousel .work-item .work-box:hover:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 450px;
  background-color: rgba(0, 0, 0, 0);
  z-index: 11;
  top: 0;
  left: 0;
}

.work-section .work-carousel .work-item .work-box .work-title {
  position: absolute;
  color: white;
  font-size: 18px;
  font-family: 'Noto Serif TC', serif;
  padding: 15px;
  background-color: rgba(0, 0, 0, 0.589);
  border: 1px solid #afafaf;
  z-index: 30;
  top: -60px;
  left: calc(50% - 100px);
  width: 200px;
  display: block;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}

.work-section .work-carousel .work-item .work-box:hover .work-title {
  top: 150px;
  display: block;
}

.work-section .work-carousel .work-item .img {
  height: 450px;
  width: 100%;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.work-section .work-carousel .work-box .w-more {
  color: white;
  text-align: center;
  font-size: 12px;
  height: 50px;
  width: 50px;
  display: block;
  position: absolute;
  border: 2px solid rgb(207, 207, 207);
  border-radius: 50px;
  bottom: -100px;
  left: calc(50% - 25px);
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  z-index: 5;
}

.work-section .work-carousel .work-box .w-more:after {
  content: "";
  height: 8px;
  width: 8px;
  display: block;
  position: absolute;
  background-color: white;
  border-radius: 50px;
  bottom: 18px;
  left: calc(50% - 4px);
  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.work-section .work-carousel .work-box:hover .w-more {
  display: block;
  bottom: 150px;
}

.work-carousel .nav-btn {
  height: 70px;
  width: 70px;
  cursor: pointer;
  position: absolute;
  top: 0 !important;
}

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

.work-carousel .prev-slide {
  left: 0;
  display: inline-flex;
  justify-content: center;
  align-self: center;
  background-color: #841001;
  box-sizing: border-box;
}

.work-carousel .next-slide {
  right: 0;
  display: inline-flex;
  justify-content: center;
  align-self: center;
  background-color: #841001;
  box-sizing: border-box;
}

.work-carousel .prev-slide:after {
  color: white;
  content: "\f104";
  font: normal normal normal 20px/1 FontAwesome;
  text-rendering: auto;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  top: 40%;
  right: 50%;
}

.work-carousel .next-slide:after {
  color: white;
  content: "\f105";
  font: normal normal normal 20px/1 FontAwesome;
  text-rendering: auto;
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  position: absolute;
  top: 40%;
  left: 50%;
}

.work-carousel .prev-slide:hover:after {
  margin-right: 6px;
}

.work-carousel .next-slide:hover:after {
  margin-left: 6px;
}






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

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

.c-data .c-data__container header h1 {
  color: white;
  font-size: 1.35rem;
  font-family: 'Noto Serif TC', serif;
  letter-spacing: 3px;
  width: 418px;
  height: 58px;
  text-align: center;
  background-image: url(../img/produces/pro-title-bg.png);
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

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

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

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

.c-data .c-data__container .pro-con {
  font-size: 16px;
  padding-right: 24px;
  padding-left: 24px;
  box-sizing: border-box;
  padding-top: .1em;
  padding-bottom: .1em;
}

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =================================== */
/*  link Styles 
/* =================================== */

.link-section {
  padding: 50px 0 80px 0px;
}

.link-list {
  padding: 0px;
  margin: 0px;
  font-size: 0;
}

.link-list li {
  font-size: 1rem;
  width: 33%;
  box-sizing: content-box;
  display: inline-block;
}

.link-list li a {
  display: block;
  padding: 10px;
  box-sizing: content-box;
  position: relative;
}

.link-list li a h4 {
  color: #842d2d;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  padding: 22px 0px;
}

.link-list li a h4:after {
  content: "";
  display: block;
  width: 80%;
  height: 1px;
  background-color: #aa8c54;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.link-list li a .img {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  margin-top: 20px;
  border: 5px solid #f3c424;
  border-radius: 200px;
  background-color: #fbefd7;
  overflow: hidden;
  text-align: center;
  
}

.link-list li a:hover .img {
  border: 5px solid rgb(196, 74, 74);
  background-color: #842d2d;
  
}

.link-list li a .img img {
  width: auto;
  height: 100%;
  transform: scale(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;
}

.link-list li a:hover .img img {
  width: auto;
  height: 100%;
  transform: scale(1);
  transform: scale(1.2);

}

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

/* =================================== */
/*  table Styles 
/* =================================== */


.table-rwd {}

/*這是額外做顏色，沒有什麼意義*/
.table-pro tr.tr-only-hide {
  color: black;
}

.table-pro tr.tr-only-hide th {
  width: 20%;
  text-align: center;
}

.table-pro tr td {
  text-align: center;
}

.table-pro tr.tr-only-hide th:nth-child(1) {
  width: 6%;
}

.table-pro tr.tr-only-hide th:nth-child(2) {
  width: 20%;
}

.table-pro tr.tr-only-hide th:nth-child(2) {
  width: 10%;
}

.table-pro tr.tr-only-hide th:nth-child(4) {
  width: 40%;
}

.table-pro.table-striped tbody tr:nth-of-type(even) {
  background-color: #fbfcfc;
}

.table-pro.table-striped tbody tr:nth-of-type(odd) {
  background-color: #f4f6ec;
}

@media (max-width: 736px) {
  .table-rwd {
    min-width: 100%;
  }

  /*針對tr去做隱藏*/
  tr.tr-only-hide {
    display: none !important;
  }

  /*讓tr變成區塊主要讓他有個區塊*/
  .table-rwd tr {
    display: block;
    border: 1px solid #ddd;
    margin-top: 5px;
  }

  .table-pro tr td {
    text-align: left;
  }

  .table-rwd td {
    text-align: left;
    font-size: 15px;
    overflow: hidden;
    width: 100%;
    display: block;
  }

  .table-rwd td:before {
    /*最重要的就是這串*/
    content: attr(data-th) " : ";
    /*最重要的就是這串*/
    display: inline-block;
    text-transform: uppercase;
    font-weight: bold;
    margin-right: 10px;
    color: #a00800;
  }

  /*當RWD縮小的時候.table-bordered 會有兩條線，所以針對.table-bordered去做修正*/
  .table-rwd.table-bordered td,
  .table-rwd.table-bordered th,
  .table-rwd.table-bordered {
    border: 0;
  }

}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* =================================== */
/*  Blog Styles 
/* =================================== */
.single-latest-blog {
  text-align: left;
  margin-bottom: 30px;
  padding: 20px;
  background-color: #fdfcf8;
  border: 1px solid #bb1b03;
  border-radius: 6px;
}

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

}

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

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

.news-section .single-latest-blog:hover h4 {
  color: brown;
}

.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: #bb1b03;
  letter-spacing: 3px;
  padding-bottom: 3px;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.contact-section .send_btn {
  width: 100%;
  border: none;
  float: right;
  padding: 16px 50px;
  font-size: 15px;
  background-color: #841001;
  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-top: 80px;
  padding-bottom: 80px;
  background-color: #850000;
}

.footer-section .footer-text {
  color: #e5ca95;
  font-family: 'Noto Serif TC', serif;
  font-size: 24px;
  padding-bottom: 10px;
}

.footer-section .footer-text .map-icon {
  vertical-align: bottom;
  margin-left: 3px;
}

.footer-section .footer-text ul {
  padding: 0px;
  padding-top: 20px;
}

.footer-section .footer-text ul li {
  display: inline-block;
  position: relative;
  padding-right: 20px;
}

.footer-section .footer-text ul li:after {
  content: "|";
  font-size: 15px;
  position: absolute;
  top: 0px;
  right: 5px;
}

.footer-section .footer-text ul li a {
  color: #e5ca95;
}

.footer-section .footer-text ul li a:hover {
  text-decoration: underline;
}

.footer-section .copyright-wrap {
  color: #a2a2a2;
  padding-top: 20px;
}

.footer-section .footer-text2 .copyright {
  color: #e5ca95;
  padding-top: 9px;
  font-size: 15px;
  margin-bottom: 0rem;
}

.footer-section .footer-text2 .social_links {
  padding: 0px;
  margin: 0px;
  margin-bottom: 12px;
}

.footer-section .footer-text2 .social_links li {
  display: inline-block;
  margin-right: 5px;
}

.footer-section .footer-text2 .view-numberp {
  display: inline-flex;
  font-size: 16px;
  color: white;
  font-family: 'Noto Serif TC', serif;
  align-items: center;
  padding: 6px 0px 5px 10px;
  border: 1px solid #e5ca95;
}

.footer-section .footer-text2 .view-numberp ul {
  display: inline-flex;
  font-size: 15px;
  color: #ffffff;
  padding: 0;
  margin-top: -7px;
  margin-right: -1px;
  margin-bottom: -6px;
  margin-left: 15px;
}

.footer-section .footer-text2 .view-numberp ul:before {
  content: "";
  width: 1px;
  height: 35px;
  margin-left: -2px;
  background-color: #e5ca95;
}

.footer-section .footer-text2 .view-numberp ul li {
  display: inline-flex;
  font-size: 15px;
  font-weight: 500;
  width: 32px;
  height: 44px;
  padding-top: 5px;
  padding-left: 10px;
  margin-bottom: -9px;
  color: #ffffff;
  text-shadow: 1px 2px 2px #000000;
  background-image: url(../img/ft-number-bg.png);
  background-repeat: no-repeat;
}

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

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

.gallery-slider__images .next-arrow svg,
.gallery-slider__images .prev-arrow svg {
  top: 4px;
}

.gallery-slider__images .next-arrow {
  right: 25px;
}

.gallery-slider__images .prev-arrow {
  left: 25px;
}

.gallery-slider__images:hover .next-arrow,
.gallery-slider__images:hover .prev-arrow {
  opacity: 0;
}

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

.gallery-slider__thumbnails:after {
  right: 0;
}

.gallery-slider__thumbnails .item .img-fill {
  height: 70px;
  background: #f3eeea;
  cursor: pointer;
  border-radius: 70px;
  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: rgb(163 23 2);
  color: #FFF;
  border: 0 !important;
  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;
}