.puzzle_outbox { display:inline-block; width:100%; margin-top: 30px;}
.clearfix {display:inline-block; width:100%;}


.puzzle_game_sound span{width: unset;}
.puzzle_game_sound img{margin-top: 4px;}	

/*.start_btn_wrap{width: 100%; height: calc(100% - 140px); display: inline-block; float: left; position: absolute; top: 80px; left: 0; background-color: rgba(255,255,255,0.30);}
.start_btn{width: 200px; height: 60px; line-height: 60px; text-align: center; font-size: 23px; background-color: #9826ff; color: #fff; border-radius: 5px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); cursor: pointer; box-shadow: 0 0 15px rgb(0 0 0 / 10%);}*/
#text {width:49%; margin:auto; box-sizing:border-box; float:left; position: relative; background-size:cover; background-position: center; background-repeat: no-repeat;}
#text::before{content: ""; opacity: 0.5; position: absolute; top: 0; left: 0; bottom: 0; right: 0; background-color: #fff;}
#text div {position:relative; width:25%;   border:1px solid #ff0000; display: inline-block; margin: 0; box-sizing: border-box; float:left;}
#text>div{ border: 1px solid #ddd; box-sizing: border-box;}
#text div .dg { display:inline-block; position:absolute; width:100%;  top:0%; left:0%;}
#text div .dg canvas {margin-top:-25%;}
#text div .pin {padding-top:25%;}
#text div .numb {position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; height: 30px; width: 30px; text-align: center; font-size: 30px; font-weight: bold; color: #000; line-height: 1.0; opacity:0;}

#images {width:49%; height:25%; float: right; text-align: left; margin-left:0px;}
#images .dg {position: relative; float: left;}
#images .dg .numb {position: absolute; top:0; bottom:0; right:0; left:0; margin:auto; width:100%; height:100%; text-align:center; font-size:30px; font-weight:bold; color:#000; line-height:1.0; opacity:0;}

.dg {width:25%; height:auto; display:inline-block; box-sizing:border-box;}
.dg span {width:100% !important}
.dg canvas {width:100% !important; float: left;}

.puzzle_game_box{margin-bottom: 50px; padding-bottom: 50px; border-bottom: 1px solid #ddd;}
	.puzzle_game_user_info_wrap{width: 100%; display: inline-block; float: left; margin: 10px 0;}	
	.puzzle_game_user_name{display: inline-block; float: left; font-size: 21px; line-height: 60px; font-weight: bold;cursor: pointer;}
	.puzzle_game_user_name img{width: 60px; height: 60px; display: inline-block; border-radius: 50%; margin-right: 15px;cursor: pointer;}
	.puzzle_game_user_right{display: inline-block; float: right; line-height: 60px;}
	.puzzle_game_date{display: inline-block; float: left; font-size: 17px;}
	.puzzle_game_user_btn, .puzzle_game_btn{line-height: 60px!important; font-size: 17px; margin-left: 15px;}
	.puzzle_game_user_btn img, .puzzle_game_btn img{height: 19px!important; margin-top: 20.5px!important;}
	.puzzle_game_btn{margin-right: 0;}
.puzzle_game_user_right_inner{display: inline-block; float: left;}



@media all and ( max-width: 800px ){
	
#text {width:100%; margin:auto; box-sizing:border-box; float:left; margin-bottom: 10px;}
#images {width:100%; height:94vw; float: left; text-align: left; margin-left:0px;}

	.puzzle_game_box{margin-bottom: 30px;padding-bottom: 30px;}
	.puzzle_game_user_right_inner{float: right;}
	span.puzzle_game_start{border-right: 0;}
	.puzzle_game_user_info_wrap{margin-bottom: 20px;}
	
	.puzzle_game_user_name{display: inline-block; float: left; font-size: 19px; line-height: 40px; font-weight: bold;}
	.puzzle_game_user_name img{width: 40px; height: 40px; display: inline-block; border-radius: 50%; margin-right: 10px;}
	.puzzle_game_user_right{line-height: 20px; width: 220px;}
	
	.puzzle_game_date{display: inline-block; float: left; font-size: 15px; width: 100%; text-align: right;}
	.puzzle_game_user_btn, .puzzle_game_btn{width: unset; float: left;line-height: 20px!important; font-size: 15px; margin-left: 0;}
	.puzzle_game_user_btn{margin-right: 20px!important;}
	.puzzle_game_user_btn img, .puzzle_game_btn img{height: 17px!important; margin-top: 1.5px!important;}
}




#text div img {opacity: 0; width: 100%;}
#text div canvas {max-width: 100%; max-height: 100%; float: left;}




/*
div > .pnt:nth-child(1) .dg,
#images .dg:nth-child(1) {
    background: linear-gradient(to bottom right, orange, orange, yellow);
}
div > .pnt:nth-child(2) .dg,
#images .dg:nth-child(2) {
    background: linear-gradient(to right, red, orange);
}
div > .pnt:nth-child(3) .dg,
#images .dg:nth-child(3) {
    background: linear-gradient(red, orange);
}
div > .pnt:nth-child(4) .dg,
#images .dg:nth-child(4) {
    background: linear-gradient(to bottom right, red, red, orange);
}
div > .pnt:nth-child(5) .dg,
#images .dg:nth-child(5) {
    background:yellow;
}
div > .pnt:nth-child(6) .dg,
#images .dg:nth-child(6) {
    background: linear-gradient(orange, yellow);
}
div > .pnt:nth-child(7) .dg,
#images .dg:nth-child(7) {
    background: linear-gradient(to right, orange, yellow);
}
div > .pnt:nth-child(8) .dg,
#images .dg:nth-child(8) {
    background: linear-gradient(red, orange);
}
div > .pnt:nth-child(9) .dg,
#images .dg:nth-child(9) {
    background: linear-gradient(to right, red,orange);
}*/