@charset "UTF-8";

/*!---------------------
*Copyright (c) 2021.
------------------------*/


/*************************
*********cus-main******
**************************/

main {
    overflow: hidden;
}

.no-gutter>[class*='col-'] {
    padding-right: 0;
    padding-left: 0;
}

.container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}


/*search*/

.no-gutter1>[class*='col-'] {
    padding-right: 2px;
    padding-left: 2px;
}

.center0 .img-responsive {
    margin: 0px auto;
}


/*************************
*******container0****two new*****
**************************/

.container0 {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container0:before,
.container0:after {
    display: table;
    content: " "
}

.container:after {
    clear: both;
}

.container0:before,
.container0:after {
    display: table;
    content: " "
}

.container0:after {
    clear: both;
}

@media(min-width:768px) {
    .container0 {
        width: 750px;
    }
}

@media(min-width:992px) {
    .container0 {
        width: 970px;
        /*970*/
    }
}

@media(min-width:1200px) {
    .container0 {
        width: 1170px;
        /*1170*/
    }
}

@media(min-width:1500px) {
    .container0 {
        width: 1450px;
        /*1170*/
    }
}

@media(min-width:1600px) {
    .container0 {
        width: 1550px;
        /*1170*/
    }
}


/*************************
*******container1************
**************************/

.container1 {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container1:before,
.container1:after {
    display: table;
    content: " "
}

.container1:after {
    clear: both;
}

.container1:before,
.container1:after {
    display: table;
    content: " "
}

.container1:after {
    clear: both;
}

@media(min-width:768px) {
    .container1 {
        width: 750px;
    }
}

@media(min-width:992px) {
    .container1 {
        width: 950px;
        /*970*/
    }
}

@media(min-width:1200px) {
    .container1 {
        width: 1170px;
        /*1170*/
    }
}

@media(min-width:1920px) {
    .container1 {
        width: 1500px;
        /*1170*/
    }
}


/*************************
*******container3***city***
**************************/

.container3 {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container3:before,
.container3:after {
    display: table;
    content: " "
}

.container3:after {
    clear: both;
}

.container3:before,
.container3:after {
    display: table;
    content: " "
}

.container3:after {
    clear: both;
}

@media(min-width:768px) {
    .container3 {
        width: 750px;
    }
}

@media(min-width:992px) {
    .container3 {
        width: 950px;
        /*970*/
    }
}

@media(min-width:1200px) {
    .container3 {
        width: 1000px;
        /*1170*/
    }
}

/*************************
*******container5***city***
**************************/

.container5 {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container5:before,
.container5:after {
    display: table;
    content: " "
}

.container5:after {
    clear: both;
}

.container5:before,
.container5:after {
    display: table;
    content: " "
}

.container5:after {
    clear: both;
}

@media(min-width:768px) {
    .container5 {
        width: 1000px;
    }
}


/*********************************************
*******container2***首頁選單台東民宿資訊網******
**********************************************/

.container2 {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container2:before,
.container2:after {
    display: table;
    content: " "
}

.container2:after {
    clear: both;
}

.container2:before,
.container2:after {
    display: table;
    content: " "
}

.container2:after {
    clear: both;
}

@media(min-width:768px) {
    .container2 {
        width: 750px;
    }
}

@media(min-width:992px) {
    .container2 {
        width: 950px;
        /*970*/
    }
}

@media(min-width:1200px) {
    .container2 {
        width: 1000px;
        /*1170*/
    }
}

@media(min-width:1920px) {
    .container2 {
        width: 1300px;
        /*1170*/
    }
}


/*************************
*****cus_slider*************
**************************/

@media(max-width:991px) {
    .cus_slider {
        margin-top: 0px;
    }
}

@media(max-width:768px) {
    .cus_slider {
        padding-top: 65px;
    }
}

@media(max-width:400px) {
    .cus_slider {
        margin-top: 0px;
    }
}


/*************************
*****services_one******
**************************/
#services_one {
    position: relative;
}

#services_one::before {
    content: '';
    background: url('../../images/linktop.png') no-repeat;
    position: absolute;
    top: -81px;
    left: 0;
    width: 100%;
    height: 88px;
    z-index: 10;
}

.onebgb {
    background: #f8f9e8;
    padding-bottom: 40px;
    position: relative;
}

.oneline {
    background-image: url(../../images/oneline.jpg);
    background-position: right top;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 66px;
}

.h1p {
    text-align: center;
    margin-bottom: 40px;
    color: #000;
    position: relative;
    top: -50px;
    z-index: 20;
    font-size: 16px;
}

hr.linkhr {
    background-image: url(../../images/linkhr.png);
    border-top: none;
    height: 1px;
    width: 60%;
    margin: 20px auto;
}

@media screen and (max-width: 1024px) {
    #services_one::before {
        background-size: contain;        
        width: 100%;
    }
}

@media screen and (max-width: 768px) {
    #services_one::before {
        width: 100%;
        top: -32px;
    }

    .h1p {
        font-size: 14px;
        top: 13px;
    }
}

@media screen and (max-width:600px) {
    .oneline {
        background-image: url(../../images/onelines.jpg);
        background-position: center top;
        background-repeat: no-repeat;
        background-size: cover;
        min-height: 66px;
    }

    .h1p {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 450px) {
    #services_one::before {
        width: 100%;
        top: -18px;
    }

    .h1p {
        font-size: 13px;
        top: 3px;
    }
}

/*----------------hot----------------*/
#bnb {
    padding-top: 50px;
    margin-top: -50px;
}

