* {
    margin: 0px;
    padding: 0px;
    list-style: none;
    box-sizing: border-box;
}

:root {
    --black: #000;
    --white: #fff;
    --input: #efeff4;
    --gray1: #111;
    --gray2: #222;
    --gray3: #333;
    --gray4: #444;
    --gray5: #555;
    --gray6: #666;
    --gray7: #777;
    --gray8: #888;
    --gray9: #999;
    --graya: #aaa;
    --grayb: #bbb;
    --grayc: #ccc;
    --grayd: #ddd;
    --graye: #eee;
    --line: #e7e7e7;
    --header: #212224;
    --footer: #191a1c;
    --copyright: #141516;
    --dwLight: #1596a6;
    --red: #f00;
    --dwLightov: #15bece;
    --mid: #151517;
    --light: #0050b9;
    --light1: #189bff;
    --lightLeft: #541612;
    --gold1: #fff34b;
    --gold2: #FD8F3A;
}

.dwLight {
    color: var(--light)!important;
}
.light {
    color: var(--light)!important;
}
.light1 {
    color: var(--light1)!important;
}
.white {
    color: var(--white);
}
.red {
    color: var(--red);
}
.gray6{
    color: var(--gray6);
}
.fw {
    font-weight: bold;
}

.f12 {
    font-size: 12px;
}

.f14 {
    font-size: 14px;
}

.f16 {
    font-size: 16px;
}

.f18 {
    font-size: 18px;
}

.f20 {
    font-size: 20px;
}

.f22 {
    font-size: 22px;
}

.f24 {
    font-size: 24px;
}

.f26 {
    font-size: 26px;
}

.f28 {
    font-size: 28px;
}

.f30 {
    font-size: 30px;
}

.f32 {
    font-size: 32px;
}

.f34 {
    font-size: 34px;
}


body {
    font-size: 14px;
    color: #2b2b2b;
    font-family: "Microsoft YaHei";
    background: #fff;
    overflow-x: hidden;
}

thead th {
    font-weight: bold;
}

.cls:before,
.cls:after {
    display: table;
    content: "";
    clear: both;
}

input[type=text],
input[type=password] {
    -webkit-appearance: none;
}

.memberPage .haveForm .el-input__inner, .memberPage .haveForm1 .el-input__inner {
    background: var(--input);
    height: 50px;
}

.filter .el-select .el-input__inner {
    background: var(--input);
}

.loginPage .el-input__inner {
    background: var(--input);
    border-color: var(--line);
    height: 50px;
}

.loginPage .el-input__inner::placeholder {
    color: var(--gray6);font-family: "Microsoft YaHei";

}

.loginPage .el-button {
    width: 100%;
    height: 50px;
}


.el-input__inner:focus {
    border-color: var(--dwLight);
}

a {
    text-decoration: none;
    color: #2b2b2b;
    cursor: pointer;
}

a:link {
    text-decoration: none;
}


table {
    border-collapse: collapse;
    border-spacing: 0;
}

[v-cloak] {
    display: none;
}


.el-button.primary{
    color: var(--white);
    font-weight: bold;
    border-color: var(--light1);
    background: var(--light1);
}
.el-button.primary:hover,.el-button.primary:focus{
    color: var(--white);
    font-weight: bold;
    filter: brightness(120%);
    border-color: var(--light1);
    background: var(--light1);
}
.el-button.success{
    color: var(--black);
    font-weight: bold;
    border-color: transparent;
    background: linear-gradient(to right,var(--gold1), var(--gold2));
}
.el-button.success:hover,.el-button.success:focus{
    background: linear-gradient(to right,var(--gold1), var(--gold2));
    filter: brightness(120%);
    color: var(--black);
    font-weight: bold;
    border-color: transparent;

}
#app {
    padding-top: 56px;
}

#app.game {
    padding-top: 0;
}

/*頭部開始*/
header {
    height: 56px;
    background: var(--header);
    width: 100%;
    top: 0;
    z-index: 100;
    position: relative;
}

#app header {
    position: fixed;
}

#app.game header {
    position: relative;
}

header .container-fluid, header .container-fluid .row {
    height: 100%;
}

