@charset "utf-8";
/* CSS Document */

/*基本*/
body{ margin:0; padding:0; background-color:#95b8d2;}

/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_phone { display: inherit !important;}
	}

/*全BOX版面*/
.WRAPPER { position: relative; display: block; margin: 0 auto; padding: 0; width:100%;  min-width:1220px; overflow:hidden; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica; z-index:0;}
.WRAPPER img { border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none;}
	@media screen and (max-width:767px){
	.WRAPPER {  padding-bottom:0; min-width: inherit;}
	.WRAPPER img {  width:100%;  height:auto;}
}
	
/*背景*/
.bgtop { z-index:-3; position: absolute; top:0; left: 0; width: 100%; min-width:1220px; height:100%; background: url(top_bg.jpg?t=1789377674564) top center no-repeat;}

/*版頭*/
.Area_top { height: 1060px;}
.Area_top .titleBoxA { position: absolute; top: 0px; left: 130px; z-index:2 }
.Area_top .titleBoxB { position: absolute; top: 0px; left: 130px; z-index:1 }
.Area_top .titleBoxC { position: absolute; top: 0px; left: 130px; z-index:0 ;}
.Area_top .titleBoxA img { width:960px;}
.Area_top .titleBoxB img { width:960px;}
.Area_top .titleBoxC img { width:960px;}
.Area_top .PD_layout.btn {top:1050px;z-index: 9999; left: -260px; z-index: 99999;}
.Area_top .PD_layout.btn ul img {width:100%;}
	@media screen and (max-width:767px){
		.Area_top { height: 166.5vw; background-image: url(top_bg_m.jpg?t=1789377674564); background-repeat: no-repeat; background-size: 100%;z-index:0; }
		.Area_top .titleBoxA { position:absolute; top: 0; left: 0;z-index:2}
		.Area_top .titleBoxA img { width:100%;}
		.Area_top .titleBoxB { position:absolute; top: 0; left: 0; display: block;z-index:1}
		.Area_top .titleBoxB img { width:100%;}
		.Area_top .titleBoxC { position:absolute; top: 0; left: 0; display: block;z-index:0 }
		.Area_top .titleBoxC img { width:100%;}
		.Area_top .txtBox{ display: none;}
		.Area_top .mbg .titleBoxA { position:absolute; top:12%; left: 13%; width: 70%;}
		.Area_top .mbg .titleBoxB { position:absolute; top:45%; left: 13%; width: 75%; display: block;}
		.Area_top .PD_layout.btn {top:110vw; width: 41.7%;left:3vw; z-index: 9999;float: left;}
		.Area_top .PD_layout.btn ul {width:100%;grid-gap:1.2em;}
		.Area_top .PD_layout.btn ul img {width:100%;}
	}

/*momo_logo*/
.Area_top .momologo { 
	z-index: 5; 
	position: absolute; 
	top:0px;
    left: 125px;
  }
  .Area_top .momologo a { 
	display: block; 
	width: 960px;
    height: 200px;
	background: url(momologo_01.png?t=1789377674564) no-repeat; 
	background-size: 100%;
  }
	@media screen and (max-width:767px){
	  .Area_top .momologo { 
        top: 0;
        left: 0;
        width: 100%;
	  }
	  .Area_top .momologo a { 
		width: 100%; 
		height: 15vw;
		left: 0;
	  }
	}
		
/*區塊*/
.Area .box { z-index:1; position: relative; margin: 0;}