#services_hot {
    padding-top: 20px;
    padding-bottom: 80px;
}

.hot {
    width: 100%;
    box-sizing: border-box;
    display: inline-block;
}

.hottitle {
    display: inline-block;
    width: 100%;
}

.hottitle img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.hottitle img:nth-child(1) {
    width: 261px;
    max-width: 90%;
}

.hottitle img:nth-child(2) {
    width: 127px;
    max-width: 90%;
}

.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: 640px;
    display: inline-block;
    position: relative;
    top: 8px;
}

.swiper-container {
    width: 100%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {

    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: 50%;
        text-align: center;
        margin: 0 auto;
    }

    .hottitle img:nth-child(2) {
        max-width: 12%;
    }

    .hotfont {
        width: 76%;
    }
}

@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: 25%;
    }
}

/*************************
*****bbnews******
**************************/
.bbnews {
    margin: 3% 0% 46% 5%;
    position: relative;
}

/*************************
*******bbstory ******
**************************/

.bbstory {
    background-image: url(../../images/bbbg.jpg);
    background-position: center;
    background-repeat: repeat-y;
    background-size: auto;
    min-height: 350px;
    position: relative;
    margin-left: 2%;
}

.bbstory img {
    display: block;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}

.bbstorybg {
    position: absolute;
    top: -34px;
    left: -32px;

}

@media(max-width:1200px) {
    .bbstory {
        background-image: url(../../images/bbbg.jpg);
        background-position: center;
        background-repeat: repeat-y;
        background-size: 100% auto;
        margin-left: 50px;
        min-height: 0px;
        min-height: 50px;
        padding-bottom: 20px;
    }
}

@media(max-width:991px) {
    .bbstory {
        background-image: url(../../images/bbbg.jpg);
        background-position: center;
        background-repeat: repeat-y;
        background-size: auto;
        margin-top: 40px;
        margin-left: 0px;
        min-height: 50px;
    }
}

@media(max-width:768px) {
    .bbstorybg {
        top: 12px;
        left: 48px;
    }
}

@media(max-width:550px) {
    .bbstory {
        background-image: url(../../images/bbbg.jpg);
        background-position: center;
        background-repeat: repeat-y;
        background-size: 100% auto;
    }
}

.bnbsay {
    overflow: auto;
}

.bnbsay {
    padding-left: 0px;
}

@media(max-width:450px) {
    .bbstorybg {
        top: 11px;
        left: -27px;
    }
}

/*************************
*********ssbg******
**************************/

.ssbg {

    background-position: center;
    background-repeat: repeat-y;
    background-size: 99% 100%;
	width:650px;
}

.ssbgin {
    background: url(../../images/ssbg.jpg);
}

