/*css reset*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
/*ol, ul { list-style: none; }*/
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: normal; }
/*--------------------------------------------------*/

html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
}
body {
	padding: 50px 0 0 0;
	color: #333333;
	font-size: 16px;
	line-height: 1.5;
}
html, body {
	position: relative;
	width: 100%;
	overflow:auto;
    background:linear-gradient(#e5fff8, #f5ffe0);	
	background-size:100%;
}
* {
	margin: 0;
	padding: 0;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	
	-webkit-overflow-scrolling: touch;
	
	border: none;
	border-radius: 0;
	outline:none;
	
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
	
	background-repeat: no-repeat;
}
*:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	 box-sizing: border-box;
}
a, a:visited, a:hover, a:active {
	text-decoration: none;
	border: none;
}

#CLUBMED {
	width:100%;
	min-width:320px;
	max-width:3440px;
	margin:0 auto;
	overflow:hidden;
    font-size:20px;
    line-height:1.5;
	background:url(bg.svg) repeat, white;
	background-size:contain;
	font-family:'微軟正黑體', 'Arial', sans-serif;
}

#CLUBMED img {width:100%;}

/* ==================== 主視覺 ==================== */

#CLUBMED .header h1, #CLUBMED .header h2 {
	text-indent:-9999px;
	height:0;
}
#CLUBMED .header .topic{
	position:absolute;
	z-index:10;
	width:60%;
	left:5%
}

#CLUBMED .header {
	display:inline-flex;
	align-items:center;/*垂直*/
	justify-content:center;/*水平*/

    width:100%;
    height:calc(80vh - 50px);
}
/* -- 上方輪動圖-- */
#CLUBMED .header .slider-item {
	width:100%;
	height:calc(80vh - 50px);
	background-size: 100%;
	position:relative;
}
#CLUBMED .header .slider_container {
	width:100%;
}
#CLUBMED .header .slider-contect01 {
	/* -- 圖01 -- */
	background: url(img_mainpic001.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .header .slider-contect02 {
	/* -- 圖02 -- */
	background: url(img_mainpic002.jpg) no-repeat 50% 90%;
	background-size:cover;
}
#CLUBMED .header .slider-contect03 {
	/* -- 圖02 -- */
	background: url(img_mainpic003.jpg) no-repeat 50% 60%;
	background-size:cover;
}



#CLUBMED .header .slider-arrow {
	position:absolute;
	top:0;
	z-index:50;
	width:5%;
	height:100%;
	cursor:pointer;
	/* 手手游標 */
	background-size:30%;
	background-repeat:no-repeat;
	background-position:50% 50%;	
    background-color:transparent;
}

#CLUBMED .header .slider-back {
	/*background-image: url(img_arrow_back.png);*/
	left: 0;
}
#CLUBMED .header .slider-back:hover {
	background-image: url(img_arrow_back02.png);
}
#CLUBMED .header .slider-next {
	/*background-image: url(img_arrow_next.png);*/
	right: 0;
}
#CLUBMED .header .slider-next:hover {
	background-image: url(img_arrow_next02.png);

}
/**照片button**/
#CLUBMED .header ul.slick-dots{
	position:absolute;
	left:80px;
    bottom:200px;
    z-index:80;
	text-align:center;
	display:none;
}
#CLUBMED .header ul.slick-dots li{
	display:flex;
	align-items:center;
	justify-content:center;
	display:none;
}
#CLUBMED .header ul.slick-dots li button{
	margin:10px;
	width:10px;
	height:100px;
	background:#fff;
	font-size:0;
	color:white;
}
#CLUBMED .header ul.slick-dots li.slick-active button, #CLUBMED .header ul.slick-dots li.slick-active:hover button{
	background:#d8e0e8;
}


/* ==================== ICON ==================== */

/* -- tour tabe -- */
#CLUBMED .tab-demo {
	width:100%;
	text-align:center;
	margin:0px auto;
	opacity:1;
  }  
  #CLUBMED .tab-demo .tab-title {
	display:flex;
	align-items:flex-start;/*垂直*/
	justify-content:center;/*水平*/
	width:100%;
	background:#b4d5f3;
	border-bottom:1px solid #95c1ea;
	font-size:1em;
	font-weight:700;
	line-height:2.2;
  }
  #CLUBMED .tab-demo .tab-title li {
	flex:none;
	padding:1%;
	list-style-type:none;
	white-space:nowrap;
	overflow:hidden;
	width:calc(100% / 5 - 6%);
  }
  #CLUBMED .tab-demo .tab-title li a{
	display:list-item;
	padding:2px 2px 0 2px;
	color:black;	
  }
