@charset "UTF-8";
.row {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  width: auto;
  margin-left: -10px;
  margin-right: -10px;
}

.row:before, .row:after {
  content: " ";
  display: table;
}

.row:after {
  clear: both;
}

.row .row {
  margin-top: 0;
  margin-bottom: 0;
}

.row--sm {
  margin-left: -7.5px;
  margin-right: -7.5px;
}

.row--md {
  margin-left: -15px;
  margin-right: -15px;
}

.row--lg {
  margin-left: -30px;
  margin-right: -30px;
}

.column {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  float: left;
  padding: 0 10px;
  width: 100%;
  position: relative;
  min-height: 1px;
}

.column--sm {
  padding: 0 7.5px;
}

.column--md {
  padding: 0 15px;
}

.column--lg {
  padding: 0 30px;
}

.column.center {
  text-align: center;
}

.span-1 {
  width: 8.33333%;
}

.span-2 {
  width: 16.66667%;
}

.span-3 {
  width: 25%;
}

.span-4 {
  width: 33.33333%;
}

.span-5 {
  width: 41.66667%;
}

.span-6 {
  width: 50%;
}

.span-7 {
  width: 58.33333%;
}

.span-8 {
  width: 66.66667%;
}

.span-9 {
  width: 75%;
}

.span-10 {
  width: 83.33333%;
}

.span-11 {
  width: 91.66667%;
}

.span-12 {
  width: 100%;
}

.span-1-5 {
  width: 20%;
}

.video-content {
  margin-bottom: 10px;
}

.more-video {
  margin-bottom: 20px;
}

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.slick-list:focus {
  outline: none;
}

.slick-list.dragging {
  cursor: pointer;
  cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block;
}

.slick-track:before,
.slick-track:after {
  display: table;
  content: '';
}

.slick-track:after {
  clear: both;
}

.slick-loading .slick-track {
  visibility: hidden;
}

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px;
}

[dir='rtl'] .slick-slide {
  float: right;
}

.slick-slide img {
  display: block;
}

.slick-slide.slick-loading img {
  display: none;
}

.slick-slide.dragging img {
  pointer-events: none;
}

.slick-initialized .slick-slide {
  display: block;
}

.slick-loading .slick-slide {
  visibility: hidden;
}

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent;
}

.slick-arrow.slick-hidden {
  display: none;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.noSelect {
  -ms-user-select: none;
      user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}

#jooxPlayerBarWrapper {
  width: 100%;
  background: #1b1b1b;
  position: fixed;
  height: 55px;
  bottom: 0;
  left: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  z-index: 10000;
}

#jooxPlayerBar {
  width: 1000px;
  height: 55px;
  margin: 0 auto;
}

/* *************************** disc (start) *************************** */
.joox-disk-bg {
  margin-top: -10px;
  position: relative;
}

.joox-album {
  border-radius: 50px;
  position: absolute;
  top: 14px;
  left: 15px;
}

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

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

@-webkit-keyframes light-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

@keyframes light-rotate {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  25% {
    -webkit-transform: rotate(15deg);
            transform: rotate(15deg);
  }
  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  75% {
    -webkit-transform: rotate(-15deg);
            transform: rotate(-15deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}

.joox-album-rotate {
  -webkit-animation-name: rotate;
          animation-name: rotate;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

.joox-disk-bg-light-rotate {
  -webkit-animation-name: light-rotate;
          animation-name: light-rotate;
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
          animation-timing-function: linear;
}

/* *************************** disc (end) *************************** */
/* *************************** play button (start) *************************** */
.joox-controls a {
  float: left;
  margin-top: 20px;
  margin-left: 24px;
}

.joox-controls .joox-play, .joox-controls .joox-pause {
  margin-top: 13px;
}

/* *************************** play button (end) *************************** */
/* *************************** song info (start) *************************** */
.joox-songInfo {
  margin-left: 30px;
  width: 500px;
  height: 55px;
  overflow: hidden;
  position: relative;
}

.joox-songDetail {
  margin: 13px 0 1px 0;
}

.joox-songDetail strong, .joox-time {
  font-size: 12px;
  color: #898989;
  font-weight: normal;
}

.joox-songDetail .joox-songName, .joox-songDetail .joox-singer {
  color: #fff;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.joox-songDetail .joox-singer {
  color: #898989;
  max-width: 100px;
}

.joox-songDetail .joox-singer:hover {
  text-decoration: underline;
}

.joox-songName {
  margin-right: 20px;
  max-width: 260px;
}

.joox-playBar {
  position: relative;
  width: 390px;
  height: 10px;
  overflow: hidden;
  padding: 3px 5px 0 5px;
  cursor: pointer;
}

.joox-bar {
  width: 380px;
  height: 4px;
  position: absolute;
}

.joox-progress {
  background-color: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  filter: alpha(opacity=20);
  opacity: .2;
  z-index: 1;
}

.joox-loading {
  background-color: #fff;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
  filter: alpha(opacity=30);
  opacity: .3;
  z-index: 2;
  left: -375px;
}

.joox-playing {
  background-color: #04b750;
  z-index: 3;
  left: -380px;
}

.joox-dot {
  width: 10px;
  height: 10px;
  background-position: 0 -256px;
  position: absolute;
  right: -10px;
  top: -3px;
}

.joox-time {
  position: absolute;
  top: 33px;
  letter-spacing: 1px;
  font-family: 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.joox-currentTime {
  left: 397px;
}

.joox-totalTime {
  left: 444px;
}

.joox-slash {
  left: 434px;
}

/* *************************** song info (end) *************************** */
/* *************************** feature (start) *************************** */
.joox-feature {
  height: 55px;
  border-left: 1px solid #2C2C2C;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  border-right: 1px solid #2C2C2C;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.joox-feature a {
  display: block;
  float: left;
  margin-top: 19px;
}

.joox-split {
  border: none;
  border-left: 1px solid #2C2C2C;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  float: left;
  height: 55px;
}

#btnVoice {
  margin-left: 15px;
  margin-right: 15px;
}

#btnMode {
  margin-left: 17px;
  margin-right: 17px;
}

.joox-playlist {
  margin-left: 8px;
  margin-right: 8px;
}

#btnPlayList {
  text-indent: 18px;
  color: #fff;
  text-align: center;
  font-size: 12px;
  text-decoration: none;
  line-height: 19px;
}

#btnCollect {
  margin-left: 21px;
  margin-right: 21px;
}

/* *************************** feature (end) *************************** */
/* *************************** voice bar (start) *************************** */
.joox-smallBar {
  background-color: #1b1b1b;
  width: 60px;
  height: 100px;
  position: fixed;
  bottom: 55px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid #2C2C2C;
  display: none;
  z-index: 100;
  overflow: hidden;
}

#jooxVoice {
  overflow: hidden;
  width: 10px;
  left: 25px;
  top: 10px;
  cursor: pointer;
}

.joox-voice-bar {
  height: 80px;
  width: 4px;
  position: absolute;
  left: 3px;
}

.joox-voice {
  background-color: #04b750;
  top: 38px;
}

#btnVoiceDot {
  left: -3px;
  z-index: 1;
}

/* *************************** voice bar (end) *************************** */
/* *************************** mode bar (start) *************************** */
.joox-mode-btn {
  position: absolute;
  left: 17px;
  top: 20px;
}

#btnSingleCircle {
  top: 62px;
}

/* *************************** mode bar (end) *************************** */
/* *************************** song list (start) *************************** */
.joox-play-list {
  width: 1000px;
  height: 270px;
  position: fixed;
  z-index: 9999;
  bottom: 55px;
  visibility: hidden;
  overflow: hidden;
}

.joox-song-list-wrapper {
  width: 640px;
  position: absolute;
}

.joox-lrc {
  width: 360px;
  position: absolute;
  left: 640px;
}

