﻿/* ===== 防止畫面右方出現空白 =====*/
/*html, body {width: auto !important; overflow-x: hidden !important;}*/

* { font-family: Microsoft JhengHei,細明體,Arial;}
.pd_0 { padding-left:0px; padding-right:0px;}
.pdl_0 { padding-left:0px;}
.pdr_0 { padding-right:0px;}
.txt_jus { text-align:justify;}

/* ----- goTOP開始 ----- */
#gotop { display: none; position: fixed; right: 20px; bottom: 20px;  padding: 10px 15px; font-size: 16px; background: #777;  color: white;  cursor: pointer; border-radius: 5px; line-height: 30px;  font-weight: bolder; z-index: 999;}
@media screen and (min-width:768px) {
    #gotop { /*right: 0px; background:rgba(199, 199, 199, 0.78);*/}
}
#gotop img { width: 30px; height: 30px;}
#gotop span { margin-left: 3px; color: #00CCCC;}
/* ----- goTop結束 ----- */


/* ----- 選單開始 ----- */

#about h2, #facilities h2, #services h2,#pack h2 ,#news h2, #preferential h2,  #portfolio h2, #guestbook h2 , #map h2, #contact h2 { border-radius: 0 0 15px 15px;}
/*.main_sider {background: #383e41;}*/
.main_sider { float: left; width: 23%; height: 100%; position: fixed; /*background-color: #495054;*/ color: white; }