/**度假村**/
  #CLUBMED .tab-demo .tab-title li p.location{
	letter-spacing:1px;
	padding:3px;
	color:#206dac;
	text-indent:-9999px;
  }

  #CLUBMED .tab-demo .tab-title li.active a, #CLUBMED .tab-demo .tab-title li:hover a {	
	border-radius:10px;
	background: white;
	color:#4085be;
  } 
  #CLUBMED .tab-demo .tab-title li:hover a {	
	color:black;
  }
/**CLUBMED是什麼**/
  #CLUBMED .tab-demo .tab-title li p span{display:inline-block; line-height:0.5;}

  /**下層UI-度假村**/  
  #CLUBMED .tab-demo .tab-inner ul.u3{
	margin:0 auto 1% auto;
	background: white;
	border-bottom:1px solid #dbdbdb;
	margin-bottom:3%;
  }

  #CLUBMED .tab-demo .tab-inner ul.u3 li.i3 a {
	display:list-item;
	color:#4085be;
	padding:0;
	text-decoration:none;
  }

  #CLUBMED .tab-demo .tab-inner ul.u3 li.i3:hover a, #CLUBMED .tab-demo .tab-inner ul.u3 li.i3.active a{
	border-bottom:1px solid #4085be;
	border-radius:0;
  }
  /*button增加倒三角*/
  #CLUBMED .tab-demo .tab-title li.active::after {
	  content:"";
	  position:absolute;
	  width:0;
	  height:0;
	  border:solid;
	  border-width:10px 10px 0 10px;
	  border-color:white transparent transparent transparent;
	  margin-left:-10px;/*border-width:5px就往左移-5px  使其居中*/
  }

  #CLUBMED .tab-demo .tab-inner ul.u3 li.i3.active::after {
	border-width:8px 8px 0 8px;
	margin-left:-8px;/*border-width:5px就往左移-5px  使其居中*/
	border-color:#4085be transparent transparent transparent;
  }

  #CLUBMED .tab-demo .tab-title li.target.active::after {display:none;} 


  #CLUBMED .tab-demo .tab-inner-wrap{
	/*display:flex;*/
  }
  
  #CLUBMED .tab-demo .tab-inner {
	width:100%;
  }

  #CLUBMED .area .club .club_pro .club_title .comma h2{
	width:40%;
	margin:0 auto 5% auto;
	padding:0 0;
	background:url(comma_1.svg) center left no-repeat, url(comma_2.svg) bottom right no-repeat;
	background-size:12%;
  }
  #CLUBMED .area .club .club_pro .club_title .comma span.com{
	display:block;
	font-size:0.4em;
	line-height:1.25;
	margin-bottom:2em;
	padding-right:5%;
  }


/* ==================== 國家主題區 ==================== */

#CLUBMED .area{
	width:86%;/*86*/
	height:auto;
	margin: 0 auto;
}


/* ==================== 地區大圖 ==================== */

#CLUBMED .area .area_photo{
	position:relative;
	width:100%;
	height:calc(80vh);
	border-radius:15px;
	background:#f1f4f9;
}

#CLUBMED .area .area_photo .photo_txt img.s_logo{
	z-index:100;
    position:absolute;
    right:10%;
    top:1%;
    width:16%;
}

/* -- 國家介紹文字-- */
#CLUBMED .area .area_photo .photo_txt{
	position:absolute;
	z-index:50;
	margin-top:25vh;/*32vh*/
	margin-left:7%;
	width:30%;/*28%;*/
	height:auto;
	border-radius:15px;
	padding:2%;
	text-align:left;
	background:#f1f4f9;
	opacity:0.95;
	font-size:2em;
	line-height:1.7;
}

#CLUBMED .area .area_photo .photo_txt .title h3{
	font-size:1em;
	line-height:1.5;
	color:#000;
	margin-top:2%;
}

#CLUBMED .area .area_photo .photo_txt .img{
	width:80%;
	max-width:417px;
	margin-bottom:2vh;
}

#CLUBMED .area .area_photo .photo_txt span h3{	
	font-size:0.6em;
	color:#ff6000;
	display:block;
}

#CLUBMED .area .area_photo .photo_txt .txt{
	font-size:0.4em;
	text-align:justify;
}


/* -- 國家圖輪動圖-- */
#CLUBMED .area .area_photo .slider-item {
	width:100%;
	height:calc(68vh);
	background-size:100%;
}
#CLUBMED .area .area_photo .slider_container {
	position:absolute;
	width:96%;/*78.9%*/
	padding-left:16.5%;
	padding-top:6vh;
}

