@charset "utf-8";
											.WatchTop100Header{		 background-color:#dddddd; } .WatchTop100Header>.outBox{ } @media screen and (max-width:768px){ .WatchTop100Header{		 } .WatchTop100Header>.outBox{ } }										 .WatchTop100Header .outBox{ width:100%; position:relative; border:1px #dddddd solid; color:#222; } .WatchTop100Header .inBox{ position:relative; z-index:0; padding:0 70px; } .WatchTop100Header .titleBox{ position:relative; z-index:1; } .WatchTop100Header .title{ padding-top:70px; color:#be935c; } .WatchTop100Header .slogan{ margin-top:37px; padding:5px 35px 5px 10px; color:#be935c; font-size:18px; position:relative; border:1px #be935c solid; } .WatchTop100Header .sloganA{ opacity:0; } .WatchTop100Header .slogan .arrow{ position:absolute; right:18px; top:0; width:8px; height:100%; background-image:url(/hk/images/campaign/top100_2025/arrow.svg); } .WatchTop100Header .tt0{ width:439px; height:252px; background-image:url(/hk/images/campaign/top100_2025/desktop_title-none.svg?20221216_1); } .WatchTop100Header .tt1{ font-size:125px; line-height:0.9em; border-bottom:2px #be935c solid; padding-bottom:10px; margin-bottom:10px; } .WatchTop100Header .tt2{ font-size:66px; line-height:0.9em; } .WatchTop100Header .watchList{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:0; overflow: hidden; } .WatchTop100Header .bg{ position:absolute; left:0; top:0; width:100%; height:100%; overflow: hidden; background-image:url(/hk/images/campaign/top100_2025/paper.jpg); } .WatchTop100Header .circle{ position:absolute; left:-50%; top:-50%; width:100%; height:100%; z-index:0; border-radius:50%; } .WatchTop100Header .watch{ position:absolute; left:0; top:0; width:100%; height:100%; display:none; pointer-events:none; } .WatchTop100Header .watchEnabled{ pointer-events: all; } .WatchTop100Header .cBox{ position:absolute; left:50%; top:50%; width: 740px; height: 740px; } .WatchTop100Header .imgBox{ position:absolute; left:-50%; top:-50%; width:100%; height:100%; z-index:0; border-radius:50%; } .WatchTop100Header .imgBG{ background-color:#FFF; } .WatchTop100Header .imgSize{ background-size:50%; } .WatchTop100Header .imgPos{ background-position:200%; } .WatchTop100Header .imgBox img{ width:100%; height:100%; opacity: 0; } .WatchTop100Header .infoBox{ position:absolute; right:70px; top:0; width:450px; padding-top:85px; overflow: hidden; } .WatchTop100Header .awardA{ position:absolute !important; right:70px !important; top:54px !important; } .WatchTop100Header .liveA{ position:absolute !important; right:430px !important; top:125px !important; } .WatchTop100Header .awardB, .WatchTop100Header .liveB{ opacity:0; } .WatchTop100Header .award{ position:absolute; right:0; top:-30px; background-image:url(/hk/images/campaign/top100_2025/HG_award_icon_black.svg?20240103_1); width:135px; height:135px; } .WatchTop100Header .info, .WatchTop100Header .scored{ position:relative; padding-top:40px; padding-left:30px; } .WatchTop100Header .infoPos, .WatchTop100Header .scoredPos{ transform:translate(100%,0); } .WatchTop100Header .score_avg{ font-size:82px; position:relative; line-height:1em; } .WatchTop100Header .iconStar{ position:absolute; left:-30px; top:5%; height:100%; width:17px; background-image:url(/hk/images/campaign/top100_2025/star-golden.svg); } .WatchTop100Header .liveA { } .WatchTop100Header .live { width:60px; height:20px; background-image:url(/hk/images/campaign/top100_2025/live.svg); line-height: 0; text-align:right; } .WatchTop100Header .live .dot{ width:6px; height:6px; margin-right:6px; border-radius:50%; background-color:#fff; } .WatchTop100Header .alias{ font-size:42px; } .WatchTop100Header .brand{ font-size:48px; } .WatchTop100Header .name{ font-size:22px; } .WatchTop100Header .shareUI{ margin-top:210px; padding-bottom:65px; visibility:hidden; } .WatchTop100Header .shareUIA{ visibility:visible; } .WatchTop100Header .shareUI a{ margin-right:40px; } .WatchTop100Header li{ text-indent: -9999px; width:22px; height:22px; } .WatchTop100Header .facebook{ background-image: url(/hk/images/campaign/top100_2025/icon_fb.svg); } .WatchTop100Header .line{ background-image: url(/hk/images/campaign/top100_2025/icon_line.svg); } .WatchTop100Header .whatsapp{ background-image: url(/hk/images/campaign/top100_2025/icon_whatsapp.svg); } .WatchTop100Header .scoredUser{ padding-top:15px; } .WatchTop100Header .userInfo { width: 40px; height: 40px; border-radius: 50%; margin-right: 10px; } .WatchTop100Header .userInfoB{ width:0; margin-right: 0; } .WatchTop100Header .userInfo img { width: 100%; height: 100%; display: none; } .WatchTop100Header .interacted{ font-size:16px; height:40px; padding:0 20px; line-height:40px; background-color:#ccc; border-radius:20px; } .WatchTop100Header .scoresBtn{ margin-top:55px; } .WatchTop100Header .scoresBtn .ScoresButton{ padding:15px 20px; width:240px; border:1px #000e18 solid; color:#000e18; font-size:20px; line-height:1em; position:relative; } .WatchTop100Header .iconAdd{ position:absolute; right:15px; top:0; width:20px; height:100%; background-image:url(/hk/images/campaign/top100_2025/add_or_open.svg); } .WatchTop100Header .sponsored{ position:absolute; left:0; bottom:4.5vw; pointer-events:all; height:6.875vw; } .WatchTop100Header .sponsored img{ width:auto; height:100%; } .WatchTop100Header .sponsored .img_d{ display:block; } .WatchTop100Header .sponsored .img_m{ display:none; } @media screen and (max-width:1600px){ .WatchTop100Header .inBox{ padding:0 4.375vw; } .WatchTop100Header .title{ padding-top:4.375vw; } .WatchTop100Header .slogan{ margin-top:2.3125vw; padding:0.3125vw 2.1875vw 0.3125vw 0.625vw; font-size:1.125vw; } .WatchTop100Header .slogan .arrow{ right:1.125vw; width:0.5vw; } .WatchTop100Header .tt0{ width:27.4375vw; height:15.75vw; } .WatchTop100Header .tt1{ font-size:7.8125vw; padding-bottom:1.21vw; margin-bottom:1.21vw; } .WatchTop100Header .tt2{ font-size:4.125vw; } .WatchTop100Header .cBox{ width: 46.25vw; height: 46.25vw; } .WatchTop100Header .imgBG{ background-color:#FFF; } .WatchTop100Header .infoBox{ right:4.375vw; width:28.125vw; padding-top:5.3125vw; } .WatchTop100Header .awardA{ position:absolute !important; right:4.375vw !important; top:3.375vw !important; } .WatchTop100Header .liveA{ position:absolute !important; right:26.875vw !important; top:7.8125vw !important; } .WatchTop100Header .award{ top:-1.875vw; width:8.4375vw; height:8.4375vw; } .WatchTop100Header .info, .WatchTop100Header .scored{ padding-top:2.5vw; padding-left:1.875vw; } .WatchTop100Header .score_avg{ font-size:5.125vw; } .WatchTop100Header .iconStar{ left:-1.875vw; width:1.0625vw; } .WatchTop100Header .live { width:3.75vw; height:1.25vw; } .WatchTop100Header .live .dot{ width:0.375vw; height:0.375vw; margin-right:0.375vw; } .WatchTop100Header .alias{ font-size:2.625vw; } .WatchTop100Header .brand{ font-size:48px; } .WatchTop100Header .name{ font-size:1.375vw; } .WatchTop100Header .shareUI{ margin-top:13.125vw; padding-bottom:4.0625vw; } .WatchTop100Header .shareUI a{ margin-right:2.5vw; } .WatchTop100Header li{ width:1.875vw; height:1.875vw; } .WatchTop100Header .scoredUser{ padding-top:0.9375vw; } .WatchTop100Header .userInfo { width: 2.5vw; height: 2.5vw; margin-right: 0.625vw; } .WatchTop100Header .userInfoB{ width:0; margin-right: 0; } .WatchTop100Header .interacted{ font-size:1vw; height:2.5vw; padding:0 1.25vw; line-height:2.5vw; border-radius:1.25vw; } .WatchTop100Header .scoresBtn{ margin-top:3.4375vw; } .WatchTop100Header .scoresBtn .ScoresButton{ padding:0.9375vw 1.25vw; width:15vw; font-size:1.25vw; } .WatchTop100Header .iconAdd{ right:0.9375vw; width:1.25vw; } } @media screen and (max-width:768px){ .WatchTop100Header .inBox { padding: 0 5%; } .WatchTop100Header .cBox { width: 113.53vw; height: 113.53vw; } .WatchTop100Header .title { padding-top: 4.83vw; } .WatchTop100Header .tt0{ width:42.75vw; height:26.33vw; background-image:url(/hk/images/campaign/top100_2025/mobile_title-none.svg?20221216_1); } .WatchTop100Header .tt1 { font-size: 11.66vw; } .WatchTop100Header .tt2 { font-size: 7.25vw; line-height: 1.2em; } .WatchTop100Header .slogan{ margin-top:4.11vw; padding:1.69vw 5.8vw 1.69vw 2.17vw; font-size:3.38vw; } .WatchTop100Header .slogan .arrow{ right:1.93vw; width:1.93vw; } .WatchTop100Header .shareUI { display:block; text-align:center; margin-top: 90vw; padding-bottom: 4.83vw; } .WatchTop100Header .shareUI a { margin:0 4.83vw; } .WatchTop100Header li { width: 5.5vw; height: 5.5vw; } .WatchTop100Header .infoBox { right: 5%; width:90%; padding-top: 4.83vw; text-align: right; pointer-events:none; } .WatchTop100Header .awardA{ position:absolute !important; right:5.375vw !important; top:17.375vw !important; } .WatchTop100Header .liveA{ position:absolute !important; right:5vw !important; top:4.8vw !important; } .WatchTop100Header .award { top: 12.56vw; width: 17.39vw; height: 17.39vw; } .WatchTop100Header .info{ padding-top: 0; padding-left: 0; } .WatchTop100Header .live{ width:14.5vw; height:4.83vw; margin:0 0 0 auto; } .WatchTop100Header .live .dot{ width:1.45vw; height:1.45vw; margin-right:1.93vw; } .WatchTop100Header .alias{ padding-top:29.47vw; font-size:4.38vw; } .WatchTop100Header .brand{ font-size:4.35vw; } .WatchTop100Header .name{ font-size:2.42vw; } .WatchTop100Header .score_avg{ font-size:8.7vw; display:inline-block; } .WatchTop100Header .scored { padding-top: 24.88vw; padding-left: 0; } .WatchTop100Header .iconStar { left: -5.31vw; width: 2.9vw; } .WatchTop100Header .scoredUser{ width:30vw; margin:0 0 0 auto; pointer-events:all; } .WatchTop100Header .userInfo { width: 7.25vw; height: 7.25vw; margin-right: auto; margin-left: 1.21vw; } .WatchTop100Header .userInfoA{ display:none; } .WatchTop100Header .userInfoB{ width:100%; margin-right: 0; } .WatchTop100Header .interacted { display:inline-block; font-size: 2.9vw; min-width:24.17vw; height:auto; padding: 2.42vw 3.38vw; line-height: 1em; border-radius: 3.38vw; text-align:center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin-top:1.69vw; } .WatchTop100Header .scoresBtn { display:block; margin-top: 5.55vw; } .WatchTop100Header .scoresBtn .ScoresButton { padding: 2.42vw 0; width: 41.06vw; font-size: 3.86vw; text-align:center; margin:0 auto; } .WatchTop100Header .iconAdd { right: 2.17vw; width: 2.9vw; } .WatchTop100Header .sponsored{ bottom:5.21vw; width:100%; height:6.77vw; text-align:center; } .WatchTop100Header .sponsored .img_d{ display:none; } .WatchTop100Header .sponsored .img_m{ display:inline-block; } }