@font-face {
    font-family: 'iconfont';
    src: url('../font/iconfont.eot');
    src: url('../font/iconfont.eot') format('embedded-opentype'),
        url('../font/iconfont.woff2') format('woff2'),
        url('../font/iconfont.woff') format('woff'),
        url('../font/iconfont.ttf') format('truetype'),
        url('../font/iconfont.svg') format('svg');
}

.g-to16 {
    position: relative;
}

.change_name {
    position: absolute;
    right: 10px;
    top: 9px;
    color: #fff;
    font-size: 16px;
    background: #f6ba2a;
    padding: 2px 6px;
    font-size: 14px;
    border-radius: 4px;
}

.m_name_top {
    position: relative;
}

.tian_bg {
    width: 100%;
    position: absolute;
    left: 0;
    top: 14px;
}

.tian_bg span {
    display: inline-block;
    vertical-align: middle;
    background: url(../image/tianzige.png) no-repeat;
    width: 60px;
    height: 60px;
    background-size: 100% 100%;
    /* position:absolute; */
    /* z-index: -1; */
    margin: 17px 4px;
}

.tian_bg_wrap {
    display: inline-block;
    text-align: center;
    width: 100%;
}

.m_name_top .top_bg {
    width: 100%;
    height: 174px;
    background: url(../image/bg.png) no-repeat;
    background-size: 100% 174px;
}

.top_time{
    position: absolute;
    left: 6px;
    top: 5px;
   color: #fff;
   background: none;
   font-size: 13px;
}

.m_name_top .top_bg .m_name_main {
    text-align: center;
    font-size: 50px;
    display: block;
    letter-spacing: 22px;
    padding: 35px 0 20px 0;
    color: #fff;
    font-weight: normal;
    text-indent: 0.5em;
    font-family: "KaiTi";
}

.m_name_top .score_text {
    text-align: center;
    font-size: 14px;
    color: #fff;
    margin-bottom: 4px;
}

.m_name_top .score_main {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border: 3px solid #ff6a8a;
    border-radius: 50%;
    background: #fff;
    text-align: center;
    line-height: 74px;
    font-size: 40px;
    color: #ff6a8a;
    position: relative;
    z-index: 2;
}

.m_name_top .m_mame_item {
    padding: 50px 0 20px 0;
    background: #fff;
}

.m_item_classify {
    padding: 10px;
    width: 96%;
    /* height: 240px; */
    box-sizing: border-box;
    border: 1px solid #eee;
    box-shadow: 0 0 6px #eee;
    border-radius: 10px;
    margin: 0 auto;
    display: flex;
}

.m_item_classify .item_classify_left {
    flex: 1;
}

.m_item_classify .item_classify_right {
    flex: 1;
}

.m_item_classify .item_classify_div {
    width: 100%;
    display: flex;
    padding: 6px 0;
    font-size: 0;
}