/**普吉**/
#CLUBMED .area .area_photo .slider-contect01.Phuket {
	background: url(Phuket/Phuket_B_001.jpg) no-repeat 50% 80%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect02.Phuket {
	background: url(Phuket/Phuket_B_002.jpg) no-repeat 50% 40%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect03.Phuket {
	background: url(Phuket/Phuket_B_003.jpg) no-repeat 50% 30%;
	background-size:cover;
}

/**峇里島**/
#CLUBMED .area .area_photo .slider-contect01.Bali {
	background: url(Bali/B_001.jpg) no-repeat 50% 40%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect02.Bali {
	background: url(Bali/B_002.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect03.Bali {
	background: url(Bali/B_003.jpg) no-repeat 50% 50%;
	background-size:cover;
}

/**民丹島**/
#CLUBMED .area .area_photo .slider-contect01.Bintan {
	background: url(Bintan/B_001.jpg) no-repeat 50% 10%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect02.Bintan {
	background: url(Bintan/B_002.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect03.Bintan {
	background: url(Bintan/B_003.jpg) no-repeat 50% 80%;
	background-size:cover;
}

/**馬爾地夫-卡尼島**/
#CLUBMED .area .area_photo .slider-contect01.Kani {
	background: url(Kani/B_001.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect02.Kani {
	background: url(Kani/B_002.jpg) no-repeat 50% 80%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect03.Kani {
	background: url(Kani/B_003.jpg) no-repeat 50% 100%;
	background-size:cover;
}

/**馬爾地夫-芬妮芙**/
#CLUBMED .area .area_photo .slider-contect01.Finolu {
	background: url(Finolu/B_001.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect02.Finolu {
	background: url(Finolu/B_002.jpg) no-repeat 50% 10%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect03.Finolu {
	background: url(Finolu/B_003.jpg) no-repeat 50% 50%;
	background-size:cover;
}

/**北海道-Tomamu**/
#CLUBMED .area .area_photo .slider-contect01.Tomamu {
	background: url(Tomamu/B_001.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect02.Tomamu {
	background: url(Tomamu/B_002.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect03.Tomamu {
	background: url(Tomamu/B_003.jpg) no-repeat 50% 10%;
	background-size:cover;
}

/**北海道-Tomamu**/
#CLUBMED .area .area_photo .slider-contect01.Tomamu2 {
	background: url(Tomamu2/B_001.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect02.Tomamu2 {
	background: url(Tomamu2/B_002.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect03.Tomamu2 {
	background: url(Tomamu2/B_003.jpg) no-repeat 50% 10%;
	background-size:cover;
}

/**北海道-Sahoro**/
#CLUBMED .area .area_photo .slider-contect01.Sahoro {
	background: url(Sahoro/B_001.jpg) no-repeat 50% 90%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect02.Sahoro {
	background: url(Sahoro/B_002.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect03.Sahoro {
	background: url(Sahoro/B_003.jpg) no-repeat 50% 50%;
	background-size:cover;
}

/**北海道-Kiroro**/
#CLUBMED .area .area_photo .slider-contect01.Kiroro {
	background: url(Kiroro/B_001.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect02.Kiroro {
	background: url(Kiroro/B_002.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect03.Kiroro {
	background: url(Kiroro/B_003.jpg) no-repeat 50% 50%;
	background-size:cover;
}

/**北海道-Kiroro2**/
#CLUBMED .area .area_photo .slider-contect01.Kiroro2 {
	background: url(Kiroro2/B_001.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect02.Kiroro2 {
	background: url(Kiroro2/B_002.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect03.Kiroro2 {
	background: url(Kiroro2/B_003.jpg) no-repeat 50% 50%;
	background-size:cover;
}

/**⽯垣島Kabira**/
#CLUBMED .area .area_photo .slider-contect01.Kabira {
	background: url(Kabira/B_001.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect02.Kabira {
	background: url(Kabira/B_002.jpg) no-repeat 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_photo .slider-contect03.Kabira {
	background: url(Kabira/B_003.jpg) no-repeat 50% 50%;
	background-size:cover;
}

#CLUBMED .area .area_photo .slider-arrow {
	position:absolute;
	top:0;
	z-index:50;
	width:5%;
	height:100%;
	cursor:pointer;
	/* 手手游標 */
	background-size:30%;
	background-repeat:no-repeat;
	background-position:50% 50%;	
    background-color:transparent;
}

#CLUBMED .area .area_photo .slider-back {
	left: 0;
}
#CLUBMED .area .area_photo .slider-back:hover {
	background-image: url(img_arrow_back02.png);
}
#CLUBMED .area .area_photo .slider-next {
	right: 0;
}
#CLUBMED .area .area_photo .slider-next:hover {
	background-image: url(img_arrow_next02.png);

}
/**照片button**/
#CLUBMED .area .area_photo ul.slick-dots{
	position:absolute;
	left:5%;
    bottom:0;
    z-index:80;
	text-align:center;
}
#CLUBMED .area .area_photo ul.slick-dots li{
	display:flex;
	align-items:center;
	justify-content:center;
	padding:10px;
}
#CLUBMED .area .area_photo ul.slick-dots li button{
	margin:5px;
	width:5px;
	height:120px;
	background:#c8d8e8;
	font-size:0;
	color:white;
}
#CLUBMED .area .area_photo ul.slick-dots li.slick-active button, #CLUBMED .area .area_photo ul.slick-dots li.slick-active:hover button{
	background:black;
}








/**下方影片及小圖區**/
#CLUBMED .area .area_bottom{
	display:flex;
	align-items:center;
	justify-content:center;
	height:auto;
	padding:5%;
}

#CLUBMED .area .area_bottom .area_video{
	flex:none;
	width:40%;
	height:auto;
	border-top:1px solid #000;
	border-bottom:3px solid #000;
	margin-right:5%;
}
/**
#CLUBMED .area .area_bottom .area_video{
	display:inline-block;
	width:39%;
	height:auto;
	border-top:1px solid #000;
	border-bottom:3px solid #000;
	margin:10% 5% 10% auto;
}**/

#CLUBMED .area .area_bottom .area_video .watch{
	font-family:'Times New Roman', Times, serif;
	font-size:1em;
	line-height:2;
	text-align:center;
}

#CLUBMED .area .area_bottom .area_video .video_name h3{
	font-family:"微軟正黑體", "Microsoft JhengHei", sans-serif;
	font-weight:700;
	font-size:1em;
	text-align:center;
	padding:20px 10px;
	border-bottom:1px solid #000;
	margin-bottom:8px;
	line-height:2;	
	/*text-decoration:underline;*/
}

/* ==================== video ==================== */
#CLUBMED .video_bg{
	width:100%;
	background:#f1f4f9;
	margin:5% auto;
	border-radius:15px;
}

#CLUBMED .video{
	padding:5%;
	margin:0 auto;
}

#CLUBMED .area .area_bottom .area_video a .video{
	position:relative;
	width:100%;
	max-width:650px;
	height:366px;
	max-height:366px;
	background:#000;
}
/* ==================== video end ==================== */

#CLUBMED .area .area_bottom .area_small_photo{
	flex:none;
	position:relative;
	width:50%;
	height:60vh;
}

#CLUBMED .area .area_bottom .area_small_photo .p_00{
	display:none;
	position:absolute;
    top:4%;
	left:24%;
    width:33%;
    height:46%;
    border:0px solid #eee;
}

#CLUBMED .area .area_bottom .area_small_photo .p_01{
	position:absolute;
	top:25%;
    width:35%;
    height:55%;
    border:1px solid #888;
}

#CLUBMED .area .area_bottom .area_small_photo .p_02{
	position:absolute;
	left:20%;
    width:33%;
    height:46%;
    border:1px solid #888;
}

#CLUBMED .area .area_bottom .area_small_photo .p_03{
	position:absolute;
	top:13%;
	left:40%;
    width:60%;
    height:50%;
    border:1px solid #888;
	/*animation:s-photo-1 0.8s ease-in;*/
}

@keyframes s-photo-1{
    0% {
        opacity: 0;
        -webkit-transform: translateX(200px);
        -ms-transform: translateX(200px);
        transform: translateX(200px);
  }
    
  100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);
  }
}


/*smallphoto_普吉島*/
#CLUBMED .area .area_bottom .area_small_photo .p_01.p.Phuket{
	background:url(Phuket/Phuket_S_001.jpg) 50% 50%;	
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_02.p.Phuket{
	background:url(Phuket/Phuket_S_002.jpg) 50% 50%;	
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_03.p.Phuket{
	background:url(Phuket/Phuket_S_003.jpg) 50% 100%;
	background-size:cover;
}

/*smallphoto_峇里島*/
#CLUBMED .area .area_bottom .area_small_photo .p_01.p.Bali{
	background:url(Bali/S_001.jpg) 50% 50%;	
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_02.p.Bali{
	background:url(Bali/S_002.jpg) 50% 50%;		
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_03.p.Bali{
	background:url(Bali/S_003.jpg) 50% 50%;
	background-size:cover;
}

/*smallphoto_民丹島*/
#CLUBMED .area .area_bottom .area_small_photo .p_01.p.Bintan{
	background:url(Bintan/S_001.jpg) 50% 50%;	
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_02.p.Bintan{
	background:url(Bintan/S_002.jpg) 60% 50%;		
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_03.p.Bintan{
	background:url(Bintan/S_003.jpg) 50% 50%;
	background-size:cover;
}

/*smallphoto_馬爾地夫-卡尼島*/
#CLUBMED .area .area_bottom .area_small_photo .p_01.p.Kani{
	background:url(Kani/S_001.jpg) 90% 50%;	
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_02.p.Kani{
	background:url(Kani/S_002.jpg) 50% 100%;		
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_03.p.Kani{
	background:url(Kani/S_003.jpg) 100% 50%;
	background-size:cover;
}

/*smallphoto_馬爾地夫-芬妮芙*/
#CLUBMED .area .area_bottom .area_small_photo .p_01.p.Finolu{
	background:url(Finolu/S_001.jpg) 50% 50%;	
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_02.p.Finolu{
	background:url(Finolu/S_002.jpg) 50% 50%;		
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_03.p.Finolu{
	background:url(Finolu/S_003.jpg) 50% 50%;
	background-size:cover;
}

/*smallphoto_北海道-Tomamu*/
#CLUBMED .area .area_bottom .area_small_photo .p_01.p.Tomamu{
	background:url(Tomamu/S_001.jpg) 50% 50%;	
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_02.p.Tomamu{
	background:url(Tomamu/S_002.jpg) 70% 50%;		
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_03.p.Tomamu{
	background:url(Tomamu/S_003.jpg) 50% 50%;
	background-size:cover;
}

/*smallphoto_北海道-Tomamu2*/
#CLUBMED .area .area_bottom .area_small_photo .p_01.p.Tomamu2{
	background:url(Tomamu2/S_001.jpg) 50% 50%;	
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_02.p.Tomamu2{
	background:url(Tomamu2/S_002.jpg) 70% 50%;		
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_03.p.Tomamu2{
	background:url(Tomamu2/S_003.jpg) 50% 50%;
	background-size:cover;
}

/*smallphoto_北海道-Sahoro*/
#CLUBMED .area .area_bottom .area_small_photo .p_01.p.Sahoro{
	background:url(Sahoro/S_001.jpg) 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_02.p.Sahoro{
	background:url(Sahoro/S_002.jpg) 50% 50%;
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_03.p.Sahoro{
	background:url(Sahoro/S_003.jpg) 50% 50%;
	background-size:cover;
}

/*smallphoto_北海道-Kiroro*/
#CLUBMED .area .area_bottom .area_small_photo .p_01.p.Kiroro{
	background:url(Kiroro/S_001.jpg) 50% 0%;	
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_02.p.Kiroro{
	background:url(Kiroro/S_002.jpg) 0% 90%;		
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_03.p.Kiroro{
	background:url(Kiroro/S_003.jpg) 50% 50%;
	background-size:cover;
}

/*smallphoto_北海道-Kiroro2*/
#CLUBMED .area .area_bottom .area_small_photo .p_01.p.Kiroro2{
	background:url(Kiroro2/S_001.jpg) 50% 0%;	
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_02.p.Kiroro2{
	background:url(Kiroro2/S_002.jpg) 0% 90%;		
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_03.p.Kiroro2{
	background:url(Kiroro2/S_003.jpg) 50% 50%;
	background-size:cover;
}

/*smallphoto_⽯垣島Kabira*/
#CLUBMED .area .area_bottom .area_small_photo .p_01.p.Kabira{
	background:url(Kabira/S_001.jpg) 50% 0%;	
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_02.p.Kabira{
	background:url(Kabira/S_002.jpg) 0% 90%;		
	background-size:cover;
}
#CLUBMED .area .area_bottom .area_small_photo .p_03.p.Kabira{
	background:url(Kabira/S_003.jpg) 50% 50%;
	background-size:cover;
}

#CLUBMED .area .area_bottom .area_small_photo .shape-ex3{
    width:33%;/*39*/
    aspect-ratio: 1/1;
	border-radius:50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    line-height: 40px;
    color: #000;
    background-color: transparent;
    border: 1px solid #000;
    position: relative;
    transition: all .3s linear;
}
#CLUBMED .area .area_bottom .area_small_photo .shape-ex3 > p{
    position: relative;
    z-index: 1;
}
#CLUBMED .area .area_bottom .area_small_photo .shape-ex3::before{
    content: "";
    width: 100%;
    height: 0%;
	border-radius:50%;
    display: block;
    background-color: #000;
    position: absolute;
    top: 0;
    left: 0;
    transition:all 0.4s ease-in-out;
}
#CLUBMED .area .area_bottom .area_small_photo .shape-ex3:hover{
    color: #fff;
}
#CLUBMED .area .area_bottom .area_small_photo .shape-ex3:hover::before{
    margin-top:50px;
    height: 100%;
}






/**CLUB簡介**/
#CLUBMED .area .club{
	width:calc(100% - 20%);
	margin:0 auto;
}

#CLUBMED .area .club .club_pro{
	width:100%;
	font-size:0.3em;
	line-height:2;
	margin:5% auto;
	text-align:center;
	color:#3483c7
}

#CLUBMED .area .club .club_pro .club_title{
	font-size:5em;/*1.25em;*/
	color:#222;
	margin:5% auto;
	font-weight:700;
}

#CLUBMED .area .club .club_pro .club_title span{
	margin:0 auto;
	display:block;
	font-size:0.68em;
	line-height:1.7;
	font-weight:400;
	margin-top:1%;
	letter-spacing:1px;
	text-align: justify;
	margin:2% 8%;
}

#CLUBMED .area .club .item{
	display:flex;
	margin:3% auto;
	border:1px solid #dbdbdb;
	border-radius:15px;
}

#CLUBMED .area .club .item:last-child{
	/*border-bottom:0*/
}