.partners ul li img {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
}

.partners ul {
    margin: 0;
    padding: 0;
}

.partners ul li {
    display: inline-block;
    float: left;
    width: 16.66666666666667%;
    border: #ffffff 1px solid;
}

@media(max-width:992px) {
    .partners ul li {
        display: inline-block;
        float: left;
        width: 12.5%;
    }
}

@media(max-width:992px) {
    .partners ul li {
        display: inline-block;
        float: left;
        width: 12.5%;
    }
}

@media(max-width:400px) {
    .partners ul li {
        display: inline-block;
        float: left;
        width: 16.66666666666667%;
    }
}

.partners ul li img:hover {
    -webkit-filter: grayscale(0);
    filter: grayscale(0);
}

@media(max-width:1200px) {
    .ssbg {
        margin-right: 0px;
        margin-left: 0px;
    }
}


/*************************
*****services_pre******
**************************/

#services_pre {
    padding-top: 20px;
    background: #e3dfd4;
    position: relative;
}

.prebg1 {
    position: absolute;
    top: -58px;
    left: 0;
    width: 1920px;
    max-width: 100%;
    height: 57px;
}

.pret {
    text-align: center;
}
.prebg {
    background-position: center;
    background-repeat: repeat;
    background-size: auto;
    padding-top: 15px;
    padding-bottom: 15px;
}

.line {
    /*background: url(../../images/line.png);*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 121px;
}

.pre{
    text-align: center;
}

.pre ul {
    margin: 0;
    padding: 0;
}

.pre ul li {
    display: inline-block;
    float: left;
    width: 20%;
}

@media(max-width:992px) {
    .pret img {
        margin: 0 auto;
    }
}
@media(max-width:768px) {
    .pret img {
        display: block;
        max-width: 50%;
        margin: 0 auto;
    }

    .pre ul li {
       padding-bottom: 3%;
    }

    .prebg1 {
        top: -24px;
        height: auto;
    }
}

@media(max-width:500px) {

    .prebg1 {
        top: -12px;
        height: auto;
    }
}



/*************************
*****services_photo******
**************************/

#services_photo {
    background: #ffffe8;
}

.photot .img-responsive {
    margin: 0px auto;
}

@media(max-width:992px) {
    .photot img {
        margin: 0 auto;
    }
}

.photo ul {
    margin: 0;
    padding: 0;
}

.photo ul li {
    display: inline-block;
    float: left;
    width: 25%;
}

@media(max-width:1200px) {
    .photo ul li {
        width: 33.33333%;
    }
}

@media(max-width:768px) {
    .photo ul li {
        width: 50%;
    }
}

@media(max-width:500px) {
    .photo ul li {
        width: 100%;
    }
}

.photobg {
    background-position: center;
    background-repeat: repeat;
    background-size: auto;
    padding-top: 15px;
    padding-bottom: 15px;
}

.line {
    /*background: url(../../images/line.png);*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 100px;
}

/*************************
*****services_rec******
**************************/
#services_rec {
    position: relative;
}

.recline {
    margin-top: -50px;
}

.rect {
    text-align: center;
}

.rec {
    text-align: center;
}

#services_rec::after {
    content: '';
    background-image: url(../../images/prebg2.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 104px;
    -webkit-filter: drop-shadow(6px -3px 5px rgba(0, 0, 0, 0.2));
    filter: drop-shadow(6px -3px 5px rgba(0, 0, 0, 0.2));
}
@media(max-width:992px) {
    .rec ul li {
        display: inline-block;
        float: left;
        width: 20%;
    }

    .rect img {
        margin: 0 auto;
    }
}
@media screen and (max-width: 768px) {
    .rect img {
        display: block;
        max-width: 50%;
        margin: 0 auto;
    }
    #services_rec::after {
    	height: 30px;
}
}

@media screen and (max-width:700px) {
    .recline {
        margin-top: -30px;
    }
}

@media screen and (max-width:500px) {
    .recline {
        margin-top: -20px;
    }
}

#services_rec {
    background: #e3dfd4;
    padding-bottom: 5%;
}