.m_item_classify .item_classify_div .classify_text {
    flex: 0 0 60px;
    width: 60px;
    text-align: center;
    font-size: 14px;
    color: #212121;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}

.m_item_classify .item_classify_div .classify_py {
    flex: 1;
    font-size: 14px;
    padding-left: 6px;
    color: #757575;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
}
.classify_py .s0
.classify_py .s1,
.classify_py .s2,
.classify_py .s3,
.classify_py .s4,
.classify_py .s5 {
  display: inline-block; width: 110px; height: 20px; vertical-align: middle; margin-top: -5px;
  background-image: url('../image/bs.png'); background-repeat: no-repeat;
}
.classify_py .s0 { background-position: 0 0; }
.classify_py .s1 { background-position: 0 -20px; }
.classify_py .s2 { background-position: 0 -40px; }
.classify_py .s3 { background-position: 0 -60px; }
.classify_py .s4 { background-position: 0 -80px; }
.classify_py .s5 { background-position: 0 -100px; }
.m_letter_space {
    letter-spacing: 18px;
}

.m_mg10 {
    margin-right: 10px;
}

.m_item_classify .item_classify_div .classify_py b {
    display: inline-block;
    vertical-align: middle;
    width: 15px;
    height: 14px;
    background: url(../image/xing1.png) no-repeat;
    background-size: 80% 80%;
}

.m_item_classify .item_classify_div .classify_py .xing_two {
    background: url(../image/xing2.png) no-repeat;
    background-size: 80% 80%;
}

.m_name_nav,
.m_name_nav .g-list-nav {
    padding: 0;
    border: none;
    background: #ff6a8a;
    height: 40px;
}

.m_name_nav .g-list-nav-ul li {
    position: relative;
}

.m_name_nav .g-list-nav-ul .m-hover a {
    border: none;
    color: #fff;
}

.m_name_nav .g-list-nav-ul li a h2 {
    display: block;
    color: #fff;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
}

.m_name_nav .g-list-nav .g-list-nav-ul,
.m_name_nav .g-list-nav-ul li {
    height: 40px;
}

.m_name_nav .g-list-nav-ul li .m_icon {
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 0;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid #fff;
    margin-left: -8px;
}

.nav_content_show {
    width: 96%;
    background: #fff;
    margin: 0 auto 10px;
    padding: 20px;
    border: 1px solid #eee;
    box-shadow: 0 0 6px #eee;
    border-radius: 0 0 10px 10px;
    position: relative;
}

.nav_content_wrap {
    padding-bottom: 12px;
    background: #fff;
}

.nav_content_show .m_title h3{
    position: absolute;
    top: 10px;
    left: -3px;
    background: #ff6a8a;
    color: #fff;
    padding: 4px 10px;
    font-size: 16px;
    border-radius: 0 14px 14px 0;
}

.comment_num {
    position: absolute;
    top: 15px;
    left: 86px;
    font-size: 14px;
}

.nav_content_show .small_icon {
    position: absolute;
    left: -3px;
    top: 35px;
    width: 0;
    height: 0;
    border-top: 4px solid #ff6a8a;
    border-left: 4px solid transparent;
}

.nav_content_show .nav_content_p {
    margin-top: 24px;
}

.nav_content_show .nav_content_p p {
    font-size: 15px;
    color: #717171;
    line-height: 30px;
}

.nav_content_show .nav_content_p a {
    display: inline-block;
    vertical-align: middle;
    font-size: 15px;
    color: #717171;
    padding: 4px 6px;
}

.m_black_bg {
    top: 0;
    z-index: 3;
}

.m_score_img {
    position: absolute;
    width: 278px;
    height: 320px;
    background: url(../image/score_img.png) no-repeat;
    background-size: 100% 100%;
    left: 50%;
    top: 50%;
    margin-left: -139px;
    margin-top: -284px;
}

.m_input_wrap {
    position: absolute;
    bottom: 155px;
    left: 38px;
}

.m_input_wrap .m_input_name {
    font-size: 14px;
    letter-spacing: 4px;
}

.m_input_wrap .name_input {
    width: 140px;
    outline: none;
    border: 1px solid #b5b5b5;
    border-radius: 20px;
    text-indent: 1em;
}

.m_input_check {
    position: absolute;
    bottom: 122px;
    left: 38px;
}

.m_input_check label {
    margin-right: 24px;
    margin-bottom: 0;
}

.demoHidden {
    display: none;
}

.radioInput {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 2px solid #ff6a89;
    border-radius: 100%;
    margin-right: 10px;
    vertical-align: middle;
}

.demoHidden:checked+.radioInput:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 9px;
    height: 9px;
    background: #ff6a89;
    border-radius: 100%;
    margin-top: -11px;
    margin-left: 1px;
}

.demoHidden:checked+.radioInput {
    border: 2px solid #ff6a89;
}

.name_score_btn {
    position: absolute;
    left: 75px;
    bottom: 80px;
    width: 124px;
    height: 31px;
    border-radius: 20px;
    text-indent: -1000px;
}

.close_btn {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    margin-left: -12.5px;
}