#CLUBMED .area .club .item .img{
	flex:none;
	width:50%;
	aspect-ratio:6/3;
	border-radius:15px 0 0 15px;
}

#CLUBMED .area .club .item .img01{
	background:url("C_001.jpg") 50% 50%;
	background-size:cover;
}

#CLUBMED .area .club .item .img02{
	background:url("C_002.jpg") 50% 50%;
	background-size:cover;
}

#CLUBMED .area .club .item .img03{
	background:url("C_003.jpg") 50% 50%;
	background-size:cover;
}

#CLUBMED .area .club .item .img04{
	background:url("C_004.jpg") 50% 50%;
	background-size:cover;
}

#CLUBMED .area .club .item .img05{
	background:url("C_005.jpg") 50% 50%;
	background-size:cover;
}

#CLUBMED .area .club .item .img06{
	background:url("C_006.jpg") 50% 50%;
	background-size:cover;
}

#CLUBMED .area .club .club_pro .item_title{
	font-size:4em;
	color:#3483c7;
	text-align:left;
	margin:5%;
}

#CLUBMED .area .club .club_pro .item_title h3{
}

#CLUBMED .area .club .club_pro .item_title span{
	display:block;
	font-size:0.65em;
	font-weight:400;
	color:#555;
	text-align:justify;
}