header .container-fluid .row {
    margin-right: 0;
    margin-left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header .container-fluid .row .left {
    display: flex;
    align-items: center;
}
header .container-fluid .left .caidai {
    color: var(--white);
    margin-right: 5px;
    cursor: pointer;
    font-size: 12px;
}


header .container-fluid .row .left .el-button {
    margin-left: 50px;
}


header .logo {
    width: 108px;
    display: flex;
}

header .logo i {
    width: 100%;
    padding-bottom: 23.021582733813%;
    background: url("/static/img/logo_dw_1.png");
    background-size: cover;
}

header .el-button i {
    font-size: 12px;
}

header .left .el-button i {
    margin-left: 15px;
}

header .right .el-button i {
    margin-right: 5px;
}

.el-button--default {
    background: none;
    border-color: var(--gray8);
    color: var(--gray8);
}

.el-button--default:hover, .el-button--default:focus {
    background: var(--gray3);
    border-color: var(--graya);
    color: var(--graya);
}

.el-button--primary:hover, .el-button--primary:focus {
    background: var(--dwLightov)!important;
    border-color: var(--dwLightov)!important;
}


.gameWin {
    position: fixed;
    top: 56px;
    height: 0;
    background: linear-gradient(to bottom, var(--footer) 70%, transparent 200%);
    z-index: 1;
    width: 100%;
    left: 0;
    overflow: hidden;
    transition: height .3s ease-in-out;
}

.gameWin.exp {
    height: calc(100% - 56px);
}

.gameWin .icon-close {
    position: absolute;
    right: 30px;
    top: 30px;
    color: var(--white);
    cursor: pointer;
    font-size: 30px;
    z-index: 1;
}

.gameWin .row {
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.gameWin .gameList {
    width: 100%;
    padding: 40px 0;
    height: calc(100vh - 56px);
    overflow-y: auto;
    overflow-x: hidden;
}

.gameWin .gameList ul {
    width: calc(100% + 15px);
}

.gameWin .gameList li {
    padding-left: 0;
}

.gameWin .gameList li a {
    border-radius: 6px;
    display: flex;
    width: 100%;
    height: 100%;
    padding: 15px;
    transition: all .3s;
    border: solid 1px transparent;
}

.gameWin .gameList li a:hover {
    border: solid 1px var(--dwLight);
}

.gameWin .gameList li .img {
    width: 44px;
    height: 44px;
    position: relative;
}

.gameWin .gameList li .img:before {
    content: '大尾';
    position: absolute;
    left: -15px;
    top: -10px;
    font-size: 12px;
    background: rgba(255, 0, 0, 0.8);
    color: var(--white);
    border-radius: 10px;
    padding: 2px 5px;
    transform: scale(.8);
}

.gameWin .gameList li .img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: solid 2px var(--gray5);
    overflow: hidden;
    border-radius: 6px;
}

.gameWin .gameList li .text {
    color: var(--white);
    font-size: 14px;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
}

.gameWin .gameList li .text .status {
    margin-top: 3px;
}

.gameWin .gameList li .text .status.have {
    color: #fc0;
}

.gameWin .gameList li .text .status.no {
    color: var(--gray7);
}


/*頭部結束*/
/*底部開始*/
footer .logoArea {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 36px 0;
    background: var(--footer);
}

footer .logoArea .grade {
    display: flex;
    align-items: center;
}

footer .logoArea .grade .gradeIco {
    width: 45px;
    display: flex;
}

footer .logoArea .grade .gradeIco i {
    width: 100%;
    padding-bottom: 100%;
    background: url("/static/img/grade.png");
    background-size: cover;
}

footer .logoArea .grade .ms {
    padding-left: 30px;
    font-size: 12px;
    color: var(--gray7);
    text-align: center;
}

footer .logoArea .logoGame {
    display: flex;
    align-items: center;
    padding-top: 36px;
    width: 100%;
    max-width: 440px;
}

footer .logoArea .gameIco {
    width: 55%;
    max-width: 236px;
    display: flex;
    margin-right: 10%;
}

footer .logoArea .gameIco i {
    width: 100%;
    padding-bottom: 17.5%;
    background: url("/static/img/logo_games.png");
    background-size: cover;
}


footer .logoArea .logo {
    width: 37%;
    max-width: 160px;
    display: flex;
}

footer .logoArea .logo i {
    width: 100%;
    /*padding-bottom: 47.826086956522%;*/
    padding-bottom: 23.021582733813%;
    background: url("/static/img/logo_dw_1.png");
    background-size: cover;
}


footer .copyright {
    display: flex;
    justify-content: center;
    padding: 20px 0;
    line-height: 14px;
    color: var(--gray5);
    background: var(--copyright);
}


/*底部結束*/

/*indexPage*/

.indexPage {
    background: url("/static/img/banner.jpg") no-repeat center 0 var(--mid);
    background-size: 1920px auto;
    padding: 175px 0;
    min-height: 77vh;
}

.indexPage .title {
    color: var(--white);
}

.indexPage .gameList ul {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% + 40px);
}

