@charset "UTF-8";
.f12{
	font-size: 12px;
	line-height:140%;
	}
.f14{
	font-size: 14px;
	line-height:140%;
	}
.f15{
	font-size: 15px;
	line-height:140%;
	}
.f16{
	font-size: 16px;
	line-height:140%;
	}
.f18{
	font-size: 18px;
	line-height:140%;
	}
.f20{
	font-size: 20px;
	line-height:140%;
	}
.f20c{
	font-size: 20px;
	line-height:140%;
	font-weight: 500;
	}
.f22{
	font-size: 22px;
	line-height:140%;
	}
.f23{
	font-size: 23px;
	line-height:140%;
	}
.f24{
	font-size: 24px;
	line-height:160%;
	}
.f26{
	font-size: 26px;
	line-height:150%;
	}
.f28{
	font-size: 28px;
	line-height:150%;
	}
.f30{
	font-size: 30px;
	line-height:150%;
	}
.f32{
	font-size: 32px;
	line-height:120%;
	}
.f36{
	font-size: 36px;
	line-height:150%;
	}
.f40{
	font-size: 40px;
	line-height:150%;
	}
.f43{
	font-size: 43px;
	line-height:140%;
	}
.f55{
	font-size: 55px;
	line-height:100%;
	}
.font500 {font-weight: 500;}
.font900 {font-weight: 900;}
.top30 {margin-top: 30px;}
.top40 {margin-top: 40px;}
.top80  {margin-top: 80px;}
.list-disc {
    list-style-type: disc;
}
.list-disc>li {
    list-style-type: disc;
}
.list-decimal {
    list-style-type: decimal;
}
.list-decimal>li {
    list-style-type: decimal;
}
.list-lower-alpha {
    list-style-type: lower-alpha;
}
.list-lower-alpha>li {
    list-style: lower-alpha;
}
.list-decimal, .list-upper-roman, .list-lower-roman, .list-lower-alpha, .list-disc {
    margin: 0;
    padding-left: 20px;
}
.list-decimal>li, .list-upper-roman>li, .list-lower-roman>li, .list-lower-alpha>li, .list-disc>li {
    margin: 3px 0;
    position: relative;
}

