#practice_B_1_2 #step_1_game .grid_bg .gray_area{
	fill: #DBDCDC;
}

#practice_B_1_2 #step_1_game #grid_size_wrap{
	width: 100%;
	float: left;
	padding-left: 200px;
	padding-right: 200px;
	box-sizing: border-box;
	height: 287px;
	margin-top: 30px;
}

#practice_B_1_2 #step_1_game #grid_size_wrap .drawing_container{
	height: 100%;
	width: 287px;
	float: left;
}

#practice_B_1_2 #step_1_game #grid_size_wrap .drawing_controller{
	height: 100%;
	width: 146px;
	float: right;
}

#practice_B_1_2 #step_1_game #grid_size_wrap .drawing_controller .line_count{
	width: 100%;
	height: 50px;
	background-color: #DBDBDD;
	float: left;
	margin-bottom: 10px;
	position: relative;
}

#practice_B_1_2 #step_1_game #grid_size_wrap .drawing_controller .line_count .img{
	display: inline-block;
	vertical-align: middle;
}

#practice_B_1_2 #step_1_game #grid_size_wrap .drawing_controller .line_count .count_box{
	font-size: 21px;
	color: #656464;
	font-weight: bold;
	text-align: center;
	width: 45px;
	height: 30px;
	margin-top: 5px;
	background-color: #fff;
	display: inline-block;
	vertical-align: middle;
}

#practice_B_1_2 #step_1_game #grid_size_wrap .drawing_controller .redo_count{
	width: 100%;
	height: 50px;
	background-color: #DBDBDD;
	float: left;
	position: relative;
	cursor: pointer;
}

#practice_B_1_2 #step_1_game #grid_size_wrap .drawing_controller .redo_count.disable{
	cursor: default;
	opacity: 0.6 !important;
}

#practice_B_1_2 #step_1_game #grid_size_wrap .drawing_controller .redo_count .img{
	display: inline-block;
	vertical-align: middle;
}

#practice_B_1_2 #step_1_game #grid_size_wrap .drawing_controller .redo_count .redo_text{
	font-size: 12px;
	color: #656464;
	font-weight: bold;
	text-align: center;
	width: 45px;
	height: 30px;
	padding-top: 5px;
	margin-top: 5px;
	box-sizing: border-box;
	background-color: #fff;
	display: inline-block;
	vertical-align: middle;
}




#practice_B_1_2 .circle_controller_style #grid_size_wrap{
	width: 100%;
	float: left;
	padding-left: 60px;
	padding-right: 60px;
	box-sizing: border-box;
	height: 414px;
	margin-top: 0px;
	position: relative;
}

#practice_B_1_2 .circle_controller_style .bg{
	opacity: 1;
}

#practice_B_1_2 .circle_controller_style .bg_color{
	opacity: 0;
}

#practice_B_1_2 .circle_controller_style #grid_size_wrap .grid_size_wrap_container{
	width: 414px;
	height: 414px;
	position: relative;
	margin: 0 auto;
}

#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_container{
	width: 100%;
	height: 414px;
	float: left;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 1;
}

#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_container .grid_bg{
	width: 300px;
	height: 300px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -150px;
	margin-top: -150px;
}

#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle{
	width: 100%;
	height: 414px;
	float: left;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 2;
	background-image: url(../../../img/practice/B_1_2/circle_controller.svg);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
}

#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle .adjust_circle{
	height: 378px;
	width: 20px;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -10px;
	margin-top: -189px;
}

#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle .adjust_circle.adjust_circle_1{
	transform: rotate(45deg);
	z-index: 4;
}
#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle .adjust_circle.adjust_circle_1 .big_circle span{
	transform: rotate(-45deg);
}
#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle .adjust_circle.adjust_circle_2{
	transform: rotate(135deg);
	z-index: 3;
}
#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle .adjust_circle.adjust_circle_2 .big_circle span{
	transform: rotate(-135deg);
}
#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle .adjust_circle.adjust_circle_3{
	transform: rotate(90deg);
	z-index: 2;
}
#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle .adjust_circle.adjust_circle_3 .big_circle span{
	transform: rotate(-90deg);
}

