body { 
    background-color: #F8F7F2;
}

.newopen {
    min-width: 320px;
    padding: 0;
    margin: 0;
    background-color: #F8F7F2;
    position: relative;
}

/* .open-header-wrapper {
    background-image: url('/images/event/event201708/TSB_japantaiwan_01.png');
    background-repeat: repeat-x;
    background-position: top left;
} */

.evt-title {
    color: #5a04cb;
    font-size: 36px;
    font-weight: 700;
    display: inline-block;
}
.evt-title:after {
    display: inline-block;
    width: 3px;
    height: 36px;
    background-color: #5a04cb;
    vertical-align: text-top;
    margin-right: 10px;
    margin-left: 20px;
    content: '';
} 

.open-header-wrapper {
    background-image: -webkit-gradient(linear, left top, left bottom, from(#29bedf), to(#6d4bea));
    background-image: -webkit-linear-gradient(top, #29bedf, #6d4bea);
    background-image: -moz-linear-gradient(top, #29bedf, #6d4bea);
    background-image: linear-gradient(to bottom, #29bedf, #6d4bea);
}

.open-header {
    display: block;
    height: 610px;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: auto 100%;
    position: relative;
}

.open-header:before {
    z-index: -1;
    position: absolute;
    width: 50%;
    height: 474px;
    top: 0;
    left: 0;
    background-color: #365A9D;
    border-bottom: 1px solid #1B4976;
    content: '';
}
.open-header:after {
    z-index: -1;
    position: absolute;
    width: 50%;
    height: 474px;
    top: 0;
    right: 0;
    background-color: #365A9D;
    border-bottom: 1px solid #1B4976;
    content: '';
}

.back-home {
    display: block;
    width: 100%;
    height: 350px;
}

.open-content {
    font-size: 16px;
    color: #000;
    line-height: 1.75em;
    background-color: #f8f7f2;
    min-height: 400px;
}

.wrapper {
    position: relative;
    padding: 62px 20px;
    max-width: 750px;
    margin: auto;
}

.open-content .wrapper {
    margin-top: 25px;
    margin-bottom: 30px;
    background-image: url(/images/event/201711/tsb_112017_content2_tw.png);
    background-repeat: no-repeat;
    background-position: center 20px;
    max-width: 980px;
    min-height: 315px;
    padding-left: 50px;

}

.open-content ul {
    padding-left: 1em;
    margin-bottom: 1em;
    display: inline-block;
    width: calc(100% - 220px);
    vertical-align: middle;
}

.open-content ul:last-of-type {
    margin-top: 1em;
}

.open-content li {
    text-indent: -0.75em;
    /* color: #eed390; */
    font-size: 16px;
}

.open-content span {
    /* color: #f00; */
}

.open-footer {
    padding: 0.5em;
    color: #fff;
    line-height: 1.5em;
    text-align: center;
    background-color: #7848e5;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}

.signin {
    position: absolute;
    left: calc(50% - 135px);
    top: -103px;
    z-index: 1;
    margin-top: 0;
    width: 258px;
    height: 60px;
    display: block;
    text-align: center;
    line-height: 1.75em;
    font-size: 32px;
    background-repeat: no-repeat;
    background-size: contain;
}


.signin:hover {
    /* transition-property: margin-top;
    transition-duration: 0.5s;
    margin-top: 5px; */
    text-decoration: none;
}

@media screen and (max-height: 954px) {
    .newopen {
        position: relative;
    }
}

@media screen and (max-width: 954px) {
    .open-content .wrapper {
        background-image: none;
        margin-bottom: 0;
    }
}

@media screen and (max-width: 800px) {
    .open-header {
        height: 400px;
    }
    .back-home {
        height: 240px;
    }
    .wrapper {
        padding-top: 20px;
    }
    .signin {
        margin-top: 50px;
        position: relative;
        top: 0;
        left: 50%;
        margin-left: -155px;
        width: 310px;
        height: auto;
        border-radius: 8px;
        font-size: 20px;
        height: 96px;
        line-height: 96px;
    }
}

@media screen and (max-width: 640px) {
    .open-header {
        height: 470px;
        background-size: 100%;
        background-color: #F8F7F2;
    }
    .open-header::before,
    .open-header::after {
        display: none;
    }
    .evt-title {
        display: block;
    }
    .open-content ul {
        width: 100%;
    }
    .open-content .wrapper {
        padding-left: 20px;
    }
}

@media screen and (max-width: 480px) {
    .open-header {
        height: 370px;
    }
    .back-home {
        height: 130px;
    }
}

@media screen and (max-width: 380px) {
    .open-header {
        height: 280px;
    }
    .evt-title {
        font-size: 24px;
    }
    .evt-title:after {
        height: 24px;
    }
}

@media screen and (max-width: 320px) {
    .open-header {
        height: 235px;
    }
}