@charset "UTF-8";
html{line-height:1.15;-webkit-text-size-adjust:100%}
main{display:block}
h1{font-size:2em;margin:0.67em 0}
hr{box-sizing:content-box;height:0;overflow:visible}
pre{font-family:monospace,monospace;font-size:1em}
a{background-color:transparent}
abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}
code,kbd,samp{font-family:monospace,monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-0.25em}
sup{top:-0.5em}
img{border-style:none}
button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;color: #333;}
button,input{overflow:visible}
button,select{text-transform:none}
button,[type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}
button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}
button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring{outline:1px dotted ButtonText}
fieldset{padding:0.35em 0.75em 0.625em}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
textarea{overflow:auto}
[type="checkbox"],[type="radio"]{box-sizing:border-box;padding:0}
[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}
[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}
[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
details{display:block}
summary{display:list-item}
template{display:none}
[hidden]{display:none}

*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;font-family: "PingFang SC","Microsoft YaHei";margin: 0;padding: 0;border: 0;outline: 0;}
button{border: none; background: transparent; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
div{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;position: relative;word-break:break-word;}
body{margin:0;padding: 0; height: 100vh; background: #2E2E30; padding-top: 80px; font-size: 14px;color:#333;}
a{display: block; text-decoration: none; color: #333;}
img{width: 100%; vertical-align: top; display: block;}
li{list-style: none;}
h1,h2,h3,h4,h5,h6,p{padding: 0; margin: 0;}
input{color: #333; font-size: 14px;}
input::placeholder{color:#91929E; font-size: 14px;}
i,em{font-style: normal;}
input[type=file]::-webkit-file-upload-button{cursor: pointer;}
input[type=file]{cursor: pointer;}

/* icon */
.icon{display: inline-block; background-position: center;background-repeat: no-repeat;background-size: contain;}
.icon-search{background-image:url(../img/i-search.png); width: 24px; height: 24px; vertical-align: middle;}
.icon-sh{background-image:url(../img/i-sh.png); width: 56px; height: 20px; vertical-align: text-bottom; margin-left: 8px;}
.icon-down{background-image:url(../img/i-dw.png); width: 24px; height: 24px; vertical-align: middle;}
.icon-dh{background-image:url(../img/i-dh.png); width: 24px; height: 24px; vertical-align: middle;}
.icon-message{background-image:url(../img/i-message.png); width: 24px; height: 24px; vertical-align: middle;}
.icon-link{background-image:url(../img/i-link.png); width: 12px; height: 12px; vertical-align: middle;}

/* 头部导航 */
.header{width: 100%;height: 80px;background: #fff;position: fixed; left: 0; top: 0; z-index: 999; overflow: hidden;}
.header .header-main {min-width: 1200px; margin: 0 auto;}
.header-main .header-logo{width:155px; height: 41px; margin: 18px 0; overflow: hidden; float: left;}
.header-main .header-nav {float: left; margin-left: 190px; line-height: 80px; position: relative; z-index: 1;}
.header-main .header-nav a {display: inline-block; font-size: 18px; margin-right: 70px;}
.header-main .header-nav a:hover { color: #333; font-weight: 600;}
.header-main .header-search {float: right;}
.header-main .header-search {width: 200px; height: 36px; margin: 22px 0;}
.header-main .header-search input {width: 144px; height: 100%; text-indent: 16px; border-radius: 18px; border-top-right-radius: 0; border-bottom-right-radius: 0; background-color: #F5F5F5;}
.header-main .header-search button {width: 56px; height: 100%; border-radius: 18px; border-top-left-radius: 0; border-bottom-left-radius: 0; background-color: #FFF000; cursor: pointer;}
.header .free_flag {display: inline-block;width: 6px;height: 6px;background: #F85659;overflow: hidden;border-radius: 100px;position: absolute;z-index: 1;top: 29px;right: 63px;}

/* 底部导航 */
.footer{width: 100%;background: #2E2E30; color: #666; font-size: 12px; padding: 60px 0; background-image: url(../img/footer_bg.jpg); background-size: 100% 100%;}
.footer .footer_top img {width: 284px; height: 43px; float: left; margin-right: 120px;}
.footer .footer_top .right_top p {color: #D2D2D2;}
.footer .footer_top .right_input {width: 320px; height: 48px; border-radius: 24px; background-color: #414140; margin-top: 8px; padding:0 16px 0 20px; line-height: 48px; color: #D2D2D2;}
.footer .footer_top .right_input a {float: right;}

.footer .footer_info {width: 100%; margin-top: 32px;}
.footer .footer_info .footer_left {width: 142px;}
.footer .footer_info .footer_left p:first-child {color: #FFF000; font-size: 52px;}
.footer .footer_info .footer_left p:last-child {color: #D2D2D2;}
.footer .footer_info .footer_left span {color: #FFF000; font-size: 12px; margin-left: 8px; vertical-align: top; line-height: 35px;}
.footer .footer_info .footer_left span:last-child a {margin-right: 146px;}
.footer .footer_info .footer_right {color: #666666; margin-left: 260px; width: 792px;}
.footer .footer_info .footer_right p {line-height: 24px; margin-bottom: 5px; margin-top: 6px}
.footer .footer_info .footer_right span, .footer .footer_info .footer_right a {color: #666666; display: inline-block;}
.footer .footer_info .footer_right i {margin: 0 12px;}
.footer .footer_info .footer_right ul li {display: inline-block;margin-top: 12px;margin-right: 12px;}
i.icon-link {margin: -2px 0 0 2px !important;}
#links {display: inline; cursor: pointer;}

/* 首页 */
.main-top .top-list {width: 100%; display: flex; justify-content: center; align-items: center;}
.main-top .top-list a {margin-right: 40px; color: #666; font-size: 16px;}
.main-top .top-list a:hover, .main-top .top-list a.title {color: #333; font-weight: 600;}
.main-top .top-list a.title i {width: 48px; bottom: -2px;}
.main-top .top-list a:last-child {margin-right: 0;}

.main-search {width: 760px; height: 70px; margin: 0 auto; position: relative; z-index: 1;}
.main-search input {width: 100%; height: 70px; font-size: 18px; text-indent: 32px; border-radius: 35.5px; background-color: #F5F5F5;}
.main-search input[type='text']::-webkit-input-placeholder { color: #666; font-size: 18px;}
.main-search button {width: 136px; height: 70px; position: absolute; top: 0; right: 0; border-radius: 35.5px; background-color: #FFF000; cursor: pointer; font-size: 20px;}

.main-list a.list-font{width: 100%; height: 182px; border-radius: 12px; background-color: #FFFFFF; margin-bottom: 20px; padding: 32px; }
.main-list a.list-font:hover {box-shadow: 0 0 20px 0 rgba(51,51,51,0.1);}
.main-list a.list-font:hover button {background-color: #FFF000;}
.main-list a.list-font:last-child {margin-bottom: 48px;}
.list-font .font-left p {font-size: 16px; margin-right: 8px; margin-bottom: 32px;}
.list-font .font-left img {width: 950px; height: 75px;}
.list-font .font-right p{color: #666; text-align: right;} 
.list-font .font-right p:last-child {color: #D2D2D2;}
.list-font .font-right button {color: #333; display: block; cursor: pointer; width: 144px; height: 46px; line-height: 46px; margin: 20px 0; background-color: #F5F5F5; border-radius: 25px; font-size: 16px;}
.list-font .font-right button i {margin-top: -5px; margin-right: 8px;}

.lsit-page ul {margin: 48px auto; display: flex; align-items: center; justify-content: center;}
.lsit-page li{width: 40px; height: 40px; line-height: 40px; background-color: #F5F5F5; border-radius: 50%; text-align: center; margin-right: 8px;}
.lsit-page li:last-child{margin-right: 0;}
.lsit-page li:hover, .lsit-page li.active {background-color: #FFF000;}

.list-font.friend_link {
    width: 100% !important; height: 80px !important; padding: 0 !important;background-color: #FFF000 !important;overflow: hidden;
}
.list-font.friend_link img {
    width: 100%; height: 80px;
}

/* 搜索页 */
.top-serach {text-align: center; font-size: 16px; color: #666;}
.top-serach span {color: #333;}
.main-none {padding: 100px 0;}
.main-none img {width: 220px; height: 207px; margin: 0 auto;}
.main-none p {text-align: center; font-size: 16px; color: #666; margin-top: 24px;}


/* 商家个人主页 */
.main-top .user-avatar img { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto; }
.main-top .user-avatar h1 {font-size: 20px; margin: 24px 0 16px; text-align: center; font-weight: 600;}
.main-top .user-info  {text-align: center;}
.main-top .user-info span {color: #666; margin-right: 30px;}
.main-top .user-info span:last-child {margin-right: 0;}


/* 字体详细页 */
.detail {padding: 32px 0 48px;}
.detail .detail-left .detail-case {width: 788px; height: 474px; border-radius: 12px; background-color: #F5F5F5; text-align: center; padding: 85px 0;}
.detail .detail-left .detail-case p {width: 90%; margin: 0 auto; font-size: 36px; line-height: 60px; color: #333;}
.detail .detail-left .detail-case p:first-child {font-size: 70px; line-height: 110px; margin-bottom: 32px;}
.detail .detail-left .detail-case p:last-child {font-size: 40px;}
.detail .detail-left .detail-text {width: 788px; border-radius: 12px; background: #fff; padding: 32px 32px 0;}
.detail .detail-left .main-search {width: 100%;}
.detail .detail-left .text-bn {width: 146px; height: 46px; line-height: 46px; background: #FAFAFA; border-radius: 23PX; float: left; margin-right: 42px; padding-left: 24px; color: #666; font-size: 16px; cursor: pointer; position: relative; z-index: 2;}
.detail .detail-left .text-bn:last-child {width: 160px; margin-right: 0; color: #333;}
.detail .detail-left .text-bn:last-child i {margin-right: 8px;}
.text-bn .text-bn-small {width: 60px; height: 46px; color: #333; border-radius: 23px; text-align: center;background: #F5f5f5; position: absolute; top: 0; right:0; border: 1px solid #F5F5F5;}
.text-bn.text-color>.text-bn-small {background-color: #666;}
.text-bn.text-bg .text-bn-small {background-color: #FFFFFF;}
.text-bn .text-none-top {width: 146px; height: 30px; position: absolute; bottom: -15px; left: 0; display: none;}
.text-bn .text-none {width: 176px;height: 148px;padding: 20px;border-radius: 12px;background-color: #fff; cursor: auto; position: absolute; z-index: 2; top: 58px; left: -12px; box-shadow: 0 0 20px 0 rgba(51,51,51,0.1); display: none;}
.text-bn .text-none .text-bn-small {position: unset; float: left; margin-right: 16px; margin-bottom: 16px; cursor: pointer; border: none;}
.text-bn.text-size .text-none .text-bn-small:nth-child(2n) {margin-right: 0;}
.text-bn.text-size .text-none .text-bn-small:hover, .text-bn.text-size .text-none .text-bn-small.active {background-color: #FFF000;}
.text-bn.text-color .text-none, .text-bn.text-bg .text-none {width: 328px; height: 210px; left: -88px;}
.text-bn.text-color .text-none .text-bn-small:nth-child(4n), .text-bn.text-bg .text-none .text-bn-small:nth-child(4n)  {margin-right: 0;}
.text-bn.text-color .text-none input, .text-bn.text-bg .text-none input { width: 132px; height: 46px; background: #FAFAFA; border-radius: 23PX; font-size: 16px; color: #666; text-indent: 24px;}
.text-bn.text-down:hover {background: #FFf000;}
.detail .detail-left .detail-text .detail-text-bt {width: 788px; padding: 32px; background-color: #fff; color: #666; font-size: 100px; margin-left: -32px; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; overflow: hidden; position: relative; z-index: 1;}
.detail .detail-right {width: 380px; height: auto; border-radius: 12px; background: #fff; padding: 32px 32px 48px;}
.detail .detail-right .right-top i {margin-left: 0;}
.detail .detail-right .right-top span {line-height: 20px; color: #D2D2D2; font-size: 12px; padding-left: 16px;}
.detail .detail-right h1 {font-size: 34px; font-weight: 500;}
.detail .detail-right .right-content span {margin-left: 16px; color: #666;}
.detail .detail-right .right-content p {margin-left: 41px; color: #666; line-height: 21px; margin-top: 12px; font-size: 12px;}
.detail .detail-right>button {width: 100%; height: 46px;line-height: 46px; border-radius: 25px; background-color: #FFF000; cursor: pointer;}
.detail .detail-right>button span {margin-left: 16px; font-size: 16px; color: #333;}
.detail .detail-right>button:hover {box-shadow: 0 0 20px 0 rgba(51,51,51,0.1);}
.detail .detail-right .right-user>a img {width: 60px; height: 60px; border-radius: 50%; margin-right: 16px;}
.detail .detail-right .right-user .r-user-title p {font-size: 16px;margin-bottom: 12px; line-height: 24px; font-weight: 600;}
.detail .detail-right .right-user .r-user-title span {margin-right: 24px; color: #666;} 
.detail .friend_link {background-color: #FFF000; height: 210px;padding: 0;display: flex;justify-content: center;align-items: center;position: relative; overflow: hidden;}
.detail .friend_link img { width: 100%; height: 210px;}

/* 通用 */
.main {width: 100%; height: auto; min-height: 720px; overflow: hidden; box-sizing: border-box; background-color: #FAFAFA;}
.main_1200 {width: 1200px; margin: 0 auto;}
.title {position: relative; z-index: 2; color: #333; font-weight: 600;}
.title>i {width: 88px; height: 8px; background: #FFF000; opacity: 0.7; border-radius: 4px; position: absolute; left: -8px; bottom: 27px; z-index: -1;}
.list_title {display: inline-block; width: 950px; padding: 10px 0; font-size: 50px;}
@media screen and (max-width: 1200px) {  
    /* 在设备宽度不超过1200像素时应用的样式 */  
    .main, .footer {min-width: 1200px;}
}

.pb-32{padding-bottom: 32px;}
.pb-66{padding-bottom: 66px;}
.pb-80{padding-bottom: 80px;}
.mt-8{margin-top: 8px;}
.mt-12{margin-top: 12px;}
.mt-16{margin-top: 16px;}
.mt-24{margin-top: 24px;}
.mt-30{margin-top: 30px;}
.mt-32{margin-top: 32px;}
.mt-48{margin-top: 48px;}
.mt-56{margin-top: 56px;}
.mb-16{margin-bottom: 16px;}
.mb-48{margin-bottom: 48px;}
.mr-16{margin-right: 16px;}
.mr-24{margin-right: 24px;}
.mtb32 {margin: 32px 0;}
.mtb48 {margin: 48px 0;}
.fl{float: left;}
.fr{float: right;}
.tr{text-align: right;}
.clearfix::after{display: block;content: '';clear: both;}
.txt-nowrap-ellipsis{white-space: nowrap; text-overflow: ellipsis;overflow: hidden;}
.txt-ellipsis-line2{text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;line-clamp: 2;-webkit-box-orient: vertical;  display: -webkit-box;}
.txt-ellipsis-line3{text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3;line-clamp: 3;-webkit-box-orient: vertical;  display: -webkit-box;}
.txt-ellipsis-line4{text-overflow: -o-ellipsis-lastline;overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 4;line-clamp: 4;-webkit-box-orient: vertical;  display: -webkit-box;}
.cover{width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 100;}
.minH800{min-height: 800px;}