@charset "UTF-8";
/**
 * 此专题出自澎湃新闻网，http:/www.thepaper.cn,
 * date 2017-12
 * By thepaper
 * 制作团队 吕妍 张泽红 王亚赛 杜海燕 孔家兴
 **/

*{
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
    text-align:justify;
}

html,
body {
    font-family: "Hiragino Sans GB","Microsoft Yahei",sans-serif;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    padding:0;
    overflow: hidden;
    background: #f3f3f3;
    background-size: 50px 50px;
    left:unset;
    user-select: none;
}

p {
    font-size: 14px;
    color: #313131;
    user-select: none;
}

.story_middle {
    position: absolute;
    height: 4px;
    background-size: 100%;
    background-image: url('story-middle.png');
    z-index: 99999;
    margin-left: -45%;
    left: 50%;
    width: 90%;
    display: none;
}

h2 {
    font-size: 14px;
    color: #a9a9a9;
    font-weight: 500;
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.80);
}

h3 {
    font-size: 18px;
    color: #373541;
    background-color: rgba(177, 177, 177, 0.2);
    padding: 4px 6px;
    letter-spacing: 0px;
    text-align: center;
}

select {
    border-width: 0 0 1px 0;
    font-size: 14px;
    padding-bottom: 4px;
}

span {
    font-weight: bolder;
    color: black;
}

.story_container {
    padding-bottom: 70px;
}

#search_input:focus {
    border-radius: 4px;
    outline: none;
}

.search {
    position: absolute;
    top: 18%;
    width: 80%;
    left: 10%;
    display: none;
}

.order_button_box {
    display: none;
}

.like_count span {
    color: #a9a9a9;
    font-size: 12px;
    font-weight: 100;
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.0);
}

.map_container {
    width: 100%;
    height: 100%;
}

.search_result {
    position: absolute;
    width: 140px;
    height: auto;
    top: 25%;
    margin-top: -25px;
    left: 50%;
    margin-left: -70px;
    z-index: 999999;
    background-color: rgba(61, 58, 72, 0.5);
    text-align: center;
    border: 1px solid rgba(255, 255, 255, 0.6);
    color: #fff;
    font-size: 14px;
    font-weight: lighter;
    line-height: 22px;
    display: none;
}

.board {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 10%;
    z-index: 999999;
    background: -webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255, 255, 255, 0.5) 40%, rgba(255,255,255,1));
    background:-moz-linear-gradient(top, rgba(255,255,255,0),  rgba(255,255,255,1) 50%, rgba(255,255,255,1));
    background:-o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 50%,  #ff0000 52%,rgba(255,255,255,1));
    background:linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 50%, rgba(255,255,255,1));
    display: none;
}

.story_continue {
    position: absolute;
    top: -70%;
    left: 1%;
    margin: 0 auto;
}

.board_left {
    position: absolute;
    bottom: 0px;
    width: 50%;
    height: 50px;
    background-image:url("story_search.png");
    background-size: 100%;
    /* background-position: 0px; */
    background-repeat: no-repeat;
    background-position-y: center;
}

.board_right {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 50%;
    height: 50px;
    background-image:url("story_board.png");
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position-y: center;
}

.amap-ui-mobile .amap-ui-control-zoom {
    width: 18px!important;
}

.amap-ui-mobile .amap-ui-control-zoom a, .amap-ui-mobile .amap-ui-control-zoom-num {
    width: 18px!important;
    line-height: 16px!important;
    height: 18px!important;
}

.amap-ui-control-position-rt, .amap-ui-control-position-tr {
    top: 8%!important;
    right: 6%!important;
    pointer-events: none;
    display: none;
}

.amap-ui-control-zoom a {
    font-size: 16px!important;
    font-family: verdana;
}

.title {
    position: absolute;
    width: auto;
    top: 10px;
    left: 10px;
    z-index: 99999;
    background-image: url('title.png');
    width: 40%;
    height: 8%;
    background-repeat: no-repeat;
    background-size: contain;
    display: none;
}

