html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    /*font-family: "DINLight", Arial, Helvetica, sans-serif;*/
    font-family: "Noto Sans TC", Arial, sans-serif !important;
    min-width: 1280px;
    line-height: 100%;
}

a {
    transition: all 0.1s ease 0s;
}

a:focus {
    outline: none;
}

a:hover {
    opacity: 0.9;
}

.clear {
    zoom: 1;
    clear: both;
    margin: 0;
    padding: 0;
    line-height: 0;
    height: 0;
}

.clear:after {
    content: '';
    display: block;
    clear: both;
    visibility: hidden;
    height: 0;
}

.main-area {
    width: 1500px;
    margin: auto;
    color: #333;
    font-size: 12px;
}

.main-area .inner-half-part {
    width: 44%;
    float: left;
    padding: 0 3%;
    height: 440px;
    position: relative;
}

.main-area .inner-half-part.left-text {
    padding: 0 0 0 6%;
}

.main-area .inner-half-part .title {
    color: #7396c9;
    font-size: 27px;
    line-height: 100%;
}

.main-area .inner-half-part .break-line {
    width: 70px;
    background-color: #f16c5d;
    height: 2px;
    margin: 20px 0;
}

.main-area .inner-half-part .description {
    font-size: 17px;
    margin-bottom: 10px;
}

.main-area .inner-half-part ul.point {
    font-size: 17px;
}

.main-area .inner-half-part ul.point li {
    font-size: 17px;
    margin-top: 10px;
}

.main-area .inner-half-part .features-container-2 ul.point {
    font-size: 17px;
}

.main-area .inner-half-part .features-container-2 ul.point li {
    font-size: 17px;
    margin-top: 7px;
}

.lang-container {
    float: right;
    line-height: 100px;
    font-size: 12px;
    margin-left: 20px;
}

.lang-container a {
    color: #333;
    text-decoration: none;
}

.scroll-down {
    -webkit-box-shadow: 0px 1px 1px -1px rgba(235, 235, 235, 0.9);
    -moz-box-shadow: 0px 1px 1px -1px rgba(235, 235, 235, 0.9);
    box-shadow: 0px 1px 1px -1px rgba(235, 235, 235, 0.9);
}

.lang-container a.active {
    color: #10567b;
}

.scroll-down a {
    color: #333;
}

.scroll-down .normal-text {
    color: #333;
}

.scroll-down .nav li a.nav-blue-text {
    color: #7396c9;
}