.rec ul {
    margin: 0;
    padding: 0;
}

.rec ul li {
    display: inline-block;
    float: left;
    width: 20%;
}





/*************************
*****services_city******
**************************/

#services_city {
    background: url(../../images/allbg.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    min-height: 860px;
    padding: 40px 0px;
}

@media screen and (max-width: 1200px) {
    #services_city {
        background: url(../../images/allbgm.jpg);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 40px 0px;
    }
}

@media screen and (max-width: 992px) {
    #services_city {
        background: url(../../images/allbgs.jpg);
        background-position: top;
        background-repeat: no-repeat;
        background-size: 100% 100%;
        padding: 40px 0px;
    }
}

@media screen and (max-width: 767px) {
    #services_city {
        background: #fbfbf0;
        padding: 40px 5px;
        min-height: 150px;
    }
}

@media(max-width:992px) {
    .project_five ul li {
        display: inline-block;
        float: left;
        width: 25%;
    }

    .project {
        margin: 40px 0px;
    }
}

.city {
    /*min-height: 30vh;*/
}

.city a {
    color: #35c5c5;
}

.city a:visited {
    color: #35c5c5;
}

.city a:hover,
a:focus {
    color: #000000;
}


/*************************
*****services_search******
**************************/

.searchbg {
    background-image: url(../../images/contentbg2.png), url(../../images/bodyimg.jpg);
    background-position: top left;
    background-repeat: repeat;
    background-size: auto;
    min-height: 300px;
    padding-bottom: 40px;
    padding-top: 60px;
}

.search ul {
    margin: 0;
    padding-left: 70px;
}

.search ul li {
    float: left;
    width: 100%;
}

@media(max-width:1366px) {
    .search ul {
        margin: 0;
        padding-left: 70px;
    }

    .search {
        padding-left: 0px;
        padding-right: 0px;
    }
}

@media(max-width:991px) {
    .search ul {
        margin: 0;
        padding-left: 50px;
    }

    .search {
        padding-left: 15px;
        padding-right: 15px;
    }
}

@media(max-width:768px) {
    .search ul {
        margin: 0;
        padding-left: 80px;
    }
}

@media(max-width:400px) {
    .search ul {
        margin: 0;
        padding-left: 60px;
    }
}

