///////////////////////////////////////////////////////////////
//	Color Setting
///////////////////////////////////////////////////////////////
@color-blue : #1892ed;
@color-font : #31404b;
@color-bg : #edeff4;
@color-border : #dbdfe6;
@gk : #053a61;
@df : #53a808;
@mf : #a89008;
@fw : #a83d08;
@bench : #a80862;
///////////////////////////////////////////////////////////////
//	font setting
///////////////////////////////////////////////////////////////
html {
   body {
      width: 100%;
      font-family: 'Roboto', 'Noto Sans KR', sans-serif;
      font-size: 14px;
   }
}

body {
   font-family: 'Roboto', 'Noto Sans KR', sans-serif;
}

.ff-roboto {
   font-family: 'Roboto', sans-serif !important;
}

.ff-noto {
   font-family: 'Noto Sans KR', sans-serif !important;
}

.clearfix {
   &::after,
   &::before {
      display: table;
      content: "";
      clear: both;
   }
}

///////////////////////////////////////////////////////////////
//	wrap, container setting
///////////////////////////////////////////////////////////////
.container {
   position: relative;
}

.contents {
   width: 100%;
   min-width: 1300px;
   padding-top: 80px;
   .news-list {
      position: relative;
      width: 920px;
      float: left;
   }
   .main-section {
      position: relative;
      width: 920px;
      float: left;
   }
   .container-left {
      position: relative;
      width: 920px;
      float: left;
   }
   .container-right {
      position: relative;
      width: 920px;
      float: right;
   }
   .article {
      position: relative;
      width: 920px;
      float: left;
      background-color: #fff;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      border-top: 4px solid @color-blue;
      .team-score {
         .club {
            text-align: center;
         }
      }
   }
   .sidebar {
      width: 320px;
      margin-left: 60px;
      border-top: 4px solid @color-blue;
      float: right; //		background-color: #fff;
      &>div {
         margin-bottom: 10px;
      }
   }
   .side-nav {
      width: 320px;
      margin-right: 60px;
      float: left;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      ul {
         margin: 0;
         li {
            &.active {
               a {
                  background-color: #1892ed;
                  color: #fff;
                  background-image: url(images/ico-arrowNext-w.png);
               }
            }
            a {
               padding: 0 15px;
               display: block;
               font-size: 16px;
               height: 50px;
               line-height: 50px;
               border-bottom: 1px solid @color-border;
               text-decoration: none;
               color: @color-font;
               background-image: url(images/ico-arrowNext.png);
               background-repeat: no-repeat;
               background-position: center right 15px;
               background-color: #eef7fd;
               background-size: 6px;
            }
         }
      }
      &+.article {
         float: right;
      }
   }
}

.article {
   .sort-bar {
      box-shadow: none;
      border-top: 0;
   }
   .data-table {
      border-top: 0;
   }
   &+.article {
      margin-top: 50px;
   }
}

.bg-color {
   background-color: @color-bg;
}

.container-fluid {
   padding: 0 20px;
}

.container {
   width: 1300px !important;
   max-width: 1300px !important;
   padding-left: 20px;
   padding-right: 20px;
   .row {
      margin-left: -20px;
      margin-right: -20px;
      div[class*="col-"] {
         padding-left: 20px;
         padding-right: 20px;
      }
   }
}

.inner-grid {
   div[class*="col-"] {
      padding-bottom: 10px;
      padding-left: 0;
      padding-right: 0;
   }
   .col-6 {
      &:nth-child(odd) {
         // 홀수
         padding-left: 0;
         padding-right: 5px;
      }
      &:nth-child(even) {
         padding-right: 0;
         padding-left: 5px;
      }
   }
}

.form-control {
   border-radius: 0;
   font-size: 14px; //	padding: .37rem .75rem;
   border-color: @color-border;
   &::placeholder {
      font-size: 14px;
   }
}

.custom-select {
   border-radius: 0;
   border-color: @color-border;
}

.form-check {
   cursor: pointer;
}

.form-check-input {
   position: absolute;
   margin-top: .2rem;
   margin-left: -1.25rem;
   cursor: pointer;
}

.form-check-label {
   cursor: pointer;
}

.input-group {
   &.search-btn-group {
      .form-control {
         height: 38px;
      }
   }
   .input-group-append {
      &.search {
         .btn {
            border-radius: 0;
            width: 43px;
            height: 38px;
            background-image: url(images/ico-search.png);
            background-repeat: no-repeat;
            background-position: right 10px center;
            background-color: #fff;
            border-color: @color-border;
         }
      }
   }
}

.btn {
   -ms-touch-action: manipulation;
   touch-action: manipulation;
   -webkit-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
   outline: none;
   background-repeat: no-repeat;
   background-position: center;
   border: 1px solid @color-border;
   background-color: @color-bg;
   font-size: 14px;
   &[class*="btn-outline"] {
      min-width: 120px;
      border: 1px solid @color-border;
   }
   &.btn-outline-blue {
      border: 1px solid @color-blue;
      color: @color-blue;
      background-color: #fff;
   }
   &.btn-outline-light {
      border: 1px solid @color-border;
      color: @color-font;
      background-color: #fff;
   }
   &:not(.btn-sm).btn-default {
      width: 120px; // height: 40px;
      border: 1px solid @color-border;
      background-color: @color-bg;
   }
   &.btn-primary,
   &.btn-blue {
      min-width: 120px;
      background-color: @color-blue;
      color: #fff;
      font-size: 14px; // 		height: 40px;
      border-color: @color-blue;
   }
   &.btn-acc {
      width: 28px;
      height: 28px;
      background-repeat: no-repeat;
      background-position: center;
      border-radius: 0;
      background-image: url(images/btn-acc-up.png);
      border: 1px solid @color-border;
      background-color: @color-blue;
      &.collapsed {
         background-image: url(images/btn-acc-down.png);
         background-color: #fff;
      }
   }
   &:focus {
      outline: none;
   }
}

.btn-date {
   width: 50px;
   background-image: url(images/btn-date.png);
   border: 1px solid #CED4DA;
   border-left: none;
   border-radius: 0;
   background-repeat: no-repeat;
   background-position: center;
   outline: 0;
   &:focus {
      outline: 0;
   }
}

.btn:focus,
.btn:active:focus,
.btn.active:focus,
.btn.focus,
.btn:active.focus,
.btn.active.focus {
   outline: none;
}

///////////////////////////////////////////////////////////////
//	banner setting
///////////////////////////////////////////////////////////////
.banner-contents-top {
   position: relative;
   .imgbox {
      width: 100%;
      position: relative;
      display: block;
      margin: 42px 0;
      .btns {
         width: 328px;
         position: absolute;
         height: 100%;
         right: 80px;
         a {
            position: absolute;
            width: 50%;
            height: 80%;
            bottom: 10%;
         }
         .google {
            left: 0;
         }
         .apple {
            right: 0;
         }
      }
   }
}

.contentsBanner {
   margin: 20px 0;
}

.fixBanner {
   position: absolute;
   width: 265px;
   height: auto;
   top: 43px;
   &.line {
      .banner-inner {
         border: 1px solid #ddd;
      }
   }
   &.left {
      left: -285px;
      text-align: right;
   }
   &.right {
      right: -285px;
      text-align: left;
   }
} 

.banner-inner {
   display: inline-block;
   max-width: 100%;
   img {
      display: inline-block;
   }
   &+.banner-inner {
      margin-top: 10px;
   }
}

.banner-report {
   padding: 40px 0;
}

.sidebar {
   position: relative;
   .banner {
      position: relative;
   }
   .btns {
      position: absolute;
      width: 100%;
      height: 100%;
      a {
         display: block;
         position: absolute;
         width: 50%;
         height: 40px;
         bottom: 30px;
      }
      .google {
         left: 0;
      }
      .apple {
         right: 0;
      }
   }
}

.blue {
   color: @color-blue;
}

#radioBtn {
   a {
      margin: 0;
      line-height: 28px;
      font-size: 14px;
      &.active {
         border: 1px solid @color-blue;
         color: @color-blue;
         background-color: #fff;
      }
      &.notActive {
         background-color: #fff;
      }
   }
}

.mh-auto {
   min-height: auto !important;
}