.move_hint {
    position: absolute;
    width: 20%;
    height: 20%;
    background-image: url('move_hint.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: none;
    left: 60%;
    margin-left: -10%;
    top: 28%;
    margin-top: -10%;
    z-index: 99;
}

.scale_type {
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: 6px;
    width: 100%;
    font-size: 12px;
    text-align: center;
    color: #fff;
}

.scale_type span {
    margin-left: 14px;
    color: #fff;
}

.type_1 {
    background-image: url('mood0.svg');
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.type_2 {
    background-image: url('mood1.svg');
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.type_3 {
    background-image: url('mood2.svg');
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.type_4 {
    background-image: url('mood3.svg');
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.type_5 {
    background-image: url('mood4.svg');
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.type_6 {
    background-image: url('mood5.svg');
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.scale {
    position: absolute;
    width: auto;
    top: 66px;
    left: 10px;
    z-index: 99999;
    background-color: rgba(61, 58, 72, 0.5);
    width: 60px;
    height: auto;
    background-repeat: no-repeat;
    background-size: contain;
    /* border: 1px solid white; */
    display: none;
}

.center {
    margin: 0 auto;
    width: 50%;
}

.filter_board {
    position: relative;
    width: 100%;
    height: 0%;
    z-index: 99999;
    background-image: url('card_bg.png');
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    background-size: 100% 106%;
    background-repeat: no-repeat;
}

.my_board {
    position: relative;
    width: 100%;
    height: 0%;
    z-index: 99999;
    background-image: url('card_bg.png');
    background-position: center;
    background-size: 100% 106%;
    background-repeat: no-repeat;
}

.fb_submit {
    position: absolute;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    left: 50%;
    bottom: -28px;
    display: none;
    z-index: 999999;
}

.next,
.next_map,
.mb_submit,
.final_submit {
    position: absolute;
    width: 100%;
    height: 12%;
    bottom: 0%;
    display: none;
}

.next_button,
.next_button_map,
.mb_submit_button,
.fb_submit_button,
.final_submit_button {
    position: relative;
    width: 50%;
    height: 100%;
    z-index: 9999999;
    pointer-events: none;
    background-color: #5a5a77;
    left: 50%;
    top: -100%;
    border-left: 1px solid white;
    background-repeat: no-repeat!important;
}

.on_scale {
    background-color: #373541;
}

.story_board {
    position: absolute;
    bottom: 0%;
    width: 90%;
    height: 45%;
    z-index: 99999;
    margin-left: -45%;
    left: 50%;
    background-image: url('PC-board_down(repeat).png');
    overflow: visible;
    background-size: 100%;
    background-repeat: repeat-y;
    display: none;
    -o-border-radius: 6px;
    /* -webkit-border-radius: 6px; */
    -moz-border-radius: 6px;
    /* border-radius: 6px; */
    border-top-right-radius: 6px;
}

.story_head {
    position: absolute;
    width: 200px;
    height: 6%;
    z-index: 99999;
    right: 20px;
    top:20px;
    display: none;
}

#contact_input {
    display: none;
}

.order_button_box {
    position: absolute;
    top: -25px;
    left:0px;
    width: 33%;
    height: 0px;
    line-height: 25px;
    font-size: 12px;
    z-index: 9999999999999;
    display: block;
}

.radius {
    border-top-left-radius: 6px;
}

.order_button {
    width:100%;
    height: 20px;
}

.order_button .default_order{
    float: left;
    border-top-left-radius: 4px;
}

.order_button .time_order{
    border-top-right-radius: 4px;
}

.order{
    display: inline-block;
    text-align: center;
    width: 50%;
    height: 25px;
    font-weight: lighter;
    color: #ffffffe8;
    box-shadow: 1px -4px 8px #3735417a;
    -moz-box-shadow: 1px -4px 8px #3735417a;
    -webkit-box-shadow: 1px -4px 8px #3735417a;
    -o-box-shadow: 1px -4px 8px #3735417a;
    background-color: #72729b;
}

.on_order{
    color:#373541;
    position:relative;
    height: 28px;
    line-height: 28px;
    top: -3px;
    background: url("PC-board_up.png") repeat;
}

.map_tips_box{
    position: absolute;
    top: 20%;
    width: 50%;
    height: 20px;
    padding-left: 20px;
    line-height: 20px;
    color: white;
    right: 0;
    background: url('board_button_tips.svg') no-repeat;
    background-size: 15px;
    background-position: left;
    font-weight: lighter;
}

.pagination_position {
    bottom: -30px!important;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #fff!important;
    opacity: .8!important;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #000000!important;
}

.story_info {
    position: absolute;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}

.story_position {
    position: absolute;
    top: 6%;
    margin: 0 5%;
    width: 90%;
    height: 8%;
    display: none;
}

.story_memo {
    position: absolute;
    top: 8%;
    margin: 0 4%;
    width: 92%;
    height: 72%;
    display: none;
}

.story_id {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 30%;
    height: 100%;
    display: none;
}

.my_story {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    display: none;
}

.mood_input {
    width: 100%;
    height: 29px;
    border-bottom-width: 1px;
    border-color: black;
    border-bottom-style: solid;
}

.my_story_input {
    width: 100%;
    height: 30px;
}

.story_mood {
    position: absolute;
    top: 0;
    left: 70%;
    width: 30%;
    height: 100%;
    display: none;
}

#mood_select {
    border-style: none;
}

.story_mood_input,
.story_position_input,
.story_id_input,
.story_age_input
{
    width: 100%;
}

.detail_content p {
    margin-top: -6px;
}

.story_mood_input {
    width: 100%;
    height: 90%;
}

textarea,input {
    width: 100%;
    height: 100%;
    padding: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
    border-radius: 4px;
    color: #373541;
    border: 1px #373541 solid;
    outline: none;
}

input::-webkit-input-placeholder {
    color: #ccc;
    padding-left: 2px;
}

.search_position {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 99999;
    color: #343434;
    display: none;
}

.lead_line {
    position: absolute;
    width: 100%;
    font-size: 12px;
    line-height: 20px;
    margin-bottom: 0px;
    color: white;
    text-align: center;
    opacity: 0;
}

.lead_line p {
    color: rgba(255, 255, 255, 0.8);
    text-align: center;
    margin: 0 auto;
}

.search_position_type {
    position: absolute;
    top: 30%;
}

.mood_select {
    position: absolute;
    top: 0;
    right: 0;
}

#street {
    display: none;
}

#province,
#city,
#district {
    width: auto;
}

.question {
    position: absolute;
    width: 70%;
    height: 10%;
    top: 22%;
    margin-left: -35%;
    left: 50%;
    background-position: left;
    background-size: 100%;
    display: none;
}

#share_line_1 {
    left: 70%;
}

#share_line_2 {
    left: 50%;
}

.answer {
    position: absolute;
    width: 70%;
    height: 50%;
    top: 42%;
    margin-left: -35%;
    left: 50%;
    display: none;
}

.mood_list {
    display: none;
}

.filter_button {
    position: absolute;
    width: 100%;
    height: 17.5%;
    bottom: 0%;
    display: none;
}

.mood {
    position: relative;
    float:left;
    width: 48%;
    margin: 1%;
}

.mood_other {
    float:left;
    width: 48%;
    margin: 1%;
    display: none;
}

.mood_type {
    position: relative;
    font-size: 16px;
    border: 1px solid #3d3b46;
    padding: 2px 42px;
    border-radius: 2px;
}

.mood_type_on {
    color: #ffffff!important;
    background-color: #5a5a77;
    border: 1px solid #5a5a77;
}

.mood_type_off {
    border: 2px solid #6d6d6d;
}


.picker_content {
    position: absolute;
}


.blink {
    animation:blink 1s 1;
}

@keyframes blink {
    0% {opacity: 0.6}
    50% {opacity: 1}
    100% {opacity: 0.6}
}

.search_type {
    height: 24px;
}

#search_input {
    background-image: url('Search.svg');
    border: 1px solid #333;
    border-radius: 4px;
    background-repeat: no-repeat;
    background-size: auto 80%;
    background-position-y: center;
    background-position-x: 95%;
}

.story {
    width: 90%;
    margin: 0 5%;
    font-size: 14px;
    word-break: break-all;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: #9c9c9c6b;
}

.story_content {
    width: 100%;
}

.social {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 20px;
    margin-top: 0;
}

.social_container {
    position: relative;
    left: 60%;
    width: 40%;
    height: 100%;
}

.like {
    position: relative;
    float: left;
    left: 28%;
    background-image: url('like.png');
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: 100%;
    margin: auto 10px;
}

