@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700&display=swap');

/************************************************************************************
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, font, 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, figure, mark{
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    
}
body {line-height: 1; -webkit-text-size-adjust: none;}
ol, ul { list-style: none;}

/*錨點*/
#back-top{z-index: 2;}
.block-first{ padding-top:130px; margin-top: -130px;overflow: hidden;}
.block-first02{padding-top:100px; margin-top: -100px;}
body{background-color: #f0ce48;transition: 0.5s linear;font-family: 'Noto Sans TC', sans-serif;}

/*選單*/
#block_menu {
	width: 100%;
	text-align: center;
    font-family: 'Noto Sans TC', sans-serif;
    font-weight: 600;
    overflow: hidden;
}

.nav{width: 100%;height: 84px;background: url("../images/memu-bg.png");margin-top: 30px;position: fixed;z-index: 999;}
.nav ul{width: 619px;margin: 0 auto;display: flex;justify-content: center;align-items: center;list-style-type: none;text-indent: -9999px;}
.nav ul li a{display: block;}
.nav ul li.m1 a{width: 156px;height: 84px;background: url("../images/menu.png");}
.nav ul li.m1 a:hover,.nav ul li.m1 a.active{width: 156px;height: 84px;background: url("../images/menu-h.png");}
.nav ul li.m2 a{width: 155px;height: 84px;background: url("../images/menu.png");background-position: -156px 0;}
.nav ul li.m2 a:hover,.nav ul li.m2 a.active{width: 155px;height: 84px;background: url("../images/menu-h.png");background-position: -156px 0;}
.nav ul li.m3 a{width: 154px;height: 84px;background: url("../images/menu.png");background-position: -310px 0;}
.nav ul li.m3 a:hover,.nav ul li.m3 a.active{width: 154px;height: 84px;background: url("../images/menu-h.png");background-position: -310px 0;}
.nav ul li.m4 a{width: 155px;height: 84px;background: url("../images/menu.png");background-position: -464px 0;}
.nav ul li.m4 a:hover,.nav ul li.m4 a.active{width: 155px;height: 84px;background: url("../images/menu-h.png");background-position: -464px 0;}



.wrapper{height: auto;overflow: hidden;}
.title{text-align: center;max-width: 415px;background: url("../images/title-1.png");background-size: cover; aspect-ratio: 4.11 / 1;margin: 0 auto;}
.title.t2{background: url("../images/title-2.png");max-width: 339px;aspect-ratio: 339 / 126;background-size: cover;}
.title.t3{background: url("../images/title-3.png");max-width: 289px;aspect-ratio: 289 / 107;background-size: cover}
.title.t4{background: url("../images/title-4.png");max-width: 442px;aspect-ratio: 442 / 239;background-size: cover}

.header{
	position: relative;
	height: 900px;
}

/*大圖輪播*/
.main-slide{
	position: absolute;
	width: 100%;
	height: 900px;
    }

.main-title{position: absolute; left: 50%;transform: translateX(-50%);top:500px;top: calc(100vh - 400px);background: url("../images/logo.png") center top no-repeat;width: 450px;height: 300px; background-size: contain;}

h1 {
  text-indent: 101%;
  overflow: hidden;
  white-space: nowrap;
}



/*古色檳城*/
#part1{width: auto;background: url("../images/bg-part1.jpg") center top no-repeat;min-height: 938px;margin-bottom: 30px;}
/*影片區*/

.video-main{max-width: 960px;margin: 0 auto;margin-top: 120px;}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
}
.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;left: 0;
width: 100%;
height: 100%;
}
.video-container::before{
	content: '';
	position: absolute;
	top: -64px;
	width: 100%;
	height: 64px;
  background: url("../images/film-top.jpg");
	z-index: 1;
}

.video-container::after{
	content: '';
	position: absolute;
	bottom: -64px;
	width: 100%;
	height: 64px;
	background: url("../images/film-bottom.jpg") ;
	z-index: 1;
}