.joox-header {
  height: 40px;
  line-height: 40px;
  background-color: #1b1b1b;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  opacity: .9;
  color: #fff;
  font-size: 14px;
}

.joox-content {
  height: 230px;
  background-color: #282828;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
  filter: alpha(opacity=90);
  opacity: .9;
  outline: none;
}

.joox-song-header {
  text-indent: 15px;
  font-weight: bold;
  text-align: left;
  border-right: 1px solid #303030;
}

#lblSongCount {
  color: #898989;
  font-weight: normal;
  margin-left: 3px;
}

.joox-lrc-header {
  text-align: center;
}

#btnCleanList {
  float: right;
  display: block;
  height: 40px;
  font-size: 12px;
  color: #898989;
  text-decoration: none;
  margin-right: 15px;
}

#btnCleanList:hover {
  color: #fff;
}

#btnCleanList:hover .joox-delete {
  background-position: 0 -189px;
}

#btnCleanList .joox-delete {
  position: absolute;
  top: 13px;
  right: 71px;
}

.joox-song-item {
  list-style: none;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
}

.joox-song-item div {
  float: left;
}

#jooxSongList {
  width: 640px;
  border-right: 6px solid #222;
  height: 230px;
  overflow: visible;
}

#jooxSongList .songname {
  width: 295px;
  color: #fff;
}

#jooxSongList .songname p {
  display: inline-block;
  float: left;
  max-width: 235px;
  text-indent: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 12px;
}

#jooxSongList .songname i, .song-pause i {
  display: none;
}

#jooxSongList .singer {
  width: 140px;
  padding-right: 10px;
  color: #898989;
  font-size: 12px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#jooxSongList .duration {
  width: 60px;
  color: #898989;
  font-size: 12px;
}

.song-item-hover {
  background-color: #373737;
  background-color: rgba(255, 255, 255, 0.1);
}

.song-current {
  background-color: #4B4B4B;
  background-color: rgba(255, 255, 255, 0.2);
}

.song-disable p {
  color: gray;
}

#jooxSongList .song-play i {
  background: url(../di/joox-playing.gif);
  display: inline-block;
  width: 14px;
  height: 11px;
  margin-left: 10px;
}

#jooxSongList .joox-vip {
  display: inline-block;
  margin-left: 10px;
}

#jooxSongList .song-current div {
  color: #04b750;
}

.joox-song-item .joox-delete, .joox-song-item .joox-collect {
  margin-right: 26px;
  float: right;
  margin-top: 8px;
  display: none;
}

.joox-song-item .joox-collect {
  margin-right: 10px;
}

.song-item-hover .joox-delete, .song-item-hover .joox-collect {
  display: block;
}

.joox-close {
  float: right;
  margin-top: 11px;
  margin-right: 14px;
}

.joox-no-song {
  width: 320px;
  line-height: 20px;
  text-align: left;
  color: #c3c3c3;
  font-size: 12px;
  position: absolute;
  margin-left: 210px;
  margin-top: 100px;
  display: none;
}

.joox-no-song .joox-attention {
  position: absolute;
  left: -50px;
}

.joox-no-song strong {
  font-size: 14px;
}

#btnGoHome {
  text-decoration: underline;
}

.jooxBg {
  position: absolute;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  -webkit-filter: blur(20px);
  filter: blur(20px);
  bottom: 0;
  right: 0;
  z-index: -1;
  overflow: hidden;
}

#jooxBarBg {
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)";
  filter: alpha(opacity=40);
  opacity: .4;
  -webkit-filter: blur(25px);
  filter: blur(25px);
  width: 100%;
  height: 100%;
  right: 0;
}

#jooxListBg {
  z-index: 0;
}

/* *************************** song list (end) *************************** */
/* *************************** lrc (start) *************************** */
.joox-lyric {
  width: 100%;
  height: 100%;
  padding: 10px 0;
  font-size: 12px;
  color: #898989;
}

.joox-lyric .cont {
  width: 100%;
  height: 220px;
  overflow: hidden;
  position: relative;
}

.joox-lyric .cont .txt {
  padding: 0 50px;
  position: relative;
  top: 0;
  *overflow: hidden;
  margin-top: -5px;
}

.joox-lyric .cont p {
  width: 100%;
  height: 32px;
  line-height: 32px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  -webkit-transition: color 0.7s linear;
  transition: color 0.7s linear;
}

.joox-lyric .cont .current {
  color: #04b750;
  font-size: 14px;
}

.joox-lyric .cont p.loading {
  line-height: 100%;
}

.joox-loading-lrc, .joox-no-lrc {
  margin-top: 99px;
}

#lblLrcSongName {
  width: 290px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  margin-left: 20px;
}

/* *************************** lrc (end) *************************** */
/* *************************** scroll (start) *************************** */
.jspContainer {
  overflow: hidden;
  position: relative;
}

.jspPane {
  position: absolute;
}

.jspVerticalBar {
  position: fixed;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
}

.jspCap {
  display: none;
}

.jspHorizontalBar .jspCap {
  float: left;
}

.jspTrack {
  background: #222;
  position: relative;
}

.jspDrag {
  background: #656565;
  position: relative;
  top: 0;
  left: 0;
  cursor: pointer;
}

.jspHorizontalBar .jspTrack, .jspHorizontalBar .jspDrag {
  float: left;
  height: 100%;
}

.jspArrow {
  background: #50506d;
  text-indent: -20000px;
  display: block;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.jspArrow.jspDisabled {
  cursor: default;
  background: #80808d;
}

.jspVerticalBar .jspArrow {
  height: 6px;
}

.jspHorizontalBar .jspArrow {
  width: 6px;
  float: left;
  height: 100%;
}

.jspVerticalBar .jspArrow:focus {
  outline: none;
}

.jspCorner {
  background: #eeeef4;
  float: left;
  height: 100%;
}

/* Yuk! CSS Hack for IE6 3 pixel bug:( */
* html .jspCorner {
  margin: 0 -3px 0 0;
}

/* *************************** scroll (end) *************************** */
/* *************************** tip (start) *************************** */
#jooxTip {
  min-width: 60px;
  height: 28px;
  line-height: 28px;
  font-size: 12px;
  color: #fff;
  z-index: 9997;
  position: fixed;
  background: #1b1b1b;
  text-align: center;
  bottom: 70px;
  display: none;
}

#jooxTip i {
  height: 0;
  width: 0;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  border-color: #1b1b1b transparent transparent transparent;
  border-style: solid dashed dashed dashed;
  border-width: 6px;
  position: absolute;
  z-index: 99;
  top: 28px;
  right: 24px;
}

#tipContent {
  padding: 0 10px;
}

.tip-error {
  color: #ff3232;
}

.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  40%, 43% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -30px, 0);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -webkit-transform: translate3d(0, -15px, 0);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    -webkit-transform: translate3d(0, -4px, 0);
    transform: translate3d(0, -4px, 0);
  }
}

.bounce {
  -webkit-animation-name: bounce;
  animation-name: bounce;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom;
}

/* *************************** tip (end) *************************** */
/* ********* sprite generated by Tool (start) ********* */
.jooxPlayer {
  background: url(../di/jooxPlayer.png);
  display: block;
}

.joox-attention {
  width: 42px;
  height: 42px;
  background-position: 0 0px;
}

.joox-bar-collect {
  width: 17px;
  height: 18px;
  background-position: 0 -42px;
}

.joox-bar-collect:hover {
  width: 17px;
  height: 18px;
  background-position: 0 -60px;
}

.joox-circle-play {
  width: 26px;
  height: 18px;
  background-position: 0 -78px;
}

.joox-circle-play:hover {
  width: 26px;
  height: 18px;
  background-position: 0 -96px;
}

.joox-close {
  width: 18px;
  height: 18px;
  background-position: 0 -114px;
}

.joox-close:hover {
  width: 18px;
  height: 18px;
  background-position: 0 -132px;
}