///////////////////////////////////////////////////////////////
//	navigation setting
///////////////////////////////////////////////////////////////
nav.navbar {
   padding: 0;
   .nav-top {
      width: 100%;
      padding: 26px 0;
      border-bottom: 1px solid #e0e0e0;
      .brand {
         width: 260px;
      }
   }
   .nav-menu {
      width: 100%;
      height: 50px;
      border-bottom: 1px solid #e0e0e0;
      .menu-set {
         border-left: 1px solid #e0e0e0;
         border-right: 1px solid #e0e0e0; //			border-top: none;
         background-color: transparent;
      }
      .gnb {
         list-style-type: none;
         padding: 0;
         margin: 0; //			border-bottom: 1px solid #e0e0e0;
         li {
            position: relative;
            float: left; //				border-bottom: 1px solid #e0e0e0;
            &.active {
               a::after {
                  background-color: @color-blue;
               }
            }
            a {
               position: relative;
               display: block;
               //width: 165.5px;
	       width: 132.4px;
               text-align: center;
               line-height: 49px;
               text-decoration: none;
               font-weight: 500;
               height: 49px;
               color: #31404b;
               font-size: 16px;
               border-right: 1px solid #e0e0e0; //					border-bottom: 1px solid #e0e0e0;
               &::after {
                  position: absolute;
                  content: "";
                  width: 100%;
                  height: 3px;
                  background-color: #fff;
                  left: 0;
                  bottom: 0;
                  transition: 0.3s;
               }
               &:hover {
                  //						color: @color-blue;
                  &::after {
                     background-color: @color-blue;
                  }
               }
            }
         }
      }
      .quick-link-en {
         width: 768px; //20180905 유스 메뉴숨김후 width 조절          
         background-color: #eef7fd;
         height: 49px; //			border-bottom: 1px solid #e0e0e0;
         ul {
            width: 100%;
            margin: 0;
            li {
               position: relative;
               float: right;
               padding: 16px 20px; 
               &:first-child {
                  a {
                     background-image: url(images/lang.png);
                     background-repeat: no-repeat;
                     background-position: right center;
                     padding-right: 28px;
                     &::after {
                        content: none;
                     }
                  }
               }
               a {
                  text-transform: uppercase;
                  display: block;
                  width: 100%;
                  height: 18px;
                  line-height: 18px;
                  color: #31404b;
                  text-decoration: none;
                  letter-spacing: -0.04em;
                  &::after {
                     position: absolute;
                     content: "";
                     width: 1px;
                     height: 18px;
                     background-color: #e0e0e0;
                     right: 0;
                  }
               }
            }
         }
      }
      
      .quick-link-kr {
         // width: 470px; 20180905 유스 메뉴숨김후 width 조절 
         width: 636px;   
          // width: 470px;            
         background-color: #eef7fd;
         height: 49px; //			border-bottom: 1px solid #e0e0e0;
         ul {
            width: 100%;
            margin: 0;
            li {
               position: relative;
               float: right;
               padding: 16px 20px;
               &:first-child {
                  a {
                     background-image: url(images/lang.png);
                     background-repeat: no-repeat;
                     background-position: right center;
                     padding-right: 28px;
                     &::after {
                        content: none;
                     }
                  }
               }
               a {
                  text-transform: uppercase;
                  display: block;
                  width: 100%;
                  height: 18px;
                  line-height: 18px;
                  color: #31404b;
                  text-decoration: none;
                  letter-spacing: -0.04em;
                  &::after {
                     position: absolute;
                     content: "";
                     width: 1px;
                     height: 18px;
                     background-color: #e0e0e0;
                     right: 0;
                  }
               }
            }
         }
      }
      .quick-link {
         // width: 470px; 20180905 유스 메뉴숨김후 width 조절 
         width: 636px;   
          // width: 470px;            
         background-color: #eef7fd;
         height: 49px; //			border-bottom: 1px solid #e0e0e0;
         ul {
            width: 100%;
            margin: 0;
            li {
               position: relative;
               float: right;
               padding: 16px 20px;
               &:first-child {
                  a {
                     background-image: url(images/lang.png);
                     background-repeat: no-repeat;
                     background-position: right center;
                     padding-right: 28px;
                     &::after {
                        content: none;
                     }
                  }
               }
               a {
                  text-transform: uppercase;
                  display: block;
                  width: 100%;
                  height: 18px;
                  line-height: 18px;
                  color: #31404b;
                  text-decoration: none;
                  letter-spacing: -0.04em;
                  &::after {
                     position: absolute;
                     content: "";
                     width: 1px;
                     height: 18px;
                     background-color: #e0e0e0;
                     right: 0;
                  }
               }
            }
         }
      }
   }
}

.nav-league-part {
   width: 1020px;
   .selector {
      width: 240px;
      ul {
         margin-top: 17px;
         margin-bottom: 0;
         li {
            position: relative;
            float: right;
            div {
               display: block;
               padding: 15px 12px;
               cursor: pointer;
               span {
                  height: 9px;
                  display: block;
                  background-image: url(images/league-part.png);
                  background-repeat: no-repeat;
               }
               &.league1 span {
                  width: 68px;
                  background-position: 0 0;
                  &::after {
                     position: absolute;
                     content: "";
                     width: 1px;
                     height: 9px;
                     right: 0;
                     background-color: #b2bac8;
                  }
               }
               &.league2 span {
                  width: 71px;
                  background-position: -78px 0;
               }
               &:hover span,
               &.active span {
                  background-position-y: -9px;
               }
            }
         }
      }
   }
   .teams-list {
      width: 724px;
      list-style: none;
      padding: 0;
      margin: 0;
      li {
         padding: 0;
         width: 40px;
         a {
            display: block;
            height: 56px;
            padding: 9px 0 7px;
         }
         img {
            display: block;
            margin: 0 auto;
         }
      }
   }
}