/*Area01*/	
.Area01 { height: 1900px; z-index: 1;}
.Area01_txt { position: absolute; top: 60px; left: 130px;}
.bgArea01 { z-index: -1; position: absolute; top: 540px; left: 0; width: 100%; height: 100%; background: url('Arae_01_bg.png?t=1789377674564') center top no-repeat; height: 1900px;}
.Area01 .PD_layout.btn {top:0px;z-index: 9999; left: -260px; z-index: 99999;}
.Area01 .PD_layout.btn ul img {width:100%;}
@media screen and (max-width:767px){
	.Area01 { height: 257vw;}
	.Area01_txt { width: 100%; top: -46vw; left: 0vw;}	
	.bgArea01 { z-index: -1; position: absolute; top: 0vw; left: 0; width: 100%; height: 100%; background: url('Arae_01_bg_m.png?t=1789377674564') center top no-repeat; background-size: 100%;}
	.Area01 .PD_layout.btn {top:-56vw; width: 41.7%;left:3vw; z-index: 9999;float: left;}
	.Area01 .PD_layout.btn ul {width:100%;grid-gap:1.2em;}
	.Area01 .PD_layout.btn ul img {width:100%;}
}
/*影片*/   
.Area01 .youtubeArea { position: absolute; top: 1675px; left: 405px; width: 728px; height: 414px;}
.Area01 .youtubeArea iframe.mo { width: 100%; height: 100%;}
 @media screen and ( max-width:736px){
	.Area01 .youtubeArea { position: absolute; left:24vw; top: 117.5vw; width: 76vw; height: 47vw; z-index: 99;}
	.Area01 .youtubeArea * { margin: 0; padding: 0;}
	.Area01 .youtubeArea iframe.mo { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
	.Area01 .youtubeArea img { display: none;}
 }

  
  /*影片css*/
  .bigpicture { height: 100%;	width: 100%; position: relative; background-position: center center; background-size: cover; cursor: pointer;}
  .bigpicture h3 { position: absolute; left: 5%; bottom: 0; z-index: 1; color: #fff; font-size: 20px }
  .bigpicture:before,
  .bigpicture:after { z-index: 1; content: ''; position: absolute; left: 0; top: 0; right: 0;	bottom: 0;height: 100%;	width: 100%; transition: opacity 0.2s;}
  .bigpicture:after { background-repeat: no-repeat; background-position: center; opacity: 1; background-size: 2em;}
  .bigpicture:before { background: linear-gradient(0deg, #000, transparent 40%); opacity: 0.7;}
  /*.bigpicture:hover:after { opacity: 0.8; }*/
  .bigpicture:hover:before { opacity: 0.5; }
  .bigpicture:after { height: 100%; width: 100%;	
	  background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20159.00691%20111.60904%22%3E%3Cpath%20d%3D%22M36.2%20111c-25-1.3-29.6-4-34-18.6C.3%2086.7%200%2080%200%2057.4%200%2019%202.3%209.7%2013.6%204c11.5-5.6%20120-5.6%20131.4%200%206%203%2010%208.7%2011.8%2017.2%202%209.8%203%2042.2%201.5%2057.5-2%2020.4-7%2028.5-19.2%2030.8-7.6%201.5-82%202.4-102.8%201.3zM85%2065.3c11.3-6%2020.4-11%2020.3-11L84%2043%2063%2032v22c0%2012%20.4%2022%20.8%2022%20.3%200%2010-5%2021.2-10.8z%22%20fill%3D%22%23db2823%22%2F%3E%3Cpath%20d%3D%22M63.2%2032c-.4.3-.2%201-.3%201.3v28.5c0%204.6%200%209.2.5%2013.8%200%20.4.3.7.6.5%206.3-3%2012.3-6%2018.4-9.3%207.5-4%2015-7.8%2022.2-12%20.3%200%201-.4.6-.8-12.8-7-25.7-13.5-38.6-20.2-1-.6-2.2-1.3-3.4-1.7z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
	  background-size: 4em;
  }
  .bigpicture img { width: 100%; border-radius:0; aspect-ratio: 1.777777; }
	  @media screen and (max-width:767px){
		.bigpicture h3 { font-size: 3vw; left: 1.2em;  }
	  }
  .box_youtube { position: absolute; overflow: hidden}
  .box_youtube .youtubeArea { position:relative; width:100%; height:0px; padding-bottom:56.25%;}
  .box_youtube .youtubeArea * { margin:0; padding:0;}
  .box_youtube .youtubeArea iframe { position:absolute; top:0px; left:0px; width:100%; height:100%;}
  .box_youtube .youtubeArea .youtubeDiv { background-color: transparent!important;}
		@media screen and (min-width:768px){
		   .box_youtube { width: 728px; top: 1705px; right: 0; border-radius: 0; display: block !important;}
		}
		@media screen and (max-width:767px){
		   .box_youtube { width: 76vw; top: 121vw; right: 0vw; border-radius: 0;display: block !important;}
		   .box_youtube iframe { border-radius: 0; } 
		}
  



/*Area02*/
.Area02 { z-index: 2; height: 2900px; margin-top: 360px;}		
.Area02_txt { top: 0px; left: 0px;}
.Area02_btn { z-index: 99; position: absolute; top: 1180px; left: 0px;z-index:999999;}
@media screen and (min-width:768px){
.bgArea02 { z-index:-1; position: absolute; top: 180px; left: 0; width: 100%; height: 100%; background:url('Arae_02_bg.jpg?t=1789377674564') center top no-repeat;}
}
@media screen and (max-width:767px){
	.Area02_txt img {width:100%;}
	.Area02 { height: 300vw; margin-top: 0px;}
	.bgArea02 { z-index:-1; position: absolute; top: -57vw; left: 0; width: 100%; height: 100%;background:url('Arae_02_bg_m.jpg?t=1789377674564') center top no-repeat; background-size: 100%;}
	.Area02_txt { position: relative; margin: 0 auto; width: 100%; top: -77vw; left: 0;}
	.Area02_btn { width: 100%; top: 122vw; left: 0vw;z-index:999999;}
}
/*bg1選單*/	
.Area02 .box { z-index: 1; padding: 0; position: absolute; top: 720px;left:130px;}
.Area02 ul { padding: 0; margin: 0; text-align: left; margin-left: 0px;}
.Area02 li { list-style: none; display: inline-block; margin-right: 0px;}
.Area02 .menu .label_btn { display: inline-block; text-align: center; transition: opacity .2s ease-in-out;}
.Area02 .menu .label_btn img { width: 100%;}
.Area02 .menu .label_btn_off { opacity: 1;}
.Area02 .menu .label_btn_on { position: absolute; top: 0; left: 0; opacity: 0;}
.Area02 .menu .selected .label_btn { display: inline-block; text-align: center;}
.Area02 .menu .selected .label_btn_on { opacity: 1;}
.Area02 .menu .selected .label_btn_on img { width: 100%;}	
.Area02 .tab_content .page { display: none; width: 100%; position: absolute; top: 290px; left: 0px;}
@media screen and (max-width:767px){
	.Area02 .box { top: 1vw; left:0;}
	.Area02 ul { margin: 0; padding: 0;} 
	.Area02 li:nth-of-type(1) { width: 35vw;}
	.Area02 li:nth-of-type(2) { width: 28vw; margin-left: -1vw;}
	.Area02 li:nth-of-type(3) { width: 35vw;}

	.Area02 .menu .label_btn { }
	.Area02 .menu .selected .label_btn { }
	.Area02 .tab_content .page {position: relative; width: 100%; top: 71.5vw; left: 0vw;}
	.Area02 .tab_content {margin-top: -73vw;}
}

/*Area03*/
.Area03 { height: 1516px;}
.Area03_txt { margin-left: -390px;}
.PD { margin-top:0;}
.bgArea03 { z-index: -2; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url('Area_03_bg.jpg?t=1789377674564') center top no-repeat;}

@media screen and (max-width:767px){
	.Area03 { height: 123.7vw; top: -78vw;}
	.Area03_txt { position: relative; margin: 0 auto; width: 100%; top: 8vw; left: 0vw;}
	.bgArea03 { z-index: -1; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background:url('m_Area03_bg.jpg?t=1789377674564') center top no-repeat; background-size:100%;}
	.bgArea03_2 { z-index: -1; position: absolute; top: 93vw; left: 0; width: 100%; height: 100%; background:url('m_Area03_bg_2.jpg?t=1789377674564') center top no-repeat; background-size:100%;}
}


/*Area04*/	
.Area04 { height: 4875px;}
.Area04_txt { padding: 0;  margin-left: -390px;}
.bgArea04 { z-index: -5; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('Area_04_bg.jpg?t=1789377674564') center top no-repeat;}	
.Area04 .Area_swiper.BN {top: 2050px;}
.Area04 .Area_swiper.BN img {width:100%; border-radius: 20px;}
.Area04 .Area_swiper.BN ul {grid-gap:10px;}
.Area04 .Area_swiper.BN li { background-color: transparent;}
.Area04 .BN {z-index: 999;}
@media screen and (max-width:767px){
	.Area04 { height: 470vw; background-image: url('Arae_04_bg_m.jpg?t=1789377674564'); background-repeat: no-repeat; background-size:100%;}
	.Area04_txt { position: relative; margin: 0 auto; padding: 0; width: 100%; top: 4vw; left: 0;}
	.Area04 .Area_swiper.BN {top: 174vw;z-index:99;}
	.Area04 .Area_swiper.BN img {width:100%; border-radius: 2vw;}
}