.share {
    position: relative;
    float: left;
    left: 40%;
    background-image: url('share.png');
    width: 14px;
    height: 14px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.share_hint {
    position: absolute;
    right: 0;
    top: 0;
    width: 8%;
    height: 30%;
    background-image: url('hand.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    z-index: 999999;
    display: none;
}

.up_down {
    animation: up_down 1s infinite;
}

@keyframes up_down {
    0% {top:2%;}
    100% {top:0%;}
}

.like_count {
    position: relative;
    float: left;
    left: 22%;
    top: -20%;
    width: auto;
    height: 18px;
}

.filter_container {
    position: relative;
    width: 80%;
    top: 38%;
    margin: 0 auto;
    display: none;
}

.tag {
    float: left;
    width: auto;
    margin-right: 2%;
    margin-bottom: 2%;
}

.tag_content {
    font-size: 12px;
    color: #4c4c4c;
    border: 1px solid #b1b1b1;
    padding: 2px 8px;
}

.back {
    position: relative;
    width: 50%;
    height: 100%;
    z-index: 9999999;
    background-color: #5a5a77;
    border-right: 1px solid white;
}

.back_word {
    position: relative;
    background-image: url("back.svg");
    background-repeat: no-repeat;
    width: 22%;
    height: 100%;
    margin-left: -11%;
    left: 50%;
    top: 20%;
}

.next_word {
    position: relative;
    background-image: url('next.svg');
    background-repeat: no-repeat;
    width: 23%;
    height: 100%;
    margin-left: -11.5%;
    left: 50%;
    top: 20%;
}

.handpick {
    position: absolute;
    background-image: url('handpick.svg');
    background-repeat: no-repeat;
    background-size: contain;
    width: 4%;
    height: 100%;
}

.choice {
    position: absolute;
    top: -82%;
    left: 5%;
    margin: 0 auto;
}

.question_hint {
    position: absolute;
    bottom: 16%;
    width: 60%;
    height: 4%;
    z-index: 9999999;
    left: 60%;
    margin-left: -35%;
    display: none;
}

.question_circle {
    float: left;
    background-image: url('circle_no.svg');
    background-repeat: no-repeat;
    width: 6%;
    height: 100%;
}

.mood_type span {
    position: relative;
    font-size: 16px;
    font-weight: lighter;
    left: 25%;
}

.question_line {
    position: relative;
    float: left;
    background-image: url('line.svg');
    background-repeat: no-repeat;
    width: 8%;
    height: 100%;
    top: 50%;
}

/* .story_head_icon {
    position: absolute;
    background-image: url('book.svg');
    top: 28%;
    left: 5%;
    width: 6%;
    height: 40%;
    background-repeat: no-repeat;
    background-size: 100% auto;
} */

.story_head_count {
    position: absolute;
    background-image: url('mobile_book.svg');
    background-repeat: no-repeat;
    background-size: auto 15px;
    color: white;
    background-position: left;
    padding-left: 20px;
    right: 0px;
    top: -6px;
}

.story_head_count p {
    font-size: 14px;
    margin: 0;
    color: white;
}

.story_head_count span {
    color: white;
}

.post {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 999999;
    background-size: 100%;
    background-repeat: no-repeat;
}

.post_bg {
    position: absolute;
    top: 0%;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('post_bg.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.closed{
    width: 40px;
    height: 40px;
    position: absolute;
    left: 5px;
    top: 5px;
    display: none;
    z-index: 99999999999;
    -webkit-filter: grayscale(100%);
}

.closed img{
    width: 100%;
    height: 100%;
}

.save_image_tips{
    width: 100%;
    height: 50px;
    font-size: 14px;
    line-height: 50px;
    position: absolute;
    bottom: 0px;
    display: none;
    text-align: center;
    background: rgba(255,255,255,0.9);
}

.check {
    position: fixed;
    display: none;
    width: 130px;
    height: 61px;
    top: -80px;
    left: 0px;
    background-image: url('check.png');
    background-size: 100%;
    background-repeat: no-repeat;
}

.save_image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 999999;
    background-image: url('post_bg.jpg');
    background-size: 100%;
    background-repeat: no-repeat;
}

.story_board > div {
    max-height: 100%;
}

#post_bg {
    display: none;
}

#post_story {
    border-bottom-width: 10px;
    border-bottom-style: solid;
    border-color: black;
    border-image: url('more.svg') 15 repeat;
}

.detail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('detail_bg.png');
    background-position: center;
    background-repeat: no-repeat;
    display: none;
    z-index: 999999;
}

.detail_container {
    position: relative;
    width: 90%;
    height: 95%;
    margin-left: -45%;
    left: 50%;
    background-color: #fffdfd;
    z-index: 999999;
    top: 5%;
    box-shadow: 1px 1px 20px 0px #ccc;
}

.detail_process {
    position: relative;
}

.detail_head {
    position: relative;
    width: 90%;
    height: 8%;
    margin-left: -45%;
    left: 50%;
    top: 1%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: #ccc;
}

.detail_select {
    position: absolute;
    top: -15%;
    left: 1%;
    width: 20%;
    height: 70%;
    background-size: contain;
    background-repeat: no-repeat;
}

.detail_mood {
    position: absolute;
    right: 22%;
    bottom: 20%;
    border: 1px solid #a9a9a9;
    padding: 0px 10px;
    border-radius: 16px;
    font-size: 12px;
    color: #a9a9a9;
}

.detail_content_board{
    position: relative;
    width: 90%;
    height: 87.5%;
    margin-left: -45%;
    left: 50%;
    top: 2.5%;
}
.detail_content {
    position: relative;
    width: 90%;
    height: 90%;
    margin-left: -45%;
    left: 50%;
    top: 2.5%;
    font-size: 16px;
    line-height: 28px;
}

.detail_share {
    position: absolute;
    background-image: url('detail_share.png');
    background-repeat: no-repeat;
    background-size: 60%;
    right: -14%;
    bottom: 18%;
    width: 18%;
    height: 30%;
}

.detail_back {
    position: absolute;
    background-image: url('detail_back.png');
    background-repeat: no-repeat;
    background-size: 60%;
    right: -14%;
    bottom: -2%;
    width: 18%;
    height: 30%;
}

.detail_like {
    position: absolute;
    background-image: url('like.png');
    width: 16px;
    height: 16px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    bottom: 22%;
    right: 12%;
}

.detail_like_count {
    position: absolute;
    right: 0%;
    bottom: 25%;
    width: 35px;
    height: 18px;
}

.detail_like_count span {
    color: #a9a9a9;
    font-size: 14px;
    font-weight: 100;
}

span.substr {
    font-weight: 100;
}

.show_mood {
    position: absolute;
    left: 58%;
    top: -18%;
    border: 1px solid #a9a9a9;
    padding: 0px 12px;
    border-radius: 12px;
    font-size: 12px;
    color: #a9a9a9;
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.80);
}

.detail_select_word {
    position: absolute;
    top: 28%;
    left: 10%;
    font-size: 12px;
    font-weight: lighter;
    color: #a9a9a9;
}

.post_board {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 24%;
    background-image: url('post_board.png');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 99999;
}