///////////////////////////////////////////////////////////////
//	footer setting
///////////////////////////////////////////////////////////////
.footer {
   color: #b0b0b0;
   padding-top: 0;
   a {
      color: #b0b0b0;
      text-decoration: none;
      &:hover {
         color: #fff;
      }
   }
   .footer-top {
      width: 100%;
      height: 110px;
      border-bottom: 1px solid #373741;
      background-color: #2f2f39;
      padding: 22px 0;
      text-align: center;
      a {
         opacity: .4;
         display: block;
         &:hover {
            opacity: 1;
         }
      }
      img {
         display: inline-block;
      }
   }
   .footer-mid {
      width: 100%;
      background: linear-gradient(90deg, #191923 50%, #25252f 50%);
      .container {
         &>.row>div {
            padding-top: 40px;
            padding-bottom: 40px;
            h5 {
               margin-bottom: 30px;
            }
         }
         .k-league {
            padding-left: 0;
            background-color: #191923;
            letter-spacing: -0.04em;
            font-weight: lighter;
            line-height: 24px;
            .logo {
               margin-bottom: 64px;
               a {
                  opacity: .4;
                  &:hover {
                     opacity: 1;
                  }
               }
            }
         }
         .about {
            padding-left: 80px;
            background-color: #25252f;
            h5 {
               font-size: 18px;
               text-transform: uppercase;
               font-weight: bold;
               color: #fff;
            }
            ul {
               list-style: none;
               padding: 0;
               margin: 0;
               li {
                  position: relative;
                  padding-left: 10px;
                  line-height: 30px;
                  &::before {
                     content: "";
                     position: absolute;
                     width: 2px;
                     height: 2px;
                     background-color: #b0b0b0;
                     left: 0px;
                     top: 13px;
                  }
               }
            }
         }
      }
   }
   .footer-btm {
      width: 100%;
      border-top: 1px solid #42424C;
      background: linear-gradient(90deg, #21212e 50%, #2c2c36 50%);
      .container {
         &>.row>div {
            font-size: 13px;
            line-height: 60px;
         }
         .copyright {
            padding: 0;
            letter-spacing: -0.04em;
            background-color: #21212e;
         }
         .familly-site {
            background-color: #2c2c36;
            padding-left: 80px;
            h6 {
               font-size: 13px;
               display: inline-block;
               color: #fff;
               padding-right: 15px;
            }
            ul {
               display: inline-block;
               padding: 0;
               margin: 0;
               list-style: none;
               li {
                  display: inline-block;
                  &:last-child a::after {
                     content: none;
                  }
                  a {
                     position: relative;
                     display: inline-block;
                     padding: 0 10px;
                     &::after {
                        position: absolute;
                        content: "";
                        width: 1px;
                        height: 14px;
                        margin-top: -7px;
                        top: 50%;
                        right: 0px;
                        background-color: #b0b0b0;
                     }
                  }
               }
            }
         }
      }
   }
}

.main-contens {
   h3 {
      position: relative;
      margin-top: 50px;
      margin-bottom: 25px;
      font-weight: lighter;
      text-transform: uppercase;
      .more {
         position: absolute;
         right: 0;
         bottom: 0;
         font-size: 14px;
         font-weight: normal;
         color: #000;
         letter-spacing: -0.025em;
         &:hover {
            color: #000;
         }
      }
   }
}

#recent-box {
   padding-bottom: 35px;
   .video {
      padding-right: 35px;
   }
   .news {
      padding-left: 35px;
   }
}

.box {
   padding: 5px !important;
}

.pagination-box {
   width: 100%;
   margin-top: 15px;
   margin-bottom: 0;
   .pagination {
      margin: 0;
   }
   .page-item {
      &.active {
         .page-link {
            border-color: @color-border;
            background-color: #fff;
            color: @color-blue;
            text-decoration: underline;
         }
      }
      .page-link {
         min-width: 40px;
         height: 40px;
         border-color: @color-border;
         border-radius: 0 !important;
         text-align: center;
         padding: 12px;
         color: #616770;
         .ico {
            display: block;
            margin-top: -2px;
         }
      }
   }
}

.news-list {
   .card {
      border-radius: 8px;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
   }
}

.card {
   position: relative; //	margin: 5px;
   border-radius: 8px;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   border-color: @color-border;
   .desc {
      position: relative;
      display: block;
      margin: 25px 20px 22px;
      .ff-noto;
      p {
         display: block;
         font-size: 16px;
         letter-spacing: -0.04em;
         overflow: hidden;
         text-overflow: ellipsis;
         display: -webkit-box;
         -webkit-line-clamp: 2;
         -webkit-box-orient: vertical;
         word-wrap: break-word;
         line-height: 1.625em;
         height: 3.25em;
         word-break: break-all;
         max-width: 270px;         
      }
   }
   .list-photo {
      position: absolute;
      width: 250px;
      top: 0;
      bottom: 0;
      -webkit-background-size: cover;
      background-size: cover;
      background-position: center;
      background-image: url(http://placehold.it/300x200);
   }
   .summary {
      padding: 20px 20px 20px 270px;
      h4 {
         font-size: 16px;
         margin: 15px 0;
         a {
            text-decoration: none;
            color: @color-font;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            word-wrap: break-word;
            line-height: 1.2em;
            height: 1.2em;
         }
      }
      .tag {
         color: #fff;
         text-transform: uppercase;
         font-weight: lighter;
         width: 114px;
         height: 24px;
         line-height: 24px;
         font-size: 14px;
         padding-left: 15px;
         background-image: url("images/clip-tag.png");
         background-repeat: no-repeat;
         background-position: left center;
      }
   }
   .text {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      word-wrap: break-word;
      line-height: 1.5em;
      height: 4.4em;
   }
   .info {
      display: block;
      margin-top: 15px;
      font-size: 12px;
      color: #616770;
      line-height: 12px;
   }
   .date {
      position: relative;
      display: inline-block;
      margin-top: 15px;
      font-size: 12px;
      color: #616770;
      line-height: 12px;
      padding-right: 20px;
      &::after {
         position: absolute;
         content: "";
         width: 1px;
         height: 100%;
         top: 1px;
         right: 10px;
         background-color: #616770;
      }
   }
}

.card-header {
   position: relative; //		border-left: 6px solid @color-blue;
   font-size: 16px;
   background-color: #fff;
   padding-left: 20px;
   &::before {
      position: absolute;
      content: "";
      width: 6px;
      height: 100%;
      left: 0;
      top: 0;
      background-color: @color-blue;
   }
}

.card-body {
   img {
      max-width: 100%;
   }
   &+.card-body {
      border-top: 1px solid @color-border;
   }
}

.cover-clip {
   position: relative;
   width: 100%;
   height: 246px;
   background-color: #000;
   z-index: 1;
   cursor: pointer;
   .tag {
      position: absolute;
      color: #fff;
      .ff-roboto;
      text-transform: uppercase;
      font-weight: bold;
      width: 114px;
      height: 24px;
      line-height: 24px;
      font-size: 14px;
      z-index: 3;
      bottom: 20px;
      padding-left: 15px;
      background-image: url(images/clip-tag.png);
      background-repeat: no-repeat;
      background-position: left center;
   }
   .img {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      background-position: center;
      background-size: cover;
      background-image: url('http://placehold.it/300x200');
   }
   &.video {
      &::before {
         position: absolute;
         content: "";
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
         background-image: url(images/video-play.png);
         background-repeat: no-repeat;
         background-position: center;
         z-index: 10;
         cursor: pointer;
      }
      .img {
         opacity: .55;
      }
   }
}

.build-hexagon(@size: 32px,
@color: #000,
@text-color: #fff) {
   @_height: @size / sqrt(3);
   position: absolute;
   width: @size;
   height: @_height; //	background-color: rgba( red(@color), green(@color), blue(@color), 0.7);
   background-color: @color;
   margin: @_height/2;
   opacity: 0.8;
   .text {
      position: absolute;
      top: 0;
      left: 0;
      font-size: @_height / 1.2;
      color: @text-color;
      width: @size;
      height: @_height;
      text-align: center;
      overflow: hidden;
      line-height: @_height;
   }
   &:hover {
      opacity: 1;
   }
   &:before,
   &:after {
      content: "";
      position: absolute;
      width: 0;
      border-left: @size/2 solid transparent;
      border-right: @size/2 solid transparent;
   }
   &:before {
      bottom: 100%;
      border-bottom: @_height/2 solid @color;
   }
   &:after {
      top: 100%;
      left: 0;
      width: 0;
      border-top: @_height/2 solid @color;
   }
}

.hexagon-color(@color) {
   background-color: @color;
   &:before {
      border-bottom-color: @color;
   }
   &:after {
      border-top-color: @color;
   }
}

.hexagon-text-color(@color) {
   .text {
      color: @color;
   }
}

.social-link {
   width: 100%;
   text-align: center;
   margin: 0;
   li {
      display: inline-block;
      padding: 0 10px;
      a {
         display: block;
         width: 80px;
         height: 80px;
      }
   }
}

@hex_width: 194px;
@hex_height: @hex_width*1.2;
div.ranker-group {
   margin-top: 40px;
   width: @hex_width*2;
   position: relative;
   div[class*="player"] {
      width: @hex_width;
      height: @hex_height;
   }
   h3 {
      position: absolute;
      font-size: 23px;
      width: 90px;
      height: 50px;
      border-top: 1px solid #00477e;
      color: #00477e;
      line-height: 50px;
      top: @hex_height/3;
      font-weight: lighter;
      &.right-text {
         text-align: right;
         right: 0;
      }
      &.left-text {
         text-align: left;
         left: 0;
      }
   }
   .player-1 {
      margin-left: @hex_width/2;
   }
   .player-2 {
      float: left;
      margin-top: -16.5%;
   }
   .player-3 {
      float: left;
      margin-top: -16.5%;
   }
   &.right {
      position: absolute;
      top: 200px;
      right: 20px; //		float: right;
   }
}

div[class*="hex__"] {
   overflow: hidden;
   display: block;
}

.hex__1 {
   //	margin: 5% 0;
   width: @hex_width;
   height: @hex_height;
}

.hex__2 {
   width: @hex_width;
   height: @hex_width*1.5;
   transform: translateY(-50%) rotate(60deg);
   transform-origin: 50% 50%;
   position: relative;
   top: 50%;
}

.hex__3 {
   transform: rotate(-120deg);
   transform-origin: 50% 50%;
   background-color: @color-bg;
   width: @hex_width;
   height: @hex_width*1.5;
   display: block;
}

.content_inner {
   display: block;
   width: @hex_width;
   height: @hex_width*1.2;
   position: relative;
   top: 50%;
   transform: translateY(-50%) rotate(60deg);
   text-align: center; //works with background image as well as content
   // 	background-image: url("images/dummy-player.jpg");
   background-color: #fff;
   background-position: center;
   background-size: cover;
   transition: all 300ms;
   img {
      height: 100%;
      margin: 0 auto;
      position: relative;
      left: 50%;
      transform: translateX(-50%);
   }
   .score {
      position: absolute;
      bottom: 0;
      height: 94px;
      font-size: 14px;
      background-color: rgba(0, 0, 0, 0.6);
      left: 0;
      right: 0;
      color: #fff;
      .team {
         width: 100%;
         height: 55px;
         padding: 0 15px;
         .float-left {
            height: 50px;
            line-height: 50px;
            font-size: 29px;
         }
         .float-right {
            padding-top: 2px;
         }
         span {
            text-align: right;
            display: block;
            font-weight: lighter;
            line-height: 20px;
            text-transform: uppercase;
            &:last-child {
               font-weight: bold;
               text-transform: none;
            }
         }
      }
      .point {
         height: 44px;
         position: absolute;
         bottom: 0;
         left: 0;
         right: 0;
         background-color: #00477e;
         color: #fff;
         font-weight: lighter;
         padding-top: 4px;
      }
   }
}

.ranking-board {
   padding-bottom: 110px;
   .ranking {
      .ranking-table;
      padding-right: 0;
      h4 {
         font-weight: lighter;
         font-size: 24px;
         text-align: center;
         .ff-noto;
         margin: 40px 0;
      }
      .table {
         thead {
            th {
               font-size: 20px;
               color: #999999;
               font-weight: lighter;
               .ff-noto;
               &:first-child {
                  padding-left: 1em;
               }
            }
         } // tbody {
         //    position: relative;
         //    tr {
         //       position: relative;
         //       td:first-child {
         //          padding-left: 1em;
         //       }
         //    }
         //    tr:nth-child(-n+3) {
         //       td:first-child {
         //          color: #000;
         //          position: relative;
         //          &::after {
         //             position: absolute;
         //             content: "";
         //             width: 22px;
         //             height: 46px;
         //             left: 0;
         //             top: 8px;
         //             background-image: url(images/ranking-tag.png);
         //             background-repeat: no-repeat;
         //             background-size: 22px auto;
         //          }
         //       }
         //    }
         //    tr:nth-child(n+4) {
         //       td:first-child {
         //          color: #c4c4c4;
         //       }
         //    }
         //    tr:nth-last-child(2) {
         //       //					11번째
         //       td:first-child::after {
         //          position: absolute;
         //          content: "";
         //          width: 22px;
         //          height: 46px;
         //          left: 0;
         //          top: 8px;
         //          background-image: url(images/ranking-tag.png);
         //          background-repeat: no-repeat;
         //          background-size: 22px auto;
         //          background-position-y: -46px;
         //       }
         //    }
         //    tr:last-child {
         //       //					12번째
         //       td:first-child::after {
         //          position: absolute;
         //          content: "";
         //          width: 22px;
         //          height: 46px;
         //          left: 0;
         //          top: 8px;
         //          background-image: url(images/ranking-tag.png);
         //          background-repeat: no-repeat;
         //          background-size: 22px auto;
         //          background-position-y: -92px;
         //       }
         //    }
         // }
         td {
            position: relative;
            height: 62px;
            vertical-align: middle;
            font-size: 20px;
            font-weight: 100;
            .ff-roboto;
            color: #666;
         }
      }
   }
}

.table {
   text-align: center;
}

.social-media {
   border-bottom: 1px solid #e6e6e6;
   padding-bottom: 55px;
   .facebook {
      padding-left: 0;
   }
   .instagram {
      padding-right: 0;
   }
   .social-innerbox {
      border: 1px solid @color-border;
      border-top-width: 2px;
      border-top-color: #435992;
      h2 {
         font-size: 22px;
         height: 57px;
         line-height: 57px;
         border-bottom: 1px solid @color-border;
         text-transform: uppercase;
         padding-left: 20px;
         background-color: #fff;
         margin: 0;
      }
      img {
         max-width: 100%;
      }
   }
}

.header {
   min-width: 1300px;
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
   &.games {
      height: 368px;
      background-image: url(images/header-gmaes.jpg);
      color: #fff;
      text-align: center;
      padding: 90px 0;
      h3,
      h4 {
         font-size: 18px;
         font-weight: lighter;
      }
      h1 {
         margin-top: 15px;
         margin-bottom: 25px;
         font-size: 48px;
         font-weight: bold;
      }
   }
   &.club {
      position: relative;
      height: 368px;
      background-image: url(images/head-news.jpg);
      .container {
         position: relative;
         &::after {
            content: "";
            position: absolute;
            top: 36px;
            left: -17px;
            width: 867px;
            height: 322px;
            background-image: url(images/header-clubboard.png);
         }
      }
   }
   &.news {
      height: 600px;
      background-image: url(images/head-news.jpg);
      .slider {
         padding: 40px 0;
         width: 1300px;
         margin: 0 auto;
      }
   }
   &.match-board {
      margin: 0;
      padding: 40px 0;
      width: 100%;
      height: auto;
      background-image: url(images/head-news.jpg);
      .board {
         margin: 0 auto;
         width: 700px; // height: 289px; //			padding: 30px;
         padding-bottom: 20px;
         background-color: rgba(0, 0, 0, 0.7);
         border: 1px solid #202020;
         box-shadow: 0 13px 17.6px 0.4px rgba(0, 0, 0, 0.75);
         text-align: center;
         color: #fff;
         .match-info {
            padding: 30px;
         }
         .score-board {
            width: 388px;
            margin: 0 auto;
            div[class*="team-"] {
               position: relative;
               width: 84px;
               height: 96px;
               float: left;
/*               background-image: url(images/match-hex-board.png);*/
               background-repeat: no-repeat;
               padding: 17px 11px;
               img {
                  max-width: 100%;
               }
               span {
                  position: absolute;
                  display: block;
                  left: 0;
                  right: 0;
                  top: 116px;
                  font-size: 26px;
                  font-weight: lighter;
                  text-align: center;
                  text-shadow: 0 5px 5px rgba(0, 0, 0, 0.75);
               }
            }
            .score {
               width: 220px;
               float: left;
               span {
                  display: block;
                  width: 100%;
                  height: 96px;
                  font-size: 50px;
                  line-height: 96px;
               }
               .stadium {
                  position: relative;
                  padding-top: 75px;
                  height: 90px;
                  background-image: url(images/stadium.png);
                  background-repeat: no-repeat;
                  background-position: center top 16px;
               }
            }
         }
      }
   }
}

.main-slider {
   width: 100%;
   height: 694px;
   background-color: #000;
}

.league-table {
   width: 100%;
   height: 180px;
   border-bottom: 2px solid #05090e;
   background-color: #191923;
   .league-swiper {
      background-color: #05090e;
      padding: 0 55px;
      .swiper-wrapper {
         //			border-left: 2px solid #05090e;
         //			border-right: 2px solid #05090e;
         .swiper-slide {
            display: block;
            position: relative;
            color: #fff;
            font-weight: lighter;
            .slide-detail {
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 200%;
               display: block;
               position: relative;
               background-color: #191923;
               transition: 0.2s; // font-size: 12px;
               &:hover {
                  top: -100%;
               }
            }
            .game {
               width: 100%;
               height: 50%;
               display: block;
               position: relative;
               padding: 20px;
               .info {
                  font-size: 16px; /*180910 14->16 */
                  border-bottom: 1px solid #4a4a5b;
                  span {
                     display: block;
                     text-transform: uppercase;
                  }
               }
               .broadcast {
                  position: absolute;
                  left: 20px;
                  right: 20px;
                  bottom: 20px;
                  height: 22px;
                  line-height: 22px;
                  font-size: 16px; /* 180910 14->16 */
                  img {
                     max-width: 100%;
                  }
               }
            }
         }
      }
      .swiper-button-prev,
      .swiper-button-next {
         width: 55px;
         height: 180px;
         top: 0;
         margin-top: 0;
         background-color: #191923;
         background-size: 12px 22px;
      }
      .swiper-button-prev {
         left: 0;
         border-right: 2px solid #05090e;
      }
      .swiper-button-next {
         right: 0;
         border-left: 2px solid #05090e;
      }
   }
}

.match {
   position: absolute;
   width: 156px;
   height: 46px;
   margin: 20px auto;
   left: 50%;
   margin-left: -78px;
   div {
      height: 100%;
   }
   .score {
      float: left;
      position: relative;
      width: 76px;
      text-align: center;
      line-height: 46px;
      font-size: 20px;
   }
   .team-1 {
      position: relative;
      float: left;
      width: 40px;
      height: 46px;
     /* 0910 엠블럽배경 삭제요청  background-image: url(images/match-hex.png);*/
      padding: 8px 5px;
      img {
         max-width: 100%;
      }
   }
}

.over-box {
   width: 100%;
   height: 50%;
   border: 0;
   border-top: 8px solid @color-blue;
   background-color: #292935;
   font-size: 16px; /*180910 12->16*/
   div {
      position: relative;
      width: 50%;
      height: 100%;
      border-top: 1px solid #13131c;
      background-repeat: no-repeat;
      background-position: center;
      cursor: pointer;
      span {
         left: 0;
         right: 0;
         position: absolute;
         bottom: 25px;
         text-align: center;
      }
   }
   .tv {
      background-image: url(images/over-tv.png);
   }
   .matchgame {
      background-image: url(images/over-match.png);
   }
   .high {
      background-image: url(images/over-high.png);
   }
   .ticket {
      background-image: url(images/over-ticket.png);
   }
   .float-right {
      border-left: 1px solid #13131c;
   }
   .float-left {
      border-right: 1px solid #4a4a5b;
   }
}

.swiper-container {
   width: 100%;
   height: 100%;
}

.swiper-slide {
   text-align: center;
   font-size: 18px;
   /* Center slide text vertically */
   display: -webkit-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
   -webkit-box-pack: center;
   -ms-flex-pack: center;
   -webkit-justify-content: center;
   justify-content: center;
   -webkit-box-align: center;
   -ms-flex-align: center;
   -webkit-align-items: center;
   align-items: center;
   overflow: hidden;
   .box {
      padding: 0 !important;
      .desc {
         text-align: left;
         .date::after {
            content: none;
         }
      }
   }
   .text {
      text-align: left;
      position: absolute;
      bottom: 40px;
      left: 40px;
      color: #fff;
      .title {
         font-size: 36px;
         font-weight: bold;
         margin: 15px 0;
      }
      .date {
         font-size: 14px;
         color: #d0d0d0;
      }
      .tag {
         color: #fff;
         text-transform: uppercase;
         font-weight: bold;
         width: 114px;
         height: 24px;
         line-height: 24px;
         font-size: 14px;
         padding-left: 15px;
         background-image: url(images/clip-tag.png);
         background-repeat: no-repeat;
         background-position: left center;
      }
   }
}

.page-title {
   margin-top: 0px;
   margin-bottom: 30px;
   color: #31404b;
   font-size: 36px;
   font-weight: bold;
   text-transform: uppercase;
}

.article-head {
   border-bottom: 1px solid @color-border;
   h2 {
      font-size: 26px;
      color: @color-font;
      margin-top: 60px;
      margin-bottom: 20px;
      padding: 0 20px;
   }
   h3 {
      font-size: 20px;
      color: @color-font;
      padding: 30px 20px 20px;
      border-top: 1px solid @color-border;
      margin: 0;
   }
   .desc {
      border-top: 1px solid @color-border; //		border-bottom: 1px solid @color-border;
      height: 40px; //		line-height: 40px;
      font-size: 12px;
      padding: 0 20px;
   }
   .info {
      float: left;
      line-height: 40px;
      .date {
         position: relative;
         padding-right: 20px;
         &::after {
            position: absolute;
            content: "";
            width: 1px;
            height: 100%;
            right: 10px;
            top: 0;
            background-color: @color-font;
         }
      }
   }
   .sns-list {
      float: right;
      margin: 0;
      padding: 7px 0;
      li {
         float: left;
         padding: 0 2px;
      }
   }
}

.article-body {
   min-height: 545px;
   padding: 25px 20px;
   h3 {
      margin-top: 50px;
      padding-bottom: 13px;
      border-bottom: 1px solid #ddd;
      margin-bottom: 20px;
      font-size: 18px;
   }
   h5 {
      margin-top: 30px;
      font-size: 15px;
      font-weight: bold;
      margin-bottom: 15px;
   }
   .timeline_list {
      list-style-type: none;
      padding-left: 0;
   }
   .search {
      float: right;
      width: 300px;
      margin-bottom: 10px;
   }
   a {
      display: inline-block;
      color: @color-blue;
      margin-bottom: 25px;
   }
   .point {
      color: @color-blue;
   }
   h6 {
      &.date {
         color: @color-blue;
      }
      &+p {
         margin-top: 25px;
      }
   }
   .nav-tabs {
      margin-bottom: 30px;
      li {
         a {
            &.active {
               color: @color-blue;
            }
            color: #666;
            margin: 0; // padding: 10px 20px;
            // border-bottom: 1px solid #ccc;
         }
      }
   }
   .tab-pane {
      .row {
         margin-bottom: 20px;
      }
      .num_wrap {
         text-align: center;
         font-size: 20px;
         font-weight: 300;
      }
      .history_cont {
         p {
            margin-bottom: 5px;
            color: #666;
         }
      }
   }
   .table {
      .num,
      .view {
         width: 90px;
      }
      .date {
         width: 100px;
      }
      .title {
         text-align: left;
      }
   }
   p {
      font-size: 14px;
      color: @color-font;
      line-height: 26px;
   }
   img {
      max-width: 100%;
      margin-bottom: 40px;
   }
   .img {
      display: block;
      margin-bottom: 40px;
      max-width: 100%;
      border: 1px solid @color-border;
   }
}

.article-footer {
   border-top: 1px solid @color-border; //	background-color: #fff;
   padding: 20px 20px 40px;
   .btn {
      display: block;
      margin: 0 auto;
   }
}

.btn-set {
   text-align: center;
   .btn {
      display: inline-block;
   }
}

.survey {
   border: 1px solid @color-border;
   border-radius: 0 0 8px 8px;
   background-color: #fff;
   .title {
      height: 60px;
      line-height: 60px;
      border-left: 6px solid @color-blue;
      font-size: 16px;
      padding-left: 15px;
   }
   .survey-body {
      border-top: 1px solid @color-border;
      padding: 30px 20px;
      span {
         display: inline-block;
         margin-bottom: 10px;
      }
   }
   .survey-footer {
      border-top: 1px solid @color-border;
      padding: 10px 20px 20px;
      text-align: center;
   }
}

.sort-bar {
   width: 100%;
   height: 110px;
   background-color: @color-bg;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   padding: 20px 15px;
   margin-bottom: 35px;
   .top-point-board;
   div[class*="col"] {
      padding-left: 10px !important;
      padding-right: 10px !important;
   }
}

.sub-sort {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); //	padding: 20px 15px;
   margin-bottom: 35px;
   border-radius: 0;
   .top-point-board;
   .card-header {
      &::before {
         content: none;
      }
   }
   .card-body {
      padding: 15px;
      border-radius: 0;
   }
   div[class*="col"] {
      padding-left: 10px !important;
      padding-right: 10px !important;
   }
}

#news-main {
   padding-top: 0;
   h2 {
      text-transform: uppercase;
      margin: 40px auto 20px;
      text-align: center;
   }
   .btn {
      display: block;
      margin: 20px auto 40px;
      border: 1px solid @color-border;
      border-radius: 0;
      color: #616770;
      font-size: 14px;
   }
   .menu-group {
      .menuGroup;
   }
}