li.home a.active ,li.home a:hover { color: #38a9e3 !important; }
li.about a.active,li.about a:hover { color: #e9b144 !important; }
li.services a.active,li.services a:hover { color: #974dea !important; }
li.portfolio a.active,li.portfolio a:hover { color: #38e395 !important; }
li.contact a.active,li.contact a:hover { color: #e3387c !important; }


li.facilities a {border-color: #4EC3F6;}
li.facilities a.active,li.facilities a:hover  { color: #4EC3F6 !important;}
#facilities .section-title { border-color: #4EC3F6;}
#facilities h2 {background-color: rgba(20,180,245, 0.78);}

li.guestbook a {border-color: #ff6a00;}
li.guestbook a.active,li.guestbook a:hover  { color: #ff6a00 !important;}
#guestbook .section-title { border-color: #ff6a00;}
#guestbook h2 {background-color: rgba(255, 106, 0, 0.78);}

li.map a {border-color: #FFCC99;}
li.map a.active,li.map a:hover { color: #FFCC99 !important; }
#map .section-title { border-color: #FFC078;}
#map h2 { background-color: rgba(255, 190, 120, 0.78);}

li.pack a {border-color: #FF0000;}
li.pack a.active,li.pack a:hover { color: #FF0000 !important; }
#pack .section-title { border-color: #FF0000;}
#pack h2 { background-color: rgba(255, 0, 0, 0.78);}

li.news a {border-color: #BD7C2B;}
li.news a.active,li.news a:hover { color: #BD7C2B !important; }
#news .section-title { border-color: #BD7C2B;}
#news h2 { background-color: rgba(189, 124, 43, 0.78);}

li.preferential a {border-color: #15EAF5;}
li.preferential a.active,li.preferential a:hover { color: #15EAF5 !important; }
#preferential .section-title { border-color: #15EAF5;}
#preferential h2 { background-color: rgba(21,234,245, 0.78);}

.main-menu li a {background:none; padding:10px 30px; font-size: 16px; /*border-bottom: 1px solid #495054;*/ margin-bottom: 0px;}
/*.main-menu li:first-child { border-top: 1px solid #495054;}*/
.main-menu li a:hover { text-decoration: none;}
.responsive-menu { background-color:rgba(255,255,255,0);}
a.menu-toggle-btn { /*background-color: #333;*/ background-color: rgba(255,255,255,0);}
.logo_s {display:none; background-color: rgba(255,255,255,0);}
@media screen and (max-width:480px) {
    .responsive-navigation {overflow:hidden;/*background-color: #333;*/ background-color: rgba(255,255,255,0);}
    a.menu-toggle-btn { width: 15%; text-align: left; padding-right: 10px; float:right;}
    .logo_s { display:block; width: 85%; float: left; line-height: 60px; padding-left: 25%; /*background-color:#333;*/ background-color: rgba(255,255,255,0);}
    .logo_s img {    width: 45%;  max-height: 60px; margin:0 auto;}
    .main_sider {clear:both;}
    .responsive-menu ul li.home a {margin-top:60px;}
    .title_m {padding-left: 0px;  padding-right: 0px;  margin-left: -20px;  margin-right: -20px; text-align:center;}
}

@media screen and (max-width:768px) {
    .responsive-menu ul li a {padding: 15px; font-size: 16px; }
}
/* ----- 選單結束 ------ */


/* ----- 區塊文字 ----- */

/*#main-content { background-image: url(../images/bg.jpg);}*/
.main-content, .full-width-slider { float: right; width: 77%; }

@media (max-width: 991px) {
    .main-content {  width: 100%;    }
}
.section-title { margin-bottom: 30px;}
.section-title h2 { color: #fff; font-weight: 500; }
.section-content { margin-bottom: 50px;}
@media screen and (max-width:480px) {
    .section-title h2 { font-size:18px; }
}

/* ----- 首頁開始 ----- */
.flexslider img { opacity: 1;}
@media screen and (min-width:480px) {
    .flexslider .slides li .slider-caption img { top: -150px;}
}
.flexslider .slides li .slider-caption img { width: 35%; left: 20px;}
.flex-control-nav {bottom:0px;}
.flex-control-paging li a {width:13px; height:13px; border-radius:50%;}

@media screen and (min-width:769px) {
    /* 輪播圖片在ipad畫面放橫的時候下方會有黑色 */
    .main-slider,.flexslider,.flexslider .slides { height:auto; max-height: 550px;}
}

@media screen and (max-width:768px) {
    .album{ margin: 25px 0 10px 0 ;}
}

/* ----- 首頁結束 ----- */

/* ----- Logo開始 ----- */
.logo { background-color: transparent; text-align: center; padding: 25px 0; margin: 25px 0;}/* margin:50px 0; 筆電看會被檔到 */
.logo a img { max-height:150px; width:auto; max-width: 90%; /*width: 100%;*/  }
/* ----- Logo結束 ----- */

/* ----- 關於我們開始 ----- */
.our-story { background-color: rgba(51, 51, 51, 0.78); padding: 20px; margin-top: 0px;}
.our-story p { color: #FFF;}
.picB img { width: 100%;}
.picS { margin-top: 10px;}
.picS img { padding: 5px 2px 2px 2px; }
.picS img:hover { cursor:pointer;}
@media screen and (max-width:480px) {
    .our-story { margin-left:-20px; margin-right:-20px;}
    .our-story .row .col-md-7 {padding-left: 5px;  padding-right: 5px;  /* margin-left: -5px; */  margin-right: -5px;}
}

@media screen and (max-width:768px) {
    #about .section-title {
        margin-bottom:0px;
    }
    .calls {
        text-align:right;
        float: right;
        margin-bottom:15px;
    }
    .cus_img1 {margin: 15px auto 0;}
}


/* ----- 關於我們結束 ----- */

/* ----- 服務設施開始 ----- */
.float_L {float: left;}
.ser {width: 14%;}
@media screen and (min-width:769px) {
     .ser img {width: 70%;}
}
@media screen and (max-width:768px) and (min-width:481px) {
     .ser {width: 20%; margin-top: 5px;}
}
@media screen and (max-width:480px) {
     .ser { width: 30%; margin: 5px 2px;}
     .ser p {line-height: 18px;}
}
.img-center {margin: 0 auto;}
/* ----- 服務設施結束 ----- */

/* ----- 房型介紹開始 ----- */
.service-item {background-color: transparent;}
.service-item .service-content { width: 100%; padding: 20px;}
.service-item .service-content a { text-decoration: none;color: #777; }
.service-item .service-content h3 { padding-top: 10px; font-size: 1em; }
.zoom_img { background: rgba(0,0,0,1); position:relative; overflow:hidden;  }
.zoom_img img { opacity: 1;  }
.zoom_img:hover img {  opacity: .5; }
.zoom_img .over_txt { position:absolute; top:45%; left:45%; z-index:-2; color:#FFF; font-size:30px; font-weight:bold;} 
.zoom_img:hover .over_txt { z-index:5;} 

.cus_img { margin: 10px 5px;}
@media screen and (min-width:769px) {
            .customLink {float: right;}
}
@media screen and (max-width:768px) and (min-width:481px) {
            .customLink {float: right; width: 60%;}
            .cus_img {width: 45%;}
}
@media screen and (max-width:480px) {
            .cus_img {width: 45%; margin: 15px 5px 0;}
}
/*@media screen and (max-width:768px) {
    .service-item .service-content { padding: 0px; }
}*/

@media screen and (min-width:769px) {
    .zoom_img:hover img ,.zoom_img:hover .over_txt { transition:all ease-in 0.4s;} 
}

@media screen and (max-width:768px) {
    .service-item .service-content { padding: 0px; }
}
/* ----- 房型介紹結束 ----- */


/* ----- 房型介紹內頁開始 ----- */
.service-de-content {margin: 0px auto; max-width: 1000px; padding-bottom: 30px;}
.otherRoom {margin: 20px auto; width: 150px; background: #5D5D5D; text-align: center; padding-top: 5px; padding-bottom: 5px;}
.fotorama {padding-bottom: 20px;}
.fotorama__nav{text-align:left;}
.abgne_tab ul#tabs {margin-left: -40px; font-size:18px;}
@media screen and (max-width:480px) {
    .abgne_tab ul#tabs {font-size:14px;}
    #tabs li {padding:10px;}
    .service-de-item {margin-left:-30px; margin-right:-30px;}
    .tab_Price {margin-left: 5px; margin-right: 10px;}
}
.tab_Price {padding-top: 10px; margin-left:15px;}
.tab_Price #room_title {background: url(../images/Room_Name.png) no-repeat; line-height: 85px; padding-left: 100px;}
.tab_Price #room_title span {font-size: 18px; font-weight:900;}
.spbear {line-height:85px;  padding-left:100px; font-size:18px; color:#000;}
#price_block {padding-top:15px;padding-bottom:15px;}
@media screen and (max-width:768px) {
    .spbear {padding-left:80px; font-size:16px;}
    #price_block {padding-top:15px;padding-bottom:15px; margin-left:-30px;}
}

.price_tw {text-align: center; line-height: 35px; padding:5px; background-color:#4DC4C4; margin-bottom:5px;}
.add_de {border-bottom:2px dotted  #C0C0C0; color:#000; border-top:2px dotted  #C0C0C0; /*padding: 5px 10px 5px 0px;*/ line-height:1.8em; text-indent:-3em; padding-left:3em; padding-top:5px; padding-bottom:5px; }
.holi_de { color:#00A6A6; font-weight:bold; padding-top:15px;padding-bottom:15px; }
.holi_de ul { list-style:none; margin-left:-40px;}
.holi_de ul li {  text-indent:-1em;  padding-left:1em;  }
.holi_de ul li a { color:#00A6A6; }
.holi_de ul li a:hover { text-decoration:none; }
.booking_tip span {color: #FF2525; font-size: 14px; font-weight:900;}
.tab_Facility ,.tab_Service, .tab_Order_Notes {color: #000;}
.otherRoom { margin: 20px auto; width: 150px;  background: #5D5D5D; text-align: center; padding-top: 5px;  padding-bottom: 5px;}
.otherRoom a  { color: yellow; text-decoration:none;}
.otherRoom a:hover  { color:#4DC4C4; }
.noPM { padding-left: 0px; padding-right: 0px; margin-right: 0px; margin-left: 0px;}


/* ----- 房型介紹內頁結束 ----- */


/* ----- 訂房須知開始 ----- */
.notes img {padding-top: 15px; padding-bottom: 15px;}
.note_title {cursor:pointer; width:40%;}
@media screen and (max-width:768px) {
    .note_title {width:100%;}
}
.note_title span{padding-left:10px;}
@media screen and (max-width:480px) {
    /*#portfolio .row:nth-child(2) {  margin-left: -20px;  margin-right: -20px; }*/
    #portfolio .row:nth-child(2) .col-md-12 { padding-left:0px; padding-right:0px;}
}
/* ----- 訂房須知結束 ----- */


/* ----- 留言版開始 ----- */
/*.form-group { color: black;}*/
#txtCheck {color:#333;}
.form-group div { padding-bottom:5px;}
.form-horizontal .control-label {text-align:right; padding-right:5px;}
.msg-title {margin-right:0px; padding-right:0px; text-align:right;}
.GB .row { margin-right:0px;}
.feedback-form .form-group label {padding-left:0px; padding-right:0px; text-align: right;}

.divGBook { background-color: white; position: relative; height: 500px; overflow-y: auto; padding-top: 20px; margin-top: 20px;  border-radius: 3px; color:#333;}
.btnSend {/*width: 100%;*/ color: white; background-color: #1D81CD; padding: 5px 15px; margin: 10px;}
.GB {width:85%; margin:0 auto;}

@media screen and (min-width:768px) {
    .screct { text-align: right; }
    .screct .GB_msg { display:inline-block;}    
}

@media screen and (max-width:480px) {    
    .screct .GB_msg { width:100%; text-align:right; padding-left:0px; padding-right:0px;}
}

@media screen and (max-width:768px) {
    .GB {width:100%; margin:0 auto;}
}
/* ----- 留言版結束 ----- */

/* ----- 交通指引開始 ----- */
#divMap {min-height:400px;}
/*@media screen and (min-width:768px) {*/
    .border_Map { padding: 5px; border: 1px solid #d5dbe0; border-radius: 5px; background: #FFF; margin-bottom:15px; }
/*}*/
.mapBnb {position:relative;text-align:left;width:300px;height:250px;overflow:hidden;}
.div_Mapinfo {padding:20px 10px;}
.map_data {color:#000;  background:#FFF;  border-radius:5px;}

/* ----- 交通指引結束 ----- */

/* ----- 聯絡我們開始 ----- */
.social .social-footer ul { list-style:none; padding:5px 0;}
.social .social-footer ul li a { width:50px; height:50px; border-radius:50%; background:#3765A3; line-height:50px; text-align:center; color:#FFF; font-weight: 900;}
.social .social-footer ul li a:hover { text-decoration:none; color:#3765A3; background:#FFF;}
.social {
    width: 60px;
    float: left;
}
.blog {
    float: left;
    line-height: 60px;
    font-size: 1.2em;
}

/* ----- 聯絡我們結束 ----- */


/* ----- footer 開始 ----- */
.first-footer {border-left: none; background-color: transparent; padding:30px;}

.footer_m {display:none;}
.bottom-footer {background-color: rgba(35,36,39,0.8);}

@media screen and (max-width:768px) {
    .copyright, .credits p {text-align: center;}
    .footer_m {display:block;}
    .footer_m .navigation ul {overflow:hidden;margin-top:10px; margin-bottom:10px;padding-left: 0px;}
    .footer_m .navigation ul li{float:left; list-style:none; width:20%; margin-top:2px; margin-bottom:2px; border-left:2px solid #FFF; }
    .footer_m .navigation ul li:nth-child(5n+1) {border-left:none;}
    .footer_m .navigation ul li a{display:block; text-decoration:none; text-align:center; font-size:16px;    }
    .footer_m .navigation ul li a:hover{}   
    @media screen and (max-width:480px) {
        .footer_m .navigation ul li{width:33.33%; }
        .footer_m .navigation ul li:nth-child(5n+1) {border-left:2px solid #FFF;}
        .footer_m .navigation ul li:nth-child(3n+1) {border-left:none;}
    } 
}

@media screen and (min-width:768px) {
    .bottom-footer .credits {padding-right: 60px;}    
}
/*.bottom-footer .credits*/
/* ----- footer 結束 ----- */