.post_logo {
    position: absolute;
    bottom: 20%;
    left: 5%;
    background-image: url('logo.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 20%;
    height: 20%;
}

.post_board_content {
    position: absolute;
    width: 50%;
    top: 5%;
    left: 5%;
    height: 10%;
}

.post_board_content > .story_head_icon {
    position: absolute;
    top: 50%;
    left: 12%;
    background-image: url('line.svg');
    width: 22px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
}

.post_board_content > .story_head_count > p {
    font-size: 12px;
}

.post_user_code {
    position: absolute;
    right: 16%;
    top: 24%;
    z-index: 999;
}

.post_code_bg {
    position: absolute;
    right: -23%;
    bottom: 41%;
    background-image: url('code_bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 56%;
    height: 45%;
}

.post_code_bg_word {
    position: absolute;
    right: 1%;
    top: 10%;
    width: 20%;
    height: 80%;
}

.post_title_first {
    position: absolute;
    top: 18%;
    left: 10%;
    width: auto;
}

.post_title_second {
    position: absolute;
    top: 20.5%;
    left: 10%;
    width: auto;
}

.post_content {
    position: absolute;
    width: 64%;
    top: 30%;
    left: 30%;
}

.post_content p {
    font-size: 14px;
    color: #fff;
    font-weight: lighter;
}

.code_share_word {
    position: absolute;
    font-size: 12px;
    writing-mode: vertical-rl;
    color: #aeaeae;
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.80);
}

.post_title_first p,
.post_title_second p {
    font-size: 12px;
    background-color: #ffc279;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    width: 100%;
    height: 100%;
    z-index: 99999999;
}

.amap-ui-control-theme-dark .amap-ui-control-zoom a, .amap-ui-control-theme-dark .amap-ui-control-zoom-num {
    background-color: #333!important;
    border-bottom-color: #333!important;
    color: #9b9b9b!important;
}

.amap-ui-control-theme-dark .amap-ui-control-zoom {
    border-color: #000!important;
}

control-zoom a, .amap-ui-control-theme-dark .amap-ui-control-zoom-num {
    background-color: #333;
    border-bottom-color: #333!important;
    color: #9b9b9b!important;
}

.amap-ui-control-zoom {
    border: 1px solid #ccc;
    background-clip: padding-box;
    border-radius: 0px!important;
    width: 32px;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.cover_logo {
    position: absolute;
    top: 10px;
    right: 10px;
    background-image: url('logo.svg');
    background-size: contain;
    background-repeat: no-repeat;
    width: 10%;
    height: 4%;
    z-index: 999999;
    display: none;
}

#mood_type_1 {
    position: absolute;
    background-image: url('A.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 18%;
    height: 60%;
    top: 18%;
    left: 20%;
    z-index: 99;
}

#mood_type_2 {
    position: absolute;
    background-image: url('B.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 18%;
    height: 60%;
    top: 18%;
    left: 20%;
    z-index: 99;
}

#mood_type_3 {
    position: absolute;
    background-image: url('C.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 18%;
    height: 60%;
    top: 18%;
    left: 20%;
    z-index: 99;
}

#mood_type_4 {
    position: absolute;
    background-image: url('D.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 18%;
    height: 60%;
    top: 18%;
    left: 20%;
    z-index: 99;
}

#mood_type_5 {
    position: absolute;
    background-image: url('E.svg');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 18%;
    height: 60%;
    top: 18%;
    left: 20%;
    z-index: 99;
}

.cover {
    position: absolute;
    left: 0%;
    bottom: 0%;
    width: 100%;
    height: 50%;
    z-index: 999999;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: none;
}

.cover_title {
    position: absolute;
    left: 47%;
    margin-left: -45%;
    bottom: 36%;
    width: 90%;
    height: 30%;
    z-index: 999999;
    background: url('cover_title.png') center no-repeat;
    background-size: contain;
    display: none;
}

.dot_left {
    position: absolute;
    left: -18%;
    bottom: 14%;
    width: 28%;
    height: 38%;
    z-index: 999999;
    background: url('dot_left.png') center no-repeat;
    background-size: contain;
}

.dot_right {
    position: absolute;
    right: -10%;
    bottom: -10%;
    width: 24%;
    height: 20%;
    z-index: 999999;
    background: url('dot_right.png') center no-repeat;
    background-size: contain;
}

.lead {
    position: absolute;
    left: 50%;
    margin-left: -50%;
    bottom: 18%;
    width: 100%;
    height: 22%;
    z-index: 999999;
    background-size: contain;
    display: none;
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 20px;
    color:white;
}

.lead_animation_1 {
    animation: lead_1 1s 1;
    -webkit-animation:lead_1 1s 1;
    animation-fill-mode: forwards;
}

@keyframes lead_1
{
    0% {opacity: 0;top:10%;}
    100% {opacity: 1;top: 0%;}
}

.lead_animation_2 {
    animation: lead_2 1s 1;
    -webkit-animation:lead_2 1s 1;
    animation-fill-mode: forwards;
}

@keyframes lead_2
{
    0% {opacity: 0;top: 27%;}
    100% {opacity: 1;top: 17%;}
}

.lead_animation_3 {
    animation: lead_3 1s 1;
    -webkit-animation:lead_3 1s 1;
    animation-fill-mode: forwards;
}

@keyframes lead_3
{
    0% {opacity: 0;top: 72%;}
    100% {opacity: 1;top: 62%;}
}

.lead_animation_4 {
    animation: lead_4 1s 1;
    -webkit-animation:lead_4 1s 1;
    animation-fill-mode: forwards;
}

@keyframes lead_4
{
    0% {opacity: 0;top: 117%;}
    100% {opacity: 1;top: 107%;}
}


.amap-overlays, .amap-markers, .amap-marker {
    position: absolute;
    transform:translate(0,0)!important;
    left: 0;
    top: 0;
}

.dot_story{
    position: fixed;
    background-image: url('show_bg_1.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 999999999;
}

.dot_story p {
    transform: rotate(45deg);
}

.fade_in {
    animation: fadeIn 2s 1;
    -webkit-animation:fadeIn 2s 1;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}


.fade_out {
    animation: fadeOut 1.5s 1;
    -webkit-animation:fadeOut 1.5s 1;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}


.board_move {
    animation: board_move 1.5s 1;
    -webkit-animation:board_move 1.5s 1;
    animation-fill-mode: forwards;
}

@keyframes board_move {
    from {bottom:-10%;opacity:0;}
    to {bottom: 0%;opacity:1;}
}

.board_move_back {
    animation: board_move_back 1.5s 1;
    -webkit-animation:board_move_back 1.5s 1;
    animation-fill-mode: forwards;
}

@keyframes board_move_back {
    from {bottom: 0%;opacity:0;}
    to {bottom:-10%;opacity:1;}
}

.head_move {
    animation: head_move 1.5s 1;
    -webkit-animation:head_move 1.5s 1;
    animation-fill-mode: forwards;
}

@keyframes head_move {
    from {bottom:33%;opacity:0;}
    to {/* bottom:43%; */opacity:1;}
}

.story_content {
    width: 100%;
    margin-top: 1%;
}

.story_move {
    animation: story_move 1.45s 1;
    -webkit-animation:story_move 1.45s 1;
    animation-fill-mode: forwards;
}

@keyframes story_move {
    from {bottom:-8%;opacity:0;}
    to {/* bottom: 1.2%; */opacity:1;}
}

.story_all {
    display: none;
}


.amap-icon {
    position: relative;
    z-index: 9999999!important;
    overflow: hidden;
}

/*提示*/
.manual{
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
    z-index: 999999999999!important;
    background: rgba(0,0,0,0.8);
}

.share_tips_box .story_board .social_container .like{ 
    background-image: url('like_tips.svg');
    right: 52px;
    top:45%;
}

.share_tips_box .story_board .social_container .share{
    background-image: url('share.svg');
    right: 5px;
    top:45%;
}
.board_tips_box .board {
    background: unset;
}
.board_tips_box .board_left {
    background-image:url("board_button_tips.svg");
    background-size: auto 30%;
    /* background-position: 0px; */
    background-repeat: no-repeat;
    background-position: center;
}

.board_tips_box .board_right {
    background-image:url("board_button_tips.svg");
    background-size: auto 30%;
    background-repeat: no-repeat;
    background-position: center;
}

.scale_tips{
    position: absolute;
    width: auto;
    top: 30%;
    left: 12%;
    z-index: 99999;
    background-image: url('scale_tips.svg');
    width: 200px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain; 
}

.story_board_tips_box .story_board{
    background-image: url('scrollTop.svg');
    background-repeat: no-repeat;
    background-size: auto 30%;
    background-position-x: center;
    background-position-y: 10px;
}

.share_tips_box .story_board{
    background: url('share_box_tips.svg');
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position-x: right;
    background-position-y: 40%;
}

/* 我是华丽丽的分割线^_^ */

@media only screen and (min-width:500px) {

*{
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
    -webkit-font-smoothing:antialiased;
    text-align:justify;
}

html,
body {
    font-family: "Hiragino Sans GB","Microsoft Yahei",sans-serif;
    width: 100%;
    height: 100%;
    position: relative;
    margin: 0;
    padding:0;
    overflow: hidden;
    background-size: 50px 50px;
    left:unset;
}

p {
    font-size: 14px;
    color: #313131;
}

h2 {
    font-size: 14px;
    color: #a9a9a9;
    font-weight: 500;
}

h3 {
    font-size: 18px;
    color: #373541;
    background-color: rgba(177, 177, 177, 0.2);
    padding: 4px 6px;
    letter-spacing: 0px;
    text-align: center;
}

select {
    border-width: 0 0 1px 0;
    font-size: 14px;
    padding-bottom: 4px;
}

span {
    font-weight: bolder;
    color: black;
}

.map_container {
    width: 100%;
    height: 100%;
}
.board {
    position: absolute;
    height: 9%;
    z-index: 999999;
    left: unset;
}
.board_right {
    position: relative;
    width: 250px;
    height: 43px;
    top: 70px;
    margin:0 auto;
    background:url('pc-story_board.svg') no-repeat;
    background-repeat: no-repeat;
    float: none;
    box-shadow: 3px 3px 8px #888888;
    -moz-box-shadow: 3px 3px 8px #888888;
    -webkit-box-shadow: 3px 3px 8px #888888;
    -o-box-shadow: 3px 3px 8px #888888;
    border-radius: 8px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    -o-border-radius:8px;
}
.board_right:hover{
    background:url('pc-story_board_highlight.svg') no-repeat;
}
.board_right_word{
    width: 200px;
    height: 40px;
    margin:auto;
    background:url('pc-story_board_word.svg') no-repeat;
    background-position: center;
}
.board {
    position: absolute;
    bottom: 0;
    right: 80px;
    width: 360px;
    background:-webkit-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 50%, rgba(255,255,255,1));
    background:-moz-linear-gradient(top, rgba(255,255,255,0),  rgba(255,255,255,1) 50%, rgba(255,255,255,1));
    background:-o-linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 50%,  #ff0000 52%,rgba(255,255,255,1));
    background:linear-gradient(top, rgba(255,255,255,0), rgba(255,255,255,1) 50%, rgba(255,255,255,1));
    height: 15%;
    z-index: 999999;
}

.amap-ui-mobile .amap-ui-control-zoom {
    width: 20px!important;
}

.amap-ui-mobile .amap-ui-control-zoom a, .amap-ui-mobile .amap-ui-control-zoom-num {
    width: 20px!important;
    line-height: 18px!important;
    height: 25px!important;
}

.amap-ui-control-position-rt, .amap-ui-control-position-tr {
    bottom: 150px!important;
    right: 460px!important;
    top: unset!important;
}

.amap-ui-control-zoom a {
    font-size: 18px!important;
    font-family: verdana;
}

.title {
    position: absolute;
    width: 180px;
    left:20px;
    top:20px;
    background-size:100%;
    z-index: 99999;
    background-image: url('PC-title.png');
    width: 160px;
    height: 5%;
    background-repeat: no-repeat;
}

.scale {
    position: absolute;
    width: auto;
    top: 60px;
    left: 20px;
    z-index: 99999;
    /* background-image: url('PC-scale.svg'); */
    width: 318px;
    height: 26px;
    background-repeat: no-repeat;
    background-size: 100%;
    cursor: default;
}

.center {
    margin: 0 auto;
    width: 50%;
}

.filter_board {
    position: absolute;
    bottom:0px;
    height: 120px;
    z-index: 99999;
    background: #25242c;
    display: none;
}

.my_board {
    position: absolute;
    width: 360px;
    right: 80px;
    height: 0%;
    top:66px;
    z-index: 99999;
    background-image: url('PC-board_down(repeat).png');
    background-repeat: repeat;
}

.fb_submit {
    position: absolute;
    width: 60px;
    height: 60px;
    margin-left: -30px;
    left: 50%;
    bottom: -28px;
    display: none;
    z-index: 999999;
}

.next,
.next_map,
.mb_submit {
    position: absolute;
    width: 360px;
    height: 50px;
    right: 0px;
    bottom: 50px;
    display: none;
}

.fb_submit_button {
    position: fixed;
    background-image: url(submit.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 65px;
    height: 65px;
    z-index: 9999999;
}

.next_button,
.next_button_map,
.mb_submit_button {
    position: relative;
    width: 150px;
    height: 48px;
    z-index: 9999999;
    pointer-events: none;
    background: url('PC-button.svg');
    background-repeat: no-repeat;
    left: 190px;
    bottom: 48px;
    top: unset;
    border: unset;
    border-radius: 8px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    -o-border-radius:8px;
    box-shadow: 3px 3px 8px #888888;
    -moz-box-shadow: 3px 3px 8px #888888;
    -webkit-box-shadow: 3px 3px 8px #888888;
    -o-box-shadow: 3px 3px 8px #888888;
}


.story_board {
    position: absolute;
    top:66px;
    width: 360px;
    height: 85%;
    right:80px;
    z-index: 999999;
    background-image: url('PC-board_down(repeat).png');
    box-shadow: 0px 0px 8px #888888;
    -moz-box-shadow: 0px 0px 8px #888888;
    -webkit-box-shadow: 0px 0px 8px #888888;
    -o-box-shadow: 0px 0px 8px #888888;
    background-repeat: repeat;
    padding-bottom: 500px;
    margin-left: 0%;
    left: unset;
    overflow: unset;
    border-radius: unset;
}
.story_board > div {
    max-height: 100%;
}
.story_head {
    position: absolute;
    top:0%;
    right:80px;
    width: 360px;
    height: 50px;
    z-index: 999999;
    left: unset;
    margin-left: 0%;
    background-image: url('PC-board_up.png');
    border-radius: unset;
    background-repeat: repeat;
}
.story_middle {
    position: absolute;
    top:50px;
    right:80px;
    left: unset;
    height: 16px;
    width: 360px;
    background-size: 100%;
    background-image: url('PC-story-middle.png');
    z-index: 9999999;
}
.pagination_position {
    bottom: -30px!important;
}

.swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    display: inline-block;
    border-radius: 100%;
    background: #fff!important;
    opacity: .8!important;
}

.swiper-pagination-bullet-active {
    opacity: 1;
    background: #000000!important;
}

.story_info {
    position: absolute;
    width: 100%;
    height: 100%;
    background: url('bg-08.png') no-repeat;
    margin: 0 auto;
}

.story_position {
    position: absolute;
    top: 6%;
    margin: 0 5%;
    width: 90%;
    height: 8%;
    display: none;
}

.story_memo {
    position: absolute;
    top: 20%;
    margin: 0 10%;
    width: 80%;
    height: 60%;
    display: none;
}

.story_id {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 30%;
    height: 100%;
    display: none;
}

.my_story {
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    display: none;
}

.mood_input {
    width: 100%;
    height: 29px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: black;
}

.my_story_input {
    width: 100%;
    height: 30px;
}

.story_mood {
    position: absolute;
    top: 0;
    left: 70%;
    width: 30%;
    height: 100%;
    display: none;
}

#mood_select {
    border-style: none;
}

.story_mood_input,
.story_position_input,
.story_id_input,
.story_age_input
{
    width: 100%;
}

.story_mood_input {
    width: 100%;
    height: 90%;
}

textarea,input {
    width: 100%;
    height: 100%;
    padding: 4px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 16px;
    border-radius: 4px;
    color: #373541;
    user-select: all;
    border: 1px solid #373541;
    outline: none;
}

input::-webkit-input-placeholder {
    color: #ccc;
    padding-left: 2px;
}

.search_position {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 99999;
    color: #343434;
    display: none;
}

.search_position_type {
    position: absolute;
    top: 30%;
}

.mood_select {
    position: absolute;
    top: 0;
    right: 0;
}

#street {
    display: none;
}

