/*@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);*/

@font-face {
    font-family: 'din-webfont';
    src: url("../fonts/din-webfont.eot");
    src: url("../fonts/din-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/din-webfont.woff") format("woff"), url("../fonts/din-webfont.ttf") format("truetype"), url("../fonts/din-webfont.svg#optimaregular") format("svg");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'DIN-Medium';
    src: url('../fonts/DIN-Medium.eot');
    src: url('../fonts/DIN-Medium.eot?#iefix') format('embedded-opentype'), url('../fonts/DIN-Medium.woff2') format('woff2'), url('../fonts/DIN-Medium.woff') format('woff'), url('../fonts/DIN-Medium.ttf') format('truetype'), url('../fonts/DIN-Medium.svg#DIN-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}


/*
@font-face {
    font-family: 'DIN-NotoSerifCJKtc';
    src:  url('../fonts/SourceHanSerifTW-SemiBold.woff2') format('woff2'),
        url('../fonts/SourceHanSerifTW-SemiBold.woff') format('woff'),
        url('../fonts/SourceHanSerifTW-SemiBold.ttf') format('truetype'),
        url('../fonts/DIN-Medium.svg#DIN-Medium') format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'NotoSerifCJKtc';
    src: url('../fonts/NotoSerifCJKtc-SemiBold.otf');
    font-weight: normal;
    font-style: normal;
}
*/
:focus {
    outline: 0;
}

.small-text {
    font-size: 14px;
}

.red-text {
    color: #EC4660;
}

.blue-text {
    color: #0071B7;
}

.green-text {
    color: #39B04A
}

.green-hover:hover {
    color: #39B04A
}

.blue-bg {
    background: rgba(164, 203, 208, 0.5) !important;
}

body>nav.navbar {
    margin-bottom: 0;
}

body {
    font-family: "din-webfont", "Microsoft JhengHei", STHeiti, 华文黑体, SimHei, 黑体, sans-serif;
    font-size: 16px;
    line-height: 1.7em;
}

h1.font2,
h2.font2,
h3.font2 {
    font-family: "din-webfont", "Microsoft JhengHei", STHeiti, 华文黑体, SimHei, 黑体, sans-serif;
}

h1.font3,
h2.font3,
h3.font3 {
    font-family: "din-webfont", "Microsoft JhengHei", STHeiti, 华文黑体, SimHei, 黑体, sans-serif;
}

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
    font-family: "din-webfont", "Microsoft JhengHei", STHeiti, 华文黑体, SimHei, 黑体, sans-serif;
    color: #58595B;
}

.style-hover figure img {
    -webkit-transition: all 0.6s;
    transition: all 0.6s;
}

.style-hover:hover figure img {
    transform: scale(1.1);
}

.relative {
    position: relative;
}

@media (min-width: 1300px) {
    .container {
        width: 1280px;
        max-width: 1280px;
    }
}

.secondary-bar {
    margin-top: 5px;
}

.header-module .social-icon.social-icon-lg li {
    margin-right: 5px;
}

.main-nav>li {
    padding: 0 10px;
    margin-top: 35px;
}

#menu-main-nav-1.main-nav>li:first-child {
    margin-top: 0;
}

.main-bar-container {
    border-bottom: 1px solid #000;
}

.main-header {
    background: #fff;
}

.main-header--style-centro .main-nav>li>a:hover,
.main-header--style-centro .main-nav>li.current-menu-item>a,
.main-header--style-centro .main-nav>li.active>a {
    color: #000;
}

.main-header--style-centro .main-nav>li>a {
    color: #000;
}

.main-header-placeholder {
    display: none;
}

.fullscreen {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
}

.mb_YTPlayer {
    padding-bottom: 43.5% !important;
}

.full-banner {
    height: auto;
}

.full-banner .swiper-slide .banner-image {
    width: 100%;
    height: auto;
    /*height: 90vh; object-fit: cover;*/
}

.full-banner .swiper-slide .banner-tag {
    width: 100%;
    height: auto;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.full-banner .swiper-slide .banner-text {
    width: 100%;
    text-align: left;
    max-width: 300px;
    height: auto;
    position: absolute;
    top: 5%;
    left: 8%;
}

.full-banner .swiper-slide .banner-button {
    width: auto;
    height: auto;
    position: absolute;
    top: 45%;
    right: 8%;
}

.full-banner .swiper-slide {
    align-items: stretch;
}

.swiper-pagination-bullet {
    width: 16px;
    height: 16px;
    opacity: 0.4;
}

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

.home-block-text {
    position: absolute;
    z-index: 100
}

.swiper-slide {
    background: transparent;
}

.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSI0NCIgc3R5bGU9IiI+PHJlY3QgaWQ9ImJhY2tncm91bmRyZWN0IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4PSIwIiB5PSIwIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48ZyBjbGFzcz0iY3VycmVudExheWVyIiBzdHlsZT0iIj48dGl0bGU+TGF5ZXIgMTwvdGl0bGU+PHBhdGggZD0iTTI3LDIyTDI3LDIyTDUsNDRsLTIuMS0yLjFMMjIuOCwyMkwyLjksMi4xTDUsMEwyNywyMkwyNywyMnoiIGZpbGw9IiM0ODQ4NDgiIGlkPSJzdmdfMSIgY2xhc3M9InNlbGVjdGVkIiBmaWxsLW9wYWNpdHk9IjEiLz48L2c+PC9zdmc+);
}

