@charset "utf-8";

/****************************************************************************************************************************************
레이어 팝업 공통
*****************************************************************************************************************************************/
#layerPopup {display: none; position: fixed; left: 0; right:0; top: 0; bottom:0; z-index: 1040; width: 100%; height: 100%; z-index: 1000;}
.layer-bg {position:relative; padding:30px 0; width:100%; height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; background:rgba(0,0,0,0.5); overflow-y: auto;}
.layer-wrap {position: relative;}
.layer-close {position: absolute; top: 15px; right: 15px; z-index: 9; transition: 0.3s; width: 35px; height: 35px; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.layer-close > i {font-size:22px; font-weight: bold; color:#616161;}
.layer-con {position: relative;}

.popup-wrap {background: #000; border: 1px solid #394558; border-radius: 10px; box-shadow: inset 0 0 30px rgba(0, 0, 0, .333), 0 0 30px #000, 0 0 60px rgba(0, 0, 0, .5);}
.popup-wrap > h3 {position:relative; margin:0 auto; padding: 20px 15px; width: 100%; display: flex; justify-content: flex-start; align-items: center; font-size: 20px; font-weight: 600; color:#fff; background: #1b222c; border-radius:  10px 10px 0 0;}
.popup-wrap > h3 > span {margin-left:3px; font-size: 20px; font-weight: 600; color: #16bbf7;}

@media (hover: hover) and (pointer: fine) {
    .layer-close:hover > i {color:#e33a3c;} 
}

/****************************************************************************************************************************************
로그인 팝업
*****************************************************************************************************************************************/
.login-wrap {position: relative; margin:0 auto; padding:0; width: 100%;}

.intro-logo {margin:0 auto; padding:30px 0 10px 0; width: 100%; text-align: center;}
.intro-logo > img {width: 120px;}

ul.login-box {position: relative; margin:0; padding:20px 20px; width: 500px;}
ul.login-box > li {position: relative; margin-bottom: 10px; width: 100%; text-align: center;}
ul.login-box > li > input {margin:0; padding:15px 20px; width: 100%; text-align: left; color: #e0ebff; background:#1c1f22; box-shadow: inset 0 0 30px rgba(0, 0, 0, .333), 0 0 1px hsla(0, 0%, 81%, .5), 0 0 3px rgba(10, 40, 61, .333); }
ul.login-box > li > input::placeholder {color: #e0ebff;}
ul.login-box > li > input:focus {outline: none;}
ul.login-box > li > button {margin:0; padding:10px 20px; width: 100%; text-align: center; font-size: 15px; font-weight: 500; color:#000; background: #16bbf7; border: none;}
ul.login-box > li > button.intro-join {color:#000; background: #16bbf7;}

@media (hover: hover) and (pointer: fine) {
    ul.login-box > li > button:hover {color:#fff;} 
}

/****************************************************************************************************************************************
회원가입 팝업
*****************************************************************************************************************************************/
.join-wrap {position: relative; margin:0; padding:20px 20px; width: 500px; display: flex; flex-direction: column;}

.join-scroll {position: relative; margin:0; padding:0; width:100%; height: 480px; overflow: scroll; overflow-x: hidden;}
ul.join-list {position: relative; margin:0; padding:0; width: 100%;}
ul.join-list > li {position: relative; margin:10px 0; padding:0; width: 100%;}
ul.join-list > li > input {padding:12px 10px; width: 100%; font-size: 14px; color:#fff; background: rgba(82, 82, 82, 0.3);  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3), 0 0 1px rgba(207, 207, 207, 0.5), 0 0 3px rgba(10, 40, 61, 0.3);}
ul.join-list > li > input::placeholder {color: #fff;}
ul.join-list > li > input:focus {outline: none;}
ul.join-list > li.check-list {display: flex; justify-content: space-between; align-items: center;}
ul.join-list > li > strong {
    width: 25%;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 5px;
}
ul.join-list > li > .input-2 {width: 100%;}
ul.join-list > li > .btn-check {padding:12px 10px; width: 20%; text-align: center; color:#000; background: #16bbf7;}
ul.join-list > li > select {padding:10px 10px; width: 100%; font-size: 14px; color:#fff; background: rgba(82, 82, 82, 0.3);  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.3), 0 0 1px rgba(207, 207, 207, 0.5), 0 0 3px rgba(10, 40, 61, 0.3);}
ul.join-list > li > select:invalid {color:#fff;}
ul.join-list > li > select:focus {outline: none;}
ul.join-list > li > select option {background:#1f0f2f;}

.join-btns {position: relative; margin:0; padding:0 20px 20px 20px; width:100%;}
.join-btns > button {width: 100%; line-height: 45px; font-size:18px; font-weight: 600; color:#000; background: #16bbf7; cursor: pointer;}

@media (hover: hover) and (pointer: fine) {
    ul.join-list > li > .btn-check:hover,
    .join-btns > button:hover {color: #fff;}
}


/****************************************************************************************************************************************
카지노 룰 팝업
*****************************************************************************************************************************************/
.casino-rule {width: 930px; max-height: calc(100vh - 300px); overflow: hidden;}
ul.rule-tab {position:relative; margin:0 auto; padding:0; width:100%; display: flex; background: #1b222c;}
ul.rule-tab > li {position:relative; margin:0 auto; padding:10px 10px; width: calc(100% / 4); text-align: center; font-size: 12px; color:#fff; border: 2px solid #212c3b; cursor: pointer;}
ul.rule-tab > li.active {border: 2px solid #16bbf7;} 

.rule-scroll {position: relative; margin:0 auto 20px auto; padding:0; width: 100%; height: calc(490px - 20px); border-radius: 0 0 10px 10px; overflow-y: scroll;}
.rule-con {display: none; position: relative; margin:0 auto; padding:20px 20px; width: 100%;}
.rule-con.active {display: block;}
#rule-slot {background:url('../Img/casino/casino_rule_01.png') top center no-repeat; background-size: cover;}
#rule-roulette {background:url('../Img/casino/casino_rule_02.png') top center no-repeat; background-size: cover;}
#rule-blackjack {background:url('../Img/casino/casino_rule_03.png') top center no-repeat; background-size: cover;}
#rule-baccarat {background:url('../Img/casino/casino_rule_04.png') top center no-repeat; background-size: cover;}

.rule-tit {margin:0 auto; padding:10px 0; text-align: left; font-size:16px; font-weight: 600; color: #f4d29a;}
.rule-tit > span {margin-left:10px; font-size:14px; font-weight: 600;}
.rule-sub {margin:0 auto; padding:10px 20px; text-align: left; font-size:14px; font-weight: 600; color: #fff;}
.ruleTxt {margin:0 auto; padding:10px 20px; text-align: left; font-size: 15px; color:#fff;}

ul.decimal-list {position: relative; margin:0 0 30px 0; padding:0 0 0 50px; width: 100%;}
ul.decimal-list > li {display: list-item; list-style-type: decimal; margin:0; padding:5px 5px; font-size: 15px; color:#fff;}

ul.alpha-list {position: relative; margin:0 0 30px 0; padding:0 0 0 50px; width: 100%;}
ul.alpha-list > li {display: list-item; list-style-type: upper-alpha; margin:0; padding:5px 5px; font-size: 15px; color:#fff;}

@media (hover: hover) and (pointer: fine) {
    ul.rule-tab > li:hover {border: 2px solid #16bbf7;} 
}


/****************************************************************************************************************************************
카지노 입출금 레이어팝업
*****************************************************************************************************************************************/
.casino-money {width: 930px; overflow: hidden;}
.casinoMoney-wrap {position: relative; margin:0 auto; padding:0; width: 100%; display: flex; background: #1b222c; border-top: 1px solid #474747;}
.casinoMoney-left {width: 40%;} 
.casinoMoney-right {width: 60%; border-left: 1px solid #474747;} 

/****************************************************************************************************************************************
미디어쿼리문
*****************************************************************************************************************************************/
@media (max-width: 800px) {
    /* 레이어팝업  */
    .layer-bg {padding:0 10px; background: #0b0e18;}
    .layer-wrap {margin:0 auto; padding:0px; width: 100%;}
    .layer-close {position:fixed; top:15px; right:15px;}

    /* 레이어팝업  로그인 */
    .login-wrap {flex-direction: column; justify-content: center; width: 100%; min-height: calc(100dvh - 40px - 60px); border: 1px solid #394558; border-radius: 0; box-shadow: none;}
    ul.login-box {order: 2; padding:20px 30px; width: 100%;}

    .login-info {order: 1; padding:20px 0; width: 100%;}
    .login-logo {position: absolute; top:unset;}
    .login-tit {position: absolute; bottom: 0;}
    .login-gif {position: relative; top:0; left: unset; width: 110%;}


    /* 레이어팝업 회원가입  */
    .join-wrap {padding:0; width: 100%; min-height: calc(100dvh - 40px - 60px);}
    .join-scroll {padding: 0 15px; height: auto; overflow: hidden;}

    ul.join-list > li > input,
    ul.join-list > li > select {background: linear-gradient(-135deg, hsla(0, 0%, 100%, .133), hsla(0, 0%, 100%, .067));}
    ul.join-list > li > .input-2 {width: 73%;}
    ul.join-list > li > .btn-check {width: 25%;}
    .join-btns {padding:0 15px 20px 15px}
    .join-btns > button {color: #fff; background: #16bbf7; border: 1px solid #5accf5; border-radius: 5px;}
}/* 미디어쿼리문 끝 */

@media (max-height: 600px) {
    .join-scroll {height: 350px;}
}/* 미디어쿼리문 끝 */