.scroll-down .nav li a.nav-orange-text {
    color: #f16c5d;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1999;
    width: 100%;
    line-height: 36px;
    margin: auto;
    font-size: 13px;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.logo-container {
    float: left;
    height: 65px;
}

.logo {
    transition: all 0.5s;
    height: 50px;
    margin-top: 10px;
}

.top-head {
    background: #10567b;
    width: 100%;
    transition: all 0.5s;
    height: 0;
}

.mid-head {
    background: #fff;
    height: 75px;
    transition: all 0.5s;
}

.header .nav {
    float: right;
    height: 75px;
}

.header .nav li {
    float: left;
    margin-left: 5px;
    font-size: 16px;
    height: 75px;
    line-height: 75px;
}

.header .nav li a {
    font-size: 16px;
    text-decoration: none;
    padding: 20px 12px;
    color: #333;
}

.header .nav li a:hover {
    color: #f16c5d;
}

.header .nav li.search {
    margin-left: 30px;
}

.header .nav li a.search {
    color: #fff;
    background-color: #10567b;
    background-image: url(../images/hd_member_icon.png);
    background-position: 7px center, 0 0;
    background-repeat: no-repeat, repeat-x;
    border-radius: 10px;
    padding: 8px 8px 8px 40px;
}

.header .nav li a .fa-shopping-cart {
    font-size: 18px;
}

.header li.menu-parent {
    position: relative;
}

.header li.menu-parent .arrow-icon {
    margin-left: 2px;
}

.header li.menu-parent .item-icon {
    margin-right: 2px;
}

.header .inner-menu {
    height: 0;
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 75px;
    left: 0;
    transition: visibility 0s, opacity 0.1s linear;
    box-shadow: 0px 1px 5px -1px #ccc;
}


.header .inner-menu li {
    background: #fbfbfb;
    border-bottom: 1px solid #ccc;
    width: 250px;
    margin-left: 0;
    transition: all 0.5s;
    height: auto;
    line-height: 100%;
}

.header .inner-menu li a {
    color: #333;
    padding: 12px 15px;
    width: 100%;
    display: inline-block;
    font-size: 15px;
}

.header .inner-menu li a i {
    margin-right: 5px;
    width: 23px;
}

.header .inner-menu .lv3-menu {
    display: none;
}

.header .inner-menu li:hover .lv3-menu {
    width: 250px;
    display: inline-block;
    position: absolute;
    left: 180px;
    top: 0;
    text-align: left;
    line-height: normal;
    box-shadow: 0px 1px 5px -1px #ccc;
}

.header .inner-menu li:hover .lv3-menu li {
    width: 250px;
}


.header .menu-parent:hover .inner-menu {
    height: auto;
    visibility: visible;
    opacity: 1;
}

.hd-search-input {
    width: 300px;
    height: 35px;
    background: #fafafa;
    border: 0;
    border-radius: 3px;
    padding-left: 50px;
}

.search-area {
    float: left;
    position: relative;
    height: 75px;
    width: 300px;
    margin-left: 20px;
}

.search-area img {
    position: absolute;
    top: 26px;
    right: -10px;
    z-index: 1000;
    cursor: pointer;
}

.search-area .hd-search-input {
    position: absolute;
    top: 27%;
    left: 0;
    border-radius: 10px;
    font-size: 12px;
}

.registered-container .image-container {
    max-width: 100%;
}

.home-top-search {
    position: relative;
    width: 100%;
    height: 650px;
    background: url("../images/banner.jpg");
    background-size: cover;
}

.home-top-search .home-title {
    width: 100%;
    position: absolute;
    top: 30%;
    text-align: center;
    color: #fff;
}

.home-top-search .home-title h1 {
    font-size: 34px;
    font-weight: 500;
}

.home-top-search .home-title h2 {
    font-family: "Noto Sans TC", Arial, sans-serif !important;
    font-size: 22px;
    font-weight: normal;
}

.home-top-search .textbook-container {
    position: absolute;
    top: 550px;
    width: 100%;
    height: 100px;
    background: rgba(115, 150, 201, 0.75);
}

.home-top-search .normal-book-container {
    position: absolute;
    top: 550px;
    width: 100%;
    height: 100px;
    background: rgba(238, 147, 119, 0.75);
}

.home-top-search .home-input {
    height: 40px;
    width: 220px;
    padding-left: 10px;
    border-radius: 3px;
    color: #bfbfbf;
    border: 1px solid #d9d9d9;
    font-size: 18px;
}

.home-top-search input:focus {
    outline: none;
}

.home-top-search .search-label {
    color: #fff;
    font-size: 14px;
    line-height: 20px;
    margin: 18px 0 5px 0;
    display: inline-block;
}

.home-top-search .input-container {
    float: left;
    width: 220px;
    margin-left: 20px;
}

.home-top-search .textbook-container button {
    border: none;
    width: 150px;
    height: 40px;
    margin-top: 42px;
    border-radius: 5px;
    background: #10567b;
    color: #fff;
    cursor: pointer;
}

.home-top-search .share-book-container {
    border: none;
    padding: 10px 15px;
    margin-top: 42px;
    border-radius: 5px;
    background: #f16c5d;
    color: #fff;
    display: inline-block;
    cursor: pointer;
}

.home-part-container {
    height: 440px;
    padding: 25px 0 20px 0;
}

.home-part-container .main-area .inner-half-part img.features-info-image {
    max-width: 100%;
    max-height: 100%;
}

.home-intro {
    font-size: 18px;
    text-align: center;
    padding: 40px 0;
    color: #666;
}

.home-intro h1 {
    line-height: 50px;
    font-family: "Noto Sans TC", Arial, sans-serif !important;
    margin: 40px 0 20px 0;
    font-size: 20px;
    font-weight: normal;
}

.home-inner-logo {
    vertical-align: middle;
    height: 40px;
    margin: -2px 10px 0 15px;
}

.home-normal-container {
    text-align: center;
    padding: 50px 0;
}

/* ====================================  partnership ==================================== */
.partnership-area {
    width: 100%;
    background: #fff;
}

.partnership-area .partnership-area-main {
    max-width: 1100px;
    margin: 40px auto;
    text-align: center;
}

.partnership-area .partnership-area-main img {
    height: 60px;
}

.partnership-area .partnership-area-main ul li {
    display: inline-block;
    margin: 0 10px;
    vertical-align: middle;
}

.partnership-area .partnership-area-main .partnership-title {
    width: 100%;
    text-align: left;
    font-size: 12px;
    color: #999;
    margin: 0 0 15px 0;
}

/* ======================================================================== LOGIN/REGISTER ======================================================================== */

.login-container {
    background-image: url("../images/login-bg-3.jpg");
    padding: 190px 0 210px 0;
    min-height: 745px;
    margin-top: 55px;
    background-size: cover;
}

.login-inner {
    text-align: right;
}

.login-container .login-form {
    float: right;
    max-width: 400px;
    width: 100%;
    padding: 30px 20px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 2px 2px 5px #666;
}

.login-container .login-form input[type=email], .login-container .login-form input[type=text], .login-container .login-form input[type=password] {
    color: #555;
    height: 30px;
    width: 98%;
    padding-left: 2%;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    box-shadow: none;
    margin-bottom: 10px;
}

.login-container .login-form .login-label {
    font-weight: 400;
    margin: 3px 0;
    display: inline-block;
    color: #333;
    font-size: 14px;
}

.login-container .login-form .content-container {
    text-align: center;
}

.login-container .login-form .login-title-2 {
    font-size: 18px;
    color: #555;
    margin: 15px 0;
}

.login-container .login-form .login-register-switch {
    padding: 15px 0;
}

.login-container .login-form .login-register-switch a {
    font-size: 18px;
    color: #555;
    text-decoration: none;
    margin: 10px;
}

.login-container .login-form .login-register-switch a.active {
    color: #f16c5d;
    border-bottom: 2px solid #f16c5d;
}

.registered-container {
    height: 700px;
    padding-top: 100px;
}

.registered-container .image-container img {
    max-width: 800px;
}

.registered-container .title {
    text-align: center;
    font-size: 40px;
    color: #10567b;
    margin: 30px 0 50px 0;
}

.registered-container .text {
    text-align: center;
    font-size: 16px;
    margin: 15px 0;
    line-height: 30px;
}

.reg-ed-login-btn {
    height: 40px;
    line-height: 40px;
    color: #fff;
    background: #10567b;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
    padding: 10px 18px;
}

.reg-form-item {
    display: none;
}

.login-container .forgot-pw-container {
    margin: 5px 0;
    text-align: left;
}

.login-container .forgot-pw-container a {
    font-size: 13px;
    text-decoration: none;
}

.login-btn-container {
    margin-top: 10px;
}

.login-container .login-btn {
    width: 100%;
    height: 40px;
    line-height: 40px;
    color: #fff;
    font-size: 15px;
    background: #f16c5d;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.login-form .form-group {
    text-align: left;
}

.success-container {
    padding: 100px 0 150px 0;
    text-align: center;
}

.success-container .title {
    font-size: 18px;
    margin: 10px 0;
    font-weight: bold;
}

.success-container .text {
    font-size: 16px;
    margin: 10px 0;
}

.success-container .btn-container {
    margin-top: 30px;
}

.success-container .login-btn {
    display: inline-block;
    padding: 10px 50px;
    color: #fff;
    font-size: 15px;
    background: #fec1c1;
    border-radius: 3px;
}

.help-block {
    color: #e2797a;
}

/* ============================  book page ============================  */

.book-list-page-container {
    width: 100%;
    padding-top: 90px;
}

.catalog-container {
    float: left;
    width: 20%;
    min-height: 700px;
}

.book-content-container {
    float: right;
    width: 78%;
    margin-left: 2%;
    min-height: 700px;
}

.book-search-area {
    position: relative;
    width: 100%;
    background: #f5f5f5;
    background-size: cover;
}

.book-search-area .home-title {
    width: 100%;
    position: absolute;
    top: 30%;
    text-align: center;
    color: #333;
}

.book-search-area .textbook-container {
    position: absolute;
    top: 550px;
    width: 100%;
    height: 100px;
    background: rgba(115, 150, 201, 0.75);
}

.book-search-area .normal-book-container {
    position: absolute;
    top: 550px;
    width: 100%;
    height: 100px;
    background: rgba(238, 147, 119, 0.75);
}

.book-search-area .search-select {
    height: 40px;
    width: 100%;
    padding-left: 10px;
    border-radius: 3px;
    color: #333;
    border: 1px solid #d9d9d9;
    font-size: 13px;
    margin: 10px 0;
    background: #fff;
}

.book-search-area .home-input {
    height: 40px;
    width: 100%;
    padding-left: 10px;
    border-radius: 3px;
    color: #333;
    border: 1px solid #d9d9d9;
    font-size: 13px;
    margin: 10px 0;
}

.book-search-area input:focus {
    outline: none;
}

.book-search-area .search-label {
    color: #333;
    font-size: 14px;
    line-height: 20px;
    margin: 5px 0 5px 0;
    display: inline-block;
}

.book-search-area .input-container {
    float: left;
    width: 15%;
    margin-left: 20px;
}

.book-search-area .input-container button {
    border: none;
    width: 150px;
    height: 40px;
    border-radius: 5px;
    background: #10567b;
    color: #fff;
    margin: 10px 0;
}

.box-filter .box-header {
    padding: 15px 0;
    border-bottom: 1px solid #e4e4e4;
    font-weight: bold;
}

.box-filter .box-list .cate-head {
    margin: 15px 0 10px 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.box-filter .box-list .cate-child {
    margin: 1px 0;
    padding-left: 15px;
    cursor: pointer;
}

.top-filter {
    margin: 20px 0;
    padding: 10px 30px;
    background: #fafafa;
}

.top-filter .filter-row {
    border-bottom: 1px solid #ededed;
    padding: 6px 0;
}

.top-filter .filter-row .ft-label {
    font-size: 14px;
    width: 15%;
    float: left;
}

.top-filter .filter-row .sorting-label, .top-filter .filter-row .new-level-label {
    margin-top: 10px;
}

.top-filter .filter-row .ft-option {
    font-size: 14px;
    width: 85%;
    float: left;
}

.top-filter .filter-row .ft-option .option-list li {
    float: left;
    margin-right: 25px;
    display: inline-block;
    font-size: 15px;
    padding-left: 15px;
    cursor: pointer;
}

.top-filter .filter-row .sub-op-container {
    padding-left: 15%;
}

.degree-arrow {
    height: 18px;
    position: absolute;
    top: -25px;
    left: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 5px solid #fff;
}

.top-filter .filter-row .sub-op-container .sub-option {
    padding: 5px;
    border: 1px solid #ebebeb;
    background: #fff;
    font-size: 14px;
    margin: 5px 0;
    position: relative;
}

.top-filter .filter-row .sub-option .option-list li {
    float: left;
    margin-right: 15px;
    margin-left: 20px;
    display: inline-block;
    cursor: pointer;
}

.book-pre-detail table tr td {
    height: 21px;
    overflow: hidden;
}

.book-pre-detail table tr td .public_house_td {
    height: 21px;
}

.book-item .book-pre-detail .item-info-row {
    height: 21px;
    font-size: 14px;
    color: #333;
    font-weight: bold;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.book-item .book-pre-detail .item-info-row.price-row {
    font-size: 18px;
    color: #f16c5d;
    height: 25px;
    text-decoration: underline;
}

.book-item .book-pre-detail .item-info-row.bookshop-price {
    height: 25px;
}

.book-item .book-pre-detail .item-info-row i {
    width: 25px;
    margin: 0 5px;
}

.book-item-container {
    width: 100%;
    min-height: 1000px;
}

.book-item {
    width: 19%;
    margin: 15px 0.5%;
    height: 355px;
    border: 1px solid #d6d6d6;
    display: inline-block;
    vertical-align: top;
    padding: 5px 1%;
    transition: all 0.5s linear;
    overflow: hidden;

}
.book-item-banner-area {
    width: 100%;
    margin: 15px 1%;
}


.book-item.textbook {
    height: 375px;
}

.book-item * {
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

.book-item a {
    text-decoration: none;
    color: #333;
}

.book-item:hover {
    box-shadow: 0 3px 3px 0 rgba(0, 0, 0, .24);
}

.book-item:hover {
}

.book-item .img-area {
    width: 100%;
    height: 200px;
    text-align: center;
    background: #f5f5f5;
    position: relative;
}

.used-book-container .book-item .img-area .status {
    position: absolute;
    top: 3%;
    right: 1%;
    background: #f16c5d;
    padding: 2px 5px;
    color: #fff;
    border-radius: 2px;
}

.used-book-container .book-item .img-area .status.status-3 {
    background: #666;
}


.used-book-container .book-item .img-area .remark {
    position: absolute;
    padding: 2px 5px;
    border-radius: 2px;
    color: #fff;
    right: 1%;
    text-shadow: 1px 1px 3px #333;
    top: 14%;
}

.used-book-container .book-item .img-area .remark i {
    min-width: 13.5px;
    margin-right: 2px;
}


.used-book-container .book-item .img-area .user {
    position: absolute;
    padding: 2px 5px;
    border-radius: 2px;
    color: #fff;
    right: 1%;
    text-shadow: 1px 1px 3px #333;
    bottom: 1%;
}

.used-book-container .book-item .img-area .user i {
    min-width: 13.5px;
    margin-right: 2px;
}


.book-shop-list-container .book-item .img-area .status {
    position: absolute;
    pointer-events: none;
    right: -10px;
    top: -5px;
    background-color: rgba(255, 172, 45, 0.95);
    color: white;
    font-style: italic;
    font-weight: bold;
    width: 36px;
    line-height: 15px;
    font-size: 10px;
    padding-top: 5px;
    z-index: 2;
    text-align: center;
}


.book-shop-list-container .book-item .img-area .status:after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 9px 18px 0 18px;
    border-color: rgba(255, 172, 45, 0.95) transparent transparent transparent;
}


.book-item .img-area img {
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.book-item .name-title {
    font-weight: bold;
    font-size: 17px;
    margin: 10px 5px 5px 5px;
    height: 41px;
    overflow: hidden;
    line-height: 120%;
}

.book-item .name-title.lg-size {
    font-size: 20px;
    line-height: 100%;
}

.book-item .book-author, .book-item .book-company {
    height: 19px;
    overflow: hidden;
}

.book-search-result-container .book-item.bookshop {
    height: 350px;
}

.book-search-result-container .book-item.bookshop .name-title {
    height: 78px;
}

.book-search-result-container .book-item.bookshop .name-title.lg-text {
    font-size: 19px;
    line-height: 120%;
}

.book-item .name-title.sm-size {
    /*font-size: 14px;*/
}

.book-shop-list-container .book-item .name-title {
    height: 62px;
    line-height: 120%;
}

.book-shop-list-container .book-item .name-title.lg-size {
    font-size: 20px;
}

.book-item .book-pre-detail table {
    width: 100%;
    font-size: 14px;
}

.book-item .book-pre-detail .original-price {
    text-decoration-line: line-through;
}

.book-item .book-pre-detail .new-price {
    color: #f16c5d;
    margin-left: 5px;
    font-size: 22px;
    text-decoration: underline;
}

.book-item .book-pre-detail .basic-price {
    font-size: 18px;
    color: #f16c5d;
    text-decoration: underline;
}

/* ============================  member index ============================  */

.member-container {
    width: 100%;
    padding-top: 55px;
}

.member-function-container {
    float: left;
    width: 18%;
    min-height: 700px;
    border-left: 1px solid #e4e4e4;
    border-right: 1px solid #e4e4e4;
    border-bottom: 1px solid #e4e4e4;
    padding: 10px 1%;
}

.member-content-container {
    float: right;
    width: 76%;
    margin-left: 2%;
    min-height: 700px;
    padding-top: 20px;
}

.box-member-function .box-function-header {
    padding: 15px 0;
    border-bottom: 1px solid #e4e4e4;
    font-size: 15px;
}

.box-member-function .box-function-header.user-info a {
    font-weight: bold;
}

.box-member-function .box-function-header.user-info .dollar {
    padding-left: 18px;
    margin-top: 5px;
}

.box-member-function .box-function-header i {
    color: #717171;
    margin-right: 5px;
}

.box-member-function .box-function-header a {
    color: #333;
}

.box-member-function .function-ul li {
    margin: 2px 0;
    font-size: 15px;
    position: relative;
    transition: all 0s ease 0s;
    height: 30px;
}

.box-member-function .function-ul li .active {
    color: #f16c5d;
}

.box-member-function .function-ul li .active .member-function-icon {
    color: #f16c5d;
}

.box-member-function .function-ul a {
    color: #333;
    text-decoration: none;
    display: block;
    height: 30px;
}

.member-function-icon {
    color: #717171;
    display: inline-block;
    vertical-align: middle;
    position: absolute;
    top: 23%;
    left: 5%;
}

.member-function-icon i {
    vertical-align: middle;
}

.box-function-list .function-ul li .text {
    position: absolute;
    left: 18%;
    top: 0;
    line-height: 30px;
}

.box-function-list .function-ul li:hover {
    background: #10567b;
    transition: 0.2s;
}


.box-function-list .function-ul a:hover {
    opacity: 1;
}

.box-function-list .function-ul li:hover a {
    color: #fff;
    transition: 0.2s;
}

.box-function-list .function-ul li:hover a .member-function-icon {
    color: #fff;
    opacity: 1;
    transition: 0.2s;
}

.member-part-container {
    width: 100%;
    margin: 0 auto;
    border: 1px solid #e4e4e4;
    border-radius: 1px;
    display: inline-block;
    /*padding-top: 75px;*/
}

.member-part-container .table-title {
    text-align: center;
    font-size: 16px;
    background: #10567b;
    color: #fff;
    height: 40px;
}

.member-part-container table {
    width: 100%;
    font-size: 14px;
}

.member-part-container table tr th {
    padding: 7px;
    text-align: center;
}

.member-part-container table.order-history tr th {
    text-align: left;
}

.member-part-container table.order-history tr p.bold-text {
    font-weight: bold;
}

.member-part-container table.order-history tr p.img-container {
    text-align: center;
}

.member-part-container table tr.header-tr {
    border-top: 1px solid #e4e4e4;
}

.member-part-container table tr td {
    padding: 9px 7px;
    text-align: left;
    vertical-align: middle;
}

.member-part-container table .row-style-1 {
    background: #ebebeb;
}

.member-part-container table .row-style-0 {
    background: #fff;
}

.upload-book-container {

}

.upload-book-container .step-display {
    text-align: center;
}

.upload-book-container {
    border: 1px solid #e4e4e4;
}

.step-container {
    background: #fafafa;
    padding: 15px;
    box-shadow: 0px 2px 1px 0px rgba(231, 231, 231, 0.9);
}

.step-text {
    width: 600px;
    margin: auto;
    text-align: center;
    font-size: 14px;
}

.step-text .left {
    float: left;
}

.step-text .right {
    float: right;
}

.step-text .center {
    display: inline-block;
    margin: 0 auto 0 0;
}

.book-from-item-container .up-title {
    font-size: 22px;
    /*background: url("../images/book-icon-1.png") center left no-repeat;*/
    padding-left: 10px;
    line-height: 60px;
    height: 60px;
    cursor: pointer;
}

.book-from-item-container .up-title i {
    margin-right: 5px;
}

.book-from-item-container .up-title-2 {
    font-size: 22px;
    /*background: url("../images/book-icon-2.png") center left no-repeat;*/
    padding-left: 10px;
    line-height: 60px;
    height: 60px;
}

.book-from-item-container .up-sub-title {
    font-size: 18px;
    color: #10567b;
}

.book-from-item-container {
    padding: 20px 30px;
}

.book-from-item-inner-container {
    padding: 10px;
    font-size: 14px;
    color: #6d6d6d;
}

.book-from-item-inner-container input[type=text], .book-from-item-inner-container input[type=number] {
    height: 30px;
    width: 250px;
    color: #6d6d6d;
    border: 1px solid #d9d9d9;
    padding-left: 10px;
    border-radius: 3px;
}

.book-from-item-inner-container select {
    height: 30px;
    width: 250px;
    padding-left: 10px;
    border-radius: 3px;
    color: #6d6d6d;
    border: 1px solid #d9d9d9;
    font-size: 13px;
    background: #fff;
}

.book-from-item-inner-container textarea {
    width: 250px;
    padding-left: 10px;
    border-radius: 3px;
    color: #6d6d6d;
    border: 1px solid #d9d9d9;
    font-size: 13px;
    background: #fff;
    vertical-align: text-top;
    resize: none;
    height: 94px;
}

.up-book-image-input {
    display: none;
}

.book-from-item-inner-container .image-upload:hover {
    opacity: 0.8;
}

.book-from-item-inner-container .image-upload {
    vertical-align: top;
    display: inline-block;
    width: 87px;
    height: 87px;
    border: 1px solid #d9d9d9;
    position: relative;
    cursor: pointer;
}

.book-from-item-inner-container .image-upload .image-upload-icon {
    display: inline-block;
    position: absolute;
    top: 23%;
    left: 30%;
}

.book-from-item-inner-container .image-upload .image-upload-text {
    display: inline-block;
    position: absolute;
    top: 55%;
    left: 18%;
    text-align: center;
}

.book-from-item-inner-container .image-upload.image_1 .image-upload-icon {
    display: inline-block;
    position: absolute;
    top: 20%;
    left: 32%;
}

.book-from-item-inner-container .image-upload.image_1 .image-upload-text {
    display: inline-block;
    position: absolute;
    top: 52%;
    left: 14%;
    text-align: center;
}

.book-from-item-inner-container textarea:focus, .book-from-item-inner-container select:focus {
    outline: none;
    border: 1px solid #f16c5d !important;
}

.input-table {
    width: 700px;
    font-size: 14px;
    color: #6d6d6d;
}

.input-table tr td {
    text-align: left;
    padding: 5px 0;
}

.input-table tr th {
    padding: 0;
}

.book-from-item-inner-container .right-space {
    margin-right: 15px;
}

.book-from-item-inner-container .up-input-label {
    line-height: 30px;
    display: inline-block;
    cursor: pointer;

}

.book-from-item-inner-container .input-label {
    line-height: 30px;
    display: inline-block;
    cursor: pointer;
}

.up-input-container {
    margin: 0 0 10px 0;
}

.book-row-delete {
    color: #fff;
    text-decoration: none;
    background: #10567b;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 13px;
    float: right;
}

.button-add-book {
    color: #fff;
    text-decoration: none;
    background: #f16c5d;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 15px;
}

.upload-form-control-row .button-next, .contact-form-control-row .button-next, .confirm-form-control-row .button-next {
    float: right;
    width: 100px;
    height: 40px;
    line-height: 40px;
    border: 0;
    font-size: 16px;
    color: #fff;
    background: #f16c5d;
    margin-top: 10px;
    text-decoration: none;
    border-radius: 2px;
    cursor: pointer;
}

.upload-form-control-row .button-next i {
    margin-left: 10px;
}

.book-from-item-inner-container .up-input-container ul {
    width: 250px;
    height: 94px;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    font-size: 13px;
}

.book-from-item-inner-container .up-input-container ul li input[type=text]:focus {
    border: none !important;
}

.contact-info-container .up-title {
    font-size: 22px;
    /*background: url("../images/book-icon-6.png") center left no-repeat;*/
    padding-left: 10px;
    line-height: 60px;
    height: 60px;
}

.contact-info-container .up-title i {
    margin-right: 12px;
}

.contact-info-container {
    padding: 20px 30px;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}

.contact-info-container .contact-label {
    font-size: 14px;
    color: #6d6d6d;
    margin: 10px 0;
    display: inline-block;
}

.contact-info-form textarea {
    width: 100%;
    border-radius: 3px;
    color: #6d6d6d;
    border: 1px solid #d9d9d9;
    font-size: 13px;
    background: #fff;
    vertical-align: top;
    resize: none;
}

.contact-info-form textarea:focus {
    outline: none;
    border: 1px solid #10567b !important;
}

.contact-info-form, .contact-form-control-row, .upload-form-control-row, .confirm-form-control-row {
    display: none;
}

.contact-error, .error-append-area {
    color: #e72128;
}

.confirm-form-control-row {

}

.confirm-info-container .up-title {
    font-size: 22px;
    /*background: url("../images/book-icon-3.png") center left no-repeat;*/
    padding-left: 10px;
    line-height: 60px;
    height: 60px;
}

.confirm-info-container .up-title i {
    margin-right: 15px;
}

.confirm-info-container {
    padding: 20px 30px;
    border-left: 1px solid #d9d9d9;
    border-right: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}

.text-container {
    line-height: 30px;
}

.confirm-append-area .input-table tr td {
    padding: 0;
}

.confirm-append-area .book-from-item-inner-container select {
    border: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    padding-left: 0;
}

.confirm-append-area .up-sub-title {
    font-size: 16px;
    color: #10567b;
}

.step-display.step-2, .step-display.step-3 {
    display: none;
}

.confirm-append-area .book-from-item-inner-container {
    border-bottom: 1px solid #d9d9d9;
}

.confirm-contact-info {
    display: none;
    padding: 10px;
    font-size: 14px;
    color: #6d6d6d;
}

.confirm-contact-title {
    display: inline-block;
    font-size: 18px;
    margin: 5px 0 10px 0;
    text-decoration: underline;
}

/* ============================  upload success ============================  */

.upload-success-container {
    width: 100%;
    margin: 20px auto;
}

.upload-success-container .img-container {
    text-align: center;
}

.upload-success-container .img-container img {
    max-width: 100%;
    margin-bottom: 30px;
}

.upload-success-container .text {
    text-align: center;
    font-size: 22px;
    color: #333;
    margin: 10px 0;
}

.upload-success-container .btn-container {
    text-align: center;
    padding: 25px 0;
}

.upload-success-container .btn-container a.btn {
    display: inline-block;
    width: 115px;
    height: 25px;
    background: #10567b;
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    margin: 0 15px;
    color: white;
    cursor: pointer;
    vertical-align: top;
    font-size: 15px;
    box-shadow: 1px 1px 1px 0px #32405f;
    display: inline;
}

.cate-parent-container {
    display: none;
}

/* ============================  global style ============================  */

.gray-bg {
    background: #f9f9f9;
}

.features-container-1 {
    position: absolute;
    top: 20%;
}

.faq-container-1 {
    position: absolute;
    top: 5%;
    line-height: 210%;
}

.features-container-2 {
    position: absolute;
    top: 0;
}

.blue-text {
    color: #10567b;
}

.dark-blue-text {
    color: #10567b;
}

.orange-text {
    color: #f16c5d;
}

.orange-text-forced {
    color: #f16c5d !important;
}

.red-text {
    color: red;
}

input:focus {
    outline: none;
    border: 1px solid #f16c5d !important;
}

.member-part-container .member-input {
    color: #555;
    height: 30px;
    width: 100%;
    padding-left: 2%;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    box-shadow: none;
    margin-bottom: 10px;
}

.member-part-container .member-textarea {
    color: #555;
    width: 100%;
    padding-left: 2%;
    background-color: #fff;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    box-shadow: none;
    margin-bottom: 10px;
    resize: none;
}

.member-part-container .input-row .input-left {
    float: left;
    width: 48%;
}

.member-part-container .input-row .input-right {
    float: right;
    width: 48%;
}

.member-info-form {
    padding: 20px 5%;
}

.member-info-form .input-row {
    max-width: 400px;
    margin: 0 auto;
}

.member-title-container {
    width: 100%;
    font-size: 18px;
    background: #10567b;
    color: #fff;
    text-align: center;
    height: 40px;
}

.member-label {
    font-weight: 400;
    margin: 3px 0;
    display: inline-block;
    color: #333;
    font-size: 14px;
}

.submit-btn-container {
    text-align: center;
}

.member-btn {
    margin: 20px 0;
    width: 100%;
    max-width: 200px;
    height: 40px;
    line-height: 40px;
    color: #fff;
    background: #10567b;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    font-size: 13px;
}

.errors-container {
    color: red;
}

/* ============================  global style ============================  */

.pagination li {
    display: inline-block;
    font-size: 16px;
    width: 31px;
    height: 31px;
    line-height: 31px;
    text-align: center;
}

.pagination li a {
    display: inline-block;
    width: 100%;
}

.pagination li.active {
    color: #fff;
    border-radius: 50%;
    background: #10567b;
}

.pagination li:hover:not(.disabled) {
    background: #10567b;
    border-radius: 50%;
}

.pagination li:hover:not(.disabled) a {
    color: #fff;
}

.page-container {
    margin: 30px 0;
    text-align: center;
}

.tb-sort {
    display: none;
    margin-left: 3px;
}

.cd-top {
    background: rgba(16, 86, 123, 0.75) url(../back-to-top/img/cd-top-arrow.svg) no-repeat center 50% !important;
    border-radius: 50%;
    z-index: 9999;
}

.image-container {
    text-align: center;
}

.book-detail-container {
    min-height: 500px;
    padding: 65px 0;
}

.book-detail-container .main-area .left-detail {
    float: left;
    width: 75%;
}

.book-detail-basic-info {

}

.book-detail-basic-info .image-area {
    float: left;
    width: 45%;
}

.book-detail-basic-info .basic-info {
    float: left;
    width: 55%;
    border: 1px solid #efefef;
    padding: 15px 30px;
}

.book-detail-basic-info .basic-info .info-row {
    margin: 20px 0;
}

.book-detail-basic-info .basic-info .bk-name {
    font-size: 35px;
    line-height: 35px;
}

.book-detail-basic-info .basic-info .bk-author {
    font-size: 18px;
    line-height: 18px;
}

.book-detail-basic-info .basic-info .bk-action {
    line-height: 30px;
}

.book-detail-basic-info .basic-info .bk-line {
    width: 60%;
    height: 1px;
    background: #8c8c8c;
    margin: 20px 0;
}

.book-detail-basic-info .basic-info .bk-price .original-price {
    font-size: 20px;
    color: #666;
    line-height: 32px;
    text-decoration: line-through;
}


.book-detail-basic-info .basic-info .bk-price .new-price {
    font-size: 32px;
    color: #e12d2d;
    line-height: 32px;
    margin-left: 5px;
}


.book-detail-basic-info .basic-info .bk-price .basic-price {
    font-size: 28px;
    color: #333;
    line-height: 32px;
}


.book-detail-basic-info .basic-info .bk-detail {
    font-size: 15px;
    line-height: 15px;
    color: #666666;
}

.book-detail-basic-info .basic-info .bk-detail .label {
    font-weight: bold;
    color: #454545;
}

.bk-action {
    font-size: 14px;
}

.bk-action a {
    margin: 0 15px 0 0;
    font-size: 14px;
    border: 1px solid #10567b;
    border-radius: 3px;
    padding: 5px 10px;
}

.bk-action a i {
    margin-right: 5px;
}

.main-img-container img {
    max-height: 100%;
    max-width: 100%;
}

.main-img-container {
    width: 400px;
    height: 300px;
    text-align: center;
    margin: 0 auto;
    border-top: 1px solid #efefef;
    border-left: 1px solid #efefef;
    border-right: 1px solid #efefef;
    padding: 10px;
}

.preview-container {
    margin: 0 auto;
    max-width: 400px;
    text-align: center;
    border-bottom: 1px solid #efefef;
    border-left: 1px solid #efefef;
    border-right: 1px solid #efefef;
}

.preview-container img {
    margin: 5px;
}

.bk-detail-gallery-item {
    box-shadow: 0 1px 3px 0 rgba(50, 50, 50, 0.3);
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-weight: bold;
    border: 0;
}

.bk-detail-gallery-item:hover {
    box-shadow: 0 3px 4px 0 rgba(50, 50, 50, 0.3);
    cursor: pointer;
}

.bk-section-title {
    font-size: 28px;
    background-image: url(../images/book-icon-8.png), url(../images/title-line.png);
    background-position: center left, 35px bottom;
    background-repeat: no-repeat;
    width: 80%;
    margin: 50px auto 30px auto;
    padding-left: 80px;
    line-height: 60px;
    height: 60px;
}

.bk-section-title.contact {
    background-image: url(../images/contact-title-icon.png), url(../images/title-line.png);
}

.bk-section-title.reminder {
    background-image: url(../images/remind-icon.png), url(../images/title-line.png);
}

.contact-info-row {
    width: 100%;
    margin: 0 auto;
    font-size: 16px;
    padding: 20px;
    border: 1px solid #efefef;
    min-height: 250px;
}

.responsive-nav {
    display: none;
    position: relative;
    width: 100%;
    height: 50px;
    background: rgba(255, 255, 255, 0.5);
    z-index: 5000;
    margin-top: -20px;
}

.responsive-nav .mobile-logo-container {
    top: 1px;
    left: calc(50% - 65px);
    position: absolute;
}

.responsive-nav .mobile-logo-container img {
    height: 40px;
    margin: 5px 0 0 0;
}


.menu-responsive-btn {
    color: #333;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 15px;
    font-size: 14px;
}

.menu-responsive-btn .menu-text {
    margin: 0 5px 0 0;
    line-height: 22px;
    vertical-align: bottom;
}

.menu-responsive-btn i {
    color: #333;
    font-size: 22px;
}


.drawer-opened #overlay {
    visibility: visible;
    opacity: 1;
}

#overlay {
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 4900;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
}

.drawer-opened .responsive-nav ul {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.responsive-nav ul li.parent a {
    color: #333;
    font-size: 18px;
    text-decoration: none;
    display: block;
    margin: 0;
    padding: 10px 15px 5px 15px;
}

.responsive-nav ul li.parent {
    padding-left: 10px;
    border-top: 1px solid #eee;
}

.responsive-nav ul li.lv1 {
    padding-left: 10px;
    border-top: 1px solid #eee;
}

.responsive-nav ul li.lv2 {
    padding-left: 20px;
    margin: 8px 0;
}

.responsive-nav ul li.lv2 i {
    width: 30px;
}

.responsive-nav ul li.lang.active {
    background: #eee;
}

.responsive-nav ul li.login a {
    color: #333;
    font-size: 18px;
    text-decoration: none;
    display: block;
    margin: 0;
    padding: 15px;
    text-align: center;
    background: url(../images/login-black.png) no-repeat 30% 53%;
    background-size: 5%;
}

.responsive-nav ul li.lang {
    width: 40%;
    display: inline-block;
    border-bottom: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 15px 2.5% 100px 4%;
    border-radius: 5px;
    padding: 5px 0;
    text-align: center;
}

.responsive-nav ul li.lang a {
    color: #333;
    font-size: 17px;
    text-decoration: none;
}

.responsive-nav ul li.lv1 a {
    color: #333;
    font-size: 17px;
    display: inline-block;
    width: 100%;
    margin: 0;
    padding: 12px 5px;
    font-weight: bold;
}

.responsive-nav ul li.lv1 a i {
    margin: 0 10px;
}


.responsive-nav ul li.lv2 a {
    color: #333;
    font-size: 16px;
    text-decoration: none;
    display: block;
    margin: 0;
    padding: 2px;
}

.responsive-nav ul {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 75%;
    overflow: auto;
    background: #fff;
    z-index: 5600;
    color: #333;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-box-shadow: 0 0 8px 0 rgba(80, 80, 80, 0.5);
    -moz-box-shadow: 0 0 8px 0 rgba(80, 80, 80, 0.5);
    box-shadow: 0 0 8px 0 rgba(80, 80, 80, 0.5);
}

.responsive-nav .main-area .nav-left img {
    width: 40%;
}

.lets_try {
    padding-top: 20px;
}

.lets_try a {
    padding: 8px 12px;
    background: #f16c5d;
    color: #fff;
    border-radius: 3px;
}

.live-chat {
    cursor: pointer;
}

.float-right {
    float: right;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.seller-container {
    line-height: 47px;
    font-size: 20px;
}

.star-container {
    float: left;
    display: inline-block;
}

.seller-mark {
    font-size: 20px;
    margin-left: 10px;
}

.blog-container {

}

.fr-toolbar {
    border-top: 0 !important;
}

.member-title {
    background-image: url(../images/member-under-line.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 7px 20px 10px 20px;
    line-height: 32px;
}

.fr-wrapper div:first-child {
    /* display: none; */
}

.blog-container .btn-container {
    text-align: center;
}

.blog-btn {
    background: #f16c5d;
    width: 200px;
    margin-top: 20px;
    height: 40px;
    border: 1px solid #fff;
    border-radius: 3px;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s;
}

.blog-btn:hover {
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .24);
}

.blog-data-container {
    padding: 20px;
    min-height: 1250px;
}

.blog-container .title-input {
    width: 100%;
    height: 35px;
    border-left: 1px solid #d6d6d6;
    border-right: 1px solid #d6d6d6;
    padding-left: 10px;
}

.editor-container {
    margin: 0 auto;
    width: 99.7%;
}

.blog-main-content {
    width: 100%;
}

.right-fb {
    position: relative;
    float: right;
    width: 20%;
    margin-left: 10%;
}

.right-fb .more-title {
    font-size: 28px;
    background-image: url(../images/title-line.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    line-height: 60px;
    height: 60px;
    text-align: center;
    margin: 15px 0;
}

.right-fb .blog-more-item {
    font-size: 16px;
    line-height: 120%;
    padding: 5px 10px;
}

.right-fb .blog-detail-toc {
    background: #fff;
    position: fixed;
    top: 75px;
    padding-top: 50px;
    padding-bottom: 250px;
    padding-right: 30px;
    opacity: 1;
    overflow-y: scroll;
    height: 100%;
    max-width: 450px;
}


.right-fb .blog-detail-toc::-webkit-scrollbar {
    width: 0px; /* Remove scrollbar space */
    background: transparent; /* Optional: just make scrollbar invisible */
}

.right-fb .blog-detail-toc.scrolled {
    opacity: 0;
    transition: all linear 0.5s;
    z-index: -999;
}


.blog-data-container .intro-area {
    width: 100%;
    height: 400px;
}


.blog-data-container .intro-area .right-intro-blog {
    width: 100%;
    padding: 10px;
}


.left-highlight-item {
    position: relative;
    height: 390px;
    width: 470px;
    display: block;
    float: right;
}

.right-highlight-item {
    width: 23%;
    height: 183px;
    float: left;
    position: relative;
    margin: 0 1%;
    border-radius: 3px;
}

.right-highlight-item img {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
}


.left-highlight-item img {
    position: absolute;
    right: 0;
    top: 0;
}

.blog-row {
    margin: 20px 10px 0 5%;
    padding: 20px 0 30px 0;
    border-bottom: 1px solid #999999;
}

.blog-row .img-container {
    float: left;
    width: 40%;
}

.blog-row .blog-detail {
    float: left;
    width: 60%;
}

.blog-row .blog-detail .title {
    font-size: 26px;
    line-height: 100%;
}

.blog-row .blog-detail .info {
    font-size: 15px;
    line-height: 100%;
    margin: 10px 0;
}

.blog-row .blog-detail .info .item:first-child {
    margin-right: 10px;
}

.blog-row .blog-detail .info .item i {
    margin-right: 5px;
}

.more-container {
    margin-top: 5px;
}

.more-container .more-btn {
    padding: 4px 8px;
    background: #10567b;
    color: #fff;
    border-radius: 2px;
}

.left-highlight-item .blog-description {
    position: absolute;
    top: 25%;
    left: 0;
    color: #fff;
    width: 100%;
    padding: 10px 0 10px 5%;
    line-height: 120%;
}

.left-highlight-item .blog-description .title {
    font-size: 32px;
    line-height: 120%;
}

.left-highlight-item .blog-description .detail {
    line-height: 120%;
    margin-top: 10px;
    font-size: 18px;
}

.left-highlight-item .blog-description .detail .item {
    margin-right: 10px;
}

.left-highlight-item .blog-description i {
    margin-right: 5px;
}

.right-highlight-item .blog-description {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    width: 100%;
    padding: 9px 0 9px 5%;
    line-height: 100%;
    background: #f5988d;
    box-shadow: 2px 2px 5px #e5e5e5;
    /*background: rgba(16, 86, 123, 0.5);*/
}

.right-highlight-item .blog-description .title {
    font-size: 20px;
    line-height: 20px;
    /*font-weight: bold;*/
    text-shadow: 1px 1px 3px #666;
}

.right-highlight-item .blog-description .detail {
    line-height: 120%;
    margin-top: 3px;
    font-size: 16px;
}

.right-highlight-item .blog-description .detail .item {
    margin-right: 10px;
}

.right-highlight-item .blog-description i {
    margin-right: 5px;
}

.left-highlight-item, .right-highlight-item {
    overflow: hidden;
}

.left-highlight-item img, .right-highlight-item img {
    transition: all linear 0.3s;

}

.left-highlight-item:hover img, .right-highlight-item:hover img {
    -moz-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}

.fr-view p, .fr-view span {
    line-height: 160% !important;
    margin-bottom: 25px;
}

.blog-show-editor h1.title {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 20px;
}

.blog-show-editor ul {
    line-height: 160%;
    margin-bottom: 25px;
}

.blog-inner-info {
    font-size: 16px;
    float: left;
}

.blog-inner-info .item i {
    margin-right: 5px;
}

.blog-inner-info .item {
    margin: 0 5px;
}

.book-preview-item {
    float: left;
    display: table;
    width: 12.5%;
    padding-top: 12.4%;
    position: relative;
    overflow: hidden;
}

.book-preview-item .cate-name {
    position: absolute;
    font-size: 20px;
    color: #fff;
    left: 10%;
    bottom: 10%;
    text-shadow: 1px 1px 1px #666;
}

.book-preview-item img:hover {
    opacity: 1;
}

.book-preview-item:hover .cate-name {
    color: #fff;
}

.book-preview-item img {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    max-width: 102%;
    opacity: 0.5;
    transition: all 0.3s;
}

.blog-hot-item {

}

.blog-data-container #share {
    margin-top: 20px;
    text-align: right;
}

.blog-bottom-info {
    margin: 55px 0;
    font-size: 18px;
    text-align: right;
}

.blog-bottom-info .item i {
    margin-right: 5px;
}

.blog-bottom-info .item {
    margin: 0 5px;
}

.on-sale-book .fa {
    margin-right: 3px;
}

.sold-btn, .edit-btn, .delete-btn {
    display: inline-block;
}

.sold-btn, .edit-btn, .delete-btn {
    padding: 2px 4px;
    color: #fff;
    border-radius: 3px;
}

.sold-btn {
    background: #61bb8f;
}

.edit-btn {
    background: #f16c5d;
}

.delete-btn {
    background: #d73f09;
}

.full-max-100 {
    width: 100%;
    height: 100%;
}

.edit-book-btn-container {
    text-align: center;
    margin: 20px 0;
}

.edit-book-btn-container .cancel-btn {
    color: #fff;
    text-decoration: none;
    background: #10567b;
    padding: 5px 20px;
    border-radius: 3px;
    font-size: 15px;
    margin: 15px;
}

.edit-book-btn-container .submit-btn {
    color: #fff;
    text-decoration: none;
    background: #f16c5d;
    padding: 8px 20px;
    border-radius: 3px;
    font-size: 15px;
    margin: 15px;
    border: none;
    cursor: pointer;
}

.hide {
    display: none !important;
}

.show {
    display: block !important;
}

.box-list.school {
    padding: 15px 0;
}

.school-child {
    margin: 2px 0;
}

.school-filter, .school-child {
    cursor: pointer !important;
}

.no-data-container {
    text-align: center;
    color: #10567b;
    font-size: 26px;
    line-height: 150%;
    padding: 50px 0;
}

.book-search-result-container .book-item {
    width: 18%;
    margin: 15px 0.5%;
}

.mobile-view {
    display: none;
}

.click-to-edit {
    display: none;
    margin-left: 10px;
}

.right-bk {
    float: right;
    width: 20%;
    margin-left: 5%;
}

.right-bk .book-more-item {
    font-size: 16px;
    line-height: 120%;
    padding: 7px 10px;
    border-bottom: 1px solid #e6e6e6;
}

.right-bk .book-more-item a:hover {
    opacity: 0.8;
}

.right-bk .book-more-item .img-container {
    float: left;
    width: 30%;
    height: 72px;
    overflow: hidden;
    text-align: center;
    background: #f6f5f6;
}

.right-bk .book-more-item .info-container {
    float: right;
    width: 65%;
    overflow: hidden;
}

.right-bk .book-more-item .info-container .author {
    font-size: 10px;
    color: #999;
}

.right-bk .book-more-item .info-container .price {
    font-size: 12px;
    color: #f16c5d;
}

.right-bk .book-more-item .img-container img {
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
}


.right-bk .original-price {
    text-decoration-line: line-through;
    color: #666;
    font-size: 14px;
}

.right-bk .new-price {
    font-size: 20px;
    color: #e12d2d;
    margin-left: 3px;
}

.right-bk .basic-price {
    font-size: 16px;
    color: #333;
}


.right-bk .more-title {
    font-size: 28px;
    background-image: url(../images/title-line.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    line-height: 60px;
    height: 60px;
    text-align: center;
    margin: 15px 0;
}

.hide-first {
    display: none;
}

.more-info {
    cursor: pointer;
    text-align: center;
}

.promo-show {
    position: fixed;
    right: 0;
    top: 30%;
    height: 450px;
    width: 100px;
    z-index: 9999;
}

.promo-show-1 {
    margin-bottom: 20px;
    width: 100%;
    height: 230px;
    display: none;
}

.promo-show-1 img {
    max-width: 100%;
}

.promo-show-2 {
    display: inline-block;
    width: 100%;
    height: 230px;
}

.comment-container {
    width: 80%;
    margin: 0 auto;
    padding-top: 40px;
}

.login-btn-bk-detail {
    padding: 8px 12px;
    background: #f16c5d;
    color: #fff;
    border-radius: 3px;
}

.for-member-only {
    text-align: center;
    line-height: 150%;
}

.for-member-only .data-row.login {
    line-height: 80px;
    font-size: 24px;
    font-weight: bold;
    color: #10567b;
}


.m-detail-bk-img {
    width: 65px;
    height: 65px;
}

.contact-info-row.for-member {
    background: #efefef;
    padding-top: 6%;
}

.request-zone-container {
    padding-top: 65px;
}

.request-list {
    margin: 30px 0;
}

.request-list .request-item {
    padding: 15px 20px;
    font-size: 16px;
}

.request-list .request-item span {
    display: inline-block;
}

.request-list .request-item.style-1 {
    background: #10567b;
    color: #fff;
}

.request-list .request-item .title {
    width: 55%;
}

.request-list .request-item .seller {
    width: 10%;
}

.request-list .request-item .price {
    width: 10%;
}

.request-list .request-item .created_at {
    width: 10%;
}

.request-list .request-item .pm-btn {
    width: 10%;
}

.request-list .request-item .msg-btn {
    padding: 5px 7px;
    background: #10567b;
    color: #fff;
    border-radius: 3px;
}

.request-list .request-item.style-2 {
    background: #ebebeb;
}

.request-list .request-item .fa {
    margin-right: 5px;
}

.request-list .request-item .detail {
    margin-top: 10px;
}

.request-tool-bar {
    margin-bottom: 15px;
}

.classify-book-type {
    float: left;
    font-size: 17px;
    height: 30px;
    line-height: 30px;
    color: #555;
}

.classify-book-type .label, .classify-book-type .list, .classify-sorting .label {
    float: left;
}

.classify-book-type .book-type-request-btn {
    text-align: center;
    color: #555;
    padding: 0 10px;
    float: left;
}

.classify-book-type .book-type-request-btn:first-child {
    border-right: 1px solid #999;
}

.classify-book-type .book-type-request-btn .active {
    color: #f16c5d;
    border-bottom: 2px solid #f16c5d;
}

.classify-sorting {
    float: right;
    font-size: 17px;
    height: 30px;
    line-height: 30px;
    color: #555;
}

.classify-sorting a {
    background: #f16c5d;
    color: #fff;
    padding: 7px 10px;
    border-radius: 5px;
}

.classify-sorting a .fa {
    margin-right: 5px;
}

.hide-style {
    display: none;
}

.add-request-container {
    width: 400px;
}

.add-request-container .input-row {
    margin: 15px 0;
}

.add-request-container .input-row input {
    height: 30px;
    width: 100%;
    color: #6d6d6d;
    border: 1px solid #d9d9d9;
    padding-left: 5px;
    border-radius: 3px;
}

.add-request-container .input-row textarea {
    width: 100%;
    color: #6d6d6d;
    border: 1px solid #d9d9d9;
    padding-left: 5px;
    border-radius: 3px;
    resize: none;
}

.add-request-container .input-row button {
    width: 100%;
    margin: 0 auto;
    background: #10567b;
    border: 0;
    color: #fff;
    cursor: pointer;
    padding: 10px 0;
}

.add-request-container .input-row textarea:focus {
    outline: none;
    border: 1px solid #10567b !important;
}

/*
.slideshow-area {
    width: 100%;
    max-width: 2440px;
    margin: 55px auto 0 auto;
    height: 650px;
    overflow: hidden;
}

.swiper-container {
}

.swiper-slide {
    max-height: 650px;

}

.slideshow-area .swiper-slide {
    background-size: cover;
    background-position: center;
}

.slideshow-main-area {
    width: 1400px;
    height: 650px;
    position: relative;
    margin: 0 auto 0 auto;
    overflow: hidden;
}

.slideshow-main-area .slideshow-left {
    position: absolute;
    left: 0;
    top: 5%;
    background: rgba(244, 244, 244, 0.8);
    padding: 60px 70px;
    border-radius: 10px;
}

.slideshow-main-area .slideshow-left:after {
    position: absolute;
    content: "";
    top: 100%;
    left: 90%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 30px 30px 0;
    border-color: transparent rgba(244, 244, 244, 0.8) transparent transparent;

}

.slideshow-main-area .slideshow-left .slideshow-title {
    color: #666;
    font-size: 43px;
    text-align: left;
    line-height: 120%;
    padding: 0 15px;
}

.slideshow-main-area .slideshow-left .line-img {
    margin: 25px 0;
}

.slideshow-main-area .slideshow-left .slideshow-text {
    color: #666;
    font-size: 25px;
    text-align: left;
    line-height: 120%;
    padding: 0 15px;
}

.slideshow-main-area .slideshow-left .slideshow-text ul li {
    margin: 15px 0;
}

.slideshow-main-area .slideshow-left .slideshow-text ul li i {
    margin-right: 15px;
}

.slideshow-main-area .slideshow-left .slideshow-btn-container {
    padding-left: 15px;
    margin: 50px 0 25px 0;
}

.slideshow-main-area .slideshow-left .slideshow-btn {
    border: 2px solid #666;
    border-radius: 5px;
    color: #666;
    text-decoration: none;
    padding: 10px 45px;
    font-size: 17px;
}

.slideshow-main-area .slideshow-right {
    position: absolute;
    right: 0;
    top: 50%;
    background: url("../images/home-slide-like-bg.png") repeat-x;
    padding: 30px 40px 25px 40px;
    border-radius: 10px;
    font-size: 23px;
    color: #000;
}

.slideshow-main-area .slideshow-right:after {
    position: absolute;
    content: "";
    top: 100%;
    left: 15%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 25px 25px 0 0;
    border-color: rgba(244, 244, 244, 0.8) transparent transparent transparent;

}

.slideshow-main-area .slideshow-right img {
    vertical-align: text-top;
    margin-top: -5px;
    margin-right: 10px;
}

.slideshow-main-area:hover .slideshow-right img {
    -webkit-animation: pulse 0.75s infinite linear;
}
*/


.slideshow-area {
    max-width: 1920px;
    width: 100%;
    height: 500px;
    margin: 60px auto 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1000;
}

.swiper-container {
    width: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.swiper-container .swiper-slide {
    overflow: hidden;
    display: block;
    background-size: cover;
    cursor: pointer;
    max-width: 1000px;
}

.swiper-container .swiper-slide.home-slide {
    height: 500px;
}

.swiper-container .slideshow-mask-left {
    width: 25%;
    height: 500px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2000;
    background: #0000004d;
    backdrop-filter: blur(2px);
}

.swiper-container .slideshow-mask-right {
    width: 25%;
    height: 500px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2000;
    background: #0000004d;
    backdrop-filter: blur(2px);
}

.swiper-slide .swiper-slide-text {
    width: 400px;
    position: absolute;
    z-index: 4000;
    top: 25%;
    left: 12%;
    text-align: left;
    font-size: 38px;
    line-height: 150%;
    color: #fff;
    font-weight: bold;
    text-shadow: 1px 1px 3px #585858;
    letter-spacing: 3px;
}

.swiper-slide .swiper-slide-slogan {
    width: 400px;
    height: 38px;
    position: absolute;
    z-index: 4000;
    bottom: 25%;
    left: 12%;
    text-align: left;
    font-size: 24px;
    line-height: 38px;
    padding-left: 50px;
    color: #fff;
    text-shadow: 1px 1px 3px #585858;
    font-weight: bold;
    background: url(../images/banner-logo-icon.png) center left no-repeat;
}

.slideshow-area .swiper-button-prev {
    background-image: url(../images/slideshow_go_left.png);
    z-index: 2100;
    left: 20%;
}

.slideshow-area .swiper-button-next {
    background-image: url(../images/slideshow_go_right.png);
    z-index: 2100;
    right: 20%;
}

/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 15px;
    /*left: 50%;*/
}


@-webkit-keyframes pulse {
    from {
        transform: scale3d(1, 1, 1);
    }

    50% {
        transform: scale3d(1.3, 1.3, 1.3);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

.href-btn {
    padding: 19px 40px;
    background: #f16c5d;
    color: #fff;
    border-radius: 7px;
    font-size: 23px;
    display: inline-block;
}

.home-intro-section .href-btn {
    padding: 12px 20px;
}

.blog-editor-area .href-btn {
    padding: 12px 20px;
}

.blog-editor-area table {
    margin-bottom: 40px;
}

.blog-editor-area table td {
    padding: 8px;
}

.member-part-container .member-input:disabled {
    background: #f4f4f4;
}


.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: #fff;
    opacity: 0.5;
}

.swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 6px;
}

.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 20px;
}

.swiper-pagination-bullet-active {
    opacity: 1;
}

.section {
    padding: 60px 0;
}


.home-cate-section {
    min-height: 880px;
}

.home-cate-section .home-cate-item-container .cate-item {
    float: left;
    width: 31%;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 2px 2px 5px #e5e5e5;
    height: 0;
    opacity: 0;
    transition: opacity .5s ease-in-out;
    background: #f0f0f0;
}

.home-cate-section .home-cate-item-container .cate-item.active {
    display: block;
    opacity: 1;
    height: 202px;
    margin: 1%;
}


.home-cate-section .home-cate-item-container .cate-item a {
    display: inline-block;
    color: #10567b;
    font-size: 17px;
}

.home-cate-section .home-cate-item-container .cate-item a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all 0.7s;
}

.home-cate-section .home-cate-item-container .cate-item a .text {
    position: absolute;
    bottom: 0;
    left: 0;
    line-height: 50px;
    height: 50px;
    background: #fff;
    width: 100%;
    padding: 0 10px;
    color: #666;
}

.home-cate-section .home-cate-item-container .cate-item a .text.two-row {
    line-height: 24px;
}


.home-cate-section .home-cate-item-container .cate-item:hover img {
    transform: scale(1.1);
}

.home-cate-section .top-container {
    padding: 0 2%;
    margin-bottom: 20px;
}

.home-cate-section .top-container .title {
    float: left;
    font-size: 35px;
    color: #222222;
    display: inline-block;
    line-height: 100%;
}

.home-cate-section .top-container .more-btn {
    padding: 20px 30px;
    background: #fff;
    box-shadow: 2px 2px 5px #e5e5e5;
    float: right;
    display: inline-block;
    color: #000;
    font-size: 17px;
    border-radius: 5px;
}

.home-tutorial-section .tutorial-item {
    float: left;
    width: 20%;
    margin: 0 1%;
    position: relative;
}

.home-tutorial-section .tutorial-item:after {
    /*display: inline-block;*/
    /*position: absolute;*/
    /*content: url("../images/home-tutor-line.png");*/
    /*height: 1px;*/
    /*width: 110px;*/
    /*left: 90%;*/
    /*top: 28%;*/
}

.home-tutorial-section .tutorial-item.last-item:after {
    content: none;
}

.home-tutorial-section .tutorial-item .img-container {
    text-align: center;
}

.home-tutorial-section .tutorial-item .img-container img {
    width: 180px;
    height: 180px;
}

.home-tutorial-section .tutorial-item .name {
    color: #10567b;
    font-size: 27px;
    line-height: 120%;
    margin: 30px 0 15px 0;
    text-align: center;
}

.home-tutorial-section .tutorial-item .name img {
    margin-bottom: -8px;
}

.home-tutorial-section .tutorial-item .description {
    color: #000;
    font-size: 17px;
    line-height: 150%;
    text-align: center;
}

.home-tutorial-section .tutorial-item:hover .img-container img {
    -webkit-animation: rotation 0.75s infinite linear;
}

.home-tutorial-section .btn-container {
    text-align: center;
    margin-top: 80px;
}

.home-tutorial-section .btn-container a {
    margin: 0 20px;
    padding: 13px 15px;
}

.home-tutorial-section .btn-container a svg {
    margin-right: 10px;
}

.home-tutorial-section .title {
    font-size: 35px;
    color: #222222;
    text-align: center;
    line-height: 100%;
}

.tutorial-container {
    padding: 70px 0 0 0;
}

.tutorial-container .arrow-container {
    color: #f16c5d;
    font-size: 28px;
    float: left;
    padding-top: 80px;
    text-align: center;
    width: 4%;
}

/* ====================================  home intro ==================================== */

.home-intro-section {
    background: url("../images/home-intro-bg.jpg") no-repeat;
    background-size: cover;
    min-height: 620px;
    text-align: left;
}

.home-intro-section .title {
    font-size: 40px;
    color: #000;
    line-height: 100%;
    margin-top: 60px;
}

.home-intro-section .description {
    font-size: 17px;
    color: #000;
    line-height: 100%;
    max-width: 800px;
    margin: 60px 0;
    letter-spacing: 2px;
}

.home-intro-section .description .highlight-text {
    color: #f16c5d;
    text-decoration: underline;
    font-weight: bold;
}

.home-intro-section .btn-container {
    text-align: center;
}

.suggestion-section {
    color: #fff;
    padding: 40px;
    background: #f8f7f5;
}

.suggestion-section .title {
    font-size: 20px;
    margin-bottom: 20px;
    color: #666;
    text-shadow: 1px 1px 0 #d2d4d6;
}

.suggestion-section .main-area .display-item {
    width: 18%;
    margin: 0 1%;
    float: left;
}

.suggestion-section .main-area .display-item img {
    height: 70px;
}


.footer {
    color: #fff;
    padding-top: 40px;
    background: #666;
}

.footer .main-area {
    color: #fff;
    text-align: left;
}

.footer .main-area .left .text {
    margin: 10px 0;
}

.footer .btn-container .ft-btn {
    text-align: center;
    padding: 10px 0;
    width: 40%;
    margin: 0 auto;
    border: 1px solid #000;
    display: block;
}

.footer .main-area .right .menu-col {
    float: left;
    width: 20%;
    margin-bottom: 10px;
    letter-spacing: 1px;
}

.footer .main-area .right .menu-item {
    width: 100%;
    margin: 15px 0;
}

.footer .main-area .right .menu-item.top-item {
    padding-bottom: 10px;
}

.footer .main-area .right .menu-item.top-item a {
    font-size: 22px;
    border-bottom: 2px solid #fff;
}

.footer .main-area .ft-title {
    font-size: 20px;
    letter-spacing: 3px;
}

.footer .main-area .right .menu-item a {
    color: #fff;
    font-size: 15px;
}

.footer .main-area .right .menu-item a i {
    margin-right: 3px;
}

.footer .main-area .right .menu-item:not(.top-item) a:hover {
    text-decoration: underline;
}

.footer .ft-copyright {
    padding: 30px 0 30px 0;
    text-align: center;
}

.section.home-whyus-section {
    padding: 0;
    position: relative;
}

.home-whyus-section .main-area {
    width: 100%;
}

.home-whyus-section .whyus-item {
    float: left;
    width: 50%;
    min-height: 489px;
}

.home-whyus-section .whyus-item.item-1 {
    background: #e0f3ff;
    color: #333;
}

.home-whyus-section .whyus-item.item-4 {
    background: #fef2d4;
    color: #333;
}

.home-whyus-section .whyus-item.item-1 .whyus-container, .home-whyus-section .whyus-item.item-3 .whyus-container {
    float: right;
    margin-right: 180px;
}

.home-whyus-section .whyus-item.item-2 .whyus-container, .home-whyus-section .whyus-item.item-4 .whyus-container {
    margin-left: 180px;
}

.home-whyus-section .whyus-item.item-1 .whyus-container img {
    width: 250px;
    height: 250px;
    margin: 25px;
}

.home-whyus-section .whyus-item .whyus-container {
    width: 300px;
    text-align: center;
    padding-bottom: 60px;
}

.home-whyus-section .whyus-item .title {
    font-size: 24px;
    padding-bottom: 20px;
    font-weight: bold;
    font-family: "Noto Sans TC";
    margin: 0;
    line-height: 100%;
}

.home-whyus-section .whyus-item .description {
    font-size: 17px;
    line-height: 30px;
    text-align: left;
}

.home-whyus-section .whyus-center {
    background: url("../images/whyus-center.png");
    width: 591px;
    height: 379px;
    position: absolute;
    z-index: 100;
    left: calc((100% - 591px) / 2);
    top: calc((100% - 379px) / 2);
    font-size: 18px;
    text-align: center;
    line-height: 30px;
}

.home-whyus-section .whyus-center .title {
    color: #666;
    margin-top: 115px;
}

.home-whyus-section .whyus-center .description {
    color: #666;
    margin-top: 5px;
}

.home-whyus-section .whyus-center .btn-container .href-btn {
    padding: 5px 15px;
    font-size: 18px;
    background: #f16c5d;
    margin-top: 10px;
}

.home-whyus-section .whyus-center .highlight-text {
    color: #f16c5d;
    text-decoration: underline;
    font-weight: bold;
    font-size: 24px;
    margin: 0 3px;
}


.href-btn i {
    margin-right: 10px;
}

/*==================  New Book shop List     =================*/

.book-shop-list-container .box-filter .box-list .cate-head {
    margin: 13px 0;
    cursor: pointer;
}

.book-shop-list-container .box-filter .box-list .cate-head label {
    cursor: pointer;
}

.book-shop-list-container .box-filter .box-header {
    font-size: 18px;
    font-weight: bold;
}

.orange-text .ui.checkbox label, .orange-text .ui.checkbox + label {
    color: #f16c5d;
}

.book-shop-list-container .box-filter .box-list .cate-head.orange-text.selected label {
    color: #f16c5d !important;
}

.book-shop-list-container .ui.checkbox .box:after, .ui.checkbox label:after {
    color: #f16c5d !important;
}

.book-shop-list-container .ui.checkbox {
    font-size: 15px;
}

.preload-item {
    width: 23.5%;
}

.preload-item .name-title {
    transition: all 0.5s ease;
    transition-timing-function: ease;
    background: #f5f5f5;
    background-position: right bottom;
}

.preload-item .name-title.color1 {
    background: linear-gradient(to right, #c8c8c8 50%, #f5f5f5 50%);
    background-size: 200% 100%;
    background-position: left bottom;
}


.book-shop-list-container .book-content-container {
    min-height: 1200px;
}

.book-shop-list-container .book-item .img-area .remark {
    position: absolute;
    padding: 2px 5px;
    border-radius: 2px;
    color: #fff;
    left: -8px;
}

.book-shop-list-container .book-item .img-area .remark i {
    min-width: 13.5px;
}

.book-shop-list-container .book-item .img-area .remark-p0 {
    top: 3%;
}

.book-shop-list-container .book-item .img-area .remark-p1 {
    top: 18%;
}

.book-shop-list-container .book-item .img-area .remark-p2 {
    top: 33%;
}

.book-shop-list-container .book-item .img-area .remark-type0 {
    background: #f16c5d;
}

.book-shop-list-container .book-item .img-area .remark-type1 {
    background: #3ca084;
}

.book-shop-list-container .book-item .img-area .remark-type2 {
    background: #ec483c;
}

.book-shop-list-container .book-item .img-area .remark-type3 {
    background: #2e90b7;
}


.book-shop-list-container .book-item .public_house_row {
    max-height: 21px;
    overflow: hidden;
}

.book-shop-list-container .book-item .shop_author_row {
    max-height: 21px;
    overflow: hidden;
}


/*============================= Shop Book Detail Page =============================*/

.book-shop-detail-container {
    min-height: 500px;
    padding: 85px 0 65px 0;
}

.book-shop-detail-container .path-area {
    font-size: 14px;
    margin: 35px 0;
}

.book-shop-detail-container .path-area a {
    color: #10567b;
}

.book-shop-detail-container .path-area i {
    margin: 0 10px 0 10px;
    font-size: 16px;
    color: #515156;
}

.book-shop-detail-container .content-left {
    float: left;
    width: 50%;
    margin-right: 10%;
}

.book-shop-detail-container .content-right {
    float: right;
    width: 40%;
}


.book-shop-detail-container .shop-image-area {
    width: 100%;
}

.book-shop-detail-container .shop-img-container img {
    max-height: 100%;
    max-width: 100%;
}

.book-shop-detail-container .shop-img-container {
    width: 100%;
    text-align: center;
    margin: 0 auto 15px auto;
    height: 330px;
}

.book-shop-detail-container .shop-preview-container {
    margin: 0 auto;
    text-align: center;
}

.book-shop-detail-container .shop-preview-container img {
    margin: 5px;
}

.book-shop-detail-container .shop-detail-gallery-item {
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    font-weight: bold;
}

.book-shop-detail-container .shop-detail-gallery-item.current {
    border: 2px solid #10567b;
    width: 81px;
    height: 81px;
}

.book-shop-detail-container .shop-detail-gallery-item:hover {
    box-shadow: 0 3px 4px 0 rgba(50, 50, 50, 0.3);
    cursor: pointer;
}

.book-shop-detail-container .break-line {
    margin: 10px 0 24px 0;
}

.book-shop-detail-container .book-item-description-box {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 50px;
    overflow: hidden;
}

.book-shop-detail-container .book-item-description-box .youtube {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.book-shop-detail-container .book-item-description-box iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.book-shop-detail-container .book-item-description-box .title {
    font-size: 22px;
    line-height: 1;
    padding-bottom: 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid #d3d3d5;
}

.book-shop-detail-container .book-item-description-box .title .btn {
    padding: 2px 8px;
    color: #fff;
    margin-right: 8px;
    border-radius: 3px;
    float: right;
    background: #f16c5d;
}

.book-shop-detail-container .book-item-description-box .item-information .info-row {
    margin: 15px 0;
}

.book-shop-detail-container .book-item-description-box .item-information .info-row i {
    margin: 0 10px;
}

.book-shop-detail-container .book-item-description-box .item-information .info-row .info-title {
    width: 110px;
    float: left;
    color: #929295;
    padding-right: 10px;
}

.book-shop-detail-container .book-item-description-box .item-information .info-row .discount-info {
    color: #f16c5d;
}

.book-shop-detail-container .book-item-description-box .item-information .info-row .detail-container {
    float: right;
    width: calc(100% - 110px);
}

.book-shop-detail-container .book-item-description-box .item-information .info-row .detail-container a {
    color: #10567b;
}

.book-shop-detail-container .shop-item-title {
    font-size: 28px;
    line-height: 150%;
}

.book-shop-detail-container .shop-item-seller {
    margin-top: 15px;
    font-size: 20px;
}

.book-shop-detail-container .shop-item-seller {
    color: #10567b;
}

.book-shop-detail-container .shop-item-seller i {
    margin-right: 8px;
}

.book-shop-detail-container .shop-item-seller a {
    color: #f16c5d;
}

.book-shop-detail-container .shop-item-price {
    font-size: 28px;
    margin: 30px 0;
}

.book-shop-detail-container .original-price {
    text-decoration-line: line-through;
}

.book-shop-detail-container .new-price {
    font-size: 35px;
    color: #e12d2d;
    margin-left: 10px;
}

.book-shop-detail-container .add-to-cart-btn {
    padding: 15px 0;
    width: 80%;
    display: inline-block;
    background: #f16c5d;
    border-radius: 5px;
    color: #fff;
    text-align: center;
    margin: 10px 0;
    font-size: 18px;
}

.book-shop-detail-container .add-to-fav-btn {
    padding: 15px 0;
    width: 80%;
    display: inline-block;
    background: #fff;
    border-radius: 5px;
    color: #333;
    text-align: center;
    margin: 10px 0;
    font-size: 18px;
    border: 1px solid #333;
}

.book-shop-detail-container .remark-type-0 {
    background: #f16c5d;
}

.book-shop-detail-container .remark-type-1 {
    background: #f16c5d;
}

.book-shop-detail-container .remark-type-2 {
    background: #2e90b7;
}

.book-shop-detail-container .remark {
    padding: 2px 8px;
    color: #fff;
    margin-right: 8px;
    border-radius: 3px;
}

.book-shop-detail-container .remark i {
    margin-right: 5px;
}

.book-shop-detail-container .review-row {
    border-bottom: 1px solid #d3d3d5;
    padding: 15px 0;
}

.book-shop-detail-container .review-row.first {
    padding: 0 0 15px 0;
}

.book-shop-detail-container .first-row {
    margin-bottom: 7px;
    float: left;
    width: calc(100% - 80px);
}

.book-shop-detail-container .img-container {
    /*float: right;*/
}

.book-shop-detail-container .ranking {
    color: orange;
}

.read-more-container {
    text-align: center;
    border-bottom: 1px solid #d3d3d5;
    padding: 20px 0;
}

.fa.marked {
    color: orange;
}


.book-item-description-box .ranking-row-container {
    font-size: 20px;
    margin: 10px 0;
}

.book-item-description-box .ranking-row-container .ranking-text .mark {
    background: #10567b;
    padding: 2px 17px;
    color: #fff;
    margin-right: 5px;
    border-radius: 3px;
    letter-spacing: 3px;
}

.book-item-description-box .ranking-summary {
    background: #f16c5d;
    padding: 2px 10px;
    color: #fff;
    margin-right: 5px;
    border-radius: 3px;
    letter-spacing: 1px;
}


.book-item-description-box .ranking-summary i {
    margin-right: 5px;
}

.book-item-description-box .write-comment-btn {
    border: 1px solid #333;
    padding: 6px 10px;
    color: #333;
    border-radius: 5px;
    float: right;
    font-size: 16px;
}

.book-item-description-box .write-comment-btn i {
    margin-right: 5px;
}

.book-item-description-box .ranking-title {
    float: left;
}

.book-item-description-box .ranking-star {
    float: left;
    margin-left: 15px;
    color: orange;
}

.num-of-cm {
    text-decoration: underline;
    margin: 0 2px;
    font-weight: bold;
}

.bar {
    height: 18px;
    background-color: orange;
}

.side {
    float: left;
    width: 15%;
    margin-top: 5px;
}

.right {
    /*text-align: right;*/
}

.ranking-detail-row {
    padding-bottom: 15px;
    border-bottom: 1px solid #d3d3d5;
    margin: 15px 0;
}

.ranking-detail-row:after {
    content: "";
    display: table;
    clear: both;
}

.ranking-detail-row .right {
    /*text-align: right;*/
    padding-left: 10px;
}

/* The bar container */
.bar-container {
    width: 100%;
    background-color: #f1f1f1;
    text-align: center;
    color: white;
}

.middle {
    float: left;
    width: 70%;
    margin-top: 5px;
}

#ranking-detail-container .side {
    width: 20%;
    height: 18px;
}

#ranking-detail-container .right {
    width: 10%;
}

#ranking-detail-container .first-row {
    margin-bottom: 7px;
    float: left;
    width: calc(100% - 50px);
    max-width: 600px;
}

#ranking-detail-container .ranking {
    color: orange;
}

#ranking-detail-container .img-container {
    float: right;
}

