@charset 'utf-8';

.mTop {width:100%; padding:0;font-size:0; margin:40px 0 0 0; }
.mTop:after {content:''; display:block; clear:both; }
.mTop .mbox {width:23.5%; float:left; margin:0 0 0 2%;  border-radius:20px; border:1px solid #f3efd7;background:#faf8eb; padding:0 20px; 
-webkit-box-shadow:3px 3px 0 rgba(215,214,209,1);
-moz-box-shadow:3px 3px 0 rgba(215,214,209,1);
-o-box-shadow:3px 3px 0 rgba(215,214,209,1);
-ms-box-shadow:3px 3px 0 rgba(215,214,209,1);
box-shadow:3px 3px 0 rgba(215,214,209,1);}
.mTop .mbox:nth-child(1) {margin-left:0;} 
.mTop .mbox .mtit {width:100%; padding:0 ; height:65px;  display:flex; justify-content:space-between; align-items:center;  }
.mTop .mbox .mtit h3 {width:70%;  line-height:1.2; margin:0;}
.mTop .mbox .mtit h3 .tit { font-size:15px; font-weight:500; color:#333; }
.iconInfo {width:16px; line-height:16px; height:16px; border-radius:50%; margin-top:1px; overflow:hidden; display:inline-block;  background:#c3c3c3 url(../img/com/icon_query.png) no-repeat center 50%; cursor: pointer; }
.mTop .mbox .mtit .iconInfo {float:right; }

.mTop .mbox .mbot {width:100%;   text-align:left; line-height:64px; height:65px;  }
.mTop .mbox .mbot .num {color:#222; font-size:20px; font-weight:600;  }
.mTop .mbox .mbot em {color:#8b8b8b; font-size:14px; font-weight:300; margin:2px 0 0 5px;  display:inline-block;  }
.mTop .mbox .mbot em.roboto { font-size:15px;  }


@media all and (max-width:1150px){ 
.mGraph{margin-top:0px;}
.mTop .mbox {width:48.5%; margin:0 0 2.8% 0;  }
.mTop .mbox:nth-child(2),
.mTop .mbox:nth-child(4) { float:right;  }
.mTop .mbox:nth-child(3),
.mTop .mbox:nth-child(4){margin-bottom:0;}
 .mTop .mbox .mtit {height:60px;} 
.mTop .mbox .mbot {  line-height:59px; height:60px; }
}

@media all and (max-width:801px){ 
.iconInfo { background:#c3c3c3 url(../img/com/icon_query_mo.png) no-repeat center 50%; background-size:16px; }
}
@media all and (max-width:600px){ 
.mTop {margin:35px 0 0 0; }
.mTop .mbox {width:48%; margin:0 0 3.8% 0;  }
 .mTop .mbox .mtit {height:55px;} 
 .mTop .mbox .mbot {  line-height:54px; height:55px; }
}

@media all and (max-width:450px){ 
 .mTop .mbox,
 .mTop .mbox:nth-child(3) {width:100%; margin:0 0 20px 0;  }
 .mTop .mbox .mtit {height:50px;} 
 .mTop .mbox .mbot {  line-height:49px; height:50px; }
 }


/* mGraph */
.mGraph { position:relative;   border-radius:8px; border:1px solid #e7eaf3; background:#fcfcfc; overflow:hidden; margin-top:35px; padding:20px 25px;  } 
.mGraph:after {content:''; display:block; clear:both; }

.gtWrap {width:100%; }
.gtWrap:after {content:''; display:block; clear:both; }
.gtWrap .glbox { float:left; line-height:1.2; }  
.gtWrap .glbox .g_title {color:#222; font-size:13px; display:inline-block; margin:7px 25px 0 0; }
.gtWrap .glbox .g_price {color:#f9ae41; font-size:39px; font-weight:600;  }
.gtWrap .glbox .g_price > em {color:#222; font-size:15px; font-weight:400; padding:20px 0 0 0;display:inline-block}
.gtWrap .gcbox { width:80px; float:left;  margin:5px 0 0 4%;  font-size:13px; padding:0;  } 
.gtWrap .gcbox p { width:100%;  padding:0; margin:0;line-height:1.2;  display:inline-block; padding:0; position:relative;  font-size:13px;  } 
.gtWrap .gcbox p:after {content:''; display:block; clear:both;  line-height:1.2; }
.gtWrap .gcbox p em.txt { display:inline-block;  line-height:1.2;  padding:0; margin:0;  } 
.gtWrap .gcbox p em.iconInfo {position:absolute; right:0; top:0; float:none; display:inline-block; margin-top:0; }
.gtWrap .gt_view { position:absolute; right:25px; top:25px; width:44px; height:37px ; background:url(../img/com/icon_b_view.png) no-repeat center 50%;   display:inline-block;}
.gtWrap .gt_view em {width:100%; height:100%; font-size:0; text-indent:-9999; display:inline-block;}

.per_up  {color:#ee0e0e; background:url(../img/com/icon_up.png) no-repeat 0 50%; padding:0 0 0 20px; display:inline-block;}
.per_down  {color:#ee0e0e; background:url(http://e.playfuel.io/assets/explorer/img/com/icon_down.png) no-repeat 0 50%; padding:0 0 0 20px; display:inline-block;}

.graphWrap {width:100%;  height:380px;}


@media all and (max-width:801px){ 
.mGraph { padding:20px;  } 
.gtWrap .glbox .g_title {margin:8px 10px 0 0; }
.gtWrap .gt_view {top:10px;   right:10px;  width:28px; height:25px;  background-size:100%; }
}


@media all and (max-width:600px){ 
.gtWrap .gcbox {width: 100% ; margin:0;}
.gtWrap .gcbox p {width:70px;float:left;}
}
@media all and (max-width:480px){ 
.gtWrap .glbox .g_title {font-size:13px;  }
.gtWrap .glbox .g_price { font-size:35px; }
.gtWrap .glbox .g_price > em {font-size:13px;}
.gtWrap .gcbox p {  font-size:13px;  } 
}

@media all and (max-width:400px){ 
.mGraph { padding:15px;  } 
.gtWrap .glbox .g_title {margin:8px 10px 0 0; }
.gtWrap .gt_view { right:5px; top:5px; width:24px; height:20px;}
.gtWrap .glbox .g_price { font-size:29px; font-weight:500;  }
}
@media all and (max-width:360px){ 
.gtWrap .glbox .g_title {margin:12px 10px 0 0; }
.gtWrap .glbox .g_price { font-size:27px;}
}

/* mBottom */
.mBottom {padding: 60px 0 0 0;}
.mBlock {width:41%; float:left; }
.mTran {width:56%; float:right; }

 h3.mbtit {width:100%; padding:0 0 10px;  margin:0;  text-align:center;}
 h3.mbtit:after {content:''; display:block; clear:both; }
 h3.mbtit span {padding:0 0 0 42px; line-height:30px; height:30px; display:inline-block; font-size:18px;  font-weight:600; }
 h3.mbtit .view {float:right; width:40px; line-height:40px; height:40px;  background:url(../img/com/marr.png) no-repeat right 50%;  }
 h3.mbtit .view em {font-size:0; text-indent:-9999; }

 h3.mbtit span.mb_block {background:url(../img/com/icon_pc_block.png) no-repeat 0 50%;   }
 h3.mbtit span.mb_tran {background:url(../img/com/icon_pc_trans.png) no-repeat 0 50%; }

 
 @media all and (max-width:900px){ 
  h3.mbtit { padding:0 0 5px; }
}

@media all and (max-width:801px){
 h3.mbtit span.mb_block {background:url(http://e.playfuel.io/assets/explorer/img/com/icon_mo_block.png) no-repeat 0 50%;  background-size:27px;   }
 h3.mbtit span.mb_tran {background:url(../img/com/icon_mo_trans.png) no-repeat 0 50%; background-size:32px; } 
  h3.mbtit .view { background:url(../img/com/marr_mo.png) no-repeat right 50%;background-size:10px;  }
}

@media all and (max-width:768px){
 h3.mbtit span {  font-size:19px; padding:0 0 0 37px;    }
 h3.mbtit span.mb_block { background-size:26px;   }
 h3.mbtit span.mb_tran { background-size:26px; }
}

@media all and (max-width:600px){
 h3.mbtit span {  font-size:18px; }
}

@media all and (max-width:480px){
 h3.mbtit span {padding:0 0 0 33px; }
 h3.mbtit span.mb_block,
 h3.mbtit span.mb_tran { background-size:26px; } 
 h3.mbtit {  padding:0 0 10px;  }
 h3.mbtit span  {  line-height:26px; height:26px; }
 h3.mbtit .view {  width:26px;  line-height:26px; height:26px;   }
}



.blockList_tit{width:100%; display:flex; justify-content:space-between; align-items:stretch; background:#ebebeb; border-top:1px solid #e0e0e0;  border-bottom:1px solid #e0e0e0;  }
.blockList_tit li {text-align:center;  line-height:1.4;   word-break:break-all; padding:13px 5px; display:flex; flex-direction:column; justify-content:center;font-size:13px; color:#222; font-weight:500;}
.blockList_tit li:nth-child(1) {width:25%;}
.blockList_tit li:nth-child(2) {width:40%; }
.blockList_tit li:nth-child(3) {width:30%;}

.blockList {width:100%; }
.blockList:after {content:''; display:block; clear:both; }
.blockList ul {width:100%;  border-bottom:1px solid #ebebeb; font-size:0;  display:flex; justify-content:space-between; align-items:stretch;}
.blockList ul:after {content:''; display:block; clear:both; }
.blockList ul li {text-align:center; line-height:1.4;   word-break:break-all; padding:15px 5px; display:flex; flex-direction:column; justify-content:center;font-size:13px;}
.blockList ul li:last-child{border-right:0;}
.blockList ul li:nth-child(1) {width:25%;}
.blockList ul li:nth-child(2) {width:45%; }
.blockList ul li:nth-child(3) {width:30%;}
.blockList ul li em {width:100%; display:inline-block;  color:#a09ea1; font-size:13px; font-weight:300; display:none;}
.blockList ul li a, 
.blockList ul li span {  display:inline-block;   font-weight:400; }
.blockList ul li span.noto { font-size:15px;  } 
.blockList ul li.time { text-align:right; text-align:center;}
.blockList ul li.time span {  padding: 0 2px 0 0;  font-weight:400;  font-size:13px; word-break:keep-all; text-align:center;}


.tranList_tit {width:100%; display:flex; justify-content:space-between; align-items:stretch; background:#ebebeb; border-top:1px solid #e0e0e0;  border-bottom:1px solid #e0e0e0;  }
.tranList_tit li {text-align:center;  line-height:1.4;   word-break:break-all; padding:13px 5px; display:flex; flex-direction:column; justify-content:center;font-size:13px; color:#222; font-weight:500;}
.tranList_tit li:nth-child(1) {width:32%;}
.tranList_tit li:nth-child(2) {width:22%; }
.tranList_tit li:nth-child(3) {width:28%;}
.tranList_tit li:nth-child(4) {width:18%;}

.tranList {width:100%;  }
.tranList:after {content:''; display:block; clear:both; }
.tranList ul {width:100%;   border-bottom:1px solid #ebebeb; font-size:0; display:flex; justify-content:space-between; align-items:stretch;}
.tranList ul:after {content:''; display:block; clear:both; }
.tranList ul li { font-size:13px;  padding:0 2px; line-height:1.4; text-align:center; word-break:break-all; padding:15px 5px; display:flex; flex-direction:column; justify-content:center;align-items:center;} 
.tranList ul li:last-child{border-right:0;} 
.tranList ul li:nth-child(1) {width:32%;  }
.tranList ul li:nth-child(2) {width:22%; }
.tranList ul li:nth-child(3) {width:28%;  }
.tranList ul li:nth-child(4) {width:18%; word-break:keep-all; justify-content:center; }

.tranList ul li em {width:100%;  color:#a09ea1;  font-size:13px; font-weight:300; display:none;}
.tranList ul li a,
.tranList ul li span { width:100%;display:inline-block;   text-align:left;}
.tranList ul li span.noto { font-size:15px;  }
 
.tranList ul li.id a {width:100%; white-space:nowrap; overflow:hidden; word-wrap:break-word; text-overflow:ellipsis;}
.tranList ul li.time{ align-items:center;   padding: 10px;}
.tranList ul li.time span {  padding: 0 2px 0 0; word-break:keep-all; display:block;   font-size:13px;  line-height:1.1; width: 100%;   text-align:center;}
.tranList ul li.coin {align-items:center; border-right:0;}
.tranList ul li.coin em {width:32px;}  
.tranList ul li.tran span,
.tranList ul li.amount span{ width:100%;display:inline-block;  white-space:nowrap; overflow:hidden; word-wrap:break-word; text-overflow:ellipsis; padding:0; min-width:0;} 
.coin_pia {width:32px; line-height:32px; height:32px;  display:inline-block; overflow:hidden; /*background: url(../img/com/icon_pia.png) no-repeat center 50%;*/ background-size:100%;  border-radius:50%; }
.coin_snac {width:32px; line-height:32px; height:32px;  display:inline-block; overflow:hidden; /*background: url(../img/com/icon_snac.png) no-repeat center 50%;*/ background-size:100%;  border-radius:50%; }

 

@media all and (max-width:900px){
.mBottom {padding: 40px 0 0 0;}
.mTran {padding: 35px 0 0 0;}
.mBlock,
.mTran {width:100%; float:none; } 
}

@media all and (max-width:600px){
.blockList_tit li,.tranList_tit li  { padding:10px 2%;}
.blockList ul li { padding:10px 2%;}
.blockList ul li a, 
.blockList ul li span,
.blockList ul li span.noto {    font-size:13px;   }
.blockList  ul li.time span {  line-height:1.1;   }
.coin_pia,.coin_snac {width:28px; line-height:28px; height:28px; }

.tranList_tit  {display:none; }
.tranList {border-top:1px solid #e0e0e0;}
.tranList ul li { text-align:left;}
.tranList ul li em {display:inline-block; text-align:left;}
.tranList ul {display: block; padding:12px 10px; }
 
.tranList ul li:nth-child(1) {width:100%;float:right;padding:0 0 5px 0; }
.tranList ul li:nth-child(2) {width:100%;float:right;padding:0 0 5px 0; text-align:left; }
.tranList ul li:nth-child(3) {width:100%;float:right; margin-left:42px;  padding:0 0 5px 0; text-align:left;  }
.tranList ul li:nth-child(4) {width:100%;float:right; margin-left:42px;  padding:0 0 5px 0; text-align:left;  }

.tranList ul li {line-height:16px;  font-size:13px; padding:0 2%; border-right:0; display:block; display:block;}
.tranList ul li em  { width:29%; font-size:13px; line-height:16px; float:left;  }
.tranList ul li a,
.tranList ul li span { float:right;width:70%; font-size:13px; padding:0; line-height:16px; }
.tranList ul li span.noto {font-size:13px;}
.tranList ul li.id a,
.tranList ul li.tran span,
.tranList ul li.amount span {width:70%; }
.tranList ul li.coin {padding-top:0; width: 28px;}
.tranList ul li.coin em {  padding:0;width:28px; }
.tranList ul li.id a {  padding:1px 0 0 0;}
.tranList ul li.time {text-align:left; height:auto; line-height:1.1;}
.tranList ul li.time span  {width:70%;text-align:left; }
.tranList ul li.tran span,
.tranList ul li.amount span { text-align:left; } 
}

@media all and (max-width:480px){ 
.tranList ul li a,
.tranList ul li span,
.tranList ul li.id a,
.tranList ul li.tran span,
.tranList ul li.amount span, 
.tranList ul li.time span{width:65%; } 
}

@media all and (max-width:400px){ 
.tranList ul li a,
.tranList ul li span,
.tranList ul li.id a,
.tranList ul li.tran span,
.tranList ul li.amount span,
.tranList ul li.time span  {width:62%; } 
.tranList ul li em { min-width:100px;}
}

@media all and (max-width:360px){
 .blockList ul li.time span {   font-size:12px; }
}