@charset "utf-8";
											.UIHypeIcon{		 } .UIHypeIcon>.outBox{ } @media screen and (max-width:768px){ .UIHypeIcon{		 } .UIHypeIcon>.outBox{ } }																				 .UIHypeIcon{					 cursor:pointer;					 pointer-events:all;					 position: relative;					 z-index:2;					 } .UIHypeIcon .icon{ width:15px; height:15px; position: relative; } .UIHypeIcon .hypeIndex .icon{ width:15px !important; height:15px !important;; } .UIHypeIcon .hypeIcon0{ background-image:url(/tw/images/common/ico_hype_frame.svg); } .UIHypeIcon .hypeIcon1{ background-image:url(/tw/images/common/ico_hype_gray.svg); } .UIHypeIcon .hypeIcon2{ background-image:url(/tw/images/common/ico_hype_golden.svg); } .UIHypeIcon .hypeIcon3{ background-image:url(/tw/images/common/ico_hype_yellow.svg); } .UIHypeIcon .hypeIcon4{ background-image:url(/tw/images/common/ico_hype_orange.svg); } .UIHypeIcon .hypeIcon5{ background-image:url(/tw/images/common/ico_hype_red.svg); } .UIHypeIcon .hypeIcon6{ background-image:url(/tw/images/common/ico_hype_purple.svg); } .UIHypeIcon .text{ font-size:12px; color:#AAA; } .UIHypeIcon .textA{ color:#0CF; } .UIHypeIcon .plus{ padding: 0 2px 0 6px; } .UIHypeIcon .count{ padding:0 5px; color:#d00; } .UIHypeIcon .tip{ position: absolute; left:50%; bottom:calc(100% + 10px); display:none; line-height:1.4; } .UIHypeIcon .tipA{ position: relative; left: -50%; background-color:#222; border:0 #fff solid; color:#fff; padding:10px 20px 15px 20px; /*width:200px;*/ border-top-left-radius: 10px; /*border-top-right-radius: 10px;*/ border-bottom-right-radius: 10px; text-align:left; } .UIHypeIcon .arrow { position:relative; left:-7px; width: 0; height: 0; border-top: #222 10px solid; border-right: transparent 7px solid; border-left: transparent 7px solid; } .UIHypeIcon .hypeIndex{ font-size:16px; padding:0 0 5px 0; white-space: nowrap; } .UIHypeIcon .hypeRange{ font-size:12px; white-space: nowrap; } .UIHypeIcon .hypeLevel0{ color:#555; } .UIHypeIcon .hypeLevel1{ color:#939393; } .UIHypeIcon .hypeLevel2{ color:#cbab82; } .UIHypeIcon .hypeLevel3{ color:#f7c61b; } .UIHypeIcon .hypeLevel4{ color:#f38d05; } .UIHypeIcon .hypeLevel5{ color:#e40f00; } .UIHypeIcon .hypeLevel6{ color:#bc37d3; } .UIHypeIcon .hypeIconA{ margin:0 3px 0 10px; } .UIHypeIcon .note{ padding:3px 0 0 0; font-size:12px; color:#aaa; } @media screen and (max-width:768px){ .UIHypeIcon .icon{ width:3.62vw; height:3.62vw; margin: 0 auto; } .UIHypeIcon .hypeIndex .icon{ width:3.62vw !important; height:3.62vw !important;; } .UIHypeIcon .text{ font-size:3vw; } .UIHypeIcon .plus{ padding: 0 0.483vw 0 0.966vw; } .UIHypeIcon .count{ padding:0 1.21vw; } .UIHypeIcon .tip{ bottom:calc(100% + 2.42vw); } .UIHypeIcon .tipA{ padding:2.42vw 4.84vw 3.62vw 4.84vw; /*width:48.31vw;*/ border-top-left-radius: 2.42vw; /*border-top-right-radius: 2.42vw;*/ border-bottom-right-radius: 2.42vw; } .UIHypeIcon .arrow { left:-1.69vw; border-top: #222 2.42vw solid; border-right: transparent 1.69vw solid; border-left: transparent 1.69vw solid; } .UIHypeIcon .hypeIndex{ font-size:3.86vw; padding:0 0 1.21vw 0; } .UIHypeIcon .hypeRange{ font-size:2.9vw; } .UIHypeIcon .hypeIconA{ margin:0 0.72vw 0 2.42vw; } .UIHypeIcon .note{ padding:0.72vw 0 0 0; font-size:2.9vw; } }