@charset "utf-8";
/* CSS Document */
html,
body {   
	position: relative;
width: 100%;		
	 font-family: "微軟正黑體","Arial" ;	
	 margin:0 ;
    padding:0;
}
.center{
	margin:0;
  display: flex;
  justify-content: center;
  align-items: center; 
}
/*==================top==================*/
.NS{
    width: 100%;
    top: 0;
    left: 0;
    background-color: #fff;
    z-index: 12;
    padding: 20px;
}
.logo{
    text-align: left;
}
.logo img{
    width:180px;
}
.menu{    
    color: #006ebb;
    text-align:right;
    font-size: 22px;   
    font-weight: bold;
}
.mpx-3{
    display: inline-block;
    padding: 0 15px;
}
.menu a:hover{
    font-weight: bold;
}
.menu a:link, .menu a:hover, .menu a:active, .menu a:visited{
	color:#006ebb;
    text-decoration: none;
}
.bg_yellow{
     background: url("img/bg_yellow.png") top left  repeat-y;
}
.spring{
    position: relative;
    width: 100%;   
}
  /* 基礎樣式 */
.bauble {
  position: relative; /* 確保 z-index 能正常運作 */
  /* 讓放大、濾鏡、陰影在 0.3 秒內平滑漸變 */
  transition: transform 0.3s ease, filter 0.3s ease; 
}

/* 你的互動樣式 */
.bauble:hover, .bauble:focus-visible { 
  transform: scale(1.055); 
  filter: brightness(1.12) saturate(1.05) drop-shadow(0 12px 22px rgba(0, 0, 0, .32)); 
  z-index: 20; 
}
.tree_top{
    background: url("img/top_bg.png") top center  no-repeat; 
    background-size:100% 100%;
}
.top_btn{
    padding-top: 350px;
}
.spring_topM{
    display: none;
}
.treeM_top{
    background: url("img/Mtop_bg.png") top center  no-repeat; 
    background-size:100% 100%;
}
.Mtop_btn{
    padding-top: 400px;
}
.Mtop_btn01{
    margin-top: -50px;
}
.topA{
    background: url("img/Mtop_a.png") top center  no-repeat; 
    background-size:contain;
}
.topB{
    background: url("img/Mtop_b.png") top center  no-repeat; 
    background-size:contain;
}
.topC{
    background: url("img/Mtop_c.png") top center  no-repeat; 
    background-size:contain;
}
.topD{
    background: url("img/Mtop_d.png") top center  no-repeat; 
    background-size:contain;
}
.NS_a{
    position: relative;
}
.NSbtn{
    position: absolute;
    width: 70%;
    margin: 0 18% 0 12%;
    bottom: 70px;
}
.mt-70{
     height: 150px;
     margin-top: 80%;
}
.mt-85{
    height: 180px;
    margin-top: 95%;
}