.search_01 {
    background-image: url(../../images/search_01.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: auto;
    min-height: 479px;
}

.search_02 {
    background-image: url(../../images/search_02.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: auto;
    min-height: 239px;
}

.search_05 {
    background-image: url(../../images/search_05.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: auto;
    min-height: 240px;
}

.search_03 {
    background-image: url(../../images/search_03.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: auto;
    min-height: 479px;
}

.search_04 {
    background-image: url(../../images/search_04.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: auto;
    min-height: 479px;
}

@media(max-width:768px) {
    .search_02 {
        min-height: 290px;
    }

    .search_05 {
        min-height: 290px;
    }

    .search_03 {
        margin-top: 40px;
    }
}

@media(max-width:767px) {
    .search_04 {
        margin-top: 40px;
        min-height: 350px;
    }

    .search_03 {
        min-height: 250px;
        margin-top: 0px;
    }

    .search_02 {
        margin-top: 40px;
    }
}

.search a {
    color: #353535;
}

.search a:visited,
.search a:focus {
    color: #353535;
}

.search a:hover {
    color: #35c5c5;
}


/*************************
*****services_news******
**************************/

#services_news {
    background-color: #fce4a9;
    position: relative;
    padding: 5% 0;
}

.newstop::before {
    content: '';
    background: url(../../images/linktop.png) no-repeat;
    position: absolute;
    background-size: contain;
    top: -199px;
    left: 0;
    width: 100%;
    height: 116px;
    z-index: 10;
}

.newsline2 {
    background-image: url(../../images/newsline.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    height: 84px;
    position: absolute;
    top: -84px;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: #f8f9e8;
}

.adtitle5 {
    position: relative;
    top: -282px;
    left: 454px;
}

.adtitle51 {
    position: absolute;
    top: -186px;
    left: 52%;
    transform: translateX(-52%);
    z-index: 20;
}
.adtitle10 {
    position: absolute;
    top: -107px;
    left: 52%;
    transform: translateX(-52%);
    z-index: 20;
}

.newstable {
    padding: 6% 6% 13% 6%;
}

.newstable img {
    display: block;
    height: auto;
    max-width: 100%;
    max-height: auto;
}
.newsphoto {
    position: absolute;
    bottom: 17px;    
    right: 27px; 
}
#services_news a {
    color: #f00;
}

#services_news a:visited {
    color: #ff6a00;
}

#services_news a:hover,
a:focus {
    color: #000000;
}

.project_five ul {
    padding: 0;
    margin: 0;
}

.project_five ul li {
    display: inline-block;
    float: left;
    width: 12.5%;
}

@media screen and (max-width:768px) {
    .newstop::before {
        background-size: contain;
        top: -80px;
    }

    .newstable img {
        max-width: 1999px;
    }

    .table-responsive {
        border: 0px solid transparent;
    }

    .adtitle5 {
        position: relative;
        top: -222px;
        left: 234px;
    }

    .adtitle51 {
        max-width: 23%;
        top: -77px;
    }
    .adtitle10 {
        max-width: 30%;
        top: -41px;
    }

    .newsline2 {
        height: 34px;
        top: -34px;
    }
    .newstable {
    padding: 6% 6% 20% 6%;
}
}

@media screen and (max-width:450px) {
    .adtitle5 {
        max-width: 50%;
        top: -142px;
        left: 114px;
    }

    .newstop::before {
        top: -41px;
    }

    .adtitle51 {
        max-width: 40%;
        top: -11px;
        position: relative;
    }
    .adtitle10 {
        max-width: 40%;
        top: -14px;
        position: relative;
    }

    .newsline2 {
        height: 18px;
        top: -17px;
    }
    .newstable {
    padding: 6% 6% 39% 6%;
}
}

/*************************
*******services_100 ******
**************************/

#services_100 {
    background: #edf3e5 url(../../images/orange.png);
    background-position: bottom left;
    background-repeat: no-repeat;
    background-size: auto;
    padding-bottom: 290px;
}

#services_100 h1 {
    font-size: 20px;
    font-weight: 700;
    color: #62a39c;
}

#services_100 a {
    color: #353535;
}

#services_100 a:visited,
#services_100 a:focus {
    color: #353535;
}

#services_100 a:hover {
    color: #35c5c5;
}

.h100 {
    padding-bottom: 20px;
}

.h100 ul {
    padding-left: 40px;
    margin: 0;
}

.h100 ul li {
    float: left;
    width: 50%;
}

.h1002 ul {
    padding-left: 40px;
    margin: 0;
}

.h1002 ul li {
    float: left;
    width: 25%;
}

.hundred p {
    text-align: center;
}

.animate_Flashing img:hover {
    opacity: 1;
    -webkit-animation: flash 1.5s;
    animation: flash 1.5s;
}

@-webkit-keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

@media screen and (max-width:1450px) {
    .hundred p {
        font-size: 12px;
    }
}

@media screen and (max-width:1200px) {
    .h1002 ul li {
        float: left;
        width: 33.333333%;
    }
}

@media screen and (max-width:992px) {
    .h100 ul li {
        font-size: 12px;
        float: left;
        width: 100%;
    }
}


}

@media screen and (max-width:767px) {
    
    .h100 ul li {
        font-size: 14px;
        float: left;
        width: 50%;
    }
}

@media screen and (max-width:550px) {
    .h1002 ul li {
        float: left;
        width: 50%;
    }
}

@media screen and (max-width:450px) {
    .h100 ul li {
        font-size: 14px;
        float: left;
        width: 100%;
    }

    .h1002 ul li {
        float: left;
        width: 100%;
    }
    #services_100 {
        background: #edf5e5;
    }
}

@media screen and (max-width:350px) {
    .hundred p {
        font-size: 12px;
    }
}


/*************************
*******services_info******
**************************/
#services_info {
    padding-top: 40px;
    padding-bottom: 40px;
}

/*******************20160503夏戀嘉年華********************/

