body, html {
    background-color: #f5f6fa;
    height: 100%;
}

.container {
    padding-top: 11.2vw;
    overflow-x: hidden;
    box-sizing: border-box;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch; 
     
}

.footer {
    display: none;
}

.head{
    box-shadow: 0 2px 2px 0 #e5e6e9;
}

.head .bf_logo{
    display: block;
}

.head .back {
    float: left;
    display: none;
}

.tabBar a:nth-of-type(3) {
    color: #4b9dfb;
}

.tabBar a:nth-of-type(3) i {
    background: url("../image/gifts02.png") center no-repeat;
    background-size: contain;
}

.gift_content {
    padding-bottom: 13.33vw;
}

.gift_tab {
    height: 11.48vw;
    width: 100vw;
    border-bottom: 1px solid #ededed;
    box-sizing: border-box;
    padding: 0 6vw;
    background-color: #f5f6fa;
}

.gift_tab li {
    float: left;
    width: 50%;
    text-align: center;
    position: relative;
    line-height: 11.47vw;
    box-sizing: border-box;
}

.gift_tab li:nth-of-type(1) img {
    width: 8.4vw;
    height: 6vw;
    vertical-align: middle;
    margin-right: 1vw;
}

.gift_tab li:nth-of-type(2) img {
    width: 6.2vw;
    height: 6vw;
    vertical-align: middle;
    margin-right: 2.1vw;
}

.gift_tab li.on::before {
    display: block;
    width: 9.2vw;
    height: 1.2vw;
    border-radius: 1.2vw;
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -1vw;
    background-color: #4b9dfb;
    opacity: 1;
}

.gifts_item {
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
    padding: 5.2vw 4.065vw 0 4.065vw;
    margin-bottom: 2.67vw;
}

.title {
    height: 16.13vw;
}

.title img {
    display: block;
    width: 16.13vw;
    height: 16.13vw;
    float: left;
}

.title div {
    float: left;
    margin-left: 2.8vw;
}

.title div h2 {
    font-size: 4.27vw;
    font-weight: bold;
    color: #000;
    box-sizing: border-box;
    padding-top: 2.3vw;
    padding-bottom: 1.8vw;
}

