html,body{
    height: 100%;
}
.main{
    min-height: 100%;
    overflow-y:  auto;
    background-image:  url(../images/xxbg.jpg);
    box-sizing:  border-box;
    padding: 0 6%;
    color: #f6c466;
    line-height: 1;
}
.main .title{
    display:  block;
    margin: 0 auto;
    max-height: 12vh;
}
.container{
    width: 100%;
}
.quantity{
    max-width: 980px;
    margin:  14px auto 0;
    padding-top: 0.3rem;
}
.search{
    height: 4em;
    color: #000;
    max-height: 7.4vh;
}
.search .submit-button,
.search .content{
    height:  100%;
    box-sizing:  border-box;
    border-radius: 2em;
}
.search .submit-button{
    width: 10em;
    float:  right;
    border:  0 none;
    outline:  0 none;
    padding:  0;
    cursor:  pointer;
    background-color: #fac06d;
}
.search .content{
    border: 0.15em solid #fac06d;
    background-color: rgba(250,192,109,0.5);
    margin-right: 11.5em;
    padding: 0 2.1em;
}
.search .submit-button .box{
    font-size: max(14px,1em);
}
.search .content input{
    height: 100%;
    width: 100%;
    font-size: max(14px,1em);
}
.search .content input::-webkit-input-placeholder{
    color: #000;
}

.quantity .list{
    font-size: min(4vh, 0.44rem);
}
@media (max-width: 700px){
    .quantity .list{
        font-size: 16px;
    }
}
.quantity .list li{
    margin-top: max(24px,1.36em);
}
.quantity .list .content{
    margin-right: max(100px, 2.5rem);
}

.page{
    margin-top: max(4em,7.4vh);
    color: #000;
}
.page .button{
    width: 12.5em;
    height: 3em;
    text-align: center;
    line-height: 3em;
    background-color: #fac06d;
    margin-right: 0.6rem;
    max-width: 30%;
    border-radius: 6px;
}
.page .button:last-child{
    background-color: #d98a2c;
    margin-right: 0;
}
body > .panel{
    display: none;
}
.fancybox__content{
    background-color:  transparent;
}
.panel{
    width: 100%;
    color: #b52c1a;
    max-width: 1260px;
}
.panel .bg{
    padding-top: 12.23193010325655%;
    background-size: 100% 100%;
}
.panel .top{
    background-image: url(../images/panel-top.png);
}
.panel .center{
    background-size: 100% auto;
    background-repeat: repeat-y;
    background-image: url(../images/panel-center.png);
    margin: -1px 0;
    padding: 0 18%;
}
.panel .bottom{
    background-image: url(../images/panel-bottom.png);
}
.panel .level{
    margin-bottom: 40px;
}
.panel .level li{
    width: 3.1em;
    margin: 0 0.5em;
    background-image: url(../images/level.png);
}
.panel .tip{
    text-align:  center;
    margin-bottom:  40px;
    font-size: 1.8em;
    font-weight:  bold;
}
.panel .dear{
    font-size: 1.2em;
    margin-bottom: 1em;
}
.panel .name{
    font-weight: bold;
    font-size: 150%;
}
.panel p{
    font-size:  1.1em;
    text-indent: 2.2em;
}
.panel .date{
    font-size:  1.1em;
    text-align:  right;
    margin-top: max(20px,0.5rem);
}
.main.mingdan{
    height: 100%;
    padding-top: max(50px,0.75rem);
    padding-bottom:  max(50px,0.85rem);
}
.main.mingdan .container{
    height: 100%;
    overflow-y:  auto;
    overflow-x: hidden;
}
.main.mingdan .container::-webkit-scrollbar{
    background-color: rgba(0,0,0,0.1);
    border-radius: 4px;
}
.main.mingdan .container::-webkit-scrollbar-thumb{
    background-color: rgba(0,0,0,0.5);
    border-radius: 4px;
}
.main.mingdan .page{
    margin-top: 1.2rem;
}
.main.mingdan .people{
    font-size: max(16px,0.36rem);
    margin: 0 -6px;
}
.main.mingdan .people div{
    padding: 0 6px;
    width: 4em;
    text-align: center;
    margin-top: 0.75em;
}
.main.mingdan .title{
    margin-bottom: max(40px,0.7rem);
}
.main.mingdan .quantity{
    margin: 0 auto max(30px,1rem);
    padding: 0;
}
.main.mingdan .quantity .list li{
    margin-top: 0;
}
.fancybox__content>.carousel__button.is-close{
    right: 50%;
    top: 100%;
    margin: -30px -30px 0 0;
    border-radius:  100%;
    width: 60px;
    height:  60px;
    color: #000;
    background-color: #fac06d;
    filter: drop-shadow(3px 3px 0 #aa7120);
    outline:  0 none;
    font-size:  20px;
}
@media (max-width: 1200px){
    .fancybox__content>.carousel__button.is-close{
        margin-top: -24px;
        width: 48px;
        height: 48px;
        font-size:  16px;
    }
}
.fancybox__content{
    padding:  0;
}
@media (max-width:  768px){
    .panel .level {
        margin-bottom: 20px;
    }
    .panel .center{
        padding: 0 15%;
        font-size:  14px;
    }
    .fancybox__content>.carousel__button.is-close{
        margin-top: -10px;
        width: 40px;
        height: 40px;
        font-size:  14px;
    }
}