#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle .adjust_circle .arrow{
	width: 27px;
	height: 8px;
	position: absolute;
	background-image: url(../../../img/practice/B_1_2/circle_controller_arrow.svg);
	background-repeat: no-repeat;
	background-size: contain;
	top: -12px;
	left: -3px;
	transition: all 400ms ease;
	transform: translateY(10px);
	opacity: 0;
}

#practice_B_1_2 .circle_controller_style.moveable_controller #grid_size_wrap .drawing_circle .adjust_circle:hover .arrow,
#practice_B_1_2 .circle_controller_style.moveable_controller #grid_size_wrap .drawing_circle .adjust_circle.active .arrow{
	transform: translateY(0px);
	opacity: 1;
}

#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle .adjust_circle .big_circle{
	width: 20px;
	height: 20px;
	background-color: #C30D23;
	position: absolute;
	left: 0px;
	top: 0px;
	border-radius: 20px;
	z-index: 2;
	line-height: 0px;
}

#practice_B_1_2 .circle_controller_style.moveable_controller #grid_size_wrap .drawing_circle .adjust_circle .big_circle{
	cursor: move;
}

#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle .adjust_circle .big_circle span{
	font-size: 11px;
	text-align: center;
	color: #fff;
	line-height: 20px;
	font-weight: bold;
	pointer-events: none;
	transform: rotate(0deg);
	display: block ;
}

#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle .adjust_circle .line{
	width: 1px;
	height: 100%;
	background-color: #C30D23;
	position: absolute;
	left: 50%;
	margin-left: -1px;
	top: 0px;
	z-index: 1;
}

#practice_B_1_2 .circle_controller_style #grid_size_wrap .drawing_circle .adjust_circle .small_circle{
	width: 10px;
	height: 10px;
	background-color: #C30D23;
	position: absolute;
	left: 5px;
	bottom: 0px;
	border-radius: 10px;
	z-index: 2;
	line-height: 0px;
}

#practice_B_1_2 .circle_controller_style #reflect_btn{
	position: absolute;
	left: auto;
	right: 100px;
	bottom: 10px;
}

#practice_B_1_2 .circle_controller_style #reflect_btn .icon{
	width: 36px;
	height: 37px;
	background-image: url(../../../img/practice/B_1_2/reflect_btn.svg);
	background-repeat: no-repeat;
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -18px;
	margin-top: -18px;
}



#practice_B_1_2 #step_6_game #grid_size_wrap {
	transform-origin: left top;
	overflow: visible;
}

#practice_B_1_2 #step_6_game #grid_size_wraper{
	display: table;
	width: 100%;
	height: 360px;
	margin-top: 40px;
}

#practice_B_1_2 #step_6_game #grid_size_wrap {
	display: table-cell;
	vertical-align: middle;
	width: 100%;
	height: 100%;
	text-align: center;
	transform-origin: left top;
	background-image: url(../../../img/practice/loading.gif);
	background-position: center center;
	background-repeat: no-repeat;
	float: none;
}

#practice_B_1_2 #step_6_game #grid_size_wrap img{
	border: 1px solid #8d8d8d;
}

#practice_B_1_2 #step_6_game #grid_size_wrap .grid_container{
	border: 0px;
	overflow: visible;
}

#practice_B_1_2 #step_6_game  .additional_wrap{
	width: 75px;
	position: absolute;
	right: 50%;
	top: 50%;
	margin-right: -280px;
	margin-top: -40px;
	display: inline-block;
	opacity: 0.4;
	pointer-events: none;
	transition: 400ms all ease;
}

#practice_B_1_2 #step_6_game  .additional_wrap.active{
	opacity: 1;
	pointer-events: auto;
}

#practice_B_1_2 #step_6_game  .additional_wrap > *{
	width: 25px;
	height: 25px;
	margin-left: 5px;
	float: left;
/* 	transition: all 600ms ease; */
}

#practice_B_1_2 #step_6_game  .additional_wrap > *:hover{
/* 	transform: scale(1.1); */
	opacity: 0.9;
}

#practice_B_1_2 #step_6_game  .additional_wrap .icon{
	width: 25px;
	height: 25px;
	background-size: contain;
	background-repeat: no-repeat;
	cursor: pointer;
}

#practice_B_1_2 #step_6_game  .additional_wrap .share_btn .icon{
	background-image: url(../../../img/practice/share_icon.svg);
}

