@charset "UTF-8";
html{line-height:1.15;-webkit-text-size-adjust:100%}
body{margin:0;padding: 0;font-size: 14px;font-weight: 400; min-width: 1240px; color: #333;}
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}
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;}
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}
div{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
body.white{background: #fff;}
body.disscroll{overflow: hidden;}
a{display: block;text-decoration: none;cursor: pointer;color: #777777;}
a:visited{text-decoration: none;}
a:hover {text-decoration: none;color: #777777;}
a:active{text-decoration:none;}
img{width: 100%; vertical-align: top; display: block;}
li{list-style: none;}
h1,h2,h3,h4,h5,h6{padding: 0; margin: 0;}
input{color: #0A1629; font-size: 14px;outline:none;}
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;}
p{margin: 0;}
button {outline:none;}

.pb-32{padding-bottom: 32px;}
.pb-66{padding-bottom: 66px;}
.mt-8{margin-top: 8px;}
.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-32{margin-bottom: 32px;}
.mb-48{margin-bottom: 48px;}
.mr-16{margin-right: 16px;}
.mr-24{margin-right: 24px;}
.mr-32{margin-right: 32px;}
.fl{float: left;}
.fr{float: right;}
.fc{margin: 0 auto;}
.tl{text-align: left;}
.tr{text-align: right;}
.tc{text-align: center;}
.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;}
.minH800{min-height: 800px;}

/* 滚动条 */
div::-webkit-scrollbar {  width: 5px;}  
/* 设置滚动条轨道的背景色 */  
div::-webkit-scrollbar-track {  background: #ffffff;  }  
    
/* 设置滚动条的颜色 */  
div::-webkit-scrollbar-thumb {  background: #C2C2C2;  border-radius: 32px;}

/* btn */
.btn { padding: 0 32px; pointer-events: auto; height: 60px; line-height: 60px; background: #FFFFFF; display: block; cursor: pointer; border-radius: 16px; font-size: 16px; font-weight: 500; color: #333333;}
.btn.focus, .btn:focus {box-shadow:none;}
.btn.btn-yellow { background: #FFF172; color: #333333;}
.btn.btn-default { background: #F5F5F5; color: #777777;}

/* color */
.color_7 {color: #777;}
.color_3 {color: #333;}
.color_c2 {color: #C2C2C2;}
.bg_f5 {background-color : #F5F5F5;}
.bg_f5-5 {background-color: rgba(245, 245, 245, 0.5);}
.bg_CD1D03 {background-color: #CD1D03;}
.bg_F38E01 {background-color: #F38E01;}
.bg_F1E001 {background-color: #F1E001;}
.bg_5DC801 {background-color: #5DC801;}
.bg_4CE8DE {background-color: #4CE8DE;}
.bg_287CFF {background-color: #287CFF;}
.bg_9B40D8 {background-color: #9B40D8;}
.bg_808080 {background-color: #808080;}
.bg_0 {background-color: #000;}
.bg_f {background-color: #fff; border: 1px solid #C2C2C2;}


/* icon */
.icon{display: inline-block; background-position: center;background-repeat: no-repeat;background-size: contain;}
.icon-dialog-close{background-image:url(../../img/i-close.png); width: 24px; height: 24px;}
.icon-ok-white{background-image:url(../../img/i-ok_white.png); width: 24px; height: 24px;}
.icon-camera {background-image: url(../../img/i-camera.png); width: 24px; height: 24px;} 
.icon-page-right{background-image:url(../../img/i-page_rignt.png); width: 24px; height: 24px;}
.icon-help-right{background-image:url(../../img/i-help_right.png); width: 24px; height: 24px;}
.icon-help-bottom{background-image:url(../../img/i-help_bottom.png); width: 24px; height: 24px;}
.icon-del-grey{background-image:url(../../img/i-close_search.png); width: 24px; height: 24px;}
.icon-user-vip{background-image:url(../../img/i-vip.png); width: 24px; height: 24px;}
.icon-pic-black{background-image:url(../../img/i-image.png); width: 24px; height: 24px; vertical-align: middle;}
.icon-pic-grey{background-image:url(../../img/i-image_grey.png); width: 24px; height: 24px; vertical-align: middle;}
.icon-fensi-black{background-image:url(../../img/i-fans.png); width: 24px; height: 24px;}
.icon-balance{background-image:url(../../img/i-balance.png); width: 16px; height: 16px;}
.icon-my-collect{background-image:url(../../img/i-my_collect.png); width: 24px; height: 24px; vertical-align: text-top;}
.icon-my-money{background-image:url(../../img/i-my_money.png); width: 24px; height: 24px; vertical-align: text-top;}
.icon-my-message{background-image:url(../../img/i-my_message.png); width: 24px; height: 24px; vertical-align: text-top;}
.icon-my-record{background-image:url(../../img/i-my_record.png); width: 24px; height: 24px; vertical-align: text-top;}
.icon-my-user{background-image:url(../../img/i-my_user.png); width: 24px; height: 24px; vertical-align: text-top;}
.icon-my-balance{background-image:url(../../img/i-my_balance.png); width: 24px; height: 24px; vertical-align: middle;}
.icon-edit{background-image:url(../../img/i-edit.png); width: 16px; height: 16px;}
.icon-add-grey{background-image:url(../../img/i-add_grey.png); width: 24px; height: 24px;}
.icon-level1{background-image:url(../../img/level/i-level1.png); width: 96px; height: 30px;}
.icon-level2{background-image:url(../../img/level/i-level2.png); width: 96px; height: 30px;}
.icon-level3{background-image:url(../../img/level/i-level3.png); width: 96px; height: 30px;}
.icon-level4{background-image:url(../../img/level/i-level4.png); width: 96px; height: 30px;}
.icon-level5{background-image:url(../../img/level/i-level5.png); width: 96px; height: 30px;}
.icon-level6{background-image:url(../../img/level/i-level6.png); width: 96px; height: 30px;}
.icon-vip_level1{background-image:url(../../img/level/i-vip_level1.png); width: 118px; height: 30px;}
.icon-vip_level2{background-image:url(../../img/level/i-vip_level2.png); width: 118px; height: 30px;}
.icon-vip_level3{background-image:url(../../img/level/i-vip_evel3.png); width: 118px; height: 30px;}
.icon-vip_level4{background-image:url(../../img/level/i-vip_evel4.png); width: 118px; height: 30px;}
.icon-vip_level5{background-image:url(../../img/level/i-vip_evel5.png); width: 118px; height: 30px;}
.icon-vip_level6{background-image:url(../../img/level/i-vip_evel6.png); width: 118px; height: 30px;}
.icon-gonggao_error{background-image:url(../../img/gonggao/error.png); width: 20px; height: 20px;}
.icon-gonggao_success{background-image:url(../../img/gonggao/success.png); width: 20px; height: 20px;}
.icon-vip_ok{background-image:url(../../img/i-vip_ok.png); width: 24px; height: 24px;}
.icon-vip_no{background-image:url(../../img/i-vip_no.png); width: 24px; height: 24px;}

/* tit */
.contetn-tit {padding: 28px 0; margin: 80px auto 40px; position: relative; text-align: center;}
.contetn-tit h3 {font-size: 60px; line-height: 84px; color: #333;}
.contetn-tit h3 span {font-size: 28px; line-height: 20px; margin-left: 8px; margin-bottom: -6px; writing-mode:  vertical-rl;}
.contetn-tit .tit-bg {position: absolute; z-index: 1; top: 0; left: 50%; transform: translate(-50%, 0); font-size: 100px; line-height: 140px; opacity: .04; }

/* nav */
.yellow-nav {border-radius: 34px; background: #F5F5F5; padding: 4px; display: inline-flex; margin-bottom: 32px !important;}
.yellow-nav.nav-pills .nav-link.active {background: #FFF172; border-radius: 30px; color: #333;}
.yellow-nav.nav-pills .nav-link {padding: 24px 24px 19px; font-size: 16px;color: #777777;}

/* down-select */
.down-list {position: relative;}
.down-list:hover .down-list__toggle {display: block;}
.down-list__toggle {padding-top: 13px;margin-left: -17px;position: absolute;z-index: 10;display: none;}
.down-list__options {background: #FFFFFF;box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.08);border-radius: 24px;padding: 20px;}
.option-item {width: 96px;height: 40px;line-height: 20px;color: #333333;padding: 10px 20px;text-align: left;margin-bottom: 4px;cursor: pointer;}
.option-item.active,
.option-item:hover {background: #FFF172;border-radius: 12px;}
.header-avatar__list .down-list__toggle{margin-left: -63px;}
.option-item>i {
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 12px;
    color: #fff;
    text-align: center;
    background: #F65160;
    border-radius: 50%;
    position: absolute;
    left: 18px;
    bottom: 80px;
    z-index: 1;
}

.flex{display: flex !important;}
.v-between{justify-content: space-between;}
.v-center{justify-content: center;}
.a-center{align-items: center;}
.pointer{cursor: pointer;}

/* header */
.logo-a{height: 40px !important;margin-left: 0 !important;}
.logo-img{ width: 154px; height: 46px;}
.white-bg{ background: #FFFFFF; box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.08);}
.main-nav{background: #FFFFFF;z-index: 222;box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.08);transition:display 2s;-webkit-transition:display 2s;}
.main-nav a {color: #333 !important;}
.main-nav a .spot{background: #FA5151 !important;}
.main-header {width: 100%;}
.header-nav{width: 100%;min-width: 1240px; padding-left: 40px;padding-right: 40px;height: 106px;top: 0;position: fixed;z-index: 999;}
.header-nav__left{min-width: 510px !important;}
.header-nav__left a:hover {color: #FFF172 !important;}
.header-nav .header-nav__left a{margin-left: 32px;height: 22px;font-size: 16px;font-weight: 500;color: #FFFFFF;line-height: 22px;}
.header-nav .header-nav__left a .spot{width: 6px;height: 6px;background: #FFF172;border-radius: 50%;position: absolute;margin-top: -25px;margin-left: 31px;}
.white-line{height: 16px;width: 2px;background-color: #fff;margin-left: 8px;margin-right: 8px;}
.head-primary {margin-left: 32px;}
.avatar-vip {width: 16px; height: 16px; position: absolute; z-index: 1; bottom: -8px;right: 10px;}

.primary-btn{width: 96px;height: 40px !important;background: #FFF172;color: #333 !important;border-radius: 24px;line-height: 40px !important;text-align: center;font-size: 14px !important;}
.register-login{height: 40px;width: 75px;line-height: 40px;color: #fff;  margin-left: 32px;cursor: pointer; justify-content: flex-end;}
.header-avatar{width: 40px;height: 40px;border-radius: 40%;margin-left: 32px;}

.main-nav .register-login {color: #333;}
.main-nav .white-line {background-color: #333;}

.main-body{ width: 1240px; margin-left: auto; margin-right: auto; text-align: center;}
.main-body__extra{ width: calc(100% - 80px) !important; margin-left: 40px !important; margin-right: 40px !important;}



.no-photo{
    margin-top: 100px;
}
.no-photo img{
    margin: 0 auto 16px;
    width: 100px;
}
.no-photo__info{
    color: #777777;
    line-height: 20px;
    margin-left: auto;
    margin-right: auto;
}

/* 顶部Toast */
#Toast {
    position: fixed;
    z-index: 99999;
    display: none;
}
.toast-btn{
    padding: 18px 32px;
    background: #2FBE82;
    border-radius: 16px;
    font-size: 16px;
    font-weight: 500;
    color: #FFFFFF;
    position: fixed;
    top: 145px;
    left: 50%;
    transform: translate(-50%, -50%);
}
.toast-icon{
    width: 24px;
    height: 24px;
    margin-right: 8px;
}

/* footer */
.footer-container{ width: 100%; height: 524px; background: url(https://img.miao333.com/pic/static/img/footer-bg.jpg); background-position: center; background-size: cover; margin-top: 80px; padding-top: 60px;}
.footer-qrcode{ margin-top: 60px;}
.qrcode-img{ width: 100px; height: 100px;border-radius: 24px;}
.qrcode-info{ width: 12px; margin-left: 12px; font-size: 12px; color: #FFFFFF; line-height: 15px;}

.footer-cops{ margin-left: 120px; padding-top: 8px; text-align: left;}
.footer-cops__item{ margin-right: 100px;}
.cops-title{ height: 20px; color: #FFFFFF; line-height: 20px; margin-bottom: 28px;}
.cops-content{ color: #777777; line-height: 20px; margin-bottom: 12px;}
.cops-content:hover{ color: #777777;}
/* .footer-contacts{ margin-left: 148px;} */
.footer-contacts__icon{ width: 18px; height: 18px;}
.footer-contacts__title{ height: 17px; font-size: 12px; color: #777777; line-height: 17px; margin-left: 12px;}
.footer-contacts__content{ color: #C2C2C2; line-height: 20px; margin-left: 30px; margin-top: 12px;}
.contacts-item{ margin-bottom: 18px; text-align: left; padding-top: 8px;}
.footer-keywords{ width: 100%; height: 65px; background: #77777720; border-radius: 33px; margin-top: 36px; justify-content: space-evenly;}

.footer-keywords__icon{ width: 32px;}
.footer-keywords__title{ margin-left: 12px; height: 22px; font-size: 16px; color: #FFF172; line-height: 22px;}
.footer-links{ margin-left: auto; margin-right: auto; font-size: 12px; color: #777777; line-height: 17px; align-items: flex-start; margin-top: 32px;}
.links-container{ flex-wrap: wrap;}
.links-title{ width: 90px;}
.link-item, .link-item:hover{ color: #777777; text-decoration: none; margin-right: 10px; margin-bottom: 10px;}
.footer-icp{ margin-top: 32px; margin-left: auto; margin-right: auto; width: 755px; height: 17px; font-size: 12px; color: #777777; line-height: 17px;}
.footer-icp a {display: inline-block; margin-right: 60px;}

/* search-input */
.search-area{ background-color: #FFFFFF; width: 800px; height: 70px; border-radius: 20px; box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.08); z-index: 4; margin-top: -30px; padding: 12px 32px; margin-left: auto; margin-right: auto;}
.search-input{ height: 46px; width: 100%; border-radius: 40px; padding: 8px; line-height: 30px; margin-right: 12px; border-width: 0;}

.search-input:focus-visible{ border-width: 0; border-color: white; outline: 0;}
.search-icon{ width: 24px;}
.main-search-area{ max-width: 800px; height: 60px; background: #F5F5F5 !important; border-radius: 20px; box-shadow: none; margin-top: 4px; min-width: 200px;}
.main-search-area:hover{ background: #ffffff !important; box-shadow: 0px 0px 50px 0px rgba(0,0,0,0.08);}
.main-search-area:hover .search-input{ background-color: #fff !important;}
.main-search-area .search-input{ background: #F5F5F5 !important;}
.main-search-area .icon-del-grey {margin-right: 32px; display: none; cursor: pointer;}
.hidden{ display: none !important;}

/* pages */
.page .pagination {justify-content: center;}
.page li {width: 30px;height: 30px;line-height: 30px;border-radius: 8px;background: #F5F5F5;color: #777;text-align: center;margin-right: 12px;}
.page li:last-child {margin-right: 0;}
.page li:hover { background-color: #333333; color: #fff;}
.page li:hover a { color: #fff;}
.page li.active { background-color: #333; color: #fff;}
.page ul li.disabled { display: none;}

/* imgs */
.img-fluid.is_height {width: auto; max-height: 100%; margin: 0 auto;}
.photos {width: calc(100% - 80px); margin: 20px auto 0;}
.sub-content__item {
    position: relative;
    z-index: 1;
}
.sub-item__img {
    max-width: 100%;
    height: auto;
    border-radius: 32px;
    object-fit: cover;
}
.sub-item__info {
    height: 80px;
    line-height: 80px;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
    position: absolute;
    z-index: 9;
    bottom: 0;
    border-radius: 0px 0px 32px 32px;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    justify-content: flex-start;
}
.sub-item__like {
    width: 32px !important;
    height: 32px;
    cursor: pointer;
    position: absolute;
    right: 20px;
    top: 20px;
    z-index: 99;
}
.sub-item__like.edit_board {
    top: 26px;
}
.info-items .collect-on {
    background-image: url(../../img/i-collect_yellow_big.png);
    background-size: 60px 60px;
}
.info-items .collect-on:hover {
    background-image: url(../../img/i-collect_grey_big.png);
    background-size: 60px 60px;
}
.info-items .collect-off {
    background-image: url(../../img/i-collect_grey_big.png);
    background-size: 60px 60px;
}
.info-items .collect-off:hover {
    background-image: url(../../img/i-collect_yellow_big.png);
    background-size: 60px 60px;
}

.sub-content__item .collect-on {
    background-image: url(../../img/i-collect_yellow.png);
    background-size: 32px 32px;
}
.sub-content__item .collect-on:hover {
    background-image: url(../../img/i-collect_grey.png);
    background-size: 32px 32px;
}
.sub-content__item .collect-off {
    background-image: url(../../img/i-collect_grey.png);
    background-size: 32px 32px;
}
.sub-content__item .collect-off:hover {
    background-image: url(../../img/i-collect_yellow.png);
    background-size: 32px 32px;
}
.sub-item__avatar {
    width: 24px !important;
    height: 24px;
    border-radius: 50%;
}
.sub-item__name {
    /* margin-left: 8px; */
    height: 20px;
    color: #FFFFFF;
    line-height: 20px;
    /* width: 180px; */
    width: 80%;
    white-space: nowrap; 
	overflow: hidden;  
	text-overflow: ellipsis;
    text-align: left;
    position: absolute;
    bottom: 18px;
}
.sub-item__name:hover {
    color: #fff;
}


/* 右侧咨询 */

.fixed-right{
    position: fixed;
    right: 60px;
    bottom: 100px;
    width: 60px;
    z-index: 999;
}
.fixed-right div>img{
    width: 60px;
    height: 60px;
    margin-top: 24px;
    cursor: pointer;
    box-shadow: 0 0px 40px 0 rgba(0, 0, 0, .1);
    border-radius: 40px;
}

.fixed-right .scroll-top {
    display: none;
}

.fixed-right .kefu-icon {
    position: relative;
    z-index: 1;
}
.kefu-icon .dialog_none {
    width: 20px;
    height: 145px;
    position: absolute;
    bottom: 0;
    left: -20px;
    display: none;
}
.kefu-icon .dialog {
    width: 315px;
    height: 420px;
    position: absolute;
    bottom: 0;
    right: 80px;
    z-index: 1;
    background: url(https://img.miao333.com/pic/static/img/kefu-bg.png) no-repeat;
    background-size: cover;
    overflow: hidden;
    padding-top: 38px;
    text-align: center;
}
.kefu-icon .dialog img {
    width: 164px;
    height: 164px;
    margin: 26px auto 21px;
    border-radius: 8px;
}
.kefu-icon .dialog .kefu-primary {
    margin: 29px auto 0;
    border-radius: 16px;
    width: 208px;
    height: 60px !important;
    text-align: center;
    line-height: 60px !important;
    font-size: 16px !important;
}