.search {
    display: block;
    background-position: 26px center;
    position: absolute;
    width: 50px;
    height: 20px;
    top: 7px;
    right: 18px;
    z-index: 9999999;
    left: unset;
}

#province,
#city,
#district {
    width: auto;
}

.question {
    position: absolute;
    width: 70%;
    height: 10%;
    top: 22%;
    margin-left: -35%;
    left: 50%;
    background-position: left;
    background-size: 100%;
    display: none;
}

.answer {
    position: absolute;
    width: 70%;
    height: 50%;
    top: 35%;
    margin-left: -35%;
    left: 50%;
    display: none;
}

.mood_list {
    display: none;
}

.mood {
    float:left;
    width: 48%;
    margin: 1%;
}

.mood_other {
    float:left;
    width: 48%;
    margin: 1%;
    display: none;
}

.mood_type {
    font-size: 16px;
    border: 1px solid #3d3b46;
    padding: 2px 42px;
    border-radius: 2px;
}

.mood_type_on {
    color: #f6f6f6!important;
    background-color: #6d6d6d;
}

.mood_type_off {
    border: 2px solid #6d6d6d;
}


.picker_content {
    position: absolute;
}


.story {
    width: 90%;
    margin: 0 5%;
    font-size: 14px;
    word-break: break-all;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: #9c9c9c6b;
}