#CLUBMED .area .club .club_pro .item_title ul{
	margin:6.5% auto;
}

#CLUBMED .area .club .club_pro .item_title ul li{
	font-size:0.65em;
	color:#555;
	text-align:left;
	list-style:disc;
	list-style-position:inside;
}

/**CIS-BUTTON
#CLUBMED .area .club a .button{
	position:relative;
    width:55%;
    font-size:1.5em;
	white-space:nowrap;
    line-height:6;
    background:url(button_01.svg) no-repeat center center;
    background-size:contain;
    color:white;
	margin:5% auto;
}
#CLUBMED .area .club a .button:hover{
	animation:button-move 0.5s infinite;
}

#CLUBMED .area .area_bottom .area_small_photo a .button{
	position:absolute;
    width:40%;
    font-size:1.5em;
	white-space:nowrap;
    line-height:8;
    background:url(button_02.svg) no-repeat center center;
    background-size:contain;
    color:white;
	padding-top:8%;
	top:52%;
	right:5%;
}
#CLUBMED .area .area_bottom .area_small_photo a .button:hover{
	animation:button-move 0.5s infinite;
}
@keyframes button-move{
	0%{scale:1;}
	50%{scale:1.02;}
	100%{scale:1;}
}
/**CIS-BUTTON-END**/


