#history-wrap {
    position: relative;
}

.history-modal {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.95);
    padding: 40px;
    z-index: 9999;
}

    .history-modal .container {
        background: #fff;
        text-align: center;
    }

    .history-modal .close-btn {
        position: absolute;
        right: 0;
        top: 0;
        padding: 0px 20px;
        font-size: 100px;
        cursor: pointer;
        line-height: 0.75;
        color: #666;
        transition: color 0.25s;
    }

        .history-modal .close-btn:hover {
            color: #3a3a3a;
        }


.F1-ul {
    position: fixed;
    bottom: 0;
    display: table;
    width: 100%;
    background: -webkit-gradient(linear, left top, left bottom, from(#000000),to(#000000));
    background: -webkit-linear-gradient(top, #000000 0%,#000000 100%);
    background: linear-gradient(to bottom, #000000 0%,#000000 100%);
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0)),to(rgba(0, 0, 0, .65)));
    background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, .65) 100%);
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%,rgba(0, 0, 0, .65) 100%);
    z-index: 999;
}

    .F1-ul .each {
        position: relative;
        display: table-cell;
        text-align: center;
        padding: 15px 0;
        color: #fff;
        font-style: italic;
        font-size: 20px;
        font-weight: 400;
        text-decoration: none;
    }

        .F1-ul .each.active:before {
            opacity: 1;
        }

        .F1-ul .each:before {
            opacity: 0;
            -webkit-transition: opacity 300ms;
            transition: opacity 300ms;
            position: absolute;
            top: -8px;
            left: 50%;
            width: 9px;
            height: 9px;
            content: "";
            background: #fff;
            border-radius: 20px;
            -ms-transform: translateX(-50%);
            -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
        }

        .F1-ul .each .bar {
            position: absolute;
            width: 0;
            left: 0;
            bottom: 0;
            background: gold;
            height: 10px;
        }

@media (min-width:768px) and (max-width:992px) {


}

@media (max-width:767px) {
    .F1-ul { display: none; }
    #F1 .F1-con1 p:first-child { font-size:20px; display:block; width:100%; }
    #F1 .F1-con1 p:first-child:before { font-size:30px; left:0; top: -45px; width:100%; }
    #F4 .F4-con1 p:first-child { font-size:20px; display:block; width:100%; }
    #F4 .F4-con1 p:first-child:before { font-size:30px; left:0; top: -45px; width:100%; }
    #F1 .F1-con1 p { font-size:15px; padding:0 15px; word-break:keep-all; line-height: 25px; }
    #F1 { padding:100px 0 35px; background-attachment:inherit!important; background-size: auto 100%; background-position:right;}
    #F2 .F2-con1 p:first-child { font-size:20px; display:block; width:100%; text-align:center; }
    #F2 .F2-con1 p:first-child:before { font-size:30px; left:0; top: -45px; width:100%; }
    #F2 .F2-con1 p:nth-child(2) { padding:0 15px; font-size:15px; word-break:keep-all; margin:20px 0 0; text-align:center; }
    #F2 { margin:100px 0 50px; }
    #F4 { margin:85px 0 50px; }
    #F4 .F4-con2 ul li { width:100%; margin:0 0 15px; padding:30px 15px; height:auto; }
    #F4 .container {width:100%!important; }
    #F4 .F4-con1 p:last-child { font-size:15px; padding:0 15px; word-break:keep-all; }
    #F4 .F4-con2 > p:first-child { font-size:20px; }
    #F4 .F4-con2 .F4-cont-title { font-size:18px; }
    #F4 .F4-con2 ul { padding:0 15px; }
    #F4 .F4-con2 .F4-cont-description { font-size:14px; line-height:25px; margin:20px 0 0; word-break:keep-all; }
    #F4-1 { background:green; }
    .F4-con3 > img { display:none; }
}