.story_content {
    width: 100%;
    margin-top: 12%;
}

.social {
    position: relative;
    display: inline-block;
    width: 100%;
    height: 20px;
    margin-top: 0;
}

.social_container {
    position: relative;
    left: 60%;
    width: 40%;
    height: 100%;
}

.like {
    position: relative;
    float: left;
    left: 39%;
    background-image: url('like.png');
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.share {
    position: relative;
    float: left;
    left: 34%;
    background-image: url('share.png');
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-size: 100%;
}

.like_count {
    position: relative;
    float: left;
    top: -12%;
    left: 43px;
    width: 35px;
    height: 20px;
}

.filter_container {
    top: 0;
    left: 0;
    width: unset;
    height: 100%;
    overflow-y: hidden;
    display: block;
}

.tag {
    float: left;
    margin-right: 15px;
    margin-bottom: 10px;
    height: 70px;
    width: 110px;
    background-repeat: no-repeat;
    background-size: auto 100%;
}

.tag_content {
    font-size: 14px;
    color: #d7d7d8;
    margin-top: 47px;
    padding-left: 8px;
    height: 30px;
    width: 100%;
    display: inline-block;
    background:-webkit-linear-gradient(top, rgba(37,36,44,0), rgba(37,36,44,0.9));
    background:-moz-linear-gradient(top, rgba(37,36,44,0),rgba(37,36,44,0.9));
    background:-o-linear-gradient(top, rgba(37,36,44,0),rgba(37,36,44,0.9));
    background:linear-gradient(top, rgba(37,36,44,0),rgba(37,36,44,0.9));
    border: unset;
}

.back {
    position: relative;
    width:150px;
    height: 48px;
    z-index: 9999999;
    left:20px;
    border-radius: 8px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    -o-border-radius:8px;
    box-shadow: 3px 3px 8px #888888;
    -moz-box-shadow: 3px 3px 8px #888888;
    -webkit-box-shadow: 3px 3px 8px #888888;
    -o-box-shadow: 3px 3px 8px #888888;
    background-image: url("PC-button.svg");
    background-repeat: no-repeat;
    border: unset;
}

.back_word {
    position: relative;
    background-image: url("PC-back-word.svg");
    background-repeat: no-repeat;
    width: 25%;
    height: 100%;
    margin-left: -12.5%;
    left: 50%;
    top: 25%;
}

.next_word {
    position: relative;
    background-image: url('PC-submit-word.svg');
    background-repeat: no-repeat;
    width: 28%;
    height: 100%;
    top: 25%;
    margin-left: -14%;
    left: 50%;
}

.handpick {
    position: absolute;
    background-image: url('handpick.svg');
    background-repeat: no-repeat;
    width: 5%;
    height: 100%;
    left: 2%;
}

.choice {
    position: absolute;
    top: -70%;
    left: 10%;
    margin: 0 auto;
}

.filter_board .scrollbar-external_wrapper {
    left: 110px;
    position: relative;
    top: 15px;
    width: 520px;
    height: 120px;
} 
.add_tag{
    color:white;
    height:15px;
    font-size: 12px;
    padding-left: 20px;
    line-height:15px;
    position: absolute;
    background-image: url('PC_plus.svg');
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left;
    bottom:18px;
    left: 640px;
    z-index:9999999999;
}

.board_left {
    display: none;
}

.cover {
    position: absolute;
    right: 0%;
    left: unset;
    bottom: 0%;
    width: 38%;
    height: 100%;
    z-index: 999999;
    background-repeat: unset;
    background-position: unset;
    background-size: 100% 100%;
    display: none;
}

.cover_title {
    position: absolute;
    left: unset;
    right: 80px;
    margin-left: unset;
    bottom: unset;
    width: 480px;
    height: 260px;
    z-index: 999999;
    background: url('cover_title.png') center no-repeat;
    background-size: contain;
    display: none;
}

.dot_left,
.dot_right {
    display: none;
}

.lead {
    position: absolute;
    left: unset;
    right: 10px;
    margin-left: unset;
    bottom: unset;
    width: 512px;
    height: 200px;
    z-index: 999999;
}

@keyframes lead 
{
    0% {opacity: 0;bottom: 24%;}
    30% {opacity: 0.5;}
    100% {opacity: 1;bottom: 28%;}
}

@-moz-keyframes lead 
{
    0% {opacity: 0;bottom:24%;}
    30% {opacity: 0.5;}
    100% {opacity: 1;bottom:28%;}
}

@-webkit-keyframes lead 
{
    0% {opacity: 0;bottom:24%;}
    30% {opacity: 0.5;}
    100% {opacity: 1;bottom:28%;}
}

.dot_story {
    position: absolute;
    background-image: url('show_bg_1.png');
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 999999999;
}

.amap-ui-control-zoom {
    border: 1px solid #ccc;
    background-clip: padding-box;
    border-radius: 3px;
    width: 24px!important;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.amap-ui-control-zoom a, .amap-ui-control-zoom-num {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    width: 24px!important;
    height: 24px!important;
    line-height: 24px!important;
    text-align: center;
    text-decoration: none;
    color: #333;
    display: block;
    cursor: pointer;
}

.amap-ui-control-zoom a, .amap-ui-control-zoom-num {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    width: 24px!important;
    height: 24px!important;
    line-height: 24px!important;
    text-align: center;
    text-decoration: none;
    color: #333;
    display: block;
    cursor: pointer;
}

.amap-ui-control-theme-dark .amap-ui-control-zoom {
    border-color: #333!important;
}

.fade_in {
    animation: fadeIn 1.5s 1;
    -webkit-animation:fadeIn 1.5s 1;
    animation-fill-mode: forwards;
}

@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}


.fade_out {
    animation: fadeOut 1.5s 1;
    -webkit-animation:fadeOut 1.5s 1;
    animation-fill-mode: forwards;
}

@keyframes fadeOut {
    from {opacity:1;}
    to {opacity:0;}
}

/* control board */
.board_move {
    animation: board_move 1.5s 1;
    -webkit-animation:board_move 1.5s 1;
    animation-fill-mode: forwards;
}

@keyframes board_move {
    from {bottom:-10%;opacity:0;}
    to {bottom:0%;opacity:1;}
}

/* story head */
.head_move {
    animation: head_move 1.5s 1;
    -webkit-animation:head_move 1.5s 1;
    animation-fill-mode: forwards;
}

@keyframes head_move {
    from {bottom:33%;opacity:0;}
    to {bottom:43%;opacity:1;}
}

.story_move {
    animation: story_move 1.45s 1;
    -webkit-animation:story_move 1.45s 1;
    animation-fill-mode: forwards;
}

@keyframes story_move {
    from {bottom:-8%;opacity:0;}
    to {bottom: 1.2%;opacity:1;}
}

.blink {
    animation:blink 2s 1;
}

@keyframes blink {
    0% {opacity: 0}
    50% {opacity: 1}
    100% {opacity: 0}
}

.show_mood {
    position: absolute;
    left: 61%;
    top: -16%;
    border: 1px solid #a9a9a9;
    padding: 1px 12px;
    border-radius: 16px;
    font-size: 12px;
    color: #a9a9a9;
    -webkit-transform-origin-x: 0;
    -webkit-transform: scale(0.80);
}

.filter_button {
    display: none;
}

#search_input::-webkit-input-placeholder{
    color:#333;
}
#search_input::-moz-placeholder{   /* Mozilla Firefox 19+ */
    color:#333;
}
#search_input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
    color:#333;
}
#search_input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
    color:#333;
}