.top-point-board {
   border-top: 4px solid @color-blue;
}

#index {
   .contents {
      padding-top: 0;
   }
}

#ranking {
   .ranking-table;
}

.data-table {
   width: 100%;
   padding: 40px 20px;
   background-color: #fff;
   .top-point-board;
   .header {
      min-width: 100%;
      &.personal {
         text-align: center;
         .players {
            padding-bottom: 30px;
            &>div {
               display: inline-block;
               padding: 0 5px;
            }
         }
      }
      &.monthly {
         text-align: center;
         padding-bottom: 40px;
         div {
            display: inline-block;
            font-size: 26px;
            line-height: 20px;
            padding: 0 30px;
         }
         .navi {
            display: inline-block;
            width: 21px;
            height: 20px;
            padding: 0 5px;
            .ico {
               display: inline-block;
               width: 11px;
               height: 20px;
               background-image: url(images/ico-month-arrow.png);
               background-repeat: no-repeat;
               &.next {
                  background-position: -11px 0;
               }
            }
         }
      }
   }
   .cal {
      display: inline-block;
      width: 20px;
      height: 20px;
      background-image: url(images/ico-cal.png);
      background-repeat: no-repeat;
      background-position: 0 0;
      &.active {
         background-position: 0 -20px;
      }
   }
   .table {
      .col-cal {
         width: 50px;
      }
      .col-rd {
         width: 90px;
      }
      .team-match {
         width: 480px;
      }
      .btn-match {
         width: 280px;
      }
      .club-tit {
         width: 250px;
      }
   }
}