.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNyIgaGVpZ2h0PSI0NCI+PHJlY3QgaWQ9ImJhY2tncm91bmRyZWN0IiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiB4PSIwIiB5PSIwIiBmaWxsPSJub25lIiBzdHJva2U9Im5vbmUiLz48ZyBjbGFzcz0iY3VycmVudExheWVyIiBzdHlsZT0iIj48dGl0bGU+TGF5ZXIgMTwvdGl0bGU+PHBhdGggZD0iTTAsMjJMMjIsMGwyLjEsMi4xTDQuMiwyMmwxOS45LDE5LjlMMjIsNDRMMCwyMkwwLDIyTDAsMjJ6IiBmaWxsPSIjNDg0ODQ4IiBpZD0ic3ZnXzEiIGNsYXNzPSJzZWxlY3RlZCIgZmlsbC1vcGFjaXR5PSIxIi8+PC9nPjwvc3ZnPg==);
}


/* menu */

.main-header--style-centro .main-bar {
    margin-left: -50px;
}

.category-menu {
    text-align: center;
    margin: 20px auto;
    display: block;
    width: 100%;
}

.category-menu {
    text-transform: uppercase;
}

.category-menu img {
    margin-right: 10px;
}

.category-menu .menu-inline li {
    margin: 0 1.6em;
}


/*
.menu-hover{position: relative;}
.menu-hover span{position: relative;z-index: 1000;}
.menu-hover:before{
  border-radius: 50%;
  width: 30px;
  height: 30px; 
  position: absolute;
  top: 50%; 
  left: 50%;  transform: translateX(-50%) translateY(-50%);
  content:"";
  background: rgba(246, 215, 171, 0.7);
  opacity: 0;
  z-index: 1;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  display: block;
}*/

.menu-hover:hover:before {
    opacity: 1;
}

.category-menu li {
    margin: 0 2.2em;
    font-size: 20px;
}


/* absolute icons */

.ui-to-top,
.site-backtotop {
    font-size: 24px !important;
}

.fa-angle-up:before {
    top: 5px;
    position: relative;
}

.lang a {
    margin-right: 20px;
}

.mobile-menu-row {
    padding: 14px 0 !important;
}


/******** home content*********/

.swiper-button-prev,
.swiper-button-next {
    top: 40%;
}

.swiper-button-prev {
    left: -20px;
}

.swiper-button-next {
    right: -20px;
}

.service-link img {
    cursor: pointer;
}

.portfolio-grid .items-container.sp-0 .portfolio-item {
    margin: 5px;
}

.home-case-block .portfolio-grid .items-container.sp-0 .portfolio-item {
    margin: 0;
}

.home-case-block .packery.style-hover.rella-portfolio-wide .inner-wrapper {
    padding-top: 45%;
}

.line-between {
    display: flex;
    flex-direction: row;
    max-width: 500px;
    width: 100%;
    margin: 30px auto 50px;
}

.line-between:before,
.line-between:after {
    content: "";
    flex: 1 1;
    border-bottom: 1px solid #000;
    margin: auto;
}

.line-between span {
    margin: 0 30px;
}

.squareimg {
    float: left;
    position: relative;
    width: 100%;
    padding-bottom: 100%;
    /* = width for a 1:1 aspect ratio */
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    /* you change this to "contain" if you don't want the images to be cropped */
}


/**************facebook block **********/

.blog_style_object_container_0 {
    width: 33.3% !important;
    float: left;
}

.ffwd_blog_style_object_from_0,
.ffwd_title_spun1_0,
.ffwd_blog_style_object_messages_0 {
    display: none !important;
}

.ffwd_blog_style_img_0 {
    object-fit: cover;
    width: 160px !important;
    height: 160px !important;
}

.blog_style_object_container_0 {
    border: none !important;
}

.blog_style_object_container_1 {
    width: 33.3% !important;
    float: left;
}

.ffwd_blog_style_object_from_1,
.ffwd_title_spun1_1,
.ffwd_blog_style_object_messages_1 {
    display: none !important;
}

.ffwd_blog_style_img_1 {
    object-fit: cover;
    width: 160px !important;
    height: 160px !important;
}