.joox-collect {
  width: 13px;
  height: 13px;
  background-position: 0 -150px;
}

.joox-collect:hover {
  width: 13px;
  height: 13px;
  background-position: 0 -163px;
}

.joox-delete {
  width: 13px;
  height: 13px;
  background-position: 0 -176px;
}

.joox-delete:hover {
  width: 13px;
  height: 13px;
  background-position: 0 -189px;
}

.joox-disk-bg-light {
  width: 80px;
  height: 80px;
  background-position: 0 -203px;
}

.joox-disk-bg {
  width: 80px;
  height: 80px;
  background-position: 0 -282px;
}

.joox-dot {
  width: 10px;
  height: 10px;
  background-position: 0 -362px;
}

.joox-next {
  width: 18px;
  height: 16px;
  background-position: 0 -372px;
}

.joox-next:hover {
  width: 18px;
  height: 16px;
  background-position: 0 -388px;
}

.joox-pause {
  width: 25px;
  height: 30px;
  background-position: 0 -404px;
}

.joox-pause:hover {
  width: 25px;
  height: 30px;
  background-position: 0 -434px;
}

.joox-play {
  width: 25px;
  height: 30px;
  background-position: 0 -464px;
}

.joox-playlist {
  width: 44px;
  height: 18px;
  background-position: 0 -494px;
}

.joox-playlist:hover {
  width: 44px;
  height: 18px;
  background-position: 0 -512px;
}

.joox-play:hover {
  width: 25px;
  height: 30px;
  background-position: 0 -530px;
}

.joox-prev {
  width: 18px;
  height: 16px;
  background-position: 0 -560px;
}

.joox-prev:hover {
  width: 18px;
  height: 16px;
  background-position: 0 -576px;
}

.joox-shuffle-play {
  width: 26px;
  height: 18px;
  background-position: 0 -592px;
}

.joox-shuffle-play:hover {
  width: 26px;
  height: 18px;
  background-position: 0 -610px;
}

.joox-single-circle {
  width: 26px;
  height: 18px;
  background-position: 0 -628px;
}

.joox-single-circle:hover {
  width: 26px;
  height: 18px;
  background-position: 0 -646px;
}

.joox-sound-mute {
  width: 29px;
  height: 18px;
  background-position: 0 -664px;
}

.joox-sound {
  width: 29px;
  height: 18px;
  background-position: 0 -682px;
}

.joox-sound:hover {
  width: 29px;
  height: 18px;
  background-position: 0 -700px;
}

.joox-vip {
  width: 17px;
  height: 8px;
  background-position: 0 -718px;
}

/* ********* sprite generated by Tool (end) ********* */
.ev-top {
  background: #000;
  text-align: center;
  position: relative;
  z-index: 5;
}

.ev-top:before, .ev-top:after {
  content: " ";
  display: table;
}

.ev-top:after {
  clear: both;
}

.ev-top a {
  display: block;
}

.ev-top > div {
  width: 980px;
  margin: 0 auto;
  display: block;
  position: relative;
}

.ev-top > div > img {
  display: block;
  z-index: 1;
}

.ev-top + header + .layout1020, .ev-top + header + .layout1020 + .layout1020 {
  top: 255px;
}

.ev-top + header + .sticky, .ev-top + header + .sticky + .sticky {
  top: 0;
}

.our-king {
  background: #000;
  margin-bottom: 0;
}

.our-king + .wrapper {
  padding-top: 20px;
}

.our-king__wrap {
  padding: 15px 30px;
  overflow: hidden;
  background: #222;
}

.our-king__title {
  background: url("http://fp1.fsanook.com/2/di/king2016/ourking-title-02.png") no-repeat center;
  height: 50px;
  margin-bottom: 20px;
}

.our-king__title a {
  display: block;
  height: 50px;
  width: 500px;
  margin: 0 auto;
}

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

.our-king .sp-article {
  width: 168px;
  margin-right: 30px;
  height: 185px;
}

.our-king .sp-article h3 {
  margin-top: 10px;
  color: #fff;
  font-size: 14px;
  font-weight: 100;
  line-height: 1.4;
}

.our-king .sp-article:last-child {
  margin-right: 0;
}

.our-king .sp-article img {
  width: 100%;
  height: auto;
}

body > header .logo--dropcolor {
  width: 227px;
  background: url("../di/S!Logo-horizontal.png") center center no-repeat;
}

body > header .logo__ribbon {
  width: 31px;
  height: 4px;
  float: left;
  position: absolute;
  top: 18px;
  left: 620px;
}

.uselection {
  background: url("../di/uselection/bg-02.jpg") no-repeat center top;
  padding: 8px 10px 10px;
  min-height: 200px;
}

.uselection--article {
  background: url("../di/uselection/bg.jpg") no-repeat center top;
}

.uselection.uselection {
  width: 443px;
}

.uselection__title.uselection__title {
  color: #fff;
  text-align: center;
  font-size: 22px;
  text-shadow: 0px 1px 1px #000;
  background: none;
}

.uselection__title.uselection__title a {
  background: none;
  color: #fff;
}

.uselection__title.uselection__title a:hover {
  color: #fff;
}

.uselection .sp-article {
  background: #fff;
  padding: 3px;
}

.uselection .sp-article.sp-article {
  margin-left: 13px;
}

.uselection .sp-article.sp-article:first-child {
  margin-left: 0;
}

.uselection__candidate {
  margin-bottom: 5px;
  padding: 0 17px;
}

.uselection__img {
  position: relative;
  float: right;
}

.uselection__img:first-child {
  float: left;
}

.uselection__img img {
  border: 3px solid #fff;
}

.uselection__img--democrats .uselection__name {
  left: 3px;
  background: #1c83d2;
}

.uselection__img--republicans .uselection__name {
  right: 3px;
  background: #c30b07;
}

.uselection__name {
  font-family: sukhumvitbold;
  font-weight: 100;
  font-size: 18px;
  position: absolute;
  bottom: 3px;
  padding: 5px 2px 0;
  text-shadow: 0px 1px 1px #000;
  color: #fff;
}

.barchart {
  padding: 0 17px;
  font-family: sukhumvitbold;
  font-weight: 100;
}

.barchart__wrap {
  height: 37px;
  border-radius: 25px;
  overflow: hidden;
  margin-bottom: 5px;
  background: #999999;
  position: relative;
}

.barchart__bar {
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
}

.barchart__bar:after {
  content: " ";
  display: block;
  height: 50%;
  position: absolute;
  top: 0;
  width: 100%;
}

.barchart__bar--democrats {
  left: 0;
  background: #1c83d2;
}

.barchart__bar--democrats .barchart__percent {
  left: 15px;
}

.barchart__bar--democrats:after {
  background: #2095ef;
}

.barchart__bar--republicans {
  right: 0;
  background: #c30b07;
}

.barchart__bar--republicans .barchart__percent {
  right: 15px;
}

.barchart__bar--republicans:after {
  background: #de0d08;
}

.barchart__percent {
  position: absolute;
  top: 13px;
  color: #fff;
  font-size: 24px;
  z-index: 1;
}

.home--seagame .post--slide {
  background-color: rgba(0, 0, 0, 0.7);
}

.home--seagame .aside__sms .section__message {
  background-color: rgba(0, 0, 0, 0.7);
}

#seagame2017 {
  background-color: #00a551;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
  margin-top: -10px;
  padding: 15px;
  height: 520px;
}

#seagame2017 * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.seagame-home {
  background-color: #fff;
}

.seagame-home:before, .seagame-home:after {
  content: " ";
  display: table;
}

.seagame-home:after {
  clear: both;
}

.seagame-home > a img {
  max-width: 100%;
  padding: 10px;
}

.seagame-home__heading {
  border-bottom: 1px solid #c2c2c2;
  padding: 5px 0 0 0;
  background-image: url("../img/seagame/bg-cheerth.jpg");
  background-position: 40px bottom;
  background-size: auto 80px;
  background-repeat: no-repeat;
}

