/********************
*
* common
*
********************/

*,*:after,*:before{
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

input {
  -webkit-appearance: none;
  border-radius: 0;
}

/********************
*
* define
*
********************/

.visually-hidden {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(0px 0px 99.9% 99.9%);
  clip-path: inset(0px 0px 99.9% 99.9%);
  overflow: hidden;
  height: 1px;
  width: 1px;
  padding: 0;
  border: 0;
}

.fill-link {
  display: block;
  width: 100%;
  height: 100%;
}

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

.fluid {
  width: 100%;
  max-width: 970px;
  margin: 0 auto 0 auto;
  position: relative;
}

.fullwidth {
  width: calc(100% + 20px);
  margin: 0 -10px 0 -10px;
  position: relative;
}

.flex {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

@media screen and (max-width:799px) {
  .flex {
    display: block;
  }

  .mobile-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
}

.flex.center,
.mobile-flex.center {
  -moz-align-items: center;
  -ms-align-items: center;
  -webkit-align-items: center;
  align-items: center;
}

.justify {
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}

.mbtm {
  margin-bottom: 10px;
}

@media screen and (max-width:989px) {
  .break-out {
    margin-left: -10px;
    margin-right: -10px;
    width: calc(100% + 20px);
  }
}

.noselect {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.figure {
  position: relative;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
}

.figure:before {
  display: block;
  content: "";
  width: 100%;
}

.figure:before { padding-top: 56.25%; }
.ratio-315-165 .figure:before { padding-top: 52.380952381%; }

.figure .cover {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  padding: 0;
  margin: 0;
}

.figure .resizer {
  display: block;
  width: 100%;
  height: auto;
  display: none;
}

.mobile-only {
  display: none;
}

.mobile-tablet-only {
  display: none;
}

@media screen and (max-width:1010px) {
  .mobile-tablet-only {
    display: block;
  }

  .mobile-tablet-hide {
    display: none !important;
  }
}

@media screen and (max-width:767px) {
  .mobile-only {
    display: block;
  }
  .mobile-hide {
    display: none !important;
  }
}

/********************
*
* color
*
********************/

.color-border-left {
  border-color: #009deb;
  border-left-width: 3px;
  border-left-style: solid;
}

.color-bg {
  background: #009deb;
}

/********************
*
* color
*
********************/

/* 全部 */
.color-all.color-border-left { border-color: #23262d; }
.color-all.color-bg          { background: #23262d; }
/* 最新 */
.color-latest.color-border-left { border-color: #d50404; }
.color-latest.color-bg          { background: #d50404; }
/* 熱門 */
.color-mosthit.color-border-left { border-color: #5596d2; }
.color-mosthit.color-bg          { background: #5596d2; }
/* 社會 */
.color-news.color-border-left { border-color: #26cbba; }
.color-news.color-bg          { background: #26cbba; }
/* 政治 */
.color-politics.color-border-left { border-color: #f23770; }
.color-politics.color-bg          { background: #f23770; }
/* 娛樂 */
.color-entertainment.color-border-left { border-color: #ff7a21; }
.color-entertainment.color-bg          { background: #ff7a21; }
/* 時尚 */
.color-fashion.color-border-left { border-color: #c24aef; }
.color-fashion.color-bg          { background: #c24aef; }
/* 國際 */
.color-international.color-border-left { border-color: #0074eb; }
.color-international.color-bg          { background: #0074eb; }
/* 財經 */
.color-business.color-border-left { border-color: #c1a676; }
.color-business.color-bg          { background: #c1a676; }
/* 人物 */
.color-people.color-border-left { border-color: #e9c001; }
.color-people.color-bg          { background: #e9c001; }
/* 美食旅遊 */
.color-eat-and-travel.color-border-left { border-color: #98c830; }
.color-eat-and-travel.color-bg          { background: #98c830; }
/* 生活 */
.color-life.color-border-left { border-color: #e15d5a; }
.color-life.color-bg          { background: #e15d5a; }
/* 名家論壇 */
.color-forum.color-border-left { border-color: #339a00; }
.color-forum.color-bg          { background: #339a00; }
/* 科技 */
.color-technology.color-border-left { border-color: #8675ff; }
.color-technology.color-bg          { background: #8675ff; }


/********************
*
* site
*
********************/

body {
  margin: 0;
  padding: 0;
  font: 16px/1.5 'Microsoft JhengHei','Microsoft YaHei',微软雅黑体,SimHei,黑体,STXihei,'STHeiti Light',华文细黑,sans-serif;
}

.site-wrap {
  width: 100%;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/********************
*
* goto-top
*
********************/

.goto-top {
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  visibility: hidden;
  opacity: 0;
  transition-delay: 0s;
  transition: visibility 0s linear 300ms, opacity 300ms linear;
}

.goto-top.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
  -webkit-transition: 300ms;
}

.goto-top .strut > span,
.bottom-goto-top .strut > span {
  display: block;
  width: 81px;
  height: 81px;
  background: url(../images/goto-top.png) 0 0 no-repeat;
  background-size: cover;
  cursor: pointer;
  position: relative;
}

.bottom-goto-top {
  position: absolute;
  bottom: 38px;
  right: 6.1%;
}

@media screen and (max-width:1010px) {
  .bottom-goto-top {
    position: inherit;
    bottom: auto;
    right: auto;
    padding-bottom: 38px;
    text-align: right;
  }

  .bottom-goto-top .strut {
    display: inline-block;
  }

}

@media screen and (max-width:767px) {
  .goto-top .strut > span,
  .bottom-goto-top .strut > span {
    display: block;
    width: 50px;
    height: 50px;
  }
}

/********************
*
* skyscraper
*
********************/

.skyscraper {
  width: 970px;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
}

.skyscraper.fixed {
  position: fixed;
  top: 0;
}

.skyscraper .door {
  position: absolute;
}

.skyscraper .door-left {
  right: 975px;
}

.skyscraper .door-right {
  left: 975px;
}

/********************
*
* ad-text
*
********************/
.ad-text-wrap {
  border-top: 2px solid #aec2cc;
  border-bottom: 1px solid #aec2cc;
}

.ad-text {
  width: 33.33%;
  float: left;
  padding-left: 30px;
  position: relative;
}

.ad-text:before {
  content: "";
  position: absolute;
  width: 11px;
  height: 11px;
  background: url(../images/ad-text.png) 0 0 no-repeat;
  background-size: 11px auto;
  left: 10px;
  top: 0;
  bottom: 0;
  margin: auto;
}

.ad-text > div {
  width: 300px;
  height: 40px;
  display: inline-block;
  text-align: left;
  font-size: 16px;
  font-family: initial;
}

@media screen and (max-width:1010px) {
  .ad-text {
    width: 100%;
    text-align: center;
    border-top: 1px solid #aec2cc;
  }

  .ad-text:first-child {
    border-top: none;
  }
}

@media screen and (min-width: 365px) and (max-width: 1010px) {
  .ad-text:before {
    left: 50%;
    margin-left: -155px;
  }
}

/********************
*
* breaking-news
*
********************/

.breaking-news-wrap {

}

.breaking-news {
  width: 100%;
  height: 50px;
  position: relative;
  background: #ffffff;
}

.breaking-news:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 7px;
  bottom: 0;
  left: 0;
  background: #15a9e9;
  background: -moz-linear-gradient(left,  #15a9e9 0%, #15a9e9 33%, #851e6c 33%, #851e6c 66%, #fbbb00 66%, #fbbb00 100%, #fbbb00 100%);
  background: -webkit-linear-gradient(left,  #15a9e9 0%,#15a9e9 33%,#851e6c 33%,#851e6c 66%,#fbbb00 66%,#fbbb00 100%,#fbbb00 100%);
  background: linear-gradient(to right,  #15a9e9 0%,#15a9e9 33%,#851e6c 33%,#851e6c 66%,#fbbb00 66%,#fbbb00 100%,#fbbb00 100%);
}

.breaking-news:after {
  content: "";
  position: absolute;
  width: 139px;
  height: 100%;
  background: url(../images/breaking-news.png) 0 0 no-repeat;
  background-size: contain;
  top: 0;
  left: 0;
}

.breaking-news .text-vertical {
  width: calc(100% - 150px);
  height: 43px;
  position: absolute;
  top: 0;
  left: 150px;
  overflow: hidden;
}

.breaking-news .text-vertical li {
  height: 43px;
}

.breaking-news .text-vertical li span {
  color: #008ed5;
  font-size: 20.8px;
  line-height: 43px;
  display: block;
  padding-right: 5px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

@media screen and (max-width:767px) {
  .breaking-news {
    height: 30px;
  }

  .breaking-news:before {
    width: calc(100% - 32px);
    left: 32px;
    height: 4px;
  }

  .breaking-news:after {
    width: 85px;
  }

  .breaking-news .text-vertical {
    width: calc(100% - 85px);
    height: 26px;
    left: 85px;
  }

  .breaking-news .text-vertical li {
    height: 30px;
  }

  .breaking-news .text-vertical li span {
    font-size: 20.8px;
    line-height: 26px;
  }
}

/********************
*
* header
*
********************/

.header-wrap {
  position: relative;
  width: 100%;
}

.header {
  position: relative;
  width: 100%;
  height: 89px; 
}

.header.through-line:before,
.header.through-line:after,
.header.through-line .primary:before {
  background: url('data:image/gif;base64,R0lGODlhAgAGAKIAAAAAAP///wCd6+/v7dra2Li4tv///wAAACH5BAEAAAYALAAAAAACAAYAAAMGSCTcXCMBADs=') 0 0 repeat-x;
  content: "";
  display: block;
  height: 6px;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
}

.header.through-line:before {
  left: 0;
  right: 0;
  right: calc(100% - (100% - 970px)/2);
}

.header.through-line:after {
  left: 0;
  right: 0;
  left: calc(100% - (100% - 970px)/2);
}

.header .primary {
  overflow:hidden;
  height: 100%;
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  position: relative;
}

.header .primary:before {
  left: 77px;
  right: 0;
}

.mobile-header {
  border-bottom: 4px solid #009deb;
  display: none;
  height: 50px;
  background: #ffffff;
  position: relative;
}

.header .primary h2,
.mobile-header h2 {
  background-image: url(../images/logo-main.jpg);
}

.header .primary h2 {
  width: 77px;
  height: 80px;
}

.mobile-header h2 {
  width: 44px;
  height: 46px;
  right: 0;
}

.header .primary h2,
.mobile-header h2 {
  background-position: 0 0;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 0;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  z-index: 1;
}

.header.chunk {
  height: inherit;
}

.header.chunk .primary {
  overflow: inherit;
  max-width: 1000px;
}

.header.chunk .primary a img {
  width: 100%;
  height: auto;
  display: block;
}

.btn-menu,
.btn-sec-menu {
  background: #ffffff;
  width: 51px;
  height: 100%;
  position: absolute;
  top: 0;
  cursor: pointer;
  overflow: hidden;
}

.btn-menu {
  border-right: 1px solid #f1f1f1;
  left: 0;
}

.btn-sec-menu {
  border-left: 1px solid #f1f1f1;
  right: 0;
}

.btn-menu span,
.btn-sec-menu span {
  background-color: #23262d;
  display: block;
  position: absolute;
  opacity: 1;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 9px;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.btn-menu span {
  width: 45%;
  height: 8%;
}

.btn-sec-menu span {
  width: 10%;
  height: 10%;
}

.btn-menu.open span,
.btn-sec-menu.open span {
  background-color: #009deb;
}

.btn-menu span:nth-child(1) {
  top: 20%;
  bottom: 50%;
}

.btn-menu span:nth-child(2) {
  top: 0;
  bottom: 0;
}

.btn-menu span:nth-child(3) {
  top: 50%;
  bottom: 20%;
}

.btn-sec-menu span:nth-child(1) {
  top: 20%;
  bottom: 50%;
}

.btn-sec-menu span:nth-child(2) {
  top: 0;
  bottom: 0;
}

.btn-sec-menu span:nth-child(3) {
  top: 50%;
  bottom: 20%;
}

.header-wrap .corpnav {
  position: absolute;
  top: 52px;
  width: 100%;
  max-width: 970px;
  height: 30px;
  padding-left: 140px;
  left: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
}

/********************
*
* corp-area
*
********************/

.corp-area {
  position: absolute;
  width: 100%;
  max-width: 970px;
  height: 43px;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.charity {
  width: 65px;
  height: 14px;
  background: url(http://img.nextmag.com.tw/appledaily/images/core/foundation_top.png) 0 0 no-repeat;
  background-size: cover;
}

.corp-area .charity {
  position: absolute;
  top: 15px;
  right: 170px;
}

.nxd {
  width: 87px;
  height: 12px;
}

.nxd > h6 {
  width: 100%;
  height: 100%;
  background: url(http://img.nextmag.com.tw/images/NextDigital/logo_NextMedia_m.png) 0 0 no-repeat;
  background-size: cover;
  margin: 0;
}

.corp-area .nxd {
  position: absolute;
  top: 15px;
  right: 70px;
}

.worldwide {
  position: absolute;
  right: 0;
  top: 13px;
}

.worldwide ul li {
  float: left;
  font-size: 12px;
}

.worldwide ul li:hover {
  background-color: #ededed;
}

.worldwide ul li a {
  color: #5a5a5a;
  border-left: 1px solid #575757;
  padding: 0 5px;
}

.worldwide ul li:first-child a {
  border: none;
}

.worldwide ul li.on a {
  color: #999999;
}

.worldwide ul li:hover a {
  color: #000000;
}

/********************
*
* corpnav
*
********************/

.corpnav > ul {

}

.corpnav > ul > li {
  padding: 0 15px;
  float: left;
  background: transparent url(../images/cosspll.png) center left no-repeat;
  line-height: 30px;
  text-align: center;
}

.corpnav > ul > li:first-child {
  background: none;
}

.corpnav > ul > li a {

}

.corpnav > ul > li img {
  display: inline-block;
  opacity: 0.5;
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  -ms-transition: opacity 300ms;
  -o-transition: opacity 300ms;
  transition: opacity 300ms;
  vertical-align: middle;
  margin-top: -2px;
}

.corpnav > ul > li:hover img {
  opacity: 1;
}


@media screen and (max-width:1010px) {
  .corpnav > ul > li img {
    opacity: 1;
  }
}

/********************
*
* header-likes
*
********************/

.header-likes {
  position: absolute;
  right: 0;
  top: 36px;
}

.header-likes ul {
  
}

.header-likes ul li {
  float: left;
  margin-right: 10px;
}

.header-likes ul li.like-gp {
  margin-right: -20px;
}

/********************
*
* nav
*
********************/

.nav {
  width: 100%;
  background: #23262d;
}

.nav > ul {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  background: #23262d;
  border-left: 1px solid #404756;
}

.nav > ul > li {
  float: left;
  border-right: 1px solid #404756;
  height: 100%;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.nav > ul > li.on, 
.nav > ul > li:hover {
  background: #009deb;
}

.nav > ul > li > span,
.nav > ul > li > a > span {
  display: block;
  white-space: nowrap;
  line-height: 36px;
  font-size: 19.2px;
  color: #ffffff;
  text-align: center;
  padding: 0 15px;
}

.nav > ul > li:hover .sec-nav {
  visibility: visible;
  opacity: 1;
}

.nav > ul > li.search.on, 
.nav > ul > li.search:hover {
  background: inherit;
}

.nav > ul > li.search {
  float: right;
  border-right: none;
}

.nav > ul > li.search .search-input {
  outline: none;
  border: none;
  width: 130px;
  height: 36px;
  font-size: 18px;
  line-height: 36px;
  background: #393d48;
  color: #ffffff;
  padding: 0 0 0 10px;
  margin: 0;
  float: left;
}

.nav > ul > li.search .search-input::-webkit-input-placeholder {
  color: #7b8090;
}

.nav > ul > li.search .search-input::-moz-placeholder {
  color: #7b8090;
}

.nav > ul > li.search .search-input:-ms-input-placeholder {
  color: #7b8090;
}

.nav > ul > li.search .search-input:-moz-placeholder {
  color: #7b8090;
}

.nav > ul > li.search .search-button {
  border: none;
  outline: none;
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  float: left;
  background-color: #009deb;
  background-image: url(../images/btn-search.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 20px auto;
}

.nav > ul > li.fixed-img-link {
  text-align: center;
  line-height: 30px;
  height: 30px;
}

.img-link {
  display: inline-block;
  vertical-align: middle;
  margin-top: -2px;
}

.sec-nav {
  position: absolute;
  z-index: 1;
  width: 100%;
  max-width: 970px;
  background: #393d48;
  visibility: hidden;
  padding: 10px 20px 0px 20px;
  opacity: 0;
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  -ms-transition: opacity 300ms;
  -o-transition: opacity 300ms;
  transition: opacity 300ms;
}

.sec-nav > ul {

}

.sec-nav > ul > li {
  float: left;
  width: 115px;
  margin-bottom: 10px;
}

.sec-nav > ul > li > span,
.sec-nav > ul > li > a > span {
  display: block;
  font-size: 16px;
  line-height: 25px;
  color: #ffffff;
  padding-left: 8px;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.sec-nav > ul > li > span:hover,
.sec-nav > ul > li > a > span:hover {
  background: #515766;
}

.sec-nav-placeholder {
  width: 210px;
  background: #23262d;
  position: absolute;
  top: 50px;
  right: 0;
  z-index: 1;
  display: none;
}

.sec-nav-placeholder > ul {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  background: #23262d;
}

.sec-nav-placeholder > ul > li {
  float: left;
  width: 50%;
  height: 100%;
  border-right: 1px solid #404756;
  border-bottom: 1px solid #404756;
  padding: 0 10px;
}

.sec-nav-placeholder > ul > li:nth-child(2n) {
  border-right: none;
}

.sec-nav-placeholder > ul > li > span,
.sec-nav-placeholder > ul > li > a > span {
  display: block;
  white-space: nowrap;
  line-height: 20px;
  font-size: 17px;
  color: #ffffff;
  text-align: left;
  padding-left: 8px;
  margin: 10px 0;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.sec-nav-placeholder > ul > li.on > span, 
.sec-nav-placeholder > ul > li:hover > span,
.sec-nav-placeholder > ul > li.on > a > span, 
.sec-nav-placeholder > ul > li:hover > a > span {
  background: #515766;
}

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

  .nav {
    position: absolute;
    top: 50px;
    left: 0;
    z-index: 1;
    display: none;
    width: 210px;
  }

  .nav.show {
    display: block;
  }

  .nav > ul {
    border-left: none;
  }

  .nav > ul > li {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #404756;
  }

  .nav > ul.mobile-col-2 > li {
    width: 50%;
  }

  .nav > ul.mobile-col-2 > li:nth-child(2n) {
    border-right: none;
  }

  .nav > ul > li > span,
  .nav > ul > li > a > span {
    text-align: left;
    font-size: 17px;
    line-height: 30px;
  }

  .nav > ul > li:hover .sec-nav {
    visibility: hidden;
    opacity: 0;
  }

  .nav > ul > li.piar {
    width: 50%;
    border-right: 1px solid #404756;
  }

  .nav > ul > li.piar.no-border-right {
    border-right: none;
  }

  .nav > ul > li .text-center {
    text-align: center;
  }

  .nav > ul > li .text-darken {
    color: #7b8090;
  }

  .sec-nav-placeholder.show {
    display: block;
  }

  .nav > ul > li.search {
    height: 50px;
  }

  .nav > ul > li.search .search-input {
    font-size: 17px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    width: 150px;
    height: 30px;
    line-height: 30px;
    margin: 10px 0 0 10px;
  }

  .nav > ul > li.search .search-button {
    background-color: #393d48;
    background-size: 15px auto;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    height: 30px;
    margin-top: 10px;
  }
}

/********************
*
* sub-nav
*
********************/

.sub-nav {
  
}

.sub-nav > ul {
  
}

.sub-nav > ul > li {
  float: left;
  border: 2px solid #e50000;
  border-radius: 20px;
  background: #f1f1f1;
  margin: 0 13px 15px 0;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.sub-nav > ul > li > a > span {
  display: block;
  font-size: 20px;
  line-height: 1em;
  color: #000000;
  padding: 8px 27px 8px 50px;
  position: relative;
}

.sub-nav > ul > li > a > span:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background: url(../images/btn-type.png) 0 0 no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4px;
  margin: auto;
}

.sub-nav > ul > li.on,
.sub-nav > ul > li:hover {
  border-color: #222a2e;
  background-color: #222a2e;
}

.sub-nav > ul > li.on > a > span,
.sub-nav > ul > li:hover > a > span {
  color: #ffffff;
}

.sub-nav > ul > li.on > a > span:before,
.sub-nav > ul > li:hover > a > span:before {
  background-position: 0 bottom;
}


@media screen and (max-width:568px) {
  .sub-nav > ul > li {
    margin-right: 5px;
  }

  .sub-nav > ul > li > a > span {
    padding: 6px 6px 6px 36px;
  }

  .sub-nav > ul > li > a > span:before {
    left: 2px;
  }
}

/********************
*
* footer + corpinfo
*
********************/

.footer {
  border-top: 4px solid #009deb;
}

.footer .primary {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
}

.footer-top {
  background-color: #ffffff;
  padding: 15px 10px;
  box-shadow: 0 3px 4px rgba(0,0,0,0.2);
}

.footer-bottom {
  border-top: 1px dotted #999;
  background-color: #f2f2f2;
  background-image: -webkit-linear-gradient(top,#cacaca 0,#d4d4d4 3px,#dbdbdb 4px,#e8e8e8 19px,#ededed 29px,#f2f2f2 58px);
  background-image: linear-gradient(to bottom,#cacaca 0,#d4d4d4 3px,#dbdbdb 4px,#e8e8e8 19px,#ededed 29px,#f2f2f2 58px);
  padding: 15px 10px 50px 10px;
}

.footer .corpnav {

}

.footer .corpnav > ul > li:first-child {
  padding-left: 0;
}

.footer .corpnav > ul > li img {
  opacity: 1;
}

.footer h6.nxd-logo {
  width: 145px;
  height: 20px;
  background: url(http://img.nextmag.com.tw/images/NextDigital/logo_NextMedia_m.png) 0 0 no-repeat;
  background-size: cover;
  margin: 0 0 10px 0;
}

.corpinfo ul {

}

.corpinfo ul li {
  font-size: 12px;
  line-height: 1em;
  float: left;
  padding: 0 10px;
  margin-bottom: 15px;
  background: transparent url(../images/infodots.png) top left repeat-y;
}

.corpinfo ul li:first-child {
  background: none;
  padding-left: 0;
}

.corpinfo ul li a {
  color: #4d4d4d;
}

.corpinfo ul li .fb-tiny-logo {
  background: url(../images/logo-facebook-tiny.png) top left no-repeat;
  padding-left: 15px;
}

.footer .copyright {
  color: #696969;
  font-size: 0.75em;
  line-height: 1.5em;
  margin: 0;
}

.footer .copyright.center {
  text-align: center;
}

.footer .copyright.large {
  font-size: 1.3em;
}

@media screen and (max-width:969px) {
  .footer {
    border-top: 4px solid #009deb;
  }

  .footer h6.nxd-logo {
    margin: 0 auto 15px auto;
  }

  .footer .corpnav > ul > li {
    background: none;
    padding: 0;
    width: 20%;
    border: 1px dotted #ddd;
    padding: 5px;
  }

  .footer .corpnav > ul > li img {
    margin: -2px auto 0 auto;
  }
}

@media screen and (max-width:767px) {
  .footer .corpnav > ul > li {
    width: 33%;
  }
}

@media screen and (max-width:568px) {
  .footer .corpnav > ul > li {
    width: 50%;
  }
}

/********************
*
* custom: video playicon
*
********************/

.video .figure > span:before {
  content: "";
  position: absolute;
  display: block;
  width: 58px;
  height: 57px;
  background: url(../images/icon-play@2x.png) center center no-repeat;
  background-size: 100% auto;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

/********************
*
* custom: time
*
********************/

.time {
  padding-left: 20px;
}

.time:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 16px;
  height: 16px;
  background: url(../images/icon-time.png) center left no-repeat;
  background-size: cover;
}

/********************
*
* custom: visits
*
********************/

.visits {
  padding-left: 25px;
}

.visits:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 11px;
  background: url(../images/icon-visits.png) center left no-repeat;
  background-size: cover;
}

/********************
*
* main-wrap
*
********************/

.main-wrap {
  background: #ecf0f1;
  padding: 10px 10px 0 10px;
  min-height: 800px;
  position: relative;
}

/********************
*
* column
*
********************/

.column {
  float: left;

}

.column-full {
  width: 100%;
}

.column-main {
  width: calc(100% - 300px - 20px);
  margin-right: 20px;
}

.column-side {
  width: 300px;
}

@media screen and (max-width:767px) {
  .column-main {
    width: 100%;
    margin-right: 0;
  }

  .column-side {
    width: 100%;
  }

  .column-side .primary {
    /* max-width: 300px; */
    margin: 0 auto;
    text-align: center;
  }
}

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

}

@media screen and (max-width:1024px) {
  .tablet-full .column-main {
    width: 100%;
    margin-right: 0;
  }

  .tablet-full .column-side {
    width: 100%;
  }

  .tablet-full .column-side .primary {
    margin: 0 auto;
    text-align: center;
  }
  
  /*
  .tablet-full .list.list-side {
    display: inline-block;
    width: 300px;
    margin: 0 1% 10px 1%;
  }
  */
}

/********************
*
* list
*
********************/

.list {

}

.list ul {

}

.list ul li {
  width: 100%;
  margin-right: 0;
  margin-bottom: 2.06185567%;
  position: relative;
  float: left;
  padding: 0;
  background: #ffffff;
  border: 1px solid #e7e7e7;
  box-shadow: 0px 2px 2px rgba(218, 218, 218, 0.3);
  text-align: left;
}

.list.col-5 ul li {
  width: 19.175257732%;
  margin-right: 1.030927835%;
  margin-bottom: 1.030927835%;
}

.list.col-5 ul li:nth-child(5n) {
  margin-right: 0;
}

.list.col-4 ul li {
  width: 23.840769%;
  margin-right: 1.538461538%;
  margin-bottom: 1.538461538%;
}

.list.col-4 ul li:nth-child(4n) {
  margin-right: 0;
}

.list.col-3 ul li {
  width: 31.958762886%;
  margin-right: 2.06185567%;
  margin-bottom: 2.06185567%;
}

.list.col-3 ul li:nth-child(3n) {
  margin-right: 0;
}

.list.col-2 ul li {
  width: 48.461538462%;
  margin-right: 3.076923076%;
  margin-bottom: 3.076923076%;
}

.list.col-2 ul li:nth-child(2n) {
  margin-right: 0;
}

.list.col-1 ul li {
  width: 100%;
  margin-right: 0;
  margin-bottom: 2.06185567%;
}

.list ul li.on {
  background-color: #f4f4f4;
}

.list ul li .figure {
  width: 100%;
}

.list ul li .info {

}

.list ul li .figure:before {
  padding-top: 65.517241379%;
}

.list ul li .box {
  position: relative;
}

.list ul li .category {
  margin: 10px 0 0 10px;
}

.list ul li .category > span {
  color: #ffffff;
  font-size: 15px;
  min-width: 60px;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0 15px;
}

.list ul li .info {
  padding: 7px 18px;
}

.list ul li .info h3 {
  margin: 0;
  font-weight: normal;
  font-size: 20px;
  line-height: 1.4em;
  height: 2.8em;
  color: #000000;
  overflow: hidden;
  white-space: normal;
}

.list ul li:hover .info h3 {

}

.list ul li .info .box {
  position: relative;
}

.list ul li .info .excerpt {
  margin: 0 5px 5px 5px;
  font-weight: normal;
  font-size: 18px;
  line-height: 1.4em;
  height: 4.2em;
  color: #222a2e;
  overflow: hidden;
}

.list ul.excerpt-full li .info .excerpt {
  height: inherit;
}

.list ul li .info .time {
  font-size: 13px;
  line-height: 1em;
  color: #777777;
  position: relative;
}

.list ul li .info .visits {
  font-size: 13px;
  line-height: 1em;
  color: #777777;
  position: relative;
}

@media screen and (max-width:1010px) {
  .list.tablet-col-3 ul li {
    width: 31.958762886%;
    margin-right: 2.06185567%;
    margin-bottom: 2.06185567%;
  }

  .list.tablet-col-3 ul li:nth-child(5n),
  .list.tablet-col-3 ul li:nth-child(4n),
  .list.tablet-col-3 ul li:nth-child(2n) {
    margin-right: 2.06185567%;
  }

  .list.tablet-col-3 ul li:nth-child(3n) {
    margin-right: 0;
  }

  .list.tablet-col-2 ul li {
    width: 48.461538462%;
    margin-right: 3.076923076%;
    margin-bottom: 3.076923076%;
  }

  .list.tablet-col-2 ul li:nth-child(5n),
  .list.tablet-col-2 ul li:nth-child(4n),
  .list.tablet-col-2 ul li:nth-child(3n) {
    margin-right: 3.076923076%;
  }

  .list.tablet-col-2 ul li:nth-child(2n) {
    margin-right: 0;
  }

  .list.tablet-col-1 ul li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 2.06185567%;
  }

  .list.tablet-col-1 ul li:nth-child(5n),
  .list.tablet-col-1 ul li:nth-child(4n),
  .list.tablet-col-1 ul li:nth-child(3n),
  .list.tablet-col-1 ul li:nth-child(2n) {
    margin-right: 0;
  }
}

@media screen and (max-width:735px) {
  .list.mobile-col-2 ul li {
    width: 48.461538462%;
    margin-right: 3.076923076%;
    margin-bottom: 3.076923076%;
  }

  .list.mobile-col-2 ul li:nth-child(5n),
  .list.mobile-col-2 ul li:nth-child(4n),
  .list.mobile-col-2 ul li:nth-child(3n) {
    margin-right: 3.076923076%;
  }

  .list.mobile-col-2 ul li:nth-child(2n) {
    margin-right: 0;
  }

  .list.mobile-col-1 ul li {
    width: 100%;
    margin-right: 0;
    margin-bottom: 2.06185567%;
  }

  .list.mobile-col-1 ul li:nth-child(5n),
  .list.mobile-col-1 ul li:nth-child(4n),
  .list.mobile-col-1 ul li:nth-child(3n),
  .list.mobile-col-1 ul li:nth-child(2n) {
    margin-right: 0;
  }

  .list ul li .figure:before {
    padding-top: 67.142857142%;
  }
}


@media screen and (max-width:568px) {
  .list ul li.video .figure > span:before {
    width: 36px;
    height: 36px;
  }

  .list ul li.video .figure > span:after {
    height: 17px;
    border-radius: 4px;
    border-width: 8px 0 8px 11px;
  }
}

@media screen and (max-width:568px) {
  .list ul li .info h3 {
    font-size: 18px;
  }

  .list ul li .info .excerpt {
    font-size: 13px;
  }

  .list ul li .info .time {
    font-size: 11px;
  }

  .list ul li .info .visits {
    font-size: 11px;
  }
}

@media screen and (max-width:413px) {
  .list ul li .category > span {
    font-size: 12px;
    min-width: 45px;
    height: 20px;
    line-height: 20px;
    padding: 0 10px;
  }
}

.list.cascading ul li .figure:before {
  display: none;
}

.list.cascading ul li .figure img {
  display: block;
  width: 100%;
  height: auto;
}

.list.cascading ul li .figure span.cover {
  display: none;
}

.list.cascading ul li {
  float: none;
}

.list.cascading ul li:nth-child(5n),
.list.cascading ul li:nth-child(4n),
.list.cascading ul li:nth-child(3n),
.list.cascading ul li:nth-child(2n),
.list.cascading ul li {
  margin: 0 0 1%;
}

.list.cascading.col-1 ul li,
.list.cascading.tablet-col-1 ul li,
.list.cascading.mobile-col-1 ul li {
  margin: 0 0.8% 1.6%;
}

.list.cascading.col-2 ul li,
.list.cascading.tablet-col-2 ul li,
.list.cascading.mobile-col-2 ul li {
  margin: 0 0.8% 1.6%;
}

.list.cascading.col-3 ul li,
.list.cascading.tablet-col-3 ul li {
  margin: 0 0.7% 1.4%;
}

.list.cascading.col-4 ul li {
  margin: 0 0.5925% 1.185%;
}

.list.cascading.col-5 ul li {
  margin: 0 0.424% 0.828%;
}

/********************
*
* list-board
*
********************/

.list.list-board .figure .cover {
  background-size: cover;
  background-position: center 24.5%;
}

@media screen and (min-width:768px) {
  .list.list-board ul li .figure:before {
    padding-top: 56.451612903%;
  }

  .list.list-board ul li:first-child .figure:before {
    padding-top: 63.076923076%;
  }

  .list.list-board ul li:nth-child(2) .figure:before,
  .list.list-board ul li:nth-child(3) .figure:before {
    padding-top: 55%;
  }

  .list.list-board ul li {
    width: 31.958762886%;
    margin-right: 2.062%;
    padding: 0;
    -webkit-transition: -webkit-transform 300ms, box-shadow 300ms, opacity 300ms;
    -moz-transition: -moz-transform 300ms, box-shadow 300ms, opacity 300ms;
    -ms-transition: -ms-transform 300ms, box-shadow 300ms, opacity 300ms;
    -o-transition: -o-transform 300ms, box-shadow 300ms, opacity 300ms;
    transition: transform 300ms, box-shadow 300ms, opacity 300ms;
    transform: translate3d(0,0,0);
    -webkit-transform: translate3d(0,0,0);
  }

  .list.list-board ul li:hover {
    -webkit-transform: translateY(-6px);
    -moz-transform: translateY(-6px);
    transform: translateY(-6px);
    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
    -webkit-box-shadow: 0 20px 20px rgba(0, 0, 0, 0.1);
  }

  .list.list-board ul li:first-child {
    width: 67.010309278%;
    margin-right: 2.062%;
  }

  .list.list-board ul li:nth-child(2),
  .list.list-board ul li:nth-child(3) {
    width: 30.927835051%;
    margin-right: 0;
  }

  .list.list-board ul li:nth-child(2) {
    /* margin-bottom: calc(((410 / 970 * 100% + 70px) - ((165 / 970 * 100% + 64px) * 2) - 2px)); */
    margin-bottom: calc(80 / 970 * 100% - 62px);
  }

  .list.list-board ul li:nth-child(3n+3) {
    margin-right: 0;
  }

  .list.list-board ul li:first-child .info {
    height: 4.4em;
    font-size: 18px;
  }

  .list.list-board ul li:first-child .info:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
    visibility: hidden;
  }

  .list.list-board ul li:first-child .info h3 {
    margin: 0;
    height: auto;
    display: inline-block;
    vertical-align: middle;
    width: calc(100% - 10px);
    max-height: 2.8em;
  }

  .list.list-board ul li .category {
    position: absolute;
    margin: 0;
    top: -20px;
    left: 0;
    font-size: 0;
  }
}

@media screen and (max-width:767px) {
  .list.list-board ul li .figure:before {
    padding-top: 55.172413793%;
  }

  .list.list-board ul li:nth-child(3n+1) .figure:before {
    padding-top: 55%;
  }

  .list.list-board ul li {
    width: 48.461538462%;
    margin-bottom: 3.076923076%;
    margin-right: 0;
    padding: 0;
  }

  .list.list-board ul li:nth-child(3n+1) {
    width: 100%;
  }

  .list.list-board ul li:nth-child(3n+2) {
    margin-right: 3.076923076%;
  }

  .list.list-board ul li .info h3 {
    height: 4.2em;
  }

  .list.list-board ul li:nth-child(3n+1) .info h3 {
    height: 2.8em;
  }

  .list.list-board ul li .info {
    padding: 5px 10px;
  }

}

/********************
*
* list-main
*
********************/

@media screen and (min-width:768px) {
  .list.list-main ul li .figure:before {
    padding-top: 56.666666666%;
  }

  .list.list-main ul {
    border-top: 1px solid #e7e7e7;
  }

  .list.list-main ul li {
    padding: 20px;
    margin-bottom: 0;
    border-top: none;
    border-bottom: none;
    -webkit-transition: -webkit-transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
    -moz-transition: -moz-transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
    -ms-transition: -ms-transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
    -o-transition: -o-transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
    transition: transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
  }

  .list.list-main ul li:last-child {
    box-shadow: none;
  }

  .list.list-main ul li:hover {
    background: #f4f4f4;
    -webkit-transform: translateX(6px);
    -moz-transform: translateX(6px);
    transform: translateX(6px);
  }

  .list.list-main ul li:before {
    content: "";
    display: block;
    position: absolute;
    height: 1px;
    background: #e9edef;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 20px;
  }

  .list.list-main ul li:first-child:before {
    display: none;
  }

  .list.list-main ul li > a {
    display: table;
  }

  .list.list-main ul li .figure,
  .list.list-main ul li .box {
    width: 50%;
    display: table-cell;
    vertical-align: top;
  }

  .list.list-main ul li .box {
    padding: 0 10px;
  }

  .list.list-main ul li .category {
    margin: 0 0 5px 0;
    font-size: 0;
  }

  .list.list-main ul li .info {
    padding: 0;
  }

  .list.list-main ul li .info .time {
    position: absolute;
    bottom: 2px;
    left: 10px;
  }

  .list.list-main ul li .info .visits {
    position: absolute;
    bottom: 2px;
    left: 170px;
  }
}

@media screen and (min-width: 768px) and (max-width: 1010px) {
  .list.list-main ul li {
    padding: 10px;
  }

  .list.list-main ul li:before {
    margin: 0 10px;
  }

  .list.list-main ul li .info .time {
    left: 10px;
    bottom: 1.6em;
  }
}

@media screen and (max-width:1010px) {
  .list.list-main ul li .info .time {
    padding-left: 18px;
  }

  .list.list-main ul li .info .time:before {
    width: 12px;
    height: 12px;
    left: 1px;
  }

  .list.list-main ul li .info .visits {
    left: 10px;
    padding-left: 18px;
  }

  .list.list-main ul li .info .visits:before {
    width: 14px;
    height: 8px;
  }
}

@media screen and (max-width:767px) {
  .list.list-main .figure .cover {
    background-size: cover;
    background-position: center 24.5%;
  }

  .list.list-main ul li .figure:before {
    padding-top: 55.172413793%;
  }

  .list.list-main ul li:nth-child(3n+1) .figure:before {
    padding-top: 55%;
  }

  .list.list-main ul li {
    width: 48.461538462%;
    margin-bottom: 3.076923076%;
    margin-right: 0;
    padding: 0;
    overflow: hidden;
  }

  .list.list-main ul li:nth-child(3n+1) {
    width: 100%;
  }

  .list.list-main ul li:nth-child(3n+2) {
    margin-right: 3.076923076%;
  }

  .list.list-main ul li .info h3 {
    height: 4.2em;
  }

  .list.list-main ul li:nth-child(3n+1) .info h3 {
    height: 2.8em;
  }

  .list.list-main ul li .info {
    padding: 5px 10px;
  }

  .list.list-main ul li .info .time {
    margin-right: 5px;
  }
}

@media screen and (max-width:568px) {
  .list.list-main ul li .info .time {
    white-space: nowrap;
    left: 0;
  }

  .list.list-main ul li .info .visits {
    display: block;
    margin-top: 3px;
    white-space: nowrap;
    left: 0;
  }
}

/********************
*
* list-side
*
********************/

.list.list-side .figure .cover {
  background-size: cover;
  background-position: center 24.5%;
}

.list.list-side ul li .figure:before {
  padding-top: 55.555555555%;
}

.list.list-side ul {
  border-bottom: 1px solid #e7e7e7;
}

.list.list-side ul li {
  padding: 10px;
  margin-bottom: 0;
  border-top: none;
  border-bottom: none;
  -webkit-transition: -webkit-transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
  -moz-transition: -moz-transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
  -ms-transition: -ms-transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
  -o-transition: -o-transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
  transition: transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
}

.list.list-side ul li:hover {
  background: #f4f4f4;
}

.list.list-side ul li:before {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  background: #e9edef;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 10px;
}

.list.list-side ul li:first-child:before {
  display: none;
}

.list.list-side ul li > a {
  display: table;
}

.list.list-side ul li .figure {
  width: 135px;
}

.list.list-side ul li .figure,
.list.list-side ul li .box {
  display: table-cell;
  vertical-align: top;
}

.list.list-side ul li .box {
  width: calc(100% - 135px);
  padding: 0 10px;
}

.list.list-side ul li .info {
  padding: 0;
}

.list.list-side ul li .info h3 {
  font-size: 16px;
  height: 4.2em;
}

.list.list-side .video .figure > span:before {
  width: 33px;
  height: 32px;
}

/********************
*
* list-video-side
*
********************/

.list.list-side.list-video-side {

}

.list.list-side.list-video-side ul li {
  border: none;
  box-shadow: none;
}

.list.list-side.list-video-side .figure {
  background: #cccccc;
}

/********************
*
* list-video-channel
*
********************/

.list-video-channel-wrap {
  margin-bottom: -1px;
}

.list.list-video-channel .figure .cover {
  background-size: cover;
  background-position: center 24.5%;
}

.list.list-video-channel ul li .figure:before {
  padding-top: 55.113636363%;
}

.loading {
  position: relative;
}

.loading:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);
}

.loading:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  /* background: url(../images/loading.gif) center center no-repeat; */
  background-size: 32px auto;
}

.loading > * {
  opacity: 0.5;
}

.list.list-video-channel {
  padding: 20px;
  background: #ffffff;
  position: relative;
  border: 1px solid #e7e7e7;
  box-shadow: 0px 2px 2px rgba(218, 218, 218, 0.3);
}

.mobile-list-video-channel-default .list.list-video-channel {
  border: none;
  box-shadow: none;
}

.list.list-video-channel .placeholder {
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
}

.list.list-video-channel ul {
  min-height: 187px;
  white-space: nowrap;
  width: 100%;
  display: inline-block;
  position: relative;
}

.list.list-video-channel ul li {
  width: 19.175257732%;
  margin-left: 1.030927835%;
  margin-bottom: 0;
  border: none;
  box-shadow: none;
  float: none;
  display: none;
  display: inline-block;
}

.list.list-video-channel ul li:first-child {
  margin-left: 0;
}

.list.list-video-channel ul li .info {
  padding: 7px 0;
  overflow: hidden;
}

.list.list-video-channel ul li .info h3 {
  font-size: 18px;
  height: 4.2em;
  margin-bottom: 5px;
  -webkit-transition: color 300ms;
  -moz-transition: color 300ms;
  -ms-transition: color 300ms;
  -o-transition: color 300ms;
  transition: color 300ms;
}

.list.list-video-channel ul li:hover .info h3 {
  color: #009deb;
}

.list.list-video-channel ul li .info .time {
  white-space: nowrap;
  left: 0;
}

.list.list-video-channel ul li .info .visits {
  display: block;
  margin-top: 3px;
  white-space: nowrap;
  left: 0;
}

.list.list-video-channel ul li .info .time {
  padding-left: 18px;
}

.list.list-video-channel ul li .info .time:before {
  width: 12px;
  height: 12px;
  left: 1px;
}

.list.list-video-channel ul li .info .visits {
  padding-left: 18px;
}

.list.list-video-channel ul li .info .visits:before {
  width: 14px;
  height: 8px;
}

@media screen and (max-width:1024px) {
  .list.list-video-channel {
    padding: 10px;
  }
  .list.list-video-channel ul li {
    width: 23.840769%;
    margin-left: 1.538461538%;
  }
  .list.list-video-channel ul li:nth-child(5) {
    display: none;
  }
}

@media screen and (max-width:868px) {
  .list.list-video-channel ul li {
    width: 31.958762886%;
    margin-left: 2.06185567%;
  }
  .list.list-video-channel ul li:nth-child(4) {
    display: none;
  }
}

@media screen and (max-width:568px) {
  .list.list-video-channel ul li {
    width: 48.461538462%;
    margin-left: 3.076923076%;
  }
  .list.list-video-channel ul li:nth-child(3) {
    display: none;
  }
}

/********************
*
* list-video-sec
*
********************/

.list-video-sec-wrap {

}

.list.list-video-sec .figure .cover {
  background-size: cover;
  background-position: center 24.5%;
}

.list.list-video-sec ul li .figure:before {
  padding-top: 55.113636363%;
}

.list.list-video-sec {
  padding: 20px 18px;
  background: #ffffff;
  position: relative;
  border-top: 1px solid #e7e7e7;
  border-left: 1px solid #e7e7e7;
  border-right: 1px solid #e7e7e7;
  box-shadow: 0px 2px 2px rgba(218, 218, 218, 0.3);
}

.list.list-video-sec .placeholder {
  font-size: 0;
  white-space: nowrap;
  overflow: hidden;
}

.list.list-video-sec ul {
  width: 100%;
  position: relative;
}

.list.list-video-sec ul li {
  width: 20%;
  margin-left: 0;
  margin-bottom: 1.5%;
  border: none;
  box-shadow: none;
  float: left;
  padding: 5px;
}

.list.list-video-sec ul li:nth-child(5n+1) {
  margin-left: 0;
}

.list.list-video-sec ul li .info {
  padding: 7px 0;
  overflow: hidden;
}

.list.list-video-sec ul li .info h3 {
  font-size: 18px;
  height: 4.2em;
  margin-bottom: 5px;
  -webkit-transition: color 300ms;
  -moz-transition: color 300ms;
  -ms-transition: color 300ms;
  -o-transition: color 300ms;
  transition: color 300ms;
}

.list.list-video-sec ul li:hover .info h3 {
  color: #009deb;
}

.list.list-video-sec ul li .info .time {
  white-space: nowrap;
  left: 0;
}

.list.list-video-sec ul li .info .visits {
  display: block;
  margin-top: 3px;
  white-space: nowrap;
  left: 0;
}

.list.list-video-sec ul li .info .time {
  padding-left: 18px;
}

.list.list-video-sec ul li .info .time:before {
  width: 12px;
  height: 12px;
  left: 1px;
}

.list.list-video-sec ul li .info .visits {
  padding-left: 18px;
}

.list.list-video-sec ul li .info .visits:before {
  width: 14px;
  height: 8px;
}

@media screen and (max-width:1024px) {
  .list.list-video-sec {
    padding: 10px;
  }
  .list.list-video-sec ul li {
    width: 25%;
    margin-left: 0;
  }
  .list.list-video-sec ul li:nth-child(5n+1) {
    margin-left: 0;
  }
  .list.list-video-sec ul li:nth-child(4n+1) {
    margin-left: 0;
  }
}

@media screen and (max-width:868px) {
  .list.list-video-sec ul li {
    width: 33.33%;
    margin-left: 0;
  }
  .list.list-video-sec ul li:nth-child(5n+1) {
    margin-left: 0;
  }
  .list.list-video-sec ul li:nth-child(4n+1) {
    margin-left: 0;
  }
  .list.list-video-sec ul li:nth-child(3n+1) {
    margin-left: 0;
  }
}

@media screen and (max-width:568px) {
  .list.list-video-sec ul li {
    width: 50%;
    margin-left: 0;
  }
  .list.list-video-sec ul li:nth-child(5n+1) {
    margin-left: 0;
  }
  .list.list-video-sec ul li:nth-child(4n+1) {
    margin-left: 0;
  }
  .list.list-video-sec ul li:nth-child(3n+1) {
    margin-left: 0;
  }
  .list.list-video-sec ul li:nth-child(2n+1) {
    margin-left: 0;
  }
}

/********************
*
* list-recommend
*
********************/

@media screen and (min-width:414px) {
  .list.list-recommend ul li .figure:before {
    padding-top: 55.263157894%;
  }

  .list.list-recommend ul li {
    width: 31.958762886%;
    margin-right: 2.06185567%;
    margin-bottom: 2.06185567%;
    border: none;
    box-shadow: none;
  }

  .list.list-recommend ul li:nth-child(3n) {
    margin-right: 0;
  }

  .list.list-recommend ul li .info {
    padding: 5px 12px;
  }

  .list.list-recommend ul li .info h3 {
    font-size: 16px;
    height: 4.2em;
    -webkit-transition: color 300ms;
    -moz-transition: color 300ms;
    -ms-transition: color 300ms;
    -o-transition: color 300ms;
    transition: color 300ms;
  }

  .list.list-recommend ul li:hover .info h3 {
    color: #009deb;
  }
}

/* @media screen and (min-width:414px) and (max-width:568px) , screen and (min-width:768px) and (max-width:888px) { */
@media screen and (min-width:414px) and (max-width:568px) {
  .list.list-recommend ul li {
    width: 48.461538462%;
    margin-right: 3.076923076%;
    margin-bottom: 3.076923076%;
  }

  .list.list-recommend ul li:nth-child(3n) {
    margin-right: 3.076923076%;
  }

  .list.list-recommend ul li:nth-child(2n) {
    margin-right: 0;
  }
}

@media screen and (max-width:413px) {
  .list.list-recommend .figure .cover {
    background-size: cover;
    background-position: center 24.5%;
  }

  .list.list-recommend ul li .figure:before {
    padding-top: 55.555555555%;
  }

  .list.list-recommend ul {
    border-bottom: 1px solid #e7e7e7;
  }

  .list.list-recommend ul li {
    padding: 10px;
    margin-bottom: 0;
    border-top: none;
    border-bottom: none;
    -webkit-transition: -webkit-transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
    -moz-transition: -moz-transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
    -ms-transition: -ms-transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
    -o-transition: -o-transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
    transition: transform 300ms, box-shadow 300ms, opacity 300ms, background 500ms;
    border: none;
    box-shadow: none;
  }

  .list.list-recommend ul li:hover {
    background: #f4f4f4;
  }

  .list.list-recommend ul li:before {
    content: "";
    display: block;
    position: absolute;
    height: 1px;
    background: #e9edef;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 10px;
  }

  .list.list-recommend ul li:first-child:before {
    display: none;
  }

  .list.list-recommend ul li .figure,
  .list.list-recommend ul li .box {
    width: 50%;
    display: table-cell;
    vertical-align: top;
  }

  .list.list-recommend ul li .box {
    padding: 0 10px;
  }

  .list.list-recommend ul li .info {
    padding: 0;
  }

  .list.list-recommend ul li .info h3 {
    font-size: 16px;
    height: 4.2em;
  }

  .list.list-recommend .video .figure > span:before {
    width: 33px;
    height: 32px;
  }
}

/********************
*
* list-video-main
*
********************/

.list.list-video-main {
  float: left;
  width: 650px;
  margin-right: 20px;
}

.list.list-video-main ul li {
  margin-bottom: 0;
}

.list.list-video-main ul li .figure:before {
  padding-top: 56.25%;
}

.list.list-video-main ul li .list-video-main-player-wrap {
  margin: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.list.list-video-main ul li .info .time {
  margin-right: 5px;
}

.list.list-video-main ul li .info {
  min-height: 107px;
  max-height: 107px;
}

.list.list-video-main ul li .info h3 {
  font-size: 26px;
  max-height: 2.8em;
  height: auto;
}

@media screen and (max-width:1010px) {
  .list.list-video-main {
    width: 100%;
    margin-right: 0;
  }

  .list.list-video-main ul li .info .time {
    padding-left: 18px;
    margin-right: 0;
  }

  .list.list-video-main ul li .info .time:before {
    width: 12px;
    height: 12px;
    left: 1px;
  }

  .list.list-video-main ul li .info .visits {
    left: 10px;
    padding-left: 18px;
  }

  .list.list-video-main ul li .info .visits:before {
    width: 14px;
    height: 8px;
  }
}

@media screen and (max-width:767px) {
  .list.list-video-main ul li .info {
    min-height: inherit;
    max-height: inherit;
  }
}

@media screen and (max-width:568px) {
  .list.list-video-main ul li .info h3 {
    font-size: 16px;
  }

  .list.list-video-main ul li .info .time {
    white-space: nowrap;
    left: 0;
  }

  .list.list-video-main ul li .info .visits {
    display: block;
    margin-top: 3px;
    white-space: nowrap;
    left: 0;
  }
}

/********************
*
* column-video-side
*
********************/

.column-video-side {
  float: left;
  width: 300px;
  max-width: 100%;
}

.column-video-side-select {

}

.column-video-side-select > span {
  display: block;
  float: left;
  width: 150px;
  max-width: 50%;
  height: 40px;
  line-height: 38px;
  text-align: center;
  background: #cfd6db;
  font-size: 18px;
  letter-spacing: 2px;
  border-top: 3px solid #cfd6db;
  cursor: pointer;
  position: relative;
}

.column-video-side-select > span.on {
  background: #ffffff;
  border-top: 3px solid #009deb;
}

.column-video-side-select > span.on:before,
.column-video-side-select > span.on:after {
  content: "";
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  background: #e7e7e7;
}

.column-video-side-select > span.on:before {
  left: 0;
  box-shadow: -1px 0px 0px rgba(218, 218, 218, 0.3);
}

.column-video-side-select > span.on:after {
  right: 0;
  box-shadow: 1px 0px 0px rgba(218, 218, 218, 0.3);
}

.column-video-side-box {
  height: 434px;
  background: #ffffff;
  border-left: 1px solid #e7e7e7;
  border-right: 1px solid #e7e7e7;
  border-bottom: 1px solid #e7e7e7;
  box-shadow: 0px 2px 2px rgba(218, 218, 218, 0.3);
  position: relative;
}

.column-video-side-item {
  visibility: hidden;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.column-video-side-item.on {
  visibility: visible;
}

.column-video-side-item .scroller {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}

@media screen and (max-width:1010px) {
  .column-video-side {
    width: 100%;
  }
  .column-video-side-box {
    height: auto;
  }
}

@media screen and (max-width:568px) {
  .column-video-side-select > span {
    font-size: 16px;
  }
}

/********************
*
* list-page
*
********************/

.list-page-wrap {
  position: relative;
  padding: 20px 0 16px 0;
  background: #ffffff;
  border-bottom: 1px solid #e7e7e7;
  border-left: 1px solid #e7e7e7;
  border-right: 1px solid #e7e7e7;
  box-shadow: 0px 2px 2px rgba(218, 218, 218, 0.3);
}

.list-page-wrap:before {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  background: #e9edef;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 20px;
}

.list-page {
  position: relative;
  text-align: center;
}

.list-page ul {
  margin: 0;
  list-style: none;
  display: inline-block;
  border-radius: 3px;
}

.list-page ul>li {
  display: inline-block;
  margin: 0 3px;
  max-width: 50px;
  min-width: 50px;
  height: 50px;
}

.list-page ul>li.navi {
  max-width: none;
}

.list-page ul>li>a, 
.list-page ul>li>span {
  float: left;
  background: #009deb;
  width: 100%;
  height: 100%;
  border-radius: 5px;
  border: 0px solid #009deb;
  text-align: center;
  font-size: 18px;
  line-height: 50px;
  color: #ffffff;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.list-page ul>li.navi>a, 
.list-page ul>li.navi>span {
  padding: 0 40px;
}

.list-page ul>li>a:hover, 
.list-page ul>li>a:focus, 
.list-page ul>.on>a, 
.list-page ul>.on>span {
  background: #23262d;
  border: 0px solid #23262d;
}

@media screen and (max-width:767px) {
  .list-page-wrap {
    background: none;
    border: none;
    box-shadow: none;
  }
}

/********************
*
* load-more
*
********************/

.load-more-wrap {
  position: relative;
  padding: 20px 0 16px 0;
  background: #ffffff;
  border-bottom: 1px solid #e7e7e7;
  border-left: 1px solid #e7e7e7;
  border-right: 1px solid #e7e7e7;
  box-shadow: 0px 2px 2px rgba(218, 218, 218, 0.3);
}

.load-more-wrap:before {
  content: "";
  display: block;
  position: absolute;
  height: 1px;
  background: #e9edef;
  left: 0;
  right: 0;
  top: 0;
  margin: 0 20px;
}

.load-more-wrap.video-sec:before {
  display: none;
}

.load-more {
  position: relative;
  text-align: center;
}

.load-more > span {
  cursor: pointer;
  background: #009deb;
  display: inline-block;
  min-width: 50px;
  height: 50px;
  margin: 0 3px 5px 3px;
  padding: 0 40px;
  border-radius: 5px;
  border: 0px solid #009deb;
  text-align: center;
  font-size: 18px;
  line-height: 50px;
  color: #ffffff;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.load-more > span:hover {
  background: #23262d;
  border: 0px solid #23262d;
}

@media screen and (max-width:767px) {
  .load-more-wrap {
    background: none;
    border: none;
    box-shadow: none;
  }

  .load-more > span {
    margin-bottom: 15px;
  }
}

/********************
*
* side-title
*
********************/

.side-title > span {
  font-size: 18px;
  line-height: 33px;
  color: #ffffff;
  position: relative;
  display: block;
  height: 33px;
  min-width: 150px;
  text-align: center;
  background: #009deb;
  padding: 0 15px;
}

.side-title:after {
  content: "";
  display: block;
  flex: 1;
  border-top: 5px solid #009deb;
  background: url('data:image/gif;base64,R0lGODlhBAADAJEAAAAAAP///87Ozv///yH5BAEAAAMALAAAAAAEAAMAAAIEjIKpBQA7');
  margin-right: 1px;
}

.side-title.related > span {
  background: #851e6c;
}

.side-title.related:after {
  border-color: #851e6c;
}

/********************
*
* article-wrap
*
********************/

.article-wrap {

}

.article-wrap > article {
  background: #ffffff;
  padding: 20px 20px 1em 20px;
  border: 1px solid #e7e7e7;
  box-shadow: 0px 2px 2px rgba(218, 218, 218, 0.3);
  overflow: hidden;
}

.article-header {
  margin: 0;
}

.article-header .category {
  margin-bottom: 5px;
}

.article-header .category > span {
  color: #ffffff;
  font-size: 15px;
  min-width: 60px;
  display: inline-block;
  height: 20px;
  line-height: 20px;
  text-align: center;
  padding: 0 15px;
}

.article-header h2 {
  font-size: 26px;
  line-height: 1.2em;
  margin: 0 0 5px 0;
  font-weight: 400;
}

.article-info {
  margin: 0 0 5px 0;
}

.article-stats {
  float: left;
  margin: 0 20px 10px 0;
}

.article-stats .time {
  color: #777777;
  font-size: 13px;
  line-height: 1em;
  margin-right: 10px;
  position: relative;
}

.article-stats .visits {
  color: #777777;
  font-size: 13px;
  line-height: 1em;
  position: relative;
}

@media screen and (max-width:969px) {
  .article-stats {
    float: inherit;
  }
}

@media screen and (max-width:767px) {
  .article-stats .time {
    padding-left: 15px;
  }

  .article-stats .time:before {
    width: 12px;
    height: 12px;
  }

  .article-stats .visits {
    padding-left: 17px;
  }

  .article-stats .visits:before {
    width: 14px;
    height: 8px;
  }
}

.article-share {
  margin: 0;
}

.article-share ul {
  float: right;
}

.article-share li {
  float: left;
  width: 100px;
  margin-right: 2px;
  margin-bottom: 2px;
  background-image: url(../images/social.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}

.article-share li:before {
  content: "";
  display: block;
  padding-top: 34%;
}

.article-share li > a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.article-share li.share {
  position: relative;
  overflow: hidden;
}

.article-share li.fb { background-position: right 0px; }
.article-share li.tt { background-position: right 33%; }
.article-share li.gp { background-position: right 67%; }
.article-share li.ln { background-position: right 100%; }

@media screen and (max-width: 528px) {
  .article-share ul {
    float: none;
  }

  .article-share li {
    width: calc(25% - 2px);
  }
}

.article-content {
  font-size: 18px;
}

.article-content p {
  font-size: 18px;
  line-height: 1.5em;
  margin: 0 0 1em 0;
  word-wrap: break-word;
  word-break: normal;
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  font-size: 18px;
  line-height: 1.5em;
}

.article-content a {
  color: #009deb;
}

.article-content figure {
  font-size: 18px;
  width: 100%;
  margin: 0 0 1em 0;
}

.article-content figure .strut {
  position: relative;
}

.article-content figure img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.article-content figure figcaption {
  color: #595959;
  margin: 0;
  padding: 5px 0;
  position: relative;
  font-size: 15px;
  font-weight: 400;
}

.article-content figure figcaption:after {
  content: "";
  position: absolute;
  width: calc(100% - 10px);
  height: 1px;
  background: #dfdfdf;
  bottom: 0;
  left: 5px;
}

.article-content iframe[src*="youtube"],
.article-content iframe[src*="imgur"] {
  margin: 0 auto !important;
  display: block;
  max-width: 100%;
}

.article-comments {
  background: #ffffff;
  padding: 20px;
  border: 1px solid #e7e7e7;
  box-shadow: 0px 2px 2px rgba(218, 218, 218, 0.3);
}

.article-recommend {
  background: #ffffff;
  padding: 20px;
  border: 1px solid #e7e7e7;
  box-shadow: 0px 2px 2px rgba(218, 218, 218, 0.3);
}

.recommend-title {
  margin-bottom: 20px;
}

@media screen and (max-width:413px) {
  .article-recommend {
    padding: 0;
  }

  .recommend-title {
    padding: 10px 10px 0 10px;
    margin-bottom: 10px;
  }
}

@media screen and (max-width:767px) {
  .article-wrap > article {
    padding: 10px 10px 10px 10px;
  }

  .article-comments {
    padding: 10px;
  }
}

@media screen and (max-width:568px) {
  .article-header .category > span {
    font-size: 12px;
    min-width: 40px;
    height: 16px;
    line-height: 16px;
    padding: 0 5px;
  }

  .article-header h2 {
    font-size: 24px;
  }

  .article-content p {
    font-size: 20px;
  }

  .article-content figure figcaption {
    font-size: 16px;
  }

  .article-stats .time {
    font-size: 12px;
  }

  .article-stats .visits {
    font-size: 12px;
  }
}

/********************
*
* video-player-wrap
*
********************/

.video-player-wrap {
  position: relative;
  margin: 0 -20px 20px -20px;
}

.video-player-wrap:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56%;
}

.video-player-wrap > iframe {
  position: absolute !important;
  top: 0;
  left: 0;
}

.video-player {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (max-width:767px) {
  .video-player-wrap {
    margin: 0 -10px 20px -10px;
  }
}

/********************
*
* article-inread-ad
*
********************/

.article-inread-ad {
  margin: 10px auto;
  text-align: center;
}

/********************
*
* article-last-ad
*
********************/

.article-last-ad {

}

.article-last-ad > div {
  margin-bottom: 10px;
  width: 50%;
  text-align: center;
  vertical-align: top;
}

.article-last-ad > div:nth-child(odd) {
  float: left;
}

.article-last-ad > div:nth-child(even) {
  float: right;
}


@media screen and (max-width: 666px) , screen and (min-width: 768px) and (max-width: 1010px) {
  .article-last-ad > div {
    margin-left: -10px;
    margin-right: -10px;
    width: calc(100% + 20px);
  }
}
@media screen and (min-width: 768px) and (max-width: 1010px) {
  .tablet-full .article-last-ad > div {
    margin-left: initial;
    margin-right: initial;
    width: 50%;
  }
}

/********************
*
* article-navi
*
********************/

.article-navi {
  margin-bottom: 10px;
  padding: 0 1px;
}

.article-navi .primary {
  position: relative;
}

.article-navi-btn {
  width: 100%;
  max-width: 315px;
  background-color: #23262d;
  background-repeat: no-repeat;
  position: relative;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
  margin-bottom: 5px;
  cursor: pointer;
}

.article-navi-btn:hover {
  background-color: #009deb;
}

.article-navi-btn a {
  color: #ffffff;
}

.article-navi-btn span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 16px;
  line-height: 50px;
}

@media screen and (max-width:767px) {
  .article-navi-btn span {
    line-height: 1.4em;
    height: 2.8em;
    white-space: inherit;
    text-overflow: inherit;
    margin: 10px 0;
  }
}

.article-navi-btn:hover a {
  color: #ffffff;
}

.article-navi-btn.prev {
  float: left;
}

.article-navi-btn.prev > a {
  padding-left: 40px;
  padding-right: 20px;
}

.article-navi-btn.next {
  float:right;
}

.article-navi-btn.next > a {
  padding-left: 20px;
  padding-right: 40px;
}

.article-navi-btn:before,
.article-navi-btn:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 4px;
  border-radius: 2px;
  background: #009deb;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.article-navi-btn:hover:before,
.article-navi-btn:hover:after {
  background: #ffffff;
}

.article-navi-btn.prev:before, 
.article-navi-btn.prev:after {
  left: 16px;
}

.article-navi-btn.prev:before {
  margin-top: -2px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.article-navi-btn.prev:after {
  margin-top: 0px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.article-navi-btn.next:before {
  margin-top: 0px;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.article-navi-btn.next:before, 
.article-navi-btn.next:after {
  right: 0px;
}

.article-navi-btn.next:after {
  margin-top: -2px;
  -webkit-transform: rotate(-225deg);
  -ms-transform: rotate(-225deg);
  transform: rotate(-225deg);
}

/********************
*
* search-title
*
********************/

.search-title-wrap {
  background: #cfd6db;
  height: 40px;
  padding-left: 20px;
  overflow: hidden;
}

.search-title-wrap .search-title {
  color: #000000;
  font-size: 18px;
  font-weight: 700;
  line-height: 40px;
  margin-right: 5px;
  white-space: nowrap;
}

.search-title-wrap .search-content {
  color: #009deb;
  font-size: 18px;
  font-weight: 700;
  line-height: 40px;
  white-space: nowrap;
}

@media screen and (max-width:767px) {
  .search-title-wrap {
    padding-left: 10px;
    height: 30px;
  }
  .search-title-wrap .search-title {
    font-size: 16px;
    line-height: 30px;
  }
  .search-title-wrap .search-content {
    font-size: 16px;
    line-height: 30px;
  }
}

/********************
*
* normal-title
*
********************/

.normal-title {
  display: block;
  font-size: 18px;
  line-height: 1em;
  position: relative;
  padding-bottom: 12px;
}

.normal-title:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 5px;
  bottom: 0;
  left: 0;
  background: #15a9e9;
  background: -moz-linear-gradient(left, #15a9e9 0%, #15a9e9 33%, #851e6c 33%, #851e6c 66%, #fbbb00 66%, #fbbb00 100%, #fbbb00 100%);
  background: -webkit-linear-gradient(left, #15a9e9 0%,#15a9e9 33%,#851e6c 33%,#851e6c 66%,#fbbb00 66%,#fbbb00 100%,#fbbb00 100%);
  background: linear-gradient(to right, #15a9e9 0%,#15a9e9 33%,#851e6c 33%,#851e6c 66%,#fbbb00 66%,#fbbb00 100%,#fbbb00 100%);
}

/********************
*
* ireport
*
********************/

.ireport-wrap {
  background: #ffffff;
  border: 1px solid #e7e7e7;
  box-shadow: 0px 2px 2px rgba(218, 218, 218, 0.3);
}

.ireport-title {
  padding: 20px 20px 0 20px;
}

.ireport-content {
  padding: 10px 0;
}

.ireport-readme {
  background: #f3f4f5;
  border: 1px solid #c9c9c9;
  margin: 20px;
  padding: 20px 20px 10px 20px;
}

.ireport-readme > p {
  font-size: 15px;
  line-height: 1.4em;
  margin: 0 0 0.6em 0;
}

@media screen and (max-width:568px) {
  .ireport-title-wrap {
    padding: 10px 5px 0 5px;
  }

  .ireport-readme {
    margin: 10px;
    padding: 10px 10px 5px 10px;
  }
}

/********************
*
* list-video-channel-title
*
********************/

.list-video-channel-title {
  position: relative;
}

.list-video-channel-title > span {
  display: block;
  font-size: 18px;
  line-height: 25px;
  padding-left: 7px;
}

.list-video-channel-title .more {
  position: absolute;
  top: 0;
  right: 0;
  border: 1px solid #c7c7c7;
  padding: 0 10px;
  border-radius: 4px;
}

.list-video-channel-title .more > a > span {
  display: block;
  color: #333333;
  padding-right: 15px;
  -webkit-transition: color 300ms;
  -moz-transition: color 300ms;
  -ms-transition: color 300ms;
  -o-transition: color 300ms;
  transition: color 300ms;
}

.list-video-channel-title .more > a > span:hover {
  color: #009deb;
}

.list-video-channel-title .more > a > span:before,
.list-video-channel-title .more > a > span:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: #333333;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.list-video-channel-title .more > a > span:hover:before,
.list-video-channel-title .more > a > span:hover:after {
  background: #009deb;
}

.list-video-channel-title .more > a > span:before {
  margin-top: -1px;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.list-video-channel-title .more > a > span:before, 
.list-video-channel-title .more > a > span:after {
  right: 2px;
}

.list-video-channel-title .more > a > span:after {
  margin-top: -2px;
  -webkit-transform: rotate(-225deg);
  -ms-transform: rotate(-225deg);
  transform: rotate(-225deg);
}


/********************
*
* video-channel-navi-btn
*
********************/

.video-channel-navi-btn {
  width: 38px;
  height: 38px;
  background: rgba(13,162,236,0.9);
  border-radius: 19px;
  cursor: pointer;
  position: absolute;
  top: 50%;
  margin-top: -35px;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.video-channel-navi-btn:hover {
  background: rgba(35,38,45,0.9);
}

.video-channel-navi-btn.prev {
  left: 0;
}

.video-channel-navi-btn.next {
  right: 0;
}

.video-channel-navi-btn:before,
.video-channel-navi-btn:after {
  content: "";
  position: absolute;
  top: 50%;
  width: 14px;
  height: 4px;
  border-radius: 2px;
  background: #ffffff;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.video-channel-navi-btn:hover:before,
.video-channel-navi-btn:hover:after {
  background: #009deb;
}

.video-channel-navi-btn.prev:before, 
.video-channel-navi-btn.prev:after {
  left: 14px;
}

.video-channel-navi-btn.prev:before {
  margin-top: -3px;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.video-channel-navi-btn.prev:after {
  margin-top: 0px;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.video-channel-navi-btn.next:before {
  margin-top: 0px;
  -webkit-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  transform: rotate(-135deg);
}

.video-channel-navi-btn.next:before, 
.video-channel-navi-btn.next:after {
  right: -1px;
}

.video-channel-navi-btn.next:after {
  margin-top: -3px;
  -webkit-transform: rotate(-225deg);
  -ms-transform: rotate(-225deg);
  transform: rotate(-225deg);
}

@media screen and (max-width:568px) {
  .video-channel-navi-btn.prev {
    -webkit-transform: translateX(-5px);
    -moz-transform: translateX(-5px);
    transform: translateX(-5px);
  }

  .video-channel-navi-btn.next {
    -webkit-transform: translateX(5px);
    -moz-transform: translateX(5px);
    transform: translateX(5px);
  }
}

.mobile-list-video-channel-default {
  display: none;
}

.mobile-list-video-channel-default.on {
  display: block;
}

/********************
*
* list-video-channel-select
*
********************/

.list-video-channel-select-wrap {

}

.list-video-channel-select-bar {
  height: 40px;
  background: #cfd6db;
  border-left: 1px solid #e7e7e7;
  border-right: 1px solid #e7e7e7;
  border-top: 1px solid #e7e7e7;
  box-shadow: 0px 2px 2px rgba(218, 218, 218, 0.3);
  position: relative;
}

.list-video-channel-select {
  width: 300px;
  height: 40px;
  position: absolute;
  right: 0;
  top: 0;
  background: #009deb;
  cursor: pointer;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.list-video-channel-select:hover {
  background: #515766;
}

.list-video-channel-select-text {
  float: left;
  display: block;
  width: 260px;
  height: 40px;
  font-size: 18px;
  line-height: 40px;
  padding: 0 15px;
  color: #ffffff;
  border-right: 1px solid #e7e7e7;
}

.list-video-channel-select:before,
.list-video-channel-select:after {
  content: "";
  position: absolute;
  top: 50%;
  margin-top: 3px;
  width: 13px;
  height: 3px;
  border-radius: 1px;
  background: #ffffff;
  -webkit-transform-origin: 0 50%;
  -moz-transform-origin: 0 50%;
  -ms-transform-origin: 0 50%;
  -o-transform-origin: 0 50%;
  transform-origin: 0 50%;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.list-video-channel-select:hover:before,
.list-video-channel-select:hover:after {

}

.list-video-channel-select:before {
  -webkit-transform: rotate(-129deg);
  -ms-transform: rotate(-129deg);
  transform: rotate(-129deg);
}

.list-video-channel-select:before, 
.list-video-channel-select:after {
  right: 7px;
}

.list-video-channel-select:after {
  margin-right: 1px;
  -webkit-transform: rotate(-51deg);
  -ms-transform: rotate(-51deg);
  transform: rotate(-51deg);
}

@media screen and (max-width:1010px) {
  .list-video-channel-select-bar {
    background: none;
    border: none;
    box-shadow: none;
    margin-bottom: 10px;
  }
}

/********************
*
* sec-nav-video
*
********************/

.sec-nav-video {
  width: 300px;
  background: #23262d;
  position: absolute;
  top: 39px;
  right: 0;
  z-index: 1;
  display: none;
}

.sec-nav-video.on {
  display: block;
}

.sec-nav-video > ul {
  width: 100%;
  max-width: 970px;
  margin: 0 auto;
  background: #23262d;
}

.sec-nav-video > ul > li {
  float: left;
  width: 50%;
  height: 100%;
  border-right: 1px solid #404756;
  border-bottom: 1px solid #404756;
  padding: 0 10px;
}

.sec-nav-video > ul > li:nth-child(2n) {
  border-right: none;
}

.sec-nav-video > ul > li > span,
.sec-nav-video > ul > li > a > span {
  display: block;
  white-space: nowrap;
  line-height: 20px;
  font-size: 17px;
  color: #ffffff;
  text-align: left;
  padding-left: 8px;
  margin: 10px 0;
  -webkit-transition: background 300ms;
  -moz-transition: background 300ms;
  -ms-transition: background 300ms;
  -o-transition: background 300ms;
  transition: background 300ms;
}

.sec-nav-video > ul > li:hover > span,
.sec-nav-video > ul > li:hover > a > span {
  background: #515766;
}

@media screen and (max-width:1010px) {
  .sec-nav-video {
    display: block;
    position: relative;
    top: inherit;
    right: inherit;
    width: 100%;
    overflow: hidden;
    background: none;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
  }

  .sec-nav-video > ul {
    width: auto;
    max-width: none;
    margin: 0;
    white-space: nowrap;
    background: none;
  }

  .sec-nav-video > ul > li {
    padding: 0 15px;
    float: none;
    width: auto;
    display: inline-block;
    border-radius: 34px;
    background: #23262d;
  }

  .sec-nav-video > ul > li.on {
    border: 2px solid #009deb;
  }

  .sec-nav-video > ul > li > span,
  .sec-nav-video > ul > li > a > span {
    line-height: 1em;
  }

  .sec-nav-video > ul > li.on > span, 
  .sec-nav-video > ul > li.on > a > span {
    background: none;
  }

  .sec-nav-video > ul > li > span.color-all,
  .sec-nav-video > ul > li > a > span.color-all {
    padding-left: 0;
  }
}

@media screen and (max-width:568px) {
  .sec-nav-video > ul > li > span,
  .sec-nav-video > ul > li > a > span {
    font-size: 16px;
  }
}

/********************
*
* rule, disclaimer, privacy, common pages
*
********************/

.article-content.common {
  font-size: 18px;
  margin-bottom: 1em;
}

.article-content.common p {
  font-size: 18px;
}

.article-content .itr {
  color: #3e7095;
  font-weight: 700;
}

.article-content ol {
  padding: 0;
  margin: 0 0 15px 20px;
}

.article-content ol ol {
  list-style-type: upper-roman;
}

.article-content .mainlist {
  list-style: decimal;
  font-size: 18px;
}

.article-content .mainli {
  margin-bottom: 2em;
}

.article-content .upperalpha {
  list-style-type: upper-alpha;
}

.article-content .loweralpha {
  list-style-type: lower-alpha;
}

.lowerlatin {
  list-style-type: lower-latin;
}