/*!---------------------
*Copyright (c) 2016 by yuchen.
------------------------*/
body,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Futura Lt BT, Microsoft JhengHei, Orator Std, sans-serif;
}

h2,
h3,
h4 {
    font-size: 16px;
}

#gotop,
.navbar-inverse .nav>li,
.ripple2 input {
    cursor: pointer;
}

.footer p,
.navbar_custom {
    text-align: center;
}

body {
    color: #000;
    line-height: 28px;
    height: 100vh;
    margin: 0;
    padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 30px;
}

h1 {
    font-size: 36px;
}

h3 {
    font-weight: 400;
    line-height: 24px;
}

p,
table {
    font-size: 14px;
}

a {
    text-decoration:none; 
    -webkit-transition: color 300ms, background-color 300ms;
    -moz-transition: color 300ms, background-color 300ms;
    -o-transition: color 300ms, background-color 300ms;
    transition: color 300ms, background-color 300ms;
}

a:focus,
a:hover {
    color: #353535;
    text-decoration: none !important;
    outline: 0;
}
img{
    max-width: 100%;
 }
 .clear {
    clear: both;
    height: 0;
    line-height: 0;
    font-size: 0;
}
.btn-primary {
    padding: 8px 20px;
    background: #c52d2f;
    color: #ff0;
    border-radius: 4px;
    border: none;
    margin-top: 10px;
}

#faq {
    bottom: 6%;
    right: 5px;
}

.modal-open .modal {
    overflow-x: hidden;
    overflow-y: auto;
}

.modal-backdrop {
    z-index: 0;
}

.modal-title {
    font-size: 18px;
}

.faq_inner {
    background: rgba(0, 0, 0, .5);
}

.modal-body {
    height: 35vh;
    overflow-y: scroll;
}

.modal-body p {
    font-size: 16px;
    margin: 0;
}

.modal-body img {
    padding-right: 4px;
}

.modal-body span {
    color: red;
    font-weight: 800;
}

.q {
    font-weight: bolder;
}

.modal-content {
    height: 46vh;
    overflow: hidden;
}

.modal-header .close {
    margin-top: -2px;
    font-size: 17px;
    line-height: 23px;
    color: #000;
}

@media (max-width:450px) {
    .modal-content {
        height: 83vh;
    }

    .modal-body {
        height: 69vh;
    }

    .modal-body ul li {
        padding-bottom: 7px;
    }
}

@media (max-width:400px) {
    #faq {
        width: 18%;
        right: 5px;
    }

    #faq img {
        width: 100%
    }
}

@media (max-width: 1024px) {
    .navbar-nav li img {
        display: inline-block !important;
    }
}

.btn-primary:focus,
.btn-primary:hover {
    background: #c52d2f;
    outline: 0;
    box-shadow: none;
}

.btn-transparent {
    border: 3px solid #fff;
    background: 0 0;
    color: #fff;
}

.btn-transparent:hover {
    border-color: rgba(255, 255, 255, .5);
}

#gotop {
    display: none;
    position: fixed;
    right: 20px;
    bottom: 20px;
    padding-left: 8px;
    padding-right: 8px;
    font-size: 30px;
    color: #185cda;
    z-index: 5;
}

.navbar-brand,
.navbar-inverse .nav>li>a {
    padding: 0;
}

#gotop i:hover {
    will-change: animation, transform, opacity;
    -webkit-animation: top 1s ease-in-out infinite;
    animation: top 1s ease-in-out infinite;
}