/**舊式BUTTON**/
#CLUBMED .area .club a .button, #CLUBMED .area .area_bottom .area_small_photo a .button{
	position:relative;
	width:40%;
	line-height:3;
	background:transparent;
	border:1px solid #4da9ff;
	background:#4da9ff;
	margin:5% auto 15% auto;
	font-size:1.5em;
	transition:all 0.5s liner;
	color:white;
	border-radius:10px;
}
#CLUBMED .area .club a .button span, #CLUBMED .area .area_bottom .area_small_photo a .button span{
	position: relative;
	z-index:1;
}
#CLUBMED .area .club a .button::before, #CLUBMED .area .area_bottom .area_small_photo a .button::before{
	content: "";
	position: absolute;
	top:0;
	left:0;
	transition:all 0.5s ease;
	
	width:0;
	height:100%;
	background:white;
	border-radius:10px;
}
#CLUBMED .area .club a .button:hover::before, #CLUBMED .area .area_bottom .area_small_photo a .button:hover::before{
	width:100%;
}
#CLUBMED .area .club a .button:hover span, #CLUBMED .area .area_bottom .area_small_photo a .button:hover span{
	color:#4da9ff;
	font-weight:700;
}


#CLUBMED .area .area_bottom .area_small_photo a .button{position:absolute;right:0;bottom:10%;width:50%;margin:0;}
/**舊式BUTTONEND**/


