/* Please ❤ this if you like it! */


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');

:root{
font-size: 20px;
}
.link {
color: #c4c3ca;
}
.link:hover {
color: #ffeba7;
}
.over-hide {
overflow: hidden;
}
.size-22{
font-size: 22px;
}
.section-member{
position: relative;
width: 100%;
z-index: 1;
display: block;
}
.full-height{
min-height: 100vh;
}
.popup-member [type="checkbox"]:checked,
.popup-member [type="checkbox"]:not(:checked){
position: absolute;
left: -9999px;
}
.pricing:checked + label,
.pricing:not(:checked) + label{
position: relative;
display: block;
text-align: center;
width: 260px;
height: 44px;
border-radius: 10px;
padding: 0;
margin: 0 auto;
cursor: pointer;
font-family: 'Poppins', sans-serif;
font-weight: 600;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
line-height: 44px;
padding: 0 25px;
padding-right: 27px;
overflow: hidden;
color: #fff;
text-align: left;
z-index: 99;
}
.pricing:checked + label:before,
.pricing:not(:checked) + label:before{
position: absolute;
content: '';
z-index: -2;
background-color: #232B45;
width: 100%;
height: 100%;
display: block;
top: 0;
left: 0;
}
.pricing:checked + label:after,
.pricing:not(:checked) + label:after{
position: absolute;
content: '';
z-index: -1;
background: linear-gradient(#FFD67A, #B86D00, #FFD67A);
width: 128px;
height: 40px;
display: block;
top: 2px;
left: 2px;
border-radius: 9px;
transition: left 300ms linear;
}
.pricing:checked + label:after {
left: 130px;
}
.block-diff {
display: block;
/* mix-blend-mode: difference; */
display: flex;
justify-content: space-between;
padding: 0 7px 0 18px;
}

.card-3d-wrap {
position: relative;
width: 460px;
max-width: calc(100% - 20px);
height: 660px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
perspective: 1000px;
margin-top: 50px;
}
.card-3d-wrapper {
width: 100%;
height: 100%;
position:absolute;    
top: 0;
left: 0;  
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: transform 700ms 400ms ease-out; 
}
.card-front, .card-back {
width: 100%;
height: 100%;
background-color: rgba(6, 13, 20, 0.8);
position: absolute;
left: 0;
top: 0;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
box-shadow: 0 12px 35px 0 rgba(16, 39, 112,.07);
border: 3px solid transparent;
border-radius: 20px;
overflow: hidden;
border:1px solid #E4B03F;
}
.card-front::before, .card-back::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 60%;
}
.card-front::before {
    background:url(../img/bg/bg-pop-member-2.png) no-repeat center -10px;
    background-size:cover;
    bottom: 0;
}
.card-back {
transform: rotateY(180deg);
}
.card-back::before {
    background:url(../img/bg/bg-pop-member-1.png) no-repeat center -10px;
    background-size:cover;
}
.card-back::after {
    /* content: "";
    position: absolute;
    width: 180px;
    height: 192px;
    top:20px;
    right: 60px;
    border:1px solid red;
    background:url(../img/effect/effect-1.png) no-repeat center;
    background-size:cover; */
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper {
transform: rotateY(180deg);
transition: transform 700ms 400ms ease-out; 
}
.pricing-wrap{
position: relative;
padding: 100px 20px 30px;
width: 100%;
display: block;
z-index: 1;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
}
.pricing-wrap h4{
position: relative;
width: 100%;
display: block;
text-align: center;
font-weight: 700;
letter-spacing: 3px;
font-size: 40px;
line-height: 1.7;
color: #FFF;
transform: translate3d(0, 0, 35px) perspective(100px);
z-index: 1;
background: linear-gradient(#FFE8D6, #FFFFFF);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
line-height: 1;

}
/* .pricing-wrap h4:before{ //타이틀 배경 애니메이션
position: absolute;
content: '';
z-index: -1;
background: linear-gradient(217deg, #630f9f, #fff6ca);
width: 70px;
height: 70px;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
box-shadow: 0 6px 20px 0 rgba(0, 0, 0,.3);
animation: border-transform 6s linear infinite;
}
.card-back .pricing-wrap h4:before{
    background: linear-gradient(217deg, #277eff, #c1dfa8);
} */
@keyframes border-transform{
    0%,100% { border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%; } 
14% { border-radius: 40% 60% 54% 46% / 49% 60% 40% 51%; } 
28% { border-radius: 54% 46% 38% 62% / 49% 70% 30% 51%; } 
42% { border-radius: 61% 39% 55% 45% / 61% 38% 62% 39%; } 
56% { border-radius: 61% 39% 67% 33% / 70% 50% 50% 30%; } 
70% { border-radius: 50% 50% 34% 66% / 56% 68% 32% 44%; } 
84% { border-radius: 46% 54% 50% 50% / 35% 61% 39% 65%; } 
}
.pricing-wrap h2{
position: relative;
width: 100%;
display: block;
text-align: center;
font-family: 'Poppins', sans-serif;
font-weight: 400;
letter-spacing: 1px;
font-size: 36px;
line-height: 1.1;
color: #102770;
transform: translate3d(0, 0, 30px) perspective(100px);
}
.pricing-wrap h2 sup{
font-size: 20px;
}
.pricing-wrap p{
position: relative;
width: 100%;
display: block;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.2;
letter-spacing: 1px;
color: #99A4CB;
transform: translate3d(0, 0, 30px) perspective(100px);
}
.card-back h2,
.card-back p,
.card-back h4{
}
.link {
position: relative;
padding: 10px 20px;
border-radius: 4px;
display: inline-block;
text-align: center;
color: #ffeba7;
background-color: #102770;
transition: all 200ms linear;
font-family: 'Poppins', sans-serif;
font-weight: 500;
font-size: 14px;
line-height: 1.2;
transform: translate3d(0, 0, 30px) perspective(100px);
}
.link:hover {
color: #102770;
background-color: #ffeba7;
}
.card-back .link{
background-color: #0c1c00;
}
.card-back .link:hover{
color: #0c1c00;
background-color: #ffeba7;
}
.img-wrap img{
width: 100%;
height: auto;
display: block;
}
.img-1{
position: absolute;
display: block;
left: -160px;
top: -120px;
z-index: 5;
width: calc(80% + 160px);
transform: translate3d(0, 0, 45px) perspective(100px);
opacity: 1;
pointer-events: auto;
transition: transform 400ms 1200ms ease, opacity 400ms 1200ms ease;
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper .img-1 {
opacity: 0;
transform: translate3d(-50px, 25px, 45px) perspective(100px);
pointer-events: none;
transition: transform 400ms ease, opacity 200ms 150ms ease;
}
.img-2 {
position: absolute;
display: block;
left: 0;
top: 0;
z-index: 1;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
overflow: hidden;
width: 100%;
transform: translate3d(0, 0, 15px) perspective(100px);
}
.img-3{
position: absolute;
display: block;
right: -20px;
top: -40px;
z-index: 5;
width: calc(60% + 20px);
transform: translate3d(0, 0, 55px) perspective(100px) scale(1);
opacity: 1;
pointer-events: auto;
transition: transform 300ms 1300ms ease, opacity 200ms 1300ms ease;
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper .img-3 {
opacity: 0;
transform: translate3d(-50px, 5px, 55px) perspective(100px) scale(0.4);
pointer-events: none;
transition: transform 400ms ease, opacity 200ms 150ms ease;
}
.img-6{
position: absolute;
display: block;
right: -20px;
bottom: -165px;
z-index: 5;
width: calc(20% + 30px);
transform: translate3d(0, 0, 25px) perspective(100px) scale(1);
opacity: 1;
pointer-events: auto;
transition: transform 300ms 1300ms ease, opacity 200ms 1300ms ease;
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper .img-6 {
opacity: 0;
transform: translate3d(0, 0, 25px) perspective(100px) scale(0.4);
pointer-events: none;
transition: transform 400ms ease, opacity 200ms 150ms ease;
}

.img-4{
position: absolute;
display: block;
left: -130px;
top: -100px;
z-index: 5;
width: calc(65% + 60px);
transform: translate3d(0, 0, 45px) perspective(100px) scale(0.5);
opacity: 0;
pointer-events: none;
transition: transform 400ms ease, opacity 200ms 150ms ease;
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper .img-4 {
opacity: 1;
pointer-events: auto;
transform: translate3d(0, 0, 45px) perspective(100px) scale(1);
transition: transform 400ms 1200ms ease, opacity 300ms 1200ms ease;
}
.img-5{
position: absolute;
display: block;
right: -70px;
top: -50px;
z-index: 6;
width: calc(60% + 70px);
transform: translate3d(0, 0, 35px) perspective(100px) scale(0.5) rotate(0deg);
opacity: 0;
pointer-events: none;
transition: transform 400ms 100ms ease, opacity 200ms 250ms ease;
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper .img-5 {
opacity: 1;
pointer-events: auto;
transform: translate3d(0, 0, 35px) perspective(100px) scale(1) rotate(10deg);
transition: transform 400ms 1300ms ease, opacity 300ms 1300ms ease;
}
.img-7{
position: absolute;
display: block;
right: -30px;
bottom: -65px;
z-index: 6;
width: calc(25% + 30px);
transform: translate3d(0, 0, 35px) perspective(100px) scale(0.5);
opacity: 0;
pointer-events: none;
transition: transform 400ms 100ms ease, opacity 200ms 250ms ease;
}
.pricing:checked ~ .card-3d-wrap .card-3d-wrapper .img-7 {
opacity: 1;
pointer-events: auto;
transform: translate3d(0, 0, 35px) perspective(100px) scale(1);
transition: transform 400ms 1300ms ease, opacity 300ms 1300ms ease;
}

.modal {
    background: rgba(0,0,0,0.9);
}
.modal-dialog {
	#width: calc(100% - 1rem)!important;
	height: auto;
}
.modal-content {
    background-color: rgba(0,0,0,0);
    border:0;
    border-radius: 0;
}
.btn-close-white {
    position: absolute;
    right: 15px;
    top: 12px;
    cursor: pointer;
    z-index: 9;
}
.pop-wrap {
    border:1px solid #aaa;
    text-align: left;
    padding:0;
}
.pop-content {
    
}
@media (min-width: 576px) {
    .modal-dialog {
        max-width: 100% !important;
    }
}
.logo-box {
    display: inline-block;
    margin-bottom: 10px;
    width: 50px;
}
.logo-box img {width: 100%;}
.card-back .pricing-wrap {padding-top:60px}
.form-login .form-content {
    padding:0 15px;
    margin-bottom:50px;
}
.form-st1 .form-login .form-content > li {align-items: center;}
.form-st1 .form-join .form-content {
    max-height: 460px;
    overflow: auto;
    padding:0px 5px 0;
}

@media (max-width: 420px) {
	.form-st1 .form-join .form-content {
		max-height: 460px;
		overflow: auto;
		padding:0px 0px 0;
	}

}

@media (max-width: 922px) {
	.form-st1 .form-join .form-content {
		max-height: 460px;
		overflow: auto;
		padding:30px 45px 0;
	}
}

.form-st1 .form-content > li {
    display: flex;
    justify-content: space-around;
    align-items: start;
}
.form-st1 .form-join .form-content li span {
    padding-top: 2px;
}
.form-st1 .form-join .txt-box ul {
    width: 90%;
    margin: auto;
}
.form-st1 .form-join .txt-box ul li {
    margin-bottom: 6px;
}
.form-join .txt-box ul li p {
    font-size: 12px;
    text-align: left;
    line-height: 1.4;
    padding-left:10px;
    position: relative;
}
.form-join .txt-box ul li p::before {
    content: ".";
    font-size: 20px;
    position: absolute;
    left: 0;
    top: -11px;
}
.form-join .txt-box ul li:last-child p {
    margin-bottom:0;
}
.form-st1 .form-content li span {
    color:#FFF;
}

.new {color:#FF7373;font-weight: 700;margin-right: 20px; position: relative;}
.new::before {
    content: "";
    width: 1px;
    height: 6px;
    background: #808593;
    position: absolute;
    right: -9px;
    top: 7px;
}

/*table*/
.br-m {display:none}
.select-st2.select-mobile {display:none}
.table {display: table; text-align: center; font-size: 14px;color:#FFF}
.table .in {color:orange}
.table .out {color:#9ae8ff}
.table .complet {color:#FF7575}
.table .in_price {font-size: 20px; color:#FF7373; font-weight: 700;}
.table .out_price {font-size: 20px; color:#90B2FF; font-weight: 700;}
.tb-row {display: table-row;}
.tb-row.t-head {padding-top:6px; padding-bottom:6px}
.tb-row.t-head .tb-cell {border-bottom: 1px solid rgba(255,255,255,0.3);}
.tb-row.t-body {}
.tb-cell {display: table-cell;}
.tb-row .tb-cell {border-bottom:1px solid rgba(255,255,255,0.2)}
.tb-row:last-child .tb-cell {border-bottom:0}
/*paging*/
.paging-box {margin-bottom:20px}
.paging-box ul {display: flex; justify-content: center;}
.paging-box ul li {margin-left:5px}
.paging-box ul li:first-child {margin-left: 0;}
.paging-box ul li a {display: block; width:35px;height:35px;border:1px solid rgba(255,255,255,0.1);color: #DDD; font-size: 14px;text-align: center; line-height: 35px; font-weight: 300;transition: 0;}
.paging-box ul li a:hover {border: 1px solid #9b7100; color: #ffbb00;}
.paging-box ul li a.active {border: 1px solid #9b7100; color: #ffbb00;}

.pg-start {background: url(../img/icons/icon-paging-end.svg) no-repeat center;}
.pg-prev {background: url(../img/icons/icon-paging.svg) no-repeat center;}
.pg-end {background: url(../img/icons/icon-paging-end.svg) no-repeat center;transform: rotate(180deg);transition: 0.3s}
.pg-next {background: url(../img/icons/icon-paging.svg) no-repeat center;transform: rotate(180deg);transition: 0.3s}

.paging-box ul li .pg-start:hover {background: url(../img/icons/icon-paging-end-on.svg) no-repeat center;}
.paging-box ul li .pg-end:hover {background: url(../img/icons/icon-paging-end-on.svg) no-repeat center;}
.paging-box ul li .pg-prev:hover {background: url(../img/icons/icon-paging-on.svg) no-repeat center;}
.paging-box ul li .pg-next:hover {background: url(../img/icons/icon-paging-on.svg) no-repeat center;}

/*popup style*/
.popup-app .table-content-mobile {display:none}
.popup-app .pop-wrap {background:#202020;border:1px solid #888; border-radius: 10px; }
.popup-app .pop-content {
    padding:0;
}

/*table*/
.table {padding:0 15px; border: 1px solid rgba(255,255,255,0.1); }
.tb-cell {color:#ddd}
.tb-cell a {color:#ddd;display: block;}
.tb-cell a:hover {color:#ffffff}
.tb-row.t-head .tb-cell {position: relative; }
.tb-row.t-head .tb-cell::after {
    content: "";
    width: 1px;
    height: 15px;
    position: absolute;
    right: -1px;
    top:14px;
    background: rgba(255,255,255,0.2);
}
.tb-row.t-head .tb-cell:last-child:after {
    display: none;
}

.modal .tab-box {margin-bottom:20px}
.modal .nav-tabs .nav-link {color:#FFF; border-radius: 0; text-align: center;}
.modal .nav-tabs .nav-link:hover {border-color:#171134;}
.modal .nav-tabs .nav-link.active {background:linear-gradient(to right, #ab3eff, #233871); border:0; border-radius: 10px 10px 0 0;}
.modal .tab-content {padding: 10px 10px 10px 10px;}
.modal .tab-content h2 {text-align: center;padding: 20px; background-color: #282828; border-radius: 10px 10px 0 0;}
.modal .tab-content h2 img {height: 70px;}
.modal .tab-content .tab-pane {margin-bottom: 30px;}
.modal .btn-box {text-align: center;display: flex;justify-content: center;align-items: center; padding:15px 0;}
.modal .btn-box button{width: 134px; height: 40px;font-size: 14px;}
.modal .btn-box button:first-child {margin-right:14px}
.modal .btn-box button:last-child {margin-right:0; /* width: 280px; */}

.popup-app .tab-pane .step-box {padding:20px 15px 60px}
.popup-app .tab-pane .step-box ul {display: flex;justify-content: space-between; text-align: center;}
.popup-app .tab-pane .step-box ul li {width:20%;position: relative;}
.popup-app .tab-pane .step-box ul li::before {
    content: "";
    width: 14px;
    height: 24px;
    position: absolute;
    right: -35px;
    top: 32px;
    background: url(../img/icons/icon-arrow-1.svg) no-repeat;
    background-size:contain;
}
.popup-app .tab-pane .step-box ul li:last-child::before {display: none;}
.popup-app .tab-pane .step-box ul li p {height: 90px; display: flex; align-items: center;justify-content: center;border:1px solid rgba(255,255,255,0.3);color:#ffe2be; font-size: 18px;}
.popup-app .tab-pane .step-sub-box {padding-top:13px }
.popup-app .tab-pane .step-sub-box button {font-size: 14px; width: 158px; height: 36px; padding:0}
.popup-app .tab-pane .step-sub-box .txt-box {text-align: center; font-size: 16px; color: #e72e2e;}
.popup-app .tab-pane .step-sub-box .txt-box span {font-size: 14px;}
.popup-app .tab-pane .form-box {max-width: 540px;margin: auto;}
.popup-app .tab-pane .form-box .form-content > li {display: flex;justify-content: center;align-items: center; margin-bottom:28px;}
.popup-app .tab-pane .form-box .form-content > li:last-child {margin-bottom: 0;}
.popup-app .tab-pane .form-box .form-content li .left-tit {width: 220px; margin-right: 20px; text-align: left; font-size: 16px;}
.popup-app .tab-pane form .txt-box {text-align: center; font-size: 12px;padding:16px 0 0 0; color: #0cf;}
.history-content .filter-box {display: flex; justify-content: space-between;align-items: center; margin-bottom: 13px; padding: 0 15px;}
.history-content .filter-box .btn-box {display: flex; justify-content: space-between;align-items: center; font-size: 16px;overflow:hidden; padding:0}
.history-content .filter-box .btn-box li:hover {}
.history-content .filter-box .btn-box li:hover a {color:#ffc500;}
.history-content .filter-box .btn-box li.active a {color:#ffc500;}
.history-content .filter-box .btn-box li a {display: block; padding: 0 35px; margin:8px 0 8px 0; border-right: 1px solid #AAA;color: #DDD;}
.history-content .filter-box .btn-box li:last-child a {border-right: 0}

.popup-join .tab-pane .form-box .form-content > li {align-items: start; }

.popup-app .info-content .form-box {padding-top: 40px;padding-bottom: 20px;}
.popup-app .info-content .form-box .form-content > li .left-tit {width:140px; padding:0;color: #ddd;}
.popup-app .info-content .form-content li .txt {min-width:280px; color:#FFF; font-size: 16px;}
.popup-app .info-content .txt-box {text-align: left;}
.popup-app .info-content .account-box {min-width: 280px;}
.popup-app .info-content .account-box li {margin-bottom:5px}
.popup-app .info-content .account-box li span {text-align: left !important; font-size: 16px;}
.popup-app .info-content .form-box .form-content .account-box span:first-child {width: 80px;display: inline-block;}
.popup-app .info-content form .txt-box {max-width: 502px;margin:0 auto 0;text-align: left;padding:0 34px; color: #ffdbd5;font-weight: normal;}
.popup-app .info-content form .txt-box ul li {margin-bottom: 3px; display: flex; }
.popup-app .info-content form .txt-box ul li span {margin-right: 6px;}
.popup-app .info-content .form-st1 .btn-st1 {margin:0 16px 0 0;}
.popup-app .info-content .form-st1 .btn-st1:last-child {margin:0}

.popup-withdraw .tab-pane .step-box {padding-top:0;padding-bottom: 30px;}
.popup-withdraw .tab-pane .step-box ul li {width: 30%;}
.popup-withdraw .tab-pane .step-box ul li::before {right: -22px;}
.popup-withdraw .tab-pane .step-sub-box .txt-box {text-align: left;}
.popup-withdraw .tab-pane .step-sub-box .txt-box span {font-size: 16px; color: #FFDC67;}
.popup-withdraw .tab-pane .form-box .form-content li .left-tit {color: #FFF;font-size: 18px;}
.popup-withdraw .tab-pane .form-box .form-content li:first-child {padding-top:30px;} 
.popup-withdraw .tab-pane form .txt-box {padding:16px 0 20px 0;}

.popup-deposit .tab-pane .step-sub-box {display: flex; justify-content: space-between; align-items:center;}
.popup-deposit .tab-pane .form-box .form-content li:first-child {padding-top:30px;}
.popup-deposit .tab-pane .form-box .form-content li .left-tit {color: #FFF;font-size: 18px;}
.popup-deposit .tab-pane form .txt-box {margin-bottom:40px}

.popup-basic-view .btn-box {
    padding-top:20px;
}
.view-box {
    border: 1px solid rgba(255,255,255,0.1);
}
.view-box .view-head {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 24px 20px 14px;
}
.view-box .view-head .txt-box * {font-size: 16px;}
.view-box .view-head .txt-box .new::before {
    top: 10px;
    right: -14px;
}
.view-box .view-body {
    padding: 20px 20px 30px 20px;
}
.view-box .view-body textarea {
    width: 100%;
    height: 400px;
    overflow: auto;
    background:none;
    font-size: 14px;
    border: 0;
    padding: 0;

}

.write-box .left-tit {display: inline-block; width: 76px;font-size: 16px;}
.write-box .write-head {
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding: 24px 30px 14px;
    color:#D5E2FF;
    display: flex; 
    justify-content: space-between;
}
.write-box .write-head .input-st2 {width: 100%; padding: 5px 26px;}
.write-box .write-head .input-st2::placeholder {color:#ddd; font-size: 14px;}
.write-box .write-body {
    padding: 20px 30px 50px;
    display: flex; 
    justify-content: space-between;
}
.write-box .write-body .left-tit {vertical-align: top;padding-top: 2px;}
.write-box .write-body textarea {
    width: 100%;
    height: 400px;
    overflow: auto;
    background:none;
    color: #FFF;
    font-size: 14px;
    border: 0;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 26px;
}
.write-box .write-body textarea::placeholder {color:#ddd; font-size: 14px;}

@media (min-width: 1024px) {
    .popup-app .modal-content {max-width: 960px;}
}
@media (max-width: 1024px) {
    .popup-member .btn-close-white {right: 24vw;top:6vh}
}
@media (max-width: 992px) {
    .btn-close-white {
        right: 135px;
        top:70px;
    }
    .popup-member .btn-close-white {top:7vh}
}
@media (max-width: 420px) {
    .logo-box img {width:50px;}
    .card-3d-wrap {
        margin-top: 20px;
        height: 500px;
    }
    .card-back .pricing-wrap {padding: 40px 10px 0 10px;}
    .pricing-wrap h4 {
        font-size: 32px;
    }
    .form-st1 .form-join .select-st1 {
        width: 200px;
    }
    body .form-st1 .form-content li span {
        font-size: 14px;
    }
    .form-st1 .form-join .form-content {
        padding: 10px 0;
        max-height: 320px;
    }
    .form-st1 .form-join .txt-box ul {
        width:100%;
    }
    body .form-st1 .btn-st1 {
        font-size: 14px;
    }

    .form-login .form-content {
        padding: 0;
        margin-bottom: 45px;
    }
    .popup-member .form-st1 .input-st1 {
        max-width: 190px;
    }

    .br-m {display:block}
    .btn-close-white {right:20px;top:37px;}
    .select-st2.select-mobile {display:block}
    .tb-row.t-head {display: none;}

    .modal .pop-wrap {}
    .modal .table-content {display:none; }
    .modal .table-content-mobile {display:block;max-height: 50vh;overflow: auto; margin-bottom: 15px;}
    .modal .table-content-mobile .table {background: none;padding: 0;margin: 0;}
    .modal .table-content-mobile .t-body {
        padding-top:15px;
        padding-bottom:15px;
        display: flex;
        align-items: center;
        justify-content: space-around;
        margin-bottom: 3px;
        border: 1px solid rgba(255,255,255,0.1);
    }
    .modal .table-content-mobile .tb-cell {vertical-align: middle;}
    .modal .table-content-mobile .tb-cell:nth-child(1){width: 10%;}
    .modal .table-content-mobile .tb-cell:nth-child(2){text-align: left;}
    .modal .table-content-mobile .tb-cell p {padding:0}
    .modal .table-content-mobile .tb-cell ul {padding:0}
    .modal .table-content-mobile .tb-cell:nth-child(2) ul {display: flex;justify-content: left;}
    .modal .table-content-mobile .tb-cell:nth-child(2) ul li {padding-left:14px;position: relative;}
    .modal .table-content-mobile .tb-cell:nth-child(2) ul li::before {
        content: "";
        width:3px;
        height: 3px;
        border-radius: 50%;
        background: #D5E2FF;
        position: absolute;
        right: -9px;
        top:10px;
    }
    .modal .table-content-mobile .tb-cell:nth-child(2) ul li:last-child:before {
        display: none;
    }
    .modal .table-content-mobile .tb-cell:nth-child(2) ul li:first-child {padding-left:0}
    .modal .tab-content {padding: 0 10px;}
    .modal .filter-box .select-st2 {min-width: 49%;}
    .modal .filter-box .select-st2:first-child {margin-right: 2%;}
    .modal .filter-box .select-mobile {dispaly:block}
    .modal .filter-box .btn-box {display: none;}

    .popup-app {
		#padding-top:8vh
	}
    .popup-app .modal-dialog-scrollable .modal-content {
        max-width: 96%;
        #max-height: 80vh;
    }
    .popup-app .tab-pane .step-box {padding-bottom: 20px;}
    .popup-app .tab-pane .step-box ul li::before {
        width: 10px;
        height: 14px;
        right: -19px;
        top: 23px;
    }
    .popup-app .tab-pane .step-box ul li p {font-size: 12px;height: 56px;}
    .popup-app .tab-pane .step-sub-box button {margin:0}
    .popup-app .tab-pane .step-sub-box .txt-box p {line-height: 1;font-size: 12px;}
    .popup-app .tab-pane .form-box {padding:0 25px;}
    .popup-app .tab-pane .form-box span {font-size: 12px;}
    .popup-app .tab-pane .form-box .input-box input {width: 200px;}
    .popup-app .tab-pane form .txt-box {padding:10px 0 15px 0}
    .popup-app .tab-pane .form-box .form-content li .left-tit {font-size: 12px; width: 220px;}

    .popup-app .info-content .form-content li .txt {min-width: 210px;}
    .popup-app .info-content .form-box .form-content > li .left-tit {font-size: 12px;}
    .popup-app .info-content .form-box .form-content > li .input-st2 {width: 210px;}
    .popup-app .info-content .account-box {min-width: 210px;}
    .popup-app .info-content .account-box li span {font-size: 12px;}
    .popup-app .info-content .form-box .form-content .account-box span:first-child {width: 62px;}
    .popup-app .info-content form .txt-box {padding:12px 18px; margin-bottom:20px}

    .popup-withdraw .tab-pane .step-box ul li::before {right: -14px;}
    .popup-withdraw .tab-pane .step-sub-box .txt-box span {font-size: 12px;}
    .popup-deposit .tab-pane .step-box {padding-bottom: 30px;}
    .popup-deposit .tab-pane .step-sub-box .txt-box {display: block;padding-top: 6px;}
    .popup-deposit .tab-pane .step-sub-box .txt-box * {display: flow-root;}
    .popup-deposit .tab-pane .step-sub-box .txt-box span {font-size: 10px;}

    .popup-basic .tab-box {margin-bottom:10px}
    
    .popup-basic .nt-title {width: 50%; text-align: left; padding-left:20px}
    .popup-basic .table-content-mobile {max-height: 60vh;overflow: auto;}
    .popup-basic .table li { padding:15px 20px; margin-bottom: 3px;text-align: left; border: 1px solid rgba(255,255,255,0.2);}
    .popup-basic .table li a {padding:0}
    .popup-basic .table li a span { 
        max-width: 100%; 
        max-height: 40px; 
        overflow: hidden; 
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
        display: -webkit-box;
    }
    .popup-basic .table li a em {display: inline-block; font-style: normal;margin-top: 5px;}
    .popup-member .btn-close-white {top:4vh; right: 6vw;}
    .popup-member .form-st1 .form-content > li .left-tit{
        font-size: 14px;
        padding-left: 0;
    }
    .popup-member .form-st1 .form-content > li .left-tit .br-m {display: none;}
    .popup-app .info-content .form-box {padding:20px 15px;}
    .popup-app .info-content .form-box .form-content li {margin-bottom: 10px;}
    .popup-app .info-content .form-box .form-content .account-box li {margin-bottom: 5px; height: 20px;}
    .form-st1 .form-join .form-content {}

    .view-box .view-head .title {font-size: 14px;}
    .view-box .view-head .txt-box * {font-size: 14px;}
    .view-box .view-body {padding:20px 20px 30px 20px;}
    .view-box .view-body textarea {height: 280px;padding:0}
    .view-box .view-head .txt-box .new::before {
        top: 7px;
    }

    .write-box {border:1px solid rgba(255,255,255,0.1)}
    .write-box .left-tit {display: none;}
    .write-box .write-head {padding:20px}
    .write-box .write-body {padding:20px}
    .write-box .write-body textarea {height: 280px;}
    

}

@media (max-width: 375px) {
    .card-3d-wrap {
        height: 470px;
    }
    .form-st1 .form-join .form-content {
        max-height: 268px;
    }
    .popup-member .form-st1 .form-content > li .left-tit .br-m {display: block;}
    .view-box .view-body textarea {height: 230px;}
    .write-box .write-body textarea {height: 230px;}
}



.basic-scroll a {
    color: blue;        /* 텍스트 색상 */
    text-decoration: underline; /* 밑줄 제거 */
    font-weight: bold;  /* 텍스트 굵게 */
}