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

/*基本*/
body{ margin:0; padding:0; background-color: #010820}
.cantantBase1{ display: block; }

/*全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 { min-width: inherit; padding-bottom: 120px; background-size: 100%  }
		.WRAPPER img {  width:100%;  height:auto;}
	}
	
/*隱鑶*/
.for_pc {}
.for_phone { display:none !important;}
.for_m { display:none !important;}
	@media screen and (max-width:767px){
		.for_pc { display:none !important;}
		.for_phone { display: inherit !important;}
    .for_m { display: inherit !important;}
	}

/*Area_txt(有設計的區標PC手機共用)*/
@media screen and (min-width:768px){
	.Area_txt {margin:0 auto!important; }
	.Area_txt img {width: 800px !important; }	  
}
@media screen and (max-width:767px){
		.Area_txt {width:100%!important; }
	  .Area_txt img {width:100%!important;}
}

/*PC背景*/
.Area_bgtop { z-index: -40; position: absolute; top: 50px; left: 50%; width: 2000px; -webkit-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none;}
.Area_bgtop .bgtop_ { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.Area_bgtop .bgtop_ span { position: absolute; display: block; width: 100%; height: 100%; background-position: center top; }

/*Phone背景*/
.m_Area_bgtop { z-index: -40; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none;}
.m_Area_bgtop .m_bgtop_ { position: absolute; top: 0; left: 0; width: 100%; height: 100%;  }
.m_Area_bgtop .m_bgtop_ span { position: absolute; display: block; width: 100%; height: 100%; overflow: hidden; background-position: center top; background-size: 100%; }


/*PC背景*/
	@media screen and (min-width:768px){
    .Area_bgtop_1 { height: 100%; overflow: hidden;}
    .Area_bgtop_1 .bgtop_ { }
    .Area_bgtop_1 .bgtop_ span { }
    .Area_bgtop_1 .bgtop_1_0  { top:0; opacity: 1;}
    .Area_bgtop_1 .bgtop_1_0 span { background-image: url(bgtop_1_0.jpg?t=1752819741657); background-position: top center; background-repeat: no-repeat;} 
    .Area_bgtop_1 .bgtop_1_1  { top:0; opacity: 1;}
    .Area_bgtop_1 .bgtop_1_1 span { background-image: url(bgtop_1_1.png?t=1752819741657); background-position: top center; background-repeat: no-repeat;}  
    .Area_bgtop_1 .bgtop_1_2  { top:0; opacity: 1;}
    .Area_bgtop_1 .bgtop_1_2 span { background-image: url(bgtop_1_2.png?t=1752819741657); background-position: top center; background-repeat: no-repeat; }   
 
        
        
    .Area_bgtop_2 { height: 100%; }
    .Area_bgtop_2 .bgtop_ { }
    .Area_bgtop_2 .bgtop_ span { }  
    .Area_bgtop_2 .bgtop_2_1  { top: 0; opacity: 1;}
    .Area_bgtop_2 .bgtop_2_1 span { background: url(bgtop_2_1.png?t=1752819741657); background-position: top center; background-repeat: no-repeat;}  
    .Area_bgtop_2 .bgtop_2_2  { top: 0; opacity: 1;}
    .Area_bgtop_2 .bgtop_2_2 span { background: url(bgtop_2_2.png?t=1752819741657); background-position: top center; background-repeat: no-repeat;}     
    .Area_bgtop_2 .bgtop_2_3  { top: 0; opacity: 1;}
    .Area_bgtop_2 .bgtop_2_3 span { background: url(bgtop_2_3.png?t=1752819741657); background-position: bottom center; background-repeat: no-repeat;}   
        
    .Area_bgtop_3 { height: 100%; }
    .Area_bgtop_3 .bgtop_ { }
    .Area_bgtop_3 .bgtop_ span { }   
    .Area_bgtop_3 .bgtop_3_1  { top: 230px; opacity: 1; height: 363px}
    .Area_bgtop_3 .bgtop_3_1 span { background: url(bgtop_3_1.png?t=1752819741657); background-position: top center; background-repeat: no-repeat;}  
    .Area_bgtop_3 .bgtop_3_2  { top: 0; opacity: 1; height: 632px}
    .Area_bgtop_3 .bgtop_3_2 span { background: url(bgtop_3_2.png?t=1752819741657); background-position: top center; background-repeat: no-repeat;}   
    .Area_bgtop_3 .bgtop_3_3  { top: 0; opacity: 1; height: 108vh}
    .Area_bgtop_3 .bgtop_3_3 span { background: url(bgtop_3_3.jpg?t=1752819741657); background-position: bottom center; background-repeat: no-repeat;}  
    .Area_bgtop_3 .bgtop_3_4  { top: 0; opacity: 1; height: 632px}
    .Area_bgtop_3 .bgtop_3_4 span { background: url(bgtop_3_2.png?t=1752819741657); background-position: top center; background-repeat: no-repeat;}    
        
    .Area_bgtop_fixed { position: fixed; }

   }

/*Phone背景*/
  @media screen and (max-width:767px){
    .m_Area_bgtop_1 .m_bgtop_ span { position: absolute; display: block; width: 100%;}
    .m_Area_bgtop_1 .m_bgtop_1_0 { width: 100%;  padding-bottom: 0; position: absolute; top: 0vw; } 
    .m_Area_bgtop_1 .m_bgtop_1_0 span { background-image: url(m_bgtop_1_0.jpg?t=1752819741657); background-repeat: no-repeat; background-position: top center;}
    .m_Area_bgtop_1 .m_bgtop_1_1 { width: 100%;  padding-bottom: 0; position: absolute; top: 0vw; } 
    .m_Area_bgtop_1 .m_bgtop_1_1 span { background-image: url(m_bgtop_1_1.png?t=1752819741657); background-repeat: no-repeat; background-position: top center;}
    .m_Area_bgtop_1 .m_bgtop_1_2 { width: 100%;  padding-bottom: 0; position: absolute; top: 0vw; } 
    .m_Area_bgtop_1 .m_bgtop_1_2 span { background-image: url(m_bgtop_1_2.png?t=1752819741657); background-repeat: no-repeat; background-position: top center;}
    .m_Area_bgtop_1 .m_bgtop_1_3 { width: 100%;  padding-bottom: 0; position: absolute; top: 0vw; height: 100vw} 
    .m_Area_bgtop_1 .m_bgtop_1_3 span { background-image: url(m_bgtop_1_3.png?t=1752819741657); background-repeat: no-repeat; background-position: top center;} 
    .m_Area_bgtop_1 .m_bgtop_1_4 { width: 100%;  padding-bottom: 0; position: absolute; top: 0vw; height: 100vw} 
    .m_Area_bgtop_1 .m_bgtop_1_4 span { background-image: url(m_bgtop_1_4.png?t=1752819741657); background-repeat: no-repeat; background-position: top center;} 
      
    .m_Area_bgtop_2 .m_bgtop_ span { position: absolute; display: block; width: 100%;} 
    .m_Area_bgtop_2 .m_bgtop_2_1 { width: 100%;  padding-bottom: 0; position: absolute; top: 0vw; } 
    .m_Area_bgtop_2 .m_bgtop_2_1 span { background-image: url(m_bgtop_2_1.png?t=1752819741657); background-repeat: no-repeat; background-position: top center;}
    .m_Area_bgtop_2 .m_bgtop_2_2 { width: 100%;  padding-bottom: 0; position: absolute; top: 0vw; } 
    .m_Area_bgtop_2 .m_bgtop_2_2 span { background-image: url(m_bgtop_2_2.png?t=1752819741657); background-repeat: no-repeat; background-position: top center;} 
      
    .m_Area_bgtop_3 .m_bgtop_ span { position: absolute; display: block; width: 100%;  } 
    .m_Area_bgtop_3 .m_bgtop_3_1 { width: 100%;  padding-bottom: 0; position: absolute; top: 0vw; } 
    .m_Area_bgtop_3 .m_bgtop_3_1 span { background-image: url(m_bgtop_3_1.png?t=1752819741657); background-repeat: no-repeat; background-position: top center;}
    .m_Area_bgtop_3 .m_bgtop_3_2 { width: 100%;  padding-bottom: 0; position: absolute; top: -10vw; height: 20vw } 
    .m_Area_bgtop_3 .m_bgtop_3_2 span { background-image: url(m_bgtop_3_2.png?t=1752819741657); background-repeat: no-repeat; background-position: top center;}
    .m_Area_bgtop_3 .m_bgtop_3_3 { width: 100%;  padding-bottom: 0; position: absolute; top: 0vw; height: 3vw } 
    .m_Area_bgtop_3 .m_bgtop_3_3 span { background-image: url(m_bgtop_3_3.jpg?t=1752819741657); background-repeat: no-repeat; background-position: bottom center;}
    .m_Area_bgtop_3 .m_bgtop_3_4 { width: 100%;  padding-bottom: 0; position: absolute; top: 0vw; height: 20vw } 
    .m_Area_bgtop_3 .m_bgtop_3_4 span { background-image: url(m_bgtop_3_2.png?t=1752819741657); background-repeat: no-repeat; background-position: top center;}
    .m_Area_bgtop_fixed { position: fixed; }

  }




/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; font-size: 16px}
.Area a { display:block;} 
.Area1220 { margin:0 auto; width:1220px;}
.Area960 { margin:0 auto; width:960px;}
.Areabottom { margin-bottom:80px}
    @media screen and (min-width:768px){
        .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: translateY(-5px);
     -moz-transform: translateY(-5px);
      -ms-transform: translateY(-5px);
       -o-transform: translateY(-5px);
          transform: translateY(-5px);}
	}
	@media screen and (max-width:767px){
		.Area1220 { width:100%;}
		.Area960 { width:100%;}
        .Area96p { width: 96% }
        .Areabottom { margin-bottom:5vw }
	}
 

/*版頭*/
.Area_top { height: 568px; }
.Area_top .momologo { z-index:2; position: absolute; top: 25px; left:514px;}
.Area_top .momologo a { display:block; width:201px; height:23px; background: url(momo_logo.png?t=1752819741657) no-repeat;}
.Area_top .momologo a:hover { transform: translateY(-5px); transition: all 0.4s ease }
.Area_top .btn_ { z-index: 5; position: absolute; }
.Area_top .btn_.btn_list { top: 400px;left:1110px;}
.Area_top .btn_.btn_more { top: 400px;left:1000px;}
.Area_top .btn_ a { display: block; }
.Area_top .title { position: absolute; top: 300px; left: 62px}
	@media screen and (max-width:767px){
		.Area_top { height: 72vw;top:5vw;}
		.Area_top .momologo { display:none;}
    .Area_top .btn_.btn_more { top:50vw; left: 84vw; width: 16vw;}
    .Area_top .btn_.btn_list { top:62vw; left: 84vw; width: 16vw;}
    .Area_top .title { position: absolute; top: 24vw; left: 11vw;width:80% ;}
	}

.Area_game h3 { margin: 0; padding: 0; color: #fff; font-size: 24px; line-height: 48px}
.Area_game h3 span {  color: #1d97d7; }
.Area_game h4 { margin: 0; padding: 0; color: #84d6ff; font-size: 24px; line-height: 40px }
	@media screen and (max-width:767px){
    		.Area_game h3 { font-size: 4vw; line-height: 7vw }
        .Area_game h4 { font-size: 3.6vw; line-height: 7vw }
	}

.Area01 { padding: 30px 0 0 0; height: 844px; box-sizing: border-box}
.Area01 .box_game  { margin: 40px auto 10px; position:relative; width: 872px }
.Area01 .box_game a {position: relative;margin-top: -2.2rem;}
.Area01 .box_game .bg { position: relative; top: 0; left: 0; z-index: -1}
	@media screen and (max-width:767px){
        .Area01 { padding: 5vw 0 0 0; height: 120vw; }
    		.Area01 .box_game { margin: 5vw auto 2vw; width: 90% }
	    	.Area01 .box_game a {position: relative;margin-top: -3vw;}
	    	.Area01 .box_game a img {width: 60%; }
        .Area01 h4 { font-size: 3.8vw; line-height: 6vw }
	}

.Area02 { height: 632px; box-sizing: border-box; }
.Area02 .pd_box { display: flex; margin: 20px 0; padding: 0; list-style: none; justify-content: space-evenly; flex-wrap: wrap; }
	@media screen and (max-width:767px){
    .Area02 { height: 160vw; }
		.Area02 .pd_box { margin: 3vw auto; width: 80%; justify-content: space-between; }
    .Area02 .pd_box li { width: 48%; margin-bottom: 4vw }
	}

.Area03 { box-sizing: border-box ;margin-bottom:100px ;}
.Area03.Area_game h4 { color: #fff; padding: 0 181px }
.Area03 .Area03_img{
  padding: 0 0 2% 0;
  margin-top: 2%; 

}
	@media screen and (max-width:767px){
    .Area03 { box-sizing: border-box ;margin-bottom:10vw  }
		.Area03.Area_game h4 { padding: 0 5%; text-align: center }
	}

.Area04 { height: 765px; box-sizing: border-box }
.Area04 .PD_layout { overflow: hidden; padding-top: 10px }
.Area04 .PD_layout ul { display: flex; grid-gap: 0; padding: 0;  }
	@media screen and (max-width:767px){
      .Area04 { height: 100vw; }
      .Area04 .PD_layout {  padding-top: 0; margin: 0 2% }
      .Area04 .PD_layout ul {   }
	}


.PD_layout .PD p { color: #004994 }
.PD_layout[data-pd-btn] .PD_btn { background-color: #ff6b00; background-image: repeating-linear-gradient(45deg, #ff6b00 -2%, #ff6b00 120%);}
.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more { background-color: #6a6a6a; }
.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more b { color: #FFF }
.PD_layout[data-pd-btn][data-pd-btn-pdgo][data-pd-btn-more] .PD_btn.more i { border-color: #FFF;}


.Area03 .Area03_title{
  color: #adfaff !important;
  background: linear-gradient(90deg,#01082000 0%,#01082000 25%,#010820c9 35%,#010820c9 65%,#01082000 75%, #01082000 100%);
  font-size: 36px;
  font-weight: 900;
  padding: 1% 0 !important;
  margin: 1rem 0 1.1rem 0;
}
/* 超強卡司 */
.content-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin: 0 auto;
  font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica;
  @media screen and (max-width:767px) {
    gap: 12px;
  }

  img{
    @media screen and (max-width:767px) {
      width: 40%;
    }
  }

  h5{
    /* background-color: #219fd3; */
    color: #adfaff;
    padding: 2% 4%;
    /* margin: 0 0 1rem 0; */
    width: auto;
    display: inline;
    font-size: 28px;
    font-weight: 800;
    font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica;
    @media screen and (max-width:767px) {
      font-size: 26px;
    }
  }

  ul{
    background-color: #adfaffdc;
    background: linear-gradient(145deg,#0f297ece,#77cdffcb );
    border: 2px #192facd7 solid;
    border-radius: 4px;
    width: 33%;
    list-style-type: none;
    margin: 0;
    padding: 24px 12px 12px;
    min-height: 220px;
    box-sizing: border-box;
    @media screen and (max-width:767px) {
      width: 80%;
    }
    li:first-child{
      margin-bottom: 1rem;
    }
    li{
      color: #fff;
      font-size: 24px;
      font-weight: 900;
      font-family: "微軟正黑體", "Microsoft JhengHei", Helvetica;
      margin-bottom: .2rem;
      @media screen and (max-width:767px) {
        font-size: 20px;
      }
    }
  }
}



                  
/*Youtube影片浮層css*/
@media screen and (min-width:768px){
  .box_youtube {  margin: 50px auto 70px; overflow: hidden ; width: 636px; border-radius: 20px; }
}
@media screen and (max-width:767px){
  .box_youtube { margin: 5vw auto 10vw; overflow: hidden ;width: 84%; border-radius: 10px;}
}

.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: 10px; aspect-ratio: 1.777777;}
@media screen and (max-width:767px) {
  .bigpicture h3 { font-size: 3vw; left: 1.2em;}
}
          



/*活動說明*/
.box_list { text-align: justify; margin: 0 auto; color: #4b4b4b;}
.box_list h3 { font-size: 1.25em; margin-bottom: 0.75em; padding-left: 0.5em; }
.box_list ol { margin: 0; padding: 0 1em 0.5em 0.5em; /*padding-left: 1em;*/ }
.box_list ul { margin: 0; padding: 0 1em 0.5em 0.5em; list-style: none; }
.box_list li { margin: 0; padding: 0; margin-bottom: 1em; }
.box_list li > ul { padding: 0.5em 0 0 1.5em; list-style: disc }
.box_list li > ol { padding: 0.5em 0 0 1.5em; }
.box_list li > ul > li,
.box_list li > ol > li { margin-bottom: 0.5em; }
.box_list li img { margin: 0.2em 0; width: 70%; max-width: 480px; box-shadow: 0em 0.3em 1.5em rgba(0,0,0,0.1); }
.box_list table { border-radius: 0; width: 100%; margin: 0 auto ; border-collapse: collapse; text-align: center; line-height: 1.2; overflow: hidden; margin-top: 0.5em}
.box_list th { padding: 0.4em 0.2em; border: solid 1px #2d2d2d; color: #fff; background-color: #2d2d2d; }
.box_list td { padding: 0.4em 0.2em; border: solid 1px #2d2d2d; color: #2d2d2d; background-color: rgba(255,255,255,1); }
    @media screen and (min-width:768px){
      .box_list { width: 85%; font-size: 1.5em; padding: 0%;}
      .box_list table { font-size: 1em; }
    }
    @media screen and (max-width:767px){
      .box_list { width: 95%; font-size: 0.875em; padding: 0;}
      .box_list table { font-size: 1em; }
    }


    .pdx8 .PD_layout-D1_03 .PD_slide {border-radius: 10em;background-color: #004994;}
    .pdx8 .PD_layout-D1_03 ul::before {position: relative;content: "大家都在買：";font-weight: 900;color: #ffffff;}
@media screen and ( min-width:768px) {
    .pdx8 { margin:0 auto 70px;height:auto ; }
    .pdx8 .PD_layout1 ul { margin-bottom:10px ;}
    .pdx8 .PD_layout1 li { border: solid 2px #47c6f5;}
    
    .pdx8 .Area_swiper_box .PD_layout {position: static;margin: 10px 30px 35px;}
    .pdx8 .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {top:378px ;}
      }
@media screen and ( max-width:767px) {
        .pdx8 { width: 100%;margin:0 auto 10vw;height:auto ; }
        .pdx8 .PD_layout1 li { border: solid 0.5vw #47c6f5;}
        .pdx8 .Area_swiper_box .PD_layout {position: static;margin: 10px 30px 35px;}
        .pdx8 .swiper-container-horizontal>.swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {top:64vw ;}
      }



.guessyoulike .PD_layout-btn li h3 { color: #fff;background: #004994!important;}  


.edm_notice{ color:#ffffff!important;}
@media screen and (min-width:768px){
   .edm_notice{z-index:100 ;position: relative; text-align:center; padding:10px 10px 100px 10px; font:16px/24px Helvetica;}
      } 	
    @media screen and (max-width:767px){
      .edm_notice{z-index:100 ;position: relative; text-align:center; padding:0vw 5vw 10vw ; font:3.2vw/5vw Helvetica;}
      .edm_notice .apple_notice{  padding:2vw 5vw 2vw ; }
      }