.indexPage .gameList li {
    padding-top: 25px;
    padding-left: 0;
    padding-right: 40px;
}

.indexPage .gameList li .img {
    width: 100%;
    padding-bottom: 132.35294117647%;
    height: 0;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    background: var(--gray3);
}

.indexPage .gameList li .img .say {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    color: var(--gray5);
    padding: 0 2vw;
    text-align: center;
}

.indexPage .gameList li .img img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
}

.indexPage .gameList li .img .tips {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(40, 40, 40, .9);
    display: flex;
    align-items: center;
    justify-content: center;
    border: solid 1px var(--gray5);
    border-radius: 6px;
    transition: opacity .3s;
    opacity: 0;
}

.indexPage .gameList li:hover .img .tips {
    opacity: 1;
}

.indexPage .gameList li .text {
    padding: 15px 0 0;
    color: var(--white);
}


/*會員中心*/
.memberPage {
    min-height: calc(100vh - 259px);
    display: flex;
    position: relative;
}

.memberPage .left {
    width: 334px;
    height: 100%;
    background: linear-gradient(45deg,var(--light),var(--light1));
    flex-shrink: 0;
    position: absolute;
}

.memberPage .left .nav {
    padding-top: 30px;
}

.memberPage .left .nav li {
    display: flex;
    height: 54px;
}

.memberPage .left .nav li a {
    padding: 0 50px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    color: var(--white);
    transition: all .4s;
    border-left: solid 4px transparent;
}

.memberPage .left .nav li a i {
    font-size: 22px;
}

.memberPage .left .nav li a:hover, .memberPage .left .nav li.on a {
    background: linear-gradient(180deg,var(--gold1),var(--gold2));
    border-left: solid 4px var(--gold2);
}

.memberPage .left .nav li a:hover, .memberPage .left .nav li.on a {
    color: var(--light1);
}

.memberPage .left .nav li span {
    padding-left: 25px;
}

.memberPage .right {
    width: 100%;
    background: #efeff4;
    padding-left: 334px;
}

.kArea.index {
    display: flex;
    flex-wrap: wrap;
}

.kArea.index .kk {
    width: calc(50% - 10px);
    margin-right: 20px;
    margin-bottom: 20px;
}

.kArea.index .kk:nth-child(even) {
    margin-right: 0;
}

.kArea.index a.kk:hover {
    background: var(--grayd);
}


.kArea.index .kk .ms {
    color: var(--gray9);
    min-height: 95px!important;
    height: inherit;
    display: flex;
    align-items: center;
    width: 100%;
}
.kArea.index .kk .ms ul{
    width: 100%;
}
.kArea.index .kk .ms ul li{
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
}
.kArea.index .kk .ms ul li .ti{
    background: var(--light1);
    color: var(--white);
    font-size: 12px;
    padding: 5px;
    border-radius: 3px;
    position: relative;
}
.kArea.index .kk .ms ul li .ti:after{
    content: '';
    border-style: solid;
    border-width: 3px;
    border-color:transparent  transparent transparent var(--light1);
    position: absolute;
    right: -6px;
    top: 50%;
    margin-top: -3px;
}
.kArea.index .kk .ms ul li  .name{
    padding-left: 15px;color: var(--light1);
}

.kArea.index .kk.dlInfo {
    display: flex;
    align-items: center;
    padding: 0 40px;
    background: linear-gradient(145deg, var(--light), var(--light1));
}

.kArea.index .kk.dlInfo .img {
    max-width: 84px;
    width: 100%;
    flex-shrink: 0;
}