.fc {
    background: #feeff4;
    text-align: center;
    color: #ff6a89;
}

.small_title {
    color: #333;
}

.example {
    background: #f8f8f8;
    padding: 6px;
    color: #333;
}

.example .example_color {
    color: #ff6a89;
}

.example span {
    color: #333;
    font-weight: bold;
}

/* 三才五格图 */
.name_top_wrap {
    width: 340px;
    margin-top: -43px
        /* height: 350px; */
}

.name_top_wrap div {
    float: left;
}

.name_top_wrap .content_top_name2 {
    padding-top: 45px;
    padding-left: 10px;
}

.name_explain_content .content_show .label_primary {
    color: #333;
    line-height: 30px;
    font-size: 16px;
    text-align: center;
    margin: 0 auto;
}

.label_default {
    width: 100%;
    text-align: center;
    font-size: 14px;
    margin-top: 6px;
}

.label_default span {
    color: #333;
    border-radius: 2px;
}

.content_top_name3 {
    width: 30px;
    height: 280px;
    background: url(../image/name_left.jpg) no-repeat;
}

.name_item_bg {
    float: left;
    width: 55px;
    height: 55px;
    text-align: center;
    background: url(../image/name_name.gif) no-repeat center 0px;
    font-size: 34px;
    /* font-weight: bold; */
    line-height: 56px;
    color: #000000;
    margin-top: 15px;
    position: relative;
}

.name_item_bs {
    line-height: 63px;
}

.name_item_font {
    float: left;
    margin-top: 30px;
    margin-right: -10px;
    width: 35px;
    height: 40px;
    text-align: center;
    font-size: 10px;
}

.name_top_wrap .content_middle_name,
.name_top_wrap .top_name6_wrap {
    float: none;
}

.content_top_name5 {
    width: 30px;
    height: 280px;
    background: url(../image/name_right.jpg) no-repeat;
}

.content_top_name6 {
    padding-top: 18px;
    padding-left: 5px;
}

.name_top_wrap .top_name6_wrap {
    margin: 40px 0;
}

.content_top_name7 {
    width: 300px;
    height: 30px;
    background: url(../image/name_bottom.jpg) no-repeat center center;
    padding-left: 70px;
}

.content_top_name8 {
    width: 340px;
    height: 60px;
    text-align: center;
}

.font_img_wrap {
    width: 220px;
    height: 220px;
    margin: 40px auto;
}

.hanzi_svg {
    border: #F90F4A 3px solid;
    width: 220px;
    height: 220px;
}

.font_img_title {
    text-align: center;
    font-size: 14px;
    color: #212121;
    margin-bottom: 16px;
    font-weight: bold;
}

.title_color {
    color: #212121;
    font-weight: bold;
}

/* 起名列表 */
.search_btn_wrap {
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #f9f8f8;
    display: flex;

}

.top_fix {
    position: fixed;
    top: 0;
    left: 0;
}

.search_btn_wrap h1 {
    font-size: 15px;
    color: #535353;
    line-height: 30px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search_btn_wrap .search_btn {
    padding: 0px 20px;
    font-size: 15px;
    color: #fff;
    border-radius: 20px;
    flex: 0 0 95px;
    background: #f6ba2a;
}

.search_btn_wrap .search_btn::after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    background: url(../image/shaixuan.png) no-repeat center center;
    width: 19px;
    height: 19px;
    background-size: 70%;
    margin-left: 4px;
}

.name_list_content {
    width: 100%;
    padding: 0 10px 10px;
    box-sizing: border-box;
    background: #fff;
}

.name_list_content ul li {
    width: 100%;
    padding: 20px 0 14px 0;
    border-bottom: 1px solid #e5e5e5;
}

