@charset "UTF-8"; /*-- 页面辅助文字 --*/ /*-- 页面辅助文字 --*/ /* -- 按钮 -- */ /*-- 文本截取,超出一行行加省略号 --*/ /*-- 文本截取,超出两行加省略号 --*/ /*-- 圆角 --*/ /*-- inline-block --*/ /*-- 透明度 --*/ /*-- 一级下拉菜单样式 --*/ /*-- 导航下拉菜单原始样式 --*/ /*-- 导航下拉菜单hover样式 --*/ /*-- new标记 --*/ /*-- 分隔符 --*/ /*-- 按钮通用 --*/ /*-- 卡片透明度 --*/ /*-- 小三角朝下投影效果 --*/ /*-- 页面辅助文字 --*/ /*-- 页面辅助文字 --*/ /* -- 按钮 -- */ /*-- 文本截取,超出一行行加省略号 --*/ /*-- 文本截取,超出两行加省略号 --*/ /*-- 圆角 --*/ /*-- inline-block --*/ /*-- 透明度 --*/ /*-- 一级下拉菜单样式 --*/ /*-- 导航下拉菜单原始样式 --*/ /*-- 导航下拉菜单hover样式 --*/ /*-- new标记 --*/ /*-- 分隔符 --*/ /*-- 按钮通用 --*/ /*-- 卡片透明度 --*/ /*-- 小三角朝下投影效果 --*/ .pop-share-more { position: fixed; top: 50%; left: 50%; margin-left: -210px; margin-top: -170px; z-index: 13; background: #ffffff; border-radius: 4px; } .pop-share-more .bds-box { width: 420px; padding: 20px 60px; background: #ffffff; box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; z-index: 1; *zoom: 1; } .pop-share-more .bds-box:after { content: ""; display: table; } .pop-share-more .bds-box:after { clear: both; } .bds-r-icon { margin-top: 25px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .bds-r-icon a, .bds-r-icon > span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; cursor: pointer; } .weixin-box { width: 120px; padding-right: 30px; text-align: center; *zoom: 1; } .weixin-box:after { content: ""; display: table; } .weixin-box:after { clear: both; } .weixin-box .work-weixin { display: block; margin-top: 0px; } .weixin-code-box { text-align: center; } .weixin-code-box .active-wexin-code { width: 100px; height: 100px; padding: 10px; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; } .share-to-box .work-sina .jtico, .share-to-box .work-qq .jtico, .share-to-box .work-qzone .jtico { padding-left: 0 !important; padding-top: 40px; background-position: center top; } .share-to-box .work-weixin .jtico, .share-to-box .work-sina .jtico, .share-to-box .work-qq .jtico, .share-to-box .work-qzone .jtico { padding-left: 30px; font-size: 12px; margin-bottom: 6px; overflow: initial; display: inline-block; } .share-to-box .bds-r-icon .icon { width: 40px; height: 40px; margin-bottom: 6px; overflow: initial; display: inline-block; } .share-to-box .work-weixin .jtico { line-height: 36px; padding-left: 0 !important; background: none !important; display: inline !important; float: none; } .share-to-box .work-sina .icon { background-image: url(../images/svg/sina-icon2.svg); } .share-to-box .work-qq .icon { background-image: url(../images/svg/qq-icon2.svg); } .share-to-box .work-qzone .icon { background-image: url(../images/svg/qzone2.svg); } .share-to-box .work-copy .icon { background-image: url(../images/svg/share-icon-copy.svg); } .WB_share_button .ico_share_btn_mini { height: 19px; background-image: url(../images/svg/qq-icon2.svg); } .share-to-box .work-weixin .jtico, .share-to-box .work-sina .jtico, .share-to-box .work-qq .jtico, .share-to-box .work-qzone .jtico, .share-to-box .app-jtico { font-size: 14px; color: #999; } .share-to-box .app-jtico { line-height: 32px; display: block; text-align: center; } .app-code, .app-code img { width: 120px; height: 120px; margin: auto; } .clear { *zoom: 1; } .clear:after { content: ""; display: table; } .clear:after { clear: both; } .edits-album-pop { width: 512px; margin-left: -256px; margin-top: -224px; } .edits-album-pop .album-name-text { width: 100%; } .privacy-setting { color: #666666; font-size: 12px; margin-top: 5px; } .privacy-setting label { margin-right: 15px; margin-top: 10px; } .secondary-tips-copy { color: #bbbbbb; font-size: 12px; cursor: text; cursor: pointer; } .ablum-req-prompt { color: #999999; font-size: 12px; margin-right: 5px; } .album-popup-con { max-height: 343px; } .collect-album-pop { width: 498px; margin-left: -249px; top: 50%; margin-top: -232px; } .album-pop-list li { height: 68px; padding: 19px 0; margin: 0 30px; border-bottom: 1px solid #eeeeee; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-sizing: border-box; box-sizing: border-box; *zoom: 1; } .album-pop-list li:after { content: ""; display: table; } .album-pop-list li:after { clear: both; } .album-pop-list li:last-of-type { border-bottom: 0; } .album-name-cover { max-width: 240px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .album-name-cover .p-album-name { display: inline-block; max-width: 206px; float: left; line-height: 28px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .add-new-category { height: 67px; line-height: 67px; text-align: center; border-top: 1px solid #eeeeee; } .add-newcate-btn { height: 24px; line-height: 0px; color: #444; text-align: center; background: url("../images/svg/add-work-icon.svg") no-repeat; padding-left: 34px; cursor: pointer; } .fav-btn-size { width: 72px; height: 28px; } .fav-loading-cover { height: 28px; } .ablum-list-right { margin-left: auto; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .ablum-list-right .label-checkbox { float: right; margin-top: 16px; margin-left: 10px; } .ablum-list-right .label-checkbox input[type="checkbox"] { margin-right: 1px; } .alfolder-icon-public { background-image: url("../images/svg/album-card-public.svg"); } .alfolder-icon-privacy { background-image: url("../images/svg/alubm-card-privacy.svg"); } .alfolder-icon-public, .alfolder-icon-privacy { width: 14px; height: 28px; line-height: 28px; display: inline-block; background-repeat: no-repeat; background-size: auto 14px; background-position: center center; margin-left: 4px; } .collect-search-bar { padding: 20px 30px; } .collect-search-bar input { width: 100%; } .absolute-card { position: absolute; } .avatar-container-80.center { left: auto; -webkit-transform: none; transform: none; } .photo-information-content .image-info-icons { width: 100%; } .sidebar-fixed_warm-prompt { min-width: 116px; white-space: nowrap; padding: 0 20px; text-align: center; line-height: 38px; background: #ffffff; -webkit-box-shadow: 0 0 4px 0 rgba(125, 137, 148, 0.27); box-shadow: 0 0 4px 0 rgba(125, 137, 148, 0.27); border-radius: 2px; position: absolute; right: 60px; top: 50%; margin-top: -19px; -webkit-box-sizing: border-box; box-sizing: border-box; display: none; } .sidebar-fixed_warm-prompt::after { content: ""; border-top: 5px solid transparent; border-right: none; border-bottom: 5px solid transparent; border-left: 5px solid #fff; right: -5px; top: 50%; margin-top: -5px; position: absolute; } .sidebar-fixed_warm-prompt.isfirst-show { opacity: 0; background: #ffe300; display: block; -webkit-transition: all 0.5s; transition: all 0.5s; } .sidebar-fixed_warm-prompt.isfirst-show::after { border-top: 5px solid transparent; border-right: none; border-bottom: 5px solid transparent; border-left: 5px solid #ffe300; } .sidebar-fixed_warm-prompt.warm-ani-fadeIn { opacity: 1; } .sidebar-fixed-wrapper .unlogin-recommended-tips { right: 60px; top: 50%; margin-top: -52px; } .sidebar-fixed-wrapper .unlogin-recommended-tips::before { left: auto; right: -12px; top: 50%; margin-top: -5px; -webkit-transform: rotate(90deg); transform: rotate(90deg); } .sidebar-unlogin { color: #D36F16; line-height: 14px; font-size: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .sidebar-unlogin, .collect-middle-icon, .comments-middle-icon, .share-middle-icon { border: 1px solid #E9E9E9; background-color: #ffffff; -webkit-transition: background .3s; transition: background .3s; } .sidebar-unlogin:hover, .collect-middle-icon:hover, .comments-middle-icon:hover, .share-middle-icon:hover { background-color: #E9E9E9; } .sidebar-unlogin:hover .sidebar-fixed_warm-prompt, .collect-middle-icon:hover .sidebar-fixed_warm-prompt, .comments-middle-icon:hover .sidebar-fixed_warm-prompt, .share-middle-icon:hover .sidebar-fixed_warm-prompt { display: block; } .collect-middle-icon { background-image: url(../images/svg/shoucang-middle.svg); } .comments-middle-icon { background-image: url(../images/svg/pinglun-middle.svg); } .share-middle-icon { background-image: url(../images/svg/share-middle.svg); } .preview-collect-middle-icon, .preview-comments-middle-icon, .preview-like-icon, .preview-share-middle-icon { background-color: #eeeeee; pointer-events: none; } .preview-collect-middle-icon { background-image: url(../images/svg/shoucang-middle-grey.svg); } .preview-comments-middle-icon { background-image: url(../images/svg/pinglun-middle-grey.svg); } .preview-like-icon { background-image: url(../images/svg/dianzan-grey.svg); } .preview-share-middle-icon { background-image: url(../images/svg/share-middle-grey.svg); } .like-icon { border: 1px solid #E9E9E9; background-color: #ffffff; -webkit-transition: all linear 0.2s; transition: all linear 0.2s; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } .like-icon:not(.active):hover .sidebar-fixed_warm-prompt:not(.isfirst-show) { display: block; } .like-icon:not(.active):not(.recommend-playing-animation):hover { background-color: #E9E9E9; } .sidebar-fixed_box.like-icon .like-effect { top: -11px; left: -2px; } .fixed-comment-bar { width: 620px; position: fixed; bottom: 30px; left: 50%; margin-left: -310px; z-index: 10; -webkit-box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); } .fixed-comment-bar > section { padding: 20px 30px; } .fixed-comment-bar .popup-title { font-size: 16px; color: #333333; } .fixed-comment-bar button { width: 88px; height: 42px; } .fixed-comment-bar .fixed-comment-left { width: 462px; position: relative; } .fixed-comment-bar .fixed-comment-left textarea { padding-right: 143px !important; overflow-y: auto; } .fixed-comment-bar .fixed-comment-left .count { right: 106px; } .fixed-comment-bar .fixed-comment-left .biaoqing { position: absolute; right: 20px; font-size: 12px; top: 50%; margin-top: -10px; background-size: 14px 14px; background-position-x: 10px; } .fixed-comment-bar .fixed-comment-left .biaoqing::after { content: ""; height: 8px; position: absolute; left: 0; top: 50%; margin-top: -4px; border-left: 1px solid #dddddd; } .z-fadeOut { visibility: hidden; opacity: 0; -webkit-transition: visibility .3s linear, opacity .3s linear; transition: visibility .3s linear, opacity .3s linear; } .z-fadeIn { visibility: visible; opacity: 1; } .pulse, .pulse1 { left: 50%; margin-left: -20px; top: 50%; margin-top: -20px; } /* 产生动画(向外扩散变大)的圆圈 */ .pulse { position: absolute; width: 20px; height: 20px; border: 10px solid #FFA200; border-radius: 50%; opacity: 0; } .pulse.play { -webkit-animation: warn 0.8s ease-out; animation: warn 0.8s ease-out; } .pulse1 { position: absolute; width: 40px; height: 40px; background-color: #FFA200; border-radius: 50%; opacity: 0; } .pulse1.play { -webkit-animation: warn1 0.9s ease-out; animation: warn1 0.9s ease-out; } .air-fff { padding: 12px 23px; position: absolute; background: white; border-radius: 4px; -webkit-box-shadow: rgba(125, 137, 148, 0.27) 0px 0px 10px 0px; box-shadow: rgba(125, 137, 148, 0.27) 0px 0px 10px 0px; } .air-fff::after { content: ""; display: block; border: 4px solid transparent; border-top: 6px solid #ffffff; position: absolute; right: 42px; border-bottom: 0; bottom: -6px; } .content { margin: 20px auto 0; } .content .work-details-left { float: left; -webkit-box-sizing: border-box; box-sizing: border-box; } .txt-con, .article-content-wraper p { color: #666666; } .vertical-line { border-right: 1px solid #f2f2f2; } .discover-tag, .album-tag { width: 48px; height: 24px; background: rgba(0, 0, 0, 0.5); position: absolute; top: 0; line-height: 25px; text-align: center; font-size: 12px; color: #ffffff; display: inline-block; z-index: 10; border-radius: 0 0 4px 0; } .details-right-wrap { width: 260px; float: right; margin-left: 18px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; } .designer-card .btn-area .private-letter { margin-right: 0; } .infomation-work .rightnew-arrows { cursor: pointer; } .infomation-work .show-list-title-box:hover .select-shixin-arrow { background: url(../images/common/shixinjiantouhover.svg) no-repeat; } .infomation-work .info-list { border-top: 1px solid #eeeeee; } .infomation-work .info-list li { padding: 20px 0; margin: 0 20px; border-top: 1px solid #eeeeee; *zoom: 1; } .infomation-work .info-list li:after { content: ""; display: table; } .infomation-work .info-list li:after { clear: both; } .infomation-work .info-list li .info-list-title { font-size: 14px; color: #666666; background-repeat: no-repeat; background-position: left; } .infomation-work .info-list li .info-list-decra { margin-top: 7px; font-size: 12px; } .infomation-work .info-list li .info-list-decra .creat-img { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; float: left; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; } .infomation-work .info-list li .info-list-decra .creat-img img { width: 100%; height: 100%; } .infomation-work .info-list li .info-list-decra .nick-adress { margin-left: 10px; font-size: 16px; color: #bbbbbb; float: left; } .infomation-work .info-list li .info-list-decra .nick-adress b { display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; } .infomation-work .info-list li .info-list-decra .nick-adress b a { max-width: 156px; color: #444444; font-weight: 600; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .infomation-work .info-list li .info-list-decra .nick-adress b a:hover { color: #d36f16; } .infomation-work .info-list li .info-list-decra .nick-adress span { padding-left: 13px; font-size: 12px; background: url(../images/svg/dingwei-icon.svg) no-repeat left 4px; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; } .infomation-work .info-list li .create-team-details { margin-top: 12px; } .infomation-work .info-list li .creat-time-box, .infomation-work .info-list li .creat-tools-box { color: #999999; } .infomation-work .info-list li:first-of-type { border-top: 0; } .user-work { width: 260px; height: 196px; margin: 10px auto 0; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; overflow: hidden; } .user-work img { width: 100%; height: 196px; display: block; margin: 0 auto; } .user-work span { width: 260px !important; height: 196px !important; } .user-work span img { width: 260px !important; height: 196px !important; } .card .card-model ul li.group { width: 260px; } .card .card-model ul li.group img.card-main { width: 100%; height: 196px; } .details-userinfo-wrap { background: #ffffff; margin-top: 10px; margin-bottom: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; *zoom: 1; } .details-userinfo-wrap:after { content: ""; display: table; } .details-userinfo-wrap:after { clear: both; } .pop-up-normal { position: fixed; } .typetext-box { padding: 30px; float: left; } .typetext-box .new-typebox { width: 308px; position: relative; float: left; margin-right: 30px; } .typetext-box .new-typebox .text-style { width: 100%; } .typetext-box .newtype-text { padding-right: 40px; float: left; } .typetext-box .text-complete { line-height: 42px; color: #d36f16; margin-right: 20px; cursor: pointer; } .typetext-box .text-complete.disabled { color: #999999; } .typetext-box .text-cancel { line-height: 42px; color: #666666; cursor: pointer; } .card-designer-list-details .author-info .btn-area .btn-current { width: 88px; height: 36px; margin-right: 6px; } .fav-loadding { height: 42px; padding: 20px 0; text-align: center; } .pop-select { width: 373px; float: left; } .pop-up .flat { width: 373px; float: left; } .pop-up .add-typeicon { width: 28px; height: 28px; float: right; margin-top: 6px; background: url(../images/addtype.png) no-repeat; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; cursor: pointer; } .pop-up .counter { top: 50%; margin-top: -9px; } .details-contitle-box h2 { color: #333333; font-size: 24px; font-weight: normal; display: inline-block; } .details-contitle-box .title-time { padding-top: 8px; font-size: 14px; color: #bbbbbb; } .details-contitle-box .work-head-box { padding-top: 9px; *zoom: 1; } .details-contitle-box .work-head-box:after { content: ""; display: table; } .details-contitle-box .work-head-box:after { clear: both; } .details-contitle-box .work-head-box .head-left { float: left; } .details-contitle-box .work-head-box .head-right { float: right; overflow: hidden; } .details-contitle-box .work-head-box .head-data-show { *zoom: 1; margin-right: -27px; float: right; } .details-contitle-box .work-head-box .head-data-show:after { content: ""; display: table; } .details-contitle-box .work-head-box .head-data-show:after { clear: both; } .details-contitle-box .work-head-box .head-index { font-size: 14px; color: #bbbbbb; } .details-contitle-box .work-head-box .copy-con { margin-left: 45px; position: rela-tive; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; } .details-contitle-box .work-head-box .copy-con .copy-icon { float: left; width: 16px; height: 16px; margin-right: 7px; background: url(../images/svg/banquan.svg) no-repeat center; background-size: 16px 16px; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; position: relative; } .details-contitle-box .work-head-box .copy-con .copy-icon:before { content: ""; display: none; border-top: none; border-right: 4px solid transparent; border-bottom: 4px solid #282828; border-left: 4px solid transparent; position: absolute; left: 4px; top: 16px; } .details-contitle-box .work-head-box .copy-con .copy-icon:hover:before { display: block; } .details-contitle-box .work-head-box .copy-con .copy-tips { width: auto; padding: 0 26px; height: 32px; background: #282828; display: block; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; position: absolute; bottom: -36px; left: 0; color: #ffffff; text-align: center; line-height: 32px; font-size: 12px; display: none; -webkit-box-sizing: border-box; box-sizing: border-box; white-space: nowrap; z-index: 10; } .details-contitle-box .see, .details-contitle-box .news, .details-contitle-box .recommend-show { display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; padding-left: 25px; padding-right: 27px; margin-left: 27px; color: #bbbbbb; font-size: 14px; background-repeat: no-repeat; background-position: left 0; float: left; position: relative; cursor: default; } .details-contitle-box .see i, .details-contitle-box .news i, .details-contitle-box .recommend-show i { float: left; margin-right: 8px; position: absolute; left: 0; top: 50%; background-repeat: no-repeat; background-size: 16px auto; } .details-contitle-box .see i { width: 16px; height: 16px; background-image: url(../images/svg/card-liulan.svg?v=1); margin-top: -5.5px; } .details-contitle-box .news i { width: 16px; height: 16px; background-image: url(../images/svg/card-pinglun.svg?v=1); margin-top: -7px; } .details-contitle-box .recommend-show i { width: 16px; height: 16px; background-image: url(../images/svg/card-zan.svg?v=1); margin-top: -9.5px; } .recommend-box { margin: 40px 0; position: relative; } .recommend-box .recommend-pointer { width: 118px; height: 72px; display: block; position: absolute; left: 50%; margin-left: -59px; top: 0; } .recommend-box .normal:hover { background-color: #ffd100; } .recommend-works { width: 118px; height: 72px; padding-top: 13px; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #ffe300; margin: 0 auto; border-radius: 50px; cursor: pointer; -webkit-box-sizing: border-box; box-sizing: border-box; } .recommend-works .like-effect { top: -7px; left: 32px; } .recommend-works .recommend-number { font-size: 14px; display: block; } .recommend-works .unlogin-recommended-tips { top: 82px; left: 50%; margin-left: -115px; } .recommend-works.preview-recommend { color: #999999; background-color: #eeeeee !important; pointer-events: none; } .recommend-works.preview-recommend .icon-recommend { background-image: url(../images/svg/dianzan-grey.svg); } .icon-recommend { width: 30px; height: 30px; background-image: url(../images/svg/icon-recommend.svg); background-position: center; background-repeat: no-repeat; background-size: 30px 30px; } .sidebar-fixed_box .icon-recommend { position: absolute; background-image: url(../images/svg/icon-recommend-side.svg); } .active .icon-recommend { background-image: url(../images/svg/icon-recommended.svg); } .active:hover .icon-recommend { background-image: url(../images/svg/icon-recommended-hover.svg); } .recommend-works.active.recommend-playing-animation, .like-icon.active.recommend-playing-animation { background-color: #ffffff; } .recommend-works.active.recommend-playing-animation .icon-recommend, .like-icon.active.recommend-playing-animation .icon-recommend { background-image: none; } .recommend-works.active, .like-icon.active { border: 1px solid #E9E9E9; background: #ffffff; } .unlogin-recommended-tips { width: 230px; font-size: 12px; color: #ffffff; text-align: center; } .recommend-notlogin { display: inline-block; } .like-effect { width: 54px; height: 54px; position: absolute; overflow: hidden; } .album-title, .album-box .title { line-height: 14px; margin-bottom: 20px; } .anthor-btnbox { margin-top: 16px; *zoom: 1; } .anthor-btnbox:after { content: ""; display: table; } .anthor-btnbox:after { clear: both; } .anthor-btnbox .letter, .anthor-btnbox .follows { width: 105px; height: 36px; color: #282828; -webkit-box-sizing: border-box; box-sizing: border-box; } .anthor-btnbox .letter i, .anthor-btnbox .follows i { float: left; margin-right: 8px; cursor: pointer; } .anthor-btnbox .letter { line-height: 36px; border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; float: right; } .anthor-btnbox .letter i { width: 18px; height: 13px; margin-top: 11px; margin-left: 25px; background: url(../images/letericon.png); } .anthor-btnbox .follows { float: left; } .anthor-btnbox .follows i { margin-top: 9px; } .private-btn { color: #444444; } .follows { line-height: 36px; } .loadding { text-align: center !important; display: none; } .bdshare-button-style0-32 a { overflow: visible !important; } .bdshare-button-style0-32 a:hover { opacity: 1 !important; } .picture-tips { position: absolute; top: 0; z-index: 99; padding: 10px 14px; color: #ffffff; font-size: 12px; background: #222222; border-radius: 4px; } .details-con-other { height: 80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .details-con-other:hover .report { display: block; } .three-link .report { margin-right: 30px; float: right; line-height: 32px; background-position: left; cursor: pointer; } .three-link .details-download-btn, .three-link .details-collection-btn, .three-link .details-share { padding: 0 18px 0 42px; line-height: 32px; font-size: 12px; margin-left: 10px; float: right; background-repeat: no-repeat; background-position: 18px center; -webkit-box-sizing: border-box; box-sizing: border-box; background-size: 18px auto; } .three-link .details-share { background-image: url(../images/svg/details-share.svg); background-size: 16px auto; } .three-link .details-download-btn { background-image: url(../images/svg/xiazaiqian_new.svg?v=1); } .three-link .details-collection-btn { background-image: url(../images/svg/shoucangqian_new.svg?v=1); background-position: 18px 7px; } .three-link .preview-collection { background-image: url(../images/svg/shoucangqiandisabled.svg); } .three-link .preview-download { background-image: url(../images/svg/xiazaiqiandisabled.svg); } .three-link .details-preview-share { background-image: url(../images/svg/fenxiangdisabled.svg); } .card-designer-list-details { width: auto; padding: 30px; overflow: hidden; background: #ffffff; } .card-designer-list-details .avatar { float: left; margin-bottom: 10px; margin-top: 9px; } .card-designer-list-details .avatar img { width: 80px; height: 80px; border-radius: 50%; } .card-designer-list-details .author-info { float: left; width: 220px; margin-left: 20px; position: relative; } .card-designer-list-details .author-info .author-info-title-box { height: 26px; line-height: 26px; overflow: hidden; } .card-designer-list-details .author-info .author-info-title-box .author-info-title { float: left; } .card-designer-list-details .author-info .author-info-title-box .author-info-fire { float: left; margin-left: 4px; margin-top: 3px; } .card-designer-list-details .author-info .author-info-title { margin-bottom: 2px; } .card-designer-list-details .author-info .author-info-title .title-content { color: #444444; font-size: 16px; font-weight: 600; vertical-align: middle; } .card-designer-list-details .author-info .author-info-title .title-content:hover { color: #d36f16; } .card-designer-list-details .author-info .position-info { font-size: 12px; color: #bbbbbb; margin-bottom: 12px; display: -webkit-box; display: -ms-flexbox; display: flex; } .card-designer-list-details .author-info .position-info span { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .card-designer-list-details .author-info .signature p { width: 220px; margin-top: 2px; display: inline-block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-size: 12px; color: #bbbbbb; } .card-designer-list-details .author-info .info-num { font-size: 14px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .card-designer-list-details .author-info .info-num .work, .card-designer-list-details .author-info .info-num .fans { display: inline-block; } .card-designer-list-details .author-info .info-num .work span, .card-designer-list-details .author-info .info-num .fans span { color: #666666; } .card-designer-list-details .author-info .info-num .work i { display: inline-block; width: 1px; height: 10px; background: #444444; margin: 0 5px; } .card-designer-list-details .author-info .info-num a { color: #444444; font-weight: 600; } .card-designer-list-details .author-info .info-num a:hover { color: #d36f16; } .card-designer-list-details .js-project-focus-btn { height: 36px; } .list-dropdown-menu-box { padding-top: 10px; min-width: 306px; position: absolute; left: -24px; top: 33px; display: none; z-index: 1; } .list-dropdown-menu { min-width: 306px; color: #444444; -webkit-box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2); box-shadow: 1px 0px 6px rgba(0, 0, 0, 0.2); background: #ffffff; border-radius: 4px; white-space: nowrap; } .list-dropdown-menu .onthe-list-title { padding: 0 20px; font-size: 12px; height: 50px; line-height: 50px; border-bottom: 1px solid #eeeeee; } .list-dropdown-menu ul li { height: 50px; line-height: 50px; padding: 0 20px; font-size: 14px; color: #444; } .list-dropdown-menu ul li:hover { background: #f2f2f2; } .list-dropdown-menu:after { content: ""; color: #ffffff; font-size: 40px; border-width: 6px; -webkit-box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.1); box-shadow: -3px -3px 8px rgba(0, 0, 0, 0.1); -webkit-transform-origin: 0 0; -webkit-transform: rotate(45deg); transform-origin: 0 0; transform: rotate(45deg); position: absolute; top: 2px; border-style: solid; left: 35px; } .js-scroll-wrap { max-height: 420px; padding: 6px 0; } .onthe-list-dropdown { display: inline-block; margin-left: 8px; padding-right: 15px; position: relative; } .onthe-list-dropdown:hover .list-dropdown-menu-box { display: block; } .onthe-list-dropdown.mt-19 { margin-top: 19px; } .onthe-list { display: inline-block; width: 20px; height: 18px; cursor: pointer; background: url(../images/svg/onthelist.svg) no-repeat center; background-size: auto 18px; } .card-mask-eff { width: 100%; height: 100%; padding: 0 8px; position: absolute; left: 0; top: 0; background: rgba(0, 0, 0, 0.5); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transition: 0.4s; transition: 0.4s; } .card-mask-eff .card-album-title { color: #ffffff; line-height: 20px; text-align: center; text-overflow: -o-ellipsis-lastline; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; display: -moz-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; -moz-line-clamp: 2; word-break: break-all; } .card-mask-eff .card-album-title.max-with-112 { max-width: 112px; } .fixed-card { position: fixed; top: 0; } .rec-tips { color: #444; font-size: 16px; padding: 0 20px 0 10px; height: 60px; border-radius: 60px; position: fixed; top: -80px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-color: #ffffff; -webkit-box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1); -webkit-transition: all 300ms linear; transition: all 300ms linear; z-index: 20; } .rec-tips img { width: 40px; height: 40px; margin-right: 10px; border-radius: 50%; } .rec-tips.rec-tips-slideDown { top: 76px; } .rec-tips.rec-tips-slideDown2 { top: 20px; } .recommended-designer-avatar-wrap { width: -webkit-max-content; width: -moz-max-content; width: max-content; max-width: 600px; height: 60px; overflow: hidden; margin: 0 auto 40px; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; } .recommended-designer-avatar-wrap .avatar-container-40, .recommended-designer-avatar-wrap .recommended-designer_more { margin: 20px 10px 0; } .recommended-designer-avatar-wrap.recommended-designer_up { height: auto; } .recommended-designer-avatar-wrap.recommended-designer_up .recommended-designer_more { background: #f2f2f2; } .recommended-designer-avatar-wrap.recommended-designer_up .recommended-designer_more:hover { background: #f2f2f2; } .recommended-designer_more { width: 40px; height: 40px; font-size: 12px; line-height: 40px; text-align: center; border-radius: 50%; cursor: pointer; } .recommended-designer_more { background: #ffe300; } .recommended-designer_more:hover { background: #ffd100; } .icon-great { background-image: url(../images/svg/icon-great.svg); background-repeat: no-repeat; } .kuak-module { padding: 30px; border-top: 1px solid #eeeeee; display: block; } .kuak-module .avatar-container-40 { margin-right: 10px; } .kuak-module > .kuak-guide { width: 315px; margin: 0 auto; } .kuak-module .kuak-content .kuak-guide { width: 88px; padding-left: 45px; } .kuak-module .kuak-more { width: 40px; height: 40px; background: url(../images/svg/icon-more-disabled.svg) no-repeat; } .kuak-module .kuak-list-con { margin-bottom: -15px; position: relative; -ms-flex-flow: wrap; flex-flow: wrap; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .kuak-module .kuak-list-con .kuak-list-box { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-flow: wrap; flex-flow: wrap; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .kuak-module .kuak-list-con .kuak-list-box > span { margin-bottom: 15px; } .kuak-module .kuak-list-con.max { max-height: 94px; } .kuak-module .btn-default-main, .kuak-module .btn-default-secondary { height: 32px; overflow: hidden; padding: 0 14px; border-radius: 16px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; position: relative; -webkit-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; --wPr: 34px; } .kuak-module .btn-default-main.aniWidth, .kuak-module .btn-default-secondary.aniWidth { padding-right: 48px; -webkit-transition: all ease-in-out 0s; transition: all ease-in-out 0s; } .kuak-module .btn-default-main:hover, .kuak-module .btn-default-secondary:hover { padding-right: var(--wPr); -webkit-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; } .kuak-module .btn-default-main:hover .plus, .kuak-module .btn-default-secondary:hover .plus { opacity: 1; -webkit-transition: all ease-in-out 0.2s 0.15s; transition: all ease-in-out 0.2s 0.15s; } .kuak-module .btn-default-main strong, .kuak-module .btn-default-secondary strong { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; } .kuak-module .btn-default-main strong.t-down, .kuak-module .btn-default-secondary strong.t-down { position: absolute; -webkit-transform: translateY(30px); transform: translateY(30px); } .kuak-module .btn-default-main strong.t-normal, .kuak-module .btn-default-secondary strong.t-normal { -webkit-animation: kuaXCountUp cubic-bezier(0.31, 0.18, 0, 1.14) 0.2s forwards; animation: kuaXCountUp cubic-bezier(0.31, 0.18, 0, 1.14) 0.2s forwards; } .kuak-module .btn-default-main .plus, .kuak-module .btn-default-secondary .plus { width: 26px; height: 26px; line-height: 26px; margin-left: 5px; margin-right: -30px; color: #ffffff; text-align: center; background-color: #444444; border-radius: 50%; opacity: 0; -webkit-transform-origin: center; transform-origin: center; --plusX: translateX(0); -webkit-transform: var(--plusX); transform: var(--plusX); } .kuak-module .btn-default-main .plus.aniEleNone, .kuak-module .btn-default-secondary .plus.aniEleNone { -webkit-transition: all ease-in-out 0s; transition: all ease-in-out 0s; } .kuak-module .btn-default-main .plus.aniBig, .kuak-module .btn-default-secondary .plus.aniBig { -webkit-transition: all ease-in-out 0.2s !important; transition: all ease-in-out 0.2s !important; -webkit-transform: var(--plusX) scale(1.5); transform: var(--plusX) scale(1.5); opacity: 0; } .kuak-module .btn-default-main .plus.aniScaleOut, .kuak-module .btn-default-secondary .plus.aniScaleOut { -webkit-transition: all ease-in-out 0s; transition: all ease-in-out 0s; -webkit-transform: var(--plusX) scale(0); transform: var(--plusX) scale(0); opacity: 0; } .kuak-module .btn-default-main .plus.aniNormal, .kuak-module .btn-default-secondary .plus.aniNormal { -webkit-transform: var(--plusX) scale(1); transform: var(--plusX) scale(1); opacity: 1; -webkit-transition: all linear 0.2s; transition: all linear 0.2s; } .kuak-module .btn-default-main.aniEleNone, .kuak-module .btn-default-secondary.aniEleNone { -webkit-transition: all ease-in-out 0s; transition: all ease-in-out 0s; } .kuak-module .btn-default-secondary { border: 1px solid #ddd; } .kuak-module .btn-default-secondary:hover { background: #ffd100; border: 1px solid #ffd100; } .kuak-module .ani-count { height: 100%; display: block; -webkit-transition: all ease-in-out 0.2s; transition: all ease-in-out 0.2s; } .kuak-module .ani-count.t-out { -webkit-animation: kuaCountOut ease-in-out 0.2s forwards; animation: kuaCountOut ease-in-out 0.2s forwards; } .kuak-module .ani-count.t-in { -webkit-animation: kuaCountUp cubic-bezier(0.31, 0.18, 0, 1.14) 0.2s forwards; animation: kuaCountUp cubic-bezier(0.31, 0.18, 0, 1.14) 0.2s forwards; } .kuak-module .kuak-up { width: 32px; height: 32px; border: 1px solid #bbb; border-radius: 50%; background-repeat: no-repeat; background-image: url(../images/svg/icon-btn-arrow-up.svg); background-position: center center; display: none; cursor: pointer; -webkit-transform: rotate(180deg); transform: rotate(180deg); -webkit-transition: all 0.1s; transition: all 0.1s; } .kuak-module .kuak-up:hover { border: 1px solid #999999; background-image: url(../images/svg/icon-btn-arrow-up-h.svg); } .kuak-module .kuak-down { -webkit-transform: rotate(360deg); transform: rotate(360deg); } .kuak-guide { height: 40px; line-height: 40px; padding-left: 40px; background-color: #444; border-radius: 20px; color: #ffffff; background-position: 5px center; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } .kuak-guide:hover { color: #ffe300; background-color: #282828; } .kuak-modal { width: 440px; padding: 20px 30px 30px; text-align: center; left: 50%; margin-left: -220px; margin-top: -152px; -webkit-box-sizing: border-box; box-sizing: border-box; } .kuak-modal::after { width: 298px; height: 83px; content: ''; background: url(../images/kua-ribbon.png) no-repeat; background-size: 298px auto; display: block; position: absolute; top: -28px; left: 0; right: 0; margin: auto; } .kuak-modal h4 { margin-top: 18px; } .kuak-modal > div { width: 100%; min-height: 102px; padding: 15px 20px 20px; margin-top: 20px; border-radius: 4px; -webkit-box-sizing: border-box; box-sizing: border-box; } .kuak-modal .switch-btn { width: 66px; height: 26px; font-size: 12px; margin-top: 15px; border-radius: 13px; } .kuak-modal .switch-btn:hover { color: #d36f16; border: 1px solid #d36f16; } .kuak-modal::before { content: ''; width: 66px; height: 66px; background: #ffffff url(../images/svg/icon-great.svg) no-repeat center center; background-size: 56px 56px; position: absolute; top: -33px; left: 50%; margin-left: -33px; border-radius: 50%; } .kuak-modal .kuak-text { height: 52px; line-height: 26px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; word-break: break-all; } .z-up { font-size: 14px; line-height: 22px; color: #ffffff; text-align: center; padding: 13px 20px; bottom: 52px; } .z-up::before { border-bottom: 0; border-top: 10px solid rgba(0, 0, 0, 0.8); top: unset; bottom: -10px; } .z-up.ani-tip { display: block; -webkit-animation: zUpTipTranslate 900ms ease-out 300ms infinite; animation: zUpTipTranslate 900ms ease-out 300ms infinite; } .z-triple { margin-top: 70px; } .z-triple:not(.is-click):hover .z-up { display: block; } .z-triple .z-bubble-circle { position: absolute; top: 16px; left: 25px; display: block; z-index: 10; opacity: 0; } .z-triple .z-bubble-circle .z-bubble1, .z-triple .z-bubble-circle .z-bubble2, .z-triple .z-bubble-circle .z-bubble3 { width: 20px; height: 20px; border-radius: 50%; background-color: rgba(255, 227, 0, 0.6); display: inline-block; -webkit-transform-origin: center center; transform-origin: center center; } .z-triple .z-bubble-circle.bubble-show { opacity: 0.6; } .z-triple .z-bubble-circle .z-bubble2 { position: absolute; left: 0; top: 0; } .z-triple .z-bubble-circle .z-bubble2.ani-b2 { -webkit-animation: zUpCircle 900ms ease-out infinite; animation: zUpCircle 900ms ease-out infinite; } .z-triple .z-bubble-circle .z-bubble3 { position: absolute; left: 0; top: 0; } .z-triple .z-bubble-circle .z-bubble3.ani-b3 { -webkit-animation: zUpCircle 900ms ease-out 300ms infinite; animation: zUpCircle 900ms ease-out 300ms infinite; } .z-triple .z-image { position: relative; } .z-triple .z-image i { width: 61px; height: 46px; margin-left: -12px; background-image: url(../images/z-normal.png); background-size: 61px auto; background-repeat: no-repeat; display: block; cursor: pointer; position: relative; bottom: -5px; z-index: 2; } .z-triple .z-image i:hover { background-image: url(../images/z-hover.png); } .z-triple .z-image i.active { background-image: url(../images/z-active.png); } .z-triple .Heart { width: 8px; height: 7px; background: url(../images/svg/icon-heart.svg) no-repeat; background-size: 8px auto; display: block; position: absolute; bottom: 8px; left: 4px; -webkit-transform: scale(0); transform: scale(0); } .z-triple .Heart.heart-show { -webkit-animation: heartBouldles 600ms forwards; animation: heartBouldles 600ms forwards; -webkit-animation-delay: 100ms; animation-delay: 100ms; } .z-triple .hi-semicircle { height: 45px; display: block; } .z-triple .hi-semicircle.hi-hand { overflow: hidden; } .z-triple .hi-semicircle .hi-half-c { height: 52px; overflow: hidden; display: block; } .z-triple .hi-circle, .z-triple .circle { width: 90px; height: 45px; display: block; } .z-triple .hi-circle { width: 90px; height: 90px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-clip-path: circle(50%); clip-path: circle(50%); -webkit-transition: all 300ms linear; transition: all 300ms linear; position: relative; z-index: 1; } .z-triple .hi-circle.small { opacity: 0; -webkit-clip-path: circle(0%); clip-path: circle(0%); } .z-triple .circle { background-color: #ffe300; -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transform: scale(0); transform: scale(0); position: absolute; top: 0; left: 50%; margin-left: -45px; border-radius: 45px 45px 0 0; } .z-triple .circle.up-scalce { -webkit-animation: upCircle ease-in 300ms forwards; animation: upCircle ease-in 300ms forwards; } .z-triple .up1, .z-triple .up2, .z-triple .up3 { width: 40px; height: 40px; background-repeat: no-repeat; background-size: 40px 40px; display: inline-block; position: absolute; -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); } .z-triple .up1 span, .z-triple .up2 span, .z-triple .up3 span { text-align: center; display: block; -webkit-transition: 300ms linear; transition: 300ms linear; -webkit-transition-delay: 301ms; transition-delay: 301ms; opacity: 0; } .z-triple .up1 span.ani-translate-top, .z-triple .up2 span.ani-translate-top, .z-triple .up3 span.ani-translate-top { margin-top: -30px; opacity: 1; } .z-triple .up1 span.fadeOut, .z-triple .up2 span.fadeOut, .z-triple .up3 span.fadeOut { -webkit-animation: upFadeOut 600ms; animation: upFadeOut 600ms; } .z-triple .up1 { top: 0; left: 0; background-image: url(../images/icon-like.png); } .z-triple .up1.ani-bouldles { -webkit-animation: zoomInDown 300ms; animation: zoomInDown 300ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .z-triple .up1.fadeOut { top: -41px; left: -31px; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 0; -webkit-animation: upFadeOut 600ms; animation: upFadeOut 600ms; } .z-triple .up2 { left: 50%; margin-left: -20px; top: 0; background-image: url(../images/icon-colloction.png); } .z-triple .up2.ani-bouldles { -webkit-animation: zoomInDown2 300ms; animation: zoomInDown2 300ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .z-triple .up2.fadeOut { top: -63px; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 0; -webkit-animation: upFadeOut 600ms; animation: upFadeOut 600ms; } .z-triple .up3 { top: 0; right: 0; background-image: url(../images/icon-follow.png); } .z-triple .up3.ani-bouldles { -webkit-animation: zoomInDown3 300ms; animation: zoomInDown3 300ms; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .z-triple .up3.fadeOut { top: -41px; right: -30px; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); opacity: 0; -webkit-animation: upFadeOut 600ms; animation: upFadeOut 600ms; } .ani-cool { width: 74px; height: 41px; background: url(../images/svg/ani-cool.svg) no-repeat; position: absolute; z-index: 2; -webkit-transform: scale3d(0, 0, 0); transform: scale3d(0, 0, 0); opacity: 0; } .ani-cool span { opacity: 0; } .ani-cool span:first-child { width: 20px; height: 12px; position: absolute; top: -3px; background: url(../images/svg/ani-shatter.svg) no-repeat; } .ani-cool span:last-child { width: 30px; height: 23px; position: absolute; right: -3px; top: -21px; background: url(../images/svg/ani-shatter2.svg) no-repeat; } .ani-cool span:last-child i { width: 18px; height: 11px; position: absolute; right: 0; bottom: 3px; background: url(../images/svg/ani-shatter3.svg) no-repeat; } .animate__zoomInUp { -webkit-transform-origin: center center; transform-origin: center center; -webkit-animation-name: zoomInUp; animation-name: zoomInUp; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .animate__zoomInUp_shatter1 { -webkit-animation-name: zoomInUpShatter1; animation-name: zoomInUpShatter1; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } .animate__zoomInUp_shatter { -webkit-transform-origin: left bottom; transform-origin: left bottom; -webkit-animation-name: zoomInUpShatter; animation-name: zoomInUpShatter; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes kuaPlusFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes kuaPlusFadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes kuaCountOut { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes kuaCountOut { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @-webkit-keyframes kuaCountUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 90% { -webkit-transform: translateY(-35px); transform: translateY(-35px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @keyframes kuaCountUp { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 90% { -webkit-transform: translateY(-35px); transform: translateY(-35px); } 100% { -webkit-transform: translateY(-30px); transform: translateY(-30px); } } @-webkit-keyframes kuaXCountUp { 0% { -webkit-transform: translateY(30px); transform: translateY(30px); } 90% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes kuaXCountUp { 0% { -webkit-transform: translateY(30px); transform: translateY(30px); } 90% { -webkit-transform: translateY(-5px); transform: translateY(-5px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes zUpCircle { from { -webkit-transform: scale(1); transform: scale(1); opacity: 0.6; } to { -webkit-transform: scale(2.5); transform: scale(2.5); opacity: 0; } } @keyframes zUpCircle { from { -webkit-transform: scale(1); transform: scale(1); opacity: 0.6; } to { -webkit-transform: scale(2.5); transform: scale(2.5); opacity: 0; } } @-webkit-keyframes zUpCircleStop { to { -webkit-transform: scale(1); transform: scale(1); opacity: 0.6; } } @keyframes zUpCircleStop { to { -webkit-transform: scale(1); transform: scale(1); opacity: 0.6; } } @-webkit-keyframes zUpTipTranslate { 0% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes zUpTipTranslate { 0% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes zUpTipTranslateStop { to { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes zUpTipTranslateStop { to { -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; -webkit-transform: translateY(0); transform: translateY(0); } } .author-card { *zoom: 1; } .author-card:after { content: ""; display: table; } .author-card:after { clear: both; } .normal-userinfo-box { width: 260px; } .normal-userinfo-box .card-media { width: 100%; } .normal-userinfo-box .designer-card { margin: 0; display: block; } .normal-userinfo-box .designer-card .btn-area .btn-current { width: 103px; height: 36px; } .normal-userinfo-box .album-card2-box { margin-right: 0; width: 260px; float: none; } .normal-userinfo-box .album-card2-box .album-img { height: 180px; margin-top: 0; } .normal-userinfo-box .album-card2-box .card-album-aspect { width: 120px; height: 90px; } .normal-userinfo-box .album-card2-box .album-follow-btn { top: 6px; } .more-covers-block { text-align: center; color: #d36f16; font-size: 14px; padding: 16px 20px; } .card-designer-list-details .work-show .seize-box { height: 100%; } .card-designer-list-details .work-show .work-show-more { height: 100%; } .card-designer-list-details .work-show .work-show-more .view-more { height: 100%; } .card-designer-list-details .author-info { height: 95px; } .work-show-item img { width: 100%; max-height: 100%; } .work-show-box img { max-width: 100%; display: inline-block; } .work-show-box h1, .work-show-box h2, .work-show-box h3, .work-show-box h4, .work-show-box h5, .work-show-box h6 { font-weight: bold; } .details-contitle-box { padding: 30px 30px 16px; } .work-head-box .head-index { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; } .work-head-box .head-index span { margin-left: 30px; } .work-head-box .head-index span:first-child { margin-left: 0; } .card-designer-list-details .author-info { width: 196px; } .content { margin: 0 auto; *zoom: 1; position: relative; } .content:after { content: ""; display: table; } .content:after { clear: both; } .content .work-details-left .work-decoration-title { padding: 28px 0; line-height: 30px; color: #666666; background: #f8f8f8; } .content .work-details-left .work-decoration-title p { width: 800px; font-size: 16px; margin: 0 auto; word-wrap: break-word; } .content .work-details-left .left-img-con .see-more-wrap { margin-bottom: 40px; cursor: pointer; } .content .work-details-left .left-img-con .white-box-shadow { position: relative; } .content .work-details-left .left-img-con .white-box-shadow:before { content: ""; display: block; width: 100%; height: 300px; position: absolute; bottom: 36px; background: -webkit-gradient(linear, 0% 0%, 0% 82%, from(rgba(255, 255, 255, 0)), to(white)); } .content .work-details-left .left-img-con .text-link { padding: 20px 0 40px; font-size: 12px; border-bottom: 1px solid #eeeeee; } .content .work-details-left .left-img-con .text-link a { max-width: 500px; color: #d36f16; display: inline-block; vertical-align: middle; *vertical-align: auto; zoom: 1; *display: inline; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .content .work-details-left .left-img-con .article-title { margin-bottom: 32px; font-weight: normal; font-size: 24px; } .content .work-details-left .work-show-box { margin: 0 auto; margin-top: 30px; } .content .work-details-left .work-show-box img { margin: 22px auto 0; } .content .work-details-left .article-content-wraper { overflow: hidden; line-height: 30px; padding-top: 22px; } .content .work-details-left .article-content-wraper p { font-size: 16px; line-height: 32px; text-align: justify; text-justify: inter-ideograph; word-wrap: break-word; } .content .work-details-left .article-content-wraper p .edui-faked-video { display: block; margin: 0 auto; } .content .work-details-left .article-content-wraper p .edui-faked-video[src=""] { display: none; } .content .work-details-left .article-content-wraper p a:hover { color: #d36f16; } .advertisement { margin: 0 auto; margin-top: 20px; } .advertisement .adver-bannar { border-radius: 4px; -webkit-border-radius: 4px; -moz-border-radius: 4px; overflow: hidden; margin: 0 auto; } .advertisement .adver-bannar img { width: 100%; vertical-align: middle; } .preview-tip { padding: 36px 30px 0; color: #f4523b; } .details-con-other { padding: 0 30px; } @media screen and (min-width: 1601px) { .content { max-width: 1380px; } .content .work-details-left { width: 1100px; max-width: 1100px; } .adver-bannar { max-width: 1380px; } .work-details-content { max-width: 1100px; } .firstW { margin-left: 500px; } .workfirst { margin-left: 366px; } .article_comments { width: 1100px; } .commenbbox { width: 980px; } .work-show { height: 120px; } .work-show .work-con-box { width: 680px; height: 120px; } .work-show .work-con-box li { width: 160px; height: 120px; } .creationtime, .creationteem, .creationtool, .workhtm { width: 541px; } .whitetxtcon .txtcon { width: 798px; } .video-content-wrap { max-width: 1100px; } .left-author-card { margin-top: 10px; } .work-show-box { width: 800px; } .card-box-little .card-img { height: 195px; } .card-box-little .card-img a img { height: 195px; } .gogoup-card-box-small { width: 260px; height: 196px; } .gogoup-card-box-small img { width: 260px; height: 146px; } } @media screen and (max-width: 1600px) { .content { max-width: 1130px; width: 1130px; } .content .work-details-left { width: 850px; max-width: 850px; } .adver-bannar { max-width: 1130px; } .work-details-content { max-width: 850px; } .firstW { margin-left: 265px; } .workfirst { margin-left: 240px; } .article_comments { width: 850px; } .commenbbox { width: 730px; } .work-show { height: 105px; } .work-show .work-con-box { width: 450px; height: 105px; margin-top: 0; overflow: hidden; } .work-show .work-con-box li { width: 140px; height: 105px; } .creationtime, .creationteem, .creationtool, .workhtm { width: 416px; } .whitetxtcon .txtcon { width: auto; } .video-content-wrap { max-width: 850px; } .left-author-card { margin-top: 2px; } .work-show-box { width: 800px; } .details-con-other p { width: 388px; } } .card-mask-eff { -webkit-filter: opacity(0); filter: opacity(0); } .details-userinfo-wrap .work-show .work-con-box li:hover .card-mask-eff { -webkit-filter: opacity(100%); filter: opacity(100%); } blockquote { background-color: #f0f0f0; padding: 2px 8px; }