.game_pan{width: 100%;}
.player li{border-bottom: 1px solid #2a2a2a;display: flex;}
.player .s{padding: 10px 11px;background: #4D72F9;width:40%;float: left;}
.player .s span{color: #FFF;font-family: Noto Sans KR;font-size: 24px;font-style: normal;font-weight: 700;line-height: normal;}
.player .s input.s1{padding:0px 10px;border: none;border-radius: 100px;background: #10167B;width: 158px;height: 33px;flex-shrink: 0;color: #FFF;text-align: right;font-family: Noto Sans KR;font-size: 17px;font-style: normal;font-weight: 400;float: right;line-height: normal;margin-top: 3px;}
.player .e{padding: 10px;float: left;width:60%;height: 56px;background: #1A1A1A;color: #FFF;font-family: Noto Sans KR;font-size: 15px;font-style: normal;font-weight: 400;line-height: normal;}
.batting_pan ul.chip li.active,.batting_pan ul.chip li.active > div {
    opacity: 0.4 !important;
}
.player .s_{background: #F22029;}
.player .s.s_ input.s1{background: #630509;}

.player .s__{background: #12B141;}
.player .s.s__ input.s1{background: #024114;}

.player .s___{background: #9952E0;}
.player .s.s___ input.s1{background: #441277;}

.batting_pan{text-align: center;margin: auto;padding:20px 0px;padding-bottom: 0px;}
.batting_pan ul{margin: auto;text-align: center;display: inline-block;}
.batting_pan li{width:158px;float:left;cursor:pointer;}	
.batting_pan li h2{display:block;color: #FFF;text-align: center;font-family: Noto Sans KR;font-size: 34px;font-style: normal;font-weight: 700;line-height: normal;letter-spacing: -1.7px;padding-top:8px;padding-bottom:21px;}
.batting_pan li span{display:block;color: #FFF;text-align: center;font-family: Noto Sans KR;font-size: 24px;font-style: normal;font-weight: 700;line-height: normal;padding-bottom:25px;}

.batting_pan li .l{background: #9952E0;border-radius: 10px;box-shadow: 0px -6px 0px 0px rgba(0, 0, 0, 0.30) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.20) inset;}
.batting_pan li .l_{border-radius: 10px;background: #4D72F9;box-shadow: 0px -6px 0px 0px rgba(0, 0, 0, 0.30) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.20) inset;	}
.batting_pan li .l__{border-radius: 10px;background: #12B141;box-shadow: 0px -6px 0px 0px rgba(0, 0, 0, 0.30) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.20) inset;}
.batting_pan li .l___{border-radius: 10px;background: #F22029;box-shadow: 0px -6px 0px 0px rgba(0, 0, 0, 0.30) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.20) inset;}
.batting_pan li .l____{border-radius: 10px;background: #9952E0;box-shadow: 0px -6px 0px 0px rgba(0, 0, 0, 0.30) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.20) inset;}

@media (max-width: 500px) {
    .coin_box img {
        max-width: 40px !important;
    }
    .ipt span {
        margin-left: 5px !important;
        margin-top: 2px !important;
    }
}


/** user game **/
.user_pan{display: flex;padding: 15px;border:1px solid #2a2a2a;}
.user_pan .point_pan{width:80%;float:left;}
.user_pan .btn_pan {width:20%;float:left;}
.btn_pan{padding:0px 10px}
.btn_pan.open button{
    background: linear-gradient(180deg, #DB2B32 0%, #852125 100%) !important;
}
.btn_pan button{border: none;    width: 100%;
    height: 70px;border-radius: 10px;background: #9e9e9e;box-shadow: 0px -6px 0px 0px rgba(0, 0, 0, 0.30) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.20) inset;color: #FFF;text-align: center;font-family: Noto Sans KR;font-size: 22px;font-style: normal;font-weight: 700;line-height: normal;}

.ipt_box{display: flex;}
.ipt{width: 33.3333333333333333333%;float: left;padding-right: 10px;}
.ipt span{position: absolute;z-index: 1000;color: #000;font-family: Noto Sans KR;font-size: 15px;font-style: normal;font-weight: 400;line-height: normal;margin-left: 14px;margin-top: 17px;}
.ipt input{width:100%;height: 56px;flex-shrink: 0;background: #F6F6F6;border: none;text-align: right;padding-right:12px;color: #F22029;text-align: right;font-family: Noto Sans KR;font-size: 22px;font-style: normal;font-weight: 500;line-height: normal;}
.ipt.pt2 input{color: #267DFF;text-align: right;font-family: Noto Sans KR;font-size: 22px;font-style: normal;font-weight: 500;line-height: normal;}

.point_box{margin-top:10px;display:flex;}
.point_btn{width: 16.66666666666667%;padding-right: 10px;}
.point_btn input{cursor:pointer;border:none;width:100%;height: 56px;border-radius: 5px;background: linear-gradient(180deg, #4D758C 0%, #38455F 100%);box-shadow: 0px -2px 1px 0px rgba(86, 86, 86, 0.25) inset;color: #FFF;text-align: center;font-family: Noto Sans KR;font-size: 15px;font-style: normal;font-weight: 500;line-height: normal;}

.etc_box{margin-top:10px;display:flex;border:}
.point_btn.mok input{border-radius: 5px;background: linear-gradient(180deg, #D12A31 0%, #8F2327 100%);box-shadow: 0px -2px 1px 0px rgba(86, 86, 86, 0.25) inset;}
.point_btn.init input{border-radius: 5px;background: linear-gradient(180deg, #20A6EA 0%, #095383 100%);box-shadow: 0px -2px 1px 0px rgba(86, 86, 86, 0.25) inset;}

.ipt.pt3 input{color: #000;text-align: right;font-family: Noto Sans KR;font-size: 22px;font-style: normal;font-weight: 500;line-height: normal}
.ipt:last-child{
	padding-right:0px;
}
.opt_dzt{
	border-top: 1px solid #3f3e3e;
	padding:20px 10px;
}
.batting_pan ul button{
	border:none;
}

.batting_pan ul button img{
	background:#1A1A1A;
}
.batting_pan ul li{height:187px;}
.bp1{
	background-image: url("/img/ppair_btn.png");
	background-size: contain;
    background-repeat: no-repeat;
}
.bp2{
	    margin-left: -30px;
	background-image: url("/img/player_btn.png");
	background-size: contain;
    background-repeat: no-repeat;
}
.bp3{
	    margin-left: -30px;
	background-image: url("/img/tie_btn.png");
	background-size: contain;
    background-repeat: no-repeat;
}
.bp4{
	    margin-left: -70px;
	background-image: url("/img/banker_btn.png");
	background-size: contain;
    background-repeat: no-repeat;
}
.bp5{
	    margin-left: 5px;
	background-image: url("/img/bpair_btn.png");
	background-size: contain;
    background-repeat: no-repeat;
}
.coin_pan{margin: auto;text-align: center;padding-bottom:40px}
.coin_box{    display: inline-block;
    margin: auto;
    text-align: center;
}
.coin_box li{float:left;margin-right:10px;cursor:pointer;    padding: 5px;height: auto !important;width: auto !important;
    margin-bottom: 20px;}
.coin_box li:last-child{margin-right:0px;}
.coin_box li.active{
	border:3px solid #FFE81D;border-radius: 100%;display: inline-table;padding: 3px;
}
.player .e{padding: 10px;float: left;width:60%;height: 56px;background: #1A1A1A;color: #FFF;font-family: Noto Sans KR;font-size: 15px;font-style: normal;font-weight: 400;line-height: normal;}
	
.is_pc{display:block;}
.is_mobile{display:none;}

@media (max-width: 830px) {
  .game_pan {
    width:100%;
  }
  .player .s span {
	    color: #FFF;
	    font-family: Noto Sans KR;
	    font-size: 12px;
	    font-style: normal;
	    font-weight: 700;
	    line-height: normal;
	}
	.player .s input.s1 {
		    width: 100%;
	    height: 24px;
	    font-size: 12px;
	}
	.player .e {
	    font-size: 12px;
        height:auto !important
	}
	
	.coin_box img{
		max-width:50px;
	}
	.ipt span {
	    font-size: 12px;
	}
	.ipt input {
  
	    font-size: 12px !important;
	}
	.btn_pan button {
	    border: none;
	    width: 100%;
	    height: 55px;
	    border-radius: 10px;
	    box-shadow: 0px -6px 0px 0px rgba(0, 0, 0, 0.30) inset, 0px 1px 0px 0px rgba(255, 255, 255, 0.20) inset;
	    color: #FFF;
	    text-align: center;
	    font-family: Noto Sans KR;
	    font-size: 20px;
	    font-style: normal;
	    font-weight: 700;
	    line-height: normal;
	}
	#iframeEle{
		width:100% !important;
	}
	.main_contents_right_right{
		display:none;
	}
}


@media (max-width: 800px) {
	.is_pc{display:none;}
	.is_mobile{display:block;}
	.batting_pan li {
	    float: left;
	    cursor: pointer;
	    width: 20%;
	    padding-right: 10px;
	}
	.batting_pan li:last-child {
	}
	.batting_pan ul {
	    margin: auto;
	    text-align: center;
	    display:block;
	    margin:0px 10px;
	}
	.batting_pan li h2 {
	    font-size: 20px;
	}
	.batting_pan li span {
	    font-size: 18px;
	}
	.coin_box img {
	    max-width: 45px;
	}
	.coin_box li {
	    float:unset;
	    margin-right: 0px;
	    cursor: pointer;
	    padding: 5px;
	    display: inline-block;
	    width: 80px;
	}
	.coin_box li {
	    height: 80px;
	}
}
@media (max-width: 500px) {
    .coin_pan{
        margin:0px;
    }
    .rightside{
        padding-bottom:200px;
    }
	.is_pc{display:none;}
	.is_mobile{display:block;}
	.batting_pan li {
	    float: left;
	    cursor: pointer;
	    width: 20%;
	}
	.batting_pan li:last-child {
	}
	.batting_pan ul {
	    text-align: center;
	    display:block;
	}
	.batting_pan li h2 {
	    font-size: 20px;
	}
	.batting_pan li span {
	    font-size: 18px;
	}
	.batting_pan ul li {
	    height: auto;
	}
	.batting_pan {
	    padding: 20px 0px;
	}
	.coin_box {
	    margin-top: 30px;
	}
	.batting_pan li {
		float:unset;
	    cursor: pointer;
	    width: 20%;
	    text-align: center;
	    display: inline-block;
	}
	.coin_box li {
	    float:unset;
	    margin-right: 0px;
	    cursor: pointer;
	    display: inline-block;
	}
}
        /* x */
        .controls {
            margin-top: 4em;
            display: flex;
            gap: 1em;
        }

        .controls button {
            padding: 1.4em 2.4em;
            font-size: 1.6em;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 0.5em;
        }

        .controls button:hover {
            background-color: #45a049;
        }

        .big-button-panel {
            position: fixed;
            top: 2vw;
            left: 50%;
            transform: translateX(-50%);
            z-index: 1000;
            display: flex;
            gap: 4vw;
            justify-content: center;
            width: 90vw;
            pointer-events: auto;
        }

        .button-group {
            display: flex;
            flex-direction: column;
            gap: 1vw;
            align-items: center;
        }

        .big-button-panel button {
            font-size: 1rem;
            padding: 0.4em 0.6em;
            margin: 0.2em 0;
            border-radius: 1em;
            border: none;
            background: linear-gradient(90deg, #4e54c8, #8f94fb);
            color: #fff;
            font-weight: bold;
            box-shadow: 0 4px 16px rgba(80, 80, 120, 0.12);
            cursor: pointer;
            transition: background 0.2s, transform 0.1s;
        }

        .big-button-panel button:hover {
            background: linear-gradient(90deg, #8f94fb, #4e54c8);
            transform: scale(1.08);
        }
   
        body {
            font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
            height: 100vh;
            margin: 0;
        }

        .game-wrapper {
            display: flex;
            width: 100%;
            background-color: #624b5d;
        }

        .game-container {
            /* font-size: 10px; */
            font-size: calc(10 * 100vw /1920);
            background-image: url(/game_img/game_bg.png);
            width: 100%;
            aspect-ratio: 1920/1080;
            background-size: contain;
            background-repeat: no-repeat;
            position: relative;
            overflow: hidden;
        }

        .timer-container {
            position: absolute;
            width: 30em;
            height: 30em;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 11em;
            margin-left: 13.4em;
            left: 67.5em;
            bottom: 22.3em;
        }

        .background-image {
            position: absolute;
            width: 56.6em;
            z-index: 2;
        }

        .background-image2 {
            z-index: 0;
            position: absolute;
            width: 50.8em;
            height: 40em;
            top: 0;
        }

        .rotating-image {
            position: absolute;
            width: 40.8em;
            height: 40.8em;
            z-index: 1;
            top: -5.7em;
            left: -5.4em;
            transition: transform 1s linear;
        }

        .timer-display {
            position: absolute;
            z-index: 3;
            font-weight: bold;
            color: #ffeded;
            padding: 1em 2em;
            border-radius: 1em;
            bottom: 8.4em;
            font-size: 1em;
        }

        .timer-display p {
            font-size: 6em;
            margin: 0;
        }

        .score-board {
            border-radius: 5em 5em 0 0;
            border: 1em solid #753939;
            background-color: #8e4d4d7a;
            width: 70em;
            height: 40.3em;
            position: absolute;
            z-index: 5;
            box-sizing: border-box;
            padding: 1.6em 1.5em;
        }

        .score-board#left-score-board {
            left: 2.5em;
            bottom: -1.9em;
        }

        .score-board#right-score-board {
            right: 2.5em;
            bottom: -3.5em;
        }

        .score-board table {
            width: 100%;
            height: 100%;
            overflow: hidden;

            /* background-color: #ac5a5a; */

            border-collapse: separate;
            border-spacing: 0;
            table-layout: fixed;

        }


        .score-board table td {
            background-color: #713838;
            text-align: center;
            width: 100%;
            height: 3.4em;
            padding:0px;
        }

        .score-board table td:not(:first-child) {
            border-left: 0.2em solid #ac5a5a;
            /* 좌측에만 갭 효과 */
        }

        .score-board table tr:not(:first-child) td {
            border-top: 0.2em solid #ac5a5a;
            /* 위쪽에만 갭 효과 */
        }

        .score-board table td .circle.red {
            background-color: #ff3c3c;
        }

        .score-board table td .circle.blue {
            background-color: #928afd;
        }

        .score-board table td .circle.green {
            background-color: #37d36e;
        }

        .score-board table td .ring {
            width: 2.5em;
            height: 2.5em;
            border-radius: 50%;
            display: inline-block;
            border: 0.2em solid #ffffff;
            position: relative;
        }

        .score-board table td .ring.red {
            border-color: #ff3c3c;
        }

        .score-board table td .ring.blue {
            border-color: #928afd;
        }

        .score-board table td .ring.green {
            border-color: #37d36e;
        }

        .score-board table td .circle {
            font-size: 2.3em;
            width: 1.1em;
            height: 1.1em;
            line-height: 1em;
            border-radius: 50%;
            color: #ffffff;
            display: inline-block;
        }



        .score-board table td .ring.half {
            position: relative;
        }

        .score-board table td .ring.half .left-top-text {
            color: #ffffff;
            font-size: 1.5em;
            position: absolute;
            left: 0.15em;
            top: 0;
            line-height: 1em;
        }

        .score-board table td .ring.half .right-bottom-text {
            color: #ffffff;
            font-size: 1.5em;
            line-height: 1em;
            position: absolute;
            right: 0.15em;
            bottom: 0;
        }

        .score-board table td .ring.half::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 50%;
            width: 2.44em;
            height: 0.2em;
            background: #fff;
            transform: translate(-50%, -50%) rotate(-45deg);
            border-radius: 0.2em;
            pointer-events: none;
        }

        .score-board table td .red.ring.half::before {
            background: #ff3c3c;

        }

        .score-board table td .blue.ring.half::before {
            background: #928afd;

        }

        .score-board table td .green.green.half::before {
            background: #37d36e;

        }

        .top-data-board {
            padding: 3.5em 2.5em 0 2.5em;
            display: flex;
            justify-content: space-between;
        }

        .top-data-board .coin-image {
            border-radius: 50%;
            box-sizing: border-box;
        }

        .top-data-board .coin-image img {
            box-sizing: border-box;
            border: 1em solid #65414179;
            border-radius: 50%;
            width: 10em;
            aspect-ratio: 1/1;

        }

        .left-team,
        .right-team {
            display: flex;
            gap: 1em;
        }



        .top-data-board .round-count {
            font-size: 7.2em;
            color: #ffffff;
            font-weight: 800;
            box-sizing: border-box;
            border-radius: 0 0 0.7em 0.7em;
            border: 0.14em solid #4b3434;
            border-top: none;
            margin-top: -0.5em;
            height: 1.85em;
            line-height: 1.67em;
            text-align: center;
            background: #65414185;
        }

        .top-data-board .currency {
            background: #6541417d;
            border-radius: 0.66em;
            min-width: 6.66em;
            font-size: 6em;
            color: #ffffff;
            text-align: center;
            height: 1.33em;
            place-self: center;
            font-weight: 600;
        }


        div.triple-card-wrapper {
            position: absolute;

            border-radius: 4.5em;
            border: 0.5em solid #9b332b;
            width: 84.5em;
            height: 37.3em;
            z-index: 5;
            align-content: center;
        }

        div#left-card-wrapper {
            top: 27.5em;
            left: 2.5em;
        }

        div#right-card-wrapper {
            top: 27.5em;
            right: 2.5em;
        }

        div.triple-card-wrapper .triple-card-box {
            display: flex;
            justify-content: center;
            gap: 2.4em;
        }

        div.triple-card-wrapper .card-img-box {
            width: 22em;
            height: 30em;
            transition: 0.3s;
            position: relative;
        }

        div.triple-card-wrapper .card-img-box.rotate {
            width: 30em;
            height: 22em;
        }

        div.triple-card-wrapper .card-img-box img {
            width: 100%;
            height: 100%;
            transition: 0.3s;
            position: absolute;
            top: 0;
            left: 0;
            backface-visibility: hidden;
            transition: transform 0.3s;
        }

        div.triple-card-wrapper .card-img-box img.front-img {
            transform: rotateY(0deg);
            z-index: 2;
        }

        div.triple-card-wrapper .card-img-box img.back-img {
            transform: rotateY(180deg);
            z-index: 1;
        }

        div.triple-card-wrapper .card-img-box.flipped .front-img {
            transform: rotateY(180deg);
        }

        div.triple-card-wrapper .card-img-box.flipped .back-img {
            transform: rotateY(360deg);
        }

        div.triple-card-wrapper .card-img-box.flipped.rotate .front-img {
            transform: rotateY(180deg);
        }

        div.triple-card-wrapper .card-img-box.flipped.rotate .back-img {
            transform: rotateY(360deg);
        }

        div.triple-card-wrapper .card-img-box.rotate {
            transform: rotateZ(90deg);
            margin-left: 4em;
            margin-right: 4em;
            width: 22em;
            height: 30em;
        }

        div.triple-card-wrapper .card-img-box.flipped.rotate {
            transform: rotateZ(90deg);

        }

        .triple-card-wrapper .card-img-box.rotate {
            margin-right: -4em;
            margin-left: 4em;
        }



        div.triple-card-wrapper .card-img-box.rotate img {
            /* transform: rotate(90deg); */
            width: 22em;
            height: 30em;
        }

        div.triple-card-wrapper .name-x {
            position: absolute;
            left: 9.9em;
            top: -0.7em;
            color: #ffffff;
            background: #b84242;
            padding: 0 0.4em;
            font-size: 3.6em;
            font-weight: 800;
        }

        .half-round {
            position: absolute;
            bottom: 0;
            left: 38em;
            border-radius: 10em 10em 0 0;
            background-color: #16181c;
            width: 17.4em;
            height: 8.5em;
            text-align: center;
            z-index: 7;
        }

        .half-round p {
            font-size: 6em;
            color: #ffffff;
            margin: 0;
            line-height: 1.4em;
        }


        .game-container .finish-bg {
            background-color: #00000045;
            z-index: 15;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-size: contain;
            background-repeat: no-repeat;
            background-image: url(/game_img/win-bg.png);
        }

        .game-container .finish-bg img {
            width: fit-content;
            height: fit-content;
        }

        .game-container .finish-bg img.player {
            width: 47.6em;
            height: 29.3em;
            display: none;
        }

        .game-container .finish-bg img.banker {
            width: 57.1em;
            height: 28.8em;
            display: none;
        }

        .game-container .finish-bg img.tei {
            width: 47.6em;
            height: 29.3em;
            display: none;
        }

        .game-container .finish-bg img.win {
            display: block;
        }
        body .game-wrapper{
            line-height: normal;
        }