@charset "utf-8";
/*基本*/

body { margin: 0; padding: 0; width:100%; }
.for_phone { display:none;}
.for_m  ul { margin: 0px; padding: 0px;list-style: none outside none;}
      
 @media screen and (max-width:767px){
                .for_pc{ display:none !important;}
                .for_phone{ display:block !important;}
				 body { margin: 0; padding: 0; background-image:none;background-color: #e5e5e5; }
				 .for_m_magintop { margin-top:3vw;}
 }
		
	


		
/*全BOX版面*/
.WRAPPER {position:relative; display:inline-block;  margin:0; padding:0;  width:100%;  overflow:hidden;min-width:1220px;  }
.WRAPPER img {border:0; vertical-align:top;}
.WRAPPER .mainArea {  margin:0 auto; width:1220px; font-family:"Century Gothic", "微軟正黑體", sans-serif; position:relative; }
.WRAPPER .mainArea a{ padding:0; margin:0; text-decoration:none; font-family:"微軟正黑體" }
.WRAPPER  a { text-decoration:none;font-family:"微軟正黑體"} 
/*控制區塊背景的位置*/
.Areabg{ margin-left:-390px;} 
@media screen and ( max-width:736px) {
	.WRAPPER {min-width: inherit;  background-size:100%;  background-repeat: repeat-y}
	.WRAPPER img {width:100%; height:auto;}
}




/*logo*/
.Area_logo {    position: relative;margin: 0 auto;padding: 0;overflow: hidden;height: 100px; width: 100%; z-index: 2;text-align: center;vertical-align: top;background-color: #000000; display: flex;flex-wrap: wrap;justify-content: center; }
	@media screen and (max-width:767px){
    .Area_logo {overflow:hidden; float:left; margin:0; padding:0; width:100%;height: auto; list-style: none; position: relative;}
    .Area_logo img {width:100%;}
	}


/*活動標*/
.Area_momologo   { z-index:8; position:absolute; top:25px; left:10px; top:-131px; left:30px;}
.Area_momologo a { display:block;}
.Area_momologo a img:first-child { display:none;}
.Area_momologo:hover a img { display:none;}
.Area_momologo:hover a img:first-child { display:block;}


/*header-選單切換區*/
@media screen and (min-width:768px){
.cantantBase { z-index:5; background:#fee101; /*border-top:solid 10px #000;*/  position: relative; top:0; left:50%; transform:translateX(-50%); width:100%; height:auto; z-index:9; }
.cantantBase .box { position:relative; margin:0 auto; width:1220px; height:69px;}
/*.cantantBase .momologo { position:absolute; top:29px; left:26px; -webkit-transform:scale(0.9); transform:scale(0.9);}
.cantantBase .momologo a { display:block; width:191px; height:21px; background:url(momo_logo.png?t=1749802372651);}
.cantantBase .momologo a:hover { background:url(momo_logo_on.png?t=1749802372651);}*/
.cantantBase ul {display:flex; margin:0; padding:0 10px; list-style:none; text-align:center; width:100%; box-sizing:border-box;}
.cantantBase ul li {  display:inline-block; position:relative; margin:0 2px; padding:0; font-size:16px; line-height:69px; width:112px; letter-spacing:-0.01em;}
.cantantBase ul li a { color:#000; display:block;}
.cantantBase ul li a:hover { color:#ffc915; }  
  
	
.cantantBase .btn_on::after { content:""; z-index:-1; position: absolute; bottom:0%; left:50%; width:70%; height:8%; -webkit-transform:translate(-50%,0%); transform:translate(-50%,0%); background-color: #ffc915; }
.cantantBase ul.tabs li:hover::after { content:""; z-index:-1; position: absolute; bottom:0%; left:50%; width:70%; height:8%; -webkit-transform:translate(-50%,0%); transform:translate(-50%,0%); background-color: #ffc915; }
.cantantBase ul.tabs li.active::after { content:""; z-index:-1; position: absolute; bottom:0%; left:50%; width:70%; height:8%; -webkit-transform:translate(-50%,0%); transform:translate(-50%,0%); background-color: #ffc915; }
	
/*選單內容物*/
.tab_content{ z-index:9; position: absolute; top:69px; left:0; margin:0; padding:15px 0 0; overflow:hidden; width:100%; height:auto; background-color:#b4b5b5;  box-sizing:border-box; display:none;
			  -webkit-transition: all 0.2s ease;
				 -moz-transition: all 0.2s ease;
				  -ms-transition: all 0.2s ease;
				   -o-transition: all 0.2s ease;
					  transition: all 0.5s ease;} 
.tab_content::after { content:""; display:inline-block; clear:both;} 
.tab_content .box { position:relative; margin:0 auto; width:1220px; height:auto; overflow:hidden;}
.tab_content .Nav_block { float:left; display:inline-block;}
.tab_content .Nav_block_04 { width:300px;}
.tab_content .Nav_block_06 { width:200px;}
.tab_content .Nav_block ul { text-align:center;width: 1220px; /* padding:0 10px;*/} 
.tab_content .Nav_block ul li { width:100%; line-height:2em; letter-spacing:0.01em; padding-left:20px; font-size:15px;}
.tab_content .Nav_block ul li:hover { background-color:#000;}
.tab_content .Nav_block ul li:hover a { color:#ffc915;}
.tab_content .Nav_block ul li.Navtitle { font: bold 19px/30px "Century Gothic","Microsoft JhengHei","微軟正黑體", Arial, sans-serif,Helvetica; line-height:2em; pointer-events:none;}
.tab_content .Nav_block ul li.Navtitle a { color:#ffc915;}
.tab_content .colse_button {z-index:100; display:inline-block; position:absolute;top:0px;right:0px; padding:2px; cursor:pointer;}
.tab_content .Nav_block ul li .new{display: inline-block; width: 40px;line-height: 40px;  font: 14px/14px 微軟正黑體,"Microsoft JhengHei",Helvetica;  color: #FFF;background-color:#ff0000;   border: 1px solid #ff0000; border-radius:3px; margin:0 2%;text-align: center;}


/*被選到的類別*/
.tab_content.active { display:block !important;}
}

@media screen and (max-width:767px){
	.cantantBase .box { position:relative; margin:0; width:30%;}
	.cantantBase ul { margin:0; padding:0; list-style:none; text-align:center; width:100%; box-sizing:border-box;}
	.cantantBase ul li { border-bottom:1px solid #f3f3f3; padding:2.5vw 1vw; background-color:#fff; }
	/*.cantantBase ul li:last-child { border-bottom: none;}*/
	.cantantBase ul li a { color:#000; display:block;}
	.cantantBase ul li.open { background-color:#0032a1;}
	.cantantBase ul li.open a { color:#fff; font-weight:800;}
	
	.tab_content { display:none; position:absolute; top:12.15vw; left:30.5%; width:69.5%; height:166vw; overflow-y:scroll; background-color:#fff; }
	.tab_content .box { position:relative; margin:0 auto; width:100%; height:auto; overflow:hidden;}
	.tab_content .Nav_block ul { text-align:left; padding:0 3vw;}
	.tab_content .Nav_block ul li { border-bottom:none; padding:1.5vw 1vw 1.5vw 3vw; font-size:4vw;}
	.tab_content .Nav_block ul li:last-child { border-bottom:1px solid #f3f3f3; padding-bottom:5vw;}
	
	.tab_content .Nav_block ul li.Navtitle { padding:4vw 1vw 1vw; font: bold 4.8vw/4.8vw "Century Gothic","Microsoft JhengHei","微軟正黑體", Arial, sans-serif,Helvetica; /*line-height:2em;*/ pointer-events:none;}
	.tab_content .Nav_block ul li.Navtitle a { color:#0032a1;}
	
	/*被選到的類別*/
	.tab_content.open { display:block !important;}	
}
@media screen and (max-width:767px) and (min-height:800px){
	.tab_content { height:215.3vw; }
}	

/*手機登記按鈕*/

            .book_box {  position:relative;}
            .book_box a { display:block; width:100%; height:100%;}
            .book_ { }
            .book_ .count { margin: 0;padding: 0;  color:#00000; text-align:center; font: bold 3vw/5vw "Century Gothic", Arial, "Microsoft JhengHei";}	
            
            /*1品*/		
            .book_01 { position:absolute;width:62.50%;  height: 100%;  top: 0vw;left:0vw; }
            .book_01 .count { position: absolute;    top: 81.5%; left: 64%;}
            .post { position:absolute; width:37.50%;  height: 50%;  top: 0; left:62.4%;}
            .list { position:absolute; width:37.50%;  height: 50%;  top: 50%;left:62.4%; }
            
            /*2品*/	
            .book_box2 .book_01 { position:absolute;width:37.50%;  height: 100%;  top: 0vw;left:0vw; }
            .book_box2 .book_01 .count { position: absolute; top: 87.5%; left:37%;}
            .book_box2 .book_02 { position:absolute;width:34.38%;  height: 100%;  top:0;left:37%;  }
            .book_box2 .book_02 .count {  position: absolute; top: 87.5%; left:32%;}
            .book_box2 .post { position:absolute; width:28.13%;  height: 50%;  top: 0; left:71.4%;}
            .book_box2 .list { position:absolute; width:28.13%;  height: 50%;  top: 50%;left:71.4%; }
            
            /*3品*/	
            .book_box3 .book_01 { position:absolute;width:34.50%;  height: 75%;  top: 0vw;left:0vw; }
            .book_box3 .book_01 .count { position: absolute; top: 88.5%; left:36%;}
            .book_box3 .book_02 { position:absolute;width:31.0%;  height: 75%;  top:0;left:35%;  }
            .book_box3 .book_02 .count {  position: absolute; top: 88.5%; left:27%;}
            .book_box3 .book_03 { position:absolute;width:34.50%;  height: 75%;  top:0;left:66%;  }
            .book_box3 .book_03 .count {  position: absolute; top: 88.5%; left: 22%;}
            .book_box3 .post { position:absolute; width:50%;  height: 25%;  top: 75%; left:0%;}
            .book_box3 .list { position:absolute; width:50%;  height: 25%;  top: 75%; left:50%; }
            




/*回版頭*/
#gotopBtn { display:none !important;} /*把系統手機版原本的Gotop關掉*/
#gotop { display: none; position:fixed; z-index:201; right:0; padding:14px 6px 3px 10px; font:12px/30px Verdana; text-align:center; color:#fff; cursor:pointer; transition: 0.2s; transform: translateX(200%);
        bottom:90px;
        bottom: calc(90px + constant(safe-area-inset-bottom)*0.6 );
        bottom: calc(90px + env(safe-area-inset-bottom)*0.6 );}
#gotop::before { content: ""; position:absolute; top:9px; left:19px; width: 0; height: 0; border: 4px solid #fff; border-color: transparent transparent #fff; }
#gotop::after  { content: ""; z-index:-1; position:absolute; top:50%; left:50%; border-radius:50px 0 0 50px; transform:translate(-50%,-50%); width:44px; height:44px; background-color:rgba(0,0,0,0.8);}
#gotop.cate-open { transform: translateX(0%);}
  /*白色*/
  #gotop { color:#000; }
  #gotop::before { border-color: transparent transparent #000;}
  #gotop::after  { background-color: rgba(255,255,255,0.95);  box-shadow:0 1px 0 rgba(242,242,242,1), 0 0 10px rgba(0,0,0,0.2);}

/*logo*/
	@media screen and (min-width:735px){ 
.go_bt2 {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.go_bt2:hover { 
   filter:brightness(130%);
  -webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);
		  }

 }

/*區塊all*/
.Area { position: relative;  display:block;  margin:0; padding:0;  width:100%;min-width:1220px;}
@media screen and ( min-width:737px) {
	
	.Area .go_bt { position:relative; display:block;
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.Area .go_bt:hover { 
  -webkit-transform:scale(0.95);
     -moz-transform:scale(0.95);
      -ms-transform:scale(0.95);
       -o-transform:scale(0.95);
          transform:scale(0.95);}
	
	}

/*區塊-共用按鈕*/
.Area .btn_go {}
.Area .btn_go *{
						  -webkit-transition: all 0.1s ease;
							 -moz-transition: all 0.1s ease;
							  -ms-transition: all 0.1s ease;
							   -o-transition: all 0.1s ease;
								  transition: all 0.1s ease;} 
.Area .btn_go a:hover {  -webkit-transition: all 0.35s;
    transition: all 0.35s;
    -webkit-transform: scale(0.9);
    transform: scale(0.9);}
.Area .btn_go a:after  { 
								  -webkit-transition: all 0.4s ease;
									 -moz-transition: all 0.4s ease;
									  -ms-transition: all 0.4s ease;
									   -o-transition: all 0.4s ease;
										  transition: all 0.4s ease;}
.Area .btn_go:active a,
.Area .btn_go:focus a,
.Area .btn_go:hover a { color:#fff;}
.Area .btn_go:active a:after,
.Area .btn_go:focus a:after,
.Area .btn_go:hover a:after  { width:150% !important;}
.Area .btn_go:active a i,
.Area .btn_go:focus a i,
.Area .btn_go:hover a i { background-color:#000; transform:translateX(-10px); transition-delay:0.1s;}
.Area .btn_go a strong { z-index:2; position: relative; }
.Area .btn_go a i {
	z-index: 3;
	position: absolute;
	top: -63px;
	right: -278px;
	display: inline-block;
	border-radius: 60px;
	width: 60px;
	height: 60px;
	background: #09006e url(btn_icon_r.png?t=1749802372651);
	background-size: contain;
}
	@media screen and (max-width:736px){ 
	    .Area{width:100%; height:100%; min-width:100%;}
		.Area .btn_go { position:absolute; }
		.Area .btn_go *{
								  -webkit-transition: all 0.2s ease;
									 -moz-transition: all 0.2s ease;
									  -ms-transition: all 0.2s ease;
									   -o-transition: all 0.2s ease;
										  transition: all 0.2s ease;} 
		.Area .btn_go a { display:block; color:#fff; letter-spacing:-2px;}
		.Area .btn_go a:after  { }
		.Area .btn_go:active a,
		.Area .btn_go:focus a,
		.Area .btn_go:hover a { color:#fff;}
		.Area .btn_go:active a:after,
		.Area .btn_go:focus a:after,
		.Area .btn_go:hover a:after  { width:150% !important;}
		.Area .btn_go:active a i,
		.Area .btn_go:focus a i,
		.Area .btn_go:hover a i { background-color: transparent; transform:translateX(-10px); transition-delay:0.1s;}
		.Area .btn_go a strong { z-index:2; position: relative; }
		.Area .btn_go a i { z-index:3; position: absolute; top:0; right:0; display:inline-block; border-radius:35px; width:35px; height:35px; background:#09006e url(btn_icon_r.png?t=1749802372651);  background-size:contain;}
	}



/*黏人快速鍵*/
.fixed_Area {z-index:999; position:fixed; top:20px; right:5px;}
.fixed_Area h2 { margin:0; padding:0; width:120px; line-height:0;}
.fixed_Area h4 { margin:0; padding:0; font:bold 16px/20px Century Gothic, "微軟正黑體",Helvetica bold; color:#1e6238; letter-spacing:-1px; text-align:center;  background:url(fixed_Area_repeat.png?t=1749802372651) repeat-y center;}
.WRAPPER .fixed_Area h4 a { display: block;
width:107px; 
    color: #c4094b; 
    text-decoration: none;
    border-bottom: #c4094b dashed 1px;
    padding: 0 2px 0 2px;
	line-height:25px;
    margin: 0  auto;}
.fixed_Area h4 a:hover { color:#ff7800;}
.fixed_Area h4 p { position:relative; margin:0; padding:0 0 5px 0;}
.fixed_Area h4 p:after { content: ""; position:absolute; top:0; left:20%; margin:0 auto; display:block;  width:60%;  background-color:rgba(255,255,255,0.5);}
.fixed_Area h4 p:first-child:after  { display:none;}
.fixed_Area h4.fixedBox_2 a { color:#FFAE00;}
.fixed_Area h4.fixedBox_2 a:hover {color:#df9b2c;}
.WRAPPER .fixed_Area h4 p:nth-child(4) a {border-bottom: none;}
.fixed_Area h4 a img {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;
}
.fixed_Area h4 a:hover img {
  -webkit-transform: translateY(3px); 
          transform: translateY(3px);
		 }
/*黏人精快速鍵-動畫*/
.approch1 {-webkit-animation-duration: 1.5s;  animation-duration: 1.5s;  -webkit-animation-name: approch1;  animation-name: approch1;  -webkit-animation-iteration-count: 1;    animation-iteration-count:1; -webkit-animation-direction: alternate;animation-direction: alternate;}
	@-webkit-keyframes approch1 { 
	}
	@keyframes approch1 { 
		0% { transform: translate(0,200px); opacity:0 } }




	
/*黏人快速鍵(白色款)*/
.fixed_Area {z-index:999; position:fixed; top:20px; right:0px; width:100px; font-weight:800; font-size:16px; line-height:48px; font-family:Century Gothic, "微軟正黑體",Helvetica; text-align:center;
			-webkit-transform: rotate3d(0,0,0,0deg) translate3d(0,0,0); transform: rotate3d(0,0,0,0deg) translate3d(0,0,0); -webkit-transform-origin:top right; transform-origin:top right;
			  -webkit-transition: all 0.2s ease;
				 -moz-transition: all 0.2s ease;
				  -ms-transition: all 0.2s ease;
				   -o-transition: all 0.2s ease;
					  transition: all 0.2s ease;}
.fixed_Area a { display:block; text-decoration: none; color: #000;}
.fixed_Area img {-webkit-transition: all 0.4s ease;-moz-transition: all 0.4s ease;-ms-transition: all 0.4s ease; -o-transition: all 0.4s ease; transition: all 0.4s ease;}
.fixed_Area .box ul { margin:0; padding:0; list-style:none;}
.fixed_Area .box li { margin:0 0 1px 0; padding:0; height:48px; background-color:rgba(255,255,255,0.6);}
.fixed_Area .box li a { letter-spacing:-1px;height:48px; overflow:hidden;}
.fixed_Area .box li a:hover { background-color:rgba(255,255,255,1);}
.fixed_Area .box li.cate-hover { background-color:rgba(255,255,255,1);}
.fixed_Area .box h2 { margin:0; padding:0;}
	/*快速導覽*/
	.fixed_Area h3 { position: absolute; top:100px; right:-50px; margin:0; padding:35px 0 0 0; border-radius:10px; width:48px; height:82px; font-size: 16px; line-height:30px; writing-mode: tb-lr; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; background-color:rgba(255,255,255,0.6); text-align:left; cursor:pointer;
			-webkit-transform-origin:top left; transform-origin:top left;
			  -webkit-transition: all 0.2s ease;
				 -moz-transition: all 0.2s ease;
				  -ms-transition: all 0.2s ease;
				   -o-transition: all 0.2s ease;
					  transition: all 0.2s ease;}
	.fixed_Area h3 i { position: absolute; top:0; right:0; display:block; width:50px; height:50px; cursor:pointer;}
	.fixed_Area h3 i:before { content: ""; position:absolute; top:41%; left:37%; display:block; border:1px solid #000; border-width:0 1px 1px 0; width:15%; height:15%; -webkit-transform:translate(-50%,-50%) rotate(135deg); transform:translate(-50%,-50%) rotate(135deg); -webkit-transition: all 0.3s ease; transition: all 0.3s ease;}
			/*黑色款*/
			.fixed_Area.fixed_Area-dark a { color: #fff;}
			.fixed_Area.fixed_Area-dark .box li { background-color:rgba(0,0,0,0.5);}
			.fixed_Area.fixed_Area-dark .box li a:hover { background-color:rgba(0,0,0,1);}
			.fixed_Area.fixed_Area-dark .box li.cate-hover { background-color:rgba(0,0,0,1);}
            .fixed_Area.fixed_Area-dark h3 {background-color:rgba(0,0,0,0.5);color: #fff; }
            .fixed_Area.fixed_Area-dark h3  i:before { border-color:#fff;}



			/*收合黏人精*/
			.fixed_Area.fixed_Area_hide { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0); transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0); }
			.fixed_Area.fixed_Area_hide h3 { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(-185px,0,0); transform: rotate3d(0,0,0,0deg) translate3d(-185px,0,0); 
											 -webkit-transition-delay:0.2s; transition-delay:0.2s;}
											 
											 
				
			
	














/*區塊背景*/
@media screen and ( min-width:737px) {
	
.Areabg01{ position:absolute;z-index:-1; top:0px; left:0; width:100%; min-width:1220px; height:3000px;background-image:url(pc_01.jpg?t=1749802372651); background-repeat:no-repeat; background-position:center top;}

.Areabg02{ position:absolute;z-index:-1; top:0px; left:0; width:100%; min-width:1220px; height:3000px;background-image:url(pc_02.jpg?t=1749802372651); background-repeat:no-repeat; background-position:center top; background-color: #e5e5e5}
	
.Areabg03{ position:absolute;z-index:-1; top:0px; left:0; width:100%; min-width:1220px; height:3000px;background-image:url(pc_03.jpg?t=1749802372651); background-repeat:no-repeat; background-position:center top; background-color: #e5e5e5}
.Areabg04{ position:absolute;z-index:-1; top:0px; left:0; width:100%; min-width:1220px; height:10000px; background-image:url(pc_04.jpg?t=1749802372651);background-repeat:no-repeat; background-position:center top;}
	

.Areabg05{ position:absolute;z-index:-1; top:2140px; left:0; width:100%; min-width:1220px; height:100%;background-image:url(pc_05.jpg?t=1749802372651);background-repeat:no-repeat; background-position:center top;}
.Areabg05-2{ position:absolute;z-index:-1; top:-105px; left:0; width:100%; min-width:1220px; height:3000px;background-image:url(pc_05-2.jpg?t=1749802372651);background-repeat:no-repeat; background-position:center top;}

.Areabg06{ position:absolute;z-index:-1; top:0px; left:0; width:100%; min-width:1220px; height:5000px;background-image:url(pc_06.jpg?t=1749802372651);background-repeat:repeat-y; background-position:center top;}
.Areabg07{ position:absolute;z-index:-1; top:0px; left:0; width:100%; min-width:1220px; height:5000px;background-image:url(pc_07.jpg?t=1749802372651); background-repeat:no-repeat; background-position:center top;}
.Areabg08{ position:absolute;z-index:-1; top:0px; left:0; width:100%; min-width:1220px; height:5004px;background-image:url(pc_08.jpg?t=1749802372651); background-repeat:no-repeat; background-position:center top;}
.deco_bg{ position:absolute;z-index:1; pointer-events: none; top:1500px; left:0; width:100%; min-width:1220px; height:3900px;background-image:url(deco_bg.png?t=1749802372651);transition:0.5s linear;  background-repeat: repeat-y; background-position:center top;}
 
.foot_text{background-color:#000000; }
}



@media screen and ( max-width:736px) {
.Areabg01{ display:none }
.Areabg02{ display:none }
.Areabg03{ display:none }
.Areabg04{ display:none }
.Areabg05{ display:none }
.Areabg06{ display:none }
.Areabg07{ display:none }
.Areabg08{ display:none }
.Areabg09{ display:none }
.Areabg10{ display:none }
.Areabg11{ display:none }
.Areabg12{ display:none }
.Areabg13{ display:none }
.foot_text{background-color: #000000;}
.deco_bg{ display:none }
}




.momologo { position:absolute; top:0px; left:34px; z-index:100; }
	 


/*版頭*/
.Area01{width:1220px; height:613px; position:relative; margin:0 auto; }
.Area01 .title{ position:absolute;  top:140px; left: 326px; }
.Area01 ul{display: block;width: 1220px; list-style: none;position:absolute; top: 340px;left: 120px;text-align: justify }
.Area01 ul li{display: inline-block; margin:  0 30px 0 0}
.Area01 .bank{ width: 2000px; position:absolute;  top:0px; left: -390px;z-index: 9;}
.Area01 .bank_bg{ position:absolute; top: 507px; left:125px;overflow:hidden;z-index:8;}
.Area01 .bank2{ width:512px; position:absolute; top: 525px; left: 659px;overflow:hidden;text-align: left;z-index:8;}

@media screen and (max-width:767px){
.Area01 { width:100%; height:auto;  }
.Area01 .title{position: absolute; width: 63%; top: 17vw;left: 21vw;}
	
.Area01 ul{display: block;width:100%; list-style: none;position:absolute; top:51vw;left: -8vw;text-align: left;z-index: 1 }
.Area01 ul li{display: inline-block; width: 19%;margin: 0 -1vw 4vw 0;}
	
	
.Area01 .bank{ width: 100%; position:absolute;  top:2vw; left:0vw; }

}
		

/*中間*/
.Area02{width:1220px; height:991px; position:relative; margin:0 auto; }
.Area02 .btn_01{position: absolute;top: 215px;left: 14px;text-align: justify;width: 1220px}
.Area02 .btn_02{position: absolute;top: 590px;left: 14px;text-align: justify;width: 1220px}
.Area02 .btn_03{position: absolute;top: 216px;left: 338px;text-align: justify;width: 1220px}
.Area02 .btn_04{position: absolute;top: 215px;left: 887px;text-align: justify;width: 1220px}
.Area02 .btn_05{position: absolute;top: 590px;left: 887px;text-align: justify;width: 1220px}

.Area02 .TimerNick { position: absolute;    top: 124px; left: 415px; width: 576px;height: 54px;text-align:center;  z-index:0;}
.Area02 ul.time{  display: block; width:1220px; position:relative; margin:0 0 0 0;   padding: 0;   text-decoration: none; overflow: hidden;  list-style: none; text-align:center ;top: 188px;left: 34px }
.Area02 ul.time li {width: auto; padding:0; margin:0 64px 0 0;  text-decoration:none; list-style:none;  text-align:center; display:inline-block ;filter: brightness(0.5);cursor: pointer; }
.Area02 ul.time li img{ width: 100%; }
.Area02 ul.time li.selected { filter: brightness(1); }
.Area02 .light_box{ position: absolute; top: 23px;left: 600px; }	

@media screen and (max-width:767px){
.Area02 { width:100%; height:180vw;background-color: #000000  }
.Area02 .btn_01{position: absolute;top: 140vw;left: 0;text-align: justify;width: 49%}
.Area02 .btn_02{position: absolute;top: 140vw;left: 51vw;text-align: justify;width: 49%}
.Area02 .btn_03{position: absolute;top: 100.5vw;left: 0;text-align: justify;width: 100%}
.Area02 .btn_04{position: absolute;top: 220vw;left: 0;text-align: justify;width: 49%}
.Area02 .btn_05{position: absolute;top: 180.5vw;left: 0;text-align: justify;width: 100%}
.Area02 .btn_06{position: absolute;top: 220vw;left: 51vw;text-align: justify;width: 49%}

.Area02 ul.time{  display: block; width:100%; position:relative; margin:0 0 0 0;   padding: 0;   text-decoration: none; overflow: hidden;  list-style: none; text-align:center ;top: 0;left: 0 }
.Area02 ul.time li {width: 23%; padding:0; margin:0 1vw 0 0;  text-decoration:none; list-style:none;  text-align:center; display:inline-block ;filter: brightness(0.5);cursor: pointer; }
.Area02 ul.time li img{ width: 100%; }
.Area02 ul.time li.selected { filter: brightness(1); }


}

/*8哀抗*/ 
.Area03{width:1220px; height:545px; position:relative; margin:0 auto;}
.Area03 .PD_layout {top: 170px;}
.Area03 .PD_layout[data-pd-h3="2"] .PD h3 {background-color: #2c2a2b;}

@media screen and (max-width:767px){
.Area03 { width:100%; height:214vw;background-color: #000000  }

}
	 




/*影片區*/
.Area04{width:1220px; height:1530px; position:relative; margin:0 auto; }

.Area04 ul.movie_btn{ display: block; width:1220px; position:absolute; top:137px; left:106px;  margin:0 0 0 0;   padding: 0;   text-decoration: none; overflow: hidden;  list-style: none; text-align:left}
.Area04 ul.movie_btn li {width: auto; padding:0; margin:0 15px 0 0;  text-decoration:none; list-style:none;  text-align:left; display:inline-block ; cursor: pointer}
.Area04 ul.movie_btn li img {width: 188px; }

.Area04 .movie_box{ position: absolute; width: 1220px; height: 750px; top: 274px; left:0px;}
/*影片區*/
.Area_video { height:1350px;}
		  .box_youtube { margin: 0; padding: 0; }
		  .box_youtube .youtubeArea { 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%;}
		  .video {}
		  .video_01 {z-index:5;position:absolute;left: 114px;top:28px;  width: 611px; height: 367px;}

.Area04 .movie_bg{position: absolute; top: 1px; left: 790px;z-index:5; /*pointer-events: none*/}
.Area04 .btn_more{position: absolute; top: 635px; left:939px;z-index:5;}
.Area04 ul.topbtn{    display: block;  width: 1220px; position: relative;top:877px; left: 0; margin:0 0 0 0;  padding: 0;text-decoration: none; overflow: hidden;   list-style: none;text-align: left; }
.Area04 ul.topbtn li {width: auto; padding:0; margin:0 auto; margin-right:15px;  text-decoration:none;display:block; list-style:none;  text-align:center; display:inline-block ;}

.Area04 ul.topbtn2{    display: block;  width: 1220px; position: relative;top:906px; left: 0; margin:0 0 0 0;  padding: 0;text-decoration: none; overflow: hidden;   list-style: none;text-align: left; }
.Area04 ul.topbtn2 li {width: auto; padding:0; margin:0 auto; margin-right:15px;  text-decoration:none;display:block; list-style:none;  text-align:center; display:inline-block ;}




@media screen and (max-width:767px){
.Area04 { width:100%; height:178vw;background-color: #000000  }
.Area04 ul.movie_btn{ display: block; width:100%; position:absolute; top:23vw; left:6vw;  margin:0 0 0 0;   padding: 0;   text-decoration: none; overflow: hidden;  list-style: none; text-align:left;z-index: 99;}
.Area04 ul.movie_btn li {width: 27%; padding:0; margin:0 2vw 0 0;  text-decoration:none; list-style:none;  text-align:left; display:inline-block ; cursor: pointer}
.Area04 ul.movie_btn li img {width: 100%; }

  
  
.Area04 .movie_box{ position: absolute; width:100%; height: 100vw; top:20vw; left:0vw;}
/*影片區*/
		  .Area_video  { height:100%;}	
		  .box_youtube { margin:0; padding:0; }
		  .box_youtube .youtubeArea {  position:absolute;left:0;top:0;width:100%; height:100%;padding:0;}
		  .box_youtube .youtubeArea * { margin:0; padding:5px 0 0 0;}
		  .box_youtube .youtubeArea iframe { position:absolute; top:0px; left:0px; width:100%; height:100%;}
		  .video {height:2vw;}
		  .video_01 {z-index: 2;left: 30vw; top: 14vw;  width: 63%; height: 39vw;}		
		  


.Area04 .movie_bg{position: absolute; width: 100%; top:0vw; left: 0vw;z-index:5;  /*pointer-events: none*/}
.Area04 .btn_more{position: absolute; width: 20%; top: 75vw; left:73vw;z-index:5;}


}



/*圖片*/
.Area05{width:1220px; height:1120px; position:relative; margin:0 auto;padding:0px 0 0 0 ; }
.Area05 ul.movie_btn{ display: block; width:1220px; position:absolute; top:146px; left:125px;  margin:0 0 0 0;   padding: 0;   text-decoration: none; overflow: hidden;  list-style: none; text-align:left}
.Area05 ul.movie_btn li.pic_btn01 {width: 288px;height: 84px; padding:0; margin:0 57px 0 0;  text-decoration:none; list-style:none;  text-align:left; display:inline-block ; cursor: pointer;background:url("pic_btn01.jpg?t=1749802372651")}
.Area05 ul.movie_btn li.pic_btn01:hover {background:url("pic_btn01_on.jpg?t=1749802372651");}

.Area05 ul.movie_btn li.pic_btn02 {width: 288px;height: 84px; padding:0; margin:0 57px 0 0;  text-decoration:none; list-style:none;  text-align:left; display:inline-block ; cursor: pointer;background:url("pic_btn02.jpg?t=1749802372651")}
.Area05 ul.movie_btn li.pic_btn02:hover {background:url("pic_btn02_on.jpg?t=1749802372651");}

.Area05 ul.movie_btn li.pic_btn03 {width: 288px;height: 84px; padding:0; margin:0 57px 0 0;  text-decoration:none; list-style:none;  text-align:left; display:inline-block ; cursor: pointer;background:url("pic_btn03.jpg?t=1749802372651")}
.Area05 ul.movie_btn li.pic_btn03:hover {background:url("pic_btn03_on.jpg?t=1749802372651");}


.Area05 .movie_box{ position: absolute; width: 1220px; height: 680px; top: 273px; left:9px;}

@media screen and (max-width:767px){
.Area05 { width:100%; height:auto;background-color: #000000;padding: 0 0 0 0  }

.Area05 ul{display: block;width:100%; list-style: none;position:absolute; top:153vw;left: -7vw;text-align: left; }
.Area05 ul li{display: inline-block; width:45%;margin: 1vw 2vw 2vw 0;}

}

/*公版*/
.Area06{width:1220px; height:auto; position:relative; margin:0 auto;padding:0 0 0 0 ; }
.Area06 ul.movie_btn{ display: block; width:1220px; position:absolute; top:137px; left:106px;  margin:0 0 0 0;   padding: 0;   text-decoration: none; overflow: hidden;  list-style: none; text-align:left}
.Area06 ul.movie_btn li {width: auto; padding:0; margin:0 15px 0 0;  text-decoration:none; list-style:none;  text-align:left; display:inline-block ; cursor: pointer}
.Area06 ul.movie_btn li img {width: 188px; }


@media screen and (max-width:767px){
.Area06 { width:100%; height:auto;background-color: #000000;padding: 0 0 0 0  }

.Area06 ul{display: block;width:100%; list-style: none;position:absolute; top:153vw;left: -7vw;text-align: left; }
.Area06 ul li{display: inline-block; width:45%;margin: 1vw 2vw 2vw 0;}

}





/*公版PD_layout-D2_1f4s*/
.PD_layout-D2_1f4s { position: relative; }

    /*BN*/
    .PD_layout-D2_1f4s .PD_layout-D2_1f4s-BN {position: relative; background-repeat: repeat-y; background-size: 100%}
    .PD_layout-D2_1f4s .PD_layout-D2_1f4s-BN .PD_img,
    .PD_layout-D2_1f4s .PD_layout-D2_1f4s-BN .PD .PD_logo {display:none;}
    .PD_layout-D2_1f4s .PD_layout-D2_1f4s-BN .PD_layout[data-pd-col-pc="1"] li {-webkit-transform:none; transform:none;margin-bottom:0px;}
        @media screen and (min-width:768px){
		  .PD_layout-D2_1f4s {background-image:url(layout_1220_1f8s_1.png?t=1749802372651);margin:20px 0 0 0; width: 1245px; height: 408px; overflow: hidden}
      .PD_layout-D2_1f4s:nth-child(odd) {background-image:url(layout_1220_1f8s_2.png?t=1749802372651);}
  
          
		  .PD_layout-D2_1f4s .PD_layout-D2_1f4s-BN {width:12230px;margin:0px 0 0 0;display: block;z-index: 0}
	    .PD_layout-D2_1f4s .PD_layout-D2_1f4s-BN .PD_img {display: block; width:300px}
      .PD_layout-D2_1f4s .PD_layout-D2_1f4s-BN .PD_img  img{ width: 233px}
        }
        @media screen and (max-width:767px){
     .PD_layout-D2_1f4s .PD_layout-D2_1f4s-BN {}
		  .PD_layout-D2_1f4s .PD_layout-D2_1f4s-BN .PD_layout[data-pd-col-phone="1"] li {margin-bottom:0}
		  .PD_layout-D2_1f4s .PD_layout-D2_1f4s-BN .PD_wrapper{padding:0}
		  .PD_layout-D2_1f4s .PD_layout-D2_1f4s-BN .PD_img{width:100%}
          .PD_layout-D2_1f4s .PD_layout-D2_1f4s-BN .PD .PD_logo { display: block;}
        } 
      /*PD*/
      .PD_layout-D2_1f4s .PD_layout-D2_1f4s-PD {position:relative;}
      .PD_layout-D2_1f4s .PD_layout-D2_1f4s-PD .PD h3 {   background-image: repeating-linear-gradient(272deg, #000000 -2%, #272727 120%);
    background-position: right top;
    background-size: 100% 100%;}
      @media screen and (min-width:768px){
	  .PD_layout-D2_1f4s .PD_layout-D2_1f4s-PD  .PD_layout {position:absolute;top:-374px;left:280px; width: 949px;}
      .PD_layout-D2_1f4s .PD_layout-D2_1f4s-PD  .PD_layout[data-pd-col-pc*="4"] ul  {position:relative;margin:0px;box-sizing: border-box;}
       }
       @media screen and (max-width:767px){
	   .PD_layout-D2_1f4s .PD_layout-D2_1f4s-PD {margin-bottom:0%} 
       .PD_layout-D2_1f4s .PD_layout-D2_1f4s-PD .PD .PD_logo {display: block;}
	   .PD_layout[data-pd-col-phone="2"] ul { padding: 0.5em; padding-bottom: 0; padding-left: 1em}
       }
        /*針對ECM編輯模式下，編輯按鈕重疊問題修正
        @media screen and (min-width:768px){
          .PD_Layout-D2_1f7s .PD_Layout-D2_1f7s-PD { position: relative; left: 80px;}
          .PD_Layout-D2_1f7s .PD_Layout-D2_1f7s-PD .PD_layout { position: relative; left: -80px;}
        }*/

		






/*共用*/
.for_pc { display:block !important;}
.for_m  { display:none !important;}
	@media screen and (max-width:736px){ 
		/*共用*/
		.for_pc { display:none !important;}
		.for_m  { display:block !important;}
	}







/** 公版模組layout_rwd_1f4s_01 **/
.layout_rwd_1f4s_01  { position:relative; margin-bottom:0px; width:1220px;top: 181px;left: 4px } 
.layout_rwd_1f4s_01 h2 { display:block; padding:0; margin:0; height:120px;font: bold 50px/129px "微軟正黑體","Microsoft JhengHei",Helvetica;text-align: center;color: #ffffff; }
.layout_rwd_1f4s_01 h2 a { display: block; text-decoration:none;}
.layout_rwd_1f4s_01 h2 img { width:714px; height:357px;}
.layout_rwd_1f4s_01 ul {width:1220px; display:inline-block;  box-sizing:border-box;    margin:0 0 15px  0;padding:38px 0px 0px 41px; }
.layout_rwd_1f4s_01 ul li { float:left; display:inline-block; position:relative; margin:0px 16px 10px 0px;border-radius: 15px; padding:0px 0px 0px 0px; border:1px solid #dcdcdc; width: 270px; height:390px; list-style: none outside none; background:#fff;
							  -webkit-transition: all 0.4s ease;
									 -moz-transition: all 0.4s ease;
									  -ms-transition: all 0.4s ease;
									   -o-transition: all 0.4s ease;
										  transition: all 0.4s ease;}
.layout_rwd_1f4s_01 ul li a {text-decoration:none;}
.layout_rwd_1f4s_01 ul li a img { display:block; margin:0px; padding:10px; width:250px; height:250px;}
.layout_rwd_1f4s_01 ul li a h3 { position: relative; margin:0 10px; padding:0 10px; border-radius:15px; height: 30px;font: bold 16px/30px "微軟正黑體","Microsoft JhengHei",Helvetica;text-align: center;color: #FFF; background:#ffd011;}
.layout_rwd_1f4s_01 ul li a h4 { margin:5px 0px; padding:0 10px; height:18px; overflow:hidden; font: 15px/20px "微軟正黑體","Microsoft JhengHei",Helvetica;text-align: center;color:#000}
.layout_rwd_1f4s_01 ul li:hover{ -webkit-transform:translateY(-6px); transform:translateY(-6px); -webkit-box-shadow:0 0 10px rgba(0,0,0,0.3);  box-shadow:0 0 10px rgba(0,0,0,0.3);}
.layout_rwd_1f4s_01 ul li:hover a h4 {color:#d92670;}
.layout_rwd_1f4s_01 ul li a p { margin:0px; padding:0 10px; height: 38px;text-align: center; color:#d92670;}
.layout_rwd_1f4s_01 ul li a p del { padding-right:5px; font: 16px/38px Century Gothic; color:#5e5e5e;}
.layout_rwd_1f4s_01 ul li a p b { font: bold 16px/38px "微軟正黑體","Microsoft JhengHei",Helvetica; letter-spacing:-1px;}
.layout_rwd_1f4s_01 ul li a p .money { font: bold 14px/38px Century Gothic; }
.layout_rwd_1f4s_01 ul li a p .Price { font: 38px/38px Century Gothic; letter-spacing:-1px; }
.layout_rwd_1f4s_01 ul li a p small { font: 14px/38px "微軟正黑體","Microsoft JhengHei",Helvetica; letter-spacing:-1px;}

.layout_rwd_1f4s_01 .HashtagArea { display: inline-block; margin:0; padding:0; font-family: 微軟正黑體;text-align: center; }
.layout_rwd_1f4s_01 .HashtagArea dd { display:block; margin:0; padding:0 10px 10px 10px; }
.layout_rwd_1f4s_01 .HashtagArea dd strong { float:left; display:inline-block; margin:0 0 0 10px; padding:0; width:292px; text-align:center; }
.layout_rwd_1f4s_01 .HashtagArea dd strong:first-child { margin-left:0;}
.layout_rwd_1f4s_01 .HashtagArea dd a {display:block; padding: 10px 10px 10px 10px; /*border-radius: 5px;*/ line-height:30px; font-weight:300; font-size: 16px; color:#000;text-decoration:none;  background-color:#fff;
							  -webkit-transition: all 0.4s ease;
									 -moz-transition: all 0.4s ease;
									  -ms-transition: all 0.4s ease;
									   -o-transition: all 0.4s ease;
										  transition: all 0.4s ease;}
.layout_rwd_1f4s_01 .HashtagArea dd a::after { content: ""; position:relative; top:5px; left:5px; display:inline-block; border:1px solid #000; border-width:0 1px 1px 0; width:8px; height:8px; -webkit-transform:translate(-50%,-50%) rotate(-45deg); transform:translate(-50%,-70%) rotate(-45deg);}
.layout_rwd_1f4s_01 .HashtagArea dd a:hover,
.layout_rwd_1f4s_01 .HashtagArea dd a:active { -webkit-transform:translateY(-8px); transform:translateY(-8px);  box-shadow:0 0 20px rgba(0,0,0,0.5); }
@media screen and ( min-width:737px) {

}

	@media screen and ( max-width:736px) {
		.layout_rwd_1f4s_01{ width:100%; height:auto; overflow:auto; margin-bottom:0px; background-image: none ;top: 4vw ;left: 0px }
		.layout_rwd_1f4s_01 * { -webkit-box-sizing:border-box; box-sizing:border-box;}
		.layout_rwd_1f4s_01 h2 { position: absolute;
        width: 100%;
    top:7.5vw;
    height: 10vw;
    font: bold 27px / 47px 微軟正黑體, "Microsoft JhengHei", Helvetica;
    margin: 0px auto;
    text-align: center;}
		.layout_rwd_1f4s_01 h2 img { width:100%; height:auto;}
		.layout_rwd_1f4s_01 ul {width:100%; margin:0vw 0 0vw 0; padding:0 0 0 5%;}
		.Area_step:nth-child(even) .layout_rwd_1f4s_01 ul {background-color: #e2e9ef; }
		.Area_step:nth-child(odd)  .layout_rwd_1f4s_01 ul {background-color: #fff9e1; }
		.layout_rwd_1f4s_01 ul li { margin:0 3% 3% 0; border:0; width:46%; height: auto; -webkit-box-shadow:0 0 10px rgba(0,0,0,0.1);  box-shadow:0 0 10px rgba(0,0,0,0.1);}
		.layout_rwd_1f4s_01 ul li a img { padding:0; width:100%; height:auto;}
		.layout_rwd_1f4s_01 ul li a h3 { position:relative; margin:5%; padding:0 5%;  border-radius:24px; width:90%; height: 24px; overflow:hidden; font-weight:normal; font-size:14px; line-height:24px; text-align:center;  color:#fff;}
		.layout_rwd_1f4s_01 ul li a h3:after { content:""; z-index:0; position:absolute; top:0; left:0; width: 100%;  height: 100%; background-color:rgba(0,0,0,0);}
		.layout_rwd_1f4s_01 ul li a h3 span { z-index:1; position:relative;}
		.layout_rwd_1f4s_01 ul li a h4 { margin:5px 0px -3px 0px; padding:0 10px; height:22px; overflow:hidden; font: 14px "微軟正黑體","Microsoft JhengHei",Helvetica;text-align: center;color:#000}
		.layout_rwd_1f4s_01 ul li a p { margin:0px; padding:0 10px; height: 40px;text-align: center; color:#d92670;}
		.layout_rwd_1f4s_01 ul li a p del { padding-right:5px; font: 11px/28px Century Gothic; color:#5e5e5e;}
		.layout_rwd_1f4s_01 ul li a p b { font: bold 12px "微軟正黑體","Microsoft JhengHei",Helvetica; letter-spacing:-1px;}
		.layout_rwd_1f4s_01 ul li a p .money { font: bold 12px/30px Century Gothic; }
		.layout_rwd_1f4s_01 ul li a p .Price { font: 24px/32px Century Gothic; letter-spacing:-1px; }
		.layout_rwd_1f4s_01 ul li a p small { font: 12px/30px "微軟正黑體","Microsoft JhengHei",Helvetica; letter-spacing:-1px;}

		.layout_rwd_1f4s_01 .HashtagArea { width:100%; }
		.layout_rwd_1f4s_01 .HashtagArea dd { display:inline-block; padding:0 2%; width:100%;}
		.layout_rwd_1f4s_01 .HashtagArea dd strong { margin:0 0 2% 2%; width:49%; -webkit-box-shadow:0 0 10px rgba(0,0,0,0.1);  box-shadow:0 0 10px rgba(0,0,0,0.1);}
		.layout_rwd_1f4s_01 .HashtagArea dd strong:nth-child(2n+1) { margin-left:0;}
		.layout_rwd_1f4s_01 .HashtagArea dd a {  padding: 5%; line-height:20px; font-size: 14px; }
		.layout_rwd_1f4s_01 .HashtagArea dd a::after {  top:5.5px; left:5px; width:7px; height:7px;}
		

		/*品數為單數時，手機版最後一個隱藏
		.layout_rwd_1f4s_01:nth-child(2n+0) ul li:last-child { display:none;}
		.layout_rwd_1f4s_01:nth-child(2n+1) ul li:last-child { display:none;}*/

	}




					 
						
	