.blog_style_object_container_1 {
    border: none !important;
}

#ffwd_container1_0 #ffwd_container2_0 .blog_style_object_container_0,
#ffwd_container1_1 #ffwd_container2_1 .blog_style_object_container_1 {
    background-color: transparent !important;
}

.social-pic {
    border-radius: 50%;
}

.facebook-des {
    min-height: 170px;
}


/**************block **********/

.block-text {
    padding: 30px;
    text-align: left;
}

.left-top-line {
    text-align: right;
    margin: 0 0 25px 25px;
    padding-right: 50px;
    border-left: 1px solid #fff;
    border-bottom: 1px solid #fff;
    height: 100%;
}

.right-bottom-line {
    text-align: center;
    margin: 25px;
    padding: 25px;
    border: 1px solid #fff;
    height: 100%;
}

.home-case-block .vertical-center {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

.home-case-block h2 {
    font-size: 48px;
    color: #fff;
}

.portfolio-item.grid {
    line-height: 1.7;
}

.home-case-block h3 {
    font-size: 64px;
    color: #fff;
    margin: 0;
    padding: 5px 20px;
    line-height: 1;
    -webkit-margin-before: 0;
    -webkit-margin-after: 0;
}

.home-case-block .small-line {
    border-bottom: 1px solid #fff;
    width: 50px;
    margin: 5px auto;
    height: 1px;
    line-height: 1;
}

.home-case-block h5 {
    font-size: 24px;
    color: #fff;
    margin: 10px 0 0 0;
    line-height: 1;
}

.portfolio-item .portfolio-inner {
    background-color: transparent;
}

.caret-left {
    position: absolute;
    right: 0;
    top: 35%;
    font-size: 64px;
    color: #fff;
    z-index: 100
}

.caret-right {
    position: absolute;
    left: 0;
    top: 35%;
    font-size: 64px;
    color: #fff;
    z-index: 100
}


/************** service listing **********/

.filter-service {
    width: 100%;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
    padding: 0 30px;
}

.filter-service li {
    padding: 2px 20px 0 20px;
    line-height: 40px;
}

.filter-option {
    border-color: transparent;
    border-width: 3px;
    border-bottom-style: solid;
}

.filter-option:hover {
    border-color: #000
}

.filter-option-all.current-filter,
.filter-option-all:hover {
    border-color: #000;
}

.filter-option-feature.current-filter,
.filter-option-feature:hover {
    border-color: #00A498;
}

.filter-option-feature.current-filter a,
.filter-option-feature:hover a {
    color: #00A498 !important;
}

.filter-option-new.current-filter,
.filter-option-new:hover {
    border-color: #F28E1E;
}

.filter-option-new.current-filter a,
.filter-option-new:hover a {
    color: #F28E1E !important;
}

.filter-service li img {
    padding: 0 10px 0 0;
}

.service-item:after {
    content: "";
    width: 100%;
    background: #000;
    display: block;
    height: 1px;
    margin-top: 5px;
    margin-bottom: 30px;
}

.service-item .portfolio-item.masonry {
    margin-bottom: 10px;
}

.service-item .service-item-more {
    opacity: 1;
    color: #fff;
    border-radius: 50em;
    border: 1px solid #fff;
    font-size: 18px;
    padding: 6px 9px;
}

.service-item img {
    vertical-align: top;
}

.service-item-title {
    height: 60px;
}


/************** service detail **********/

.videoContainer {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.videoContainer iframe,
.videoContainer object,
.videoContainer embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hor-line {
    background: #000;
    width: 40px;
    height: 1px;
    display: block;
    margin: 15px auto;
}

.single-service-page .full-banner .swiper-slide .banner-image {
    width: 100%;
    height: auto;
    object-fit: none;
}

.single-service-page h1, .single-service-page h1 span, .single-service-page h2, .single-service-page h2 span{
  font-size:  24px !important;
  font-weight:  bold !important;
  margin-bottom: 1rem !important;
  color: #58595B !important;
  font-style: normal !important;
}

.single-service-page .blue-des{
  color:  #0071B7;
  margin: 0 0 0;
  font-size: 18px;
}

.single-service-page .blue-des img{
  margin: 10px 0 0;
}


.swiper-slide {
    display: block;
}

.wpb_wrapper ul {
    list-style-type: disc;
    /*margin-top: -2.14286em;*/
}

.wpb_wrapper ul li {
    line-height: 1.7em
}

iframe,
object,
embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#tnc-contianer a {
    text-decoration: underline;
    cursor: pointer;
}

.readMore {
    text-decoration: underline;
    color: #EC4660;
}

.readMore:after {
    content: "+";
    display: inline-block;
    padding-left: 5px;
    color: #EC4660;
}

.readMore:hover,
.readMore:focus {
    text-decoration: underline !important;
}

.readMore.open:after {
    content: "-"
}

.hideServiceDetail {
    display: none;
}


/************** about **********/

.page-about #content-new img {
    width: 100%;
    height: auto;
}