/*************************
*******services_contact ******
**************************/
#services_contact {
    background-color: #ffffe8;
    padding: 50px 0;
}

#services_contact a {
    color: #878787;
}

#services_contact a:visited {
    color: #878787;
}

#services_contact a:hover,
a:focus {
    color: #000000;
}

/*************************
*****tel******
**************************/
.tel {
    color: #878787;
    font-size: 15px;
}

.telb {
    font-size: 22px;
    margin-top: 10px;
}

.telb_blue {
    color: #a2aebf;
}

/*************************
*******animate ***********
**************************/
.animate_flash img:hover {
    opacity: 1;
    -webkit-animation: flash 1.5s;
    animation: flash 1.5s;
}

@-webkit-keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

@keyframes flash {
    0% {
        opacity: .4;
    }

    100% {
        opacity: 1;
    }
}

/*************************
*****footer***************
**************************/
.footer a {
    color: #ffffff;
}

.footer a:visited {
    color: #ffffff;
}

.footer a:hover,
a:focus {
    color: #878787;
}

/*************20160329台東民宿資訊網*************************/

/*************************
****slidershow  - fade******
**************************/
.carousel-fade .carousel-inner .item {
    opacity: 0;
    transition-property: opacity;
}

.carousel-fade .carousel-inner .active {
    opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
    left: 0;
    opacity: 0;
    z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
    opacity: 1;
}

.carousel-fade .carousel-control {
    z-index: 2;
}

/************左右鍵背景透明*************/
.carousel-control.left {
    background-image: -webkit-linear-gradient(left, color-stop(rgba(255, 255, 255, 0.1) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.1) 0, rgba(0, 0, 0, 0.0001) 100%);
}

.carousel-control.right {
    background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(255, 255, 255, 0.1) 100%));
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(255, 255, 255, 0.1) 100%);
}

/*******slider-自訂********/
.carousel-control {
    padding-top: 25%;
}

/****************two***左右鍵自訂****************/
.two .carousel-control.right {
    padding-right: 20%;
}

@media screen and (max-width:768px) {
    .two .carousel-control.left {
        padding-left: 0px;
    }

    .two .carousel-control.right {
        padding-right: 25%;
    }
}

@media screen and (max-width:650px) {
    .two .carousel-control.left {
        padding-left: 0%;
    }
}

/****************three***左右鍵自訂******************/
@media screen and (max-width:768px) {
    .three .carousel-control.right {
        margin-right: 4%;
    }

    .three .carousel-control.left {
        margin-left: 4%;
    }
}

@media screen and (max-width:600px) {
    .three .carousel-control.right {
        margin-right: 0%;
    }

    .three .carousel-control.left {
        margin-left: 0%;
    }
}

/*************************
*********slidershow******
**************************/
.hide-bullets {
    list-style: none;
    margin-left: -40px;
    margin-top: 0px;
    text-align: right;
    cursor: pointer;
    line-height: 22px;
    color: #000;
}

.thumbnail {
    padding: 0;
}

.carousel-inner>.item>img,
.carousel-inner>.item>a>img {
    width: 100%;
}

.hide-bullets a {
    color: #000;
}

.hide-bullets a:link {
    color: #000;
}

.hide-bullets a:visited {
    color: #000;
}

.hide-bullets a:hover {
    color: #a16b55;
}

/*************************
*****services_news******
**************************/
#services_newsb {
    padding-bottom: 20px;
    min-height: 60vh;
    background: #edf5e5;
}

#services_newsb a {
    color: #2f578e;
}

#services_newsb a:visited {
    color: #2f578e;
}

#services_newsb a:hover {
    color: #000000;
}

.newsline1 {
    background-image: url(../../images/newsline.png);
    background-position: top left;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 84px;
    position: absolute;
    top: -84px;
    left: 0;
    width: 100%;
}

.newsbg {
    border: 1px solid #000;
    border-radius: 20px;
    background-color: #fce4a9;
    position: relative;
}

.newsbg::before {
    content: "........." !important;
    width: 100%;
    font-size: 21px;
    font-weight: 700;
    text-align: center;
}