.title div p {
    font-size: 3.2vw;
    color: #939397;
    width: 60vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gift_lists {
    padding-top: 2.3vw;
}

.gift_lists ul {
    padding-bottom: 1vw;
}

.gift_lists li {
    height: 15.6vw;
    position: relative;
    box-sizing: border-box;
    padding: 2.4vw 0;
}

.fold li:nth-of-type(n+2) {
    display: none;
}

.gift_lists li h3 span {
    font-weight: bold;
    font-size: 4vw;
    color: #282828;
    margin-left: 1.1vw;
}

.gift_lists li h3 img {
    width: 7.733vw;
    vertical-align: middle;
}

.gift_lists li>div {
    font-size: 3.47vw;
    color: #b6b6b6;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    width: 72vw;
    height: 5.5vw;
    text-indent: 1.7vw;
}
.gift_lists li>div span,.gift_lists li>div b,.gift_lists li>div em{
    text-align: left!important;
    background: none!important;
    font-weight: normal;
    display: inline-block;
    width: 100%;
    font-size: 3.47vw!important;
    color: #b6b6b6!important;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap!important;
}

.gift_lists li button {
    display: block;
    width: 14.67vw;
    height: 6.27vw;
    border-radius: 6.27vw;
    line-height: 6.27vw;
    font-size: 3.47vw;
    text-align: center;
    position: absolute;
    right: 0;
    top: 4.65vw;
    background-color: #fff;
    margin: 0;
    padding: 0;
    color: #4b9dfb;
    border: 1px solid #4b9dfb;
    outline: none;
}
.gift_lists li button.gray{
    color: #b6b6b6;
    border: 1px solid #b6b6b6;
}
.gift_lists li button.yellow{
    color: #fff;
    border: 1px solid #f0ae3a;
    background-color: #f0ae3a;
}
.gift_lists li button:focus {
    outline: 0;
}

.gift_toggle {
    height: 10.27vw;
    border-top: 1px solid #ededed;
}

.gift_toggle div {
    font-size: 3.47vw;
    color: #767987;
    text-align: center;
    line-height: 10.2vw;
}

.gift_toggle div span {
    color: #4b9dfb;
}

.gift_toggle div img {
    width: 2.4vw;
    height: 1.33vw;
    vertical-align: middle;
    margin-left: 2vw;
}

.gift_toggle .more {
    display: none;
}


.my_gift_content {
    background-color: #fff;
    padding-top: 1.6vw;
}

.my_gift_content li {
    width: 91.87vw;
    height: 24vw;
    margin: 0 auto;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid #ededed;
    padding: 3.6vw 0;
}

.my_gift_content li .game_logo {
    float: left;
    height: 16.13vw;
}

.my_gift_content li .game_logo img {
    width: 16.13vw;
    height: 16.13vw;
    border-radius: 3.5vw;
}

.my_gift_content li .gift_details {
    float: left;
    width: 57vw;
    box-sizing: border-box;
    padding-left: 3vw;
}

.gift_details h2 {
    font-size: 4.2vw;
    color: #000;
    padding-bottom: 1vw;
}

.gift_details p,.gift_details .gift_intro{
    font-size: 2.67vw;
    color: #b6b6b6;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 6vw;
}

.gift_details .gift_intro {
    padding-bottom: 0.5vw;
    height: 6vw;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
    line-height: 6vw;
}
.gift_details .gift_intro span,.gift_details .gift_intro b,.gift_details .gift_intro em{
    text-align: left!important;
    background: none!important;
    font-weight: normal;
    display: inline-block;
    width: 100%;
    height: 100%;
    font-size: 3.47vw!important;
    color: #b6b6b6!important;
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap!important;
}

.gift_details>p span:nth-of-type(2) {
    color: #f2af2a;
}

.my_gift_content li button {
    display: block;
    width: 14.67vw;
    height: 6.27vw;
    line-height: 6.27vw;
    border-radius: 6.27vw;
    font-size: 3.47vw;
    text-align: center;
    position: absolute;
    right: 0;
    top: 8.865vw;
    background-color: #fff;
    margin: 0;
    padding: 0;
    color: #f2af2a;
    border: 1px solid #f2af2a;
    outline: none;
}



.defined-dialog {
    display: none;
    
    color: #2e2c2d;
    font-size: 16px;
    
}


.dialog-cover {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    z-index: 200;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.dialog-content {
    position: fixed;
    top: 25%;
    left: 50%;
    margin-left: -43.865vw;
    width: 87.73vw;
    min-height: 72.4vw;
    height: auto;
    background-color: #fff;
    overflow: hidden;
    border-radius: 3vw;
    z-index: 300;
}

.close {
    position: absolute;
    width: 7.2vw;
    height: 7.2vw;
    top: 2vw;
    right: 2vw;
    text-align: center;
    box-sizing: border-box;
    padding-top: 1vw;
}
.close img{
    width: 5.07vw;
    height: 4.93vw;
}

.dialog_title {
    width: 100%;
    height: 11.33vw;
    background-color: #f1f1f1;
    text-align: center;
}
.dialog_title h2 {
    font-size: 4.8vw;
    line-height: 11.33vw;
    font-weight: bold;
    color: #000;
}

.dialog_main .top {
    height: 30.07vw;
    box-sizing: border-box;
    padding: 4vw 4vw 0 4vw;
    position: relative;
}
.dialog_main .top img {
    width: 12.93vw;
    height: 12.93vw;
    float: left;
}
.dialog_main .top div:nth-of-type(1) {
    width: 51.73vw;
    float: left;
    margin-left: 3.33vw;
}
.dialog_main .top div:nth-of-type(1) h3 {
    font-size: 3.73vw;
    color: #1f1f1f;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dialog_main .top div:nth-of-type(1) p {
    font-size: 3.2vw;
    color: #b6b6b6;
}
.dialog_main .top div:nth-of-type(1) p:nth-of-type(1) span {
    color: #f2af2a;
}
.dialog_main .top div:nth-of-type(2) {
    margin-top: 2.67vw;
    float: left;
    height: 8vw;
    width: 100%;
    position: relative;
}
.dialog_main .top div:nth-of-type(2) p {
    border-radius: 0.571vw;
    height: 100%;
    width: 75vw;
    background-color: #f4f4f4;
    font-size: 3.857vw;
    line-height: 8vw;
    text-indent: 2.857vw;
}
.dialog_main .top div:nth-of-type(2) button {
    display: block;
    position: absolute;
    min-width: 17.2vw;
    height: 7.87vw;
    background-color: #f2af2a;
    border-radius: 7.87vw;
    right: 0;
    top: 0;
    text-align: center;
    line-height: 7.87vw;
    
    font-size: 16px;
    color: #fff;
    box-sizing: border-box;
    border: none;
    outline: none;
    padding: 0;
}
.dialog_main .bottom {
    box-sizing: border-box;
    width: 100%;
    
    height: auto;
    padding-bottom: 5vw;
}
.dialog_main .bottom>span {
    display: block;
    width: 100%;
    height: 1.1428vw;
    background-color: #f1f1f1;
    margin-bottom: 0.428vw;
}
.dialog_main .bottom h3 {
    box-sizing: border-box;
    padding: 0 4vw;
    font-size: 4.27vw;
    height: 11.2vw;
    line-height: 11.2vw;
    position: relative;
}
.dialog_main .bottom h3 span {
    position: relative;
    z-index: 10;
}
.dialog_main .bottom h3::before {
    position: absolute;
    content: '';
    display: block;
    height: 1.47vw;
    width: 13.6vw;
    border-radius: 1.47vw;
    left: 4.4vw;
    bottom: 3.2vw;
    background-color: #7cd2ff;
}
.dialog_main .bottom>p,.dialog_main .bottom .gift_intro {
    box-sizing: border-box;
    padding: 0 4.285vw;
    font-size: 3.47vw;
    color: #8a8888;
}
.dialog_main .bottom .gift_intro{
    position: relative;
}
.dialog_main .bottom .gift_intro i{
    display: block;
    height: 5.33vw;
    position: absolute;
    left: 4.285vw;
    top: 0;
    font-style: normal;
}
.dialog_main .bottom .gift_intro>div{
    display: block;
    text-indent: 18.571vw;
    width: 100%;
    height: auto;
    min-height: 6vw;
}
.dialog_main .bottom .gift_intro>div span{
    background: none!important;
    color: #8a8888!important;
    font-size: 3.47vw!important;
}
.dialog_main .top1{
    height: 21.438vw;
}
.dialog_main .top1 button{
    display: block;
    position: absolute;
    
    width: 19vw;
    height: 7.87vw;
    background-color: #fff;
    border-radius: 7.87vw;
    right: 4vw;
    top: 6.784vw;
    text-align: center;
    line-height: 7.5vw;
    
    font-size: 16px;
    color: #7bd243;
    border: 1px solid #7bd243;
    outline: none;
    padding: 0;
}
.dialog_main .bottom1{
    padding-bottom: 6vw;
}

.defined-dialog3 .dialog-content{
    min-height: 67vw!important;
}
.defined-dialog .dialog_title1{
    color: #000;
    font-size: 6.4vw;
    text-align: center;
    height: 20.665vw;
    line-height: 20.665vw;
    box-sizing: border-box;
    padding-left: 7.5vw;
}
.defined-dialog .dialog_title1 i{
    display: block;
    position: absolute;
    left: 22.5vw;
    top: 5.3vw;
    width: 9.732vw;
    height: 9.732vw;
    border-radius: 50%;
    background: url("../image/success_icon.png") center no-repeat,#67d191;
    background-size: 7.464vw 5.2vw;
}
.dialog_main1 div:nth-of-type(1){
    width: 75.73vw;
    height: 11.73vw;
    margin: 0 auto 3.714vw auto;
    border-radius: 11.73vw;
    background-color: #f4f4f6;
    text-align: center;
    line-height: 11.73vw;
    font-size:4vw;
    color: #8a8888;
    overflow: hidden;
}
.dialog_main1 div:nth-of-type(2){
    text-align: center;
    font-size: 3.73vw;
    color: #8a8888;
    margin: 0 auto 8.5vw auto;
}
.dialog_main1 div:nth-of-type(2) span:nth-of-type(2){
    color: #d84a42;
}
.dialog_main1 button{
    outline: none;
    border: none;
    display: block;
    width: 75.73vw;
    height: 11.73vw;
    border-radius: 11.73vw;
    background-color: #f2af2a;
    text-align: center;
    line-height: 11.73vw;
    font-size: 4.8vw;
    color: #fff;
    margin: 0 auto 7.73vw auto;
}
.dialog_main .gift_price{
    height: 12vw;
    line-height: 10vw;
    box-sizing: border-box;
    padding: 1vw 0;
    font-size: 15px;
    background-color: #f1f1f1;
}
.dialog_main .gift_price p{
    width: 100%;
    height: 100%;
    background-color: #fff;
    box-sizing: border-box;
    padding-left: 4.285vw;
}
.dialog_main .gift_price i{
    font-style: normal;
}
.dialog_main .gift_price span{
    font-size: 20px;
    color: #e16921;
}
.dialog_main .buy_gift{
    height: 18.27vw;
    text-align: center;
    box-sizing: border-box;
    padding-top: 3.33vw;
}
.dialog_main .buy_gift button{
    display: inline-block;
    width: 78.8vw;
    height: 11.47vw;
    border-radius: 11.47vw;
    text-align: center;
    line-height: 11.47vw;
    border: none;
    outline: none;
    background-color: #f0ae3a;
    font-size: 4.8vw;
    color: #fff;
}
.defined-dialog4 .dialog-content{
    top: 15%;
}
.dialog-content .buy_about{
    line-height: 6.5vw;
    box-sizing: border-box;
    width: 100%;
    font-size: 3.73vw;
    padding-left: 10vw;
    margin-bottom: 2vw;
    color: #333;
    overflow: hidden;
}
.dialog-content .buy_about i{
    font-style: normal;
    color: #8d8d8d;
}
.defined-dialog5 .dialog-content{
    top: 15%;
}
.defined-dialog5 .dialog_main1>div:nth-of-type(2){
    margin-bottom: 3.5vw;
}

.no_gift{
    display: none;
    text-align: center;
    font-size: 4vw;
    color: #c3c3c3;
    padding-top: 25vw;
}
.no_gift img{
    width: 36vw;
}