.wpb_single_image .vc_single_image-wrapper {
    width: 100%;
}

span.wpcf7-not-valid-tip {
    color: #666;
}


/************** contact **********/

.wpcf7-submit {
    color: #fff !important;
    width: 250px !important;
}

div.wpcf7-mail-sent-ok,
div.wpcf7-validation-errors,
div.wpcf7-acceptance-missing {
    border: none;
}

div.wpcf7-response-output {
    border: none !important;
}


/************** shop **********/

.shop-type {
    display: none;
}

.shop-type-1 {
    display: block;
}


/* footer */

.main-footer {
    padding: 0;
}

.footer-bg {
    /* background: url("../images/footer-img.webp") no-repeat center center; */
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #fff;
    width: 100%;
}

.social-icon {
    font-size: 16px;
}

.social-icon.large-size {
    font-size: 20px;
}

.social-icon i {
    font-size: 20px;
    margin: 0 10px;
}

.main-footer--style-centro a:hover {
    text-decoration: underline;
}

.main-footer--style-centro img {
    /* margin: 0 8px; */
}

@media screen and (min-width: 1280px) {
    .portfolio-inner.block-text {
        font-size: 16px;
    }
}

@media screen and (max-width: 1024px) {
    .swiper-button-prev {
        left: 10px;
    }
    .swiper-button-next {
        right: 10px;
    }
    /*.full-banner .swiper-slide .banner-image{width: 100%;height: 70vh; object-fit: cover;}*/
}

@media (max-width: 1600px) {
    .home-case-block h3 {
        font-size: 36px;
    }
    .home-case-block h2 {
        font-size: 24px;
    }
    .home-case-block h5 {
        font-size: 16px;
    }
}

.header-module.module-nav-trigger {
    position: absolute !important;
    left: 0;
    bottom: 0;
}

.header-module {
    display: block !important;
}

.main-header--style-centro .main-bar {
    margin-left: 0;
}

.main-nav>li {
    margin-top: 0;
}

.main-header .navbar-collapse .navbar-collapse-inner {
    display: block;
}

.main-bar-container .container {
    max-width: 100%;
}

.homeblock1 {
    bottom: 3%;
    left: 3%;
    height: 40%;
}

.homeblock2 {
    bottom: 3%;
    left: 3%;
    height: 40%;
}

.homeblock3 {
    bottom: 3%;
    left: 3%;
    height: 40%;
}

.homeblock4 {
    bottom: 3%;
    left: 3%;
    height: 60%;
}

.homeblock5 {
    bottom: 3%;
    left: 3%;
    height: 80%;
}

.homeblock6 {
    bottom: 20%;
    left: 3%;
    height: 43%;
}

@media screen and (max-width: 768px) {
    body h5,
    body .h5,
    body h4,
    body .h4 {
        font-size: 20px;
        font-weight: bold;
    }
    #content-new {
        margin-top: 65px;
    }
    .main-bar {
        border-bottom: 1px solid #ddd;
    }
    .filter-service li img {
        display: none;
    }
    .filter-service {
        padding: 0;
    }
    .filter-service li {
        padding: 0 5px;
        line-height: 34px;
    }
    .navbar-header img {
        width: auto;
        height: 40px;
    }
    .home-case-block h2 {
        font-size: 32px;
    }
    .home-case-block .right-bottom-line h2 {
        font-size: 24px;
    }
    #ffwd_container1_0 #ffwd_container2_0 .blog_style_object_container_0,
    #ffwd_container1_1 #ffwd_container2_1 .blog_style_object_container_1 {
        float: left !important;
        width: 50% !important;
    }
    #content-new {
        margin-bottom: 0 !important;
    }
    .packery.style-hover.rella-portfolio-wide .inner-wrapper {
        padding: 50%;
    }
    .adjust-top-xs {
        margin-top: -60px
    }
    #mobile-nav .social-icon i {
        margin: 0;
    }
    .social-icon li {
        margin-right: 10px;
    }
    .main-footer .container-fluid {
        /* padding-right: 15px;
        padding-left: 15px; */
    }
    footer .text-right,
    footer .text-left {
        text-align: center !important;
    }
    .service-item-title h5 {
        font-size: 20px;
    }
    .homeblock1 {
        bottom: 3%;
        left: 3%;
        height: 50%;
    }
    .homeblock2 {
        bottom: 3%;
        left: 3%;
        height: 27%;
    }
    .homeblock3 {
        bottom: 3%;
        left: 3%;
        height: 27%;
    }
    .homeblock4 {
        bottom: 3%;
        left: 3%;
        height: 25%;
    }