#practice_B_1_2 #step_6_game  .additional_wrap .download_btn .icon{
	background-image: url(../../../img/practice/download_icon.svg);
}













#practice_B_1_2 #share_view{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 99991;
	top: 0px;
	left: 0px;
	display: none;
}

#practice_B_1_2 #share_view .share_bg{
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.6);
}

#practice_B_1_2 #share_view .share_box{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -335px;
	margin-top: -190px;
	z-index: 2;
	width: 670px;
	height: 380px;
	background-color: #fff;
}

#practice_B_1_2 #share_view .share_box .cancel_share_view_btn{
	width: 30px;
	height: 30px;
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
	z-index: 3;
}

#practice_B_1_2 #share_view .share_box .cancel_share_view_btn .icon{
	width: 30px;
	height: 30px;
	background-size: contain;
	background-image: url(../../../img/practice/cancel_share_view_icon.svg);
}

#practice_B_1_2 #share_view .share_box h3{
	font-size: 20px;
	text-align: center;
	width: 100%;
	float: left;
}

#practice_B_1_2 #share_view .share_box hr{
	width: 100px;
	text-align: center;
}

#practice_B_1_2 #share_view .share_box .social_btns{
	width: 100%;
	margin: 0 auto;
	margin-top: 20px;
	margin-bottom: 10px;
	text-align: center;
}

#practice_B_1_2 #share_view .share_box .social_btns > *{
	display: inline-block;
	margin-left: 3px;
	margin-right: 3px;
	cursor: pointer;
	zoom: 1;
}

#practice_B_1_2 #share_view .share_box .social_btns a{
	display: block;
	float: left;
	width: 30px;
	height: 30px;
}


#practice_B_1_2 #share_view .share_box .social_btns .icon{
	width: 30px;
	height: 30px;
	float: left;
	transition: all 600ms ease;
	-webkit-backface-visibility: hidden;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	transform: rotate(0);
}

#practice_B_1_2 #share_view .share_box .social_btns .icon:hover{
	opacity: 0.7;
	
}

#practice_B_1_2 #share_view .share_box .social_btns .icon svg{
	width: 30px;
	height: 30px;
	float: left;
	-webkit-backface-visibility: hidden;
	-webkit-transform: rotate(0);
	-moz-transform: rotate(0);
	transform: rotate(0);
}

#practice_B_1_2 #share_view .share_box .social_btns .social_btn{
	transition: all 600ms ease;
}

#practice_B_1_2 #share_view .share_box .social_btns .social_btn *{
	transition: all 600ms ease;
}

#practice_B_1_2 #share_view .share_box .social_btns .social_btn.active .circle{
	fill: #4A494A;
}

#practice_B_1_2 #share_view .share_box .social_btns .social_btn.active .icon_fill{
	fill: #fff;
}


#practice_B_1_2 #share_view .share_box .ticket_wrap{
	width: 400px;
	margin: 0 auto;
	border-radius: 40px;
	overflow: hidden;
	margin-bottom: 20px;
}


#practice_B_1_2 #share_view .share_box .comment_wrap{
	width: 400px;
	margin: 0 auto;
}

#practice_B_1_2 #share_view .share_box .comment_wrap textarea{
	width: 100%;
	height: 130px;
	box-sizing: border-box;
	font-size: 14px;
	padding: 8px;
	border: 1px solid #bababa;
}

#practice_B_1_2 #share_view .share_box .comment_wrap textarea::-moz-selection,
#practice_B_1_2 #share_view .share_box .comment_wrap textarea::selection { 
	background-color: #999 !important;
	color: #fff !important; 
}

#practice_B_1_2 #share_view .share_box .submit_btn_wrap{
	width: 100%;
	float: left;
	margin-top: 10px;
}

#practice_B_1_2 #share_view .share_box .submit_btn_wrap #submit_btn{
	width: 200px;
	margin: 0 auto;
	font-size: 16px;
	background-color: #bbbdc0;
	color: #494949;
	text-align: center;
	padding: 4px;
	cursor: pointer;
	transition: all 600ms ease;
}

#practice_B_1_2 #share_view .share_box .submit_btn_wrap #submit_btn:hover{
	opacity: 0.7;
}

#practice_B_1_2 #share_view .share_box .submit_btn_wrap #submit_btn:active{
	transform: scale(0.97);
}