.seagame-home__heading:before, .seagame-home__heading:after {
  content: " ";
  display: table;
}

.seagame-home__heading:after {
  clear: both;
}

.seagame-home__title {
  background-image: url("../img/seagame/seagame-logo.png") !important;
  background-size: 80% auto;
  background-position: center center;
  background-repeat: no-repeat;
  text-indent: 0;
  width: 37%;
  height: 90px;
  float: left;
}

.seagame-home__title a {
  background: transparent !important;
  display: block;
  width: 100%;
  height: 100%;
}

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

.seagame-home__block {
  background-color: #fff;
  width: 769px;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
}

.seagame-home__body {
  padding: 10px 10px 20px;
}

.seagame-home__body:before, .seagame-home__body:after {
  content: " ";
  display: table;
}

.seagame-home__body:after {
  clear: both;
}

.seagame-home .aside__sms {
  width: 320px;
  padding-right: 0;
}

.seagame-home .table-resultcoin {
  background-color: #fff;
  width: 50%;
  float: left;
  height: auto;
  padding: 0 10px 0;
}

.seagame-home .table-resultcoin__table {
  padding: 10px;
}

.seagame-home .table-resultcoin__title {
  font-size: 20px;
  font-family: sukhumvitbold;
  font-weight: 400;
  color: #000;
  padding: 10px 0 7px;
  text-align: center;
  line-height: 1;
  background: none;
}

.seagame-home .table-resultcoin__title a {
  background: none;
  color: #013475;
}

.seagame-home .table-resultcoin__body {
  background-color: #fff;
  color: #666666;
}

.seagame-home .table-resultcoin__body a {
  color: #666666;
}

.seagame-home .table-resultcoin--list {
  overflow: hidden;
  padding: 5px 0;
  position: relative;
  line-height: 1.5;
  text-align: center;
  font-weight: 700;
  display: block;
}

.seagame-home .table-resultcoin--list__thai {
  background-color: #ededed;
}

.seagame-home .table-resultcoin--list__thai .table-resultcoin--list__rank,
.seagame-home .table-resultcoin--list__thai .table-resultcoin--list__name {
  color: #00a551;
}

.seagame-home .table-resultcoin--list__heading {
  font-family: sukhumvitreg;
  font-weight: 400;
  font-size: 16px;
  background-color: #013475;
  color: #fff;
  border-radius: 3px;
}

.seagame-home .table-resultcoin--list__heading .table-resultcoin--list__rank {
  width: 0;
}

.seagame-home .table-resultcoin--list__heading .table-resultcoin--list__name {
  width: 44%;
  padding-left: 15px;
}

.seagame-home .table-resultcoin--list:first-child {
  padding: 5px 0 0;
}

.seagame-home .table-resultcoin--list:first-child .table-resultcoin--list__sum {
  color: #fff;
}

.seagame-home .table-resultcoin--list__top {
  border-radius: 3px;
  background-color: #ededed;
}

.seagame-home .table-resultcoin--list__top .table-resultcoin--list__rank, .seagame-home .table-resultcoin--list__top .table-resultcoin--list__name {
  color: #00a551;
}

.seagame-home .table-resultcoin--list__top:hover {
  background: #e0e0e0;
}

.seagame-home .table-resultcoin--list__rank {
  width: 12%;
  float: left;
  color: #013475;
}

.seagame-home .table-resultcoin--list__name {
  text-align: left;
  width: 32%;
  float: left;
}

.seagame-home .table-resultcoin--list__coin {
  width: 12%;
  float: left;
}

.seagame-home .table-resultcoin--list__coin:nth-child(3) {
  color: #ed1c22;
}

.seagame-home .table-resultcoin--list__sum {
  width: 15%;
  float: left;
  color: #013475;
}

.seagame-home .table-resultcoin .coin:before {
  font-size: 18px;
}

.seagame-home .cheer-thai {
  width: 50%;
  float: left;
  height: auto;
  padding: 15px 10px 0;
}

.seagame-home .cheer-thai .btn {
  width: 100%;
  position: relative;
  font-size: 24px;
  height: auto;
  text-align: left;
  padding: 12px 20px 10px;
}

.seagame-home .cheer-thai .btn i {
  vertical-align: -3px;
}

.seagame-home .cheer-thai .btn span {
  position: absolute;
  right: 20px;
  top: 9px;
}

.seagame-home__btn {
  background-color: #ededed;
  font-family: sukhumvitbold;
  font-weight: 400;
  font-size: 18px;
  color: #013475;
  text-align: center;
  display: block;
  border-radius: 3px;
  margin: 0 auto;
  padding: 7px 0 5px;
  line-height: 1;
}

.seagame-home__btn:hover {
  text-decoration: none;
  background: #e0e0e0;
}

.aside--seagameBtn {
  padding-bottom: 1px;
}

.aside--seagameBtn .btn {
  width: 100%;
  height: auto;
  font-size: 26px;
  font-size: 2.6rem;
  font-family: sukhumvitbold;
  font-weight: 400;
  display: block;
  border-radius: 7px;
}

.aside--seagameBtn .btn--olympic {
  background-color: #1482c6;
  border-color: #1482c6;
  font-size: 16px;
  font-size: 1.3rem;
  color: #fff !important;
  line-height: 1;
  width: 90%;
  height: 38px;
  line-height: 42px;
  margin: 15px auto;
  padding-left: 20px;
}

.aside--seagameBtn .btn--olympic img {
  width: 20px;
  vertical-align: -5px;
  margin-right: 5px;
}

.aside--seagameBtn .btn--olympic:hover {
  background-color: #231f20;
  border-color: #231f20;
  color: #fff;
  text-decoration: none;
  line-height: 42px;
}