.no-data {
   font-size: 18px;
   font-weight: bold;
   padding: 40px 0;
   text-align: center;
   border: 1px solid @color-border;
   background-color: @color-bg;
   border-left: 0;
   border-right: 0;
   img,
   .btn {
      display: block;
      margin: 20px auto;
   }
}

.table {
   color: @color-font;
   margin-bottom: 0;
   &+.table {
      margin-top: 40px;
   }
   &+p {
      text-align: center;
      margin-top: 10px;
      margin-bottom: 0;
   }
   thead {
      &.thead-light {
         th {
            background-color: @color-bg;
         }
      }
      th {
         text-transform: uppercase;
         font-weight: 500;
         font-size: 14px;
         vertical-align: middle;
         border-bottom: 1px solid @color-border;
      }
   }
   tbody {
      border-bottom: 1px solid @color-border;
      tr {
         position: relative;
      }
      td {
         &.hiddenRow {
            padding: 0;
            border: 0;
         }
         position: relative;
         vertical-align: middle;
      }
   }
}

.team-score {
   // max-width: 250px;
   margin: 0 auto;
   div {
      display: inline-block;
      line-height: 20px;
      &:first-child {
         text-align: right;
      }
      &:last-child {
         text-align: left;
      }
   }
   .logo {
      display: inline-block;
      width: 40px;
      height: 46px;
      padding: 8px 5px;
/*180923      background-image: url(images/match-hex-gray.png);*/ 
      img { 
         max-width: 100%;
      }
   }
   .center {
      text-align: center;
   }
   .club {
      display: inline-block;
/* 180923      width: 130px;*/
      padding: 0 10px; // overflow-x: hidden;
      line-height: 13px;
   }
   .left {
      .club {
         text-align: right;
      }
   }
   .right {
      .club {
         text-align: left;
      }
   }
   .score {
      min-width: 100px;
      font-size: 20px;
      padding: 0 20px;
   }
}

