@charset "utf-8";

/*基本*/
body {margin: 0; padding:0; background-color: #000;}
	@media screen and (max-width:767px){
		body {}
	}

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


/*PC背景*/
@media screen and (min-width:767px){
  .bgtop01  { z-index:-7; position:absolute; top:0; left:0; width:100%; min-width:1220px; height:1000px; background-repeat:no-repeat; background-position:center top; }
	.bgtop02  { z-index:-7; position:absolute; top:1000px; left:0; width:100%; min-width:1220px; height:1000px; background-repeat:no-repeat; background-position:center top; }
	.bgtop03  { z-index:-7; position:absolute; top:2000px; left:0; width:100%; min-width:1220px; height:1000px; background-repeat:no-repeat; background-position:center top; }
	.bgtop04  { z-index:-7; position:absolute; top:3000px; left:0; width:100%; min-width:1220px; height:1000px; background-repeat:no-repeat; background-position:center top; }
	.bgtop05  { z-index:-7; position:absolute; top:4000px; left:0; width:100%; min-width:1220px; height:1000px; background-repeat:no-repeat; background-position:center top; }
	.bgtop06  { z-index:-7; position:absolute; top:5000px; left:0; width:100%; min-width:1220px; height:1000px; background-repeat:no-repeat; background-position:center top; }
	.bgtop07  { z-index:-7; position:absolute; top:6000px; left:0; width:100%; min-width:1220px; height:1000px; background-repeat:no-repeat; background-position:center top; }
	.bgtop08  { z-index:-7; position:absolute; top:7000px; left:0; width:100%; min-width:1220px; height:1000px; background-repeat:no-repeat; background-position:center top; }
	.bgtop09  { z-index:-7; position:absolute; top:8000px; left:0; width:100%; min-width:1220px; height:1000px; background-repeat:no-repeat; background-position:center top; }
	.bgtop10  { z-index:-7; position:absolute; top:9000px; left:0; width:100%; min-width:1220px; height:1500px; background-repeat:no-repeat; background-position:center top; }

}
	
/*全BOX版面*/
.WRAPPER { position: relative;	display: inline-block;	margin: 0;	padding: 0;	width:100%; min-width:1220px; overflow: hidden;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica; background: url() repeat-y center top;background-color: #000;}
.WRAPPER img { border:0; vertical-align:top;}
.WRAPPER a { text-decoration:none;}
.WRAPPER ul {list-style: none outside none;}
.WRAPPER .Area_top{position: relative; }
.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:1220px;}
	@media screen and (max-width:767px){
		.WRAPPER { padding-bottom:0px; min-width:inherit; background: #000; background-size:100%;}
		.WRAPPER .mainArea { position:relative; display:block; margin:0 auto; padding: 0; width:100%;}
		.WRAPPER.mmainAre { width: 100%;}
	}
	@media screen and ( max-width:736px) {
	 .WRAPPER {min-width: inherit; }
	 .WRAPPER img {width:100%; height:auto;}
	}


.WRAPPER .go_bt {
  -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;}
.WRAPPER .go_bt:hover { 
   filter:brightness(105%);
  -webkit-transform:translateY(-10px);
     -moz-transform:translateY(-10px);
      -ms-transform:translateY(-10px);
       -o-transform:translateY(-10px);
          transform:translateY(-10px);}
		  
.WRAPPER .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;}
.WRAPPER .go_bt2:hover { 
   filter:brightness(108%);
  -webkit-transform:scale(0.9);
     -moz-transform:scale(0.9);
      -ms-transform:scale(0.9);
       -o-transform:scale(0.9);
          transform:scale(0.9);}


/*按鈕基本*/
.fill:hover,
.fill:focus { box-shadow: inset 0 0 0 1.5em var(--hover);}
/*.button{ position: absolute; top: 200px; left: 178px; font-size:20px; letter-spacing:3px;}*/
.fill { --color: #353535; --hover: #000;}
button {  color: var(--color);  transition: 0.25s; cursor:pointer;}
button:hover, button:focus {  border-color: var(--hover);  color: #fff;}
button { background: none; border: 2px solid; font: inherit; line-height: 1; margin: 0.5em; padding: .9em 1.5em;}

/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; text-align:center;  }
.Area .box_bg{position:absolute;top:0;left: 0;z-index: 0;} 
.Area1220 { margin:0 auto; width:786px !important;}
.Area_1bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
.Area_1bn_nopadding a  { float:left; margin:0; padding:0; width:100%; list-style: none;}
.Area_1bn_nopadding img  { float:left; margin:0; padding:0; width:100%; list-style: none;}
.Area_2bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
.Area_2bn_nopadding a { float:left; margin:0; padding:0; width:50%; list-style: none;}
.Area_3bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;width:98%;}
.Area_3bn_nopadding p { float:left; margin:0; padding:0; width:33.3%; list-style: none; text-align:center;}
.Area_4bn_nopadding { margin: 0 auto; padding:0;width:1220px; overflow:hidden;}
.Area_4bn_nopadding a { float:left; margin:0; padding:0; width:25%; list-style: none;}		/*區塊_兩邊間距*/
	@media screen and (max-width:767px){
		.Area .go_bt:hover { 
			-webkit-transform:none;
			 -moz-transform:none;
				-ms-transform:none;
				 -o-transform:none;
					transform:none;}
		.Area1220 { width:100% !important;}
		.Area img{ width:100%;}
		.Area { position: relative;}

		/*區塊_切割*/
		.Area_1bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_1bn a { float:left; margin:0 0 2% 0; padding:0; width:100%;}
		.Area_2bn { width:96%; margin: 0 2%; padding:0; overflow:hidden;}
		.Area_2bn a { float:left; margin:0 1% 2%; padding:0; width:48%; }
		.Area_3bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn a { float:left; margin:0 1% 2% ; padding:0; width:31.3%; }
		.Area_1bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_1bn_nopadding a { position:relative; float:left; margin:0; padding:0; width:100%; }
		.Area_2bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_2bn_nopadding a { float:left; margin:0; padding:0; width:50%;}
		.Area_3bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn_nopadding a { float:left; margin:0; padding:0; width:33.3%;}
		.Area_4bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_4bn_nopadding a { float:left; margin:0; padding:0; width:25%; }		
	}


/*logo*/
.Area_logo { width: 1220px; position: relative; margin:0 auto; padding:0; overflow:hidden; height: 230px;z-index:2;text-align: center; vertical-align: top; background-color:#000; }
.Area_logo img {width:70%;}
@media screen and (max-width:767px){
    .Area_logo { overflow:hidden;  margin: 0 auto; padding:0; width: 100%;left: 0; height: auto; list-style: none; position: relative;height: auto;}
    .Area_logo img {width:90%;}
}

@media screen and (min-width:768px){
.Area_allbox img{ width: 100% !important;}
}


/*版頭頁籤*/
.AreaHeader { position: relative; top: 0px; left: 50%; transform: translateX(-50%); width: 100%; z-index: 9; background-color: rgb(0, 139, 176); }
.AreaHeader .box { position: relative; margin: 0px auto; }
.AreaHeader ul { padding: .8rem 0; margin: 0px; text-align: center; }
.AreaHeader li { list-style: none; display: inline-block; text-align: center; margin: 0 1rem; }
.AreaHeader li a { font-size: 23px; font-family: 微軟正黑體, "Microsoft JhengHei", Helvetica; font-weight: bold; color: white; }
.AreaHeader li a span{ padding: 6px 0; border-radius: 3px;}
.AreaHeader .menu .label_btn:hover { color:rgb(124 210 240); }
@media screen and (max-width: 767px) {
  .AreaHeader { position: relative; top: 0px; width: 100%; height: 20vw; z-index: 9; background-color: rgb(0, 0, 0); }
  .AreaHeader .box { position: relative; margin: 0px auto; }
  .AreaHeader ul { position: relative;padding: 0px; margin: 0px auto; text-align: center;}
  .AreaHeader li { list-style: none; display: inline-block; margin: 1% 1%; text-align: center; width: 29%; }
  .AreaHeader .menu .label_btn { display: inline-block; width: 100%; font: bold 16px / 16px 微軟正黑體, "Microsoft JhengHei", Helvetica; color: rgb(255, 255, 255); background: rgb(0, 139, 176); text-align: center; }
  .AreaHeader .menu .label_btn:hover { color: rgb(124 210 240); background-color: rgb(255, 255, 255); }
  .Area .tab_content .page { display: none; width: 100%; text-align: center; background-color: rgb(247, 243, 247); }
  .AreaHeader .tab_content .page ul { margin: 0px; padding: 0px; }
  .AreaHeader .tab_content .page ul li { float: inherit; display: inline-block; position: relative; margin: -2vw 0px 0px; padding: 1vw; width: 28%; list-style: outside none none; transition: all 0.9s ease 0s; }
}


.Areatimer { background: url("Areatimer_bg.png?t=1750650274400") center top / 80% no-repeat scroll; }
@media screen and (max-width: 767px) {
	.Areatimer { height: 25vw;background: url("Areatimer_bg.png?t=1750650274400") center top / 130% no-repeat scroll; }
}

.TimerNick_2 { position: relative; top: 0px; left: 0px; width: 109%; height: 130px; text-align: center; padding: 42px 0px 0px; z-index: 4; margin: 0px; border-radius: 5em; }
.TimerNick_2 .FontStyle { position: relative; display: inline-block; width: 120px; top: 0px; font: 70px / 52px Century Gothic; color: rgb(255, 255, 255); letter-spacing: 0px; text-align: right; padding: 0px 1% 0px 0px; }
.TimerNick_2 span { padding-left: 4px; font: 600 23px / 38px "Century Gothic","微軟正黑體", "Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em; color: rgb(135, 90, 13); }
.TimerNick_2 small { position: relative; font: bold 16px / 38px 微軟正黑體, "Microsoft JhengHei", Arial, Helvetica; letter-spacing: 0em; color: rgb(42, 13, 5); }
@media screen and (max-width: 767px) {
  .TimerNick_2 { position: absolute; top: 5vw; left: 13vw; margin: 0px; width: 100%;  text-align: center; padding: 0px;   }
  .TimerNick_2 .FontStyle { margin: 0px; width: 7vw; font: 10vw / 6vw Arial; color: rgb(255 255 255); letter-spacing: 0px; text-align: right;  height: 6vw; font-family: serif;padding: 0;  }
  .TimerNick_2 div:nth-of-type(2), .TimerNick_2 div:nth-of-type(3), .TimerNick_2 div:nth-of-type(4) { width: 7vw; }
  .TimerNick_2 span { padding-left: 10vw; font: bold 4vw / 11vw 微軟正黑體, "Microsoft JhengHei", Arial, Helvetica; letter-spacing: 0em; }
}




/*版頭區*/
.Area_top { position:relative; width:1220px;height:600px;}
.Area_top .PD{position: absolute;top:88px;left:610px; z-index:3;}

	 
/*第1區*/
.Area01 {width:1220px; height: 510px;  position:relative; margin:0 auto;box-sizing:border-box;    padding:0;}
.Area01 .topbn {width:2000px; height:500px; overflow:hidden; position:absolute;  top:0px; left:-390px; overflow:hidden; text-align:left; z-index:1;}
.Area01 .swiper-pagination-bullet-active { background:#fff; }
.Area01 .swiper-pagination-bullet { background: #fff; }
.movie{ width:1440px; margin: 0 0 0 280px;}
	@media screen and (max-width:767px){
	.Area01 { width:100%;height: 391px;}
	.Area01.Mobile {height:391px;}
	.MobileBox90vw{height: 90vw;}
	.MobileBox100vw{height: 100vw;}
	.Area01 .topbn {width:100%; height:auto; overflow:hidden; position:relative;margin:0 0 5vw;  top:0px; left:0; overflow:hidden; text-align:left; z-index:1;}
	}	


/*第2區*/
.Area_live { padding: 30px 0!important; height: 460px; }
.Area_live .video_01 { z-index: 10; position: relative;   margin: 0 auto;width: 850px; height: 430px; }
.Area_live .video_bn { position: absolute; top: 45px; left: 100px; z-index: 1; }
.Area_live ul.event { display: flex; width: 1220px; position: relative; margin: 20px 0px 30px; top: 375px; padding: 0px; text-decoration: none; overflow: hidden; list-style: none; flex-wrap: wrap; }
.Area_live ul.event li { position: relative; margin: 0px auto; padding: 20px 0px; text-align: center; display: inline-block; cursor: pointer; }
@media screen and (max-width: 767px) {
  .Area_live { padding: 4vw 0 2vw 0!important;height: 59vw;}
  .Area_live .video_01 { top: 0; left: 0; width: 100%; height: auto; }
  .Area_live .video_bn { position: absolute; left: 9vw; top: 63vw; width: 80%; z-index: 10; }
  .Area_live ul.event { display: flex; width: 100%; position: relative; top: 111vw; left: 0px; margin: 0px auto; padding: 0px; text-decoration: none; overflow: hidden; list-style: none; z-index: 2; text-align: center; justify-content: center; }
  .Area_live ul.event li { display: inline-block; width: 31%; padding: 0px 0.5% 2.5%; margin: 0px; text-decoration: none; text-align: center; }
}
.box_youtube { margin: 0px; padding: 0px; }
.box_youtube .youtubeArea { width: 100%; height: 0px; padding-bottom: 56.25%; }
.box_youtube .youtubeArea * { margin: 0px; padding: 0px; }
.box_youtube .youtubeArea iframe { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }


/*第3區*/
.Area03 { height: auto; position: relative; box-sizing: border-box; margin: 0px auto; padding: 0px; }

@media screen and (max-width: 767px) {
  .Area03 { width: 100%; height: auto; background-size: 100%; background-image: none;background-color: #fff;}
}


/**延遲載圖用**/
.mainArea .articleList * img.lazy {display:none;} 
.swiper-wrapper { height: auto; }



.ytb-video-box{ max-width:786px; padding:5px; margin:0 auto;}

.video-container { max-width:786px; margin:0 auto; position:relative; height:442px; overflow:hidden;}

.video-container iframe, .video-container object,.video-container embed { position:absolute; top:0; left:0; width:100%; height:100%; max-height:442px;}

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

.video-container{ padding-bottom:56%; height:0;}
}