html {
    font-size: 3.6vw;
    letter-spacing: .1em;
}

body {
    font-family: 'Helvetica Neue', Helvetica, 'Microsoft YaHei', sans-serif;
    background-color: #e8eff1;
    min-height: 100vh;
    padding-top: 13vw;
    padding-bottom: 13.8vw;
    box-sizing: border-box;
}

body,
h2,
p {
    margin: 0;
}

a {
    text-decoration: none;
}

.flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
}


img {
    width: 100%;
    height: 100%;
    display: block;
}

header {
    width: 100%;
    height: 13vw;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    background-color: white;
    position: fixed;
    top: 0;
    text-align: center;
    z-index: 1;
}

header span {
    width: 13%;
}

.back {
    display: block;
    width: 13%;
    height: 100%;
    background: url("../icon/detail_navi_icons.png") no-repeat;
    background-size: 200% 80%;
    background-position: left center;
}

.title {
    -webkit-box-flex: 1;
    -webkit-flex: auto;
    flex: auto;
    font-size: 1rem;
    color: #4c4c4c;
    margin-right: 13%;
    padding: 0 16.76vw;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
}

.container {
    margin: 0 4.17vw;
}

.count {
    font-size: .7rem;
    text-align: center;
    line-height: 3;
}

.code_list {
    color: #ff8600;
}

.item {
    margin-bottom: 6.11vw;
    position: relative;
    border-radius: 2vw;
    background: url('data:image/png;base64,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') no-repeat;
    background-size: 100% auto;
    background-color: white;
    padding-top: 10vw;
    padding-bottom: 3vw;
    box-shadow: 0 .3vw 1vw rgba(100, 100, 100, .3);
}

.item.used {
    -webkit-filter: saturate(37%);
    filter: saturate(37%);
}

.item > div {
    display: inline-block;
    margin: 0 2.78vw;
}

.item p {
    margin: .5em 0;
}

.code {
    padding-bottom: 1vw;
    border-bottom: 1px solid #f5ca3a;
}

.item::after {
    content: "未使用";
    position: absolute;
    bottom: 3vw;
    right: 2.78vw;
}

.item.used::after {
    content: "已使用";
}

.code_gen {
    width: 100%;
    line-height: 13.8vw;
    text-align: center;
    color: white;
    background-color: #ff8600;
    position: fixed;
    bottom: 0;
}