.textcenter {text-align: center;}
.textshadow {text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 12px #fff, 0 0 12px #fff, 0 0 12px #fff, 0 0 12px #fff;}

.blue {color: #0066b2;}
.lightblue {color: #15fffc;}
.white {color: #15fffc;}
b {color: #0066b2; }
.goldcolor {color: #834d00;}
.massbg{
background: url("../commonbg/bg.jpg");
background-position: top center;
background-size: 1980px auto;
background-repeat: no-repeat;
background-color: #fff;
padding: 30px 0 30px;;
}
.tophead {text-align: center; margin: 0px 0 15px; color: #bd9300; font-weight: 900;}

.offerbg-s:after{display:table; clear:both; content:""; }
.offerbg-s {background: url("../commonbg/s-bg.png"); background-position: top center; background-repeat: no-repeat; background-size: 1050px auto; padding: 20px 0px; }
.offerbg-g {background: url("../commonbg/g-bg.png"); background-position: top center; background-repeat: no-repeat; background-size: 1050px auto; padding: 20px 0px ; }
.offer-l {width: 150px; float: left; text-align: center; position: relative; }
.offer-head {
  position: absolute;
  top: 50%;
  left: 50%; /* Optional, for horizontal centering */
  transform: translate(-50%, -50%); /* Moves the element back by half its own height/width */
}

.btn-area {text-align: center;}

.btn2 {background: #EBC471;
background: linear-gradient(180deg, rgba(235, 196, 113, 1) 0%, rgba(170, 123, 48, 1) 3%, rgba(155, 109, 42, 1) 19%, rgba(90, 58, 12, 1) 68%, rgba(68, 42, 7, 1) 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 0 20px; height: 40px; line-height: 40px; font-weight: bold; display: inline-block; color: #ffffff; min-width: 100px; text-align: center;  transition: transform .2s; box-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 12px #fff, 0 0 12px #fff, 0 0 12px #fff, 0 0 12px #fff; margin-top: 10px;}
.btn2:hover {transform: scale(1.1); color: #ffffff;}

.btn3 {background: #0066B2;
background: linear-gradient(180deg, rgba(0, 102, 178, 1) 0%, rgba(0, 66, 117, 1) 100%); -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; padding: 0 20px; height: 40px; line-height: 40px; font-weight: bold; display: inline-block; color: #ffffff; min-width: 100px; text-align: center;  transition: transform .2s; box-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 12px #fff, 0 0 12px #fff, 0 0 12px #fff, 0 0 12px #fff; margin-top: 10px;}
.btn3:hover {transform: scale(1.1); color: #ffffff;}


.plus img {width: 30px;}
.silverword img {max-width: 650px; margin-top: -10px;}
.goldword img {max-width: 650px; margin-top: -10px;}

.card-area:after{display:table; clear:both; content:""; }
.card-area {margin-top: 20px;}
.cardoffer {width: 47%; float: left;}
.cardoffermed {width: 6%; float: left; padding-top: 40px;}

.stephead {margin-top: -70px; margin-bottom: 20px;}
.stephead img {max-width: 500px;}
.stepintro {margin: 10px 0;} 



.offer-Remark a {text-decoration: underline;}
/* 所有 ID 以 "tncContent" 開頭的元素一開始都隱藏 */
[id^="tncContent"] {
display: none; 
}

#tncContent, #tncContent2, #tncContent3, #tncContent4{
	display:none;
	margin-top:1em;
	font-size:10px;line-height:14px;
	color:#666666;
}
#tncContent ol, #tncContent2 ol, #tncContent3 ol, #tncContent4 ol {margin-left: 20px;}

.tncTablx {
 margin:6px 0;
 border:1px solid #666666;
 text-align:center;
 border-collapse:collapse;
}
.tncTablx td {
 padding:5px;
 border:1px solid #666666;
 vertical-align: middle;
 text-align: center;
}
.tncTablx .head {
 background-color:#ffffff;
 color:#666666;
}

.tncstyle a {text-decoration: underline;}
.stepbg {background-color: #FFFFFF; border-radius: 20px; padding: 20px 10px 20px;  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4);}
      .step-area {margin-top: 10px; margin-bottom: 20px;}

        .steparea {position:relative; padding-bottom: 0px; padding: 0  10px; height: auto;} 
        .step-top {width: 100%;}
        .mobile-new {width: 50%; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 10px; text-align: center; float: left; text-align: center;}
        .mobe {height: 450px;}
        .word {height: 450px; position: relative; padding-left: 350px; }
        .dec { position: absolute; top: 50%; transform: translateY(-50%); padding-right: 40px;}
        .stepsubhead {color:#0066b2; font-weight: bold;}

        .app-row{
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        }

        .decins {padding-left: 40px;}
        .step-tnc {margin-top: 20px;}
        .steparea button {border: none; background: none;}
        .display-left{position:absolute;top:50%;left:1%;transform:translate(0%,-50%);-ms-transform:translate(-0%,-50%)}
        .display-right{position:absolute;top:50%;right:1%;transform:translate(0%,-50%);-ms-transform:translate(0%,-50%)}
        .display-left img {width: 35px;}
        .display-right img {width: 35px;}

        .circle1 { background-color:#0066b2; border-radius: 50%; color:#fff; width:30px; height:30px; margin:0 5px 0 0;text-align:center; line-height:30px; display:inline-block; font-weight: bold;}

        .list-disc {
            list-style-type: disc;
        }
        .list-disc>li {
            list-style-type: disc;
        }
        .list-decimal {
            list-style-type: decimal;
        }
        .list-decimal>li {
            list-style-type: decimal;
        }
        .list-lower-alpha {
            list-style-type: lower-alpha;
        }
        .list-lower-alpha>li {
            list-style: lower-alpha;
        }
        .list-decimal, .list-upper-roman, .list-lower-roman, .list-lower-alpha, .list-disc {
            margin: 0;
            padding-left: 20px;
        }
        .list-decimal>li, .list-upper-roman>li, .list-lower-roman>li, .list-lower-alpha>li, .list-disc>li {
            margin: 3px 0;
            position: relative;
        }
        
        /* 多图片幻灯片样式 */
        .multi-image-slide .mobile-new {
            position: relative;
        }
        .inner-slide {
            display: none;
        }
        .inner-slide.active {
            display: block;
        }
        .inner-nav {
            text-align: center;
            margin-top: 10px;
        }
        .inner-dot {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #bbb;
            margin: 0 5px;
            cursor: pointer;
        }
        .inner-dot.active {
            background-color: #08457c;
        }



        /* 容器用于定位两层文字 */
        .text-stack {
            position: relative;
            display: inline-block; /* 根据内容调整宽度 */
			font-weight:700;
        }

        /* 下层文字：蓝色 + 外发光 */
        .layer-bottom {
            position: relative;     /* 在普通流中占位，上层用绝对定位覆盖 */
            color: #0066b2;         /* 蓝色文字 */
            /* 外发光：多层蓝色光晕 */
            text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 12px #fff, 0 0 12px #fff, 0 0 12px #fff, 0 0 12px #fff;
            /* 保证上层覆盖时下层文字可见 */
            z-index: 1;
        }
  .layer-bottom-g {
            position: relative;     /* 在普通流中占位，上层用绝对定位覆盖 */
            color: #834d00;         /* 蓝色文字 */
            /* 外发光：多层蓝色光晕 */
            text-shadow: 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 8px #fff, 0 0 12px #fff, 0 0 12px #fff, 0 0 12px #fff, 0 0 12px #fff;
            /* 保证上层覆盖时下层文字可见 */
            z-index: 1;
        }

        /* 上层文字：透明 + 白色扫光 */
.layer-top {
    position: absolute;
    top: 0;
    left: 0;
    color: transparent; /* 文字本身透明，靠背景裁剪显示扫光 */
    
    /* 渐变背景：窄光带 + 半透明白色 */
    background: linear-gradient(
        120deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.8) 48%,   /* 80% 不透明度（即20%透明） */
        rgba(255, 255, 255, 0.8) 52%,
        transparent 60%,
        transparent 100%
    );
    background-size: 200% 100%;
    background-position: 100% 0;
    
    /* 将背景裁剪成文字形状，使白色光带显示为文字内部的扫光 */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 扫光动画：速度放慢到8秒 */
    animation: scan 8s infinite linear;
    
    /* 确保在上层 */
    z-index: 2;
    
    /* 文字内容和下层一致，继承字体大小等 */
    white-space: nowrap; /* 防止换行 */
}

/* 扫光动画 */
@keyframes scan {
    0% {
        background-position: 100% 0; /* 光带在右侧外部 */
    }
    100% {
        background-position: -200% 0; /* 光带移动到左侧外部 */
    }
}



.mobile768 {display: none;}
.desktop768 {display: block;}

.ball-area { }

.ba1 {
    position: relative;
    z-index: 10;  /* 最高层，确保按钮可点 */
}
.ba2 {
    position: relative;
    z-index: 5;   /* 比 ba1 低，不会遮盖 ba1 的按钮区域 */
}
.ba3 {
    position: relative;
    z-index: 5;   /* 根据需要可调整为更低或相同 */
}

.ball-bg1 {position:relative; height: 380px; width: 600px;}
.ball1 {position: absolute; left: -80px; width: 600px; z-index: 2;}
.ball-dec1 {position: absolute; z-index: 6; top: 42%; left: 38%; /* Optional, for horizontal centering */
  transform: translate(-42%, -39%); /* Moves the element back by half its own height/width */}

.ball-bg2 {position:relative; height: 380px; width: 100%; margin-top: -130px;}
.ball2 {position: absolute; right: 0px; width: 600px; z-index: 2;}
.ball-dec2 {position: absolute; z-index: 4; top: 27%; left: 50%; /* Optional, for horizontal centering */}

.ball-bg3 {position:relative; height: 380px; width: 100%; margin-top: -30px;}
.ball3 {position: absolute; left: 50px; width: 600px; z-index: 2;}
.ball-dec3 {position: absolute; z-index: 4; top: 12%;   left: 16%; /* Optional, for horizontal centering */}

.goldcard {margin-top: -10px; margin-bottom: -10px;}
.goldcard img {width: 240px;}



.mobile1023 {display: none;}
.desktop1023 {display: block;}

@media (max-width: 1023px){
.mobile1023 {display: block;}
.desktop1023 {display: none;}
.massbg{
background: url("../commonbg/bg.jpg");
background-position: top center;
background-size: 1680px auto;
background-repeat: no-repeat;
background-color: #fff;
}
.ball-bg2 {position:relative; height: 380px; width: 100%; margin-top: -100px;}
.ball-dec2 {position: absolute; z-index: 4; top: 28%; left: 45%; /* Optional, for horizontal centering */}	
.ball-bg3 {position:relative; height: 380px; width: 100%; margin-top: -20px;}
.ball-dec3{position: absolute; z-index: 4; top: 12%; left: 18%; /* Optional, for horizontal centering */}
}


@media (max-width: 768px){
.tophead {margin-top: 40px;}	
	
.mobile768 {display: block;}
.desktop768 {display: none;}

.massbg{
margin-top: 160px;
background: url("../commonbg/bg.jpg");
background-position: top center;
background-size: 1680px auto;
background-repeat: no-repeat;
background-color: #fff;
margin-top: -30px;
}	

.ball-bg1 {position:relative; height: 380px; width: 100%; margin: 0 auto;}
.ball1 {position: absolute; width: 400px; z-index: 2; top: 50%; left: 50%; /* Optional, for horizontal centering */
  transform: translate(-50%, -50%); /* Moves the element back by half its own height/width */}
.ball-dec1 {position: absolute; z-index: 6; top: 42%; left: 47%; /* Optional, for horizontal centering */}	

.ball-bg2 {position:relative; height: 380px; width: 100%; margin: 0 auto; margin-top: -20px;}	
.ball2 {position: absolute; width: 400px; z-index: 2; top: 50%; left: 50%; /* Optional, for horizontal centering */
  transform: translate(-50%, -50%); /* Moves the element back by half its own height/width */ }
.ball-dec2 {position: absolute; z-index: 4; top: 50%; left: 55%; /* Optional, for horizontal centering */
  transform: translate(-50%, -50%); /* Moves the element back by half its own height/width */ }	
.linehight {line-height: 26px;}
	
.ball-bg3 {position:relative; height: 380px; width: 100%; margin: 0 auto; margin-top: 50px;}
.ball3 {position: absolute; width: 400px; z-index: 2; top: 50%; left: 50%; /* Optional, for horizontal centering */
  transform: translate(-50%, -50%); /* Moves the element back by half its own height/width */}	
.ball-dec3{position: absolute; z-index: 4; top: 65%; left: 50%; /* Optional, for horizontal centering */
  transform: translate(-50%, -50%); /* Moves the element back by half its own height/width */}
	
.offerbg-s {background: url("../commonbg/s-bg_m.png"); background-position: top center; background-repeat: no-repeat; background-size: 800px auto; padding: 20px 0px; }	
.silverword img {max-width: 350px; margin-top: -10px;}	
.cardoffer {width: 100%; float: none;}
.cardoffermed {width: 100%; float: none; padding-top: 0px; margin: 15px 0;}	
.card-area {margin: 30px 0px;}
.goldword img {max-width: 350px;}
.offerbg-g {background: url("../commonbg/g-bg_m.png"); background-position: top center; background-repeat: no-repeat; background-size: 800px auto; padding: 20px 0px; }	
	
.steparea {position:relative; padding-bottom: 0px; padding: 0  30px; height: auto;} 
.step-top {width: 100%;}
.mobile-new {width: 100%; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 10px; text-align: center; float: none;}
.mobe {height: 500px;}
.word {height: auto; position: static; padding-left: 0px; }
.dec { position: static; top: 10px; transform: translateY(0%); padding-right: 0px;}	 
.refword {padding-left: 0px; margin-top: 20px; }	
.picref {background-color: #ffffff; padding: 2px; width: 320px; margin-left: -60px; margin-top: -60px; float: none;}
.stepbg {background-color: #FFFFFF; border-radius: 20px; padding: 20px 10px 20px;  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.4); height: auto;}	
.goldcard img {width: 210px;}
}


@media (max-width: 580px){
.massbg{
background: url("../commonbg/bg.jpg");
background-position: top center;
background-size: 780px auto;
background-repeat: no-repeat;
background-color: #fff;
margin-top: -30px;
}
}
@media (max-width: 550px){

.stephead img {width: 350px;}

}