.kArea.index .kk.dlInfo .imgn {
    width: 100%;
    position: relative;
    padding-bottom: 100%;
    height: 0;
}

.kArea.index .kk.dlInfo .img img {
    width: 100%;
    height: 100%;
    position: absolute;
    object-fit: cover;
}

.kArea.index .kk.dlInfo .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 30px;
    color: var(--white);
}

.kArea.index .kk.dlInfo .text .dlTime {
    color: var(--white);
}


.memberPage .right .kk {
    background: var(--white);
    border-bottom: solid 1px var(--grayd);
    padding: 20px;
}

.memberPage .right .kk .title {
    border-bottom: solid 1px var(--line);
    padding-bottom: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.memberPage .right .kk .title a{
    text-decoration: underline;
}
.memberPage .right .kk .title a:after{
    content: '→';
}
.memberPage .right .kk .title i {
    font-size: 14px;
    color: var(--grayc);
}

.memberPage .right .kArea {
    max-width: 1100px;
    width: calc(100% - 40px);
    margin: 20px;
}

.memberPage .tab {
    display: flex;
    align-items: center;
    border-bottom: solid 1px var(--line);
}

.memberPage .tab li {
    display: flex;
    border-bottom: solid 2px transparent;
}

.memberPage .tab li.on {
    border-bottom: solid 2px var(--light1);
}


.memberPage .tab li a {
    padding: 15px;
    color: var(--gray9);
}

.memberPage .tab li.on a {
    color: var(--light1);
}


.el-scrollbar__wrap {
    margin-right: 0 !important;
    margin-bottom: 0 !important;
    overflow: auto;
}

.el-message-box {
    position: fixed;
    left: 50%;
    display: inherit;
    max-width: 420px;
    width: 90%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.payStyle {
    width: 100%;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.payStyle li {
    width: 160px;
    height: 50px;
    margin-bottom: 6px;
    cursor: pointer;
    color: var(--gray6);font-weight: bold;
}


.payStyle li .lin {
    width: calc(100% - 6px);
    height: 100%;
    background: var(--light1);
    border: solid 1px var(--gray4);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--white);
}

.payStyle li.on .lin {
    border-color: var(--gold2);
    background: var(--gold2);
}

.payStyle li.on i {
    position: absolute;
    right: 0;
    bottom: 0px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(../img/cur.png?v=1);
    background-size: cover;
}

.payStyle li.ht {
    width: 100%;
}

.payStyle li.ht .lin {
    background: var(--white);
}

.payStyle li.ht .lin input {
    width: 100%;
    height: 100%;
    border: none;
    background: none;
    outline: 0;
    padding: 0 15px;
}

.result {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 20px;
}

.result .tjZs {
    display: flex;
    align-items: center;
}

.result .tjZs img {
    width: 26px;
    margin-left: 0px;
}


.haveForm {
    max-width: 430px;
    width: 100%;
    padding: 15px 0;
}

.haveForm .el-select, .haveForm1 .el-select {
    width: 100%;
}

.haveForm1 {
    padding: 15px 0;
    display: flex;
    flex-wrap: wrap;
}

.haveForm1 .el-form {
    width: 50%;
    padding-right: 15px;
}

.haveForm1 .passportArea{
    width: 50%;
    border:solid 1px var(--line);
}
.haveForm1 .passportArea .passportContent{
    padding: 15px;
    display: flex;
    flex-direction: column;
}
.haveForm1 .passportArea .passportContent .bti{
    background: var(--input);
    padding: 20px;
    text-align: center;
    margin-bottom: 15px;
}
.haveForm1 .passportArea .passportContent .bcon{
    display: flex;
    flex-wrap: wrap;
}

.haveForm1 .passportArea .passportContent .img{
    width: 200px;
}
.haveForm1 .passportArea .passportContent .ms{
    width: calc(100% - 200px);
    padding-left: 15px;
}
.haveForm1 .passportArea .passportContent .img img{
    width: 100%;
}

.haveForm1 .passportArea .passportContent .tit{
    padding: 15px 0;
}


.wxts {
    color: var(--gray8);
    padding: 15px 0;
    display: flex;
    line-height: 22px;
}


.filter {
    border-bottom: solid 1px var(--line);
    padding-top: 22px;
}

.el-date-editor .el-range-separator {
    width: 10%;
}

.storeList {
    padding-top: 15px;
}

.storeList table {
    width: 100%;
    border: solid 1px var(--grayd)
}

.storeList table thead {
    background: var(--input);
    height: 50px;
}

.storeList table thead th {
    text-align: left;
}

.storeList table thead th:first-child, .storeList table tbody td:first-child {
    padding-left: 10px;
}

.storeList table tbody {
    font-size: 12px;
}

.storeList table tbody tr {
    border-top: solid 1px var(--grayd);
}

.storeList table tbody td {
    padding: 12px 0;
    color: var(--gray8);
}

.mypager {
    display: flex;
    justify-content: center;
    padding-top: 15px;
    padding-bottom: 15px;
}

.el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: var(--light);
}

.no {
    color: var(--red);
}

.yes {
    color: var(--dwLight);
}
.tui {
    color: var(--light1);
}
.cancel {
    color: var(--grayb);
    text-decoration: line-through;
}


.passportStyle {
    width: calc(100% + 10px);
    display: flex;
    line-height: normal;
}

.passportStyle li {
    width: 100%;
    cursor: pointer;
    color: var(--gray6);
}


.passportStyle li .lin {
    width: calc(100% - 10px);
    background: var(--input);
    border: solid 1px var(--line);
    display: flex;
    flex-direction: column;
    position: relative;
    padding: 10px;
}

.passportStyle li .lin img {
    width: 100%;
}

.passportStyle li.on .lin {
    border-color: var(--dwLight);
}

.passportStyle li.on i {
    position: absolute;
    color: var(--dwLight);
    right: 0;
    bottom: -1px;
    width: 25px;
    height: 25px;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*loginPage*/

.loginPage {
    min-height: calc(100vh - 259px);
    background: var(--white);
    display: flex;
    justify-content: center;
}
.regAd{
    max-width: 800px;
    display: flex;
    width: 90%;
}
.regAd img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.loginPage .myform {
    max-width: 400px;
    width: 100%;
    padding-top: 110px;
}

.loginPage .myform .tab {
    display: flex;
    align-items: center;
    border-bottom: solid 1px var(--gray3);
}

.loginPage .myform .tab li {
    display: flex;
    border-bottom: solid 2px transparent;
}

.loginPage .myform .tab li.on {
    border-bottom: solid 4px var(--dwLight);
}


.loginPage .myform .tab li a {
    padding: 15px;
    color: var(--gray6);
}

.loginPage .myform .tab li.on a {
    color: var(--dwLight);
}

.loginPage .myform .mobile .el-form-item__content {
    display: flex;
    align-items: center;
}

.loginPage .myform .mobile .el-form-item__content .whichArea {
    background: var(--white);
    border: solid 1px var(--line);
    border-right: none;
    height: 50px;
    padding: 0 15px;
    color: var(--gray8);
    line-height: 50px;
    display: none;
}

.loginPage .mobile .el-button {
    width: 130px;
    flex-shrink: 0;
}

.myDialog .el-dialog{
    width: 90%;
    max-width: 800px;
}

.el-select-dropdown__item.selected{
    color: var(--light1);
}
.el-range-editor.is-active, .el-range-editor.is-active:hover, .el-select .el-input.is-focus .el-input__inner,.el-input__inner:focus {
    border-color: var(--light);;
}

.el-dialog{
    width: 90%;
    max-width: 612px;
    margin-top: 0!important;
    top: 50%;
    transform: translateY(-50%);
}
.el-dialog__header{
    background: #EEEEEE;    padding: 20px;
}
.detailsOrder{
    font-size: 16px;
}
.detailsOrder ul li{
    display: flex;
    align-items: center;
    padding: 5px 0;
}
.detailsOrder ul li .ti{
    flex-shrink: 0;
    width: fit-content;
    color: var(--gray9);
}
.detailsOrder ul li .text{
    color: var(--gray3);
    flex-grow: 1;
}
.detailsOrder ul li .btn{
    width: fit-content;
    flex-shrink: 0;
    color: var(--gray3);
}
.detailsOrder ul li .copy{
    border:solid 1px var(--dwLight);
    color: var(--dwLight);
    border-radius: 6px;
    padding: 6px 12px;
    cursor: pointer;
    transition: all .3s;
}
.detailsOrder ul li .copy:hover{
    background: var(--dwLight);
    color: var(--white);
}
.el-checkbox__label{
    font-size: 16px;
}
.el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner {
    background-color: #67C23A;
    border-color: #67C23A;
}
.el-checkbox__input.is-checked+.el-checkbox__label{
    color:#67C23A;
}

.flashText {
    animation: color .4s infinite;
    font-weight: bold;
}
.flashText1 {
    animation: color1 .4s infinite;
    font-weight: bold;
}
@keyframes color {
    0%{
        color:var(--light1)
    }
    50%{
        color: #dd5ebd
    }
    100%{
        color:var(--light)
    }

}
@keyframes color1 {
    0%{
        color:#ff0
    }
    50%{
        color: #dd5ebd
    }
    100%{
        color:#00ccff;
    }

}
.icon-zsjs,.icon-zs,.icon-quit{
    position: relative;
    width: 22px;
    height: 22px;
    overflow: hidden;
}
.icon-zsjs:before {
    content: "";
    background: url(../img/zsjs.png);
    position: absolute;
    width: 100%;
    height: 100%
}
.memberPage .left .nav li a:hover .icon-zsjs:before, .memberPage .left .nav li.on a .icon-zsjs:before {
    filter: drop-shadow(22px 0px 0 var(--light1));
    left: -22px;
}
.icon-zs:before {
    content: "";
    background: url(../img/zsi.png);
    position: absolute;
    width: 100%;
    height: 100%
}
.memberPage .left .nav li a:hover .icon-zs:before, .memberPage .left .nav li.on a .icon-zs:before {
    filter: drop-shadow(22px 0px 0 var(--light1));
    left: -22px;
}
.icon-quit:before {
    content: "";
    background: url(../img/quit.png);
    position: absolute;
    width: 100%;
    height: 100%
}
.memberPage .left .nav li a:hover .icon-quit:before, .memberPage .left .nav li.on a .icon-quit:before {
    filter: drop-shadow(22px 0px 0 var(--light1));
    left: -22px;
}

/*20250225*/
.telegram{
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}
.telgeram_wz{
    padding: 10px;
    background: #fafafa;
    width: 100%;
}
.telegram_form{
    width: 100%;
}
.telegram_form input[type='text']{
    width: 80px;
}



/*2026-06-04*/
.memberPage .result .ip span {
        font-weight: bold;
        font-size: 22px;
        color: var(--light1);
}



.cardlist .cards {
    background: rgba(0, 0, 0, .04);
    border: solid 1px rgba(0, 0, 0, .1);
    padding-top: 16px;
    padding-bottom: 16px;
    position: relative;
    margin-bottom: 16px;
}

.cardlist .cards .gb {
    width: 16px;
    height: 16px;
    position: absolute;
    right: 4px;
    cursor: pointer;
    top: 4px;
    background: var(--light1);
    color: #fff;
    font-style: normal;
    padding: 0 2px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cardlist .cards .hts {
    display: flex;
    flex-wrap: wrap;
}

.cardlist .cards .hts .ti {
    width: 20%;
    text-align: center;
}

.cardlist .cards .hts .ip {
    width: 30%;
    text-align: center;
    padding-right: 4%;
}

.cardlist .cards .hts .ip input {
background: var(--white);
}

.memberPage .area{
border-top: solid 1px rgba(0,0,0,.1);
}

.memberPage .goBack{
    cursor: pointer;
    color: var(--light1);
    padding-bottom: 15px;
}


.memberPage .area .ht {
    display: flex;
    align-items: stretch;
    border: solid 1px rgba(0,0,0,.1);
    border-top: none;
}

.memberPage .area .ht .ti {
    width: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--graye);
    padding: 15px 0;
}

.memberPage .area .ht .ip {
    width: calc(100% - 100px);

    display: flex;
    align-items: center;
    padding-left: 15px;
}

.memberPage .area .ht.big {

}

.memberPage .area .ht.big .ip {
    font-weight: bold;
    color: var(--light1);
    font-size: 32px;
}

.memberPage  .ccon{
    padding: 15px 0 0;
}