@charset "utf-8";
/* CSS Document */


.tour{
	width: 100%;
	max-width:1150px;
	padding-left: 0%!important;
	padding-right: 0%!important;
	margin: auto;
	box-sizing: border-box;	 
	display: table;
	
}
.tour ol {
	padding-left: 20PX;
    list-style-type: decimal!important;
}
.tour .row {
   
   margin: 0; 
}
.tour b {
    font-weight: 500!important;
}
.tour img{
	max-width: 100%;
	margin: 0 auto;
}
.tour .pic-full img{
	width: 100%;
	margin: 0 auto;
	
}


.tour p{
	
    color: #464646!important;
    text-align: justify;
    font-family: 'Noto Sans TC','Jost', sans-serif!important;
     margin-bottom: 1px;
   
	
	 font-weight: 300;
}
.tour h1 {
   font-size: 42px !important;
    line-height: 1.2 !important;
    CONTAIN-INTRINSIC-BLOCK-SIZE: AUTO 100PX;
    text-align: center;
    font-weight: 700;
    font-family: 'Noto Sans TC', 'Jost', sans-serif !important;
    margin-top: 0 !important;
    margin-bottom: 2% !important;
    color: #1c312a;
}
.tour h1 span{
        font-size: 31px!important;
    line-height: 1.2!important;
    letter-spacing: 1px;
    text-align: center;
    font-weight: 700;
    font-family: 'Noto Sans TC','Jost', sans-serif!important;
    margin-top: 0!important;
    margin-bottom: 2%!important;
    color: #fff;
	/*background: #0b90ac;*/
	background: linear-gradient(transparent 12%, #1c312a 12%);
}
.tour h2{
	    font-size: 28px !important;
    line-height: 1 !important;
    color: #ac4e42;
    margin-bottom: 0.5% !important;
    font-family: 'Noto Sans TC', 'Jost', sans-serif !important;
    font-weight: 300 !important;
}
.tour .slogan{    font-size: 18px!important;
    line-height: 24px!important;
    text-align: center;
    font-weight: 300;
     font-family: 'Noto Sans TC','Jost', sans-serif!important;
    margin-top: 0!important;
    margin-bottom: 2%!important;
    color: #404040!important;}
.tour .add{ 
    font-size: 18px!important;
    line-height: 24px!important;
    font-weight: 100;
    font-family: 'Noto Sans TC','Jost', sans-serif!important;
    margin-top: 0!important;
    margin-bottom: 2%!important;
    color: #404040!important;
    text-decoration-line: underline;}

.tour h3 {
        font-size: 21px !important;
    line-height: 1 !important;
    color: #2c2c2c !important;
    margin-top: 10px;
    margin-bottom: 0px !important;
    /* font-family: 'Noto Sans TC', 'Jost', sans-serif !important; */
    font-weight: 100 !important;
}





.tour h4 {
display: inline-block;
    color: #fff !important;
    padding: 0.5em;
    font-weight: 500 !important;
    background: #fa7c1f;
    border-radius: 0.5em;
	margin: auto;
	font-family: 'Noto Sans TC','Jost', sans-serif!important;
    
	font-size: 16PX;	
}










.tour h6{
	font-size: 18px!important;
	font-family: 'Noto Sans TC','Jost', sans-serif!important;
	font-weight: 300!important;margin-bottom: 0px!important;
}
.tour h5 {   
    font-size: 32px !important;
    line-height: 1.2 !important;
    color: #000000 !important;
    font-weight: 600 !important;
    MARGIN: 5px 0 20px 0 !important;
    font-family: 'Noto Sans TC', 'Jost', sans-serif !important;
}
.tour h5 span{
	font-size: 14px!important;
    line-height: 23px!important;
    color: #333;
    padding: 0 5px!important;
}
.tour h7 {   
   font-family: 'Noto Sans TC','Jost', sans-serif!important;
    text-align: center;
    display: inline-block;
    border-radius: 400px;
    font-size: 24PX;
    line-height: 28px;
    margin-top: 40px;
}

.tour .hoteltit{ font-size: 24px;
    font-weight: bold;
    text-align: center;
    line-height: 1.4em;
    margin-top: 0px;
    margin-bottom: 1%;
    }
.tour .top1  {
       font-size: 66px!important;
    line-height: 68px!important;
    margin: 10px auto;
    font-weight: 800!important;
	    color: #1c312a;
}
.tour .top1 span {
      
    font-weight: 100!important;
	
}
.tour .top2 {
	    font-size: 26px;
    line-height: 32px;
    color: #000000!important;
    font-weight: 100!important;
}
.tour .top3 {
	    font-size: 20px;
    line-height: 28px;
    color: #000000!important;
    font-weight: 100!important;
}

.tour .tour_logo{
	align-items: center;   
    vertical-align: middle;
    display: flex;
    
}

.mobile_n{
		display: block;
	}
.mobile_on{
		display: none;
	}


.tour .imgDown{
	margin-top:30px;
}

/*color*/
.tour .pinkcolor {
    color: #ec7f7a!important;
}
.BGorange{
	background-color:#fffbe8;
}

.BGgray{
	background: #f3f3f3;
}
.BGblue{
	background-color: #D8EEFF;
}
.BGblue_3d90e9{
	background-color: #3d90e9!important;
}
.BGyellow{
	background-color: #fff000;
}
.BGgreen{
	background-color: #156044;
}

.BGgreen_97a58c{
	background-color: #97a58c!important;
}
@media all and (max-width:640px){
	.tour .tour_logo{
    display: none;
   
}   
	.tour h6{margin-bottom: 0px!important;font-size: 16px!important;
    line-height: 24px!important;   }
	.tour h2 {
    font-size: 21px!important;
    line-height: 24px!important;
    margin: 10px 0 0 0!important;
}
	
	.tour h5 {    
    font-size: 24px!important;
    line-height: 26px!important;
}
	.tour h1 {
      font-size: 33px!important;
    line-height: 33px!important;
    margin-top: 8px!important;}
	.tour p {
   
    margin-bottom: 5px;
    
}
	.tour h1 span{
        font-size: 24px!important;
    line-height: 40px!important;
    margin-bottom: 15px!important;}
	.tour .top3 {
    font-size: 16px;
   
}
	.tour .slogan {
    font-size: 14px!important;
    line-height: 24px!important;   
    
    margin-bottom: 5px!important;
    
}.tour .hoteltit {
    font-size: 18px;
    
}
	.tour h4 {
    font-size: 16px!important;
   
    margin-bottom: 0!important;
    padding: 0 5px!important;
}
	
	.tour h3 {
        font-size: 18px!important;
    line-height: 20px!important;
    margin-bottom: 5px!important;}
	.tour h3 span {
        font-size: 24px!important;
    line-height: 28px!important;
    }
	.tour h7 {       
		margin-top: 20px;
    margin-bottom: 20px!important;
}
.tour h7:before, .tour h7:after {   
    width: 15%;   
}

}



/*é ç±¤*/
.tour_card {background: #FFF none repeat scroll 0% 0%; /*box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);*/    width: 98%;
    margin: 0 auto; }
.tab-nav > li > a::after { background: #5a4080 none repeat scroll 0% 0%; color: #fff; }
.tab-pane { padding: 15px 0; }
.tab-content{padding:5px}

.nav-tabs ul,.nav-tabs1 ul,.nav-tabs2 ul,.nav-tabs3 ul{width: 100%;}
/*1*/

.nav-tabs { border-bottom: 2px solid #DDD; }
.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: #ffffff;background: #5a4080;     font-size: 16px;display: flex;
    justify-content: center;height: 50px;
    flex-direction: column}
.nav-tabs > li.active > a, .nav-tabs > li > a:hover { border: none;  color: #5a4080 !important; background: #fff; }
.nav-tabs > li > a::after { content: ""; background: #5a4080; height: 2px; position: absolute; width: 100%; left: 0px; 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); }
.nav-tabs > li  {width: 33.33%; text-align:center;float: left;}



@media all and (max-width:724px){
.nav-tabs > li > a > span {font-size: 14px;}	
.nav-tabs > li > a {padding: 5px 5px;}
}



/*2*/

.nav-tabs1 { border-bottom: 2px solid #DDD; }
.nav-tabs1 > li.active > a, .nav-tabs1 > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs1 > li > a { border: none; color: #ffffff;background: #5a4080;     font-size: 16px;display: flex;
    justify-content: center;height: 50px;
    flex-direction: column}
.nav-tabs1 > li.active > a, .nav-tabs1 > li > a:hover { border: none;  color: #5a4080 !important; background: #fff; }
.nav-tabs1 > li > a::after { content: ""; background: #5a4080; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs1 > li.active > a::after, .nav-tabs1 > li:hover > a::after { transform: scale(1); }
.nav-tabs1 > li  {width: 50%; text-align:center;float: left;}



@media all and (max-width:724px){
.nav-tabs1 > li > a > span {font-size: 14px;}	
.nav-tabs1 > li > a {padding: 5px 5px;}
}

/*3*/

.nav-tabs2 { border-bottom: 2px solid #DDD; }
.nav-tabs2 > li.active > a, .nav-tabs2 > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs2 > li > a { border: none; color: #ffffff;background: #5a4080;     font-size: 16px;display: flex;
    justify-content: center;height: 50px;
    flex-direction: column}
.nav-tabs2 > li.active > a, .nav-tabs2 > li > a:hover { border: none;  color: #5a4080 !important; background: #fff; }
.nav-tabs2 > li > a::after { content: ""; background: #5a4080; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs2 > li.active > a::after, .nav-tabs2 > li:hover > a::after { transform: scale(1); }
.nav-tabs2 > li  {width: 25%;float: left;text-align:center;}



@media all and (max-width:724px){
.nav-tabs2 > li > a > span {font-size: 14px;}	
.nav-tabs2 > li > a {padding: 5px 5px;}
}
/*4*/

.nav-tabs3 { border-bottom: 2px solid #DDD; }
.nav-tabs3 > li.active > a, .nav-tabs3 > li.active > a:focus, .nav-tabs > li.active > a:hover { border-width: 0; }
.nav-tabs3 > li > a { border: none; color: #ffffff;background: #5a4080;     font-size: 16px;display: flex;
    justify-content: center;height: 50px;
    flex-direction: column}
.nav-tabs3 > li.active > a, .nav-tabs3 > li > a:hover { border: none;  color: #5a4080 !important; background: #fff; }
.nav-tabs3 > li > a::after { content: ""; background: #5a4080; height: 2px; position: absolute; width: 100%; left: 0px; bottom: -1px; transition: all 250ms ease 0s; transform: scale(0); }
.nav-tabs3 > li.active > a::after, .nav-tabs3 > li:hover > a::after { transform: scale(1); }
.nav-tabs2 > li  {width: 25%;float: left;text-align:center;}



@media all and (max-width:724px){
.nav-tabs3 > li > a > span {font-size: 14px;}	
.nav-tabs3 > li > a {padding: 5px 5px;}
}







/*輪播*/
.boxrun{
    width: 100%;
    height: 400PX;    
    position: relative;
  }
  .boxrun>div{
    display: block;
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    filter: alpha(opacity=0);
    /*當圖片數量增加，影片長度需更改，變為5s*圖片數量*/
    -webkit-animation: silder 15s linear infinite;
            animation: silder 15s linear infinite;
  }
  .boxrun>div>img{
    max-width: 100%;
	  height: auto;
  }



/*每個圖片各延遲5秒*/
  .boxrun>div:nth-child(3) {
    -webkit-animation-delay: 10s;
            animation-delay: 10s;             
  }

  .boxrun>div:nth-child(2) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
  }

  .boxrun>div:nth-child(1) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;    
  }
/*滑入時停止播放*/
  .boxrun:hover>div{
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}


.boxrun01{
    width: 100%;
    height: 550PX;    
    position: relative;
  }
  .boxrun01>div{
    display: block;
    position: absolute;
    top:0;
    left:0;
    opacity: 0;
    filter: alpha(opacity=0);
    /*當圖片數量增加，影片長度需更改，變為5s*圖片數量*/
    -webkit-animation: silder 15s linear infinite;
            animation: silder 15s linear infinite;
  }
  .boxrun01>div>img{
    max-width: 100%;
	  height: auto;
  }



/*每個圖片各延遲5秒*/
  

  .boxrun01>div:nth-child(2) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
  }

  .boxrun01>div:nth-child(1) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;    
  }
/*滑入時停止播放*/
  .boxrun01:hover>div{
    -webkit-animation-play-state: paused;
            animation-play-state: paused;
}








/*動畫關鍵影格*/
  @-webkit-keyframes silder {
      3% {
          opacity: 1;
          filter: alpha(opacity=100);
      }
      27% {
          opacity: 1;
          filter: alpha(opacity=100);
      }
      30% {
          opacity: 1;
          filter: alpha(opacity=1);
      }
  }
  @keyframes silder {
      3% {
          opacity: 1;
          filter: alpha(opacity=100);
      }
      27% {
          opacity: 1;
          filter: alpha(opacity=100);
      }
      30% {
          opacity: 1;
          filter: alpha(opacity=1);
      }
  }




@media all and (max-width:640px){
	.boxrun{
   
    height: 130PX;    
   
  }
	.boxrun01{
   
    height: 180PX;    
    
  }
}