#ranking-detail-container .review-row {
    border-bottom: 1px solid #d3d3d5;
    padding: 10px 0;
}

.book-shop-list-container .book-item {
    height: 340px;
}

/* ========================  Product Cart ================== */

.fixed-cart-container {
    visibility: hidden;
    opacity: 0;
    margin: 0;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    width: 300px;
    overflow: auto;
    background: #fff;
    z-index: 8000;
    color: #333;
    -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
    -ms-transition: all 0.4s;
    -o-transition: all 0.4s;
    transition: all 0.4s;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-box-shadow: 0 0 8px 0 rgba(80, 80, 80, 0.5);
    -moz-box-shadow: 0 0 8px 0 rgba(80, 80, 80, 0.5);
    box-shadow: 0 0 8px 0 rgba(80, 80, 80, 0.5)
}

.cart-side-opened .fixed-cart-container {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}

.fixed-cart-container .title {
    text-align: center;
    margin: 50px 0 20px 0;
    font-size: 18px;
}

.fixed-cart-container .cart-item-container {
    padding: 20px 20px;
    font-size: 18px;
}

.fixed-cart-container .cart-item {
    padding: 15px 0;
    border-bottom: 1px solid #000;
}

.fixed-cart-container .cart-item .img-container {
    float: left;
    width: 30%;
    overflow: hidden;
}