/*==================box==================*/
.Abg{
    background: url("img/line_bg.png") top left  no-repeat;
    background-size:100% 100%;
}
.line-50{
    margin: 150px auto 20px;
}
.Bbg{
    background: url("img/play_bg.png") top left  no-repeat; 
    background-size:100% 100%;
}
.play-50{
    margin: 30px auto 20px;
}
.Cbg{
    background: url("img/NS_bg.png") top left  no-repeat; 
    background-size:100% 100%;
}
.NS-50{
    margin: 80px auto 180px;
}
.mt-80{
    margin-top: 80px;
}
.notice_title{
    font-size: 40px;
    font-weight: bold;
    color: #FFFFFF;
    position: relative;
    text-align: center;
}
.mt--10{
    margin-top: -8px;
}
.accordion-header {
     width: 100%;
}
.accordion-item {
     background-color: transparent; 
     border: 0; 
}
.accordion-item:first-of-type .accordion-button {
    border-radius: 20px;
}
.accordion-item:last-of-type .accordion-button.collapsed {
   border-radius: 20px;
    background: linear-gradient(to bottom,  #207159 1%,#1a5845 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */     
    color: #fff;
    box-shadow:3px 3px #f7e0b6;
}
.accordion-item:last-of-type {
    border-radius: 20px;
}
.accordion-item:first-of-type {
 border-radius: 20px;
}
.accordion-body {
    padding: 0; 
    opacity: 1;    
    margin-top: -20px;
     width: 100%;
}
.accordion-button{    
 background: #ffc45c;   
    color: #fff;
}
.accordion-button:not(.collapsed) {
    background: linear-gradient(to bottom,  #207159 1%,#1a5845 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */     
    color: #fff;
/*        border:3px solid #fada85;*/
    box-shadow:3px 3px #f7e0b6;
}
.accordion-button:focus {
    background: linear-gradient(to bottom,  #207159 1%,#1a5845 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */  
    color: #fbdcae;
     box-shadow:3px 3px #f7e0b6;
/*    border:3px solid #fada85;*/
/*        box-shadow:none;*/
}
.accordion-button:not(.collapsed) {
background: linear-gradient(to bottom,  #207159 1%,#1a5845 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */  
    color: #fbdcae;
/*        border:3px solid #ffd58b;*/
    box-shadow:3px 3px #f7e0b6;
}
.accordion-button::after {
   margin-left: 5px;
    color: #fff;
    background-image: url("img/download1.png");
    background-size: 100% 100%;
     width: 40px;
    height: 40px;
}
.accordion-button:not(.collapsed)::after {
    background-image: url("img/download1.png");
    background-size: 100% 100%;
    width: 40px;
    height: 40px;
}
/*==================copyright==================*/
.card {
    border: 0px;
    border-radius:0;
}
.btn:hover,.btn:focus,.btn:active ,.btn:visited{
    color: #fff;
    text-decoration: none;
}
.notice {
  width: 100%;
  font-size: 18px;
  font-weight: bold;
  padding: 50px 5% 30px;
  position: relative;
  margin: 18px auto;
  background-color: #fff;  
  border-radius: 20px;
  text-align: justify;
  border: #1b5f4a solid 3px;
}

/* ==========================================
   1. 最外層列表 (一、二、三、)
   ========================================== */
.notice ul {
  counter-reset: outer-num; /* 最外層專用計數器 */
  list-style: none;
  padding-left: 35px; /* 留出「一、」的空間 */
  margin: 0;
}

.notice ul > li {
  display: block;
  position: relative;
  margin-bottom: 15px;
}

/* 最外層中文數字：一、二、三、 */
.notice ul > li::before {
  counter-increment: outer-num;
  content: counter(outer-num, cjk-ideographic) "、";
  position: absolute;
  top: 0;
  left: -35px;
  color: #000;
  font-weight: bold;
}

/* ==========================================
   2. 獎勵資格說明 (1 2 3 4 5)
   ========================================== */
ol.nontypeA {
  counter-reset: main-num;
  list-style: none;
  padding-left: 25px; /* 留出 1 2 3 的空間 */
  margin-top: 10px;
}

ol.nontypeA > li {
  position: relative;
  margin-bottom: 10px;
}

ol.nontypeA > li::before {
  counter-increment: main-num;
  content: counter(main-num); /* 顯示 1, 2, 3, 4, 5 */
  font-size: 18px;
  color: #000;
  font-weight: bold;
  position: absolute;
  top: 0;
  left: -25px;
}

/* ==========================================
   3. 獎勵子項目 (小圓點 •)
   ========================================== */
ol.nontype {
  list-style: none;
  padding-left: 20px;
  margin-top: 5px;
}

ol.nontype li {
  position: relative;
  font-weight: bold; 
  margin-bottom: 5px;
}

ol.nontype li::before {
  content: "•"; /* 純圓點符號，不觸發任何計數器 */
  font-size: 20px;
  color: #b9935d;
  position: absolute;
  top: -2px;
  left: -15px;
}

/* ==========================================
   4. 注意事項內部列表 (1. 2. 3. ... 9.)
   ========================================== */
.notice ul > li:last-child ol {
  counter-reset: notice-num; /* 注意事項獨立計數器 */
  list-style: none;
  padding-left: 28px;
  margin-top: 10px;
}

.notice ul > li:last-child ol > li {
  position: relative;
  margin-bottom: 8px;
  font-weight: bold; 
}

.notice ul > li:last-child ol > li::before {
  counter-increment: notice-num;
  content: counter(notice-num) ".";
  position: absolute;
  left: -28px;
  top: 0;
  color: #000;
  font-size: 18px;
  font-weight: bold;
}
.copyright{
	background-color: #fff;
	color: #006ebb;
	padding-top:20px;
	padding-bottom: 20px;
	font-size: 18px;
	font-weight: bold;
}
.copyright a:link, .copyright a:hover, .copyright a:active, .copyright a:visited{
	color:#006ebb;
    text-decoration: none;
}
/*==================sidebar==================*/

.sidebar{
    display:none;
    right:10px;
    bottom: 70px;
    height:auto;
    z-index: 99; 
}
/*
#btn_gotop {
    cursor: pointer;
}
*/
#btn_gotop1 {
    cursor: pointer;
    font-size: 30px;
    font-weight: bold;
    color: #0f72ba;
/*    color: #195533;*/
    text-align: center;
    font-size: "7em";
}
/*==================modal==================*/

.modal-xmas{
    position: absolute;
    width:100%;
    height:100%;
    top:-25px;
    left: -245px;
        z-index: 9999;
}
.modal-content {    
    border: dotted 5px  #1ead79;
    border-radius: 20px;
    background-color: #d30909;
}
.modal-header {
    display: block;
    text-align: center;
    border-bottom: 0;
}
.modal-title {
    font-size: 2rem;
    font-weight: bold;
    color: #fff;
}
.modal-body{
    font-size: 1.2rem;
    font-weight: 700;
    color: #faf1ab;
}
.modal-footer {
    display: block;
    text-align: center;
    border-top: 0;
}
.btn_sure {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  letter-spacing: 10px;
  padding: 5px 35px 5px 45px;
  border-radius: 40px;
    border: 2px solid #ffea67;
    box-shadow: 1px 1px 5px #ffea67;
background: #066344;
}

.btn_sure:hover,
.btn_sure:active {
  color: #fff;
  text-decoration: none;
}