@charset "UTF-8";
@import url("https://fonts.googleapis.com/css?family=IBM+Plex+Mono:400,400i|IBM+Plex+Sans+Condensed:400,400i|IBM+Plex+Sans:100,100i,400,400i,700,700i|IBM+Plex+Serif:400,400i");
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&family=Noto+Sans+TC:wght@100;300;400;500&family=Roboto:ital,wght@0,100;0,300;0,400;1,100&display=swap');

/** Color
-----------------------------------------**/
:root {
  --blue: #5a58e4;
  --indigo: #4b33d9;
  --indigo-light: #f3f0fb;
  --purple: #b257eb;
  --purple-light: #b56be3;
  --purple-pink: #e7e5f3;
  --pink: #f284c6;
  --red: #ec4f67;
  --orange: #e57828;
  --yellow: #fbd347;
  --green: #78C98F;
  --green-dark: #005451;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray-dark: #2e2e2e;
  --gray: #5a5a5a;
  --gray-300: #777777;
  --gray-200: #afafaf;
  --gray-light: #dcdcdc;
  --primary: #0095ff;
  --secondary: #8d9aa6;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc355d;
  --light: #f0f0f0;
  --dark: #030303;

}
*,
::after,
::before {
  box-sizing: border-box;
}
/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
                     basic
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
html,
body {
    height                 : 100%;
    font-family            : 'Noto Sans TC', 'Roboto', sans-serif, cursive;
    -webkit-font-smoothing : antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin     : 0;
    color      : #1a1a1a;
    font-weight: 500;
    font-family: 'Noto Sans TC', 'Roboto', sans-serif, cursive;
}
p{
 line-height: 1.7;
}
.lead {
    font-size: 1.1rem;
}

a {
    text-decoration: none !important;
    cursor         : pointer;
    color: #2a2a2a;
}
a.link {
    color: var(--cyan);
    text-decoration: dotted !important;
    padding: 0 0.25rem;
    text-decoration-line: underline !important
}
a:hover {
    color: var(--info);
}

* {
    box-sizing            : border-box;
    margin                : 0;
    padding               : 0;
    -webkit-font-smoothing: antialiased;
}

*:focus {
    outline: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block
}

ol,
ul {
    list-style: none
}

blockquote,
q {
    quotes: none
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none
}
button {
    outline: 0;
}
button:focus {
    outline: 0;
}
table {
    border-collapse: collapse;
    border-spacing : 0
}
textarea, input {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ellipsis-two-row {
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  white-space: normal;
}
img{
    max-width: 100%;
    display: block;
}
.container-full {
    max-width: 100vw !important;
}
dl, dd {
    font-size: .9rem;
}
/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
              Padding margin Float
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/

.py-6 {
    padding-top   : 4rem !important;
    padding-bottom: 4rem !important;
}

.py-7 {
    padding-top   : 6rem !important;
    padding-bottom: 6rem !important;
}

.mt-6 {
    margin-top: 4rem !important;
}

.mt-7 {
    margin-top: 6rem !important;
}

.mb-5 {
    margin-bottom: 3rem !important;
}

.mb-6 {
    margin-bottom: 4rem !important;
}

.mb-7 {
    margin-bottom: 6rem !important;
}

.p-0 {
    padding: 0 !important;
}
.ptb-2 {
    padding-top: 2rem !important;
    padding-bottom: 2rem !important;
}
.ptb-5 {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
}

.ply-7 {
    padding-left: 7rem !important;
    padding-right: 7rem !important;
}

.padding-fixed {
    padding-top   : 100px;
    padding-bottom: 100px;
}

.float-start {
    float: left !important;
}

.float-end {
    float: right !important;
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
                     color
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
.text-greenlight {
    color: #7AE2E2 !important;
}
.text-white {
    color: var(--white) !important;
}
.text-info {
    color: var(--info) !important;
}
.bg-greenlight {
    background: #7AE2E2 !important;
}
.bg-dark {
    background-color: var(--gray-dark) !important;
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
                     pic
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/


.fill {
  object-fit:fill;
}
.contain {
  object-fit:contain;
}
.cover {
  object-fit:cover;
}
.none {
  object-fit:none;
}
.scale-down {
  object-fit:scale-down;
}
.object-center-center {
    object-position: center center;
}


/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
              Section Set
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/

.section-title {
    position: relative
}

.section-title h3 {
    color      : #1a1a1a;
    line-height: 46px;
    letter-spacing: 5px;
    position: relative
}

.section-title h3:after {
    height    : 2px;
    text-align: center;
    width     : 4.15rem;
    content   : "";
    position  : absolute;
    left: 0;
    right: 0;
    bottom:  -1rem;
    margin: auto;
    background: var(--cyan)
}

.section-title h4 {
    color      : #1a1a1a;
    font-weight: 600;
    letter-spacing: 5px;
    line-height: 46px;
    font-size: 1.375rem;
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
                     badge   tagsinput
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*= */
.badge-outline {
    display         : inline-block;
    padding         : 0.5em 2em;
    margin          : 0 .3rem .3rem;
    font-size       : .9em;
    font-weight     : 500;
    line-height     : normal;
    color           : var(--dark);
    background-color: #fff;
    border          : 1px solid var(--dark);
    text-align      : center;
    white-space     : nowrap;
    vertical-align  : baseline;
}

.badge-outline:hover {
    background: var(--dark);
    color     : #fff;
    border    : 1px solid var(--dark);
}

/* #Bootstrap - tagsinput
A Pen created on CodePen.io.
Original URL: [https://codepen.io/dannibla/pen/QGLyBW].
*/
.bootstrap-tagsinput {
    background-color: #fff;
    border          : 1px solid #dedede;
    display         : inline-block;
    padding         : 1rem;
    color           : #555;
    vertical-align  : middle;
    border-radius   : 4px;
    max-width       : 100%;
    line-height     : normal;
    cursor          : text;
    flex            : 0 0 auto;
    width           : 83.33333333%;
}
.input-group .bootstrap-tagsinput {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
.input-group button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.bootstrap-tagsinput input {
    border          : none;
    box-shadow      : none;
    outline         : none;
    background-color: transparent;
    padding         : 0 6px;
    margin          : 0;
    width           : auto;
    max-width       : inherit;
}

.bootstrap-tagsinput.form-control input::-moz-placeholder {
    color  : #777;
    opacity: 1;
}

.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
    color: #777;
}

.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
    color: #777;
}

.bootstrap-tagsinput input:focus {
    border    : none;
    box-shadow: none;
}

.bootstrap-tagsinput .tag {
    font-size    : .9rem;
    font-weight  : 600;
    color        : #fff;
    background   : #7AE2E2;
    border-radius: 1.2rem;
    padding      : 0.35rem 0.9rem;
    line-height  : normal;
    margin-right : .3rem;
    margin-bottom: .3rem;
}

.bootstrap-tagsinput .tag [data-role="remove"] {
    margin-left: 8px;
    cursor     : pointer;
}

.bootstrap-tagsinput .tag [data-role="remove"]:after {
    content: "x";
    padding: 0px 2px;
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
              Navbar & dropdown-item
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
.navbar {
    padding: 1rem;
}

.navbar-light {
    background: rgba(255, 255, 255, .125);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}
.navbar-light .navbar-nav .nav-link {
  color: #000;
  font-size: 0.925rem;
  padding-right: 0;
  padding-left: 0;
      margin-right: 1rem;
    margin-left: 1rem;
  position: relative;
}

.nav-link:hover:after {
    position: absolute;
    /* right: 55%; */
    left: 0;
    bottom: 0;
    width: 23px;
    height: 1.5px;
    background: var(--cyan);
    content: "";
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
}
.navbar-brand {
    margin: 0 1rem;
    font-size: 1.15rem;
    font-weight: 500;
}
.navbar-brand img{
    display: block;
    width: 200px;
    height: auto;
}

.dropdown-item {
  font-size: 0.923rem;
}
.navbar-toggler {
  border: none;
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
                     Search
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
#searchbar {
    position: relative;
    background: var(--green-dark);
    padding: 3rem;
}
#search {
    background     : rgba(255, 255, 255, 0.315);
    border-radius  : 100px;
    transition     : all 0.5s;
    width          : 100%;
    margin: auto;
}
#search form{
    position: relative;
    width: 100%;
    display        : flex;
    justify-content: space-between;
    align-items    : center;

}
#search:hover,
#search:focus {
    background: #7ae2e2c0;
}

#search button,
#search input {
    -webkit-appearance: none;
    -moz-appearance   : none;
    appearance        : none;
    background        : transparent;
    border            : 0;
    color             : #fff;
    font              : inherit;
    outline           : 0;
}

#search button {
cursor: pointer;
padding-right: 1.5rem;
width: 50px;
height: 50px;
}

#search input {
    width: 100%;
    flex: 1;
    padding: 1rem 2rem;
}

#search input::-moz-placeholder {
    color: #fff;
}

#search input:-ms-input-placeholder {
    color: #fff;
}

#search input::placeholder {
    color: #fff;
}

#search .spinner {
    -webkit-animation: spinner 1s infinite linear;
    animation        : spinner 1s infinite linear;
    display          : none;
    padding          : 0 0.25em;
    color            : #fff;
}

#search.loading button {
    display: none;
}

#search.loading .spinner {
    display: block;
}