.fixed-cart-container .cart-item .img-container img {
    max-width: 100%;
    max-height: 100%;
    width: 100%;
}

.fixed-cart-container .cart-item .item-content {
    float: left;
    width: 65%;
    margin-left: 5%;
}

.fixed-cart-container .cart-item .cart-name {
    font-size: 16px;
}

.fixed-cart-container .cart-item .qty {
    margin: 3px 0;
    font-size: 14px;
}

.fixed-cart-container .cart-item .price {
    font-size: 14px;
}

.fixed-cart-container .total-container {
    padding: 20px 30px;
    font-size: 18px;
}

.fixed-cart-container .btn-container {
    text-align: center;
}

.fixed-cart-container .btn-container a {
    font-size: 18px;
    display: inline-block;
    background: #f16c5d;
    padding: 10px 65px;
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
}

.cart-empty {
    color: #000;
    font-size: 18px;
    text-align: center;
    padding: 30px 0;
}

.cart-side-opened .fixed-cart-container-mask {
    visibility: visible;
    opacity: 1;
}

.fixed-cart-container-mask {
    background: rgba(0, 0, 0, .5);
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 5000;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: all .4s;
    -moz-transition: all .4s;
    -ms-transition: all .4s;
    -o-transition: all .4s;
    transition: all .4s;
}