.name_list_content .name_content_top {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.name_content_top .m_font_wrap {
    display: inline-block;
    vertical-align: top;
    width: 99.6px;
    height: 50.4px;
    font-size: 0;
    background: url(../image/font-2.png) no-repeat;
    background-size: 99.6px 50.4px;
}

.name_content_top .font_3_wrap {
    background: url(../image/font-3.png) no-repeat;
    width: 148.8px;
    background-size: 148.8px 50.4px;
}

.name_content_top .font_4_wrap {
    background: url(../image/font-4.png) no-repeat;
    width: 198px;
    background-size: 198px 50.4px;
}

.name_content_top .m_font_wrap span {
    display: inline-block;
    width: 49.5px;
    height: 50.4px;
    text-align: center;
    line-height: 50.4px;
    font-size: 36px;
    color: #000000;
    font-weight: bold;
    font-family: "KaiTi";
}

.name_content_top .m_font_score {
    display: inline-block;
    vertical-align: top;
    padding: 2px 6px;
    border: 1px solid #ff6a8a;
    border-radius: 20px;
    color: #ff6a8a;
    font-size: 12px;
    margin-left: 4px;
}

.content_top_right {
    background: #ff6a8a;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    height: 26px;
    line-height: 26px;
    padding: 0 10px;
    font-size: 12px;
    margin-top: 12px;
}

.name_content_bottom .content_bottom_wrap {
    width: 100%;
    display: flex;
    margin: 6px 0;
}

.content_bottom_wrap .content_bottom_item {
    flex: 1;
    font-size: 0;
}

.content_bottom_wrap .content_bottom_item span {
    display: inline-block;
    vertical-align: middle;
    color: #5c5c5c;
    font-size: 14px;
}

.content_bottom_wrap .content_bottom_item .sx_item {
    width: 40px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.b_title {
    color: #141414 !important;
}

.content_bottom_des {
    color: #5c5c5c;
    font-size: 14px;
    margin: 6px 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.name_bg {
    z-index: 5;
    top: 40px;
}

.modal-open {
    position: fixed;
    width: 100%;
}

.name_select_wrap {
    display: none;
    background: #f4f4f4;
    position: absolute;
    top: 40px;
    left: 0;
    z-index: 10;
}

.top_search {
    width: 100%;
    background: #fff;
    padding: 20px 30px;
    box-sizing: border-box;

}

.top_search_wrap {
    width: 100%;
    display: flex;
    border-radius: 20px;
    background: #f4f4f4;
}

.top_search .search_icon {
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 31px;
    width: 31px;
    height: 34px;
    background: url(../image/secrch.png) no-repeat center center;
}

.top_search input {
    display: inline-block;
    vertical-align: middle;
    flex: 1;
    outline: none;
    border: none;
    border-radius: 20px;
    background: #f4f4f4;
}

#find_name {
    background: none;
    border: none;
    outline: none;
    margin-right: 8px;
}

.select_item_wrap .m_item_title {
    width: 100%;
    font-size: 16px;
    color: #1f1f1f;
    padding: 6px 20px;
    box-sizing: border-box;
}

.normal_name {
    background: #fff;
}

.normal_name ul {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 10px 12px;
    padding-bottom: 0;
    box-sizing: border-box;
}

.normal_name ul li {
    flex: 0 0 10%;
    width: 10%;
    margin-bottom: 10px;
}

.normal_name ul li a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    font-size: 16px;
    color: #3c3c3c;
    padding: 2px 10px;
}

.letter_item ul li {
    flex: none;
    width: auto;
}

.letter_wrap {
    position: fixed;
    right: 0;
    top: 5%;
    z-index: 11;
}

.letter_wrap ul li {
    font-size: 20px;
    color: #3c3c3c;
    text-align: center;
    margin: 2px 0;
}

.normal_name ul li .item_active {
    background: #ff6a8a;
    color: #fff;
    border-radius: 16px;
}

.letter_wrap span{
    display: inline-block;
    color: #ff6a8a;
    width: 20px;
    font-size: 14px;
    text-align: center
}

.wuxing_wrap .normal_name ul li a {
    padding: 2px 14px;
}

.sx_wrap .normal_name ul li {
    flex: 0 0 16.66%;
    width: 16.66%;
}

.normal_name ul .sx_li {
    width: 90%;
    background: #f4f4f4;
    border-radius: 6px;
    padding: 2px 0;
}

.normal_name ul .sx_li div {
    text-align: center;
}

.sx_color {
    color: #fa6a88;
}

.m_name_btn {
    width: 100%;
    display: flex;
    padding: 20px;
    background: #fff;
    border-top: 1px solid #eee;
    box-sizing: border-box;
}

.m_name_btn div {
    flex: 1;
    border: 1px solid #eee;
    border-radius: 20px;
    margin: 0 4px;
    padding: 6px 0;
    box-sizing: border-box;
}

.m_name_btn .btn_none {
    border: none;
}

.m_name_btn div a {
    display: block;
    width: 100%;
    height: 100%;
    text-align: center;
    color: #3c3c3c;
    font-size: 16px;
}

.letter_item_tap {
    display: none;
}

.get_more {
    background: #fff;
    padding: 10px 0;
}

.get_more span {
    display: block;
    width: 8px;
    height: 5px;
    margin: 0 auto;
    background: url(../image/down_icon.png) no-repeat;
}

.max_h {
    height: 82px;
    overflow: hidden;
}

.letter_item_tap .toggle_max_h {
    height: auto;
    overflow: auto !important;
}

/* 起名列表结束 */
/* 起名单页 */
.m_banner img {
    display: block;
    width: 100%;
    margin: 0 auto;
}

.m_qm_start {
    background: #fff;
    padding: 0 12px;
}

.m_start_font {
    display: block;
    width: 225px;
    height: 35px;
    background: url(../image/m_qm.png) no-repeat center center;
    background-size: 100%;
    margin: 0 auto;
}

.m_start_input {
    background: #fff;
    padding: 14px 0;
}

.m_start_item {
    width: 100%;
    display: flex;
    border: 1px solid #dedede;
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 10px 0;
}

.m_start_item .item_title {
    flex: 0 0 16%;
    width: 16%;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    color: #000;
    border-right: 1px solid #dedede;
}

.m_start_item .item_input {
    flex: 1;
    height: 30px;
    padding-left: 20px;
}

.item_input label {
    margin-right: 20px;
    margin-bottom: 0;
    height: 30px;
    line-height: 30px;
}

.m_radioInput {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    background: url(../image/radio.png) no-repeat;
    border: none;
}

.demoHidden:checked+.m_radioInput {
    border: none;
}

.demoHidden:checked+.m_radioInput:after {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 10px;
    height: 10px;
    background: #ff6a89;
    border-radius: 100%;
    margin-top: -2px;
    margin-left: 9px;
}

.status_text {
    display: inline-block;
    vertical-align: middle;
    margin-left: 4px;
    color: #818181;
    font-size: 16px;
    font-weight: normal;
}

.m_start_item1 {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.m_start_item1 .start_item_wrap {
    flex: 0 0 48%;
    border: 1px solid #dedede;
    border-radius: 4px;
    margin-bottom: 16px;
    padding: 10px 0;
}

.start_item_wrap .item_title {
    display: inline-block;
    vertical-align: middle;
    width: 33%;
    text-align: center;
    line-height: 30px;
    font-size: 16px;
    color: #000;
    border-right: 1px solid #dedede;
}

.start_item_wrap .item_input {
    display: inline-block;
    vertical-align: middle;
    width: 60%;
}

.start_item_wrap .item_input input {
    display: inline-block;
    width: 100%;
    height: 30px;
    outline: none;
    border: none;
    text-indent: 0.8em;
    font-size: 16px;
}

.input_show {
    outline: none;
    height: 30px;
    width: 100%;
    border: none;
    font-size: 16px;
    line-height: 30px;
}

.qm_select_wrap {
    display: inline-block;
    vertical-align: middle;
    width: 94%;
    height: 30px;
    font-size: 16px;
    border: none;
    outline: none;
    background: none;
    color: #818181;
}

.m_start_item1 .start_item_yz {
    flex: 0 0 60%;
}

.m_start_item1 .start_yz_btn {
    flex: 0 0 34%;
}

.start_yz_btn .yz_btn {
    border: none;
    outline: none;
    background: none;
    width: 100%;
    font-size: 16px;
    color: #818181;
    height: 30px;
    line-height: 30px;
}

.bottom_btn .get_name_btn {
    width: 100%;
    height: 50px;
    margin: 0 auto;
    box-sizing: border-box;
    border: none;
    outline: none;
    background: #fa6a88;
    color: #fff;
    font-size: 20px;
    text-align: center;
    line-height: 50px;
    border-radius: 4px;
    letter-spacing: 2px;
}

.bottom_notice {
    width: 100%;
    text-align: center;
    color: #000;
    font-size: 13px;
    margin-top: 14px;
}

.bottom_notice span {
    color: #fa6a88;
}

.qm_comment {
    width: 100%;
    height: 440px;
    background: url(../image/qm_comment.png) no-repeat;
    background-size: 100%;
    position: relative;
}

.qm_comment ul {
    position: absolute;
    left: 50%;
    top: 110px;
    width: 80%;
    margin-left: -40%;
    height: 250px;
    overflow: hidden;
}

.qm_comment ul .qm_icon_wrap {
    width: 61px;
    height: 61px;
    background: url(../image/qm_icon.png) no-repeat center center;
    background-size: 80%;
    display: inline-block;
    vertical-align: middle;
}

.qm_comment ul li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.qm_comment ul .user_info {
    display: inline-block;
    vertical-align: middle;
}

.qm_comment ul .user_info .ip {
    font-size: 14px;
    color: #000;
}

.qm_comment ul .user_info .datetime {
    font-size: 14px;
    color: #929191;
}

.qm_comment .comment_show {
    font-size: 15px;
    color: #666666;
}

/* 起名单页结束 */
.m_view {
    width: 100%;
    background: #fff;
}

.m_view {
    padding: 50px 20px 20px 20px;
}

.m_view .view_ul li {
    font-size: 15px;
    color: #666;
    padding: 10px 0;
    line-height: 24px;
}

.m_view .view_ul li .from {
    color: #333;
}

.m_view .view_ul li a {
    color: #ff6a89;
    text-decoration: underline;
}

#visiting_list {
    width: 100%;
    padding: 0;
    height: 280px;
    overflow-y: hidden;
    position: relative;
}

#m_visiting_list {
    width: 100%;
    padding: 0;
    height: 400px;
    overflow-y: hidden;
    position: relative;
}

