/* =================
	Homepage
==================== */
.div-table {
  display: table; }
  .div-table .div-cell {
    display: table-cell;
    margin: 0;
    vertical-align: top;
    text-align: left;
    color: #fff; }

.home-panel {
  padding: 20px;
  position: relative; }

.home-banner {
  margin-top: 40px;
  height: 382px;
  overflow: hidden; }
  .home-banner .banner {
    width: 738px;
    margin-right: 30px; }
    .home-banner .banner .carousel-banner {
      overflow: hidden;
      position: relative; }
      .home-banner .banner .carousel-banner ul {
        list-style: none;
        list-style-image: none;
        margin: 0;
        padding: 0;
        display: inline-block;
        position: relative; }
        .home-banner .banner .carousel-banner ul li {
          display: block;
          float: left;
          height: 382px; }
          .home-banner .banner .carousel-banner ul li img {
            width: 100% !important;
            height: 100%; }
      .home-banner .banner .carousel-banner .carousel-control {
        display: block;
        position: absolute;
        top: 44%;
        left: 0;
        width: 100%;
        margin: 0; }
        .home-banner .banner .carousel-banner .carousel-control a {
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 40px;
          height: 50px;
          background: url("../images/common/sprite-image.png") no-repeat black; }
          .home-banner .banner .carousel-banner .carousel-control a span {
            display: none; }
          .home-banner .banner .carousel-banner .carousel-control a.prev {
            background-position: -5px -216px;
            left: 15px;
            right: auto; }
          .home-banner .banner .carousel-banner .carousel-control a.next {
            background-position: -70px -216px;
            left: auto;
            right: 15px; }
          .home-banner .banner .carousel-banner .carousel-control a:hover {
            background-color: rgba(0, 0, 0, 0.6); }
      .home-banner .banner .carousel-banner .banner-pagination {
        display: block;
        width: auto;
        margin: auto;
        position: absolute;
        top: 90%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%); }
        .home-banner .banner .carousel-banner .banner-pagination a {
          display: inline-block;
          width: 5px;
          height: 5px;
          background: rgba(0, 0, 0, 0.5);
          padding: 3px;
          margin: 5px 8px;
          border-radius: 50%; }
          .home-banner .banner .carousel-banner .banner-pagination a.selected, .home-banner .banner .carousel-banner .banner-pagination a:hover {
            background: black; }
          .home-banner .banner .carousel-banner .banner-pagination a span {
            display: none; }
  .home-banner .about.home-panel {
    background: #0b5e6f;
    color: #fff;
    padding: 10px 20px; }
    .home-banner .about.home-panel h2 {
      color: #ffc801;
      text-transform: uppercase;
      font-weight: bold;
      margin-bottom: 0; }

.home-bottom-panels {
  margin: 25px 0; }
  .home-bottom-panels .panel-category {
    text-align: left;
    font-size: 0.9em;
    font-weight: bold;
    text-transform: uppercase;
    position: absolute;
    top: 10px;
    left: 10px;
    font-family: "Open Sans", Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-weight: 400;
    font-weight: bold;
    margin: 0; }
  .home-bottom-panels .mid-banners {
    width: 250px; }
    .home-bottom-panels .mid-banners a {
      display: block;
      margin-bottom: 20px; }
      .home-bottom-panels .mid-banners a:last-child {
        margin: 0; }
      .home-bottom-panels .mid-banners a h2 {
        font-weight: bold; }
  .home-bottom-panels .mid-panels {
    width: 518px;
    text-align: center; }
    .home-bottom-panels .mid-panels h2,
    .home-bottom-panels .mid-panels h3 {
      font-weight: bold; }
    .home-bottom-panels .mid-panels .home-panel {
      max-width: 448px;
      height: 177px;
      overflow: hidden;
      background: #ccc;
      margin-bottom: 20px; }
      .home-bottom-panels .mid-panels .home-panel:last-child {
        margin: 0; }
    .home-bottom-panels .mid-panels .pronounciation {
      background: #5632d6; }
      .home-bottom-panels .mid-panels .pronounciation .play-audio {
        display: inline-block;
        width: 28px;
        height: 20px;
        background: url("../images/common/sprite-image.png") no-repeat transparent;
        background-position: -17px -109px; }
        .home-bottom-panels .mid-panels .pronounciation .play-audio.is-playing {
          background-position: -74px -109px; }
        .home-bottom-panels .mid-panels .pronounciation .play-audio span {
          display: none; }
      .home-bottom-panels .mid-panels .pronounciation h2 {
        font-size: 2.2em;
        line-height: 1em;
        margin: 0;
        margin-top: 40px; }
      .home-bottom-panels .mid-panels .pronounciation .panel-category {
        color: #00ffff; }
      .home-bottom-panels .mid-panels .pronounciation .word-pronounciation {
        margin-top: 5px; }
      .home-bottom-panels .mid-panels .pronounciation .definition {
        margin: 1.1em 0; }
    .home-bottom-panels .mid-panels .idioms.carousel-wrap {
      background: #bc8547; }
      .home-bottom-panels .mid-panels .idioms.carousel-wrap .panel-category {
        color: #fff568; }
      .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel {
        margin-top: 40px;
        height: 120px;
        padding: 0 40px;
        overflow: hidden;
        position: relative; }
        .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel .caroufredsel_wrapper {
          width: 100% !important; }
      .home-bottom-panels .mid-panels .idioms.carousel-wrap h3 {
        font-size: 2em !important;
        line-height: 1em;
        margin: 0; }
      .home-bottom-panels .mid-panels .idioms.carousel-wrap p {
        font-size: 100% !important; }
      .home-bottom-panels .mid-panels .idioms.carousel-wrap ul {
        list-style: none;
        list-style-image: none;
        margin: 0;
        padding: 0;
        display: inline-block;
        position: relative; }
        .home-bottom-panels .mid-panels .idioms.carousel-wrap ul li {
          display: block;
          float: left;
          width: 370px;
          height: 120px;
          text-align: center;
          font-size: 100% !important; }
          .home-bottom-panels .mid-panels .idioms.carousel-wrap ul li:first-child {
            display: block; }
        .home-bottom-panels .mid-panels .idioms.carousel-wrap ul a {
          color: #fff;
          text-decoration: none; }
      .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel-control {
        display: block;
        position: absolute;
        top: 25px;
        left: 0;
        width: 100%;
        margin: 0; }
        .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel-control a {
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 30px;
          height: 50px;
          background: url("../images/common/sprite-image.png") no-repeat transparent; }
          .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel-control a span {
            display: none; }
          .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel-control a.prev {
            background-position: -10px -166px; }
          .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel-control a.next {
            background-position: -75px -166px;
            left: auto;
            right: 0; }
  .home-bottom-panels .grammar-rules {
    background: #ffc801;
    background: url(../images/common/bg-grammar-rules.png) right bottom no-repeat #ffc801;
    color: #000; }
    .home-bottom-panels .grammar-rules h2 {
      font-weight: bold;
      margin-top: 20px;
      line-height: 1.1em; }

body .word-break-all {
  word-break: break-all; }

.rvfs-7 .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel {
  height: 140px; }

.rvfs-7 .home-bottom-panels .mid-panels .idioms.carousel-wrap .carousel .caroufredsel_wrapper {
  height: 140px !important; }