@-webkit-keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes spinner {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

input:-internal-autofill-selected {
    background-color: transparent !important
}
/*
Copyright (c) 2021 by Rafaela Lucas
(https: //codepen.io/rafaelavlucas/pen/yZNVNj)
==================================================================================*/

/* swiper */
.swiper-container {
    padding        : 0;
    height         : 100%;
    width          : 100%;
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin-top     : 55px;
    transition     : all 0.3s ease;
    position       : relative;
    overflow       : hidden;
}

.swiper-wrapper {
    height: 550px !important;
}

.swiper-slide {
    width              : 100%;
    display            : flex;
    align-items        : center;
    justify-content    : left;
    transition         : all 0.3s ease;
    background-position: fixed;
}

.swiper-item {
    width              : 80%;
    height             : 100%;
    background-size    : contain;
    background-position: left;
    display            : flex;
    align-items        : center;
    justify-content    : center;
    transition         : all 0.3s ease;
    position           : absolute;
}

.swiper-slide .number {
    width              : auto;
    height             : auto;
    position           : absolute;
    right              : 10px;
    bottom             : -30px;
    font-size          : 120px;
    -webkit-text-stroke: 1px #fff;
    color              : transparent;
    font-weight        : 600;
    font-family        : "IBM Plex Sans", sans-serif;
    opacity            : 0.2;
    z-index            : 2;
}

@media screen and (max-width: 512px) {
    .swiper-slide .number {
        display: none;
    }

    .swiper-item {
        width: 90%;
    }

}

.swiper-item:after {
    content         : "";
    background-color: black;
    position        : absolute;
    width           : 100%;
    height          : inherit;
    bottom          : 0;
    z-index         : 1;
    opacity         : 0.1;
}

.swiper-item:before {
    content : "";
    position: absolute;
    width   : 100%;
    height  : 30%;
    top     : 0;
    z-index : 1;
    opacity : 0.2;
}

/* swiper arrows */
.swiper-arrows {
    width          : 400px;
    height         : 80px;
    position       : absolute;
    display        : flex;
    justify-content: center;
    align-items    : center;
    bottom         : 0px;
    right          : 20%;
}

@media screen and (max-width: 512px) {
    .swiper-arrows {
        right: 10%;
    }
}

.swiper-button-prev,
.swiper-button-next {
    width           : 80px;
    height          : 80px;
    background-image: none;
    display         : flex;
    align-items     : center;
    justify-content : center;
    top             : 0;
    bottom          : 0;
    margin          : 0;
    transition      : all 0.3s ease;
}

.swiper-button-prev {
    right           : 80px;
    left            : auto;
    background-color: rgba(255, 255, 255, 0.8);
}

.swiper-button-next {
    right           : 0px;
    background-color: rgba(255, 255, 255, 0.5);
}

.swiper-button-prev span,
.swiper-button-next span {
    width           : 10px;
    height          : 10px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background-color: transparent;
    position        : absolute;
    border          : solid 2px #666666;
    border-left     : 0;
    border-bottom   : 0;
    transition      : all 0.1s ease;
}

.swiper-button-prev span {
    transform: rotate(-135deg);
    left     : 49%;
}

.swiper-button-next span {
    transform: rotate(45deg);
    right    : 49%;
}

.swiper-button-prev:hover span,
.swiper-button-next:hover span {
    width : 5px;
    height: 5px;
}

.swiper-button-prev:after,
.swiper-button-next:after {
    width           : 0px;
    height          : inherit;
    content         : "";
    position        : absolute;
    background-color: white;
    transition      : all 0.4s ease-in-out;
    z-index         : -1;
    opacity         : 0.8;
}

.swiper-button-prev:after {
    right: 0;
}

.swiper-button-next:after {
    left: 0;
}

.swiper-button-prev:hover:after,
.swiper-button-next:hover:after {
    width: inherit;
}

.swiper-button-disabled {
    opacity: 1 !important;
}

.swiper-button-disabled.swiper-button-prev span,
.swiper-button-disabled.swiper-button-next span {
    opacity: 0.2;
}

/* swiper arrows mobile */
@media screen and (max-width: 512px) {

    .swiper-button-prev,
    .swiper-button-next {
        width : 60px;
        height: 60px;
        bottom: 0;
    }

    .swiper-arrows {
        height: 60px;
    }

    .swiper-button-prev {
        right: 60px;
    }

    .swiper-button-prev span {
        left: 45%;
    }

    .swiper-button-next span {
        right: 45%;
    }
}

/* swiper pagination */
.swiper-pagination {
    height        : 3px;
    display       : flex;
    flex-direction: column;
    height        : 300px;
    width         : 60px !important;
    right         : calc(18% - 60px);
    top           : 15%;
    float         : right;
    position      : absolute;
    left          : auto !important;
}

.swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 10px 0px;
}

.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 5px var(--swiper-pagination-bullet-horizontal-gap, 4px);
}

.swiper-pagination-bullet {
    background-color: #fff;
    opacity         : 1;
    transition      : all 0.5s ease-in-out;
    width           : 10px;
    height          : 3px;
    border-radius   : 0px;
    opacity         : 0.5;
}

.swiper-pagination-bullet:hover {
    width: 50px;
}

.swiper-pagination-bullet-active,
.swiper-pagination-bullet-active:hover {
    width           : 30px;
    transition      : all 0.5s ease-in-out;
    left            : 0;
    background-color: #fff;
    opacity         : 1;
}

/* swiper pagination mobile */
@media screen and (max-width: 512px) {
    .swiper-pagination {
        right: calc(10% - 0px);
    }

    .swiper-pagination-bullet,
    .swiper-pagination-bullet:hover {
        width: 15px;
    }

    .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
        margin: 8px 0px;
    }

    .swiper-pagination-bullet-active,
    .swiper-pagination-bullet-active:hover {
        width: 25px;
    }
}

/* text content */
.slide-text {
    text-align: left;
    color     : #fff;
    opacity   : 1;
    z-index   : 2;
    width     : 40%;
    max-width : 360px;
    padding   : 45px;
    position  : absolute;
    top       : 15%;
    right     : 23%;
}

.slide-text.playText {
    animation: transitionText 2s ease;


}

@keyframes transitionText {
    0% {
        right: -100%;
    }

    100% {
        right: 23%;
    }
}

.slide-text h1 {
    font-size     : 2.5rem;
    letter-spacing: 0.03em;
    margin        : 0;
    padding       : 0;
    font-weight   : 500;
    color         : #fff;
}

.slide-text p {
    font-family            : 'Baloo Bhaijaan 2', 'Noto Sans TC', 'Roboto', sans-serif, cursive;
    margin     : 10px 0 0 0;
    font-size  : 1.7rem;
    font-weight: 700;
}

/* text content mobile */
@media screen and (max-width: 512px) {
    .swiper-wrapper {
        height: 92vh !important;
    }

    .slide-text {
        width: 65%;
        top  : 35%;
        right: 9%;
    }

    .slide-text h1 {
        font-size     : 1.6rem;
        letter-spacing: 0.02em;
    }

    .slide-text p {
        font-size: 1.2rem;
    }

    @keyframes transitionText {
        0% {
            right: -100%;
        }

        100% {
            right: 9%;
        }
    }
}

/* button */
.slide-text .btn {
    font-family     : "IBM Plex Mono", monospace;
    background-color: transparent;
    font-size       : .9rem;
    letter-spacing  : 2px;
    color           : #fff;
    position        : relative;
    transition      : all 0.3s ease-in-out;
    cursor          : pointer;
    margin-top      : 20px;
    border          : 0;
    padding         : 0 15px;
    left            : 0;
}

.slide-text .btn:before {
    content         : "";
    background-color: white;
    width           : 2px;
    height          : 20px;
    position        : absolute;
    z-index         : 2;
    left            : -1px;
    top             : -1px;
    border-radius   : inherit;
    transition      : all 0.3s ease-in-out;
}

.slide-text .btn:after {
    content         : "";
    width           : 0px;
    height          : 0px;
    display         : flex;
    align-items     : center;
    justify-content : center;
    background-color: transparent;
    position        : absolute;
    border          : solid 2px transparent;
    border-left     : 0;
    border-bottom   : 0;
    transform       : rotate(45deg);
    top             : 4px;
    left            : -10px;
    transition      : all 0.3s ease-in-out;
}

.slide-text .btn:hover::before {
    left     : 11px;
    transform: rotate(90deg);
}

.slide-text .btn:hover::after {
    border       : solid 2px white;
    border-left  : 0;
    border-bottom: 0;
    left         : 10px;
    width        : 10px;
    height       : 10px;
    opacity      : 1;
}

.slide-text .btn:hover {
    padding-left: 35px;
}

/* Slider Banner */
.slider-container {
        background: var(--gray-light) ;
    padding        : 0;
    height         : 650px;
    width          : 100%;
    transition     : all 0.3s ease;
    position       : relative;
    overflow       : hidden;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position:bottom center ;
    object-position: bottom center;
    opacity: 0;
    -o-animation: slider 29s infinite;
    animation: slider 29s infinite;
}

.slider-container img{
    -o-object-fit: cover;
    object-fit: cover;
    object-position: bottom center;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-animation:zoomOut 29s infinite ;
    animation: zoomOut 29s infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count:infinite;

}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
            共用   PageContent
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/

.page-container {
    position: relative;
    width: 100%;
    background: var(--gray-light);
    padding: 0;
    transition: all 0.3s ease;
}
.page-title-block {
    width: 100%;
    height: 235px;
    padding: 8rem 3rem 3rem;

}
.page-title-block h6{
    font-size: .875rem;
    color: var(--white);
    letter-spacing: .25rem;
    padding-top: 0.625rem;
}
.page-img-block {
    position: absolute;
    top: 65%;
    right: 0;
    width: 600px;
    z-index: -1;
    opacity: 0;
    -o-animation: slider 29s infinite;
    animation: slider 29s infinite;
    overflow: hidden;
}
.page-img-block img{
    width: 100%;
    height: 250px;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: bottom center;
    object-position: bottom center;
        -o-animation:zoomOut 29s infinite ;
    animation: zoomOut 29s infinite;
    -o-animation-iteration-count: infinite;
    animation-iteration-count:infinite;
}
/* 共用*/
@keyframes slider{
    25%{
        opacity: 1;
    }
    50%{
        opacity: .85;
    }
    75%{
        opacity: .65;
    }
    100%{
        opacity: .45;
    }
}
@keyframes zoomOut{
    100%{
        transform: scale(1.25);
    }
}
/**/
.breadcrumb {
    font-size: .825rem;
    background: transparent;
    padding: 0;
    position: absolute;
    right: 3%;
    bottom: 0;
}
.breadcrumb-item+.breadcrumb-item::before {
    content: "|";
}