@keyframes move {
    0% {
        top: 0;
    }

    100% {
        top: -120px;
    }
}

#visiting_list .view_ul,
#m_visiting_list .view_ul {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    animation: 3s move infinite linear;
}

#visiting_list:hover .view_ul {
    animation-play-state: paused;
}

.keywords {
    color: #ff6a8a;
}

.more_info {
    text-align: right;
    margin-top: 20px;
}

.more_info a {
    display: inline-block;
    color: #ff6a8a !important;
    font-size: 14px !important;
}

/* pinglun */
.m_textarea {
    display: block;
    width: 100%;
    margin: 30px auto 10px;
    resize: none;
    height: 97px;
    outline: none;
    border: 1px solid #e5e5e5;
    font-size: 14px;
    padding: 4px 6px;
}

.m_summit_btn {
    text-align: right;
}

.m_summit_btn button {
    display: inline-block;
    vertical-align: middle;
    font-size: 14px;
    width: 60px;
    height: 24px;
    border: 1px solid #fa6a88;
    text-align: center;
    /* line-height: 24px; */
    background: #fa6a88;
    color: #fff;
    border-radius: 3px;
    margin-left: 4px;
}

.m_summit_btn .cancel_btn {
    background: #fff;
    color: #666;
    border: 1px solid #e5e5e5;
}