.ranking-table {
   .table {
      &.league1 {
         tbody {
            tr:nth-child(-n+3) {
               td:first-child {
                  position: relative;
                  &::after {
                     position: absolute;
                     content: "";
                     width: 22px;
                     height: 46px;
                     left: 0;
                     top: 50%;
                     margin-top: -23px;
                     background-image: url(images/ranking-tag.png);
                     background-repeat: no-repeat;
                     background-size: 22px auto;
                  }
               }
            }
            tr:nth-last-child(2) {
               td:first-child::after {
                  position: absolute;
                  content: "";
                  width: 22px;
                  height: 46px;
                  left: 0;
                  top: 50%;
                  margin-top: -23px;
                  background-image: url(images/ranking-tag.png);
                  background-repeat: no-repeat;
                  background-size: 22px auto;
                  background-position-y: -46px;
               }
            }
            tr:last-child {
               td:first-child::after {
                  position: absolute;
                  content: "";
                  width: 22px;
                  height: 46px;
                  left: 0;
                  top: 50%;
                  margin-top: -23px;
                  background-image: url(images/ranking-tag.png);
                  background-repeat: no-repeat;
                  background-size: 22px auto;
                  background-position-y: -92px;
               }
            }
         }
      }
      &.league2 {
         tbody {
            tr:nth-child(-n+4) {
               td:first-child {
                  position: relative;
                  &::after {
                     position: absolute;
                     content: "";
                     width: 22px;
                     height: 46px;
                     left: 0;
                     top: 50%;
                     margin-top: -23px;
                     background-image: url(images/ranking-tag.png);
                     background-repeat: no-repeat;
                     background-size: 22px auto;
                     background-position-y: -46px;
                  }
               }
            }
            tr:first-child {
               td:first-child::after {
                  position: absolute;
                  content: "";
                  width: 22px;
                  height: 46px;
                  left: 0;
                  top: 50%;
                  margin-top: -23px;
                  background-image: url(images/ranking-tag.png);
                  background-repeat: no-repeat;
                  background-size: 22px auto;
                  background-position-y: 0px;
               }
            }
         }
      }
   }
}

.nav-pills {
   //height: 50px;
   background-color: @color-bg;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
   margin-bottom: 40px;
   .nav-link {
      font-size: 16px;
      padding: 1em 0.85em 0.8em;
      border-radius: 0 !important;
      border-bottom: 4px solid @color-blue;
      color: @color-font;
      &.active {
         background-color: @color-blue;
         color: #fff;
      }
   }
}

#match {
   .inner-grid;
   .menu-group {
      .menuGroup;
      margin: 40px auto 20px;
      ;
   }
   .competition {
      .total {
         .teams {
            width: 450px;
            margin: 0 auto;
         }
      }
      .competition-line {
         position: relative;
         width: 100%;
         height: 100%;
         .line {
            position: relative;
            width: 600px;
            height: 1px;
            margin: 100px auto;
            background-color: @color-border;
            &::before {
               position: absolute;
               content: "";
               z-index: 1;
            }
            .event {
               position: absolute;
               width: 22px;
               height: 18px;
               top: -9px;
               background-repeat: no-repeat;
               text-align: center;
               font-size: 12px;
               letter-spacing: -0.025em;
               &.away>span {
                  bottom: -30px;
               }
               &.home>span {
                  top: -30px;
               }
               &.goal>span {
                  background-image: url(images/ico-goal.png);
               }
               &.red>span {
                  background-image: url(images/ico-red.png);
               }
               &.yellow>span {
                  background-image: url(images/ico-yellow.png);
               }
               &.inout>span {
                  background-image: url(images/ico-inout.png);
               }
               >span {
                  position: absolute;
                  background-position: center;
                  background-size: contain;
                  background-repeat: no-repeat;
                  width: 22px;
                  left: 0;
                  right: 0;
                  height: 22px;
               } // &::before {
               // 	position: absolute;
               // 	content: "";
               // 	width: 15px;
               // 	height: 15px;
               // 	background-color: #fff;
               // 	border-radius: 50%;
               // 	border: 1px solid @color-border;
               // 	z-index: 2;
               // 	top: 29px;
               // 	left: 3.5px;
               // 	z-index: 1;
               // }
               // &::after {
               // 	position: absolute;
               // 	content: "";
               // 	width: 9px;
               // 	height: 9px;
               // 	border-radius: 50%;
               // 	background-color: @color-blue;
               // 	top: 32px;
               // 	left: 6.5px;
               // 	z-index: 2;
               // }
            }
            .point {
               position: absolute; // width: 15px;
               height: 17px;
               background-color: #fff;
               border-radius: 8px;
               padding: 0 5px;
               z-index: 2;
               top: -8px;
               font-size: 11px;
               line-height: 17px;
               font-weight: 500;
               color: #fff;
               background-color: #00477e;
               &.start {
                  left: -10px;
               }
               &.end {
                  right: -10px;
               } // &::after {
               // 	position: absolute;
               // 	content: "";
               // 	width: 9px;
               // 	height: 9px;
               // 	border-radius: 50%;
               // 	background-color: #00477e;
               // 	top: 2px;
               // 	left: 2px;
               // }
            }
         }
      }
   }
   .lineup {
      .no-data {
         display: none;
         text-align: center;
         line-height: 360px;
      }
      .lineup-head {
         margin: 0 auto;
         height: 116px;
         .vs {
            height: 116px;
            display: table-cell;
            color: @gk;
            text-align: center;
            line-height: 20px;
            font-size: 20px;
            font-weight: bold;
            width: 62px;
         }
         .clubDetail();
      }
      .lineup-body {
         padding-top: 20px;
         div[class*="LineUp"] {
            width: 50%;
            float: left;
         }
         h4 {
            padding: .75em;
            background-color: #eef7fd;
            font-size: 14px;
            text-align: center;
            margin-bottom: 0;
            margin-top: 30px;
            border-top: 1px solid @color-border;
         }
         .gk {
            .homeLineUp::after {
               content: 'GK';
            }
         }
         .df {
            .homeLineUp::after {
               content: 'df';
            }
         }
         .mf {
            .homeLineUp::after {
               content: 'mf';
            }
         }
         .fw {
            .homeLineUp::after {
               content: 'fw';
            }
         }
         .bench {
            .homeLineUp::after {
               content: '대기';
            }
         }
         .homeLineUp {
            ul {
               li {
                  padding-right: 30px;
                  text-align: right;
               }
            }
         }
         .awayLineUp {
            ul {
               li {
                  padding-left: 30px;
                  text-align: left;
               }
            }
         }
         .gk {
            .lineupTable(@gk);
         }
         .df {
            .lineupTable(@df);
         }
         .mf {
            .lineupTable(@mf);
         }
         .fw {
            .lineupTable(@fw);
         }
         .bench {
            .lineupTable(@bench);
         }
      }
   }
   .liveBox {
      background-image: url(images/livebox.jpg);
      background-position: center;
      background-size: cover;
      padding: 20px;
      .top-point-board;
      .title {
         text-align: center;
         text-shadow: 0 5px 5px rgba(0, 0, 0, 0.75);
         color: white;
         font-size: 26px;
         font-weight: bold;
         text-transform: uppercase;
         margin: 40px auto 20px;
      }
      .live-player {
         margin-bottom: 10px;
         border: 1px solid #2c2d2f;
         box-shadow: 0 13px 17.6px 0.4px rgba(0, 0, 0, 0.75);
      }
   }
   .text-broadcast {
      position: relative; //		padding: 20px;
      //		height: 500px;
      .card-body {
         padding: 20px;
         overflow-y: scroll;
         position: relative;
      }
      .no-data {
         display: none;
         position: absolute;
         top: 20px;
         left: 20px;
         bottom: 20px;
         right: 20px;
         background-color: #fefefe;
         border-radius: 4px;
         box-shadow: 0 1px 1px #dbdfe6;
         text-align: center;
         line-height: 360px;
      }
      .timeline {
         position: relative;
         width: 100%;
         padding-top: 10px;
         padding-bottom: 10px;
         background-color: #fefefe;
         border-radius: 4px;
         box-shadow: 0 1px 1px #dbdfe6;
         margin-bottom: 0;
         &::before {
            position: absolute;
            content: "";
            width: 1px;
            top: 0;
            bottom: 0;
            left: 26px;
            background-color: @color-border;
         }
         li {
            position: relative;
            padding: 15px 0 15px 100px;
            &::before {
               position: absolute;
               content: "";
               width: 17px;
               height: 17px;
               background-color: #fff;
               border: 1px solid @color-border;
               border-radius: 50%;
               left: 18px;
               top: 15px;
            }
            &::after {
               position: absolute;
               content: "";
               width: 7px;
               height: 7px;
               background-color: #00477e;
               border-radius: 50%;
               left: 23px;
               top: 20px;
            }
            .min {
               position: absolute;
               left: 56px;
            }
         }
      }
   }
}