/* Accordion */
.accordion {
  max-width: 100%;
  margin: 0 auto;
}
.accordion input{
  display: none;
}
.accordion input + label {
  position: relative;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  font-size: 1em;
  letter-spacing: .1rem;
  padding: 1.75rem 1rem;
  margin-bottom: 0;
  color: var(--gray-dark);
  border-bottom: 1px solid #dedede;
}
.accordion input + label::after {
    position: absolute;
    content: "";
    display: block;
    width: 9rem;
    height: 1px;
    background: var(--gray);
    left: 0;
    bottom: -1px;
}
.accordion label i {
  font-size: 0.925rem;
  position: absolute;
  left: 1rem;
  top: auto;
  color: var(--green-dark);
}
.accordion label i.fa-chevron-down {
  right: 1rem;
  left: auto;
  -webkit-transition: all 0.3s ease-in;
  -moz-transition: all 0.3s ease-in;
 -o-transition: all 0.3s ease-in;
 transition: all 0.3s ease-in;
}
.accordion input:checked + label i.fa-chevron-down{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
 -ms-transform: rotate(180deg);
 -o-transform: rotate(180deg);
 transform: rotate(180deg);
}
.accordion .item-content {
  max-height: 0px;
  overflow: hidden;
  word-wrap: break-word;
  position: relative;
  padding: 0 1rem;
  font-weight: normal;
  font-size: .925rem;
  color: var(--gray-dark);
  transition: all 0.3s ease-in-out;
}
#eventItem1:checked ~ #eventContent1,
#eventItem2:checked ~ #eventContent2,
#eventItem3:checked ~ #eventContent3,
#eventItem4:checked ~ #eventContent4,
#eventItem5:checked ~ #eventContent5,
#eventItem6:checked ~ #eventContent6,
#eventItem7:checked ~ #eventContent7,
#eventItem8:checked ~ #eventContent8 {
    max-height: 300px;
}
.directions {
    word-wrap: break-word;
    margin-bottom: 1.5rem;
}
.accordion .item-content p {
  padding: 10px 0;
  margin: 0;
}
.item-content img {
    width: 100%;
    height: 170px;
    object-position: center center;
    object-fit: cover;
    background: #e8e8e8;
}
.border3px {
    border: 3px solid #dedede;
}
/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
                     new Arrivals
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
.new-product {
    margin-top   : 7rem;
    margin-bottom: 7rem !important;
}
.new-product-block {
    position: relative;
    overflow: hidden;
}
.new-product-block.new-product-block--center {
    margin-top: -75px;
}
.new-product-block.new-product-block--center .new-product-block__pic {
    float: none;
}
.new-product-block.new-product-block--center .new-product-block__text {
    position   : relative;
    top        : 0;
    left       : 0;
    max-width  : 100%;
    padding-top: 22px;
}
.new-product-block.new-product-block--last {
    margin-top: 100px;
}
.new-product-block__pic {
    float: right;
    object-position: center center;
}
.new-product-block__pic figure{
    width: 390px;
    height: 390px;
}
.new-product-block__pic figure img{
  width:100%;
  height: 100%;
}
.new-product-block__text {
    max-width: 300px;
    position : absolute;
    left     : 150px;
    top      : 140px;
}
.new-product-block__text h2 {
    color        : #1a1a1a;
    font-size: 2.3rem;
    font-weight  : 500;
    line-height  : 46px;
    margin-bottom: 10px;
}
.new-product-block__text h4 {
    font-family            : 'Baloo Bhaijaan 2', 'Noto Sans TC', 'Roboto', sans-serif, cursive;
    color         : #212529;
    font-size: 1.5rem;
    font-weight   : 700;
    letter-spacing: 5px;
}
.new-product-block__text span {
    font-family            : 'Baloo Bhaijaan 2', 'Noto Sans TC', 'Roboto', sans-serif, cursive;
    display        : inline-block;
    color          : #1a1a1a;
    font-size      : 1.1rem;
    font-weight    : 700;
    letter-spacing : 4px;
    padding        : 0;
    margin-top: 10px;
    position       : relative;
    text-decoration: none;
}
.new-product-block__text span:after {
    position          : absolute;
    right             : 0;
    bottom            : 0;
    width             : 100%;
    height            : 2px;
    background        : #1a1a1a;
    content           : "";
    -webkit-transition: all, 0.5s;
    -o-transition     : all, 0.5s;
    transition        : all, 0.5s;
}
.new-product-block__text span:before {
    position          : absolute;
    display           : block;
    content           : "";
    color             : var(--green);
    width             : 0;
    height            : 8px;
    border-right      : solid 2px;
    top               : 75%;
    right             : -5px;
    transform-origin  : 0% 0%;
    transform         : rotatez(-45deg);
    opacity           : 0;
    -webkit-transition: all, 0.5s;
    -o-transition     : all, 0.5s;
    transition        : all, 0.5s;
}
.new-product-block:hover .new-product-block__text span:after {
    width     : 50px;
    background: var(--green);
    right     : -10px
}
.new-product-block:hover .new-product-block__text span:before {
    background: var(--green);
    opacity   : 1;
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
               product-content
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/

.carousel {
    margin-bottom: 0;
    padding      : 0 0 30px 0;
}
.carousel-control {
    left         : -12px;
    height       : 40px;
    width        : 40px;
    background   : none repeat scroll 0 0 #222222;
    border       : 4px solid #FFFFFF;
    border-radius: 23px 23px 23px 23px;
    margin-top   : 90px;
}
.carousel-control.right {
    right: -12px;
}
/* reset */
.card {
    border: none
}
.card-body {
    min-height: 105px;
}
/**/
.product-content__item {
    height: 290px;
    background-color: transparent;
    overflow: hidden;
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    background-size  : cover;
    background-position: center center;
        object-position: center center;
}
.product-content__item figure{
    width: 100%;
    height: 290px;

}
.product-content__item figure img {
    width: 100%;
    height: 100%;
}
.product-content {
    padding-top   : 7rem;
    padding-bottom: 7rem !important;
}
.product-content a svg:first-child {
    margin-right: 10px;
}
.product-content a svg:hover {
    opacity: .6;
    -webkit-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all, 0.3s;
}
.product-content__block {
    margin            : 40px 0;
    -webkit-transition: all, 0.3s;
    -o-transition     : all, 0.3s;
    transition        : all, 0.3s;
}
.product-content__block:hover {
    overflow          : hidden;
    margin-bottom     : 40px;
    -webkit-transition: all, 0.3s;
    -o-transition     : all, 0.3s;
    transition        : all, 0.3s;
}

.product-content__block.sale .product-content__block__pic .label {
    color     : #fff;
    background: var(--dark);
}
.product-content__block.sale .product-content__block__text .rating i {
    color: #f7941d;
}
.product-content__block.sale .product-content__block__text .rating i:nth-last-child(1) {
    color: #b7b7b7;
}
.product-content__block:hover .product-content__block__pic .product-content__hover {
    right  : 20px;
    opacity: 1;
}
.product-content__block:hover .product-content__block__text a {
    top       : 22px;
    opacity   : 1;
    visibility: visible;
}
.product-content__block__pic {
position           : relative;
background : transparent;
background-position: center center;
background-size : cover;
background-repeat : no-repeat;
display            : block;
transition         : all .9s cubic-bezier(0.645, 0.045, 0.355, 1);
height             : 100%;
width              : 100%;
}
.product-content__block__pic:hover {
    transform         : scale(1.2);
    -webkit-transition: all, 0.3s;
    -o-transition     : all, 0.3s;
    transition        : all, 0.3s;
}
.img-effct .flash-over-wrap {
    overflow  : hidden;
    position  : absolute;
    width     : 100%;
    height    : 100%;
    top       : 0;
    margin-top: -10px;
}
.img-effct .flash-over {
    display   : block;
    position  : absolute;
    width     : 100%;
    height    : 200%;
    background: rgba(255, 255, 255, .2);
    top       : 0;
    filter    : blur(5px);
    transform : rotate(45deg) translate(-450%, 0);
    transition: all .9s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.img-effct:hover .flash-over {
    transform : rotate(45deg) translate(450%, 0);
    transition: all 1s cubic-bezier(0.645, 0.045, 0.355, 1);
}
.product-content__block__pic .label {
    color         : var(--dark);
    font-size     : 11px;
    font-weight   : 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    display       : inline-block;
    padding       : 4px 15px 2px;
    background    : #fff;
    position      : absolute;
    left          : 0;
    top           : 20px;
}
.product-content__block__pic .product-content__hover {
    position          : absolute;
    right             : -200px;
    top               : 20px;
    -webkit-transition: all, 0.8s;
    -o-transition     : all, 0.8s;
    transition        : all, 0.8s;
}
.product-content__block__pic .product-content__hover li {
    list-style   : none;
    margin-bottom: 10px;
    position     : relative;
}
.product-content__block__pic .product-content__hover li:hover span {
    opacity   : 1;
    visibility: visible;
}
.product-content__block__pic .product-content__hover li span {
    color             : #fff;
    background        : var(--dark);
    display           : inline-block;
    padding           : 4px 10px;
    font-size         : 12px;
    position          : absolute;
    left              : -78px;
    top               : 5px;
    z-index           : 1;
    opacity           : 0;
    visibility        : hidden;
    -webkit-transition: all, 0.3s;
    -o-transition     : all, 0.3s;
    transition        : all, 0.3s;
}
.product-content__block__pic .product-content__hover li span:after {
    position         : absolute;
    right            : -2px;
    top              : 5px;
    height           : 15px;
    width            : 15px;
    background       : var(--dark);
    content          : "";
    -webkit-transform: rotate(45deg);
    -ms-transform    : rotate(45deg);
    transform        : rotate(45deg);
    z-index          : -1;
}
.product-content__block__pic .product-content__hover li img {
    background: #fff;
    padding   : 10px;
    display   : inline-block;
}
.product-content__block__text {
    padding-top: 10px;
    position   : relative;
}
.result__block__text {
    padding-top: 0;
    min-height: 70px;
}
.product-content__block h5 span {
    color      : var(--green);
    font-size  : 1.3rem;
    font-weight: 600;
    margin     : 0 .3rem;
}
.product-content__block__text h6 {
    color        : var(--dark);
    font-size    : 1rem;
    font-weight  : 600;
    margin-top   : 5px;
    margin-bottom: 15px;
}
.product-content__block__text h5 {
    color      : #0d0d0d;
    font-size  : 1.3rem;
    font-weight: 600;
    line-height: 1.3rem;
}
.product-content__block__text h5 i {
padding-right: 15px;
}
.product-content__block__text span {
    color    : #b7b7b7;
    font-size: .825rem;
}
/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
            Product Detail
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
.s_product_inner {
    overflow: hidden;
    padding-top: 6rem;
}
.product__details__pic {
    text-align   : center;
    padding      : 0;
    margin-top: 1.5rem;
    margin-bottom: 2rem;
}
.product__details__pic .tab-content {
    text-align: left;
}
.tab-content>.tab-pane.active {
    width: calc(100% / 1.25);
}
.product__details__pic .nav-tabs {
    border-bottom   : none;
    width        : 105px;
    float:right;
}
.product__details__pic .nav-tabs .nav-item {
    margin-bottom: 10px;
}
.product__details__pic .nav-tabs .nav-item:last-child {
    margin-bottom: 0;
}
.product__details__pic .nav-tabs .nav-item:nth-child(6),
.product__details__pic .nav-tabs .nav-item:nth-child(7),
.product__details__pic .nav-tabs .nav-item:nth-child(8)  {
    display: none;
}
.product__details__pic .nav-tabs .nav-item .nav-link {
    padding: 0;
    display: block;
}
.product__details__pic .nav-tabs .nav-item .nav-link .product__thumb__pic {
    height           : 100px;
    width            : 100px;
    display          : -webkit-box;
    display          : -ms-flexbox;
    display          : flex;
    -webkit-box-align: center;
    -ms-flex-align   : center;
    align-items      : center;
    -webkit-box-pack : center;
    -ms-flex-pack    : center;
    justify-content  : center;
    background-size  : cover;
    background-position: center center;
}
.product__details__pic .nav-tabs .nav-item .nav-link .product__thumb__pic i {
    height       : 56px;
    width        : 56px;
    border       : 4px solid #ffffff;
    border-radius: 50%;
    font-size    : 20px;
    color        : #ffffff;
    line-height  : 48px;
    display      : inline-block;
    text-align   : center;
}
.product__details__pic .nav-tabs .nav-item.show .nav-link,
.product__details__pic .nav-tabs .nav-link.active {
    background-color: transparent;
    border-color    : transparent;
}
.product__details__breadcrumb {
    margin-bottom: 30px;
}
.product__details__breadcrumb a {
    font-size   : 15px;
    color       : var(--dark);
    margin-right: 18px;
    display     : inline-block;
    position    : relative;
}
.product__details__breadcrumb a:after {
    position   : absolute;
    right      : -14px;
    top        : 0;
    content    : "";
    font-family: "FontAwesome";
}
.product__details__breadcrumb span {
    font-size: 15px;
    color    : #b7b7b7;
    display  : inline-block;
}
.product__details__pic__item {
    position: relative;
    aspect-ratio: 9/16;
    height  : 600px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.product__details__pic__item a {
    height       : 56px;
    width        : 56px;
    border       : 4px solid #ffffff;
    border-radius: 50%;
    font-size    : 20px;
    color        : #ffffff;
    line-height  : 48px;
    text-align   : center;
    display      : inline-block;
    position     : absolute;
    left         : 50%;
    top          : 50%;
    margin-top   : -28px;
    margin-left  : -28px;
}
.cat_product_area .latest_product_inner {
    padding-top: 30px;
}
.cat_product_area .latest_product_inner .single-product {
    margin-bottom: 50px;
}

.left_sidebar_area .widgets_inner ul li {
    display        : flex;
    justify-content: space-between;
}
.left_sidebar_area .widgets_inner ul li:hover {
    color: #ff3368;
}
.left_sidebar_area .widgets_inner ul li:hover a {
    color: #ff3368;
}
.left_widgets {
    margin-bottom: 30px;
}
.left_widgets:last-child {
    margin-bottom: 0px;
}
.widgets_inner {
    padding-left  : 30px;
    padding-right : 30px;
    padding-top   : 0px;
    padding-bottom: 15px;
}
@media (max-width: 991px) {
    .widgets_inner {
        padding-left : 0;
        padding-right: 0;
    }
}

.l_w_title {
    padding-left : 30px;
    padding-right: 30px;
}
@media (max-width: 991px) {
    .l_w_title {
        padding-left : 0;
        padding-right: 0;
    }
}
.l_w_title h3 {
    margin-bottom: 20px;
    margin-top   : 20px;
    font-size    : 18px;
    color        : #2a2a2a;
    font-weight  : 500;
    line-height  : 40px;
    position     : relative;
}
.p_filter_widgets .widgets_inner {
    border-bottom: 1px solid #eeeeee;
}
.p_filter_widgets .widgets_inner:last-child {
    border-bottom: 0px;
}
.p_filter_widgets .list {
    border-top : 1px solid #ddd;
    padding-top: 25px;
    margin-top : 25px;
}
.p_filter_widgets .list:first-child {
    padding-top: 0;
    margin-top : 0;
    border-top : 0px solid transparent;
}
.p_filter_widgets .list li {
    margin-bottom: 18px;
}

.p_filter_widgets .list li a {
    font-size  : 14px;
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    color      : #797979;
    position   : relative;
}

.p_filter_widgets .list li.active a:before,
.p_filter_widgets .list li:hover a:before {
    background  : #ff3368;
    border-color: #ff3368;
}

.p_filter_widgets .list li:last-child {
    margin-bottom: 0px;
}

.product_top_bar {
    clear  : both;
    display: flex;
    padding: 10px 0;
}

@media (max-width: 576px) {
    .product_top_bar {
        display: block !important;
    }
}
.product_top_bar .left_dorp .sorting {
    display      : inline-block;
    clear        : none;
    border       : 1px solid #eeeeee;
    border-radius: 0px;
    height       : 40px;
    width        : 210px;
    padding-left : 20px;
}
.product_top_bar .left_dorp .sorting span {
    font-size  : 14px;
    font-family: "Poppins", sans-serif;
    color      : #555555;
}
.product_top_bar .left_dorp .sorting .list {
    width        : 100%;
    border-radius: 0px;
}
.product_top_bar .left_dorp .sorting .list li {
    font-size  : 14px;
    font-family: "Poppins", sans-serif;
    color      : #555555;
}
.product_top_bar .left_dorp .sorting:after {
    content   : "\f0d7";
    font      : normal normal normal 14px/1 FontAwesome;
    transform : rotate(0);
    border    : none;
    color     : #555555;
    margin-top: -6px;
    right     : 20px;
}
.product_top_bar .left_dorp .show {
    clear        : none;
    display      : inline-block;
    clear        : none;
    border       : 1px solid #eeeeee;
    border-radius: 0px;
    height       : 40px;
    width        : 120px;
    padding-left : 20px;
    margin-left  : 10px;
}
.product_top_bar .left_dorp .show span {
    font-size  : 14px;
    font-family: "Poppins", sans-serif;
    color      : #555555;
}
.product_top_bar .left_dorp .show .list {
    width        : 100%;
    border-radius: 0px;
}
.product_top_bar .left_dorp .show .list li {
    font-size  : 14px;
    font-family: "Poppins", sans-serif;
    color      : #555555;
}
.product_top_bar .left_dorp .show:after {
    content   : "\f0d7";
    font      : normal normal normal 14px/1 FontAwesome;
    transform : rotate(0);
    border    : none;
    color     : #555555;
    margin-top: -6px;
    right     : 20px;
}
@media (max-width: 576px) {
    .product_top_bar .single_product_menu {
        width        : 50%;
        float        : left;
        margin-bottom: 20px;
    }
}
.product_top_bar .single_product_menu p {
    color      : #020202;
    font-weight: 500;
}
@media (max-width: 576px) {
    .product_top_bar .single_product_menu p {
        font-size  : 13px;
        line-height: 13px;
    }
}
.product_top_bar .single_product_menu p span {
    color: #ff3368;
}
.product_top_bar .single_product_menu h5 {
    font-size     : 13px;
    font-weight   : 500;
    text-transform: capitalize;
    margin-bottom : 0;
}
.product_top_bar .single_product_menu .nice-select {
    height        : 0;
    border        : 0px;
    line-height   : 15px;
    font-weight   : 300;
    text-transform: capitalize;
}
.product_top_bar .single_product_menu .nice-select:after {
    margin-top   : 0;
    border-bottom: 1px solid #999;
    border-right : 1px solid #999;
    right        : 0px;
}
.product_top_bar .single_product_menu .top_pageniation {
    line-height: 15px;
}
.product_top_bar .single_product_menu .top_pageniation ul {
    margin-left: 20px;
}
.product_top_bar .single_product_menu .top_pageniation ul li {
    display    : inline-block;
    margin-left: 10px;
}
.product_top_bar .single_product_menu .input-group {
    width: 150px;
}
.product_top_bar .single_product_menu .input-group .form-control {
    border        : 0px solid transparent;
    border-bottom : 1px solid #ddd;
    border-radius : 0;
    text-align    : center;
    text-transform: capitalize;
}
.product_top_bar .single_product_menu .input-group .input-group-text {
    background-color: transparent;
    border          : 0px solid transparent;
    border-bottom   : 1px solid #ddd;
}
.most_p_withoutbox {
    padding-bottom: 120px;
}
.price_value input {
    border    : 0px;
    text-align: center;
    max-width : 30px;
}
.price_value span {
    margin: 5px 5px 0;
}
.irs-to,
.irs-from,
.irs-max,
.irs-min {
    display: none;
}
.price_rangs_aside .l_w_title h3 {
    line-height  : 20px;
    margin-bottom: 0px;
}
.irs-bar {
    height       : 6px;
    top          : 33px;
    border-top   : 1px solid #ff3368;
    border-bottom: 1px solid #ff3368;
    background   : #ff3368;
    background   : linear-gradient(to top, #ff3368 0%, #ff3368 100%);
}
.irs-line {
    height            : 6px;
    top               : 33px;
    background        : #e8eff1;
    background        : linear-gradient(to bottom, #e8eff1 -50%, #e8eff1 150%);
    border            : 1px solid #e8eff1;
    border-radius     : 16px;
    -moz-border-radius: 16px;
}
.irs-slider {
    height          : 15px;
    width           : 15px;
    border          : 1px solid #ff3368;
    background-color: #ff3368;
    background      : linear-gradient(to bottom, #ff3368 0%, #ff3368 20%, #ff3368 100%);
    top             : 28px;
    box-shadow      : none;
}
/*  */
.s_product_img .carousel {
    position: relative;
}
.s_product_img .carousel .carousel-indicators {
    margin: 0px;
    right : 20px;
    width : auto;
    left  : auto;
    bottom: 30px;
}
.s_product_img .carousel .carousel-indicators li {
    height      : 60px;
    width       : 60px;
    background  : transparent;
    text-indent : 0;
    margin-right: 10px;
    position    : relative;
}
.s_product_img .carousel .carousel-indicators li:after {
    display: none;
}
.s_product_img .carousel .carousel-indicators li:before {
    content   : "";
    background: rgba(197, 50, 45, 0.8);
    position  : absolute;
    left      : 0px;
    top       : 0px;
    width     : 100%;
    height    : 100%;
    opacity   : 0;
}
.s_product_img .carousel .carousel-indicators li.active:before {
    opacity: 1;
}
@media (max-width: 576px) {
    .s_product_text {
        margin-top: 30px;
    }
        .icon-area .icon-title::after {
        width: 65% !important;
    }
}
.s_product_text h5 {
    font-weight   : 700;
    font-size     : 1.3rem;
    text-transform: capitalize;
    margin-bottom : 35px;
}
.s_product_text a h5:hover {
    color: var(--info);
}

@media (max-width: 576px) {

    .s_product_text h5 {
        margin-bottom: 15px;
    }
}
.s_product_text {
    padding-left: 0;
    margin-top: 1.5rem;
}
.s_product_text h5 span {
    margin: 0 10px;
}
.s_product_text i{
    padding-right: 15px;
}
.s_product_text h3 {
    font-size    : 1.7rem;
    font-weight  : 700;
    color        : #2a2a2a;
    margin-bottom: 10px;
}
.s_product_text h2 {
    font-size    : 24px;
    font-weight  : bold;
    color        : #ff3368;
    margin-bottom: 15px;
}
.s_product_text .list li {
    margin-bottom: 5px;
    display: inline-block;
    margin-right: .5rem;
    margin-bottom: 1rem;
}
.s_product_text .list li a {
    font-size  : 14px;
    font-family: "Poppins", sans-serif;
    font-weight: normal;
    color      : #555555;
}
.s_product_text .list li a span {
    width  : 90px;
    display: inline-block;
}
.s_product_text .list li a span:hover {
    color: #555;
}
.s_product_text .list li a.active {
    color: #ff3368;
}
.s_product_text .list li a.active span {
    color: #555;
}
.s_product_text .list li:last-child {
    margin-bottom: 0px;
}
.icon-area .list {
    margin-top  : 1rem;
    display: flex;
    justify-content: flex-start;
    align-items: baseline;

}
.list li .icon-set img {
    height     : auto;
    width      : 80%;
}
.icon-area {
    margin  : 1rem 0 1rem;
    position: relative;
    transition      : all .3s ease-out;
}
.icon-area .icon-title {
    background-color: #fff;
    padding         : 3px 5px;
    margin-top: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
}
.icon-area .icon-title::after {
    content         : "";
    display         : flex;
    width           : 100%;
    top:0;
    right           : 0;
    height          : 2px;
    margin-left: 20px;
    background-color: #f2f2f2;
}
.icon-bg-flower {
    width              : 75px;
    height             : 75px;
    background-size    : cover;
    background-repeat  : no-repeat;
    background-position: center center;
    position           : relative;
}
.icon-color-flower {
    width              : 45px;
    height             : 45px;
    border-radius: 45px;
    position           : relative;
    box-shadow: 0 0 3px #b9b9b9 !important;
}
.i-red { background-color: var(--red);}
.i-green { background-color: var(--green);}
.i-orange { background-color: var(--orange);}
.i-yellow { background-color: var(--yellow);}
.i-blue { background-color: var(--blue);}
.i-white { background-color: var(--white);}
.i-purple { background-color: var(--purple);}
.i-pink { background-color: var(--pink);}
.i-black { background-color: var(--dark);}
.icon-flower {
    display : flex;
    position: absolute;
    width   : 100%;
    padding : 12px 9px 0;
}
/**/
.s_product_text p {
    padding-top: 20px;
    border-top : 1px dotted #d5d5d5;
    margin     : 20px 0;
}
.s_product_text .card_area .main_btn {
    line-height   : 38px;
    padding       : 0px 38px;
    text-transform: uppercase;
    margin-right  : 10px;
}
.s_product_text .card_area .icon_btn {
    margin-right : 10px;
    background   : #f6f6f6;
    border-radius: 3px;
    color        : #2a2a2a;
    display      : inline-block;
    line-height  : 40px;
    text-align   : center;
    padding      : 0px 13px;
    font-size    : 14px;
}
.s_product_text .card_area .icon_btn:hover {
    background: #fff;
    box-shadow: -14.142px 14.142px 20px 0px rgba(0, 0, 0, 0.1);
}
.cart_area .product_count {
    display      : inline-block;
    position     : relative;
    margin-bottom: 24px;
    overflow     : hidden;
}
.cart_area .product_count input {
    width        : 76px;
    border       : 1px solid #eeeeee;
    border-radius: 3px;
    padding-left : 10px;
}
.cart_area .product_count .input-number-increment {
    position   : absolute;
    right      : 0;
    top        : -7px;
    padding    : 7px;
    border-left: 1px solid #dddddd;
    display    : inline-block;
}
.cart_area .product_count .input-number-increment:after {
    position        : absolute;
    content         : "";
    left            : 0;
    bottom          : 7px;
    width           : 100%;
    height          : 1px;
    background-color: #dddddd;
}
.cart_area .product_count .input-number-decrement {
    position   : absolute;
    right      : 0;
    bottom     : -9px;
    padding    : 7px;
    border-left: 1px solid #dddddd;
    display    : inline-block;
}
@media (max-width: 576px) {

    .cart_area .media {
        display: block;
    }
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
    .cart_area .media {
        display: block;
    }
    .new-product-block__pic figure{
        width: 450px;
        height: 450px;
    }
}
.product_description_area {
    padding-bottom: 120px;
    margin-top    : 60px;
}
@media (max-width: 991px) {
    .product_description_area {
        margin-top    : 0px;
        padding-bottom: 70px;
    }
}

.product_description_area .nav.nav-tabs {
    display: block;
    border : none;
    padding: 10px 0px;
}
.product_description_area .nav.nav-tabs li {
    display     : inline-block;
    margin-right: 7px;
}
.product_description_area .nav.nav-tabs li:last-child {
    margin-right: 0px;
}
.product_description_area .nav.nav-tabs li a {
    padding      : 0px;
    border       : none;
    line-height  : 38px;
    background   : #fff;
    border       : 1px solid #eeeeee;
    border-radius: 0px;
    padding      : 0px 30px;
    color        : #2a2a2a;
    font-size    : 13px;
    font-weight  : normal;
    border-radius: 50px;
}
@media (max-width: 991px) {
    .product_description_area .nav.nav-tabs li a {
        padding      : 0px 20px;
        margin-bottom: 10px;
    }
}
.product_description_area .nav.nav-tabs li a.active {
    background  : #ff3368;
    color       : #fff;
    border-color: #ff3368;
    box-shadow  : -1.717px 8.835px 29.76px 2.24px rgba(255, 51, 104, 0.18);
}
.product_description_area .tab-content {
    padding-top: 30px;
}
.product_description_area .tab-content .total_rate .box_total {
    background    : #ecfdff;
    text-align    : center;
    padding-top   : 20px;
    padding-bottom: 20px;
    border        : 1px solid #dddddd;
}
.product_description_area .tab-content .total_rate .box_total h4 {
    color      : #ff3368;
    font-size  : 48px;
    font-weight: bold;
}
.product_description_area .tab-content .total_rate .box_total h5 {
    color        : #2a2a2a;
    margin-bottom: 0px;
    font-size    : 24px;
}
.product_description_area .tab-content .total_rate .box_total h6 {
    color        : #2a2a2a;
    margin-bottom: 0px;
    font-size    : 14px;
    color        : #797979;
    font-weight  : normal;
}
.product_description_area .tab-content .total_rate .rating_list {
    margin-bottom: 30px;
}
.product_description_area .tab-content .total_rate .rating_list h3 {
    font-size    : 18px;
    color        : #2a2a2a;
    font-family  : "Poppins", sans-serif;
    font-weight  : 700;
    margin-bottom: 10px;
}
.product_description_area .tab-content .total_rate .rating_list .list li a {
    font-size: 14px;
    color    : #797979;
}
.product_description_area .tab-content .total_rate .rating_list .list li a i {
    color: #fbd600;
}
.product_description_area .tab-content .total_rate .rating_list .list li:nth-child a i:last-child {
    color: #eeeeee;
}
.product_description_area .tab-content .table {
    margin-bottom: 0px;
}
.product_description_area .tab-content .table tbody tr td {
    padding-left  : 65px;
    padding-right : 65px;
    padding-top   : 14px;
    padding-bottom: 14px;
}
.product_description_area .tab-content .table tbody tr td h5 {
    font-size    : 14px;
    font-family  : "Poppins", sans-serif;
    font-weight  : normal;
    color        : #797979;
    margin-bottom: 0px;
    white-space  : nowrap;
}
.product_description_area .tab-content .table tbody tr:first-child td {
    border-top: 0px;
}
.review_item {
    margin-bottom: 35px;
}
.review_item:last-child {
    margin-bottom: 0px;
}
.review_item p {
    color: #797979;
}
.review_item .media {
    position: relative;
}
.review_item .media .d-flex {
    padding-right: 15px;
}
.review_item .media .media-body {
    vertical-align: middle;
    align-self    : center;
}
.review_item .media .media-body h4 {
    margin-bottom: 0px;
    font-size    : 14px;
    color        : #2a2a2a;
    font-family  : "Poppins", sans-serif;
    margin-bottom: 8px;
}

.review_item .media .media-body i {
    color: #fbd600;
}
.review_item .media .media-body h5 {
    font-size  : 13px;
    font-weight: normal;
    color      : #797979;
}
.review_item .media .media-body .reply_btn {
    border       : 1px solid #e0e0e0;
    padding      : 0px 28px;
    display      : inline-block;
    line-height  : 32px;
    border-radius: 16px;
    font-size    : 14px;
    font-family  : "Poppins", sans-serif;
    color        : #2a2a2a;
    position     : absolute;
    right        : 0px;
    top          : 14px;
}
.review_item .media .media-body .reply_btn:hover {
    background  : #ff3368;
    border-color: #ff3368;
    color       : #fff;
}
.review_item p {
    padding-top  : 10px;
    margin-bottom: 0px;
}
.review_item.reply {
    padding-left: 28px;
}
.review_box h4 {
    font-size    : 24px;
    color        : #2a2a2a;
    margin-bottom: 20px;
    font-weight  : 700;
}
.review_box p {
    margin-bottom: 0px;
    display      : inline-block;
    font-weight  : 500;
}
.review_box .list {
    display      : inline-block;
    padding-left : 10px;
    padding-right: 10px;
}
.review_box .list li {
    display: inline-block;
}
.review_box .list li a {
    display: inline-block;
    color  : #fbd600;
}
.review_box .form-control {
    height       : 50px;
    border-radius: 0;
}
.review_box ::placeholder {
    font-size: 14px;
}
.review_box .btn_3 {
    padding: 13px 39px;
}
.review_box .contact_form {
    margin-top: 15px;
}
/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
            Detail - use - Cookie
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
.cookiealert, .searchalert {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1050;
    transform: translate(0, 0);
    padding-top: 0;
    bottom: 0;
    left: 0;
    margin: 0 !important;
    opacity: 0;
    visibility: hidden;
    border-radius: 0;
    transition: all 500ms ease-out;
    color: #ecf0f1;
}
.cookiealert.show {
    background: none;
}
.cookiealert:after{
    content: '';
    width: 100%;
    height: 100%;
    border: dashed var(--danger);
    border-top-width: 0;
    border-radius: .75rem;
    position: absolute;
    left: -10px;
    bottom: 0px;
    z-index: 999;

}
.searchalert.show{
    width: 100%;
    transform: translate(0 , -2rem);
    padding: 0 2.75rem;
    opacity: 1;
    visibility: visible;
    transition-delay: 1000ms;
}
.btn.acceptcookies, .btn.searchalertcookies {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 3rem;
    line-height: 1;
    color: var(--danger);
    padding: 0;
    margin: 0;
    top: -3rem;
    left: -1rem;

    /*animation*/
    animation: shakeOver 3.25s ease infinite;
    transform-origin: 50% 50%;
}
.cookiealert .btn.acceptcookies {
    top: 0;
}
.searchalert .btn.searchalertcookies {
    position: relative;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 3rem;
    line-height: 1.15;
    color: var(--danger);
    left: 0;
    top: 0;
}
@keyframes shakeOver {
        0% { transform:translate(0,0) }
        1.5% { transform:translate(5px,0) }
        3.5% { transform:translate(0,0) }
        5.5% { transform:translate(5px,0) }
        7.5% { transform:translate(0,0) }
        8.5% { transform:translate(5px,0) }
        10.5% { transform:translate(0,0) }
        100% { transform:translate(0,0) }
    }
    .instructions-box {
        margin-top: -5rem;
        margin-left: 0
    }
    .searchalert .instructions-box {
        margin: 0;
        width: 100%;
        height: auto;
        border: none;
        border-radius: 0;
    }
    .searchalert .instructions-box:after{
        content: '';
        display: flex;
        width: 0;
        height: 0;
        border: 15px solid transparent;
        border-top-color: var(--danger);
        position: fixed;
        right: 0;
        bottom: 0px;
        z-index: 999;
        transform: translate(-50%, 55px);
    }
    .__intru-text{
        position: absolute;
        font-size: .925rem;
        font-weight: 600;
        top: -2rem;
        right: 0;
        width: 95%;
        background: var(--danger);
        color: var(--white);
        border-radius: 1rem;
        padding: 1.25rem 1rem;
    }
    .cookiealert .__intru-text{
        width: 90%;
        top: 0rem;
    }
/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
                       trend
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
.content-wrap {
    position    : relative;
    padding     : 1rem .3rem;
    margin      : 1rem -0.75rem 0;
    border-width: 1px 0 0;
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
                    detail-content
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
.detail-content__text {
    margin-top   : 2rem;
    margin-bottom: 3rem !important;
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
                    Index - content
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
#tfda-about {
    margin-top: -7rem;
    margin-bottom: 5rem;
}
.about-block {
    position: relative;
    overflow: hidden;
}
.about-block.about-block--center {
    padding: 5rem;
    margin-bottom: -1rem;
}
.about-block.about-block--center .about-block__pic {
    float: none;
}
.about-block.about-block--center .about-block__text {
    position   : relative;
    top        : 0;
    left       : 0;
    max-width  : 100%;
}
.about-block.about-block--center .about-block__text a {
    color: #fff;
}
.about-block__pic {
    object-position: center center;
    display: flex;
    align-items: end;
    justify-content: end;
    height: 345px;
}
.about-block__pic figure {
    width: 450px;
    height: 250px;
}
.about-block__pic figure img {
  width:100%;
  height: 100%;
}
.about-block__text {
    position : absolute;
}
.about-block__text h2 {
    color        : #1a1a1a;
    font-size: 2.3rem;
    font-weight  : 500;
    line-height  : 46px;
    margin-bottom: 10px;
}
.about-block__text h4 {
    font-family            : 'Baloo Bhaijaan 2', 'Noto Sans TC', 'Roboto', sans-serif, cursive;
    color         : #212529;
    font-size: 1.5rem;
    font-weight   : 700;
    letter-spacing: 5px;
    margin-bottom: 2rem;
}
.about-block__text .more-link span:after {
    background        : var(--white);

}
/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
            About Page
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
#about {
     margin-top: 10rem;
     margin-bottom: 7rem;
}
.about-content .line {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 6rem 0;
    border-bottom: 1px solid #dedede;
}
.about-content .line:last-child {
    border-bottom: none;
}
.about-content .line:last-child::after {
    background: transparent;
}
.about-content .line::after {
    position: absolute;
    content: "";
    display: block;
    width: 10rem;
    height: 1px;
    background: var(--gray);
    left: 0;
    bottom: -1px;
}
.about-content .line .flex-left {
    flex-shrink: 0;
    width: 18rem;
    font-size: 3.3rem;
    font-weight: 700;
    line-height: 1.38;
    letter-spacing: -0.02em;
}
.about-content .line .flex-right {
    flex-grow: 1;
    max-width: 82rem;
}
.about-content .line .flex-right h4{
    position: relative;
    margin-bottom: 2.3rem;

}
.about-content .line .flex-right h4::after {
    position: absolute;
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background: var(--cyan);
    left: 0;
    bottom: -20px;
}
.about-content .line .flex-full {
    flex-grow: 1;
    max-width: 92rem;
    margin-left: 8rem;
    word-break: break-all
}
.about-content .line .flex-full h4{
    position: relative;
    margin-bottom: 2.3rem;

}
.about-content .line .flex-full h4::after {
    position: absolute;
    content: "";
    display: block;
    width: 10px;
    height: 1px;
    background: var(--cyan);
    left: 0;
    bottom: -20px;
}
.about-content .line dt{
    margin-bottom: .5rem;
}
.list-style {
    list-style: square;
    padding-left: 1rem;
}
.list-style li{
    font-size: .925rem;
    line-height: 1.7;
    word-break: break-word;
    white-space: pre-wrap;
}
@media only screen and (max-width: 1023px){
    .about-content .line {
        display: block;
        padding: 3rem 0 3.5rem;
    }
    .about-content .line .flex-left {
        width: auto;
        margin-bottom: 1rem;
        font-size: 2.5rem;
    }
    .about-content .line .flex-right, .about-content .line .flex-full {
        max-width: none;
    }
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
            About TFDA TBOS TPA style
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
.timeline-wrap {
   width: 100%;
   padding: 20px 0;
   position: relative;
   overflow: hidden;
}
.timeline-wrap:before {
   content: '';
   position: absolute;
   top: 45px;
   left: 13px;
   margin-left: -1px;
   width: 1px;
   height: 100%;
   background: var(--gray-light);
   z-index: 1
}
.timeline-card {
   width: -webkit-calc(90% + 8px);
   width: -moz-calc(90% + 8px);
   width: calc(90% + 8px);
   display: -webkit-box;
   display: -webkit-flex;
   display: -moz-box;
   display: flex;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -moz-box-pack: justify;
   justify-content: space-between;
   clear: both;
   margin-bottom: 25px;
}
.timeline-card-left {
    direction: ltr;
}
.dot {
   width: 11px;
   height: 11px;
   border-radius: 50%;
   border: 1px solid var(--gray-light);
   background: var(--gray-200);
   margin-top: 15px;
   z-index: 9999;
   text-align:center;
   position: relative;
   left:7px;
}
.timeline-content {
   width: 95%;
   padding: 0 15px;
   color: var(--gray)
}
.timeline-content h5 {
   margin-top: 8px;
   margin-bottom: 5px;
   font-size: 1.2rem;
   font-weight: 500
}
.timeline-content span {
   font-size: .9rem;
   color: var(--gray-200);
}

.member-block {
    width: 100%;
    max-height: 550px;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    margin-bottom: 10px;
    border-radius: .5rem;
    overflow: hidden;
    transition: all 250ms ease-in;
}
.member-block img {
    width: 100%;
    height: auto;
    object-position: center center;
    object-fit: cover;
}
.member-block-round {
    width: 100%;
    max-height: 140px;
    display: flex;
    justify-content: center;
    background-size: cover;
    background-position: center center;
    margin-bottom: 10px;
    overflow: hidden;
    transition: all 250ms ease-in;
}
.member-block-round img {
    width: 140px;
    height: 140px;
    object-position: center center;
    object-fit: cover;
}
.backto {
    top: 23rem;
    left: 2.5rem;
    position: absolute;
}
.backto span {
    color: #1a1a1a;
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 3px;
    padding: 0;
    margin-top: 10px;
    position: relative;
    text-decoration: none;
}
.backto span:before {
    position: absolute;
    display: block;
    content: "";
    color: var(--green);
    width: 0;
    height: 8px;
    border-right: solid 2px;
    top: 85%;
    left: -5px;
    transform-origin: 0% 0%;
    transform: rotatez(45deg);
    opacity: 0;
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
}
.backto span:after {
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background: #1a1a1a;
    content: "";
    -webkit-transition: all, 0.5s;
    -o-transition: all, 0.5s;
    transition: all, 0.5s;
}
.backto span:hover:after {
    width     : 50px;
    background: var(--green);
    left     : -10px
}
.backto span:hover:before {
    background: var(--green);
    opacity   : 1;
}
/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
            moreinfo style
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
.more-link span {
    font-family    : 'Baloo Bhaijaan 2', 'Noto Sans TC', 'Roboto', sans-serif, cursive;
    display        : inline-block;
    color          : #1a1a1a;
    font-size      : .875rem;
    font-weight    : 700;
    letter-spacing : 4px;
    padding        : 0;
    margin-top: 10px;
    position       : relative;
    text-decoration: none;
}
.more-link span:after {
    position          : absolute;
    right             : 0;
    bottom            : 0;
    width             : 100%;
    height            : 2px;
    background        : var(--gray-dark);
    content           : "";
    -webkit-transition: all, 0.5s;
    -o-transition     : all, 0.5s;
    transition        : all, 0.5s;
}
.more-link span.text-white:after {
    background        : var(--white);
}
.more-link span:before {
    position          : absolute;
    display           : block;
    content           : "";
    color             : var(--green);
    width             : 0;
    height            : 8px;
    border-right      : solid 2px;
    top               : 75%;
    right             : -5px;
    transform-origin  : 0% 0%;
    transform         : rotatez(-45deg);
    opacity           : 0;
    -webkit-transition: all, 0.5s;
    -o-transition     : all, 0.5s;
    transition        : all, 0.5s;
}
a:hover .more-link span:after {
    width     : 50px;
    background: var(--green);
    right     : -10px
}
a:hover .more-link span:before {
    background: var(--green);
    opacity   : 1;
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
            Event-content
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
#tfda-events {
    margin-bottom: 5rem;
    margin-top: 5rem;
}
#events {
    margin-top: 10rem;
    margin-bottom: 7rem;
}
.events-block {
    background: var(--dark);
    width: 100%;
    display: block;
    float: left;
    position: relative;
    box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
    transition: all 250ms ease-in;
    min-height: 200px;
    background-size: cover;
    background-position: center center;
    margin-bottom: 30px;
    overflow: hidden;
}
.events-block .content-overlay {
  background: rgba(0,0,0,0.625);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.events-block:hover .content-overlay {
  opacity: 1;
}
.events-content {
  color: #fff;
  height: 3.25rem;
  font-size: .925rem;
  background: rgba(0,0,0,0.625);
  text-align: center;
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  height: 25%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  flex-direction: column;
    -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.events-block:active .events-content,
.events-block:hover .events-content{
  opacity: 0;
  transform: translateX(0 ,0);
  -webkit-transition: all 0.3s ease-in-out 0s;
  -moz-transition: all 0.3s ease-in-out 0s;
  transition: all 0.3s ease-in-out 0s;
}
.events-block:hover .events-content{
  height: 100%;
  padding: 2.5rem 0;
  opacity: 1;
  background: rgba(0,0,0,0.625);
}
.events-block:hover .events-content p{
  opacity: 1;
}
.events-content h5 {
  color: #fff;
  font-size: .925rem;
  font-weight: 500;
  padding: 1rem 0 .5rem;
}
.events-content p {
  color: #fff;
  font-size: 0.825rem;
  opacity: 0;
  margin-bottom: 0.5rem;
}
.events-block img {
    width: 100%;
    height: 200px;
    object-position: center center;
    object-fit: cover;
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
            department-content
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/

#tfda-department {
    margin-bottom: 9rem;
    margin-top: 5rem;
}
.nav-pills .nav-custom.active, .nav-pills .show>.nav-custom {
    color: var(--gray-dark);
    background-color: transparent;
}
.nav-pills .nav-custom{
        text-align: left;
    border:transparent;
    border-width: 0;
    background-color: transparent;
    padding: 1.5rem 1rem;
}
.nav-pills .nav-custom b{
    margin-right: .5rem;
}
.nav-link.nav-custom:hover:after {
    background: none;
}

.tab-custom-content {
    position: absolute;
    background: var(--gray-light);
    width: 100%;
    height: 400px;
    bottom: -70%;
    right: 0;
    z-index: -1;
    overflow: hidden;
}
.tab-custom-content img{
    width: 580px;
    height: 400px;
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
            contact-content
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/
#contact {
    margin-top: 10rem;
    margin-bottom: 7rem;
}

.contact-messages {
    font-size: .875rem;
    padding-top: .25rem;
    padding-bottom: 2rem;
    color: var(--gray);
}
.form-control {
    height: calc(1.925em + 1rem + 2px);
    color: var(--secondary);
}
textarea.form-control {
    height: auto;
    color: var(--secondary);
    font-size: .875rem;
}
.help.is-invalid {
    color: #dc3545;
    padding-left: 5px;
    font-size: .825rem;
    line-height: normal;
}
::placeholder {
  color: var(--secondary);
  font-size: .875rem;
}

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
                       Footer
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/

.footer-content {
    background: #272727;
    padding   : 2rem;
}

.footer-content p {
    color        : #dedede;
    margin-bottom: 0;
    font-size: .8rem;
}

.gotop {
    position : fixed;
    right    : 80px;
    bottom   : 80px;
    font-size: 3rem;
    color    : #7AE2E2;
    display  : none;
    z-index: 999;
-webkit-animation: AnimationName 30s ease infinite;
	-moz-animation: AnimationName 30s ease infinite;
	animation: AnimationName 30s ease infinite;
}

.gotop:after {
    content : '';
    position: absolute;
}

.gotop:hover {
    color: var(--dark);

}
.realtimeuserscounter .realtimeuserscounter__attr {
    display: none
}
.counter {
    display: flex;
    align-items: center;
    color: #dedede;
    font-size: .8rem;
}
.counter-title {
    margin-right: 5px;
} 

/* =*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=
                       RWD
=*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*==*=*/


@media only screen and (min-width: 1400px) {
    .container {
        max-width: 1300px;
    }

}
@media only screen and (max-width: 1400px) {
    .tab-content>.tab-pane.active {
        margin: auto;
        width: calc(100% / 1.1)
    }
}
@media only screen and (min-width: 1680px) {
    .slider-container {
        height         : 700px;
    }


}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .slider-container {
        height         : 550px;
    }
        .tab-content>.tab-pane.active {
        margin: auto;
        width: calc(100% / .9)
    }
}

/* Table 767px */
@media only screen and (min-width: 768px) and (max-width: 991px) {

    #about, #events, #contact  {
        margin-top: 12rem;
    }
    .s_product_text {
        padding-left: 1rem;
    }
     .slider-container {
        height         : 500px;
    }
    .about-content .line .flex-full {
        max-width: 98rem;
        margin-left: 0;
    }
    .new-product-block.new-product-block--center {
        margin-top: 0;
    }

    .new-product-block.new-product-block--last {
        margin-top: 0;
    }

    .new-product-block {
        margin-bottom: 40px;
    }

    .new-product {
        padding-bottom: 60px;
    }
    .tab-content>.tab-pane.active {
        margin: auto;
        width: calc(100% / 1.15)
    }

    .bootstrap-tagsinput {
        width: 100%;
    }
    .p-fixed {
    padding: 3rem !important;
}
    .tab-custom-content {
    position: relative;
    bottom: 0;
    width: 350px;
}
.cookiealert:after {
    left: 0;
    right: 0;

}
}

@media only screen and (max-width: 767px) {
    .navbar-expand-md .navbar-nav .nav-link {
        padding: 1rem 0;
     }
     #tfda-about {
    margin-top: -8.5rem;
}
    #about, #events, #contact  {
        margin-top: 12rem;
    }
     .slider-container {
        height         : 430px;
    }
    .about-block__pic {
        display: none;
    }
    .about-content .line .flex-full {
        max-width: 98rem;
        margin-left: 0;
    }
    .product__details__pic .nav-tabs {
        width: auto;
    }
    .product__details__pic .nav-tabs .nav-item .nav-link .product__thumb__pic {
        height: 85px;
        width: 85px;
    }
    .s_product_text {
        padding-left: 1rem;
    }
    .detail-content__text {
        margin-left: 1rem
    }
    .new-product-block.new-product-block--center {
        margin-top: 0
    }

    .new-product-block.new-product-block--last {
        margin-top: 0
    }

    .new-product-block {
        margin-bottom: 40px
    }

    .new-product {
        padding-bottom: 20px
    }

    .new-product-block__pic {
        float: none
    }

    .new-product-block__pic img {
        min-width: 100%
    }

    .new-product-block__text {
        max-width  : 100%;
        position   : relative;
        top        : 0;
        left       : 0;
        padding-top: 22px
    }
    .product__details__pic .nav-tabs {
        margin: auto;
        width: 90%;
    }
    .tab-content>.tab-pane.active {
        margin: auto;
        width: calc(100% / 1.6)
    }
    .bootstrap-tagsinput {
        width: 100%;
    }
    .tab-custom-content {
        position: relative;
        bottom: 0;
        width: 350px
    }
    .p-fixed {
        padding: 3rem !important;
    }
    .cookiealert:after {
    left: 0;
    right: 0;
    width: 97.725%;
    margin: auto;
}

.searchalert.show {
    width: 100%;
    transform: translate(0 , -3rem);
    padding: 0 1.5rem;
    opacity: 1;
    visibility: visible;
    transition-delay: 1000ms;
}
}

@media only screen and (max-width: 576px){
    .list-style {
        margin-top: 1rem;
    }
    .item-content img {
        max-width: 230px;
    }
    .item-content .ellipsis-two-row  {
        -webkit-line-clamp: 9;
    }
    #eventItem1:checked ~ #eventContent1, #eventItem2:checked ~ #eventContent2, #eventItem3:checked ~ #eventContent3, #eventItem4:checked ~ #eventContent4, #eventItem5:checked ~ #eventContent5, #eventItem6:checked ~ #eventContent6, #eventItem7:checked ~ #eventContent7, #eventItem8:checked ~ #eventContent8 {
        max-height: 560px;
    }
}

@media only screen and (max-width: 479px) {

    .navbar {
        display: block;
    }

    .collapse:not(.show) {
        display: none;
        position: relative;
        background: #343a3f;
        padding: 0px 0 40px;
    }
    #searchbar {
        padding: 3rem 1rem
    }
    #search {
        width: 100%;
        top  : 0
    }
    #about, #events, #contact  {
        margin-top: 12rem
    }

    .bootstrap-tagsinput {
        width: 100%
    }
    .product__details__pic .nav-tabs {
        margin-bottom: 0px
    }
    .tab-content>.tab-pane.active {
        margin: auto;
        width: calc(100% / 1.05)
    }
.navbar-brand {
    margin: auto;
    padding-top: 0;
}
.page-title-block {
    height: 230px;
    padding: 5rem 1rem 3rem;
}
.about-block__pic {
    display: none;
}
.about-content .line {
    padding: 1rem 0;
}

.slider-container {
    height         : 350px;
}
.about-block.about-block--center {
    padding: 2.5rem;
}
.product__details__pic .nav-tabs .nav-item {
    margin-right: 8px;
}
.product__details__pic .nav-tabs .nav-item:last-child {
    margin-right: 0;
}
.product__details__pic .nav-tabs .nav-item .nav-link .product__thumb__pic {
    width: 65px;
    height: 65px;
}
.product-content__item figure {
    width: 100%;
}
.gotop {
    right: 10px;
}
.product-content__block {
    margin: 40px 20px;
}
.bootstrap-tagsinput input {
margin-top: 10px;
}
.p-fixed {
    padding: 2rem !important;
}
.searchalert.show {
    width: 100%;
    transform: translate(0 , -4rem);
    padding: 0 1rem;
    opacity: 1;
    visibility: visible;
    transition-delay: 1000ms;
}
}

