@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100|Permanent+Marker|Raleway:900');

body{
  background: #fff!important;
}
*{
  font-size: 1.0625rem;
  font-family: sans-serif,'Noto Sans TC';
}
nav.class{
  background: #fff;
  border-bottom: none!important;
  box-shadow: 0 3px 6px 0 rgba(0,0,0,.15), 0 1px 3px 0 rgba(0,0,0,.1);
}
.topnav.custom {
  box-shadow: 0px 0px 15px 2px rgba(0,0,0,.1);
}
.topnav #indexmenu .logo a.img {
    background-image: url(../img/index/logo_black.png);
}
nav.class #indexmenu ul.menu > li > a {
    color: #000;
}
nav.class .backindex{
  background: #ce2029;
  margin-top: -0.5rem;
  margin-bottom: -0.5rem;
  padding-top: 0.5rem;
  margin-right: 50px;
}
nav.class #indexmenu ul.menu > li.backindex > a:hover, a:active, a:focus{
  color: #fff !important;
}
.issuu{
  height: 510px;
  background: #000;
}
.issuu .carousel-item{
  height: 510px;
  line-height: 510px;
  text-align: center;
}
.issuu .carousel-item img{
  min-height: 300px;
  max-height: 450px;
  width: auto;
  max-width: auto;
}
.gallery-popup{position: relative; display: block; width: 100%; height: 100%}
.class_page .carousel-indicators li {
    width: 20px;
    height: 10px;
    border-radius: 15px;
    cursor: pointer;
    margin-left: 10px;
    margin-right: 10px;
}
.class_page a.p-2{
  display: inline-block;
  margin-top: 15px;
  padding: .1rem 1rem !important;
}
.header-title.bg-left-down.gray::before {
z-index: 0;
}
.header-title.bg-left-down.gray img {
  position: relative;
  z-index: 1;
}
.topnav {
  border-bottom: none;
}

.class-title {
  position: relative;
  height: 120px;
  line-height: 150px;
  text-align: center;
}
.class-title span{
  position: absolute;
  left: 0;
  right: 0;
  font-size: 4rem;
  opacity: .05;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 10px;
  padding-left: 25px;
}
.class-title h2{
  display: inline-block;
  position: relative;
  height: 150px;
  line-height: 150px;
  font-size: 1.25rem;
  font-weight: bold;
}
.class-title h2::before,.class-title h2::after{
  position: absolute;
  font-size: .75rem;
  color: #ce2029;
}
.class-title h2::before{
  content: "▸";
  margin-left: -20px;
}
.class-title h2::after{
  content: "◂";
  margin-left: 8px;
}
.class-title .btn.add {
  position: absolute;
  right: 5px;
  top: 57px;
  border:solid 2px #f0f0f0;
  background: #f0f0f0;
}
.class-title .btn.add:hover {
  border:solid 2px #ce2029;
  background: #fff;
}
.latest{
  padding-left: 0;
  padding-right: 0;
}

.software{
  padding-top: 50px;
}
.bookbox .leftpage,.bookbox .rightpage{
  overflow: hidden;
}
.bookbox .row {
  margin-right: 15px;
}

.fb-plugin {
    margin-top: 0;
}
.topnav #indexmenu ul.menu > li.backindex > a {
    color: #fff !important;
}
.class-hot{
  max-width: 1440px;
}
.class-hot .hot .item{
  background: #f0f0f0;
  padding: 15px;
  margin: 5px;
  min-height: 200px;
  display:flex;
  align-items: stretch;
}
.class-hot .hot .item ul{
    width: 100%;
    padding-top: 0;
}
.class-hot .hot .item .text h4{
  font-size: 1.25rem;
  color: #ce2029;
  letter-spacing: 1px;
}
.class-hot .hot .item .text p{
  width: 100%;
  border-top: 1px dotted rgba(200,200,200,.5);
  padding-top:10px;
  font-size: 1rem;
  color: #666 !important;
}
.class-hot .hot .item .text span{
  font-size: .875rem;
  float: right;
  border-radius: 50px;
  border:1px solid #ddd;
  background: #ddd;
}
.class-hot .hot a.item:hover .text  span{
  border:1px solid #ce2029;
  background: #fff;
  color: #ce2029;
}
.class-hot .ellipsis .row3 {
    -webkit-line-clamp: 2;
    line-height: 25px;
    height: 60px;
}
.img-book-size figure {
  border:1px solid #ccc;
}
.class-hot .hot a:hover{
  background:#ddd;
}
.class_page{
}