.detail_container {
    position: relative;
    width: 90%;
    height: 95%;
    margin-left: -45%;
    left: 50%;
    background-color: #fffdfd;
    z-index: 999999;
    top: 5%;
    box-shadow: 1px 1px 20px 0px #ccc;
}

.detail_head {
    position: relative;
    width: 90%;
    height: 8%;
    margin-left: -45%;
    left: 50%;
    top: 1%;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: #ccc;
}

.order_button_box {
    position: absolute;
    width: 360px;
    height: 0px;
    line-height: 20px;
    font-size: 14px;
    z-index: 99999999999;
    top: 3px;
    display: block;
}

.search {
    position: absolute;
    width: 60px;
    height: 20px;
    top: 7px;
    right: 18px;
    left: unset:;
    z-index: 9999999;
    display: none;
}

#search_input {
    border: 1px #373541 solid;
    background: rgba(37,36,44,0) url(Search.svg) no-repeat;
    font-size: 14px;
    color:rgba(37,36,44,1);
    background-position: 28px center;
    height: 22px;
    line-height: 20px;
    background-size: auto 80%;
    border-radius: 4px;
}

.order_button {
    position: absolute;
    width: 120px;
    top: 5px;
    left: 18px;
    height: 20px;
    border: 1px #373541 solid;
    border-radius: 4px;
}

.order_button .default_order{
    float: left;
    border-top-left-radius: 4px 4px;
    border-bottom-left-radius: 4px 4px;
}

.order_button .time_order{
    border-top-right-radius: 4px 4px;
    border-bottom-right-radius: 4px 4px;
}

.map_tips_box{
    top: 50%;
    left: 33%;
}

.order{
    display: inline-block;
    text-align: center;
    width: 50%;
    height: 20px;
    color:#373541;
    font-weight: lighter;
    box-shadow: unset;
    -moz-box-shadow: unset;
    -wbkit-box-shadow: unset;
    -o-box-shadow: unset;
    background: unset;
}
.order:hover{
    color: white;
    background-color: #373541;
}
.on_order{
    color: white;
    background-color: #373541;
    position: unset;
    line-height: 20px;
}

.detail_content_board{
    position: relative;
    width: 90%;
    height: 87.5%;
    margin-left: -45%;
    left: 50%;
    top: 2.5%;
}
.detail_content {
    position: relative;
    width: 90%;
    height: 90%;
    margin-left: -45%;
    left: 50%;
    top: 2.5%;
    font-size: 14px;
    line-height: 20px;
}


.detail_select {
    position: absolute;
    top: -15%;
    left: 1%;
    width: 10%;
    height: 70%;
    background-size: contain;
    background-repeat: no-repeat;
}

.detail_select_word {
    position: absolute;
    top: 28%;
    left: 14%;
    font-size: 12px;
    font-weight: lighter;
    color: #a9a9a9;
}

.detail_mood {
    position: absolute;
    right: 22%;
    bottom: 20%;
    border: 1px solid #a9a9a9;
    padding: 0px 10px;
    border-radius: 16px;
    font-size: 12px;
    color: #a9a9a9;
}

.story_container {
    margin: 5px 0px 90px 0px;
}

.lead_animation_1 {
    animation: lead_1 1s 1;
    -webkit-animation:lead_1 1s 1;
    animation-fill-mode: forwards;
}

@keyframes lead_1
{
    0% {opacity: 0;top:10%;}
    100% {opacity: 1;top: 0%;}
}

.lead_animation_2 {
    animation: lead_2 1s 1;
    -webkit-animation:lead_2 1s 1;
    animation-fill-mode: forwards;
}

@keyframes lead_2
{
    0% {opacity: 0;top:25%;}
    100% {opacity: 1;top: 11%;}
}

.lead_animation_3 {
    animation: lead_3 1s 1;
    -webkit-animation:lead_3 1s 1;
    animation-fill-mode: forwards;
}

@keyframes lead_3
{
    0% {opacity: 0;top:68%;}
    100% {opacity: 1;top: 44%;}
}

.lead_animation_4 {
    animation: lead_4 1s 1;
    -webkit-animation:lead_4 1s 1;
    animation-fill-mode: forwards;
}

@keyframes lead_4
{
    0% {opacity: 0;top:110%;}
    100% {opacity: 1;top: 78%;}
}

.detail_like {
    position: absolute;
    background-image: url('like_clicked.png');
    width: 16px;
    height: 16px;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    bottom: 22%;
    right: 12%;
}

.detail_like_count {
    position: absolute;
    right: 0%;
    bottom: 25%;
    width: 35px;
    height: 18px;
}