.cart-qty-container {
    position: relative;
    height: 46px;
    width: 46px;
}

.cart-qty-container .cart-qty {
    position: absolute;
    bottom: 3px;
    left: calc(calc(100% - 13px) / 2);
    font-size: 12px;
    color: #57babc;
    width: 13px;
    text-align: center;
    line-height: 15px;
}

.checkout-table {
    width: 100%;
    font-size: 15px;
}

.checkout-table tr th {
    background: #207270;
    color: #fff;
    border: 2px solid #fff;
}

.checkout-table tr {
    border-bottom: 2px solid #e6e7e8;
}

.checkout-table tr th, .checkout-table tr td {
    padding: 7px;
    text-align: center;
    vertical-align: middle;
}

.checkout-table tr td .item-img {
    max-width: 80px;
    border: 1px solid #e6e7e8;
    margin: 5px 0;
}

.checkout-table tr th .eng-text, .checkout-table tr td .eng-text {
    font-size: 11px;
}

.checkout-table tr td input {
    width: 70px;
    height: 30px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #e6e7e8;
}

.red-text {
    color: #c1272d;
}

.radio-label {
    text-align: left;
    color: #8d8d8d;
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
}

.radio-label .eng-text {
    font-size: 11px;
}

input[type=text]:not([name=search_keyword]):focus, input[type=number]:focus, input[type=email]:focus, textarea:focus {
    /*outline: 1px solid #f16c5d;*/
}

