@import url("/fonts/proximanova/proximanova.css");
@import url("/fonts/montserrat/Montserrat.css");
@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css'); /* Noto Sans CJK KR - º»°íµñ */

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}

[style*="--aspect-ratio"] > img {
  height: auto;
}

@supports (--custom: property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }
}

.aspect-ratio {position:relative;width:100%;}
.aspect-ratio:before {display:block;content:"";padding-bottom:100%;}
.aspect-ratio > :first-child {position: absolute;top:0;left:0;width:100%;height:100%;}
.aspect-ratio.dmi:before        {padding-bottom:calc(75%);}
.aspect-ratio.timeline:before   {padding-bottom:calc(34.5%);}
.aspect-ratio.ground:before     {padding-bottom:calc(66.66666666666667%);}
.aspect-ratio.goalpost:before   {padding-bottom:calc(83.5%);}
.aspect-ratio.formation:before  {padding-bottom:calc(75%);}
.aspect-ratio.r0302 {}
.aspect-ratio > img {height: auto;}

@media only screen and (max-width: 767px) {
    .aspect-ratio.timeline:before   {padding-bottom:calc(50%);}
}

@media only screen and (max-width: 575px) {}
@media only screen and (min-width: 576px) and (max-width: 767px) {}
@media only screen and (min-width: 768px) and (max-width: 991px) {}
@media only screen and (min-width: 992px) and (max-width: 1199px) {}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {}
@media only screen and (min-width: 1600px) {}

.pointer {cursor:pointer;}
.content-body {min-height:700px;}
.skeleton {display:none !important;}

.korean {font-family:'Noto Sans KR','proxima-nova','Helvetica';}

.float-w {position:relative;}
.float-w:after {display:block;content:"";clear:both;}
.float-w .float-l {display:block;float:left;}
.float-w .float-r {display:block;float:right;}
.float-c {position:absolute;left:50%;transform:translateX(-50%) !important;}

.alignC {text-align:center !important;}
.alignL {text-align:left   !important;}
.alignR {text-align:right  !important;}

.mt00 {margin-top:0 !important;}

.pt00 {padding-top:0    !important;}
.pt10 {padding-top:10px !important;}
.pt20 {padding-top:20px !important;}
.pt30 {padding-top:30px !important;}

.color-green {color:#00FF87 !important;}

.stem {
  margin: 0px auto;
}

.bine {
  width: 100%;
}

.bine-no {
  display: none;
}

.bine-1 {
  width: 8.33333%;
  float: left;
  height: inherit;
}

.bine-2 {
  width: 16.66667%;
  float: left;
  height: inherit;
}

.bine-3 {
  width: 25%;
  float: left;
  height: inherit;
}

.bine-3-1 {
  width: 30%;
  float: left;
  height: inherit;
}

.bine-4 {
  width: 33.33333%;
  float: left;
  height: inherit;
}

.bine-4-1 {
  width: 40%;
  float: left;
  height: inherit;
}

.bine-5 {
  width: 41.66667%;
  float: left;
  height: inherit;
}

.bine-6 {
  width: 50%;
  float: left;
  height: inherit;
}

.bine-7 {
  width: 58.33333%;
  float: left;
  height: inherit;
}

.bine-8 {
  width: 66.66667%;
  float: left;
  height: inherit;
}

.bine-9 {
  width: 75%;
  float: left;
  height: inherit;
}

.bine-10 {
  width: 83.33333%;
  float: left;
  height: inherit;
}

.bine-11 {
  width: 91.66667%;
  float: left;
  height: inherit;
}

.bine-12 {
  width: 100%;
  float: left;
  height: inherit;
}

.bine-12.wrapper {
  transform: scaleY(1);
  /* transform-origin: top; */
  opacity:1;
  transition: transform 0.3s, opacity 0.3s;
}

.bine-12.wrapper.off {
  transform: scaleY(0);
  opacity:0;
  transition: transform 0.3s, opacity 0.3s;
}

@media only screen and (max-width: 575px) {
  .stem {
    width: 100%;
  }
  .no-xs {
    display: none;
  }
  .cone {
    margin: 0 20px;
  }
  .branch {
    margin: 0 calc(20px * -1);
  }
  .bine-xs-1 {
    width: 8.33333%;
    float: left;
    height: inherit;
  }
  .bine-xs-2 {
    width: 16.66667%;
    float: left;
    height: inherit;
  }
  .bine-xs-3 {
    width: 25%;
    float: left;
    height: inherit;
  }
  .bine-xs-4 {
    width: 33.33333%;
    float: left;
    height: inherit;
  }
  .bine-xs-5 {
    width: 41.66667%;
    float: left;
    height: inherit;
  }
  .bine-xs-6 {
    width: 50%;
    float: left;
    height: inherit;
  }
  .bine-xs-7 {
    width: 58.33333%;
    float: left;
    height: inherit;
  }
  .bine-xs-8 {
    width: 66.66667%;
    float: left;
    height: inherit;
  }
  .bine-xs-9 {
    width: 75%;
    float: left;
    height: inherit;
  }
  .bine-xs-10 {
    width: 83.33333%;
    float: left;
    height: inherit;
  }
  .bine-xs-11 {
    width: 91.66667%;
    float: left;
    height: inherit;
  }
  .bine-xs-12 {
    width: 100%;
    float: left;
    height: inherit;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .stem {
    width: 540px;
  }
  .no-sm {
    display: none;
  }
  .cone {
    margin: 0 10px;
  }
  .branch {
    margin: 0 calc(10px * -1);
  }
  .bine-sm-1 {
    width: 8.33333%;
    float: left;
    height: inherit;
  }
  .bine-sm-2 {
    width: 16.66667%;
    float: left;
    height: inherit;
  }
  .bine-sm-3 {
    width: 25%;
    float: left;
    height: inherit;
  }
  .bine-sm-4 {
    width: 33.33333%;
    float: left;
    height: inherit;
  }
  .bine-sm-5 {
    width: 41.66667%;
    float: left;
    height: inherit;
  }
  .bine-sm-6 {
    width: 50%;
    float: left;
    height: inherit;
  }
  .bine-sm-7 {
    width: 58.33333%;
    float: left;
    height: inherit;
  }
  .bine-sm-8 {
    width: 66.66667%;
    float: left;
    height: inherit;
  }
  .bine-sm-9 {
    width: 75%;
    float: left;
    height: inherit;
  }
  .bine-sm-10 {
    width: 83.33333%;
    float: left;
    height: inherit;
  }
  .bine-sm-11 {
    width: 91.66667%;
    float: left;
    height: inherit;
  }
  .bine-sm-12 {
    width: 100%;
    float: left;
    height: inherit;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .stem {
    width: 720px;
  }
  #pop-page.salary #pop-content .stem {width:540px;}
  
  .no-md {
    display: none;
  }
  .cone {
    margin: 0 10px;
  }
  .branch {
    margin: 0 calc(10px * -1);
  }
  .bine-md-1 {
    width: 8.33333%;
    float: left;
    height: inherit;
  }
  .bine-md-2 {
    width: 16.66667%;
    float: left;
    height: inherit;
  }
  .bine-md-3 {
    width: 25%;
    float: left;
    height: inherit;
  }
  .bine-md-4 {
    width: 33.33333%;
    float: left;
    height: inherit;
  }
  .bine-md-5 {
    width: 41.66667%;
    float: left;
    height: inherit;
  }
  .bine-md-6 {
    width: 50%;
    float: left;
    height: inherit;
  }
  .bine-md-7 {
    width: 58.33333%;
    float: left;
    height: inherit;
  }
  .bine-md-8 {
    width: 66.66667%;
    float: left;
    height: inherit;
  }
  .bine-md-9 {
    width: 75%;
    float: left;
    height: inherit;
  }
  .bine-md-10 {
    width: 83.33333%;
    float: left;
    height: inherit;
  }
  .bine-md-11 {
    width: 91.66667%;
    float: left;
    height: inherit;
  }
  .bine-md-12 {
    width: 100%;
    float: left;
    height: inherit;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .stem {
    width: 960px;
  }
  #pop-page.salary #pop-content .stem {width:540px;}
  
  .no-lg {
    display: none;
  }
  .cone {
    margin: 0 10px;
  }
  .branch {
    margin: 0 calc(10px * -1);
  }
  .bine-lg-1 {
    width: 8.33333%;
    float: left;
    height: inherit;
  }
  .bine-lg-2 {
    width: 16.66667%;
    float: left;
    height: inherit;
  }
  .bine-lg-3 {
    width: 25%;
    float: left;
    height: inherit;
  }
  .bine-lg-4 {
    width: 33.33333%;
    float: left;
    height: inherit;
  }
  .bine-lg-5 {
    width: 41.66667%;
    float: left;
    height: inherit;
  }
  .bine-lg-6 {
    width: 50%;
    float: left;
    height: inherit;
  }
  .bine-lg-7 {
    width: 58.33333%;
    float: left;
    height: inherit;
  }
  .bine-lg-8 {
    width: 66.66667%;
    float: left;
    height: inherit;
  }
  .bine-lg-9 {
    width: 75%;
    float: left;
    height: inherit;
  }
  .bine-lg-10 {
    width: 83.33333%;
    float: left;
    height: inherit;
  }
  .bine-lg-11 {
    width: 91.66667%;
    float: left;
    height: inherit;
  }
  .bine-lg-12 {
    width: 100%;
    float: left;
    height: inherit;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .stem {
    width: 1140px;
  }
  #pop-page.salary #pop-content .stem {width:540px;}
  
  .no-xl {
    display: none;
  }
  .cone {
    margin: 0 15px;
  }
  .branch {
    margin: 0 calc(15px * -1);
  }
  .bine-xl-1 {
    width: 8.33333%;
    float: left;
    height: inherit;
  }
  .bine-xl-2 {
    width: 16.66667%;
    float: left;
    height: inherit;
  }
  .bine-xl-3 {
    width: 25%;
    float: left;
    height: inherit;
  }
  .bine-xl-4 {
    width: 33.33333%;
    float: left;
    height: inherit;
  }
  .bine-xl-5 {
    width: 41.66667%;
    float: left;
    height: inherit;
  }
  .bine-xl-6 {
    width: 50%;
    float: left;
    height: inherit;
  }
  .bine-xl-7 {
    width: 58.33333%;
    float: left;
    height: inherit;
  }
  .bine-xl-8 {
    width: 66.66667%;
    float: left;
    height: inherit;
  }
  .bine-xl-9 {
    width: 75%;
    float: left;
    height: inherit;
  }
  .bine-xl-10 {
    width: 83.33333%;
    float: left;
    height: inherit;
  }
  .bine-xl-11 {
    width: 91.66667%;
    float: left;
    height: inherit;
  }
  .bine-xl-12 {
    width: 100%;
    float: left;
    height: inherit;
  }
}

@media only screen and (min-width: 1600px) {
  .stem {
    width: 1440px;
  }
  #pop-page.salary #pop-content .stem {width:540px;}
  
  .no-ul {
    display: none;
  }
  .cone {
    margin: 0 15px;
  }
  .branch {
    margin: 0 calc(15px * -1);
  }
  .bine-ul-1 {
    width: 8.33333%;
    float: left;
    height: inherit;
  }
  .bine-ul-2 {
    width: 16.66667%;
    float: left;
    height: inherit;
  }
  .bine-ul-3 {
    width: 25%;
    float: left;
    height: inherit;
  }
  .bine-ul-4 {
    width: 33.33333%;
    float: left;
    height: inherit;
  }
  .bine-ul-5 {
    width: 41.66667%;
    float: left;
    height: inherit;
  }
  .bine-ul-6 {
    width: 50%;
    float: left;
    height: inherit;
  }
  .bine-ul-7 {
    width: 58.33333%;
    float: left;
    height: inherit;
  }
  .bine-ul-8 {
    width: 66.66667%;
    float: left;
    height: inherit;
  }
  .bine-ul-9 {
    width: 75%;
    float: left;
    height: inherit;
  }
  .bine-ul-10 {
    width: 83.33333%;
    float: left;
    height: inherit;
  }
  .bine-ul-11 {
    width: 91.66667%;
    float: left;
    height: inherit;
  }
  .bine-ul-12 {
    width: 100%;
    float: left;
    height: inherit;
  }
}

.fullwidth {
  width: 100%;
}

.clearfix {
  clear: both;
}

/*
.root{
  position: absolute;
  width:100%; height:100%;
  .trunk {
    height:100%;
    .stem {
      height:100%;
      div[class^="bine"] {
        height:100%;
        background: gray;
        box-sizing: border-box;
        @include border(1px, solid, lighten(gray, 10%), left);
        @include border(1px, solid, lighten(gray, 10%), right);
        .cone {
          height:100%;
          text-align: center;
          background: lighten(gray, 20%);
          color: darken(gray, 10%);
          font-size: 12px;
          @include border(1px, solid, darken(gray, 10%), left);
          @include border(1px, solid, darken(gray, 10%), right);
        }
      }
    }
  }
}
*/
.inline-group {
  display: inline-block;
  vertical-align: middle;
}

.label {
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
  padding: 0 5px;
  padding-top: 3px;
}

.exp {
  display: table;
  width: 300px;
  height: 100%;
  margin: 0 auto;
}

.exp .checkbox {
  display: table-cell;
  width: 100%;
  height: 100%;
  vertical-align: middle;
  text-align: left;
}

label {
  display: inline-block;
  color: #343434;
  cursor: pointer;
  position: relative;
  font-size: 13px;
}

label .ui-checkbox {
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  background-color: #e7e7e7;
  width: 15px;
  height: 15px;
  transform-origin: center;
  border: 2px solid #818181;
  border-radius: 4px;
  transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}

label .ui-checkbox:before {
  content: "";
  width: 0px;
  height: 2px;
  border-radius: 2px;
  background: #676767;
  position: absolute;
  transform: rotate(45deg);
  top: 5px;
  left: 2px;
  transition: width 50ms ease 50ms;
  transform-origin: 0% 0%;
}

label .ui-checkbox:after {
  content: "";
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: #818181;
  position: absolute;
  transform: rotate(300deg);
  top: 9px;
  left: 3px;
  transition: width 50ms ease;
  transform-origin: 0% 0%;
}

label:hover .ui-checkbox:before {
  width: 5px;
  transition: width 100ms ease;
}

label:hover .ui-checkbox:after {
  width: 10px;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"] {
  display: none !important;
}

input[type="checkbox"]:checked + label .ui-checkbox {
  background-color: #818181;
  transform: scale(1.1);
}

input[type="checkbox"]:checked + label .ui-checkbox:after {
  width: 10px;
  background: white;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked + label .ui-checkbox:before {
  width: 5px;
  background: white;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked + label:hover .ui-checkbox {
  background-color: #818181;
  transform: scale(1.1);
}

input[type="checkbox"]:checked + label:hover .ui-checkbox:after {
  width: 10px;
  background: #88B83D;
  transition: width 150ms ease 100ms;
}

input[type="checkbox"]:checked + label:hover .ui-checkbox:before {
  width: 5px;
  background: #88B83D;
  transition: width 150ms ease 100ms;
}

.help {
  color: #9F9F9F;
  font-size: 12px;
}

.hamburger-menu {
  float: right;
  left: 0;
  top: 0;
  width: 56px;
  height: 56px;
  overflow: hidden;
}

.hamburger {
  padding: 28px 18px;
  display: inline-block;
  cursor: pointer;
  transition-property: opacity, filter;
  transition-duration: 0.15s;
  transition-timing-function: linear;
  font: inherit;
  color: inherit;
  text-transform: none;
  background-color: transparent;
  border: 0;
  margin: 0;
  overflow: visible;
}

.hamburger:hover {
  opacity: 0.7;
}

.hamburger.is-active .hamburger-inner {
  transform: rotate(45deg);
  transition-delay: 0.14s;
  transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger.is-active .hamburger-inner::before {
  top: 0;
  opacity: 0;
  transition: top 0.1s ease, opacity 0.1s 0.14s ease;
}

.hamburger.is-active .hamburger-inner::after {
  bottom: 0;
  transform: rotate(-90deg);
  transition: bottom 0.1s ease, transform 0.1s 0.14s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.hamburger-box {
  width: 20px;
  height: 14px;
  display: inline-block;
  position: relative;
}

.hamburger-inner {
  display: block;
  margin-top: -1px;
  transition-duration: 0.1s;
  transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

.hamburger-inner, .hamburger-inner::before, .hamburger-inner::after {
  width: 20px;
  height: 2px;
  background-color: #054527;
  border-radius: 0px;
  position: absolute;
  transition-property: transform;
  transition-duration: 0.15s;
  transition-timing-function: ease;
}

.hamburger-inner::before, .hamburger-inner::after {
  content: "";
  display: block;
}

.hamburger-inner::before {
  top: -6px;
  transition: top 0.1s 0.14s ease, opacity 0.1s ease;
}

.hamburger-inner::after {
  bottom: -6px;
  transition: bottom 0.1s 0.14s ease, transform 0.1s cubic-bezier(0.55, 0.055, 0.675, 0.19);
}

/**
 * Common ...
 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  background: #15181B url("/img/mio-bg-pattern.png") top left;
  background-size: 150px 150px;
  box-sizing: border-box;
  font-size: 13px;
  font-family: "proxima-nova", Helvetica;
  font-weight: normal;
  color: #E63A79;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body.is-active {
  overflow: hidden;
}

.root {
  background-color: #181c1f;
  background-image: url("/img/mio-bg-top.jpg");
  background-repeat: repeat-x;
  /*background-size: 100% auto;*/
  background-attachment: fixed;
  background-position: top center;
}

::selection {
  background: #8B3AE8;
  color: #fff;
}

::-moz-selection {
  background: #8B3AE8;
  color: #fff;
}

a {
  color: #fff;
}

a:hover {
  color: #E63A79;
}

img[src$=".gif"], img[src$=".png"] {
  image-rendering: auto;
}

.h10 {
  height: 10px;
}

.h20 {
  height: 20px;
}

.h30 {
  height: 30px;
}

.h40 {
  height: 40px;
}

.h50 {
  height: 50px;
}

.h60 {
  height: 60px;
}

.h70 {
  height: 70px;
}

.h80 {
  height: 80px;
}

.h90 {
  height: 90px;
}

.h100 {
  height: 100px;
}

.h200 {
  height: 200px;
}

.h300 {
  height: 300px;
}

/**
 * TOP ...
 */
.header-m {
  z-index: 999;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  /*overflow:hidden;*/
  display: none;
}

.header-m.scrolled {
  background: rgba(0, 0, 0, 0.2);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.header-m .header-logo {
  line-height: 40px;
}

.header-m .header-logo .logo-typo img {
  height: 40px;
}

.header-m .header-nav .hamburger-menu {
  width: 40px;
  height: 40px;
}

.header-m .header-nav .hamburger-menu .hamburger {
  padding: 0;
  margin-top: 20px;
  margin-left: 0px;
}

.header-m .header-nav .hamburger-menu .hamburger .hamburger-box .hamburger-inner, .header-m .header-nav .hamburger-menu .hamburger .hamburger-box .hamburger-inner:before, .header-m .header-nav .hamburger-menu .hamburger .hamburger-box .hamburger-inner:after {
  background-color: #fff;
}

.header-m .header-nav .btn-help {float:right;margin:0 10px 0 0;display:block;width:40px;height:40px;line-height:40px;font-size:0;color:#333;text-align:center;text-decoration:none;
    background:url('../img/header-icon-help01.png') no-repeat center center;background-size:auto;}

.header-m-pan {
  z-index: 998;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  margin-right: 10px;
  background: rgba(20, 20, 20, 0.95);
  visibility: hidden;
  box-sizing: border-box;
  overflow-y: scroll;
}

.header-m-pan.is-active {
  visibility: visible;
}

.header-m-pan nav {
  margin-top: 40px;
}

.header-m-pan nav .search-m-box-wrap {
  padding: 20px;
}

.header-m-pan nav .search-m-box-wrap .search-m-box {
  position: relative;
  line-height: normal;
  display: inline-block;
  width: 100%;
}

.header-m-pan nav .search-m-box-wrap .search-m-box input[type=text] {
  font-family: "proxima-nova", Helvetica;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #514f5d;
  border-radius: 32px;
  background: #212026;
  margin: 0;
  padding: 0;
  width: calc(100% - 60px);
  color: #f195b7;
  padding-left: 15px;
  padding-right: 47px;
}

.header-m-pan nav .search-m-box-wrap .search-m-box input[type=text]:focus {
  outline: 0 none;
  border: 1px solid #E63A79;
  box-shadow: 0 1px 1px rgba(210, 55, 113, 0.075) inset, 0 0 4px rgba(210, 55, 113, 0.6);
}

.header-m-pan nav .search-m-box-wrap .search-m-box input[type=text]::-webkit-input-placeholder, .header-m-pan nav .search-m-box-wrap .search-m-box input[type=text]:-ms-input-placeholder, .header-m-pan nav .search-m-box-wrap .search-m-box input[type=text]::placeholder {
  color: #827f93;
}

.header-m-pan nav .search-m-box-wrap .search-m-box input[type=submit], .header-m-pan nav .search-m-box-wrap .search-m-box button.search {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 5px;
  border: none;
  background: transparent url("/img/mio-search-btn-ico-2.png") no-repeat center center;
  background-size: cover;
  width: 32px;
  height: 32px;
}

.header-m-pan nav .search-m-box-wrap .search-m-box input[type=submit]:focus, .header-m-pan nav .search-m-box-wrap .search-m-box input[type=submit]:hover, .header-m-pan nav .search-m-box-wrap .search-m-box button.search:focus, .header-m-pan nav .search-m-box-wrap .search-m-box button.search:hover {
  outline: none;
  cursor: pointer;
}

.header-m-pan nav .menu-ul {
  list-style: none;
  margin: 10px auto;
  padding: 0;
  width: 90%;
}

.header-m-pan nav .menu-ul li {
  border-bottom: 1px solid #514f5d;
}

.header-m-pan nav .menu-ul li a {
  display: block;
  text-decoration: none;
  padding: 10px 0;
  text-indent: 10px;
}

.header-m-pan nav .menu-ul li a:hover {
  color: #E63A79;
  background: rgba(255, 255, 255, 0.05);
}

.header-m-pan nav .tip-ul {
  list-style: none;
  margin: 20px auto;
  padding: 0;
  width: 90%;
}

.header-m-pan nav .tip-ul li {
  float: left;
  width: 50%;
}

.header-m-pan nav .tip-ul li a {
  margin: 0 10px;
  border: 1px solid #514f5d;
  color: #999999;
  display: block;
  text-decoration: none;
  padding: 10px 0;
  text-align: center;
}

.header-m-pan nav .tip-ul li a:hover {
  background: #E63A79;
  color: #212026;
  border: none;
}

.header-tip {
  z-index: 100;
  position: fixed;
  width: 100%;
  height: 30px;
  font-family: "Montserrat", serif;
  font-weight: 300;
  font-size: 10px;
  color: #fff;
}

.header-tip.scrolled {
  display: none;
}

.header-tip .header-left {
  text-align: left;
  line-height: 30px;
}

.header-tip .header-left .header-desc {
  padding-left: 90px;
}

.header-tip .header-right {
  text-align: right;
  line-height: 30px;
}

.header-tip .header-right a {
  text-decoration: none;
  color: #fff;
  margin-left: 20px;
}

.header-tip .header-right a:hover {
  color: #E63A79;
}

.header-tip .header-right a.tip-links i.icon-up-open {
  display: none;
}

.header-tip .header-right a.tip-links i.icon-down-open {
  display: inline;
}

.header-tip .header-right a.tip-links.is-active i.icon-up-open {
  display: inline;
}

.header-tip .header-right a.tip-links.is-active i.icon-down-open {
  display: none;
}

.header-tip .header-right a.event {padding-left:40px;border-left:1px solid #979797;background:url('../img/header-icon-flag01.png') no-repeat left 25px center;}

.tip-club {
  z-index: 102;
  position: fixed;
  width: 100%;
  top: 30px;
  background: #fff;
  height: 54px;
  line-height: 54px;
  visibility: hidden;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.1s cubic-bezier(0.4, 0, 0.2, 1);
}

.tip-club.scrolled {
  display: block;
}

.tip-club.is-active {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
  visibility: visible;
}

.tip-club .tip-m-close {
  display: none;
}

.tip-club .club-links {
  text-align: center;
}

.tip-club .club-links a {
  margin: 0 10px;
}

.tip-club .club-links a:hover .badge-club {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
  vertical-align: middle;
}

.tip-club .club-links a .club-label {
  vertical-align: middle;
  display: none;
}

.header {
  z-index: 101;
  position: fixed;
  width: 100%;
  top: 30px;
  background: #fff;
  height: 54px;
  line-height: 54px;
}

.header.scrolled {
  top: 0;
  -webkit-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: top 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header.scrolled .header-logo .logo-symbolic {
  top: 0;
}

.header.scrolled .header-logo .logo-symbolic img {
  width: 54px;
}

.header.scrolled .header-logo .logo-typo {
  padding-left: 54px;
}

.header > .btn-help {position:absolute;right:20px;bottom:-35px;display:block;width:17px;height:17px;line-height:20px;font-size:0;color:#333;text-align:center;text-decoration:none;
    background:url('../img/header-icon-help01.png') no-repeat center center;background-size:contain;}

.header .header-logo {
  float:left;
  text-align: left;
  position: relative;
  line-height: 0;
}

.header .header-logo .logo-symbolic {
  position: absolute;
  top: -18px;
  background: #fff;
  border-radius: 50%;
}

.header .header-logo .logo-symbolic img {
  width: 90px;
}

.header .header-logo .logo-symbolic img.img-flat {
  display: inline;
}

.header .header-logo .logo-symbolic img.img-ani {
  display: none;
}

.header .header-logo .logo-symbolic.is-active {
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -moz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -ms-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  -o-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header .header-logo:hover .logo-symbolic img.img-flat {
  display: none;
}

.header .header-logo:hover .logo-symbolic img.img-ani {
  display: inline;
}

.header .header-logo .logo-typo {
  padding-left: 90px;
}

.header .header-logo .logo-typo img {
  width: 170px;
}

.header .header-nav {
  position:absolute;
  left:50%;
  top:0;
  transform:translateX(-50%);
  text-align: center;
}

.header .header-nav ul {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: table;
  height: 54px;
  font-size: 15px;
}

.header .header-nav ul li {
  display: table-cell;
  vertical-align: middle;
  padding: 0 30px;
}

.header .header-nav ul li a {
  color: #212026;
  text-decoration: none;
  white-space: nowrap;
}

.header .header-nav ul li a:hover {
  color: #E63A79;
}

.header .header-opt {
  float:right;
  text-align: right;
  position:relative;
}

.header .header-opt .search-box {
  position: relative;
  line-height: normal;
  display: inline-block;
}

.header .header-opt .search-box input[type=text] {
  font-family: "proxima-nova", Helvetica;
  font-size: 14px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #514f5d;
  border-radius: 32px;
  margin: 0;
  width: 140px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 15px;
  padding-right: 47px;
  color: #8B3AE8;
}

.header .header-opt .search-box input[type=text]:focus {
  outline: 0 none;
  border: 1px solid #8B3AE8;
  box-shadow: 0 1px 1px rgba(230, 58, 121, 0.075) inset, 0 0 4px rgba(230, 58, 121, 0.6);
}

.header .header-opt .search-box input[type=text]::-webkit-input-placeholder, .header .header-opt .search-box input[type=text]:-ms-input-placeholder, .header .header-opt .search-box input[type=text]::placeholder {
  color: #827f93;
}

.header .header-opt .search-box input[type=submit], .header .header-opt .search-box button.search {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 5px;
  border: none;
  background: transparent url("/img/mio-search-btn-ico-1.png") no-repeat center center;
  background-size: cover;
  width: 32px;
  height: 32px;
}

.header .header-opt .search-box input[type=submit]:focus, .header .header-opt .search-box input[type=submit]:hover, .header .header-opt .search-box button.search:focus, .header .header-opt .search-box button.search:hover {
  outline: none;
  cursor: pointer;
  background: transparent url("/img/mio-search-btn-ico-2.png") no-repeat center center;
  background-size: cover;
}

.header .header-opt > .links {display:inline-block;vertical-align:top;margin-left:10px;line-height:54px;}
.header .header-opt > .links a {display:block;padding:0 12px;font-family:"Montserrat", serif;font-size:10px;color:#212026;font-weight:bold;text-decoration:none !important;}
.header .header-opt > .links a:hover {color:#E63A79;}
.header .header-opt > .links a.login {background-color:none;transition:background-color 0.3s, color 0.3s;}
.header .header-opt > .links a.login:after {display:inline;margin-left:5px;font-family:entypo;content:"\e75c";}
.header .header-opt > .links a.login.on {color:#fff;background-color:#212026;transition:background-color 0.3s, color 0.3s;}
.header .header-opt > .links a.login.on:after {content:"\e75f";}
.header .header-opt > .links a.my {padding:0 6px 0 12px;background-color:none;transition:background-color 0.3s, color 0.3s;}
.header .header-opt > .links a.my > i {display:inline-block;vertical-align:middle;width:34px;height:34px;line-height:34px;font-style:normal;color:#fff;text-align:center;background-color:#cc356e;border-radius:50%;}
.header .header-opt > .links a.my:after {display:inline;margin-left:5px;font-family:entypo;content:"\e75c";}
.header .header-opt > .links a.my.on {color:#fff;background-color:#212026;transition:background-color 0.3s, color 0.3s;}
.header .header-opt > .links a.my.on:after {content:"\e75f";}

@media only screen and (max-width: 1599px) {
  .header .header-nav ul li {padding:0 25px;}
}

@media only screen and (max-width: 1199px) {
  .header .header-nav ul li {padding:0 15px;}
  .header .header-opt .search-box input[type="text"] { width:86px; }
}

@media only screen and (max-width: 991px) {
  .header.scrolled .header-logo .logo-typo { padding-left: 0; }
  .header-tip .header-left .header-desc { padding-left:0; }
  .header .header-logo .logo-symbolic { display: none; }
  .header .header-logo .logo-typo { padding-left: 0; }
  .header .header-nav ul { font-size: 14px; margin-left:-30px;}
  .header .header-nav ul li { padding: 0 10px; }
  .header .header-opt .search-box input[type="text"] { font-size:13px;width:78px;padding-left:10px;padding-right:30px; }
  .header .header-opt > .links {margin-left:5px;}
  .header .header-opt > .links a {padding:0 8px;}
}

@media only screen and (max-width: 767px) {
  .header {
    display: none;
  }
}

@media only screen and (max-width: 575px) {
}

/**
 * Contents
 */
.root-wrap {
  padding-top: 84px;
}

.trunk.main .stem {
  position: relative;
  z-index: 1;
  min-height: 880px;
}

.trunk.main .stem:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  z-index: -1;
  background-image: url("/img/mio-soccer-line.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}

.trunk.ratingon .stem {
  position: relative;
  z-index: 1;
  min-height: 880px;
}

.trunk.ratingon .stem:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  z-index: -1;
  background-image: url("/img/mio-soccer-line.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li {
  font-size: 14px;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li table tr td.cell-1 {
  width: 50px;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li table tr td.cell-2 .club {
  font-size: 12px;
  padding: 2px 0;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li table tr td.cell-2 .position {
  font-size: 13px;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li table tr td.cell-3 {
  width: 40px;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li:first-child {
  height: 100px;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li:first-child:before {
  font-size: 22px;
  padding-top: 64px;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li:first-child table {
  height: 100px;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li:first-child table tr td.cell-1 .uniform-box {
  width: 140px;
  height: 90px;
  margin: 0 auto;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li:first-child table tr td.cell-1 .uniform-box .club.club-wrap {
  font-size: 11px !important;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li:first-child table tr td.cell-1 .uniform-box .name {
  font-size: 12px !important;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li:first-child table tr td.cell-1 .uniform-box .no {
  font-size: 18px !important;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li:first-child table tr td.cell-2 .name {
  font-size: 16px !important;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li:first-child table tr td.cell-2 .club {
  font-size: 12px;
  /*padding: 0 6px;*/
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li:first-child table tr td.cell-2 .position {
  font-size: 13px;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li:first-child table tr td.cell-3 {
  width: 40px;
  font-size: 24px;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li:before {
  width: 40px;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li .list-bg {
  font-size: 13px;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li .list-bg:before {
  background-position: top right 10px;
}

.trunk.matchon-vs .stem .ranking-wrap .ranking-list ol li .list-bg:after {
  background-position: top left 80px;
}

.trunk.matchon-vs .stem .game-info {
  text-align: center;
}

.trunk.matchon-vs .stem .game-info .title {
  font-size: 24px;
  font-weight: bold;
}

.trunk.matchon-vs .stem .game-info .info {
  padding: 5px 0;
}

.trunk.matchon-vs .stem .game-info .refresh {
  margin-top:5px;
  padding: 5px 0;
  color:#fff;
  font-weight:normal;
  cursor:pointer;
}
.trunk.matchon-vs .stem .game-info .refresh:after {
  display:inline-block;
  vertical-align:top;
  margin-left:5px;
  content:"";
  width:13px;
  height:13px;
  background:url('../img/icon-refresh01.png') no-repeat;
  background-size:contain;
}

.trunk.matchon-vs .stem .game-info table {
  width: 100%;
  text-align: center;
  min-height: 200px;
  box-sizing: border-box;
}

.trunk.matchon-vs .stem .game-info table tr td.team-a {
  text-align: right;
}

.trunk.matchon-vs .stem .game-info table tr td.team-a .wrap {
  text-align: center;
  display: inline-block;
  margin-top: 30px;
  margin-right: 50px;
  vertical-align: middle;
}

.trunk.matchon-vs .stem .game-info table tr td.team-a .wrap .badge-club {
  transform: scale(2.0);
  margin-bottom: 30px;
}

.trunk.matchon-vs .stem .game-info table tr td.team-a .wrap .club-name {
  font-size: 20px;
  border-bottom: 3px solid #D0021B;
  color: #D0021B;
}

.trunk.matchon-vs .stem .game-info table tr td.team-a .wrap .text-1 {
  display: block;
  font-family: "Montserrat", serif;
  font-size: 10px;
  color: #00FF87;
  margin: 10px 0;
}

.trunk.matchon-vs .stem .game-info table tr td.team-a .wrap .text-2 {
  display: block;
  font-family: "Montserrat", serif;
  font-size: 10px;
  font-weight: bold;
  color: #999999;
}

.trunk.matchon-vs .stem .game-info table tr td.team-a .inline-wrap {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  margin-right: 50px;
}

.trunk.matchon-vs .stem .game-info table tr td.team-a .inline-wrap .point {
  font-family: "Montserrat", serif;
  font-size: 60px;
  color: #fff;
}

.trunk.matchon-vs .stem .game-info table tr td.team-a .inline-wrap .label {
  display: block;
  font-family: "Montserrat", serif;
  font-size: 10px;
  font-weight: bold;
  color: #999999;
}

.trunk.matchon-vs .stem .game-info table tr td.team-b {
  text-align: left;
}

.trunk.matchon-vs .stem .game-info table tr td.team-b .wrap {
  text-align: center;
  display: inline-block;
  margin-top: 30px;
  margin-left: 50px;
  vertical-align: middle;
}

.trunk.matchon-vs .stem .game-info table tr td.team-b .wrap .badge-club {
  transform: scale(2.0);
  margin-bottom: 30px;
}

.trunk.matchon-vs .stem .game-info table tr td.team-b .wrap .club-name {
  font-size: 20px;
  border-bottom: 3px solid #4990E2;
  color: #4990E2;
}

.trunk.matchon-vs .stem .game-info table tr td.team-b .wrap .text-1 {
  display: block;
  font-family: "Montserrat", serif;
  font-size: 10px;
  color: #00FF87;
  margin: 10px 0;
}

.trunk.matchon-vs .stem .game-info table tr td.team-b .wrap .text-2 {
  display: block;
  font-family: "Montserrat", serif;
  font-size: 10px;
  font-weight: bold;
  color: #999999;
}

.trunk.matchon-vs .stem .game-info table tr td.team-b .inline-wrap {
  vertical-align: middle;
  text-align: center;
  display: inline-block;
  vertical-align: middle;
  margin-left: 50px;
}

.trunk.matchon-vs .stem .game-info table tr td.team-b .inline-wrap .point {
  font-family: "Montserrat", serif;
  font-size: 60px;
  color: #fff;
}

.trunk.matchon-vs .stem .game-info table tr td.team-b .inline-wrap .label {
  display: block;
  font-family: "Montserrat", serif;
  font-size: 10px;
  font-weight: bold;
  color: #999999;
}

.trunk.matchon-vs .stem .game-info table tr td .score {
  font-family: "Montserrat", serif;
  font-size: 30px;
  font-weight: bold;
  color: #fff;
  display: block;
  padding: 10px 0;
}

.trunk.matchon-vs .stem .game-info table tr td .end {
  display: inline-block !important;
  vertical-align: middle;
  width: 54px;
  height: 24px;
  line-height: 24px;
  border: 1px solid #E63A79;
  border-radius: 24px;
  font-size: 12px !important;
  font-weight: normal;
  background: #09090a;
  margin: 0 10px;
  color: #E63A79;
}

.trunk.matchon-vs .stem .game-info table tr td .before {
  min-width: 54px;
  display: inline-block !important;
  vertical-align: middle;
  height: 24px;
  line-height: 24px;
  border: none;
  border-radius: 24px;
  font-size: 14px !important;
  font-weight: normal;
  background: #fff;
  margin: 0 10px;
  color: #212026;
}

.trunk.matchon-vs .stem .game-info table tr td .num {
  vertical-align: middle;
}

.trunk.matchon-vs .stem .game-info table tr td .time {
  font-size: 14px;
  color: #00FF87;
}

.trunk.matchon-tp .stem {
  position: relative;
  z-index: 1;
  min-height: 880px;
  padding-top: 140px;
}

.trunk.matchon-tp .stem:before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
  z-index: -1;
  background-image: url("/img/mio-soccer-line.png");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: contain;
}

.trunk.matchon-attack-point .title-tabs {
  text-align: center;
  padding: 10px 0;
  font-size: 0;
}

.trunk.matchon-attack-point .title-tabs a {
  display: inline-block;
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid #666666;
  font-size: 14px;
  color: gray;
  margin: 2px;
}

.trunk.matchon-attack-point .title-tabs a:hover {
  border: 1px solid #fff;
  color: #fff;
}

.trunk.matchon-attack-point .title-tabs a.is-active {
  border: 1px solid #fff;
  background: #fff;
  color: #212026;
}

.trunk.matchon-compare .title h2 {
  margin: 0;
  font-size: 20px;
  padding: 20px 0;
  color: #fff;
  text-align: center;
}

.trunk.ainews-view .active-chart-wrap {margin:20px 20px 0 0;width:auto;}

.trunk.ainews-view .ai-player-rating {
  color: #fff;
}

.trunk.ainews-view .ai-player-rating h2 {
  font-size: 20px;
}

.trunk.ainews-view .ai-player-rating p {
  font-size: 16px;
  line-height: 140%;
  margin:20px 0 40px;
}
@media only screen and (min-width: 768px) and (max-width: 991px) 
{
    .trunk.ainews-view .active-chart-wrap {margin-top:60px;margin-right:0;}
    .trunk.ainews-view .active-chart-wrap:before {padding-bottom:110%;}
}
@media only screen and (max-width: 767px) 
{
    .trunk.ainews-view .active-chart-wrap {margin:20px 0 10px 0;}
}

.trunk.search-result .wrapper-left {
  background-color:#28272e;
}
.trunk.search-result .club-info .club-sum .left {
  text-align: left;
  float: left;
}

.trunk.search-result .club-info .club-sum .right {
  text-align: left;
  float: right;
}

.trunk.search-result .club-info .club-sum .club-rank {
  font-size: 18px;
  font-weight: bold;
  vertical-align: middle;
  color: #E63A79;
}

.trunk.search-result .club-info .club-sum .club-condition {
  font-family: "Montserrat", serif;
  font-size: 12px;
  font-weight: bold;
  vertical-align: middle;
  color: #fff;
  padding-left: 10px;
}

.trunk.search-result .club-info .club-table-wrap {
  background: #393742;
}

.trunk.search-result .club-info .club-table-wrap .left {
  float: left;
  width: 30%;
  height: 100px;
  padding: 20px 10px;
  text-align: center;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.trunk.search-result .club-info .club-table-wrap .left .badge-club {
  margin-top: 24px;
  transform: scale(2.4);
}

.trunk.search-result .club-info .club-table-wrap .right {
  float: left;
  width: 70%;
  padding: 20px 10px;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.trunk.search-result .club-info .club-table-wrap .right .club-table {
  width: 100%;
  border-spacing: 0;
}

.trunk.search-result .club-info .club-table-wrap .right .club-table tr td {
  padding: 5px;
  border-bottom: 1px solid #4d4d4d;
}

.trunk.search-result .club-info .club-table-wrap .right .club-table tr td:first-child {
  font-size: 12px;
  color: #999999;
  text-align: right;
}

.trunk.search-result .club-info .club-table-wrap .right .club-table tr td:last-child {
  font-size: 14px;
  color: #fff;
}

.trunk.search-result .club-rating .layer-1 {
  padding: 30px 0 0 0;
}

.trunk.search-result .club-rating .layer-1 .title {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}

.trunk.search-result .club-rating .layer-2 {
  padding: 40px 0;
}

.trunk.search-result .club-rating .layer-2 #popup-ai-chart-1 {
  float: left;
  width: 60%;
  min-height: 200px;
  padding-right:15px;
  box-sizing: border-box;
}

.trunk.search-result .club-rating .layer-2 #popup-ai-chart-2 {
  float: left;
  width: 40%;
  min-height: 200px;
  box-sizing: border-box;
}

.trunk.search-result .club-rating .layer-3 {
  padding: 40px 15px 40px 0;
  background: #2d2c34;
}

.trunk.search-result .club-rating .layer-3 .chart-summary {
  float: left;
  width: 30%;
}

.trunk.search-result .club-rating .layer-3 .chart-summary span.label {
  display:inline-block;
  width:40%;
  text-align:right;
}

.trunk.search-result .club-rating .layer-3 .chart-summary span.value {
  display:inline-block;
  width:40%;
  text-align:center;
  font-size: 48px;
}

.trunk.search-result .club-rating .layer-3 .chart-summary .row-1 {
  margin-top: 30px;
}

.trunk.search-result .club-rating .layer-3 .chart-summary .row-1 span {
  vertical-align: middle;
}

.trunk.search-result .club-rating .layer-3 .chart-summary .row-1 span.label {
  color: #696679;
}

.trunk.search-result .club-rating .layer-3 .chart-summary .row-1 span.value {
  color: #E63A79;
}

.trunk.search-result .club-rating .layer-3 .chart-summary .row-2 {
}

.trunk.search-result .club-rating .layer-3 .chart-summary .row-2 span {
  vertical-align: middle;
}

.trunk.search-result .club-rating .layer-3 .chart-summary .row-2 span.label {
  color: #696679;
  font-size: 14px;
}

.trunk.search-result .club-rating .layer-3 .chart-summary .row-2 span.value {
  color: #F8E81C;
  font-size: 48px;
}

.trunk.search-result .club-rating .layer-3 .chart-container {
  float: left;
  width: 70%;
  position: relative;
  box-sizing: border-box;
}

.trunk.search-result .club-rating .layer-3 .chart-container #popup-ai-chart-3-legend {
  font-family: "Montserrat", serif;
  position: absolute;
  margin-top: 0px;
  margin-left: 0px;
  color: #00FF87;
  font-size: 10px;
}

.trunk.search-result .club-rating .layer-3 .chart-container #popup-ai-chart-3 {
  box-sizing: border-box;
  width: 100%;
  min-height: 200px;
}

.trunk.search-result .club-rating .layer-4 {
  padding: 40px 0;
}

.trunk.search-result .club-rating .layer-4 .chart-container {
  float: left;
  width: 60%;
  position: relative;
  box-sizing: border-box;
}

.trunk.search-result .club-rating .layer-4 .chart-container #popup-ai-chart-4-legend {
  font-family: "Montserrat", serif;
  position: absolute;
  width: 100%;
  margin-left: 110px;
  margin-top: 5px;
  color: #00FF87;
  font-size: 10px;
}

.trunk.search-result .club-rating .layer-4 .chart-container #popup-ai-chart-4 {
  box-sizing: border-box;
  /*width: 80%;*/
  margin: 0 auto;
  min-height: 150px;
}

.trunk.search-result .club-rating .layer-4 .chart-summary {
  float: left;
  width: 40%;
  min-height: 150px;
}

.trunk.search-result .club-rating .layer-4 .chart-summary .row-1 {
  margin-top: 30px;
  text-align: center;
}

.trunk.search-result .club-rating .layer-4 .chart-summary .row-1 .label {
  display: block;
  color: #696679;
  font-size: 14px;
}

.trunk.search-result .club-rating .layer-4 .chart-summary .row-1 .value {
  display: block;
  color: #E63A79;
  font-size: 75px;
}

.trunk.search-result .next-fixture {
  background: #2d2c34;
  padding: 30px;
  margin-top:30px;
}

.trunk.search-result .next-fixture .title-wrap .left {
  float: left;
}

.trunk.search-result .next-fixture .title-wrap .left .title {
  margin: 0;
  font-size: 20px;
  font-weight: bold;
  color: #fff;
}

.trunk.search-result .next-fixture .title-wrap .right {
  float: right;
}

.trunk.search-result .next-fixture .title-wrap .right .more {
  font-size: 14px;
  text-decoration: none;
  vertical-align: middle;
  color: #fff;
}

.trunk.search-result .next-fixture .title-wrap .right .more i {
  color: #E63A79;
  font-size: 14px;
  vertical-align: middle;
}

.trunk.search-result .next-fixture .title-wrap .right .more:hover {
  color: #E63A79;
}

.trunk.search-result .next-fixture .next-wrap {
  display:block;
  color:inherit;
  text-decoration:none;
}
.trunk.search-result .next-fixture .next-wrap .date {
  padding: 30px 0 10px;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}

.trunk.search-result .next-fixture .next-wrap .league {
  text-align: center;
  font-size: 14px;
  color: #666666;
}

.trunk.search-result .next-fixture .next-wrap .next-table {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 20px;
}

.trunk.search-result .next-fixture .next-wrap .next-table td {
  vertical-align: top;
}

.trunk.search-result .next-fixture .next-wrap .next-table td .wrap {
  text-align: center;
  display: inline-block;
}

.trunk.search-result .next-fixture .next-wrap .next-table td .wrap .badge-club {
  transform: scale(1.6);
  transform-origin: bottom center;
  margin-bottom: 10px;
}

.trunk.search-result .next-fixture .next-wrap .next-table td .wrap .club-name {
  font-size: 14px;
  color: #fff;
}

.trunk.search-result .next-fixture .next-wrap .next-table .team-a {
  text-align: right;
  padding-right: 20px;
}

.trunk.search-result .next-fixture .next-wrap .next-table .team-b {
  text-align: left;
  padding-left: 20px;
}

.trunk.search-result .next-fixture .next-wrap .next-table .time {
  border: 1px solid #00FF87;
  padding: 2px 8px;
  color: #00FF87;
  border-radius: 30px;
}

.trunk.search-result .ainews-list-wrap .title {
  margin: 0;
  padding-bottom: 10px;
}

.trunk.search-result .ainews-list-wrap .title span {
  display: inline-block;
  background: url("/img/title-ainews-white.png");
  background-repeat: no-repeat;
  background-size: contain;
  text-indent: -1000px;
  overflow: hidden;
  width: 106px;
  height: 20px;
  vertical-align: middle;
}

.trunk.search-result .heatmap-box-table {
  position:relative;
  background: #212026;
}
.trunk.search-result .heatmap-box-table:after {
  display:block;
  content:"";
  clear:both;
}
.trunk.search-result .heatmap-box-table > .match-wrapper {
  float:left;
  width:calc(100% - 75px);
}
.trunk.search-result .heatmap-box-table > .match-round-wrapper {
  position:absolute;
  top:0;
  right:0;
  width: 75px;
  height: 100%;
  background-color: #151418;
  overflow:hidden;
}
.trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll {
  position:absolute;
  width:100%;
  height:30px;
  line-height:30px;
  text-align:center;
  background-color:#151418;
  text-decoration:none !important;
}
.trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll:hover {
  background-color:#393742;
}
.trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll:before {
    display: block;
    font-family: "Entypo";
    text-align: center;
    content: ""
    line-height: 30px;
}

.trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll.up {top:0;}
.trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll.dn {bottom:0;}
.trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll.lt {display:none;}
.trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll.rt {display:none;}
.trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll.up:before {content:"\e75f";}
.trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll.dn:before {content:"\e75c";}
.trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll.lt:before {content:"\e75d";}
.trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll.rt:before {content:"\e75e";}
.trunk.search-result .heatmap-box-table > .match-round-wrapper .match-round {
  margin-top:31px;
  height:calc(100% - 62px);
  overflow:hidden;
}
.trunk.search-result .heatmap-box-table tr td.match-round-wrapper {
  width: 75px;
  height: 100%;
  background-color: #151418;
}

.trunk.search-result .heatmap-box-table .heatmap-tabs-ul {
  list-style: none;
  border: 0;
  margin: 0;
  padding: 0;
  width:75px;
}

.trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a {
  display: block;
  padding: 10px 8px;
  background: #151418;
  text-decoration: none;
  font-family: "Montserrat", serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  color: #454350;
  border-bottom: 1px solid #212026;
  box-sizing: border-box;
  text-align: center;
}
.trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a:after {
  display:block;
  content:"";
  clear:both;
}

.trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a:hover {
  background: #8B3AE8;
  color: #fff;
}

.trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a.is-active {
  background: #212026;
  color: #fff;
}

.trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a .round {
  float:left;
  display: block;
  width:calc(100% - 30px);
  text-align:center;
}

.trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a .status {
  float:right;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #26252c;
  text-align: center;
  font-weight: 400;
  color: #1c1b20;
  vertical-align: middle;
}

.trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a .status.on {
  text-indent: -999px;
  overflow: hidden;
  background: url("/img/onair-dot.gif") no-repeat center center;
  background-size: 24px;
}

.trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a .status.win {
  background: #2CD311;
}

.trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a .status.lose {
  background: #D20326;
}

.trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a .status.draw {
  background: #76766F;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-1 {
  margin: 10px 30px;
  border-bottom: 1px solid #393742;
  padding-top: 10px;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-1 .left {
  float: left;
  min-height: 50px;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-1 .left .title {
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-1 .left .title strong {
  color: #E63A79;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-1 .right {
  float: right;
  min-height: 50px;
  text-align: right;
  padding: 10px;
  font-family: "Montserrat", serif;
  font-size: 10px;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-1 .right .date {
  color: #cccccc;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-1 .right .stadium {
  color: #00FF87;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-2 {
  padding: 10px 30px;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .left {
  float: left;
  width: 50%;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .left .airating-table-1 {
  border-spacing: 0;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  margin-bottom: 10px;
  font-family: "Montserrat", serif;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .left .airating-table-1 tr:first-child td {
  font-weight: normal;
  font-size: 11px;
  color: #cccccc;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .left .airating-table-1 tr td {
  width: 25%;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 5px 0;
  border-right: 1px solid #514f5d;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .left .airating-table-1 tr td:first-child {
  border-left: 1px solid #514f5d;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .right {
  float: left;
  width: 50%;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .right .airating-table-2 {
  border-spacing: 0;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  font-family: "Montserrat", serif;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .right .airating-table-2 tr:first-child td {
  font-weight: normal;
  font-size: 11px;
  color: #cccccc;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .right .airating-table-2 tr td {
  width: 25%;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 5px 0;
  border-right: 1px solid #514f5d;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .right .airating-table-2 tr td.rating-t {
  color: #00FF87;
  font-weight: bold;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .right .airating-table-2 tr td.rating-c {
  color: #00FF87;
  font-weight: bold;
  font-size: 20px;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-3 {
  padding: 0 30px;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-3 .ai-heatmap-wrap {
  position: relative;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-3 .ai-heatmap-wrap #ai-heatmap-1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-3 .ai-heatmap-wrap #ai-heatmap-2 {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  border: 1px solid #cccccc;
  box-sizing: border-box;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-3 .ai-heatmap-wrap #ai-heatmap-2 .heatmap-canvas {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-3 .ai-heatmap-wrap .ai-heatmap-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("/img/mio-soccer-line.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-color: #212026;
  background-position: center center;
  box-sizing: border-box;
  z-index: 1;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 {
  padding: 0 30px 30px 30px;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-1 {
  width: calc(100% - 140px);
  float: left;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-1 .scrolled-tabs-wrap {
  padding-top: 10px;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-1 .half-half-wrap {
  height: 100%;
  padding-top: 10px;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half {
  width: 100%;
  height: 68px;
  display: table;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #E63A79;
  box-sizing: border-box;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half li {
  cursor: pointer;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 50%;
  font-size: 14px;
  border-right: 1px solid #E63A79;
  box-sizing: border-box;
  font-weight: bold;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half li:hover {
  background: #2d2c34;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half li:last-child {
  border-right: none;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half li.is-active {
  background: #E63A79;
  color: #212026;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-2 {
  width: 140px;
  float: left;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-2 .goal-marker-wrap {
  padding-left: 10px;
  padding-top: 10px;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-2 .goal-marker-wrap .goalpost-wrap {
  position: relative;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-2 .goal-marker-wrap .goalpost-wrap #goalpost-chart {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-2 .goal-marker-wrap .goalpost-wrap .goalpost-dis {
  position: absolute;
  left: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  text-decoration: none;
  font-size: 14px;
  z-index: 3;
  text-align: center;
}

.trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-2 .goal-marker-wrap .goalpost-wrap .goalpost-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url("/img/soccer-goalpost.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #212026;
  opacity: 0.5;
}

.trunk.search-result .heatmap-cone {
  margin: 0;
}

@media only screen and (max-width: 1599px) {
  .trunk.search-result .wrapper-left  {float:none;width:auto;height:auto;}
  .trunk.search-result .wrapper-right {float:none;width:auto;height:auto;margin-top:20px;}
  .trunk.search-result .club-info .club-table-wrap .left  {width:150px;}
  .trunk.search-result .club-info .club-table-wrap .right {width:calc(100% - 150px);}
  .trunk.search-result .club-info .club-table-wrap .right .club-table tr td:first-child {width:100px;}
  .trunk.search-result .next-fixture {margin-top:0;padding:20px 30px;}
  .trunk.search-result .next-fixture .next-wrap .date {padding-top:0;}
  .trunk.search-result .next-fixture .next-wrap .next-table {}
}

@media only screen and (min-width: 992px) and (max-width: 1599px) {
  .trunk.search-result .club-rating:after {display:block;content:"";clear:both;}
  .trunk.search-result .club-rating .layer-2 {float:left;width:40%;padding:20px    0 20px 20px;box-sizing:border-box;}
  .trunk.search-result .club-rating .layer-3 {float:left;width:60%;padding:20px 20px 10px 30px;box-sizing:border-box;background:none;}
  .trunk.search-result .club-rating .layer-4 {float:left;width:60%;padding:30px 20px 20px 30px;box-sizing:border-box;}
  .trunk.search-result .club-rating .layer-2 #popup-ai-chart-1 {float:none;width:auto;padding-right:0;}
  .trunk.search-result .club-rating .layer-2 #popup-ai-chart-2 {float:none;width:auto;margin-top:20px;}
  .trunk.search-result .ainews-list {padding-bottom:20px;}
  .trunk.search-result .ainews-list:after {display:block;content:"";clear:both;}
  .trunk.search-result .ainews-list .news-card {float:left;margin-left:10px;width:calc((100% - 20.1px)/3);height:205px;padding:15px 10px;}
  .trunk.search-result .ainews-list .news-card:first-child {margin-left:0;}
  .trunk.search-result .ainews-list .news-card .vss .left {float:none;text-align:center;}
  .trunk.search-result .ainews-list .news-card .vss .right {float:none;text-align:center;}
  .trunk.search-result .ainews-list .news-card .box {}
  .trunk.search-result .ainews-list .news-card .box h1 {margin-top:0;padding-top:0;}
  .trunk.search-result .ainews-list .news-card .box .desc {}
}

@media only screen and (max-width: 991px) {
  .trunk.search-result .club-rating .layer-2 {float:none;width:auto;padding:20px 10px;}
  .trunk.search-result .club-rating .layer-3 {float:none;width:auto;padding:20px 10px;background:#2d2c34;}
  .trunk.search-result .club-rating .layer-4 {float:none;width:auto;padding:20px 10px;}
}

@media only screen and (max-width: 767px) {
  .trunk.search-result .heatmap-box-table > .match-round-wrapper {position:relative;width:auto;height:65px;overflow:hidden;}
  .trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll {width:30px;height:100%;line-height:65px;}
  .trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll.up {display:none;}
  .trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll.dn {display:none;}
  .trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll.lt {display:block;left:0;}
  .trunk.search-result .heatmap-box-table > .match-round-wrapper .btn-scroll.rt {display:block;right:0;}
  .trunk.search-result .heatmap-box-table > .match-round-wrapper .match-round {margin:0 0 0 31px;width:calc(100% - 62px);height:100%;}
  .trunk.search-result .heatmap-box-table > .match-wrapper {float:none;width:auto;}
  .trunk.search-result .heatmap-box-table .heatmap-tabs-ul {white-space:nowrap;width:auto;}
  .trunk.search-result .heatmap-box-table .heatmap-tabs-ul:after {display:block;content:"";clear:both;}
  .trunk.search-result .heatmap-box-table .heatmap-tabs-ul > li {display:inline-block;}
  .trunk.search-result .heatmap-box-table .heatmap-tabs-ul > li:last-child {margin-right:17px;}
  .trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a {border:0;height:65px;}
  .trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a .round {float:none;display:block;width:auto;line-height:20px;}
  .trunk.search-result .heatmap-box-table .heatmap-tabs-ul li a .status {float:none;display:block;margin:0 auto;width:20px;height:20px;font-size:12px;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-1 .left {float:none;display:block;text-align:center;padding-bottom:0;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-1 .left .title {padding-bottom:0;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-1 .right {float:none;display:block;text-align:center;padding-top:0;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .left {float:none;width:auto;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .right {float:none;width:auto;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-2 .right .airating-table-2 tr td:first-child {border-left:1px solid #514f5d;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-4 {position:relative;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-1 {float:none;width:auto;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-1 .half-half-wrap {width:calc(100% - 140px);}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half {height:107px;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half li {}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-2 {position:absolute;right:30px;bottom:30px;}
}

@media only screen and (max-width: 575px) {
  .trunk.search-result .club-info .club-sum .left {float:none;text-align:center;}
  .trunk.search-result .club-info .club-sum .right {float:none;text-align:center;padding:20px 0 10px;}
  .trunk.search-result .club-info .club-table-wrap .left  {width:80px;}
  .trunk.search-result .club-info .club-table-wrap .right {width:calc(100% - 80px);}
  .trunk.search-result .club-info .club-table-wrap .right .club-table tr td:first-child {width:60px;}
  .trunk.search-result .club-rating .layer-1,
  .trunk.search-result .club-rating .layer-2,
  .trunk.search-result .club-rating .layer-3,
  .trunk.search-result .club-rating .layer-4 {padding:20px 0;}
  .trunk.search-result .club-rating .layer-3 {padding-right:15px;}
  .trunk.search-result .club-rating .layer-2 #popup-ai-chart-1 {float:none;width:auto;padding-right:0;min-height:150px;}
  .trunk.search-result .club-rating .layer-2 #popup-ai-chart-2 {float:none;width:auto;margin-top:20px;}
  .trunk.search-result .club-rating .layer-3 .chart-summary span.value {font-size:40px !important;}
  .trunk.search-result .club-rating .layer-3 .chart-container #popup-ai-chart-3 {min-height:150px;}
  .trunk.search-result .club-rating .layer-4 .chart-summary .row-1 .value {font-size:50px;}
  .trunk.search-result .club-rating .layer-4 .chart-container #popup-ai-chart-4 {margin-left:0;}
  .trunk.search-result .next-fixture .next-wrap {margin-top:15px;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-1 {margin-left:15px;margin-right:15px;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-2,
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-3,
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-4 {padding-left:15px;padding-right:15px;}
  .trunk.search-result .heatmap-box-table .heatmap-box .layer-4 .inner-2 {position:absolute;right:15px;}
  .trunk.search-result .ainews-list .news-card {padding:15px 10px;}
  .trunk.search-result .ainews-list .news-card .vss .left {float:none;text-align:center;}
  .trunk.search-result .ainews-list .news-card .vss .right {float:none;text-align:center;}
  .trunk.search-result .ainews-list .news-card .box h1 {margin-top:0;padding-top:0;}
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
}

.trunk.matchon-detail .title,
.trunk.matchon-attack-point .title {
  text-align: center;
}

.trunk.matchon-detail .title h2,
.trunk.matchon-attack-point .title h2 {
  color: #fff;
  font-size: 20px;
  border-top: 1px solid #666666;
  margin: 0;
  padding: 20px;
}
.trunk.matchon-detail .title h2.bd0,
.trunk.matchon-attack-point .title h2.bd0 {
  border-top:0;
}

.title-slide-wrap {position:relative;}
.title-slide-wrap h2 {color: #fff;font-size:20px;line-height:22px;min-height:22px;font-weight:bold;margin:0;padding:20px;white-space:nowrap;text-align:center;}
.title-slide-wrap      .title-center {position:absolute;left:100%;transform:translateX(-50%);}
.title-slide-wrap      .title-side {}
.title-slide-wrap.home .title-side {text-align:left ;padding-left :5px;}
.title-slide-wrap.away .title-side {text-align:right;padding-right:5px;}
.title-slide-wrap      .title-side > .tit {display:none;}
.title-slide-wrap      .title-side > i {display:inline-block;vertical-align:bottom;margin-bottom:-13px;font-style:normal;font-weight:normal;font-size:13px;line-height:13px;color:#00FF87;}
.title-slide-wrap.home .title-side > i {/*color:#D0021B*/ /*#E63A79*/;}
.title-slide-wrap.away .title-side > i {/*color:#4990E2*/ /*#8B3AE8*/;}

@media only screen and (max-width: 991px) {
  .title-slide-wrap      .title-center {display:none;}
  .title-slide-wrap      .title-side        {text-align:center !important;padding:20px !important;}
  .title-slide-wrap      .title-side > .tit {display:block;}
  .title-slide-wrap      .title-side > i    {display:block;margin:5px 0 0;}
}

.trunk.matchon-attack-point .gchart-box {
  text-align: center;
}

.trunk.matchon-attack-point .gchart-box .layer-2 {
  margin-top: 30px;
}

.trunk.matchon-attack-point .summary-graph-chart {
  margin: 70px auto;
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .trunk.matchon-attack-point .summary-graph-chart {margin:50px auto;padding:0 10px;}
}

.trunk.title .b-line {
  border-bottom: 1px solid #4d4d4d;
}

.gchart-wrap {
  display: inline-block;
  position: relative;
  width: 150px;
  height: auto;
  margin-left:30px;
}
.gchart-wrap:first-child {
  margin-left:0;
}

.gchart-wrap:before{
  display:block;
  content:"";
  padding-bottom:100%;
  height:0;
}

.gchart-wrap .chart-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.gchart-wrap .chart-value {
  font-family: "Montserrat", serif;
  position: absolute;
  top: 50%;
  left: 0;
  transform:translateY(-30%);
  width: 100%;
  text-align: center;
  vertical-align: middle;
  color: #E63A79;
  font-size: 30px;
}

.gchart-wrap .chart-value.up {
  top: 45%;
  color: #D0021B !important;
  font-size: 24px;
  background-image: url("/img/data-up.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 14px 15px;
  padding-top: 15px;
}

.gchart-wrap .chart-value.down {
  top: 45%;
  color: #4990E2 !important;
  font-size: 24px;
  background-image: url("/img/data-down.svg");
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 14px 15px;
  padding-top: 15px;
}

.gchart-wrap .chart-label {
  font-family: "Montserrat", serif;
  position: absolute;
  bottom: 8%;
  left: 0;
  text-align: center;
  color: #E63A79;
  width: 100%;
  font-size: 16px;
}

.gchart-wrap.small {
  width: 78px;
  margin-left:20px;
}
.gchart-wrap.small:first-child {
  margin-left:0;
}

.gchart-wrap.small .chart-value {
  font-size: 18px;
}

.gchart-wrap.small .chart-value.up {
  font-size: 12px;
}

.gchart-wrap.small .chart-value.down {
  font-size: 12px;
}

.gchart-wrap.small .chart-label {
  bottom:0;
  font-size: 12px;
}

.gchart-wrap.purple .chart-value {
  color: #8B3AE8;
}

.gchart-wrap.purple .chart-label {
  color: #8B3AE8;
}

@media only screen and (max-width: 1599px) {
  .gchart-wrap       { margin-left:0; }
  .gchart-wrap.small { margin-left:0; }
}

@media only screen and (max-width: 1199px) {
  .gchart-wrap { width:130px;margin-left:0; }
  .gchart-wrap .chart-value {font-size:26px;}
  .gchart-wrap .chart-label {font-size:14px;}
  .gchart-wrap.small { width: 70px;margin-left:0; }
  .gchart-wrap.small .chart-value {font-size:16px;}
  .gchart-wrap.small .chart-label {font-size:11px;}
}

@media only screen and (max-width: 991px) {
  .trunk.matchon-attack-point > .stem {position:relative;padding-bottom:150px;}
  .trunk.matchon-attack-point > .stem > .bine-4 > .cone {margin:0;}
  .trunk.matchon-attack-point > .stem > .bine-4.left   {width:50%;}
  .trunk.matchon-attack-point > .stem > .bine-4.right  {width:50%;}
  .trunk.matchon-attack-point > .stem > .bine-4.center {position:absolute;left:0;bottom:0;width:100%;margin:0;padding:0 100px 0;box-sizing: border-box;}
  .trunk.matchon-attack-point .summary-graph-chart {margin:0;}
  .trunk.matchon-attack-point .gchart-box .layer-2 {margin-top:0;}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  /*
  .gchart-wrap { width:110px;}
  .gchart-wrap .chart-value {font-size:23px;}
  .gchart-wrap .chart-label {font-size:13px;}
  */
  .gchart-wrap.small {width:55px;}
  .gchart-wrap.small .chart-value {font-size:13px;}
  .gchart-wrap.small .chart-value.up,
  .gchart-wrap.small .chart-value.down {font-size:11px;background-size:auto 10px;padding-top:10px;}
  .gchart-wrap.small .chart-label {font-size:10px;bottom:-5px}
}

@media only screen and (max-width: 575px) {
  .trunk.matchon-attack-point > .stem > .bine-4.left  .gchart-box {text-align:right;padding-right:8%;/*padding-left :35%;*/}
  .trunk.matchon-attack-point > .stem > .bine-4.right .gchart-box {text-align:left ;padding-left :8%;/*padding-right:35%;*/}
  .trunk.matchon-attack-point > .stem > .bine-4.center {padding:0 15% 0;}
  .gchart-wrap.small { width: 80px;margin-left:0; }
  .gchart-wrap.small .chart-value {font-size:17px;}
  .gchart-wrap.small .chart-label {font-size:12px;}
}

@media only screen and (max-width: 424px) {
  .gchart-wrap.small { width: 70px;margin-left:0; }
  .gchart-wrap.small .chart-value {font-size:16px;}
  .gchart-wrap.small .chart-label {font-size:11px;}
}

@media only screen and (max-width: 374px) {
  .trunk.matchon-attack-point > .stem > .bine-4.left  .gchart-box {/*padding-left :20px;*/}
  .trunk.matchon-attack-point > .stem > .bine-4.right .gchart-box {/*padding-right:20px;*/}
  .gchart-wrap { width:110px;}
  .gchart-wrap .chart-value {font-size:23px;}
  .gchart-wrap .chart-label {font-size:13px;}
  .gchart-wrap.small {width:55px;}
  .gchart-wrap.small .chart-value {font-size:13px;}
  .gchart-wrap.small .chart-value.up,
  .gchart-wrap.small .chart-value.down {font-size:11px;background-size:auto 10px;padding-top:10px;}
  .gchart-wrap.small .chart-label {font-size:10px;bottom:-5px}
}

.last-games-box div[class^="layer-"] .last-games-table tbody tr td {
  border-bottom: none;
}

.last-games-box .last-games-table {
  width: 100%;
  border-spacing: 0;
}

.last-games-box .last-games-table thead tr td {
  text-align: right;
}

.last-games-box .last-games-table thead tr td .label {
  font-family: "Montserrat", serif;
  font-size: 10px;
  font-weight: bold;
  color: #666666;
}

.last-games-box .last-games-table tbody tr {
  height: 36px;
}

.last-games-box .last-games-table tbody tr:hover td {
  background: #262626;
  cursor: pointer;
}

.last-games-box .last-games-table tbody tr td {
  color: #fff;
  background-color: #333333;
  text-align: center;
  border-bottom: 5px solid #1a191e;
}

.last-games-box .last-games-table tbody tr td:first-child {
  text-align: left;
  text-indent: 15px;
  position: relative;
  z-index: 1;
}

.last-games-box .last-games-table tbody tr td:first-child:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: .2;
  z-index: -1;
  background-image: url("/img/mio-list-left-dark.png");
  background-repeat: no-repeat;
  background-position: top left;
}

.last-games-box .last-games-table tbody tr td:last-child {
  text-indent: 15px;
  position: relative;
  z-index: 1;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
}

.last-games-box .last-games-table tbody tr td:last-child:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: .1;
  z-index: -1;
  background-image: url("/img/mio-list-right-light.png");
  background-repeat: no-repeat;
  background-position: top left;
}

.last-games-box .last-games-table tbody tr td .date {
  font-size: 14px;
}

.last-games-box .last-games-table tbody tr td .round {
  font-size: 14px;
  font-weight: bold;
  color: #999999;
  background: #09090a;
  padding: 2px 10px;
  border-radius: 24px;
}

.last-games-box .last-games-table tbody tr td .vs {
  font-size: 12px;
}

.last-games-box .last-games-table tbody tr td .vs strong {
  font-size: 14px;
  font-weight: bold;
}

.last-games-box .last-games-table tbody tr td .vs strong.home {
  color: #D0021B;
}

.last-games-box .last-games-table tbody tr td .vs strong.away {
  color: #4990E2;
}

.last-games-box .last-games-table tbody tr td .score {
  font-size: 14px;
  font-weight: bold;
}

.play-flow-box {
  padding: 20px 0;
  text-align: center;
}

.play-flow-box .play-flow-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.play-flow-box .play-flow-list li {
  display: inline-block;
  vertical-align: middle;
}

.play-flow-box .play-flow-list li .player-wrap {
  width: 60px;
  height: 60px;
  border: 1px solid #E63A79;
  border-radius: 60px;
  padding: 10px;
  background: #151418;
  overflow: hidden;
}

.play-flow-box .play-flow-list li .player-wrap .num {
  height: 30px;
  line-height: 30px;
  display: block;
  border-bottom: 1px solid #666666;
  font-family: "Montserrat", serif;
  font-size: 18px;
  font-weight: bold;
}

.play-flow-box .play-flow-list li .player-wrap .name {
  height: 30px;
  line-height: 30px;
  display: block;
  font-size: 14px;
  color: #fff;
}

.play-flow-box .play-flow-list li .action-wrap {
  width: 60px;
  height: 60px;
  padding: 10px;
  overflow: hidden;
  position: relative;
}

.play-flow-box .play-flow-list li .action-wrap:before {
  position: absolute;
  content: '';
  top: calc(50% - 1px);
  right: 1px;
  width: 100%;
  height: 0;
  border-top: 2px solid #E63A79;
}

.play-flow-box .play-flow-list li .action-wrap:after {
  position: absolute;
  content: '';
  top: calc(50% - 6px);
  right: 0;
  width: 0;
  height: 0;
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
  border-left: 6px solid #E63A79;
}

.play-flow-box .play-flow-list li .action-wrap .move {
  height: 30px;
  line-height: 30px;
  display: block;
  color: #fff;
  font-size: 14px;
}

.play-flow-box .play-flow-list li .action-wrap .act {
  height: 30px;
  line-height: 30px;
  display: block;
  font-size: 16px;
}

.play-flow-box .play-flow-list li .goal-wrap .goal .soccer-ball {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("/img/soccer-ball.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
}

@media only screen and (max-width: 575px) {
  .play-flow-box .play-flow-list li .player-wrap {
    width: 40px;
    height: 40px;
    padding: 5px;
  }
  .play-flow-box .play-flow-list li .player-wrap .num {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
  .play-flow-box .play-flow-list li .player-wrap .name {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
  .play-flow-box .play-flow-list li .action-wrap {
    width: 40px;
    height: 40px;
  }
  .play-flow-box .play-flow-list li .action-wrap .move {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
  .play-flow-box .play-flow-list li .action-wrap .act {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .play-flow-box .play-flow-list li .player-wrap {
    width: 40px;
    height: 40px;
    padding: 5px;
  }
  .play-flow-box .play-flow-list li .player-wrap .num {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
  .play-flow-box .play-flow-list li .player-wrap .name {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
  .play-flow-box .play-flow-list li .action-wrap {
    width: 40px;
    height: 40px;
  }
  .play-flow-box .play-flow-list li .action-wrap .move {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
  .play-flow-box .play-flow-list li .action-wrap .act {
    height: 20px;
    line-height: 20px;
    font-size: 12px;
  }
}

.player-rating-tab-box .player-tabs {
  border-spacing: 0;
  width: 100%;
}

.player-rating-tab-box .player-tabs tr td {
  width: 25%;
  text-align: center;
  color: #fff;
}
.player-rating-tab-box .player-tabs tr td.itm {position:relative;cursor:pointer;}

.player-rating-tab-box .player-tabs tr td.itm.is-active:after {
  position: absolute;
  content: '';
  bottom: -10px;
  left: 50%;
  transform:translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #E63A79;
}

.player-rating-tab-box .player-tabs tr td .rank {
  font-size: 14px;
  font-weight: bold;
  padding: 2px 12px;
  border-radius: 20px;
  color: #212026;
  background: #6e6e6e;
}
.player-rating-tab-box .player-tabs tr td.is-active .rank {
  background:#fff;
}

.player-rating-tab-box .player-tabs tr td .point {
  display: block;
  font-size: 36px;
  font-family: "Montserrat",serif;
}

.player-rating-tab-box .player-tabs tr td .name {
  font-size: 16px;
}

.player-rating-tab-box .player-tabview {
  padding: 10px;
  background: #E63A79;
  width: 100%;
  position: relative;
  margin-top: 10px;
}
/*
.player-rating-tab-box .player-tabview:before {
  position: absolute;
  content: '';
  top: -10px;
  left: 11%;
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #E63A79;
}
*/

.player-rating-tab-box .player-tabview table {
  width: 100%;
  border-spacing: 0;
}

.player-rating-tab-box .player-tabview table tr.itm {display:none;}
.player-rating-tab-box .player-tabview table tr.itm.is-active {display:table-row;}


.player-rating-tab-box .player-tabview table tr:first-child td {
  color: #212026;
  font-size: 14px;
}

.player-rating-tab-box .player-tabview table tr td {
  text-align: center;
  font-size: 18px;
  color: #fff;
  padding: 5px 0;
}

@media only screen and (max-width: 575px) {
  .player-rating-tab-box .player-tabs tr td .rank {
    font-size: 12px;
    /*padding: 0;*/
    color: #4d4d4d;
    background: none;
  }
  .player-rating-tab-box .player-tabs tr td .point {
    font-size: 16px;
    padding: 10px 0;
  }
  .player-rating-tab-box .player-tabs tr td .name {
    font-size: 14px;
  }
  .player-rating-tab-box .player-tabview {
    padding: 0;
  }
  .player-rating-tab-box .player-tabview table tr:first-child td {
    font-size: 12px;
  }
  .player-rating-tab-box .player-tabview table tr td {
    font-size: 14px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .player-rating-tab-box .player-tabs tr td .rank {
    font-size: 12px;
    /*padding: 0;*/
    color: #4d4d4d;
    background: none;
  }
  .player-rating-tab-box .player-tabs tr td .point {
    font-size: 16px;
    padding: 10px 0;
  }
  .player-rating-tab-box .player-tabs tr td .name {
    font-size: 14px;
  }
  .player-rating-tab-box .player-tabview {
    padding: 0;
  }
  .player-rating-tab-box .player-tabview table tr:first-child td {
    font-size: 12px;
  }
  .player-rating-tab-box .player-tabview table tr td {
    font-size: 14px;
  }
}

@media only screen and (max-width: 575px) {
  .last-games-box .last-games-table tbody tr td:first-child {
    text-indent: 5px;
  }
  .last-games-box .last-games-table tbody tr td .date {
    font-size: 12px !important;
  }
  .last-games-box .last-games-table tbody tr td .round {
    font-size: 12px;
    padding: 0 6px;
  }
  .last-games-box .last-games-table tbody tr td .vs {
    font-size: 11px;
  }
  .last-games-box .last-games-table tbody tr td .vs strong {
    font-size: 12px;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .last-games-box .last-games-table tbody tr td:first-child {
    text-indent: 5px;
  }
  .last-games-box .last-games-table tbody tr td .date {
    font-size: 12px !important;
  }
  .last-games-box .last-games-table tbody tr td .round {
    font-size: 12px;
    padding: 0 6px;
  }
  .last-games-box .last-games-table tbody tr td .vs {
    font-size: 11px;
  }
  .last-games-box .last-games-table tbody tr td .vs strong {
    font-size: 12px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .last-games-box .last-games-table tbody tr td:first-child {
    text-indent: 10px;
  }
  .last-games-box .last-games-table tbody tr td .date {
    font-size: 12px !important;
  }
  .last-games-box .last-games-table tbody tr td .round {
    font-size: 12px;
    padding: 0 6px;
  }
  .last-games-box .last-games-table tbody tr td .vs {
    font-size: 11px;
  }
  .last-games-box .last-games-table tbody tr td .vs strong {
    font-size: 12px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .last-games-box {padding:0 100px;}
}

/**
 * Footer
 */
.footer {
  font-family: "Montserrat", serif;
  font-size: 10px;
  background: #09090a;
  padding: 30px 0;
}

.footer .footer-copy .footer-copy-name {
  color: #E63A79;
  font-weight: bold;
}

.footer .footer-copy .footer-copy-links {
  padding: 5px 0;
}

.footer .footer-copy .footer-copy-links > span {display:inline-block;}

.footer .footer-copy .footer-copy-links a {
  color: #fff;
  text-decoration: none;
}

.footer .footer-copy .footer-copy-links a:hover {
  color: #E63A79;
  text-decoration: underline;
}

.footer .footer-copy .footer-copy-links .fr {
  color: #514f5d;
  padding: 0 10px;
  font-style:normal;
}

.footer .footer-copy .footer-copy-text {
  color: #fff;
  padding: 2px 0;
}

.footer .footer-logo {
  text-align: right;
  padding-top: 15px;
}

.footer .footer-logo img {
  vertical-align: middle;
}

.footer .footer-logo .logo-symbolic {
  width: 35px;
  height: 35px;
}

.footer .footer-logo .logo-typo {
  width: 100px;
  height: 15px;
  margin: 0 5px;
}

@media only screen and (max-width: 767px) {
    .footer .footer-copy {float:none;}
    .footer .footer-logo {float:none;text-align:left;}
}

/**
 * Unit...
 */
.badge-club {
  background: url("/img/badge-club-100.png?ver=20091101") no-repeat left top;
  background-size: 300px;
  width: 30px;
  height: 30px;
  display: inline-block;
  vertical-align: middle;
  background-position-x: 30px;
  background-position-y: 30px;
}

.badge-club.ARS { background-position-x:  -30px; background-position-y:   0px; }
.badge-club.AVL { background-position-x:  -60px; background-position-y:   0px; }
.badge-club.BHA { background-position-x:  -90px; background-position-y:   0px; }
.badge-club.BOU { background-position-x:    0px; background-position-y:   0px; }
.badge-club.BUR { background-position-x: -120px; background-position-y:   0px; }
.badge-club.CHE { background-position-x: -150px; background-position-y:   0px; }
.badge-club.CRY { background-position-x: -180px; background-position-y:   0px; }
.badge-club.EVE { background-position-x: -210px; background-position-y:   0px; }
.badge-club.LEI { background-position-x: -240px; background-position-y:   0px; }
.badge-club.LIV { background-position-x: -270px; background-position-y:   0px; }
.badge-club.MCI { background-position-x:    0px; background-position-y: -30px; }
.badge-club.MUN { background-position-x:  -30px; background-position-y: -30px; }
.badge-club.NEW { background-position-x:  -60px; background-position-y: -30px; }
.badge-club.NOR { background-position-x:  -90px; background-position-y: -30px; }
.badge-club.SHU { background-position-x: -120px; background-position-y: -30px; }
.badge-club.SOU { background-position-x: -150px; background-position-y: -30px; }
.badge-club.TOT { background-position-x: -180px; background-position-y: -30px; }
.badge-club.WAT { background-position-x: -210px; background-position-y: -30px; }
.badge-club.WHU { background-position-x: -240px; background-position-y: -30px; }
.badge-club.WOL { background-position-x: -270px; background-position-y: -30px; }
.badge-club.FUL { background-position-x:    0px; background-position-y: -60px; }
.badge-club.CAR { background-position-x:  -30px; background-position-y: -60px; }
.badge-club.HUD { background-position-x:  -60px; background-position-y: -60px; }
.badge-club.WBA { background-position-x:  -90px; background-position-y: -60px; }
.badge-club.LEE { background-position-x: -120px; background-position-y: -60px; }

.loading-wrap {
  width: 100%;
  text-align: center;
  padding: 50px 0;
}

.loading-wrap .loading-mark {
  display:inline-block;
  min-width: 130px;
  padding: 10px 15px;
  color: #212026;
  background: #00FF87;
  border-radius: 30px;
}
.loading-wrap .loading-mark.more {
  font-size: 14px;
  font-weight:bold;
  cursor:pointer;
}
.loading-wrap .loading-mark.more .icon-dot-3 {
  display:none;
}

.title-box {
  position:relative;
  text-align: center;
  padding-top: 60px;
  padding-bottom: 20px;
}

.title-box.left {
  text-align: left;
}

.title-box.right {
  text-align: right;
}

.title-box.subtit {
  padding-top: 20px;
}

.title-box h1 {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  padding: 5px 0;
}

.title-box h2 {
  color: #fff;
  line-height:22px;
  font-size: 20px;
  font-weight: bold;
  margin: 0;
  padding: 0;
  padding: 5px 0;
}

.title-box .tit-date {
  font-family: "Montserrat", serif;
  font-size: 12px;
  color: #00FF87;
}

.title-box .tit-round {
  font-size: 20px;
  color: #fff;
  padding: 10px 0;
}

.title-box .tit-round strong {
  color: #E63A79;
}
/* Main D-Days & Event ????¼êµ¡???????????†ë’©???«ë¹????°ê·™?‹æº?.title-box.subtit .btn-more {
  position:absolute;
  top:0;
  right:0;
  line-height:22px;
  padding:25px 0 0;
}
*/
.btn-more {
  text-decoration: none;
  font-family: "Montserrat", serif;
  font-size: 12px;
}

.btn-more:hover {
  color: #E63A79;
}

.btn-more i {
  color: #E63A79;
}

.news-bine {
  border-left: 1px solid #393742;
  min-height: 120px;
  box-sizing: border-box;
}

.news-bine.first {
  border-left: none;
}

.news-box a {
  text-decoration: none;
}

.news-box a:hover .layer-2 {
  color: #E63A79;
}

.news-box a:hover .layer-3 {
  color: #fff;
}

.news-box a .layer-1 {
  font-family: "Montserrat", serif;
  font-size: 10px;
  padding-top: 5px;
  padding-bottom: 10px;
}

.news-box a .layer-1 span.round {
  color: #00FF87;
  font-weight: bold;
}

.news-box a .layer-1 span.date {
  color: #cccccc;
}

.news-box a .layer-1 span.new {
  color: #E63A79;
  font-style: italic;
  font-weight: bold;
}

.news-box a .layer-2 {
  font-size: 18px;
  padding-bottom: 10px;
  font-weight: bold;
}

.news-box a .layer-3 {
  font-size: 15px;
  padding-bottom: 10px;
  color: #666666;
}

.hr {
  font-size: 0;
  border-bottom: 1px dashed #4d4d4d;
}

.more-box {
  padding: 10px 0;
  text-align: center;
}

.more-box.left {
  text-align: left;
}

.more-box.right {
  text-align: right;
}

.title-box-sub {
  text-align: center;
  padding-top: 60px;
  padding-bottom: 40px;
}

.title-box-sub.left {
  text-align: left;
}

.title-box-sub.right {
  text-align: right;
}

.title-box-sub h1 {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  margin: 0;
  padding: 5px 20px;
  display: inline;
  vertical-align: middle;
}

.title-box-sub .dir-btn {
  vertical-align: middle;
  font-size: 30px;
}

.title-box-sub .right {
  text-align: right;
}

.title-box-result {
  text-align: center;
  padding-top: 60px;
  padding-bottom: 40px;
}

.title-box-result .title {
  color: #fff;
  font-size: 30px;
}

.title-box-result .title span {
  version: middle;
}

.title-box-result .title span.keyword {
  color: #E63A79;
}

.title-box-result .desc {
  padding: 10px 0;
  font-size: 18px;
  color: #fff;
}

.title-box-news {
  text-align: center;
  padding-top: 60px;
  padding-bottom: 20px;
}

.title-box-news h1 {
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  margin: 0;
  padding: 5px 20px;
  vertical-align: middle;
  display: inline-block;
  background-image: url("/img/title-ainews-white.png");
  background-repeat: no-repeat;
  background-size: 160px 30px;
  background-position: center center;
  overflow: hidden;
  width: 200px;
  text-indent: -10000px;
}

.title-box-news .dir-btn {
  vertical-align: middle;
  font-size: 30px;
}

.title-box-news .left {
  text-align: left;
}

.title-box-news .right {
  text-align: right;
  position: relative;
}

.title-box-news .right .round {
  position: absolute;
  top: 5px;
  right: 0;
  font-size: 30px;
  font-weight: bold;
  color: #fff;
}

@media only screen and (max-width: 767px) {
    
  .title-box-news {
    padding-top: 30px;
    padding-bottom: 30px;
  }
  .title-box-news h1 {
    /* width: 100px; */
    background-size: auto 30px;
  }
  .title-box-news .left {
    text-align: center;
  }
  .title-box-news .right {
    margin-top:15px;
    text-align: center;
  }
  .title-box-news .right .round {
    position: initial;
    font-size: 24px;
  }
}

@media only screen and (max-width: 575px) {
  .title-box-news .left {
    text-align: center;
  }
  .title-box-news .right {
    text-align: center;
  }
  .title-box-news .right .round {
    position: initial;
    font-size: 24px;
  }
}

.title-box-vs {
  text-align: center;
  padding: 10px 0;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
  color: #fff;
  position: relative;
}

.title-box-vs:after {
  position: absolute;
  content: '';
  border-bottom: 1px solid #999999;
  width: 100%;
  left: 0;
  bottom: -5px;
}

.title-box-vs .club {
  font-size: 16px;
  font-weight: bold;
}

.title-box-vs .score {
  font-size: 16px;
}

.title-box-vs .score strong {
  color: #E63A79;
}

.title-box-vs .left {
  text-align: left;
}

.title-box-vs .left .date {
  margin-left: 10px;
  color: #999999;
}

.title-box-vs .right {
  text-align: right;
}

.title-box-vs .right .location {
  margin-right: 10px;
  color: #999999;
}

@media only screen and (max-width: 767px) {
  .title-box-vs {line-height:20px;}
  .title-box-vs .left {
    text-align: center !important;
  }
  .title-box-vs .left span {
    margin: 0 !important;
  }
  .title-box-vs .right {
    text-align: center !important;
  }
  .title-box-vs .right span {
    margin: 0 !important;
  }
}

.ranking-list {
  position: relative;
  min-height: 500px;
}

.ranking-list ol {
  counter-reset: li;
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
}

.ranking-list ol li {
  position: relative;
  z-index: 1;
  margin-bottom: 4px;
  counter-increment: li;
  height: 36px;
  line-height: 36px;
  font-size: 18px;
  font-weight: bold;
}

.ranking-list ol li:hover {
  cursor: pointer;
}

.ranking-list ol li:hover .list-bg {
  opacity: 0.7;
}

.ranking-list ol li.active:before {
  content: '';
}

.ranking-list ol li table {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 36px;
  line-height: normal;
  color: #fff;
  border-spacing: 0;
}

.ranking-list ol li table tr td {
  padding: 0;
}

.ranking-list ol li table tr td.cell-1 {
  width: 70px;
}

.ranking-list ol li table tr td.cell-2 span {
  vertical-align: middle;
  display: inline-block;
}

.ranking-list ol li table tr td.cell-2 .name {
  width: 65%;
}

.ranking-list ol li table tr td.cell-2 .club {
  display:inline-block;
  width:45px;
  text-align:center;
  text-indent:0 !important;
  font-size: 14px;
  padding: 3px 0;
  border-radius: 36px;
  background: #fff;
  color: #8B3AE8;
  font-weight: normal;
}

.ranking-list ol li table tr td.cell-2 .position {
  display:inline-block;
  width:23px;
  text-align:center;
  text-indent:0 !important;
  font-size: 14px;
  font-weight: normal;
}

.ranking-list ol li table tr td.cell-3 {
  font-family: "Montserrat", serif;
  font-weight: 400;
  width: 120px;
  text-align: center;
}

.ranking-list ol li.spot-list table tr td.cell-2 .club {
  color: #E63A79;
  -webkit-transition:color 1s;
  transition: color 1s;
}

.ranking-list ol li.spot-list .list-bg {
  background: #E63A79;
  -webkit-transition:background-color 1s ease;
  transition: background-color 1s ease;
}

.ranking-list ol li.first-list {
  height: 140px;
  background: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background: -moz-linear-gradient(-90deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='rgba(0, 0, 0, 0)', endColorstr='rgba(0, 0, 0, 0.2)', GradientType=0 );
}

.ranking-list ol li.first-list:before {
  padding-top: 104px;
  font-size: 30px;
  color: #00FF87;
}

.ranking-list ol li.first-list table {
  height: 140px;
}

.ranking-list ol li.first-list table tr td {
  vertical-align: bottom;
}

.ranking-list ol li.first-list table tr td.cell-1 .uniform-box {
  width: 200px;
  height: 120px;
}

.ranking-list ol li.first-list table tr td.cell-2 span.name {
  display: block;
  padding: 5px 0;
  font-size: 24px;
  color: #00FF87;
}

.ranking-list ol li.first-list table tr td.cell-2 span.club {
  color: #212026;
  margin-bottom: 10px;
}

.ranking-list ol li.first-list table tr td.cell-2 span.position {
  margin-bottom: 10px;
}

.ranking-list ol li.first-list table tr td.cell-3 {
  font-size: 50px;
  color: #00FF87;
}

.ranking-list ol li.first-list .list-bg {
  display: none;
}

.ranking-list ol li:before {
  display: block;
  content: counter(li);
  width: 45px;
  height: 36px;
  color: #fff;
  text-align: center;
}

.ranking-list ol li .list-bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  height: 36px;
  width: 100%;
  font-size: 18px;
  background: #8B3AE8;
  color: #fff;
  transition: background-color 1s ease;
}

.ranking-list ol li .list-bg:before {
  display: block;
  float: left;
  content: "";
  background-image: url("/img/mio-list-left-dark.png");
  background-repeat: no-repeat;
  background-position: top right;
  height: 36px;
  width: 60px;
  z-index: -1;
  opacity: 0.2;
}

.ranking-list ol li .list-bg:after {
  display: block;
  float: right;
  content: "";
  background-image: url("/img/mio-list-right-light.png");
  background-repeat: no-repeat;
  background-position: top left;
  height: 36px;
  width: 125px;
  z-index: -1;
  opacity: 0.2;
}

.round-top-wrap {
  position: relative;
  width: 100%;
  border: 1px solid transparent;
  box-sizing: border-box;
  min-height: 500px;
  overflow: hidden;
}

.round-top-wrap .round-top-info {
  position: absolute;
  padding: 20px 10px;
  width: 100%;
  z-index: 100;
}

.round-top-wrap .round-top-info .info-round {
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  font-family: "Montserrat", serif;
  font-size: 30px;
  font-weight: bold;
  border-radius: 50%;
  min-width: 76px;
  min-height: 76px;
  line-height: 76px;
  background: #00FF87;
  color: #212026;
  margin-right: 20px;
}

.round-top-wrap .round-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.round-top-wrap .round-top .round-top-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.round-top-wrap .round-top .round-top-player {
  padding: 130px 0;
  text-align: center;
  position: absolute;
  width: 100%;
}

.round-top-wrap .round-top .round-top-player .player-point {
  font-family: "Montserrat", serif;
  font-size: 100px;
  color: #fff;
  font-weight: 100;
}

.round-top-wrap .round-top .round-top-player .player-point .digit {
  font-size: 80px;
}

.round-top-wrap .round-top .round-top-player .player-ranking {
  display: inline-block;
  text-align: center;
  font-family: "Montserrat", serif;
  font-size: 30px;
  font-weight: bold;
  border-radius: 50%;
  min-width: 40px;
  min-height: 40px;
  line-height: 40px;
  background: #00FF87;
  color: #212026;
}

.round-top-wrap .round-top .round-top-player .player-name {
  font-size: 30px;
  color: #00FF87;
}

.round-top-wrap .round-top .round-top-player .player-club {
  font-size: 20px;
  color: #00FF87;
  padding: 10px 0;
}

.round-top-wrap .round-top .round-top-bg {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 500px;
  background-image: url("/img/soccer-bg-01.gif");
  background-size: contain;
  background-position: bottom center;
  background-repeat: no-repeat;
  opacity: 0.6;
  -webkit-animation: action 1s infinite alternate;
  -moz-animation: action 1s infinite alternate;
  -ms-animation: action 1s infinite alternate;
  -o-animation: action 1s infinite alternate;
  animation: action 1s infinite alternate;
}

@-webkit-keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

@-moz-keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

@-ms-keyframes action {
  .round-top-wrap .round-top .round-top-bg 0% {
    transform: translateY(0);
  }
  .round-top-wrap .round-top .round-top-bg 100% {
    transform: translateY(-10px);
  }
}

@-o-keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

@keyframes action {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}

.round-top-wrap .round-top .round-top-bg.soccer-mf,
.round-top-wrap .round-top .round-top-bg.soccer-b1 {
  background-image: url("/img/soccer-bg-01.gif");
  background-position: bottom center;
}

.round-top-wrap .round-top .round-top-bg.soccer-fw,
.round-top-wrap .round-top .round-top-bg.soccer-b2 {
  background-image: url("/img/soccer-bg-02.gif");
  background-position: bottom left;
}

.round-top-wrap .round-top .round-top-bg.soccer-df,,
.round-top-wrap .round-top .round-top-bg.soccer-b3 {
  background-image: url("/img/soccer-bg-03.gif");
  background-position: bottom right;
}

.round-top-wrap .round-top .round-top-bg.soccer-gk,
.round-top-wrap .round-top .round-top-bg.soccer-b4 {
  background-image: url("/img/soccer-bg-04.gif");
  background-position: bottom center;
}

.onair {
  position: relative;
  font-family: "Montserrat", serif;
  display: inline-block;
  width: 66px;
  height: 24px;
  border-radius: 20px;
  background-color: #111;
  background-image: url("/img/onair-text-off.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  vertical-align: middle;
}
.onair.on {
  border: 1px solid #D0021B;
  background-color: black;
  background-image: url("/img/onair-text.png");
  -webkit-animation: 1s blink-border ease infinite;
  -moz-animation: 1s blink-border ease infinite;
  -ms-animation: 1s blink-border ease infinite;
  -o-animation: 1s blink-border ease infinite;
  animation: 1s blink-border ease infinite;
}

@-webkit-keyframes blink-border {
  from, to {
    border-color: #212026;
  }
  50% {
    border-color: #D0021B;
  }
}

@-moz-keyframes blink-border {
  from, to {
    border-color: #212026;
  }
  50% {
    border-color: #D0021B;
  }
}

@-ms-keyframes blink-border {
  .onair from, .onair to {
    border-color: #212026;
  }
  .onair 50% {
    border-color: #D0021B;
  }
}

@-o-keyframes blink-border {
  from, to {
    border-color: #212026;
  }
  50% {
    border-color: #D0021B;
  }
}

@keyframes blink-border {
  from, to {
    border-color: #212026;
  }
  50% {
    border-color: #D0021B;
  }
}

.onair.on:before {
  position: absolute;
  left: 0;
  top: 0;
  width: 66px;
  height: 24px;
  content: '';
  background-image: url("/img/onair-red-dot.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: left center;
  -webkit-animation: 1s blink ease infinite;
  -moz-animation: 1s blink ease infinite;
  -ms-animation: 1s blink ease infinite;
  -o-animation: 1s blink ease infinite;
  animation: 1s blink ease infinite;
}

@-webkit-keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-moz-keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@-ms-keyframes blink {
  .onair:before from, .onair:before to {
    opacity: 0;
  }
  .onair:before 50% {
    opacity: 1;
  }
}

@-o-keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

@keyframes blink {
  from, to {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
}

/**
 * POP Page
 */
#pop-page {
  z-index: 1001;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(20, 20, 20, 0.95);
  visibility: hidden;
  opacity: 0;
  box-sizing: border-box;
  overflow-y: scroll;
  overflow-x: hidden;
  transition: opacity 0.5s;
}

#pop-page.is-active {
  visibility: visible;
  opacity: 1;
}

#pop-page.loading {
  visibility: visible;
  opacity: 1;
  background: rgba(20, 20, 20, 0.5);
  overflow-y: hidden;
  transition: opacity 0.5s;
}

#pop-page .loading {
  position: absolute;
  width: 32px;
  height: 32px;
  background: url("/img/loading.svg") no-repeat center center;
  top: 50%;
  left: 50%;
}

#pop-page #pop-content .pop-title .stem {
  background: #E63A79;
  height: 57px;
  padding:0 15px;
  box-sizing: border-box;
  overflow:hidden;
}
#pop-page #pop-content .pop-title .stem:after {
  display:block;
  content:"";
  clear:both;
}

#pop-page #pop-content .pop-title .stem .pop-left {
  float:left;
  text-align: left;
}

#pop-page #pop-content .pop-title .stem .pop-left .pop-title-box {
  line-height: 57px;
}

#pop-page #pop-content .pop-title .stem .pop-left .pop-title-box .ico {
  vertical-align: middle;
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  transform: scale(1.5);
}

#pop-page #pop-content .pop-title .stem .pop-left .pop-title-box .text {
  vertical-align: middle;
  font-size: 30px;
  color: #fff;
  padding-left: 10px;
}

#pop-page #pop-content .pop-title .stem .pop-right {
  float:right;
  text-align: right;
}

#pop-page #pop-content .pop-title .stem .pop-right .btn-close-pop {
  display: inline-block;
  width: 57px;
  height: 57px;
  background: url("/img/pop-close-1.png") no-repeat center center;
  background-size: cover;
}

#pop-page #pop-content .pop-title .stem .pop-right .btn-close-pop:hover {
  background: url("/img/pop-close-2.png") no-repeat center center;
  background-size: cover;
}

#pop-page #pop-content .pop-title .stem .pop-right .btn-close-pop span {
  display: none;
}

#pop-page #pop-content .pop-bar .stem {
  height: 48px;
  line-height: 48px;
  background: #610c2b;
  color: #fff;
  padding:0 15px;
  box-sizing: border-box;
}
#pop-page #pop-content .pop-bar .stem:after {
  display:block;
  content:"";
  clear:both;
}

#pop-page #pop-content .pop-bar .stem .pop-left {
  float:left;
  text-align: left;
}

#pop-page #pop-content .pop-bar .stem .pop-left .pop-rank-box {
  font-family: "Montserrat", serif;
  font-size: 14px;
}

#pop-page #pop-content .pop-bar .stem .pop-left .pop-rank-box .all {
  font-weight: bold;
}

#pop-page #pop-content .pop-bar .stem .pop-right {
  float:right;
  text-align: right;
}

#pop-page #pop-content .pop-content .stem {
  background: #28272e;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap {
  display: table;
  width: 100%;
  vertical-align: top;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left {
  display: table-cell;
  float: none;
  background: #28272e;
  vertical-align: top;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-1 {
  padding: 10px;
  background: #34333c;
  font-size: 18px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-1 .title {
  color: #fff;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-1 .round-all {
  color: #fff;
  padding: 0 10px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-1 .round-all strong {
  color: #E63A79;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-1 .round {
  border-radius: 24px;
  background: #00FF87;
  padding: 2px 6px;
  color: #212026;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 {
  background: #393742;
  padding: 20px 10px;
  color: #fff;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform {
  width: 40%;
  float: left;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform .uniform-box {
  width: 90%;
  height: 160px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform .uniform-box .uniform-text {
  bottom: 20px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform .uniform-box .uniform-text .club .club-wrap {
  font-size: 14px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform .uniform-box .uniform-text .name {
  font-size: 14px;
  padding: 2px 0;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform .uniform-box .uniform-text .no {
  font-size: 36px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-info-table {
  margin: 0;
  padding: 0;
  border-spacing: 0;
  width: 60%;
  float: left;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-info-table tr td {
  padding: 5px;
  border-bottom: 1px solid #514f5d;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-info-table tr td:first-child {
  width: 35%;
  color: #827f93;
  text-align: right;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-info-table tr td:last-child {
  /*width: 65%;*/
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-3 {
  padding: 20px 0 0 30px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-3 .title {
  font-size: 22px;
  font-weight: bold;
  color: #fff;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 {
  padding: 30px 15px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 #popup-ai-chart-1 {
  float: left;
  width: 60%;
  min-height: 200px;
  padding-right:15px;
  box-sizing: border-box;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 #popup-ai-chart-2 {
  float: left;
  width: 40%;
  min-height: 200px;
  box-sizing: border-box;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 {
  padding: 30px 15px;
  background: #2d2c34;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-summary {
  float: left;
  width: 30%;
  /*min-height: 200px;*/
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 span.label {
  display:inline-block;
  width:40%;
  text-align:right;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 span.value {
  display:inline-block;
  width:40%;
  text-align:center;
  font-size: 48px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-summary .row-1 {
  margin-top: 30px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-summary .row-1 span {
  vertical-align: middle;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-summary .row-1 span.label {
  color: #696679;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-summary .row-1 span.value {
  color: #E63A79;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-summary .row-2 {
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-summary .row-2 span {
  vertical-align: middle;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-summary .row-2 span.label {
  color: #696679;
  font-size: 14px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-summary .row-2 span.value {
  color: #F8E81C;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-container {
  float: left;
  width: 70%;
  /*min-height: 200px;*/
  position: relative;
  box-sizing: border-box;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-container #popup-ai-chart-3-legend {
  font-family: "Montserrat", serif;
  position: absolute;
  /*
  margin-top: 40px;
  margin-left: 40px;
  */
  color: #00FF87;
  font-size: 10px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-container #popup-ai-chart-3 {
  box-sizing: border-box;
  width: 100%;
  min-height: 200px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 {
  padding: 30px 15px 30px 30px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 .chart-container {
  float: left;
  width: 60%;
  position: relative;
  box-sizing: border-box;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 .chart-container #popup-ai-chart-4-legend {
  font-family: "Montserrat", serif;
  position: absolute;
  width: 100%;
  margin-left: 25%;
  margin-top: 5px;
  color: #00FF87;
  font-size: 10px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 .chart-container #popup-ai-chart-4 {
  box-sizing: border-box;
  /*
  width: 80%;
  */
  margin: 0;
  min-height: 150px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 .chart-summary {
  float: left;
  width: 40%;
  min-height: 150px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 .chart-summary .row-1 {
  margin-top: 30px;
  text-align: center;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 .chart-summary .row-1 .label {
  display: block;
  color: #696679;
  font-size: 14px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 .chart-summary .row-1 .value {
  display: block;
  color: #E63A79;
  font-size: 75px;
}


#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform    {width:200px;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform .uniform-box .uniform-text {bottom:10px;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-info-table {width:calc(100% - 200px);}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-info-table tr td:first-child {width:100px;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 {padding:30px 20px;color:#fff;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 * {padding:0;margin:0;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap {display:table;width:100%;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm {display:table-cell;text-align:center;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm:nth-child(1) {width:28%;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm:nth-child(2) {width:36%;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm:nth-child(3) {width:36%;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm > .tit {color:#827f93;padding-bottom:10px;border-bottom: 1px solid #514f5d;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm > .val {padding-top:10px;font-size:16px;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm > .val .val {display:inline-block;font-weight:500;font-family:"Montserrat", serif;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm > .val .up-down {margin-left:5px;font-size:14px;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm > .val .up-down i {font-style:normal;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm > .val .up-down.up {color:#00FF87;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm > .val .up-down.dn {color:#827f93;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm.t03 > .tit {color:#00FF87;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm.t03 > .val .val {color:#00FF87;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 {padding:20px 20px;min-height:100px;background-color:#2d2c34;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 * {padding:0;margin:0;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .tab-btn {}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .tab-btn:after {display:block;content:"";clear:both;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .tab-btn li {float:left;display:block;width:50%;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .tab-btn li a {display:block;line-height:40px;color:#827f93;text-align:center;border-bottom:1px solid #514f5d;text-decoration:none;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .tab-btn li a.on {color:#fff;border-color:#fff;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .tab-cnt {display:none;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .tab-cnt.on {display:block;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-wrap {height:200px;border:0 solid #514f5d;border-top:0;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-wrap.on {display:block;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list-wrap {position:relative;height:248px;margin-top:10px;overflow:hidden;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list-wrap .btn-scroll {position:absolute;left:0;display:block;width:100%;height:20px;line-height:20px;text-decoration:none !important;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list-wrap .btn-scroll.dn:hover {background-color:#393742;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list-wrap .btn-scroll.up {top:0;height:26px;line-height:26px;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list-wrap .btn-scroll.dn {bottom:0;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list-wrap .btn-scroll:before {display:block;content:"";font-family:"Entypo";text-align:center;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list-wrap .btn-scroll.up:before {content:"\e75f";}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list-wrap .btn-scroll.dn:before {content:"\e75c";}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list-cont {height:calc(100% - 46px - 2px);overflow:hidden;border-top:1px solid #514f5d;border-bottom:1px solid #514f5d;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list {table-layout:fixed;border-spacing:0;border-collapse:collapse;width:100%;margin:0;padding:0;color:#fff;line-height:20px;font-size:13px;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list.hd {}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list th {padding:0;margin:0;line-height:26px;font-weight:normal;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list td {padding:0;margin:0;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list td.on  {color:#00FF87;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list .val-r {color:#827f93;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list .val-s {color:#00FF87;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list .val-c {padding-right:20px;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list tr:last-child td {padding-bottom:17px;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-2 .chart-list tr:hover {background-color:#393742;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-3 {padding:30px 20px;min-height:100px;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 {float:none;width:auto;padding: 20px 30px;background-color:transparent;}
#pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 {float:none;width:auto;padding: 20px 30px;background-color:#2d2c34;}

@media only screen and (max-width: 424px) {
    #pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm:nth-child(1) {width:33.3333%;}
    #pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm:nth-child(2) {width:33.3333%;}
    #pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm:nth-child(3) {width:auto;}
    #pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm > .tit {font-size:12px;}
    #pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm > .val {font-size:14px;}
    #pop-page.salary #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-salay-1 > .wrap > .itm > .val .up-down {margin-left:5px;font-size:11px;}
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right {
  position:relative;
  float: none;
  display: table-cell;
  background: #212026;
}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right:after {
  display:block;
  content:"";
  clear:both;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 {
  margin: 10px 30px;
  border-bottom: 1px solid #393742;
  padding-top: 10px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 .left {
  float: left;
  /*width: 50%;*/
  min-height: 50px;
  border: 1px solid transparent;
  box-sizing: border-box;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 .left .title {
  padding: 10px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 .left .title strong {
  color: #E63A79;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 .right {
  float: right;
  /*width: 50%;*/
  min-height: 50px;
  text-align: right;
  padding: 10px;
  font-family: "Montserrat", serif;
  font-size: 10px;
  border: 1px solid transparent;
  box-sizing: border-box;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 .right .date {
  color: #cccccc;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 .right .stadium {
  color: #00FF87;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 {
  padding: 10px 30px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .left {
  float: left;
  width: 50%;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .left .airating-table-1 {
  border-spacing: 0;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  margin-bottom: 10px;
  font-family: "Montserrat", serif;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .left .airating-table-1 tr:first-child td {
  font-weight: normal;
  font-size: 11px;
  color: #cccccc;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .left .airating-table-1 tr td {
  width: 25%;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 5px 0;
  border-right: 1px solid #514f5d;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .left .airating-table-1 tr td:first-child {
  border-left: 1px solid #514f5d;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .right {
  float: left;
  width: 50%;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .right .airating-table-2 {
  border-spacing: 0;
  border: 0;
  padding: 0;
  margin: 0;
  width: 100%;
  font-family: "Montserrat", serif;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .right .airating-table-2 tr:first-child td {
  font-weight: normal;
  font-size: 11px;
  color: #cccccc;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .right .airating-table-2 tr td {
  width: 25%;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
  color: #fff;
  padding: 5px 0;
  border-right: 1px solid #514f5d;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .right .airating-table-2 tr td.rating-t {
  color: #00FF87;
  font-weight: bold;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .right .airating-table-2 tr td.rating-c {
  color: #00FF87;
  font-weight: bold;
  font-size: 20px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-3 {
  padding: 0 30px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-3 .ai-heatmap-wrap {
  position: relative;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-3 .ai-heatmap-wrap #ai-heatmap-1 {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-3 .ai-heatmap-wrap #ai-heatmap-2 {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  border: 1px solid #cccccc;
  box-sizing: border-box;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-3 .ai-heatmap-wrap #ai-heatmap-2 .heatmap-canvas {
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-3 .ai-heatmap-wrap .ai-heatmap-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("/img/mio-soccer-line.png");
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #212026;
  background-position: center center;
  box-sizing: border-box;
  z-index: 1;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 {
  padding: 0 30px 0 30px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-1 {
  width: calc(100% - 140px);
  float: left;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-1 .scrolled-tabs-wrap {
  padding-top: 10px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-1 .half-half-wrap {
  height: 100%;
  padding-top: 10px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half {
  width: 100%;
  height: 68px;
  display: table;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #E63A79;
  box-sizing: border-box;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half li {
  cursor: pointer;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 50%;
  font-size: 14px;
  border-right: 1px solid #E63A79;
  box-sizing: border-box;
  font-weight: bold;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half li:hover {
  background: #2d2c34;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half li:last-child {
  border-right: none;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half li.is-active {
  background: #E63A79;
  color: #212026;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-2 {
  width: 140px;
  float: left;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-2 .goal-marker-wrap {
  padding-left: 10px;
  padding-top: 10px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-2 .goal-marker-wrap .goalpost-wrap {
  position: relative;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-2 .goal-marker-wrap .goalpost-wrap #goalpost-chart {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-2 .goal-marker-wrap .goalpost-wrap .goalpost-dis {
  position: absolute;
  left: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  text-decoration: none;
  font-size: 14px;
  z-index: 3;
  text-align: center;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-2 .goal-marker-wrap .goalpost-wrap .goalpost-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url("/img/soccer-goalpost.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #212026;
  opacity: 0.5;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box {
  margin-top:20px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-1 .gauge-chart-wrap {
  float: left;
  width: 50%;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-1 .gauge-chart-wrap #gauge-chart-1 {
  margin: 0 5% 0 auto;
  margin-bottom: 0px;
  width: 150px;
  height: 150px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-1 .gauge-chart-wrap #gauge-chart-2 {
  margin: 0 auto 0 5%;
  margin-bottom: 0px;
  width: 150px;
  height: 150px;
}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 {
  margin: 0 15%;
}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 .gauge-chart-wrap {
  float: left;
  width: 25%;
}

  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 .gauge-chart-wrap #gauge-small-chart-1
, #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 .gauge-chart-wrap #gauge-small-chart-2
, #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 .gauge-chart-wrap #gauge-small-chart-3
, #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 .gauge-chart-wrap #gauge-small-chart-4 
{
  margin: 0 auto;
  margin-bottom: 30px;
  width : 80px;
  height: 80px;
}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper {
  position:absolute;
  top:0;
  right:0;
  float:none !important;
  width:75px;
  height:100%;
  background-color:#151418;
}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll {
  position:absolute;
  width:100%;
  height:30px;
  line-height:30px;
  text-align:center;
  background-color:#151418;
  text-decoration:none !important;
}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll:hover {
  background-color:#393742;
}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll:before {
    display: block;
    font-family: "Entypo";
    text-align: center;
    content: ""
    line-height: 30px;
}

#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll.up {top:0;}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll.dn {bottom:0;}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll.lt {display:none;}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll.rt {display:none;}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll.up:before {content:"\e75f";}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll.dn:before {content:"\e75c";}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll.lt:before {content:"\e75d";}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll.rt:before {content:"\e75e";}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round {
  margin-top:31px;
  height:calc(100% - 62px);
  overflow:hidden;
}
#pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-wrapper {
  float:left;
  width:calc(100% - 75px);
}

#pop-page #pop-content .pop-content .stem .pop-tabs-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width:75px;
}

#pop-page #pop-content .pop-content .stem .pop-tabs-ul li a {
  display: block;
  padding: 10px 8px;
  background: #151418;
  text-decoration: none;
  font-family: "Montserrat", serif;
  font-size: 14px;
  font-weight: bold;
  line-height: 24px;
  color: #454350;
  border-bottom: 1px solid #212026;
  box-sizing: border-box;
  text-align: center;
}
#pop-page #pop-content .pop-content .stem .pop-tabs-ul li a:after {
  display:block;
  content:"";
  clear:both;
}

#pop-page #pop-content .pop-content .stem .pop-tabs-ul li a:hover {
  background: #8B3AE8;
  color: #fff;
}

#pop-page #pop-content .pop-content .stem .pop-tabs-ul li a.is-active {
  background: #212026;
  color: #fff;
}

#pop-page #pop-content .pop-content .stem .pop-tabs-ul li a .round {
  float:left;
  display: block;
  width:calc(100% - 30px);
  text-align:center;
}

#pop-page #pop-content .pop-content .stem .pop-tabs-ul li a .status {
  float:right;
  display: block;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #26252c;
  text-align: center;
  font-weight: 400;
  color: #1c1b20;
  vertical-align: middle;
}

#pop-page #pop-content .pop-content .stem .pop-tabs-ul li a .status.on {
  text-indent: -999px;
  overflow: hidden;
  background: url("/img/onair-dot.gif") no-repeat center center;
  background-size: 24px;
}

#pop-page #pop-content .pop-content .stem .pop-tabs-ul li a .status.win {
  background: #2CD311;
}

#pop-page #pop-content .pop-content .stem .pop-tabs-ul li a .status.lose {
  background: #D20326;
}

#pop-page #pop-content .pop-content .stem .pop-tabs-ul li a .status.draw {
  background: #76766F;
}

@media only screen and (min-width: 1600px) {
}

@media only screen and (max-width: 1599px) {

  #pop-page #pop-content .pop-content .stem .pop-content-wrap { display: block; }
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left { display: block;width:100% !important;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left:after { display:block;content:"";clear:both; }
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-1 {}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-3 {}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 {padding:20px 30px;box-sizing: border-box;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 {float:left;width:40%;padding:20px 30px;box-sizing: border-box;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 {float:left;width:60%;padding:20px 30px;box-sizing: border-box;background:none;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 {float:left;width:60%;padding:20px 30px;box-sizing: border-box;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform    {width:250px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-info-table {width:calc(100% - 250px);}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-info-table tr td:first-child {width:150px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 #popup-ai-chart-1 {float:none;width:auto;padding:0;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 #popup-ai-chart-2 {float:none;width:auto;padding:0;margin-top:20px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right { display:block;width:100% !important; }
}

@media only screen and (min-width: 992px) and (max-width: 1599px) {
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-wrapper:after {display:block;content:"";clear:both;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box {position:relative;padding-bottom:30px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 {}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-2,
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-3,
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-4 {float:left;width:calc(100% - 200px);margin-right:0;padding-right:0;box-sizing: border-box;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box   {position:absolute;top:0;right:0;width:190px;margin:0;box-sizing: border-box;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-1 {margin:80px 0 0;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 {margin:20px 0 0;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-1 .gauge-chart-wrap,
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 .gauge-chart-wrap {float:none;width:auto;margin:0;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-1 .gauge-chart-wrap #gauge-chart-1  {margin:0;width:auto;height:130px; }
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-1 .gauge-chart-wrap #gauge-chart-2  {margin:0;width:auto;height:130px; }
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 .gauge-chart-wrap #gauge-small-chart-1, 
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 .gauge-chart-wrap #gauge-small-chart-2, 
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 .gauge-chart-wrap #gauge-small-chart-3, 
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 .gauge-chart-wrap #gauge-small-chart-4 {margin:15px 0 0;width:auto;height:70px; }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 {}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-2,
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-3,
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-4 {width:calc(100% - 160px);}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box   {width:150px;}
}

@media only screen and (max-width: 991px) {
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-1 {}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-3 {}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 {padding:20px 15px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 {float:none;width:auto;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 {float:none;width:auto;background:#2d2c34;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 {float:none;width:auto;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-info-table tr td:first-child {width:100px;}   
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 #popup-ai-chart-1 {float:left;width:60%;padding-right:15px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 #popup-ai-chart-2 {float:left;width:40%;padding:0;margin-top:0;}
}

@media only screen and (max-width: 767px) {
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform    {width:200px !important;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform .uniform-box .uniform-text {bottom:10px !important;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-info-table {width:calc(100% - 200px) !important;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 #popup-ai-chart-1 {float:none;width:auto;padding:0;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 #popup-ai-chart-2 {float:none;width:auto;padding:0;margin-top:20px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-wrapper {float:none;width:auto;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper {position:relative;width:auto;height:65px;overflow:hidden;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll {width:30px;height:100%;line-height:65px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll.up {display:none;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll.dn {display:none;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll.lt {display:block;left:0;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round-wrapper .btn-scroll.rt {display:block;right:0;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .match-round {margin:0 0 0 31px;width:calc(100% - 62px);height:100%;}
  #pop-page #pop-content .pop-content .stem .pop-tabs-ul {white-space:nowrap;width:auto;}
  #pop-page #pop-content .pop-content .stem .pop-tabs-ul:after {display:block;content:"";clear:both;}
  #pop-page #pop-content .pop-content .stem .pop-tabs-ul > li {display:inline-block;}
  #pop-page #pop-content .pop-content .stem .pop-tabs-ul > li:last-child {margin-right:17px;}
  #pop-page #pop-content .pop-content .stem .pop-tabs-ul li a {border:0;height:65px;}
  #pop-page #pop-content .pop-content .stem .pop-tabs-ul li a .round {float:none;display:block;width:auto;line-height:20px;}
  #pop-page #pop-content .pop-content .stem .pop-tabs-ul li a .status {float:none;display:block;margin:0 auto;width:20px;height:20px;font-size:12px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .left,
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .right {float:none;display:block;width:auto;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .left .airating-table-1 {margin-bottom:10px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-2 .right .airating-table-2 tr td:first-child {border-left:1px solid #514f5d;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 {position:relative;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-1 {float:none;width:auto;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-1 .half-half-wrap {width:calc(100% - 140px);}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half {height:107px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-1 .half-half-wrap .half-half li {}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box .layer-4 .inner-2 {position:absolute;right:30px;bottom:0;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-1 .gauge-chart-wrap #gauge-chart-1 {margin:0 0 0 auto;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-1 .gauge-chart-wrap #gauge-chart-2 {margin:0 auto 0 0;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-gauge-box .layer-2 {padding:0;margin:0 20px;}
}

@media only screen and (max-width: 575px) {
  #pop-page #pop-content .pop-spacer { display: none; }
  #pop-page #pop-content .pop-title .stem { height: 48px; }
  #pop-page #pop-content .pop-title .stem .pop-left .pop-title-box { line-height: 48px; }
  #pop-page #pop-content .pop-title .stem .pop-left .pop-title-box .ico { -webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);transform: scale(1); }
  #pop-page #pop-content .pop-title .stem .pop-left .pop-title-box .text { font-size: 18px;padding-left: 0; }
  #pop-page #pop-content .pop-title .stem .pop-right .btn-close-pop { width: 48px;height: 48px; }
  #pop-page #pop-content .pop-bar .stem { height: initial; line-height: 36px; }
  #pop-page #pop-content .pop-bar .stem .pop-right { text-align: left; }
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 {padding:20px 15px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 {padding:20px 15px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 {padding:20px 15px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform    {float:none;width:auto !important;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform .uniform-box {width:auto;height:130px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-uniform .uniform-box .uniform-text {bottom:10px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-info-table {float:none;width:100% !important;margin-top:20px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-2 .player-info-table tr td:first-child {width:40% !important;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 span.value {font-size:40px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-4 #popup-ai-chart-1 {min-height:150px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-summary .row-1 {margin-top:30px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-5 .chart-container #popup-ai-chart-3 {min-height:150px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-left > .layer-6 .chart-summary .row-1 .value {font-size:50px;}  
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 {margin-left:15px;margin-right:15px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-2,
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-3,
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-4 {padding-left:15px;padding-right:15px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-4 .inner-2 {right:15px;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 .left {float:none;display:block;text-align:center;padding-bottom:0;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 .left .title {padding-bottom:0;}
  #pop-page #pop-content .pop-content .stem .pop-content-wrap .pop-wrap-right .pop-heatmap-box > .layer-1 .right {float:none;display:block;text-align:center;padding-top:0;}
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
}

@media only screen and (max-width: 575px) {
}

/**
 * TOP20 List....
 */
.trunk.top20 {
  padding-top:30px;
}
.top20-list-wrap {
  list-style: none;
  margin: 0;
  padding: 0;
}

.top20-list h2 {
  padding:0;
  margin:0 0 15px;
  font-size: 20px;
  color: #fff;
}

.top20-list table {
  border-spacing: 0;
  width: 100%;
}

.top20-list table thead {
  height: 30px;
}

.top20-list table thead tr td {
  padding: 10px 0;
  font-family: "Montserrat", serif;
  font-size: 10px;
  font-weight: bold;
  color: #999999;
  text-align: center;
  border-bottom: 1px solid #999999;
}

.top20-list table tbody tr:hover td {
  background: rgba(0, 0, 0, 0.2);
  cursor: pointer;
}

.top20-list table tbody tr td {
  border-bottom: 1px solid #333333;
  text-align: center;
  color: #fff;
  /* padding: 10px 0; */
  height:45px;
  padding:0;
}

@media only screen and (max-width: 1199px) {
  .top20-list table tbody tr td {
    height:auto;
    padding: 10px 0;
  }
}

.top20-list table tbody tr td:first-child {
  text-align: right;
}

.top20-list table tbody tr td:first-child .rank {
  padding-right: 30px;
}

.top20-list table tbody tr td:first-child .rank.dot {
  background-image: url("/img/mark-dot.png");
  background-repeat: no-repeat;
  background-position: center right 10px;
  background-size: 16px 16px;
}

.top20-list table tbody tr td:first-child .rank.up {
  background-image: url("/img/mark-up.png");
  background-repeat: no-repeat;
  background-position: center right 10px;
  background-size: 16px 16px;
}

.top20-list table tbody tr td:first-child .rank.down {
  background-image: url("/img/mark-down.png");
  background-repeat: no-repeat;
  background-position: center right 10px;
  background-size: 16px 16px;
}

.top20-list table tbody tr td:nth-child(2) {
  text-align: left;
}

.top20-list table tbody tr td:last-child {
  font-weight: bold;
}

.top20-list table tbody tr td .full-name {
  display: inline;
}

.top20-list table tbody tr td .name {
  display: none;
}

.top20-ai-list h2 {
  padding:0;
  margin:0 0 15px;
  font-size: 20px;
  color: #fff;
}

.top20-ai-list table {
  width: 100%;
  border-spacing: 0;
}

.top20-ai-list table thead {
  height: 30px;
}

.top20-ai-list table thead tr td {
  padding: 10px 0;
  font-family: "Montserrat", serif;
  font-size: 10px;
  font-weight: bold;
  color: #999999;
  text-align: center;
}

.top20-ai-list table tbody tr:nth-child(1) td, 
.top20-ai-list table tbody tr:nth-child(2) td, 
.top20-ai-list table tbody tr:nth-child(3) td {
  background: #E63A79;
}

.top20-ai-list table tbody tr:nth-child(1):hover td, 
.top20-ai-list table tbody tr:nth-child(2):hover td, 
.top20-ai-list table tbody tr:nth-child(3):hover td {
  background: #c61d5b;
}

.top20-ai-list table tbody tr td {
  height:41px;
  padding:0;
  /*padding: 10px 0;*/
  color: #fff;
  text-align: center;
  background: #393742;
  font-size: 12px;
  border-top: 2px solid #212026;
  border-bottom: 3px solid #212026;
  cursor:pointer;
}
.top20-ai-list table tbody tr:hover td {
  background: #292830;  
}
@media only screen and (max-width: 1199px) {
  .top20-ai-list table tbody tr td {
    height:auto;
    padding: 10px 0;
  }
}

.top20-ai-list table tbody tr:last-child td {
  border-bottom:0;
}

.top20-ai-list table tbody tr td:first-child {
  position: relative;
  z-index: 1;
  font-size: 14px;
}

.top20-ai-list table tbody tr td:first-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:41px;
  opacity: .2;
  z-index: -1;
  background-image: url("/img/mio-list-left-dark.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size:auto 100%;
}

.top20-ai-list table tbody tr td:nth-child(2) {
  text-align: left;
  text-indent: 5px;
  font-size: 14px;
}

.top20-ai-list table tbody tr td:last-child {
  font-weight: bold;
  position: relative;
  z-index: 1;
  font-size: 14px;
}

.top20-ai-list table tbody tr td:last-child:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:41px;
  opacity: .1;
  z-index: -1;
  background-image: url("/img/mio-list-right-light.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size:auto 100%;
}

.c-result {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  background: #212026;
  border-radius: 24px;
  color: #212026;
  text-align: center;
}

.c-result.win {
  background: #2CD311;
}

.c-result.lost {
  background: #D20326;
}

.c-result.draw {
  background: #76766F;
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .top20-list .top20-list-wrap {
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .top20-list .top20-list-wrap::-webkit-scrollbar {
    height: 10px;
  }
  .top20-list .top20-list-wrap::-webkit-scrollbar-track {
    background: #333333;
  }
  .top20-list .top20-list-wrap::-webkit-scrollbar-thumb {
    background: gray;
  }
  .top20-list .top20-list-wrap::-webkit-scrollbar-thumb:hover {
    background: #E63A79;
  }
  .top20-list table {
    width: 700px !important;
  }
  .top20-list table tbody tr td .full-name {
    display: none;
  }
  .top20-list table tbody tr td .name {
    display: inline !important;
  }
  .c-result {
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
  }
}

@media only screen and (max-width: 575px) {
  .top20-list .top20-list-wrap {
    overflow-x: scroll;
    overflow-y: hidden;
  }
  .top20-list .top20-list-wrap::-webkit-scrollbar {
    height: 10px;
  }
  .top20-list .top20-list-wrap::-webkit-scrollbar-track {
    background: #333333;
  }
  .top20-list .top20-list-wrap::-webkit-scrollbar-thumb {
    background: gray;
  }
  .top20-list .top20-list-wrap::-webkit-scrollbar-thumb:hover {
    background: #E63A79;
  }
  .top20-list table {
    width: 700px !important;
  }
  .top20-list table tbody tr td .full-name {
    display: none;
  }
  .top20-list table tbody tr td .name {
    display: inline !important;
  }
  .c-result {
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .top20-list table tbody tr td .full-name {
    display: none;
  }
  .top20-list table tbody tr td .name {
    display: inline !important;
  }
  .c-result {
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .top20-list table tbody tr td .full-name {
    display: none;
  }
  .top20-list table tbody tr td .name {
    display: inline !important;
  }
  .c-result {
    width: 18px;
    height: 18px;
    line-height: 18px;
    font-size: 12px;
  }
}

/**
 * Top20 Players
 */
.top-players-wrap {
  border: 1px solid #666666;
  box-sizing: border-box;
  padding: 10px;
}

.top-players-wrap .title {
  color: #fff;
  margin: 0;
  padding: 6px 0;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  border-bottom: 1px solid #4d4d4d;
}

.top-players-wrap .title i {
  font-style:normal;
  color:#666;
  font-size:14px;
}

.top-players-wrap .top-players-table {
  table-layout: fixed;
  width: 100%;
  border-spacing: 0;
}

.top-players-wrap .top-players-table tr.itm {cursor:pointer;}
.top-players-wrap .top-players-table tr.itm:hover td {background-color:rgba(0, 0, 0, 0.3);}


.top-players-wrap .top-players-table tr:first-child td {
  vertical-align: middle;
  padding: 0;
  border-top:0;
  border-bottom: 1px solid gray;
}

.top-players-wrap .top-players-table tr:first-child td.center {
  text-align: center;
}

.top-players-wrap .top-players-table tr:first-child td .rank {
  font-weight: bold;
  color: #00FF87;
  font-size: 14px;
}

.top-players-wrap .top-players-table tr:first-child td.uniform {
  vertical-align:bottom;
}
.top-players-wrap .top-players-table tr:first-child td.uniform:after {
  display:block;
  content:"";
  clear:both;
}

.top-players-wrap .top-players-table tr:first-child td .uniform-box {
  float:left;
  width: 70px;
  height: 60px;
  min-width: auto;
  min-height: auto;
}

.top-players-wrap .top-players-table tr:first-child td .uniform-box .uniform-text {
  /*bottom: 0;*/
}

.top-players-wrap .top-players-table tr:first-child td .uniform-box .uniform-text .club {
  font-size: 10px;
  padding: 2px 4px;
}

.top-players-wrap .top-players-table tr:first-child td .uniform-box .uniform-text .name {
  font-size: 10px;
}

.top-players-wrap .top-players-table tr:first-child td .uniform-box .uniform-text .no {
  font-size: 20px;
}

.top-players-wrap .top-players-table tr:first-child td.uniform > .inf {
  float:left;
  /*width:calc(100% - 70px);*/
  text-align:left;
  line-height: 14px;
  padding-top:12px;
}
.top-players-wrap .top-players-table tr:first-child td.uniform > .inf > span {
  
}

.top-players-wrap .top-players-table tr:first-child td .pname {
  font-size: 14px;
  line-height: 18px;
  font-weight: bold;
  color: #00FF87;
  display: block;
}

.top-players-wrap .top-players-table tr:first-child td .pclub {
  font-size: 12px;
  color: #fff;
  display: block;
  padding: 0;
  border: none;
  text-align:left;
}

.top-players-wrap .top-players-table tr:first-child td .ppos {
  font-size: 12px;
  color: #fff;
}

.top-players-wrap .top-players-table tr:first-child td .pnum {
  font-size: 12px;
  color: #fff;
}

.top-players-wrap .top-players-table tr:first-child td .prat {
  float:right;
  line-height:60px;
  color: #00FF87;
  font-size: 28px;
  letter-spacing:-1px;
}

.top-players-wrap .top-players-table tr td {
  padding: 8px 0;
  font-size: 13px;
  color: #fff;
  border-top: 1px solid #4d4d4d;
  text-align: center;
}

.top-players-wrap .top-players-table tr td.left {
  text-align: left;
}

.top-players-wrap .top-players-table tr td.right {
  text-align: right;
}

.top-players-wrap .top-players-table tr td .pclub {
  display:inline-block;
  width:100%;
  font-size: 11px;
  color: #999999;
  border: 1px solid gray;
  border-radius: 20px;
  padding: 1px 0;
  text-align:center;
}

.top-players-wrap .top-players-table tr td .prat {
  font-size: 14px;
  padding-right:7px;
}

/**
 * Gallery Box...
 */
.gallery-box {
  padding: 0 10px;
}

.gallery-box.before .gallery li .gallery-wrap table.is-active {
  background: #fff;
  border: 1px solid #fff;
}

.gallery-box.before .gallery li .gallery-wrap table.is-active tr td {
  color: #212026;
}

.gallery-box.before .gallery li .gallery-wrap table.is-active tr td.left {
  color: #212026;
}

.gallery-box.before .gallery li .gallery-wrap table.is-active tr td strong {
  color: #fff;
}

.gallery-box .gallery {
  list-style: none;
  margin: 0;
  padding: 0;
}

.gallery-box .gallery li {
  width: 20%;
  float: left;
}

.gallery-box .gallery li .gallery-wrap {
  margin: 5px;
}

.gallery-box .gallery li .gallery-wrap table {
  width: 100%;
  min-height: 80px;
  border-spacing: 0;
  border: 1px solid #514f5d;
  box-sizing: border-box;
}

.gallery-box .gallery li .gallery-wrap table.is-active {
  background: #E63A79;
  border: 1px solid #E63A79;
}

.gallery-box .gallery li .gallery-wrap table.is-active tr td {
  color: #212026;
}

.gallery-box .gallery li .gallery-wrap table.is-active tr td.left {
  color: #fff;
}

.gallery-box .gallery li .gallery-wrap table.is-active tr td strong {
  color: #fff;
}

.gallery-box .gallery li .gallery-wrap table.is-active:hover {
  border: 1px solid #8B3AE8;
  background: #8B3AE8;
}

.gallery-box .gallery li .gallery-wrap table.is-active:hover tr td {
  color: #fff;
}

.gallery-box .gallery li .gallery-wrap table.is-active:hover tr td strong {
  color: #fff;
}

.gallery-box .gallery li .gallery-wrap table:hover {
  border: 1px solid #E63A79;
  background: #1a191e;
  cursor: pointer;
}

.gallery-box .gallery li .gallery-wrap table tr td {
  text-align: center;
  padding: 5px 10px 15px 10px;
  font-size: 16px;
  color: #fff;
  font-weight: bold;
}

.gallery-box .gallery li .gallery-wrap table tr td.left {
  font-family: "Montserrat", serif;
  font-size: 10px;
  font-weight: initial;
  color: #00FF87;
  text-align: left;
  padding: 5px 10px;
}

.gallery-box .gallery li .gallery-wrap table tr td.right {
  text-align: right;
  padding: 5px 10px;
}

.gallery-box .gallery li .gallery-wrap table tr td strong {
  color: #E63A79;
}

/**
 * Formation box...
 */
.formation-box .formation-map {
  position: relative;
  background-image: url("/img/soccer-half-bg.svg");
  background-size: 100%;
  background-repeat: no-repeat;
}

.formation-box .formation-map .formation-label {
  position: absolute;
  top: 2px;
  left: 2px;
  background: black;
  font-size: 11px;
  color: #fff;
  padding: 0 6px;
  width: initial;
  height: 22px;
  line-height: 22px;
}
.formation-box .formation-map .formation-label.away {
  left:auto;
  right:2px;
}

.formation-box .formation-map .formations {
  list-style: none;
  margin: 0;
  padding: 0;
}

.formation-box .formation-map .formations li {
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  display: table;
  height: 25%;
  text-align: center;
}

.formation-box .formation-map .formations li .cell {
  display: table-cell;
  vertical-align: middle;
}

.formation-box .formation-map .formations li .cell .player {
  font-size: 12px;
  color: #fff;
}

.formation-box .formation-map .formations li .cell .player.goal {
  display: inline-block;
  line-height: 20px;
  background-image: url("/img/soccer-ball.svg");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: left center;
  padding-left: 18px;
}

.formation-box .formation-map .formations li .cell .player .num {
  font-family: "Montserrat", serif;
  color: #00FF87;
  padding-right: 5px;
}

.formation-box .formation-map .formations li .cell .player .dp-acc{
  height:18px;
  line-height:18px;
  overflow:hidden;
}

.formation-box .formation-map .formations li .cell .player .card {
    margin-left:5px;
}

.formation-box .formation-map .formations li .cell .player .card:first-child {
    margin-left:0;
}

.formation-box .formation-map .formations li .cell .player .card:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 12px;
  background: #fff;
  margin-left: 2px;
}

.formation-box .formation-map .formations li .cell .player .card sup {
  padding: 0 2px;
  color: #fff;
}

.formation-box .formation-map .formations li .cell .player .card.yellow:before {
  background: #F8E81C;
}

.formation-box .formation-map .formations li .cell .player .card.yellow sup {
  color: #F8E81C;
}

.formation-box .formation-map .formations li .cell .player .card.red:before {
  background: #D0021B;
}

.formation-box .formation-map .formations li .cell .player .card.red sup {
  color: #D0021B;
}

.formation-box .formation-map .formations li .cell .player .card.in:before {
  background: url("/img/card-in.svg");
  background-repeat: no-repeat;
  width: 11px;
}

.formation-box .formation-map .formations li .cell .player .card.in sup {
  color: #7ED321;
}

.formation-box .formation-map .formations li .cell .player .card.out:before {
  background: url("/img/card-out.svg");
  background-repeat: no-repeat;
  width: 11px;
}

.formation-box .formation-map .formations li .cell .player .card.out sup {
  color: #D0021B;
}

.formation-box .formation-map .formations li .cell .player .card.goal {
  margin-left:0 !important;  
}
.formation-box .formation-map .formations li .cell .player .card.goal:before {
  
  width: 14px;
  height: 14px;
  background-color: transparent;
  background-image: url("/img/soccer-ball.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: left center;
}

.formation-box .formation-map           .formations li {height:25%;}
.formation-box .formation-map           .formations li:nth-child( 1) {width:33.33%;left:    0%;top:  0%;}
.formation-box .formation-map           .formations li:nth-child( 2) {width:33.33%;left:33.33%;top:  0%;}
.formation-box .formation-map           .formations li:nth-child( 3) {width:33.33%;left:66.66%;top:  0%;}
.formation-box .formation-map           .formations li:nth-child( 4) {width:33.33%;left:    0%;top: 25%;}
.formation-box .formation-map           .formations li:nth-child( 5) {width:33.33%;left:33.33%;top: 25%;}
.formation-box .formation-map           .formations li:nth-child( 6) {width:33.33%;left:66.66%;top: 25%;}
.formation-box .formation-map           .formations li:nth-child( 7) {width:   25%;left:    0%;top: 50%;}
.formation-box .formation-map           .formations li:nth-child( 8) {width:   25%;left:   25%;top: 50%;}
.formation-box .formation-map           .formations li:nth-child( 9) {width:   25%;left:   50%;top: 50%;}
.formation-box .formation-map           .formations li:nth-child(10) {width:   25%;left:   75%;top: 50%;}
.formation-box .formation-map           .formations li:nth-child(11) {width:  100%;left:    0%;top: 75%;}

.formation-box .formation-map.f-4-1-2-3 .formations li {height:20%;}
.formation-box .formation-map.f-4-1-2-3 .formations li:nth-child( 1) {width:33.33%;left:    0%;top:  0%;}
.formation-box .formation-map.f-4-1-2-3 .formations li:nth-child( 2) {width:33.33%;left:33.33%;top:  0%;}
.formation-box .formation-map.f-4-1-2-3 .formations li:nth-child( 3) {width:33.33%;left:66.66%;top:  0%;}
.formation-box .formation-map.f-4-1-2-3 .formations li:nth-child( 4) {width:   50%;left:    0%;top: 20%;}
.formation-box .formation-map.f-4-1-2-3 .formations li:nth-child( 5) {width:   50%;left:   50%;top: 20%;}
.formation-box .formation-map.f-4-1-2-3 .formations li:nth-child( 6) {width:  100%;left:    0%;top: 40%;}
.formation-box .formation-map.f-4-1-2-3 .formations li:nth-child( 7) {width:   25%;left:    0%;top: 60%;}
.formation-box .formation-map.f-4-1-2-3 .formations li:nth-child( 8) {width:   25%;left:   25%;top: 60%;}
.formation-box .formation-map.f-4-1-2-3 .formations li:nth-child( 9) {width:   25%;left:   50%;top: 60%;}
.formation-box .formation-map.f-4-1-2-3 .formations li:nth-child(10) {width:   25%;left:   75%;top: 60%;}
.formation-box .formation-map.f-4-1-2-3 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-4-1-3-2 .formations li {height:20%;}
.formation-box .formation-map.f-4-1-3-2 .formations li:nth-child( 1) {width:   50%;left:    0%;top:  0%;}
.formation-box .formation-map.f-4-1-3-2 .formations li:nth-child( 2) {width:   50%;left:   50%;top:  0%;}
.formation-box .formation-map.f-4-1-3-2 .formations li:nth-child( 3) {width:33.33%;left:    0%;top: 20%;}
.formation-box .formation-map.f-4-1-3-2 .formations li:nth-child( 4) {width:33.33%;left:33.33%;top: 20%;}
.formation-box .formation-map.f-4-1-3-2 .formations li:nth-child( 5) {width:33.33%;left:66.66%;top: 20%;}
.formation-box .formation-map.f-4-1-3-2 .formations li:nth-child( 6) {width:  100%;left:    0%;top: 40%;}
.formation-box .formation-map.f-4-1-3-2 .formations li:nth-child( 7) {width:   25%;left:    0%;top: 60%;}
.formation-box .formation-map.f-4-1-3-2 .formations li:nth-child( 8) {width:   25%;left:   25%;top: 60%;}
.formation-box .formation-map.f-4-1-3-2 .formations li:nth-child( 9) {width:   25%;left:   50%;top: 60%;}
.formation-box .formation-map.f-4-1-3-2 .formations li:nth-child(10) {width:   25%;left:   75%;top: 60%;}
.formation-box .formation-map.f-4-1-3-2 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-4-1-4-1 .formations li {height:20%;}
.formation-box .formation-map.f-4-1-4-1 .formations li:nth-child( 1) {width:  100%;left:    0%;top:  0%;}
.formation-box .formation-map.f-4-1-4-1 .formations li:nth-child( 2) {width:   25%;left:    0%;top: 20%;}
.formation-box .formation-map.f-4-1-4-1 .formations li:nth-child( 3) {width:   25%;left:   25%;top: 20%;}
.formation-box .formation-map.f-4-1-4-1 .formations li:nth-child( 4) {width:   25%;left:   50%;top: 20%;}
.formation-box .formation-map.f-4-1-4-1 .formations li:nth-child( 5) {width:   25%;left:   75%;top: 20%;}
.formation-box .formation-map.f-4-1-4-1 .formations li:nth-child( 6) {width:  100%;left:    0%;top: 40%;}
.formation-box .formation-map.f-4-1-4-1 .formations li:nth-child( 7) {width:   25%;left:    0%;top: 60%;}
.formation-box .formation-map.f-4-1-4-1 .formations li:nth-child( 8) {width:   25%;left:   25%;top: 60%;}
.formation-box .formation-map.f-4-1-4-1 .formations li:nth-child( 9) {width:   25%;left:   50%;top: 60%;}
.formation-box .formation-map.f-4-1-4-1 .formations li:nth-child(10) {width:   25%;left:   75%;top: 60%;}
.formation-box .formation-map.f-4-1-4-1 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-4-2-1-3 .formations li {height:20%;}
.formation-box .formation-map.f-4-2-1-3 .formations li:nth-child( 1) {width:33.33%;left:    0%;top:  0%;}
.formation-box .formation-map.f-4-2-1-3 .formations li:nth-child( 2) {width:33.33%;left:33.33%;top:  0%;}
.formation-box .formation-map.f-4-2-1-3 .formations li:nth-child( 3) {width:33.33%;left:66.66%;top:  0%;}
.formation-box .formation-map.f-4-2-1-3 .formations li:nth-child( 4) {width:  100%;left:    0%;top: 20%;}
.formation-box .formation-map.f-4-2-1-3 .formations li:nth-child( 5) {width:   50%;left:    0%;top: 40%;}
.formation-box .formation-map.f-4-2-1-3 .formations li:nth-child( 6) {width:   50%;left:   50%;top: 40%;}
.formation-box .formation-map.f-4-2-1-3 .formations li:nth-child( 7) {width:   25%;left:    0%;top: 60%;}
.formation-box .formation-map.f-4-2-1-3 .formations li:nth-child( 8) {width:   25%;left:   25%;top: 60%;}
.formation-box .formation-map.f-4-2-1-3 .formations li:nth-child( 9) {width:   25%;left:   50%;top: 60%;}
.formation-box .formation-map.f-4-2-1-3 .formations li:nth-child(10) {width:   25%;left:   75%;top: 60%;}
.formation-box .formation-map.f-4-2-1-3 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-4-2-2-2 .formations li {height:20%;}
.formation-box .formation-map.f-4-2-2-2 .formations li:nth-child( 1) {width:   50%;left:    0%;top:  0%;}
.formation-box .formation-map.f-4-2-2-2 .formations li:nth-child( 2) {width:   50%;left:   50%;top:  0%;}
.formation-box .formation-map.f-4-2-2-2 .formations li:nth-child( 3) {width:   50%;left:    0%;top: 20%;}
.formation-box .formation-map.f-4-2-2-2 .formations li:nth-child( 4) {width:   50%;left:   50%;top: 20%;}
.formation-box .formation-map.f-4-2-2-2 .formations li:nth-child( 5) {width:   50%;left:    0%;top: 40%;}
.formation-box .formation-map.f-4-2-2-2 .formations li:nth-child( 6) {width:   50%;left:   50%;top: 40%;}
.formation-box .formation-map.f-4-2-2-2 .formations li:nth-child( 7) {width:   25%;left:    0%;top: 60%;}
.formation-box .formation-map.f-4-2-2-2 .formations li:nth-child( 8) {width:   25%;left:   25%;top: 60%;}
.formation-box .formation-map.f-4-2-2-2 .formations li:nth-child( 9) {width:   25%;left:   50%;top: 60%;}
.formation-box .formation-map.f-4-2-2-2 .formations li:nth-child(10) {width:   25%;left:   75%;top: 60%;}
.formation-box .formation-map.f-4-2-2-2 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-4-2-3-1 .formations li {height:20%;}
.formation-box .formation-map.f-4-2-3-1 .formations li:nth-child( 1) {width:  100%;left:    0%;top:  0%;}
.formation-box .formation-map.f-4-2-3-1 .formations li:nth-child( 2) {width:33.33%;left:    0%;top: 20%;}
.formation-box .formation-map.f-4-2-3-1 .formations li:nth-child( 3) {width:33.33%;left:33.33%;top: 20%;}
.formation-box .formation-map.f-4-2-3-1 .formations li:nth-child( 4) {width:33.33%;left:66.66%;top: 20%;}
.formation-box .formation-map.f-4-2-3-1 .formations li:nth-child( 5) {width:   50%;left:    0%;top: 40%;}
.formation-box .formation-map.f-4-2-3-1 .formations li:nth-child( 6) {width:   50%;left:   50%;top: 40%;}
.formation-box .formation-map.f-4-2-3-1 .formations li:nth-child( 7) {width:   25%;left:    0%;top: 60%;}
.formation-box .formation-map.f-4-2-3-1 .formations li:nth-child( 8) {width:   25%;left:   25%;top: 60%;}
.formation-box .formation-map.f-4-2-3-1 .formations li:nth-child( 9) {width:   25%;left:   50%;top: 60%;}
.formation-box .formation-map.f-4-2-3-1 .formations li:nth-child(10) {width:   25%;left:   75%;top: 60%;}
.formation-box .formation-map.f-4-2-3-1 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-4-3-1-2 .formations li {height:20%;}
.formation-box .formation-map.f-4-3-1-2 .formations li:nth-child( 1) {width:   50%;left:    0%;top:  0%;}
.formation-box .formation-map.f-4-3-1-2 .formations li:nth-child( 2) {width:   50%;left:   50%;top:  0%;}
.formation-box .formation-map.f-4-3-1-2 .formations li:nth-child( 3) {width:  100%;left:    0%;top: 20%;}
.formation-box .formation-map.f-4-3-1-2 .formations li:nth-child( 4) {width:33.33%;left:    0%;top: 40%;}
.formation-box .formation-map.f-4-3-1-2 .formations li:nth-child( 5) {width:33.33%;left:33.33%;top: 40%;}
.formation-box .formation-map.f-4-3-1-2 .formations li:nth-child( 6) {width:33.33%;left:66.66%;top: 40%;}
.formation-box .formation-map.f-4-3-1-2 .formations li:nth-child( 7) {width:   25%;left:    0%;top: 60%;}
.formation-box .formation-map.f-4-3-1-2 .formations li:nth-child( 8) {width:   25%;left:   25%;top: 60%;}
.formation-box .formation-map.f-4-3-1-2 .formations li:nth-child( 9) {width:   25%;left:   50%;top: 60%;}
.formation-box .formation-map.f-4-3-1-2 .formations li:nth-child(10) {width:   25%;left:   75%;top: 60%;}
.formation-box .formation-map.f-4-3-1-2 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-4-3-2-1 .formations li {height:20%;}
.formation-box .formation-map.f-4-3-2-1 .formations li:nth-child( 1) {width:  100%;left:    0%;top:  0%;}
.formation-box .formation-map.f-4-3-2-1 .formations li:nth-child( 2) {width:   50%;left:    0%;top: 20%;}
.formation-box .formation-map.f-4-3-2-1 .formations li:nth-child( 3) {width:   50%;left:   50%;top: 20%;}
.formation-box .formation-map.f-4-3-2-1 .formations li:nth-child( 4) {width:33.33%;left:    0%;top: 40%;}
.formation-box .formation-map.f-4-3-2-1 .formations li:nth-child( 5) {width:33.33%;left:33.33%;top: 40%;}
.formation-box .formation-map.f-4-3-2-1 .formations li:nth-child( 6) {width:33.33%;left:66.66%;top: 40%;}
.formation-box .formation-map.f-4-3-2-1 .formations li:nth-child( 7) {width:   25%;left:    0%;top: 60%;}
.formation-box .formation-map.f-4-3-2-1 .formations li:nth-child( 8) {width:   25%;left:   25%;top: 60%;}
.formation-box .formation-map.f-4-3-2-1 .formations li:nth-child( 9) {width:   25%;left:   50%;top: 60%;}
.formation-box .formation-map.f-4-3-2-1 .formations li:nth-child(10) {width:   25%;left:   75%;top: 60%;}
.formation-box .formation-map.f-4-3-2-1 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-4-3-3   .formations li {height:25%;}
.formation-box .formation-map.f-4-3-3   .formations li:nth-child( 1) {width:33.33%;left:    0%;top:  0%;}
.formation-box .formation-map.f-4-3-3   .formations li:nth-child( 2) {width:33.33%;left:33.33%;top:  0%;}
.formation-box .formation-map.f-4-3-3   .formations li:nth-child( 3) {width:33.33%;left:66.66%;top:  0%;}
.formation-box .formation-map.f-4-3-3   .formations li:nth-child( 4) {width:33.33%;left:    0%;top: 25%;}
.formation-box .formation-map.f-4-3-3   .formations li:nth-child( 5) {width:33.33%;left:33.33%;top: 25%;}
.formation-box .formation-map.f-4-3-3   .formations li:nth-child( 6) {width:33.33%;left:66.66%;top: 25%;}
.formation-box .formation-map.f-4-3-3   .formations li:nth-child( 7) {width:   25%;left:    0%;top: 50%;}
.formation-box .formation-map.f-4-3-3   .formations li:nth-child( 8) {width:   25%;left:   25%;top: 50%;}
.formation-box .formation-map.f-4-3-3   .formations li:nth-child( 9) {width:   25%;left:   50%;top: 50%;}
.formation-box .formation-map.f-4-3-3   .formations li:nth-child(10) {width:   25%;left:   75%;top: 50%;}
.formation-box .formation-map.f-4-3-3   .formations li:nth-child(11) {width:  100%;left:    0%;top: 75%;}

.formation-box .formation-map.f-4-4-1-1 .formations li {height:20%;}
.formation-box .formation-map.f-4-4-1-1 .formations li:nth-child( 1) {width:  100%;left:    0%;top:  0%;}
.formation-box .formation-map.f-4-4-1-1 .formations li:nth-child( 2) {width:  100%;left:    0%;top: 20%;}
.formation-box .formation-map.f-4-4-1-1 .formations li:nth-child( 3) {width:   25%;left:    0%;top: 40%;}
.formation-box .formation-map.f-4-4-1-1 .formations li:nth-child( 4) {width:   25%;left:   25%;top: 40%;}
.formation-box .formation-map.f-4-4-1-1 .formations li:nth-child( 5) {width:   25%;left:   50%;top: 40%;}
.formation-box .formation-map.f-4-4-1-1 .formations li:nth-child( 6) {width:   25%;left:   75%;top: 40%;}
.formation-box .formation-map.f-4-4-1-1 .formations li:nth-child( 7) {width:   25%;left:    0%;top: 60%;}
.formation-box .formation-map.f-4-4-1-1 .formations li:nth-child( 8) {width:   25%;left:   25%;top: 60%;}
.formation-box .formation-map.f-4-4-1-1 .formations li:nth-child( 9) {width:   25%;left:   50%;top: 60%;}
.formation-box .formation-map.f-4-4-1-1 .formations li:nth-child(10) {width:   25%;left:   75%;top: 60%;}
.formation-box .formation-map.f-4-4-1-1 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-4-4-2   .formations li {height:25%;}
.formation-box .formation-map.f-4-4-2   .formations li:nth-child( 1) {width:   50%;left:    0%;top:  0%;}
.formation-box .formation-map.f-4-4-2   .formations li:nth-child( 2) {width:   50%;left:   50%;top:  0%;}
.formation-box .formation-map.f-4-4-2   .formations li:nth-child( 3) {width:   25%;left:    0%;top: 25%;}
.formation-box .formation-map.f-4-4-2   .formations li:nth-child( 4) {width:   25%;left:   25%;top: 25%;}
.formation-box .formation-map.f-4-4-2   .formations li:nth-child( 5) {width:   25%;left:   50%;top: 25%;}
.formation-box .formation-map.f-4-4-2   .formations li:nth-child( 6) {width:   25%;left:   75%;top: 25%;}
.formation-box .formation-map.f-4-4-2   .formations li:nth-child( 7) {width:   25%;left:    0%;top: 50%;}
.formation-box .formation-map.f-4-4-2   .formations li:nth-child( 8) {width:   25%;left:   25%;top: 50%;}
.formation-box .formation-map.f-4-4-2   .formations li:nth-child( 9) {width:   25%;left:   50%;top: 50%;}
.formation-box .formation-map.f-4-4-2   .formations li:nth-child(10) {width:   25%;left:   75%;top: 50%;}
.formation-box .formation-map.f-4-4-2   .formations li:nth-child(11) {width:  100%;left:    0%;top: 75%;}

.formation-box .formation-map.f-4-5-1   .formations li {height:25%;}
.formation-box .formation-map.f-4-5-1   .formations li:nth-child( 1) {width:  100%;left:    0%;top:  0%;}
.formation-box .formation-map.f-4-5-1   .formations li:nth-child( 2) {width:   20%;left:    0%;top: 25%;}
.formation-box .formation-map.f-4-5-1   .formations li:nth-child( 3) {width:   20%;left:   20%;top: 25%;}
.formation-box .formation-map.f-4-5-1   .formations li:nth-child( 4) {width:   20%;left:   40%;top: 25%;}
.formation-box .formation-map.f-4-5-1   .formations li:nth-child( 5) {width:   20%;left:   60%;top: 25%;}
.formation-box .formation-map.f-4-5-1   .formations li:nth-child( 6) {width:   20%;left:   80%;top: 25%;}
.formation-box .formation-map.f-4-5-1   .formations li:nth-child( 7) {width:   25%;left:    0%;top: 50%;}
.formation-box .formation-map.f-4-5-1   .formations li:nth-child( 8) {width:   25%;left:   25%;top: 50%;}
.formation-box .formation-map.f-4-5-1   .formations li:nth-child( 9) {width:   25%;left:   50%;top: 50%;}
.formation-box .formation-map.f-4-5-1   .formations li:nth-child(10) {width:   25%;left:   75%;top: 50%;}
.formation-box .formation-map.f-4-5-1   .formations li:nth-child(11) {width:  100%;left:    0%;top: 75%;}

.formation-box .formation-map.f-3-1-3-3 .formations li {height:20%;}
.formation-box .formation-map.f-3-1-3-3 .formations li:nth-child( 1) {width:33.33%;left:    0%;top:  0%;}
.formation-box .formation-map.f-3-1-3-3 .formations li:nth-child( 2) {width:33.33%;left:33.33%;top:  0%;}
.formation-box .formation-map.f-3-1-3-3 .formations li:nth-child( 3) {width:33.33%;left:66.66%;top:  0%;}
.formation-box .formation-map.f-3-1-3-3 .formations li:nth-child( 4) {width:33.33%;left:    0%;top: 20%;}
.formation-box .formation-map.f-3-1-3-3 .formations li:nth-child( 5) {width:33.33%;left:33.33%;top: 20%;}
.formation-box .formation-map.f-3-1-3-3 .formations li:nth-child( 6) {width:33.33%;left:66.66%;top: 20%;}
.formation-box .formation-map.f-3-1-3-3 .formations li:nth-child( 7) {width:  100%;left:    0%;top: 40%;}
.formation-box .formation-map.f-3-1-3-3 .formations li:nth-child( 8) {width:33.33%;left:    0%;top: 60%;}
.formation-box .formation-map.f-3-1-3-3 .formations li:nth-child( 9) {width:33.33%;left:33.33%;top: 60%;}
.formation-box .formation-map.f-3-1-3-3 .formations li:nth-child(10) {width:33.33%;left:66.66%;top: 60%;}
.formation-box .formation-map.f-3-1-3-3 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-3-3-2-2 .formations li {height:20%;}
.formation-box .formation-map.f-3-3-2-2 .formations li:nth-child( 1) {width:   50%;left:    0%;top:  0%;}
.formation-box .formation-map.f-3-3-2-2 .formations li:nth-child( 2) {width:   50%;left:   50%;top:  0%;}
.formation-box .formation-map.f-3-3-2-2 .formations li:nth-child( 3) {width:   50%;left:    0%;top: 20%;}
.formation-box .formation-map.f-3-3-2-2 .formations li:nth-child( 4) {width:   50%;left:   50%;top: 20%;}
.formation-box .formation-map.f-3-3-2-2 .formations li:nth-child( 5) {width:33.33%;left:    0%;top: 40%;}
.formation-box .formation-map.f-3-3-2-2 .formations li:nth-child( 6) {width:33.33%;left:33.33%;top: 40%;}
.formation-box .formation-map.f-3-3-2-2 .formations li:nth-child( 7) {width:33.33%;left:66.66%;top: 40%;}
.formation-box .formation-map.f-3-3-2-2 .formations li:nth-child( 8) {width:33.33%;left:    0%;top: 60%;}
.formation-box .formation-map.f-3-3-2-2 .formations li:nth-child( 9) {width:33.33%;left:33.33%;top: 60%;}
.formation-box .formation-map.f-3-3-2-2 .formations li:nth-child(10) {width:33.33%;left:66.66%;top: 60%;}
.formation-box .formation-map.f-3-3-2-2 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-3-4-1-2 .formations li {height:20%;}
.formation-box .formation-map.f-3-4-1-2 .formations li:nth-child( 1) {width:   50%;left:    0%;top:  0%;}
.formation-box .formation-map.f-3-4-1-2 .formations li:nth-child( 2) {width:   50%;left:   50%;top:  0%;}
.formation-box .formation-map.f-3-4-1-2 .formations li:nth-child( 3) {width:  100%;left:    0%;top: 20%;}
.formation-box .formation-map.f-3-4-1-2 .formations li:nth-child( 4) {width:   25%;left:    0%;top: 40%;}
.formation-box .formation-map.f-3-4-1-2 .formations li:nth-child( 5) {width:   25%;left:   25%;top: 40%;}
.formation-box .formation-map.f-3-4-1-2 .formations li:nth-child( 6) {width:   25%;left:   50%;top: 40%;}
.formation-box .formation-map.f-3-4-1-2 .formations li:nth-child( 7) {width:   25%;left:   75%;top: 40%;}
.formation-box .formation-map.f-3-4-1-2 .formations li:nth-child( 8) {width:33.33%;left:    0%;top: 60%;}
.formation-box .formation-map.f-3-4-1-2 .formations li:nth-child( 9) {width:33.33%;left:33.33%;top: 60%;}
.formation-box .formation-map.f-3-4-1-2 .formations li:nth-child(10) {width:33.33%;left:66.66%;top: 60%;}
.formation-box .formation-map.f-3-4-1-2 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-3-4-2-1 .formations li {height:20%;}
.formation-box .formation-map.f-3-4-2-1 .formations li:nth-child( 1) {width:  100%;left:    0%;top:  0%;}
.formation-box .formation-map.f-3-4-2-1 .formations li:nth-child( 2) {width:   50%;left:    0%;top: 20%;}
.formation-box .formation-map.f-3-4-2-1 .formations li:nth-child( 3) {width:   50%;left:   50%;top: 20%;}
.formation-box .formation-map.f-3-4-2-1 .formations li:nth-child( 4) {width:   25%;left:    0%;top: 40%;}
.formation-box .formation-map.f-3-4-2-1 .formations li:nth-child( 5) {width:   25%;left:   25%;top: 40%;}
.formation-box .formation-map.f-3-4-2-1 .formations li:nth-child( 6) {width:   25%;left:   50%;top: 40%;}
.formation-box .formation-map.f-3-4-2-1 .formations li:nth-child( 7) {width:   25%;left:   75%;top: 40%;}
.formation-box .formation-map.f-3-4-2-1 .formations li:nth-child( 8) {width:33.33%;left:    0%;top: 60%;}
.formation-box .formation-map.f-3-4-2-1 .formations li:nth-child( 9) {width:33.33%;left:33.33%;top: 60%;}
.formation-box .formation-map.f-3-4-2-1 .formations li:nth-child(10) {width:33.33%;left:66.66%;top: 60%;}
.formation-box .formation-map.f-3-4-2-1 .formations li:nth-child(11) {width:  100%;left:    0%;top: 80%;}

.formation-box .formation-map.f-3-4-3   .formations li {height:25%;}
.formation-box .formation-map.f-3-4-3   .formations li:nth-child( 1) {width:33.33%;left:    0%;top:  0%;}
.formation-box .formation-map.f-3-4-3   .formations li:nth-child( 2) {width:33.33%;left:33.33%;top:  0%;}
.formation-box .formation-map.f-3-4-3   .formations li:nth-child( 3) {width:33.33%;left:66.66%;top:  0%;}
.formation-box .formation-map.f-3-4-3   .formations li:nth-child( 4) {width:   25%;left:    0%;top: 25%;}
.formation-box .formation-map.f-3-4-3   .formations li:nth-child( 5) {width:   25%;left:   25%;top: 25%;}
.formation-box .formation-map.f-3-4-3   .formations li:nth-child( 6) {width:   25%;left:   50%;top: 25%;}
.formation-box .formation-map.f-3-4-3   .formations li:nth-child( 7) {width:   25%;left:   75%;top: 25%;}
.formation-box .formation-map.f-3-4-3   .formations li:nth-child( 8) {width:33.33%;left:    0%;top: 50%;}
.formation-box .formation-map.f-3-4-3   .formations li:nth-child( 9) {width:33.33%;left:33.33%;top: 50%;}
.formation-box .formation-map.f-3-4-3   .formations li:nth-child(10) {width:33.33%;left:66.66%;top: 50%;}
.formation-box .formation-map.f-3-4-3   .formations li:nth-child(11) {width:  100%;left:    0%;top: 75%;}

.formation-box .formation-map.f-3-5-2   .formations li {height:25%;}
.formation-box .formation-map.f-3-5-2   .formations li:nth-child( 1) {width:   50%;left:    0%;top:  0%;}
.formation-box .formation-map.f-3-5-2   .formations li:nth-child( 2) {width:   50%;left:   50%;top:  0%;}
.formation-box .formation-map.f-3-5-2   .formations li:nth-child( 3) {width:   20%;left:    0%;top: 25%;}
.formation-box .formation-map.f-3-5-2   .formations li:nth-child( 4) {width:   20%;left:   20%;top: 25%;}
.formation-box .formation-map.f-3-5-2   .formations li:nth-child( 5) {width:   20%;left:   40%;top: 25%;}
.formation-box .formation-map.f-3-5-2   .formations li:nth-child( 6) {width:   20%;left:   60%;top: 25%;}
.formation-box .formation-map.f-3-5-2   .formations li:nth-child( 7) {width:   20%;left:   80%;top: 25%;}
.formation-box .formation-map.f-3-5-2   .formations li:nth-child( 8) {width:33.33%;left:    0%;top: 50%;}
.formation-box .formation-map.f-3-5-2   .formations li:nth-child( 9) {width:33.33%;left:33.33%;top: 50%;}
.formation-box .formation-map.f-3-5-2   .formations li:nth-child(10) {width:33.33%;left:66.66%;top: 50%;}
.formation-box .formation-map.f-3-5-2   .formations li:nth-child(11) {width:  100%;left:    0%;top: 75%;}

.formation-box .formation-map.f-3-6-1   .formations li {height:25%;}
.formation-box .formation-map.f-3-6-1   .formations li:nth-child( 1) {width:  100%;left:    0%;top:  0%;}
.formation-box .formation-map.f-3-6-1   .formations li:nth-child( 2) {width:16.66%;left:    0%;top: 25%;}
.formation-box .formation-map.f-3-6-1   .formations li:nth-child( 3) {width:16.66%;left:16.66%;top: 25%;}
.formation-box .formation-map.f-3-6-1   .formations li:nth-child( 4) {width:16.66%;left:33.32%;top: 25%;}
.formation-box .formation-map.f-3-6-1   .formations li:nth-child( 5) {width:16.66%;left:49.98%;top: 25%;}
.formation-box .formation-map.f-3-6-1   .formations li:nth-child( 6) {width:16.66%;left:66.64%;top: 25%;}
.formation-box .formation-map.f-3-6-1   .formations li:nth-child( 7) {width:16.66%;left:83.30%;top: 25%;}
.formation-box .formation-map.f-3-6-1   .formations li:nth-child( 8) {width:33.33%;left:    0%;top: 50%;}
.formation-box .formation-map.f-3-6-1   .formations li:nth-child( 9) {width:33.33%;left:33.33%;top: 50%;}
.formation-box .formation-map.f-3-6-1   .formations li:nth-child(10) {width:33.33%;left:66.66%;top: 50%;}
.formation-box .formation-map.f-3-6-1   .formations li:nth-child(11) {width:  100%;left:    0%;top: 75%;}

.formation-box .formation-map.f-5-3-2   .formations li {height:25%;}
.formation-box .formation-map.f-5-3-2   .formations li:nth-child( 1) {width:   50%;left:    0%;top:  0%;}
.formation-box .formation-map.f-5-3-2   .formations li:nth-child( 2) {width:   50%;left:   50%;top:  0%;}
.formation-box .formation-map.f-5-3-2   .formations li:nth-child( 3) {width:33.33%;left:    0%;top: 25%;}
.formation-box .formation-map.f-5-3-2   .formations li:nth-child( 4) {width:33.33%;left:33.33%;top: 25%;}
.formation-box .formation-map.f-5-3-2   .formations li:nth-child( 5) {width:33.33%;left:66.66%;top: 25%;}
.formation-box .formation-map.f-5-3-2   .formations li:nth-child( 6) {width:   20%;left:    0%;top: 50%;}
.formation-box .formation-map.f-5-3-2   .formations li:nth-child( 7) {width:   20%;left:   20%;top: 50%;}
.formation-box .formation-map.f-5-3-2   .formations li:nth-child( 8) {width:   20%;left:   40%;top: 50%;}
.formation-box .formation-map.f-5-3-2   .formations li:nth-child( 9) {width:   20%;left:   60%;top: 50%;}
.formation-box .formation-map.f-5-3-2   .formations li:nth-child(10) {width:   20%;left:   80%;top: 50%;}
.formation-box .formation-map.f-5-3-2   .formations li:nth-child(11) {width:  100%;left:    0%;top: 75%;}

.formation-box .formation-map.f-5-4-1   .formations li {height:25%;}
.formation-box .formation-map.f-5-4-1   .formations li:nth-child( 1) {width:  100%;left:    0%;top:  0%;}
.formation-box .formation-map.f-5-4-1   .formations li:nth-child( 2) {width:   25%;left:    0%;top: 25%;}
.formation-box .formation-map.f-5-4-1   .formations li:nth-child( 3) {width:   25%;left:   25%;top: 25%;}
.formation-box .formation-map.f-5-4-1   .formations li:nth-child( 4) {width:   25%;left:   50%;top: 25%;}
.formation-box .formation-map.f-5-4-1   .formations li:nth-child( 5) {width:   25%;left:   75%;top: 25%;}
.formation-box .formation-map.f-5-4-1   .formations li:nth-child( 6) {width:   20%;left:    0%;top: 50%;}
.formation-box .formation-map.f-5-4-1   .formations li:nth-child( 7) {width:   20%;left:   20%;top: 50%;}
.formation-box .formation-map.f-5-4-1   .formations li:nth-child( 8) {width:   20%;left:   40%;top: 50%;}
.formation-box .formation-map.f-5-4-1   .formations li:nth-child( 9) {width:   20%;left:   60%;top: 50%;}
.formation-box .formation-map.f-5-4-1   .formations li:nth-child(10) {width:   20%;left:   80%;top: 50%;}
.formation-box .formation-map.f-5-4-1   .formations li:nth-child(11) {width:  100%;left:    0%;top: 75%;}

.formation-box .formation-table {
  border-spacing: 0;
  width: 100%;
}

.formation-box .formation-table tr td {
  border-bottom: 1px solid #514f5d;
  text-align: center;
  padding: 10px;
}

.formation-box .formation-table tr td .player {
  color: #fff;
}

.formation-box .formation-table tr td .player .dp-acc {
  height: 20px;
}

.formation-box .formation-table tr td .player .dp-acc .acc {
  display: inline-block;
  vertical-align:bottom;
  height: 20px;
  margin-left:5px;
  /*width: 100%;*/
}
.formation-box .formation-table tr td .player .dp-acc .acc:first-child {
  margin-left:0;
}

.formation-box .formation-table tr td .player .dp-acc .acc.goal {
  min-width:20px;
  background-image: url("/img/soccer-ball.svg");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center center;
  /*margin-left: 10px;*/
}

.formation-box .formation-table tr td .player .dp-acc .acc.goal:before {
  background: none;
}

.formation-box .formation-table tr td .player .dp-acc .acc.card:before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 12px;
  background: #fff;
  /*margin-left: 30px;*/
}

.formation-box .formation-table tr td .player .dp-acc .acc.card sup {
  padding: 0 2px;
  color: #fff;
}

.formation-box .formation-table tr td .player .dp-acc .acc.card.yellow:before {
  background: #F8E81C;
}

.formation-box .formation-table tr td .player .dp-acc .acc.card.yellow sup {
  color: #F8E81C;
}

.formation-box .formation-table tr td .player .dp-acc .acc.card.red:before {
  background: #D0021B;
}

.formation-box .formation-table tr td .player .dp-acc .acc.card.red sup {
  color: #D0021B;
}

.formation-box .formation-table tr td .player .dp-acc .acc.card.in:before {
  background: url("/img/card-in.svg");
  background-repeat: no-repeat;
  width: 11px;
}

.formation-box .formation-table tr td .player .dp-acc .acc.card.in sup {
  color: #7ED321;
}

.formation-box .formation-table tr td .player .dp-acc .acc.card.out:before {
  background: url("/img/card-out.svg");
  background-repeat: no-repeat;
  width: 11px;
}

.formation-box .formation-table tr td .player .dp-acc .acc.card.out sup {
  color: #D0021B;
}

.formation-box .formation-table tr td .player .dp-name .time {
  font-family: "Montserrat", serif;
  color: #00FF87;
  padding-right: 5px;
}

.formation-box .formation-table tr td .player .dp-name .name {
  color: #fff;
  font-weight: bold;
}

/**
 *
 */
.active-wrap {
  box-sizing: border-box;
}

.active-wrap #active-chart-1, .active-wrap #active-chart-2 {
  box-sizing: border-box;
  border-left: 1px solid #454350;
  border-bottom: 1px solid #454350;
}

/**
 * Rating-on list...
 */
.rating-on-title {
  text-align: center;
}

.rating-on-title .layer-1 .title-aligner {
  padding-top: 30px;
  display: table;
  width: 300px;
  margin: 0 auto;
}

.rating-on-title .layer-1 .title-aligner .cell {
  display: table-cell;
  vertical-align: middle;
  width: 33.33%;
}

.rating-on-title .layer-1 .title-aligner .cell.left {
  text-align: left;
}

.rating-on-title .layer-1 .title-aligner .cell.right {
  text-align: right;
}

.rating-on-title .layer-1 .title-aligner .cell .text {
  font-size: 24px;
  font-weight: bold;
  color: #00FF87;
}

.rating-on-title .layer-1 .title-aligner .cell .circle {
  display: inline-block;
  width: 70px;
  height: 70px;
  line-height: 70px;
  font-size: 30px;
  font-weight: bold;
  background: #00FF87;
  border-radius: 50%;
  color: #212026;
}

.rating-on-title .layer-2 {
  padding-top: 30px;
}

.rating-on-list ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rating-on-list ol li {
  position: relative;
  height: 36px;
  margin-top: 5px;
}

.rating-on-list ol li .rating-on-table-1 {
  border-spacing: 0;
  border-collapse: collapse;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 1;
  background: #8B3AE8;
  color: #fff;
}

.rating-on-list ol li .rating-on-table-1.pink {
  background: #E63A79;
}

.rating-on-list ol li .rating-on-table-1.pink .club {
  color: #E63A79 !important;
}

.rating-on-list ol li .rating-on-table-1:before {
  position: absolute;
  top: 0;
  left: 0;
  content: "";
  background-image: url("/img/mio-list-left-dark.png");
  background-repeat: no-repeat;
  background-position: top right;
  height: 36px;
  width: 80px;
  z-index: -1;
  opacity: 0.2;
}

.rating-on-list ol li .rating-on-table-1:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "";
  background-color: #fff;
  background-repeat: no-repeat;
  background-position: top left;
  height: 36px;
  width: 120px;
  z-index: -1;
  opacity: 0.2;
}

.rating-on-list ol li .rating-on-table-1 tr td {
  text-align: center;
  height: 36px;
  padding: 0;
  margin: 0;
}

.rating-on-list ol li .rating-on-table-1 tr td:first-child {
  width: 380px;
  font-weight: bold;
  text-align: left;
}

.rating-on-list ol li .rating-on-table-1 tr td:first-child .rank {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 70px;
  font-size: 18px;
  font-weight: bold;
  height: 36px;
  line-height: 36px;
  text-align: center;
  vertical-align: middle;
}

.rating-on-list ol li .rating-on-table-1 tr td:first-child .uniform-box {
  display:none;
}

.rating-on-list ol li .rating-on-table-1 tr td:first-child .box {
  display: table;
  table-layout:fixed;
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
}

.rating-on-list ol li .rating-on-table-1 tr td:first-child .box .left {
  display: table-cell;
  text-align: left;
  text-indent: 90px;
  padding: 0;
  margin: 0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.rating-on-list ol li .rating-on-table-1 tr td:first-child .box .left .name {
  font-size: 18px;
}

.rating-on-list ol li .rating-on-table-1 tr td:first-child .box .right {
  display: table-cell;
  text-align: right;
  padding: 0 10px 0 0;
  margin: 0;
  width: 90px;
}

.rating-on-list ol li .rating-on-table-1 tr td:first-child .box .right .club {
  display:inline-block;
  width:45px;
  text-align:center;
  font-size: 16px;
  font-weight: normal;
  border-radius: 36px;
  background: #fff;
  color: #8B3AE8;
  padding: 2px 0;
  text-indent:0 !important;
}

.rating-on-list ol li .rating-on-table-1 tr td:first-child .box .right .position {
  display:inline-block;
  width:30px;
  text-align:center;
  font-size: 16px;
  font-weight: normal;
  padding: 0 3px;
  text-indent:0 !important;
}

.rating-on-list ol li .rating-on-table-1 tr td:last-child {
  width: 120px;
  font-family: "Montserrat", serif;
  font-size: 18px;
  font-weight: bold;
}

.rating-on-list ol li .rating-on-table-1 tr td:last-child .label {
  display: none;
}

.rating-on-list ol li .rating-on-table-1 tr td .label {
  display: block;
  font-size: 10px;
}

.rating-on-list ol li .table-wrap {
  padding-left: 380px;
  padding-right: 120px;
  position: absolute;
  width: 100%;
  height: 36px;
  z-index: 2;
  top: 0;
  left: 0;
  box-sizing: border-box;
}

.rating-on-list ol li .table-wrap .rating-on-table-2 {
  width: 100%;
  height: 100%;
  border-spacing: 0;
  border-collapse: collapse;
  color: #fff;
}

.rating-on-list ol li .table-wrap .rating-on-table-2 tr td {
  width: 14%;
  text-align: center;
  border-left: 1px dashed #212026;
}

.rating-on-list ol li .table-wrap .rating-on-table-2 tr td:first-child {
  width: 16%;
}

.rating-on-list ol li .table-wrap .rating-on-table-2 tr td:last-child {
  border-right: 1px dashed #212026;
}

.rating-on-list ol li .table-wrap .rating-on-table-2 tr td .label {
  display: none;
  font-family: "Montserrat", serif;
  font-size: 10px;
}

.rating-on-list ol li .table-wrap .rating-on-table-2 tr td .value {
  font-size: 16px;
}

.rating-on-list ol li .table-wrap .rating-on-table-2 tr td .up-down {
  display:inline-block;
  margin-left: 5px;
  font-size: 13px;
  font-weight:300;
}
.rating-on-list ol li .table-wrap .rating-on-table-2 tr td .up-down.up {
  font-weight:500;
}

.rating-on-list ol li .table-wrap .rating-on-table-2 tr td .up-down i {
  margin-right:1px;
  font-size: 13px;
  font-style:normal;
}
/*
.rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td {width:23%;}
.rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td:first-child {}
.rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td:last-child {width:31%;}
*/
.rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td {width:auto;}
.rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td:nth-child(1) {width:20%;}
.rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td:nth-child(2) {width:22%;}
.rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td:nth-child(3) {width:28%;}
.rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td:last-child {width:32%;}

@media only screen and (min-width: 1600px) {
}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {
}
@media only screen /*and (min-width: 992px)*/ and (max-width: 1199px) {
  .rating-on-list ol li .rating-on-table-1:before {
    width: 50px;
  }
  .rating-on-list ol li .rating-on-table-1 tr td .rank {
    font-size: 14px !important;
  }
  .rating-on-list ol li .rating-on-table-1 tr td .box .left {
    text-indent: 60px;
  }
  .rating-on-list ol li .rating-on-table-1 tr td .box .left .name {
    font-size: 14px !important;
  }
  .rating-on-list ol li .rating-on-table-1 tr td .box .right .club {
    font-size: 12px !important;
  }
  .rating-on-list ol li .rating-on-table-1 tr td .box .right .position {
    font-size: 12px !important;
    padding:0;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:first-child {
    width: 300px !important;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:first-child .rank {
    width:40px;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:first-child .box .left {
    text-indent: 60px;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:first-child .box .right {
    width:80px;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:first-child .box .right .position {
    width:25px;
    padding:0;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:last-child .value {
    font-size: 15px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td:first-child .rank {
    font-size: 22px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .uniform-box {  
    min-width:auto;
    min-height:auto;
    width: 120px !important;
    height: 100px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .uniform-box .name {
    display:none;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td:first-child .left .name {
    font-size: 18px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td:last-child .value {
    font-size: 35px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .box .left {
    text-indent: 150px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .box .left .name {
    font-size: 16px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .box .right {
    text-indent: 150px !important;
    padding: 15px 0;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .box .right .club {
    font-size: 14px;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .box .right .position {
    font-size: 14px;
  }
  .rating-on-list ol li .table-wrap {
    padding-left:300px;
  }
  .rating-on-list ol li .table-wrap .rating-on-table-2 tr td .value {
    font-size: 14px;
  }
  .rating-on-list ol li:first-child .table-wrap .rating-on-table-2 tr td .value {
    font-size: 15px !important;
  }

  .rating-on-list ol li .table-wrap .rating-on-table-2 tr td .up-down { font-size: 12px; }
  .rating-on-list ol li .table-wrap .rating-on-table-2 tr td .up-down i { font-size: 12px; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .rating-on-list ol li .rating-on-table-1:before {
    width: 40px;
  }
  .rating-on-list ol li .rating-on-table-1:after {
    width: 60px;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:first-child {
    width: 230px !important;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:first-child .rank {
    width:30px;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:first-child .box .left {
    text-indent: 40px;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:first-child .box .right {
    padding-right:5px;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:last-child {
    width: 60px !important;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:last-child .value {
    font-size: 13px;
  }
  .rating-on-list ol li:first-child {
    height: 100px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .box .left {
    text-indent: 130px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .box .right {
    text-indent: 130px !important;
    padding-top:5px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .rank {
    font-size: 20px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td:last-child {
    font-size: 18px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td:last-child .value {
    display: block;
    font-size: 20px !important;
    font-weight: bold;
    padding: 20px 0;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .uniform-box {
    width: 100px !important;
  }
  .rating-on-list ol li .table-wrap {
    padding-left: 230px;
    padding-right: 60px;
  }
  .rating-on-list ol li .table-wrap .rating-on-table-2 tr td .value {
    font-size: 13px !important;
  }
  .rating-on-list ol li:first-child .table-wrap .rating-on-table-2 tr td .value {
    font-size: 13px !important;
  }
  .rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td {width:auto;}
  .rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td:nth-child(1) {width:20%;}
  .rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td:nth-child(2) {width:22%;}
  .rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td:nth-child(3) {width:28%;}
  .rating-on-list ol li .table-wrap .rating-on-table-2.salary tr td:last-child {width:32%;}
}
@media only screen /*and (min-width: 5/6px)*/ and (max-width: 767px) {
  .rating-on-list ol li {
    height: auto;
  }
  .rating-on-list ol li .rating-on-table-1:before {
    width: 50px;
  }
  .rating-on-list ol li .rating-on-table-1:after {
    width: 20%;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:first-child {
    width: 80% !important;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:first-child .box .right {
    width:90px;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:last-child {
    width: 20%;
  }
  .rating-on-list ol li .rating-on-table-1 tr td:last-child .value {
    font-size: 14px;
  }
  .rating-on-list ol li .rating-on-table-1 tr td .rank {
    font-size: 14px !important;
    width: 35px !important;
  }
  .rating-on-list ol li .rating-on-table-1 tr td .box .left {
    text-indent: 55px !important;
  }
  .rating-on-list ol li .rating-on-table-1 tr td .box .left .name {
    font-size: 13px !important;
  }
  .rating-on-list ol li .rating-on-table-1 tr td .box .right {
    padding: 0 3px 0 0 !important;
  }
  .rating-on-list ol li .rating-on-table-1 tr td .box .right .club {
    font-size: 12px !important;
    padding: 2px 4px !important;
  }
  .rating-on-list ol li .rating-on-table-1 tr td .box .right .position {
    font-size: 12px !important;
  }
  .rating-on-list ol li:first-child {
    height: auto !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 {
    top: 0;
    bottom: auto;
    height: 100px;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td {
    height: 100px;
    box-sizing: border-box;
    font-size: 12px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .rank {
    font-size: 16px;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .uniform-box {
    width: 100px !important;
    height: 100px !important;
    left: 10px;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .box {
    width: 100%;
    margin-left: 0;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .box .left {
    text-indent: 130px !important;
    text-align: left;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .box .left .name {
    font-size: 14px !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td .box .right {
    text-indent: 130px !important;
    text-align: left;
    padding: 10px 0 !important;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td:first-child {
    width: 80%;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td:last-child {
    width: 20%;
    vertical-align: bottom;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td:last-child .label {
    display: block;
    color: #999999;
  }
  .rating-on-list ol li:first-child .rating-on-table-1 tr td:last-child .value {
    color: #00FF87;
    display: block;
    font-size: 18px;
    font-weight: bold;
    padding: 10px 0 !important;
  }
  .rating-on-list ol li .table-wrap {
    /*top: 36px;*/
    height:auto !important;
    position:relative;
    padding: 5px 0;
    background: #393742;
    border-bottom: 1px solid #a668ed;
  }
  .rating-on-list ol li .table-wrap.pink {
    border-bottom: 1px solid #ec6798;
  }
  .rating-on-list ol li:first-child .table-wrap {
    height: auto !important;
    padding: 5px 0;
    border-bottom: 1px solid #514f5d !important;
  }
  .rating-on-list ol li .table-wrap .rating-on-table-2 tr td {
    border: none !important;
    vertical-align:top;
  }
  .rating-on-list ol li .table-wrap .rating-on-table-2 tr td .label {
    font-size: 8px !important;
    display: block;
    text-align: center;
    color: gray;
    padding: 0 !important;
  }
  .rating-on-list ol li .table-wrap .rating-on-table-2 tr td .value {
    font-size: 12px;
    color: #cccccc;
  }
  .rating-on-list ol li:first-child .table-wrap .rating-on-table-2 tr td .value {
    margin: 0 !important;
    font-size: 12px !important;
    font-weight: normal !important;
  }

  .rating-on-list ol li .table-wrap .rating-on-table-2 tr td .up-down { font-size: 11px; }
  .rating-on-list ol li .table-wrap .rating-on-table-2 tr td .up-down i { font-size: 11px; }
}
@media only screen and (max-width: 575px) {
  .rating-on-list ol li:first-child .rating-on-table-1 tr td:last-child .value {
    font-size:20px !important;
  }
}
@media only screen and (max-width: 400px) {
  .rating-on-list ol li .table-wrap .rating-on-table-2 tr td .up-down {display:block;margin-left:0;}
}
@media only screen and (max-width: 365px) {
  .rating-on-list ol li .table-wrap .rating-on-table-2 tr td .label {font-size:7px !important;}
}


.rating-on-list ol li:first-child {
  height: 140px;
}

.rating-on-list ol li:first-child .rating-on-table-1 {
  height:100%;
  background: none;
  box-sizing: border-box;
  border: 1px solid transparent;
}

.rating-on-list ol li:first-child .rating-on-table-1:before {
  display:none;
  /*background-image: none;*/
}

.rating-on-list ol li:first-child .rating-on-table-1:after {
  display:none;
  /*background-color: transparent;*/
}

.rating-on-list ol li:first-child .rating-on-table-1 tr td {
  vertical-align: bottom;
}

.rating-on-list ol li:first-child .rating-on-table-1 tr td:last-child {
  font-size: 40px;
  font-weight: normal;
  color: #00FF87;
}

.rating-on-list ol li:first-child .rating-on-table-1 tr td .uniform-box {
  position: absolute;
  display:block;
  bottom: 0;
  left: 30px;
  width: 160px;
  height: 160px;
}

.rating-on-list ol li:first-child .rating-on-table-1 tr td .rank {
  position: absolute;
  font-size: 30px;
  color: #00FF87;
  bottom: 0;
  left: 0;
  top: auto;
}

.rating-on-list ol li:first-child .rating-on-table-1 tr td .box {
  display: block;
  width: 100%;
}

.rating-on-list ol li:first-child .rating-on-table-1 tr td .box .left {
  display: block;
  width: 100%;
  text-align: left;
  text-indent: 200px;
  padding: 0;
}

.rating-on-list ol li:first-child .rating-on-table-1 tr td .box .left .name {
  font-size: 20px;
  color: #00FF87;
}

.rating-on-list ol li:first-child .rating-on-table-1 tr td .box .right {
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: left;
  text-indent: 200px;
}

.rating-on-list ol li:first-child .rating-on-table-1 tr td .box .right .club {
  color: #212026;
}

.rating-on-list ol li:first-child .table-wrap {
  bottom: 0;
  top: auto !important;
  height: 80px;
}

.rating-on-list ol li:first-child .table-wrap .rating-on-table-2 tr td {
  border-left: 1px solid #4d4d4d;
  vertical-align: middle;
}

.rating-on-list ol li:first-child .table-wrap .rating-on-table-2 tr td .label {
  display: block;
  color: #b3b3b3;
}

.rating-on-list ol li:first-child .table-wrap .rating-on-table-2 tr td .value {
  margin: 20px 0;
  display: inline-block;
  font-size: 18px;
  font-weight: bold;
}

.rating-on-list ol li:first-child .table-wrap .rating-on-table-2 tr td:last-child {
  border-right: 1px solid #4d4d4d;
}

.rating-on-list ol li:hover {
  cursor: pointer;
}

.rating-on-list ol li:hover:first-child .rating-on-table-1 {
  background: none;
}

.rating-on-list ol li:hover .rating-on-table-1 {
  background: #7119d6;
}

.rating-on-list ol li:hover .rating-on-table-1.pink {
  background: #d21b5e;
}

/**
 * Round list...
 */
.round-list-right {
  position: relative;
  padding-bottom: 15px;
}

.round-list-right.pr15 .right-wrap {
  padding-right: 15px;
}

.round-list-right .right-wrap {
  /*
  position: absolute;
  left: 0;
  top: 0;
  */
  padding-top: 3px;
}

@media only screen and (max-width: 767px) {
  .round-list-right {
    float:none !important;
    padding-bottom: 20px;
  }
  .round-list-right .right-wrap {
    position: static;
    text-align: center;
    padding-right: 0;
    /*
    padding-bottom: 20px;
    */
  }
}
/*
@media only screen and (min-width: 576px) and (max-width: 767px) {
  .round-list-right .right-wrap {
    position: static;
    text-align: center;
    padding-right: 0;
    padding-bottom: 20px;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .round-list-right .right-wrap {
    position: static;
    text-align: center;
    padding-right: 0;
    padding-bottom: 20px;
  }
}
*/
.round-list-wrap {
  text-align: center;
  padding-bottom: 10px;
  transform: scaleY(1);
  opacity:1;
  transition: transform 0.3s, opacity 0.3s;
}

.round-list-wrap.off {
  transform: scaleY(0);
  opacity:0;
  transition: transform 0.3s, opacity 0.3s;
}

@media only screen and (max-width: 767px) {
  .round-list-wrap {
    float:none !important;
    text-align: center;
    padding-bottom: 20px;
  }
  .round-list-wrap.float-c {
    position:relative;
  }
}

.round-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
  white-space:nowrap;
  overflow-x:hidden;
  transform: scaleY(1);
  opacity:1;
  transition: transform 0.3s, opacity 0.3s;
}

.round-list.off {
  transform: scaleY(0);
  opacity:0;
  transition: transform 0.3s, opacity 0.3s;
}

.round-list li {
  cursor: pointer;
  text-decoration: none;
  font-size: 14px;
  padding: 5px 15px;
  border: 1px solid #737373;
  display: inline-block;
  vertical-align: middle;
  margin: 2px;
  color: #737373;
  min-height: 16px;
}

.round-list li.end {
  color: #E63A79;
  border: 1px solid #E63A79;
}

.round-list li.end:hover {
  background: #780f36;
}

.round-list li.is-active {
  border: 1px solid #E63A79;
  background: #E63A79;
  color: #212026;
  font-weight: bold;
}

.round-list li.is-active:hover {
  background: #780f36;
}

.round-list li:hover {
  border: 1px solid #E63A79;
  color: #E63A79;
}

.round-list li.fr {
  border: none;
  padding: 5px;
  position: relative;
}

.round-list li.fr:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  transform: translate(-50%);
  border-right: 1px solid #737373;
}

.round-list li.select {
  padding:0;
}

.round-list li.select select {
  height:26px;
  width:100%;
  min-width:auto;
  padding-right:30px;
  border:0;
  color:inherit;
  font-weight:inherit;
  cursor:pointer;
}

.round-list li.select select option {
  color:#212026;
  font-weight:normal;
  line-height:1.5;
}


/**
 * Rating chart box...
 */
.rating-charts-box {
  position:relative;
}
.rating-charts-box.big {
  width:calc(100% + 141px);
}
.rating-charts-box.left {
  margin-left:-141px;
}
.rating-charts-box .type-ul-mobile {
  display: none;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  padding: 10px 0;
  text-align: center;
}
.rating-charts-box .type-ul-mobile:after {
  display:block;
  content:"";
  clear:both;
}

.rating-charts-box .type-ul-mobile li {
  float:left;
  display: block;
  width:calc((100% - 2px * 5) / 6);
  margin-left: 2px;
  border: 1px solid #666666;
  color: #666666;
  padding: 3px;
  text-align:center;
  cursor: pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.rating-charts-box .type-ul-mobile li:first-child {
  margin-left:0;
}

.rating-charts-box .type-ul-mobile li.is-active {
  background: #fff;
  color: #212026;
  border: 1px solid #fff;
}

.rating-charts-box .type-ul-mobile li:hover {
  border: 1px solid #E63A79;
  color: #E63A79;
}

.rating-charts-box .title-table {
  width: 100%;
  height: 100%;
  border-spacing: 0;
}

.rating-charts-box .title-table tr td {
  box-sizing: border-box;
  padding: 20px 0;
  text-align: center;
}

.rating-charts-box .title-table tr td.left-td {
  width: 131px;
}
.rating-charts-box .title-table tr td.center-td {
  width: 10px;
}
.rating-charts-box .title-table tr td.right-td {
  width: auto /*60%*/;
}

.rating-charts-box .title-table tr td .title {
  font-size: 20px;
  font-weight: bold;
  color: #fff;
  padding-bottom: 10px;
}

.rating-charts-box > .info-wrapper {
  position:relative;
}
.rating-charts-box > .info-wrapper > .no-data {
  z-index:10;
  position:absolute;
  right:0;
  width:calc(100% - 141px);
  height:100%;
  background-color:rgba(0,0,0,0.4);
  font-size:14px;
  color:#999;
  text-align:center;
  display:none;
}
.rating-charts-box > .info-wrapper > .no-data.right {
  left:0;
  right:auto;
}
.rating-charts-box > .info-wrapper > .no-data i {
  position:absolute;
  left:0;
  top:50%;
  width:100%;
  transform:translateY(-50%);
  display:block;
  font-style:normal;
}
@media only screen and (max-width: 767px){
  .rating-charts-box > .info-wrapper > .no-data {
    width:100%;
  }
}

.rating-charts-box .info-table {
  table-layout:fixed;
  width: 100%;
  height: 100%;
  border-spacing: 0;
}

.rating-charts-box .info-table tr td.right-td {
}

.rating-charts-box .info-table tr td.space-td {
  width: 10px;
}

.rating-charts-box .info-table tr td.center-td {
  width: 10px;
  padding:0;
}

.rating-charts-box .info-table tr td.type-td {
  width:125px;
  padding: 0;
  border-right: 6px solid #fff;
}

.rating-charts-box .info-table tr td.chart-td {
  border-top: 1px solid #b3b3b3;
  border-left: 1px solid #b3b3b3;
  border-right: 1px solid #b3b3b3;
}

.rating-charts-box .info-table tr td.slide-td {
  border: 1px solid #b3b3b3;
}

.rating-charts-box .info-table tr td .type-ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: right;
}

.rating-charts-box .info-table tr td .type-ul li {
  font-size: 16px;
  font-weight: bold;
  color: gray;
  padding: 5px 20px 5px 5px;
  cursor: pointer;
}

.rating-charts-box .info-table tr td .type-ul li.is-active {
  color: #fff;
  font-size: 20px;
  background-image: url("/img/arrow-left.svg");
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 5px 7px;
}

.rating-charts-box .info-table tr td .type-ul li:hover {
  color: #E63A79;
}

.rating-charts-box .info-table tr td .rating-chart-wrap {
  position: relative;
}

.rating-charts-box .info-table tr td .rating-chart-wrap .rating-chart {
  position: absolute;
  width: 100%;
  height: 100%;
  background: #212026;
}

.rating-charts-box .info-table tr td .rank-slider {
  height: 80px;
  display: table;
  table-layout:fixed;
  width: 100%;
}

.rating-charts-box .info-table tr td .rank-slider .left {
  display: table-cell;
  width: 90px;
  box-sizing: border-box;
  text-align: center;
  position: relative;
  vertical-align:middle;
}

.rating-charts-box .info-table tr td .rank-slider .left .rating {
  color: #00FF87;
  font-size: 20px;
}

.rating-charts-box .info-table tr td .rank-slider .left .ranking {
  font-size: 16px;
  background: #00FF87;
  border-radius: 30px;
  color: #212026;
  padding: 2px 10px;
  display: inline-block;
}

.rating-charts-box .info-table tr td .rank-slider .left .club {
  font-size: 16px;
  font-weight: bold;
  color: #00FF87;
}

.rating-charts-box .info-table tr td .rank-slider .left .player-info {
  /*
  position: absolute;
  top:0;
  width: 60px;
  margin-left: 5px;
  margin-top: 12px;
  z-index: 2;
  */
}

.rating-charts-box .info-table tr td .rank-slider .left .player-info .ranking {
  font-size: 16px;
  background: #00FF87;
  border-radius: 30px;
  color: #212026;
  padding: 2px 10px;
  display: inline-block;
}

.rating-charts-box .info-table tr td .rank-slider .left .player-info .name {
  font-size: 14px;
  color: #00FF87;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rating-charts-box .info-table tr td .rank-slider .left .player-info .rating {
  color: #00FF87;
  font-size: 20px;
}

.rating-charts-box .info-table tr td .rank-slider .left .player-uniform {
  z-index: 1;
  position: absolute;
  top:0;
  width: 80px;
  margin-left: 50px;
}

.rating-charts-box .info-table tr td .rank-slider .left .player-uniform .uniform-box {
  min-height: 80px;
  height: 80px;
  min-width: auto;
}

.rating-charts-box .info-table tr td .rank-slider .left .player-uniform .uniform-box .uniform-text {
  bottom: 0;
}

.rating-charts-box .info-table tr td .rank-slider .left .player-uniform .uniform-box .uniform-text .name {
  display: none;
}

.rating-charts-box .info-table tr td .rank-slider .right {
  width: calc(100% - 120px);
  display: table-cell;
  box-sizing: border-box;
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap {
  box-sizing: border-box;
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs {
  box-sizing: border-box;
  border: none;
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_left_button {
  height: 80px;
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_left_button:before {
  line-height: 80px;
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_inner {
  /*
  overflow: scroll !important;
  -ms-oveflow-style: none;
  */
  height: 80px;
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_inner::-webkit-scrollbar {
  display: none;
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_inner li {
  height: 80px;
  padding: 0 5px;
}
.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_inner li.tt {
  width:40px;
  text-align:center;
  padding:0;
}
.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_inner li.pp {
  width:60px;
  text-align:center;
  padding:0 3px;
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_inner li span {
  display: block;
  text-align: center;
  line-height: 12px;
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_inner li span.rank {
  color: #cccccc;
  line-height: 30px;
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_inner li span.scr {
  border-top: 1px dashed #333333;
  padding-top:10px;
  font-size:11px;
  font-weight:normal;
  color: #00FF87;
  
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_inner li span.val {
  padding-top:5px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_right_button {
  height: 80px;
}

.rating-charts-box .info-table tr td .rank-slider .right .scrolled-tabs-wrap .scrolled-tabs .scroll_tab_right_button:before {
  line-height: 80px;
}

.rating-charts-box.right .title-table tr td.left-td {
  width: auto;
}

.rating-charts-box.right .title-table tr td.right-td {
  width: 131px;
}

.rating-charts-box.right .info-table tr td.left-td {
  /*width: 60%;*/
}

.rating-charts-box.right .info-table tr td.right-td {
  /*width: initial;*/
}

.rating-charts-box.right .info-table tr td.center-td {
  width: 10px;
}

.rating-charts-box.right .info-table tr td.type-td {
  border-right: none;
  border-left: 6px solid #fff;
}

.rating-charts-box.right .info-table tr td.type-td .type-ul {
  text-align: left;
}

.rating-charts-box.right .info-table tr td.type-td .type-ul li {
  padding: 5px 5px 5px 20px;
}

.rating-charts-box.right .info-table tr td.type-td .type-ul li.is-active {
  background-image: url("/img/arrow-right.svg");
  background-position: left center;
}

@media only screen and (max-width: 1599px) {
  
  .rating-charts-box.big{
    width:auto;
  }
  .rating-charts-box.big {
    margin-left:0;
  }
  
  .trunk.matchon-compare .rating-charts-box .type-ul-mobile {
    display: block;
  }
  .trunk.matchon-compare .rating-charts-box .title-table tr td.left-td {
    width: 0;
  }
  .trunk.matchon-compare .rating-charts-box .title-table tr td.center-td {
    width: 0;
  }
  .trunk.matchon-compare .rating-charts-box .title-table tr td.right-td {
    width: 100%;
  }
  .trunk.matchon-compare .rating-charts-box .info-table tr td.left-td {
    width: 0;
    padding: 0;
  }
  .trunk.matchon-compare .rating-charts-box .info-table tr td.center-td {
    width: 0;
    padding: 0;
    font-size: 0;
  }
  .trunk.matchon-compare .rating-charts-box .info-table tr td.right-td {
    width: 100%;
    padding: 0;
  }
  .trunk.matchon-compare .rating-charts-box .info-table tr td.type-td {
    border: none;
  }
  .trunk.matchon-compare .rating-charts-box .info-table tr td.type-td .type-ul {
    display: none;
  }
  .trunk.matchon-compare .rating-charts-box.right .title-table tr td.left-td {
    width: 100%;
  }
  .trunk.matchon-compare .rating-charts-box.right .title-table tr td.center-td {
    width: 0;
  }
  .trunk.matchon-compare .rating-charts-box.right .title-table tr td.right-td {
    width: 0;
  }
  .trunk.matchon-compare .rating-charts-box.right .info-table tr td.left-td {
    width: 100%;
    padding: 0;
  }
  .trunk.matchon-compare .rating-charts-box.right .info-table tr td.center-td {
    width: 0;
    padding: 0;
    font-size: 0;
  }
  .trunk.matchon-compare .rating-charts-box.right .info-table tr td.right-td {
    width: 0;
    padding: 0;
  }
  .trunk.matchon-compare .rating-charts-box.right .info-table tr td.type-td {
    border: none;
  }
  .trunk.matchon-compare .rating-charts-box.right .info-table tr td.type-td .type-ul {
    display: none;
  }
}
    
/**
 * Game time table...
 */
.game-timeline .game-buttons {
  padding: 10px 0;
  text-align: center;
}

.game-timeline .game-buttons a {
  height: 30px;
  line-height: 30px;
  padding: 0 12px;
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  color: #666666;
  border: 1px solid #666666;
  vertical-align: middle;
}

.game-timeline .game-buttons a:hover {
  color: #E63A79;
  border: 1px solid #E63A79;
}

.game-timeline .game-buttons a.is-active {
  color: #212026;
  background: #E63A79;
  border: 1px solid #E63A79;
  font-weight: bold;
}

.game-timeline .game-time-table {
  border-spacing: 0;
  width: 100%;
}

.game-timeline .game-time-table tr:first-child td {
  border-top: 1px solid #b3b3b3;
  border-bottom: 1px solid #b3b3b3;
  font-size: 16px;
}

.game-timeline .game-time-table tr:first-child td:first-child {
  color: #D0021B;
}

.game-timeline .game-time-table tr:first-child td:last-child {
  color: #4990E2;
}

.game-timeline .game-time-table tr td {
  padding: 5px;
  border-bottom: 1px dashed #4d4d4d;
  height: 26px;
  font-size: 11px;
  color: #fff;
}

.game-timeline .game-time-table tr td span {
  display:inline-block;
  vertical-align: middle;
}

.game-timeline .game-time-table tr td:first-child {
  text-align: right;
  width: 44%;
  padding-right: 10px;
}

.game-timeline .game-time-table tr td:nth-child(2) {
  font-family: "Montserrat", serif;
  font-size: 11px;
  background: black;
  text-align: center;
}

.game-timeline .game-time-table tr td:last-child {
  text-align: left;
  width: 44%;
  padding-left: 10px;
}

/**
 * Custom UI
 */
.ui-segments {
  border: 1px solid #E63A79;
  box-sizing: border-box;
  border-radius: 30px;
  overflow: hidden;
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-block;
  font-size: 0;
}

.ui-segments li {
  margin: 0;
  display: inline-block;
  padding: 5px 10px;
  border-right: 1px solid #E63A79;
  box-sizing: border-box;
  cursor: pointer;
  font-size: 13px;
}

.ui-segments li:first-child {
  padding-left: 15px;
}

.ui-segments li:last-child {
  padding-right: 15px;
  border: none;
}

.ui-segments li.is-active {
  background: #E63A79;
  color: #212026;
}

.ui-segments li:hover {
  background: #780f36;
  color: #fff;
}

/**
 * Mcon
 */
.mcon.goal {
  display: inline-block;
  width: 16px;
  height: 16px;
  vertical-align: middle;
  background-image: url("/img/soccer-ball.svg");
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: left center;
}

.mcon.card {
  display: inline-block;
  vertical-align: middle;
}

.mcon.card:before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 16px;
  background: #fff;
}

.mcon.card.yellow:before {
  background: #F8E81C;
}

.mcon.card.red:before {
  background: #D0021B;
}

.mcon.card.in:before {
  background: url("/img/card-in.svg");
  background-repeat: no-repeat;
  background-position: center center;
  width: 11px;
}

.mcon.card.out:before {
  background: url("/img/card-out.svg");
  background-repeat: no-repeat;
  background-position: center center;
  width: 11px;
}

/**
 * Uniform mark
 */
.uniform-box {
  min-width: 120px;
  min-height: 90px;
  box-sizing: border-box;
  background-image: url("/img/uniforms/no-uniform.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
  position: relative;
}

.uniform-box .uniform-text {
  position: absolute;
  width: 100%;
  bottom: 10px;
  text-align: center;
  color: #fff;
}

.uniform-box .uniform-text span {
  display: block;
}

.uniform-box .uniform-text span.club .club-wrap {
  display: inline-block;
  border-radius: 20px;
  padding: 1px 5px;
  font-size: 11px;
}

.uniform-box .uniform-text span.name {
  font-size: 12px;
  padding: 0;
}

.uniform-box .uniform-text span.no {
  padding: 0;
  font-size: 20px;
  font-weight: bold;
}

.uniform-box.ARS {
  background-image: url("/img/uniforms/ARS-home.png");
}

.uniform-box.ARS .uniform-text {
  color: #ffffff;
}

.uniform-box.ARS .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #97374E;
  background: #ffffff;
}

.uniform-box.ARS.away {
  background-image: url("/img/uniforms/ARS-away.png");
}

.uniform-box.ARS.away .uniform-text {
  color: #113166;
}

.uniform-box.ARS.away .uniform-text .club-wrap {
  color: #F0E525;
  background: #113166;
}

.uniform-box.AVL {
  background-image: url("/img/uniforms/AVL-home.png");
}

.uniform-box.AVL .uniform-text {
  color: #B3DDFE;
}

.uniform-box.AVL .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #95102E;
  background: #B3DDFE;
}

.uniform-box.AVL.away {
  background-image: url("/img/uniforms/AVL-away.png");
}

.uniform-box.AVL.away .uniform-text {
  color: #95102E;
}

.uniform-box.AVL.away .uniform-text .club-wrap {
  color: #B3DDFE;
  background: #95102E;
}

.uniform-box.BHA {
  background-image: url("/img/uniforms/BHA-home.png");
  text-shadow: -1px -1px 0 #DFE0DF, 1px -1px 0 #DFE0DF, -1px 1px 0 #DFE0DF, 1px 1px 0 #DFE0DF;
}

.uniform-box.BHA .uniform-text {
  color: #15255B;
}

.uniform-box.BHA .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #ffffff;
  background: #15255B;
}

.uniform-box.BHA.away {
  background-image: url("/img/uniforms/BHA-away.png");
  text-shadow: -1px -1px 0 #1C1B1C, 1px -1px 0 #1C1B1C, -1px 1px 0 #1C1B1C, 1px 1px 0 #1C1B1C;
}

.uniform-box.BHA.away .uniform-text {
  color: #fff;
}

.uniform-box.BHA.away .uniform-text .club-wrap {
  color: #000;
  background: #fff;
}

.uniform-box.BOU {
  background-image: url("/img/uniforms/BOU-home.png");
}

.uniform-box.BOU .uniform-text {
  color: #fff;
}

.uniform-box.BOU .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #BA4545;
  background: #fff;
}

.uniform-box.BOU.away {
  background-image: url("/img/uniforms/BOU-away.png");
}

.uniform-box.BOU.away .uniform-text {
  color: #E966EA;
}

.uniform-box.BOU.away .uniform-text .club-wrap {
  color: #051A37;
  background: #E966EA;
}

.uniform-box.BUR {
  background-image: url("/img/uniforms/BUR-home.png");
}

.uniform-box.BUR .uniform-text {
  color: #A0CBFE;
}

.uniform-box.BUR .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #950D2D;
  background: #A0CBFE;
}

.uniform-box.BUR.away {
  background-image: url("/img/uniforms/BUR-away.png");
}

.uniform-box.BUR.away .uniform-text {
  color: #950D2D;
}

.uniform-box.BUR.away .uniform-text .club-wrap {
  color: #A0CBFE;
  background: #950D2D;
}

.uniform-box.CHE {
  background-image: url("/img/uniforms/CHE-home.png");
}

.uniform-box.CHE .uniform-text {
  color: #ffffff;
}

.uniform-box.CHE .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #16173B;
  background: #ffffff;
}

.uniform-box.CHE.away {
  background-image: url("/img/uniforms/CHE-away.png");
}

.uniform-box.CHE.away .uniform-text {
  color: #050567;
}

.uniform-box.CHE.away .uniform-text .club-wrap {
  color: #ffffff;
  background: #050567;
}

.uniform-box.CRY {
  background-image: url("/img/uniforms/CRY-home.png");
  text-shadow: -1px -1px 0 #DB2929, 1px -1px 0 #DB2929, -1px 1px 0 #DB2929, 1px 1px 0 #DB2929;
}

.uniform-box.CRY .uniform-text {
  color: #ffffff;
}

.uniform-box.CRY .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #2D22DB;
  background: #ffffff;
}

.uniform-box.CRY.away {
  background-image: url("/img/uniforms/CRY-away.png");
  text-shadow: -1px -1px 0 #1C1C1C, 1px -1px 0 #1C1C1C, -1px 1px 0 #1C1C1C, 1px 1px 0 #1C1C1C;
}

.uniform-box.CRY.away .uniform-text {
  color: #ffffff;
}

.uniform-box.CRY.away .uniform-text .club-wrap {
  color: #000000;
  background: #ffffff;
}

.uniform-box.EVE {
  background-image: url("/img/uniforms/EVE-home.png");
}

.uniform-box.EVE .uniform-text {
  color: #ffffff;
}

.uniform-box.EVE .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #2800CB;
  background: #ffffff;
}

.uniform-box.EVE.away {
  background-image: url("/img/uniforms/EVE-away.png");
}

.uniform-box.EVE.away .uniform-text {
  color: #000000;
}

.uniform-box.EVE.away .uniform-text .club-wrap {
  color: #F77D73;
  background: #000000;
}

.uniform-box.LEI {
  background-image: url("/img/uniforms/LEI-home.png");
}

.uniform-box.LEI .uniform-text {
  color: #DEC07F;
}

.uniform-box.LEI .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #302CB0;
  background: #DEC07F;
}

.uniform-box.LEI.away {
  background-image: url("/img/uniforms/LEI-away.png");
}

.uniform-box.LEI.away .uniform-text {
  color: #000000;
}

.uniform-box.LEI.away .uniform-text .club-wrap {
  color: #F17CC1;
  background: #000000;
}

.uniform-box.LIV {
  background-image: url("/img/uniforms/LIV-home.png");
}

.uniform-box.LIV .uniform-text {
  color: #FAE020;
}

.uniform-box.LIV .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #BA3535;
  background: #FAE020;
}

.uniform-box.LIV.away {
  background-image: url("/img/uniforms/LIV-away.png");
}

.uniform-box.LIV.away .uniform-text {
  color: #113166;
}

.uniform-box.LIV.away .uniform-text .club-wrap {
  color: #ffffff;
  background: #113166;
}

.uniform-box.MCI {
  background-image: url("/img/uniforms/MCI-home.png");
}

.uniform-box.MCI .uniform-text {
  color: #6F27BF;
}

.uniform-box.MCI .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #97BCE8;
  background: #6F27BF;
}

.uniform-box.MCI.away {
  background-image: url("/img/uniforms/MCI-away.png");
}

.uniform-box.MCI.away .uniform-text {
  color: #F6EE63;
}

.uniform-box.MCI.away .uniform-text .club-wrap {
  color: #0B0B0B;
  background: #F6EE63;
}

.uniform-box.MUN {
  background-image: url("/img/uniforms/MUN-home.png");
}

.uniform-box.MUN .uniform-text {
  color: #000000;
}

.uniform-box.MUN .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #ffffff;
  background: #000000;
}

.uniform-box.MUN.away {
  background-image: url("/img/uniforms/MUN-away.png");
}

.uniform-box.MUN.away .uniform-text {
  color: #191A1B;
}

.uniform-box.MUN.away .uniform-text .club-wrap {
  color: #E7E0D2;
  background: #191A1B;
}

.uniform-box.NEW {
  background-image: url("/img/uniforms/NEW-home.png");
  text-shadow: -1px -1px 0 #323232, 1px -1px 0 #323232, -1px 1px 0 #323232, 1px 1px 0 #323232;
}

.uniform-box.NEW .uniform-text {
  color: #ffffff;
}

.uniform-box.NEW .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #000000;
  background: #ffffff;
}

.uniform-box.NEW.away {
  background-image: url("/img/uniforms/NEW-away.png");
  text-shadow: -1px -1px 0 #262725, 1px -1px 0 #262725, -1px 1px 0 #262725, 1px 1px 0 #262725;
}

.uniform-box.NEW.away .uniform-text {
  color: #ffffff;
}

.uniform-box.NEW.away .uniform-text .club-wrap {
  color: #3A4C25;
  background: #ffffff;
}

.uniform-box.NOR {
  background-image: url("/img/uniforms/NOR-home.png");
}

.uniform-box.NOR .uniform-text {
  color: #000000;
}

.uniform-box.NOR .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #E2D525;
  background: #000000;
}

.uniform-box.NOR.away {
  background-image: url("/img/uniforms/NOR-away.png");
}

.uniform-box.NOR.away .uniform-text {
  color: #CEBD3D;
}

.uniform-box.NOR.away .uniform-text .club-wrap {
  color: #E01F20;
  background: #CEBD3D;
}

.uniform-box.SHU {
  background-image: url("/img/uniforms/SHU-home.png");
  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

.uniform-box.SHU .uniform-text {
  color: #000000;
}

.uniform-box.SHU .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #D82727;
  background: #000000;
}

.uniform-box.SHU.away {
  background-image: url("/img/uniforms/SHU-away.png");
  text-shadow: -1px -1px 0 #DCDDDC, 1px -1px 0 #DCDDDC, -1px 1px 0 #DCDDDC, 1px 1px 0 #DCDDDC;
}

.uniform-box.SHU.away .uniform-text {
  color: #000000;
}

.uniform-box.SHU.away .uniform-text .club-wrap {
  color: #E6E6E6;
  background: #000000;
}

.uniform-box.SOU {
  background-image: url("/img/uniforms/SOU-home.png");
  text-shadow: -1px -1px 0 #ffffff, 1px -1px 0 #ffffff, -1px 1px 0 #ffffff, 1px 1px 0 #ffffff;
}

.uniform-box.SOU .uniform-text {
  color: #191919;
}

.uniform-box.SOU .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #ffffff;
  background: #191919;
}

.uniform-box.SOU.away {
  background-image: url("/img/uniforms/SOU-away.png");
  text-shadow: -1px -1px 0 #646564, 1px -1px 0 #646564, -1px 1px 0 #646564, 1px 1px 0 #646564;
}

.uniform-box.SOU.away .uniform-text {
  color: #DBDE26;
}

.uniform-box.SOU.away .uniform-text .club-wrap {
  color: #646564;
  background: #DBDE26;
}

.uniform-box.TOT {
  background-image: url("/img/uniforms/TOT-home.png");
}

.uniform-box.TOT .uniform-text {
  color: #113166;
}

.uniform-box.TOT .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #ffffff;
  background: #113166;
}

.uniform-box.TOT.away {
  background-image: url("/img/uniforms/TOT-away.png");
}

.uniform-box.TOT.away .uniform-text {
  color: #ffffff;
}

.uniform-box.TOT.away .uniform-text .club-wrap {
  color: #112962;
  background: #ffffff;
}

.uniform-box.WAT {
  background-image: url("/img/uniforms/WAT-home.png");
  text-shadow: -1px -1px 0 #E7E150, 1px -1px 0 #E7E150, -1px 1px 0 #E7E150, 1px 1px 0 #E7E150;
}

.uniform-box.WAT .uniform-text {
  color: #000000;
}

.uniform-box.WAT .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #E7E150;
  background: #000000;
}

.uniform-box.WAT.away {
  background-image: url("/img/uniforms/WAT-away.png");
  text-shadow: -1px -1px 0 #566497, 1px -1px 0 #566497, -1px 1px 0 #566497, 1px 1px 0 #566497;
}

.uniform-box.WAT.away .uniform-text {
  color: #ffffff;
}

.uniform-box.WAT.away .uniform-text .club-wrap {
  color: #334382;
  background: #ffffff;
}

.uniform-box.WHU {
  background-image: url("/img/uniforms/WHU-home.png");
}

.uniform-box.WHU .uniform-text {
  color: #A0CBFE;
}

.uniform-box.WHU .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #95102E;
  background: #A0CBFE;
}

.uniform-box.WHU.away {
  background-image: url("/img/uniforms/WHU-away.png");
}

.uniform-box.WHU.away .uniform-text {
  color: #000000;
}

.uniform-box.WHU.away .uniform-text .club-wrap {
  color: #89B3E5;
  background: #000000;
}

.uniform-box.WOL {
  background-image: url("/img/uniforms/WOL-home.png");
}

.uniform-box.WOL .uniform-text {
  color: #000000;
}

.uniform-box.WOL .uniform-text .club-wrap {
  text-shadow: none !important;
  color: #D0AE36;
  background: #000000;
}

.uniform-box.WOL.away {
  background-image: url("/img/uniforms/WOL-away.png");
}

.uniform-box.WOL.away .uniform-text {
  color: #C5A023;
}

.uniform-box.WOL.away .uniform-text .club-wrap {
  color: #1A1819;
  background: #C5A023;
}

.uniform-box.LEE { background-image: url("/img/uniforms/LEE-home.png"); }
.uniform-box.LEE .uniform-text { color: #191A1B; }
.uniform-box.LEE .uniform-text .club-wrap { color: #E7E0D2; background: #191A1B; }
.uniform-box.LEE.away { background-image: url("/img/uniforms/LEE-away.png"); text-shadow: -1px -1px 0 #566497, 1px -1px 0 #566497, -1px 1px 0 #566497, 1px 1px 0 #566497; }
.uniform-box.LEE.away .uniform-text { color: #ffffff; }
.uniform-box.LEE.away .uniform-text .club-wrap { color: #334382; background: #ffffff; }

.uniform-box.WBA { background-image: url("/img/uniforms/WBA-home.png"); text-shadow: -1px -1px 0 #DFE0DF, 1px -1px 0 #DFE0DF, -1px 1px 0 #DFE0DF, 1px 1px 0 #DFE0DF;}
.uniform-box.WBA .uniform-text { color: #15255B; }
.uniform-box.WBA .uniform-text .club-wrap { text-shadow: none !important; color: #ffffff; background: #15255B; }
.uniform-box.WBA.away { background-image: url("/img/uniforms/WBA-away.png"); }
.uniform-box.WBA.away .uniform-text { color: #000000; }
.uniform-box.WBA.away .uniform-text .club-wrap { text-shadow: none !important; color: #E2D525; background: #000000; }

.uniform-box.FUL { background-image: url("/img/uniforms/FUL-home.png"); }
.uniform-box.FUL .uniform-text { color: #113166; }
.uniform-box.FUL .uniform-text .club-wrap { text-shadow: none !important;color: #ffffff;background: #113166; }
.uniform-box.FUL.away { background-image: url("/img/uniforms/FUL-away.png"); }
.uniform-box.FUL.away .uniform-text { color: #113166; }
.uniform-box.FUL.away .uniform-text .club-wrap { color: #F0E525; background: #113166; }

/**
 * Scroll Tabs customizing...
 */
.scrolled-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #514f5d;
}

.scrolled-tabs.scroll_tabs_container {
  position: relative;
  top: 0px;
  left: 0px;
  right: 0px;
  text-align: left;
  height: 28px;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_left_button {
  height: 28px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-right: 1px solid #514f5d;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_left_button:before {
  display: block;
  font-family: "Entypo";
  text-align: center;
  content: "\e75d";
  line-height: 28px;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_left_button:hover {
  background-color: #393742;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_left_button.scroll_tab_left_button_disabled:before {
  color: #454350;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_right_button {
  height: 28px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border-left: 1px solid #514f5d;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_right_button:before {
  display: block;
  font-family: "Entypo";
  text-align: center;
  content: "\e75e";
  line-height: 28px;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_right_button:hover {
  background-color: #393742;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_right_button.scroll_tab_left_button_disabled:before {
  color: #454350;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_inner {
  height: 28px;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_inner li {
  padding-left: 20px;
  padding-right: 20px;
  line-height: 28px;
  font-size: 12px;
  color: #fff;
  display: -moz-inline-stack;
  display: inline-block;
  *display: inline;
  list-style-type: none;
  box-sizing: border-box;
  border-right: 1px solid #514f5d;
  cursor: pointer;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_inner li:hover {
  background: #8B3AE8;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_inner li.is-active {
  background: #E63A79;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_inner li.is-active:hover {
  background: #d21b5e;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_inner li .goal {
  background: url("/img/soccer-ball.svg") no-repeat center center;
  background-size: contain;
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  padding: 0;
  border: none;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_inner li .time {
  vertical-align: middle;
  padding: 0 5px;
}

.scrolled-tabs.scroll_tabs_container .scroll_tab_inner .scroll_tab_left_finisher, .scrolled-tabs.scroll_tabs_container .scroll_tab_inner .scroll_tab_right_finisher {
  padding: 0;
  width: 0;
}

/**
 * A.I. News
 */
.news-card {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #666666;
  cursor: pointer;
  display: block;
  position: relative;
  padding: 10px;
  margin-bottom: 20px;
}

.news-card .new {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px 20px;
  font-style: italic;
  font-weight: bold;
}

.news-card .title {
  background-image: url("/img/title-ainews-gray.png");
  background-position: top center;
  background-size: 117px 22px;
  background-repeat: no-repeat;
  height: 30px;
  border-bottom: 1px solid #4d4d4d;
}

.news-card .title span {
  display: none;
}

.news-card .title.round {background:none;padding-bottom:5px;}
.news-card .title.round span {display:block;line-height:30px;text-align:center;font-size:16px;font-weight:bold;color:#fff;}
.news-card .title.round span strong {color:#E63A79;font-size:18px;}

.news-card .date {
  text-align: center;
  padding: 2px 0;
  font-size: 12px;
  color: #666666;
}

.news-card .vs {
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
  padding: 5px 0;
  position: relative;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  color: #fff;
}

.news-card .vs:after {
  position: absolute;
  content: '';
  border-bottom: solid 1px gray;
  width: 100%;
  bottom: -5px;
  left: 0;
}

.news-card .vs .score {
  padding: 0 8px;
}

.news-card .vs .score strong {
  color: #E63A79;
}

.news-card .vss {
  padding: 0 10px;
}
.news-card .vss:after {
  display:block;
  content:"";
  clear:both;
}
.news-card .vss .left {
  float:left;
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 5px;
  color: #fff;
}
.news-card .vss .right {
  float:right;
  padding-bottom: 5px;
}

.news-card .vss table {
  width: 100%;
  border-bottom: 1px solid #4d4d4d;
}

.news-card .vss table tr td:first-child {
  text-align: left;
  font-size: 16px;
  font-weight: bold;
  padding-bottom: 5px;
  color: #fff;
}

.news-card .vss .left .score,
.news-card .vss table tr td:first-child .score {
  padding: 0 10px;
}

.news-card .vss .left .score strong,
.news-card .vss table tr td:first-child .score strong {
  color: #E63A79;
}

.news-card .vss table tr td:last-child {
  text-align: right;
  padding-bottom: 5px;
}

.news-card .box {
  padding: 10px;
}

.news-card .box h1 {
  color: #fff;
  font-size: 16px;
  max-height:36px;
  line-height:18px;
  overflow:hidden;
  text-overflow:ellipsis;
  word-wrap:break-word;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.news-card .box .desc {
  font-size: 14px;
  color: #4d4d4d;
  max-height:32px;
  line-height:16px;
  overflow:hidden;
  text-overflow:ellipsis;
  word-wrap:break-word;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}

.news-card .read {
  padding: 0 10px;
}

.news-card .read a {
  font-family: "Montserrat", serif;
  font-size: 12px;
  text-decoration: none;
}

.news-card:hover {
  border: 1px solid #E63A79;
}

.news-card:hover .title {
  background-image: url("/img/title-ainews-pink.png");
}
.news-card:hover .title.round {background-image:none;}

.news-card:hover .vs {
  border-color: #E63A79;
}

.news-card:hover .vs:after {
  border-color: #E63A79;
}

.news-card:hover .box h1 {
  color: #E63A79;
}

.news-card:hover .box .desc {
  color: #fff;
}

.news-card.is-active {
  border-color: #E63A79;
}

.news-card.index {
  background: #E63A79;
  border: 1px solid #E63A79;
  width: 100%;
  position: relative;
  cursor:initial;
}

.news-card.index .title {
  background-image: url("/img/title-ainews-black.png");
  border-color: #a5154a;
}

.news-card.index .round {
  position: absolute;
  color: #212026;
  vertical-align: middle;
  display: table;
  width: calc(100% - 20px);
  height: calc(100% - 50px);
}

.news-card.index .round span {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  font-size: 60px;
  font-weight: bold;
}
.news-card.index .round .badge-club {display:none;}

.news-card.index .round.tname {display:block;text-align:center;}
.news-card.index .round.tname span {display:block; font-size:50px; }
.news-card.index .round.tname .badge-club {display:inline-block;;margin:55px 0 25px;transform:scale(2.6);}

/**
 * A.I. News...
 */
.summary-left-box {
  color: #fff;
  padding: 10px;
}

.summary-left-box h1 {
  font-size: 30px;
  line-height: 30px;
  padding: 0;
  margin: 0;
}

.summary-left-box p {
  font-size: 16px;
  line-height: 140%;
  padding: 0;
  margin: 0;
}

.summary-chart-box {
  width: 100%;
  border-spacing: 0;
  margin: 50px 0;
}

.summary-chart-box tr td {
  text-align: center;
}

.summary-chart-box tr td .club-wrap {
  display: inline-block;
  text-align: center;
}

.summary-chart-box tr td .club-wrap .spoint {
  font-family: "Montserrat", serif;
  display: block;
  font-size: 56px;
}

.summary-chart-box tr td .club-wrap .sclub {
  font-size: 20px;
}

.summary-chart-box tr td .summary-gauge .gchart-wrap .chart-label {
  top: 10px;
  color: #666666;
  font-size: 10px;
  font-weight: bold;
}

.summary-chart-box tr td:first-child {
  text-align: right;
}

.summary-chart-box tr td:first-child .sclub {
  color: #D0021B;
}

.summary-chart-box tr td:last-child {
  text-align: left;
}

.summary-chart-box tr td:last-child .sclub {
  color: #4990E2;
}

.summary-right-box {
  border-left: 1px solid #999999;
  box-sizing: border-box;
}

.summary-right-box .summary-score {
  font-size: 24px;
  font-weight: bold;
  padding: 20px 0;
  text-align: center;
  color: #fff;
  line-height:34px;
}
.summary-right-box .summary-score:after {display:block;content:"";clear:both;}

.summary-right-box .summary-score .score {
  float:left;
  font-size: 30px;
  font-weight: bold;
  display:block;
  width:110px;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  
}

.summary-right-box .summary-score .left-club {
  float:left;
  color: #D0021B;
  text-align:right;
  display:block;
  width:calc((100% - 110px - 0.1px)/2);
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.summary-right-box .summary-score .right-club {
  float:left;
  color: #4990E2;
  text-align:left;
  display:block;
  width:calc((100% - 110px - 0.1px)/2);
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.summary-right-box .summary-gauge-chart {
  display: table;
  border-spacing: 0;
  width: 100%;
}

.summary-right-box .summary-gauge-chart .left {
  padding: 0 10px;
  display: table-cell;
  width: 50%;
  text-align: center;
}

.summary-right-box .summary-gauge-chart .left .shoot-wrap .value {
  color: #E63A79;
}

.summary-right-box .summary-gauge-chart .right {
  padding: 0 10px;
  display: table-cell;
  text-align: center;
}

.summary-right-box .summary-gauge-chart .right .shoot-wrap .value {
  color: #8B3AE8;
}

.summary-right-box .summary-gauge-chart .gchart-wrap {
  display: inline-block;
  margin: 0;
  padding: 0;       
  width:130px;
}

.summary-right-box .summary-gauge-chart .shoot-wrap {
  padding: 6px 0;
  text-align: center;
  border-top: 1px solid #666666;
  border-bottom: 1px solid #666666;
}

.summary-right-box .summary-gauge-chart .shoot-wrap .label {
  font-family: "Montserrat", serif;
  font-size: 10px;
  vertical-align: middle;
  color: #999999;
}

.summary-right-box .summary-gauge-chart .shoot-wrap .value {
  font-size: 20px;
  vertical-align: middle;
}

.summary-right-box .summary-game-chart {
  margin-top:20px;
}

.summary-right-box .summary-graph-chart {
  padding: 10px 20% 20px;
}

@media only screen and (max-width: 1599px) 
{
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap {width:120px;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-value {font-size:28px;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-label {font-size:14px;}
}
@media only screen and (max-width: 1199px)
{
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap {width:100px;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-value {font-size:24px;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-label {font-size:12px;}
    .trunk.ainews-view .summary-right-box .summary-graph-chart {padding-left:10px;padding-right:10px;}
}
@media only screen and (max-width: 991px)
{
    .trunk.ainews-view .summary-chart-box {margin:20px 0;}
    .trunk.ainews-view .summary-right-box {margin-top:50px;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap {width:130px;padding:0 10px;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-value {font-size:30px;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-label {font-size:16px;}
    .trunk.ainews-view .summary-right-box .summary-graph-chart {padding-left:15%;padding-right:15%;}
}
@media only screen and (max-width: 767px)
{
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap {width:100px;padding:0;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-value {font-size:24px;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-label {font-size:12px;}
    .trunk.ainews-view .summary-right-box .summary-graph-chart {padding-left:10px;padding-right:10px;}
}
@media only screen and (max-width: 575px)
{
    
}
@media only screen and (max-width: 510px)
{
    .trunk.ainews-view .summary-chart-box {margin:0;}
    .trunk.ainews-view .summary-chart-box tr td .club-wrap .spoint {font-size:48px;}
    .trunk.ainews-view .summary-chart-box tr td .club-wrap .sclub  {font-size:18px;}
    .trunk.ainews-view .summary-right-box .summary-score {font-size:20px;}
    .trunk.ainews-view .summary-right-box .summary-score .score {font-size:26px;width:90px;}
    .trunk.ainews-view .summary-right-box .summary-score .left-club  {width:calc((100% - 90px - 0.1px)/2);}
    .trunk.ainews-view .summary-right-box .summary-score .right-club {width:calc((100% - 90px - 0.1px)/2);}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap {width:48%;padding:0;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-value {font-size:18px;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-label {font-size:10px;}
}
@media only screen and (max-width: 410px)
{
    .trunk.ainews-view .summary-chart-box tr td .club-wrap .spoint {font-size:46px;}
    .trunk.ainews-view .summary-chart-box tr td .club-wrap .sclub  {font-size:16px;}
    .trunk.ainews-view .summary-right-box {margin-top:30px;}
    /*
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap {display:block;width:80%;margin:0 auto;padding:0;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-value {font-size:22px;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-label {font-size:16px;}
    */
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-value {font-size:14px;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-label {font-size:8px;}
}
@media only screen and (max-width: 374px)
{
    .trunk.ainews-view .summary-chart-box tr td .club-wrap .spoint {font-size:40px;}
    .trunk.ainews-view .summary-chart-box tr td .club-wrap .sclub  {font-size:14px;}
    .trunk.ainews-view .summary-right-box .summary-score {font-size:18px;}
    .trunk.ainews-view .summary-right-box .summary-score .score {font-size:24px;width:80px;}
    .trunk.ainews-view .summary-right-box .summary-score .left-club  {width:calc((100% - 80px - 0.1px)/2);}
    .trunk.ainews-view .summary-right-box .summary-score .right-club {width:calc((100% - 80px - 0.1px)/2);}
    /*
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap {display:block;width:80%;margin:0 auto;padding:0;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-value {font-size:20px;}
    .trunk.ainews-view .summary-right-box .summary-gauge-chart .gchart-wrap .chart-label {font-size:13px;}
    */
}

@media only screen and (min-width: 1600px) {}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {}
@media only screen and (min-width: 992px) and (max-width: 1199px) {}
@media only screen and (min-width: 768px) and (max-width: 991px) {}
@media only screen and (min-width: 576px) and (max-width: 767px) {}
@media only screen and (max-width: 575px) {}

/**
 * Stick graph
 */
.stick-graph .stick-title {
  margin: 0;
  padding: 5px;
  text-align: center;
  font-size: 11px;
  font-family: "Montserrat", serif;
  font-weight: bold;
  color: #696679;
}

.stick-graph .stick {
  width: 100%;
  height: 20px;
  line-height: 20px;
  background: #4990E2;
  font-size: 12px;
  font-family: "Montserrat", serif;
  font-weight: bold;
  color: #fff;
  position: relative;
}

.stick-graph .stick .graph {
  position: absolute;
  left: 0;
  top: 0;
  width: calc((182 / (182 + 135) * 100%));
  height: 20px;
  background: #D0021B;
  z-index: 1;
}

.stick-graph .stick .left {
  position: absolute;
  left: 0;
  top: 0;
  padding-left: 10px;
  z-index: 2;
}

.stick-graph .stick .right {
  position: absolute;
  right: 0;
  top: 0;
  padding-right: 10px;
  z-index: 2;
}

/**
 * Half table...
 */
.half-table-wrap h2 {
  text-align: center;
  color: #fff;
  font-size: 20px;
  margin: 0;
  padding: 20px 0;
}

.half-table-wrap .half-table {
  width: 100%;
  border-spacing: 1px;
  background: #666666;
}

.half-table-wrap .half-table tr:first-child td {
  padding: 5px 0;
  color: gray;
  background: black;
}

.half-table-wrap .half-table tr:last-child {
  height: 40px;
}

.half-table-wrap .half-table tr td {
  padding: 5px 0;
  text-align: center;
  color: #fff;
  background: #212026;
}

.half-table-wrap .half-table tr td.arrow-1 {
  background-image: url("/img/arrow-1.png");
  background-size: 25px 25px;
  background-position: center center;
  background-repeat: no-repeat;
}

.half-table-wrap .half-table tr td.arrow-2 {
  background-image: url("/img/arrow-2.png");
  background-size: 40px 40px;
  background-position: center center;
  background-repeat: no-repeat;
}

.half-table-wrap .half-table tr td.arrow-3 {
  background-image: url("/img/arrow-3.png");
  background-size: 35px 35px;
  background-position: center center;
  background-repeat: no-repeat;
}

.half-table-wrap .half-table tr td.color-mix-0 {
  background-color: #075185;
}

.half-table-wrap .half-table tr td.color-mix-10 {
  background-color: #07557e;
}

.half-table-wrap .half-table tr td.color-mix-20 {
  background-color: #075977;
}

.half-table-wrap .half-table tr td.color-mix-30 {
  background-color: #075e70;
}

.half-table-wrap .half-table tr td.color-mix-40 {
  background-color: #076269;
}

.half-table-wrap .half-table tr td.color-mix-50 {
  background-color: #076662;
}

.half-table-wrap .half-table tr td.color-mix-60 {
  background-color: #066a5a;
}

.half-table-wrap .half-table tr td.color-mix-70 {
  background-color: #066e53;
}

.half-table-wrap .half-table tr td.color-mix-80 {
  background-color: #06734c;
}

.half-table-wrap .half-table tr td.color-mix-90 {
  background-color: #067745;
}

.half-table-wrap .half-table tr td.color-mix-100 {
  background-color: #067b3e;
}

.half-table-wrap .half-table tr td .hname {
  font-weight: bold;
}

.half-table-wrap .half-table tr td .hname.red {
  color: #D0021B;
}

.half-table-wrap .half-table tr td .hname.blue {
  color: #4990E2;
}

.half-table-wrap .half-legend {
  width: 80%;
  margin: 30px auto;
}

.half-table-wrap .half-legend tr:first-child td {
  color: #fff;
  font-weight: bold;
  padding: 0 !important;
  background: -webkit-linear-gradient(left, #075185, #067B3E);
  background: -moz-linear-gradient(left, #075185, #067B3E);
  background: linear-gradient(to right, #075185, #067B3E);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#075185', endColorstr='#067B3E', GradientType=0 );
}

.half-table-wrap .half-legend tr:first-child td .left {
  float: left;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 14px;
}

.half-table-wrap .half-legend tr:first-child td .right {
  float: right;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  font-size: 14px;
}

.half-table-wrap .half-legend tr td {
  color: #fff;
  font-size: 36px;
  text-align: center;
  padding: 20px;
}

.half-table-wrap .half-legend tr td.left {
  text-align: left;
}

.half-table-wrap .half-legend tr td.right {
  text-align: right;
}

@media only screen and (max-width: 767px)
{
    .half-table-wrap .half-legend {width:80%;margin:30px auto 0;}
    .half-table-wrap .half-legend tr td {padding-bottom:10px;}
}

@media only screen and (min-width: 1600px) {}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {}
@media only screen and (min-width: 992px) and (max-width: 1199px) {}
@media only screen and (min-width: 768px) and (max-width: 991px) {}
@media only screen and (min-width: 576px) and (max-width: 767px) {}
@media only screen and (max-width: 575px) {}

.play-info-box {
  text-align: center;
  padding: 10px 0;
}

.play-info-box .time {
  color: #00FF87;
}

.play-info-box .status {
  font-weight: bold;
  font-size: 16px;
  color: #fff;
}

.play-info-box .status.home {
    color:#D0021B;
}

.play-info-box .status.away {
    color:#4990E2;
}

.play-info-list {
  margin-bottom:20px;
  text-align:center;    
}

.play-info-list:after {
  display:block;
  content:"";
  clear:both;
}

.play-info-list .play-info-box {
  display:inline-block;
  margin-left:15px;
  padding:5px 0;
  cursor:pointer;
}

.play-info-list .play-info-box:first-child {
  margin-left:0;
}

.play-info-list .play-info-box.is-active {
  border-bottom:2px solid #fff;
}

.play-map-box .play-map-wrap {
  margin: 0 auto;
  position: relative;
}

.play-map-box .play-map-wrap .btn-play {display:none;z-index:3;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:18%;height:auto;font-size:0;border-radius:50%;opacity:1;background:url('../img/video_icon_play01.png') no-repeat center center;background-size:contain;}
.play-map-box .play-map-wrap .btn-play:before {display:block;content:"";padding-bottom:100%;}
.play-map-box .play-map-wrap .btn-play:hover {background-image:url('../img/video_icon_play01_on.png');}
.play-map-box .play-map-wrap .btn-play.on {display:block;}

.play-map-box .play-map-wrap .video-player {/*display:none;*/z-index:4;position:absolute;left:0;top:0;width:100%;height:100%;background:#000;opacity:0;transform:scale(0);transition:opacity 0.5s,transform 0.3s;}
.play-map-box .play-map-wrap .video-player.on {display:block;opacity:1;transform:scale(1);transition:opacity 0.5s,transform 0.3s;}
.play-map-box .play-map-wrap .video-player video {display:block;width:100%;height:100%;}
.play-map-box .play-map-wrap .video-player .ctrls {position:absolute;left:0;top:0;width:100%;height:100%;opacity:0;transition:opacity 0.4s;}
/*.play-map-box .play-map-wrap .video-player .ctrls:hover,*/
.play-map-box .play-map-wrap .video-player .ctrls.on {opacity:1;transition:opacity 0.4s;}
.play-map-box .play-map-wrap .video-player .ctrls .btn-full {position:absolute;top:5px;left:5px;display:block;padding:5px 10px;font-size:12px;color:#fff;text-decoration:none;background-color:rgba(255,255,255,0.3);}
.play-map-box .play-map-wrap .video-player .ctrls .btn-full:hover {color:#00FF87;}
.play-map-box .play-map-wrap .video-player .ctrls .btn-close {position:absolute;top:5px;right:5px;display:block;padding:5px 10px;font-size:12px;color:#fff;text-decoration:none;background-color:rgba(255,255,255,0.3);}
.play-map-box .play-map-wrap .video-player .ctrls .btn-close:hover {color:#00FF87;}
.play-map-box .play-map-wrap .video-player .ctrls .btn-control {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:18%;height:auto;font-size:0;border-radius:50%;background:no-repeat center center;background-size:contain;}
.play-map-box .play-map-wrap .video-player .ctrls .btn-control:before {display:block;content:"";padding-bottom:100%;}
.play-map-box .play-map-wrap .video-player .ctrls .btn-control.play {background-image:url('../img/video_icon_play01.png');}
.play-map-box .play-map-wrap .video-player .ctrls .btn-control.play:hover,
.play-map-box .play-map-wrap .video-player .ctrls .btn-control.play.on {background-image:url('../img/video_icon_play01_on.png');}
.play-map-box .play-map-wrap .video-player .ctrls .btn-control.pause {display:none;background-image:url('../img/video_icon_pause01.png');}
.play-map-box .play-map-wrap .video-player .ctrls .btn-control.pause:hover,
.play-map-box .play-map-wrap .video-player .ctrls .btn-control.pause.on {background-image:url('../img/video_icon_pause01_on.png');}

@media only screen and (min-width: 768px) {
    .play-map-box .play-map-wrap .video-player .ctrls:hover {opacity:1;transition:opacity 0.4s;}
}

.play-map-box .play-map-wrap #play-map-chart {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.play-map-box .play-map-wrap .play-map-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("/img/mio-soccer-line.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-color: #212026;
  background-position: center center;
  box-sizing: border-box;
  z-index: 1;
}

.play-goal-box .play-goal-wrap {
  width: 110px;
  position: relative;
}

.play-goal-box .play-goal-wrap #goalpost-chart {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.play-goal-box .play-goal-wrap .goalpost-dis {
  position: absolute;
  left: 0;
  bottom: 0;
  top: auto;
  width: 100%;
  height: 30px;
  line-height: 30px;
  font-weight: bold;
  text-decoration: none;
  font-size: 14px;
  z-index: 3;
  text-align: center;
}

.play-goal-box .play-goal-wrap .goalpost-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  background-image: url("/img/soccer-goalpost.svg");
  background-repeat: no-repeat;
  background-size: 100%;
  background-color: #212026;
  opacity: 0.5;
}

@media only screen and (max-width: 991px) {
  .play-goal-box {
    text-align: center;
    padding: 20px 0 0;
  }
  .play-goal-box .play-goal-wrap {
    margin: 0 auto;
  }
}

/**
 * Basic UI Customize...
 */
select {
  min-width: 120px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 14px;
  background-color: transparent;
  border: 1px solid #fff;
  background-image: url("/img/ui-select-arrow.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 28px;
  color: #fff;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
select option {color:#000;}

select::-ms-expand {
  display: none;
}

select:focus {
  outline: 0 none;
  border: 1px solid #fff;
  box-shadow: 0 1px 1px rgba(255, 255, 255, 0.075) inset, 0 0 4px rgba(255, 255, 255, 0.6);
}

/**
 * RWD
 */
@media only screen and (max-width: 575px) {
  .root-wrap {
    padding-top: 40px;
  }
  .header-m {
    display: block;
  }
  .tip-club {
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 40, 40, 0.9);
    box-sizing: border-box;
    overflow-y: scroll;
    line-height: 40px;
  }
  .tip-club .tip-m-close {
    display: block;
    text-align: center;
  }
  .tip-club .tip-m-close .btn-close-club {
    text-decoration: none;
    border: 1px solid #fff;
    padding: 5px;
    padding-right: 10px;
    border-radius: 20px;
  }
  .tip-club .tip-m-close .btn-close-club:hover {
    background: #E63A79;
    color: #212026;
    border: none;
  }
  .tip-club .club-links {
    padding: 10px 0 40px 0;
  }
  .tip-club .club-links a {
    display: block;
    text-align: left;
    text-decoration: none;
    border-bottom: 1px solid #514f5d;
  }
  .tip-club .club-links a:hover {
    color: #E63A79;
    background: rgba(255, 255, 255, 0.05);
  }
  .tip-club .club-links a .club-label {
    display: inline;
  }
  .tip-club .club-links a .club-label .t3 {
    padding: 0 5px;
    font-weight: 600;
    color: #b3b3b3;
  }
  .trunk.main .stem:before {
    background: none;
  }
  .trunk.main .stem .round-top-wrap {
    min-height: 400px;
  }
  .trunk.main .stem .round-top-wrap .round-top-info {
    text-align: center;
  }
  .trunk.main .stem .round-top-wrap .round-top-info .layer {
    display: block;
    padding-bottom: 10px;
  }
  .trunk.main .stem .round-top-wrap .round-top-info .layer .info-round {
    margin: 0;
  }
  .trunk.main .stem .round-top-wrap .round-top .round-top-player .player-point {
    font-size: 70px;
  }
  .trunk.main .stem .round-top-wrap .round-top .round-top-player .player-point .digit {
    font-size: 56px;
  }
  .trunk.main .stem .round-top-wrap .round-top .round-top-player .player-name {
    font-size: 24px;
  }
  .trunk.main .stem .round-top-wrap .round-top .round-top-player .player-ranking {
    font-size: 24px;
    min-width: 30px;
    min-height: 30px;
    line-height: 30px;
  }
  .trunk.main .stem .round-top-wrap .round-top .round-top-player .player-club {
    font-size: 18px;
  }
  .trunk.main .stem .round-top-wrap .round-top .round-top-bg {
    height: 400px;
  }
  .trunk.title .title-box-result .title {
    font-size: 18px;
  }
  .trunk.title .title-box-result .desc {
    font-size: 14px;
  }
  .trunk.matchon-vs .stem div[class^="bine-"] .cone {
    margin: 0 15px;
  }
  .trunk.matchon-vs .stem .game-info table tr td.team-a {
    position: relative;
  }
  .trunk.matchon-vs .stem .game-info table tr td.team-a .wrap {
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-top: 50px !important;
  }
  .trunk.matchon-vs .stem .game-info table tr td.team-b {
    position: relative;
  }
  .trunk.matchon-vs .stem .game-info table tr td.team-b .wrap {
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-top: 50px !important;
  }
  .trunk.matchon-vs .stem .game-info table tr td .inline-wrap {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
    width: 100%;
  }
  .trunk.matchon-vs .stem .game-info table tr td .inline-wrap .point {
    font-size: 18px !important;
  }
  .trunk.matchon-vs .stem .game-info table tr td .badge-club {
    transform: scale(1.7) !important;
    margin-bottom: 20px !important;
  }
  .trunk.matchon-vs .stem .game-info table tr td .club-name {
    font-size: 14px !important;
    text-align: center !important;
  }
  .trunk.matchon-vs .stem .game-info table tr td .score {
    font-size: 18px;
  }
  .trunk.matchon-vs .stem .game-info table tr td .time {
    font-size: 12px;
  }
  .trunk.matchon-tp .stem {
    padding-top: 0;
  }
  .trunk.matchon-tp .stem:before {
    background: none;
  }
  
  .trunk.ainews-view .summary-left-box {
    padding: 0;
  }
  .trunk.ainews-view .summary-left-box h1 {
    font-size: 20px;
    line-height:22px;
  }
  .trunk.ainews-view .summary-left-box p {
    font-size: 14px;
  }
  
  .trunk.ainews-view .summary-right-box {
    border-left: none;
  }
  
  .trunk .game-chart-wrap {
    --aspect-ratio: 320/200 !important;
  }
  .news-bine {
    border-left: none;
    min-height: initial;
  }
  .news-bine.first {
    border-top: none;
  }
  .news-box {
    border-bottom: 1px solid #393742;
    margin-bottom: 20px;
  }
  .title-box h1 {
    font-size: 24px;
  }
  .title-box .tit-round {
    font-size: 18px;
  }
  .title-box-sub .left {
    text-align: center;
  }
  .title-box-sub .right {
    text-align: center;
  }
  .title-box-sub .right .ui-combo-box {
    padding: 10px;
  }
  .ranking-list {
    min-height: 470px;
  }
  .ranking-list ol li {
    font-size: 14px;
  }
  .ranking-list ol li table tr td.cell-1 {
    width: 50px;
  }
  .ranking-list ol li table tr td.cell-2 .club {
    
    font-size: 12px;
    padding: 2px 0;
  }
  .ranking-list ol li table tr td.cell-2 .position {
    font-size: 13px;
  }
  .ranking-list ol li table tr td.cell-3 {
    width: 40px;
  }
  .ranking-list ol li.first-list {
    height: 100px;
  }
  .ranking-list ol li.first-list:before {
    font-size: 22px;
    padding-top: 64px;
  }
  .ranking-list ol li.first-list table {
    height: 100px;
  }
  .ranking-list ol li.first-list table tr td.cell-1 .uniform-box {
    width: 140px;
    height: 90px;
    margin: 0 auto;
  }
  .ranking-list ol li.first-list table tr td.cell-1 .uniform-box .club.club-wrap {
    font-size: 11px !important;
  }
  .ranking-list ol li.first-list table tr td.cell-1 .uniform-box .name {
    font-size: 12px !important;
  }
  .ranking-list ol li.first-list table tr td.cell-1 .uniform-box .no {
    font-size: 18px !important;
  }
  .ranking-list ol li.first-list table tr td.cell-2 .name {
    font-size: 16px !important;
  }
  .ranking-list ol li.first-list table tr td.cell-2 .club {
    font-size: 12px;
    /*padding: 0 6px;*/
  }
  .ranking-list ol li.first-list table tr td.cell-2 .position {
    font-size: 13px;
  }
  .ranking-list ol li.first-list table tr td.cell-3 {
    width: 40px;
    font-size: 24px;
  }
  .ranking-list ol li:before {
    width: 40px;
  }
  .ranking-list ol li .list-bg {
    font-size: 13px;
  }
  .ranking-list ol li .list-bg:before {
    background-position: top right 10px;
  }
  .ranking-list ol li .list-bg:after {
    background-position: top left 80px;
  }
  
  .gallery-box .gallery li {
    width: 100%;
  }
  .gallery-box .gallery li .gallery-wrap table tr td {
    font-size: 18px !important;
  }
  .gallery-box .gallery li .gallery-wrap table tr td.left {
    font-size: 10px !important;
  }
  .rating-charts-box .type-ul-mobile {
    display: block;
  }
  .rating-charts-box .title-table tr td.left-td {
    width: 0;
  }
  .rating-charts-box .title-table tr td.center-td {
    width: 0;
  }
  .rating-charts-box .title-table tr td.right-td {
    width: 100%;
  }
  .rating-charts-box .info-table tr td.left-td {
    width: 0;
    padding: 0;
  }
  .rating-charts-box .info-table tr td.center-td {
    width: 0;
    padding: 0;
    font-size: 0;
  }
  .rating-charts-box .info-table tr td.right-td {
    width: 100%;
    padding: 0;
  }
  .rating-charts-box .info-table tr td.type-td {
    border: none;
  }
  .rating-charts-box .info-table tr td.type-td .type-ul {
    display: none;
  }
  .rating-charts-box.right .title-table tr td.left-td {
    width: 100%;
  }
  .rating-charts-box.right .title-table tr td.center-td {
    width: 0;
  }
  .rating-charts-box.right .title-table tr td.right-td {
    width: 0;
  }
  .rating-charts-box.right .info-table tr td.left-td {
    width: 100%;
    padding: 0;
  }
  .rating-charts-box.right .info-table tr td.center-td {
    width: 0;
    padding: 0;
    font-size: 0;
  }
  .rating-charts-box.right .info-table tr td.right-td {
    width: 0;
    padding: 0;
  }
  .rating-charts-box.right .info-table tr td.type-td {
    border: none;
  }
  .rating-charts-box.right .info-table tr td.type-td .type-ul {
    display: none;
  }
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
  .root-wrap {
    padding-top: 40px;
  }
  .header-m {
    display: block;
  }
  .tip-club {
    z-index: 1000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(40, 40, 40, 0.9);
    box-sizing: border-box;
    overflow-y: scroll;
    line-height: 40px;
  }
  .tip-club .tip-m-close {
    display: block;
    text-align: center;
  }
  .tip-club .tip-m-close .btn-close-club {
    text-decoration: none;
    border: 1px solid #fff;
    padding: 5px;
    padding-right: 10px;
    border-radius: 20px;
  }
  .tip-club .tip-m-close .btn-close-club:hover {
    background: #E63A79;
    color: #212026;
    border: none;
  }
  .tip-club .club-links {
    padding: 10px 0 40px 0;
  }
  .tip-club .club-links a {
    display: block;
    text-align: left;
    text-decoration: none;
    border-bottom: 1px solid #514f5d;
  }
  .tip-club .club-links a:hover {
    color: #E63A79;
    background: rgba(255, 255, 255, 0.05);
  }
  .tip-club .club-links a .club-label {
    display: inline;
  }
  .tip-club .club-links a .club-label .t3 {
    padding: 0 5px;
    font-weight: 600;
    color: #b3b3b3;
  }
  .trunk.main .stem:before {
    background: none;
  }
  .trunk.main .stem .round-top-wrap {
    min-height: 400px;
  }
  .trunk.main .stem .round-top-wrap .round-top-info {
    text-align: center;
  }
  .trunk.main .stem .round-top-wrap .round-top-info .layer {
    display: block;
    padding-bottom: 10px;
  }
  .trunk.main .stem .round-top-wrap .round-top-info .layer .info-round {
    margin: 0;
  }
  .trunk.main .stem .round-top-wrap .round-top .round-top-player .player-point {
    font-size: 70px;
  }
  .trunk.main .stem .round-top-wrap .round-top .round-top-player .player-point .digit {
    font-size: 56px;
  }
  .trunk.main .stem .round-top-wrap .round-top .round-top-player .player-name {
    font-size: 24px;
  }
  .trunk.main .stem .round-top-wrap .round-top .round-top-player .player-ranking {
    font-size: 24px;
    min-width: 30px;
    min-height: 30px;
    line-height: 30px;
  }
  .trunk.main .stem .round-top-wrap .round-top .round-top-player .player-club {
    font-size: 18px;
  }
  .trunk.main .stem .round-top-wrap .round-top .round-top-bg {
    height: 400px;
  }
  .trunk.title .title-box-result .title {
    font-size: 18px;
  }
  .trunk.title .title-box-result .desc {
    font-size: 14px;
  }
  .trunk.matchon-vs .stem div[class^="bine-"] .cone {
    margin: 0 10%;
  }
  .trunk.matchon-vs .stem .game-info table tr td.team-a {
    position: relative;
  }
  .trunk.matchon-vs .stem .game-info table tr td.team-a .wrap {
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-top: 50px !important;
  }
  .trunk.matchon-vs .stem .game-info table tr td.team-b {
    position: relative;
  }
  .trunk.matchon-vs .stem .game-info table tr td.team-b .wrap {
    margin-left: 10px !important;
    margin-right: 10px !important;
    margin-top: 50px !important;
  }
  .trunk.matchon-vs .stem .game-info table tr td .inline-wrap {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 !important;
    width: 100%;
  }
  .trunk.matchon-vs .stem .game-info table tr td .inline-wrap .point {
    font-size: 18px !important;
  }
  .trunk.matchon-vs .stem .game-info table tr td .badge-club {
    transform: scale(1.3) !important;
    margin-bottom: 20px !important;
  }
  .trunk.matchon-vs .stem .game-info table tr td .club-name {
    font-size: 14px !important;
    text-align: center !important;
  }
  .trunk.matchon-vs .stem .game-info table tr td .score {
    font-size: 18px;
  }
  .trunk.matchon-vs .stem .game-info table tr td .time {
    font-size: 12px;
  }
  .trunk.matchon-tp .stem {
    padding-top: 0;
  }
  .trunk.matchon-tp .stem:before {
    background: none;
  }
  
  .trunk.ainews-view .summary-left-box {
    padding: 0;
  }
  .trunk.ainews-view .summary-left-box h1 {
    font-size: 20px;
    line-height:22px;
  }
  .trunk.ainews-view .summary-left-box p {
    font-size: 14px;
  }
  .trunk.ainews-view .summary-right-box {
    border-left: none;
  }
  
  .trunk .game-chart-wrap {
    --aspect-ratio: 320/200 !important;
  }
  .news-bine {
    border-left: none;
    min-height: initial;
  }
  .news-bine.first {
    border-top: none;
  }
  .news-box {
    border-bottom: 1px solid #393742;
    margin-bottom: 20px;
  }
  .title-box h1 {
    font-size: 24px;
  }
  .title-box .tit-round {
    font-size: 18px;
  }
  .title-box-sub .left {
    text-align: center;
  }
  .title-box-sub .right {
    text-align: center;
  }
  .title-box-sub .right .ui-combo-box {
    padding: 10px;
  }
  .ranking-list {
    min-height: 470px;
  }
  .ranking-list ol li {
    font-size: 14px;
  }
  .ranking-list ol li table tr td.cell-1 {
    width: 50px;
  }
  .ranking-list ol li table tr td.cell-2 .club {
    font-size: 12px;
    padding: 2px 0;
  }
  .ranking-list ol li table tr td.cell-2 .position {
    font-size: 13px;
  }
  .ranking-list ol li table tr td.cell-3 {
    width: 40px;
  }
  .ranking-list ol li.first-list {
    height: 100px;
  }
  .ranking-list ol li.first-list:before {
    font-size: 22px;
    padding-top: 64px;
  }
  .ranking-list ol li.first-list table {
    height: 100px;
  }
  .ranking-list ol li.first-list table tr td.cell-1 .uniform-box {
    width: 140px;
    height: 90px;
    margin: 0 auto;
  }
  .ranking-list ol li.first-list table tr td.cell-1 .uniform-box .club.club-wrap {
    font-size: 11px !important;
  }
  .ranking-list ol li.first-list table tr td.cell-1 .uniform-box .name {
    font-size: 12px !important;
  }
  .ranking-list ol li.first-list table tr td.cell-1 .uniform-box .no {
    font-size: 18px !important;
  }
  .ranking-list ol li.first-list table tr td.cell-2 .name {
    font-size: 16px !important;
  }
  .ranking-list ol li.first-list table tr td.cell-2 .club {
    font-size: 12px;
    /*padding: 0 6px;*/
  }
  .ranking-list ol li.first-list table tr td.cell-2 .position {
    font-size: 13px;
  }
  .ranking-list ol li.first-list table tr td.cell-3 {
    width: 40px;
    font-size: 24px;
  }
  .ranking-list ol li:before {
    width: 40px;
  }
  .ranking-list ol li .list-bg {
    font-size: 13px;
  }
  .ranking-list ol li .list-bg:before {
    background-position: top right 10px;
  }
  .ranking-list ol li .list-bg:after {
    background-position: top left 80px;
  }
  
  .gallery-box .gallery li {
    width: 100%;
  }
  .gallery-box .gallery li .gallery-wrap table tr td {
    font-size: 18px !important;
  }
  .gallery-box .gallery li .gallery-wrap table tr td.left {
    font-size: 10px !important;
  }
  .rating-charts-box .type-ul-mobile {
    display: block;
  }
  .rating-charts-box .title-table tr td.left-td {
    width: 0;
  }
  .rating-charts-box .title-table tr td.center-td {
    width: 0;
  }
  .rating-charts-box .title-table tr td.right-td {
    width: 100%;
  }
  .rating-charts-box .info-table tr td.left-td {
    width: 0;
    padding: 0;
  }
  .rating-charts-box .info-table tr td.center-td {
    width: 0;
    padding: 0;
    font-size: 0;
  }
  .rating-charts-box .info-table tr td.right-td {
    width: 100%;
    padding: 0;
  }
  .rating-charts-box .info-table tr td.type-td {
    border: none;
  }
  .rating-charts-box .info-table tr td.type-td .type-ul {
    display: none;
  }
  .rating-charts-box.right .title-table tr td.left-td {
    width: 100%;
  }
  .rating-charts-box.right .title-table tr td.center-td {
    width: 0;
  }
  .rating-charts-box.right .title-table tr td.right-td {
    width: 0;
  }
  .rating-charts-box.right .info-table tr td.left-td {
    width: 100%;
    padding: 0;
  }
  .rating-charts-box.right .info-table tr td.center-td {
    width: 0;
    padding: 0;
    font-size: 0;
  }
  .rating-charts-box.right .info-table tr td.right-td {
    width: 0;
    padding: 0;
  }
  .rating-charts-box.right .info-table tr td.type-td {
    border: none;
  }
  .rating-charts-box.right .info-table tr td.type-td .type-ul {
    display: none;
  }
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
  .tip-club .club-links a {
    margin: 0;
  }
  .trunk.main .stem:before {
    background: none;
  }
  .trunk.main .stem .round-top-wrap .round-top-info {
    text-align: center;
  }
  .trunk.main .stem .round-top-wrap .round-top-info .layer {
    display: block;
    padding-bottom: 10px;
  }
  .trunk.main .stem .round-top-wrap .round-top-info .layer .info-round {
    margin: 0;
  }
  .trunk.matchon-compare .formation-wrap {
    padding: 0 100px;
  }
  .trunk.matchon-compare .rating-charts-box {
    padding: 0 100px;
  }
  .trunk.matchon-tp .stem {
    padding-top: 0;
  }
  .trunk.matchon-tp .stem:before {
    background: none;
  }
  
  .trunk.ainews-view .summary-right-box {
    border-left: none;
  }
  .news-bine {
    border-left: none;
    min-height: initial;
  }
  .news-bine.first {
    border-top: none;
  }
  .news-box {
    border: 1px solid #393742;
    margin-bottom: 10px;
    padding: 10px 20px;
    min-height: 120px;
  }
  
  .gallery-box .gallery li {
    width: 50%;
  }
  .gallery-box .gallery li .gallery-wrap table tr td {
    font-size: 18px !important;
  }
  .gallery-box .gallery li .gallery-wrap table tr td.left {
    font-size: 10px !important;
  }
  
  .trunk.matchon-tp .rating-charts-box {
    padding-right:141px;
  }
  .trunk.matchon-tp .rating-charts-box.right {
    padding-left:141px;
    padding-right:0;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .trunk.main .stem:before {
    background: none;
  }
  .trunk.matchon-vs .formation-wrap .formation-box .formation-table tr td {
    padding: 5px;
  }
  .trunk.matchon-vs .formation-wrap .formation-box .formation-table tr td .player .dp-name .time {
    font-size: 10px;
  }
  .trunk.matchon-vs .formation-wrap .formation-box .formation-table tr td .player .dp-name .name {
    font-size: 12px;
  }
  .trunk.matchon-vs .game-chart-wrap {
    --aspect-ratio: 320/200 !important;
  }
  .trunk.matchon-tp .stem {
    padding-top: 0;
  }
  .trunk.matchon-tp .stem:before {
    background: none;
  }
  
  .tip-club .club-links a {
    margin: 0 5px;
  }
  
  .gallery-box .gallery li {
    width: 50%;
  }
  .gallery-box .gallery li .gallery-wrap table tr td {
    font-size: 18px !important;
  }
  .gallery-box .gallery li .gallery-wrap table tr td.left {
    font-size: 10px !important;
  }
  
  .trunk.matchon-tp .rating-charts-box {
    padding-right:141px;
  }
  .trunk.matchon-tp .rating-charts-box.right {
    padding-left:141px;
    padding-right:0;
  }
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .trunk.matchon-tp .stem {
    min-height: 700px;
    padding-top: 95px;
  }
  
  .gallery-box .gallery li .gallery-wrap table tr td {
    font-size: 14px !important;
  }
  .gallery-box .gallery li .gallery-wrap table tr td.left {
    font-size: 9px !important;
  }
}

@media only screen and (min-width: 1600px) {
  .trunk.main .stem {
    min-height: 1000px;
  }
  .trunk.ratingon .stem {
    min-height: 1000px;
  }
}

/**
 * Swiper Sides...
 * Override CSS
 */
.swiper-contents > .swiper-buttons {
  visibility: hidden;
}

.swiper-container {
  overflow: hidden !important;
}

.swiper-container > .swiper-buttons {
  width: 100%;
  height: 0px;
  position: fixed;
  top: 0;
  box-sizing: border-box;
  z-index: 1100;
}

.swiper-container > .swiper-buttons .swiper-button-next {
  position: fixed;
  right: 0;
  top: 50%;
  box-sizing: border-box;
  margin-right: 10px;
}

.swiper-container > .swiper-buttons .swiper-button-prev {
  position: fixed;
  left: 0;
  top: 50%;
  display: block;
  box-sizing: border-box;
  margin-left: 10px;
}

.swiper-container > .swiper-wrapper > .swiper-slide {
  width: 100% !important;
  height: 100% !important;
}

.swiper-container > .swiper-wrapper > .swiper-slide > .cone {
  margin: 0 20px;
}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
  .swiper-container.big > .swiper-wrapper > .swiper-slide > .cone { width:690px; margin: 0 auto; }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .swiper-container.big > .swiper-wrapper > .swiper-slide > .cone { width:690px; margin: 0 auto; }
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
  .swiper-container.big > .swiper-wrapper > .swiper-slide > .cone { width:690px; margin: 0 auto; }
}
/*
 * Reset jQuery-UI CSS
 */
.ui-autocomplete {
  z-index:1000 !important;
  width:300px;
  /*
  max-height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  */
  border:1px solid #ddd;
  font-size:13px;
  text-align:left;
}
.ui-autocomplete .ui-menu-item {
  display:block;
  padding:0;
  margin:0;
  border:0;
  border-top:1px solid #ddd;
}
.ui-autocomplete .ui-menu-item:first-child {
  border-top:0;
}
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper {
  display:block;
  height:40px;
  line-height:40px;
  padding:0 15px !important;
  margin:0;
  border:0;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-focus,
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.ui-state-active {
  padding:0;
  margin:0;
  color:#fff !important;
  background:#8B3AE8 !important;
}

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team:before {
  display: inline-block;
  vertical-align: middle;
  content:"";
  margin:0 15px 0 5px;
  background: url("/img/badge-club-100.png?ver=20091101") no-repeat left top;
  background-size: 300px;
  width: 30px;
  height: 30px;
}
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.ARS:before { background-position-x:  -30px; background-position-y:   0px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.AVL:before { background-position-x:  -60px; background-position-y:   0px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.BHA:before { background-position-x:  -90px; background-position-y:   0px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.BOU:before { background-position-x:    0px; background-position-y:   0px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.BUR:before { background-position-x: -120px; background-position-y:   0px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.CHE:before { background-position-x: -150px; background-position-y:   0px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.CRY:before { background-position-x: -180px; background-position-y:   0px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.EVE:before { background-position-x: -210px; background-position-y:   0px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.LEI:before { background-position-x: -240px; background-position-y:   0px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.LIV:before { background-position-x: -270px; background-position-y:   0px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.MCI:before { background-position-x:    0px; background-position-y: -30px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.MUN:before { background-position-x:  -30px; background-position-y: -30px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.NEW:before { background-position-x:  -60px; background-position-y: -30px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.NOR:before { background-position-x:  -90px; background-position-y: -30px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.SHU:before { background-position-x: -120px; background-position-y: -30px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.SOU:before { background-position-x: -150px; background-position-y: -30px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.TOT:before { background-position-x: -180px; background-position-y: -30px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.WAT:before { background-position-x: -210px; background-position-y: -30px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.WHU:before { background-position-x: -240px; background-position-y: -30px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.WOL:before { background-position-x: -270px; background-position-y: -30px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.FUL:before { background-position-x:    0px; background-position-y: -60px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.CAR:before { background-position-x:  -30px; background-position-y: -60px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.HUD:before { background-position-x:  -60px; background-position-y: -60px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.WBA:before { background-position-x:  -90px; background-position-y: -60px; }
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.team.LEE:before { background-position-x: -120px; background-position-y: -60px; }

.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.player {
}
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.player .uniform-box {
  display:inline-block;
  vertical-align: middle;
  margin-right:10px;
  min-width : auto;
  min-height: auto;
  width : 40px !important;
  height: 40px !important;
  background-position: center top 2px;
}
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.player .uniform-box .uniform-text{
  height:100%;
  bottom:0;
}
.ui-autocomplete .ui-menu-item .ui-menu-item-wrapper.player .uniform-box .uniform-text span.no {
  font-size:9px;
}

@media only screen and (max-width: 575px) {
    
    .ui-autocomplete {
      width:calc(90%);
      max-height: calc(100% - 130px);
      overflow-y: auto;
      overflow-x: hidden;
    }
}

/**
 * LAYOUT FIXED TAIL
 **/

.fixed-footer-m {display:none;}

@media only screen and (max-width: 767px) {
    
    .footer {padding-bottom:84px;}
    
    .fixed-footer-m {z-index:999;position:fixed;left:0;right:0;bottom:0;height:54px;overflow:hidden;display:block;background-color:#37363f;}
    .fixed-footer-m:after {display:block;content:"";clear:both;}
    .fixed-footer-m > a {float:left;display:block;width:calc(100% / 5);height:100%;padding:37px 0 0;line-height:9px;font-size:9px;color:#a0a1a4;text-align:center;text-decoration:none !important;
        
        -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
    .fixed-footer-m > a:hover,
    .fixed-footer-m > a.on {color:#fff;}
    .fixed-footer-m > a.ro {background:url('../img/fixed-footer-icon01.png') no-repeat center top 3px;background-size:auto 34px;}
    .fixed-footer-m > a.mo {background:url('../img/fixed-footer-icon02.png') no-repeat center top 3px;background-size:auto 34px;}
    .fixed-footer-m > a.ns {background:url('../img/fixed-footer-icon03.png') no-repeat center top 3px;background-size:auto 34px;}
    .fixed-footer-m > a.tp {background:url('../img/fixed-footer-icon04.png') no-repeat center top 3px;background-size:auto 34px;}
    .fixed-footer-m > a.as {background:url('../img/fixed-footer-icon06.png') no-repeat center top 3px;background-size:auto 34px;}
    .fixed-footer-m > a.my {padding:5px 0;}
    .fixed-footer-m > a.my span {position:relative;display:block;margin:0 auto;width:44px;height:44px;line-height:46px;font-size:11px;color:#00FF87;background-color:#2c2b35;border-radius:50%;}
    /*
    .fixed-footer-m > a.my span:after {position:absolute;display:block;top:7px;left:calc(50% - 3px);width:6px;height:4px;content:"";background:url('../img/fixed-footer-bullet01.png') no-repeat;}
    */
    .fixed-footer-m > a.my span:after {position:absolute;display:block;top:7px;left:0;width:100%;line-height:8px;font-family:entypo;content:"\e75f"/*"\e75c"*/;}
    .fixed-footer-m > a.my.on span {font-weight:bold;color:#2c2b35;background-color:#00FF87;}
    .fixed-footer-m > a.my.on span:after {content:"\e75c";}
    
    .fixed-footer-m > a.my.in span {font-weight:bold;color:#cc356e;}
    .fixed-footer-m > a.my.in.on span {color:#fff;background-color:#cc356e;}
}

/**
 * LAYOUT : LOGIN
 **/
.fixed-login-wrapper {display:none;}
.layer-login {z-index:999;position:absolute;top:100%;right:0;width:280px;padding:20px;background-color:#212026;box-shadow:0 1px 1px rgba(0,0,0,0.075) inset, 1px 2px 5px rgba(0,0,0,0.6);
    transform:scaleY(0);transform-origin:top center;opacity:0;transition:transform 0.3s, opacity 0.2s;}
.layer-login.on {transform:scaleY(1);opacity:1;transition:transform 0.3s, opacity 0.3s;}
.layer-login > .bar {display:none;}
.layer-login > .tit {padding:0;margin:0;line-height:14px;font-size:14px;font-weight:bold;color:#fff;text-align:left;}
.layer-login > ul.lst {margin:10px 0 0;padding:0;line-height:32px;}
.layer-login > ul.lst > li {display:block;margin:8px 0 0;padding:0;}
.layer-login > ul.lst > li:first-child {margin-top:0;}
.layer-login > ul.lst > li > a.sns-btn {display:block;max-width:280px;margin:0 auto;font-size:12px;color:#fff;text-align:center;text-decoration:none;}
.layer-login > ul.lst > li > a.sns-btn.fb {position:relative;background-color:#3b66c4;}
.layer-login > ul.lst > li > a.sns-btn.gg {position:relative;background-color:#ff5a58;}
.layer-login > ul.lst > li > a.sns-btn.nv {position:relative;background-color:#26c825;}
.layer-login > ul.lst > li > a.sns-btn.kk {position:relative;background-color:#ffeb00;color:#36211e;}
.layer-login > ul.lst > li > a.sns-btn.fb:before {position:absolute;left:9px;top:calc(50% - 10px);display:block;width:20px;height:20px;content:"";background:url('../img/login-sns-icon-set.png') no-repeat   0px 0px;}
.layer-login > ul.lst > li > a.sns-btn.gg:before {position:absolute;left:9px;top:calc(50% - 10px);display:block;width:20px;height:20px;content:"";background:url('../img/login-sns-icon-set.png') no-repeat -40px 0px;}
.layer-login > ul.lst > li > a.sns-btn.nv:before {position:absolute;left:9px;top:calc(50% - 10px);display:block;width:20px;height:20px;content:"";background:url('../img/login-sns-icon-set.png') no-repeat -60px 0px;}
.layer-login > ul.lst > li > a.sns-btn.kk:before {position:absolute;left:9px;top:calc(50% - 10px);display:block;width:20px;height:20px;content:"";background:url('../img/login-sns-icon-set.png') no-repeat -80px 0px;}

@media only screen and (max-width: 767px) {
    .fixed-login-wrapper {}
    .layer-login {z-index:998;position:fixed;left:0;right:0;bottom:54px;top:auto;width:auto;padding-top:40px;display:block;transform-origin:bottom center;}
    .layer-login > .bar {position:absolute;left:0;right:0;top:0;display:block;font-size:0;height:20px;background-color:#37363f;text-decoration:none;}
    .layer-login > .bar:after {display:block;font-family:entypo;content:"\e75c";line-height:20px;font-size:14px;color:#00FF87;text-align:center;}
    .layer-login > .tit {text-align:center;}
}

@media only screen and (max-width: 575px) {
    .layer-login > .tit {text-align:left;}
    .layer-login > ul.lst > li > a {max-width:none;}
}

/**
 * LAYOUT : MY PAGE
 **/
.layer-mypage {z-index:999;position:absolute;top:100%;right:0;width:380px;padding:20px;background-color:#212026;box-shadow:0 1px 1px rgba(0,0,0,0.075) inset, 1px 2px 5px rgba(0,0,0,0.6);
    transform:scaleY(0);transform-origin:top center;opacity:0;transition:transform 0.3s, opacity 0.2s;}
.layer-mypage.on {transform:scaleY(1);opacity:1;transition:transform 0.3s, opacity 0.3s;}
.layer-mypage > .bar {display:none;}
.layer-mypage > .sect {position:relative;padding:20px 0;border-top:1px solid #4c4c4c;}
.layer-mypage > .sect.s01 {padding-top:0;border-top:0;}
.layer-mypage > .sect.s03 {padding:10px 0 0;}
.layer-mypage > .sect > .tit {padding:0;margin:0;line-height:14px;font-size:14px;font-weight:bold;color:#fff;text-align:left;}
.layer-mypage > .sect > .dsc {position:absolute;top:20px;right:0;display:block;padding:0;margin:0;line-height:14px;font-size:13px;font-weight:normal;color:#00FF87;text-align:right;}
.layer-mypage > .sect.s01 > .dsc {top:0;}
.layer-mypage > .sect > .dsc > .btn-config {display:none;width:14px;height:14px;font-size:0;background:url('../img/header-icon-config01.png') no-repeat center center;background-size:14px;}
.layer-mypage > .sect > .dsc > .btn-config.on {display:block;}
.layer-mypage > .sect > ul.list {padding:0;margin:13px 0 0;list-style:none;}
.layer-mypage > .sect > ul.list > li {display:block;padding:0;margin:8px 0 0;}
.layer-mypage > .sect > ul.list > li:first-child {margin-top:0;}
.layer-mypage > .sect > ul.list > li.btn-add {height:30px;line-height:30px;font-size:0;text-align:center;border:1px solid #4c4c4c;background:url('../img/header-icon-add01.png') no-repeat center center;cursor:pointer;}
.layer-mypage > .sect > ul.list > li.btn-add.editing {height:auto;line-height:0;border:1px solid #00FF87;/*background:url('../img/header-icon-add01-on.png') no-repeat center top 8.5px;*/background:none;cursor:initial;}
.layer-mypage > .sect > ul.list > li.itm {position:relative;height:30px;font-size:14px;background-color:#e74c85;cursor:pointer;}
.layer-mypage > .sect > ul.list > li.itm:before {float:left;display:block;content:"";width:45px;height:30px;background:#e74c85 url('../img/mio-list-left-dark.png') no-repeat right center;background-size:auto 100%;opacity:0.2;}
.layer-mypage > .sect > ul.list > li.itm:after {display:block;content:"";float:right;width:90px;height:30px;background:#e74c85 url('../img/mio-list-right-light.png') no-repeat left center;background-size:auto 100%;opacity:0.2;}
.layer-mypage > .sect > ul.list > li.itm.editing {/*display:none;*/}
.layer-mypage > .sect > ul.list > li.skeleton {display:none;}
.layer-mypage > .sect > ul.list > li.itm > p.wrp {z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;display:block;margin:0;padding:0;line-height:30px;font-weight:bold;color:#fff;text-align:center;}
.layer-mypage > .sect > ul.list > li.itm > p.wrp:after {display:block;content:"";clear:both;}
.layer-mypage > .sect > ul.list > li.itm > p.wrp > span {float:left;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.layer-mypage > .sect > ul.list > li.itm > p.wrp > span.num {width:40px;}
.layer-mypage > .sect > ul.list > li.itm > p.wrp > span.nam {width:calc(100% - 40px - 70px - 65px - 30px);text-align:left;padding-left:15px;}
.layer-mypage > .sect > ul.list > li.itm > p.wrp > span.pos {width:70px;font-weight:normal;text-align:left;}
.layer-mypage > .sect > ul.list > li.itm > p.wrp > span.pos > i {display:inline-block;margin:0 5px 0 0;line-height:20px;font-size:13px;width:36px;font-style:normal;color:#e74c85;text-align:center;background-color:#fff;border-radius:10px;}
.layer-mypage > .sect > ul.list > li.itm > p.wrp > span.scr {width:65px;text-align:right;}
.layer-mypage > .sect > ul.list > li.itm > p.wrp > .btn-config {float:right;display:block;width:30px;height:30px;font-size:0;background:url('../img/header-icon-config02.png') no-repeat center center;background-size:13px;opacity:0.8;}

.layer-mypage > .sect > ul.list > li.itm.dim {background-color:#6b6b6b;}
.layer-mypage > .sect > ul.list > li.itm.dim:before {background-color:#6b6b6b;}
.layer-mypage > .sect > ul.list > li.itm.dim:after  {background-color:#6b6b6b;}
.layer-mypage > .sect > ul.list > li.itm.dim > p.wrp > span.pos > i {color:#666;}
.layer-mypage > .sect > ul.list > li.itm.dim > p.wrp > span.scr {padding-right:10px;}
.layer-mypage > .sect .player-add-wrapper {display:none;margin:0 0 10px;padding:0;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.layer-mypage > .sect .player-add-wrapper:after {display:block;content:"";clear:both;}
.layer-mypage > .sect .player-add-wrapper.on {display:block;}
.layer-mypage > .sect .player-add-wrapper.on.bd1 {margin-top:8px;border:1px solid #00FF87;}
.layer-mypage > .sect .player-add-wrapper > .ctrl {padding:0 15px;line-height:40px;font-size:12px;}
.layer-mypage > .sect .player-add-wrapper > .ctrl:after {display:block;content:"";clear:both;}
.layer-mypage > .sect .player-add-wrapper > .ctrl > .fl {float:left;}
.layer-mypage > .sect .player-add-wrapper > .ctrl > .fr {float:right;}
.layer-mypage > .sect .player-add-wrapper > .ctrl a {color:#666;margin-left:10px;text-decoration:none;}
.layer-mypage > .sect .player-add-wrapper > .ctrl a:first-child {margin-left:0;}
.layer-mypage > .sect .player-add-wrapper > .ctrl a.on {color:#fff;}
.layer-mypage > .sect .player-add-wrapper > .ctrl a.on:hover {color:#00FF87;}
.layer-mypage > .sect .player-add-wrapper > .list:after {display:block;content:"";clear:both;}
.layer-mypage > .sect .player-add-wrapper > .list > ul {margin:0;padding:0;list-style:none;overflow-y:auto;height:calc(24px * 6);line-height:24px;font-size:13px;color:#fff;text-align:left;}
.layer-mypage > .sect .player-add-wrapper > .list > ul li {display:block;margin:0;padding:0;cursor:pointer;}
.layer-mypage > .sect .player-add-wrapper > .list > ul li.on,
.layer-mypage > .sect .player-add-wrapper > .list > ul li:hover {color:#00FF87;}
.layer-mypage > .sect .player-add-wrapper > .list > .club-list {float:left;width:110px;}
.layer-mypage > .sect .player-add-wrapper > .list > .club-list li {padding-left:15px;}
.layer-mypage > .sect .player-add-wrapper > .list > .player-list {float:right;width:calc(100% - 120px - 15px);margin-right:15px;}
.layer-mypage > .sect .player-add-wrapper > .list > .player-list li {padding-left:5px;}
.layer-mypage > .sect > .team-select-wrapper {display:none;position:relative;margin-top:8px;padding:0 25px;border:1px solid #4c4c4c;}
.layer-mypage > .sect > .team-select-wrapper.on {display:block;}
.layer-mypage > .sect > .team-select-wrapper > .btn-dir {position:absolute;top:50%;transform:translateY(-50%);display:block;width:12px;height:21px;font-size:0;background:no-repeat center center;background-size:contain;}
.layer-mypage > .sect > .team-select-wrapper > .btn-dir.prev {left :12px;background-image:url('../img/header-icon-arrow01L.png');}
.layer-mypage > .sect > .team-select-wrapper > .btn-dir.next {right:12px;background-image:url('../img/header-icon-arrow01R.png');}
.layer-mypage > .sect > .team-select-wrapper .team-select-list {margin:0;padding:0;list-style:none;height:98px;overflow:hidden;line-height:13px;font-size:13px;color:#fff;text-align:center;}
.layer-mypage > .sect > .team-select-wrapper .team-select-list:after {display:block;content:"";clear:both;}
.layer-mypage > .sect > .team-select-wrapper .team-select-list li {float:left;display:block;margin:0;padding:0;height:98px;width:calc((100% - 0.1px)/4);cursor:pointer;}
.layer-mypage > .sect > .team-select-wrapper .team-select-list li .badge-club {display:block;margin:15px auto 28px;transform:scale(1.8);transform-origin:top center;}
.layer-mypage > .sect > .my-team-info {margin:15px 0 0;font-size:13px;line-height:13px;color:#fff;text-align:left;}
.layer-mypage > .sect > .my-team-info > .head {}
.layer-mypage > .sect > .my-team-info > .head:after {display:block;content:"";clear:both;}
.layer-mypage > .sect > .my-team-info > .head > .badge-club {float:left;display:block;margin:15px 0 0 15px;transform:scale(1.9);transform-origin:center center;transition:transform 0.2s;cursor:pointer;}
.layer-mypage > .sect > .my-team-info > .head > .badge-club:hover {transform:scale(2.3);transition:transform 0.2s;}
.layer-mypage > .sect > .my-team-info > .head > .inf {float:right;width:calc(100% - 75px);padding-top:5px;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .tit {font-weight:bold;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .tit > .name {font-size:15px;margin-right:10px;cursor:pointer;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .tit > .name:hover {border-bottom:1px solid #fff;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .tit > .rank {display:inline-block;color:#E63A79;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .dtl {margin-top:13px;line-height:24px;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .dtl > .pnt {margin:0 10px 0 0;font-size:15px;font-weight:bold;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .dtl > .his {display:inline-block;vertical-align:top;margin:0;padding:0;list-style:none;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .dtl > .his:after {display:block;content:"";clear:both;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .dtl > .his > li {float:right;display:block;margin:0 2px 0 0;padding:0;width:24px;height:24px;line-height:24px;color:#212026;text-align:center;border-radius:50%;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .dtl > .his > li:first-child {margin-right:0;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .dtl > .his > li.tW {background-color:#2CD311;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .dtl > .his > li.tD {background-color:#76766F;}
.layer-mypage > .sect > .my-team-info > .head > .inf > .dtl > .his > li.tL {background-color:#D20326;}
.layer-mypage > .sect > .my-team-info > .chart-wrapper {margin-top:15px;padding:0 10px 0;height:160px;background-color:#282a2c;border:1px solid #4c4c4c;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.layer-mypage > .sect > .my-team-info > .chart-wrapper > .chart-obj {height:100%;overflow:hidden;}
.layer-mypage > .sect.s03 {line-height:12px;font-size:12px;color:#fff;}
.layer-mypage > .sect.s03:after {display:block;content:"";clear:both;}
.layer-mypage > .sect.s03 .fl {display:block;float:left;}
.layer-mypage > .sect.s03 .fr {display:block;float:right;}
.layer-mypage > .sect.s03 a {text-decoration:none;}

@media only screen and (max-width: 767px) {
    .layer-mypage {z-index:998;position:fixed;left:0;right:0;bottom:54px;top:auto;width:auto;max-height:calc(100% - 40px - 54px);overflow-y:auto;padding-top:40px;display:block;transform-origin:bottom center;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
    .layer-mypage > .bar {position:fixed;left:0;right:0;top:0;display:block;font-size:0;height:20px;background-color:#37363f;text-decoration:none;}
    .layer-mypage > .bar:after {display:block;font-family:entypo;content:"\e75c";line-height:20px;font-size:14px;color:#cc356e;text-align:center;}
}

@media only screen and (max-width: 575px) {
} 

/**
 * LAYOUT : HELP
 **/
.layout-help {position:absolute;right:10px;top:calc(100% + 43px);width:600px;padding:15px;background-color:#212026;border:2px solid #5c5c5f;border-radius:4px;
    opacity:0;transform:scale(0);transform-origin:top right;transition: transform 0.3s, opacity 0.3s;
    -webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.layout-help.on {opacity:1;transform:scaleY(1);transition: transform 0.3s, opacity 0.3s;}
.layout-help:before {position:absolute;right:17px;top:-8px;display:block;content:"";width:8px;height:8px;background:url('../img/header-icon-help-pin.png') no-repeat right bottom;background-size:contain;}
.layout-help:after {display:block;content:"";clear:both;}
.layout-help > .wrp > .txt {float:left;width:calc(100% - 250px);}
.layout-help > .wrp > .txt dl {display:block;margin:10px 0 0;padding:0;line-height:20px;font-size:13px;color:#666;list-style:none;}
.layout-help > .wrp > .txt dl:after {display:block;content:"";clear:both;}
.layout-help > .wrp > .txt dl:first-child {margin-top:0;}
.layout-help > .wrp > .txt dl dt,
.layout-help > .wrp > .txt dl dd {float:left;display:block;margin:0;padding:0;cursor:pointer;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
.layout-help > .wrp > .txt dl dt {width:75px;font-weight:bold;padding-left:13px;position:relative;}
.layout-help > .wrp > .txt dl dt:hover:after,
.layout-help > .wrp > .txt dl dt.tmp:after,
.layout-help > .wrp > .txt dl dt.on:after {position:absolute;left:0;top:0;display:block;content:"\25B6";font-size:9px;color:#fff;height:20px;line-height:20px;}
.layout-help > .wrp > .txt dl dd {width:calc(100% - 75px);}
.layout-help > .wrp > .txt dl dd.tmp,
.layout-help > .wrp > .txt dl dd.on {color:#fff;}
.layout-help > .wrp > .txt dl.t01 dt {color:#00FF87;}
.layout-help > .wrp > .txt dl.t02 dt {color:#8B3AE8;}
.layout-help > .wrp > .txt dl.t03 dt {color:#E63A79;}
.layout-help > .wrp > .img {float:right;width:250px;padding:10px 0 0;display:none;}
.layout-help > .wrp > .img.on {display:block;}
.layout-help > .wrp > .img p {display:block;margin:0;padding:0;text-align:center;}
.layout-help > .wrp > .img .tit {line-height:30px;font-size:18px;font-weight:bold;color:#00FF87;}
.layout-help > .wrp > .img .dsc {line-height:18px;font-size:13px;color:#fff;}
.layout-help > .wrp > .img img {display:block;margin:15px 0 0;max-width:100%;}

@media only screen and (max-width: 767px) {
    .layout-help {position:fixed;z-index:1000;top:48px;max-width:calc(100% - 20px);}
    .layout-help:before {right:58px;}
}
@media only screen and (max-width: 629px) {
    .layout-help {width:330px;height:calc(100% - 48px - 54px - 10px);padding:0;}
    .layout-help > .wrp {position:absolute;left:0;top:0;width:100%;height:100%;padding:15px;overflow:auto;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
    .layout-help > .wrp > .txt {float:none;width:auto;}
    .layout-help > .wrp > .img {float:none;width:auto;margin-top:20px;border-top:1px solid #4c4c4c;}
    .layout-help > .wrp > .img img {margin:15px auto 0;}
}

/**
 * MAIN : D-DAYS
 **/
.trunk.main .dday-list-wrapper {position:relative;margin-top:-10px;}
.trunk.main .dday-list-wrapper > a {position:absolute;top:calc(50% - 25px);display:block;font-size:0;width:30px;height:30px;color:rgba(255,255,255,0.3);text-decoration:none !important;}
.trunk.main .dday-list-wrapper > a:hover {color:#007aff;}
.trunk.main .dday-list-wrapper > a.btn-prev {left :0;}
.trunk.main .dday-list-wrapper > a.btn-next {right:0;}
.trunk.main .dday-list-wrapper > a:after {display:block;width:30px;height:30px;font-family:'entypo';font-family:'swiper-icons';font-size:30px;}
.trunk.main .dday-list-wrapper > a.btn-prev:after {content:"prev";text-align:right;}
.trunk.main .dday-list-wrapper > a.btn-next:after {content:"next";text-align:left ;}
.trunk.main .dday-list-wrapper > ul.dday-list {overflow:hidden;list-style:none;height:155px;padding:0;margin:0;}
.trunk.main .dday-list-wrapper > ul.dday-list > li {display:block;padding:0;margin:0;}
.trunk.main .dday-list-wrapper > ul.dday-list > li > a {position:relative;display:block;margin:0 auto;width:340px;height:155px;text-align:center;text-decoration:none;}
.trunk.main .dday-list-wrapper > ul.dday-list > li .team {position:absolute;top:45px;margin:0;padding:0;text-align:center;font-size:12px;color:#fff;}
.trunk.main .dday-list-wrapper > ul.dday-list > li .team.home {left:0;}
.trunk.main .dday-list-wrapper > ul.dday-list > li .team.away {right:0;}
.trunk.main .dday-list-wrapper > ul.dday-list > li .team .badge-club {transform: scale(2.2);margin-bottom:25px;}
.trunk.main .dday-list-wrapper > ul.dday-list > li .team .tit {display:block;font-size:14px;font-weight:bold;}
.trunk.main .dday-list-wrapper > ul.dday-list > li .info {margin:0;padding:30px 0 0;font-size:11px;line-height:14px;font-family: "Montserrat", serif;}
.trunk.main .dday-list-wrapper > ul.dday-list > li .info span {display:block;}
.trunk.main .dday-list-wrapper > ul.dday-list > li .info .dday {font-size:22px;font-weight:bold;color:#00FF87;}
.trunk.main .dday-list-wrapper > ul.dday-list > li .info .date {color:#fff;margin-top:13px;}
.trunk.main .dday-list-wrapper > ul.dday-list > li .info .round {color:#696679;}
.trunk.main .dday-list-wrapper > ul.dday-list > li .info .time {color:#E63A79;font-size:13px;margin-top:13px;}

@media only screen and (max-width: 1599px) {
    .trunk.main .dday-list-wrapper > ul.dday-list > li > a {width:300px;}
    .trunk.main .dday-list-wrapper > a.btn-prev:after {text-align:left ;}
    .trunk.main .dday-list-wrapper > a.btn-next:after {text-align:right;}
}

@media only screen and (max-width: 1199px) {
    .title-box.subtit.main-ddays {}
    .title-box.subtit.main-ddays .btn-more {right:10px;}
    .trunk.main .dday-list-wrapper > ul.dday-list > li > a {width:260px;}
    .trunk.main .dday-list-wrapper > a.btn-prev:after {text-align:right;}
    .trunk.main .dday-list-wrapper > a.btn-next:after {text-align:left ;}
}

@media only screen and (max-width: 991px) {
    .title-box.subtit.main-ddays .btn-more {right:0;}
}

@media only screen and (max-width: 575px) {
    .trunk.main .dday-list-wrapper > a.btn-prev:after {text-align:left ;}
    .trunk.main .dday-list-wrapper > a.btn-next:after {text-align:right;}
    .trunk.main .dday-list-wrapper > ul.dday-list > li > a {width:auto;margin:0 15%;}
    .trunk.main .dday-list-wrapper > ul.dday-list > li .team .badge-club {transform: scale(2.0);margin-bottom:25px;}
}

@media only screen and (max-width: 374px) {
    .trunk.main .dday-list-wrapper > ul.dday-list > li > a {margin:0 10%;}
    .trunk.main .dday-list-wrapper > ul.dday-list > li .team .badge-club {transform: scale(1.8);margin-bottom:25px;}
}

/**
 * MAIN : EVENT
 **/
.trunk.main .event-list-wrapper {position:relative;margin-top:-10px;height:155px;}
.trunk.main .event-list-wrapper p {padding:0;margin:0;}
.trunk.main .event-list-wrapper > a {position:absolute;top:calc(50% - 25px);display:block;font-size:0;width:30px;height:30px;color:rgba(255,255,255,0.3);text-decoration:none !important;}
.trunk.main .event-list-wrapper > a:hover {color:#007aff;}
.trunk.main .event-list-wrapper > a.btn-prev {left :0;}
.trunk.main .event-list-wrapper > a.btn-next {right:0;}
.trunk.main .event-list-wrapper > a:after {display:block;width:30px;height:30px;font-family:'entypo';font-family:'swiper-icons';font-size:30px;}
.trunk.main .event-list-wrapper > a.btn-prev:after {content:"prev";text-align:right;}
.trunk.main .event-list-wrapper > a.btn-next:after {content:"next";text-align:left ;}
.trunk.main .event-list-wrapper ul.event-list {list-style:none;height:135px;padding:0 80px;margin:0;overflow:hidden;}
.trunk.main .event-list-wrapper ul.event-list:after {display:block;content:"";clear:both;}
.trunk.main .event-list-wrapper ul.event-list > li {position:relative;float:left;display:block;padding:0 5px;margin:0;width:calc((100% - 1px) / 3);box-sizing:border-box;text-align:center;}
.trunk.main .event-list-wrapper ul.event-list > li > .tooltip {display:none;z-index:100;position:absolute;top:calc(100% + 7px);left:calc(50% - 15px);width:120px;padding:7px;line-height:16px;font-size:13px;font-style:italic;color:#fff;background-color:#d23771;border-radius:5px;}
.trunk.main .event-list-wrapper ul.event-list > li > .tooltip strong {font-style:normal;font-size:14px;}
.trunk.main .event-list-wrapper ul.event-list > li > .tooltip:after {display:block;content:"";position:absolute;left:15px;top:-14px;width:10px;height:14px;background:url('../img/main-icon-toolip.png') no-repeat left bottom;}
.trunk.main .event-list-wrapper ul.event-list > li > a {position:relative;display:block;margin:0;height:135px;overflow:hidden;text-align:center;text-decoration:none;border:1px solid #4d4d4d;border-radius:10px;background-color:#1a1e21;box-sizing:border-box;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .tit {background-color:#4d4d4d;border-bottom:1px solid #4d4d4d;color:#161616;font-size:13px;line-height:28px;font-weight:bold;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .pep {display:block;height:65px;overflow:hidden;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .pep:after {display:block;content:"";clear:both;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .pep > .uniform-box {float:left;display:block;width:45%;height:65px;min-width:auto;min-height:auto;background-size:auto 60px;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .pep > .uniform-box > .uniform-text {}
.trunk.main .event-list-wrapper ul.event-list > li > a > .pep > .uniform-box > .uniform-text > .no {}
.trunk.main .event-list-wrapper ul.event-list > li > a > .pep > .player {float:right;display:block;width:55%;text-align:center;line-height:16px;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .pep > .player > .name {display:block;padding:18px 0 5px;font-size:15px;font-weight:bold;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .pep > .player > .team {display:inline-block;font-size:12px;color:#161616;padding:0 5px;background-color:#fff;border-radius:8px;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .pep > .player > .pos  {display:inline-block;font-size:12px;color:#ffffff;margin-left:2px;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .rat {display:block;margin:0 8px;padding:5px 0 0;border-top:1px solid #4d4d4d;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .rat > .question {display:block;font-size:10px;line-height:10px;color:#00ff87;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .rat > .xxx {display:block;margin:0 0 0;line-height:18px;font-size:18px;font-weight:bold;color:#d13770;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .rat > .xxx > i {font-style:normal;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .rat > .score {display:block;padding:3px 0 0;line-height:22px;font-size:22px;color:#fff;font-family: "Montserrat", serif;}
.trunk.main .event-list-wrapper ul.event-list > li > a > .rat > .score > i {font-size:16px;font-style:normal;}
.trunk.main .event-list-wrapper ul.event-list > li.on > a {border:1px solid #00ff87;}
.trunk.main .event-list-wrapper ul.event-list > li.on > a > .tit {color:#00ff87;background-color:transparent;border-bottom:1px solid #00ff87;}
.trunk.main .event-list-wrapper ul.event-list > li.on > a > .pep > .player > .name {color:#00ff87;}
.trunk.main .event-list-wrapper ul.event-list > li.on > a > .rat {border-top:1px solid #00ff87;}

.hr.main-ainews {margin:0 auto 0;}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .trunk.main .event-list-wrapper > ul.event-list {padding:0 30px;}
    .trunk.main .event-list-wrapper > a.btn-prev:after {text-align:left ;}
    .trunk.main .event-list-wrapper > a.btn-next:after {text-align:right;}
    .trunk.main .event-list-wrapper > ul.event-list > li > a > .pep > .uniform-box {background-size:auto 55px;}
    
    .hr.main-ainews {margin-top:10px;visibility:hidden;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .title-box.subtit.main-event {padding-left:45px;}
    .trunk.main .event-list-wrapper > ul.event-list {padding:0 40px;}
    .trunk.main .event-list-wrapper > a.btn-prev:after {text-align:right;}
    .trunk.main .event-list-wrapper > a.btn-next:after {text-align:left ;}
    .trunk.main .event-list-wrapper > ul.event-list > li > a > .pep > .uniform-box {background-size:auto 55px;}
    .hr.main-ainews {margin-top:10px;visibility:visible;}
}

@media only screen and (max-width: 991px) {
    .main-event-wrapper {border-top:1px dashed #4d4d4d;padding-bottom:10px;}
}

@media only screen and (max-width: 767px) {
    .trunk.main .event-list-wrapper > ul.event-list > li {width:calc((100% - 1px) / 2);}
}

@media only screen and (max-width: 575px) {
    .trunk.main .event-list-wrapper {height:auto;padding-bottom:10px;}
    .trunk.main .event-list-wrapper > a {display:none;}
    .trunk.main .event-list-wrapper > ul.event-list {padding:0;height:auto;}
    .trunk.main .event-list-wrapper > ul.event-list > li {margin-bottom:10px;}
}

@media only screen and (max-width: 374px) {
    .trunk.main .event-list-wrapper > ul.event-list {padding:0 15px;}
    .trunk.main .event-list-wrapper > ul.event-list > li {width:100%;margin-bottom:15px;}
}

/**
 * SUB : EVENT
 **/
.trunk.event-list {}
.trunk.event-list p {margin:0;padding:0;}
.trunk.event-list ul.event-list {list-style:none;padding:0;margin:0 0 0 -20px;width:calc(100% + 20px);}
.trunk.event-list ul.event-list:after {display:block;content:"";clear:both;}
.trunk.event-list ul.event-list > li {position:relative;float:left;display:block;padding:0;margin:0 0 20px 20px;width:calc((100% - 81px) / 4);box-sizing:border-box;text-align:center;}
.trunk.event-list ul.event-list > li > .tooltip {display:none;z-index:100;position:absolute;top:calc(100% + 7px);left:calc(50% - 15px);width:120px;padding:7px;line-height:16px;font-size:13px;font-style:italic;color:#fff;background-color:#d23771;border-radius:5px;}
.trunk.event-list ul.event-list > li > .tooltip strong {font-style:normal;font-size:14px;}
.trunk.event-list ul.event-list > li > .tooltip:after {display:block;content:"";position:absolute;left:15px;top:-14px;width:10px;height:14px;background:url('../img/main-icon-toolip.png') no-repeat left bottom;}
.trunk.event-list ul.event-list > li > a {position:relative;display:block;margin:0;padding:0 8px;height:268px;overflow:hidden;text-align:center;text-decoration:none;border:1px solid #fff;border-radius:10px;box-sizing:border-box;opacity:0.4;}
.trunk.event-list ul.event-list > li > a:hover {opacity:1;}
.trunk.event-list ul.event-list > li > a:after {position:absolute;display:block;left:0;top:0;width:100%;height:100%;background-color:rgba(0,0,0,0.3);}
.trunk.event-list ul.event-list > li > a > .tit {border-bottom:1px solid #303134;color:#5e6063;font-size:16px;line-height:41px;height:41px;font-weight:bold;}
.trunk.event-list ul.event-list > li > a > .pep {display:block;height:133px;overflow:hidden;}
.trunk.event-list ul.event-list > li > a > .pep:after {display:block;content:"";clear:both;}
.trunk.event-list ul.event-list > li > a > .pep > .uniform-box {float:left;display:block;width:45%;height:133px;min-width:auto;min-height:auto;background-size:auto 110px;}
.trunk.event-list ul.event-list > li > a > .pep > .uniform-box > .uniform-text {bottom:25px;}
.trunk.event-list ul.event-list > li > a > .pep > .uniform-box > .uniform-text > .no {font-size:35px;}
.trunk.event-list ul.event-list > li > a > .pep > .player {float:right;display:block;width:55%;padding:18px 0 0;text-align:center;line-height:16px;}
.trunk.event-list ul.event-list > li > a > .pep > .player > .question {display:block;font-size:10px;line-height:18px;color:#00ff87;}
.trunk.event-list ul.event-list > li > a > .pep > .player > .xxx {display:block;margin:0 0 0;line-height:33px;font-size:33px;font-weight:bold;color:#d13770;}
.trunk.event-list ul.event-list > li > a > .pep > .player > .xxx > i {font-style:normal;}
.trunk.event-list ul.event-list > li > a > .pep > .player > .score {display:block;padding:0 0 0;line-height:33px;font-size:33px;color:#fff;font-family: "Montserrat", serif;}
.trunk.event-list ul.event-list > li > a > .pep > .player > .score > i {font-style:normal;}
.trunk.event-list ul.event-list > li > a > .pep > .player > .name {display:block;padding:15px 0 5px;font-size:20px;font-weight:bold;color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.trunk.event-list ul.event-list > li > a > .pep > .player > .team {display:inline-block;font-size:12px;color:#161616;padding:0 5px;background-color:#fff;border-radius:8px;}
.trunk.event-list ul.event-list > li > a > .pep > .player > .pos  {display:inline-block;font-size:12px;color:#ffffff;margin-left:2px;}
.trunk.event-list ul.event-list > li > a > .inf {padding:20px 40px;position:relative;border-top:1px solid #fff;}
.trunk.event-list ul.event-list > li > a > .inf:after {display:block;content:"";clear:both;}
.trunk.event-list ul.event-list > li > a > .inf .team {width:50px;height:50px;margin:0;padding:0;text-align:center;font-size:12px;color:#fff;}
.trunk.event-list ul.event-list > li > a > .inf .team.home {float:left;}
.trunk.event-list ul.event-list > li > a > .inf .team.away {float:right;}
.trunk.event-list ul.event-list > li > a > .inf .team .badge-club {display:block;margin:10px;transform: scale(1.67);transform-origin:center center;}
.trunk.event-list ul.event-list > li > a > .inf .info {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);margin:0;padding:0;font-size:11px;line-height:15px;font-family: "Montserrat", serif;}
.trunk.event-list ul.event-list > li > a > .inf .info span {display:block;}
.trunk.event-list ul.event-list > li > a > .inf .info .date {color:#fff;font-size:12px;font-weight:bold;}
.trunk.event-list ul.event-list > li > a > .inf .info .round {color:#696679;}
.trunk.event-list ul.event-list > li > a > .inf .info .time {color:#E63A79;margin-top:2px;}
.trunk.event-list ul.event-list > li > a > .inf .info .score {color:#fff;font-size:24px;font-weight:bold;}

.trunk.event-list ul.event-list > li.on > a {opacity:1;border:1px solid #00ff87;}
.trunk.event-list ul.event-list > li.on > a > .tit {color:#00ff87;}
.trunk.event-list ul.event-list > li.on > a > .pep > .player > .question {font-size:14px;font-weight:bold;}
.trunk.event-list ul.event-list > li.on > a > .pep > .player > .name {color:#00ff87;}
.trunk.event-list ul.event-list > li.on > a > .inf {border-top:1px solid #00ff87;}

.trunk.event-list ul.event-list > li.air > a {opacity:1;border:1px solid #c01f22;}
.trunk.event-list ul.event-list > li.air > a > .tit {color:#c01f22;}
.trunk.event-list ul.event-list > li.air > a > .tit .onair {margin-top:-2px;transform:scale(0.8);}
.trunk.event-list ul.event-list > li.air > a > .pep {position:relative;}
.trunk.event-list ul.event-list > li.air > a > .pep > .score {line-height:120px;font-size:42px;color:#c01f22;text-align:center;font-family: "Montserrat", serif;}
.trunk.event-list ul.event-list > li.air > a > .pep > .player {position:absolute;left:0;bottom:12px;width:100%;height:auto;padding:0 10px;box-sizing: border-box;}
.trunk.event-list ul.event-list > li.air > a > .pep > .player:after {display:block;content:"";clear:both;}
.trunk.event-list ul.event-list > li.air > a > .pep > .player > .name {float:left ;padding:0;color:#fff;font-size:22px;}
.trunk.event-list ul.event-list > li.air > a > .pep > .player > .pos  {float:right;margin-left:5px;}
.trunk.event-list ul.event-list > li.air > a > .pep > .player > .team {float:right;}
.trunk.event-list ul.event-list > li.air > a > .inf {border-top:0;margin-top:-4px;}
.trunk.event-list ul.event-list > li.air > a > .stt {display:block;height:5px;background-color:#3d3d3d;}
.trunk.event-list ul.event-list > li.air > a > .stt .bar {display:block;width:1px;height:5px;background-color:#d0021b;}

@media only screen and (min-width: 1200px) and (max-width: 1599px) {
    .trunk.event-list ul.event-list > li > a > .pep > .uniform-box {width:45%;background-size:auto 100px;}
    .trunk.event-list ul.event-list > li > a > .inf {padding:20px 20px;}
}

@media only screen and (min-width: 992px) and (max-width: 1199px) {
    .trunk.event-list ul.event-list > li {width:calc((100% - 61px) / 3);}
}

@media only screen and (min-width: 768px) and (max-width: 991px) {
    .trunk.event-list ul.event-list > li {width:calc((100% - 41px) / 2);}
}

@media only screen and (max-width: 767px) {
    .trunk.event-list ul.event-list > li > a {opacity:1;border:1px solid #666;}
    .trunk.event-list ul.event-list > li > a > .inf {border-top:1px solid #666;}
}

@media only screen and (min-width: 576px) and (max-width: 767px) {
    .trunk.event-list ul.event-list > li {width:calc((100% - 41px) / 2);}
    .trunk.event-list ul.event-list > li > a > .pep > .uniform-box {width:45%;background-size:auto 100px;}
    .trunk.event-list ul.event-list > li > a > .inf {padding:20px 20px;}
}
@media only screen and (max-width: 575px) {
    .trunk.event-list ul.event-list {margin:0;width:auto;}
    .trunk.event-list ul.event-list > li {width:100%;margin:0 0 30px 0;}
}


@media only screen and (min-width: 1600px) {}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {}
@media only screen and (min-width: 992px) and (max-width: 1199px) {}
@media only screen and (min-width: 768px) and (max-width: 991px) {}
@media only screen and (min-width: 576px) and (max-width: 767px) {}
@media only screen and (max-width: 575px) {}



.simplebar-scrollbar {
  position: absolute;
  left: 0;
  right: 0;
  min-height: 10px;
}

.simplebar-scrollbar:before {
  position: absolute;
  content: '';
  background: #00FF87;
  border-radius: 0;
  left: 0;
  right: 0;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.simplebar-scrollbar.simplebar-visible:before {
  /* When hovered, remove all transitions from drag handle */
  opacity: 1;
  transition: opacity 0s linear;
}

.simplebar-track.simplebar-vertical {
  top: 0;
  width: 6px;
  background: #4c4c4c;
}

.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
  top: 0;
  bottom: 0;
}

.simplebar-track.simplebar-horizontal {
  left: 0;
  height: 11px;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
  height: 100%;
  left: 0;
  right: 0;
}

.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
  right: auto;
  left: 0;
  top: 2px;
  height: 7px;
  min-height: 0;
  min-width: 10px;
  width: auto;
}

/**
 * PAGE :: LOGIN
 **/
.trunk.login {}
.trunk.login .cone.body {min-height:650px;/*background-color:rgba(255,255,255,0.2);*/}
.trunk.login .cone.body > .msg {margin:0;padding:0;line-height:24px;font-size:14px;color:#fff;text-align:center;}
.trunk.login .cone.body > ul.lst {margin:30px 0 0;padding:0;line-height:45px;}
.trunk.login .cone.body > ul.lst > li {display:block;margin:15px 0 0;padding:0;}
.trunk.login .cone.body > ul.lst > li:first-child {margin-top:0;}
.trunk.login .cone.body > ul.lst > li > a.sns-btn {display:block;width:100%;max-width:320px;margin:0 auto;font-size:14px;font-weight:bold;color:#fff;text-align:center;text-decoration:none;}
.trunk.login .cone.body > ul.lst > li > a.sns-btn.fb {position:relative;background-color:#3b66c4;}
.trunk.login .cone.body > ul.lst > li > a.sns-btn.gg {position:relative;background-color:#ff5a58;}
.trunk.login .cone.body > ul.lst > li > a.sns-btn.nv {position:relative;background-color:#26c825;}
.trunk.login .cone.body > ul.lst > li > a.sns-btn.kk {position:relative;background-color:#ffeb00;color:#36211e;}
.trunk.login .cone.body > ul.lst > li > a.sns-btn.fb:before {position:absolute;left:9px;top:calc(50% - 10px);display:block;width:20px;height:20px;content:"";background:url('../img/login-sns-icon-set.png') no-repeat   0px 0px;}
.trunk.login .cone.body > ul.lst > li > a.sns-btn.gg:before {position:absolute;left:9px;top:calc(50% - 10px);display:block;width:20px;height:20px;content:"";background:url('../img/login-sns-icon-set.png') no-repeat -40px 0px;}
.trunk.login .cone.body > ul.lst > li > a.sns-btn.nv:before {position:absolute;left:9px;top:calc(50% - 10px);display:block;width:20px;height:20px;content:"";background:url('../img/login-sns-icon-set.png') no-repeat -60px 0px;}
.trunk.login .cone.body > ul.lst > li > a.sns-btn.kk:before {position:absolute;left:9px;top:calc(50% - 10px);display:block;width:20px;height:20px;content:"";background:url('../img/login-sns-icon-set.png') no-repeat -80px 0px;}

/**
 * PAGE :: AGREEMENTS
 **/

.trunk.agreements {font-family:'Noto Sans KR','proxima-nova','Helvetica';line-height:26px;font-size:15px;font-weight:300;color:#bbb;}
.trunk.agreements .cone.body {padding-bottom:100px;min-height:650px;/*background-color:rgba(255,255,255,0.2);*/}
.trunk.agreements .cone.body * {padding:0;margin:0;}
.trunk.agreements .cone.body h2 {margin:60px 0 30px;font-size:22px;font-weight:400;color:#00FF87;}
.trunk.agreements .cone.body h2:first-child {margin-top:0;}
.trunk.agreements .cone.body h3 {margin:30px 0 15px;font-size:18px;font-weight:400;color:#fff;}
.trunk.agreements .cone.body p.d1 {padding:10px 0 10px 15px;}
.trunk.agreements .cone.body ul.d1 {display:block;list-style:none;line-height:22px;}
.trunk.agreements .cone.body ul.d1 > li {position:relative;padding-left:20px;margin-top:8px;}
.trunk.agreements .cone.body ul.d1 > li:first-child {margin-top:0;}
.trunk.agreements .cone.body ul.d1 > li i {position:absolute;left:0;top:0;display:block;font-style:normal;}
.trunk.agreements .cone.body ul.d2 {display:block;margin:10px 0 15px;list-style:none;line-height:20px;font-weight:200;}
.trunk.agreements .cone.body ul.d2 > li {position:relative;padding-left:20px;margin-top:3px;}
.trunk.agreements .cone.body ul.d2 > li:first-child {margin-top:0;}
.trunk.agreements .cone.body ul.d2 > li i {position:absolute;left:0;top:0;display:block;font-style:normal;}

/**
 * LAYOUT :: GUIDE
 **/
#LAYOUT-GUIDE-BTN {z-index:110;position:fixed;right:25px;bottom:25px;}
#LAYOUT-GUIDE-BTN > a {display:block;width:35px;height:35px;border-radius:50%;background-repeat:no-repeat;background-size:contain;}
#LAYOUT-GUIDE-BTN > a.opn {background-image:url('../img/guide_btn_open.png');}
#LAYOUT-GUIDE-BTN > a.top {background-image:url('../img/guide_btn_top.png');margin-top:6px;}

#LAYOUT-GUIDE-BTN-POPUP {display:none;z-index:1010;position:fixed;right:calc(25px + 17px);bottom:25px;}
#LAYOUT-GUIDE-BTN-POPUP > a {display:block;width:35px;height:35px;border-radius:50%;background-repeat:no-repeat;background-size:contain;}
#LAYOUT-GUIDE-BTN-POPUP > a.opn {background-image:url('../img/guide_btn_open.png');}
#LAYOUT-GUIDE-BTN-POPUP > a.top {background-image:url('../img/guide_btn_top.png');margin-top:6px;}

#pop-page.is-active #LAYOUT-GUIDE-BTN-POPUP {display:block;}

#LAYOUT-GUIDE {z-index:1011;position:fixed;right:0;top:0;bottom:0;width:350px;border-left:2px solid #6f2eba;background-color:#373738;opacity:0;transform:translateX(100%);transition:transform 0.3s, opacity 0.3s;}
#LAYOUT-GUIDE.on {transform:translateX(0);opacity:1;transition:transform 0.3s, opacity 0.3s;}
#LAYOUT-GUIDE * {padding:0;margin:0;font-family: "Montserrat", serif;}
#LAYOUT-GUIDE > .title-bar {height:36px;background-color:#6f2eba;}
#LAYOUT-GUIDE > .title-bar:after {display:block;content:"";clear:both;}
#LAYOUT-GUIDE > .title-bar > img {float:left;display:block;margin:9px 0 0 15px;}
#LAYOUT-GUIDE > .title-bar > a.close {float:right;display:block;width:36px;height:36px;font-size:0;background:url('../img/guide_close.png') no-repeat center center;}
#LAYOUT-GUIDE > .list {height:calc(100% - 36px - 312px);padding:0 10px;overflow:hidden;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#LAYOUT-GUIDE > .list > .wrap {height:100%;overflow:hidden;}
#LAYOUT-GUIDE > .list > .wrap > .scroll {height:100%;width:calc(100% + 17px);padding:15px 0;overflow-y:scroll;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table {table-layout:fixed;width:100%;padding:0;margin:15px 0 0;border-spacing:0;line-height:20px;font-size:13px;color:#fff;text-align:left;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table:first-child {margin-top:0;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table tr {}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table th,
#LAYOUT-GUIDE > .list > .wrap > .scroll > table td {padding:7px 0;margin:0;vertical-align:top;cursor:pointer;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table tr:first-child th,
#LAYOUT-GUIDE > .list > .wrap > .scroll > table tr:first-child td {}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table th {padding-left:15px;width:70px;text-align:left;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table td {padding-left:15px;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table td i {display:inline-block;font-style:normal;color:#8c8888;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table.t01 th {color:#11d675;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table.t02 th {color:#b054fd;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table.t03 th {color:#e63a79;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table tr.on td {color:#000;background-color:#fff;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table.t01 tr.on th {color:#000;background-color:#11d675;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table.t02 tr.on th {color:#000;background-color:#b054fd;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table.t03 tr.on th {color:#000;background-color:#e63a79;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table.t01 tr:hover td {color:#11d675;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table.t02 tr:hover td {color:#b054fd;}
#LAYOUT-GUIDE > .list > .wrap > .scroll > table.t03 tr:hover td {color:#e63a79;}
#LAYOUT-GUIDE > .content {height:312px;background:url('../img/guide_bg01.png') no-repeat center center;background-size:cover;}
#LAYOUT-GUIDE > .content > .itm {display:none;padding-top:20px;text-align:center;}
#LAYOUT-GUIDE > .content > .itm.on {display:block;}
#LAYOUT-GUIDE > .content > .itm > .tit {line-height:24px;font-size:24px;font-weight:bold;color:#fff;}
#LAYOUT-GUIDE > .content > .itm.t01 > .tit {color:#00ff87;}
#LAYOUT-GUIDE > .content > .itm.t02 > .tit {color:#b054fd;}
#LAYOUT-GUIDE > .content > .itm.t03 > .tit {color:#e63a79;}
#LAYOUT-GUIDE > .content > .itm > .cnt {margin-top:15px;line-height:14px;font-size:14px;font-weight:normal;color:#fff;}
#LAYOUT-GUIDE > .content > .itm > .dsc {margin-top: 6px;line-height:14px;font-size:14px;font-weight:normal;color:#8c8888;}
#LAYOUT-GUIDE > .content > .itm > img {display:block;margin:15px auto 0;width:250px;}


@media only screen and (max-width: 767px) {
    #LAYOUT-GUIDE-BTN {right:15px;bottom:69px;}
    #LAYOUT-GUIDE-BTN > a {width:45px;height:45px;}
    #LAYOUT-GUIDE-BTN > a.top {display:none;}    
    #LAYOUT-GUIDE-BTN-POPUP {right:15px;bottom:15px;}
    #LAYOUT-GUIDE-BTN-POPUP > a {width:45px;height:45px;}
    #LAYOUT-GUIDE-BTN-POPUP > a.top {display:none;}    
    #LAYOUT-GUIDE > .list > .wrap > .scroll {width:100%;}
}
@media only screen and (max-width: 400px) {
    #LAYOUT-GUIDE {width:100%;border-left:0;}
}


/**
 * LAYOUT :: POPUP
 **/
#hd_pop {z-index:999;position:fixed;top:115px;left:50%;transform:translateX(-50%);max-width:calc(100% - 20px);}
#hd_pop * {margin:0;padding:0;}
#hd_pop > h2 {display:none;}
#hd_pop > .hd_pops {margin-top:10px;border:2px solid #000;}
#hd_pop > .hd_pops:first-child {margin-top:0;}
#hd_pop > .hd_pops > .hd_pops_con {max-width:100%;}
#hd_pop > .hd_pops > .hd_pops_con a {display:block;max-width:100%;}
#hd_pop > .hd_pops > .hd_pops_con img {display:block;max-width:100%;}
#hd_pop > .hd_pops > .hd_pops_footer {padding:10px 10px;background-color:#000;text-align:right;}
#hd_pop > .hd_pops > .hd_pops_footer button {display:inline-block;margin-left:5px;padding:5px 10px;font-size:14px;color:#fff;border:0;background-color:#393939;cursor:pointer;}
#hd_pop > .hd_pops > .hd_pops_footer button:first-child {margin-left:0;}

@media only screen and (max-width: 767px) {
    #hd_pop {top:60px;}
}
@media only screen and (max-width: 400px) {
    #hd_pop > .hd_pops > .hd_pops_footer button {font-size:12px;}
}


@media only screen and (min-width: 1600px) {}
@media only screen and (min-width: 1200px) and (max-width: 1599px) {}
@media only screen and (min-width: 992px) and (max-width: 1199px) {}
@media only screen and (min-width: 768px) and (max-width: 991px) {}
@media only screen and (min-width: 576px) and (max-width: 767px) {}
@media only screen and (max-width: 575px) {}