@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url("reset.css");

/* Extra */

body {
  background-color: #fefefe;
  margin: 0;
}

*{
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: "Noto Sans TC", sans-serif;
}


/* --------------------------------

　　　　　  　N A V B A R

--------------------------------- */



.navv {
  padding: 10px 30px;
  background-color: #FFFFFF;}
.navv ul li{
  margin: 0 12px;
  font-size: 19px;
  line-height:2;}
.navvli{
  font-size:15px;
  line-height:34px;
  color:#00D9D9;}


.nav-item a:hover{color:#CB4042;font-weight: bold;}

#bttop {
	width:100px;
	height:100px;
	background-image: url(img/bttop.png);
	background-repeat: no-repeat;
  background-size: cover;

	position: fixed;
  right: 50px;
  bottom: 50px;
  cursor: pointer;
  z-index: 999;
}

#bttop:hover{
	background-image: url(img/bttop-1.png);
}


/* --------------------------------

　    首 頁 首 頁 首 頁 首 頁

--------------------------------- */

.index_bg{
  height:95vh;
  background-image:url(img/index.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}

.TOP_bg{
  width: 100%;
  height:200px;
  background: #49d6cd;
  background: linear-gradient(135deg, rgba(73, 214, 205, 1) 0%, rgba(95, 21, 11, 1) 100%);}

.TOP{
  height:200px;
  background-image: url(img/top_bg1.png),url(img/top_bg2.png);
  background-position: left center, right center;
  background-repeat: no-repeat, no-repeat;
}


/* --------------------------------

　　　     C O N T E N T

--------------------------------- */


.IN{
  padding-bottom:30px;
}

.IN h1{
  font-size:34px;
  letter-spacing: 1px;
  display:inline-block;
  padding-bottom:7px;
  margin-bottom:30px;
  margin-top:30px;
  font-weight: 600;
  color:#CB4042;
  border-bottom:10px solid #CB4042;  }
.IN h1:after {
  content: '';
  width: 100%;
  display: block;}

.IN h2{
  font-size: 28px;
  font-weight: bolder;
  margin-top:30px;
  margin-bottom:20px;
}

.IN h3{
  font-size: 22px;
  font-weight: bolder;
}


.IN p{
  padding-bottom:10px;
  font-size: 18px;
  line-height:1.8;
  text-align:justify;
  text-justify: distribute;
  color:#000000;}

.IN a:hover{  font-weight: bold;letter-spacing: .5px;}


.IN ul li{
  font-size:17px;
  line-height:1.6;
  margin-bottom:3px;
  background-image: url(img/bg_li_li.png);
  background-repeat: no-repeat;
  padding-left:20px;
}



.c_b{color:#268785;}
.c_y{color:#FFC408;}
.c_r{color:#E83015;}


.mc{margin:0 auto;}

/* --------------------------------

　    agenda  agenda  agenda

--------------------------------- */

.t_day{
  font-weight: 300; 
  font-family: "Roboto", sans-serif;}

.row_a{
  border-bottom: 1px dotted #268785;
  padding-block:10px;
  
}

.row_a p{  padding-bottom:0;}
.row_a h1{
  font-size:20px;
  letter-spacing: 0;
  display:default;
  padding-bottom:5px;
  margin-bottom:0;
  margin-top:0;
  color:#000000;
  border-bottom:none;
  line-height: 1.6;
}

.time p{
  font-size:20px;
  font-family: "Roboto", sans-serif;
}

.spot-b1,.spot-1f,.spot-4f,
.spot-out{
  display: inline-block;
  padding:3px 7px;
  margin-left:5px;
  margin-bottom:5px;
  font-size:15px;
  border-radius: 5px;
  font-weight: 100;
  }

.spot-b1{
  background-color:#999999;
  color:#ffffff;
  margin-left:0;}
.spot-1f{
  background-color:#777777;
  color:#ffffff;}
.spot-4f{
  background-color:#dddddd;
  color:#000000;}
.spot-out{
  background-color:#6699A1;
  color:#ffffff;
}


.t_s,.t_cm{
  font-weight: 100;
  font-size:15px;
  color:#333333;
  padding-top:5px;
}

.t_cm{
  text-align: center;
  width:50%;
  display: block;
  padding:3px 15px;
  margin-block:25px;
  letter-spacing: 2px;
  border:1px solid #999999;
}



/* --------------------------------

　    圖  片   圖  片   圖  片

--------------------------------- */

.imgd img{
  width:100%; 
  height:100%;
  object-fit: cover;}
  
.imgdd img{
  width:100%; 
  position:top center;
  object-fit: contain}


.is{box-shadow: 2px 2px 5px 1px rgba(90, 90, 90, 0.6);}
.is2{box-shadow:2px 2px 5px 1px rgba(0,0,0, 0.6);}
.is3{ filter: drop-shadow(2px 2px 3px #666666);}


/* --------------------------------

　     TOUR TOUR TOUR TOUR

--------------------------------- */

.d_hotel{
  height:240px;
  overflow: hidden;
  position: relative;
  margin-bottom: 15px;
}

.d_tour{  
  overflow: hidden;
  height:220px;}

.d_t{
  color:#ffffff;
  width: 100%;
  
  position:absolute;
  bottom:0;
  z-index: 9;

  background: rgb(0,0,0);
  background: linear-gradient(0deg, rgba(0,0,0,1) 0%, rgba(255,255,255,0) 100%); 
  text-shadow: 2px 2px 6px black;

}
.d_t{
  padding-inline:15px;
  padding-block:10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;}

.d_t h6{
  font-size:26px;
  font-weight: 700;
  padding-bottom:5px;
}

.d_t p{
  color:#ffffff;
  line-height:1.5;
}


.container_hotel{
  width:100%;
  display:flex;
  justify-content: space-around;
}
.btn_hotel, .btn_hote1{
  font-size:22px;
  font-weight: 100;
  text-decoration: none;
  text-align: center;
  padding:10px 15px;
  margin:10px;
  display: block;
  border:1px solid #777777;
  color:#777777;}
.btn_hotel{width:50%;}
.btn_hote1{width:100%;}

.container_hotel a:hover{
  background-color: #CB4042;
  border:none;
  color:#ffffff;
  font-weight: 100;
  text-shadow: 2px 2px 6px #333333;
}

.btn_hotel3{
  font-size:18px;
  font-weight: 100;
  text-decoration: none;
  text-align: center;
  padding:10px 15px;
  margin:10px;
  width:32%;
  display: block;
  border:1px solid #777777;
  color:#777777;}

/* ------------------------
  
  　　　　底　部　版　權
  
  ---------------------------*/

  footer{
    display: flex;
    justify-content: center;

  }
  
  footer p{
    display: inline-block;
    color:#ffffff;
    font-size:13px;
    line-height:1.8;
    padding:15px 30px;
    text-align:center;}

  footer a{    text-decoration: none; color:#ffffff}
  footer a:hover{font-weight: bold;color:#FFB11B;}


  /* ------------------------
  
  　　　　M O B I L E
  
  ---------------------------*/


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

    .s_block{display: block;}
}


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


  .container_hotel{
    flex-direction: column;
    align-items: center;
  }
  .btn_hotel{width:100%;margin:5px;}
  .btn_hotel3{width:100%;margin:2px;font-size: 22px;}

  .index_bg{
  height:100vh;
  background-image:url(img/index_m.png);
  background-size: cover;
  }
}


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

  #bttop {
    width:80px;
    height:80px;
    right: 40px;
    bottom: 40px;
  } 

  .TOP_bg{height:170px;}
  .TOP{height:170px;
  background-image: url(img/top_bg4.png),url(img/top_bg3.png);

  background-position: left center, right center;
  background-repeat: no-repeat, no-repeat;
  }


  .IN h1{ font-size:30px;}
  .IN h2{ font-size:24px;}
  .IN p,.IN ul li{  font-size:16px;}

  
  .row_a h1{font-size:19px;}
  .time p{  font-size:28px;font-weight: 300;}
  .t_cm{    width:100%;}
  .t_s,.t_cm{font-size:13px;}
  .t_day{
    font-size:70px;display: block;
    letter-spacing: 3px;font-weight: 200;}
  
  .s_block{display: block;}
  
  
  .d_tour{  height:180px;}



  footer p{  font-size:11px;}


}