.checkout-submit-btn {
    background: linear-gradient(to top, #3A9393, #64BFC1);
    width: 200px;
    height: 45px;
    color: #fff;
    border-radius: 3px;
    border: none;
    cursor: pointer;
    font-size: 15px;
}

.menu-cart a {
    position: relative;
}

.menu-cart i {
    font-size: 26px;
}

.menu-cart-number {
    position: absolute;
    top: 9px;
    right: 2px;
    padding: 2px 4px;
    text-align: center;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    line-height: 1;
    background: #f16c5d;
    color: #fff;
    font-size: 12px;
}

.menu-message a {
    position: relative;
}

.menu-message i {
    font-size: 20px;
    margin-top: 3px;
}

.menu-message-number {
    position: absolute;
    top: 9px;
    right: 2px;
    padding: 2px 4px;
    text-align: center;
    -moz-border-radius: 8px;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    line-height: 1;
    background: #f16c5d;
    color: #fff;
    font-size: 12px;
}


/* ======================================================================== CHECKOUT ======================================================================== */

.wish_list_container {
    width: 80%;
    margin: 0 auto;
    text-align: left;
}

.checkout_container {
    width: 100%;
    margin: 60px auto 80px auto;
    text-align: left;
}

.wl_table {
    width: 100%;
}

.wl_table th {
    font-weight: normal;
    font-size: 15px;
    background: #10567b;
    padding: 10px 0 5px 0;
    color: #fff;
    border: 1px solid #10567b;
}

.wl_table tr.tl_row {
    border-bottom: 1px solid #c1c0be;
}

.wl_table tr.tl_row td {
    padding: 15px 0;
}

.wl_table tr td {
    vertical-align: middle;
    font-size: 14px;
}

.wl_table tr.co_row {
    border-bottom: 2px solid #c1c0be;
}

.wl_table tr.co_row td {
    padding: 15px 0;
    color: #706d65;
    text-align: center;
}

.wl_table tr.co_row td a {
    text-decoration: none;
    color: #706d65;
}

.wl_table tr td {
    vertical-align: middle;
    font-size: 15px;

}

.checkout_bt_container {
    margin-left: 15%;
    margin-top: 25px;
    width: 75%;
    border-top: 3px solid #f4f4f4;
    border-left: 3px solid #f4f4f4;
    border-right: 3px solid #f4f4f4;
    padding: 15px 2px;
    font-size: 17px;
    text-align: center;
}

.checkout_bt {
    cursor: pointer;
    margin-left: 15%;
    width: 75%;
    /* background: url(../images/redbutton.png); */
    background: #f16c5d;
    border: none;
    color: #fff;
    font-size: 15px;
    padding: 7px 0 5px 0;
    text-align: center;
}

.checkout-select {
    height: 30px;
    font-size: 14px;
    width: 85%;
    color: #706d65;
}

#delivery_method {
    margin-bottom: 10px;
}

#promo_code_input {
    height: 27px;
    font-size: 14px;
    width: 80%;
    color: #706d65;
    border: 1px solid #c1c0be;
}

#lp_dollar_input {
    height: 27px;
    font-size: 14px;
    width: 80%;
    color: #706d65;
    border: 1px solid #c1c0be;
}

.product-area .pd-area-title {
    width: 92%;
    height: 3px;
    margin: 45px auto 35px auto;
    text-align: center;
    border-bottom: solid 1px #333;
}