.card-deck {
   margin: 0;
   .card {
      &:first-child {
         margin-left: 0;
         margin-right: 5px;
      }
      &:last-child {
         margin-right: 0;
         margin-left: 5px;
      }
   }
}

.compare-data {
   h5 {
      font-size: 16px;
      text-align: center;
      color: #00477e;
   }
   li {
      text-align: center;
      padding: 10px 0;
      color: @color-font;
      &>div {
         display: inline-block;
      }
      .prg {
         width: 252px;
         &.left {
            .progress-bar {
               right: 0;
            }
         }
         .progress {
            position: relative;
            display: block;
            width: 100%;
            height: 12px;
            border-radius: 0;
            .progress-bar {
               position: absolute;
               top: 0;
               bottom: 0;
               display: block;
            }
         }
      }
      .score {
         width: 54px;
      }
      .title {
         width: 110px;
      }
   }
}

.dummy-box {
   padding: 50px;
   width: 100%;
   height: 100%;
   text-align: center;
   background-color: #fcc;
   color: #fff;
   font-weight: lighter;
   line-height: 24px;
}

.player-vs {
   position: relative;
   padding-bottom: 50px;
   .player-score {
      position: absolute;
      bottom: 28px;
      .name {
         position: relative;
         font-size: 23px;
         font-weight: lighter;
         color: #00477e;
         padding-top: 5px;
         &::after {
            position: absolute;
            content: "";
            width: 90px;
            height: 1px;
            background-color: #00477e;
            top: 0;
         }
      }
   }
   .team-hexagon {
      position: absolute;
   }
   .content_inner {
      background-color: #f8f8f8;
   }
   &.float-left {
      .player-score {
         right: -100px;
         text-align: right;
      }
      .name::after {
         right: 0;
      }
      .team-hexagon {
         top: 26px;
         left: 205px;
      }
   }
   &.float-right {
      .player-score {
         text-align: left;
         left: -100px;
      }
      .name::after {
         left: 0;
      }
      .team-hexagon {
         top: 26px;
         right: 205px;
      }
   }
}

.search-list {
   padding-top: 30px;
   .pagination-box {
      margin-top: 20px;
      margin-bottom: 25px;
   }
}

.player-detail {
   .player-vs {
      .player-score {
         right: -140px;
         bottom: 165px;
         .name {
            &::after {
               width: 130px;
            }
         }
      }
      .team-hexagon {
         top: 160px;
      }
   }
   .card {
      margin-bottom: 10px;
      .table {
         &.player-profile {
            margin-top: 40px;
         }
         margin-top: 5px;
         margin-bottom: 20px;
      }
   }
   .career {
      th:last-child {
         width: 100px;
      }
      td:last-child {
         width: 100px;
      }
      .hiddenRow {
         .accordian-body {
            border-top: 1px solid @color-border;
            padding: 0.75em;
            .table {
               .left-th;
               margin: 0 auto;
            }
         }
      }
   }
}

.left-th {
   width: 800px;
   th {
      font-weight: normal;
      width: 25%;
      background-color: @color-bg;
   }
   td {
      width: 25%;
   }
}

#login {
   .login-form {
      width: 330px;
      margin: 0 auto;
      .logo {
         text-align: center;
         padding: 20px 0;
         ;
         img {
            display: inline-block;
         }
      }
   }
   .form-row {
      margin: 0;
   }
   .outlink {
      padding: 20px 0;
      color: @color-border;
      label {
         color: @color-font;
      }
      a {
         display: inline-block;
         color: @color-font;
      }
   }
}

.msg-form {
   width: 330px;
   margin: 0 auto;
   padding: 50px 0;
   text-align: center;
   p {
      text-align: center;
   }
   .btn {
      display: inline-block; //		margin: 0 auto;
   }
   .logo {
      text-align: center;
      padding: 20px 0;
      ;
      img {
         display: inline-block;
      }
   }
}

#accordion {
   .accordion-heading {
      display: block;
      height: 50px;
      line-height: 50px;
      padding: 0 15px;
      text-decoration: none;
      font-size: 16px;
      color: #fff;
      outline: none;
      color: @color-font;
      background-color: #eef7fd;
      background-image: url(images/ico-arrowDown.png);
      background-repeat: no-repeat;
      background-position: center right 15px;
      border-bottom: 1px solid @color-border;
      &.collapsed {}
      &.ui-state-active {
         background-color: @color-blue;
         color: #fff;
         background-image: url(images/ico-arrowUp.png);
      }
   }
   .collapse {
      padding: 0;
   }
   ul {
      li {
         &.active {
            a {
               color: @color-blue;
            }
         }
         a {
            padding-left: 30px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 500;
            background-color: #fff;
            background-image: none;
            &:hover {
               color: @color-blue;
            }
         }
      }
   }
}

#youthacc {
   .heading {
      display: block;
      height: 50px;
      line-height: 50px;
      padding: 0 15px;
      text-decoration: none;
      font-size: 16px;
      outline: none;
      color: #fff;
      background-color: @color-blue;
      background-image: url(images/ico-arrowUp.png);
      background-repeat: no-repeat;
      background-position: center right 15px;
      border-bottom: 1px solid @color-border;
      &.collapsed {
         color: @color-font;
         background-color: #eef7fd;
         background-image: url(images/ico-arrowDown.png);
      }
   }
   .collapse {
      padding: 0;
   }
   ul {
      li {
         &.active {
            a {
               color: @color-blue;
            }
         }
         a {
            padding-left: 30px;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            font-weight: 500;
            background-color: #fff;
            background-image: none;
            &:hover {
               color: @color-blue;
            }
         }
      }
   }
}

dl {
   dt {
      font-weight: 500;
      font-size: 16px;
      color: @color-blue;
   }
   dd {
      font-size: 14px;
      line-height: 25px;
      &+dt {
         margin-top: 20px;
      }
   }
}

#join {
   .article-body {
      min-height: auto;
   }
   .join {
      width: 880px;
      margin: 0 auto;
      .table {
         margin-top: 30px;
      }
      .confirm {
         border-top: 1px solid @color-border;
         display: block;
         text-align: center;
         margin-top: 60px;
         padding: 20px 0;
         .btn {
            display: inline-block;
         }
      }
   }
}

.agree-check {
   margin-top: 50px;
   padding: 5px 0;
   span {
      color: @color-blue;
   }
}

.agree-box {
   width: 100%;
   height: 160px;
   overflow-y: scroll;
   background-color: @color-bg;
   border: 1px solid @color-border;
   .context {
      padding: 20px;
   }
}

.left-style {
   text-align: left;
   thead {
      tr {
         &.blue {
            color: @color-blue;
         }
      }
      th {
         padding-left: 20px !important;
         border-right: 0;
         background-color: @color-bg;
      }
   }
   tbody {
      th {
         width: 280px;
         padding-left: 20px !important;
         vertical-align: middle;
         background-color: @color-bg;
         border-right: 1px solid @color-border;
      }
      td {
         vertical-align: middle;
      }
   }
}

.style-table-th {
   padding: 11px 20px;
   margin: 0; //	height: 50px;
   display: block;
   background-color: @color-bg;
   border-top: 1px solid @color-border;
   border-bottom: 1px solid @color-border;
}