@-webkit-keyframes top {

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

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

@keyframes top {

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

    50% {
        transform: scale(1.1);
    }
}

.navbar-inverse {
    background: #ffffe8;
    border: 1px solid transparent;
}

.navbar {
    margin-bottom: 0;
}

@media (min-width:992px) {
    .navbar-nav>li>a {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@media (max-width:400px) {
    .navbar-brand img {
        max-width: 180px;
    }
}

@media (max-width:320px) {
    .navbar-brand img {
        max-width: 140px;
    }
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
    border-color: transparent;
}

@media screen and (max-width:1200px) {
    .navbar-inverse .nav>li>img {
        max-width: 130px;
    }
}

.navbar_custom img {
    margin: 0 auto;
}

.navbar_custom .nav {
    float: none;
}

.navbar_custom .nav li {
    display: inline-block;
    float: none;
    vertical-align: middle;
}

@media screen and (max-width:991px) {
    .navbar-inverse .nav>li>img {
        max-width: none;
    }

    .navbar_custom .nav li {
        display: block;
        margin: 0;
    }

    .navbar_custom .nav li a {
        border-radius: 0;
        display: block;
    }
}

.footer {
    padding-top: 5px;
    vertical-align: middle;
    font-size: 13px;
    background: #2d2d2d;
    color: #fff;
}

.ripple2 input {
    position: relative;
    outline: 0;
    background: 0 0;
    color: #2f578e;
    padding: 8px 20px;
    border-radius: 2px;
    font-size: 14px;
    border: 1px solid #2f578e;
    -webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;
}

.hvr-rectangle-out,
.ripple2 input:hover {
    background: #2f578e;
    color: #fff;
}

.hvr-rectangle-out {
    margin: .2em;
    padding: .6em;
    width: 125px;
    text-align: center;
    text-decoration: none;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    border: 1px solid #2f578e;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
}

.hvr-rectangle-out,
.hvr-underline-from-center {
    display: inline-block;
    vertical-align: middle;
    box-shadow: 0 0 1px transparent;
    -webkit-backface-visibility: hidden;
}

.hvr-rectangle-out:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background: #fff;
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    transition-timing-function: ease-out;
}

.hvr-rectangle-out:before,
.hvr-underline-from-center:before {
    z-index: -1;
    bottom: 0;
    -webkit-transition-timing-function: ease-out;
}

.hvr-rectangle-out:active,
.hvr-rectangle-out:focus,
.hvr-rectangle-out:hover {
    color: #2f578e;
}

@media screen\0 {
    .hvr-rectangle-out {
        background: #2f578e;
        color: #fff;
        border: 1px solid #2f578e;
    }

    .hvr-rectangle-out:active,
    .hvr-rectangle-out:focus,
    .hvr-rectangle-out:hover {
        color: #2f578e;
        background: #fff;
    }
}

.hvr-rectangle-out:active:before,
.hvr-rectangle-out:focus:before,
.hvr-rectangle-out:hover:before {
    -webkit-transform: scale(1);
    transform: scale(1);
}

@media(max-width:768px) {
    .hvr-rectangle-out {
        width: 110px;
        font-size: 13px;
        margin: .2em 0;
        padding: .3em;
    }
}

@media(max-width:600px) {
    .hvr-rectangle-out {
        width: 100px;
        font-size: 12px;
    }
}

@media(max-width:450px) {
    .hvr-rectangle-out {
        width: auto;
        font-size: 12px;
        padding: .3em;
    }
}

.hvr-underline-from-center {
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
    position: relative;
    overflow: hidden;
}

.hvr-underline-from-center:before,
.nav-tabs>li>a::after {
    content: "";
    height: 2px;
    position: absolute;
}

.hvr-underline-from-center:before {
    left: 50%;
    right: 50%;
    background: #35c5c5;
    -webkit-transition-property: left, right;
    transition-property: left, right;
    -webkit-transition-duration: .2s;
    transition-duration: .2s;
    transition-timing-function: ease-out;
}

.hvr-underline-from-center:active:before,
.hvr-underline-from-center:focus:before,
.hvr-underline-from-center:hover:before {
    left: 0;
    right: 0;
}

.tab-content a,
.tab-content a:visited {
    color: #35c5c5;
}

.tab-content a:hover,
a:focus {
    color: #000;
}

@media(max-width:500px) {
    .tab-content {
        font-size: 13px;
    }
}

@media(max-width:320px) {
    .tab-content {
        font-size: 12px;
    }
}

.nav-tabs>li.active>a,
.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    border-width: 0;
}

.nav-tabs>li>a {
    border: none;
    color: #666;
}

.nav-tabs>li.active>a,
.nav-tabs>li>a:hover {
    border: none !important;
    color: #35c5c5 !important;
    background-color: transparent !important;
}

.nav-tabs>li>a::after {
    background: #35c5c5;
    width: 100%;
    left: 0;
    bottom: -1px;
    transition: all 250ms ease 0s;
    transform: scale(0);
}

.nav-tabs>li.active>a::after,
.nav-tabs>li:hover>a::after {
    transform: scale(1);
}

.tab-nav>li>a::after {
    background: #35c5c5;
    color: #fff;
}

.tab-pane {
    padding: 15px 0;
}

.tab-content {
    padding: 20px;
}

@media(max-width:500px) {
    .tab-content {
        padding: 20px 0;
    }
}

@media(max-width:370px) {
    .tab-pane>[class*=col-] {
        padding-right: 0;
        padding-left: 0;
    }
}

.nav-tabs>li.active>a:focus,
.nav-tabs>li.active>a:hover {
    background-color: transparent;
}

.nav-tabs {
    border-bottom: 1px solid transparent;
}

#tabs .nav-tabs {
    border-bottom: none;
}