@font-face {
  font-family: 'icomoon';
  src: url("../../../fo/seagame-icon.eot?1cegai");
  src: url("../../../fo/seagame-icon.eot?1cegai#iefix") format("embedded-opentype"), url("../../../fo/seagame-icon.ttf?1cegai") format("truetype"), url("../../../fo/seagame-icon.woff?1cegai") format("woff"), url("../../../fo/seagame-icon.svg?1cegai#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}

[class^="icon-sea"], [class*=" icon-sea"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-seaMedal:before {
  content: "\e900";
}

.icon-seanews:before {
  content: "\e901";
}

.icon-seaRate:before {
  content: "\e902";
}

.icon-seaSchedule:before {
  content: "\e903";
}

.seagame__top {
  background-color: rgba(255, 255, 255, 0.85);
  -webkit-box-shadow: 0px 10px 0px 0px rgba(102, 102, 102, 0.2);
          box-shadow: 0px 10px 0px 0px rgba(102, 102, 102, 0.2);
  margin: 0 10px 40px;
  padding: 25px 30px;
  height: 135px;
}

.seagame__top--logo {
  background-image: url("../img/seagame/seagame-logo.png");
  background-position: 20px 0;
  background-repeat: no-repeat;
  height: 83px;
}

.btn--olympic {
  font-size: 16px;
  color: #fff;
  line-height: 1.2;
  width: 135px;
  height: 38px;
  margin: 15px auto;
}

.btn--olympic:hover {
  color: #fff;
  line-height: 1.2;
}

.btn--seagameyellow:hover, .btn--seagameyellow:focus, .btn--seagameyellow:active {
  background-color: #000;
  color: #fff;
}

.btn--green {
  background-color: #ed1c24;
  border-color: #ed1c24;
  color: #fff;
}

.btn--green:hover, .btn--green:focus, .btn--green:active {
  background-color: #000;
  color: #fff;
  border-color: #fff;
}

.btn--sea-schedule {
  color: #fff;
  background-color: #3d3d3d;
}

.btn--sea-schedule:hover, .btn--sea-schedule:focus, .btn--sea-schedule:active {
  color: #fff;
}

.btn--sidebar {
  background-color: #fff;
  border-radius: 0;
  border-top: 0;
  margin: 0;
  line-height: 2.6;
  height: auto;
}

.btn--sidebar:hover {
  border-top: 0;
  color: #fff;
  line-height: 2.6;
  height: auto;
}

.coin--gold:before {
  color: #ffdd32;
}

.coin--silver:before {
  color: #bbc6cb;
}

.coin--bronze:before {
  color: #f67e7f;
}

.archive-program__time--disable {
  border: 0;
  clip: rect(0 0 0 0);
  overflow: hidden;
  padding: 0;
  position: relative;
  height: 1px;
}

.nodata {
  background-color: #ededed;
  font-size: 16px;
  color: #333;
  width: 100%;
  text-align: center;
  vertical-align: middle;
  min-height: 150px;
  display: block;
  margin: 5px 0;
  line-height: 9;
}

.selected-table:hover {
  cursor: pointer;
}

.wrapper {
  z-index: 5;
}

.celebration-19th {
  background: #f2f2f2;
}

.celebration-19th .layout1020--bg {
  background: url(http://fp1.fsanook.com/2/di/celebrate19th/bg.jpg) no-repeat center top;
}

.canvas-confetti {
  position: absolute !important;
  width: 100% !important;
  height: 100%;
  top: 0;
  z-index: 0;
}

#confetti {
  position: relative;
  z-index: 0;
}

.btn-celebrate {
  display: block;
  background: url(http://fp1.fsanook.com/2/di/celebrate19th/btn.png) center center no-repeat;
  width: 130px;
  height: 130px;
  position: relative;
  top: 165px;
  left: 2px;
  -webkit-animation: zoomin 0.7s ease-in-out infinite alternate;
          animation: zoomin 0.7s ease-in-out infinite alternate;
}

@-webkit-keyframes zoomin {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes zoomin {
  0% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.sn-footer {
  z-index: 5;
}

.layout1020 {
  position: absolute;
  top: 115px;
}

.layout1020.sticky {
  position: fixed;
  top: 0;
}

.layout1020--link-fixed {
  z-index: 4;
}

.layout1020__wrap {
  width: 1020px;
  margin: 0 auto;
  position: relative;
}

.layout1020__box {
  position: absolute;
  width: 740px;
  height: 1117px;
  top: 0;
}

.layout1020__box--left {
  left: -740px;
}

.layout1020__box--right {
  right: -740px;
}

.layout1020__link {
  display: block;
  width: 100%;
  height: 100%;
  z-index: 3;
  position: fixed;
}

.layout1020__ex-link {
  position: absolute;
  top: 0;
  z-index: 40;
  width: 120px;
  top: 90px;
}

.layout1020__ex-link--right {
  right: -120px;
  height: 200px;
}

.layout1020__ex-link--left {
  left: -120px;
  height: 350px;
}

@font-face {
  font-family: "firstpage";
  src: url("../fo/firstpage-v1.0.2.eot");
  src: url("../fo/firstpage-v1.0.2.eot?#iefix") format("embedded-opentype"), url("../fo/firstpage-v1.0.2.woff") format("woff"), url("../fo/firstpage-v1.0.2.ttf") format("truetype"), url("../fo/firstpage-v1.0.2.svg#") format("svg");
  font-weight: normal;
  font-style: normal;
}

.icon {
  font-family: "firstpage";
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon--trophy:before {
  content: "\e901";
}

.icon--notice:before {
  content: "\e900";
}

.icon--plus:before {
  content: "\e603";
}

.icon--right:before {
  content: "\e600";
}

.icon--play:before {
  content: "\e601";
}

.sizing-border * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.sp-article__label {
  display: block;
  color: #a4a1a1;
  font-size: 10px;
  margin-top: 3px;
}

.sp-article > a:hover {
  text-decoration: none;
}

.sp-article > a:hover span {
  text-decoration: underline;
}

.sp-article a:hover .sp-article__label {
  text-decoration: none;
}

.sp-article a:hover h3 span, .sp-article a:hover h4 span, .sp-article a:hover p span {
  text-decoration: underline;
}

.ig-b- {
  display: inline-block;
}

.ig-b- img {
  visibility: hidden;
}

.ig-b-:hover {
  background-position: 0 -60px;
}

.ig-b-:active {
  background-position: 0 -120px;
}

.ig-b-v-24 {
  width: 137px;
  height: 24px;
  background: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24.png) no-repeat 0 0;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
  .ig-b-v-24 {
    background-image: url(//badges.instagram.com/static/images/ig-badge-view-sprite-24@2x.png);
    background-size: 160px 178px;
  }
}

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

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

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

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

.animated {
  -webkit-animation-duration: .3s;
          animation-duration: .3s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

.fadeInDown {
  -webkit-animation-name: fadeInDown;
          animation-name: fadeInDown;
}

.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
          animation-name: fadeOutUp;
}

.sn-footer {
  -webkit-font-smoothing: antialiased;
  font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size: 14px;
  width: 100%;
  padding: 20px 0 60px 0;
  background: #eee;
  position: relative;
}

.sn-footer__wrapper {
  position: relative;
  width: 960px;
  margin: 0 auto;
  margin-bottom: 30px;
  padding-right: 30px;
  padding-left: 30px;
}

.sn-footer__hot-list {
  font-size: 13px;
}

.sn-footer__hot-list li {
  display: inline-block;
  margin-right: 5px;
}

.sn-footer__hot-list li:not(:first-child) a {
  padding-left: 15px;
  background-position: -18px -68px;
}

.sn-footer__right-col {
  text-align: right;
}

.sn-footer__totop-btn {
  border-radius: 5px;
  background-color: #fff;
  font-family: sukhumvitreg;
  color: #797979;
  -webkit-box-shadow: 0 1px 2px #bbb;
          box-shadow: 0 1px 2px #bbb;
  float: right;
  border: none;
  cursor: pointer;
  width: 220px;
  text-align: center;
  font-size: 20px;
  padding: 15px 0 8px;
}

.sn-app__title {
  font-size: 24px;
  color: #ed1c24;
  margin-bottom: 15px;
}

.sn-app__desc {
  color: #4f4f4f;
  margin-bottom: 10px;
}

.sn-app__download {
  padding: 20px 0 40px;
}

.sn-app__download-btn {
  margin-right: 10px;
  display: inline-block;
}

.suggest-btn {
  font-family: sukhumvitreg;
  font-size: 20px;
  display: block;
  padding: 20px 20px 18px;
  border: 1px solid #b8b8b8;
  border-radius: 5px;
  text-align: center;
  color: #222;
  padding-top: 20px;
  float: right;
  margin-top: 15px;
  -webkit-box-shadow: 0 1px 3px #ccc;
          box-shadow: 0 1px 3px #ccc;
}

.suggest-btn:hover {
  color: #222;
  text-decoration: none;
}

.corporate-jobs-btn {
  font-family: sukhumvitreg;
  float: right;
  font-size: 20px;
  display: block;
  padding: 20px 20px 18px;
  border: 1px solid #006cac;
  border-radius: 5px;
  text-align: center;
  color: #fff;
  margin-top: 15px;
  -webkit-box-shadow: 0 1px 3px #ccc;
          box-shadow: 0 1px 3px #ccc;
  background: #188bca;
  margin-left: 15px;
}

.corporate-jobs-btn:hover {
  color: #fff;
  background: #006cac;
  text-decoration: none;
}

.sn-social {
  display: block;
  margin-top: 28px;
}

.sn-social:before, .sn-social:after {
  content: " ";
  display: table;
}

.sn-social:after {
  clear: both;
}

.sn-social__section {
  display: inline-block;
  cursor: pointer;
}

.sn-social__title {
  display: inline-block;
  padding-top: 2px;
  position: relative;
  top: -5px;
}

.sn-social__group {
  display: inline-block;
}

.sn-social__btn {
  float: left;
  width: 25px;
  height: 25px;
  margin: 0 13px;
}

.sn-social__item {
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  display: block;
  width: 100%;
  height: 100%;
}

.sn-social__item:last-child {
  margin-right: 0;
}

.footer-legal {
  color: #111;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 15px;
}

.snf-icon--top-arrow {
  display: inline-block;
  margin-right: 15px;
  height: 15px;
  width: 15px;
}

.sn-footer__hot-list li:not(:first-child) a {
  background-image: url("../di/footer-sprites-3.png");
  background-repeat: no-repeat;
}

.snf-icon--top-arrow {
  background: url("../di/footer-sprites-3.png") -20px -20px no-repeat;
}

.sn-social__item--fb {
  background: url("../di/footer-sprites-3.png") -20px -119px no-repeat;
}

.sn-social__item--gp {
  background: url("../di/footer-sprites-3.png") -20px -181px no-repeat;
}

.sn-social__item--ig {
  background: url("../di/footer-sprites-3.png") -20px -241px no-repeat;
}

.sn-social__item--tw {
  background: url("../di/footer-sprites-3.png") -20px -303px no-repeat;
}

.sn-social__item--yt {
  background: url("../di/footer-sprites-3.png") -20px -363px no-repeat;
}

.sn-social__item--in {
  background: url("../di/footer-sprites-3.png") -20px -423px no-repeat;
}

.social-profile {
  display: none;
  opacity: 0;
  position: absolute;
  top: -202px;
  right: 30px;
  z-index: 100;
  background-color: #fff;
  width: 345px;
  border-radius: 8px;
  -webkit-box-shadow: 0 1px 10px #AAA;
          box-shadow: 0 1px 10px #AAA;
}

.social-profile, .social-profile * {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.social-profile:after {
  top: 100%;
  left: 45px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-color: rgba(255, 255, 255, 0);
  border-top-color: #ffffff;
  border-width: 10px;
  margin-left: -10px;
}

.social-profile__list {
  margin: 15px 0 20px;
}

.social-profile__item {
  width: 100%;
  padding: 15px 0 12px;
  border-bottom: 1px solid #ddd;
}

.social-profile__item:before, .social-profile__item:after {
  content: " ";
  display: table;
}

.social-profile__item:after {
  clear: both;
}

.social-profile__item:last-child {
  border-bottom: none;
}

.social-profile__label {
  font-family: sukhumvitreg;
  color: #4f4f4f;
  font-size: 18px;
  display: block;
  width: 120px;
  text-align: right;
  float: left;
}

.social-profile__btn {
  display: block;
  float: left;
  margin-left: 25px;
}

.social-profile__btn > *,
.social-profile__btn iframe,
.social-profile__btn .link-badge {
  position: absolute !important;
  margin-top: -3px;
}

.wb-post__frame {
  position: relative;
  margin-bottom: 5px;
}

.wb-post__badge {
  position: absolute;
  width: 40px;
  height: 40px;
  bottom: -3px;
  left: -10px;
}

.wb-post__badge img {
  width: 100%;
  height: auto;
}

.jx-post__thumbnail, .jx-media-post__thumbnail, .jx-radio-post__thumbnail, .post-media__thumbnail {
  background-color: #000;
  font-size: 0;
  position: relative;
  overflow: hidden;
}

.jx-post__thumbnail:before, .jx-posts__link-more:before, .jx-media-post__thumbnail:before, .jx-radio-post__thumbnail:before, .post-media__thumbnail:before {
  content: '';
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  overflow: hidden;
}

.jx-post__img, .jx-media-post__img, .jx-radio-post__img, .post-media__img {
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
}

.jx-logo, .jx-cd, .jx-content__slider .slick-arrow {
  background-image: url("../di/joox-sec-spritesheet-2.png");
  background-repeat: no-repeat;
  display: block;
}

.jx-cd {
  width: 118px;
  height: 119px;
  background-position: -40px -40px;
}

.jx-logo {
  width: 88px;
  height: 25px;
  background-position: -40px -239px;
}

.jx-content__slider .slick-prev {
  background-position: -40px -344px;
}

.jx-content__slider .slick-next {
  background-position: -40px -492px;
}

.sec-joox {
  position: relative;
  margin: 0;
  z-index: 100;
  background: url("../di/j-bg.jpg") 0 0 repeat-x;
  color: #fff;
  padding: 0 10px;
  -webkit-font-smoothing: antialiased;
}

.sec-joox > .row {
  margin-left: -11px;
  margin-right: -11px;
}

.sec-joox > .row > .column {
  padding-left: 13px;
  padding-right: 13px;
}

.sec-joox h3 {
  font-weight: 400 !important;
}

.sec-joox__title {
  font-family: sukhumvitbold;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.5;
}

.sec-joox__title, .sec-joox__title a {
  color: #fff;
}

.sec-joox__title a:hover {
  text-decoration: none;
}

.sec-joox__title a:hover .icon {
  left: 4px;
  color: #08D469;
}

.sec-joox__title .icon {
  font-size: .8em;
  position: relative;
  top: 2px;
  left: 0px;
  -webkit-transition: left .4s ease;
          transition: left .4s ease;
}

.jx-logo {
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  position: absolute;
  top: 0;
}

.jx-post__detail {
  height: 39px;
  overflow: hidden;
}

.jx-post__thumbnail:before {
  padding-bottom: 100%;
}

.jx-post__thumbnail:hover .jx-post__img {
  opacity: .5;
  -webkit-transform: scale(1.025);
      -ms-transform: scale(1.025);
          transform: scale(1.025);
}

.jx-post__thumbnail:hover .jx-post__icon {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.jx-post__icon {
  text-align: center;
  font-size: 16px;
  font-family: sukhumvitreg;
  font-weight: 400;
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  margin-left: -24px;
  margin-top: -32px;
  -webkit-transform: translateY(20px);
      -ms-transform: translateY(20px);
          transform: translateY(20px);
  opacity: 0;
  -webkit-transition: all .4s ease;
          transition: all .4s ease;
  visibility: hidden;
}

.jx-post__icon .icon {
  display: block;
  font-size: 48px;
  margin-bottom: 5px;
}

.jx-post--slide-fullwidth .jx-post__icon {
  margin-left: -48px;
  margin-top: -59px;
}

.jx-post--slide-fullwidth .jx-post__icon .icon {
  font-size: 96px;
}

.jx-post__img {
  -webkit-transition: .4s;
          transition: .4s;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.jx-post__title {
  font-size: 13px;
  line-height: 1.2;
  font-weight: 400;
  margin-top: 8px;
}

.jx-post__title, .jx-post__title a {
  color: #fff;
}

.jx-post--slide-fullwidth {
  margin-bottom: 30px;
}

.jx-post--slide-fullwidth .jx-post__thumbnail iframe, .jx-post--slide-fullwidth .jx-post__thumbnail object {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.jx-post--slide-fullwidth .jx-post__thumbnail:before {
  padding-bottom: 39.8%;
}

.posts-row {
  margin-left: -5px;
  margin-right: -5px;
}

.posts-row.row {
  margin-top: 7px;
}

.posts-column .row {
  margin-left: -5px;
  margin-right: -5px;
}

.posts-column, .posts-column .jx-post {
  padding-left: 5px;
  padding-right: 5px;
}

.jx-posts {
  width: 85.71429%;
}

.jx-posts__more {
  font-family: sukhumvitbold;
  font-weight: 400;
  width: 14.28571%;
  text-align: center;
}

.jx-posts__link-more {
  display: block;
  color: #fff;
  font-size: 0;
  position: relative;
  overflow: hidden;
  background: url("../di/jx-bgcontent.png");
}

.jx-posts__link-more:before {
  padding-bottom: 156.62651%;
}

.jx-posts__link-more:hover {
  text-decoration: none;
  background-color: rgba(0, 0, 0, 0.5);
  color: rgba(255, 255, 255, 0.7);
}

.jx-posts__link-more .icon {
  color: rgba(255, 255, 255, 0.5);
  font-size: 46px;
}

.jx-posts__more-icon {
  position: absolute;
  z-index: 1;
  top: 20px;
  left: 50%;
  margin-left: -20px;
}

.jx-posts__more-icon .icon {
  display: block;
  margin-bottom: 30px;
}

.jx-posts__more-label {
  font-family: sukhumvitbold;
  font-weight: 400;
  font-size: 18px;
  color: #fff;
}

.jx-media-post {
  float: left;
  width: 100%;
  position: relative;
  min-height: 1px;
}

.jx-media-post__header {
  position: absolute;
  bottom: 0;
  padding: 8px 13px;
  z-index: 1;
  width: 100%;
  left: 0;
  line-height: 1.2;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIxJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjMlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDIiLz4KICAgIDxzdG9wIG9mZnNldD0iNTElIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNDYiLz4KICAgIDxzdG9wIG9mZnNldD0iOTklIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuODkiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjkiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, transparent), color-stop(3%, rgba(0, 0, 0, 0.02)), color-stop(51%, rgba(0, 0, 0, 0.46)), color-stop(99%, rgba(0, 0, 0, 0.89)), color-stop(100%, rgba(0, 0, 0, 0.9)));
  background: -webkit-linear-gradient(top, transparent 1%, rgba(0, 0, 0, 0.02) 3%, rgba(0, 0, 0, 0.46) 51%, rgba(0, 0, 0, 0.89) 99%, rgba(0, 0, 0, 0.9) 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, transparent), color-stop(3%, rgba(0, 0, 0, 0.02)), color-stop(51%, rgba(0, 0, 0, 0.46)), color-stop(99%, rgba(0, 0, 0, 0.89)), to(rgba(0, 0, 0, 0.9)));
  background: linear-gradient(to bottom, transparent 1%, rgba(0, 0, 0, 0.02) 3%, rgba(0, 0, 0, 0.46) 51%, rgba(0, 0, 0, 0.89) 99%, rgba(0, 0, 0, 0.9) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#e6000000',GradientType=0 );
}

.jx-media-post__thumbnail {
  position: relative;
}

.jx-media-post__title {
  font-family: sukhumvitreg;
  font-weight: 400;
}

.jx-media-post__title, .jx-media-post__title a {
  color: #fff;
  font-size: 18px;
}

.jx-media-post a {
  display: block;
}

.jx-media-post a:hover {
  text-decoration: none;
}

.jx-media-post__thumbnail:before {
  padding-bottom: 39.79058%;
}

.jx-cd {
  position: absolute;
  top: -13px;
  left: -26px;
}

.jx-content {
  margin: 0 -13px 0 -27px;
  padding: 10px 13px 10px 28px !important;
  background: url("../di/jx-bgcontent.png");
}

.jx-content__title {
  display: inline-block;
  margin-left: 85px;
  position: relative;
}

.jx-content__title a {
  display: block;
  width: 100%;
  position: relative;
  white-space: nowrap;
}

.jx-content__title a span {
  margin-left: 8px;
}

.jx-content__slider {
  overflow: hidden;
  position: relative;
  max-height: 280px;
}

.jx-content__slider .slick-dots {
  position: absolute;
  bottom: 0px;
  width: 100%;
  text-align: center;
}

.jx-content__slider .slick-dots li {
  display: inline-block;
}

.jx-content__slider .slick-dots li button {
  width: 11px;
  height: 11px;
  margin: 0 5px;
  border-radius: 50%;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  border: none;
  background-color: #1c2022;
  cursor: pointer;
}

.jx-content__slider .slick-dots li.slick-active button {
  background-color: #c3c6c8;
}

.jx-content__slider:hover .slick-arrow {
  opacity: .7;
}

.jx-content__slider .slick-arrow {
  position: absolute;
  top: 33%;
  text-indent: 200%;
  white-space: nowrap;
  overflow: hidden;
  width: 42px;
  height: 68px;
  border: none;
  z-index: 100;
  background-color: transparent;
  cursor: pointer;
  opacity: 0;
  -webkit-transition: opacity .4s ease;
          transition: opacity .4s ease;
}

.jx-content__slider .slick-prev {
  left: 20px;
}

.jx-content__slider .slick-next {
  right: 20px;
}

.jx-radio {
  padding-top: 10px;
}

.jx-radio__more {
  opacity: .4;
  width: 60px;
  height: 60px;
}

.jx-radio__more:hover {
  opacity: .6;
}

.jx-radio__icon-more {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -18px;
  margin-top: -21px;
  font-size: 42px;
}

.jx-content-col {
  padding-left: 28px !important;
}

.jx-sidebar {
  background: url("../di/jx-bgsidebar.png");
  padding: 30px 28px 0px 13px !important;
  min-height: 660px;
}

.jx-sidebar__title {
  margin: 15px 0 4px;
}

.jx-content .jx-sidebar__title a {
  display: block;
}

.jx-sidebar__content {
  padding-bottom: 20px;
}

.jx-sidebar__content:before, .jx-sidebar__content:after {
  content: " ";
  display: table;
}

.jx-sidebar__content:after {
  clear: both;
}

.jx-radio-post {
  text-align: center;
}

.jx-radio-post a {
  color: #fff;
}

.jx-radio-post a:hover {
  text-decoration: none;
}

.jx-radio-post .jx-post__icon {
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
}

.jx-radio-post-col {
  width: 12.5%;
}

.jx-radio-post__label {
  font-family: sukhumvitbold;
  font-weight: 400;
  font-size: 16px;
  margin-top: 5px;
  display: block;
  -webkit-transform: translateY(-5px);
      -ms-transform: translateY(-5px);
          transform: translateY(-5px);
  opacity: 0;
  -webkit-transition: all .4s ease;
          transition: all .4s ease;
  visibility: hidden;
  width: 100px;
  text-align: center;
  left: -12px;
  position: absolute;
}

.jx-radio-post:hover .jx-radio-post__label {
  -webkit-transform: translateY(0px);
      -ms-transform: translateY(0px);
          transform: translateY(0px);
  opacity: 1;
  visibility: visible;
}

.jx-radio-post__thumbnail {
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid transparent;
  background-color: transparent;
}

.jx-radio-post__thumbnail:before {
  padding-bottom: 100%;
}

.jx-radio-post--more .jx-radio-post__thumbnail {
  border: none;
  background-color: #000;
}

.jx-radio-post__img {
  border-radius: 50%;
  -webkit-transition: .4s;
          transition: .4s;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.jx-radio-post .jx-post__icon {
  margin-bottom: 0;
  margin-top: -24px;
  visibility: hidden;
}

.jx-radio-post:hover .jx-radio-post__thumbnail {
  border-color: #25292a;
  background-color: #000;
}

.jx-radio-post:hover .jx-radio-post__img {
  opacity: .5;
  -webkit-transform: scale(1.025);
      -ms-transform: scale(1.025);
          transform: scale(1.025);
}

.jx-radio-post:hover .jx-post__icon {
  opacity: 1;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  visibility: visible;
}

#jooxPlayerBar {
  position: relative;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.jxPlayerNoti {
  background: #4c996b;
  color: #fff;
  position: absolute;
  top: -33px;
  left: 86px;
  padding: 8px 20px 4px 12px;
  font-size: 17px;
  font-family: sukhumvitbold;
  font-weight: 400;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  display: none;
}

.jxPlayerNoti.open {
  display: inline-block;
}

.jxPlayerNoti:after {
  top: 32px;
  left: 65px;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
  border-top: 9px solid #4c996b;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 12px solid transparent;
}

.jxPlayerNoti .icon {
  position: relative;
  top: 2px;
}

.post-media {
  margin-bottom: 10px;
  -webkit-font-smoothing: antialiased;
}

.post-media--shadow .post-media__thumbnail {
  -webkit-box-shadow: 0 0 5px #AAA;
          box-shadow: 0 0 5px #AAA;
  background-color: transparent;
}

.post-media--no-effect:hover .post-media__img {
  -webkit-transform: scale(1) !important;
      -ms-transform: scale(1) !important;
          transform: scale(1) !important;
}

.post-media--video__imgshadow {
  content: '';
  z-index: 2;
  display: block;
  width: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  height: 40px;
  -webkit-transition: opacity .4s ease;
          transition: opacity .4s ease;
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC44Ii8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, transparent), color-stop(100%, rgba(0, 0, 0, 0.8)));
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.8)));
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=0 );
}

.post-media--video__icon {
  z-index: 3;
  font-size: 36px;
  color: #fff;
  position: absolute;
  right: 5px;
  bottom: 5px;
  opacity: .8;
  -webkit-transition: opacity .4s ease;
          transition: opacity .4s ease;
}

.post-media--video__time {
  z-index: 3;
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  vertical-align: middle;
  background: #333;
  color: #fff;
  font-size: 11px;
  padding: 1px 4px;
}

.post-media__thumbnail:before {
  padding-bottom: 100%;
}

.post-media__thumbnail--video:before {
  padding-bottom: 56.25%;
}

.post-media__thumbnail--circle {
  overflow: hidden;
}

.post-media__thumbnail--circle, .post-media__thumbnail--circle .post-media__img {
  border-radius: 50%;
}

.post-media__link {
  display: block;
}

.post-media__img {
  -webkit-transition: -webkit-transform .4s ease;
          transition: transform .4s ease;
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.post-media__detail {
  padding-top: 6px;
  height: 63px;
}

.post-media__title {
  font-family: tahoma, heveltica !important;
  font-size: 14px  !important;
  line-height: 1.4 !important;
}

.post-media__title, .post-media__title a {
  color: #111 !important;
  padding: 0 !important;
  background-image: none !important;
}

.post-media__title a:hover {
  text-decoration: underline;
  color: #d50303 !important;
}

.post-media--lg .post-media--video__imgshadow {
  height: 60px;
}

.post-media--lg .post-media__detail {
  padding-top: 8px;
  height: 54px;
}

.post-media--lg .post-media__title {
  font-family: sukhumvitreg !important;
  font-size: 18px  !important;
  line-height: 1.2 !important;
}

.post-media:hover .post-media--video__imgshadow,
.post-media:hover .post-media--video__icon {
  opacity: 0;
}

.post-media:hover .post-media__img {
  -webkit-transform: scale(1.025);
      -ms-transform: scale(1.025);
          transform: scale(1.025);
}

.tv-posts {
  margin-left: 0;
  margin-right: -1px;
}

.tv-post {
  padding: 0 1px 1px 0px !important;
  height: 40px;
}

.tv-post__item {
  display: block;
  width: 100%;
  height: 100%;
  background: #e3e3e3 url("http://fp1.fsanook.com/2/di/radio-online-tv-online.png") 2px -59px no-repeat;
  padding: 11px 0 0 30px;
}

.tgt-content {
  /*  h2 {
   	@include visuallyhidden;
   } */
}

.tgt-content--header {
  float: left;
  width: 182px;
}

.tgt-content--header:before, .tgt-content--header:after {
  content: " ";
  display: table;
}

.tgt-content--header:after {
  clear: both;
}

.tgt-content--logo {
  background-image: url(../di/tgt-section/bg-tgtsection.png);
  background-repeat: no-repeat;
  display: block;
  width: 182px;
  height: 231px;
  text-indent: -9999px;
}

.tgt-content--detail {
  border: 1px solid #006da5;
  border-left: 0;
  float: right;
  height: 231px;
  width: 838px;
  margin-right: 0;
  position: relative;
}

.tgt-content--detail__partner {
  position: absolute;
  bottom: 10px;
  right: 30px;
}

.tgt-content--left {
  width: 300px;
  float: left;
}

.tgt-content--left:before, .tgt-content--left:after {
  content: " ";
  display: table;
}

.tgt-content--left:after {
  clear: both;
}

.tgt-content--right {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), color-stop(#fff), color-stop(#fff), to(#cef3fe));
  background-image: -webkit-linear-gradient(#fff, #fff, #fff, #cef3fe);
  background-image: linear-gradient(#fff, #fff, #fff, #cef3fe);
  margin: 0;
  padding: 25px 15px;
  height: 229px;
  width: 537px;
  float: left;
}

.tgt-content--right:before, .tgt-content--right:after {
  content: " ";
  display: table;
}

.tgt-content--right:after {
  clear: both;
}

.post-media__title, .post-media__title a {
  font-weight: 400;
}

.post-media--normal-lg {
  margin-bottom: 0;
}

.post-media--normal-lg .post-media__detail {
  background-color: #001846;
  color: #fbd88c !important;
  height: 60px;
  padding: 10px 15px 0;
}

.post-media--normal-lg .post-media__title, .post-media--normal-lg .post-media__title a {
  color: #fbd88c !important;
  font-weight: 400;
}

.post-media--normal-lg:hover .post-media__img {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.post-media--normal:hover .post-media__img {
  -webkit-transform: scale(1);
      -ms-transform: scale(1);
          transform: scale(1);
}

.post-media--sticky {
  z-index: 3;
  position: absolute;
  bottom: 0;
  right: 0;
  display: inline-block;
  vertical-align: middle;
  text-transform: uppercase;
  font-weight: 700;
  background: #fa0522;
  color: #fff;
  font-size: 11px;
  padding: 1px 4px;
}

article.hl-ch-horoscope {
  background: #6f4892;
}

.hl-ch-horoscope.hl-ch-horoscope {
  width: 300px !important;
  height: 278px !important;
}

/* article[class^=hl-ch] {
    width: 300px!important;
    height: 278px;
}
 */
article.hl-ch-learning {
  background: #2772af;
}

article.hl-ch-learning .learning-sticker {
  position: absolute;
  left: 10px;
  bottom: 110px;
  padding: 8px 7px 3px;
  border-radius: 3px;
  width: auto;
  height: auto;
}

.learning-sticker {
  display: inline-block;
  background: #f00;
  color: #fff;
  padding: 5px 3px 0;
  font-family: SukhumvitReg;
  font-size: 14px;
  overflow: hidden;
  width: 127px;
  height: 18px;
}

.article-learning {
  height: 155px;
}

.article-learning > a > h4, .article-learning > h4 > a {
  height: 37px;
}

.article-learning.article-learning img {
  margin-bottom: 0;
}

.new-channel {
  position: relative;
}

.new-channel:before {
  position: absolute;
  content: " ";
  display: block;
  background: url("../di/bg-newch.png");
  width: 74px;
  height: 101px;
  left: -44px;
  top: 73px;
}

[id=main-navigation] > ul > li > a[title="ข่าวภาษาอื่น"] {
  background: url(../di/main-nav-03a.png) 10px 3px no-repeat;
  background-size: auto auto;
}

[id=main-navigation] > ul > li:hover > a[title="ข่าวภาษาอื่น"], [id=main-navigation] > ul > li > a[title="ข่าวภาษาอื่น"]:hover {
  border-bottom: solid 1px #d9c9c9;
  background-color: #e4242d;
  background-position: 10px -78px;
}

[id=main-navigation] ul > li:first-child + li + li + li + li ul > li > a {
  background: url(../di/main-nav-03a.png) 9px -156px no-repeat;
  background-size: auto auto;
  text-indent: -9999px;
  height: 30px;
}

.full-article .sp-article.sp-article.sp-article:nth-child(3) {
  margin-right: 32px;
}

.full-article .sp-article.sp-article.sp-article:nth-child(6) {
  margin-right: 0;
}