/* 各頁面CSS */ /*切換PC置頂選單*/ .cantantBase1{ display: none; } .cantantBase2{ display: none; } .Fixedfooter, .fixarea, .cantantBase, .Area_team_menu{ display: none!important; } /*momo幣這裡用*/ @media screen and (min-width: 768px) { .Area_grabmoney_coupon .PD_layout ul { padding: 0 25px; grid-gap: 15px;} .Area_grabmoney_coupon .PD_layout img { border-radius: 10px;} } @media screen and (max-width: 767px) { .Area_grabmoney_coupon .PD_layout ul { grid-gap: 1.8vw;} .Area_grabmoney_coupon .PD_layout img { border-radius: .5em;} } /* -------------------------------------- * page 頁面-組隊 * -------------------------------------- */ /*調整共用素材*/ #MoMoLM { background-color: rgb(34, 34, 34)!important; opacity: 0.75!important;} /*啟始畫面--電腦版不隱藏*/ @media screen and (min-width:768px){ #group_default {display: block !important;} } @media screen and (max-width: 767px) { .hero-title .md-text { width: 90vw;} } /*按鈕*/ .btn_go_all{ width: 60%; margin:4vw auto 0; } @media screen and (min-width: 768px) { .btn_go_all{ margin: 100px auto 0; } } .box_title1{ position: relative; } .bank_a1{ position: absolute!important; left: 0; top: 0; width: 33%; height: 35vw;} .bank_a2{ position: absolute!important; left: 33%; top: 0; width: 33%; height: 35vw;} .bank_a3{ position: absolute!important; right: 0; top: 0; width: 33%; height: 35vw;} /*組隊選單*/ .Area_team_menu { } .Area_team_menu > .box { } .Area_team_menu > .box ul { margin:0 auto; padding:0; list-style:none;} .Area_team_menu > .box ul:after { content:""; display:block; clear:both;} .Area_team_menu > .box li { float:left; z-index: 0; position: relative; margin: 0; padding: 0;} .Area_team_menu > .box li img { width: 100%; height: auto;} /*電腦版*/ .Area_team_menu.for_pc { position: relative; margin-top: -130px; margin-bottom: 50px; /*width: 860px;*/} /* .Area_team_menu.for_pc:before { content: ""; z-index: -1; position: absolute; top: -35px; left: 30px; display: block; width: 804px; height: 315px; background-image: url(Area_team_btn_bg.png?t=1750299783334);} */ .Area_team_menu.for_pc > .box ul { display: inline-block; } .Area_team_menu.for_pc > .box li { margin-left: 30px; width: 306px;} .Area_team_menu.for_pc > .box li:first-child { margin-left: 0;} /*手機版*/ .Area_team_menu.for_phone { z-index:200; position:fixed; bottom: 0; left:0; width: 100%; height: 20vw; padding-bottom: 75px; padding-bottom: calc(75px + constant(safe-area-inset-bottom)*0.6); /* 兼容 iOS < 11.2 */ padding-bottom: calc(75px + env(safe-area-inset-bottom)*0.6); /* 兼容 iOS >= 11.2 */ } .Area_team_menu.for_phone:after { content: ""; pointer-events: none; z-index: -1; position: absolute; bottom: 0; left: 0; width: 100%; /*色塊用這行*/ height: 40vw; background: /*linear-gradient(180deg,#ffb1f7 0%,#ffedfd 100%)*/#56555c; border-radius: 6vw;border-top: #47daff 2px solid; /*背景圖用這行 height: 60vw; background-image: url(m_Area_team_btn_bg.png?t=1750299783334); background-size: 100%; background-repeat: no-repeat; background-position: center bottom 36px;*/ /*background-size: 100% 240px;*/ margin-bottom: 0px; margin-bottom: calc(0px + constant(safe-area-inset-bottom)*0.6); /* 兼容 iOS < 11.2 */ margin-bottom: calc(0px + env(safe-area-inset-bottom)*0.6); /* 兼容 iOS >= 11.2 */ } .Area_team_menu.for_phone > .box ul { /*display: flex;*/ position: absolute; top: 22%; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); width: 72%; /*margin-bottom: 6vw;*/} .Area_team_menu.for_phone > .box li { margin-right: 3%; width: 48.5%; /*min-width: 118px;*/} .Area_team_menu.for_phone > .box li:nth-of-type(2n) { margin-right: 0;} /*.Area_team_menu.for_phone > .box li img { width: auto; height: 60px;}*/ /*我的點數-動畫*/ .Area_team_menu.for_phone { -webkit-animation:Area_team_menu-play 1s 1.5s 1; animation:Area_team_menu-play 1s 1.5s 1; -webkit-animation-fill-mode:forwards; animation-fill-mode:forwards; -webkit-transform: translate(0,100px); transform: translate(0,100px); opacity:1; } @-webkit-keyframes Area_team_menu-play { 0% { -webkit-transform: translate(0,100px); opacity:1;} 100%{ -webkit-transform: translate(0,0); opacity:1;} } @keyframes Area_team_menu-play { 0% { transform: translate(0,100px); opacity:1;} 100%{ transform: translate(0,0); opacity:1;} } .Area_team_menu .btn_.btn_create {} /*創建隊伍*/ .Area_team_menu .btn_.btn_join {} /*加入隊伍*/ .Area_team_menu .btn_.btn_share {} /*邀請加入*/ .Area_team_menu .btn_.btn_dropout {} /*退出隊伍*/ /*組隊--啟始圖*/ .Area_team_main {top: 1.5em} /*組隊電腦版*/ @media screen and (min-width:768px){ .Area_team_main img { width: 100%; height: auto;} .Area_team_main .main_bn { margin: 0 auto; padding: 0; width: 860px;} .Area_team_main .main_bn img { width: 100%; height: auto;} .Area_team_main .box_title1 { margin: -8px auto 30px; width: 87%;} /*步驟圖*/ .Area_team_process { margin: 20px auto; width: 86%;} } /*組隊手機版*/ @media screen and (max-width:767px){ .Area_team_main .box_title1 { margin: -1.5vw auto 3vw; padding: 0 1%;} .Area_team_main .main_bn { margin: 0 auto; padding: 0; width: 100%; margin-left: 0;} /*步驟圖*/ .Area_team_process { margin: 1vw auto;} } /*動畫分圖層*/ .Area_team_main .main_bn { position: relative;} .Area_team_main .main_bn_ { position: absolute; top: 22vw; left: 0; width: 100%; height: 100%;} .Area_team_main .main_bn_1 { /*transform: scale(0);*/top: -22vw;} .Area_team_main .main_bn_2 {/* transform: scale(0);*/} .Area_team_main .main_bn_4 {/* opacity: 0;*/} @media screen and (min-width:768px){ .Area_team_main .main_bn_ { top: 183px;} .Area_team_main .main_bn_1 { top: -183px} } /*擇一參加活動*/ .Area_event .Area_boxstyle_box1{padding: 4vw 2vw;} .Area_event .Area_boxstyle_title{display: none;} .Area_event h3{ font-weight: 800;font-size: 6vw;/*color: #000000;*/margin-bottom: 2vw;} .Area_event a{width: 60%;margin: 0 auto;} @media screen and (min-width:768px){ .Area_event .Area_boxstyle_box1{padding: 40px 20px;} .Area_event h3{ font-size: 42px;} .Area_event a{width: 100%;} } /*組隊*/ .Area_team { color: #222222;} .Area_team .Area_boxstyle_title{display: none;} /*組隊電腦版*/ @media screen and (min-width:768px){ .Area_team .Area_boxstyle_box2{padding: calc(165px / 2) 18px;} } /*組隊手機版*/ @media screen and (max-width:767px){ .Area_team_info { margin-top: 12vw} .Area_team_info > .box { padding: 0 1.2%;} .Area_team_info .box_group_info { margin: 11vw 0 5.5vw; padding: 0;} .Area_team_info b { color: #e2104e;} .Area_team_info .box_group_info_box { margin-bottom: 3vw; padding: 1.5em 0 1.5em;/*padding-bottom: 0.5em;*/ border-radius: 0.5em; border: 0.2em solid #212121; background-color: #f7e1e6;} .Area_team_info .box_group_info_box p { margin: 0; padding: 0;} /*倒數*/ .Area_team_info .TIMER { line-height: 1.2;} .Area_team_info .TIMER .time_day { font-size: 0.7em;} .Area_team_info .TIMER small { font-size: 0.7em;} /*隊名*/ .box_groupName { z-index:1;position: absolute; top: 0; left: 50%; -webkit-transform: translate(-50%,-50%); transform: translate(-50%,-50%); margin: 0 auto; display: inline-block; border-radius: 50px; color: #fff; background: #212121;} .box_groupName { padding: 0.25em 1em; font-weight:800; font-size: 4vw; font-size: 5vw; width: 60vw;} .box_groupName b { margin-right: 0.25em; color: #fff} /*獎勵*/ .Area_team .box_status { font-size: 4.8vw; } /*隊伍*/ .Area_team .box_member { position:relative; margin:2vw auto 0; font-size: 4vw;} .Area_team .box_member .member_list { position:relative; margin: 0 auto; padding: 0 2vw; list-style:none; display: flex; flex-wrap: wrap; width: 88%; } .Area_team .box_member .member_list li { width: 24%; margin: 0 1% 0.1em 0; text-align: center; line-height: 1.25; /*font-weight: 800;*/} .Area_team .box_member .member_list li img{ width: 90%; } .Area_team .box_member .member_list .name { word-break: keep-all; /*font-size: 3.5vw;*/ overflow: hidden;} .Area_team .box_member .member_list .money { font-family: Century Gothic; font-size: 4vw; font-weight: inherit; top: inherit;} /*資訊*/ .Area_team .box_info h3 { /*font-weight: 400;*/ font-size: 4.7vw; line-height: 1.35;} .Area_team .box_info b { /*font-weight: 400;*/} .Area_team .box_info .game_inTime h3:first-child { font-weight: 800; font-size: 6vw; line-height: 2;} .Area_team .box_info .game_inTime2 { /*font-size: 3vw; */text-align: left;width: 94%;margin: 0;} .Area_team .box_info .game_inTime2 strong { color: #3b3b3b;} .Area_team .box_info .game_inTime2 strong ol {padding-left: 5vw;} .Area_team .box_info .game_inTime2 ul { padding-left: 1em;} /*門檻*/ .Area_team .game_inTime .reward_list { margin: 0; padding: 0 5%; list-style: none; display: flex; flex-wrap: wrap;} .Area_team .game_inTime .reward_list li { margin: 0; padding: 1%; width: 100%; box-sizing: border-box;} /*再次組隊*/ .Area_team .game_again { margin-top: 6vw;} .Area_team .game_again .btn_again { margin: 3vw auto 1vw; width: 60%;} .Area_team .game_again .notice { color: #fff; background: rgba(0,0,0,0.6); font-size: var(--mb-message-03); width: 95%; margin: 0.4em auto; padding: 1em 0.5em; border-radius: 0.45em; text-align: left; box-sizing: border-box;} .Area_team .game_again .notice ul { margin: 0; padding: 0; padding-left: 2em;} /*.Area_team .game_inTime .reward_list li:last-child { width: 100%;}*/ } /*詳情說明*/ .Area_team_more > .Area_boxstyle_box10 { padding-top: 0; padding-bottom: 2vw;} .Area_team_more ol { padding-left: 2em;} .Area_team_more li b { color: #f5264e; font-weight:initial;} /*.Area_team_more .box_list { font-size: 1em; width: 90%;}*/ .Area_team_more .message-table table th, .message-table table td {padding-block: 0.4rem;line-height: 1.5em;} .Area_team_more .box_list table { margin-top: 1em; font-weight: normal; box-shadow: none;text-align: center;margin-bottom: 1em} .Area_team_more .box_list table ol { display: inline-block; text-align: left; margin: 0; padding: 0 0 0 1em;} .Area_team_more .box_list table ol li { margin: 0 0.6em 0; } .Area_team_more .box_list li img { width: 90%; max-width: 480px; box-shadow: none;margin-top: 0.3em;margin-bottom: 0.5em;border-radius: 10px} /*表格-本檔顏色沿用共用素材*/ .Area_team_more .box_table { width: 100%;} .Area_GameStyle .box_list ol{gap: 0;} /*.Area_team_more .box_table tbody { border-left: solid 1px #942a0e; border-right: solid 1px #942a0e; border-color: #ff6c4e;} .Area_team_more .box_table td { border-right: solid 1px #942a0e; border-bottom: solid 1px #942a0e;} .Area_team_more .box_table th:last-child { border-left: none;} .Area_team_more .box_table tr { border-bottom: inherit;} .Area_team_more .box_table tr td:first-child { color: inherit;} .Area_team_more .box_table tr td:last-child { color: inherit;}*/ .Area_GameStyle .box_table tr td:first-child { color: inherit; font-weight: normal;} .Area_GameStyle .box_table tr td:last-child { color: inherit; font-weight: normal;} @media screen and (min-width:768px){ /*.Area_team_more .box_ { margin: 20px auto 0; font-size: 1.5em; color: #282828;}*/ .Area_team_more li strong { color: #de1e4f;} .Area_team_more .box_list { padding: 20px 40px;} .Area_team_more .box_list table { font-size: 0.6em;} /*.Area_team_more .box_table th { background-color: #ff6c4e; font-weight: 400;} .Area_team_more .box_table td { border-color: #ff6c4e; background-color: rgba(255,255,255,0.3);}*/ } @media screen and (max-width:767px){ /*.Area_team_more .box_ { margin: 4vw auto 0; font-size: 0.985em; color: #333; line-height: 1.4;}*/ .Area_team_more li strong { color: #de1e4f;} .Area_team_more .box_list { padding: .5vw 2vw;} .Area_GameStyle .box_list ol{ padding-inline-start: 6vw; gap: .75rem;} .Area_team_more .box_list table { font-size: 0.9em;} .Area_team_more .box_list table ol li { margin: 0 0 0 0.15em;} /*.Area_team_more .box_table th { background-color: #ff6c4e; font-weight: 400;} .Area_team_more .box_table td { border-color: #ff6c4e; background-color: rgba(255,255,255,0.3);}*/ .Area_team_more .box_table tbody, .Area_team_more .box_table td, .Area_team_more .box_table tr { border-width: 0.08em;} } /*浮層*/ .box_Area {position:relative;margin:5% auto;padding:5% 0 4% 0;width:86%;max-width:560px;height:auto;border-radius:5vw;border: 3px solid #47daff;color:#fff;text-align:center;font-family:"微軟正黑體","Microsoft JhengHei",Helvetica;background:/* linear-gradient(-180deg,#f3ffc1 40%,#dcf968 100%);*/#212121;} .box_Area * { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -ms-box-sizing:border-box; -o-box-sizing:border-box; box-sizing:border-box;} .box_Area .closeBN a {display:block; position:absolute; top:-4vw; right:-4vw; width:10vw; height:10vw; border-radius:50%; font-weight: bold; font-size:10vw; line-height:8.5vw; color:#FFF; text-align:center; background-color:rgba(0,0,0,0.8);text-decoration: none; z-index:2} @media screen and (min-width:768px){ .box_Area { margin:10px auto; padding:20px 0 0; border-radius:32px;} .box_Area:after { top:140px; height:3px;} .box_Area .closeBN a { top:8px; right:8px; width:60px; height:60px; font-size:55px; font-weight: bold; line-height:50px;} } /*內容*/ .box_Area .box { position: relative; padding:0 4% 2%;} .box_Area .box .title { position: relative; margin:0; height:14vw; font-weight:800; font-size:7vw; line-height:16vw; letter-spacing:-0.05rem; text-align: center;} .box_Area .box .title2 { position:relative; top:-2.5vw;} .box_Area .box .title2 small { position:absolute; top:15vw; left:20%; display: block; margin:0 auto; width:60%; transform:scale(0.9); border-radius:3vw; font-size:3.2vw; line-height:3.2vw; letter-spacing:0;} .box_Area .box .title_small { margin:4% 4% 0; padding:3%; border-radius:3vw; /*box-shadow: inset 1vw 1vw 1vw rgba(0,0,0,0.1);*/ width:92%; font-size:4vw; line-height:5vw; background-color:#fff; color:#000;} .box_Area .box .center_input { margin:3.5vw auto; } .box_Area .box .center_input input { margin:0 4%; padding:0 3%; height:13vw; border:none; border-radius:3vw; box-shadow: inset 1vw 1vw 1vw rgba(0,0,0,0.1); width:92%; color:#333; font-size:6vw; line-height:13vw; font-family:"Century Gothic", "微軟正黑體", sans-serif; text-align: center; background-color:#fff;} .box_Area .box .center_input input::-webkit-input-placeholder { color: #9D9D9D;} .box_Area .box .center_input input:-ms-input-placeholder { color: #9D9D9D;} .box_Area .box .center_input input::-moz-placeholder { color: #9D9D9D;} .box_Area .box .center_input input:-moz-placeholder { color: #9D9D9D;} .box_Area .box .center_input input::placeholder { color: #9D9D9D;} .box_Area .box .sure { z-index:5; position:relative; margin:0 auto; padding: 2vw 0; text-align:center;} .box_Area .box .sure a { position:relative; display: inline-block; padding:1% 20%; border-radius:50px; font-weight: bold; font-size:6vw; line-height:9vw; color:#fff; -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; } .box_Area .box .sure a:hover { transform: translateY(6px); filter: brightness(110%); } .box_Area .box .sure_2 { display:inline-block;width:42%;} .box_Area .box .sure_2 a { padding: 1% 26% 0.9%;} .box_Area .box .sure_ok a {/*text-shadow: 0 1px 0 rgba(0,0,0,.3);*/ /*box-shadow: inset 5px 21px 5px -19px rgb(255 255 255), inset 0 1px 20px rgb(0 0 0 / 0%), 0 3px 0 #f6b22c, 0 5px 5px rgb(0 0 0 / 40%);*/ background-color: #f5264e; /*color: #392e2d;*/} /*原值box-shadow: inset 0 21px 5px -18px rgb(255, 255, 255),...*/ .box_Area .box .sure_no a {/*text-shadow: 0 1px 0 rgba(0,0,0,.3);*/ /*box-shadow: inset 6px 18px 5px -19px rgb(255 255 255 / 90%), inset 0 1px 20px rgb(0 0 0 / 0%), 0 3px 0 #5e5e5e, 0 5px 5px rgb(0 0 0 / 40%);*/ background-color: #6f6f6f;} .box_Area .box p { padding:0 5%; font-size:5vw; text-align:center;} .box_Area .box p span { font-size:6vw; font-weight: 700;} .box_Area .box ol, .box_Area .box ul { text-align:left; list-style:none; font-size: 4.8vw; padding-right: 4vw;} .box_Area .box li { margin-bottom:0.5em; counter-increment: num; text-indent:-1.5rem;} .box_Area .box li:before { content: "(" counter(num) ") " ;} .box_Area .box .qrcode img { width:70%; height:auto;} .box_Area .box .box_bg { margin:0 4%; } .box_Area .box .box_bg p { } .box_Area .box .box_bg .table { padding:2% 0; font-family:"微軟正黑體", "Century Gothic"; font-size:5vw; line-height:6vw; vertical-align:middle; border-collapse:collapse;} .box_Area .box .box_bg .table th, .box_Area .box .box_bg .table td { position:relative; text-align:center; padding:2vw 0;} .box_Area .box .box_bg .table th { border:0.6vw solid #cfd200; border-width:0.6vw 0;} .box_Area .box .box_bg .table img { width:80%; height:auto;} .box_Area .box .box_bg .table b { position:absolute; top:50%; left:0; width:100%; line-height:4.5vw; font-weight:800; font-family:Century Gothi; transform:translateY(-50%);} .box_Area .box .box_bg .table_2n td:nth-child(1) { width:45%;} .box_Area .box .box_bg .table_2n td:nth-child(2) { width:55%;} .box_Area .box .box_bg .table_3n td:nth-child(1) { width:16%;} .box_Area .box .box_bg .table_3n td:nth-child(2) { width:42%;} .box_Area .box .box_bg .table_3n td:nth-child(3) { width:42%;} .box_Area .box .box_bg .table_4n td:nth-child(1) { width:14%;} .box_Area .box .box_bg .table_4n td:nth-child(2) { width:23%;} .box_Area .box .box_bg .table_4n td:nth-child(3) { width:23%;} .box_Area .box .box_bg .table_4n td:nth-child(4) { width:44%;} @media screen and (min-width:768px){ .box_Area .box .title { height:110px; font-size:50px; line-height:130px; letter-spacing:-1px; } .box_Area .box .title2 { top:-5px; font-size:50px; line-height:110px; } .box_Area .box .title2 small { top:85px; font-size:18px; line-height:18px; } .box_Area .box .title_small { margin:4% 4%; padding:3%; border-radius:15px; /*box-shadow: inset 5px 5px 5px rgba(0,0,0,0.1);*/ font-size:20px; line-height:24px; } .box_Area .box .center_input { margin:30px auto; } .box_Area .box .center_input input { border-radius:15px; height:70px; box-shadow: inset 5px 5px 5px rgba(0,0,0,0.1); font-size:36px; line-height:70px; } .box_Area .box .sure { margin:0 auto; padding:10px 0 30px 0; } .box_Area .box .sure a { border-radius:50px; font-size:44px; line-height:60px; } .box_Area .box .sure_2 {} .box_Area .box p { font-size:24px;} .box_Area .box p span { font-size:40px;} .box_Area .box ol, .box_Area .box ul { font-size: 24px; padding-right: 25px;} .box_Area .box li { font-size:24px; margin-left:1.5rem; margin-bottom:0.5em; text-indent:-2.5rem;} .box_Area .box .box_bg { border-radius:0 0 50px 50px; } .box_Area .box .box_bg .table { font-size:24px; line-height:30px; } .box_Area .box .box_bg .table td { padding:10px 0;} .box_Area .box .box_bg .table th { padding:10px 0; border-width:3px 0;} .box_Area .box .box_bg .table img { width:80%; height:auto;} .box_Area .box .box_bg .table b { line-height:30px;} } /*改配色*/ .box_Area .box .title_small {font-weight: 800;color: #392e2d; background-color: rgba(255,255,255,0.6);} .box_Area .box .title {color: #47daff;} .box_Area .box .title_bar { box-shadow:0 2px 0 0 #47daff;} .box_Area .box .box_bg .table th { border-color: #47daff;} /*判斷顯示隱藏*/ .Area_GameStyle .is_if span { display: block; } .Area_GameStyle .is_if .end { display: none; } .Area_GameStyle .is_if .on { display: none; } /*切換*/ .Area_GameStyle .is_end .off { display: none; } .Area_GameStyle .is_end .end { display: block; } .Area_GameStyle .is_on .off { display: none; } .Area_GameStyle .is_on .on { display: block; }