@media only screen and (max-width: 360px){
.item-content .ellipsis-two-row  {
        -webkit-line-clamp: 10;
    }
#eventItem1:checked ~ #eventContent1, #eventItem2:checked ~ #eventContent2, #eventItem3:checked ~ #eventContent3, #eventItem4:checked ~ #eventContent4, #eventItem5:checked ~ #eventContent5, #eventItem6:checked ~ #eventContent6, #eventItem7:checked ~ #eventContent7, #eventItem8:checked ~ #eventContent8 {
        max-height: 580px;
    }
}
/* Mobile 480px */
/* Small Device = 320px */
@media only screen
  and (max-device-width: 414px){

  }

@media only screen
  and (max-device-width: 390px){

  }

  @media only screen
  and (max-device-width: 375px){

  }

@media only screen
  and (max-device-width: 360px){
    
  }


/*
Print page ---------------------------*/


@page {
    margin: .8cm;
    size: A4 portrait;

    counter-increment: page;
    counter-reset: page 1;
    @top-right {
        content: "Page " counter(page) " of " counter(pages);
}
}
@media print  {

.container {
    max-width: 900px !important;
    min-width: 900px !important;
    margin: auto;
}

header nav, footer, video, audio, object, embed {
  display: none;
}

h1, h2, h3, h4, h5, h6 {
  page-break-after:avoid;
  page-break-inside:avoid
}
h1+p, h2+p, h3+p {
  page-break-before: avoid;
}

.product_image_area {
    margin-top: 1rem !important;
}

.s_product_text {
    margin-top: 4rem;
}

.icon-area {
    margin: 1rem 0 2.5rem;
}

.tab-print-content>.tab-pane {
    display: inline-block;
    width: 410px;
    margin: 1rem 1rem 0 0;
}

.product_print_details_pic_item {
    height: 660px;
    width: 410px;
}

.detail-content__text {
    margin-top: 1rem;
    margin-bottom: 2rem !important;
}
    /* div, p{
        page-break-inside: avoid;
    } */
a:link, a:visited, a {
  page-break-inside:avoid;
  background: transparent;
  color: var(--gray-dark);
  font-weight: bold;
  text-decoration: underline;
  text-align: left;
  word-wrap: break-word; /*避免網址過長超出頁面*/
}

a[href^="http://"]:after, a[href^="https://"]:after {
  content: " (" attr(href) ") ";
}
/* a[href]:after {
    content: none !important;
  } */
img{
  page-break-after: avoid;
  page-break-inside: avoid;
  max-width: 100%;
}

table, blockquote{
  page-break-inside: avoid;
}

thead{
  display: table-header-group; /* 表格即使分頁也會顯示表頭 */
}

ul, ol, dl {
  page-break-before:avoid;
}

div.pageBlock{
  page-break-before: always;
}

.gotop {display: none;
}

}

