*{
	margin:0;
	padding:0;
	-webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

/* 嵌入字型設定 */

@font-face {
    font-family: "cm-w7";
    src: url(../images/cm-w7.otf);
}

html,body{
	width:100%;
	min-width:320px !important;
	background-color:#FFF;
}

.activity_main{
	width:100%;
	max-width:1920px;
	min-width:1200px;
	margin:0 auto;
	background-image:url(../images/bk01.png),url(../images/bk02.png);
	background-repeat:no-repeat, no-repeat;
	background-position:top left, center 52vh;
	background-color:#FFF;
}


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

.top-area{
	width:100%;
	padding-top:28px;/*-- 撐開上面表頭區域 --*/
}

.top-area>div{
	display:inline-block;
	vertical-align:top;
	height:68.5vh;
}

.top-space{
	width:15%;
	
}

.top-pic{
	width:80%;
	padding-top:4vh;
	position:relative;

}

.top-pic .main-pic{
	width:100%;
	height:64.5vh;
	text-indent:-9999px;
	border-radius:30px;
}

.top-pic .sakura-mainpic{ /*-- 櫻花主圖 --*/
	background:url(../images/sakura/main-pic-sakura01.jpg) no-repeat top right;
	background-size:cover;
}

.top-pic .huji-mainpic{  /*-- 紫藤主圖 --*/
	background:url(../images/huji/main-pic-huji.jpg) no-repeat top right;
	background-size:cover;
}

.top-pic .shiba-mainpic{  /*-- 芝櫻主圖 --*/
	background:url(../images/shiba/main-pic-shiba.jpg) no-repeat top right;
	background-size:cover;
}

.top-pic .tulip-mainpic{  /*-- 鬱金香主圖 --*/
	background:url(../images/tulip/main-pic-tulip.jpg) no-repeat top right;
	background-size:cover;
}

.top-pic .peony-mainpic{  /*-- 牡丹主圖 --*/
	background:url(../images/peony/main-pic-peony.jpg) no-repeat top right;
	background-size:cover;
}

.top-pic .rape-mainpic{  /*-- 油菜花主圖 --*/
	background:url(../images/rape/main-pic-rape.jpg) no-repeat top right;
	background-size:cover;
}

.top-pic .lavender-mainpic{  /*-- 薰衣草主圖 --*/
	background:url(../images/lavender/main-pic-lavender.jpg) no-repeat top right;
	background-size:cover;
}


/*.top-pic img{
	width:100%;
	border-radius:30px;
}*/

h1.top-title{
	display:block;
	width:44%;
	
	position:absolute;
	top:23vh;
	left:-150px;
	z-index:88;
}

h1.top-title img{
	width:100%;
	height:auto;
}

.sp-event{
	width:5%;
}


.sp-event ul{
	width:35%;
	margin:0 auto;
}
.sp-event li{
	width:100%;
	display:inline-block;
	-webkit-writing-mode: vertical-rl;/*把文字改為由右到左直書,vertical-lr是由左往右*/
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
	margin-bottom:15px;
	
	}
.sp-event li:first-child{
	text-align:center;
	height:14vh;
	position:relative;
	background:url(../images/sp-t.svg) no-repeat top center;
	background-size:cover;
	text-indent:-9999px;
}


.sp-event li:first-child img{
	width:100%;
	height:auto;
	position:absolute;
	top:0;
	left:0;

}

/*.sp-event li:first-child{
	font-size:1.2em;
	letter-spacing:2px;
	color:#fff;
	background-color:#333333;	
	
	padding:15px 10px;	
}
*/

.sp-event li a{
	display:block;
	width:100%;
	color:#333;
	font-family: "cm-w7","新細明體", "微軟正黑體", sans-serif;
	
	font-size:1.2em;
	line-height:35px;
	
	letter-spacing:2px;
	font-weight:600;
	text-decoration:none;
    padding:3.5vh 0px 1vh 0px;
	/*border-bottom:#333 1px dotted;*/
	text-align:center;
	background:url(../images/hana-black.png) no-repeat top center;
	background-size:80% auto;
}

.sp-event li a:hover{
	color:#ff3e5f;
	background: url(../images/hana-rad-s.png) no-repeat top center;
	background-size:80% auto;
	
}

@media screen and (max-width: 1440px){
	.sp-event li a{
	   font-size:1.1em;
	   line-height:25px;
	   background:url(../images/hana-black.png) no-repeat top center;
	   background-size:100% auto;
	}
	
	.sp-event li a:hover{
	   background:url(../images/hana-rad-s.png) no-repeat top center;
	   background-size:100% auto;
	}
}


@media screen and (max-width: 1280px){
	
	h1.top-title{
		width:48%;
		position:absolute;
		top:28vh;
		left:-150px;
		z-index:88;
    }
	
	.sp-event li{
	    margin-bottom:5px;
	
	}

	
	.sp-event li:first-child{
	    height: 12vh;
	}
	
	.sp-event li a{
	   font-size:1em;
	   line-height:22px;
	   
	}
	
	
}

@media screen and (max-width: 1024px){
	
	.activity_main{
		width:100%;
		min-width:320px;
		margin:0 auto;
		background-image:url(../images/bk01.png),url(../images/bk02.png);
		background-repeat:no-repeat, no-repeat;
		background-position:top left, center 52vh;
		background-color:#FFF;
	}
	
	h1.top-title {
		width: 55%;
		position: absolute;
		top: 30vh;
		left: -150px;
		z-index: 88;
	}	
}

@media screen and (max-height: 1366px) and (min-height:1080px){ /*-- ipad pro 的高--*/
	.top-area>div{
		display:inline-block;
		vertical-align:top;
		height:39vh;
	}
		
	.top-pic .main-pic{
		width:100%;
		height:34.5vh;
		text-indent:-9999px;
		border-radius:30px;	
		
	 }
	 
	h1.top-title {
		width: 48%;
		position: absolute;
		top: 18vh;
		left: -130px;
		z-index: 88;
	}
	
	.sp-event li:first-child{
	    height: 7vh;
	}
	
	.sp-event li a{
		padding:2vh 0px 1vh 0px;
	}
		
}


@media screen and (max-width:768px){ /*-- ipad --*/

     .top-area{
		width:100%;
		padding-top:10px;/*-- 撐開上面表頭區域 --*/
	}
	
	.top-area>div {
		height: 40vh;
	}
	
	.top-pic .main-pic {
		height: 36vh;
	}
	
	h1.top-title {
		width: 55%;
		position: absolute;
		top: 16vh;
		left: -100px;
		z-index: 88;
	}
	
	.sp-event ul {
		width: 50%;
		margin: 0 auto;
	}
	
	.sp-event li:first-child {
		height: 10vh;
	}
	
	.sp-event li a {
		line-height: 18px;
    	padding: 2.5vh 0px 1vh 0px;
	}
	
	
}

@media screen and (min-width: 320px) and (max-width: 414px) { /*-- iphone plus --*/
	
	.top-area{
		width:100%;
		padding-top:50px;/*-- 撐開上面表頭區域 --*/
		text-align:center;
	}

	.top-space,.sp-event{
		display:none !important;
     }
     
	.top-pic {
		width: 90%;
		padding-top: 2vh;
		position: relative;
		margin:0 auto;
	}
	
	h1.top-title {
		width: 55%;
		position: absolute;
		top: 16vh;
		left: -10px;
		z-index: 88;
	}
	 
	 
}


@media screen and (max-height: 414px){ /*-- 手機橫向的高，寫在最後面 --*/

    .top-area {
		padding-top: 50px;
	}

    .top-area>div{
		height:70vh;
	}

	.top-pic .main-pic {
    	height: 66vh;
	}
	
	.sp-event ul {
		width: 60%;
		margin: 0 auto;
	}
	
	.sp-event li:first-child {
    	height: 28vh;
	}
	
	.sp-event li a {
		line-height: 18px;
		padding: 6.5vh 0px 1vh 0px;
	}
	
	main-nav li {
		margin-left: 10px;
		width: 10%;
	}



}




/*==================================== 選單 ====================================*/ 


.main-nav{
	width:100%;
	text-align:center;
	overflow:hidden;
}

.main-nav ul{
	display: inline-block;
	width:1200px;
	margin:30px auto;
}


.main-nav li{
	display:inline-block;
	vertical-align:top;
	margin-left:20px;
	width:11%;
}

.main-nav li:first-child{
	margin-left:0;
}

.main-nav li a{
	display:block;
	text-indent:-9999px;
	width:100%;
	height: 0;
	padding-bottom:100%;
	
}

.main-nav li a.sakura{
	background:url(../images/b0101.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.sakura02{
	background:url(../images/b0102.png) no-repeat top center;
	background-size: 100%;
}

.main-nav li a.huji{
	background:url(../images/b0201.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.huji02{
	background:url(../images/b0202.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.shiba{
	background:url(../images/b0301.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.shiba02{
	background:url(../images/b0302.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.rape{
	background:url(../images/b0401.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.rape02{
	background:url(../images/b0402.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.tulip{
	background:url(../images/b0501.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.tulip02{
	background:url(../images/b0502.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.peony{
	background:url(../images/b0601.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.peony02{
	background:url(../images/b0602.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.lavender{
	background:url(../images/b0701.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.lavender02{
	background:url(../images/b0702.png) no-repeat top center;
	background-size: 100%;
	
}


.main-nav li a.sakura:hover{
	background:url(../images/b0102.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.huji:hover{
	background:url(../images/b0202.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.shiba:hover{
	background:url(../images/b0302.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.rape:hover{
	background:url(../images/b0402.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.tulip:hover{
	background:url(../images/b0502.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.peony:hover{
	background:url(../images/b0602.png) no-repeat top center;
	background-size: 100%;
	
}

.main-nav li a.lavender:hover{
	background:url(../images/b0702.png) no-repeat top center;
	background-size: 100%;
	
}


.country{
	width:100%;
	height:30px;
	margin:30px auto;
    text-align:center;
}

.country ul{
	display:inline-block;
	width:1200px;
	
}

.country li{
	display:inline-block;
	vertical-align:middle;
	width:15%;
	height:100%;
	border-left:#333 1px solid;
}

.country li:last-child{
	border-right:#333 1px solid;
}

.country li a{
	display:block;
	color:#333;
	font-size:2em;
	font-weight:600;
	line-height:30px;
	text-align:center;
	width:100%;
}

.country li a:hover,.country li a.here{
	color:#ff3e5f;
}


@media screen and (max-width: 1280px){
	.main-nav ul{
	display: inline-block;
	width:1000px;
	margin:20px auto;
}
	
}

@media screen and (max-width:1024px){
	.main-nav ul{
		display: inline-block;
		width:100%;
		margin:20px auto;
	}
	
	.country ul{
		display:inline-block;
		width:100%;
		
	}

}


@media screen and (max-width:768px){ /*-- ipad --*/

	.country {
		margin: 10px auto 30px auto;
	}

}

@media screen and (min-width: 320px) and (max-width: 414px) { /*-- iphone plus --*/

	.main-nav ul {
		margin: 5px auto;
	}
	
	.main-nav li {
		margin-left: 5px;
		width: 20%;
	}
	
	.country {
		margin: 20px auto 20px auto;
	}
	
	.country li {
    	width: 20%;
    }
	
	.country li a{
		font-size: 1.5em;
	}


}







/*==================================== 中間國家大標 ====================================*/

.country-title{
	display:inline-block;
	width:100%;
	height:400px;
	clear:both;
	
}

.sakura-t{
	background:url(../images/sakura/cnter-pic-sakura-jp.jpg) no-repeat top left;
}

.huji-t{
	background:url(../images/huji/cnter-pic-huji.jpg) no-repeat top left;
}

.shiba-t{
	background:url(../images/shiba/cnter-pic-shiba.jpg) no-repeat top left;
}

.lavender-t{
	background:url(../images/lavender/cnter-pic-lavender.jpg) no-repeat top left;
}

.peony-t{
	background:url(../images/peony/cnter-pic-peony.jpg) no-repeat top left;
}

.rape-t{
	background:url(../images/rape/cnter-pic-rape.jpg) no-repeat top left;
}

.tulip-t{
	background:url(../images/tulip/cnter-pic-tulip.jpg) no-repeat top left;
}

.country-name{
	width:1200px;
	margin:40px auto 0px auto;
	overflow:hidden;
	text-align:center;
}

.country-name h3{
	font-size:4.3em;
	font-weight:300;
	font-family: "cm-w7","新細明體", "微軟正黑體", sans-serif;
	color:#ff3e5f;
	margin:20px auto;
}

.country-name img{
	margin:5px auto;
}

.country-title p{
	display:block;
	width:100%;
	
	text-align:center;
	color:#000;
	font-size:1.2em;
	line-height:40px;
	border:none;!important
}


@media screen and (max-width:1024px){
	.country-name{
		width:100%;
		margin:40px auto 0px auto;
		overflow:hidden;
		text-align:center;
	}
	
	.country-name h3{
		margin:20px auto 10px auto;
	}
	
	.country-name img{
		margin:10px auto;
	}

	
	.country-title p{
		font-size:1.1em;
		line-height:35px;
	}
	
	
	
}


@media screen and (min-width: 320px) and (max-width: 414px) { /*-- iphone plus --*/

	.country-title {
	    height:auto;
		padding-bottom: 30px;
	}
	
	.country-name h3{
		font-size:3em;
	    margin: 0px auto 10px auto;
	}
	
	.country-name img {
		margin: 5px auto;
	}
	
	.country-title p {
		font-size: 1em;
		line-height: 30px;
		padding: 0 10px
	}
	
	

}

@media screen and (max-width: 320px){ /*---iphone5 或SE系列 --*/
	.country-title p {
		font-size: 0.8em;
	}
}


/*==================================== 各地介紹和行程 ====================================*/

.area-section{
	width:100%;
}

.area-section-main{
	width:1200px;
	margin:30px auto;
	padding:0 50px;
}

.area-section-main h3{
	display:block;
	width:100%;
	height:70px;
	font-size:4.3em;
	font-weight:300;
	color:#000;
	font-family: "cm-w7","新細明體", "微軟正黑體", sans-serif;
	line-height:70px;
	padding-left:35px;
	background:url(../images/title-pp.png) no-repeat left top;
	background-size:25px 70px;
	
	margin-bottom:20px;
}

.area-section-main h3 span{
	margin-left:20px;
	font-size:24px;
}

.area-section-main .location{
	width:100%;
	height:0;
	padding-bottom:33%;/*(360/1200)X100X1*/ /*--影響iframe高度*/
	overflow:visible;
	position:relative;
}

.area-section-main .location iframe{
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.tours-area{
	display:inline-block;
	margin:30px auto;
}

.tours-area .title-pp,
.tours-area .collapse-card_body{
	float:left;
}

.tours-area .title-pp{
	width:11.4%;
    margin:0 20px;
}

.tours-area .title-pp img{
	width:100%;
	height:auto;
}

.tours-area .title-pp-mobile{ /*--- 手機 ---*/
	display:none;
}

.tours-area .collapse-card_body{
	width:80%;
}



@media screen and (max-width:1024px){
	.area-section-main{
		width:100%;
	}
}

@media screen and (max-width:768px){ /*-- ipad --*/
	.area-section-main{
		padding:0 15px;
	}

}

@media screen and (min-width: 320px) and (max-width: 414px) { /*-- iphone plus --*/
	
	.area-section-main h3{
		height:60px;
		font-size:3em;
		font-weight:300;
		line-height:60px;
		padding-left:10px;
		background:none;
		border-left:7px #000 solid;
		
		margin-bottom:5px;
	}
	
	.area-section-main h3 span{
		display:none;
	}
	
	.area-section-main .location{
		padding-bottom:110%;/*--影響iframe高度*/
		
	}
	
	.tours-area .title-pp,
	.tours-area .collapse-card_body{
		float:none;
		
	}
	
	.tours-area .title-pp{
		display:none;
	}
	
	.tours-area .title-pp-mobile{ /*--- 手機 ---*/
		display:block;
		width:100%;
		margin:10px auto;
	}
	
	.tours-area .title-pp-mobile img{
		width:100%;
		height:auto;
	}
    
    .tours-area .collapse-card_body{
		width:100%;
	}	
	
}

@media screen and (max-width: 320px){ /*---iphone5 或SE系列 --*/

	.area-section-main h3{
		height:50px;
		font-size:2.8em;
		line-height:50px;
		padding-left:5px;
		border-left:5px #000 solid;
	}
  
}


@media screen and (max-width: 320px){ /*---iphone5 或SE系列 --*/

	.area-section-main .location{
		padding-bottom:140%;/*--影響iframe高度*/
		
	}

}


/*==================================== 地點介紹 ====================================*/

.intro-main{
	width:1100px;

}

.intro-main img,.loc-content{
	display:inline-block;
	vertical-align:top;
}

.intro-main img{
	width:55.4%;
	height:auto;
	border-radius:30px;
	margin-right:3.6%;
}

.loc-content{
	width:40%;
}

.loc-content .loc-link{
	padding-top:20px;
	margin-bottom:20px;
}

.loc-content .loc-link a{
	display:inline-block;
	text-decoration:none;
	min-width:50px;
	padding:2px 5px;
	margin-right:10px;
	margin-bottom:10px;
	font-size:1.2em;
	color:#000;
	border:#999 1px solid;		
}

.loc-content .loc-link a:hover,a.loc-this{
	background-color:#ffccd0;
	border:#ff3e5f 1px solid;
}


.loc-content .loc-text{
	font-size:1.1em;
	line-height:35px;
	color:#333;
	letter-spacing:1px;
}


@media screen and (max-width:1024px){
	
	.intro-main{
		width:100%;
	
	}
	
	.loc-content .loc-text{
		font-size:1em;
		line-height:30px;
	}
		
}


@media screen and (max-width:768px){ /*-- ipad --*/
	
	.intro-main img{
		margin-right:2%;
	}
	
	.loc-content {
		width: 42%;
	}
	
	.loc-content .loc-link{
		padding-top:20px;
		margin-bottom:0px;
	}
	
	.loc-content .loc-link a{
		margin-bottom:5px;
		font-size:1em;
	}

	
	.loc-content .loc-text{
		font-size:0.8em;
		line-height:22px;
	}
		
}


@media screen and (min-width: 320px) and (max-width: 414px) { /*-- iphone plus --*/

	.intro-main img{
		width:100%;
		height:auto;
		border-radius:20px;
		margin-right:0;
	}
	
	.loc-content{
		width:100%;
	}




}


@media screen and (max-width: 320px){ /*---iphone5 或SE系列 --*/
     .intro-main img{
		width:90%;
		height:auto;
		border-radius:15px;
		margin-right:0;
	}
	
	.loc-content{
		width:93.5%;
	}




}