@charset "utf-8"; /* CSS Document */ /* -------------------------------------- * Layout.css * -------------------------------------- */ /* -------------------------------------- * RWD投票主頁 * -------------------------------------- */ /*分享icon偏移 .Area_topshare { right: 13vw;}*/ /*詳情 @media screen and (max-width:767px){ .Area_top .btn_more { display: block;} }*/ /*LOGO*/ .momologo { z-index:2; position: absolute; top: 15px; left:15px;} .momologo a { display:block; width:140px; height:21px;} .momologo a svg { width:140px; height:21px; } .momologo a path { fill:#EA27C2; } .momologo-pink a path { fill:#EA27C2; }/*LOGO 桃紅色*/ .momologo-white a path { fill:#ffffff; }/*LOGO 白色*/ @media screen and (max-width:767px){ .momologo { display:none;} } /*可拖移廣告icon*/ .Area_hammerAD { z-index: 300; position: fixed; bottom: -130px; right: 0;/* width: 25%;*/ transform: translate3d(0,100px,0); /*background-color: rgba(0,0,0,0.5);*/} .Area_hammerAD .box { position: relative; margin-right: 10px; opacity: 1;} .Area_hammerAD img { width: 90%; height: auto;} .Area_hammerAD .closeButton a { display:block; cursor:pointer; position:absolute; top: 1vw; right: 1vw; width:20px; height:20px; border-radius:50%; font:bold 20px/1em "Century Gothic"; color:#FFF; text-align:center; background-color:rgba(0%,0%,0%,0.5); text-decoration: none; z-index:2} @media screen and (max-width:767px){ .Area_hammerAD { width: 23%; bottom: 0;} } /*總票數*/ @font-face { font-family:"digital_counter_7"; src: url(digital_counter_7.ttf);} .Area_votesum { margin-top: 15px; margin-bottom: 50px;} .Area_votesum .txt { position:absolute; top:22px; left:431px; } .Area_votesum .txt span { float:left; display:block; margin-right:14px; width:73px; height:89px; font-size:74px; line-height:89px; font-family:'Century Gothic'; color:#132a88; text-align:center;} .Area_votesum .txt span { text-indent: 7px; font-family:'digital_counter_7';} .Area_votesum .txt span { background-image: url(Area_votesum_numbg.png?t=1775802215112); background-repeat: no-repeat; background-size: 100%;} @media screen and (max-width:767px){ .Area_votesum { margin-bottom:10px;} .Area_votesum .txt { position:absolute; top:2.5vw; left:34.4vw; } .Area_votesum .txt span { margin-right:1.1vw; width:6.5vw; height:8vw; font-size:6vw; line-height:8vw;} .Area_votesum .txt span { text-indent: 0;} } /*篩選按鈕樣式*/ .box_tab { position: absolute; top: 0px; right: 23px;} @media screen and (max-width:767px){ .box_tab { position: absolute; top:13vw; right:0;} } /*人氣戰況*/ .Area_topone { margin-top: 65px;} .Area_topone .btn_toplost {position:absolute; top:46px; right:21px; } .Area_topone .btn_toplost a { padding:0;} .Area_topone .box_cards li:first-child { margin-left:0; background: url("pop01.png?t=1775802215112") center top no-repeat;} .Area_topone .box_cards li:nth-child(2) { background: url("pop02.png?t=1775802215112") center top no-repeat;} .Area_topone .box_cards li:nth-child(3) { background: url("pop03.png?t=1775802215112") center top no-repeat;} /* .Area_topone .box_cards li:nth-child(4) { background: url("pop04.png?t=1775802215112") center top no-repeat;} */ @media screen and (max-width:767px){ .Area_topone { margin-top: 5vw;} .Area_topone .btn_toplost {top:0.2%;right: 1.5%;width:32%;} .Area_topone .btn_toplost img { width:100%;} } /*.Area_topone .box_cards li:after {content: ""; pointer-events: none; z-index: -2; position: absolute; top: 8px; left: 7px; display: block; width: 97%; height:calc(100% - 8px);}*/ .Area_topone .box_cards .cardstyle_ .cubeCard { position:relative; margin:0; padding:0; width:100%; height:auto; /*border:solid 1px #ffe0c2;*/ /*background-color:#ffdccc;*/ } /*.Area_topone .box_cards .cardstyle_ .cubeCard:after {content: ""; pointer-events: none; z-index: 1; position: absolute; top: 0; left:0; display: block; width: 100%; height:100%; background-image:url(deco-lineA.png?t=1775802215112); background-position:center; background-size:100%; background-repeat:no-repeat;}*/ /*排名*/ .Area_topone .box_cards .cardstyle_ .topone_icon { z-index:1; position:absolute; top:-83px; left:100px; color:#FFF; font-size:28px; font-family: 'Century Gothic'; line-height:39px;font-weight:600;} .Area_topone .box_cards .cardstyle_ .topone_icon:before { content:""; display:block; position:absolute; top:15px; left:-47px; width:56px; height:43px; background-image:url(top_icon.png?t=1775802215112); background-position:center; background-size:100%; background-repeat:no-repeat;} /*照片*/ .Area_topone .box_cards .cardstyle_ .card_img { z-index:2; position:relative; margin:30% 17.5% 2% 17.5%; padding:0; width:65%; height:auto; border-radius: 50%; border:solid 1px #ffe0c2; overflow: hidden;} .Area_topone .box_cards .cardstyle_ .card_img img { width:100%; height: auto; margin: 0 auto;} /*文字*/ .Area_topone .box_cards .cardstyle_ h4 { position:relative; z-index:3; font-size: 36px; margin: 0 auto; padding:0; width:60%; color: #fff; } .Area_topone .box_cards .cardstyle_ h4 > span { font-size: 36px;} .Area_topone .box_cards .cardstyle_ h5 { position:relative; z-index:3; margin: 0 auto; padding: 0; width:66%; color: #fff;} .Area_topone .box_cards .cardstyle_ h5 > span { font-size: 28px; font-weight: 500;} .Area_topone .box_cards { position:relative; margin:0 auto; padding:0; box-sizing:border-box;} .Area_topone .box_cards ul { margin:0 auto; padding:0 0 0 158px; list-style:none;width: 100%;} .Area_topone .box_cards ul:after { content: ""; display: block; clear: both;} .Area_topone .box_cards .cardstyle_ h4 b { position: absolute; top: -76px; left: -40px; font-size: 30px; font-weight: 800;} .Area_topone .box_cards .cardstyle_ h4 b span { font-size: 35px; font-weight: 300; font-family:'Century Gothic';} .Area_topone .box_cards li {float: left;z-index: 0;position: relative; margin: 0 0 0 21px; padding:0; box-sizing: border-box; width: 288px; height: 443px; text-align: center; letter-spacing: -0.05rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} /*票數*/ .Area_topone .box_cards .cardstyle_ h6 { margin: 0 auto; padding:3.5% 0 0 0 ; color: #fff; font-size: 24px; font-weight: 700; text-align: center; } .Area_topone .box_cards .cardstyle_ h6 span { position: relative; margin-right:0; top: 1px; font-size: 30px; font-family:'Century Gothic'; font-weight:300; letter-spacing: 0.1rem;} .Area_topone .box_cards li:after { width: 0; height: 100%;} @media screen and (max-width:767px){ .Area_topone .box_cards {} .Area_topone .box_cards ul { padding:0 3%;} .Area_topone .box_cards li {margin-left: 1%;padding: 0;width: 31.6%;height:53vw;text-align: left;background-size: 100%!important;} /*排名*/ .Area_topone .box_cards .cardstyle_ .topone_icon { z-index:1; position:absolute; top:1.5%; left:53%; font-size:16vw; line-height:14.5vw;display: none;} .Area_topone .box_cards .cardstyle_ .topone_icon:before { content:""; display:block; position:absolute; top:1.5vw; left:-7.5vw; width:47%; height:40%; } /*文字*/ .Area_topone .box_cards .cardstyle_ h4 b span { font-size: 25px;} .Area_topone .box_cards .cardstyle_ h4 b { position: absolute; top: -18vw; left: -18vw; font-size: 20px; font-weight: 800;} .Area_topone .box_cards .cardstyle_ h4 {width: 100%;height: 7vw;font-size: 4vw;word-break: break-all;text-align: center;} .Area_topone .box_cards .cardstyle_ h4 > span {font-size: 5vw;line-height:1.2;position: absolute;top:-150%;left: -30%; } .Area_topone .box_cards .cardstyle_ h5 {width:65%;height: 8.5vw;text-align: center;color: #000;position: absolute;top:70%;left:15%;} .Area_topone .box_cards .cardstyle_ h5 > span {font-size: 4.5vw;letter-spacing:0;} /*票數*/ .Area_topone .box_cards .cardstyle_ h6 {position: relative;top:2%;left:0;width:96%;padding:0 0 0 0;font-size: 4.5vw;text-align: center;overflow:visible;} .Area_topone .box_cards .cardstyle_ h6 span {top: 5%;font-size: 6.5vw;font-family:'Century Gothic';font-weight:300;letter-spacing: 0.01rem;} } /*集氣抽大獎*/ .Area_strategy{position:relative;margin-top: 157px;} .Area_strategy .box_title{position:absolute; top:-146px;} .Area_strategy .step{ margin-top: 20px;} .Area_strategy .arrow{position:absolute; top:129px;left: 364px;} @media screen and (max-width:767px){ .Area_strategy{position:relative;margin-top: 17vw;} .Area_strategy .box_title{position:absolute; top:-14vw;} .Area_strategy .step{ margin-top: 2vw;} .Area_strategy .arrow{position:absolute; top:29vw;left: 41vw;width: 14%;} } /*投票區*/ .Area_vote { position: relative; margin:66px auto;} .Area_vote .Area_boxstyle_box { padding-top:115px; padding-bottom:50px;} @media screen and (max-width:767px){ .Area_vote { margin-top: 5vw; margin-bottom:80px;} /*有注意事項時margin-bottom:50px;*/ .Area_vote .Area_boxstyle_box { padding-top:11vw; padding-bottom:6vw} } /*搜尋*/ .Area_vote .box_search {position: absolute;top: 0px;right: 42px;} .Area_vote .box_search .txt_01 { margin:0; margin-right:25px; padding:0; color:#ffdccb; font-size:30px; font-family:'Century Gothic',"微軟正黑體","Microsoft JhengHei", Arial, Helvetica; vertical-align:top;} .Area_vote .box_search .input { position:relative; display:inline-block; width:320px; overflow:hidden; color:#a30b5e; text-align:left; background-color:#6e6e6e; } .Area_vote .box_search .input input { margin:0; padding:0 10px; border: none; width:80%; height:40px; font-size:18px; font-weight: 800; line-height:40px; font-family:"微軟正黑體","Microsoft JhengHei", Arial, Helvetica; text-align:left;} .Area_vote .box_search .input input { -webkit-appearance: none; /* Safari 和 Chrome，常用於iOS下移除內建樣式 */ -moz-appearance: none; /* FireFox */ appearance: none; outline:none; /*取消選取藍框*/} .Area_vote .box_search .input input::-webkit-input-placeholder { color: #5e5e5e;} .Area_vote .box_search .input input:-ms-input-placeholder { color: #5e5e5e;} .Area_vote .box_search .input input::-moz-placeholder { color: #5e5e5e;} .Area_vote .box_search .input input:-moz-placeholder { color: #5e5e5e;} .Area_vote .box_search .input input::placeholder { color: #5e5e5e;} .Area_vote .box_search .input a { z-index:1; position:absolute; top:0; right:0; padding:0; width:20%; height:100%; font-size:22px; font-weight: 800; line-height: 40px; color:#fff; text-align:center; } .Area_vote .box_search .input a:hover { background-color:#de660e;} @media screen and (max-width:767px){ .Area_vote .box_search {position: relative;margin: 7vw 0;padding: 0;width: 100%;top:0vw;left: 0vw;} .Area_vote .box_search .txt_01 { margin-right:0; font-size:4.5vw;} .Area_vote .box_search .input { margin-top:1vw; width: 86%; } .Area_vote .box_search .input input { padding:0 2vw; height: 9vw; font-size:4vw; line-height: 9vw;} .Area_vote .box_search .input a { font-size: 4.2vw; line-height: 9vw; } } /*卡片樣式*/ .Area_vote .box_cards { padding: 0;} .Area_vote .box_cards ul { margin: 0; padding:68px 39px; list-style: none;} .Area_vote .box_cards ul:after { content: ""; display: block; clear: both;} .Area_vote .box_cards li {float: left; z-index: 0; position: relative; margin: 0; margin-left:9px; margin-bottom: 20px; padding: 0; box-sizing: border-box; overflow: hidden; width: 371px; height:554px; text-align: left; /*background-color: #c56cac;*/ letter-spacing: -0.05rem; -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease; } /* .Area_vote .box_cards li:hover { box-shadow: 0 0 14px rgba(0,0,0,0.3);}*/ .Area_vote .box_cards li:nth-last-of-type(3n+1) { } /*.Area_vote .box_cards li .conbox_bg { overflow: hidden; z-index: -1; display: block; position: absolute; top: 0%; left: 0%;}*/ /*.Area_vote .box_cards li .conbox_bg:after { content: ""; pointer-events: none; z-index: 1; position: absolute; top: 0; left:0; display: block; width: 100%; height:100%; background-image:url(deco-lineB.png?t=1775802215112); background-position:center top; background-size:100%; background-repeat:no-repeat;}*/ .Area_vote .box_cards .cardstyle_A {background: url(conbox_bg.png?t=1775802215112) center top no-repeat; background-size:100%; } .Area_vote .box_cards .cardstyle_B {background: url(conbox_bg.png?t=1775802215112) center top no-repeat;background-size:100%; } .Area_vote .box_cards .cardstyle_C {background: url(conbox_bg.png?t=1775802215112) center top no-repeat;background-size:100%; } .Area_vote .box_cards .cardstyle_D {background: url(conbox_bg.png?t=1775802215112) center top no-repeat;background-size:100%; } .Area_vote .box_cards .cardstyle_ .card_into .card_img img { margin: 0; width: 100%; height: 100%;} @media screen and (max-width:767px){ .Area_vote .box_cards {margin-top: -19vw;} .Area_vote .box_cards ul { position: relative;height: 260vw;top:18vw; margin: 0; padding:0 3%; list-style: none;} .Area_vote .box_cards li { margin-left: 2%; margin-bottom: 3%; padding: 1vw 0 0 1vw; width: 49%; height:76vw; } .Area_vote .box_cards li:nth-of-type(3n+1) { margin-left: 2%;} .Area_vote .box_cards li:nth-of-type(2n+1) { margin-left: 0;} .Area_vote .box_cards li .conbox_bg {width: calc(100% - 3vw); height: calc(100% - 3vw); background-image: radial-gradient(rgba(255,199,173,0.5) 25%, transparent 0); background-size: 4px 4px;} .Area_vote .box_cards .cardstyle_ .card_into .card_img img { margin: 0; width: 100%; height: 23vw;} } /*資料*/ .Area_vote .box_cards .cardstyle_ .card_into { position: relative; top:11%; width: 100%; height:173px; overflow: hidden; } .Area_vote .box_cards .cardstyle_ .card_into:before, .Area_vote .box_cards .cardstyle_ .card_into:after { content: "";pointer-events: none;z-index: -2;position: absolute;top: 0;left: 0;display: block;width: 100%;height: 76%;} .Area_vote .box_cards .cardstyle_ .card_into:before { } .Area_vote .box_cards .cardstyle_ .card_into:after { top: 0;left: 0;border-bottom: none;} .Area_vote .box_cards .cardstyle_ .card_into .card_img { margin: 0 auto; padding:0; width: 80%; height:100%; } .Area_vote .box_cards .cardstyle_ .card_into h3 {margin: 0 auto;padding: 10px 0 0 0;font-size: 35px;line-height: 40px;color: #6e6e6e;letter-spacing: 0;text-align: center;height: 46px;overflow:hidden;top:296px;} .Area_vote .box_cards .cardstyle_ .card_into h4 {margin: 0 auto;padding:0;font-size: 30px;line-height: 40px;color: #6e6e6e;letter-spacing: 0;text-align: center;height: 57px;top:294px;} .Area_vote .box_cards .cardstyle_ .card_into h5 { margin: 0; padding: 25px 0 22px 25px; height:19px; color:#13376c; font-size: 29px; line-height:20px; font-weight: bold; letter-spacing:0px; overflow:hidden;top:290px;left: 167px;} .Area_vote .box_cards .cardstyle_ .card_into h5 > span { /*margin-left:28%;*/ /*position: absolute;top: 11%;left: 25%;*/} .Area_vote .box_cards .cardstyle_ .card_into h6 { position: relative; margin: 0; padding: 0 0 0 33px; color: #1a1a47; font-size: 28px; line-height: 40px; height:45px; text-align: left; overflow:hidden;top:192px;} .Area_vote .box_cards .cardstyle_ .card_into h6 > span { position:absolute; top:2px; left:38%; font-size: 40px; font-family: 'Century Gothic'; font-weight: bolder; letter-spacing: 2px; color: #13376c; } .Area_vote .box_cards .cardstyle_ .card_into .card_into_bg { z-index: -1; position: absolute; bottom: 0; right: 0; display: block; width: 74%; height: 17%; background-color: #fff; background-image: radial-gradient(#ccc 1px, transparent 2px); background-size: 14px 14px; background-position: 0 0;} /*.Area_vote .box_cards .cardstyle_ .card_into .card_img { -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} .Area_vote .box_cards .cardstyle_ .card_into h3 .vote_icon1, .Area_vote .box_cards .cardstyle_ .card_into .card_into_bg { -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -ms-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease;} .Area_vote .box_cards .cardstyle_:hover .card_into .card_img {transform: translateY(1%);} .Area_vote .box_cards .cardstyle_:hover .card_into h3 .vote_icon1 { background-position: 0 65px;} .Area_vote .box_cards .cardstyle_:hover .card_into .card_into_bg { background-position: -100px 0;}*/ .Area_vote .box_cards .cardstyle_ .card_into .picPlay i:before, .Area_vote .box_cards .cardstyle_ .card_into .picPlay i:after { -webkit-transition: all 3s ease; -moz-transition: all 3s ease; -ms-transition: all 3s ease; -o-transition: all 3s ease; transition: all 3s ease;} .Area_vote .box_cards .cardstyle_:hover .card_into .picPlay i { background-color:#f5b32b;} .Area_vote .box_cards .cardstyle_:hover .card_into .picPlay i:before { width:115%; height:115%; border: 1px solid #f5b32b;} .Area_vote .box_cards .cardstyle_:hover .card_into .picPlay i:after { width:130%; height:130%; border: 1px solid #f5b32b;} @media screen and (max-width:767px){ .Area_vote .box_cards .cardstyle_ .card_into { } /*.Area_vote .box_cards .cardstyle_ .card_into:before, .Area_vote .box_cards .cardstyle_ .card_into:after { top: 1.5vw; left: 1.5vw; } .Area_vote .box_cards .cardstyle_ .card_into:before { } .Area_vote .box_cards .cardstyle_ .card_into:after { top: -2vw; left: -2vw;}*/ .Area_vote .box_cards .cardstyle_ .card_into .card_img {margin:1.5vw auto;} .Area_vote .box_cards .cardstyle_ .card_into .card_img img {} .Area_vote .box_cards .cardstyle_ .card_into h3 {margin: 0 auto;padding: 1vw 0 0 0;font-size: 5vw;line-height: 6vw;color: #6e6e6e;letter-spacing: 0;text-align: center;height: 7vw;overflow:hidden;top:38vw;} .Area_vote .box_cards .cardstyle_ .card_into h4 {padding: 0 0 0 0vw;font-size: 4vw;line-height: 6.5vw;height: 5.5vw;top:30vw;} .Area_vote .box_cards .cardstyle_ .card_into h4 > span { } .Area_vote .box_cards .cardstyle_ .card_into h5 {margin: 0;padding: 1vw 0 0 0;height: 3.5vw;font-size: 3vw;line-height:3vw;font-weight: bold;letter-spacing:0vw;top:33vw;left:26vw;} .Area_vote .box_cards .cardstyle_ .card_into h5 > span { } .Area_vote .box_cards .cardstyle_ .card_into h6 { padding: 0 0 0 2vw; font-size: 3vw; line-height: 8vw; height: 7vw;top:-6vw;} .Area_vote .box_cards .cardstyle_ .card_into h6 > span { top:0; left:33%; font-size: 4.8vw; letter-spacing: 0; font-family: 'Century Gothic'; font-weight: bold; text-shadow: 0 0 0 #1a1a47; } .Area_vote .box_cards .cardstyle_ .card_into .picPlay { padding:0 5%; bottom:4%;} } /*按鈕*/ .Area_vote .box_cards .cardstyle_ .card_btns { position: relative; display: block; margin: -7.5% auto 0; padding:0 ; text-align:center;} .Area_vote .box_cards .cardstyle_ .card_btns:after { content: ""; display: block; clear: both;} .Area_vote .box_cards .cardstyle_ .card_btns .btn_ { display: inline-block; position: relative; margin: 0; width: 48%;} .Area_vote .box_cards .cardstyle_ .card_btns .btn_vote {} .Area_vote .box_cards .cardstyle_ .card_btns .btn_:hover { filter: brightness(120%);} .Area_vote .box_cards .cardstyle_ .card_btns .btn_ a { display: block; padding-top: 3px; padding-bottom:4px; font-size: 28px; line-height:44px; font-weight: 800; color: #fff;} .Area_vote .box_cards .cardstyle_ .card_btns .btn_vote { width: 50%; position:absolute;bottom:-37px;right:98px;} .Area_vote .box_cards .cardstyle_ .card_btns .btn_vote a { width: 100%; margin: 0 auto;} .Area_vote .box_cards .cardstyle_ .card_btns .btn_vote a img { width: 100%;margin-top:7px; } @media screen and (max-width:767px){ .Area_vote .box_cards .cardstyle_ .card_btns {position: absolute; top:84%;width: 120%;left:-5vw; } .Area_vote .box_cards .cardstyle_ .card_btns .btn_ { } .Area_vote .box_cards .cardstyle_ .card_btns .btn_ a { width: 100%; padding-top: 0vw; } .Area_vote .box_cards .cardstyle_ .card_btns .btn_vote { width: 100%; position:absolute;bottom:-15vw;right:0;} .Area_vote .box_cards .cardstyle_ .card_btns .btn_vote a img { width: 100%;margin-top: 2vw; } } /*看更多*/ .btn_cardmore { width:85%; margin:0 auto; -webkit-transform: translateY(0%); transform: translateY(0%); -webkit-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -ms-transition: all 0.3s ease; -o-transition: all 0.3s ease; transition: all 0.3s ease;} .btn_cardmore img { width:100%;} .btn_cardmore:hover { -webkit-transform: translateY(6px); transform: translateY(6px); filter: brightness(120%);} @media screen and (max-width:767px){ .btn_cardmore { width:95%; margin:1vw auto;} } /*詳情投票總數位置調整*/ .Area_votesum { margin-top: -67px; margin-bottom: 50px;} .Area_votesum .txt { position:absolute; top:57px; left:427px; } @media screen and (max-width: 767px){ .Area_votesum .txt span {margin-right: 0.18em;} .Area_votesum { margin-top: 6vw; margin-bottom: 8vw;} .Area_votesum .txt { position:absolute; top:8.1vw; left:34vw; } } .box_cards_for_tame .cardstyle_A .card_into .card_img:after {content: ""; position: absolute; top: 0; left: 0; display: block; width: 150px; height: 44px; background-image: url(mark_A.png?t=1775802215112); background-repeat: no-repeat; background-size: 100%; pointer-events: none;} .box_cards_for_tame .cardstyle_B .card_into .card_img:after {content: ""; position: absolute; top: 0; left: 0; display: block; width: 150px; height: 44px; background-image: url(mark_B.png?t=1775802215112); background-repeat: no-repeat; background-size: 100%; pointer-events: none;} @media screen and (max-width: 767px){ .box_cards_for_tame .cardstyle_A .card_into .card_img:after, .box_cards_for_tame .cardstyle_B .card_into .card_img:after{width: 34%; height: 22%;} } /** 倒數 **/ .TimerNick {position:absolute; top:92px; z-index: 0; display: inline-block; transform: none;left: 325px;display: flex;gap: 20px;} .TimerNick .FontStyle { display:inline-block; margin:0; padding:0; border:0px; font: bold 35px/38px Century Gothic; color:#ffcf10; letter-spacing:-1px; text-align:right; background:transparent; } .TimerNick span {white-space: nowrap;padding-left:2px; font: bold 28px/38px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;color: #ffcf10;float: unset;} @media screen and (max-width:767px){ .TimerNick { padding-left: 4vw;z-index:2;position: absolute;top: 8vw;left: 0;display:inline-block;margin:0;width: auto;height:auto;overflow:hidden;display: flex;gap: 2.5vw;} .TimerNick .FontStyle {display:inline-block;margin: 0;padding:0;border:0px;width: 100%;font: bold 5.5vw/11vw Century Gothic;color:#ffcf10; letter-spacing:-1px;text-align:right;background:transparent;} .TimerNick span { font: bold 4vw/11vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;color: #ffcf10;float: unset;} }