.m_comment_wrap {
    width: 100%;
    background: none;
    height: auto;
    margin-top: 10px;
}

.m_comment_wrap ul {
    position: static;
    margin-left: 0;
    width: 100%;
    height: auto;
}



#introduce .names_table{
    width: 90vw;
    display: table;
    margin: 0 auto;
}
#introduce .names_table caption{
    text-align: center;
} 
/* 起名内页举报弹窗 */
.jb_text{
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 16px;
    text-decoration: underline;
    color: red;
}
.jb_popup{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: none;
    z-index: 99;
}
.popup_wrap{
    position: absolute;
    width: 278px;
    left: 50%;
    top: 50%;
    margin-left: -139px;
    margin-top: -284px;
    background: #fff;
    border: 8px solid #ff6a8a;
    border-radius: 8px;
}
.popup_wrap .popup_content{
    width: 100%;
    padding: 0 40px;
    box-sizing: border-box;
}
.popup_wrap .popup_content .item{
    display: block;
}
.popup_wrap .popup_content .item input,.popup_wrap .popup_content .item span{
    display: inline-block;
    vertical-align: top;
}
.popup_wrap .popup_content .item input{
    width: 16px;
    height: 16px;
}
.popup_wrap .popup_content .item span{
    color: #333;
    font-size: 16px;
    font-weight: normal;
}
.popup_title{
    text-align: center;
    color: #333;
    font-size: 18px;
    padding: 8px 0;
}
#other_wrap{
    width: 100%;
    height: 80px;
    outline: none;
    resize: none;
    padding: 4px;
    box-sizing: border-box;
    border: 1px solid #999;
    display: none;
    color: #666;
    font-size: 14px;
}
.popup_btn{
    flex: 1;
    padding: 4px 0;
    margin: 0 4px;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    background: #ff6a8a
}
.btn_wrap{
    width: 100%;
    display: flex;
    margin: 20px 0;
}