#games {
   .article-body {
      min-height: auto;
      padding: 40px 20px;
      .style-table-th {
         margin: 40px 0 0;
      }
   }
   .article-footer {
      text-align: center;
      .btn {
         display: inline-block;
      }
   }
   .blank {
      width: 28%;
   }
   .team {
      width: 15%;
   }
   .form-check-input {
      margin-left: -1rem;
   }
   .table {
      thead {
         tr:first-child {
            th {
               font-size: 16px;
            }
         }
      }
   }
}

#club {
   .club {
      .team-logo {
         position: relative;
         margin: 51px 40px;
         width: 194px;
         height: 266px;
         padding: 42px 10px;
         /* 0910 엠블럽배경 삭제요청  background-image: url(images/club-hex.png); */
         background-repeat: no-repeat;
         background-position: center;
         z-index: 10;
         img {
            max-width: 100%;
         }
      }
      .team-info {
         position: relative;
         padding-top: 110px;
         z-index: 10;
         color: #fff;
         h3 {
            font-weight: bold;
            font-size: 40px;
            margin: 0 0 20px;
            letter-spacing: -0.025em
         }
         p {
            margin-bottom: 10px;
         }
         a {
            color: #fff;
            text-decoration: none;
         }
      }
   }
   .player-detail {
      .player-score {
         bottom: 110px;
         .score {
            margin-top: 10px;
            >div {
               >.tit {
                  text-align: left;
                  display: inline-block;
                  width: 80px;
               }
            }
         }
      }
      .player-profile {
         width: 400px;
         margin-top: 60px;
      }
   }
   .tab-content {
      .btn-more {
         display: block;
         margin: 20px auto 0;
      }
      .menu-group {
         .menuGroup;
      }
      .content_inner {
         cursor: pointer;
         background-color: #fff;
/*         &:hover {
            &::after {
               content: "";
               position: absolute;
               top: 0;
               right: 0;
               bottom: 0;
               left: 0;
               background-color: rgba(0, 0, 0, 0.8);
               background-image: url(images/member-detail.png);
               background-repeat: no-repeat;
               background-position: center;
            }
         }*/
         .score {
            font-size: 16px;
            span {
               line-height: 50px;
            }
         }
      }
      .members {
         padding-left: 30px;
         padding-right: 30px;
      }
   }
}

.member-secession {
   margin-top: 30px;
   .btn {
      display: inline-block;
   }
}

#archives {
   .top-list {
      .card {
         margin-bottom: 10px;
      }
      .card-body {
         text-align: center;
      }
      .team-hexagon {
         display: inline-block;
         margin-right: 80px;
         &:last-child {
            margin-right: 0;
         }
         &>div {
            width: 220px;
            height: 146px;
         }
         h4 {
            font-weight: bold;
            font-size: 22px;
            margin: 0;
            color: @color-font;
         }
         .text {
            width: 90px;
            margin-top: 5px;
            height: auto;
            .name {
               font-size: 23px;
               font-weight: lighter;
               margin: 8px 0;
            }
            .data {
               padding-left: 5px;
               font-size: 14px;
               height: 14px;
            }
         }
         .flag {
            width: 110px;
            height: 126px;
/*180923            background-image: url('images/top-list-bg.png');*/
         }
      }
   }
   .top-player {
      .card {
         margin-bottom: 10px;
         .card-body {
            text-align: center;
         }
      }
      .player-data {
         display: inline-block;
         width: 358px;
         margin-right: 80px;
         &:last-child {
            margin-right: 0;
         }
      }
      .team-hexagon {
         .team {
            width: 154px;
         }
         .text {
            width: 60px;
         }
      }
      .player-vs {
         // padding-bottom: 0;
         .player-score {
            width: 154px;
            right: -164px;
            bottom: 0;
            .name {
               margin-bottom: 8px;
               &::after {
                  width: 154px;
               }
            }
         }
      }
   }
   .director {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      margin-bottom: 10px;
      .data-table {
         padding-top: 85px;
      }
   }
   .player-archive {
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
      margin-bottom: 10px;
      .data-table {
         padding-top: 85px;
      }
   }
}

@-webkit-keyframes "spin" {
   0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

@keyframes "spin" {
   0% {
      -webkit-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      transform: rotate(0deg);
   }
   100% {
      -webkit-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
      transform: rotate(360deg);
   }
}

#loader-wrapper {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1000;
   background-color: rgba(0, 0, 0, .3);
}

#loader {
   display: block;
   position: relative;
   left: 50%;
   top: 50%;
   width: 100px;
   height: 100px;
   margin: -52px 0 0 -50px;
   border-radius: 50%;
   border: 3px solid transparent; //border-top-color: #3498db;
   border-top-color: rgba(157, 10, 15, 1);
   -webkit-animation: spin 2s linear infinite;
   animation: spin 2s linear infinite;
   &:before {
      content: "";
      position: absolute;
      top: 5px;
      left: 5px;
      right: 5px;
      bottom: 5px;
      border-radius: 50%;
      border: 3px solid transparent; //border-top-color: #e74c3c;
      border-top-color: rgba(255, 255, 255, 255);
      -webkit-animation: spin 3s linear infinite;
      animation: spin 3s linear infinite;
   }
   &:after {
      content: "";
      position: absolute;
      top: 15px;
      left: 15px;
      right: 15px;
      bottom: 15px;
      border-radius: 50%;
      border: 3px solid transparent; //border-top-color: #f9c922;
      border-top-color: rgba(0, 28, 72, 10);
      -webkit-animation: spin 1.5s linear infinite;
      animation: spin 1.5s linear infinite;
   }
}

.ir {
   background-color: transparent;
   border: 0;
   overflow: hidden;
   *text-indent: -9999px;
   &:before {
      content: "";
      display: block;
      width: 0;
      height: 150%;
   }
}

.hidden {
   display: none !important;
   visibility: hidden;
}

.visuallyhidden {
   border: 0;
   clip: rect(0 0 0 0);
   height: 1px;
   margin: -1px;
   overflow: hidden;
   padding: 0;
   position: absolute;
   width: 1px;
}

.visuallyhidden.focusable {
   &:active {
      clip: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      position: static;
      width: auto;
   }
   &:focus {
      clip: auto;
      height: auto;
      margin: 0;
      overflow: visible;
      position: static;
      width: auto;
   }
}

.invisible {
   visibility: hidden;
}

.timeline_list {
   .timeline_list {
      padding-left: 0;
   }
}

.tbl-data {
   .td-location {
      width: 350px;
   }
}

#view_rank_list {
   .club {
      text-align: left;
   }
}

.greeting {
   .title {
      padding-top: 30px;
      font-size: 30px;
      font-weight: 300;
      line-height: 1.5em;
      h6 {
         margin-top: 30px;
      }
   }
   p {
      color: #666;
   }
}

.offcial {
   p {
      img {
         margin: 0;
      }
      a {
         margin: 0;
      }
   }
}

.components {
   .list {
      list-style-type: none;
   }
}

.ci_colorlist {
   li {
      padding-left: 20px;
      padding-right: 20px;
      .box {
         text-align: left;
         padding: 10px;
         background-color: #eeeeee;
         width: 100%;
         margin: 0 auto;
      }
   }
   h5 {
      font-size: 15px;
   }
   .color_info {
      font-size: 12px;
      color: #999;
      margin: 0;
      line-height: 15px;
      font-weight: 300;
   }
}

.privacy {
   ul,
   ol {
      li {
         padding-bottom: 10px;
      }
      ol,
      ul {
         margin-top: 10px;
         font-size: 13px;
         li {
            padding-bottom: 5px;
         }
      }
   }
}

.cart-body {
   width: 100%;
}

.tooltip {
   position: relative;
   display: inline-block;
   z-index: 2000;
   width: 100%;
   height: 100%;
   opacity: 1;
   .tooltiptext {
      z-index: 2000;
      visibility: hidden;
      width: 120px;
      background-color: #555;
      color: #fff;
      text-align: center;
      border-radius: 6px;
      padding: 5px 0;
      position: absolute;
      z-index: 1;
      bottom: 125%;
      left: 50%;
      margin-left: -60px;
      transition: opacity 0.3s;
      &::after {
         content: "";
         position: absolute;
         top: 100%;
         left: 50%;
         margin-left: -5px;
         border-width: 5px;
         border-style: solid;
         border-color: #555 transparent transparent transparent;
      }
   }
}

.tooltip:hover .tooltiptext {
   visibility: visible;
   opacity: 1;
}

@import "mixin.less";