.product-area .pd-area-title .pd-area-title-text {
    background: #fff;
    padding: 0 20px;
    font-size: 19px;
    display: inline-block;
    margin: -10px 0 0 0;
    color: #333;
}

.wl_table tr.co_row td.img-container {
    padding-left: 20px;
}

.qty-input {
    font-size: 15px;
    width: 70%;
    height: 20px;
    text-align: center;
    border-radius: 2px;
    border: 1px solid #c1c0be;
}


.shipping-description {
    padding-right: 20px;
}

.cart-shipping-price {
    text-align: center;
}

.cart-promotion-amount {
    text-align: center;
}

.reg_left {
    float: left;
    width: 50%;
    text-align: left;
    font-size: 16px;
}

.reg_right {
    float: right;
    width: 45%
}

.heading {
    display: block;
    padding-top: 10px;
    padding-bottom: 10px;
    font-size: 24px;
}

.reg_label {
    display: block;
    padding-bottom: 20px;
}

.reg_input {
    width: 100%;
    height: 40px;
}

input {
    font-size: 20px;
    font: inherit;
}

.payment {
    border-spacing: 50em;
}

.order-summary {
    padding: 25px 2% 25px 5%;
    width: 100%;
    margin: 0 0 26px;
    background-color: #f5f5f5;
    font-size: 20px;
    text-align: left;
}

.order-summary .row {
    margin: 15px 0 0 0;
}

.summary-left {
    text-align: left;
    width: 70%;
    float: left;
    font-size: 14px;
}

.summary-right {
    font-size: 16px;
    text-align: right;
    width: 25%;
    float: left;
}

.summary-title {
    width: 100%;
}

.continue {
    display: block;
    width: 100%;
    border: none;
    background-color: #f16c5d;
    color: white;
    padding: 14px 28px;
    font-size: 16px;
    cursor: pointer;
    text-align: center;
    border-radius: 8px;
}

.space {
    padding-top: 10px;
    padding-bottom: 10px;
}

.step-2 {
    display: none;
}

.step-3 {
    display: none;
}

.step-4 {
    display: none;
}

#map {
    width: 100%;
    height: 400px;
    background-color: grey;
}

.checkout_container input {
    border-radius: 3px;
    border: 1px solid #ccc;
    padding: 1px 0 1px 10px;
}

.delivery-form .title {
    font-size: 18px;
    margin: 10px 0;
    text-decoration: underline;
    font-weight: bold;
}

.delivery-form .text {
    font-size: 14px;
    margin: 5px 0;
}

#sf_map {
    width: 100%;
    height: 250px;
    margin: 10px 0;
}

.sf-station-select, .district-select {
    width: 100%;
    margin: 10px 0;
    height: 30px;
    padding-left: 10px;
    border-radius: 3px;
    color: #6d6d6d;
    border: 1px solid #d9d9d9;
    font-size: 13px;
    background: #fff;
}

.choose-sf {
    background: #bdbdbd;
    color: #000;
    font-weight: bold;
    width: 50px;
    height: 20px;
    display: inline-block;
    text-align: center;
    line-height: 22px;
    border-radius: 2px;
    margin-top: 5px;
}

.payment_info {
    background: #f5f5f5;
    padding: 10px;
    margin-top: 10px;
    font-size: 14px;
}

.payment-method-row {
    border-left: 1px solid #12121226;
    border-right: 1px solid #12121226;
    border-top: 1px solid #12121226;
    padding: 15px 20px;
}

.payment-method-row label {
    margin-left: 5px;
    margin-bottom: -2px;
}

.payment-method-row.last {
    border-bottom: 1px solid #12121226;
}

.confirm-row {
    border-left: 1px solid #12121226;
    border-right: 1px solid #12121226;
    border-top: 1px solid #12121226;
    padding: 5px 10px;
}

.checkout_container input.error {
    border: 1px solid #ff6b6b !important;
}

.error-msg {
    display: none;
    color: #ff6b6b;
}

.address-input-container {
    margin: 10px 0;
}

.step-3 .space {
    text-align: center;
}

.right-fb .blog-more-item a {
    color: #333;
}

.checkout-success-text {
    font-size: 18px;
    text-align: center;
    margin: 20px 0;
}

.checkout-success-text img {
    max-width: 100%;
    margin-bottom: 40px;
}

.home-cate-container {
    float: left;
    width: 20%;
    border-left: 1px solid #f0f0f0;
}

.home-cate-container .item {
    font-size: 18px;
    padding: 12px 0 12px 15px;
    cursor: pointer;
}

.home-cate-container .item.active {
    border-left: 5px solid #f16c5d;
    color: #f16c5d;
    font-weight: bold;
}

.home-cate-container .item:hover {
    border-left: 5px solid #f16c5d;
    color: #f16c5d;
    font-weight: bold;
    transition: 0.3s;
}

.home-cate-more-btn {
    float: right;
    font-size: 22px;
    background: #10567b;
    padding: 13px 20px;
    border-radius: 5px;
}

.home-cate-more-btn a {
    /*color: #67565D;*/
    color: #fff;
}

.home-cate-item-container {
    float: right;
    width: 75%;
}

/* ======================================================================================== */

.ranking-inner-container {
    padding: 50px 0;
}

.ranking-page-container {
    padding-top: 90px;
    /*background-image: url(../images/rank-bg.jpg);*/
    background-size: cover;
}

.ranking-inner-container .left-title {
    float: left;
    width: 30%;
}

.ranking-inner-container .right-title {
    float: left;
    width: 20%;
}

.ranking-inner-container .left-title .title {
    font-size: 28px;
    background-image: url(../images/title-line.png);
    background-position: -25px bottom;
    background-repeat: no-repeat;
    line-height: 60px;
    height: 60px;
    text-align: left;
    margin: 15px 0;
}

.ranking-inner-container .right-title .title {
    font-size: 28px;
    background-image: url(../images/title-line.png);
    background-position: calc(100% + 25px) bottom;
    background-repeat: no-repeat;
    line-height: 60px;
    height: 60px;
    text-align: right;
    margin: 15px 0;
}

.ranking-inner-container .left-title .sub-title {
    font-size: 24px;
    line-height: 24px;
    border-left: 3px solid #f16c5d;
    padding: 5px 0 5px 20px;
    margin: 30px 0 5px 0;
}

.ranking-inner-container .left-title .description {
    font-size: 16px;
    margin: 15px 0;
}

.ranking-inner-container .right-title .sub-title {
    font-size: 24px;
    line-height: 24px;
    border-right: 3px solid #f16c5d;
    padding: 5px 20px 5px 0;
    margin: 30px 0 5px 0;
    text-align: right;
}

.ranking-inner-container .right-title .description {
    font-size: 16px;
    margin: 15px 0;
    text-align: right;
}

.ranking-inner-container .left-rank {
    float: left;
    width: 70%;
    padding-left: 10%;
}

.ranking-inner-container .right-rank {
    float: right;
    width: 70%;
}

.ranking-page-container .pd-area-title {
    width: 92%;
    height: 3px;
    margin: 45px auto 35px auto;
    text-align: center;
    border-bottom: solid 1px #333;
}

.ranking-page-container .pd-area-title .pd-area-title-text {
    background: #fff;
    padding: 0 20px;
    font-size: 19px;
    display: inline-block;
    margin: -10px 0 0 0;
    color: #333;
}

/*  Rank 1 Item*/

.ranking-inner-container .list-col .rank-item-1 .rank-number {
    color: #ffac2d;
    font-size: 28px;
}


.ranking-inner-container .list-col {
    width: 40%;
    float: left;
    margin-right: 10%;
}

.ranking-inner-container .list-col .rank-number {
    float: left;
    width: 10%;
    line-height: 100px;
    font-size: 22px;
}

.ranking-inner-container .list-col .img-area {
    float: left;
    width: 30%;
}

.ranking-inner-container .list-col .img-area img {
    max-width: 100%;
}

.ranking-inner-container .list-col .info {
    float: right;
    width: 55%;
    margin-left: 5%;
    padding: 15px 0;
}

.ranking-inner-container .list-col .mobile-img {
    display: none;
}

.ranking-inner-container .list-col .name {
    font-size: 16px;
    line-height: 130%;
    height: 80px;
    overflow: hidden;
}

.ranking-inner-container .list-col .name.lg-text {
    font-size: 20px;
}

.ranking-inner-container .list-col .author {
    font-size: 14px;
    margin: 5px 0;
    color: #6d6d6d;
}

.ranking-inner-container .list-item-container {
    border-bottom: 1px solid #c1c0be;
    padding: 10px 0;
}

.ranking-inner-container .list-item-container .original-price {
    font-size: 20px;
}

.ranking-inner-container .list-item-container .old-price {
    text-decoration-line: line-through;
    font-size: 15px;
}

.ranking-inner-container .list-item-container .new-price {
    font-size: 22px;
    color: #e12d2d;
}

.ranking-inner-container .list-item-container a {
    color: #333;
}

.ranking-inner-container .more-row {
    padding: 10px 0;
    font-size: 18px;
    margin: 30px 0;
}

.ranking-inner-container .more-row .update-time {
    float: left;
    margin-left: 50px;
}

.ranking-inner-container .more-row .center-icon {
    display: inline-block;
    margin: 0 auto;
}

.ranking-inner-container .more-row .right-icon {
    float: right;
    margin-right: 150px;
}

.ranking-inner-container .more-row .right-icon .btn {
    padding: 10px 10px;
    border: 2px solid #f16c5d;
    border-radius: 7px;
    background: #f16c5d;
    color: #fff;
}


.ranking-inner-container .more-row .right-icon .btn.style-2 {
    background: #10567b;
    border: 2px solid #10567b;
}

/* =================================================================================================*/

.book-shop-detail-container .swiper-container {
    width: 100%;
    margin: 20px auto;
}

.book-shop-detail-container .swiper-slide {
    font-size: 18px;
    background: #fff;
    /* Center slide text vertically */
}

.book-shop-detail-container .swiper-slide a {
    color: #333;
}

.book-shop-detail-container .swiper-slide .img-container {
    width: 100%;
    height: 144px;
    text-align: center;
    background: #f5f5f5;
    position: relative;
}

.book-shop-detail-container .swiper-slide .img-container img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.book-shop-detail-container .swiper-button-next, .swiper-container-rtl .swiper-button-prev {
    background-image: url(../images/right-arrow.png);
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
    top: 40%;
    right: 0;
}

.book-shop-detail-container .swiper-button-prev, .book-shop-detail-container .swiper-container-rtl .swiper-button-next {
    background-image: url(../images/left-arrow.png);
    width: 35px;
    height: 35px;
    background-size: 35px 35px;
    top: 40%;
    left: 0;
}

.book-shop-detail-container .swiper-slide .title-container {
    font-size: 18px;
    height: 53px;
    overflow: hidden;
}

.book-shop-detail-container .swiper-slide .title-container.eng-text {
    font-size: 14px;
}

.book-shop-detail-container .swiper-slide .author-container {
    font-size: 14px;
    color: #666;
    height: 19px;
    overflow: hidden;
}

.book-shop-detail-container .swiper-slide .price-container .original-price {
    font-size: 12px;
}

.book-shop-detail-container .swiper-slide .price-container .new-price {
    font-size: 16px;
    margin-left: 3px;
}

#hidden-comment-form {
}

#hidden-comment-form .cm-input-row {
    margin: 10px 0;
    font-size: 16px;
}

#hidden-comment-form .book-name {
    color: #f16c5d;
}

#hidden-comment-form i {
    margin-right: 3px;
}

#hidden-comment-form .data-input-row {
    margin-bottom: 25px;
}

#hidden-comment-form label {
    color: #333;
}

#hidden-comment-form select {
    width: 100%;
    border-radius: 5px;
    height: 30px;
}

#hidden-comment-form textarea {
    width: 100%;
    border-radius: 5px;
    resize: none;
}

#hidden-comment-form .submit-row {
    text-align: center;
    margin-top: 30px;
}

#hidden-comment-form .submit-btn {
    border-radius: 5px;
    background: #10567b;
    color: #fff;
    width: 200px;
    padding: 5px 30px;
}

#hidden-comment-form .submit-btn i {
    margin-right: 10px;
}

.book-shop-list-container .box-filter .box-list .cate-head label i {
    margin-right: 5px;
    width: 20px;
}

.used-book-container .box-filter .box-list .cate-head i {
    width: 25px;
}

/* ======================================= BLOG ============================================== */

.blog-cate-section {
    margin: 50px 0 0 0;
}

.blog-cate-section .home-cate-item-container .cate-item {
    height: 0;
    float: left;
    opacity: 0;
    width: 31%;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 2px 2px 5px #e5e5e5;
    transition: opacity .5s ease-in-out;
    background: #f0f0f0;
}

.blog-cate-section .home-cate-item-container .cate-item.active {
    display: block;
    opacity: 1;
    height: 200px;
    margin: 1%;
}

.blog-cate-section .home-cate-item-container .cate-item a {
    display: inline-block;
    color: #10567b;
    font-size: 17px;
}

.blog-cate-section .home-cate-item-container .cate-item a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all 0.7s;
}

.blog-cate-section .home-cate-item-container .cate-item a .text {
    position: absolute;
    bottom: 0;
    left: 0;
    line-height: 50px;
    height: 50px;
    background: #fff;
    width: 100%;
    padding: 0 10px;
    color: #666;
}

.blog-cate-section .home-cate-item-container .cate-item a .text.row-2 {
    line-height: 24px;
    font-size: 16px;
}

.blog-cate-section .home-cate-item-container .cate-item a .text.row-1 {
    line-height: 50px;
    font-size: 18px;
}


.blog-cate-section .home-cate-item-container .cate-item:hover img {
    transform: scale(1.1);
}

.blog-cate-section .top-container {
    padding: 0 2%;
    margin-bottom: 20px;
}

.blog-cate-section .top-container .title {
    float: left;
    font-size: 35px;
    color: #222222;
    display: inline-block;
    line-height: 100%;
}

.blog-cate-section .top-container .more-btn {
    padding: 20px 30px;
    background: #fff;
    box-shadow: 2px 2px 5px #e5e5e5;
    float: right;
    display: inline-block;
    color: #000;
    font-size: 17px;
    border-radius: 5px;
}