#tabs a {
    background-color: inherit;
    border: none;
}

/*---------------節慶活動-------------------------*/
.traveltitle{
    text-align: center;
    margin: 0 auto;
    display: inline-block;
    padding-bottom: 2%;
 }
 .traveltitle img{
    width: 100%;
    max-width: 1114px;
 }
.ibbg {
    width: 1440px;
    background: rgba(255,255,255,0.6);
    background-position: center top;
    background-repeat: repeat;
    background-size: auto;
    box-shadow: 2px 3px 14px #bebdbd;
    text-align: center;
    margin: 0 auto;
    max-width: 90%;
    margin-top: -5%;
    padding-bottom: 1%;
}
.contentbg {
    position: relative;
    top: -1px;
    width: 70%;
    text-align: center;
    margin: 0 auto;
}
.ibbg2 {
    background: url(../../images/ibbg.png);
    background-position: 0 30%;
    background-repeat: no-repeat;
    background-size: contain;
    position: relative;
    top: -12px;
        }
 
.traveltitle hr {
    width: 100%;
    border-top: 2px solid #bcbe1a;
}
.traveltitle p {
    display: inline-block;
    padding-top:3%;            
}
.traveltitle p:nth-child(1) {
width: 23%;
    padding-left: 3%;
    margin: 0;
    font-size: 30px;
    color: #bcbe1a;
    font-family: 'Noto Sans TC', sans-serif;
}
.traveltitle p:nth-child(2) {
    width: 50%;
    font-size: 18px;
    font-family: 'Noto Sans TC', sans-serif;
}

    /*space*/
.space {
    height:10vh;
}
/*city*/
        .city {
            color:#303030;
            text-align:left;
            padding:3% 0 2%;
            display:inline-block;
            vertical-align:top;
            width:31%;
        }
            .city span {
                font-weight:bold;
                font-size:14px;
                display:block;
            }
            
                .fa-filter,.fa-images,.fa-th {
                    color:#303030;
                    width:auto;
                    vertical-align: middle;
                    padding: 0 1% 0 0;
                }
@media screen and (max-width: 1200px) {
    .ibbg {
    margin-top: -8%;
}
            .ibbg2 {
                top: -37px;
            }   
            .traveltitle{
    padding-bottom: 3%;
 }  
 .contentbg {
    top: 31px;
    width: 85%;
}
}
@media screen and (max-width: 992px){
    .ibbg2 {
                top: -39px;
            }  
   .ibbg {
    margin-top: -10%;
}           
.contentbg {
    top: 23px;
}
}
@media screen and (max-width: 768px){
    .ibbg {
    margin-top: -17%;
}
}
@media screen and (max-width: 576px){
.ibbg2 {
    top: -37px;
}

}
@media screen and (max-width: 450px){
  .contentbg {
    top: 1px;
    width: 100%;
}
   .ibbg2 {
    top: -16px;
    background-size: auto;
    background-position: center center;
}
.ibbg {
    margin-top: -10%;
}
.inib{
    padding-right: 0px !important;
    padding-left: 0px !important;
}
}
@media screen and (max-width: 400px) {
                .city span {
                font-size:12px;
                }
                
            }

/*--------------------about--------------------------*/
.aboutbg{
width: 100%;
display: inline-block;
margin: 0 auto;
text-align: center;
margin-top: 2%;
}
.ableft{
width: 50%;
display: inline-block;
margin-left: 4%;
position: relative;
}

.ableft:before {
    position: absolute;
    content: '';
    left: 136px;
    right: 172px;
    bottom: 0;
    top: 95%;
    background-color: rgba(155,155,0, 0.25);
    border-radius: 100% / 30px;
    box-shadow: rgba(0, 0, 0, 0.5) 0 3px 12px;
    clip: rect(21px, auto, 41px, auto);
}

