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

/*基本*/
body{ margin:0; padding:0;}


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

/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; text-align:center;  }
.Area a { display:block;margin: auto;} 
.Area .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;}
.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);}
.Area1220 { margin:0 auto; width:1220px;height:auto}
.Area960 { margin:0 auto; width:960px;}
		.Area_1bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_1bn a { float:left; margin:0 0 2% 0; padding:0; width:100%; list-style: none;}
		.Area_2bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_2bn a { float:left; margin:0 1% 2%; padding:0; width:48%; list-style: none;}
		.Area_3bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn a { float:left; margin:0 1% 2% ; padding:0; width:31.3%; list-style: none;}
		.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_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;}
		.Area_3bn_nopadding a { float:left; margin:0; padding:0; width:33.3%; list-style: none;}
		.Area_4bn_nopadding { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_4bn_nopadding a { float:left; margin:0; padding:0; width:25%; list-style: none;}


	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
		/*區塊_切割*/
		.Area_1bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_1bn a { float:left; margin:0 0 2% 0; padding:0; width:100%; list-style: none;}
		.Area_2bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_2bn a { float:left; margin:0 1% 2%; padding:0; width:48%; list-style: none;}
		.Area_3bn { margin: 0 auto; padding:0; overflow:hidden;}
		.Area_3bn a { float:left; margin:0 1% 2% ; padding:0; width:31.3%; list-style: none;}
		.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_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;}
		.Area_3bn_nopadding a { float:left; margin:0; padding:0; width:33.3%; list-style: none;}
	}




/*logo*/
.Area_logo { position: relative; margin:0; padding:0; overflow:hidden; height:100px;width:100%;z-index:2;text-align: center; vertical-align: top; background-color:#fff; }
	@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%;}
	}

/*header-選單切換區*/
@media screen and (min-width:768px){
.cantantBase { z-index:5; background:#f3f3f3; /*border-top:solid 10px #000;*/  position: relative; top:0; left:50%; transform:translateX(-50%); width:100%; height:auto; z-index:9; border-bottom:1px solid #c5c5c5;}
.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=1749719600124);}
.cantantBase .momologo a:hover { background:url(momo_logo_on.png?t=1749719600124);}*/
.cantantBase ul {display:inline-block; margin:0; padding:0 10px; list-style:none; text-align:center; width:100%; box-sizing:border-box;}
.cantantBase ul li { float:left; display:inline-block; position:relative; margin:0 15px; padding:0; font-size:16px; line-height:69px; width:170px; letter-spacing:0.15em;}
.cantantBase ul li a { color:#000; display:block;}
.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: #000; }
.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: #000; }
.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: #000; }
/*選單內容物*/
.tab_content{ z-index:9; position: absolute; top:69px; left:0; margin:0; padding:15px 0 30px; overflow:hidden; width:100%; height:auto; background-color:#fff; border-bottom:1px solid #c5c5c5; 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:left; 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:#fff;}
.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:#0032a1;}
.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; }
}	



/*第2區*/
.Area02 {width:1220px; height:659px;  position:relative; margin:0 auto;box-sizing:border-box;  padding:0px 0 0 0px;}
.Area02 .star{ position: absolute; top:112px;left: 972px; }
.star01{ position: absolute; top:0px;left: 0px; }
.star02{ position: absolute; top: -7px;left: 8px; }

h2{position: relative;top: 136px; width:1220px; height: 108px;  display: block; font: bold 48px/100px "微軟正黑體","Microsoft JhengHei",Helvetica;color: #676767;}


.Area02 .momobtn_01{position: absolute; top:230px;left: 0px;}

.Area02 .bnswiper{position: absolute; top:0px;left:37px; width: 368px; height: 412px;}

.Area02 .momobtn_02{position: absolute; top:235px;left: 405px;}
.Area02 .momobtn_03{position: absolute; top:235px;left: 800px;}
.Area02 .momobtn_04{position: absolute; top:443px;left: 405px;}
.Area02 .momobtn_05{position: absolute; top:443px;left: 800px;}

@media screen and (max-width:767px){
.Area02 { width:100%;height:100%;}
		}
/*版頭*/
.Area_top {width: 1220px; height:340px;}

.Area_top .topbn{width: 2000px;height: auto;position: absolute;left: -412px;top:0px;}

	@media screen and (max-width:767px){
		.Area_top { height: auto;}
		.Area_top .momologo { display:none}
	}
.bank_bn{ position:absolute; top:200px; left:0; z-index:3;}
	
.Area_03 { width:1220px;height:auto;}
.Area_03 h2 {position: relative;top:0px;left:40px; width:1220px; height: 60px;  display: block; font: 40px/80px "微軟正黑體","Microsoft JhengHei",Helvetica;text-align: left; color:#676767}
.Area_04 { width:1220px;height:auto;}


/*8品公版外包設定*/
.Area1220 .PD_box_01{ height:auto;margin:0px auto;padding:0%; width: 1140px;background: #FFFFFF}
.Area1220 .PD_box_01 .PD_layout{margin: 0px auto;}
@media screen and (max-width:767px){
			.Area1220 .PD_box_01{ height:100%;margin:0 auto 10%;;padding:0;}		
			.Area1220 .PD_box_01 .PD_layout{margin: 0 auto;}
		}


/*第4區*/
.Area04 {width:100%; height:auto;  position:relative; margin:0 auto; box-sizing:border-box;padding:0;}
.Area04 ul{    display: block;  width: 1220px; position:relative;margin:0;  padding: 0;text-decoration: none; overflow: hidden;   list-style: none;text-align: center;}
.Area04 ul li {width:23%;  position: relative;  margin: 10px 10px;  padding: 0 10px;  border-radius: 60px;  height: 50px; font: bold 30px/50px "微軟正黑體","Microsoft JhengHei",Helvetica;  text-align: center;  color: #FFF; background: #363737;display:inline-block;filter: brightness(0.5);cursor: pointer; }
.Area04 ul li.selected { filter: brightness(1); }

.Area04 .moviebox{width:1220px; height:700px; position: relative; overflow:hidden;}
.Area04 .moviebox .movie_bg{position:absolute; top:127px; left:40px; z-index:1;}
/*影片區*/
		  .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_01 {z-index:5;position:absolute;    top: 179px; left: 42px; width: 636px; height: 412px;}
.Area04 .moviebox .movie_pd{position:absolute; top:105px; left:639px; z-index:2;}
.Area04 .moviebox .movie_pd img{width:80%}


/*隱鑶*/
.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;}
	}