.name_score_right {
    float: none;
    margin: 0 auto;
    margin-bottom: 25px;
    width: 305px;
    height: 250px;
    border: 2px solid #ffe1e7;
    border-radius: 6px;
}

.name_score_right  .name_search{
    background-color: #ffffff;
}

.name_score_right  .name_search_top{
    width: 100%;
    height: 82px;
    background: #ffeff3;
    position: relative;
}

.name_score_right .name_search_top img {
    display: block;
    position: relative;
    width: 187px;
    height: 102px;
    left: 50%;
    top: -4px;
    margin-left: -93.5px;
}
.name_score_right .name_search_mian {
    margin-top: 40px;
}
.name_score_right .name_search_mian .search_item {
    width: 250px;
    margin: 16px auto 0;
}
.name_score_right .name_search_mian .search_item {
    width: 250px;
    margin: 16px auto 0;
}
.search_btn {
    display: block;
    width: 242px;
    height: 34px;
    margin: 0 auto;
    background: #ff6a89;
    color: #fff;
    font-size: 18px;
    text-align: center;
    line-height: 34px;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 12px;
    outline: none;
    border: none;
}
.clearfix:before, .clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}
.name_score_right .name_search_mian .search_item .name {
    width: 63px;
    float: left;
    text-align: center;
    font-size: 16px;
    height: 25px;
    line-height: 25px;
}
.name_score_right .name_search_mian .search_item .name_input {
    width: 170px;
    float: left;
    height: 25px;
    border-radius: 20px;
    outline: none;
    border: 1px solid #b5b5b5;
    text-indent: 2em;
    font-size: 16px;
}
.clearfix:before, .clearfix:after {
    display: table;
    line-height: 0;
    content: "";
}
.name_score_right .name_search_mian .search_item .name {
    width: 63px;
    float: left;
    text-align: center;
    font-size: 16px;
    height: 25px;
    line-height: 25px;
}
.name_score_right .name_search_mian .search_item .name_input {
    width: 170px;
    float: left;
    height: 25px;
    border-radius: 20px;
    outline: none;
    border: 1px solid #b5b5b5;
    text-indent: 2em;
    font-size: 16px;
}