.abright{
width: 42%;
display: inline-block;
vertical-align: top;
    padding-left: 3%;
}
.abtitle {
    background-image: url(../../images/abtitle.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: left top;
    min-height: 80px;
    padding-top: 3%;
}
.abright p{
    font-size: 16px;
    font-family: Microsoft JhengHei;
    text-align: justify;
    padding-top: 3%;
    padding-left: 7%;
}
p.abtitle {
    font-family: 'Noto Sans TC', sans-serif;
    color: #185cda;
    font-size: 26px;
    padding-top: 4%;
    width: 100%;
    text-align: center;
    max-width: 336px;
    padding-left: 0;
    margin-top: 2%;
    letter-spacing: 2px;
}
.abright p:nth-child(3){
    padding-top: 5%;
}
.abright i{
    font-size: 14pt;
}
@media screen and (max-width: 1200px) {
 .ableft:before {
    left: 85px;
    right: 83px;
    top: 93%;
    clip: rect(21px, auto, 41px, auto);
}
  p.abtitle {
    padding-top: 6%;
}
.aboutbg {
    margin-top: -1%;
}
}
@media screen and (max-width: 992px) {
    .aboutbg {
    margin-top: -6%;
}
    .ableft:before {
    left: 58px;
    right: 65px;
    top: 91%;
    box-shadow: rgba(0, 0, 0, 0.5) 0 2px 10px;
}
  .abtitle {
    min-height: 64px;
} 
.abright p {
    padding-top: 0;
}
  p.abtitle {
    width: 86%;
    margin-top: 0;
    padding-top: 4%;

}}
@media screen and (max-width: 768px) {
    .aboutbg {
    margin-top: -5%;
}

 .ableft{
width: 79%;
    display: block;
    margin-top: -34px;
    text-align: center;
    margin: 0 auto;
}
.ableft:before {
    top: 94%;
    clip: rect(23px, auto, 41px, auto);
}
.abright {
    width: 79%;
    display: block;
    padding-top: 3%;
    margin: 0 auto;
}   
p.abtitle {
    padding-top: 2%;
    text-align: left;
    padding-left: 6%;
}
}
@media screen and (max-width: 576px) {
    .aboutbg {
    margin-top: -10%;
}
.ableft:before {
    top: 91%;
    clip: rect(25px, auto, 41px, auto);
}
}
@media screen and (max-width: 450px) {
    .aboutbg {
    margin-top: 1%;
    position: relative;
}
.ableft:before {
    top: 89%;
}
.abright {
    padding-top: 5%;
}
.abright p {
    font-size: 14px;
}
}
@media screen and (max-width: 365px) {
.ableft:before {
    top: 87%;
}
.abright p {
    padding-left: 2%;
}
}
/*----------------hot----------------*/
#bnb{
    padding-top:50px; 
    margin-top:-50px;
}
#services_hot {
    padding-top: 20px;
    padding-bottom: 80px;
    background-color: #fff;
}
.hot{
    width: 100%;
    box-sizing:border-box;
    display: inline-block;
}
.hottitle{
    display: inline-block;
    width: 100%;
	height: 180px;
    margin-bottom: 1rem;
}
.hottitle img{
   width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
.hottitle img:nth-child(1){
       width: 261px;
       max-width: 90%;
       margin-left: 3%;
}
.hottitle img:nth-child(2){
       width: 127px;
       max-width: 90%;
       margin-left: 4%;
}
.hottitle ul {
    box-sizing:border-box;
    display: inline-block;
    margin-bottom: 0px;
    padding-inline-start: 15px;
    width: 62%;
    vertical-align: middle;
}
.hottitle ul li{
     display: inline-block;
    width: auto;
    border-radius: 20px;
    border: #dddddd 1px solid;
    margin-bottom: 5px;
    text-align: center; 
    font-family: 'Noto Sans TC', sans-serif;
    font-size: 14px;
    margin-right: 5px;
    transition:all .3s 0s ease;
    margin-right: 1px;
    padding: 0 7px;
}

.hotfont{
    width: 60%;
    display: inline-block;
    position: relative;
    top: 37px;
	vertical-align: top;
}
.swiper {
      width: 100%;
      height: auto;
      margin-left: auto;
      margin-right: auto;
	  display:flex;
	  flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    }
    .swiper-wrapper{
		flex-wrap: wrap;
		}
    .swiper-slide {
      width: 20% !important;
      text-align: center;
      font-size: 14px;
      height: 30px;
      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
      margin-top: 0 !important;
      border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 4px;
    }
    .swiper-slide a{
        color: #000;
    }
    .swiper-slide:hover{
        background-color: #ddd;
    }
    .swiper-slide a:hover{
        color: #000;
        text-decoration:none; 
    }
@media screen and (max-width: 1200px) {

.hottitle img:nth-child(1){
       max-width: 22%;
       margin-left: 0%;
}
.hottitle img:nth-child(2){
       max-width: 11%;
       margin-left: 0%;
}
.hotfont{
    width: 60%;
}
}
@media screen and (max-width: 991px) {
.hot{
}
.hotfont {
    width: 73%;
}
.hottitle {
    width: 100%;
    padding-bottom: 2%;
}
.hottitle img:nth-child(1) {
    max-width: 25%;
    margin-left: -12%;
    display: block;
}
.hottitle img:nth-child(2) {
    max-width: 13%;
}
}
@media screen and (max-width: 768px) {
#services_hot {
    padding-bottom: 28px;
}
.hot {
    margin-left: 0;
    margin-right: 0;
}
    .hottitle {
    width: 100%;
}
.hottitle img:nth-child(1) {
    padding-right: 0;
    display: block;
    max-width: 30%;
    text-align: center;
    margin: 0 auto;
}
.hottitle img:nth-child(2) {
    max-width: 12%;
}
.hotfont {
    width: 87%;
	top: 17px;
}
.hottitle {
    height: 280px;
}
.swiper-slide{
width: 23% !important;
	}
}
@media screen and (max-width: 576px) {

.hottitle img:nth-child(2) {
    margin-left: -12px;
}
.swiper-slide {
      font-size: 12px;
    }

}
@media screen and (max-width: 450px) {

    .swiper-slide {
    padding: 0 3px;
    margin: 5px 3px 5px 0;
    width: auto !important;
    }
 .hotfont {
    top: 8px;
    width: 100%;
    margin-left: -8px;
}
.hottitle img:nth-child(2) {
  margin-left: 3px;
  display: block;
  max-width: 16%;
}
}