#CLUBMED .foot_img{
	width:100%; 
	height:50vh; 
	background:url(foot.jpg) 50% 40%; 
	background-size:cover
}
/*普吉島*/
#CLUBMED .foot_img.Phuket{
	background:url(Phuket/Phuket_foot.jpg) 50% 60%; 
	background-size:cover
}
/*峇里島*/
#CLUBMED .foot_img.Bali{
	background:url(Bali/foot.jpg) 50% 50%; 
	background-size:cover
}
/*民丹島*/
#CLUBMED .foot_img.Bintan{
	background:url(Bintan/foot.jpg) 50% 90%; 
	background-size:cover
}

/*馬爾地夫-卡尼島*/
#CLUBMED .foot_img.Kani{
	background:url(Kani/foot.jpg) 50% 50%; 
	background-size:cover
}
/*馬爾地夫-芬妮芙*/
#CLUBMED .foot_img.Finolu{
	background:url(Finolu/foot.jpg) 50% 50%; 
	background-size:cover
}

/*北海道-Tomamu*/
#CLUBMED .foot_img.Tomamu{
	background:url(Tomamu/foot.jpg) 50% 80%; 
	background-size:cover
}

/*北海道-Tomamu2*/
#CLUBMED .foot_img.Tomamu2{
	background:url(Tomamu2/foot.jpg) 50% 80%; 
	background-size:cover
}
/*北海道-Sahoro*/
#CLUBMED .foot_img.Sahoro{
	background:url(Sahoro/foot.jpg) 50% 50%; 
	background-size:cover
}
/*北海道-Kiroro*/
#CLUBMED .foot_img.Kiroro{
	background:url(Kiroro/foot.jpg) 50% 50%; 
	background-size:cover
}
/*北海道-Kiroro*/
#CLUBMED .foot_img.Kiroro2{
	background:url(Kiroro2/foot.jpg) 50% 50%; 
	background-size:cover
}

/*⽯垣島-Kabira*/
#CLUBMED .foot_img.Kabira{
	background:url(Kabira/foot.jpg) 50% 50%; 
	background-size:cover
}

#CLUBMED .line{
	margin:5% 0;
	border-top:1px solid #b5bdc5;
}
/**	3440 x 1440**/
@media screen and (max-width:3440px) {
	#CLUBMED{font-size:42px;}
}
@media screen and (max-width:2560px) {
	#CLUBMED{font-size:30px;}
}
@media screen and (max-width:2250px) {
	#CLUBMED{font-size:26px;}
}
@media screen and (max-width:1920px) {
	#CLUBMED{font-size:22px;}
}
@media screen and (max-width:1600px) {
	#CLUBMED{font-size:20px;}
}

/**尺寸1440 x 900 企劃筆電尺寸**/
@media screen and (max-width:1440px) {
	#CLUBMED{font-size:18px;}	
}
@media screen and (max-width:1366px) {
	#CLUBMED{font-size:17px;}
}
@media screen and (max-width:1280px) {
	#CLUBMED {font-size:16px;}	
}
@media screen and (max-width:1128px) {
	#CLUBMED {font-size:14px;}	
}
/**平板**/
/**手機**/
@media screen and (max-width:1024px) {
	#CLUBMED {font-size:26px;background-size:150%;}	
	#CLUBMED .header .topic{width:80%}
	#CLUBMED .header, #CLUBMED .header .slider-item{height:calc(60vh - 50px);}	
	#CLUBMED .area{width:90%}

	#CLUBMED .tab-demo .tab-title {font-size:1.15em;}
	#CLUBMED .tab-demo .tab-title li {width:calc(100% / 5);font-size:1em;}
	#CLUBMED .tab-demo .tab-title li p span{display:none;}
	#CLUBMED .tab-demo .tab-title li.active a, #CLUBMED .tab-demo .tab-title li:hover a {border-radius:5px;}

	/**下層UI-度假村**/  
	#CLUBMED .tab-demo .tab-inner ul.u3{
		display:block;
		text-align:center;
	}
	#CLUBMED .tab-demo .tab-title li.i3{
		width:calc(100% / 1 - 20%);
		margin:2% auto;
	}
	
	/*button增加倒三角*/
	#CLUBMED .tab-demo .tab-title li.active::after {
		border-width:8px 8px 0 8px;
		margin-left:-8px;/*border-width:5px就往左移-5px  使其居中*/
	}
	#CLUBMED .tab-demo .tab-inner ul.u3 li.i3.active::after {
	border-width:5px 5px 0 5px;
	margin-left:-5px;/*border-width:5px就往左移-5px  使其居中*/
	}

	/**CLUBMED是什麼**/	
	#CLUBMED .area .club{width:100%}
	#CLUBMED .area .club .club_pro{margin:8% auto;}
	#CLUBMED .area .club .club_pro .club_title .comma h2{width:65%}
	#CLUBMED .area .club .item{display:block;margin-bottom:10%;}
	#CLUBMED .area .club .item .img{width:100%;aspect-ratio:2/1;border-radius:15px 15px 0 0;}	

	/* ==================== 地區大圖 ==================== */
	#CLUBMED .area .area_photo{height:auto;}
	#CLUBMED .area .club .club_pro .item_title{font-size:5em;}
	/* -- 國家介紹文字-- */
	#CLUBMED .area .area_photo{padding:5%}
	#CLUBMED .area .area_photo .photo_txt{
		position:relative;
		margin:5% auto 0 auto;
		width:95%;
		font-size:2.5em;
	}
	#CLUBMED .area .area_photo .slider-item{height:40vh;}
	#CLUBMED .area .area_photo .slider_container{position:relative; width:100%;padding:0;}
	#CLUBMED .area .area_photo .slider-arrow{background-size:60%}
	#CLUBMED .area .area_photo ul.slick-dots{width:0}

	/**video**/
	#CLUBMED .area .area_bottom{flex-direction:column;}
	#CLUBMED .area .area_bottom .area_video, #CLUBMED .area .area_bottom .area_small_photo{width:100%;margin:10% auto 0 auto;font-size:1.6em;}

	#CLUBMED .video_bg{width:100%;}
	#CLUBMED .video{width:100%;background:transparent;margin-bottom:15%;padding:0}

	/*CIS-BUTTON停用#CLUBMED .area .area_bottom .area_small_photo a .button{width:50%;font-size:0.8em;line-height:5;top:62%;}*/
	#CLUBMED .area .area_bottom .area_small_photo{height:auto}
	#CLUBMED .area .area_bottom .area_small_photo .p_00, #CLUBMED .area .area_bottom .area_small_photo .p_01, #CLUBMED .area .area_bottom .area_small_photo .p_02{display:none;}
	#CLUBMED .area .area_bottom .area_small_photo .p_03{width:100%;height:auto;aspect-ratio:1 / 0.65;top:0;left:0;border:0;}
	#CLUBMED .area .area_bottom .area_small_photo .p_03, #CLUBMED .area .area_bottom .area_small_photo a .button{position:relative;}
	#CLUBMED .area .club a .button, #CLUBMED .area .area_bottom .area_small_photo a .button{width:55%;}
	#CLUBMED .area .area_bottom .area_small_photo a .button{margin:10% auto; font-size:0.9em;width:60%}
}

