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


/*架構、通用==========================================================*/
h1, h2, h3, h4, h5{margin: 0; padding: 0;}
.ACSpace{width:90%; max-width: 1140px; margin: 0 auto;}
.ACSpace.stretch{width: 100%; max-width: none;}
.ACContent{width: 100%; max-width: none;}
.stretch .ACContent{width:90%; max-width:1140px; margin: 0 auto;}

/*flex系統*/
.ACFlex{display: flex; align-items: center; justify-content: center;}
.ACFC{flex-direction: column;}
.ACFR{flex-direction: row;}
.ACFac{align-items: center;}
.ACFjc{justify-content: center;}
.ACFas{align-items: start;}
.ACFae{align-items: end;}
.ACFjs{justify-content: start;}
.ACFje{justify-content: end;}
.ACFgap10{gap:10px;}
.ACFgap30{gap:30px;}
.ACFgap50{gap:50px;}

.ACIcon{background: no-repeat center; background-size: contain; aspect-ratio:1;}

.activityBox{display: flex; flex-direction: column; align-items: flex-start; gap:50px;}
.activityBox .aTitle{display: flex; width: auto; font-size: 1.2em; line-height: 1.2em; color: #fff; padding: 10px 30px; border-radius: 100px; background: #000;}
.activityBox .aContnet{padding-left: 20px;}
.activityBox .aList li{margin-bottom: 20px; display: flex; align-items: flex-start; color: #666;}
.activityBox .aList li b{display: block; white-space: nowrap; color: #000; font-weight: 900;}
.activityBox .aList li a{color: #5081A3; margin: 0 3px; text-decoration: underline;}

/*架構、通用==========================================================*/


/*寫心得送禮券*/
.ACHead{background:#000 no-repeat center; background-size: cover;}
.ACHead .ACContent{padding-top: 360px;}
.ACHead .ACContent h1{display: block; border-bottom: 10px solid #fff; color: #fff; font-size: 3em; line-height: 1.2em; font-weight: 200;}
.repoGift{background-image: url("../images/indexPages/BN_share-reward.png");}
.dumbbeelUpgrade{background-image: url("../images/indexPages/BN_grip-update.png");}

.repoGiftInfos{background: url("../images/indexPages/circle.png") no-repeat center; background-size: cover;}
.repoGiftInfos .ACContent{max-width: 600px; padding: 100px 0;}
.ACIcon.claps{width:80%; max-width: 280px; margin: 0 auto; background-image: url("../images/indexPages/icon_claps.svg");}
.ACIcon.update{width:80%; max-width: 360px; margin: 0 auto; background-image: url("../images/indexPages/icon_update.svg");}
.repoGiftInfos h1{color: #fff;}
.repoGiftInfos h2{color: #20ff00; font-size: 3em; line-height: 1.2em; font-weight: 900; margin: 20px 0;}
.repoGiftInfos p{color: #CCC;}

.activityInfos{background: #fff;}
.activityInfos .ACContent{justify-content: space-between; padding: 30px 0;}
.activityInfos .activityBox{width: 60%;}
.activityInfos .tickets{width: 40%;}
.activityInfos .tickets img{width: 100%; height: auto;}

.activityRules.type2{background: #fff;}
.activityRules .ACContent{padding: 50px 0; color: #CCC;}
.activityRules.type2 .ACContent{color: #666;}
.actInWays{display: flex; justify-content: space-between; margin-top: 50px;}
.type2 .actInWays{margin: 0;}
.singleWay{width: 48%; padding:50px 20px; display: flex; flex-direction: column; gap:30px; background: #fff; border-radius: 20px; align-items: center; justify-content: flex-start;}
.type2 .singleWay{border: 1px solid #ccc;}
.singleWay .ACIcon{width: 80%; max-width: 240px; aspect-ratio:5/3;}
.way1{background-image: url("../images/indexPages/icon_way1.svg");}
.way2{background-image: url("../images/indexPages/icon_way2.svg");}
.singleWay .titleGroup{width: 100%; border-bottom: 1px dashed #aaa; text-align: center; padding-bottom: 20px;}
.singleWay .titleGroup h2{color: #5081A3; font-size: 1.8em; line-height: 1.5em; font-weight: 600;}
.singleWay .titleGroup h3{color: #00C68D; font-size: 1.6em; line-height: 1.5em; font-weight: 400;}
.wayInfos li{list-style: disc; margin-bottom: 20px; font-size: 1em; line-height: 1.5em; color: #999; margin-left: 20px;}
.wayInfos li a{text-decoration: underline;}
.waySampleBtn{display: block; padding: 10px 50px; font-size: 1.3em; line-height: 1.2em; color: #666; border:1px solid #666; background: #eee; border-radius: 16px;}

.attention{background: #fff;}
.attention.type2{background: none; color: #ddd;}
.attention .ACContent{padding: 50px 0;}
.attention .aContnet{display: flex; flex-direction: column; gap:30px; align-items: center; width: 100%;}
.attention .numberList{display: block; width: 100%;}
.attention .numberList li{margin-left: 30px; list-style: decimal; margin-bottom: 20px;}
.attention .submitBtn{padding: 20px 60px; background: #5081A3; font-size: 2em; line-height: 1.2em; font-weight: 400; color: #fff; border-radius: 20px; display: flex; align-items: center; gap:10px;}
.ACIcon.write{display: block; width: 40px; background-image: url("../images/indexPages/icon_writeBtn.svg");}

.actService{position: relative; color:#fff;}
.actService::before{content: ""; display: block; width: 50%; height: 100%; position: absolute; z-index: 0; top:0; right: 0; background: #00C68D;}
.actService .ACContent{position: relative; z-index: 1; display: flex; justify-content: space-between;}
.actService .activityBox{padding: 50px 0 150px; width: 49%;}
.actService .wayInfos li{color: #ddd;}
.actService .actContact{width: 50%; border-top:#C7E8C5 20px solid; padding: 30px 20px 150px; display: flex; flex-direction: column; gap:20px; align-items: center;}
.ACIcon.contactDialogue{width: 80%; max-width: 260px; background-image:url("../images/indexPages/icon_welcome_contact.svg");}
.actContact .contactLink{display: flex; gap:15px; font-size: 1.5em; line-height: 1.2em; color: #fff;}
.actContact .contactLink a{color: #fff;}


/*經銷合作*/
.partnerShipHead{background: linear-gradient(to bottom, #666, #000); position: relative;}
.partnerShipHead::before{content: ""; display: block; width: 100%; height: 100%; background: url("../images/partnership_BG_Map.svg") no-repeat center; background-size: contain; opacity: 0.5; z-index: 0; position: absolute; top:0; left: 0;}
.partnerShipHead .topIMG{width: 90%; max-width: 620px; margin: 0 auto; position: relative; z-index: 1;}
.partnerShipHead .topIMG img{width: 100%; height: auto; position: relative; z-index: 3;}
.partnerShipHead .topIMG::before{content: ""; display: block; width: 70%; height:calc(100% + 200px); position: absolute; top:0; left:15%; border-radius: 0 0 30px 30px; background: linear-gradient(to bottom, #002099AA, #0036FFFF); z-index: 0;}
.partnerShipHead .topIMG::after{content: ""; display: block; width: 60%; height: 5px; position: absolute; z-index: 1; bottom: 0; left: 20%; background: #fff;}

.partnerInfos{position: relative; z-index: 2; color: #fff; padding-bottom: 200px;}
.partnerInfos .ACContent{display: flex; flex-direction: column; gap:100px; align-items: center;}
.PNITitle{width: 90%; max-width: 620px; height: 200px; color: #fff; display: flex; flex-direction: column; gap:5px; align-items: center; justify-content: center;}
.PNITitle h1{font-weight: 200; font-size: 3em;}
.PNITitle h2{font-weight: 200; font-size: 1em;}
.PNIIntro{width: 95%;}
.PNIIntro h3{font-weight: 300;}
.PNIIntro p{color: #ccc;}

.PNIContactWay{display: flex; justify-content: space-between; width: 100%; max-width: 800px;}
.singlePNIWay{display: flex; flex-direction: column; align-items: center; padding: 100px 0; border:1px solid #ccc; border-radius: 20px; width:45%; gap:30px; color: #fff;}
.ACIcon.mail{background-image:url("../images/footer_icon_mail.svg"); width: 80%; max-width: 60px;}
.ACIcon.line{background-image:url("../images/footer_icon_line.svg"); width: 80%; max-width: 60px;}



@media screen and (max-width: 1140px) {
    .actService.stretch .ACContent{width: 100%;}
    .actService .activityBox{padding: 50px 30px 150px;}
}

@media screen and (max-width: 820px) {
    .ACHead .ACContent h1{text-align: center; font-size: 2em;}
    .actInWays{flex-direction: column; gap:20px;}
    .singleWay{width: 100%;}
    .actService .ACContent{flex-direction: column; align-items: center;}
    .actService .activityBox{width: 90%; padding: 50px 30px;}
    .actService .actContact{width: 100%; background: #00C68D;}
    .actService::before{display: none;}
}

@media screen and (max-width: 580px) {
    .ACHead .ACContent{padding-top: 240px;}
    .ACHead .ACContent h1{font-size: 1.5em;}
    .ACIcon.claps{width: 50%;}
    .repoGiftInfos p{font-size: 0.8em; text-align: justify;}
    .activityInfos .ACContent{flex-direction: column;}
    .activityInfos .activityBox{width: 100%;}
    .activityBox .aList li{flex-wrap: wrap;}
    .activityBox .aList li b{display: block; width: 100%;}
    .activityInfos .tickets{width: 90%;}
    .activityBox{gap:20px;}
    .wayInfos li{font-size: 0.8em;}
    .actContact .contactLink{font-size: 1.2em; gap:5px;}
    .actContact{font-size: 0.8em;}
    
    .partnerShipHead .topIMG{width: 100%;}
    .partnerInfos .ACContent{gap:50px;}
    .PNIIntro h3{font-size: 1.2em; text-align: justify;}
    .PNIIntro p{font-size: 0.8em; text-align: justify;}
    .singlePNIWay{padding: 50px 0; font-size: 0.8em;}
}