/*------------------優惠訊息--------------*/
 .some-list{
    text-align: center;
 }
.some-list > div{
padding-bottom: 3%;
}

/*------------------主題按鈕--------------*/

#services_theme{
    background-color: #fff;
    padding:2%;
}
.theme{
    width: 1300px;
    max-width: 100%;
    margin:0 auto;
}
.theme ul{
    width: 100%;
    display: inline-block;
    padding-inline-start: 0;
    text-align: center;
}
.theme ul li{
    display: inline-block;
    list-style:none;
    width: 16%;
    padding: 0 2px;
}
.theme img{
    width: 221px;
    max-width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 450px) {
.theme ul li {
    display: inline-block;
    width: 30%;
    padding: 0 2px 6px 0;
}
}
/*------------------推薦民宿--------------*/
 .some-list2{
    text-align: center;
 }
.some-list2 > div{
padding-bottom: 1%;
}
.some-list2 .col-md-3 {
    width: 16.6%;
}
@media screen and (max-width: 1200px){
.some-list2 .col-md-3 {
    width: 25%;
}}
@media screen and (max-width: 767px){
.some-list2 .col-md-3 {
    width: 33%;
}}
@media screen and (max-width: 500px){
.some-list2 .col-md-3 {
    width: 50%;
}
.some-list2 .col-md-3, .some-list2 .col-sm-4, .some-list2 .col-xs-6 {
    padding: 5px;
}
.some-list2 img {
  width: 187px;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}
}