@media screen and (max-width:900px) {
	#CLUBMED {font-size:22px;}	
}
@media screen and (max-width:834px) {
	#CLUBMED {font-size:21px;}	
}

@media screen and (max-width:768px) {
	#CLUBMED {font-size:19px;}	
}

@media screen and (max-width:640px) {
	#CLUBMED {font-size:16px;}	
}
/**google Pixel 7手機尺寸**/
@media screen and (max-width:568px) {
	#CLUBMED {font-size:15px;}	
	#CLUBMED .area .club .club_pro .club_title .comma h2{width:70%;}
	#CLUBMED .area .club .club_pro .club_title span{font-size:0.9em;}
}

/**Samsung Galaxy S21 Ultra 5G-480 x 1067**/
@media screen and (max-width:480px) {	
	#CLUBMED {font-size:14px;}	
}

/**HUAWEI Mate 40 Pro(Pro+,RS)-448 x 924 **/
@media screen and (max-width:448px) {	
	#CLUBMED {font-size:15px;}
	#CLUBMED .area .club .club_pro .club_title .comma h2{width:90%;}
}

/**iPhone 15 Pro Max尺寸430 x 932 企劃主管手機尺寸   iPhone 14 Plus-428 x 926 + iPhone 11 Pro Max-414 x 896   +	Google Pixel-411 x 731**/
@media screen and (max-width:430px) {	
	#CLUBMED .header .topic{width:90%}	
	#CLUBMED .area .area_photo .photo_txt img.s_logo{width:18%;right:0;top:0;}
}

/**HUAWEI P40 Pro-400 x 880**/
@media screen and (max-width:400px) {	
}

/**iPhone 15 Pro尺寸393 x 852+iPhone 14-390 x 844 + iPhone SE 3-375 x 667 + iPhone 11 Pro-375 x 812 + iPhone 8 (8, 7, 6S, 6)-375 x 667 + iPhone 13 mini-360 x 780**/
@media screen and (max-width:375px) {
	#CLUBMED {font-size:14px;}
}
/**iPhone SE（SE, 5S, 5C）-320 x 568**/
@media screen and (max-width:320px) {
	#CLUBMED {font-size:12px;}
}
/**手錶	241 x 248+241 x 244+	241 x 218**/
@media screen and (max-width:241px) {
	#CLUBMED {font-size:9px;}
}
/**手錶	156 x 195**/
@media screen and (max-width:156px) {
	#CLUBMED {font-size:6px;}
}
/**手錶	136 x 170**/
@media screen and (max-width:136px) {
	#CLUBMED {font-size:5px;}
}