@media screen and (max-width:768px) {
    .newsline1 {
        background-size: contain;
        top: -33px;
    }
}

@media screen and (max-width:450px) {
    .newsline1 {
        background-size: contain;
        top: -17px;
    }
}

/*************************
*****services_two******
**************************/
#services_two {
    background: url(../../images/twobg_01.png) top right no-repeat, url(../../images/twobg_02.png) bottom left no-repeat;
    background-color: #f2e2ce;
    background-size: contain;
    padding-bottom: 8%;
}

.twobg {
    padding: 5rem 0;
}

#services_two .popbg {
    border: 15px solid #9dc47f;
    border-radius: 20px;
}

.quick {
    text-align: center;
}

.quickbg {
    background: url(../../images/fquickbg.png);
    background-size: cover;
    text-align: center;
    width: 534px;
    height: 361px;
    max-width: 100%;
    padding: 5%;
    margin: 0 auto;
}

.quickbg ul {
    margin: 0 auto;
    padding-top: 1rem;
}

.quickbg ul li {
    float: left;
    width: 26%;
    list-style: none;
}

.quickbg a {
    color: #333;
}

.quickbg a:hover {
    color: #fff;
    text-decoration: none;
}

@media screen and (max-width:768px) {
    #services_two {
        background-size: contain;
    }

    .quickbg {
        background-size: auto;
        height: 426px;
        text-align: center;
    }

    .adtitle2 {
        display: block;
        max-width: 50%;
        margin: 0 auto;
    }
}

@media screen and (max-width: 450px) {
    .quickbg {
        background-size: contain;
        background-repeat: no-repeat;
        line-height: 23px;
        height: 316px;
    }
    .quickbg ul li {
    width: 31%;
}
}

/*************************
*****bnbnews***************
**************************/
.bnbnews {
    border: 15px solid #9dc47f;
    border-radius: 20px;
    background-color: #e8e8e8;
    position: relative;
    width: 612px;
    height: auto;
    max-width: 100%;
    margin-left: 4%;
}

.bnbnewstitle {
    position: absolute;
    top: -39px;
    left: 0;
    max-width: 90%;
}

.bnbnewsm {
	padding-top: 16%;
}
@media screen and (max-width:768px) {
    .bnbnews {
        margin: 7% 0 8% -3%;
    }
}

@media screen and (max-width:450px) {
    .bnbnews {
        margin: 10% 0 8% -3%;
    }
}

/*************************
*********services_isce*****
**************************/
#scenery {
    padding: 2em 0;
}

#services_isce {
    background: url(../../images/index1bg.jpg);
    background-position: top left;
    background-size: auto;
    background-repeat: repeat;
}

#services_isce h2 {
    color: #fff;
    padding-bottom: 15px;
    text-align: center;
    background-image: url(../../images/isceline.png);
    background-position: center bottom;
    background-size: auto;
    background-repeat: no-repeat;
    font-size: 22px;
    padding: 10px 0;
}

.iscebg {
    background-image: url(../../images/iscebg.jpg);
    background-position: center bottom;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 0 200px;
}

.iscemore {
    background-image: url(../../images/iscemore.png);
    background-position: right bottom;
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 16px;
}

.isce h2 span.iscenew {
    background: #dc5127;
    border-radius: 10px;
    font-size: 12px;
    padding: 2px 5px;
    vertical-align: middle;
    margin-right: 5px;
}

.isce h2 span.iscehot {
    background: #af2411;
    border-radius: 10px;
    font-size: 12px;
    padding: 2px 5px;
    vertical-align: middle;
    margin-right: 5px;
}

.isce {
    padding-top: 80px;
    padding-bottom: 60px;
}

.isce ul {
    margin: 0;
    padding: 0;
}

.isce ul li {
    display: inline-block;
    float: left;
    width: 25%;
    padding: 0 35px;
}

.isce ul li img {
    margin: 0 auto;
}

.isce ul li p {
    color: #fff;
}

.iscebtn img {
    margin: 0 auto;
    padding-bottom: 80px;
}

@media(max-width:1700px) {
    .iscebg {
        padding: 0 100px;
    }
}