/*經典必訪*/
#part2{width: auto;min-height: 938px;margin-top: 10px;}
.content-p2{background: #fff0d8;min-height: 600px;position: relative;padding: 207px 0;}
.content-p2::before{
	content: '';
	position: absolute;
	top: 0px;
	width: 100%;
	height: 207px;
	background: url("../images/bg-part2.jpg") center top;
	
}

.content-p2::after{
	content: '';
	position: absolute;
	bottom: 0px;
	width: 100%;
	height: 207px;
	background: url("../images/bg-part2.jpg") center top;
	transform: rotate(180deg);
	
}

.inner2{max-width: 1400px;margin: 0 auto;display: flex;justify-content:space-around;align-items: center;flex-wrap: wrap;}
.box{width:23%;height:320px;border: solid 1px #FFFFFF;box-sizing: border-box;position: relative;padding: 0;background: #000000;overflow: hidden;margin-bottom: 30px;}
.box img{position: absolute;width: 100%;}
.info{position: absolute;background: rgba(0,0,0,0.5); bottom: 0px;color: #FFFFFF;padding: 10px;font-size: 14px;line-height: 24px; letter-spacing: 1px;font-weight: 400;}
.info strong{display: inline-block; font-size: 15px;position: relative;padding-left: 2px;margin-bottom: 5px;border-bottom: solid 2px #FFFFFF;padding-bottom: 2px;}


/*電影場景*/
#part3{padding-bottom: 280px;overflow: hidden;margin-top: 10px;}
.movie-inner{max-width: 1400px;margin: 0 auto;height: auto; background: #ffde5c;margin-top: 120px; position: relative;display: flex;justify-content: space-around;align-items: stretch; gap:10px;padding: 0 10px;}
.movie-inner::before{
	content: '';
	position: absolute;
	top: -250px;
	width: 100%;
	height: 250px;
	background: url("../images/bg-part3-top.png") center top;
	
}



.movie-inner::after{
	content: '';
	position: absolute;
	bottom: -84px;
	width: 100%;
	height: 84px;
	background: url("../images/bg-part3.jpg") center bottom;

}

.movie-box{width: 30%;overflow: hidden;height: auto;background: #fff4c6;}
.movie-box img{display: block;width: 100%;}
.movie-info{padding: 15px 20px;font-size: 15px;line-height: 26px;letter-spacing: 1px;font-family:'Noto Sans TC';min-height: 170px;}
.movie-info strong{display: block;text-align: center;font-size: 20px;font-weight: 700;margin-bottom: 10px;}
.movie-info strong p{position: relative;display: inline-block;z-index: 1;}
.movie-info strong p::before{content: '';position: absolute; width: 100%;height:30px;transform:rotate(5deg); background: #ffe26e;z-index: -1;}
.movie-info span{display: block;text-align: center;font-weight: 700;font-size: 16px;}
.movie-info span p{position: relative;display: inline-block;z-index: 1;}
.movie-info span p::before{content: '';position: absolute; width: 100%;height:10px;background: #ffe26e;bottom: 2px;z-index: -1;}


#part4{width: auto;margin-top: 10px;}
.tour-container{width: auto;background: #fff3d3;height: auto; position: relative;}
.tour-container::before{content: '';position: absolute;width: 100%;height: 100px;background: #fff3d3;transform: rotate(-2deg);top: -50px;z-index: -1;}
.tour-container .title{position: absolute;top: -120px;left: 50%;transform: translateX(-50%);z-index: 2;}
.tour-inner{max-width: 960px;margin: 0 auto;display: flex;justify-content: center;flex-wrap: wrap;padding-top: 170px;gap:15px;}
.tour-box{width: 31%;margin-bottom: 30px;border: solid 2px #000000;box-sizing: border-box;background: #fffae6;overflow: hidden;}
.tour-box a{text-decoration: none;}
.tour-box img{display: block;width: 100%;}
.name{padding: 10px 15px;font-family:'Noto Sans TC';font-size: 16px;color: #000000;border: solid 2px #000000;border-left: 0px;border-right: 0px;text-align: center;}
.price{text-align: center;padding: 10px;color: #FF0004;}
.price strong{font-size: 24px;margin: 0 5px;}
.tour-type{width: 96%;font-size: 26px;text-align: center;line-height: 50px;border-bottom: 6px solid;font-weight: 700;letter-spacing: 5px;color: #CBA625;margin-bottom: 20px;}

/*---平板-----*/
@media only screen and (min-width: 961px) and (max-width:1200px) {
.inner2{justify-content:center;gap:10px;}
.box{width:32%;}	
}

@media only screen and ( max-width:960px) 
{  
.box{width:47%;}
.movie-box{width: 33%;}	
}


@media only screen and ( max-width:850px) 
{ 
.movie-inner{flex-wrap: wrap;}	
.movie-box{width: 90%;}	
}


@media only screen and ( min-width:769px) 
{  
.header-m,.header-s{display: none;}
}

@media only screen and ( max-width:690px) 
{  
.box{width:90%;}	
}

@media only screen and ( max-width:768px) 
{  
.nav{display: none;}
.block-first{ padding-top:50px; margin-top: -50px;overflow: hidden;}
#part2{min-height: 100px;padding-bottom: 100px ;}
.content-p2::before{height: 0px;}
.content-p2::after{height: 0px;}	
.content-p2{padding: 20px 0;background: #F0CE48;}
#part1{min-height: 500px;padding-bottom: 100px ;}
.tour-box{width: 46%;}
  .header-m,.header-s{margin-top: 40px;}
}

@media only screen and (min-width: 480px) and (max-width:768px) {
.header,.header-s{display: none;}	
}

@media only screen and (max-width:480px) 
{  
.header,.header-m{display: none;}
.tour-box{width: 90%;}	
#part1{min-height: 300px;padding-bottom: 90px;}		
}