@charset "UTF-8";
/*----------------------------------------------------------------------------------------------
Theme Project: iboclass 愛播聽書FM網站
Designed by : Evy
Front-End by : Evy
Author: 百崴數位科技股份有限公司 PAVI Digital Tech. Co., Ltd.
Author Web: https://www.pavi.com.tw/
----------------------------------------------------------------------------------------------*/
/*----------------------------------------------------------------------------------------------
|-> Page number
----------------------------------------------------------------------------------------------*/
.pagebar {
  padding: 20px 0 40px 0;
  text-align: left;
  vertical-align: top; }
  .pagebar input {
    display: none; }
  .pagebar input[type="text"] {
    display: none; }
  .pagebar span.select {
    text-decoration: none;
    display: inline-block;
    text-align: center;
    margin: 3px 2px 3px 2px;
    line-height: 32px;
    color: #666;
    background-color: #3291b7; }
  .pagebar a[disabled="disabled"] {
    display: none; }
  .pagebar ul {
    margin: 0 auto;
    text-align: center; }
    .pagebar ul a[class^="icon-"]:before {
      position: relative;
      top: 2px;
      font-size: 16px; }
    .pagebar ul a[class="icon-angle-right"]:before {
      left: 1px; }
    .pagebar ul li {
      display: inline-block;
      vertical-align: top;
      margin: 0 2px 10px 2px; }
      .pagebar ul li a {
        position: relative;
        text-decoration: none;
        display: inline-block;
        text-align: center;
        background: #fff;
        min-width: 34px;
        line-height: 32px;
        padding: 0 10px;
        font-size: 14px;
        color: #666; }
        .pagebar ul li a:visited {
          color: #666; }
        .pagebar ul li a:hover {
          text-decoration: none;
          color: #fff;
          background: #3291b7; }
        .pagebar ul li a.icon-angle-right:before {
          line-height: 26px;
          float: right; }
        .pagebar ul li a.icon-angle-double-right:before {
          line-height: 26px;
          float: right; }
    .pagebar ul li.press a {
      cursor: default;
      color: #fff;
      background: #3291b7; }
      .pagebar ul li.press a:visited, .pagebar ul li.press a:hover {
        color: #fff; }

/*----------------------------------------------------------------------------------------------
|-> Editor
----------------------------------------------------------------------------------------------*/
.bbsArticle {
  position: relative;
  margin: 20px 0; }
  .bbsArticle h1 {
    font-size: 30px;
    line-height: 1.4em; }
  .bbsArticle h2 {
    font-size: 24.2px;
    margin-bottom: 20px; }
  .bbsArticle h3 {
    font-size: 21.6px;
    padding: 10px 0;
    line-height: 1.6em; }
    .insideNews .bbsArticle h3 {
      background: none;
      width: auto;
      height: auto;
      margin: 0;
      text-align: left; }
  .bbsArticle h4 {
    font-size: 19.2px;
    padding: 5px 0;
    margin-bottom: 10px; }
  .bbsArticle h5 {
    font-size: 17.6px;
    padding: 5px 0; }
  .bbsArticle h6 {
    font-size: 16px;
    padding: 5px 0; }
  .bbsArticle hr {
    margin: 40px 0;
    opacity: 0.5; }
  .bbsArticle p {
    margin-bottom: 15px;
    padding: 0; }
    .bbsArticle p + h1 {
      margin-top: 40px; }
    .bbsArticle p + h2 {
      padding-top: 20px; }
    .bbsArticle p + img {
      margin-top: 20px; }
    .bbsArticle p a {
      color: #e40101;
      text-decoration: none;
      word-wrap: break-word;
      word-break: break-all; }
      .bbsArticle p a:visited {
        color: #e40101; }
      .bbsArticle p a:hover {
        color: #f08237; }
  .bbsArticle img {
    max-width: 100%;
    margin-bottom: 20px; }
  .bbsArticle ul {
    margin: 20px; }
    .bbsArticle ul + h1 {
      margin-top: 40px; }
    .bbsArticle ul li {
      margin-bottom: 10px;
      padding-left: 0px;
      color: #333;
      list-style-position: outside;
      list-style-type: disc;
      border: 0px; }
  .bbsArticle ol + h1 {
    margin-top: 40px; }
  .bbsArticle ol + h2 {
    padding-top: 20px; }
  .bbsArticle ol li {
    margin-bottom: 10px;
    margin-left: 20px;
    color: #333;
    list-style-position: outside;
    list-style-type: decimal; }
  .bbsArticle ul + h1 {
    margin-top: 40px; }
  .bbsArticle ul + h2 {
    padding-top: 20px; }

/*-----------------------------------------------------------
|-> Main Banner
-----------------------------------------------------------*/
.bannerMain {
  position: relative;
  text-align: center; }
  .bannerMain figure {
    position: relative;
    z-index: 1;
    line-height: 0; }
    .bannerMain figure img {
      width: 100%; }

.bannerDescribe {
  position: absolute;
  z-index: 5;
  top: 10%;
  bottom: 10%;
  margin-bottom: 30px;
  left: 5%;
  width: 30%;
  padding: 30px 30px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  text-align: left; }
  .bannerDescribe h1 {
    font-size: 26px;
    line-height: 1.6em;
    text-align: center;
    font-weight: normal;
    margin-bottom: 15px; }

.classDescribe h1 {
  font-size: 30px;
  color: #00648c;
  line-height: 1.6em;
  font-weight: normal;
  margin: 25px 0 15px 0; }

.fastArea {
  width: 1200px;
  margin: 0 auto; }
  .fastArea .fastContent {
    position: relative;
    float: left;
    width: 73%; }

.fastLink {
  position: absolute;
  bottom: -70px;
  left: 0;
  right: 0;
  background: #3291b7;
  color: #fff;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .fastLink .timelimit {
    color: #fad949; }
    .fastLink .timelimit:before {
      display: inline-block;
      vertical-align: top;
      margin: 0 6px;
      content: "/"; }
  .fastLink.fix {
    position: fixed;
    z-index: 60;
    top: 0;
    left: 0;
    right: 0;
    bottom: auto;
    margin: 0;
    -webkit-border-radius: 0;
    border-radius: 0; }

.charge {
  float: left;
  line-height: 45px;
  margin-left: 20px;
  font-weight: normal;
  font-size: 18px;
  max-width: 26%;
  max-height: 45px;
  overflow: hidden; }

ul.tabLink, ul.tabLink3menu {
  width: 70%;
  margin: 0 0 0 30%;
  height: 45px; }
  ul.tabLink li, ul.tabLink3menu li {
    position: relative;
    display: inline-block;
    vertical-align: top;
    width: 25%;
    float: left;
    text-align: center;
    border-left: 1px solid rgba(0, 0, 0, 0.2); }
    ul.tabLink li:last-child:hover, ul.tabLink3menu li:last-child:hover {
      -webkit-border-radius: 0 5px 5px 0;
      border-radius: 0 5px 5px 0; }
    ul.tabLink li a, ul.tabLink3menu li a {
      position: relative;
      z-index: 15;
      display: block;
      color: #fff;
      line-height: 45px;
      border-left: 1px solid rgba(255, 255, 255, 0.2); }
      ul.tabLink li a:visited, ul.tabLink3menu li a:visited {
        color: #fff; }
      ul.tabLink li a:hover, ul.tabLink3menu li a:hover {
        color: #fff;
        background: #00648c; }
      ul.tabLink li a:before, ul.tabLink3menu li a:before {
        display: inline-block;
        vertical-align: top;
        line-height: 45px;
        margin-right: 8px; }
      ul.tabLink li a.buy, ul.tabLink3menu li a.buy {
        background: #d93261;
        -webkit-border-radius: 0 5px 5px 0;
        border-radius: 0 5px 5px 0; }
        ul.tabLink li a.buy:visited, ul.tabLink3menu li a.buy:visited {
          color: #fff; }
        ul.tabLink li a.buy:hover, ul.tabLink3menu li a.buy:hover {
          background: #cf013b; }
    ul.tabLink li .shareBox, ul.tabLink3menu li .shareBox {
      position: absolute;
      z-index: 10;
      top: 0;
      opacity: 0;
      left: 50%;
      margin-left: -76px;
      width: 152px;
      padding: 10px 3px 5px 3px;
      background: #eaeaea;
      -webkit-border-radius: 0 0 10px 10px;
      border-radius: 0 0 10px 10px;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
      ul.tabLink li .shareBox.slide, ul.tabLink3menu li .shareBox.slide {
        top: 45px;
        opacity: 1; }
    ul.tabLink li .loginBox, ul.tabLink3menu li .loginBox {
      position: absolute;
      z-index: 10;
      top: 0;
      opacity: 0;
      left: 50%;
      margin-left: -76px;
      width: 152px;
      padding: 10px 3px 5px 3px;
      color: #333;
      background: #eaeaea;
      -webkit-border-radius: 0 0 10px 10px;
      border-radius: 0 0 10px 10px;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
      ul.tabLink li .loginBox p, ul.tabLink3menu li .loginBox p {
        line-height: 1.4em;
        height: auto; }
      ul.tabLink li .loginBox a.btnFB, ul.tabLink3menu li .loginBox a.btnFB {
        display: inline-block;
        top: 0;
        margin: 8px auto;
        padding: 2px 8px;
        line-height: 24px;
        color: #29487d;
        border: 1px solid #29487d; }
        ul.tabLink li .loginBox a.btnFB:before, ul.tabLink3menu li .loginBox a.btnFB:before {
          line-height: 24px;
          top: 0;
          color: #29487d; }
        ul.tabLink li .loginBox a.btnFB:visited, ul.tabLink3menu li .loginBox a.btnFB:visited {
          color: #29487d; }
        ul.tabLink li .loginBox a.btnFB:hover, ul.tabLink3menu li .loginBox a.btnFB:hover {
          background: #29487D;
          color: #fff; }
          ul.tabLink li .loginBox a.btnFB:hover:before, ul.tabLink3menu li .loginBox a.btnFB:hover:before {
            color: #fff; }
      ul.tabLink li .loginBox.slide, ul.tabLink3menu li .loginBox.slide {
        top: 45px;
        opacity: 1; }

ul.tabLink3menu {
  width: 60%;
  margin: 0 0 0 40%; }
  ul.tabLink3menu li {
    width: 33.3%; }
    ul.tabLink3menu li a.icon-ibo:before {
      font-size: 26px;
      line-height: 39px; }

/*-----------------------------------------------------------
|-> Content
-----------------------------------------------------------*/
.listContent {
  background: #eaeaea; }

.categoryArea {
  width: 1200px;
  margin: 0 auto;
  padding: 30px 0 0px 0; }

ul.categoryTab {
  -webkit-border-radius: 5px 5px 0 0;
  border-radius: 5px 5px 0 0;
  overflow: hidden;
  border-bottom: 3px solid #3291b7; }
  ul.categoryTab li {
    display: inline-block;
    vertical-align: top;
    margin-right: 2px; }
    ul.categoryTab li a {
      display: block;
      padding: 13px 12px 9px 12px;
      text-align: center;
      border-left: 1px solid #fff;
      color: #333;
      background: #fff;
      -webkit-border-radius: 5px 5px 0 0;
      border-radius: 5px 5px 0 0; }
      ul.categoryTab li a:visited {
        color: #333; }
      ul.categoryTab li a:hover {
        background: #3291b7;
        color: #fff;
        border-left: 0 solid #fff; }
    ul.categoryTab li.select a {
      background: #3291b7;
      color: #fff;
      border-left: 0 solid #fff;
      -webkit-border-radius: 5px 5px 0 0;
      border-radius: 5px 5px 0 0; }

ul.classInsideList {
  width: 1200px;
  margin: 0 auto;
  padding-top: 30px;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: left;
  -ms-flex-pack: left;
  justify-content: left;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  ul.classInsideList li {
    position: relative;
    width: 23%;
    margin: 0 1% 40px 1%;
    padding-bottom: 80px;
    background: #fff;
    -webkit-border-radius: 5px;
    border-radius: 5px; }
    ul.classInsideList li section {
      padding: 0 20px; }
    ul.classInsideList li figure {
      -webkit-border-radius: 5px 5px 0 0;
      border-radius: 5px 5px 0 0;
      overflow: hidden; }
      ul.classInsideList li figure img {
        max-width: 100%; }
    ul.classInsideList li h3 {
      margin: 10px 0;
      font-size: 18px;
      font-weight: bold; }
    ul.classInsideList li p {
      font-size: 0.95em;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 8;
      -webkit-box-orient: vertical; }
  ul.classInsideList a.moreBtn {
    position: absolute;
    left: 20px;
    right: 20px;
    bottom: 0; }

/*-----------------------------------------------------------
|-> Content [Detail]
-----------------------------------------------------------*/
.contentArea {
  position: relative;
  width: 1200px;
  margin: 0 auto;
  vertical-align: top; }
  .contentArea:after {
    content: ' ';
    float: none;
    clear: both;
    display: block;
    width: 100%; }
  .contentArea h2 {
    font-size: 26px;
    color: #00648c;
    line-height: 1.6em;
    font-weight: normal;
    margin: 25px 0; }
    .contentArea h2 + .bbsArticle {
      border-bottom: 1px solid #ccc;
      padding-bottom: 30px; }

/*-----------------------------------------------------------
|-> Side
-----------------------------------------------------------*/
.sideArea {
  float: left;
  width: 27%;
  padding-left: 30px;
  margin: 30px 0; }
  .sideArea img {
    max-width: 100%; }
  .sideArea h5 {
    font-size: 18px;
    line-height: 1.6em;
    text-align: center;
    margin-bottom: 20px; }
  .sideArea .loading {
    display: none; }
  .sideArea .arrowArea {
    display: none; }

div.sideList div {
  margin-bottom: 20px;
  border: 6px solid #eaeaea;
  -webkit-border-radius: 5px;
  border-radius: 5px; }
  div.sideList div section {
    padding: 20px; }
    div.sideList div section h3 {
      font-size: 18px;
      font-weight: bold;
      margin: 0 0 20px 0; }
    div.sideList div section p {
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 8;
      -webkit-box-orient: vertical; }
    div.sideList div section a.moreBtn {
      margin-bottom: 0; }

/*-----------------------------------------------------------
|-> Main Content
-----------------------------------------------------------*/
.mainContent {
  position: relative;
  float: left;
  width: 73%;
  padding-top: 70px;
  padding-bottom: 40px; }
  .mainContent h2 + .videoArea iframe {
    margin: 0; }

.textContent {
  position: relative;
  padding-top: 20px;
  padding-bottom: 40px; }

.formArea {
  width: 92%;
  margin: 0 auto; }
  .formArea input, .formArea textarea {
    display: block;
    width: 400px; }
  .formArea textarea {
    width: 700px;
    height: 150px; }
  .formArea a.submit {
    display: inline-block;
    vertical-align: top;
    color: #fff;
    background: #f08237;
    opacity: 0.8;
    line-height: 45px;
    padding: 0 45px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out; }
    .formArea a.submit:visited {
      color: #fff; }
    .formArea a.submit:hover {
      cursor: pointer;
      opacity: 1; }

/*-----------------------------------------------------------
|-> Author
-----------------------------------------------------------*/
.authorArea {
  position: relative;
  border-bottom: 1px solid #ccc; }
  .authorArea figure {
    position: absolute;
    left: 0;
    top: 0;
    width: 186px;
    height: 186px;
    line-height: 0;
    overflow: hidden;
    border: 1px solid #eaeaea;
    -webkit-border-radius: 95px;
    border-radius: 95px; }
    .authorArea figure img {
      height: 100%;
      width: auto; }
  .authorArea figcaption {
    position: absolute;
    left: 0;
    top: 200px;
    width: 186px;
    text-align: center;
    font-size: 20px;
    font-weight: bold; }
  .authorArea .authorInfo {
    margin-left: 210px;
    min-height: 250px;
    margin-bottom: 30px; }
    .authorArea .authorInfo p {
      margin-bottom: 15px; }

/*-----------------------------------------------------------
|-> Popup
-----------------------------------------------------------*/
.popupArea {
  display: none;
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5); }
  .popupArea .popupbox {
    position: relative;
    width: 100%;
    height: 100%; }

.popupMain {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -250px;
  margin-top: -200px;
  width: 500px;
  height: 400px;
  background: #FFF;
  text-align: center;
  padding: 35px 25px 25px 25px;
  -webkit-border-radius: 15px;
  border-radius: 15px; }
  .popupMain p {
    text-align: left; }
  .popupMain .btn-close {
    display: block;
    float: right;
    margin: -25px -15px 0 0;
    -webkit-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out; }
    .popupMain .btn-close:hover:before {
      border: 1px solid #f08237; }
    .popupMain .btn-close:before {
      display: block;
      text-align: center;
      width: 30px;
      height: 30px;
      line-height: 32px;
      -webkit-border-radius: 16px;
      border-radius: 16px;
      font-family: Arial;
      content: 'X';
      border: 1px solid #666; }

.qrBox {
  display: inline-block;
  vertical-align: top;
  text-align: center;
  margin: 20px 8% 0 8%;
  width: 30%; }
  .qrBox img {
    max-width: 100%; }

/*-----------------------------------------------------------
|-> Video
-----------------------------------------------------------*/
.videoArea {
  border-top: 1px solid #ccc;
  padding-bottom: 40px; }
  .videoArea iframe {
    width: 100%; }

.catalogArea {
  margin-bottom: 30px; }

.video-container {
  position: relative;
  padding-bottom: 50%;
  padding-top: 30px;
  height: 0;
  overflow: hidden; }
  .video-container iframe {
    min-height: 50px; }

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

/*-----------------------------------------------------------
|-> Listen
-----------------------------------------------------------*/
dl.listenList {
  display: inline-block;
  min-width: 70%;
  background: #eaeaea;
  padding: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin-bottom: 40px; }
  dl.listenList dt, dl.listenList dd {
    padding: 10px 15px; }
  dl.listenList dt {
    font-size: 18px;
    font-weight: bold; }
  dl.listenList dd {
    padding: 8px 35px;
    background: #fff;
    border-bottom: 1px dashed #ccc; }
    dl.listenList dd:last-child {
      border-bottom: 0px dashed #ccc; }

ul.listenList li {
  position: relative;
  margin-left: 20px;
  margin-bottom: 5px; }
  ul.listenList li:before {
    position: absolute;
    top: -1px;
    left: -20px;
    color: #f08237;
    font-family: 'iboclass';
    content: "q";
    font-size: 12px; }

a.icon-play-1 {
  display: inline-block;
  color: #fff;
  padding: 0 15px;
  line-height: 36px;
  background: #f08237;
  -webkit-border-radius: 20px;
  border-radius: 20px; }
  a.icon-play-1 + .jp-audio {
    margin-top: 10px; }
  a.icon-play-1:before {
    float: right;
    line-height: 36px;
    margin-left: 5px; }
  a.icon-play-1:visited {
    color: #fff; }
  a.icon-play-1:hover {
    color: #fff;
    background: #666; }

/*-----------------------------------------------------------
|-> JPalyer
-----------------------------------------------------------*/
.jp-audio {
  border: none;
  background-color: #fff; }

.jp-audio {
  display: none; }

/*-----------------------------------------------------------
|-> StraaS
-----------------------------------------------------------*/
.straasVideo {
  position: relative;
  height: 0;
  margin-top: 0;
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out; }
  .straasVideo.slide {
    height: 40px;
    margin-top: 10px; }
    .straasVideo.slide:before {
      position: absolute;
      z-index: 1;
      top: 0;
      left: 0;
      color: #999;
      content: 'Loading...';
      text-align: center; }
    .straasVideo.slide iframe {
      position: relative;
      z-index: 10; }

/*-----------------------------------------------------------
|-> FAQ
-----------------------------------------------------------*/
ul.faqList {
  width: 92%;
  margin: 0 auto;
  padding: 10px 0; }
  ul.faqList + .btnArea {
    text-align: center; }
  ul.faqList li {
    margin-bottom: 20px;
    -webkit-border-radius: 5px;
    border-radius: 5px; }
    ul.faqList li:before {
      content: none; }
    ul.faqList li mark {
      position: relative;
      display: block;
      background: #eaeaea;
      padding: 10px 30px 10px 15px;
      -webkit-border-radius: 5px;
      border-radius: 5px; }
      ul.faqList li mark:before {
        position: absolute;
        right: 10px;
        top: 10px;
        color: #aaa;
        font-size: 20px; }
      ul.faqList li mark:hover {
        cursor: pointer; }
    ul.faqList li .bbsArticle {
      display: none;
      margin: 0;
      padding: 25px;
      -webkit-border-radius: 0 0 5px 5px;
      border-radius: 0 0 5px 5px; }
      ul.faqList li .bbsArticle ul {
        margin: 0 20px; }
      ul.faqList li .bbsArticle .mark {
        color: #e40101; }
    ul.faqList li:hover {
      -webkit-border-radius: 5px;
      border-radius: 5px; }
      ul.faqList li:hover mark {
        background: #f08237;
        color: #fff;
        -webkit-border-radius: 5px;
        border-radius: 5px; }
        ul.faqList li:hover mark:before {
          color: #fff; }
    ul.faqList li.open {
      background: #eaeaea; }
      ul.faqList li.open mark {
        background: #f08237;
        color: #fff;
        -webkit-border-radius: 5px 5px 0  0;
        border-radius: 5px 5px 0 0; }
        ul.faqList li.open mark:before {
          color: #fff; }
      ul.faqList li.open:hover mark {
        -webkit-border-radius: 5px 5px 0  0;
        border-radius: 5px 5px 0 0; }

/*-----------------------------------------------------------
|-> Sitemap
-----------------------------------------------------------*/
.sitemapArea h2 {
  font-weight: bold;
  border-bottom: 1px solid #ccc; }

ul.sitemap {
  margin: 20px; }
  ul.sitemap li {
    display: inline-block;
    vertical-align: top;
    position: relative;
    line-height: 1.4em;
    padding-left: 20px;
    width: 32%;
    margin-right: 1%;
    margin-bottom: 10px; }
    ul.sitemap li:before {
      position: absolute;
      top: -2px;
      left: 0;
      font-family: 'iboclass';
      content: 'm';
      color: #f08237; }

/*-----------------------------------------------------------
|-> remove input[type=number] arrow
-----------------------------------------------------------*/
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0; }

/*----------------------------------------------------------------------------------------------
|-> RWD - Inside
----------------------------------------------------------------------------------------------*/
@media all and (max-width: 1200px) {
  ul.classInsideList, .categoryArea, .contentArea, .fastArea {
    width: auto; }
  .fastArea {
    position: absolute;
    width: 100%; }
  .mainContent {
    padding: 70px 20px 0 20px; }
  .textContent {
    padding: 20px 20px 40px 20px; }
  ul.categoryTab {
    margin: 0 30px; }
  .fastArea .fastContent {
    width: 70%;
    margin-left: 20px; }
  .bannerDescribe {
    width: 40%; } }

@media all and (max-width: 1000px) {
  ul.tabLink li a.buy, ul.tabLink3menu li a.buy {
    -webkit-border-radius: 0;
    border-radius: 0; }
  ul.tabLink li .loginBox, ul.tabLink3menu li .loginBox {
    width: 100%;
    left: 0;
    margin-left: 0; }
    ul.tabLink li .loginBox a.btnFB, ul.tabLink3menu li .loginBox a.btnFB {
      display: block;
      margin: 5px; }
  ul.sitemap li {
    width: 47%; }
  ul.classInsideList {
    margin-left: 2%; }
    ul.classInsideList li {
      width: 45%;
      margin: 0 2% 40px 2%; }
  .bannerDescribe {
    position: relative;
    width: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: none;
    color: #333;
    margin-bottom: 0;
    padding: 20px 20px 0 20px; }
    .bannerDescribe p {
      border-bottom: 1px solid #ccc;
      padding-bottom: 30px; }
  .fastArea .fastContent {
    width: auto;
    margin-left: 0;
    float: none; }
  .fastLink {
    top: 100%;
    bottom: -45px;
    -webkit-border-radius: 0;
    border-radius: 0;
    -webkit-transition: all 0s ease-in-out;
    transition: all 0s ease-in-out; }
  .mainContent {
    width: auto;
    padding-top: 0;
    margin-top: 120px;
    float: none; }
  .sideArea {
    position: relative;
    width: 100%;
    z-index: 22;
    top: 0;
    padding-left: 0;
    background: #eaeaea;
    min-height: 200px;
    max-width: 100%;
    height: 100%;
    padding-bottom: 60px;
    margin-bottom: 0;
    overflow: hidden; }
    .sideArea .arrowArea, .sideArea .loading {
      display: block; }
    .sideArea .sideList {
      width: 90%;
      left: 5%;
      margin-left: 10px; }
      .sideArea .sideList div {
        background: #fff;
        border: 0 solid #eaeaea; }
        .sideArea .sideList div figure img {
          width: 100%; }
        .sideArea .sideList div section p {
          margin-bottom: 50px; }
        .sideArea .sideList div section a.moreBtn {
          position: absolute;
          bottom: 20px;
          left: 20px;
          right: 20px; }
    .sideArea .jssorb21 {
      position: absolute;
      bottom: 15px;
      height: 20px; }
    .sideArea .jssorb21 div, .sideArea .jssorb21 div:hover, .sideArea .jssorb21 .av {
      overflow: hidden;
      cursor: pointer; }
    .sideArea .jssorb21 div {
      width: 10px;
      height: 10px;
      background-color: #fff;
      opacity: 0.7;
      border-radius: 5px; }
    .sideArea .jssorb21 div:hover, .sideArea .jssorb21 .av:hover {
      background-color: #f08237;
      opacity: 1; }
    .sideArea .jssorb21 .av {
      background-color: #f08237; }
    .sideArea .jssorb21 .dn, .sideArea .jssorb21 .dn:hover {
      background-color: #333;
      opacity: 1; }
    .sideArea .arrowArea {
      position: relative;
      top: 50%;
      width: 98%;
      margin: 0 auto; }
    .sideArea .jssora03l,
    .sideArea .jssora03r {
      display: block;
      position: absolute;
      width: 40px;
      height: 75px;
      font-size: 24px;
      cursor: pointer;
      overflow: hidden;
      opacity: 0.7;
      font-size: 36px;
      color: #666; }
    .sideArea .jssora03l {
      left: -10px; }
    .sideArea .jssora03r {
      right: -10px; }
    .sideArea .jssora03l:hover {
      opacity: 1; }
    .sideArea .jssora03r:hover {
      opacity: 1; }
    .sideArea .jssora03l.jssora03ldn {
      opacity: 1; }
    .sideArea .jssora03r.jssora03rdn {
      opacity: 1; } }

@media all and (max-width: 900px) {
  ul.tabLink li .loginBox, ul.tabLink3menu li .loginBox {
    width: 160px;
    left: auto;
    right: 0; }
    ul.tabLink li .loginBox a.btnFB, ul.tabLink3menu li .loginBox a.btnFB {
      display: block;
      margin: 5px; } }

@media all and (max-width: 768px) {
  .formArea {
    width: 92%;
    margin-left: 5%; }
  .authorArea figure {
    position: relative;
    margin: 0 auto; }
  .authorArea figcaption {
    position: relative;
    top: 0;
    width: auto;
    margin: 10px auto; }
  .authorArea .authorInfo {
    margin-left: 0;
    margin-top: 20px; } }

@media all and (max-width: 650px) {
  .fastLink {
    bottom: -93px; }
  ul.sitemap li {
    display: block;
    width: auto; }
  .pagebar a.icon-angle-double-left {
    width: 30px;
    height: 32px;
    overflow: hidden;
    padding-left: 23px; }
    .pagebar a.icon-angle-double-left:before {
      position: absolute;
      left: -15px; }
  .pagebar a.icon-angle-left {
    width: 30px;
    height: 32px;
    overflow: hidden;
    padding-left: 23px; }
    .pagebar a.icon-angle-left:before {
      position: absolute;
      left: -16px; }
  .pagebar a.icon-angle-right {
    width: 30px;
    height: 32px;
    overflow: hidden;
    padding-right: 10px; }
    .pagebar a.icon-angle-right:before {
      position: absolute;
      margin-left: 45px; }
  .pagebar a.icon-angle-double-right {
    width: 30px;
    height: 32px;
    overflow: hidden;
    padding-right: 10px; }
    .pagebar a.icon-angle-double-right:before {
      position: absolute;
      margin-left: 45px; }
  .popupMain {
    left: 0;
    top: 45%;
    width: 90%;
    height: auto;
    margin-left: 5%; }
  .qrBox {
    margin: 20px 3% 0 3%;
    width: 40%; }
  .bannerMain figure img {
    position: relative;
    left: -50%;
    width: 200%; }
  ul.categoryTab {
    margin: 0 20px;
    border-bottom: none;
    -webkit-border-radius: 0;
    border-radius: 0; }
    ul.categoryTab li {
      display: block;
      height: 0;
      /*height: 46px;*/
      line-height: 46px;
      -webkit-transition: all 0.3s ease-in-out;
      transition: all 0.3s ease-in-out; }
      ul.categoryTab li.select {
        height: 46px; }
        ul.categoryTab li.select a {
          -webkit-border-radius: 5px;
          border-radius: 5px; }
          ul.categoryTab li.select a:before {
            position: relative;
            right: 10px;
            font-family: 'iboclass';
            content: 'y';
            float: right;
            font-size: 20px; }
      ul.categoryTab li a {
        padding: 0;
        -webkit-border-radius: 0;
        border-radius: 0; }
    ul.categoryTab.categoryOpen li {
      height: 46px; }
      ul.categoryTab.categoryOpen li.select a:before {
        content: 'x'; }
  ul.classInsideList {
    margin-left: 0; }
    ul.classInsideList li {
      width: auto;
      margin: 0 5% 40px 5%; }
      ul.classInsideList li figure img {
        width: 100%;
        height: auto; }
  .charge {
    float: none;
    max-width: 100%;
    max-height: 100%;
    padding: 0 5px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-left: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.2); }
  .mainContent #course, .mainContent #listen, .mainContent #catalog {
    position: relative;
    top: -50px; }
  .mainContent #catalog + h2 {
    margin-top: 45px; }
  ul.tabLink, ul.tabLink3menu {
    width: 100%;
    margin: 0;
    height: 46px;
    border-top: 1px solid rgba(255, 255, 255, 0.2); }
    ul.tabLink li a[class^="icon-"]:before, ul.tabLink3menu li a[class^="icon-"]:before, ul.tabLink li a.buy:before, ul.tabLink3menu li a.buy:before {
      font-size: 20px; }
    ul.tabLink li a[class^="icon-"] span, ul.tabLink3menu li a[class^="icon-"] span, ul.tabLink li a.buy span, ul.tabLink3menu li a.buy span {
      display: none; }
  ul.tabLink3menu li a.icon-ibo:before {
    line-height: 46px;
    font-size: 26px; }
  a.icon-play-1 {
    display: block;
    margin-left: 0;
    margin-top: 5px;
    width: 120px; }
  .sideArea .arrowArea {
    width: 100%; }
    .sideArea .arrowArea .jssora03l {
      left: -5px; }
    .sideArea .arrowArea .jssora03r {
      right: -8px; }
  .bbsArticle iframe {
    min-height: 180px; }
  .bbsArticle .video-container iframe {
    min-height: 50px; } }