@charset "utf-8";
/* CSS Document */
@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 100;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 300;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 400;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 500;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
}
@font-face {
	font-family: 'Noto Sans TC';
	font-style: normal;
	font-weight: 700;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
}
@font-face {
	font-family: Arial, 'Noto Sans TC';
	font-style: normal;
	font-weight: 900;
	src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),  url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
}
h1, h2, h3, h4, h5, h6, p {
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
	text-align: center;
}
body {
	font-size: 16px;
	font-family: arial,"Noto Sans TC", "sans", "sans-serif";/*	background-image: url(../images/bg.jpg);*/
}
.wrapper {
	position: relative;
	background-image: url(images/banner002.jpg);
	overflow: hidden;
}
/* 這是設定所有放大縮小的物件是使用移動方式變化 */
.move {
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-ms-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
}
.NO {
	display: none;
}
/* wow進場後額外繼續輪播的動畫 */
.myAni {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.myAni.infinite {
	-webkit-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}
.myAni.hinge {
	-webkit-animation-duration: 2s;
	animation-duration: 2s;
}
.myAni.infinite.pulse {
	/*animation-delay: 2s;*/
	-webkit-animation-name: pulse !important;
	animation-name: pulse !important;
}
/*表頭表尾 請勿------------------------------------砍*/
.top, .footer {
	line-height: 0px;
	width: 100%;
}
.top, .footer {
	z-index: 99;
	position: relative;
}
/*很多物件通用*/

.width1280 {
	max-width: 1280px;
	min-width: 280px;
	height: auto;
	margin: 0 auto;
}

.topICON {
	text-align: center;
	padding-top: 20px;
	padding-bottom: 20px;
}
.myButton {
	background-color: #44c767;
	-moz-border-radius: 28px;
	-webkit-border-radius: 28px;
	border-radius: 28px;
	display: inline-block;
	cursor: pointer;
	color: #ffffff;
	font-family: Arial;
	font-size: 17px;
	padding: 9px 33px;
	text-decoration: none;
}
.myButton:hover {
	background-color: #5cbf2a;
}
.myButton:active {
	position: relative;
	top: 1px;
}
/*BANNER 進場delay時間、浮動*/
.banner {
	position: relative;
	overflow: hidden;
	max-height: 1840px;
}
.resorts-a{
	position: absolute;
	width: 100%;
	max-height: 57em;
	overflow: hidden;
	top: 20%;
	left: 0;
	right: 0;
	padding: 0 16%;
}
img.bannerpicfull {
	-webkit-animation-delay: 0.3s; /* Chrome, Safari, Opera */
	animation-delay: 0.3s;
}
img.banner001 {
	-webkit-animation-delay: 0.7s; /* Chrome, Safari, Opera */
	animation-delay: 0.7s;
}
img.banner002 {
	-webkit-animation-delay: 1.2s; /* Chrome, Safari, Opera */
	animation-delay: 1.2s;
}

img.banner004 {
	-webkit-animation-delay: 1.5s; /* Chrome, Safari, Opera */
	animation-delay: 1.5s;
}
img.banner005 {
	-webkit-animation-delay: 0.7s; /* Chrome, Safari, Opera */
	animation-delay: 0.7s;
}
img.banner006 {
	-webkit-animation-delay: 0.7s; /* Chrome, Safari, Opera */
	animation-delay: 0.7s;
}
img.banner007 {
	-webkit-animation-delay: 0.7s; /* Chrome, Safari, Opera */
	animation-delay: 0.7s;
}
img.banner_cloud{
	-webkit-animation-delay: 0.3s; /* Chrome, Safari, Opera */
	animation-delay: 0.3s;
}
img.banner_earth{
	-webkit-animation-delay: 0s; /* Chrome, Safari, Opera */
	animation-delay: 0s;
}
img.banner_resorts{
	-webkit-animation-delay: 0.8s; /* Chrome, Safari, Opera */
	animation-delay: 0.8s;
}
.bannerpicfull {
	display: block;
	width: 100%;
	height: auto;
	/*-webkit-animation: rotate 30s infinite linear;
    -o-animation: rotate 30s infinite linear;
    animation: rotate 30s infinite linear;*/
	-webkit-clip-path: inset(0 0 46% 0);
	clip-path: inset(0 0 46% 0);
	
}
img.banner_cloud {
	display: block;
	top: 0%;
	left: 0%;
	z-index: 3;
	max-width: 1920px;
	height: auto;
	width: 100vw;
	position: absolute;
	-webkit-animation: rotate 120s infinite linear;
    -o-animation: rotate 120s infinite linear;
    animation: rotate 120s infinite linear;
	/*-webkit-clip-path: inset(0 0 46% 0);
	clip-path: inset(0 0 46% 0);*/
}
img.banner_resorts {
	display: block;
	z-index: 10;
	height: auto;
	width: 100%;
	position: relative;
	-webkit-animation: rotate_resort 15s 4s infinite;
	-o-animation: rotate_resort 15s 4s infinite;
	animation: rotate_resort 15s 4s infinite;
}
img.banner_earth {
	display: block;
	top: 8%;
	left: 0%;
	right: 0;
	z-index: 8;
	max-width: 1920px;
	height: auto;
	width: 100vw;
	position: absolute;
	margin: 0 auto;
}
/*.bannerpic1280 {
	display: none;
	width: 100%;
	height: auto;
}*/
/*.bannerpic960 {
	display: none;
	width: 100%;
	height: auto;
}*/


/*表單區*/
.fill {
	text-align: center;
	z-index: 100;
	width: 100%;
	height: auto;
	position: relative;
	margin-top: -950px;
	background-image: url(../images/form_bg.png);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
}
.B_form h1 .highlight_bold { font-weight: 600; font-size: 1.05em;}
.B_form h1 .arrow { font-weight: 600; color: #f33e53;}
.B_form h1 .bold_red { font-weight: 600; font-size: 1.05em; color: #f33e53;}
.fill h2 {
	text-align: center;
	line-height: 25px;
	/*font-style: italic;*/
	color: #2a2a2a
}
.fill h2 .important {
	text-align: center;
	line-height: 25px;
	font-weight: bold;
	margin-top: 0px;
	font-style: italic;
	color: #f6d258
}
.fill .share {
	display: block;
	width: 280px;
	margin: 0 auto;
}
.fill .share ul {
}
.fill .share ul li {
	float: left;
	list-style: none;
	padding-left: 12px;
}
.fill #sBut {
	display: block;
	/*max-width: 450px;*/
	height: auto;
	/*min-width: 280px;*/
	/*margin-top: 50px;*/
	/*margin-bottom: 80px;*/
	width: 100%;
}

.fill img.luggage {display: block; margin: 0 auto;}
.fill img.go_button {display: block; margin: 0 auto;}
/* 內文螢光黃 */
.highlight{ background-color: #fff600;}
.fill .statement {
	color: #eb273e;
	line-height: 40px;
	font-size: 1.25em;
}
.fill .statement a {
	color: #000000;
	text-decoration: underline;
}
.fill .statement a:hover {
	color: #fff600;
}
.fill .form-control {
	margin-bottom: 5px;
	border: 1px solid #eb273e;
    background:#FFFFFF;
	width: 100%;
	height: 6.5%;
	padding:10px 30px;
	border-left: 10px solid #eb273e;
}

.sns_icons{ display: inline-block; vertical-align: top;}

/* Bar群外觀 */
.bar_1 { width: 100vw; height: auto; text-align: center; padding: 20px 0; background-color: #2e3f7f; position: relative; z-index: 101;}
.bar_1 h2 { color: #FFFFFF; font-size: 1.75em; letter-spacing: 0.15em; font-weight: 400;}
.slash { letter-spacing: -0.1em;}
.highlight_bold { font-weight: 600; font-size: 1.05em;}
.highlight_yellow { font-weight: 600; font-size: 1.05em; color: #ffee2e;}
.bar_box_cor { width:0; height:0; font-size:0;border-style:solid;overflow:hidden; position:absolute; }
.cor1 {border-width:20px;border-color:#2e3f7f transparent transparent transparent;left: 0;right: 0;bottom:-40px;margin: 0 auto;}

.bar_2 { width: 100vw; height: auto; text-align: center; padding: 20px 0; background-color: #eb273e; position: relative; z-index: 101;}
.bar_2 h2 { color: #FFFFFF; font-size: 1.75em; letter-spacing: 0.15em; font-weight: 400;}
.cor2 {border-width:20px;border-color:#eb273e transparent transparent transparent;left: 0;right: 0;bottom: -40px;margin: 0 auto;}
/*各國國旗zone*/
.flags { /*background-image: url(../images/flag_bg.jpg); background-repeat: no-repeat; background-position: top center; background-size: cover; width: 100vw; height: 834px;*/ position: relative;}
.flags_background { display: block; width: 100%; height: auto;}
.flag_left1 { position: absolute; max-width: 766px; width: 40vw; height: auto; z-index: 10; left: 0%; top: 0%;}
.flag_left2 { position: absolute; max-width: 1186px; width: 60vw; height: auto; z-index: 10; left: 0%; top: 0%;}
.flag_right1 {position: absolute;max-width: 961px;width: 50vw;height: auto;z-index: 12;right: 0%;top: 0%;}
.flag_right2 {position: absolute;max-width: 2925px;width: 130%;height: auto;z-index: 9;left: 0%;bottom: 2%;}
.flags_mb { /*background-color: #f0f7fd; background-image: linear-gradient(135deg, #f0f7fd 0%, #b8e3f6 50%, #e0e4ed 100%);*/background-image: url(../images/flag_bg_mb.png); background-positon: center top; background-size: cover; max-width: 800px; padding: 10px 0 50px 0;}

/*地圖 zone*/
.maps {position: relative;margin: 0 auto;}
.flags_background { display: block; width: 100%; height: auto;}
.click_instruction {position: absolute;z-index: 12;max-width: 318px;top: 4%;left: 0;right: 0;margin: 0 auto;}
.click_instruction p { color: #ffffff; font-weight: 400; /*border: 1px solid rgba(51,51,51,1);*/ border-radius: 50px; text-align: center; font-size: 1.1em; letter-spacing: 0.05em; padding: 10px 20px 6px 20px; background-color: #eb273e;} 
.click_instruction_2 { position: absolute; z-index: 12; max-width: 318px; top: 4%; left: 43.8%;}
.click_instruction_2 p { color: #ffffff; font-weight: 400; /*border: 1px solid rgba(51,51,51,1);*/ border-radius: 50px; text-align: center; font-size: 1.15em; letter-spacing: 0.05em; padding: 10px 20px 6px 20px; background-color: #2e3f7f;} 
.scale_icon { font-size: 1.5em; vertical-align: middle;}
.worldmap {position: absolute;max-width: 1920px;width: 100vw;height: auto;z-index: 10;left: 0%;right: 0;top: 0%;margin: 0 auto;}
#select_nations {position: absolute;z-index: 12;max-width: 1920px;width: 100vw;height: auto;left: 0%;right: 0;top: 0%;margin: 0 auto;}
/*地圖 zone 手機版*/
.maps_mb { position: relative;}
.flags_background_mb { display: block; width: 100%; height: auto;}
.worldmap_mb {  position: absolute; max-width: 800px; width: 100vw; height: auto; z-index: 10; left: 0%; top: 0%;}
#select_nations_mb { position: absolute; z-index: 12; max-width: 800px; width: 100vw; height: auto; left: 0%; top: 0%;}
/*翻牌 zone*/
.flipcard { position: relative; background-image: url(../images/flipcard_bg.png); background-position: center bottom; background-size: cover; padding: 120px 500px 80px 500px ; }
.flipcard_background { display: block; width: 100%; height: auto;}
.whole_flip { /*position: absolute; z-index: 12; top: 18%; left: 28.5%;*/}
.whole_flip img {border: 0.65px solid #000000;box-shadow: 1px 1px 3px #666;}
/* 翻牌效果 */
#f1_container {
  position: relative;
  width: 405px;
  height: 253px;
  z-index: 1;
  display: flex;
  flex-flow: row;
  justify-content: center;
  margin: 0;
  padding-bottom: 10px;
}    
#f1_container {
  perspective: 1000;
  -webkit-perspective: 1000; /* Safari 和 Chrome */
  perspective: 1000;
}   
#f1_card {   
  width: 100%;   
  height: 100%;   
  transform-style: preserve-3d;   
  transition: all 0.5s linear;   
}   
/*
#f1_container:hover #f1_card {   
  transform: rotateY(-180deg);   
}   
*/
.face {
	position: absolute;
	width: 100%;
	height: 100%;
	backface-visibility: hidden;
	margin-left:-14px;
}   
.face.back {
  display: block;
  transform: rotateY(180deg);
  box-sizing: border-box;
  padding:35px 25px;
  color: #000000;
  font-size:14px;
  border: 1px solid #000000;
  background: linear-gradient(-45deg, transparent 20px, #ffffff 0);
  cursor: pointer;
}  

.face.back h2{font-size: 1.5em;line-height:1.5em; padding-bottom:20px; */font-weight: 600; text-align: left; letter-spacing:0.25em; border-bottom: 1px solid #eb273e;}
.face.back p{font-size: 1.15em;line-height: 1.8em;/* padding-top:100px; */text-align:left; text-align-last: left; font-weight:normal;}
#f2_container {
  position: relative;
  width: 405px;
  height: 496px;
  z-index: 1;
  display: flex;
  flex-flow: row;
  justify-content: center;
  margin: 0;
  margin-left: 10%;
}    
#f2_container {   
  perspective: 1000;   
  -webkit-perspective: 1000; /* Safari 和 Chrome */
  perspective: 1000;
}   
#f2_card {
  width: 100%;
  height: 97%;
  transform-style: preserve-3d;
  transition: all 0.5s linear;
  cursor: pointer;
}   
/*
#f2_container:hover #f2_card {   
  transform: rotateY(-180deg);   
}   
*/
/* 手機版 翻牌zone */
.noflip_mb { background-image: url(../images/flipcard_bg.png); background-position: center bottom; background-size: cover; padding: 5% 5%;}
.noflip_mb h2{font-size: 1.4em;line-height:1em; padding-bottom:15px; */font-weight: 600; text-align: left; letter-spacing:0.05em; border-bottom: 1px solid #eb273e; }
.noflip_mb p{font-size: 1em;line-height: 1.2em; padding-top:10px; text-align:left; text-align-last: left; font-weight:normal;}
.noflip_mb img { display: block; margin: 0 auto; width: 70vw; height: auto; border: 0.5px solid #000000;  box-shadow: 0.5px 0.5px 2px #666; margin: 2% 0; }
.noflip_text { /*background-color: #000000;*/ border: 0.5px solid #000000; background: linear-gradient(-45deg, #000000 20px, #ffffff 0); margin: 1% 0; padding: 4% 5% 10% 5%;}
/*選擇巨匠優勢 zone */
.advantage { background-image:url(../images/advantage_bg.jpg); background-repeat: no-repeat; background-position: center top; background-size: cover; width: 100vw; padding: 5% 28%; position: relative;}
.advantage img { display: block; margin: 0 auto;}
.advantage p { color: #000000; font-size: 1.4em; text-align: center; letter-spacing: 0.05em; margin-top: 20px;}
.ad_left { padding: 20px 20px; border-bottom: 1px solid #000000; border-right: 1px solid #000000;}
.ad_right { padding: 20px 20px; border-bottom: 1px solid #000000;}
.ad_left_down { padding: 20px 20px; border-right: 1px solid #000000;}
.ad_right_down { padding: 20px 20px; }

/*節慶彈出框*/
.cow { position: relative;}
.tomato { position: relative;}
.spain_fes_1 { border-radius: 10px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;} 
.black_line { width: 100%; height: 13px; background-color: #000000;}
.spain_fes_2 { border-radius: 10px; border-top-right-radius: 0px; border-top-left-radius: 0px;} 
.festival_title { position: absolute; z-index: 10; width: 46%; height: auto; left: 0; top: 5%; background-color: rgba(255,201,85,0.9); padding: 0px 50px 0px 40px; border-left: 12px solid #eb273e;}
.festival_title h4 { color: #00000; font-weight: 600; font-size: 1.3em; line-height: 1.2em; letter-spacing:　0.05em; text-align: left;}
.festival_footer { position: absolute; z-index: 10; width: 100%; height: auto; left: 0; bottom: 0; background-color: rgba(0,0,0,0.6); padding: 20px 28px 8px 28px;}
.festival_footer p { color: #ffffff; font-weight: 100; font-size: 0.85em; line-height: 1.2em; text-align: justify; text-align-last: left; }
.festival_footer h5 { color: #ffffff; font-weight: 500; font-size: 0.85em; line-height: 1.3em; letter-spacing:　0.03em; text-align: left; }
.date { background-color: #eb273e;}

/* 特色區手機版燈光*/
.triangle_light_left { position: absolute; left: 0; top:0; background-color: #dfdfdf; background-image: linear-gradient(102deg, #dfdfdf 0%, #2f2f2f 98%); -webkit-clip-path: polygon(0 0, 0% 100%, 31% 0); clip-path: polygon(0 0, 0% 100%, 31% 0); mix-blend-mode: multiply; width: 80%; height: 80vh; z-index: 99; opacity: .6;}

.triangle_light_right { position: absolute; right: 0; top:0; background-color: #2f2f2f; background-image: linear-gradient(80deg, #2f2f2f 0%, #dfdfdf 95%); -webkit-clip-path: polygon(69% 0, 100% 100%, 100% 0); clip-path: polygon(69% 0, 100% 100%, 100% 0); mix-blend-mode: multiply; width: 80%; height: 80vh; z-index: 99; opacity: .6;}

@keyframes rotate{
    0%{
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
    }
}
@keyframes rotate_resort{
	0%,15%{
	transform:	rotate(0deg);
    -webkit-transform:  rotate(0deg);
	-moz-transform:	rotate(0deg);
  }
  	50%,65%{
	transform:	rotate(180deg);	
    -webkit-transform:  rotate(180deg);
	-moz-transform:	rotate(180deg);
	}
	
	100%{
	transform: rotate(360deg);
    -webkit-transform:  rotate(360deg);
	-moz-transform: rotate(360deg);
  }
}


html ::-webkit-{background-color:#f9d04e; color:#f33e53; text-shadow:none}
html ::-moz-selection{background-color:#f9d04e; color:#f33e53; text-shadow:none}
html ::selection{background-color:#f9d04e; color:#f33e53; text-shadow:none}



/*	↓↓↓↓	螢幕尺寸大於1024時頁面顯示效果↓↓↓↓	 */
@media (min-width:1024px) {

img.banner001 {
	display: block;
	top: 1%;
	left: 0;
	right: 0;
	z-index: 5;
	max-width: 889px;
	height: auto;
	width: 50vw;
	position: absolute;
	margin: 0 auto;
}
img.banner002 {
	display: block;
	top: 43%;
	left: 42%;
	z-index: 5;
	max-width: 518px;
	height: auto;
	width: 38vw;
	position: absolute;
}

img.banner004 {
	display: none;
}
img.banner005{ display:none;
}
img.banner006{ display:none;
}
img.banner007{ display:none;
}

.B_form { margin:0 auto; padding: 150px 0px 100px 0px;}
.B_form h1 {
	color: #000000;
	font-weight: 400;
	font-size: 1.45em;
	letter-spacing: 0.05em;
	padding: 30px 60px 40px 100px;
	text-align: center;
	background-image: url(../images/form_title_bg.png);
	background-size: contain;
	background-position: center;
	width: 64vw;
	margin: 0 auto;
	background-repeat: no-repeat;
	margin-bottom: 50px;
}


}
@media (min-width: 1651px) and (max-width:1763px) {
.flipcard { padding: 120px 450px 80px 450px;}
}

@media (min-width: 1380px) and (max-width:1650px) {
.fill { margin-top: -830px;}
.click_instruction { left: 41.2%;}
.flipcard { padding: 120px 300px 80px 300px;}
}
@media (min-width: 1290px) and (max-width:1379px) {
.fill { margin-top: -790px;}
.click_instruction { left: 40.8%;}
.flipcard { padding: 120px 250px 80px 250px;}

}
@media (min-width: 1170px) and (max-width:1289px) {
.fill { margin-top: -730px;}
.click_instruction { left: 39.5%;}
.flipcard { padding: 120px 200px 80px 200px;}
}
@media (min-width: 1025px) and (max-width:1169px) {
.fill { margin-top: -650px;}
.click_instruction { left: 38%;}
.flipcard { padding: 120px 100px 80px 100px;}
}
@media (min-width: 1025px) and (max-width:1238px) {
.B_form h1{
	font-size: 1.55em;
	letter-spacing: 0.05em;
	padding: 10px 70px 30px 150px;
	text-align: center;
	background-image: url(../images/form_title_bg_2.png);
	background-size: contain;
	width: 65vw;
	margin: 0 auto;
	background-repeat: no-repeat;
	margin-bottom: 50px;}
	
}
@media (width:1024px) and (height:1366px) {


/*表單區*/
.fill { position: relative; top: 0; left: 0; width: 100%; max-width: none;}
.B_form h1 {
	font-size: 1.1em;
	padding: 0;
	text-align: center;
	width: 85vw;
	margin: 0 auto;
	margin-bottom: 50px;
	padding: 15px 0 15px 100px;
	background-position:center;
}
.fill .statement{ font-size: 1.25em; letter-spacing: 0.1em;}
.fill .form-control { height: 4.5%;}
.flipcard { padding: 120px 100px 80px 100px;}
}


/* ↓↓↓↓ pad 豎屏時, 頁面顯示尺寸 300 < x <960 時,顯示效果 ↓↓↓↓  */
@media (min-width: 280px) and (max-width:959px) {


/*手機板的FOOTER------別刪除-------------------------------*/
.FOOTER_frame {
	height: 450px;
}
}

/*========================================================*/
@media (max-width: 1280px) {

}

/*	↓↓↓↓ 螢幕尺寸【小於】1024時頁面顯示效果	↓↓↓↓ */
@media (max-width: 1024px) {
img.banner001 {
	display: block;
	top: 1%;
	left: 26.5%;
	z-index: 5;
	max-width: 889px;
	height: auto;
	width: 50vw;
	position: absolute;
}
img.banner002 {
	display: block;
	top: 43%;
	left: 42%;
	z-index: 5;
	max-width: 518px;
	height: auto;
	width: 38vw;
	position: absolute;
}


.fill { margin-top: -580px;}
.bar_1 { font-size: 0.8em; padding: 5px 0;}
.bar_2 { font-size: 0.8em; padding: 5px 0;}
.bar_3 { font-size: 0.8em; padding: 5px 0;}
.bar_4 { font-size: 0.8em; padding: 5px 0;}	
.click_instruction {top: 5%;}
.flipcard { padding: 120px 100px 80px 100px;}
}
@media (min-width:959px) and (max-width:1023px) {

.fill { padding: 150px 0 50px 0;}
.B_form h1 {
	font-size: 1.1em;
	padding: 15px 65px 30px 150px;
	text-align: center;
	background-image: url(../images/form_title_bg.png);
	background-size: contain;
	width: 65vw;
	margin: 0 auto;
	background-repeat: no-repeat;
	margin-bottom: 50px;
}
.fill .form-control { width: 100%; height: 5%; margin: 0 auto;}
.form-control { font-size: 1.2em;}
.fill .statement { font-size: 1em;}
.fill img.go_button { width: 43vw; height: auto;}


.B_form { margin:0 auto; }
.fill img.luggage { width: 40vw; height: auto;}
.form-control{ font-size: 1.5em;}
.flipcard { padding: 120px 100px 80px 100px;}


}
@media (max-width: 991px){
.ad_left { border-bottom: 0px; border-right: 0px;}
.ad_right { border-bottom: 0px;}
.ad_left_down { border-right: 0px;}

}
@media (max-width: 960px) {
img.banner001 {
	
}
img.banner002 {
	display: block;
	top: 50%;
	left: 45%;
	z-index: 5;
	max-width: 518px;
	height: auto;
	width: 38vw;
	position: absolute;
}
.B_form h1 {
	font-size: 1.1em;
	padding: 0;
	text-align: center;
	background-color: #ffffff;
	border: 1px solid #000000;
	border-radius: 15px;
	box-shadow: 2px 2px 0px #000000;
	width: 85vw;
	margin: 0 auto;
	margin-bottom: 50px;
	padding: 15px 0;
}
.fill img.luggage { width: 40vw; height: auto;}
.fill .form-control { width: 70%; height: 5%; margin: 0 auto;}
.form-control { font-size: 1.2em;}
.fill .statement { font-size: 1em;}
.fill img.go_button { width: 45vw; height: auto;}


/*.bannerpic960 {
	display: block;
	width:100%;
}*/

/*表單區*/
.fill { margin-top: -535px; padding: 150px 0 80px 0;}



.B_form { margin:0 auto;}

.fill .searchtext2{ vertical-align:middle;}
.fill .statement{ font-size:1em;}
.fill .go_button { width: 70%;}
.click_instruction p { font-size: 0.75em; padding: 5px 20px 2px 20px;}
.click_instruction {top: 9%;}
.cor1 {}
.cor2 {}
}

/*↓↓↓↓ *螢幕尺寸【小於】768時頁面顯示效果	↓↓↓↓ */
@media (max-width: 768px) {
.bannerpicfull {
	-webkit-clip-path: inset(0 0 30% 0);
	clip-path: inset(0 0 30% 0);
	
}
img.banner001 {
	width: 70vw;
	top: 3%;
	left: 15%;	
}
img.banner002 {
	display: block;
	top: 53%;
	left: 42%;
	z-index: 5;
	max-width: 518px;
	height: auto;
	width: 40vw;
	position: absolute;
}

img.banner_earth {
	top: 10%;
	left: -26%;
	width: 150vw;
}
img.banner_resorts{
	top: 28%;
	left: 0%;
	width: 95vw;
}
.noflip_mb img { width: 100vw; height: auto;}
.noflip_mb { padding: 5% 15%;}
.festival_title { width: 60%;}

.resorts-a {
    padding: 0;
    top: 31%;
}
/*.bannerpic1280 {
	display: none;
}*/
/*.bannerpic960 {
	display: block;
	width:100%;
}*/

.B_form{ padding: 0 30px;}
.fill { margin-top: -330px;}
.fill .form-control{ height: 6%; width: 100%;}
.fill .form-control2{ height: 6%;}
.fill .searchtext2{ vertical-align:middle;}
.fill .statement{ font-size:1em;}
.fill img.go_button { width: 60vw;}
.click_instruction {top: 6%;}
.advantage p { font-size: 1.15em;}
.cor1 {}
.cor2 {}
}
@media (min-width: 580px) and (max-width:650px) {
.fill { margin-top: -300px;}
.click_instruction { left: 35%;}
}
@media (min-width: 481px) and (max-width:579px) {
.fill { margin-top: -260px;}
.click_instruction { top: 3%; left: 34%;}
}
/*↓↓↓↓ 	螢幕尺寸【大於】481時頁面顯示效果	↓↓↓↓ */
@media (min-width: 481px) {
}

/*↓↓↓↓ 	螢幕尺寸【小於】480時頁面顯示效果	↓↓↓↓ */
@media (max-width: 480px) {
img.banner001 {
	width: 80vw;
	left: 8%;
	
}
.bannerpicfull {
	-webkit-clip-path: inset(0 0 20% 0);
	clip-path: inset(0 0 20% 0);
	
}
img.banner002 {
	display: block;
	top: 55%;
	left: 46%;
	z-index: 5;
	max-width: 518px;
	height: auto;
	width: 38vw;
	position: absolute;
}
img.banner_resorts { width: 100vw; top: 30%; left: -3.5%;}
img.bannner_earth{ left: -28%;}
.noflip_mb { padding: 5% 5%;}


/*.bannerpic1280 {
	display: none;
}*/
/*.bannerpic960 {
	display: block;
	width:100%;
}*/
.fill { margin-top: -160px; padding: 100px 0 30px 0;}
.fill .searchtext2{ vertical-align:middle;}
.fill .statement{ font-size:0.75em;}
.fill .go_button { width: 70%;}
.B_form{ padding: 0 20px;}
.B_form h1{ font-size: 1em; letter-spacing: 0.02em; padding: 20px;}
.fill #sBut{ margin-top: 30px; margin-bottom: 50px;}
.form-control{ font-size: 1.1em;}
.fill img.luggage { width: 60vw; height: auto;}
.fill img.go_button { width: 80vw;}
.bar_1 { font-size: 0.65em; }
.bar_2 { font-size: 0.65em; }
.bar_3 { font-size: 0.65em; }
.bar_4 { font-size: 0.65em; }	
.festival_title { width: 80%;}
.festival_footer { position: relative; background-color: #000000;}
.click_instruction {top: 8%;padding: 0px 16%;}
.cor1 {}
.cor2 {}
}

@media (max-width: 400px) {

}

@media (max-width: 320px) {
img.banner001 {
	width: 90vw;
	left: 5%;
	
}
img.banner002 {
	display: block;
	top: 56%;
	left: 48%;
	z-index: 5;
	max-width: 518px;
	height: auto;
	width: 42vw;
	position: absolute;
}
img.banner_resorts{
	width: 110vw;
	top:35%;
	left: -6%;
}
img.banner_earth{ width: 160vw; left: -30%;}
.fill .form-control { width: 100%; padding: 10px;}
.bannerpicfull {
	-webkit-clip-path: inset(0 0 20% 0);
	clip-path: inset(0 0 20% 0);
	
}
.click_instruction {padding-top: 2%;}

/*.bannerpic1280 {
	display: none;
}*/
/*.bannerpic960 {
	display: block;
	width:100%;
}*/
.fill{ margin-top: -148px; padding: 100px 0 30px 0;}
.B_form h1{ font-size: 0.9em; margin-bottom: 20px;}
.fill .form-control { height: 5%;}

.fill .searchtext2{ vertical-align:middle;}
.fill .statement{ font-size:0.75em;}
.fill .go_button { width: 70%;}

.fill #sBut{min-width:0; margin-top: 10px; margin-bottom:20px;}
.fill #sBut{ margin-left: 0;}
.noflip_mb { padding: 5% 5%;}
.festival_title { width: 85%;}
}



@media only screen and (max-width: 1280px) {
}