@media(max-width:1550px) {
    .iscebg {
        padding: 0 20px;
    }

    .isce ul li {
        padding: 0 15px;
    }
}

@media(max-width:1250px) {
    #services_isce h2 {
        font-size: 20px;
    }

    .isce ul li p {
        font-size: 14px;
        line-height: 26px;
    }
}

@media(max-width:1100px) {
    #services_isce h2 {
        font-size: 16px;
    }
}

@media(max-width:991px) {
    #services_isce h2 {
        font-size: 20px;
    }

    .isce ul li {
        display: inline-block;
        float: left;
        width: 50%;
    }

    .iscebg {
        padding: 0 150px;
    }

    .isce ul li:nth-child(3) {
        clear: both;
    }

    .iscemore {
        margin-bottom: 20px;
    }

    .isce {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .iscebtn img {
        margin: 0 auto;
        padding-bottom: 20px;
    }
}

@media(max-width:850px) {
    .iscebg {
        padding: 0 80px;
    }
}

@media(max-width:700px) {
    .iscebg {
        padding: 0 15px;
    }

    .iscebtn img {
        max-width: 300px;
    }
}

@media(max-width:500px) {
    .isce ul li {
        display: inline-block;
        float: left;
        width: 100%;
    }

    .iscebg {
        padding: 0 80px;
    }
}

@media(max-width:450px) {
    .iscebg {
        padding: 0 10px;
    }

    .isce ul li {
        width: 50%;
    }

    .iscemore {
        background-image: url(../../images/iscemore.png);
        background-position: right bottom;
        background-size: auto;
        background-repeat: no-repeat;
        min-height: 16px;
    }

    .iscebtn img {
        max-width: 250px;
    }

    #services_isce h2 {
        font-size: 18px;
        line-height: 25px;
        padding: 10px 0;
    }

    .isce {
        padding-bottom: 0;
    }

    iscebtn {
        padding-bottom: 20px;
    }
}

@media(max-width:380px) {
    .iscebg {
        padding: 0 5px;
    }

    .iscebtn img {
        max-width: 80%;
    }
}

.isce li:hover {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    transform: translateY(-10px);
}

.isce ul li:hover img {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    opacity: 0.7;
}

.iscebtn img {
    position: relative;
    -webkit-animation: aniscebtn 0.6s infinite;
    animation: aniscebtn 0.6s infinite;
}

.iscebtn:hover img {
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    transform: scale(0.9);
    transform-origin: center center;
}

@-webkit-keyframes aniscebtn {
    0% {
        top: 0;
    }

    50% {
        top: 10px;
    }

    100% {
        top: 2px;
    }
}

@keyframes aniscebtn {
    0% {
        top: 0;
    }

    50% {
        top: 10px;
    }

    100% {
        top: 2px;
    }
}
nav.navbar.bootsnav{
	z-index: 999 !important; 
}
/*---------------adblock---------------------------------*/
#services_area {
    background-color: #f8f9e8;
    position: relative;
    padding: 5% 0;
}

.areatop::before {
    content: '';
    background: url(../../images/linktop.png) no-repeat;
    position: absolute;
    top: -109px;
    left: 0;
    width: 100%;
    height: 116px;
    z-index: 10;
    background-size: contain;
    background-repeat: no-repeat;
}
	.adblock {
		width:1300px;
		margin:0 auto;
		max-width:90%;
		text-align:left;
	}
    .adblock1 {
        width:1500px;
        margin:0 auto;
        max-width:100%;
        text-align:left;
    }
		/*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;
			}
            @media screen and (max-width: 768px) {
                .areatop::before {
                    top: -46px;
                }
                
            }
            @media screen and (max-width: 450px) {
                .areatop::before {
                    top: -25px;
                }
                
            }
			@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: 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;
					}
						.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 {
						/*background:#f2f2f2 !important;*/
					}
		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*/
.space {
	height:10vh;
}
/*---filter_block--------------------------------------------------------------------------------------------------------------------------*/
.filter_block {
	position:relative;
	text-align:center;
}
.filter_block p{
    display: none;
}
	.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;
			}
		}