Files
SEONexus/code/public/template/videofengniao/css/app2.css
2025-05-12 11:52:54 +08:00

1722 lines
33 KiB
CSS

html {
font: 400 14px/1.5 -apple-system, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "WenQuanYi Micro Hei", "Microsoft Yahei", sans-serif
}
* {
margin: 0;
padding: 0;
list-style: none;
outline: none
}
a {
text-decoration: none
}
.clr {
zoom: 1
}
.none {
display: none !important
}
.row:before, .row:after {
display: table;
content: " "
}
.row:after {
clear: both
}
.row>.col {
position: relative;
min-height: 1px;
float: left
}
.row>.col.r {
float: right
}
.gm-head {
width: 100%;
height: 65px;
box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1), 0 1px rgba(0, 0, 0, .1);
background: #fff
}
.gm-head>.wrap {
position: relative;
width: 100%;
height: 65px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
padding-left: 15px;
padding-right: 15px;
box-sizing: border-box
}
.gm-head>.wrap>.logo {
display: block;
width: 150px;
height: 46px;
background: url(../img/logo_max.png) no-repeat;
background-size: contain
}
.gm-head>.wrap>.logo.tw {
background-image: url(../img/logo2-tw.png)
}
.gm-head>.wrap>.logo:active {
margin-top: 3px
}
.gm-head>.wrap>.btn-nav {
position: absolute;
width: 40px;
height: 40px;
top: 10px;
left: 10px;
background: url(../img/btn-nav.png) no-repeat;
background-size: 24px;
background-position: center center
}
.gm-head>.wrap>.btn-search {
position: absolute;
width: 40px;
height: 40px;
top: 10px;
right: 10px;
background: url(../img/btn-search.png) no-repeat;
background-size: 24px;
background-position: center center
}
.gm-head>.wrap>.nav {
display: none;
margin-left: 30px
}
.gm-head>.wrap>.nav>ul {
display: flex
}
.gm-head>.wrap>.nav>ul>li>a {
display: flex;
align-items: center;
text-decoration: none;
height: 40px;
padding-left: 10px;
padding-right: 10px;
border-radius: 4px;
margin-right: 6px;
animation: all .3s;
color: #111;
animation: all .3s
}
.gm-head>.wrap>.nav>ul>li>a>i {
width: 24px;
height: 24px;
background: url(../img/cat0.png) no-repeat;
background-size: contain;
margin-right: 6px;
opacity: .7
}
.gm-head>.wrap>.nav>ul>li>a>i.t1 {
background-image: url(../img/cat10.png)
}
.gm-head>.wrap>.nav>ul>li>a>i.t2 {
background-image: url(../img/cat11.png)
}
.gm-head>.wrap>.nav>ul>li>a>i.t3 {
background-image: url(../img/cat12.png)
}
.gm-head>.wrap>.nav>ul>li>a>i.t4 {
background-image: url(../img/cat13.png)
}
.gm-head>.wrap>.nav>ul>li>a>i.t39 {
background-image: url(../img/cat14.png)
}
.gm-head>.wrap>.nav>ul>li>a>i.t15 {
background-image: url(../img/cat15.png)
}
.gm-head>.wrap>.nav>ul>li>a>span {
font-size: 14px;
line-height: 28px
}
.gm-head>.wrap>.nav>ul>li>a.on {
background: #f3f3f3;
color: #d9534f;
font-weight: 700
}
.gm-head>.wrap>.nav>ul>li>a:hover {
background: #ededed;
color: #d9534f
}
.gm-head>.wrap>.nav>ul>li>a:hover>i {
opacity: 1
}
.gm-head>.wrap>.search {
display: none;
width: 200px;
position: relative;
margin-left: auto
}
.gm-head>.wrap>.search input {
box-sizing: border-box;
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42858;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 16px
}
.gm-head>.wrap>.search button {
position: absolute;
display: inline-block;
top: 0;
right: 0;
width: 40px;
height: 34px;
background: url(../img/btn-search2.png) no-repeat;
background-size: 18px;
background-position: center;
background-color: #d9534f;
cursor: pointer;
border: 0;
user-select: none;
color: transparent;
transition: all .2s;
border-radius: 0 16px 16px 0
}
.gm-head>.wrap>.search button:hover {
background-color: #ff183e
}
.mi-pop-search {
display: none;
padding: 20px 15px
}
.mi-pop-search>.wrap {
position: relative
}
.mi-pop-search>.wrap input {
box-sizing: border-box;
display: block;
width: 100%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42858;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 16px
}
.mi-pop-search>.wrap button {
position: absolute;
display: inline-block;
top: 0;
right: 0;
width: 40px;
height: 34px;
background: url(../img/btn-search2.png) no-repeat;
background-size: 18px;
background-position: center;
background-color: #d9534f;
cursor: pointer;
border: 0;
user-select: none;
color: transparent;
transition: all .2s;
border-radius: 0 16px 16px 0
}
.mi-pop-search>.wrap button:hover {
background-color: #ff183e
}
.mi-pop-search.on {
display: block
}
.mi-pop-nav {
display: none;
position: absolute;
width: auto;
top: 65px;
left: 8px;
z-index: 100;
padding: 0 20px;
background-color: #fff;
box-shadow: 0 0 20px rgba(0, 0, 0, .2)
}
.mi-pop-nav ul::after {
bottom: 100%;
left: 10px;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-bottom-color: #fff;
border-width: 10px
}
.mi-pop-nav a {
position: relative;
display: block;
text-decoration: none;
font-size: 14px;
line-height: 28px;
border-bottom: 1px solid #dfdfdf;
padding: 10px 0;
padding-left: 30px;
color: #111;
white-space: nowrap;
min-width: 90px
}
.mi-pop-nav a>i,
.gm-list .more a>i{
content: '';
display: block;
position: absolute;
top: 12px;
left: 0;
width: 24px;
height: 24px;
background: url(../img/cat0.png) no-repeat;
background-size: contain
}
.mi-pop-nav a>i.t1,
.gm-list .more a>i.t1{
background-image: url(../img/cat10.png)
}
.mi-pop-nav a>i.t2,
.gm-list .more a>i.t2{
background-image: url(../img/cat11.png)
}
.mi-pop-nav a>i.t3,
.gm-list .more a>i.t3{
background-image: url(../img/cat12.png)
}
.mi-pop-nav a>i.t4,
.gm-list .more a>i.t4{
background-image: url(../img/cat13.png)
}
.mi-pop-nav a>i.t39 {
background-image: url(../img/cat14.png)
}
.mi-pop-nav a>i.t15 {
background-image: url(../img/cat15.png)
}
.mi-pop-nav a.on {
color: #d9534f;
font-weight: 700
}
.mi-pop-nav.on {
display: block
}
@media(min-width:1200px) {
.gm-head>.wrap {
max-width: 1140px;
justify-content: flex-start
}
.gm-head>.wrap>.btn-nav {
display: none
}
.gm-head>.wrap>.btn-search {
display: none
}
.gm-head>.wrap>.nav {
display: block
}
.gm-head>.wrap>.search {
display: block
}
}
@media(min-width:1300px) {
.gm-head>.wrap {
max-width: 1200px
}
}
@media(min-width:1400px) {
.gm-head>.wrap {
max-width: 1220px
}
}
.gm-main {
position: relative;
width: 100%;
padding-left: 10px;
padding-right: 10px;
margin: 0 auto;
box-sizing: border-box
}
@media(min-width:1200px) {
.gm-main {
max-width: 1140px;
padding-left: 15px;
padding-right: 15px
}
}
@media(min-width:1300px) {
.gm-main {
max-width: 1200px
}
}
@media(min-width:1400px) {
.gm-main {
max-width: 1220px
}
}
.gm-meta {
margin-top: 20px;
margin-bottom: 20px;
overflow: hidden
}
.gm-meta>h3 {
float: left;
color: #111;
font-size: 26px;
font-weight: 400;
line-height: 32px;
height: 32px;
margin: 0;
margin-right: 10px
}
.gm-meta>h4 {
color: #111;
font-size: 20px;
font-weight: 400;
line-height: 28px;
margin: 0
}
.gm-meta>a {
float: left;
padding: 0 10px;
margin: 5px 5px 0 0;
border-radius: 17px;
background-color: #f8f8f8;
color: #111;
font-size: 13px;
line-height: 32px;
height: 32px;
text-decoration: none
}
.gm-meta>a.on, .gm-meta>a:hover {
text-decoration: none;
background: linear-gradient(90deg, #ffb821 0, #d9534f 45%, #ff1459);
background-color: #ff183e;
color: #fff
}
.gm-list {
display: flex;
flex-wrap: wrap
}
.gm-list>.item {
box-sizing: border-box;
width: 33.333%;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 20px
}
.gm-list>.item>.link {
*zoom: 1;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
display: block;
position: relative;
width: 100%;
height: 250px;
user-select: none;
margin-bottom: 10px;
background: url(../img/play1.png) no-repeat;
background-size: cover
}
.gm-list>.item>.link>.img {
-o-object-fit: cover;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
background: #f8f8f8;
background-color: #ececec;
background-color: rgba(236, 236, 236, .1);
overflow: hidden;
border-radius: 4px;
transition: box-shadow .15s linear, -webkit-filter .3s ease-out
}
.gm-list>.item>.link>.tag1 {
position: absolute;
top: 0;
right: 0;
pointer-events: none;
background: #d9534f;
color: #fff;
font-size: 12px;
line-height: 20px;
padding-left: 5px;
padding-right: 5px;
border-radius: 2px;
max-width: 64%;
white-space: nowrap;
/* text-overflow: ellipsis; */
overflow: hidden;
}
.gm-list>.item>.link>.tag2 {
position: absolute;
right: 0;
bottom: 0;
left: 0;
width: auto;
height: 20px;
overflow: hidden;
background-image: linear-gradient(transparent, rgba(0, 0, 0, .5));
color: #fff;
font-size: 13px;
letter-spacing: normal;
line-height: 20px;
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
padding-left: 10px;
border-radius: 4px
}
.gm-list>.item>.link>.play {
display: none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: rgba(0, 0, 0, .1) center no-repeat;
background-size: 50px
}
.gm-list>.item>.link:hover>.play {
display: block
}
.gm-list>.item>.link:hover>.img {
box-shadow: 0 4px 8px rgba(40, 40, 40, .2)
}
.gm-list>.item>.info {
height: 44px
}
.gm-list>.item>.info>.title {
display: block;
font-size: 13px;
color: #111;
font-weight: 700;
line-height: 22px;
height: 22px;
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
word-break: break-all;
white-space: nowrap
}
.gm-list>.item>.info>.title>b {
color: #d9534f;
margin-right: 8px
}
.gm-list>.item>.info>.title:hover {
text-decoration: none;
color: #d9534f
}
.gm-list>.item>.info>.desc {
display: block;
font-size: 12px;
color: #999;
font-weight: 400;
line-height: 22px;
height: 22px;
text-overflow: ellipsis;
overflow: hidden;
white-space: normal;
word-break: break-all;
white-space: nowrap
}
@media(min-width:320px) {
.gm-list>.item>.link {
height: 120px
}
}
@media(min-width:360px) {
.gm-list>.item>.link {
height: 138px
}
}
@media(min-width:375px) {
.gm-list>.item>.link {
height: 145px
}
}
@media(min-width:480px) {
.gm-list>.item>.link {
height: 194px
}
}
@media(min-width:768px) {
.gm-list>.item {
padding-left: 10px;
padding-right: 10px;
margin-bottom: 25px
}
.gm-list>.item>.link {
height: 328px
}
.gm-list>.item>.link>.tag1 {
font-size: 13px
}
.gm-list>.item>.info>.title {
font-size: 15px
}
.gm-list>.item>.info>.desc {
font-size: 13px
}
}
@media(min-width:992px) {
.gm-list>.item {
width: 25%
}
.gm-list>.item>.link {
height: 320px
}
}
@media(min-width:1200px) {
.gm-list>.item {
width: 16.666%
}
.gm-list>.item>.link {
height: 250px
}
}
.gm-bread {
margin-top: 10px;
margin-bottom: 10px
}
.gm-bread>ol {
padding: 8px 15px;
list-style: none
}
.gm-bread>ol>li {
display: inline-block
}
.gm-bread>ol>li+li::before {
padding: 0 5px;
color: #ccc;
content: "/\00a0"
}
.gm-bread>ol>li>a {
color: #111
}
.gm-bread>ol>li>a:hover {
color: #d9534f
}
.gm-bread>ol>li.on {
color: #777
}
.gm-page {
padding-bottom: 20px;
text-align: center
}
.gm-page>ul {
display: inline-block;
padding-left: 0;
margin: 20px
}
.gm-page>ul>li {
display: inline
}
.gm-page>ul>li>a, .gm-page>ul>li>span {
position: relative;
float: left;
min-width: 36px;
font-size: 20px;
line-height: 28px;
height: 28px;
padding-top: 4px;
padding-bottom: 4px;
color: #111;
text-align: center;
text-decoration: none;
background-color: #f8f8f8;
margin: 2px;
border-radius: 6px
}
.gm-page>ul>li.on>a, .gm-page>ul>li>a:hover {
text-decoration: none;
background: linear-gradient(90deg, #ffb821 0, #d9534f 45%, #ff1459);
background-color: #ff183e;
color: #fff
}
.gm-foot {
margin-top: 30px;
border-top: 2px solid #d9534f;
padding-top: 30px;
padding-bottom: 30px;
padding-left: 5px;
padding-right: 5px;
color: #999;
font-size: 13px;
line-height: 20px;
text-align: center
}
.gm-foot a {
color: #666
}
.gm-foot a:hover {
color: #d9534f
}
#dom-player {
min-height: 200px;
background: #000
}
#dom-player>.tip {
font-size: 13px;
line-height: 24px;
color: #fff;
padding-top: 60px;
text-align: center
}
.dplayer-notice {
bottom: 30% !important;
font-size: 18px !important;
line-height: 24px !important;
left: 0 !important;
right: 0 !important;
text-align: center;
padding: 20px !important
}
#dom-source {
background: #fff;
border: 2px solid #ddd;
border-top: 0
}
#dom-source>.source {
overflow: hidden;
padding: 8px 6px;
border-top: 2px solid #ddd
}
#dom-source>.source>.title {
font-size: 14px;
line-height: 20px;
color: #333;
font-weight: 700
}
#dom-source>.source>.title>.res {
color: #fff;
background-color: #337ab7;
border-radius: .25em;
padding: 0 .2em
}
#dom-source>.source>.title>.ttl {
font-size: 12px
}
#dom-source>.source>.title>.ttl.v1 {
color: #4cae4c
}
#dom-source>.source>.title>.ttl.v2 {
color: #ec971f
}
#dom-source>.source>.title>.ttl.v3 {
color: #d9534f
}
#dom-source>.source>.list {
overflow: auto
}
#dom-source>.source>.list>a {
float: left;
min-width: 40px;
text-align: center;
font-size: 14px;
line-height: 24px;
height: 24px;
color: #333;
cursor: pointer;
padding: 4px 8px;
border: 1px solid #ccc;
border-radius: 4px;
margin-right: 3px;
margin-bottom: 3px;
background: #fff
}
#dom-source>.source>.list>a:hover {
color: #333;
background-color: #e6e6e6;
border-color: #adadad
}
#dom-source>.source>.list>a.on {
color: #fff;
background-color: #d9534f;
border-color: #d43f3a
}
#dom-source>.source>.list>a.on:hover {
color: #fff;
background-color: #c9302c;
border-color: #ac2925
}
#dom-source>.source.on {
background: #f1f1f1
}
#dom-source>.source:hover {
background: #f1f1f1
}
.gm-vod {
margin-top: 10px;
overflow: hidden
}
.gm-info-tip {
display: inline-block;
padding: 0 3px;
background: #eee;
color: #666;
font-size: 13px;
line-height: 1.5;
margin: 0 auto 5px;
}
.gm-vod>.img {
display: block;
width: 220px;
height: auto;
margin: 0 auto;
margin-bottom: 20px
}
.gm-vod>.more>.title {
color: #111;
font-size: 26px;
font-weight: 400;
line-height: 32px;
margin-bottom: 10px
}
.gm-vod>.more .info {
font-size: 14px;
line-height: 24px;
color: #333;
word-break: break-all
}
.info-box {
margin-top: 5px;
max-height: 150px;
background: #efefefb3;
padding: 5px;
font-size: 13px;
overflow-y: auto;
}
.info-box .info {
color: #666;
font-size: 13px;
}
.link-douban {background: #008000b8;color: #fff;padding: 1px 3px;border-radius: 1px;}
@media(min-width:768px) {
.gm-vod>.img,
.gm-vod>.gm-thumb {
float: left;
margin-right: 20px
}
}
.traffic1 {
border: 0;
width: 160px;
height: 600px;
position: absolute;
top: 40px;
left: -160px
}
.traffic2 {
border: 0;
width: 160px;
height: 600px;
position: absolute;
top: 40px;
right: -160px
}
.traffic3 {
display: block;
border: 0;
width: 728px;
height: 90px;
margin: 10px auto 0
}
.traffic4 {
display: block;
width: 300px;
height: 100px;
margin: 10px auto 0
}
:root {
--balloon-border-radius: 2px;
--balloon-color: rgba(16, 16, 16, 0.95);
--balloon-text-color: #fff;
--balloon-font-size: 12px;
--balloon-move: 4px
}
button[aria-label][data-balloon-pos] {
overflow: visible
}
[aria-label][data-balloon-pos] {
position: relative;
cursor: pointer
}
[aria-label][data-balloon-pos]:after {
text-indent: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif;
font-weight: 400;
font-style: normal;
text-shadow: none;
font-size: var(--balloon-font-size);
background: var(--balloon-color);
border-radius: 2px;
color: var(--balloon-text-color);
border-radius: var(--balloon-border-radius);
content: attr(aria-label);
padding: .5em 1em;
white-space: nowrap
}
[aria-label][data-balloon-pos]:after,
[aria-label][data-balloon-pos]:before {
opacity: 0;
pointer-events: none;
transition: all .18s ease-out .18s;
position: absolute;
z-index: 10
}
[aria-label][data-balloon-pos]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-top: 5px solid var(--balloon-color);
content: ""
}
[aria-label][data-balloon-pos]:hover:after,
[aria-label][data-balloon-pos]:hover:before,
[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:after,
[aria-label][data-balloon-pos]:not([data-balloon-nofocus]):focus:before,
[aria-label][data-balloon-pos][data-balloon-visible]:after,
[aria-label][data-balloon-pos][data-balloon-visible]:before {
opacity: 1;
pointer-events: none
}
[aria-label][data-balloon-pos].font-awesome:after {
font-family: FontAwesome, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue, sans-serif
}
[aria-label][data-balloon-pos][data-balloon-break]:after {
white-space: pre
}
[aria-label][data-balloon-pos][data-balloon-break][data-balloon-length]:after {
white-space: pre-line;
word-break: break-word
}
[aria-label][data-balloon-pos][data-balloon-blunt]:after,
[aria-label][data-balloon-pos][data-balloon-blunt]:before {
transition: none
}
[aria-label][data-balloon-pos][data-balloon-pos=up]:after {
margin-bottom: 10px
}
[aria-label][data-balloon-pos][data-balloon-pos=up]:after,
[aria-label][data-balloon-pos][data-balloon-pos=up]:before {
bottom: 100%;
left: 50%;
transform: translate(-50%, var(--balloon-move));
transform-origin: top
}
[aria-label][data-balloon-pos][data-balloon-pos=up]:hover:after,
[aria-label][data-balloon-pos][data-balloon-pos=up]:hover:before,
[aria-label][data-balloon-pos][data-balloon-pos=up][data-balloon-visible]:after,
[aria-label][data-balloon-pos][data-balloon-pos=up][data-balloon-visible]:before {
transform: translate(-50%)
}
[aria-label][data-balloon-pos][data-balloon-pos=up-left]:after {
bottom: 100%;
left: 0;
margin-bottom: 10px;
transform: translateY(var(--balloon-move));
transform-origin: top
}
[aria-label][data-balloon-pos][data-balloon-pos=up-left]:before {
bottom: 100%;
left: 5px;
transform: translateY(var(--balloon-move));
transform-origin: top
}
[aria-label][data-balloon-pos][data-balloon-pos=up-left]:hover:after,
[aria-label][data-balloon-pos][data-balloon-pos=up-left]:hover:before,
[aria-label][data-balloon-pos][data-balloon-pos=up-left][data-balloon-visible]:after,
[aria-label][data-balloon-pos][data-balloon-pos=up-left][data-balloon-visible]:before {
transform: translate(0)
}
[aria-label][data-balloon-pos][data-balloon-pos=up-right]:after {
bottom: 100%;
right: 0;
margin-bottom: 10px;
transform: translateY(var(--balloon-move));
transform-origin: top
}
[aria-label][data-balloon-pos][data-balloon-pos=up-right]:before {
bottom: 100%;
right: 5px;
transform: translateY(var(--balloon-move));
transform-origin: top
}
[aria-label][data-balloon-pos][data-balloon-pos=up-right]:hover:after,
[aria-label][data-balloon-pos][data-balloon-pos=up-right]:hover:before,
[aria-label][data-balloon-pos][data-balloon-pos=up-right][data-balloon-visible]:after,
[aria-label][data-balloon-pos][data-balloon-pos=up-right][data-balloon-visible]:before {
transform: translate(0)
}
[aria-label][data-balloon-pos][data-balloon-pos=down]:after {
left: 50%;
margin-top: 10px;
top: 100%;
transform: translate(-50%, calc(var(--balloon-move)*-1))
}
[aria-label][data-balloon-pos][data-balloon-pos=down]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom: 5px solid var(--balloon-color);
left: 50%;
top: 100%;
transform: translate(-50%, calc(var(--balloon-move)*-1))
}
[aria-label][data-balloon-pos][data-balloon-pos=down]:hover:after,
[aria-label][data-balloon-pos][data-balloon-pos=down]:hover:before,
[aria-label][data-balloon-pos][data-balloon-pos=down][data-balloon-visible]:after,
[aria-label][data-balloon-pos][data-balloon-pos=down][data-balloon-visible]:before {
transform: translate(-50%)
}
[aria-label][data-balloon-pos][data-balloon-pos=down-left]:after {
left: 0;
margin-top: 10px;
top: 100%;
transform: translateY(calc(var(--balloon-move)*-1))
}
[aria-label][data-balloon-pos][data-balloon-pos=down-left]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom: 5px solid var(--balloon-color);
left: 5px;
top: 100%;
transform: translateY(calc(var(--balloon-move)*-1))
}
[aria-label][data-balloon-pos][data-balloon-pos=down-left]:hover:after,
[aria-label][data-balloon-pos][data-balloon-pos=down-left]:hover:before,
[aria-label][data-balloon-pos][data-balloon-pos=down-left][data-balloon-visible]:after,
[aria-label][data-balloon-pos][data-balloon-pos=down-left][data-balloon-visible]:before {
transform: translate(0)
}
[aria-label][data-balloon-pos][data-balloon-pos=down-right]:after {
right: 0;
margin-top: 10px;
top: 100%;
transform: translateY(calc(var(--balloon-move)*-1))
}
[aria-label][data-balloon-pos][data-balloon-pos=down-right]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-bottom: 5px solid var(--balloon-color);
right: 5px;
top: 100%;
transform: translateY(calc(var(--balloon-move)*-1))
}
[aria-label][data-balloon-pos][data-balloon-pos=down-right]:hover:after,
[aria-label][data-balloon-pos][data-balloon-pos=down-right]:hover:before,
[aria-label][data-balloon-pos][data-balloon-pos=down-right][data-balloon-visible]:after,
[aria-label][data-balloon-pos][data-balloon-pos=down-right][data-balloon-visible]:before {
transform: translate(0)
}
[aria-label][data-balloon-pos][data-balloon-pos=left]:after {
margin-right: 10px;
right: 100%;
top: 50%;
transform: translate(var(--balloon-move), -50%)
}
[aria-label][data-balloon-pos][data-balloon-pos=left]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-left: 5px solid var(--balloon-color);
right: 100%;
top: 50%;
transform: translate(var(--balloon-move), -50%)
}
[aria-label][data-balloon-pos][data-balloon-pos=left]:hover:after,
[aria-label][data-balloon-pos][data-balloon-pos=left]:hover:before,
[aria-label][data-balloon-pos][data-balloon-pos=left][data-balloon-visible]:after,
[aria-label][data-balloon-pos][data-balloon-pos=left][data-balloon-visible]:before {
transform: translateY(-50%)
}
[aria-label][data-balloon-pos][data-balloon-pos=right]:after {
left: 100%;
margin-left: 10px;
top: 50%;
transform: translate(calc(var(--balloon-move)*-1), -50%)
}
[aria-label][data-balloon-pos][data-balloon-pos=right]:before {
width: 0;
height: 0;
border: 5px solid transparent;
border-right: 5px solid var(--balloon-color);
left: 100%;
top: 50%;
transform: translate(calc(var(--balloon-move)*-1), -50%)
}
[aria-label][data-balloon-pos][data-balloon-pos=right]:hover:after,
[aria-label][data-balloon-pos][data-balloon-pos=right]:hover:before,
[aria-label][data-balloon-pos][data-balloon-pos=right][data-balloon-visible]:after,
[aria-label][data-balloon-pos][data-balloon-pos=right][data-balloon-visible]:before {
transform: translateY(-50%)
}
[aria-label][data-balloon-pos][data-balloon-length=small]:after {
white-space: normal;
width: 80px
}
[aria-label][data-balloon-pos][data-balloon-length=medium]:after {
white-space: normal;
width: 150px
}
[aria-label][data-balloon-pos][data-balloon-length=large]:after {
white-space: normal;
width: 260px
}
[aria-label][data-balloon-pos][data-balloon-length=xlarge]:after {
white-space: normal;
width: 380px
}
@media screen and (max-width:768px) {
[aria-label][data-balloon-pos][data-balloon-length=xlarge]:after {
white-space: normal;
width: 90vw
}
}
[aria-label][data-balloon-pos][data-balloon-length=fit]:after {
white-space: normal;
width: 100%
}
@-webkit-keyframes my-face {
2% {
transform: translateY(1.5px) rotate(1.5deg)
}
4% {
transform: translateY(-1.5px) rotate(-.5deg)
}
6% {
transform: translateY(1.5px) rotate(-1.5deg)
}
8% {
transform: translateY(-1.5px) rotate(-1.5deg)
}
10% {
transform: translateY(2.5px) rotate(1.5deg)
}
12% {
transform: translateY(-.5px) rotate(1.5deg)
}
14% {
transform: translateY(-1.5px) rotate(1.5deg)
}
16% {
transform: translateY(-.5px) rotate(-1.5deg)
}
18% {
transform: translateY(.5px) rotate(-1.5deg)
}
20% {
transform: translateY(-1.5px) rotate(2.5deg)
}
22% {
transform: translateY(.5px) rotate(-1.5deg)
}
24% {
transform: translateY(1.5px) rotate(1.5deg)
}
26% {
transform: translateY(.5px) rotate(.5deg)
}
28% {
transform: translateY(.5px) rotate(1.5deg)
}
30% {
transform: translateY(-.5px) rotate(2.5deg)
}
32% {
transform: translateY(1.5px) rotate(-.5deg)
}
34% {
transform: translateY(1.5px) rotate(-.5deg)
}
36% {
transform: translateY(-1.5px) rotate(2.5deg)
}
38% {
transform: translateY(1.5px) rotate(-1.5deg)
}
40% {
transform: translateY(-.5px) rotate(2.5deg)
}
42% {
transform: translateY(2.5px) rotate(-1.5deg)
}
44% {
transform: translateY(1.5px) rotate(.5deg)
}
46% {
transform: translateY(-1.5px) rotate(2.5deg)
}
48% {
transform: translateY(-.5px) rotate(.5deg)
}
50% {
transform: translateY(.5px) rotate(.5deg)
}
52% {
transform: translateY(2.5px) rotate(2.5deg)
}
54% {
transform: translateY(-1.5px) rotate(1.5deg)
}
56% {
transform: translateY(2.5px) rotate(2.5deg)
}
58% {
transform: translateY(.5px) rotate(2.5deg)
}
60% {
transform: translateY(2.5px) rotate(2.5deg)
}
62% {
transform: translateY(-.5px) rotate(2.5deg)
}
64% {
transform: translateY(-.5px) rotate(1.5deg)
}
66% {
transform: translateY(1.5px) rotate(-.5deg)
}
68% {
transform: translateY(-1.5px) rotate(-.5deg)
}
70% {
transform: translateY(1.5px) rotate(.5deg)
}
72% {
transform: translateY(2.5px) rotate(1.5deg)
}
74% {
transform: translateY(-.5px) rotate(.5deg)
}
76% {
transform: translateY(-.5px) rotate(2.5deg)
}
78% {
transform: translateY(-.5px) rotate(1.5deg)
}
80% {
transform: translateY(1.5px) rotate(1.5deg)
}
82% {
transform: translateY(-.5px) rotate(.5deg)
}
84% {
transform: translateY(1.5px) rotate(2.5deg)
}
86% {
transform: translateY(-1.5px) rotate(-1.5deg)
}
88% {
transform: translateY(-.5px) rotate(2.5deg)
}
90% {
transform: translateY(2.5px) rotate(-.5deg)
}
92% {
transform: translateY(.5px) rotate(-.5deg)
}
94% {
transform: translateY(2.5px) rotate(.5deg)
}
96% {
transform: translateY(-.5px) rotate(1.5deg)
}
98% {
transform: translateY(-1.5px) rotate(-.5deg)
}
0%,
to {
transform: translate(0) rotate(0deg)
}
}
@keyframes my-face {
2% {
transform: translateY(1.5px) rotate(1.5deg)
}
4% {
transform: translateY(-1.5px) rotate(-.5deg)
}
6% {
transform: translateY(1.5px) rotate(-1.5deg)
}
8% {
transform: translateY(-1.5px) rotate(-1.5deg)
}
10% {
transform: translateY(2.5px) rotate(1.5deg)
}
12% {
transform: translateY(-.5px) rotate(1.5deg)
}
14% {
transform: translateY(-1.5px) rotate(1.5deg)
}
16% {
transform: translateY(-.5px) rotate(-1.5deg)
}
18% {
transform: translateY(.5px) rotate(-1.5deg)
}
20% {
transform: translateY(-1.5px) rotate(2.5deg)
}
22% {
transform: translateY(.5px) rotate(-1.5deg)
}
24% {
transform: translateY(1.5px) rotate(1.5deg)
}
26% {
transform: translateY(.5px) rotate(.5deg)
}
28% {
transform: translateY(.5px) rotate(1.5deg)
}
30% {
transform: translateY(-.5px) rotate(2.5deg)
}
32% {
transform: translateY(1.5px) rotate(-.5deg)
}
34% {
transform: translateY(1.5px) rotate(-.5deg)
}
36% {
transform: translateY(-1.5px) rotate(2.5deg)
}
38% {
transform: translateY(1.5px) rotate(-1.5deg)
}
40% {
transform: translateY(-.5px) rotate(2.5deg)
}
42% {
transform: translateY(2.5px) rotate(-1.5deg)
}
44% {
transform: translateY(1.5px) rotate(.5deg)
}
46% {
transform: translateY(-1.5px) rotate(2.5deg)
}
48% {
transform: translateY(-.5px) rotate(.5deg)
}
50% {
transform: translateY(.5px) rotate(.5deg)
}
52% {
transform: translateY(2.5px) rotate(2.5deg)
}
54% {
transform: translateY(-1.5px) rotate(1.5deg)
}
56% {
transform: translateY(2.5px) rotate(2.5deg)
}
58% {
transform: translateY(.5px) rotate(2.5deg)
}
60% {
transform: translateY(2.5px) rotate(2.5deg)
}
62% {
transform: translateY(-.5px) rotate(2.5deg)
}
64% {
transform: translateY(-.5px) rotate(1.5deg)
}
66% {
transform: translateY(1.5px) rotate(-.5deg)
}
68% {
transform: translateY(-1.5px) rotate(-.5deg)
}
70% {
transform: translateY(1.5px) rotate(.5deg)
}
72% {
transform: translateY(2.5px) rotate(1.5deg)
}
74% {
transform: translateY(-.5px) rotate(.5deg)
}
76% {
transform: translateY(-.5px) rotate(2.5deg)
}
78% {
transform: translateY(-.5px) rotate(1.5deg)
}
80% {
transform: translateY(1.5px) rotate(1.5deg)
}
82% {
transform: translateY(-.5px) rotate(.5deg)
}
84% {
transform: translateY(1.5px) rotate(2.5deg)
}
86% {
transform: translateY(-1.5px) rotate(-1.5deg)
}
88% {
transform: translateY(-.5px) rotate(2.5deg)
}
90% {
transform: translateY(2.5px) rotate(-.5deg)
}
92% {
transform: translateY(.5px) rotate(-.5deg)
}
94% {
transform: translateY(2.5px) rotate(.5deg)
}
96% {
transform: translateY(-.5px) rotate(1.5deg)
}
98% {
transform: translateY(-1.5px) rotate(-.5deg)
}
0%,
to {
transform: translate(0) rotate(0deg)
}
}
.gm-index .gm-list .item {
display: none;
}
.gm-index .gm-list .item:nth-child(-n+6) {
display: block;
}
.gm-list .more {
width: 100%;
/*display: none;*/
height: 35px;
text-align: center;
margin-top: -5px;
position: relative;
}
.gm-list .more a {
display: inline-block;
width: 42%;
padding: 5px 0;
background: #f8f8f8;
text-align: center;
border-radius: 3px;
color: #333;
font-size: 13px;
line-height: 24px;
cursor: pointer;
}
/*.gm-list .more a:hover {background: #f1f1f1;}*/
.more i {
position: relative!important;
display: inline-block!important;
vertical-align: middle;
line-height: 40px;
top: 0!important;
margin-right: 5px;
}
.tab-tit-box {
float: right;
line-height: 32px;
}
.tab-tit-box a {
color: #999;
padding: 0 3px;
cursor: pointer;
}
.tab-tit-box a.on {color: #333;}