.school-level-shop-filter {
    display: none;
}

.for-mobile-title {
    display: none;
}

.footer-remark {
    padding: 5px 0;
}

.footer-remark a {
    color: #fff;
    font-size: 14px;
}

.left-blog-content {
    float: left;
    width: 70%;
}

.blog-data-container .category {
    background-color: #f16c5d;
    padding: 4px 10px;
    color: #fff;
    border-radius: 5px;
}

.blog-editor-area {
    font-size: 17px;
    letter-spacing: 1px;
}

.blog-data-container hr {
    margin: 20px 0;
}

/* ======================================================================= */

.blog-data-container .blog-cate-item-container .cate-item {
    height: 0;
    float: left;
    opacity: 0;
    width: 31%;
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 2px 2px 5px #e5e5e5;
    transition: opacity .5s ease-in-out;
    background: #f0f0f0;
}

.blog-data-container .blog-cate-item-container .cate-item.active {
    display: block;
    opacity: 1;
    height: 180px;
    margin: 1%;
}

.blog-data-container .blog-cate-item-container .cate-item a {
    display: inline-block;
    color: #10567b;
    font-size: 17px;
}

.blog-data-container .blog-cate-item-container .cate-item a img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transition: all 0.7s;
}

.blog-data-container .blog-cate-item-container .cate-item a .text {
    position: absolute;
    bottom: 0;
    left: 0;
    line-height: 50px;
    height: 50px;
    background: #fff;
    width: 100%;
    padding: 0 10px;
    color: #666;
}

.blog-data-container .blog-cate-item-container .cate-item a .text.row-2 {
    line-height: 24px;
    font-size: 16px;
}

.blog-data-container .blog-cate-item-container .cate-item a .text.row-1 {
    line-height: 50px;
    font-size: 18px;
}


.blog-data-container .blog-cate-item-container .cate-item:hover img {
    transform: scale(1.1);
}


.blog-data-container .title i {
    margin: 0 10px -2px 0;
    font-size: 28px;
}

.blog-sub-item {
    color: #333;
}

.blog-editor-area h1, .blog-editor-area h2 {
    font-family: "Noto Sans TC", Arial, sans-serif !important;
    font-weight: bold;
    margin: 40px 0 20px 0;
    text-decoration: underline;
}


.blog-editor-area h3 {
    font-family: "Noto Sans TC", Arial, sans-serif !important;
    font-weight: bold;
    margin: 40px 0 20px 0;
}

.blog-editor-area h1 {
    font-size: 24px;
    color: #f16c5d;
}

.blog-editor-area h2 {
    font-size: 22px;
}


.blog-editor-area h3 {
    font-size: 20px;
}

.blog-editor-area blockquote {
    padding: 15px 20px;
    border-style: solid;
    border-color: #ccc;
    border-left: solid 5px #f16c5d !important;
    color: #f16c5d !important;
    font-size: 18px;
    margin-bottom: 25px;
    background: #fafafa;
}

.blog-editor-area blockquote p {
    padding-left: 20px;
}

.blog-editor-area li {
    margin: 10px 0 10px 30px;
    list-style: disc;
}


.blog-editor-area .youtube {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.blog-editor-area iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


.easy-autocomplete {

}

.search-title {
    font-size: 28px;
    background-image: url(../images/title-line.png);
    background-position: center bottom;
    background-repeat: no-repeat;
    line-height: 60px;
    height: 60px;
    text-align: center;
    margin: 20px 0;
}

.message-out-container {
    width: 100%;
}

.message-out-container .message-left {
    float: left;
    width: 35%;
}

.message-out-container .message-right {
    float: left;
    width: 65%;
}

.message-out-container .inbox_people {
    background: #f8f8f8 none repeat scroll 0 0;
    float: left;
    overflow: hidden;
    width: 40%;
    border-right: 1px solid #c4c4c4;
}

.message-out-container .inbox_msg {
    border: 1px solid #c4c4c4;
    clear: both;
    overflow: hidden;
}

.message-out-container .top_spac {
    margin: 20px 0 0;
}


.message-out-container .recent_heading {
    float: left;
    width: 40%;
}

.message-out-container .srch_bar {
    display: inline-block;
    text-align: right;
    width: 60%;
    padding: 0;
}

.message-out-container .headind_srch {
    padding: 10px 29px 10px 20px;
    overflow: hidden;
    border-bottom: 1px solid #c4c4c4;
    border-right: 1px solid #e5e5e5;
}

.message-out-container .recent_heading h4 {
    color: #05728f;
    font-size: 21px;
    margin: auto;
}

.message-out-container .srch_bar .input-group-addon {
    margin: 0 0 0 -27px;
}

.message-out-container .chat_ib {
    max-height: 140px;
}

.message-out-container .chat_ib h5 .participant-name {
    font-size: 15px;
    color: #464646;
    margin: 0 0 8px 0;
}

.message-out-container .chat_ib h5 .chat_date {
    font-size: 13px;
    float: right;
}

.message-out-container .chat_ib p {
    font-size: 14px;
    color: #989898;
    margin: auto
}

.message-out-container .chat_img {
    float: left;
    width: 11%;
}

.message-out-container .chat_img img {
    width: 100%;
}

.message-out-container .chat_ib {
    float: left;
    padding: 0 0 0 15px;
    width: 88%;
}

.message-out-container .chat_people {
    overflow: hidden;
    clear: both;
}

.message-out-container .chat_list {
    border-bottom: 1px solid #c4c4c4;
    margin: 0;
    padding: 18px 16px 10px;
    cursor: pointer;
}

.message-out-container .inbox_chat {
    height: 550px;
    overflow-y: scroll;
}

.message-out-container .active_chat {
    background: #ebebeb;
}

.message-out-container .incoming_msg {
    overflow: hidden;
    height: 0;
    line-height: 0;
    border: 0;
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out;
    position: absolute;
    left: -1000px;
}

.message-out-container .incoming_msg.current {
    position: initial;
    height: auto;
    width: auto;
    opacity: 1;
    visibility: visible;
    line-height: 100%;
    margin: 26px 0 26px;
}


.message-out-container .incoming_msg_img {
    display: inline-block;
    width: 6%;
}


.message-out-container .incoming_msg_img img {
    width: 100%;

}

.message-out-container .received_msg {
    display: inline-block;
    padding: 0 0 0 10px;
    vertical-align: top;
    width: 92%;
}

.message-out-container .received_withd_msg p {
    background: #ebebeb none repeat scroll 0 0;
    border-radius: 3px;
    color: #646464;
    font-size: 14px;
    margin: 0;
    padding: 5px 10px 5px 12px;
    width: 100%;
}

.message-out-container .time_date {
    color: #747474;
    display: block;
    font-size: 12px;
    margin: 8px 0 0;
}

.message-out-container .received_withd_msg {
    width: 57%;
}

.message-out-container .mesgs {
    float: left;
    padding: 30px 15px 0 25px;
    width: 100%;
}

.message-out-container .sent_msg p {
    background: #f16c5d none repeat scroll 0 0;
    border-radius: 3px;
    color: #fff;
    font-size: 14px;
    margin: 0 5% 0 0;
    padding: 5px 10px 5px 12px;
    width: 95%;
}

.message-out-container .outgoing_msg {
    overflow: hidden;
    height: 0;
    line-height: 0;
    border: 0;
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease-in-out;
    position: absolute;
    left: -1000px;
}

.message-out-container .outgoing_msg.current {
    position: initial;
    height: auto;
    width: auto;
    opacity: 1;
    visibility: visible;
    line-height: 100%;
    margin: 26px 0 26px;
}

.message-out-container .sent_msg {
    float: right;
    width: 46%;
}

.message-out-container .input_msg_write input {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    color: #4c4c4c;
    font-size: 15px;
    min-height: 48px;
    width: 100%;
}

.message-out-container .input_msg_write input:focus {
    outline: none;
    border: none !important;
}

.message-out-container .type_msg {
    border-top: 1px solid #c4c4c4;
    position: relative;
}

.message-out-container .msg_send_btn {
    /*background: #05728f none repeat scroll 0 0;*/
    background: url("../images/submit-icon.png");
    border: medium none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    font-size: 17px;
    height: 33px;
    position: absolute;
    right: 0;
    top: 11px;
    width: 33px;
}

.message-out-container .msg_send_btn:focus {
    outline: none;
}

.message-out-container .msg_send_btn i {
    margin-right: 1px;
}


.message-out-container .messaging {
    padding: 0 0 50px 0;
}

.message-out-container .msg_history {
    height: 516px;
    overflow-y: auto;
}

.message-out-container .chat_list.prototype {
    display: none;
}


/* =================================== Member Detail =================================== */

.member-detail-container {
    min-height: 500px;
    padding: 100px 0;
}

.left-container {
    float: left;
    width: 30%;
    margin-right: 3%;
}

.right-container {
    float: left;
    width: 65%;
}

.content-part {
    line-height: 150%;
    width: 100%;
    background: #fafafa;
    padding: 15px;
    box-shadow: 1px 2px 1px -1px rgba(231, 231, 231, 0.9);
    margin: 20px 0;
    font-size: 15px;
}

.member-detail-left {
    float: left;
}

.member-detail-right {
    float: right;
    text-align: left;
    width: calc(100% - 150px);
}

.name-title {
    font-size: 20px;
    font-weight: bold;
}

.content-part .info-row {
    margin: 10px 0;
}

.content-part .info-row i {
    margin: 0 5px;
}

.content-part .info-row i.fa-envelope-o {
    /*margin-left: 5px;*/
}

.content-part table {
    width: 100%;
}

.content-part table tr th {
    text-align: left;
}

.content-part table tr th, .content-part table tr td {
    padding: 5px;
    vertical-align: middle;
}

.content-part .rating-bar {
    width: 80%;
    margin: 0 auto;
    height: 5px;
}

.content-part .rating-bar .cm-good {
    background: #8abc68;
    height: 5px;
    float: left;
}

.content-part .rating-bar .cm-normal {
    background: #feda6b;
    height: 5px;
    float: left;
}

.content-part .rating-bar .cm-bad {
    background: #d2232a;
    height: 5px;
    float: left;
}

.content-part .info-row .rate-text {
    float: left;
    width: 33%;
    text-align: center;
}

.content-part .rate-btn-container {
    margin-top: 10px;
}

.content-part .rate-btn-container .rate-btn {
    width: 30%;
    border: 1px solid #ccc;
    text-align: center;
    float: left;
    background: #fff;
    padding: 10px 0;
    margin: 0 1%;
    border-radius: 3px;
    box-shadow: 1px 2px 1px -1px rgba(231, 231, 231, 0.9);
    cursor: pointer;
}

.content-part .rate-btn-container .rate-btn i {
    margin-right: 5px;
}

.content-part .rate-btn-container .rate-btn:hover {
    background: #ccc;
}

.reviews-row {
    padding-left: 10%;
}

.member-function-btn i {
    margin: 0 3px;
}

.empty-msg {
    text-align: center;
    padding-bottom: 15px;
    font-size: 18px;
}

.member-href-btn {
    padding: 5px 15px;
    font-size: 18px;
    background: #f16c5d;
    color: #fff;
    border-radius: 5px;
}

.member-href-btn i {
    margin-right: 5px;
}

.booklist-img-container {
    max-width: 50px;
    max-height: 50px;
    background: #f6f5f6;
    text-align: center;
    overflow: hidden;
    margin: 0 auto;
}

.booklist-img-container img {
    max-height: 100%;
    max-width: 100%;
    vertical-align: middle;
}

.member-part-container table tr td.align-mid {
    text-align: center;
}

.new-dot {
    color: #f16c5d;
}

.flash-icon {
    -webkit-animation: flash linear 2.5s infinite;
    animation: flash linear 2.5s infinite;
}

@-webkit-keyframes flash {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .3;
    }
    100% {
        opacity: 1;
    }
}

@keyframes flash {
    0% {
        opacity: 1;
    }
    50% {
        opacity: .3;
    }
    100% {
        opacity: 1;
    }
}

.qty-button-delete {
    cursor: pointer;
}

.abs-btn {
    height: 40px;
    width: 40px;
    position: fixed;
    right: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .05);
    overflow: hidden;
    text-indent: 100%;
    white-space: nowrap;
    border-radius: 50%;
    z-index: 9999;
    /*opacity: 0.8;*/
    transition: all .3s;
}

.abs-btn:hover {
    opacity: 1;
}

.abs-btn i {
    position: absolute;
    color: #fff;
}

.upload-book-abs-btn {
    bottom: 90px;
    background: url("../images/abs-1.png");
}

.whatsapp-abs-btn {
    bottom: 40px;
    background: url("../images/abs-2.png");
}


.book-list-message {
    padding: 2px 30px;
    background: #fafafa;
}

.book-list-message i {
    margin-right: 10px;
}

.book-list-message a {
    margin-left: 10px;
}


.no-msg-container {
    text-align: center;
    font-size: 20px;
}

.list-banner.home-dsechi {
    text-align: center;
    width: 100%;
    height: 180px;
    background-image: url("../images/website-dsechi-banner.jpg");
    background-size: cover;
    background-position: center;
}




@media screen and (max-width: 1300px) and (min-width: 1024px) {

    .swiper-container .slideshow-mask-left, .swiper-container .slideshow-mask-right {
        display: none;
    }

    .main-area {
        width: 1100px;
    }

    .home-top-search .input-container {
        margin-left: 10px;
        width: 200px;
    }

    .home-top-search .home-input {
        width: 200px;
    }

    .book-search-area .input-container {
        margin-left: 15px;
        width: 14%;
    }
    .main-area
    .search-area, .hd-search-input {
        /*display: none;*/
        width: 200px;
    }

    .header .nav li a.lv1 {
        padding: 0 5px;
    }

    .search-area {
        width: 200px;
        margin-left: 0;
    }


    .right-highlight-item .blog-description .title {
        font-size: 16px;
    }

    .right-highlight-item {
        height: 160px;
    }

    .home-cate-section .home-cate-item-container .cate-item.active {
        height: 180px;
    }
}