@charset "utf-8";
/* CSS Document */
html, body {
    position: relative;
    height: 100%;
    scroll-behavior:smooth;
	scroll-padding-top:60px;
}
@font-face {
  font-family: 'Poppins-SemiBold'; /* 定義字體名稱，稍後在 CSS 中使用 */
  src:url('fonts/Poppins-SemiBold.ttf') format('truetype'); /* 兼容不同瀏覽器 */
  font-weight: 600; /* 字體粗細，根據你的字體檔案設定 */
}
a{color:#343a40;}
.area{background:#fff;width:100%;height:100%;background-image: url("images/Co-branded/kv.jpg");background-position:center;background-size:cover;background-repeat:no-repeat;}
.web-display{position: relative;}
.mobile-display{display: none;}
/*------主視覺------*/
.ALL-bg{padding: 5rem 0 3rem 0;margin:0 auto;}
.Card-kv img{width: 18%;height: auto;position:relative;top:-6px;}
.Co-branded-kv{border-radius: 10px;background: linear-gradient(0deg, rgba(255, 255, 255, 0.00) 0%, rgba(255, 255, 255, 0.90) 36.36%);position: relative;width: 70%;height: auto;padding: 2%;margin: 0 auto;}
.Co-branded-kv img{margin: 0 auto;}
.Feedback-content{color:#FF7F2B;font-size:3.8rem;}
.section_Qualifications{background-color: white;}
.qualifications{position: relative;display: grid;justify-content: space-around;align-items: center;justify-items: center;flex-direction: row;flex-wrap: wrap;align-content: center;padding: 10px;grid-template-columns: 48% 48%;}
.qual-1,.qual-2,.qual-3,.qual-4{width: 100%;height:240px;margin: 10px;background-size: cover;background-position: bottom;position: relative;border-radius:16px;padding: 2.8%;}
.qual-1{background-image: url("images/Co-branded/bg-1.png");}
.qual-2{background-image: url("images/Co-branded/bg-2.png");}
.qual-3{background-image: url("images/Co-branded/bg-3.png");}
.qual-4{background-image: url("images/Co-branded/bg-4.png");}
.qual-bnt{background-color: #01B7AE;border: solid 2px #01B7AE;max-width:30%;padding: 10px;text-align: center;border-radius: 20px;}
.qual-bnt a{color:white;}
.qual-bnt:hover{background-color: white;color:#01B7AE;}
.qual-bnt a:hover{color:#01B7AE;}
.font-Lottery{font-size:4.5em;}
.bnt-flex{display: flex;flex-direction: row;justify-content:center;position: relative;}
.Bnt{position: relative;}
.Bnt{background-color: #FF5441;
    width: 30%;
    padding: 16px 20px;
    border-radius: 50px;
    color: #fff !important;
    border: 2px solid #FF5441;
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    margin: 0 2%;
    font-size: 20px;}
.Bnt:hover{background-color:#fff;padding:16px 20px;border-radius:50px;color:#FF5441!important;border:2px solid #FF5441}
/*--------活動步驟----------*/
.section_Activity-steps{background-color: #EFF9F9;position: relative;}
/*--------活動步驟頁籤切換----------*/
.abgne_tab ul,.abgne_tab li{margin:0;padding:0;list-style:none}
.abgne_tab{width:100%;margin:20px 0}
.abgne_tab ul.tabs{width:100%;height:auto;display:flex;flex-direction:row;justify-content:center}
.abgne_tab ul.tabs li{overflow:hidden;position:relative;margin:5px;padding:10px 15px;background:#cbcecec7;border-radius:10px;text-align:center;width:auto}
.abgne_tab ul.tabs li a{display:block;padding:0 20px;color:#007c7D;text-decoration:none}
.abgne_tab ul.tabs li.active{background:#00a2a3;}
.abgne_tab ul.tabs li.active a{color:#fff;}
.abgne_tab div.tab_container{width:100%;max-width:1080px;margin:20px auto 0px auto;background-color: #FFFFFF;border-radius: 20px;}
.abgne_tab div.tab_container .tab_content{padding:20px}

/*--------步驟內容web----------*/
.st-web{
	display: flex !important;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20px;
    align-items: center;}
.st-web-img{
    width: 100%;
    position: relative;
	margin: 0 auto;
}
.st-web-img img{display: unset;}
.st-web-wd{
    margin: auto 0;
    padding: 0 20px;
	max-width:max-content;
	width: 360px;
	height: 110px;}
.st-web-wd p{text-align: center;}
/*--------moble輪播畫面----------*/
/*.method{
    height: auto;
    position: relative;
    margin: 0 auto;
    padding: 20px 0;
    text-align: center !important;
}
.step{
    height: auto;
    position: relative;
    margin: 0 auto;
    padding: 0;
}*/
.Step-indicator{
	position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 15;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    margin-right: 15%;
    margin-left: 15%;
    list-style: none;
}
.st-way{
	display: flex !important;
    flex-direction: column;
    justify-content: center;
    margin-bottom: 20px;
    align-items: center;
	position: relative;}
.st-way-img{
    width: 100%;
    position: relative;
	margin: 0 auto;
}
.st-way-img img{display: unset;}
.st-way-wd{
    margin: 0 auto;
    padding: 0 20px;
	width: 360px;
	height: 120px;}
.st-way-wd p{text-align: center;}
/*.st-way-wd p:first-child:after{
    content: "";
    background-color:#00a2a3;
    width: 100px;
    height: 1.5px;
    display: block;
    margin-top:1.8rem;
}*/
.section_download{
    background-color:white;
    padding: 0;
    width: 100%;
    height: auto;
    position: relative;
    margin: 0;
}
.download:before{
    content: "";
    width: 2px;
    height: 50px;
    background-color:#00a2a3; 
    display: inline-block;
    margin-right: 20px;
    vertical-align: middle;
}
.download:after{
    content: "";
    width: 2px;
    height: 50px;
    background-color:#00a2a3; 
    display: inline-block;
    margin-left: 20px;
    vertical-align: middle;
}
/*--------活動說明----------*/
.section_Activity-caption{background-color: white;position: relative;}
.Caption{position: relative;background-color: #EFF9F9;width: 100%;height: auto;margin: 0 auto;padding: 2% 4%;text-align: justify;border-radius: 10px;}
/*--------活動QA----------*/
.section_block_Co-branded-QA{background-color: #EFF9F9;position: relative;}
#Co-branded-QA .card{border-radius: 0;background: white;color: #343333;text-align: left !important;padding: 20px;}
#Co-branded-QA .card a {background: white;font-weight: 700;cursor: pointer;border-radius: 0;padding: 15px 0 15px 15px;}
#Co-branded-QA .card a :hover{color:#e4c87e;text-decoration:none}
#Co-branded-QA .card a ::after{font-family:"FontAwesome";content:"\f106";top:17px;float:right;transform:rotate(0deg);-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
#Co-branded-QA .card a span::after{content:""!important;font-family:"Poppins-SemiBold";}
#Co-branded-QA .card a .active ::after{transform:rotate(180deg);-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;transition:all .2s ease-in-out}
/*--------end活動QA----------*/
/*--------注意事項----------*/
.section_notice{background-color:#fff}
.notice-ara{background-color:#fff;padding:10px 0}
.notice-QA{text-align:center}
.notice-QA >a:hover{cursor:pointer;color:#007c7d;text-decoration:none}
.notice-QA >a:after{font-family:"FontAwesome";content:"\f107";width:24px;height:24px;display:inline-block;vertical-align:middle;margin-top:-12px;font-size:24px;font-weight:700;margin-left:5px}
.notice-QA >a[aria-expanded=true]:after{content:"\f106"}
.QA-part{margin:20px 15px;text-align:justify;}
.QA-part ul{list-style-type:decimal-leading-zero;}
.QA-part ul li{font-size:17px;padding-bottom:10px}
/*---------end注意事項----------*/
@media (max-width: 1440px) {

}
@media (max-width: 1200px) {

.ALL-bg{margin: 0 2%;}
.Co-branded-kv{width: 80%;}
}
@media (max-width: 1024px) {
.Card-kv img{width: 22%;}
.Co-branded-kv{width: 90%;}
}

@media (max-width: 900px) {
.Card-kv img{width: 30%;}
.ALL-bg{margin: 0 auto;}
}
@media (max-width: 820px) {
.abgne_tab ul.tabs{flex-direction:column;}	
}

@media (max-width: 768px) {
	.qualifications{grid-template-columns:100%;}
	.qual-1,.qual-2,.qual-3,.qual-4{padding: 6%;margin: 12px 4px;height: auto;}
	.qual-bnt{max-width: 40%;}
	.Co-branded-kv{width: 100%;}
	.bnt-flex{flex-direction: column;}.Bnt{width: 80%;margin: 2% auto;}
	.web-display{position: relative;display: none;}
	.mobile-display{position: relative;display: block;}
	.QA-part{margin:10px;}
}
@media (max-width: 575px) {
.ALL-bg{padding: 3rem 0 2rem 0;}
.Card-kv img{width: 38%;}
.font-Lottery{font-size:3em}
.Co-branded-QA .card a{padding:10px;}
}
@media (max-width: 992px) and (min-width:576px){
}
@media (max-width: 575px){
    .st-way{
       flex-direction: column; 
    }
    .st-way-img{
        width: 100%;
    }
    
}