/********* LIST *********/
ul.game_list {
  display: flex;
  flex-flow: row wrap;
}
ul.game_list li {
	border: 0;
	padding-bottom: 30px;
}
ul.game_list h4 {
	text-align: left;
	padding-top: 10px;
	font-size: 1em;
	font-weight: bold;
	line-height: 1.4em;
}
ul.game_list p, ul.game_list div.status_bar, ul.game_list div.profile {
    clear: both;
	text-align: left;
	margin-top: 0;
	font-size: 0.8em;
	line-height: 1.4em;
	color: #999;
	border: 0 !important;
}
ul.game_list li div.status_bar span.cnt {
	display: inline-block;
	float: right;
	padding-right: 10px;

}
ul.game_list li div.profile {
	padding-top: 5px;
}
ul.game_list li div.profile span img.profile_photo {
	width: 26px;
	height: 26px;
	max-width: 26px;
	max-height: 26px;
	object-fit: cover;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 5px;
}
ul.game_list li div.profile span.profile_nickname {
	/* display: inline-block; */
	width: 140px;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
	vertical-align: middle;
}
ul.game_list li div.status_bar span.cnt.lovecnt {
	color: hotpink;
}

/********* PLAY *********/

div.play_body {
  text-align: center;
}
div.play_body h1 {
  font-size: 1.6em;
}
div.play_body > div#play > ul.list {
  padding-top: 20px;
}
div.play_body > div#play > ul.list li {
  float: center !important;	
}
div.play_body > div#play > ul.list > li > div.img_box {
  position: relative;
  border: 1px solid #ddd;
  width: calc(100% - 2px);
}
div.play_body > div#play > ul.list > li > div.img_box:after {
  display: block;
  content: "";
  padding-bottom: 100%;
}
div.play_body > div#play > ul.list > li > div.img_box >img {
  position: absolute;
  top:0; left:0; width:100%; height:100%;object-fit: cover;
}
div.play_body > div#play > ul.list > li > div.item_nm, div.play_body > div#play > div.item_nm {
	border:0;
	padding-top: 0;
	padding-bottom: 20px;
	font-size: 1em;
    text-align: left;
}
div.play_body > div#play > div.item_nm {
	padding-top: 20px;
	font-size: 1.2em;
	font-weight: bold;
	text-align: center;
}

div.play_body div:last-child, div.play_body div.editor {
  padding-top: 20px;
  margin-top: 20px;
}

div.play_body div.editor {
  text-align:left;
}
div.play_body div.editor ul {
  list-style-type: none;
}
div.play_body h3.command, div.play_body h3.question {
  text-align:left;
  font-size: 1.2em;
}
div.play_body h3.command {
  color: #888;
}
div.play_body h3.command:before {
  font-family: "fontAwesome";
  content: '\f078';
  padding-right: 10px;
  color: #bbb;
}
div.play_body h3.question:before {
  font-family: "fontAwesome";
  content: '\f059';
  padding-right: 10px;
  color: #bbb;
  font-size: 1.6em;
  vertical-align: middle;
}
div.play_body img.wow_img, div.play_body div.editor img {
  max-width: 100%;
  height: auto !important;
}

div.play_body button.start {
  padding: 20px 30px;
  border: 0;
  border-radius: 5px;
  color: white;
  font-family: 'Oswald', 'NanumSquareNeo', 'AppleSDGothicNeo-Regular';
  font-size: 2em;
  cursor: pointer;
  margin-bottom: 50px;
  background: linear-gradient(-30deg, #000, #aaa);
  background-size: 400% 400%;
  animation: gr 5s ease infinite;
}
div.play_body button:hover {
  background: linear-gradient(0deg, #FFA07A, #CD5C5C);
}
@keyframes gr {
 0%   {background-position: 0% 50%;}
 50%  {background-position: 100% 50%;}
 100% {background-position: 0% 50%;}
}

.main_content_zone {

}

div.progress {
  text-align: center;
  margin-bottom: 20px;
  font-size: 0.7em;
}
div.progress span {
  font-family: 'Oswald', 'NanumSquareNeo', 'AppleSDGothicNeo-Regular';
  padding: 2px 5px;
  border: 1px solid #bbb;
  color: #bbb;
  line-height: 25px;
}
div.progress span.on {
  background-color: #bbb;
  padding: 2px 12px;
  color: #fff;
}

div.controls {
	margin: 20px;
	text-align: center;
}
div.controls button {
  background-color: #fafafa;
  border: 1px solid #dfdfdf;
  border-radius: 2px;
  font-family: 'Oswald', 'NanumSquareNeo', 'AppleSDGothicNeo-Regular';
  font-size: 1em;
  font-weight: bold;
  padding: 4px 15px;
  min-width: 50px;
  min-height: 50px;
  vertical-align: middle;
  text-transform:uppercase;
  margin-bottom: 10px;
  margin-right: 5px;
  color: #555;
}
div.controls button:hover {
  background-image: linear-gradient(#555, #aaa);
  color: #fff;
  cursor: pointer;
}
div.controls > button > img {
  width: 36px;height: 36px;
  max-width: 36px;max-height: 36px;
  object-fit: cover;
  border-radius: 50%;
  vertical-align: middle;
}
div.controls > button > span {
  vertical-align: middle;
}

@media (max-width: 479px) {
  ul.game_list li {
	min-height: auto !important;
  }	
  div.play_body h1 {
	font-size: 1.4em;
	line-height: 1.3em;
  }
  div.play_body h3.command {
	font-size: 1.2em;
  }
  div.play_body > div#play > div.item_nm {
	font-size: 1em;
  }
  .main_content_zone {
	width: 100%;
  }
}


ol.options {
  counter-reset: my-counter;
  list-style-type: none;
}
ol.options>li {
  text-align: left;
  margin-bottom: 10px;
}
ol.options>li:before {
  font-family: 'Oswald', 'NanumSquareNeo', 'AppleSDGothicNeo-Regular';
  counter-increment: my-counter;
  content: counter(my-counter);
  display: inline-block;
  width: 32px;
  height: 32px;
  background-color: #888;
  color: #fff;
  text-align: center;
  padding-top: 6px;
  margin-right: 10px;
}
ol.options>li>span.true, ol.options>li>span.false, ol.options>li>span.well {
  display: inline-block;
  content: '';
  padding: 6px 10px;
  color: #fff;
  margin-right: 10px;
  border-radius:10px 20px 10px 10px;
}
ol.options>li>span.true {
  background-color: #88f;
}
ol.options>li>span.false {
  background-color: #f88;
}
ol.options>li>span.well {
  background-color: #8b8;
}
ol.options>li.choice {
  cursor: pointer;
  color: #555;
}
ol.options>li.choice:hover {
  color: black;
}
ol.options>li:hover::before {
  background-color: #566;
}
ol.options>li>div.editor {
  padding: 0;
  margin: 0;
  border: 0;
  margin-bottom: 20px;
}
ol.options>li>p>span {
  margin-right: 10px;
}
ol.options>li>p>span.box {
  font-family: 'Oswald', 'NanumSquareNeo', 'AppleSDGothicNeo-Regular';
  border: 1px solid #aaa;
  font-size: 0.8em;
  color: #aaa;
  padding: 2px 5px;
}
ol.options>li>p>span.space {
  padding:0 20px;
}