/* /.列印使用*/

/* 分頁加載css部分 */
.sk-fading-circle {
    margin: 100px auto;
    width: 40px;
    height: 40px;
    position: relative;
  }

  .sk-fading-circle .sk-circle {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
  }

  .sk-fading-circle .sk-circle:before {
    content: '';
    display: block;
    margin: 0 auto;
    width: 15%;
    height: 15%;
    background-color: rgb(169, 165, 165);
    border-radius: 100%;
    -webkit-animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
            animation: sk-circleFadeDelay 1.2s infinite ease-in-out both;
  }
  .sk-fading-circle .sk-circle2 {
    -webkit-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
            transform: rotate(30deg);
  }
  .sk-fading-circle .sk-circle3 {
    -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
            transform: rotate(60deg);
  }
  .sk-fading-circle .sk-circle4 {
    -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  .sk-fading-circle .sk-circle5 {
    -webkit-transform: rotate(120deg);
        -ms-transform: rotate(120deg);
            transform: rotate(120deg);
  }
  .sk-fading-circle .sk-circle6 {
    -webkit-transform: rotate(150deg);
        -ms-transform: rotate(150deg);
            transform: rotate(150deg);
  }
  .sk-fading-circle .sk-circle7 {
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  .sk-fading-circle .sk-circle8 {
    -webkit-transform: rotate(210deg);
        -ms-transform: rotate(210deg);
            transform: rotate(210deg);
  }
  .sk-fading-circle .sk-circle9 {
    -webkit-transform: rotate(240deg);
        -ms-transform: rotate(240deg);
            transform: rotate(240deg);
  }
  .sk-fading-circle .sk-circle10 {
    -webkit-transform: rotate(270deg);
        -ms-transform: rotate(270deg);
            transform: rotate(270deg);
  }
  .sk-fading-circle .sk-circle11 {
    -webkit-transform: rotate(300deg);
        -ms-transform: rotate(300deg);
            transform: rotate(300deg);
  }
  .sk-fading-circle .sk-circle12 {
    -webkit-transform: rotate(330deg);
        -ms-transform: rotate(330deg);
            transform: rotate(330deg);
  }
  .sk-fading-circle .sk-circle2:before {
    -webkit-animation-delay: -1.1s;
            animation-delay: -1.1s;
  }
  .sk-fading-circle .sk-circle3:before {
    -webkit-animation-delay: -1s;
            animation-delay: -1s;
  }
  .sk-fading-circle .sk-circle4:before {
    -webkit-animation-delay: -0.9s;
            animation-delay: -0.9s;
  }
  .sk-fading-circle .sk-circle5:before {
    -webkit-animation-delay: -0.8s;
            animation-delay: -0.8s;
  }
  .sk-fading-circle .sk-circle6:before {
    -webkit-animation-delay: -0.7s;
            animation-delay: -0.7s;
  }
  .sk-fading-circle .sk-circle7:before {
    -webkit-animation-delay: -0.6s;
            animation-delay: -0.6s;
  }
  .sk-fading-circle .sk-circle8:before {
    -webkit-animation-delay: -0.5s;
            animation-delay: -0.5s;
  }
  .sk-fading-circle .sk-circle9:before {
    -webkit-animation-delay: -0.4s;
            animation-delay: -0.4s;
  }
  .sk-fading-circle .sk-circle10:before {
    -webkit-animation-delay: -0.3s;
            animation-delay: -0.3s;
  }
  .sk-fading-circle .sk-circle11:before {
    -webkit-animation-delay: -0.2s;
            animation-delay: -0.2s;
  }
  .sk-fading-circle .sk-circle12:before {
    -webkit-animation-delay: -0.1s;
            animation-delay: -0.1s;
  }

  @-webkit-keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
  }

  @keyframes sk-circleFadeDelay {
    0%, 39%, 100% { opacity: 0; }
    40% { opacity: 1; }
  }

  .loading-icon {
    display: none;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    border: 0.2rem solid rgba(255, 255, 255, 0.2);
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
    margin-left: 0.5rem;
  }

  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }