@charset "utf-8";

@font-face {
  font-family: Microsoft JhengHei;
  unicode-range: U+7db0, U+78A7, U+7B75;
  font-style: normal;
  font-weight: normal;
  src: local(Microsoft JhengHei);
}

/*全BOX版面*/
.WRAPPER { position: relative; display:block; margin: 0 auto; padding: 0; width:100%;  min-width:1220px; overflow:hidden; font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { width:100%; border:0px; vertical-align:top;}
.WRAPPER a { text-decoration:none;}
		@media screen and (max-width:767px){
		.WRAPPER { min-width: inherit;; background-size: 100%;}
			}


/*PC背景*/
.Area_bgtop {z-index: 0; position: absolute; top: 0; 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:1000px}
.Area_bgtop .bgtop_ span{position:absolute;display:block;width:100%;height:100%;background-position:center top}
	/*PC背景*/
		@media screen and (min-width:768px){
			.Area_bgtop_1 { height: 780px; overflow: hidden;}
			.Area_bgtop_1 .bgtop_ { opacity: 1;}
			.Area_bgtop_1 .bgtop_ span { height: 100%; }
			.Area_bgtop_1 .bgtop_1  { width:100%; height: 700px; top: 0; opacity: 1;}
			.Area_bgtop_1 .bgtop_1 span { background-image: url(bgtop_1.png?t=1761912231905); background-position: top center; background-repeat: no-repeat;}
	    }



/*MB背景*/
.m_Area_bgtop { z-index:0; position:absolute;top:0vw;left:0;width:100%; height:100%; pointer-events:none; }
.m_Area_bgtop .m_bgtop_ { position:absolute;top:0; left:0; width:100%; height:0; padding-bottom:100%; }
.m_Area_bgtop .m_bgtop_ span { position:absolute; display:block; width:100%;height:100%; padding-bottom:100%; overflow:hidden; background:center top no-repeat; background-size:100%;}
		@media screen and (max-width: 767px){
			.m_bgtop_1 span { z-index:-1; background-image:url( m_bgtop_1.png?t=1761912231905 ) }
		}



/*區塊_all*/
.Area { position: relative; margin:0 auto; padding:0; border-radius:0; text-align:center; }
/*.Area a { display:block;} */
.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;}
.Area960 { margin:0 auto; width:960px;}
	@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;}
	}

/*共用*/

body{ margin:0; padding:0;background-color: #87b829;}

table{	border-collapse: collapse;	margin:0px auto;font-family: "Century Gothic","Microsoft JhengHei" ;}
th{	border:1px solid#FFFFFF;height: 30px;text-align: center;}
td{	border:1px solid#FFFFFF;height: 30px;text-align: center;}

.space { margin-bottom:80px;}
	@media screen and (max-width:767px){
		.space {margin-bottom: 10vw;}
		.m_Area96p {width:96%} 
	}
	
/* txt */
/*區標(線上入稿)*/
@media screen and (min-width:767px){
  .txt {position: relative;top:0;background-image:url("txt_bg.png?t=1761912231905"); background-size: 100%;width: 960px; height: 115px;overflow: hidden;background-repeat:no-repeat;padding-top: 80px;margin: 0 auto;}
  .txt .PD_layout ul {padding: 0;margin: 0;list-style: none;height:100%!important;}
  .txt .PD_layout ul li { background-color: transparent; pointer-events: none;}
  .txt .PD_layout ul li h5 {position: relative;z-index: 1;font:52px/45px Arial, "Noto Sans TC", "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;float: left;color: #fff;width: 100%;margin: 0 auto;padding: 0;font-weight: bolder;height:80px;}	
  .warningTxt h3 {font-weight:normal;margin-top:0px;color: #fff;}
  }
  @media screen and (max-width:767px){
  .txt {position: relative;width: 100%;height:26vw;margin-bottom: 0vw;background-image:url(txt_bg.png?t=1761912231905);background-repeat: no-repeat; background-size: 100%;z-index: 20;overflow: hidden;}	
  .txt .PD_layout ul {margin-top: 0vw;height: 15vw!important;list-style: none;}
  .txt .PD_layout ul li { background-color: transparent; pointer-events: none;}
  .txt .PD_layout ul li h5 {position: absolute;top:7.6vw;left: 1vw;margin: 0vw;padding: 0vw;width: 100%;height: 8vw;font:5.7vw/5.7vw  Arial, "Noto Sans TC", "Century Gothic", "Microsoft JhengHei", system-ui, Helvetica;text-align:center;color:#fff;letter-spacing: 0vw;overflow: hidden;font-weight: bolder;/*text-shadow: 0px 0px 5px #000;*/}
  .warningTxt h3 {font-weight:normal;margin: 1vw 1vw 1vw 1vw;color: #fff;}
  }


/*版頭*/
.Area_top {position: relative; height: 650px;}
.Area_top .box{position:absolute;display: flex; margin: 0 auto 0;}
    .Area_top .box{ height: 500px; width:90%;top:55px;right: 310px;margin:0 auto;padding:0; display: flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content: center;}
    .Area_top .box ul li { list-style:none; float:left; width:33.33%;}
    .Area_top .box ul li img{ width:100%;}

    .Area_top .box .date {position:relative;font-size:2em;color:#414141;font-family: "Century Gothic","Microsoft JhengHei";font-weight: bold;}
    .Area_top .box .logo1 {position:relative; width: 28%;padding-bottom: 15px;}
    .Area_top .box .sub {position:relative; width: 45%; }
    .Area_top .box .subFree {position:absolute;font-size:3.5em;top:30px;left:40px;color:#FFF;}
    .Area_top .box .PdTitle {position:relative;font-weight:900;font-size:4.5em;color:#000;font-family:Noto Sans CJK SC, "Microsoft JhengHei", Helvetica;bottom: 10px;}
    .Area_top .box .logo2 { position:relative;  width: 33%;}
    .Area_top .morebtn { z-index:6; position:absolute; top: 30px; right: 190px}
    .Area_top .morebtn img { width: 100%; }
    .Area_top .detailsbtn{position: absolute;top: 30px; right: 100px;z-index: 6;}

	@media screen and (max-width:767px){
    .Area_top {position: relative; height:70vw;}
    .Area_top .box{position:absolute;display: flex; margin: 0 auto 0;}
        .Area_top .box{height:53vw;width:100%;top:3vw;right:20vw;margin:0 auto;padding:0; display: flex;flex-direction:column;flex-wrap:wrap;align-items:center;justify-content: center;}
        .Area_top .box ul li { list-style:none; float:left; width:33.33%;}
        .Area_top .box ul li img{ width:100%;}
    
        .Area_top .box .date {position:relative;font-size:1.5em;color:#414141;font-family: "Century Gothic","Microsoft JhengHei";font-weight: bold;}
        .Area_top .box .logo1 {position:relative; width: 33%;left: -3vw;padding-bottom: 1vw;}
        .Area_top .box .sub {position:relative; width: 53%; }
        .Area_top .box .subFree {position:absolute;font-size:1.8em;top:3vw;left:7vw;color:#FFF;font-weight:800;}
        .Area_top .box .PdTitle {position:relative;font-weight:900;font-size:2.1em;color:#000;font-family:Noto Sans CJK SC, "Microsoft JhengHei", Helvetica;bottom: 4px;left: 5px;}
        .Area_top .box .logo2 { position:relative;  width: 40%;bottom: 1vw;}
        .Area_top .detailsbtn{z-index:6; position:absolute; top: 3vw; right: 3vw;width: 18%;}
        /* .Area_top .morebtn{z-index:6; position:absolute; top: 3vw; right: 3vw;width: 18%;} */
	}



    /*登記活動*/
    .Area_grabgift {width:1000px;font-size: 46px;margin-top:1rem;margin-bottom:3rem;}
    .Area_grabgift .BGbox{overflow:hidden; border-radius: 30px;}
    .Area_grabgift .BGbox .title {background-color:#21b8d8; color:#fff;font-size:2.5rem; padding:8px 0;}
    .Area_grabgift .box {position: relative; display:flex; text-align: left; align-items:flex-start;gap:1.75rem; padding:1rem 3rem 1rem;left:0;right: 0;background:#f5f5f5;margin-inline:auto;border-bottom: 1px solid #ccc;}
    .Area_grabgift .BGbox h3{position: relative; color: #fff;top:10px;}
    .Area_grabgift .BGbox .title img{width: 10%;padding-top:.4rem;}
    .Area_grabgift .pd-info {position: relative;display: flex;flex-direction: column;flex-basis: 53%;}
    .Area_grabgift .pd-img { flex-basis:25%;}
    .Area_grabgift .pd-info .txt01 {color:#302f2f;font-weight: bolder;font-size: 2.5rem;margin-bottom: .5rem;font-family:Noto Sans CJK SC, "Microsoft JhengHei", Helvetica;line-height: 1.2em;letter-spacing: -0.025em;}
    .Area_grabgift .pd-info .txt01 a {position:relative; font-size: 25px;top: -10px;left:0;}
    .Area_grabgift .pd-info .txt02 {color:#555960;font-weight:500;font-size: 2rem;margin-top: 0.5rem;margin-bottom: 0.5rem;font-family:"Century Gothic";}
    .Area_grabgift .pd-info .txt03 {font-size: 25px;font-weight:600;margin-bottom: .5rem;}
    .Area_grabgift .pd-info .btn {width:50%;}
    .Area_grabgift .pd-info .txt_cpNum {position:relative;font-size:1.5rem;font-weight:bold;color: #555960;margin-top: 0.5rem;margin-bottom: 1rem;}
    .Area_grabgift .pd-info .pd-info-notice{position: relative;font-size:1.5rem;color: #555960;list-style:none;}


        @media screen and (max-width:767px){
      .Area_grabgift {width:96%;font-size: 39px;margin-top:0;margin-bottom:0.5rem;}
		  .Area_grabgift .BGbox{border-radius:3vw;}
    	.Area_grabgift .BGbox .title { background-color:#21b8d8; color:#fff;font-size:1.5rem;padding-block:0.25rem;}
          .Area_grabgift .box {position: relative;height:auto;display: flex;text-align: left;align-items:flex-start;gap: 0.6rem;padding: 0.3rem;;left:0; background:#f5f5f5;border-bottom: 1px solid #ccc;} 
          .Area_grabgift .BGbox h3{position: relative; color: #fff;top:0;font-size: 33px;transform: scale(0.8);}
          .Area_grabgift .BGbox .title img{width: 16%;padding-top:.2rem;}
		  .Area_grabgift .pd-img { flex-basis:25%;}
		  .Area_grabgift .pd-info {position: relative;display: flex;flex-direction: column; flex-basis:67%;}
          .Area_grabgift .pd-info .txt01 {color:#302f2f;font-weight: bolder;font-size: 1.2rem;margin-bottom:0;letter-spacing:-0.025em;line-height: 1em;}
		  .Area_grabgift .pd-info .txt01 a {position:relative; font-size:1.2rem; top: inherit;}
          .Area_grabgift .pd-info .txt02 {color:#555960;font-size: 1.2rem;margin-top: 0.275rem;margin-bottom: 0.275rem;}
          .Area_grabgift .pd-info .txt03 {font-size: 16px;font-weight:900;font-size: 1rem;margin-top: 0.275rem;margin-bottom: 0.275rem;}
          .Area_grabgift .pd-info .btn {width:40%;height:11vw;}
          .Area_grabgift .pd-info .txt_cpNum {position:relative;font-size:1rem;font-weight:bold;color: #555960;line-height: 1rem; margin-top: 0rem;margin-bottom: 0rem;}
          .Area_grabgift .pd-info .pd-info-notice{position:relative;font-size:0.82rem;color: #555960;list-style:none;}
			/*好康2*/
			.Area_grabgift2 .pd-info .txt02 { margin-bottom: -.3em;}
      .Area_grabgift2 .pd-info .btn {padding:1vw 0vw 0vw 0vw;}
			.Area_grabgift .pd-info .pd-info-notice { font-size:0.9rem; letter-spacing: -.02em;}
        } 

    /*活動說明*/
    .Area_grabgift .box_list { margin-top: 1em;}
    .Area_grabgift .box_list a { display: inline; text-decoration: underline; color: #942a0e;}


.Area_bgfooter { color: #fff; font-family: "Century Gothic","Microsoft JhengHei"; font-size: 16px;}
.Area_bgfooter .box_list { text-align: justify;}
.Area_bgfooter .box { width: 90%; margin: 0 auto;  }
.Area_bgfooter .box_list h3 { font-size: 2rem; margin-bottom: 0.25em;line-height:140%;}
.Area_bgfooter .box_list ol { margin: 0; padding: 0; padding-left: 1em;}
.Area_bgfooter .box_list ul { margin: 0; padding: 0; list-style: none;}
.Area_bgfooter .box_list li { margin: 0; padding: 0; margin-bottom: 1.75rem;line-height:150%;}
.Area_bgfooter .box_list li img { margin: 0.25em 0.25em; width:60px;box-shadow:none;}
    @media screen and (min-width:768px){
      .Area_bgfooter .box .box_list { font-size: 1.5em; padding: 0%;}
    }
    @media screen and (max-width:767px){
      .Area_bgfooter .box .box_list { font-size: 0.875em; padding: 0;}
	  .Area_bgfooter .box_list h3 { font-size: 1rem; margin-bottom: 0.25em;line-height:140%;}
      .Area_bgfooter .box_list li { margin: 0; padding: 0; margin-bottom: .875rem;line-height:150%;}
	  .Area_bgfooter .box_list li img { margin: 0.25em 0.25em; width:12.5%;box-shadow:none;}
    }


/*分享浮層*/
.floatBox { position:relative; margin:2% auto; padding: 2% 0; width: 700px; height:auto; background-color:rgba(0,0,0,0.8); text-align:center; position:relative; border-radius:20px;}
.floatBox img { width:100%; height:auto;}
.floatBox .go_bt {
  -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;}
.floatBox .go_bt:hover { filter: brightness(120%);
  -webkit-transform:translateY(-6px);
     -moz-transform:translateY(-6px);
      -ms-transform:translateY(-6px);
       -o-transform:translateY(-6px);
          transform:translateY(-6px);}
.floatBox .closeButton a { display:block; cursor:pointer; position:absolute; top:-20px; right:-20px; width:40px; height:40px; border-radius:50%; border:solid 2px #999999; font:bold 40px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none; z-index:2}
.floatBox .closeButton:hover {background-color:#666; text-decoration:none;}
.floatBox .closeButton:hover {background-color:#666; text-decoration:none;}
.floatBox .title  { display:inline-block; margin:0 0 10px 0; border-bottom:1px solid #ffd800; font:bold 36px/1.5em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;  color:#ffd800; text-align:center}
.floatBox .box_ { margin:0 auto; width:90%;}
.floatBox .box_:after { content: ""; display:block; clear:both;}
.floatBox .box_btn { margin:20px auto 0; width: 80%;}
.floatBox .box_btn a { display:block; margin:3% 0;}
.floatBox .box_btn img { width:100%;}
.floatBox .box_btn .btn { margin:0 auto; width:60%;}
.floatBox .box_btn2 a { float:left; margin:0 1%; width:48%;}
  @media screen and (max-width:767px){
    .floatBox { padding:5% 0; width:90%; height: auto;}
    .floatBox .closeButton a {display:block; position:absolute; top:-15px; right:-15px; width:30px; height:30px; border-radius:50%; border:solid 2px #999999; font:bold 30px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none; z-index:2}
    .floatBox .closeButton:hover {background-color:#666; text-decoration:none}
    .floatBox .title  { margin:0 5% 3vw; font-size: 5vw; line-height:2rem;}
    .floatBox .box_btn { margin:2% auto 0;}
    .floatBox .box_btn .btn { margin:0 auto; width:80%;}
  }



/*好友進度查詢*/
.refArea { width:700px; position:relative; display:block; margin: 0 auto; padding:0px; height: auto; background-color:rgba(0,0,0,0.8); border-radius:20px;}
.refArea .closeBN a { z-index:2; position:absolute; top:-20px; right:-20px; display:block; width:40px; height:40px; border-radius:50%; border:solid 2px #999999; font:bold 40px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5);text-decoration: none;}
.refArea .closeBN a:hover { background-color:#666; text-decoration:none}
.refArea .title  { margin:0 50px 10px; border-bottom:1px solid #ffd800; font:bold 45px/2em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;  color:#ffd800; text-align:center}
.refArea .title2 { margin:20px auto 0px; font:bold 28px/1em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: 0.1em;  color:#fff; text-align:center}
.refArea .title3 { margin-top:10px; font:bold 18px/1em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: 0.1em;  color:#fff; text-align:center}
.refArea .ref_Date ul { margin: 0 auto; padding: 10px 50px;}
.refArea .ref_Date li { display:inline-block; margin:5px; padding:0px; width:70px; height:70px;border-radius:50%; text-shadow:rgba(0%,0%,0%,0.15) 1px 1px; color:#fff; letter-spacing: -0.05em; text-align:center; background-color:#979797;text-align:center; box-shadow: 0px 0px 3px 3px rgba(0%,0%,0%,0.15),0px 0px 0px 5px rgba(100%,100%,100%,0.1) inset;}
.refArea .ref_Date li .month {font:bold 20px/1.5em "Century Gothic"; margin: 5px auto 0 auto; border-bottom:#FFF solid 1px; width:80%}
.refArea .ref_Date li .date {font:bold 20px/1em "Century Gothic"; margin:0; margin-top:4px}
.refArea .ref_Date li.opendate { background-color:#8D0000; box-shadow: 0px 0px 3px 3px rgba(0%,0%,0%,0.15),0px 0px 0px 5px rgba(100%,100%,100%,0.1) inset;color:#fff;  }
.refArea .ref_List table { margin:0 auto; padding: 10px 0;}
.refArea .ref_List .table2 {font:bold 20px/1.2em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em; color:#FFF; text-align:center; background-color:#999}
.refArea .ref_List .table3 {font:bold 20px/1.2em "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: 0.0001em; color:#000; text-align:center; background-color:#FFF}
.refArea .ref_List table td,
.refArea .ref_List table td { border: 1px solid #340d4d; font: bold 20px/1.5em "微軟正黑體", "Microsoft JhengHei", "Century Gothic";}
.refArea .ref_List .txtsmall { padding:40px; padding-top:10px; font: 20px/18px "微軟正黑體", "Microsoft JhengHei", "Century Gothic"; color:#fff;  text-align:left;}
  @media screen and (max-width:767px){
    .refArea { width:90%;}
    .refArea .closeBN a { top:-15px; right:-15px; width:30px; height:30px; font-size:30px;}
    .refArea .title  { margin:0 5%; font-size:30px;}
    .refArea .title2 { margin:10px auto 0px; font-size:20px; }
    .refArea .title3 { margin:10px auto 0px; font-size:14px; }
    .refArea .ref_Date ul { margin:0 auto; padding: 10px 20px 20px;}
    .refArea .ref_Date li { margin:3px; width:40px; height:40px;}
    .refArea .ref_Date li .month { font-size:12px; line-height:1.3em; margin-top:4px;}
    .refArea .ref_Date li .date { margin-top:2px; font-size:12px;}
    .refArea .ref_List table { }
    .refArea .ref_List .table2 { font-size:12px;}
    .refArea .ref_List .table3 { font-size:12px;}
    .refArea .ref_List .table2 td,
    .refArea .ref_List .table3 td { font-size:12px; line-height:1.2em;}
    .refArea .ref_List .txtsmall { padding:20px; padding-top:10px; font-size:16px; line-height:18px; color:#fff;  text-align:left;}
  }

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