.detail_share {
    position: absolute;
    background-image: url('PC-detail_share.png');
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 8px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    -o-border-radius:8px;
    box-shadow: 3px 3px 8px #888888;
    -moz-box-shadow: 3px 3px 8px #888888;
    -webkit-box-shadow: 3px 3px 8px #888888;
    -o-box-shadow: 3px 3px 8px #888888;
    bottom: 50px;    
    right: 20px;
    width: 130px;
    height:36px;
}

.detail_back {
    position: absolute;
    background-image: url('PC-detail_back.png');
    background-repeat: no-repeat;
    background-size: 100%;
    border-radius: 8px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    -o-border-radius:8px;
    box-shadow: 3px 3px 8px #888888;
    -moz-box-shadow: 3px 3px 8px #888888;
    -webkit-box-shadow: 3px 3px 8px #888888;
    -o-box-shadow: 3px 3px 8px #888888;
    left: 20px;
    bottom: 50px;
    width: 130px;
    height: 36px;

}


.detail_share:hover {
    background-image: url('PC-detail_share_highlight.png');
}

.detail_back:hover {
    background-image: url('PC-detail_back_highlight.png');
}   

.detail {
    position: absolute;
    top: 0;
    right: 80px;
    left: unset;
    width: 360px;
    height: 100%;
    background-image: url('detail_bg.png');
    background-position: center;
    background-repeat: no-repeat;
    display: none;
    z-index: 9999999;
}

#search_input {
    outline: none;
}

.type_1 {
    background-image: url('mood0.svg');
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.type_2 {
    background-image: url('mood1.svg');
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.type_3 {
    background-image: url('mood2.svg');
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.type_4 {
    background-image: url('mood3.svg');
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.type_5 {
    background-image: url('mood4.svg');
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.type_6 {
    background-image: url('mood5.svg');
    border: 1px solid rgba(255, 255, 255, 0.6);
}

.post {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: none;
    z-index: 9999999;
}

.post_bg {
    width: 100%;
    height: 100%;
    background-image: unset;
    background-size: unset;
    background-repeat: unset;
    background: rgba(0,0,0,0.6);
    opacity:0.8;
}

.post_board_content{
    position: absolute;
    top: 0px; 
    left: 0px; 
    width: 100%;
    height: 100%;
}
.post_user_code {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin-left: -75px;
    margin-top: -75px;
    z-index: 999;
}

.post_code_bg {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -65px;
    margin-top: -65px;
    background-image: url('code_bg.png');
    background-size: contain;
    background-repeat: no-repeat;
    width: 150px;
    height: 150px;
}

.post_code_bg_word{
    position: relative;
    width: 300px;
    text-align: center;
    writing-mode: unset;
    right: unset; 
    top: unset; 
    font-size: 14px;
    display: block;
    color:white;
    top: 50%; 
    height:unset; 
    margin: 0 auto;
    margin-top:100px;
}

.check {
    position: fixed;
    display: none;
    width: 130px;
    height: 60px;
    top: -70px;
    left: 0px;
    background-image: url('check.png');
    background-size: contain;
}

.story_head_icon {
    position: absolute;
    background-image: url('book.svg');
    top: 32%;
    left: 5%;
    width: 5%;
    height: 38%;
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: left;
}

.story_head_count {
    position: absolute;
    top: 32%;
    left: 6%;
    background-image: url("book.svg");
}

.tag_tips{
    width:80px;
    display:inline-block;
    height:70px;
    position: absolute;
    z-index:333;
    margin:15px;
    font-size: 14px;
    border-right-width: 1px;
    border-right-style: solid;
    border-right-color: rgba(255,255,255,0.5);
    color: rgba(255,255,255,0.8);
}

.detail_content p {
    margin-top: 0px;
}

.closed {
    width: 100%;
    height: 100%; 
}

.closed img{
    display: none;
}

.share_tips_box .story_board{
    box-shadow: unset;
}
.share_tips_box .story_board .social_container .like{ 
    right: 60px;
    top:24%;
}

.share_tips_box .story_board .social_container .share{
    right: 15px;
    top:24%;
}

.board_tips_box  .story_board{
    background: unset;
    box-shadow: unset;
}

.board_tips_box .board,.board_left {
    background: unset;
}

.board_tips_box .board_right {
    /*position: fixed;*/
    top:unset;
    box-shadow: unset;
    bottom: 50px;
    background-size: auto 15px;
    position: relative;
    width: 250px;
    height: 43px;
    top: 70px;
    margin: 0 auto;
}

.board_tips_box .filter_board {
    position: fixed;
    background: url('board_button_tips.svg');
    background-size: auto 15px;
    left: 0px;
    background-position: center; 
    background-repeat: no-repeat;
}

.search_type {
    height: 100%;
}

.scale_tips{
    position: absolute;
    width: auto;
    top: 100px;
    left: 150px;
    z-index: 99999;
    width: 200px;
    height: 30px;
    background-repeat: no-repeat;
    background-size: contain; 
}

.story_board_tips_box .story_board{
    background-repeat: no-repeat;
    background-size: auto 150px;
    box-shadow: unset;
    background-position: center;
    background-image: url('PC-scrollTop.svg');
}

.share_tips_box .story_board{
    box-shadow: unset;
    background-repeat: no-repeat;
    background-size: 50% auto;
    background-position-x: right;
    background-position-y: 12%;
    top: 12%;
    right: 7%;
}

#contact_input {
    display: none;
}

.story_head_count p {
    font-size: 14px;
    margin: 0;
    color: #313131;
}

.story_head_count span {
    color: #313131;
}

.scale_type {
    float: left;
    background-repeat: no-repeat;
    background-size: 10px;
    background-position: 6px;
    width: 51px;
    height: 26px;
    font-size: 12px;
    line-height: 26px;
    font-weight: lighter;
    text-align: center;
    color: #fff;
}

.scale_type:hover span {
    color: #323232;
}

.on_scale {
　　background-color: #373541;
}

/* .scale_type:hover  {
    background-color: #373541;
}
 */
/* .scale_type:active {
    background-color: #373541;
} */

.final_submit_button {
    position: relative;
    width: 150px;
    height: 48px;
    z-index: 9999999;
    pointer-events: none;
    background-color: #5a5a77;
    left: 50%;
    top: -48px;
    border-left: 1px solid white;
    background-repeat: no-repeat!important;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    -o-border-radius: 8px;
    box-shadow: 3px 3px 8px #888888;
    -moz-box-shadow: 3px 3px 8px #888888;
    -webkit-box-shadow: 3px 3px 8px #888888;
    -o-box-shadow: 3px 3px 8px #888888;
}

.move_hint {
    position: absolute;
    width: 120px;
    height: 100px;
    background-image: url('move_hint.png');
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: none;
    left: 54%;
    margin-left: -60px;
    top: 46%;
    z-index: 99;
}

.input_trigger {
    position: absolute;
    right: 0;
    top: 0;
    width: 50px;
    height: 22px;
    z-index: 9999999;
}

}

@media screen and (max-width: 1279px) { 

.tag_tips{
    width:65px;
}
.tag { 
    width:110px;
}
.filter_board .scrollbar-external_wrapper {
    width:378px;
    left:93px;
}
.add_tag{
    left: 475px;
}

}