.class_page div[class*='col']{

}
.class_page section{
  padding-top: 100px;
  padding-bottom: 100px;
}
.class_page.mt-70 section:nth-child(odd){
  background:#f0f0f0;
}
.class_page .txt-box{
  margin-top: 50px;
  padding-left: 70px;
}
.class_page .txt-box h1{
color: #ce2029;
}
.class_page .txt-box h5{
  line-height: 150%;
  font-size: 1.0625rem;
}
.class_page section h1:before{
  content: url("../img/icon/no-0.png");
  position: absolute;
  left: 0px;
  top: -6px;
  font-size: 6rem;
}
.class_page section:nth-child(1) h1:before{  content: url("../img/icon/no-0.png");}
.class_page section:nth-child(2) h1:before{  content: url("../img/icon/no-1.png");}
.class_page section:nth-child(3) h1:before{  content: url("../img/icon/no-2.png");}
.class_page section:nth-child(4) h1:before{  content: url("../img/icon/no-3.png");}
.class_page section:nth-child(5) h1:before{  content: url("../img/icon/no-4.png");}
.class_page section:nth-child(6) h1:before{  content: url("../img/icon/no-5.png");}
.class_page section:nth-child(7) h1:before{  content: url("../img/icon/no-6.png");}
.class_page section:nth-child(8) h1:before{  content: url("../img/icon/no-7.png");}
.class_page section:nth-child(9) h1:before{  content: url("../img/icon/no-8.png");}
.class_page section:nth-child(10) h1:before{  content: url("../img/icon/no-9.png");}
.class_page .txt-box hr{
  opacity: 0;
  margin-top: 15px;
  margin-bottom: 15px;
}
.class_page .txt-box p{
  max-width: 500px;
}
.class_page .txt-box.lg p{
  max-width: 800px;
}
.class_page section .row .col-md-6:last-child::before{
  content: "";
  display: block;
  height: 50px;
}
@media (max-width: 1300px) {
.topnav span {
    display: none;
}
.bookbox .row {
  margin-right: -15px;
}
}
@media (max-width: 992px) {
.topnav #indexmenu ul.menu > li > a {
    margin: auto 5px;
}
nav.class .backindex {
    margin-right: 0px;
}
.top .slick-slide {
    padding-top: 0;
}
}
@media (max-width: 768px) {
.header-title.bg-left-down.blue::before {
    background: linear-gradient(4deg, #4664a5 0%,#4664a5 50.555%,#fff 51%,#fff 100%);
}
.class.bg-blue{
  padding-top: 30px !important;
  background: #f0f0f0;
}
.class-hot{
  padding-top: 80px;
}
.class .main {
    padding-top: 0;
}

.bookbox .flag {
    color: #4664a5;
    background: none!important;
    border-bottom: none;
}
.fbbox {
  border-radius: 0px 0px 0px 0px !important;
}
.fbbox.class-group {
 border-radius: 0;
 margin-bottom: 0;
 border: 0px;
 margin-left: 0;
}
.fbbox.class-group h2 {
    font-size: 3rem;
}
.fbbox.class-group h4 {
    font-size: 1rem;
    text-align: left;
}
.fbbox.class-group strong {
    font-size: 1.5rem;
    display: block;
    line-height: 200%;
}
.bookbox .leftpage, .bookbox .rightpage{
    border-radius: 0 !important;
    padding-top: 100px;
    box-shadow:none;
}
.bookbox .rightpage{
    padding-top: 30px;
}
.main-slider.top {
    margin-bottom: 0px !important;
    border-bottom: 1px solid #ddd;
}
.slick-initialized .slick-slide img {
    width: 100%;
    max-width: 100%;
    height: auto;
}

.class-title {
    height: 100px;
    line-height: 100px;
}
.class-title h2 {
    height: 100px;
    line-height: 100px;
    color: #ce2029;
}
.class-title .btn.add {
    top: 30px;
}
.class-title span {
    opacity: .04;
    font-size: 3rem;
}
.class-hot .responsive.hot a:hover {
    background: #fff;
}
.class-hot .responsive.hot .item .text span {
  width: 100%;
}
.class-hot .hot .item {
    background: #fff;
    border-bottom: 1px solid #ddd;
}
.class-hot .hot .item .text h4 {
    border-bottom: none;
    height: 62px;
}
.software{
  padding-top: 15px;
}
.software a {
    border-bottom: 1px solid #ddd;
    padding-top: 20px;
}
.software .wow:last-child a{
    border-bottom: none;
}

}
@media (max-width: 480px) {
.main-slider.top{
  border-bottom: 1px solid #ddd;
}
.responsive .slick-next {
    right: -5px;
}
.responsive .slick-prev {
    left: -5px;
}
.header-title.bg-left-down.blue::before,.bg-blue {
  background: none!important;
}
.header-title.bg-left-top.blue{
  
  background: #f0f0f0;
}
.header-title.bg-left-top.blue::before {
  background: #fff;
}
.header-title.bg-left-top.blue img {
  padding-top: 30px;
  padding-bottom: 20px;
}
.header-title .text-right{
  text-align: center!important;
}
.class-title span {
  letter-spacing: 1rem;
    padding-left: 0;
}
.class-title .btn.add i{
  font-size: 13px;
  margin-left: 5px;
  margin-right: 5px;
}
.class-title .btn.add{
  background: none;
  padding-right: 10px;
  border-color: #fff;
}
.class-title h2::before, .class-title h2::after {
    font-size: .4rem;
}
.class-hot .responsive.hot .item {
  background: #fff;
    margin: 0px;
    border-bottom: 1px solid #ddd;
}
.class_page .txt-box {
    margin-top: 70px;
    padding-left: 15px;
    padding-right: 15px;
}
.fbbox.class-group h4 {
    text-align: center;
}
.fbbox.class-group.line {
    text-align: center;
}

}