/*------------------景點--------------*/
/*city*/
        .city {
            color:#303030;
            text-align:left;
            padding:1% 0 1%;
            display:inline-block;
            vertical-align:top;
            width:31%;
        }
            .city span {
                font-weight:bold;
                font-size:14px;
                display:block;
            }
            @media screen and (max-width: 400px) {
                .city span {
                font-size:12px;
                }
                
            }
                .fa-filter,.fa-images,.fa-th {
                    color:#303030;
                    width:auto;
                    vertical-align: middle;
                    padding: 0 1% 0 0;
                }
        /*more*/
        .bmore {
            color:#303030;
            text-align:left;
            padding: 5% 9% 2%;
            display:inline-block;
            vertical-align:top;
            width:31%;
        }
            .bmore span {
            font-weight: bold;
            font-size: 18px;
            display: block;
            color: #d76060;         
        }
            @media screen and (max-width: 850px) {
        .bmore {
            padding: 6% 1% 2%;
        }
        
            }
            @media screen and (max-width: 600px) {
        .bmore {
            padding: 0% 0% 0%;
            width:90%;
            margin-left: 66%;
        }
        .bmore span {
            font-size: 16px;    
        }       
            }
        @media screen and (max-width: 450px) {
        .city {
            display: block;
            width: 90%;
         }     
            }
            @media screen and (max-width: 400px) {
        .bmore {
            padding: 0% 0% 0%;
            width:90%;
            margin-left: 50%;
        }
        .bmore span {
            font-size: 16px;    
        }       
            }
            /*option*/
            .option,.option2,.option3 {
                display:inline-block;
                vertical-align:top;
                border: solid 1px #CCC;
                border-radius:2px;
                width:85%;
                padding:0px 10px;
                position:relative;
                background:#fff;
                cursor:pointer;
            }
                .fa-caret-down {
                    text-align:right;
                    position:absolute;
                    top:5px;
                    right:5px;
                    color: #666;
                    z-index:8;
                    font-size:16px;
                }
            @media screen and (max-width: 768px) {
                .fa-caret-down {
                     right:14px;                    
                }}
                .option ul,.option2 ul,.option3 ul {
                    position: absolute;
                    top: 30px;
                    left: 0;
                    width: 100%;
                    z-index: 5;
                    background: #fff;
                    display:none;
                    border: solid 1px #CCC;
                    z-index:9;
                }
                ul.open,ul.open2,ul.open3 {
                    height:100%;
                    display:block;
                    transition:.3s ease-out;
                }
                    .option li,.option2 li,.option3 li {
                        background: #fff;
                        width: 100%;
                        padding: 0px 10px;
                        cursor:pointer;
                        list-style:none; 
                    }
                        .option li:hover,.option2 li:hover,.option3 li:hover {
                            background:#f2f2f2;
                        }
                        .option li a:hover,.option2 li a:hover,.option3 li a:hover {
                            color:#000;
                        }
                    .active {
                    }
        hr {
            border-top: 1px solid #303030;
            width:100%;
            margin-bottom:3%;
        }
.filtr-container div {
    padding:2% 10px;
}
    .filtr-container div:hover {
        animation:imgflash 1s;
    }
    .filtr-container img {
        max-width:100%;
    }
    
.space {
    height:10vh;
}
.filter_block {
    position:relative;
    text-align:center;
}
.filter_block .tab-content{
    padding: 0;
}
    .fliter_inner {
    }
    .filter_block .active {
        background:#fff !important;
    }
    .filter_block img {
        max-width:100%;
        box-shadow: 0px 0px 3px rgba(0,0,0,.3);
    }
    .filter_block .col-md-3,.filter_block .col-sm-4,.filter_block .col-xs-6 {
        padding:0 10px 20px 10px;
    }
    .filter_block a {
    }
        .filter_block a:hover {
            animation:imgflash 1.5s ease-in-out;
            color:#000;
        }
.a_area img,.f_area img {
    -webkit-filter: drop-shadow(-2px 2px 1px rgba(51, 51, 51, .2));
    filter: drop-shadow(-2px 2px 1px rgba(51, 51, 51, .2));
    box-shadow: 0px 0px 3px rgba(0,0,0,.0);
}
.a_area .col-md-3 {
    width: 16.6%;
}
.d_area {
    column-width:240px;
    -webkit-column-width:240px;
    -moz-column-width:240px;
    vertical-align:top;
}
.d_area .col-md-3,.d_area .col-md-4,.d_area .col-md-6 {
    width:100%;
}
    .d_area a {
        transition:.3s ease-in-out;
    }
        .d_area a:hover {
            animation:none;
        }
        @media screen and (max-width: 1200px) {
            .a_area .col-md-3 {
                width: 25%;
            }
        }
        @media screen and (max-width: 768px) {
            .a_area .col-md-3 {
                width: 33%;
            }
        }
        @media screen and (max-width: 500px) {
            .filter_block .col-xs-6 {
                width:100% !important;
            }
            .d_area .col-xs-6 {
                width:50% !important;
            }
            .filter_block .col-md-3, .filter_block .col-sm-4, .filter_block .col-xs-6 {
                padding: 5px;
            }
            .a_area .col-md-3 {
                width: 50% !important;
            }
        }
/*-------------map-----------*/
.map {
    display: inline-block;
    padding: 0 1em;
    width: 100%;
}
.map iframe {
    width: 100%;
    min-height: 475px;
}
.maptxt h3{
    font-family: 'Microsoft JhengHei';
    font-size: 16px;

}
.maptxt p{
    font-family: 'Microsoft JhengHei';
    font-size: 14px;
    padding: 0 15px;
}

@media screen and (max-width: 768px){
.map iframe {
    min-height: 400px;
}}
@media screen and (max-width: 600px){
.map iframe {
    min-height: 300px;
}}
@media screen and (max-width: 500px){
.map iframe {
    min-height: 280px;
}}